feat: multiple lines text input, enter to send, shift + enter to …

…break line
josStorer · Mar 5, 2023 · d36fcc2 · d36fcc2
1 parent 00dd9c6
commit d36fcc2
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 42 deletions.
diff --git a/src/content-script/ChatGPTQuery.jsx b/src/content-script/ChatGPTQuery.jsx
@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react'
+import { memo, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { MarkdownRender } from './markdown.jsx'
 import Browser from 'webextension-polyfill'
@@ -81,31 +81,42 @@ TalkItem.propTypes = {
 
 function Interact({ onSubmit, enabled }) {
   const [value, setValue] = useState('')
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    inputRef.current.style.height = 'auto'
+    const computed = window.getComputedStyle(inputRef.current)
+    const height =
+      parseInt(computed.getPropertyValue('border-top-width'), 10) +
+      parseInt(computed.getPropertyValue('padding-top'), 10) +
+      inputRef.current.scrollHeight +
+      parseInt(computed.getPropertyValue('padding-bottom'), 10) +
+      parseInt(computed.getPropertyValue('border-bottom-width'), 10)
+
+    inputRef.current.style.height = `${height}px`
+  })
+
+  const onKeyDown = (e) => {
+    if (e.keyCode === 13 && e.shiftKey === false) {
+      e.preventDefault()
+      if (!value) return
+      onSubmit(value)
+      setValue('')
+    }
+  }
 
   return (
-    <form
-      className="interact-container"
-      id="interact"
-      onSubmit={(e) => {
-        e.preventDefault()
-        if (!value) return
-        onSubmit(value)
-        setValue('')
-      }}
-    >
-      <input
-        disabled={!enabled}
-        className="interact-input"
-        type="text"
-        placeholder={
-          enabled
-            ? 'Type your question here'
-            : 'Wait for the answer to finish and then continue here'
-        }
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-      />
-    </form>
+    <textarea
+      ref={inputRef}
+      disabled={!enabled}
+      className="interact-input"
+      placeholder={
+        enabled ? 'Type your question here' : 'Wait for the answer to finish and then continue here'
+      }
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onKeyDown={onKeyDown}
+    />
   )
 }
 

diff --git a/src/content-script/styles.scss b/src/content-script/styles.scss
@@ -160,24 +160,16 @@
     color: #ec4336;
   }
 
-  .interact-container {
-    position: relative;
-    font-size: 15px;
-
-    .interact-input {
-      box-sizing: border-box;
-      padding: 0 15px;
-      height: 35px;
-      border: 0;
-      border-top: 1px solid var(--theme-border-color);
-      width: 100%;
-      background-color: var(--theme-color);
-      color: var(--font-color);
-
-      &:disabled {
-        background-color: var(--theme-border-color);
-      }
-    }
+  .interact-input {
+    box-sizing: border-box;
+    padding: 5px 15px;
+    border: 0;
+    border-top: 1px solid var(--theme-border-color);
+    width: 100%;
+    background-color: var(--theme-color);
+    color: var(--font-color);
+    resize: none;
+    max-height: 240px;
   }
 }