\n setMessage(e.target.value)}\n onKeyDown={e => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit(e);\n }\n }}\n placeholder=\"Type your message here...\"\n disabled={disabled}\n rows={1}\n />\n \n \n );\n}\n\n// MessageList Component\nfunction MessageList({ messages, isProcessing }: { messages: Message[]; isProcessing: boolean }) {\n if (messages.length === 0) {\n return (\n

Welcome to Townie!

Start a conversation by typing a message below.

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

\n {messages.map((message, index) => (\n

\n {message.role === \"user\" ? \"👤\" : \"🤖\"}\n

\n {message.content}\n {isProcessing && index === messages.length - 1 && message.role === \"assistant\" && (\n ...\n )}\n

\n ))}\n

\n );\n}\n\n// SystemPrompt Component\nfunction SystemPrompt({ value, onChange }: { value: string; onChange: (value: string) => void }) {\n const [isExpanded, setIsExpanded] = useState(false);\n const [localValue, setLocalValue] = useState(value);\n \n const handleSave = () => {\n onChange(localValue);\n setIsExpanded(false);\n };\n \n return (\n

\n \n \n {isExpanded && (\n

\n setLocalValue(e.target.value)}\n className=\"system-prompt-textarea\"\n rows={8}\n />\n

\n \n \n

\n )}\n

\n );\n}\n\n// Main App Component\nexport function App() {\n const [messages, setMessages] = useState([]);\n const [systemPrompt, setSystemPrompt] = useState(\n localStorage.getItem(\"systemPrompt\") || \n `You are Townie, a helpful AI assistant.\nYou aim to be informative, respectful and accurate in your responses.\nIf you don't know the answer to a question, admit that you don't know rather than making up information.\nUse accessible language and give thoughtful, detailed responses that anticipate potential follow-up questions.\nWhen relevant, suggest further resources or additional considerations.`\n );\n const [isProcessing, setIsProcessing] = useState(false);\n const [error, setError] = useState(null);\n const [projectName, setProjectName] = useState('');\n \n const messagesEndRef = useRef(null);\n \n // Scroll to bottom of messages when they change\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n \n // Save system prompt to localStorage\n useEffect(() => {\n localStorage.setItem(\"systemPrompt\", systemPrompt);\n }, [systemPrompt]);\n \n const handleSendMessage = async (content: string) => {\n if (!content.trim() || isProcessing) return;\n \n // Add user message\n const userMessage: Message = {\n role: \"user\",\n content,\n id: uuidv4()\n };\n \n // Add placeholder for assistant message\n const assistantMessage: Message = {\n role: \"assistant\",\n content: \"\",\n id: uuidv4()\n };\n \n setMessages(prevMessages => [...prevMessages, userMessage, assistantMessage]);\n setIsProcessing(true);\n setError(null);\n \n try {\n // Get all messages except the empty assistant message we just added\n const messagesToSend = [...messages, userMessage];\n \n const response = await fetch(\"/api/chat/complete\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n messages: messagesToSend,\n systemPrompt\n })\n });\n \n if (!response.ok) {\n throw new Error(`Error: ${response.status}`);\n }\n \n const data = await response.json();\n \n // Update the assistant message with the response\n setMessages(prevMessages => {\n const updatedMessages = [...prevMessages];\n updatedMessages[updatedMessages.length - 1].content = data.response;\n return updatedMessages;\n });\n } catch (error) {\n console.error(\"Error sending message:\", error);\n setError(error instanceof Error ? error.message : \"An error occurred\");\n } finally {\n setIsProcessing(false);\n }\n };\n \n const handleClearChat = () => {\n setMessages([]);\n setError(null);\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n handleCreateProject(projectName);\n };\n \n return (\n

Townie

\n \n

\n \n {error && (\n

\n {error}\n

\n )}\n \n \n \n \n\n

\n );\n}","deleted","label",[170,171,152],"frontend","components","permalink","https://www.val.town/x/charmaine/townieBear/code/frontend/components/App.tsx","extension","actionData","errors"]