\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}",[],[181,188,195],[181,188],{"_102":205,"_95":206,"_154":207,"_156":182,"_157":139,"_158":208,"_160":117,"_104":209,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":210,"_98":221},"577c044c-0508-11f0-88c1-569c3dd06744","services","577c0500-0508-11f0-88c1-569c3dd06744",14,["D",1742419383345],[211],{"_102":212,"_95":213,"_154":214,"_156":207,"_157":139,"_158":215,"_160":117,"_104":216,"_99":217,"_162":199,"_164":218,"_165":22,"_166":-5,"_167":219,"_98":220},"5c335fc6-0508-11f0-9f2b-569c3dd06744","projectService.ts","5787d970-0508-11f0-8016-569c3dd06744",18,["D",1742419391316],1,"export async function createProject(projectName: string) {\n const response = await fetch('/api/projects', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ name: projectName }),\n });\n\n if (!response.ok) {\n throw new Error('Failed to create project');\n }\n\n return response.json();\n} ",[],[181,206,213],[181,206],{"_102":223,"_95":224,"_154":225,"_156":182,"_157":139,"_158":226,"_160":117,"_104":227,"_99":217,"_162":228,"_164":229,"_165":22,"_166":-5,"_167":230,"_98":231},"e28897b6-04ff-11f0-b429-569c3dd06744","index.html","8dcd3a9c-04eb-11f0-bea4-569c3dd06744",6,["D",1742415751214],"file","\n\n \n \n \n Townie - AI Assistant\n \n 🤖\" type=\"image/svg+xml\">\n \n \n

\n \n \n \n",[],[181,224],{"_102":233,"_95":234,"_154":235,"_156":182,"_157":139,"_158":236,"_160":117,"_104":237,"_99":217,"_162":199,"_164":238,"_165":22,"_166":-5,"_167":239,"_98":240},"5bb24f62-0508-11f0-8e3e-569c3dd06744","index.tsx","8db35078-04eb-11f0-8ed7-569c3dd06744",16,["D",1742419390464],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\nimport { createProject } from './services/projectService';\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n\nfunction App() {\n const handleCreateProject = async (projectName: string) => {\n try {\n const newProject = await createProject(projectName);\n console.log('Project created:', newProject);\n } catch (error) {\n console.error('Error creating project:', error);\n }\n };\n}",[],[181,234],[181],{"_102":243,"_95":244,"_154":245,"_156":-5,"_157":139,"_158":217,"_160":117,"_104":246,"_99":32,"_162":228,"_164":247,"_165":22,"_166":-5,"_167":248,"_98":249},"8da59bd6-04eb-11f0-81b7-569c3dd06744","README.md","8da59c9e-04eb-11f0-81b7-569c3dd06744",["D",1742407018871],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.",[],[244],"files",[151,169,179,186,193,204,211,222,232,242],"counts",{"_254":32,"_255":183,"_256":32,"_257":32},"pulls","branches","forks","envVars","contents",[260,263,266],{"_102":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":159,"_160":117,"_104":261,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":262},["D",1742407019068],[153],{"_102":180,"_95":181,"_154":182,"_156":-5,"_157":139,"_158":183,"_160":117,"_104":264,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":265},["D",1742407018960],[181],{"_102":243,"_95":244,"_154":245,"_156":-5,"_157":139,"_158":217,"_160":117,"_104":267,"_99":32,"_162":228,"_164":247,"_165":22,"_166":-5,"_98":268},["D",1742407018871],[244],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branches",{"_93":94,"_95":96,"_100":277,"_255":282},{"_102":103,"_95":96,"_104":278,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":279,"_133":280,"_136":281,"_148":22},["D",1742407018755],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_99":138,"_95":43,"_102":139,"_140":103,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[283,290],{"_102":284,"_104":285,"_286":287,"_95":288,"_140":103,"_99":183,"_141":139,"_142":138,"_289":-5,"_106":-5},"ce04554c-0594-11f0-b7ce-569c3dd06744",["D",1742479711816],"updatedAt",["D",1742479727738],"lala","lockfileKey",{"_102":139,"_104":291,"_286":292,"_95":43,"_140":103,"_99":138,"_141":-5,"_142":-5,"_289":-5,"_106":-5},["D",1742407018755],["D",1742419630538],"actionData","errors"]

charmaine

townieBear

Branches2

Branches
2