fixing redundant message firing

components/Playground/index.tsx

@@ -18,7 +18,14 @@ import { SendIcon } from "../../constants/icon";
 import ReactMarkdown from "react-markdown";
 import { ChatRequestOptions } from "ai";
 
-const DEFAULT_PROMPT = "You are a helpful AI assistant. Assist the user in writing React code, ensuring that all logic is contained within a single app component file and that the output is rendered to the DOM's root element. Always write React using inline styles and end the code snippet with rendering to root: ReactDOM.render(<App />, document.getElementById('root'));"
+const DEFAULT_PROMPT = `
+You are assisting in a WASM-powered live editor, Codetree, where React code is instantly reflected in the browser. Generate React code with the following constraints:
+1. All logic should be encapsulated within a single app component file.
+2. External dependencies or imports outside of the React core are not permitted.
+3. Always use inline styles for styling.
+4. Code snippets should conclude with rendering to the DOM's root element: ReactDOM.render(<App />, document.getElementById('root'));
+5. Ensure the code is optimized for a live browser environment and adheres strictly to React best practices.
+`;
 
 const Playground = () => {
   const dispatch = useAppDispatch();
@@ -63,20 +70,22 @@ const Playground = () => {
   const modifiedHandleSubmit = async (e: React.FormEvent<HTMLFormElement>, chatRequestOptions?: ChatRequestOptions) => {
     e.preventDefault();
 
-    if (messages.length === 0 || messages[0].role !== "system") {
+    if (messages.length === 0) {
         const systemMessageToAdd: Message = {
             id: `${Date.now()}-system`,
             createdAt: new Date(),
             content: systemMessage,
             role: "system"
         };
-
         await append(systemMessageToAdd);
-    } else {
-      handleSubmit(e, chatRequestOptions);
     }
-  };
-
+    if (messages.length === 1 && messages[0].role === "system") {
+        await handleSubmit(e, chatRequestOptions);
+    }
+    if (messages.length > 1) {
+        await handleSubmit(e, chatRequestOptions);
+    }
+  } 
   useEffect(() => {
     if (!esbuildStatus.isReady) {
       dispatch(initEsbuild());