tweak prompt

components/Playground/index.tsx

@@ -18,6 +18,8 @@ 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 Playground = () => {
   const dispatch = useAppDispatch();
   const formRef = useRef<HTMLFormElement>(null);
@@ -32,7 +34,7 @@ const Playground = () => {
   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."
+    DEFAULT_PROMPT
   );
 
   const isValidCodeBlock = (markdownCode: string) => {
@@ -70,8 +72,9 @@ const Playground = () => {
         };
 
         await append(systemMessageToAdd);
+    } else {
+      handleSubmit(e, chatRequestOptions);
     }
-    await handleSubmit(e, chatRequestOptions);
   };
 
   useEffect(() => {