fix local and move to original

components/Playground/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useEffect, useState, ChangeEvent, FormEvent } from "react";
+import React, { useRef, useEffect, useState, ChangeEvent, FormEvent } from "react";
 import { Message, useChat } from "ai/react";
 import { useAppDispatch, useAppSelector } from "../../store/hook";
 import {
@@ -45,37 +45,10 @@ const Playground = () => {
   const isValidCodeBlock = (markdownCode: string) => {
     return markdownCode && markdownCode.length > 10 && markdownCode.includes('\n');
   }
-  const [lastAppendedSystemMessage, setLastAppendedSystemMessage] = useState("");
-
-  const appendSystemMessage = async () => {
-    const systemMessageToAdd: Message = {
-        id: `${Date.now()}-system`,
-        createdAt: new Date(),
-        content: systemMessage,
-        role: "system"
-    };
-    await append(systemMessageToAdd);
-    setLastAppendedSystemMessage(systemMessage);
-  };
 
   const modifiedHandleSubmit = async (e: FormEvent<HTMLFormElement>, chatRequestOptions?: ChatRequestOptions) => {
     e.preventDefault();
-  
-    // Step 1: Determine if the system message needs to be appended
-    const hasSystemMessage = messages.some(msg => msg.role === "system");
-  
-    // Step 2: Append the system message if required
-    if (!hasSystemMessage) {
-      const systemMessageToAdd: Message = {
-        id: `${Date.now()}-system`,
-        createdAt: new Date(),
-        content: systemMessage,
-        role: "system"
-      };
-      await append(systemMessageToAdd);
-    }
-  
-    // Step 3: Append the user message
+    // Simply append the user message
     await handleSubmit(e, chatRequestOptions);
   };
 
@@ -93,8 +66,11 @@ const Playground = () => {
   }, [markdownCode, prevMarkdownCode, dispatch]);
 
   const { append, messages, input, setInput, handleSubmit, ...rest } = useChat({
+    body: {
+      systemMessage: systemMessage
+    },
     onError: (error) => {
-        console.error(error);
+      console.error(error);
     },
   });
 

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "node .next/standalone/server.js",
     "lint": "next lint",

pages/api/chat/index.ts

@@ -9,7 +9,15 @@ const openai = new OpenAIApi(config);
 export const runtime = "edge";
 
 export default async function(req: Request) {
-    const { messages } = await req.json();
+    let { messages, systemMessage } = await req.json();
+
+    // Prepend the system message if it's not already there
+    if (messages.length === 0 || messages[0].role !== "system") {
+        messages = [{
+            role: "system",
+            content: systemMessage
+        }, ...messages];
+    }
 
     const response = await openai.createChatCompletion({
         model: 'gpt-4',