fix system message attempt

components/Playground/index.tsx

@@ -67,10 +67,11 @@ const Playground = () => {
     },
   });
 
-  const modifiedHandleSubmit = async (e: React.FormEvent<HTMLFormElement>, chatRequestOptions?: ChatRequestOptions) => {
+  const modifiedHandleSubmit = async (e: FormEvent<HTMLFormElement>, chatRequestOptions?: ChatRequestOptions) => {
     e.preventDefault();
 
-    if (messages.length === 0) {
+    // 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(),
@@ -79,13 +80,11 @@ const Playground = () => {
         };
         await append(systemMessageToAdd);
     }
-    if (messages.length === 1 && messages[0].role === "system") {
-        await handleSubmit(e, chatRequestOptions);
-    }
-    if (messages.length > 1) {
-        await handleSubmit(e, chatRequestOptions);
-    }
-  } 
+
+    // Now handle the user's message
+    await handleSubmit(e, chatRequestOptions);
+  };
+
   useEffect(() => {
     if (!esbuildStatus.isReady) {
       dispatch(initEsbuild());