feat: style the voice input inside the input box

Azure-Samples · Nov 8, 2023 · 1a4794d · 1a4794d
1 parent ba16c15
commit 1a4794d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 31 deletions.
diff --git a/packages/chat-component/src/main.ts b/packages/chat-component/src/main.ts
@@ -648,32 +648,34 @@ export class ChatComponent extends LitElement {
             class="form__container ${this.inputPosition === 'sticky' ? 'form__container-sticky' : ''}"
           >
             <div class="chatbox__container container-col container-row">
-              <input
-                class="chatbox__input"
-                data-testid="question-input"
-                id="question-input"
-                placeholder="${globalConfig.CHAT_INPUT_PLACEHOLDER}"
-                aria-labelledby="chatbox-label"
-                id="chatbox"
-                name="chatbox"
-                type="text"
-                :value=""
-                ?disabled="${this.isDisabled}"
-                autocomplete="off"
-                @keyup="${this.handleOnInputChange}"
-              />
-              ${this.showVoiceInput
-                ? html` <button
-                    title="${this.enableVoiceListening
-                      ? globalConfig.CHAT_VOICE_REC_BUTTON_LABEL_TEXT
-                      : globalConfig.CHAT_VOICE_BUTTON_LABEL_TEXT}"
-                    class="chatbox__button ${this.enableVoiceListening ? 'recording' : 'not-recording'}"
-                    ?disabled="${!this.showVoiceInput}"
-                    @click="${this.handleVoiceInput}"
-                  >
-                    ${this.enableVoiceListening ? unsafeSVG(iconMicOn) : unsafeSVG(iconMicOff)}
-                  </button>`
-                : ''}
+              <div class="chatbox__input-container display-flex-grow container-row">
+                <input
+                  class="chatbox__input display-flex-grow"
+                  data-testid="question-input"
+                  id="question-input"
+                  placeholder="${globalConfig.CHAT_INPUT_PLACEHOLDER}"
+                  aria-labelledby="chatbox-label"
+                  id="chatbox"
+                  name="chatbox"
+                  type="text"
+                  :value=""
+                  ?disabled="${this.isDisabled}"
+                  autocomplete="off"
+                  @keyup="${this.handleOnInputChange}"
+                />
+                ${this.showVoiceInput
+                  ? html` <button
+                      title="${this.enableVoiceListening
+                        ? globalConfig.CHAT_VOICE_REC_BUTTON_LABEL_TEXT
+                        : globalConfig.CHAT_VOICE_BUTTON_LABEL_TEXT}"
+                      class="chatbox__button no-shadow ${this.enableVoiceListening ? 'recording' : 'not-recording'}"
+                      ?disabled="${!this.showVoiceInput}"
+                      @click="${this.handleVoiceInput}"
+                    >
+                      ${this.enableVoiceListening ? unsafeSVG(iconMicOn) : unsafeSVG(iconMicOff)}
+                    </button>`
+                  : ''}
+              </div>
               <button
                 class="chatbox__button"
                 data-testid="submit-question-button"

diff --git a/packages/chat-component/src/style.ts b/packages/chat-component/src/style.ts
@@ -91,8 +91,8 @@ export const mainStyle = css`
     display: none;
     visibility: hidden;
   }
-  .display-flex {
-    display: flex;
+  .display-flex-grow {
+    flex-grow: 1;
   }
   .container-col {
     display: flex;
@@ -362,19 +362,34 @@ export const mainStyle = css`
     background: var(--accent-dark);
     border-radius: 50%;
     color: var(--white);
-    font-wdafaeight: bold;
+    font-weight: bold;
     height: 20px;
     width: 20px;
     cursor: pointer;
   }
-  .chatbox__input {
+  .no-shadow {
+    box-shadow: none;
+  }
+  .chatbox__input-container {
+    display: flex;
+    border: 1px solid var(--black);
     background: var(--white);
-    color: var(--text-color);
     border-radius: 4px;
+  }
+  .chatbox__input-container:focus-within {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
+  .chatbox__input {
+    background: transparent;
+    color: var(--text-color);
+    border: none;
     padding: 8px;
     flex: 1 1 auto;
     font-size: 1rem;
   }
+  .chatbox__input:focus-visible {
+    outline: none;
+  }
   .chat__list {
     color: var(--text-color);
     display: flex;