configure system prompt and model select

components/Playground/index.tsx

@@ -26,6 +26,13 @@ const Playground = () => {
   const { logs, editorValue, isLogTabOpen } = useAppSelector(editor_state);
   const [markdownCode, setMarkdownCode] = useState('');
   const [prevMarkdownCode, setPrevMarkdownCode] = useState(markdownCode);
+  const [isSystemInputVisible, setSystemInputVisible] = useState(true);
+  const [isModelInputVisible, setModelInputVisible] = useState(true);
+  const [selectedModel, setSelectedModel] = useState("GPT-4");
+
+  const [systemMessage, setSystemMessage] = useState(
+    "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."
+  );
 
   const isValidCodeBlock = (markdownCode: string) => {
     return markdownCode && markdownCode.length > 10 && markdownCode.includes('\n');
@@ -44,12 +51,34 @@ const Playground = () => {
     };
   }, [markdownCode, prevMarkdownCode, dispatch]);
 
+  
+  
 
-  const { messages, input, setInput, handleSubmit } = useChat({
+
+  const { setMessages, messages, input, setInput, handleSubmit, ...rest } = useChat({
     onError: (error) => {
-      console.error(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);
+};
+
 
   useEffect(() => {
     if (!esbuildStatus.isReady) {
@@ -97,12 +126,50 @@ const Playground = () => {
   return (
     <div style={{ background: theme.background }}>
       <div className="flex flex-col">
-        <div className="px-4 pb-2 pt-3 shadow-lg sm:pb-3 sm:pt-4">
-          <form
+          <div className="px-4 pb-2 pt-3 shadow-lg sm:pb-3 sm:pt-4">
+            <span className="text-lg font-semibold">System Prompt</span>
+            <button
+              onClick={() => setSystemInputVisible(!isSystemInputVisible)}
+              className="p-2 rounded-full hover:bg-gray-200 transition duration-300"
+            >
+              {isSystemInputVisible ? '−' : '+'}
+            </button>
+            <span className="text-lg font-semibold">Model</span>
+              <button
+                onClick={() => setModelInputVisible(!isModelInputVisible)}
+                className="p-2 rounded-full hover:bg-gray-200 transition duration-300"
+              >
+                {isModelInputVisible ? '−' : '+'}
+            </button>
+            
+            {isSystemInputVisible && (
+              <textarea 
+                className="textarea my-4 border p-2 rounded-md shadow-sm w-full resize-none" 
+                value={systemMessage || ''} 
+                onChange={e => setSystemMessage(e.target.value)} 
+                placeholder="Enter custom system prompt here"
+                rows={2} // initial number of rows, can be adjusted
+                style={{ overflowWrap: 'break-word', whiteSpace: 'pre-wrap' }}
+              />
+            )}
+            {isModelInputVisible && (
+              <div className="my-4">
+                <select 
+                  value={selectedModel}
+                  onChange={(e) => setSelectedModel(e.target.value)}
+                  className="border p-2 rounded-md shadow-sm w-full bg-transparent text-gray-700"
+                  >
+                  <option value="GPT-4">GPT-4</option>
+                </select>
+              </div>
+            )}
+
+            <form
               ref={formRef}
-              onSubmit={handleSubmit}
+              onSubmit={modifiedHandleSubmit}
               className="relative w-full"
             >
+
             <textarea ref={inputRef} onChange={(e) => setInput(e.target.value)}
               placeholder="Create a twitter clone"
               onKeyDown={(e) => {

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev --turbo",
     "build": "next build",
-    "start": "next start",
+    "start": "node .next/standalone/server.js",
     "lint": "next lint",
     "codegen": "graphql-codegen --config codegen.yml"
   },

pages/api/chat/index.ts

@@ -9,15 +9,7 @@ const openai = new OpenAIApi(config);
 export const runtime = "edge";
 
 export default async function(req: Request) {
-    let { messages } = 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: "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."
-        }, ...messages];
-    }
+    const { messages } = await req.json();
 
     const response = await openai.createChatCompletion({
         model: 'gpt-4',