Add device controls to the simple chatbot example

examples/simple-chatbot/client/javascript/src/style.css

@@ -10,7 +10,8 @@ body {
   margin: 0 auto;
 }
 
-.status-bar {
+.status-bar,
+.device-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -20,7 +21,19 @@ body {
   margin-bottom: 20px;
 }
 
-.controls button {
+.controls,
+.device-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px; /* Adds spacing between elements */
+}
+
+.device-controls {
+  margin-left: auto;
+}
+
+.controls button,
+.device-controls button {
   padding: 8px 16px;
   margin-left: 10px;
   border: none;
@@ -28,6 +41,27 @@ body {
   cursor: pointer;
 }
 
+#bot-selector,
+#device-selector {
+  padding: 8px 16px;
+  padding-right: 40px;
+  border: none;
+  border-radius: 4px;
+  background-color: #6c757d; /* Gray background */
+  color: white; /* White text */
+  cursor: pointer;
+  appearance: none; /* Removes default browser styling for dropdowns */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); /* Custom arrow */
+  background-repeat: no-repeat;
+  background-position: right 8px center; /* Position the arrow */
+}
+
+#bot-selector:focus,
+#device-selector:focus {
+  outline: none;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); /* Add a subtle focus effect */
+}
+
 #connect-btn {
   background-color: #4caf50;
   color: white;
@@ -38,6 +72,9 @@ body {
   color: white;
 }
 
+#mic-toggle-btn {
+}
+
 button:disabled {
   opacity: 0.5;
   cursor: not-allowed;