[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_207":208,"_209":210},"routes/_app.x.$handle.$name",{"_98":97,"_33":47,"_106":88,"_28":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":27,"_121":122,"_123":25,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_45":46,"_33":47,"_40":48,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":-5,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":27},"version",25,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":29},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":27},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",true,"deletedHere",false,"path","frontend/index.ts","latestPath","fileId","329c01ae-14b2-11f0-83fe-569c3dd06744","name","index.ts","fileType","script","content","// Define types for our messages\ninterface Message {\n role: \"user\" | \"assistant\";\n content: string;\n}\n\ninterface ApiResponse {\n message: {\n role: string;\n content: string;\n };\n usage: {\n prompt_tokens: number;\n completion_tokens: number;\n total_tokens: number;\n };\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const chatContainer = document.getElementById(\"chat-container\") as HTMLDivElement;\n const userInput = document.getElementById(\"user-input\") as HTMLTextAreaElement;\n const sendButton = document.getElementById(\"send-button\") as HTMLButtonElement;\n const viewSourceLink = document.getElementById(\"view-source\") as HTMLAnchorElement;\n\n viewSourceLink.href = window.location.href.replace(\"esm.town\", \"val.town\");\n\n const messageHistory: Message[] = [\n { role: \"assistant\", content: \"Hello! I'm your AI assistant. How can I help you today?\" },\n ];\n\n function addMessage(role: \"user\" | \"assistant\", content: string, isLoading: boolean = false): HTMLDivElement {\n const messageDiv = document.createElement(\"div\");\n messageDiv.className = `message ${role} animate-fade-in`;\n\n if (role === \"user\") {\n messageDiv.classList.add(\n \"bg-indigo-900\",\n \"ml-auto\",\n \"rounded-2xl\",\n \"rounded-tr-sm\",\n \"border\",\n \"border-indigo-700\",\n \"shadow-lg\",\n );\n } else {\n messageDiv.classList.add(\n \"bg-gray-700\",\n \"mr-auto\",\n \"rounded-2xl\",\n \"rounded-tl-sm\",\n \"border\",\n \"border-gray-600\",\n \"shadow-md\",\n );\n\n if (isLoading) {\n messageDiv.classList.add(\"animate-pulse\");\n }\n }\n\n const messageContent = document.createElement(\"div\");\n messageContent.className = \"message-content p-3 text-gray-200\";\n\n if (isLoading) {\n const loadingDots = document.createElement(\"div\");\n loadingDots.className = \"flex space-x-1\";\n\n for (let i = 0; i < 3; i++) {\n const dot = document.createElement(\"div\");\n dot.className = \"w-2 h-2 bg-gray-400 rounded-full\";\n dot.style.animationDelay = `${i * 0.15}s`;\n dot.classList.add(\"animate-pulse\");\n loadingDots.appendChild(dot);\n }\n\n messageContent.appendChild(loadingDots);\n } else {\n messageContent.textContent = content;\n }\n\n messageDiv.appendChild(messageContent);\n chatContainer.appendChild(messageDiv);\n\n chatContainer.scrollTop = chatContainer.scrollHeight;\n\n return messageDiv;\n }\n\n function formatResponse(text: string): string {\n text = text.replace(\n /```([\\s\\S]*?)```/g,\n \"

$1

\",\n );\n\n text = text.replace(\n /`([^`]+)`/g,\n \"$1\",\n );\n\n text = text.split(\"\\n\\n\").map(p => `

${p}

$1

\",\n );\n\n text = text.replace(\n /`([^`]+)`/g,\n \"$1\",\n );\n\n text = text.split(\"\\n\\n\").map(p => `

${p}

`).join(\"\");\n\n text = text.replace(/\\n/g, \"
\");\n\n text = text.replace(/\\*\\*([^*]+)\\*\\*/g, \"$1\");\n\n text = text.replace(/\\*([^*]+)\\*/g, \"$1\");\n\n text = text.replace(\n /\\[([^\\]]+)\\]\$([^)]+)\$/g,\n \"$1\",\n );\n\n return text;\n }\n\n async function sendMessage(userMessage: string): Promise {\n userInput.disabled = true;\n sendButton.disabled = true;\n sendButton.classList.add(\"opacity-50\", \"cursor-not-allowed\");\n sendButton.classList.remove(\"hover:scale-105\");\n\n addMessage(\"user\", userMessage);\n\n messageHistory.push({ role: \"user\", content: userMessage });\n\n const loadingMessage = addMessage(\"assistant\", \"\", true);\n\n try {\n const response = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ messages: messageHistory }),\n });\n\n if (!response.ok) {\n throw new Error(\"API request failed\");\n }\n\n const data: ApiResponse = await response.json();\n const assistantMessage = data.message.content;\n\n loadingMessage.remove();\n\n const messageElement = addMessage(\"assistant\", \"\");\n messageElement.querySelector(\".message-content\")!.innerHTML = formatResponse(assistantMessage);\n\n messageHistory.push({ role: \"assistant\", content: assistantMessage });\n } catch (error) {\n console.error(\"Error:\", error);\n\n loadingMessage.remove();\n\n addMessage(\"assistant\", \"Sorry, I encountered an error. Please try again.\");\n } finally {\n userInput.disabled = false;\n sendButton.disabled = false;\n sendButton.classList.remove(\"opacity-50\", \"cursor-not-allowed\");\n sendButton.classList.add(\"hover:scale-105\");\n userInput.focus();\n }\n }\n\n // Event listener for send button\n sendButton.addEventListener(\"click\", (e) => {\n const message = userInput.value.trim();\n if (message) {\n // Add ripple effect\n createRippleEffect(e);\n\n // Send the message\n sendMessage(message);\n userInput.value = \"\";\n }\n });\n\n // Function to create ripple effect on button click\n function createRippleEffect(e: MouseEvent): void {\n const button = e.currentTarget as HTMLElement;\n\n // Create ripple element\n const ripple = document.createElement(\"span\");\n ripple.classList.add(\"absolute\", \"bg-white\", \"rounded-full\", \"opacity-30\", \"pointer-events-none\");\n\n // Position the ripple\n const rect = button.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = e.clientX - rect.left - size / 2;\n const y = e.clientY - rect.top - size / 2;\n\n // Set ripple style\n ripple.style.width = ripple.style.height = `${size}px`;\n ripple.style.left = `${x}px`;\n ripple.style.top = `${y}px`;\n ripple.style.animation = \"ripple 0.6s linear\";\n ripple.style.position = \"absolute\";\n\n // Add ripple to button\n button.appendChild(ripple);\n\n // Remove ripple after animation\n setTimeout(() => {\n ripple.remove();\n }, 700);\n }\n\n // Event listener for Enter key (but Shift+Enter for new line)\n userInput.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n sendButton.click();\n }\n });\n\n // Auto-resize textarea as user types\n userInput.addEventListener(\"input\", () => {\n userInput.style.height = \"auto\";\n userInput.style.height = Math.min(userInput.scrollHeight, 200) + \"px\";\n });\n\n // Focus the input field on load\n userInput.focus();\n});","createdAt",["D",1744142146059],"branchVersion","branchId","ce9696ba-14b1-11f0-8a52-569c3dd06744","id","ce9643ea-14b1-11f0-8a52-569c3dd06744","chat",["D",1744141435618],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","c7d91915-4070-4350-8e28-6c792ff73b1c","pinnedFileId","e213d450-14b1-11f0-8844-569c3dd06744","pinPreview","pinMigrated","screenshotVersion",27,"likeCount",0,"orgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":27},"branch",{"_13":87,"_33":88,"_45":44,"_89":46,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":47,"_96":97},"isOwned",42,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","loading","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_45":46,"_33":47,"_40":203,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":-5,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":204,"_82":205,"_84":206,"_86":27},"tree",[164,166,169],"files",[164,165,166,167,168,169],"counts",{"_154":64,"_155":151,"_156":64,"_157":158,"_159":160},"contents",[128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_45":148,"_33":149,"_31":150,"_134":-5,"_43":44,"_42":151,"_136":25,"_40":152,"_13":64,"_35":146,"_37":-5,"_24":27,"_140":-5,"_28":153},{"_45":142,"_33":143,"_31":144,"_134":-5,"_43":44,"_42":138,"_136":25,"_40":145,"_13":64,"_35":146,"_37":-5,"_24":27,"_140":-5,"_28":147},{"_45":131,"_33":132,"_31":133,"_134":-5,"_43":44,"_42":135,"_136":27,"_40":137,"_13":138,"_35":20,"_37":139,"_24":27,"_140":-5,"_28":141},"a3251fa0-14b2-11f0-aa81-569c3dd06744","README.md","fc000a0a-14b1-11f0-abc2-569c3dd06744","parentId",16,"latest",["D",1744141792208],2,"# AI Chat App\n\nA sleek, dark-themed AI chat application built on Val Town using the OpenAI API.\n\n## Features\n\n- Real-time chat interface with an AI assistant\n- Elegant dark theme with purple/indigo accents\n- Powered by OpenAI's GPT models\n- Modern, responsive design with Tailwind CSS\n- TypeScript for type safety and better developer experience\n- Enhanced markdown-like formatting for code blocks and other elements\n- Smooth animations and loading indicators\n- Auto-resizing text input\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Backend API with Hono and OpenAI integration\n├── frontend/\n│ ├── index.html # Main HTML template with dark theme\n│ └── index.ts # Frontend TypeScript with enhanced UI\n└── README.md\n```\n\n## How It Works\n\n1. The frontend provides a sleek chat interface where users can type messages\n2. Messages are sent to the backend API endpoint\n3. The backend uses the OpenAI API to generate responses\n4. Responses are formatted with enhanced markdown support and displayed in the chat interface\n5. UI includes loading indicators and smooth animations for better user experience\n\n## Technologies Used\n\n- **TypeScript**: For type safety and better code organization\n- **Tailwind CSS**: For styling without custom CSS files\n- **Hono**: Lightweight web framework for the backend\n- **OpenAI API**: For generating AI responses\n- **CSS Animations**: For smooth transitions and loading indicators\n\n## Requirements\n\nThis app requires an OpenAI API key to be set as an environment variable in Val Town.\n\n## Setup\n\n1. Fork this project in Val Town\n2. Add your OpenAI API key as an environment variable named `OPENAI_API_KEY`\n3. Run the project\n\n## Customization\n\nYou can customize the app by:\n- Changing the OpenAI model in the backend (currently using gpt-4o-mini)\n- Adjusting the max tokens parameter for longer or shorter responses\n- Modifying the color scheme by changing the Tailwind classes\n- Adding additional features like message history or user authentication\n- Extending the markdown formatting to support more elements","label",[132],"e87278e2-14b1-11f0-8e83-569c3dd06744","frontend","45fc8e16-4e53-4537-9244-732e405cf0c1",["D",1744141478996],"directory",[143],"e213dd1a-14b1-11f0-8844-569c3dd06744","backend","2f581298-1178-4a35-a677-b8ba521783d7",1,["D",1744141468311],[149],"pulls","branches","forks","envVars",{"_161":64,"_163":64},"connections",{"_161":64,"_162":64},"count","unfilledCount","emptyCount",{"_45":148,"_33":149,"_31":150,"_134":-5,"_43":44,"_42":151,"_136":25,"_40":200,"_13":64,"_35":146,"_37":-5,"_24":27,"_140":-5,"_171":201,"_28":202},{"_45":191,"_33":34,"_31":58,"_134":150,"_43":44,"_42":192,"_136":27,"_40":193,"_13":194,"_35":195,"_37":196,"_24":27,"_140":197,"_171":198,"_28":199},{"_45":142,"_33":143,"_31":144,"_134":-5,"_43":44,"_42":138,"_136":25,"_40":188,"_13":64,"_35":146,"_37":-5,"_24":27,"_140":-5,"_171":189,"_28":190},{"_45":179,"_33":180,"_31":181,"_134":144,"_43":44,"_42":182,"_136":27,"_40":183,"_13":184,"_35":20,"_37":185,"_24":27,"_140":-5,"_171":186,"_28":187},{"_45":174,"_33":34,"_31":32,"_134":144,"_43":44,"_42":14,"_136":27,"_40":175,"_13":176,"_35":36,"_37":39,"_24":27,"_140":-5,"_171":177,"_28":178},{"_45":131,"_33":132,"_31":133,"_134":-5,"_43":44,"_42":135,"_136":27,"_40":170,"_13":138,"_35":20,"_37":139,"_24":27,"_140":-5,"_171":172,"_28":173},["D",1744141792208],"children",[],[132],"760be728-14b3-11f0-90f3-569c3dd06744",["D",1744142146059],5,[],[143,34],"c8ebba96-14b2-11f0-a845-569c3dd06744","index.html","e8727252-14b1-11f0-8e83-569c3dd06744",18,["D",1744141855599],4,"\n\n\n \n \n AI Chat App\n \n \n \n\n\n

\n \n

AI Chat Assistant

\n\n

\n Hello! I'm your AI assistant. How can I help you today?\n

\n\n

\n \n \n

\n\n

This is a demo AI chat application. Your conversations are not stored.

\n \n \n View Source\n \n

\n\n \n\n",[],[143,180],["D",1744141478996],[167,168],[143],"1a0c9eb8-14b3-11f0-ae91-569c3dd06744",23,["D",1744141991704],6,"http","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { cors } from \"https://esm.sh/hono@3.12.6/cors\";\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\napp.onError((err: unknown, _) => {\n console.error(err);\n throw err;\n});\n\n// Add CORS middleware\napp.use(\"/*\", cors());\n\n// Initialize OpenAI client\nconst openai = new OpenAI();\n\n// API endpoint to handle chat requests\napp.post(\"/api/chat\", async (c: any) => {\n try {\n const body = await c.req.json();\n const { messages } = body;\n\n if (!messages || !Array.isArray(messages)) {\n return c.json({ error: \"Invalid messages format\" }, 400);\n }\n\n const completion = await openai.chat.completions.create({\n messages,\n model: \"gpt-4o-mini\", // Using a smaller model for cost efficiency\n max_tokens: 500,\n });\n\n return c.json({\n message: completion.choices[0].message,\n usage: completion.usage,\n });\n } catch (error) {\n console.error(\"Error calling OpenAI:\", error);\n return c.json({ error: \"Failed to process chat request\" }, 500);\n }\n});\n\napp.get(\"/\", _ => serveFile(\"/frontend/index.html\", import.meta.url));\napp.get(\"/style.css\", _ => serveFile(\"/frontend/style.css\", import.meta.url));\napp.get(\"/index.ts\", _ => serveFile(\"/frontend/index.ts\", import.meta.url));\n\nexport default app.fetch;","chat-demo",[],[149,34],["D",1744141468311],[165],[149],["D",1744141435618],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":27},{"_13":87,"_33":88,"_45":44,"_89":46,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":47,"_96":97},"ctx",{"_80":-5,"_125":240,"_241":242,"_243":244,"_245":27,"_246":27,"_247":27,"_248":25,"_249":-5,"_250":-7,"_251":-7,"_252":64,"_253":27,"_254":27,"_255":-5,"_256":27,"_257":27,"_258":27,"_259":-5},"ENV",{"_211":212,"_213":214,"_215":88,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v25