Merge branch 'main' into refactor-with-mst-2

concord-consortium · Dec 3, 2024 · cd9b2f0 · cd9b2f0
2 parents fb77120 + 67d677e
commit cd9b2f0
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 35 deletions.
diff --git a/src/assets/send-icon.svg b/src/assets/send-icon.svg
diff --git a/src/components/App.scss b/src/components/App.scss
@@ -27,10 +27,6 @@
     height: 0;
     margin: 20px 0 0;
   }
-  .buttons {
-    display: flex;
-    flex-direction: column;
-  }
 
   button {
     margin: 10px;
@@ -61,29 +57,6 @@
       }
     }
   }
-  .response-area {
-    display: flex;
-    flex-direction: column;
-    span {
-      position: relative;
-      top: 0;
-      left: 0;
-    }
-    .response {
-      resize: vertical;
-      min-height: 2em;
-      height: 10em;
-      overflow-y: scroll;
-      border: thin solid darkslategrey;
-      background-color: rgba(0,0,255,0.1);
-      margin: 10px;
-      padding: 0;
-      font-size: small;
-      text-align: left;
-      white-space: pre-wrap;
-      user-select: text;
-    }
-  }
 
   .confirmation-message, .error-message {
     font-size: .75rem;

diff --git a/src/components/chat-input.scss b/src/components/chat-input.scss
@@ -1,7 +1,8 @@
 @use "vars" as *;
 
 .chat-input {
-  margin-top: 10px;
+  margin: 10px 0;
+  position: relative;
 
   fieldset {
     border: none;
@@ -23,10 +24,14 @@
     align-items: center;
     display: flex;
     flex-wrap: nowrap;
+    height: 32px;
     justify-content: space-between;
-    margin: 10px 0;
+    left: 8px;
+    margin: 0;
     padding: 0;
-    width: 100%;
+    position: absolute;
+    top: 55px;
+    width: calc(100% - 16px);
 
     button {
       display: block;
@@ -35,7 +40,19 @@
       width: auto;
 
       &.send {
+        background: transparent url(../assets/send-icon.svg) 4px 4px no-repeat;
+        border: none;
+        border-radius: 6px;
+        color: $dark-gray;
+        cursor: pointer;
+        font-family: 'Montserrat', sans-serif;
+        font-size: .75rem;
+        height: 32px;
+        margin-left: auto;
         order: 2;
+        overflow: hidden;
+        text-indent: -9999px;
+        width: 32px;
       }
       &.dictate {
         order: 1;

diff --git a/src/components/chat-input.test.tsx b/src/components/chat-input.test.tsx
@@ -33,7 +33,6 @@ describe("test chat input component", () => {
     expect(inputError).not.toBeInTheDocument();
     expect(chatInputTextarea).not.toHaveAttribute("aria-describedby");
     expect(chatInputTextarea).toHaveAttribute("aria-invalid", "false");
-    expect(chatInputTextarea).not.toHaveAttribute("placeholder", "Ask DAVAI about the data");
     expect(mockHandleSubmit).toHaveBeenCalled();
   });
 });
diff --git a/src/components/chat-input.tsx b/src/components/chat-input.tsx
@@ -16,7 +16,6 @@ export const ChatInputComponent = ({keyboardShortcutEnabled, shortcutKeys, onKey
   // const [browserSupportsDictation, setBrowserSupportsDictation] = useState(false);
   // const [dictationEnabled, setDictationEnabled] = useState(false);
   const [inputValue, setInputValue] = useState("");
-  const [showPlaceholder, setShowPlaceholder] = useState(true);
   const [showError, setShowError] = useState(false);
 
   const handleSubmit = (event?: FormEvent) => {
@@ -29,7 +28,6 @@ export const ChatInputComponent = ({keyboardShortcutEnabled, shortcutKeys, onKey
     } else {
       onSubmit(inputValue);
       setInputValue("");
-      setShowPlaceholder(false);
       textAreaRef.current?.focus();
       setShowError(false);
     }
@@ -159,7 +157,7 @@ export const ChatInputComponent = ({keyboardShortcutEnabled, shortcutKeys, onKey
             aria-invalid={showError}
             data-testid="chat-input-textarea"
             id="chat-input"
-            placeholder={showPlaceholder ? "Ask DAVAI about the data" : ""}
+            placeholder={"Ask DAVAI about the data"}
             ref={textAreaRef}
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}

diff --git a/src/components/keyboard-shortcut-controls.tsx b/src/components/keyboard-shortcut-controls.tsx
@@ -22,7 +22,7 @@ export const KeyboardShortcutControls = (props: IProps) => {
   const handleCustomizeShortcut = (event: FormEvent) => {
     event.preventDefault();
     const form = event.target as HTMLInputElement;
-    const shortcut = form.querySelector("input")?.value;
+    const shortcut = form.querySelector("input")?.value.trim();
     if (shortcut) {
       onCustomizeShortcut?.(shortcut);
       setShowError(false);