From 8e59f2bc6be43c6ef1e5b02683494f7938195670 Mon Sep 17 00:00:00 2001
From: Rankin Zheng <runjin@merico.dev>
Date: Tue, 9 May 2023 09:44:51 +0800
Subject: [PATCH] feat: Add functionality to display received messages in chat
 UI

Add useEffect hooks to display received messages in the chat UI as bot messages. Also, update the Input component to use Textarea and add the ability to send messages using Ctrl + Enter
---
 src/views/App.tsx       |  1 +
 src/views/ChatPanel.tsx | 67 +++++++++++++++++++++++------------------
 2 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/views/App.tsx b/src/views/App.tsx
index 3bbbd9c..7718f65 100644
--- a/src/views/App.tsx
+++ b/src/views/App.tsx
@@ -20,6 +20,7 @@ export default function App() {
             styles={{
                 main: {
                     background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
+                    padding: 0
                 },
             }}
         >
diff --git a/src/views/ChatPanel.tsx b/src/views/ChatPanel.tsx
index bdd3234..1b36986 100644
--- a/src/views/ChatPanel.tsx
+++ b/src/views/ChatPanel.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState, useEffect, useRef } from 'react';
-import { Avatar, Center, Container, CopyButton, Divider, Flex, Grid, Stack, TypographyStylesProvider } from '@mantine/core';
+import { Avatar, Center, Container, CopyButton, Divider, Flex, Grid, Stack, Textarea, TypographyStylesProvider } from '@mantine/core';
 import { Input, Tooltip } from '@mantine/core';
 import { List } from '@mantine/core';
 import { ScrollArea } from '@mantine/core';
@@ -70,6 +70,7 @@ const chatPanel = () => {
 
     const inputRef = useRef(null);
     const [messages, handlers] = useListState<{ type: string; message: string; }>([]);
+    const [currentMessage, setCurrentMessage] = useState('');
     const [showCursor, setShowCursor] = useState(false);
     const [registed, setRegisted] = useState(false);
     const [opened, setOpened] = useState(false);
@@ -107,31 +108,34 @@ const chatPanel = () => {
         inputRef?.current?.focus();
     }, []);
 
+
+    // Add the received message to the chat UI as a bot message
+    useEffect(() => {
+        const lastIndex = messages?.length - 1;
+        const lastMessage = messages[lastIndex];
+        if (currentMessage) {
+            if (lastMessage?.type === 'bot') {
+                handlers.setItem(lastIndex, { type: 'bot', message: currentMessage });
+            }
+            else {
+                handlers.append({ type: 'bot', message: currentMessage });
+            }
+        }
+    }, [currentMessage]);
+
+    // Add the received message to the chat UI as a bot message
     useEffect(() => {
         if (registed) return;
-        // Add the received message to the chat UI as a bot message
+        setRegisted(true);
         messageUtil.registerHandler('receiveMessagePartial', (message: { text: string; }) => {
-            console.log(`receiveMessagePartial: ${message.text}`);
-            handlers.append({ type: 'bot', message: message.text });
-            setRegisted(true);
+            setCurrentMessage(message.text);
+        });
+        messageUtil.registerHandler('receiveMessage', (message: { text: string; }) => {
+            setCurrentMessage('');
         });
     }, [registed]);
 
-    // useEffect(() => {
-    //     let current = 0;
-    //     const interval = setInterval(() => {
-    //         if (current >= message.length) {
-    //             clearInterval(interval);
-    //             setShowCursor(false);
-    //             return;
-    //         }
-    //         setMarkdown(message.slice(0, current + 1));
-    //         current++;
-    //     }, 25);
-    //     return () => clearInterval(interval);
-    // }, [message]);
-
-    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         const value = event.target.value;
         // if value start with '/' command show menu
         if (value === '/') {
@@ -142,8 +146,8 @@ const chatPanel = () => {
         setInput(value);
     };
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.key === 'Enter') {
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (event.key === 'Enter' && event.ctrlKey) {
             handleSendClick(event as any);
         }
     };
@@ -297,13 +301,21 @@ const chatPanel = () => {
                     </Menu.Item>
                 </Menu.Dropdown>
             </Menu>
-            <Input
+            <Textarea
+                value={input}
                 ref={inputRef}
-                multiline={true}
+                onKeyDown={handleKeyDown}
+                onChange={handleInputChange}
+                autosize
+                minRows={1}
+                maxRows={10}
                 radius="md"
-                placeholder="Send a message."
+                size="md"
+                sx={{ pointerEvents: 'all' }}
+                placeholder="Ctrl + Enter Send a message."
+                styles={{ icon: { alignItems: 'flex-start', paddingTop: '9px' }, rightSection: { alignItems: 'flex-start', paddingTop: '9px' } }}
                 icon={
-                    <ActionIcon className={classes.icon} onClick={handlePlusClick}>
+                    <ActionIcon onClick={handlePlusClick} sx={{ pointerEvents: 'all' }}>
                         <IconSquareRoundedPlus size="1rem" />
                     </ActionIcon>
                 }
@@ -312,9 +324,6 @@ const chatPanel = () => {
                         <IconSend size="1rem" />
                     </ActionIcon>
                 }
-                value={input}
-                onKeyDown={handleKeyDown}
-                onChange={handleInputChange}
             />
         </Container>
     );