update style for text area

twinnydotdev · Apr 18, 2024 · 0fef27a · 0fef27a
1 parent f9326d1
commit 0fef27a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 10 deletions.
diff --git a/src/webview/chat.tsx b/src/webview/chat.tsx
@@ -15,7 +15,7 @@ import {
   USER
 } from '../common/constants'
 
-import {
+import useAutosizeTextArea, {
   useConversationHistory,
   useSelection,
   useTheme,
@@ -62,6 +62,7 @@ export const Chat = () => {
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const chatRef = useRef<any>(null) // TODO: type...
+  useAutosizeTextArea(chatRef, inputText)
 
   const scrollBottom = () => {
     if (!isAutoScrolledEnabled) return
@@ -269,11 +270,9 @@ export const Chat = () => {
     <VSCodePanelView>
       <div className={styles.container}>
         <h4 className={styles.title}>
-          {conversation?.title ? (
-            conversation?.title
-          ) : (
-            generatingRef.current && <span>New conversation</span>
-          )}
+          {conversation?.title
+            ? conversation?.title
+            : generatingRef.current && <span>New conversation</span>}
         </h4>
         <div className={styles.markdown} ref={markdownRef}>
           {messages?.map((message) => (
@@ -349,13 +348,13 @@ export const Chat = () => {
         </div>
         <form>
           <div className={styles.chatBox}>
-            <VSCodeTextArea
+            <textarea
               ref={chatRef}
               disabled={generatingRef.current}
               placeholder="Message twinny"
+              rows={1}
               value={inputText}
               className={styles.chatInput}
-              rows={4}
               onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
                 const target = e.target as HTMLTextAreaElement
                 if (e.key === 'Enter' && !e.ctrlKey) {
@@ -372,6 +371,13 @@ export const Chat = () => {
                 setInputText(event.target.value)
               }}
             />
+            <div
+              role="button"
+              onClick={() => handleSubmitForm(inputText)}
+              className={styles.chatSubmit}
+            >
+              <span className="codicon codicon-send"></span>
+            </div>
           </div>
         </form>
       </div>

diff --git a/src/webview/hooks.ts b/src/webview/hooks.ts
@@ -381,3 +381,15 @@ export const useOllamaModels = () => {
 
   return { models }
 }
+
+const useAutosizeTextArea = (chatRef: any, value: string) => {
+  useEffect(() => {
+    if (chatRef) {
+      chatRef.current.style.height = '0px'
+      const scrollHeight = chatRef.current.scrollHeight
+      chatRef.current.style.height = `${scrollHeight + 5}px`
+    }
+  }, [chatRef, value])
+}
+
+export default useAutosizeTextArea
diff --git a/src/webview/index.module.css b/src/webview/index.module.css
@@ -97,13 +97,35 @@ pre code {
   justify-content: center;
 }
 
-.chatbox,
-.send {
+.chatBox {
   margin-top: 7px;
+  position: relative;
 }
 
 .chatInput {
   border-radius: 5px;
+  box-sizing: border-box;
+  position: relative;
+  color: var(--input-foreground);
+  background: var(--input-background);
+  border: calc(var(--border-width) * 1px) solid var(--dropdown-border);
+  font-size: var(--type-ramp-base-font-size);
+  line-height: var(--type-ramp-base-line-height);
+  padding: calc(var(--design-unit) * 2px + 1px);
+  width: 100%;
+  min-width: var(--input-min-width);
+  font-family: var(--vscode-font-family);
+  resize: none;
+  overflow: hidden;
+}
+
+.chatSubmit {
+  position: absolute;
+  bottom: 7px;
+  right: 5px;
+  cursor: pointer;
+  padding: 5px;
+  background-color: var(--input-background);
 }
 
 .chatOptions {