aichat: input is growable

brave · Dec 13, 2023 · 5e80625 · 5e80625
1 parent cc341bd
commit 5e80625
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 48 deletions.
diff --git a/components/ai_chat/resources/page/components/input_box/index.tsx b/components/ai_chat/resources/page/components/input_box/index.tsx
@@ -8,6 +8,7 @@ import * as React from 'react'
 import classnames from 'classnames'
 import { getLocale } from '$web-common/locale'
 import Icon from '@brave/leo/react/icon'
+import Button from '@brave/leo/react/button'
 
 import styles from './style.module.scss'
 import DataContext from '../../state/context'
@@ -24,7 +25,9 @@ function InputBox () {
   const isCharLimitApproaching = inputText.length >= CHAR_LIMIT_THRESHOLD
 
   const onInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const parentNode = e.target.parentNode as HTMLDivElement
     setInputText(e.target.value)
+    parentNode.dataset.replicatedValue = e.target.value
   }
 
   const submitInputTextToAPI = () => {
@@ -36,7 +39,7 @@ function InputBox () {
     setInputText('')
   }
 
-  const handleSubmit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const handleSubmit = (e: CustomEvent<any>) => {
     e.preventDefault()
     submitInputTextToAPI()
   }
@@ -52,37 +55,38 @@ function InputBox () {
   }
 
   return (
-    <div className={styles.container}>
-      <form className={styles.form}>
-        <div className={styles.textareaBox}>
-          <textarea
-            className={styles.textarea}
-            placeholder={getLocale('placeholderLabel')}
-            onChange={onInputChange}
-            onKeyDown={onUserPressEnter}
-            value={inputText}
-            autoFocus
-          />
-          <div className={classnames({
-            [styles.counterText]: true,
-            [styles.counterTextVisible]: isCharLimitApproaching,
-            [styles.counterTextError]: isCharLimitExceeded
-          })}>
-            {`${inputText.length} / ${MAX_INPUT_CHAR}`}
-          </div>
+    <form className={styles.form}>
+      <div className={styles.growWrap}>
+        <textarea
+          className={styles.textarea}
+          placeholder={getLocale('placeholderLabel')}
+          onChange={onInputChange}
+          onKeyDown={onUserPressEnter}
+          value={inputText}
+          autoFocus
+          rows={1}
+        />
+      </div>
+      {isCharLimitApproaching && (
+        <div className={classnames({
+          [styles.counterText]: true,
+          [styles.counterTextVisible]: isCharLimitApproaching,
+          [styles.counterTextError]: isCharLimitExceeded
+        })}>
+          {`${inputText.length} / ${MAX_INPUT_CHAR}`}
         </div>
-        <div>
-          <button
-            className={styles.buttonSend}
-            onClick={handleSubmit}
-            disabled={context.shouldDisableUserInput}
-            title={getLocale('sendChatButtonLabel')}
+      )}
+      <div className={styles.actionsContainer}>
+        <Button
+          kind="plain-faint"
+          onClick={handleSubmit}
+          disabled={context.shouldDisableUserInput}
+          title={getLocale('sendChatButtonLabel')}
           >
-            <Icon name='send' />
-          </button>
-        </div>
-      </form>
-    </div>
+          <Icon name='send' />
+        </Button>
+      </div>
+    </form>
   )
 }
 

diff --git a/components/ai_chat/resources/page/components/input_box/style.module.scss b/components/ai_chat/resources/page/components/input_box/style.module.scss
@@ -9,7 +9,12 @@
 }
 
 .form {
-  display: flex;
+  border-radius: var(--leo-radius-m);
+  border: 1px solid var(--leo-color-divider-strong);
+  width: 100%;
+  font: var(--leo-font-secondary-default-regular);
+  color: var(--leo-color-text-primary);
+  position: relative;
 
   &:has(textarea:disabled) {
     border-color: var(--leo-color-divider-subtle);
@@ -21,19 +26,15 @@
   }
 }
 
-.textareaBox {
-  width: 100%;
-  font: var(--leo-font-default-regular);
-  color: var(--leo-color-text-primary);
-}
-
 .textarea {
   width: 100%;
-  padding: 10px 16px;
+  padding: 10px var(--leo-spacing-xl);
   resize: none;
   background-color: transparent;
   border: 0;
-
+  resize: none;
+  overflow: hidden;
+  grid-area: 1 / 1 / 2 / 2;
 
   &:focus {
     outline: none;
@@ -44,16 +45,27 @@
   }
 }
 
-.buttonSend {
-  background-color: transparent;
-  border: 0;
-  padding: 14px;
-  color: var(--leo-color-icon-default);
-  cursor: pointer;
+.growWrap {
+  display: grid;
+  grid-template-columns: calc(100% - 20px);
+  max-height: 300px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--leo-color-gray-20);
+    border-radius: var(--leo-spacing-m);
+  }
 
-  &:disabled {
-    color: var(--leo-color-icon-disabled);
-    cursor: not-allowed;
+  &::after {
+    content: attr(data-replicated-value) " ";
+    white-space: pre-wrap;
+    visibility: hidden;
+    padding: 10px var(--leo-spacing-xl);
+    grid-area: 1 / 1 / 2 / 2;
   }
 }
 
@@ -97,3 +109,8 @@
   color: var(--leo-color-systemfeedback-error-icon);
 }
 
+.actionsContainer {
+  position: absolute;
+  top: 2px;
+  right: var(--leo-spacing-m);
+}