allow editing system prompt while preserving chat?

components/Playground/index.tsx

@@ -45,6 +45,32 @@ 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);
+  };
+
+  useEffect(() => {
+    appendSystemMessage();
+  }, []);
+
+  const modifiedHandleSubmit = async (e: FormEvent<HTMLFormElement>, chatRequestOptions?: ChatRequestOptions) => {
+    e.preventDefault();
+
+    if (systemMessage !== lastAppendedSystemMessage) {
+      await appendSystemMessage();
+    }
+
+    await handleSubmit(e, chatRequestOptions);
+  };
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -65,24 +91,6 @@ const Playground = () => {
     },
   });
 
-  const modifiedHandleSubmit = async (e: FormEvent<HTMLFormElement>, chatRequestOptions?: ChatRequestOptions) => {
-    e.preventDefault();
-
-    // If the first message is not a system message, append the system message
-    if (messages.length === 0 || (messages.length > 0 && messages[0].role !== "system")) {
-        const systemMessageToAdd: Message = {
-            id: `${Date.now()}-system`,
-            createdAt: new Date(),
-            content: systemMessage,
-            role: "system"
-        };
-        await append(systemMessageToAdd);
-    }
-
-    // Now handle the user's message
-    await handleSubmit(e, chatRequestOptions);
-  };
-
   useEffect(() => {
     if (!esbuildStatus.isReady) {
       dispatch(initEsbuild());
@@ -174,7 +182,7 @@ const Playground = () => {
             >
 
             <textarea ref={inputRef} onChange={(e) => setInput(e.target.value)}
-              placeholder="Create a twitter clone"
+              placeholder="Enter your message"
               onKeyDown={(e) => {
                 if (e.key === "Enter" && !e.shiftKey) {
                   formRef.current?.requestSubmit();