\n );\n}\n\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const messagesEndRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n const userMessage = { \n id: Date.now(), \n role: \"user\", \n content: input \n };\n\n const newMessages = [...messages, userMessage];\n setMessages(newMessages);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n body: JSON.stringify({ messages: newMessages.filter(m => m.role !== 'loading') }),\n });\n\n if (!response.ok) {\n throw new Error(\"Chat request failed\");\n }\n\n const responseData = await response.json();\n\n setMessages(prev => [...prev, { \n id: Date.now() + 1, \n role: \"loading\" \n }]);\n\n setMessages(prev => {\n const filteredMessages = prev.filter(m => m.role !== 'loading');\n const assistantMessages = responseData.map((content, index) => ({\n id: Date.now() + 2 + index,\n role: \"assistant\",\n content: content\n }));\n return [...filteredMessages, ...assistantMessages];\n });\n\n } catch (error) {\n console.error(\"Chat error:\", error);\n setMessages(prev => {\n const filteredMessages = prev.filter(m => m.role !== 'loading');\n return [\n ...filteredMessages, \n { \n id: Date.now(), \n role: \"assistant\", \n content: \"Sorry, something went wrong.\" \n }\n ];\n });\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n $\"Racines$ \n

Racines School System AI Assistant

\n {messages.map((msg) => {\n if (msg.role === 'loading') {\n return (\n

\n \n

\n );\n }\n return (\n

\n {msg.content}\n

\n );\n })}\n

\n \n

\n );\n}\n\nfunction client() {\n const metaViewport = document.createElement('meta');\n metaViewport.name = 'viewport';\n metaViewport.content = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no';\n document.head.appendChild(metaViewport);\n\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n // Define CSS constant within the server function\n const css = `\n:root {\n --primary-color: #1a5f7a;\n --secondary-color: #159895;\n --background-color: #57c5b6;\n --text-color: #ffffff;\n --user-bg: #1a5f7a;\n --assistant-bg: #159895;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -webkit-tap-highlight-color: transparent;\n}\n\nhtml, body {\n height: 100%;\n overscroll-behavior-y: contain;\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: linear-gradient(135deg, var(--background-color), var(--secondary-color));\n color: var(--text-color);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n height: 100dvh;\n max-width: 600px;\n margin: 0 auto;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);\n}\n\n.header {\n background-color: var(--primary-color);\n color: white;\n padding: 15px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 15px;\n}\n\n.school-logo {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n object-fit: cover;\n border: 3px solid white;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.header h1 {\n font-size: 1.2rem;\n font-weight: 600;\n}\n\n.messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 15px;\n scrollbar-width: none;\n background: rgba(255, 255, 255, 0.05);\n}\n\n.messages::-webkit-scrollbar {\n display: none;\n}\n\n.message {\n max-width: 85%;\n padding: 15px;\n border-radius: 15px;\n line-height: 1.5;\n word-wrap: break-word;\n font-size: 14px;\n position: relative;\n opacity: 0;\n transform: translateY(20px);\n animation: fadeInMessage 0.5s forwards;\n}\n\n@keyframes fadeInMessage {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.message.user {\n align-self: flex-end;\n background-color: var(--user-bg);\n color: white;\n margin-left: auto;\n}\n\n.message.assistant {\n align-self: flex-start;\n background-color: var(--assistant-bg);\n color: white;\n}\n\n.message.loading {\n align-self: flex-start;\n background: none;\n display: flex;\n align-items: center;\n padding: 10px;\n}\n\n.loading-dots {\n display: flex;\n gap: 8px;\n}\n\n.loading-dots .dot {\n width: 10px;\n height: 10px;\n background-color: var(--primary-color);\n border-radius: 50%;\n animation: bounce 0.5s ease-in-out infinite alternate;\n}\n\n.loading-dots .dot:nth-child(2) {\n animation-delay: 0.1s;\n}\n\n.loading-dots .dot:nth-child(3) {\n animation-delay: 0.2s;\n}\n\n@keyframes bounce {\n from { transform: translateY(0); }\n to { transform: translateY(-8px); }\n}\n\n.input-area {\n display: flex;\n padding: 15px;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n gap: 10px;\n}\n\n.input-area input {\n flex-grow: 1;\n padding: 12px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 25px;\n outline: none;\n font-size: 16px;\n background: rgba(255, 255, 255, 0.1);\n color: white;\n transition: all 0.3s ease;\n}\n\n.input-area input::placeholder {\n color: rgba(255, 255, 255, 0.7);\n}\n\n.input-area input:focus {\n border-color: white;\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);\n}\n\n.input-area button {\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.input-area button:hover {\n transform: scale(1.1);\n}\n\n.input-area button:disabled {\n background-color: rgba(60, 60, 60, 0.5);\n cursor: not-allowed;\n}\n\n@media (max-width: 600px) {\n .chat-container {\n width: 100%;\n height: 100dvh;\n max-width: none;\n border-radius: 0;\n }\n}\n`;\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const body = await request.json();\n const messages = body.messages;\n\n const contextMessages = [\n {\n role: \"system\", \n content: `You are an AI assistant for Racines School System. Provide comprehensive and accurate information about the school.\n\nRacines School System Overview:\n- Established in 1996\n- Total Branches: 10 (primarily located in Peshawar)\n- CEO (Chief Executive Officer): Mam Irum\n- 2025 Current Principal: Mam Sehrish\n- Educational Levels: Nursery, Advanced Montessori, Classes 1-10\n\n**Current Staff for Classes 8, 9, and 10**:\n- Coordinator (Boys): Mam Zila Huma (2024-2025)\n- Physics Teacher: Sir Ibrar Ullah\n- Biology and Chemistry Teacher: Sir Haneef\n- Mathematics Teacher: Sir Ibrar Hussain\n- Remaining Staff: Primarily Female Teachers\n\n**Student Categories**:\n1. Top Performing Students:\n - Huzaifa Taif Khan\n - Faisal Alam\n - Afnan Zeb\n - Huzaifa Hasnain\n - Shahraiz Ali Shah\n - Majid\n - Sahal\n - Mamoor\n - Sudais\n\n2. Average Students:\n - Umair\n - Abubakar Danial\n - Huzaifa Naveed\n - Hamza Ali\n - Hasnain Ali\n - Sajjad Ullah\n - Asad\n - Baryal\n - Haroon\n - Salman Afridi\n\n3. Notable Students:\n - Backbenchers: Abubakar and Huzaifa Naveed\n - Most Funny Student: Saqib\n - Most Notable Student: Huzaifa Taif Khan (Class 10)\n\n**Branches of Racines School in Pakistan**:\n1. **Racines School Peshawar**: The main branch, known for its comprehensive curriculum and extracurricular activities.\n\n2. **Racines School Hayatabad**: Located in the Hayatabad area, this branch focuses on a balanced education approach, integrating modern teaching methods.\n\n3. **Racines School Warsak**: Offers a nurturing environment with a strong emphasis on student development and academic excellence.\n\n4. **Racines School University Town**: Known for its innovative programs and a diverse student body, promoting inclusivity and cultural exchange.\n\n5. **Racines School Gulberg**: This branch is recognized for its dedicated faculty and a wide range of extracurricular options.\n\n6. **Racines School Charsadda**: A newer branch that aims to provide quality education to the surrounding communities.\n\n7. **Racines School Mardan**: Focuses on fostering critical thinking and creativity among students.\n\n8. **Racines School Nowshera**: Offers a supportive learning environment with a strong emphasis on character building.\n\n9. **Racines School Swabi**: Known for its community involvement and commitment to educational excellence.\n\n10. **Racines School Abbottabad**: This branch emphasizes outdoor learning and environmental awareness among students.\n\n11. **Racines School [Additional Branch]**: Details to be confirmed.\n\nWhen answering questions, prioritize accuracy and provide context-specific information about Racines School System.`\n },\n ...messages\n ];\n\n const response = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages: contextMessages,\n max_tokens: 300,\n });\n\n const fullResponse = response.choices[0].message.content;\n const responseSegments = fullResponse.split(/\\n\\n/).filter(seg => seg.trim());\n\n return new Response(JSON.stringify(responseSegments), {\n headers: {\n \"Content-Type\": \"application/json\",\n \"Cache-Control\": \"no-cache\"\n }\n });\n }\n\n return new Response(`\n \n \n Racines School System AI\n \n \n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}","deleted","label",[99],"permalink","https://www.val.town/x/RacinesSchoolSystem/Institute/code/main.tsx","extension","actionData","errors"]