\n \n \n \n",[],[139,182],"577c044c-0508-11f0-88c1-569c3dd06744",["D",1742419383345],[],[139,32],"e2b8fd20-04ff-11f0-b491-569c3dd06744","App.tsx","8dd635f2-04eb-11f0-b4c1-569c3dd06744","2482abf8-ee11-40eb-8207-a7f428785949",8,["D",1742415751535],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { v4 as uuidv4 } from \"https://esm.sh/uuid@9.0.0\";\n\n// Define types inline since we don't have a shared directory\ninterface Message {\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n id?: string;\n}\n\n// ChatInput Component\nfunction ChatInput({ onSendMessage, disabled }: { onSendMessage: (message: string) => void; disabled: boolean }) {\n const [message, setMessage] = useState(\"\");\n \n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (message.trim() && !disabled) {\n onSendMessage(message);\n setMessage(\"\");\n }\n };\n \n return (\n

\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 \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 return (\n

Townie

\n \n

\n \n {error && (\n

\n {error}\n

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

\n );\n}",[],[139,202,194],"components","8dd63caa-04eb-11f0-b4c1-569c3dd06744",5,["D",1742407019189],[164],[139,202],["D",1742407018960],[163,165,166,167],[139],"22a31972-0508-11f0-aded-569c3dd06744","index.ts",13,["D",1742419294737],"http","/**\n * This is a Townie clone for Val Town.\n * It creates a chat interface that helps users generate Val Town applications.\n * Uses OpenAI's API to generate code responses in the proper format.\n */\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Hono } from \"npm:hono\";\nimport { cors } from \"npm:hono/cors\";\nimport { streamSSE } from \"npm:hono/streaming\";\nimport { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\n\n// Define message interface\ninterface Message {\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n id?: string;\n}\n\nconst app = new Hono();\n\n// Add CORS middleware\napp.use(\"/*\", cors());\n\n// Serve frontend files\napp.get(\"/frontend/*\", async c => {\n return serveFile(c.req.path, import.meta.url);\n});\n\n// Serve index.html at root\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Default system prompt for Townie on Val.town\nconst VAL_TOWN_SYSTEM_PROMPT = `Answer requests with TypeScript programs that are written for Deno's runtime environment in Val Town.\n\nYour answer should be code that is complete and directly runnable. There should be no comments like \"more content here\". You also can't respond with just the changes to some part. You need to entirely regenerate the code each time. Your response should start with \\`\\`\\`ts and end with \\`\\`\\`, ie full code fences.\n\nResponses should omit any information about installing or running Deno.\n\nYour val must export default an HTTP handler, which inputs and outputs web-standard Request and Response objects, respectively. This is almost the same interface as Cloudflare workers. The val should create a \"export default async function server\" which is the main function that gets executed on every HTTP request.\n\nStart your response with a comment explaining how your approach will work, what libraries or API calls you will use.\n\nQUIRKS\n\nResponse.redirect is broken. Use return new Response(null, { 302, headers: { Location: \"/place/to/redirect\" }})\n\nAvoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's not practical for the user's request (e.g. if they ask for a particular animated gif).\n\nIf you want an AI generated image, use https://maxm-imggenurl.web.val.run/the-description-of-your-image to dynamically generate one.\n\nDo not use the Deno KV module for storage.\n\nDo not use the alert() or input() methods.\n\nTastefully add a view source link back to the user's val if there's a natural spot for it and it fits in the context of what they're building. You can generate the val source url via import.meta.url.replace(\"esm.town\", \"val.town\").\n\nENVIRONMENT VARIABLES\n\nDon't use any environment variables unless strictly necessary. For example use APIs that don't require a key.\n\nIf you need environment variables use Deno.env.get('keyname')\n\nIMPORTS\n\nImports should use https://esm.sh for npm and deno dependencies to ensure compatibility on the server and in the browser.\n\nPERSISTENCE\n\nOnly use backend storage if explicitly required. Otherwise make a simple static client-side site.\n\nIf needed and if the user asks for something that requires persistence, use Val Town SQLite or Blob storage. Use the val's import.meta.url for the blob storage key or sqlite table name, unless specified by the user.\n\nBLOB\n\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys: { key: string; size: number; lastModified: string }[] = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\nSQLITE\n\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nlet KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n(await sqlite.execute(\\`select * from \\${KEY}_users where id = ?\\`, [1])).rows[0].id\nSQLITE SCHEMA CHANGES\n\nIf you are changing a SQLite table's schema, you should also change the table's name so it creates a fresh table, ie by adding _2 or _3 after it everywhere. Ensure that tables are created before they are used.\n\nOPENAI\n\nVal Town includes a free, proxied OpenAI:\n\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});`;\n\n// Chat API endpoint with streaming\napp.post(\"/api/chat\", async c => {\n try {\n const body = await c.req.json();\n let { messages, systemPrompt } = body;\n \n // If no system prompt is provided, use the Townie Val Town system prompt\n if (!systemPrompt) {\n systemPrompt = VAL_TOWN_SYSTEM_PROMPT;\n }\n \n return streamSSE(c, async stream => {\n await processChatMessage(messages, systemPrompt, stream);\n });\n } catch (error) {\n console.error(\"Error in /api/chat:\", error);\n return c.json({ error: error.message || \"Unknown error occurred\" }, 500);\n }\n});\n\n// Non-streaming chat endpoint\napp.post(\"/api/chat/complete\", async c => {\n try {\n const body = await c.req.json();\n let { messages, systemPrompt } = body;\n \n // If no system prompt is provided, use the Townie Val Town system prompt\n if (!systemPrompt) {\n systemPrompt = VAL_TOWN_SYSTEM_PROMPT;\n }\n \n // Log incoming request for debugging\n console.log(\"Request to /api/chat/complete:\", { \n messageCount: messages?.length,\n systemPromptLength: systemPrompt?.length\n });\n \n if (!messages || !Array.isArray(messages)) {\n return c.json({ error: \"Invalid messages format\" }, 400);\n }\n \n const response = await processChatMessage(messages, systemPrompt);\n return c.json({ response });\n } catch (error) {\n console.error(\"Error in /api/chat/complete:\", error);\n return c.json({ error: error.message || \"Unknown error occurred\" }, 500);\n }\n});\n\n// Endpoint to get the default system prompt\napp.get(\"/api/system-prompt\", c => {\n return c.json({ systemPrompt: VAL_TOWN_SYSTEM_PROMPT });\n});\n\n/**\n * Process a chat message and get a response from the API\n */\nasync function processChatMessage(\n messages: Message[],\n systemPrompt: string = VAL_TOWN_SYSTEM_PROMPT,\n stream?: any\n): Promise {\n try {\n // Try using the proxied OpenAI first, if that fails, fall back to direct API call\n try {\n return await processWithValTownOpenAI(messages, systemPrompt, stream);\n } catch (error) {\n console.error(\"Error with Val Town OpenAI:\", error);\n console.log(\"Falling back to direct OpenAI API call\");\n return await processWithDirectOpenAI(messages, systemPrompt, stream);\n }\n } catch (error) {\n console.error(\"Error processing chat message:\", error);\n throw error;\n }\n}\n\n/**\n * Process chat using Val Town's proxied OpenAI\n */\nasync function processWithValTownOpenAI(\n messages: Message[],\n systemPrompt: string,\n stream?: any\n): Promise {\n try {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n \n // Prepare the messages array with system prompt\n const openaiMessages = [\n { role: \"system\", content: systemPrompt },\n ...messages.map(m => ({ role: m.role, content: m.content }))\n ];\n \n console.log(\"Sending to Val Town OpenAI:\", { \n messageCount: openaiMessages.length,\n firstUserMessage: messages[0]?.content?.substring(0, 20) + \"...\" \n });\n \n // If streaming is not required, get a complete response\n if (!stream) {\n const completion = await openai.chat.completions.create({\n messages: openaiMessages,\n model: \"gpt-4o-mini\", // Using Val Town's available model\n temperature: 0.7,\n });\n \n return completion.choices[0]?.message?.content || \"Sorry, I couldn't generate a response.\";\n } else {\n // Streaming is not directly supported by Val Town OpenAI wrapper\n // Falling back to direct API\n throw new Error(\"Streaming not supported by Val Town OpenAI wrapper\");\n }\n } catch (error) {\n console.error(\"Error in processWithValTownOpenAI:\", error);\n throw error;\n }\n}\n\n/**\n * Process chat using direct OpenAI API\n */\nasync function processWithDirectOpenAI(\n messages: Message[],\n systemPrompt: string,\n stream?: any\n): Promise {\n // Get API key from environment\n const apiKey = Deno.env.get(\"OPENAI_API_KEY\");\n \n if (!apiKey) {\n throw new Error(\"OpenAI API Key not found. Please set the OPENAI_API_KEY environment variable.\");\n }\n \n // Format messages for OpenAI API\n const openaiMessages = [\n { role: \"system\", content: systemPrompt },\n ...messages.map(m => ({ role: m.role, content: m.content }))\n ];\n \n console.log(\"Sending to Direct OpenAI:\", { \n messageCount: openaiMessages.length,\n firstUserMessage: messages[0]?.content?.substring(0, 20) + \"...\" \n });\n \n if (stream) {\n // Stream the response if a stream is provided\n return await streamChatResponse(openaiMessages, apiKey, stream);\n } else {\n // Otherwise, return the complete response\n return await fetchChatResponse(openaiMessages, apiKey);\n }\n}\n\n/**\n * Fetch a complete chat response from OpenAI\n */\nasync function fetchChatResponse(messages: any[], apiKey: string): Promise {\n try {\n const response = await fetch(\"https://api.openai.com/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${apiKey}`\n },\n body: JSON.stringify({\n model: \"gpt-3.5-turbo\",\n messages,\n temperature: 0.7\n })\n });\n \n if (!response.ok) {\n const errorText = await response.text();\n console.error(\"OpenAI API error response:\", errorText);\n try {\n const errorData = JSON.parse(errorText);\n throw new Error(`OpenAI API error: ${response.status} ${errorData.error?.message || errorText}`);\n } catch (e) {\n throw new Error(`OpenAI API error: ${response.status} ${errorText}`);\n }\n }\n \n const data = await response.json();\n return data.choices[0]?.message?.content || \"Sorry, I couldn't generate a response.\";\n } catch (error) {\n console.error(\"Error in fetchChatResponse:\", error);\n throw error;\n }\n}\n\n/**\n * Stream a chat response from OpenAI\n */\nasync function streamChatResponse(messages: any[], apiKey: string, stream: any): Promise {\n try {\n const response = await fetch(\"https://api.openai.com/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${apiKey}`\n },\n body: JSON.stringify({\n model: \"gpt-3.5-turbo\",\n messages,\n temperature: 0.7,\n stream: true\n })\n });\n \n if (!response.ok) {\n const errorText = await response.text();\n console.error(\"OpenAI API streaming error:\", errorText);\n throw new Error(`OpenAI API error: ${response.status} ${errorText}`);\n }\n \n const reader = response.body?.getReader();\n let fullResponse = \"\";\n \n if (reader) {\n const decoder = new TextDecoder();\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n \n const chunk = decoder.decode(value);\n const lines = chunk.split(\"\\n\").filter(line => line.trim() !== \"\" && line.startsWith(\"data:\"));\n \n for (const line of lines) {\n const jsonString = line.replace(\"data:\", \"\").trim();\n if (jsonString === \"[DONE]\") continue;\n \n try {\n const json = JSON.parse(jsonString);\n const content = json.choices[0]?.delta?.content || \"\";\n \n if (content) {\n fullResponse += content;\n await stream.write(content);\n }\n } catch (e) {\n console.error(\"Error parsing JSON from stream:\", e);\n }\n }\n }\n }\n \n return fullResponse;\n } catch (error) {\n console.error(\"Error in streamChatResponse:\", error);\n throw error;\n }\n}\n\n// Add a test endpoint to check if the backend is working\napp.get(\"/api/test\", c => {\n return c.json({ \n status: \"ok\", \n message: \"Backend is working\",\n hasOpenAiKey: Boolean(Deno.env.get(\"OPENAI_API_KEY\")),\n hasValTownOpenAI: true\n });\n});\n\n// HTTP vals expect an exported \"fetch handler\"\nexport default app.fetch;",[],[145,212],["D",1742407019068],[161],[145],["D",1742407018755],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"ctx",{"_77":-5,"_122":259,"_260":261,"_262":263,"_264":24,"_265":24,"_266":24,"_267":57,"_268":-5,"_269":-7,"_270":-7,"_271":61,"_272":24,"_273":24,"_274":-5,"_275":24,"_276":24,"_277":24,"_278":-5},"ENV",{"_230":231,"_232":233,"_234":85,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v14