From dd90ced309e28e64939392cc6e927d5134bca6d0 Mon Sep 17 00:00:00 2001
From: Rankin Zheng <runjin@merico.dev>
Date: Mon, 5 Jun 2023 21:13:06 +0800
Subject: [PATCH] Refactor: Simplify width prop handling in ChatPanel
 components

In this commit, we simplified the width prop handling in the ChatPanel components by directly passing the width value instead of the entire chatContainerRect object. This change makes the code more readable and easier to maintain.
---
 src/views/ChatPanel/InputMessage.tsx     | 6 +++---
 src/views/ChatPanel/MessageContainer.tsx | 6 +++---
 src/views/ChatPanel/index.tsx            | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/views/ChatPanel/InputMessage.tsx b/src/views/ChatPanel/InputMessage.tsx
index 7ff7283..a95b528 100644
--- a/src/views/ChatPanel/InputMessage.tsx
+++ b/src/views/ChatPanel/InputMessage.tsx
@@ -6,7 +6,7 @@ import { IconGitBranchChecked, IconShellCommand, IconMouseRightClick } from "./I
 import messageUtil from '../../util/MessageUtil';
 
 const InputMessage = (props: any) => {
-    const { generating, chatContainerRect, onSendClick } = props;
+    const { generating, width, onSendClick } = props;
 
     const theme = useMantineTheme();
     const [commandMenus, commandMenusHandlers] = useListState<{ pattern: string; description: string; name: string }>([]);
@@ -375,7 +375,7 @@ const InputMessage = (props: any) => {
                 position='top-start'
                 closeOnClickOutside={true}
                 shadow="sm"
-                width={chatContainerRect.width}
+                width={width}
                 opened={menuOpend}
                 onChange={() => {
                     setMenuOpend(!menuOpend);
@@ -479,7 +479,7 @@ const InputMessage = (props: any) => {
                                     fz='sm'
                                     m='12px 5px'
                                     truncate='end'
-                                    w={chatContainerRect.width - 60}>
+                                    w={width - 60}>
                                     Tips: Select code or file & right click
                                 </Text>
                             </Flex>
diff --git a/src/views/ChatPanel/MessageContainer.tsx b/src/views/ChatPanel/MessageContainer.tsx
index ea7b89e..e8559aa 100644
--- a/src/views/ChatPanel/MessageContainer.tsx
+++ b/src/views/ChatPanel/MessageContainer.tsx
@@ -9,7 +9,7 @@ import SvgAvatarDevChat from './avatar_devchat.svg';
 import SvgAvatarUser from './avatar_spaceman.png';
 
 const MessageContainer = (props: any) => {
-    const { generating, messages, chatContainerRect, responsed } = props;
+    const { generating, messages, width, responsed } = props;
 
     const DefaultMessage = (<Center>
         <Text size="lg" color="gray" weight={500}>No messages yet</Text>
@@ -143,7 +143,7 @@ const MessageContainer = (props: any) => {
                 spacing={0}
                 key={`message-${index}`}
                 sx={{
-                    width: chatContainerRect.width,
+                    width: width,
                     padding: 0,
                     margin: 0,
                 }}>
@@ -151,7 +151,7 @@ const MessageContainer = (props: any) => {
                 <Container sx={{
                     margin: 0,
                     padding: 0,
-                    width: chatContainerRect.width,
+                    width: width,
                     pre: {
                         whiteSpace: 'break-spaces'
                     },
diff --git a/src/views/ChatPanel/index.tsx b/src/views/ChatPanel/index.tsx
index 33d7563..b67c4bf 100644
--- a/src/views/ChatPanel/index.tsx
+++ b/src/views/ChatPanel/index.tsx
@@ -181,11 +181,11 @@ const chatPanel = () => {
                 }}
                 // onScrollPositionChange={onScrollPositionChange}
                 viewportRef={scrollViewport}>
-                <MessageContainer generating={generating} messages={messages} chatContainerRect={chatContainerRect} responsed={responsed} />
+                <MessageContainer width={chatContainerRect.width} generating={generating} messages={messages} responsed={responsed} />
             </ScrollArea>
             <Stack
                 spacing={5}
-                sx={{ position: 'absolute', bottom: 10, width: chatContainerRect.width }}>
+                sx={{ position: 'absolute', bottom: 10, width: 'calc(100% - 20px)' }}>
                 {generating &&
                     <Center>
                         <StopButton />
@@ -198,7 +198,7 @@ const chatPanel = () => {
                 }
                 <InputMessage
                     generating={generating}
-                    chatContainerRect={chatContainerRect}
+                    width={chatContainerRect.width}
                     onSendClick={(input: string, contexts: any) => {
                         // Add the user's message to the chat UI
                         messageHandlers.append({ type: 'user', message: input, contexts: contexts ? [...contexts].map((item) => ({ ...item })) : undefined });