From ef3d89f33ee4307de10511f868af455a60a22487 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Sat, 11 Nov 2023 17:22:54 +0700
Subject: [PATCH] suppoer multiple line input using textarea instead

---
 uikit/src/index.ts                           |  1 +
 uikit/src/main.scss                          |  1 +
 uikit/src/textarea/index.tsx                 | 21 +++++++++
 uikit/src/textarea/styles.scss               |  6 +++
 web/screens/Chat/SimpleTextMessage/index.tsx |  7 ++-
 web/screens/Chat/index.tsx                   | 45 ++++++++++++++------
 6 files changed, 65 insertions(+), 16 deletions(-)
 create mode 100644 uikit/src/textarea/index.tsx
 create mode 100644 uikit/src/textarea/styles.scss

diff --git a/uikit/src/index.ts b/uikit/src/index.ts
index 39f4e1352..67c3af93f 100644
--- a/uikit/src/index.ts
+++ b/uikit/src/index.ts
@@ -9,3 +9,4 @@ export * from './badge'
 export * from './tooltip'
 export * from './modal'
 export * from './command'
+export * from './textarea'
diff --git a/uikit/src/main.scss b/uikit/src/main.scss
index a17660689..562e09532 100644
--- a/uikit/src/main.scss
+++ b/uikit/src/main.scss
@@ -13,6 +13,7 @@
 @import './tooltip/styles.scss';
 @import './modal/styles.scss';
 @import './command/styles.scss';
+@import './textarea/styles.scss';
 
 .animate-spin {
   animation: spin 1s linear infinite;
diff --git a/uikit/src/textarea/index.tsx b/uikit/src/textarea/index.tsx
new file mode 100644
index 000000000..2411342ef
--- /dev/null
+++ b/uikit/src/textarea/index.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import { twMerge } from 'tailwind-merge'
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={twMerge('textarea-input', className)}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }
diff --git a/uikit/src/textarea/styles.scss b/uikit/src/textarea/styles.scss
new file mode 100644
index 000000000..3bc846b8a
--- /dev/null
+++ b/uikit/src/textarea/styles.scss
@@ -0,0 +1,6 @@
+.textarea-input {
+  @apply border-border placeholder:text-muted-foreground flex w-full rounded-md border bg-transparent px-3 py-2 transition-colors;
+  @apply disabled:cursor-not-allowed disabled:opacity-50;
+  @apply focus-visible:ring-secondary focus-visible:outline-none focus-visible:ring-1;
+  @apply file:border-0 file:bg-transparent file:font-medium;
+}
diff --git a/web/screens/Chat/SimpleTextMessage/index.tsx b/web/screens/Chat/SimpleTextMessage/index.tsx
index 6b996495e..3cedd62a7 100644
--- a/web/screens/Chat/SimpleTextMessage/index.tsx
+++ b/web/screens/Chat/SimpleTextMessage/index.tsx
@@ -80,8 +80,11 @@ const SimpleTextMessage: React.FC<Props> = ({
           <BubbleLoader />
         ) : (
           <>
-            <span
-              className={'message text-[15px] font-normal leading-relaxed'}
+            <div
+              className={twMerge(
+                'message flex flex-grow flex-col gap-y-2 text-[15px] font-normal leading-relaxed',
+                isUser && 'whitespace-pre-wrap break-words'
+              )}
               // eslint-disable-next-line @typescript-eslint/naming-convention
               dangerouslySetInnerHTML={{ __html: parsedText }}
             />
diff --git a/web/screens/Chat/index.tsx b/web/screens/Chat/index.tsx
index 223ebb47b..9dbe8cf2d 100644
--- a/web/screens/Chat/index.tsx
+++ b/web/screens/Chat/index.tsx
@@ -1,7 +1,7 @@
-import { Fragment, useEffect } from 'react'
+import { Fragment, useEffect, useRef } from 'react'
 
 import { Model } from '@janhq/core/lib/types'
-import { Input, Button, Badge } from '@janhq/uikit'
+import { Button, Badge, Textarea } from '@janhq/uikit'
 
 import { useAtom, useAtomValue } from 'jotai'
 import { Trash2Icon } from 'lucide-react'
@@ -54,13 +54,15 @@ const ChatScreen = () => {
   const conversations = useAtomValue(userConversationsAtom)
   const isEnableChat = (currentConvo && activeModel) || conversations.length > 0
 
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
   useEffect(() => {
     getUserConversations()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const handleMessageChange = (value: string) => {
-    setCurrentPrompt(value)
+  const handleMessageChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCurrentPrompt(e.target.value)
   }
 
   const handleSendMessage = async () => {
@@ -71,6 +73,7 @@ const ChatScreen = () => {
       await requestCreateConvo(activeModel as Model)
     }
   }
+
   useEffect(() => {
     if (isWaitingToSend && activeConversationId) {
       setIsWaitingToSend(false)
@@ -79,12 +82,24 @@ const ChatScreen = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [waitingToSendMessage, activeConversationId])
 
-  const handleKeyDown = async (
-    event: React.KeyboardEvent<HTMLInputElement>
-  ) => {
-    if (event.key === 'Enter') {
-      if (!event.shiftKey) {
-        event.preventDefault()
+  useEffect(() => {
+    if (textareaRef.current !== null) {
+      const scrollHeight = textareaRef.current.scrollHeight
+      if (currentPrompt.length === 0) {
+        textareaRef.current.style.height = '40px'
+      } else {
+        textareaRef.current.style.height = `${
+          scrollHeight < 40 ? 40 : scrollHeight
+        }px`
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPrompt])
+
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter') {
+      if (!e.shiftKey) {
+        e.preventDefault()
         handleSendMessage()
       }
     }
@@ -162,9 +177,9 @@ const ChatScreen = () => {
             </div>
           )}
           <div className="mx-auto flex w-full flex-shrink-0 items-center justify-center space-x-4 p-4 lg:w-3/4">
-            <Input
-              type="text"
-              className="h-10"
+            <Textarea
+              className="min-h-10 h-10 max-h-16 resize-none pr-20"
+              ref={textareaRef}
               onKeyDown={(e) => handleKeyDown(e)}
               placeholder="Type your message ..."
               disabled={
@@ -173,7 +188,9 @@ const ChatScreen = () => {
                 activeModel._id !== currentConvo?.modelId
               }
               value={currentPrompt}
-              onChange={(e) => handleMessageChange(e.target.value)}
+              onChange={(e) => {
+                handleMessageChange(e)
+              }}
             />
             <Button
               size="lg"