\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`;","deleted","label",[98],"permalink","https://www.val.town/x/shane10987654321/ChatGPTclone/code/skateboard.tsx","extension","actionData","errors"]