From 578e18044b00acffd48f67ab3867fde24abf1af4 Mon Sep 17 00:00:00 2001
From: Rankin Zheng <runjin@merico.dev>
Date: Thu, 11 May 2023 14:06:06 +0800
Subject: [PATCH 1/2] feat: Add stop generating button

Add a button to stop generating messages during a dev chat session. The button is displayed when generating messages and stops the generation process when clicked. The button is represented by the IconPlayerStop icon from the Tabler Icons library. The button is disabled during message generation.
---
 src/views/ChatPanel.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/views/ChatPanel.tsx b/src/views/ChatPanel.tsx
index 7b8c691..9ebf040 100644
--- a/src/views/ChatPanel.tsx
+++ b/src/views/ChatPanel.tsx
@@ -8,7 +8,7 @@ import { createStyles, keyframes } from '@mantine/core';
 import { ActionIcon } from '@mantine/core';
 import { Menu, Button, Text } from '@mantine/core';
 import { useElementSize, useListState, useResizeObserver, useViewportSize } from '@mantine/hooks';
-import { IconAdjustments, IconBulb, IconCameraSelfie, IconCheck, IconClick, IconColumnInsertRight, IconCopy, IconDots, IconEdit, IconFileDiff, IconFolder, IconGitCommit, IconGitCompare, IconMessageDots, IconMessagePlus, IconPrinter, IconPrompt, IconReplace, IconRobot, IconSend, IconSquareRoundedPlus, IconTerminal2, IconUser, IconX } from '@tabler/icons-react';
+import { IconAdjustments, IconBulb, IconCameraSelfie, IconCheck, IconClick, IconColumnInsertRight, IconCopy, IconDots, IconEdit, IconFileDiff, IconFolder, IconGitCommit, IconGitCompare, IconMessageDots, IconMessagePlus, IconPlayerStop, IconPrinter, IconPrompt, IconReplace, IconRobot, IconSend, IconSquareRoundedPlus, IconTerminal2, IconUser, IconX } from '@tabler/icons-react';
 import { IconSettings, IconSearch, IconPhoto, IconMessageCircle, IconTrash, IconArrowsLeftRight } from '@tabler/icons-react';
 import { Prism } from '@mantine/prism';
 import ReactMarkdown from 'react-markdown';
@@ -466,6 +466,21 @@ const chatPanel = () => {
                         }
                     </Accordion>
                 }
+                {generating &&
+                    <Center>
+                        <Button
+                            leftIcon={<IconPlayerStop />}
+                            variant="white"
+                            onClick={() => {
+                                messageUtil.sendMessage({
+                                    command: 'stopDevChat'
+                                });
+                                setGenerating(false);
+                            }}>
+                            Stop generating
+                        </Button>
+                    </Center>
+                }
                 <Menu
                     id='commandMenu'
                     position='top-start'
@@ -497,12 +512,12 @@ const chatPanel = () => {
                             placeholder="Ctrl + Enter Send a message."
                             styles={{ icon: { alignItems: 'flex-start', paddingTop: '9px' }, rightSection: { alignItems: 'flex-start', paddingTop: '9px' } }}
                             icon={
-                                <ActionIcon onClick={handlePlusClick} sx={{ pointerEvents: 'all' }}>
+                                <ActionIcon disabled={generating} onClick={handlePlusClick} sx={{ pointerEvents: 'all' }}>
                                     <IconSquareRoundedPlus size="1rem" />
                                 </ActionIcon>
                             }
                             rightSection={
-                                <ActionIcon onClick={handleSendClick}>
+                                <ActionIcon disabled={generating} onClick={handleSendClick}>
                                     <IconSend size="1rem" />
                                 </ActionIcon>
                             }

From 7b8d9e2373a2fe7bceb663f33ca631aef9e2912a Mon Sep 17 00:00:00 2001
From: Rankin Zheng <runjin@merico.dev>
Date: Thu, 11 May 2023 14:06:06 +0800
Subject: [PATCH 2/2] feat: Add history messages to ChatPanel

Add a new message handler to load history messages when the ChatPanel component is mounted. The handler receives a list of message entries and appends them to the messageHandlers state. Each entry contains a hash, user, date, request, response, and context. The context is an array of objects with a content and role property, which is parsed and added to the messageHandlers state as well.

Also, add a useEffect hook to the ChatPanel component to call the new message handler when the component is mounted.
---
 src/views/ChatPanel.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/views/ChatPanel.tsx b/src/views/ChatPanel.tsx
index 9ebf040..8b23554 100644
--- a/src/views/ChatPanel.tsx
+++ b/src/views/ChatPanel.tsx
@@ -95,10 +95,15 @@ const chatPanel = () => {
     const scrollToBottom = () =>
         scrollViewport?.current?.scrollTo({ top: scrollViewport.current.scrollHeight, behavior: 'smooth' });
 
+    useEffect(() => {
+        scrollToBottom();
+    });
+
     useEffect(() => {
         inputRef.current.focus();
         messageUtil.sendMessage({ command: 'regContextList' });
         messageUtil.sendMessage({ command: 'regCommandList' });
+        messageUtil.sendMessage({ command: 'historyMessages' });
     }, []);
 
     useEffect(() => {
@@ -167,9 +172,16 @@ const chatPanel = () => {
                     file: message.file,
                     context: context,
                 });
-                console.log(context);
             }
         });
+        messageUtil.registerHandler('loadHistoryMessages', (message: { command: string; entries: [{ hash: '', user: '', date: '', request: '', response: '', context: [{ content: '', role: '' }] }] }) => {
+            console.log(JSON.stringify(message));
+            message.entries?.forEach(({ hash, user, date, request, response, context }) => {
+                const contexts = context.map(({ content, role }) => ({ context: JSON.parse(content) }));
+                messageHandlers.append({ type: 'user', message: request, contexts: contexts });
+                messageHandlers.append({ type: 'bot', message: response });
+            });
+        });
     }, [registed]);
 
     const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {