Refactor CurrentMessage component and update MessageList

- Refactored CurrentMessage component to destructure properties from chat.
- Added useEffect hooks to handle message generation and updating in CurrentMessage.
- Updated MessageList to use useEffect to add initial messages to chat.

src/views/components/CurrentMessage/index.tsx

@@ -48,29 +48,36 @@ const getBlocks = (message) => {
 const CurrentMessage = observer((props: any) => {
     const { width } = props;
     const { chat } = useMst();
+    const { messages, currentMessage, generating, responsed, hasDone } = chat;
 
     // split blocks
-    const messageBlocks = getBlocks(chat.currentMessage);
-    const lastMessageBlocks = getBlocks(chat.messages[chat.messages.length - 1]?.message);
+    const messageBlocks = getBlocks(currentMessage);
+    const lastMessageBlocks = getBlocks(messages[messages.length - 1]?.message);
     const fixedCount = lastMessageBlocks.length;
     const receivedCount = messageBlocks.length;
     const renderBlocks = messageBlocks.splice(-1);
 
     useEffect(() => {
-        if (chat.generating) {
+        if (generating) {
             // new a bot message
-            const messageItem = Message.create({ type: 'bot', message: chat.currentMessage });
+            const messageItem = Message.create({ type: 'bot', message: currentMessage });
             chat.newMessage(messageItem);
         }
-    }, [chat.generating]);
+    }, [generating]);
 
     useEffect(() => {
-        if (receivedCount - fixedCount >= 1 || !chat.responsed) {
-            chat.updateLastMessage(chat.currentMessage);
+        if (generating && (receivedCount - fixedCount >= 1 || !responsed)) {
+            chat.updateLastMessage(currentMessage);
         }
-    }, [chat.currentMessage, chat.responsed]);
+    }, [currentMessage, responsed, generating]);
 
-    return chat.generating
+    useEffect(() => {
+        if (hasDone) {
+            chat.updateLastMessage(currentMessage);
+        }
+    }, [hasDone]);
+
+    return generating
         ? <Container
             sx={{
                 margin: 0,

src/views/components/MessageList/index.tsx

@@ -1,10 +1,11 @@
 
 import { Stack, Container, Divider } from "@mantine/core";
-import React from "react";
+import React, { useEffect } from "react";
 import MessageBody from "@/views/components/MessageBody";
 import MessageAvatar from "@/views/components/MessageAvatar";
 import { observer } from "mobx-react-lite";
 import { useMst } from "@/views/stores/RootStore";
+import { Message } from "@/views/stores/ChatStore";
 import MessageContext from "@/views/components/MessageContext";
 
 
@@ -12,6 +13,22 @@ const MessageList = observer((props: any) => {
     const { width } = props;
     const { chat } = useMst();
 
+    useEffect(() => {
+        chat.addMessages([
+            Message.create({
+                type: 'user',
+                message: "How do I use DevChat?"
+            }),
+            Message.create({
+                type: 'bot',
+                message: `
+Do you want to write some code or have a question about the project? Simply right-click on your chosen files or code snippets and add them to DevChat. Feel free to ask me anything or let me help you with coding.
+
+Don't forget to check out the "+" button on the left of the input to add more context. To see a list of workflows you can run in the context, just type "/". Happy prompting!
+                `}),
+        ])
+    }, []);
+
     return (<>
         {chat.messages.map((item, index: number) => {
             const { message: messageText, type: messageType, hash: messageHash, contexts } = item;