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

\n {renderMessage()}\n {!isUser && (\n \n )}\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

setInput(e.target.value)}\n          placeholder=\"Send a message...\"\n          disabled={isLoading}\n          rows={1}\n          onKeyDown={(e) => {\n            // Allow shift+enter for multiline input\n            if (e.key === 'Enter' && !e.shiftKey) {\n              e.preventDefault();\n              handleSubmit(e);\n            }\n          }}\n        />\n        <button \n          type=\"submit\" \n          disabled={isLoading || !input.trim()}\n          aria-label=\"Send message\"\n        >\n          {isLoading ? '⏳ Generating...' : '➤ Send'}\n        </button>\n      </form>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div className=\"app-container\">\n      <header>\n        <h1>🤖 AI Assistant</h1>\n        <a \n          href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n          target=\"_top\" \n          className=\"source-link\"\n        >\n          View Source\n        </a>\n      </header>\n      <ChatInterface />\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\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-mini\",\n            messages: [\n              { \n                role: \"system\", \n                content: \"You are a helpful AI assistant. Respond concisely and use markdown for code blocks when appropriate.\" \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(new TextEncoder().encode('Sorry, there was an error processing your request.'));\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    <html>\n      <head>\n        <title>AI Assistant</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\">\n        <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\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/olamultiply/ChatGPTclone/code/main.tsx","extension","actionData","errors"]
</article></body></html>