\n {renderMessage()}\n {!isUser && }\n

\n );\n}\n\nfunction ChatInterface() {\n const [messages, setMessages] = useState([\n {\n text:\n \"Hello! I'm your research assistant. What would you like to know about the Atari from the 70s?\",\n isUser: false,\n },\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n // Auto-focus input after message send\n useEffect(() => {\n if (!isLoading) {\n inputRef.current?.focus();\n }\n }, [isLoading]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n // Clear any previous errors\n setError(null);\n\n // Add user message\n const userMessage = input;\n setMessages((prev) => [...prev, { text: userMessage, isUser: true }]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiResponse = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiResponse += chunk;\n\n // Update messages with streaming response\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage.isUser) {\n return [...prev, { text: aiResponse, isUser: false }];\n }\n\n const updatedMessages = [...prev];\n updatedMessages[updatedMessages.length - 1] = {\n text: aiResponse,\n isUser: false,\n };\n return updatedMessages;\n });\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(\"Sorry, there was an error processing your request.\");\n setMessages((prev) => [...prev, {\n text: \"Sorry, there was an error processing your request.\",\n isUser: false,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n \n ))}\n {isLoading && (\n

\n •\n •\n •\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n

🤖 AI Assistant

\n \n View Source\n \n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { message } = await request.json();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const chatCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful AI research assistant for Year 4 students in Western Australia. Use age-appropriate language and explain concepts clearly in ways a 9-year-old can understand. These students are doing a research project on an object from the 1970s. The object is the Atari. They will only be doing one, so remember what their object was and assume all follow up questions are about that. Your job is to support them in learning about their chosen object. Always redirect the conversation back to that object and topic. For the project, they need to find out what the object looked like, what it did, what it was used for, who used it, why it was important at the time (the context of the 1970s), what came before it, and what replaced it afterward. Help them understand what life was like in that era and why these objects became popular. Occasionally ask friendly, helpful questions to guide their thinking, but don’t overdo it. Be conversational, clear, and supportive; you can be funny and occasionally make fun of Mr Richmond being old (he's not old but they think it's funny to say he is). Give them tips on what they might search for if they want to find pictures or videos of the object. Always use Australian English. If a student goes off topic, gently remind them that Mr Richmond wants them to stay focused on the project.\",\n },\n\n { role: \"user\", content: message },\n ],\n stream: true,\n });\n\n for await (const chunk of chatCompletion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n controller.enqueue(\n new TextEncoder().encode(\n \"Sorry, there was an error processing your request.\",\n ),\n );\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n AI Assistant\n \n \n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n xx--bg-primary: #ffo;\n xx--bg-secondary: #bc861d;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #007bff;\n --border-color: #e1e4e8;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) transparent;\n}\n\n*::-webkit-scrollbar {\n width: 8px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 20px;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n}\n\n.app-container {\n width: 100%;\n max-width: 800px;\n min-height: 100vh;\n background-color: var(--bg-secondary);\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n}\n\nheader {\n position: relative;\n background-color: var(--bg-secondary);\n padding: 15px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.source-link {\n position: absolute;\n right: 15px;\n color: var(--accent-color);\n text-decoration: none;\n font-size: 0.9em;\n opacity: 0.7;\n transition: opacity 0.3s;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: var(--bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n}\n\n.message-content {\n position: relative;\n max-width: 90%;\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.user-message .message-content {\n background-color: var(--accent-color);\n color: white;\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 4px;\n}\n\n.ai-message .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n align-self: flex-start;\n border: 1px solid var(--border-color);\n border-bottom-left-radius: 4px;\n}\n\n.copy-button {\n position: absolute;\n bottom: -25px;\n right: 0;\n background: none;\n border: none;\n color: var(--text-secondary);\n font-size: 0.8em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.message-content:hover .copy-button {\n opacity: 1;\n}\n\n.copy-button.copied {\n color: var(--accent-color);\n}\n\n.chat-input-form {\n display: flex;\n padding: 15px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n align-items: flex-end;\n}\n\n.chat-input-form textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-right: 10px;\n resize: none;\n max-height: 150px;\n overflow-y: auto;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.chat-input-form button {\n padding: 10px 15px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.chat-input-form button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.loading-indicator {\n display: flex;\n justify-content: center;\n margin: 10px 0;\n}\n\n.typing-dots {\n display: flex;\n gap: 5px;\n}\n\n.typing-dots span {\n color: var(--text-secondary);\n animation: typing 1.4s infinite;\n}\n\n.typing-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.typing-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.error-message {\n background-color: #ffdddd;\n color: #ff0000;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n text-align: center;\n}\n\n/* Markdown and Code Block Styling */\npre {\n background-color: #f6f8fa;\n border-radius: 6px;\n padding: 10px;\n margin: 10px 0;\n overflow-x: auto;\n}\n\ncode {\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.9em;\n}\n\n@keyframes typing {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .app-container {\n width: 100%;\n min-height: 100vh;\n box-shadow: none;\n }\n \n .message-content {\n max-width: 95%;\n }\n\n header {\n padding: 10px;\n }\n\n .source-link {\n position: static;\n margin-left: 10px;\n font-size: 0.8em;\n }\n}\n`;","deleted","label","children",[],[155],{"_103":175,"_95":176,"_156":177,"_158":-5,"_159":137,"_160":178,"_161":162,"_105":179,"_100":142,"_165":166,"_167":180,"_169":22,"_170":-5,"_171":181,"_98":182},"e4efbd5c-7040-11f0-aa01-0224a6c84d84","chicoroll.tsx","b85bc998-7040-11f0-b505-0224a6c84d84",62,["D",1754208446948],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { marked } from \"https://esm.sh/marked@11.2.0\";\n\nfunction CopyButton({ text }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n {copied ? \"✓ Copied\" : \"📋 Copy\"}\n \n );\n}\n\nfunction ChatMessage({ message, isUser }) {\n const renderMessage = () => {\n if (isUser) return message;\n\n // Render markdown with syntax highlighting\n return (\n \n );\n };\n\n return (\n

\n {renderMessage()}\n {!isUser && }\n

\n );\n}\n\nfunction ChatInterface() {\n const [messages, setMessages] = useState([\n {\n text:\n \"Hello! I'm your research assistant. What would you like to know about chiko rolls in the 70s?\",\n isUser: false,\n },\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n // Auto-focus input after message send\n useEffect(() => {\n if (!isLoading) {\n inputRef.current?.focus();\n }\n }, [isLoading]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n // Clear any previous errors\n setError(null);\n\n // Add user message\n const userMessage = input;\n setMessages((prev) => [...prev, { text: userMessage, isUser: true }]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiResponse = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiResponse += chunk;\n\n // Update messages with streaming response\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage.isUser) {\n return [...prev, { text: aiResponse, isUser: false }];\n }\n\n const updatedMessages = [...prev];\n updatedMessages[updatedMessages.length - 1] = {\n text: aiResponse,\n isUser: false,\n };\n return updatedMessages;\n });\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(\"Sorry, there was an error processing your request.\");\n setMessages((prev) => [...prev, {\n text: \"Sorry, there was an error processing your request.\",\n isUser: false,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n \n ))}\n {isLoading && (\n

\n •\n •\n •\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n

🤖 AI Assistant

\n \n View Source\n \n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { message } = await request.json();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const chatCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful AI research assistant for Year 4 students in Western Australia. Use age-appropriate language and explain concepts clearly in ways a 9-year-old can understand. These students are doing a research project on an object from the 1970s. The object is the chiko roll. They will only be doing one, so remember what their object was and assume all follow up questions are about that. Your job is to support them in learning about their chosen object. Always redirect the conversation back to that object and topic. For the project, they need to find out what the object looked like, what it did, what it was used for, who used it, why it was important at the time (the context of the 1970s), what came before it, and what replaced it afterward. Help them understand what life was like in that era and why these objects became popular. Occasionally ask friendly, helpful questions to guide their thinking, but don’t overdo it. Be conversational, clear, and supportive; you can be funny and occasionally make fun of Mr Richmond being old (he's not old but they think it's funny to say he is). Give them tips on what they might search for if they want to find pictures or videos of the object. Always use Australian English. If a student goes off topic, gently remind them that Mr Richmond wants them to stay focused on the project.\",\n },\n\n { role: \"user\", content: message },\n ],\n stream: true,\n });\n\n for await (const chunk of chatCompletion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n controller.enqueue(\n new TextEncoder().encode(\n \"Sorry, there was an error processing your request.\",\n ),\n );\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n AI Assistant\n \n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-primary: #f4f6f9;\n --bg-secondary: #ffffff;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #007bff;\n --border-color: #e1e4e8;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) transparent;\n}\n\n*::-webkit-scrollbar {\n width: 8px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 20px;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n}\n\n.app-container {\n width: 100%;\n max-width: 800px;\n min-height: 100vh;\n background-color: var(--bg-secondary);\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n}\n\nheader {\n position: relative;\n background-color: var(--bg-secondary);\n padding: 15px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.source-link {\n position: absolute;\n right: 15px;\n color: var(--accent-color);\n text-decoration: none;\n font-size: 0.9em;\n opacity: 0.7;\n transition: opacity 0.3s;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: var(--bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n}\n\n.message-content {\n position: relative;\n max-width: 90%;\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.user-message .message-content {\n background-color: var(--accent-color);\n color: white;\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 4px;\n}\n\n.ai-message .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n align-self: flex-start;\n border: 1px solid var(--border-color);\n border-bottom-left-radius: 4px;\n}\n\n.copy-button {\n position: absolute;\n bottom: -25px;\n right: 0;\n background: none;\n border: none;\n color: var(--text-secondary);\n font-size: 0.8em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.message-content:hover .copy-button {\n opacity: 1;\n}\n\n.copy-button.copied {\n color: var(--accent-color);\n}\n\n.chat-input-form {\n display: flex;\n padding: 15px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n align-items: flex-end;\n}\n\n.chat-input-form textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-right: 10px;\n resize: none;\n max-height: 150px;\n overflow-y: auto;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.chat-input-form button {\n padding: 10px 15px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.chat-input-form button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.loading-indicator {\n display: flex;\n justify-content: center;\n margin: 10px 0;\n}\n\n.typing-dots {\n display: flex;\n gap: 5px;\n}\n\n.typing-dots span {\n color: var(--text-secondary);\n animation: typing 1.4s infinite;\n}\n\n.typing-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.typing-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.error-message {\n background-color: #ffdddd;\n color: #ff0000;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n text-align: center;\n}\n\n/* Markdown and Code Block Styling */\npre {\n background-color: #f6f8fa;\n border-radius: 6px;\n padding: 10px;\n margin: 10px 0;\n overflow-x: auto;\n}\n\ncode {\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.9em;\n}\n\n@keyframes typing {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .app-container {\n width: 100%;\n min-height: 100vh;\n box-shadow: none;\n }\n \n .message-content {\n max-width: 95%;\n }\n\n header {\n padding: 10px;\n }\n\n .source-link {\n position: static;\n margin-left: 10px;\n font-size: 0.8em;\n }\n}\n`;",[],[176],{"_103":184,"_95":99,"_156":185,"_158":-5,"_159":137,"_160":186,"_161":162,"_105":187,"_100":142,"_165":166,"_167":188,"_169":22,"_170":-5,"_171":189,"_98":190},"f9ff756c-703f-11f0-9438-0224a6c84d84","0b9fce12-703a-11f0-84b1-0224a6c84d84",47,["D",1754208052790],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { marked } from \"https://esm.sh/marked@11.2.0\";\n\nfunction CopyButton({ text }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n {copied ? \"✓ Copied\" : \"📋 Copy\"}\n \n );\n}\n\nfunction ChatMessage({ message, isUser }) {\n const renderMessage = () => {\n if (isUser) return message;\n\n // Render markdown with syntax highlighting\n return (\n \n );\n };\n\n return (\n

\n {renderMessage()}\n {!isUser && }\n

\n );\n}\n\nfunction ChatInterface() {\n const [messages, setMessages] = useState([\n {\n text:\n \"Hello! I'm your research assistant. What would you like to know about Disco?\",\n isUser: false,\n },\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n // Auto-focus input after message send\n useEffect(() => {\n if (!isLoading) {\n inputRef.current?.focus();\n }\n }, [isLoading]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n // Clear any previous errors\n setError(null);\n\n // Add user message\n const userMessage = input;\n setMessages((prev) => [...prev, { text: userMessage, isUser: true }]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiResponse = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiResponse += chunk;\n\n // Update messages with streaming response\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage.isUser) {\n return [...prev, { text: aiResponse, isUser: false }];\n }\n\n const updatedMessages = [...prev];\n updatedMessages[updatedMessages.length - 1] = {\n text: aiResponse,\n isUser: false,\n };\n return updatedMessages;\n });\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(\"Sorry, there was an error processing your request.\");\n setMessages((prev) => [...prev, {\n text: \"Sorry, there was an error processing your request.\",\n isUser: false,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n \n ))}\n {isLoading && (\n

\n •\n •\n •\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n

🤖 AI Assistant

\n \n View Source\n \n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { message } = await request.json();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const chatCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful AI research assistant for Year 4 students in Western Australia. Use age-appropriate language and explain concepts clearly in ways a 9-year-old can understand. These students are doing a research project on an object from the 1970s. The object is a disco ball but also disco music. They will only be doing one, so remember what their object was and assume all follow up questions are about that. Your job is to support them in learning about their chosen object. Always redirect the conversation back to that object and topic. For the project, they need to find out what the object looked like, what it did, what it was used for, who used it, why it was important at the time (the context of the 1970s), what came before it, and what replaced it afterward. Help them understand what life was like in that era and why these objects became popular. Occasionally ask friendly, helpful questions to guide their thinking, but don’t overdo it. Be conversational, clear, and supportive; you can be funny and occasionally make fun of Mr Richmond being old (he's not old but they think it's funny to say he is). Give them tips on what they might search for if they want to find pictures or videos of the object. Always use Australian English. If a student goes off topic, gently remind them that Mr Richmond wants them to stay focused on the project.\",\n },\n\n { role: \"user\", content: message },\n ],\n stream: true,\n });\n\n for await (const chunk of chatCompletion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n controller.enqueue(\n new TextEncoder().encode(\n \"Sorry, there was an error processing your request.\",\n ),\n );\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n AI Assistant\n \n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-primary: #f4f6f9;\n --bg-secondary: #ffffff;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #007bff;\n --border-color: #e1e4e8;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) transparent;\n}\n\n*::-webkit-scrollbar {\n width: 8px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 20px;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n}\n\n.app-container {\n width: 100%;\n max-width: 800px;\n min-height: 100vh;\n background-color: var(--bg-secondary);\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n}\n\nheader {\n position: relative;\n background-color: var(--bg-secondary);\n padding: 15px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.source-link {\n position: absolute;\n right: 15px;\n color: var(--accent-color);\n text-decoration: none;\n font-size: 0.9em;\n opacity: 0.7;\n transition: opacity 0.3s;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: var(--bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n}\n\n.message-content {\n position: relative;\n max-width: 90%;\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.user-message .message-content {\n background-color: var(--accent-color);\n color: white;\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 4px;\n}\n\n.ai-message .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n align-self: flex-start;\n border: 1px solid var(--border-color);\n border-bottom-left-radius: 4px;\n}\n\n.copy-button {\n position: absolute;\n bottom: -25px;\n right: 0;\n background: none;\n border: none;\n color: var(--text-secondary);\n font-size: 0.8em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.message-content:hover .copy-button {\n opacity: 1;\n}\n\n.copy-button.copied {\n color: var(--accent-color);\n}\n\n.chat-input-form {\n display: flex;\n padding: 15px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n align-items: flex-end;\n}\n\n.chat-input-form textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-right: 10px;\n resize: none;\n max-height: 150px;\n overflow-y: auto;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.chat-input-form button {\n padding: 10px 15px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.chat-input-form button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.loading-indicator {\n display: flex;\n justify-content: center;\n margin: 10px 0;\n}\n\n.typing-dots {\n display: flex;\n gap: 5px;\n}\n\n.typing-dots span {\n color: var(--text-secondary);\n animation: typing 1.4s infinite;\n}\n\n.typing-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.typing-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.error-message {\n background-color: #ffdddd;\n color: #ff0000;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n text-align: center;\n}\n\n/* Markdown and Code Block Styling */\npre {\n background-color: #f6f8fa;\n border-radius: 6px;\n padding: 10px;\n margin: 10px 0;\n overflow-x: auto;\n}\n\ncode {\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.9em;\n}\n\n@keyframes typing {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .app-container {\n width: 100%;\n min-height: 100vh;\n box-shadow: none;\n }\n \n .message-content {\n max-width: 95%;\n }\n\n header {\n padding: 10px;\n }\n\n .source-link {\n position: static;\n margin-left: 10px;\n font-size: 0.8em;\n }\n}\n`;",[],[99],{"_103":192,"_95":193,"_156":194,"_158":-5,"_159":137,"_160":195,"_161":162,"_105":196,"_100":142,"_165":166,"_167":197,"_169":22,"_170":-5,"_171":198,"_98":199},"815635be-7040-11f0-9f38-0224a6c84d84","lavalamp.tsx","69ce4d46-7040-11f0-abfa-0224a6c84d84",56,["D",1754208279847],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { marked } from \"https://esm.sh/marked@11.2.0\";\n\nfunction CopyButton({ text }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n {copied ? \"✓ Copied\" : \"📋 Copy\"}\n \n );\n}\n\nfunction ChatMessage({ message, isUser }) {\n const renderMessage = () => {\n if (isUser) return message;\n\n // Render markdown with syntax highlighting\n return (\n \n );\n };\n\n return (\n

\n {renderMessage()}\n {!isUser && }\n

\n );\n}\n\nfunction ChatInterface() {\n const [messages, setMessages] = useState([\n {\n text:\n \"Hello! I'm your research assistant. What would you like to know about lava lamps from the 70s?\",\n isUser: false,\n },\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n // Auto-focus input after message send\n useEffect(() => {\n if (!isLoading) {\n inputRef.current?.focus();\n }\n }, [isLoading]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n // Clear any previous errors\n setError(null);\n\n // Add user message\n const userMessage = input;\n setMessages((prev) => [...prev, { text: userMessage, isUser: true }]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiResponse = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiResponse += chunk;\n\n // Update messages with streaming response\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage.isUser) {\n return [...prev, { text: aiResponse, isUser: false }];\n }\n\n const updatedMessages = [...prev];\n updatedMessages[updatedMessages.length - 1] = {\n text: aiResponse,\n isUser: false,\n };\n return updatedMessages;\n });\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(\"Sorry, there was an error processing your request.\");\n setMessages((prev) => [...prev, {\n text: \"Sorry, there was an error processing your request.\",\n isUser: false,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n \n ))}\n {isLoading && (\n

\n •\n •\n •\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n

🤖 AI Assistant

\n \n View Source\n \n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { message } = await request.json();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const chatCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful AI research assistant for Year 4 students in Western Australia. Use age-appropriate language and explain concepts clearly in ways a 9-year-old can understand. These students are doing a research project on an object from the 1970s. The object is the lava lamp. They will only be doing one, so remember what their object was and assume all follow up questions are about that. Your job is to support them in learning about their chosen object. Always redirect the conversation back to that object and topic. For the project, they need to find out what the object looked like, what it did, what it was used for, who used it, why it was important at the time (the context of the 1970s), what came before it, and what replaced it afterward. Help them understand what life was like in that era and why these objects became popular. Occasionally ask friendly, helpful questions to guide their thinking, but don’t overdo it. Be conversational, clear, and supportive; you can be funny and occasionally make fun of Mr Richmond being old (he's not old but they think it's funny to say he is). Give them tips on what they might search for if they want to find pictures or videos of the object. Always use Australian English. If a student goes off topic, gently remind them that Mr Richmond wants them to stay focused on the project.\",\n },\n\n { role: \"user\", content: message },\n ],\n stream: true,\n });\n\n for await (const chunk of chatCompletion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n controller.enqueue(\n new TextEncoder().encode(\n \"Sorry, there was an error processing your request.\",\n ),\n );\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n AI Assistant\n \n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-primary: #f4f6f9;\n --bg-secondary: #ffffff;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #007bff;\n --border-color: #e1e4e8;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) transparent;\n}\n\n*::-webkit-scrollbar {\n width: 8px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 20px;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n}\n\n.app-container {\n width: 100%;\n max-width: 800px;\n min-height: 100vh;\n background-color: var(--bg-secondary);\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n}\n\nheader {\n position: relative;\n background-color: var(--bg-secondary);\n padding: 15px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.source-link {\n position: absolute;\n right: 15px;\n color: var(--accent-color);\n text-decoration: none;\n font-size: 0.9em;\n opacity: 0.7;\n transition: opacity 0.3s;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: var(--bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n}\n\n.message-content {\n position: relative;\n max-width: 90%;\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.user-message .message-content {\n background-color: var(--accent-color);\n color: white;\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 4px;\n}\n\n.ai-message .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n align-self: flex-start;\n border: 1px solid var(--border-color);\n border-bottom-left-radius: 4px;\n}\n\n.copy-button {\n position: absolute;\n bottom: -25px;\n right: 0;\n background: none;\n border: none;\n color: var(--text-secondary);\n font-size: 0.8em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.message-content:hover .copy-button {\n opacity: 1;\n}\n\n.copy-button.copied {\n color: var(--accent-color);\n}\n\n.chat-input-form {\n display: flex;\n padding: 15px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n align-items: flex-end;\n}\n\n.chat-input-form textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-right: 10px;\n resize: none;\n max-height: 150px;\n overflow-y: auto;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.chat-input-form button {\n padding: 10px 15px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.chat-input-form button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.loading-indicator {\n display: flex;\n justify-content: center;\n margin: 10px 0;\n}\n\n.typing-dots {\n display: flex;\n gap: 5px;\n}\n\n.typing-dots span {\n color: var(--text-secondary);\n animation: typing 1.4s infinite;\n}\n\n.typing-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.typing-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.error-message {\n background-color: #ffdddd;\n color: #ff0000;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n text-align: center;\n}\n\n/* Markdown and Code Block Styling */\npre {\n background-color: #f6f8fa;\n border-radius: 6px;\n padding: 10px;\n margin: 10px 0;\n overflow-x: auto;\n}\n\ncode {\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.9em;\n}\n\n@keyframes typing {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .app-container {\n width: 100%;\n min-height: 100vh;\n box-shadow: none;\n }\n \n .message-content {\n max-width: 95%;\n }\n\n header {\n padding: 10px;\n }\n\n .source-link {\n position: static;\n margin-left: 10px;\n font-size: 0.8em;\n }\n}\n`;",[],[193],{"_103":201,"_95":202,"_156":203,"_158":-5,"_159":137,"_160":204,"_161":162,"_105":205,"_100":206,"_165":166,"_167":207,"_169":22,"_170":-5,"_171":208,"_98":209},"57a4aa84-7036-11f0-b377-0224a6c84d84","main.tsx","01986e58-a41c-75a4-8592-17e9b7443b39",21,["D",1754203914929],20,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { marked } from \"https://esm.sh/marked@11.2.0\";\n\nfunction CopyButton({ text }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n {copied ? \"✓ Copied\" : \"📋 Copy\"}\n \n );\n}\n\nfunction ChatMessage({ message, isUser }) {\n const renderMessage = () => {\n if (isUser) return message;\n\n // Render markdown with syntax highlighting\n return (\n \n );\n };\n\n return (\n

\n {renderMessage()}\n {!isUser && }\n

\n );\n}\n\nfunction ChatInterface() {\n const [messages, setMessages] = useState([\n {\n text: \"Hello! I'm an AI assistant. How can I help you today?\",\n isUser: false,\n },\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n // Auto-focus input after message send\n useEffect(() => {\n if (!isLoading) {\n inputRef.current?.focus();\n }\n }, [isLoading]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n // Clear any previous errors\n setError(null);\n\n // Add user message\n const userMessage = input;\n setMessages((prev) => [...prev, { text: userMessage, isUser: true }]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiResponse = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiResponse += chunk;\n\n // Update messages with streaming response\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage.isUser) {\n return [...prev, { text: aiResponse, isUser: false }];\n }\n\n const updatedMessages = [...prev];\n updatedMessages[updatedMessages.length - 1] = {\n text: aiResponse,\n isUser: false,\n };\n return updatedMessages;\n });\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(\"Sorry, there was an error processing your request.\");\n setMessages((prev) => [...prev, {\n text: \"Sorry, there was an error processing your request.\",\n isUser: false,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n \n ))}\n {isLoading && (\n

\n •\n •\n •\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n

🤖 AI Assistant

\n \n View Source\n \n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { message } = await request.json();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const chatCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful AI research assistant for Year 4 students in Western Australia. Use age-appropriate language and explain concepts clearly in ways a 9-year-old can understand. These students are doing a research project on an object from the 1970s. The objects include: typewriter, rotary phone, television, disco, Atari, skateboards, radio, lava lamp, Holden Monaro, Holden Sandman, Chiko Roll, and the Apple Computer II. They will only be doing one, so remember what their object was and assume all follow up questions are about that. Your job is to support them in learning about their chosen object. Always redirect the conversation back to that object and topic. For the project, they need to find out what the object looked like, what it did, what it was used for, who used it, why it was important at the time (the context of the 1970s), what came before it, and what replaced it afterward. Help them understand what life was like in that era and why these objects became popular. Occasionally ask friendly, helpful questions to guide their thinking, but don’t overdo it. Be conversational, clear, and supportive; you can be funny and occasionally make fun of Mr Richmond being old (he's not old but they think it's funny to say he is). Give them tips on what they might search for if they want to find pictures or videos of the object. Always use Australian English. If a student goes off topic, gently remind them that Mr Richmond wants them to stay focused on the project.\",\n },\n\n { role: \"user\", content: message },\n ],\n stream: true,\n });\n\n for await (const chunk of chatCompletion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n controller.enqueue(\n new TextEncoder().encode(\n \"Sorry, there was an error processing your request.\",\n ),\n );\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n AI Assistant\n \n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-primary: #f4f6f9;\n --bg-secondary: #ffffff;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #007bff;\n --border-color: #e1e4e8;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) transparent;\n}\n\n*::-webkit-scrollbar {\n width: 8px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 20px;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n}\n\n.app-container {\n width: 100%;\n max-width: 800px;\n min-height: 100vh;\n background-color: var(--bg-secondary);\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n}\n\nheader {\n position: relative;\n background-color: var(--bg-secondary);\n padding: 15px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.source-link {\n position: absolute;\n right: 15px;\n color: var(--accent-color);\n text-decoration: none;\n font-size: 0.9em;\n opacity: 0.7;\n transition: opacity 0.3s;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: var(--bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n}\n\n.message-content {\n position: relative;\n max-width: 90%;\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.user-message .message-content {\n background-color: var(--accent-color);\n color: white;\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 4px;\n}\n\n.ai-message .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n align-self: flex-start;\n border: 1px solid var(--border-color);\n border-bottom-left-radius: 4px;\n}\n\n.copy-button {\n position: absolute;\n bottom: -25px;\n right: 0;\n background: none;\n border: none;\n color: var(--text-secondary);\n font-size: 0.8em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.message-content:hover .copy-button {\n opacity: 1;\n}\n\n.copy-button.copied {\n color: var(--accent-color);\n}\n\n.chat-input-form {\n display: flex;\n padding: 15px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n align-items: flex-end;\n}\n\n.chat-input-form textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-right: 10px;\n resize: none;\n max-height: 150px;\n overflow-y: auto;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.chat-input-form button {\n padding: 10px 15px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.chat-input-form button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.loading-indicator {\n display: flex;\n justify-content: center;\n margin: 10px 0;\n}\n\n.typing-dots {\n display: flex;\n gap: 5px;\n}\n\n.typing-dots span {\n color: var(--text-secondary);\n animation: typing 1.4s infinite;\n}\n\n.typing-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.typing-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.error-message {\n background-color: #ffdddd;\n color: #ff0000;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n text-align: center;\n}\n\n/* Markdown and Code Block Styling */\npre {\n background-color: #f6f8fa;\n border-radius: 6px;\n padding: 10px;\n margin: 10px 0;\n overflow-x: auto;\n}\n\ncode {\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.9em;\n}\n\n@keyframes typing {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .app-container {\n width: 100%;\n min-height: 100vh;\n box-shadow: none;\n }\n \n .message-content {\n max-width: 95%;\n }\n\n header {\n padding: 10px;\n }\n\n .source-link {\n position: static;\n margin-left: 10px;\n font-size: 0.8em;\n }\n}\n`;",[],[202],{"_103":211,"_95":212,"_156":213,"_158":-5,"_159":137,"_160":214,"_161":162,"_105":215,"_100":142,"_165":166,"_167":216,"_169":22,"_170":-5,"_171":217,"_98":218},"98e76d28-7037-11f0-af38-0224a6c84d84","monaro.tsx","57b80eca-7037-11f0-b41b-0224a6c84d84",27,["D",1754204453901],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { marked } from \"https://esm.sh/marked@11.2.0\";\n\nfunction CopyButton({ text }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n {copied ? \"✓ Copied\" : \"📋 Copy\"}\n \n );\n}\n\nfunction ChatMessage({ message, isUser }) {\n const renderMessage = () => {\n if (isUser) return message;\n\n // Render markdown with syntax highlighting\n return (\n \n );\n };\n\n return (\n

\n {renderMessage()}\n {!isUser && }\n

\n );\n}\n\nfunction ChatInterface() {\n const [messages, setMessages] = useState([\n {\n text:\n \"Hello! I'm your research assistant. What would you like to know about the Holden Monaro?\",\n isUser: false,\n },\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n // Auto-focus input after message send\n useEffect(() => {\n if (!isLoading) {\n inputRef.current?.focus();\n }\n }, [isLoading]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n // Clear any previous errors\n setError(null);\n\n // Add user message\n const userMessage = input;\n setMessages((prev) => [...prev, { text: userMessage, isUser: true }]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiResponse = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiResponse += chunk;\n\n // Update messages with streaming response\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage.isUser) {\n return [...prev, { text: aiResponse, isUser: false }];\n }\n\n const updatedMessages = [...prev];\n updatedMessages[updatedMessages.length - 1] = {\n text: aiResponse,\n isUser: false,\n };\n return updatedMessages;\n });\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(\"Sorry, there was an error processing your request.\");\n setMessages((prev) => [...prev, {\n text: \"Sorry, there was an error processing your request.\",\n isUser: false,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n \n ))}\n {isLoading && (\n

\n •\n •\n •\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n

🤖 AI Assistant

\n \n View Source\n \n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { message } = await request.json();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const chatCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful AI research assistant for Year 4 students in Western Australia. Use age-appropriate language and explain concepts clearly in ways a 9-year-old can understand. These students are doing a research project on an object from the 1970s. The objectis the Holden Monaro. They will only be doing one, so remember what their object was and assume all follow up questions are about that. Your job is to support them in learning about their chosen object. Always redirect the conversation back to that object and topic. For the project, they need to find out what the object looked like, what it did, what it was used for, who used it, why it was important at the time (the context of the 1970s), what came before it, and what replaced it afterward. Help them understand what life was like in that era and why these objects became popular. Occasionally ask friendly, helpful questions to guide their thinking, but don’t overdo it. Be conversational, clear, and supportive; you can be funny and occasionally make fun of Mr Richmond being old (he's not old but they think it's funny to say he is). Give them tips on what they might search for if they want to find pictures or videos of the object. Always use Australian English. If a student goes off topic, gently remind them that Mr Richmond wants them to stay focused on the project.\",\n },\n\n { role: \"user\", content: message },\n ],\n stream: true,\n });\n\n for await (const chunk of chatCompletion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n controller.enqueue(\n new TextEncoder().encode(\n \"Sorry, there was an error processing your request.\",\n ),\n );\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n AI Assistant\n \n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-primary: #f4f6f9;\n --bg-secondary: #ffffff;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #007bff;\n --border-color: #e1e4e8;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) transparent;\n}\n\n*::-webkit-scrollbar {\n width: 8px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 20px;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n}\n\n.app-container {\n width: 100%;\n max-width: 800px;\n min-height: 100vh;\n background-color: var(--bg-secondary);\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n}\n\nheader {\n position: relative;\n background-color: var(--bg-secondary);\n padding: 15px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.source-link {\n position: absolute;\n right: 15px;\n color: var(--accent-color);\n text-decoration: none;\n font-size: 0.9em;\n opacity: 0.7;\n transition: opacity 0.3s;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: var(--bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n}\n\n.message-content {\n position: relative;\n max-width: 90%;\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.user-message .message-content {\n background-color: var(--accent-color);\n color: white;\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 4px;\n}\n\n.ai-message .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n align-self: flex-start;\n border: 1px solid var(--border-color);\n border-bottom-left-radius: 4px;\n}\n\n.copy-button {\n position: absolute;\n bottom: -25px;\n right: 0;\n background: none;\n border: none;\n color: var(--text-secondary);\n font-size: 0.8em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.message-content:hover .copy-button {\n opacity: 1;\n}\n\n.copy-button.copied {\n color: var(--accent-color);\n}\n\n.chat-input-form {\n display: flex;\n padding: 15px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n align-items: flex-end;\n}\n\n.chat-input-form textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-right: 10px;\n resize: none;\n max-height: 150px;\n overflow-y: auto;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.chat-input-form button {\n padding: 10px 15px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.chat-input-form button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.loading-indicator {\n display: flex;\n justify-content: center;\n margin: 10px 0;\n}\n\n.typing-dots {\n display: flex;\n gap: 5px;\n}\n\n.typing-dots span {\n color: var(--text-secondary);\n animation: typing 1.4s infinite;\n}\n\n.typing-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.typing-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.error-message {\n background-color: #ffdddd;\n color: #ff0000;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n text-align: center;\n}\n\n/* Markdown and Code Block Styling */\npre {\n background-color: #f6f8fa;\n border-radius: 6px;\n padding: 10px;\n margin: 10px 0;\n overflow-x: auto;\n}\n\ncode {\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.9em;\n}\n\n@keyframes typing {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .app-container {\n width: 100%;\n min-height: 100vh;\n box-shadow: none;\n }\n \n .message-content {\n max-width: 95%;\n }\n\n header {\n padding: 10px;\n }\n\n .source-link {\n position: static;\n margin-left: 10px;\n font-size: 0.8em;\n }\n}\n`;",[],[212],{"_103":220,"_95":221,"_156":222,"_158":-5,"_159":137,"_160":223,"_161":162,"_105":224,"_100":142,"_165":166,"_167":225,"_169":22,"_170":-5,"_171":226,"_98":227},"ab7d9fb2-7040-11f0-9aa8-0224a6c84d84","phone.tsx","8b41eb5e-7040-11f0-b47b-0224a6c84d84",59,["D",1754208350566],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { marked } from \"https://esm.sh/marked@11.2.0\";\n\nfunction CopyButton({ text }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n {copied ? \"✓ Copied\" : \"📋 Copy\"}\n \n );\n}\n\nfunction ChatMessage({ message, isUser }) {\n const renderMessage = () => {\n if (isUser) return message;\n\n // Render markdown with syntax highlighting\n return (\n \n );\n };\n\n return (\n

\n {renderMessage()}\n {!isUser && }\n

\n );\n}\n\nfunction ChatInterface() {\n const [messages, setMessages] = useState([\n {\n text:\n \"Hello! I'm your research assistant. What would you like to know about rotary telephones from the 70s?\",\n isUser: false,\n },\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n // Auto-focus input after message send\n useEffect(() => {\n if (!isLoading) {\n inputRef.current?.focus();\n }\n }, [isLoading]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n // Clear any previous errors\n setError(null);\n\n // Add user message\n const userMessage = input;\n setMessages((prev) => [...prev, { text: userMessage, isUser: true }]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiResponse = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiResponse += chunk;\n\n // Update messages with streaming response\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage.isUser) {\n return [...prev, { text: aiResponse, isUser: false }];\n }\n\n const updatedMessages = [...prev];\n updatedMessages[updatedMessages.length - 1] = {\n text: aiResponse,\n isUser: false,\n };\n return updatedMessages;\n });\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(\"Sorry, there was an error processing your request.\");\n setMessages((prev) => [...prev, {\n text: \"Sorry, there was an error processing your request.\",\n isUser: false,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n \n ))}\n {isLoading && (\n

\n •\n •\n •\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n

🤖 AI Assistant

\n \n View Source\n \n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { message } = await request.json();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const chatCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful AI research assistant for Year 4 students in Western Australia. Use age-appropriate language and explain concepts clearly in ways a 9-year-old can understand. These students are doing a research project on an object from the 1970s. The object is the rotary telephone from the 70s. They will only be doing one, so remember what their object was and assume all follow up questions are about that. Your job is to support them in learning about their chosen object. Always redirect the conversation back to that object and topic. For the project, they need to find out what the object looked like, what it did, what it was used for, who used it, why it was important at the time (the context of the 1970s), what came before it, and what replaced it afterward. Help them understand what life was like in that era and why these objects became popular. Occasionally ask friendly, helpful questions to guide their thinking, but don’t overdo it. Be conversational, clear, and supportive; you can be funny and occasionally make fun of Mr Richmond being old (he's not old but they think it's funny to say he is). Give them tips on what they might search for if they want to find pictures or videos of the object. Always use Australian English. If a student goes off topic, gently remind them that Mr Richmond wants them to stay focused on the project.\",\n },\n\n { role: \"user\", content: message },\n ],\n stream: true,\n });\n\n for await (const chunk of chatCompletion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n controller.enqueue(\n new TextEncoder().encode(\n \"Sorry, there was an error processing your request.\",\n ),\n );\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n AI Assistant\n \n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-primary: #f4f6f9;\n --bg-secondary: #ffffff;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #007bff;\n --border-color: #e1e4e8;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) transparent;\n}\n\n*::-webkit-scrollbar {\n width: 8px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 20px;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n}\n\n.app-container {\n width: 100%;\n max-width: 800px;\n min-height: 100vh;\n background-color: var(--bg-secondary);\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n}\n\nheader {\n position: relative;\n background-color: var(--bg-secondary);\n padding: 15px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.source-link {\n position: absolute;\n right: 15px;\n color: var(--accent-color);\n text-decoration: none;\n font-size: 0.9em;\n opacity: 0.7;\n transition: opacity 0.3s;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: var(--bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n}\n\n.message-content {\n position: relative;\n max-width: 90%;\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.user-message .message-content {\n background-color: var(--accent-color);\n color: white;\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 4px;\n}\n\n.ai-message .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n align-self: flex-start;\n border: 1px solid var(--border-color);\n border-bottom-left-radius: 4px;\n}\n\n.copy-button {\n position: absolute;\n bottom: -25px;\n right: 0;\n background: none;\n border: none;\n color: var(--text-secondary);\n font-size: 0.8em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.message-content:hover .copy-button {\n opacity: 1;\n}\n\n.copy-button.copied {\n color: var(--accent-color);\n}\n\n.chat-input-form {\n display: flex;\n padding: 15px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n align-items: flex-end;\n}\n\n.chat-input-form textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-right: 10px;\n resize: none;\n max-height: 150px;\n overflow-y: auto;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.chat-input-form button {\n padding: 10px 15px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.chat-input-form button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.loading-indicator {\n display: flex;\n justify-content: center;\n margin: 10px 0;\n}\n\n.typing-dots {\n display: flex;\n gap: 5px;\n}\n\n.typing-dots span {\n color: var(--text-secondary);\n animation: typing 1.4s infinite;\n}\n\n.typing-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.typing-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.error-message {\n background-color: #ffdddd;\n color: #ff0000;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n text-align: center;\n}\n\n/* Markdown and Code Block Styling */\npre {\n background-color: #f6f8fa;\n border-radius: 6px;\n padding: 10px;\n margin: 10px 0;\n overflow-x: auto;\n}\n\ncode {\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.9em;\n}\n\n@keyframes typing {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .app-container {\n width: 100%;\n min-height: 100vh;\n box-shadow: none;\n }\n \n .message-content {\n max-width: 95%;\n }\n\n header {\n padding: 10px;\n }\n\n .source-link {\n position: static;\n margin-left: 10px;\n font-size: 0.8em;\n }\n}\n`;",[],[221],{"_103":229,"_95":230,"_156":231,"_158":-5,"_159":137,"_160":232,"_161":162,"_105":233,"_100":142,"_165":166,"_167":234,"_169":22,"_170":-5,"_171":235,"_98":236},"1e29bf34-7044-11f0-bc2d-0224a6c84d84","radio.tsx","4087478a-7040-11f0-86d6-0224a6c84d84",66,["D",1754209831448],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { marked } from \"https://esm.sh/marked@11.2.0\";\n\nfunction CopyButton({ text }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n {copied ? \"✓ Copied\" : \"📋 Copy\"}\n \n );\n}\n\nfunction ChatMessage({ message, isUser }) {\n const renderMessage = () => {\n if (isUser) return message;\n\n // Render markdown with syntax highlighting\n return (\n \n );\n };\n\n return (\n

\n {renderMessage()}\n {!isUser && }\n

\n );\n}\n\nfunction ChatInterface() {\n const [messages, setMessages] = useState([\n {\n text:\n \"Hello! I'm your research assistant. What would you like to know about radios from the 70s?\",\n isUser: false,\n },\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n // Auto-focus input after message send\n useEffect(() => {\n if (!isLoading) {\n inputRef.current?.focus();\n }\n }, [isLoading]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n // Clear any previous errors\n setError(null);\n\n // Add user message\n const userMessage = input;\n setMessages((prev) => [...prev, { text: userMessage, isUser: true }]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiResponse = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiResponse += chunk;\n\n // Update messages with streaming response\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage.isUser) {\n return [...prev, { text: aiResponse, isUser: false }];\n }\n\n const updatedMessages = [...prev];\n updatedMessages[updatedMessages.length - 1] = {\n text: aiResponse,\n isUser: false,\n };\n return updatedMessages;\n });\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(\"Sorry, there was an error processing your request.\");\n setMessages((prev) => [...prev, {\n text: \"Sorry, there was an error processing your request.\",\n isUser: false,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n \n ))}\n {isLoading && (\n

\n •\n •\n •\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n

🤖 AI Assistant

\n \n View Source\n \n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { message } = await request.json();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const chatCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful AI research assistant for Year 4 students in Western Australia. Use age-appropriate language and explain concepts clearly in ways a 9-year-old can understand. These students are doing a research project on an object from the 1970s. The object is the radio. Talk about radio in perth as well. They will only be doing one, so remember what their object was and assume all follow up questions are about that. Your job is to support them in learning about their chosen object. Always redirect the conversation back to that object and topic. For the project, they need to find out what the object looked like, what it did, what it was used for, who used it, why it was important at the time (the context of the 1970s), what came before it, and what replaced it afterward. Help them understand what life was like in that era and why these objects became popular. Occasionally ask friendly, helpful questions to guide their thinking, but don’t overdo it. Be conversational, clear, and supportive; you can be funny and occasionally make fun of Mr Richmond being old (he's not old but they think it's funny to say he is). Give them tips on what they might search for if they want to find pictures or videos of the object. Always use Australian English. If a student goes off topic, gently remind them that Mr Richmond wants them to stay focused on the project.\",\n },\n\n { role: \"user\", content: message },\n ],\n stream: true,\n });\n\n for await (const chunk of chatCompletion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n controller.enqueue(\n new TextEncoder().encode(\n \"Sorry, there was an error processing your request.\",\n ),\n );\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n AI Assistant\n \n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-primary: #f4f6f9;\n --bg-secondary: #ffffff;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #007bff;\n --border-color: #e1e4e8;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) transparent;\n}\n\n*::-webkit-scrollbar {\n width: 8px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 20px;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n}\n\n.app-container {\n width: 100%;\n max-width: 800px;\n min-height: 100vh;\n background-color: var(--bg-secondary);\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n}\n\nheader {\n position: relative;\n background-color: var(--bg-secondary);\n padding: 15px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.source-link {\n position: absolute;\n right: 15px;\n color: var(--accent-color);\n text-decoration: none;\n font-size: 0.9em;\n opacity: 0.7;\n transition: opacity 0.3s;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: var(--bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n}\n\n.message-content {\n position: relative;\n max-width: 90%;\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.user-message .message-content {\n background-color: var(--accent-color);\n color: white;\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 4px;\n}\n\n.ai-message .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n align-self: flex-start;\n border: 1px solid var(--border-color);\n border-bottom-left-radius: 4px;\n}\n\n.copy-button {\n position: absolute;\n bottom: -25px;\n right: 0;\n background: none;\n border: none;\n color: var(--text-secondary);\n font-size: 0.8em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.message-content:hover .copy-button {\n opacity: 1;\n}\n\n.copy-button.copied {\n color: var(--accent-color);\n}\n\n.chat-input-form {\n display: flex;\n padding: 15px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n align-items: flex-end;\n}\n\n.chat-input-form textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-right: 10px;\n resize: none;\n max-height: 150px;\n overflow-y: auto;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.chat-input-form button {\n padding: 10px 15px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.chat-input-form button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.loading-indicator {\n display: flex;\n justify-content: center;\n margin: 10px 0;\n}\n\n.typing-dots {\n display: flex;\n gap: 5px;\n}\n\n.typing-dots span {\n color: var(--text-secondary);\n animation: typing 1.4s infinite;\n}\n\n.typing-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.typing-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.error-message {\n background-color: #ffdddd;\n color: #ff0000;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n text-align: center;\n}\n\n/* Markdown and Code Block Styling */\npre {\n background-color: #f6f8fa;\n border-radius: 6px;\n padding: 10px;\n margin: 10px 0;\n overflow-x: auto;\n}\n\ncode {\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.9em;\n}\n\n@keyframes typing {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .app-container {\n width: 100%;\n min-height: 100vh;\n box-shadow: none;\n }\n \n .message-content {\n max-width: 95%;\n }\n\n header {\n padding: 10px;\n }\n\n .source-link {\n position: static;\n margin-left: 10px;\n font-size: 0.8em;\n }\n}\n`;",[],[230],{"_103":238,"_95":239,"_156":240,"_158":-5,"_159":137,"_160":241,"_161":162,"_105":242,"_100":142,"_165":166,"_167":243,"_169":22,"_170":-5,"_171":244,"_98":245},"3c533d9a-7040-11f0-884f-0224a6c84d84","recordplayer.tsx","0bdea6f4-7040-11f0-9c63-0224a6c84d84",51,["D",1754208164066],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { marked } from \"https://esm.sh/marked@11.2.0\";\n\nfunction CopyButton({ text }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n {copied ? \"✓ Copied\" : \"📋 Copy\"}\n \n );\n}\n\nfunction ChatMessage({ message, isUser }) {\n const renderMessage = () => {\n if (isUser) return message;\n\n // Render markdown with syntax highlighting\n return (\n \n );\n };\n\n return (\n

\n {renderMessage()}\n {!isUser && }\n

\n );\n}\n\nfunction ChatInterface() {\n const [messages, setMessages] = useState([\n {\n text:\n \"Hello! I'm your research assistant. What would you like to know about record players from the 70s?\",\n isUser: false,\n },\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n // Auto-focus input after message send\n useEffect(() => {\n if (!isLoading) {\n inputRef.current?.focus();\n }\n }, [isLoading]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n // Clear any previous errors\n setError(null);\n\n // Add user message\n const userMessage = input;\n setMessages((prev) => [...prev, { text: userMessage, isUser: true }]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiResponse = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiResponse += chunk;\n\n // Update messages with streaming response\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage.isUser) {\n return [...prev, { text: aiResponse, isUser: false }];\n }\n\n const updatedMessages = [...prev];\n updatedMessages[updatedMessages.length - 1] = {\n text: aiResponse,\n isUser: false,\n };\n return updatedMessages;\n });\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(\"Sorry, there was an error processing your request.\");\n setMessages((prev) => [...prev, {\n text: \"Sorry, there was an error processing your request.\",\n isUser: false,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n \n ))}\n {isLoading && (\n

\n •\n •\n •\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n

🤖 AI Assistant

\n \n View Source\n \n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { message } = await request.json();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const chatCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful AI research assistant for Year 4 students in Western Australia. Use age-appropriate language and explain concepts clearly in ways a 9-year-old can understand. These students are doing a research project on an object from the 1970s. The object is the record player. They will only be doing one, so remember what their object was and assume all follow up questions are about that. Your job is to support them in learning about their chosen object. Always redirect the conversation back to that object and topic. For the project, they need to find out what the object looked like, what it did, what it was used for, who used it, why it was important at the time (the context of the 1970s), what came before it, and what replaced it afterward. Help them understand what life was like in that era and why these objects became popular. Occasionally ask friendly, helpful questions to guide their thinking, but don’t overdo it. Be conversational, clear, and supportive; you can be funny and occasionally make fun of Mr Richmond being old (he's not old but they think it's funny to say he is). Give them tips on what they might search for if they want to find pictures or videos of the object. Always use Australian English. If a student goes off topic, gently remind them that Mr Richmond wants them to stay focused on the project.\",\n },\n\n { role: \"user\", content: message },\n ],\n stream: true,\n });\n\n for await (const chunk of chatCompletion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n controller.enqueue(\n new TextEncoder().encode(\n \"Sorry, there was an error processing your request.\",\n ),\n );\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n AI Assistant\n \n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-primary: #f4f6f9;\n --bg-secondary: #ffffff;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #007bff;\n --border-color: #e1e4e8;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) transparent;\n}\n\n*::-webkit-scrollbar {\n width: 8px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 20px;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n}\n\n.app-container {\n width: 100%;\n max-width: 800px;\n min-height: 100vh;\n background-color: var(--bg-secondary);\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n}\n\nheader {\n position: relative;\n background-color: var(--bg-secondary);\n padding: 15px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.source-link {\n position: absolute;\n right: 15px;\n color: var(--accent-color);\n text-decoration: none;\n font-size: 0.9em;\n opacity: 0.7;\n transition: opacity 0.3s;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: var(--bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n}\n\n.message-content {\n position: relative;\n max-width: 90%;\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.user-message .message-content {\n background-color: var(--accent-color);\n color: white;\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 4px;\n}\n\n.ai-message .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n align-self: flex-start;\n border: 1px solid var(--border-color);\n border-bottom-left-radius: 4px;\n}\n\n.copy-button {\n position: absolute;\n bottom: -25px;\n right: 0;\n background: none;\n border: none;\n color: var(--text-secondary);\n font-size: 0.8em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.message-content:hover .copy-button {\n opacity: 1;\n}\n\n.copy-button.copied {\n color: var(--accent-color);\n}\n\n.chat-input-form {\n display: flex;\n padding: 15px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n align-items: flex-end;\n}\n\n.chat-input-form textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-right: 10px;\n resize: none;\n max-height: 150px;\n overflow-y: auto;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.chat-input-form button {\n padding: 10px 15px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.chat-input-form button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.loading-indicator {\n display: flex;\n justify-content: center;\n margin: 10px 0;\n}\n\n.typing-dots {\n display: flex;\n gap: 5px;\n}\n\n.typing-dots span {\n color: var(--text-secondary);\n animation: typing 1.4s infinite;\n}\n\n.typing-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.typing-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.error-message {\n background-color: #ffdddd;\n color: #ff0000;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n text-align: center;\n}\n\n/* Markdown and Code Block Styling */\npre {\n background-color: #f6f8fa;\n border-radius: 6px;\n padding: 10px;\n margin: 10px 0;\n overflow-x: auto;\n}\n\ncode {\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.9em;\n}\n\n@keyframes typing {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .app-container {\n width: 100%;\n min-height: 100vh;\n box-shadow: none;\n }\n \n .message-content {\n max-width: 95%;\n }\n\n header {\n padding: 10px;\n }\n\n .source-link {\n position: static;\n margin-left: 10px;\n font-size: 0.8em;\n }\n}\n`;",[],[239],{"_103":247,"_95":248,"_156":249,"_158":-5,"_159":137,"_160":250,"_161":162,"_105":251,"_100":252,"_165":166,"_167":253,"_169":22,"_170":-5,"_171":254,"_98":255},"c3238720-7037-11f0-9c7d-0224a6c84d84","sandman.tsx","99a5ee92-7037-11f0-bff1-0224a6c84d84",31,["D",1754204524745],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { marked } from \"https://esm.sh/marked@11.2.0\";\n\nfunction CopyButton({ text }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n {copied ? \"✓ Copied\" : \"📋 Copy\"}\n \n );\n}\n\nfunction ChatMessage({ message, isUser }) {\n const renderMessage = () => {\n if (isUser) return message;\n\n // Render markdown with syntax highlighting\n return (\n \n );\n };\n\n return (\n

\n {renderMessage()}\n {!isUser && }\n

\n );\n}\n\nfunction ChatInterface() {\n const [messages, setMessages] = useState([\n {\n text:\n \"Hello! I'm your research assistant. What would you like to know about the Holden Sandman?\",\n isUser: false,\n },\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n // Auto-focus input after message send\n useEffect(() => {\n if (!isLoading) {\n inputRef.current?.focus();\n }\n }, [isLoading]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n // Clear any previous errors\n setError(null);\n\n // Add user message\n const userMessage = input;\n setMessages((prev) => [...prev, { text: userMessage, isUser: true }]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiResponse = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiResponse += chunk;\n\n // Update messages with streaming response\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage.isUser) {\n return [...prev, { text: aiResponse, isUser: false }];\n }\n\n const updatedMessages = [...prev];\n updatedMessages[updatedMessages.length - 1] = {\n text: aiResponse,\n isUser: false,\n };\n return updatedMessages;\n });\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(\"Sorry, there was an error processing your request.\");\n setMessages((prev) => [...prev, {\n text: \"Sorry, there was an error processing your request.\",\n isUser: false,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n \n ))}\n {isLoading && (\n

\n •\n •\n •\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n

🤖 AI Assistant

\n \n View Source\n \n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { message } = await request.json();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const chatCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful AI research assistant for Year 4 students in Western Australia. Use age-appropriate language and explain concepts clearly in ways a 9-year-old can understand. These students are doing a research project on an object from the 1970s. The objectis the Holden Sandman. They will only be doing one, so remember what their object was and assume all follow up questions are about that. Your job is to support them in learning about their chosen object. Always redirect the conversation back to that object and topic. For the project, they need to find out what the object looked like, what it did, what it was used for, who used it, why it was important at the time (the context of the 1970s), what came before it, and what replaced it afterward. Help them understand what life was like in that era and why these objects became popular. Occasionally ask friendly, helpful questions to guide their thinking, but don’t overdo it. Be conversational, clear, and supportive; you can be funny and occasionally make fun of Mr Richmond being old (he's not old but they think it's funny to say he is). Give them tips on what they might search for if they want to find pictures or videos of the object. Always use Australian English. If a student goes off topic, gently remind them that Mr Richmond wants them to stay focused on the project.\",\n },\n\n { role: \"user\", content: message },\n ],\n stream: true,\n });\n\n for await (const chunk of chatCompletion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n controller.enqueue(\n new TextEncoder().encode(\n \"Sorry, there was an error processing your request.\",\n ),\n );\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n AI Assistant\n \n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-primary: #f4f6f9;\n --bg-secondary: #ffffff;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #007bff;\n --border-color: #e1e4e8;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) transparent;\n}\n\n*::-webkit-scrollbar {\n width: 8px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 20px;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n}\n\n.app-container {\n width: 100%;\n max-width: 800px;\n min-height: 100vh;\n background-color: var(--bg-secondary);\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n}\n\nheader {\n position: relative;\n background-color: var(--bg-secondary);\n padding: 15px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.source-link {\n position: absolute;\n right: 15px;\n color: var(--accent-color);\n text-decoration: none;\n font-size: 0.9em;\n opacity: 0.7;\n transition: opacity 0.3s;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: var(--bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n}\n\n.message-content {\n position: relative;\n max-width: 90%;\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.user-message .message-content {\n background-color: var(--accent-color);\n color: white;\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 4px;\n}\n\n.ai-message .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n align-self: flex-start;\n border: 1px solid var(--border-color);\n border-bottom-left-radius: 4px;\n}\n\n.copy-button {\n position: absolute;\n bottom: -25px;\n right: 0;\n background: none;\n border: none;\n color: var(--text-secondary);\n font-size: 0.8em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.message-content:hover .copy-button {\n opacity: 1;\n}\n\n.copy-button.copied {\n color: var(--accent-color);\n}\n\n.chat-input-form {\n display: flex;\n padding: 15px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n align-items: flex-end;\n}\n\n.chat-input-form textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-right: 10px;\n resize: none;\n max-height: 150px;\n overflow-y: auto;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.chat-input-form button {\n padding: 10px 15px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.chat-input-form button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.loading-indicator {\n display: flex;\n justify-content: center;\n margin: 10px 0;\n}\n\n.typing-dots {\n display: flex;\n gap: 5px;\n}\n\n.typing-dots span {\n color: var(--text-secondary);\n animation: typing 1.4s infinite;\n}\n\n.typing-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.typing-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.error-message {\n background-color: #ffdddd;\n color: #ff0000;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n text-align: center;\n}\n\n/* Markdown and Code Block Styling */\npre {\n background-color: #f6f8fa;\n border-radius: 6px;\n padding: 10px;\n margin: 10px 0;\n overflow-x: auto;\n}\n\ncode {\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.9em;\n}\n\n@keyframes typing {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .app-container {\n width: 100%;\n min-height: 100vh;\n box-shadow: none;\n }\n \n .message-content {\n max-width: 95%;\n }\n\n header {\n padding: 10px;\n }\n\n .source-link {\n position: static;\n margin-left: 10px;\n font-size: 0.8em;\n }\n}\n`;",[],[248],{"_103":257,"_95":258,"_156":259,"_158":-5,"_159":137,"_160":260,"_161":162,"_105":261,"_100":262,"_165":166,"_167":263,"_169":22,"_170":-5,"_171":264,"_98":265},"4268b250-703b-11f0-a759-0224a6c84d84","skateboard.tsx","5c4ca474-7036-11f0-a005-0224a6c84d84",44,["D",1754206026792],4,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { marked } from \"https://esm.sh/marked@11.2.0\";\n\nfunction CopyButton({ text }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n {copied ? \"✓ Copied\" : \"📋 Copy\"}\n \n );\n}\n\nfunction ChatMessage({ message, isUser }) {\n const renderMessage = () => {\n if (isUser) return message;\n\n // Render markdown with syntax highlighting\n return (\n \n );\n };\n\n return (\n

\n {renderMessage()}\n {!isUser && }\n

\n );\n}\n\nfunction ChatInterface() {\n const [messages, setMessages] = useState([\n {\n text:\n \"Hello! I'm your research assistant. What would you like to know about skateboards from the 70s?\",\n isUser: false,\n },\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n // Auto-focus input after message send\n useEffect(() => {\n if (!isLoading) {\n inputRef.current?.focus();\n }\n }, [isLoading]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n // Clear any previous errors\n setError(null);\n\n // Add user message\n const userMessage = input;\n setMessages((prev) => [...prev, { text: userMessage, isUser: true }]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiResponse = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiResponse += chunk;\n\n // Update messages with streaming response\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage.isUser) {\n return [...prev, { text: aiResponse, isUser: false }];\n }\n\n const updatedMessages = [...prev];\n updatedMessages[updatedMessages.length - 1] = {\n text: aiResponse,\n isUser: false,\n };\n return updatedMessages;\n });\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(\"Sorry, there was an error processing your request.\");\n setMessages((prev) => [...prev, {\n text: \"Sorry, there was an error processing your request.\",\n isUser: false,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n \n ))}\n {isLoading && (\n

\n •\n •\n •\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n

🤖 AI Assistant

\n \n View Source\n \n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { message } = await request.json();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const chatCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful AI research assistant for Year 4 students in Western Australia. Use age-appropriate language and explain concepts clearly in ways a 9-year-old can understand. These students are doing a research project on an object from the 1970s. The object is the skateboard. They will only be doing one, so remember what their object was and assume all follow up questions are about that. Your job is to support them in learning about their chosen object. Always redirect the conversation back to that object and topic. For the project, they need to find out what the object looked like, what it did, what it was used for, who used it, why it was important at the time (the context of the 1970s), what came before it, and what replaced it afterward. Help them understand what life was like in that era and why these objects became popular. Occasionally ask friendly, helpful questions to guide their thinking, but don’t overdo it. Be conversational, clear, and supportive; you can be funny and occasionally make fun of Mr Richmond being old (he's not old but they think it's funny to say he is). Give them tips on what they might search for if they want to find pictures or videos of the object. Always use Australian English. If a student goes off topic, gently remind them that Mr Richmond wants them to stay focused on the project.\",\n },\n\n { role: \"user\", content: message },\n ],\n stream: true,\n });\n\n for await (const chunk of chatCompletion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n controller.enqueue(\n new TextEncoder().encode(\n \"Sorry, there was an error processing your request.\",\n ),\n );\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n AI Assistant\n \n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-primary: #f4f6f9;\n --bg-secondary: #ffffff;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #007bff;\n --border-color: #e1e4e8;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) transparent;\n}\n\n*::-webkit-scrollbar {\n width: 8px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 20px;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n}\n\n.app-container {\n width: 100%;\n max-width: 800px;\n min-height: 100vh;\n background-color: var(--bg-secondary);\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n}\n\nheader {\n position: relative;\n background-color: var(--bg-secondary);\n padding: 15px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.source-link {\n position: absolute;\n right: 15px;\n color: var(--accent-color);\n text-decoration: none;\n font-size: 0.9em;\n opacity: 0.7;\n transition: opacity 0.3s;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: var(--bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n}\n\n.message-content {\n position: relative;\n max-width: 90%;\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.user-message .message-content {\n background-color: var(--accent-color);\n color: white;\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 4px;\n}\n\n.ai-message .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n align-self: flex-start;\n border: 1px solid var(--border-color);\n border-bottom-left-radius: 4px;\n}\n\n.copy-button {\n position: absolute;\n bottom: -25px;\n right: 0;\n background: none;\n border: none;\n color: var(--text-secondary);\n font-size: 0.8em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.message-content:hover .copy-button {\n opacity: 1;\n}\n\n.copy-button.copied {\n color: var(--accent-color);\n}\n\n.chat-input-form {\n display: flex;\n padding: 15px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n align-items: flex-end;\n}\n\n.chat-input-form textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-right: 10px;\n resize: none;\n max-height: 150px;\n overflow-y: auto;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.chat-input-form button {\n padding: 10px 15px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.chat-input-form button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.loading-indicator {\n display: flex;\n justify-content: center;\n margin: 10px 0;\n}\n\n.typing-dots {\n display: flex;\n gap: 5px;\n}\n\n.typing-dots span {\n color: var(--text-secondary);\n animation: typing 1.4s infinite;\n}\n\n.typing-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.typing-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.error-message {\n background-color: #ffdddd;\n color: #ff0000;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n text-align: center;\n}\n\n/* Markdown and Code Block Styling */\npre {\n background-color: #f6f8fa;\n border-radius: 6px;\n padding: 10px;\n margin: 10px 0;\n overflow-x: auto;\n}\n\ncode {\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.9em;\n}\n\n@keyframes typing {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .app-container {\n width: 100%;\n min-height: 100vh;\n box-shadow: none;\n }\n \n .message-content {\n max-width: 95%;\n }\n\n header {\n padding: 10px;\n }\n\n .source-link {\n position: static;\n margin-left: 10px;\n font-size: 0.8em;\n }\n}\n`;",[],[258],{"_103":267,"_95":268,"_156":269,"_158":-5,"_159":137,"_160":270,"_161":162,"_105":271,"_100":252,"_165":272,"_167":273,"_169":22,"_170":-5,"_171":274,"_98":275},"285bc7d8-7047-11f0-8458-0224a6c84d84","style.css","75846156-7046-11f0-8544-0224a6c84d84",71,["D",1754211137047],"file","body {\n background-image: url(\"https://www.hiltonps.org/1970s/wallpaper.png\")\n !important;\n}",[],[268],{"_103":277,"_95":278,"_156":279,"_158":-5,"_159":137,"_160":280,"_161":162,"_105":281,"_100":282,"_165":166,"_167":283,"_169":22,"_170":-5,"_171":284,"_98":285},"2365e44a-703b-11f0-b150-0224a6c84d84","typewriter.tsx","199fa932-703b-11f0-b67c-0224a6c84d84",43,["D",1754205974763],1,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { marked } from \"https://esm.sh/marked@11.2.0\";\n\nfunction CopyButton({ text }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n {copied ? \"✓ Copied\" : \"📋 Copy\"}\n \n );\n}\n\nfunction ChatMessage({ message, isUser }) {\n const renderMessage = () => {\n if (isUser) return message;\n\n // Render markdown with syntax highlighting\n return (\n \n );\n };\n\n return (\n

\n {renderMessage()}\n {!isUser && }\n

\n );\n}\n\nfunction ChatInterface() {\n const [messages, setMessages] = useState([\n {\n text:\n \"Hello! I'm your research assistant. What would you like to know about typewriters from the 70s?\",\n isUser: false,\n },\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n // Auto-focus input after message send\n useEffect(() => {\n if (!isLoading) {\n inputRef.current?.focus();\n }\n }, [isLoading]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n // Clear any previous errors\n setError(null);\n\n // Add user message\n const userMessage = input;\n setMessages((prev) => [...prev, { text: userMessage, isUser: true }]);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiResponse = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiResponse += chunk;\n\n // Update messages with streaming response\n setMessages((prev) => {\n const lastMessage = prev[prev.length - 1];\n if (lastMessage.isUser) {\n return [...prev, { text: aiResponse, isUser: false }];\n }\n\n const updatedMessages = [...prev];\n updatedMessages[updatedMessages.length - 1] = {\n text: aiResponse,\n isUser: false,\n };\n return updatedMessages;\n });\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setError(\"Sorry, there was an error processing your request.\");\n setMessages((prev) => [...prev, {\n text: \"Sorry, there was an error processing your request.\",\n isUser: false,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n \n ))}\n {isLoading && (\n

\n •\n •\n •\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return (\n

🤖 AI Assistant

\n \n View Source\n \n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { message } = await request.json();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const chatCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful AI research assistant for Year 4 students in Western Australia. Use age-appropriate language and explain concepts clearly in ways a 9-year-old can understand. These students are doing a research project on an object from the 1970s. The object is the typewriter. They will only be doing one, so remember what their object was and assume all follow up questions are about that. Your job is to support them in learning about their chosen object. Always redirect the conversation back to that object and topic. For the project, they need to find out what the object looked like, what it did, what it was used for, who used it, why it was important at the time (the context of the 1970s), what came before it, and what replaced it afterward. Help them understand what life was like in that era and why these objects became popular. Occasionally ask friendly, helpful questions to guide their thinking, but don’t overdo it. Be conversational, clear, and supportive; you can be funny and occasionally make fun of Mr Richmond being old (he's not old but they think it's funny to say he is). Give them tips on what they might search for if they want to find pictures or videos of the object. Always use Australian English. If a student goes off topic, gently remind them that Mr Richmond wants them to stay focused on the project.\",\n },\n\n { role: \"user\", content: message },\n ],\n stream: true,\n });\n\n for await (const chunk of chatCompletion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n controller.enqueue(\n new TextEncoder().encode(\n \"Sorry, there was an error processing your request.\",\n ),\n );\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n AI Assistant\n \n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-primary: #f4f6f9;\n --bg-secondary: #ffffff;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #007bff;\n --border-color: #e1e4e8;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) transparent;\n}\n\n*::-webkit-scrollbar {\n width: 8px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background-color: var(--accent-color);\n border-radius: 20px;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n display: flex;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n}\n\n.app-container {\n width: 100%;\n max-width: 800px;\n min-height: 100vh;\n background-color: var(--bg-secondary);\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n}\n\nheader {\n position: relative;\n background-color: var(--bg-secondary);\n padding: 15px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.source-link {\n position: absolute;\n right: 15px;\n color: var(--accent-color);\n text-decoration: none;\n font-size: 0.9em;\n opacity: 0.7;\n transition: opacity 0.3s;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n\n.chat-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: var(--bg-primary);\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n}\n\n.message-content {\n position: relative;\n max-width: 90%;\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.user-message .message-content {\n background-color: var(--accent-color);\n color: white;\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 4px;\n}\n\n.ai-message .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n align-self: flex-start;\n border: 1px solid var(--border-color);\n border-bottom-left-radius: 4px;\n}\n\n.copy-button {\n position: absolute;\n bottom: -25px;\n right: 0;\n background: none;\n border: none;\n color: var(--text-secondary);\n font-size: 0.8em;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.message-content:hover .copy-button {\n opacity: 1;\n}\n\n.copy-button.copied {\n color: var(--accent-color);\n}\n\n.chat-input-form {\n display: flex;\n padding: 15px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n align-items: flex-end;\n}\n\n.chat-input-form textarea {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n margin-right: 10px;\n resize: none;\n max-height: 150px;\n overflow-y: auto;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.chat-input-form button {\n padding: 10px 15px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.chat-input-form button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.loading-indicator {\n display: flex;\n justify-content: center;\n margin: 10px 0;\n}\n\n.typing-dots {\n display: flex;\n gap: 5px;\n}\n\n.typing-dots span {\n color: var(--text-secondary);\n animation: typing 1.4s infinite;\n}\n\n.typing-dots span:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.typing-dots span:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.error-message {\n background-color: #ffdddd;\n color: #ff0000;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n text-align: center;\n}\n\n/* Markdown and Code Block Styling */\npre {\n background-color: #f6f8fa;\n border-radius: 6px;\n padding: 10px;\n margin: 10px 0;\n overflow-x: auto;\n}\n\ncode {\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.9em;\n}\n\n@keyframes typing {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .app-container {\n width: 100%;\n min-height: 100vh;\n box-shadow: none;\n }\n \n .message-content {\n max-width: 95%;\n }\n\n header {\n padding: 10px;\n }\n\n .source-link {\n position: static;\n margin-left: 10px;\n font-size: 0.8em;\n }\n}\n`;",[],[278],"files",[153,174,183,191,200,210,219,228,237,246,256,266,276],"counts",{"_290":32,"_291":282,"_292":32,"_293":32},"pulls","branches","forks","envVars","contents",[],{"_103":184,"_95":99,"_156":185,"_158":-5,"_159":137,"_160":186,"_161":162,"_105":297,"_100":142,"_165":166,"_167":188,"_169":22,"_170":-5,"_98":298},["D",1754208052790],[99],"upstreamProject",{"_103":145,"_95":96,"_111":-5,"_112":-5,"_109":110,"_23":301},{"_93":302,"_129":303},"olamultiply","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ3UGtZSW5PU09vcWVNTkdDNkF1Tm5uVVpqWiJ9","upstreamBranch",{"_103":140,"_105":306,"_307":308,"_95":43,"_138":145,"_100":142,"_139":-5,"_141":-5,"_309":310,"_107":-5,"_150":22,"_109":110,"_149":302,"_16":147,"_148":96},["D",1746193606495],"updatedAt",["D",1745955443352],"lockfileKey","1757342475001-esm.town_v_olamultiply_ChatGPTclone@2-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":317,"_272":322,"_325":326,"_338":339,"_344":-7,"_345":32,"_346":22},{"_103":104,"_95":96,"_105":318,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":319,"_131":320,"_134":321,"_150":22},["D",1754197959656],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":140,"_141":142,"_143":110,"_144":145,"_146":147,"_148":96,"_149":94},{"_103":184,"_95":99,"_156":185,"_158":-5,"_159":137,"_160":186,"_161":162,"_105":323,"_100":142,"_165":166,"_167":188,"_169":22,"_170":-5,"_98":324},["D",1754208052790],[99],"history",[327,329,333],{"_103":184,"_159":137,"_156":185,"_95":99,"_167":188,"_165":166,"_100":142,"_158":-5,"_105":328,"_160":186,"_170":-5},["D",1754208052790],{"_103":330,"_159":137,"_156":185,"_95":99,"_167":207,"_165":166,"_100":282,"_158":-5,"_105":331,"_160":332,"_170":-5},"3c8ca48c-703a-11f0-9e3b-0224a6c84d84",["D",1754205587461],33,{"_103":334,"_159":137,"_156":185,"_95":335,"_167":207,"_165":166,"_100":32,"_158":-5,"_105":336,"_160":337,"_170":-5},"0b9fcd72-703a-11f0-84b1-0224a6c84d84","main-copy.tsx",["D",1754205505384],32,"versions",[340,342,343],{"_272":327,"_341":329},"previous",{"_272":329,"_341":333},{"_272":333,"_341":-5},"versionNumber","page","hasNext","actionData","errors"]

History for disco.tsx