Updating changes to prompt templates for working with JSON and React

app.py

@@ -12,10 +12,22 @@ load_dotenv()
 
 # ChatOpenAI Templates
 system_template = """
-You are an expert assistant focused on providing detailed, step-by-step guidance for completing complex tasks. Always ensure your responses are clear, concise, and contextually relevant to the user's input.
+You are an expert in React development with a deep understanding of form rendering from JSON data. Your knowledge extends to advanced state management techniques and user experience design. You provide clear, practical, and detailed guidance on dynamically creating forms, monitoring form state changes, and implementing mechanisms to prevent user navigation when forms are actively edited. Your focus is on delivering actionable instructions and best practices that can be easily implemented in a real-world project.
+Key Traits:
+Highly knowledgeable in React and JavaScript.
+Expert in dynamic form rendering using JSON data.
+Proficient in state management techniques in React.
+Skilled in user experience design, particularly in preventing data loss during form edits.
+Clear, concise, and practical in communication.
+Responsibilities:
+Provide detailed, step-by-step instructions on rendering forms from JSON data using React.
+Offer best practices and code examples for tracking form state changes.
+Explain and demonstrate strategies to prevent users from navigating away from forms with unsaved changes.
+Deliver advice and solutions in a clear, practical, and easily implementable manner.
 """
 
-user_template = """Considering the following context: {input}, provide a comprehensive and accurate response, breaking down the information into actionable steps where applicable.
+user_template = """
+Considering the following context: {input}, provide a comprehensive and accurate response, breaking down the information into actionable steps where applicable.
 """
 
 response_template = """

chainlit.md

@@ -1,10 +1,10 @@
 #### Beyond ChatGPT presents:  
 
-# The Challenge Challenger    
+# The AIE3 Challenge Challenger    
 
 
 
 ![alt text](/public/gpt_avatar.webp "Title")    
 
 
-#### This Chainlit app was created following instructions from [this repository!](https://github.com/AI-Maker-Space/Beyond-ChatGPT)
+#### Good luck with those JSON forms!

public/stylesheet.css

@@ -1,7 +1,6 @@
 html {
     background: rgb(59,73,87);
     background: linear-gradient(45deg, rgb(12, 4, 34) 0%, rgb(52, 7, 114) 100%);
-    padding: 4rem 8rem !important;
 }
 
 body {
@@ -109,4 +108,33 @@ body {
 
 .css-1705j0v img {
     filter: brightness(0) invert(1) !important;
-}
+}
+
+/* Media query for mobile devices */
+@media only screen and (max-width: 768px) {
+    .css-sdz2z h1, .markdown-body h1 {
+        font-size: 1.5rem !important;
+    }
+    .css-ugcix4, .css-1ofqig9, .css-144sd5e, #root, body {
+        border-radius: 0 !important;
+    }
+    
+}
+
+/* Media query for tablet devices */
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
+    html {
+        padding: 2rem 4rem !important;
+    }
+}
+
+/* Media query for desktop devices */
+@media only screen and (min-width: 1025px) {
+    html {
+        padding: 4rem 8rem !important;
+    }
+}
+
+/* This Chainlit app was created following instructions from [this repository!](https://github.com/AI-Maker-Space/Beyond-ChatGPT) */
+/* You are an expert assistant focused on providing detailed, step-by-step guidance for completing complex tasks. Always ensure your responses are clear, concise, and contextually relevant to the user's input. */
+/* Considering the following context: {input}, provide a comprehensive and accurate response, breaking down the information into actionable steps where applicable. */