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,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>

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'
                     },

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 });