append message fix

components/Playground/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef, useEffect, useState, ChangeEvent, FormEvent } from "react";
-import { useChat } from "ai/react";
+import { Message, useChat } from "ai/react";
 import { useAppDispatch, useAppSelector } from "../../store/hook";
 import {
   compiler_state,
@@ -16,6 +16,7 @@ import Footer from "./Footer";
 import Pane from "./Pane";
 import { SendIcon } from "../../constants/icon";
 import ReactMarkdown from "react-markdown";
+import { ChatRequestOptions } from "ai";
 
 const Playground = () => {
   const dispatch = useAppDispatch();
@@ -51,34 +52,27 @@ const Playground = () => {
     };
   }, [markdownCode, prevMarkdownCode, dispatch]);
 
-  
-  
-
-
-  const { setMessages, messages, input, setInput, handleSubmit, ...rest } = useChat({
+  const { append, messages, input, setInput, handleSubmit, ...rest } = useChat({
     onError: (error) => {
         console.error(error);
     },
-});
-
-const modifiedHandleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-  // Stop the default form submission behavior
-  e.preventDefault();
-  
-  // Prepend the system message if it's not already there
-  if (messages.length === 0 || messages[0].role !== "system") {
-    const newMessage = {
-      role: "system",
-      content: systemMessage
-    };
-    // @ts-ignore
-    setMessages(prevMessages => [newMessage, ...prevMessages]);
-  }
-
-  // Call the original handleSubmit from useChat
-  handleSubmit(e);
-};
-
+  });
+
+  const modifiedHandleSubmit = async (e: React.FormEvent<HTMLFormElement>, chatRequestOptions?: ChatRequestOptions) => {
+    e.preventDefault();
+    
+    if (messages.length === 0 || messages[0].role !== "system") {
+        const systemMessageToAdd: Message = {
+            id: `${Date.now()}-system`,
+            createdAt: new Date(),
+            content: systemMessage,
+            role: "system"
+        };
+
+        await append(systemMessageToAdd);
+    }
+    await handleSubmit(e, chatRequestOptions);
+  };
 
   useEffect(() => {
     if (!esbuildStatus.isReady) {