Merge pull request #302 from devchat-ai/fix_min_width

Update components to use chat panel width from store

src/views/components/InputMessage/index.tsx

@@ -33,7 +33,6 @@ const useStyles = createStyles((theme) => ({
 
 const InputMessage = observer((props: any) => {
     const {classes} = useStyles();
-    const { chatPanelWidth } = props;
     const { input, chat } = useMst();
     const { contexts, menuOpend, menuType, currentMenuIndex, contextMenus, commandMenus,modelMenus } = input;
     const { generating } = chat;
@@ -320,7 +319,7 @@ const InputMessage = observer((props: any) => {
                 }}
             >
                 <Menu 
-                    width={chatPanelWidth-10} 
+                    width={chat.chatPanelWidth-10} 
                     position='bottom-start' 
                     shadow="sm" 
                     withArrow
@@ -415,7 +414,7 @@ const InputMessage = observer((props: any) => {
             <Popover
                 position='top-start'
                 shadow="sm"
-                width={chatPanelWidth-10} 
+                width={chat.chatPanelWidth-10} 
                 opened={menuOpend}
                 onChange={() => {
                     input.closeMenu();

src/views/components/MessageBody/index.tsx

@@ -1,22 +1,35 @@
-import { Container } from "@mantine/core";
+import { Container, createStyles } from "@mantine/core";
 import React from "react";
 import { observer } from "mobx-react-lite";
 import MessageMarkdown from "@/views/components/MessageMarkdown";
+import { useMst } from "@/views/stores/RootStore";
 
 interface IProps {
     messageText: string,
     messageType: string
 }
 
+
+const useStyles = createStyles((theme, options:any) => ({
+    bodyWidth:{
+        width: options.chatPanelWidth - 20,
+    }
+}));
+
 const MessageBody = observer((props: IProps) => {
     const { messageText, messageType } = props;
+    const { chat } = useMst();
+    const {classes} = useStyles({
+        chatPanelWidth:chat.chatPanelWidth
+    });
     return (
         messageType === 'bot'
-            ? <MessageMarkdown messageText={messageText} />
+            ? <MessageMarkdown className={classes.bodyWidth}>{messageText}</MessageMarkdown>
             : <Container
                 sx={{
                     margin: 0,
                     padding: 0,
+                    width: chat.chatPanelWidth - 20,
                     pre: {
                         whiteSpace: 'pre-wrap',
                         wordBreak: 'break-word',

src/views/components/MessageMarkdown/index.tsx

@@ -10,12 +10,13 @@ import { useMst } from "@/views/stores/RootStore";
 import { Message } from "@/views/stores/ChatStore";
 import messageUtil from '@/util/MessageUtil';
 
-interface IProps {
-    messageText: string
+interface MessageMarkdownProps extends React.ComponentProps<typeof ReactMarkdown> {
+    children: string,
+    className: string
 }
 
-const MessageMarkdown = observer((props: IProps) => {
-    const { messageText } = props;
+const MessageMarkdown = observer((props: MessageMarkdownProps) => {
+    const { children } = props;
     const { chat } = useMst();
 
     const LanguageCorner = (props: any) => {
@@ -133,6 +134,7 @@ Generate a professionally written and formatted release note in markdown with th
     };
 
     return <ReactMarkdown
+        {...props}
         rehypePlugins={[rehypeRaw]}
         components={{
             code({ node, inline, className, children, ...props }) {
@@ -204,8 +206,9 @@ Generate a professionally written and formatted release note in markdown with th
                         {children}
                     </a>;
             }
-        }}>
-        {messageText}
+        }
+    }>
+        {children}
     </ReactMarkdown >;
 });
 

src/views/pages/ChatPanel.tsx

@@ -29,7 +29,7 @@ const chatPanel = observer(() => {
 
     const [chatContainerRef, chatContainerRect] = useResizeObserver();
     const scrollViewport = useRef<HTMLDivElement>(null);
-    const { height, width } = useViewportSize();
+    const { height } = useViewportSize();
     const { ref:inputAreatRef, height:inputAreaHeight } = useElementSize();
 
 
@@ -137,6 +137,10 @@ const chatPanel = observer(() => {
         scrollToBottom();
     }, [chat.scrollBottom]);
 
+    useEffect(() => {
+        chat.updateChatPanelWidth(chatPanelWidth);
+    },[chatPanelWidth]);
+
     return (
         <Stack
             ref={chatContainerRef}
@@ -156,14 +160,20 @@ const chatPanel = observer(() => {
                 onScrollPositionChange={onScrollPositionChange}
                 viewportRef={scrollViewport}
             >
-                <MessageList chatPanelWidth={chatPanelWidth} />
+                <MessageList />
                 {chat.errorMessage && (
                     <Box sx={{
+                        width: chatPanelWidth - 20,
                         margin:'0 10px 40px 10px'                      
                     }}>
                         <Alert
                             styles={{
-                                message: { fontSize: "var(--vscode-editor-font-size)" },
+                                message: { 
+                                    width: chatPanelWidth - 50,
+                                    whiteSpace: 'break-spaces',
+                                    overflowWrap: 'break-word',
+                                    fontSize: "var(--vscode-editor-font-size)" 
+                                },
                             }}
                             color="gray"
                             variant="filled"
@@ -191,7 +201,7 @@ const chatPanel = observer(() => {
                         }}
                         title="Bottom"
                         variant="transparent"
-                        sx={{ position: "absolute", bottom: 5, right: 16, zIndex: 1 }}
+                        sx={{ position: "absolute", bottom: 5, right: 16, zIndex: 2 }}
                     > 
                         <IconCircleArrowDownFilled size="1.125rem" />
                     </ActionIcon>
@@ -218,7 +228,7 @@ const chatPanel = observer(() => {
                     borderTop:'1px solid #ced4da',
                 }}
             >
-                <InputMessage chatPanelWidth={chatPanelWidth} />
+                <InputMessage />
             </Box>
         </Stack>
     );

src/views/stores/ChatStore.ts

@@ -76,6 +76,7 @@ export const ChatStore = types.model('Chat', {
     isTop: false,
     scrollBottom: 0,
     chatModel: 'GPT-3.5',
+    chatPanelWidth: 300,
     rechargeSite: 'https://devchat.ai/pricing/',
     features: types.optional(types.frozen(), {})
 })
@@ -114,6 +115,9 @@ You can configure DevChat from [Settings](#settings).`;
 
         return {
             helpMessage,
+            updateChatPanelWidth: (width: number) => {
+                self.chatPanelWidth = width;
+            },
             changeChatModel: (chatModel: string) => {
                 self.chatModel = chatModel;
             },