AI Chat App

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_249":250,"_251":252},"routes/_app.x.$handle.$name",{"_96":95,"_32":44,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":57,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",41,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","fc000a0a-14b1-11f0-abc2-569c3dd06744","name","fileType","content","# 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","# AI Chat App\n\nA sleek, dark-themed AI chat application built with React on Val Town using the OpenAI API.\n\n## Features\n\n- React-based chat interface with component architecture\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│ ├── components/ # React components\n│ │ ├── App.tsx # Main application component\n│ │ ├── Message.tsx # Message component for chat bubbles\n│ │ └── ChatInput.tsx # Input component with send button\n│ ├── index.html # HTML shell for React app\n│ └── index.tsx # React entry point\n└── README.md\n```\n\n## How It Works\n\n1. The React frontend provides a component-based chat interface\n2. Messages are managed with React state\n3. API requests are sent to the backend endpoint\n4. The backend uses the OpenAI API to generate responses\n5. Responses are formatted with enhanced markdown support and displayed in the chat interface\n6. UI includes loading indicators and smooth animations for better user experience\n\n## Technologies Used\n\n- **React**: For component-based UI architecture\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- Modifying React components to add new features\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","createdAt",["D",1744142611092],"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",true,"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",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":53,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"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",{"_42":43,"_32":44,"_37":245,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":246,"_80":247,"_82":248,"_84":25},"tree",[159,161,169],"files",[159,160,161,162,163,164,165,166,167,168,169],"counts",{"_149":62,"_150":146,"_151":62,"_152":153,"_154":155},"contents",[126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":143,"_32":144,"_30":145,"_130":-5,"_40":41,"_39":146,"_131":57,"_37":147,"_13":62,"_33":141,"_34":-5,"_24":25,"_134":-5,"_27":148},{"_42":136,"_32":137,"_30":138,"_130":-5,"_40":41,"_39":139,"_131":57,"_37":140,"_13":62,"_33":141,"_34":-5,"_24":25,"_134":-5,"_27":142},{"_42":129,"_32":28,"_30":31,"_130":-5,"_40":41,"_39":14,"_131":57,"_37":132,"_13":133,"_33":20,"_34":36,"_24":25,"_134":-5,"_27":135},"8b3a5ba6-14b4-11f0-921d-569c3dd06744","parentId","latest",["D",1744142611092],3,"label",[28],"e87278e2-14b1-11f0-8e83-569c3dd06744","frontend","45fc8e16-4e53-4537-9244-732e405cf0c1",2,["D",1744141478996],"directory",[137],"e213dd1a-14b1-11f0-8844-569c3dd06744","backend","2f581298-1178-4a35-a677-b8ba521783d7",1,["D",1744141468311],[144],"pulls","branches","forks","envVars",{"_156":62,"_158":62},"connections",{"_156":62,"_157":62},"count","unfilledCount","emptyCount",{"_42":143,"_32":144,"_30":145,"_130":-5,"_40":41,"_39":146,"_131":57,"_37":242,"_13":62,"_33":141,"_34":-5,"_24":25,"_134":-5,"_171":243,"_27":244},{"_42":233,"_32":184,"_30":55,"_130":145,"_40":41,"_39":234,"_131":57,"_37":235,"_13":236,"_33":237,"_34":238,"_24":25,"_134":239,"_171":240,"_27":241},{"_42":136,"_32":137,"_30":138,"_130":-5,"_40":41,"_39":139,"_131":57,"_37":230,"_13":62,"_33":141,"_34":-5,"_24":25,"_134":-5,"_171":231,"_27":232},{"_42":226,"_32":209,"_30":203,"_130":138,"_40":41,"_39":204,"_131":57,"_37":227,"_13":62,"_33":141,"_34":-5,"_24":25,"_134":-5,"_171":228,"_27":229},{"_42":218,"_32":219,"_30":220,"_130":203,"_40":41,"_39":221,"_131":57,"_37":222,"_13":62,"_33":179,"_34":223,"_24":25,"_134":-5,"_171":224,"_27":225},{"_42":210,"_32":211,"_30":212,"_130":203,"_40":41,"_39":213,"_131":57,"_37":214,"_13":62,"_33":179,"_34":215,"_24":25,"_134":-5,"_171":216,"_27":217},{"_42":200,"_32":201,"_30":202,"_130":203,"_40":41,"_39":204,"_131":57,"_37":205,"_13":62,"_33":179,"_34":206,"_24":25,"_134":-5,"_171":207,"_27":208},{"_42":192,"_32":193,"_30":194,"_130":138,"_40":41,"_39":195,"_131":57,"_37":196,"_13":62,"_33":20,"_34":197,"_24":25,"_134":-5,"_171":198,"_27":199},{"_42":183,"_32":184,"_30":185,"_130":138,"_40":41,"_39":186,"_131":25,"_37":187,"_13":188,"_33":179,"_34":189,"_24":25,"_134":-5,"_171":190,"_27":191},{"_42":174,"_32":175,"_30":176,"_130":138,"_40":41,"_39":177,"_131":57,"_37":178,"_13":62,"_33":179,"_34":180,"_24":25,"_134":-5,"_171":181,"_27":182},{"_42":129,"_32":28,"_30":31,"_130":-5,"_40":41,"_39":14,"_131":57,"_37":170,"_13":133,"_33":20,"_34":36,"_24":25,"_134":-5,"_171":172,"_27":173},["D",1744142611092],"children",[],[28],"62231c9e-14b4-11f0-a1ac-569c3dd06744","index.tsx","62231d8e-14b4-11f0-a1ac-569c3dd06744",37,["D",1744142542157],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from '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';\n\n// Wait for DOM to be ready\ndocument.addEventListener('DOMContentLoaded', () => {\n const rootElement = document.getElementById('root');\n \n if (rootElement) {\n const root = createRoot(rootElement);\n root.render(\n \n \n \n );\n }\n});",[],[137,175],"cc66bf58-14b3-11f0-98d9-569c3dd06744","index.ts","329c01ae-14b2-11f0-83fe-569c3dd06744",28,["D",1744142290936],6,"// 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}

`).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 sendButton.addEventListener(\"click\", (e) => {\n const message = userInput.value.trim();\n if (message) {\n createRippleEffect(e);\n\n sendMessage(message);\n userInput.value = \"\";\n }\n });\n\n function createRippleEffect(e: MouseEvent): void {\n const button = e.currentTarget as HTMLElement;\n\n const ripple = document.createElement(\"span\");\n ripple.classList.add(\"absolute\", \"bg-white\", \"rounded-full\", \"opacity-30\", \"pointer-events-none\");\n\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 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 button.appendChild(ripple);\n\n setTimeout(() => {\n ripple.remove();\n }, 700);\n }\n\n userInput.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n sendButton.click();\n }\n });\n\n userInput.addEventListener(\"input\", () => {\n userInput.style.height = \"auto\";\n userInput.style.height = Math.min(userInput.scrollHeight, 200) + \"px\";\n });\n\n userInput.focus();\n});",[],[137,184],"760872b8-14b4-11f0-bd0b-569c3dd06744","index.html","7608739e-14b4-11f0-bd0b-569c3dd06744",39,["D",1744142575534],"\n\n\n \n \n AI Chat App\n \n \n \n\n\n

\n \n\n",[],[137,193],"468aee4e-14b4-11f0-b1f4-569c3dd06744","Message.tsx","468aef20-14b4-11f0-b1f4-569c3dd06744","62d26478-a05b-476b-aeb0-b97112e5d5f7",34,["D",1744142495858],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef } from 'https://esm.sh/react@18.2.0';\n\ninterface MessageProps {\n role: 'user' | 'assistant';\n content: string;\n isLoading?: boolean;\n}\n\nexport const Message = ({ role, content, isLoading = false }: MessageProps) => {\n const contentRef = useRef(null);\n \n // Format the response with markdown-like formatting\n const formatResponse = (text: string): string => {\n // Replace code blocks with syntax highlighting style\n text = text.replace(/```([\\s\\S]*?)```/g, '

$1

');\n \n // Replace inline code\n text = text.replace(/`([^`]+)`/g, '$1');\n \n // Replace paragraphs\n text = text.split('\\n\\n').map(p => `

${p}

`).join('');\n \n // Replace line breaks\n text = text.replace(/\\n/g, '
');\n \n // Replace bold text\n text = text.replace(/\\*\\*([^*]+)\\*\\*/g, '$1');\n \n // Replace italic text\n text = text.replace(/\\*([^*]+)\\*/g, '$1');\n \n // Replace links\n text = text.replace(/\\[([^\\]]+)\\]\$([^)]+)\$/g, '$1');\n \n return text;\n };\n \n // Set the formatted HTML content\n useEffect(() => {\n if (contentRef.current && !isLoading) {\n contentRef.current.innerHTML = formatResponse(content);\n }\n }, [content, isLoading]);\n \n // Base classes for the message container\n const baseClasses = \"message animate-fade-in p-2 shadow-md border\";\n \n // Role-specific classes\n const roleClasses = role === 'user' \n ? \"bg-indigo-900 ml-auto rounded-2xl rounded-tr-sm border-indigo-700 shadow-lg\" \n : \"bg-gray-700 mr-auto rounded-2xl rounded-tl-sm border-gray-600 shadow-md\";\n \n // Loading state classes\n const loadingClasses = isLoading ? \"animate-pulse\" : \"\";\n \n return (\n

\n {isLoading ? (\n

\n {[0, 1, 2].map((i) => (\n

\n ))}\n

\n ) : (\n

\n )}\n

\n );\n};",[],[137,209,201],"components","52167166-14b4-11f0-9f34-569c3dd06744","ChatInput.tsx","5216722e-14b4-11f0-9f34-569c3dd06744",35,["D",1744142515227],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef, useEffect, KeyboardEvent, MouseEvent } from 'https://esm.sh/react@18.2.0';\n\ninterface ChatInputProps {\n onSendMessage: (message: string) => void;\n isDisabled: boolean;\n}\n\nexport const ChatInput = ({ onSendMessage, isDisabled }: ChatInputProps) => {\n const [message, setMessage] = useState('');\n const textareaRef = useRef(null);\n \n // Auto-resize textarea as user types\n useEffect(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 200) + 'px';\n }\n }, [message]);\n \n // Focus textarea on mount\n useEffect(() => {\n if (textareaRef.current) {\n textareaRef.current.focus();\n }\n }, []);\n \n // Handle Enter key (but Shift+Enter for new line)\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter' && !e.shiftKey && !isDisabled) {\n e.preventDefault();\n handleSendMessage();\n }\n };\n \n // Function to create ripple effect on button click\n const createRippleEffect = (e: MouseEvent) => {\n const button = e.currentTarget;\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 // Handle send button click\n const handleSendMessage = () => {\n const trimmedMessage = message.trim();\n if (trimmedMessage && !isDisabled) {\n onSendMessage(trimmedMessage);\n setMessage('');\n \n // Reset textarea height\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n }\n }\n };\n \n return (\n

setMessage(e.target.value)}\n        onKeyDown={handleKeyDown}\n        disabled={isDisabled}\n        className=\"flex-grow p-4 bg-gray-900 text-gray-200 focus:outline-none focus:ring-1 focus:ring-indigo-500 resize-none placeholder-gray-500\"\n        placeholder=\"Type your message here...\"\n        rows={2}\n      />\n      <button \n        onClick={(e) => {\n          if (!isDisabled) {\n            createRippleEffect(e);\n            handleSendMessage();\n          }\n        }}\n        disabled={isDisabled}\n        className={`send-button-gradient text-white p-3 m-1 rounded-full transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-900 group relative overflow-hidden ${\n          isDisabled \n            ? 'opacity-50 cursor-not-allowed' \n            : 'hover:scale-105 active:scale-95'\n        }`}\n        aria-label=\"Send message\"\n      >\n        <div className=\"relative overflow-hidden rounded-full\">\n          <div className=\"send-button-shine\"></div>\n          <svg \n            xmlns=\"http://www.w3.org/2000/svg\" \n            className={`h-7 w-7 transform transition-transform duration-300 ${!isDisabled ? 'group-hover:rotate-12' : ''}`} \n            viewBox=\"0 0 24 24\" \n            fill=\"none\" \n            stroke=\"currentColor\" \n            strokeWidth=\"2\" \n            strokeLinecap=\"round\" \n            strokeLinejoin=\"round\"\n          >\n            <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line>\n            <polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon>\n          </svg>\n        </div>\n      </button>\n    </div>\n  );\n};",[],[137,209,211],"5f53b122-14b4-11f0-b752-569c3dd06744","App.tsx","5f53b1ea-14b4-11f0-b752-569c3dd06744",36,["D",1744142537439],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { Message } from './Message.tsx';\nimport { ChatInput } from './ChatInput.tsx';\n\n// Define types for our messages\ninterface MessageType {\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\nexport const App = () => {\n  // State for messages and loading state\n  const [messages, setMessages] = useState<MessageType[]>([\n    { role: 'assistant', content: 'Hello! I\\'m your AI assistant. How can I help you today?' }\n  ]);\n  const [isLoading, setIsLoading] = useState(false);\n  \n  // Ref for chat container to scroll to bottom\n  const chatContainerRef = useRef<HTMLDivElement>(null);\n  \n  // Set the view source link\n  useEffect(() => {\n    const viewSourceLink = document.getElementById('view-source') as HTMLAnchorElement;\n    if (viewSourceLink) {\n      viewSourceLink.href = window.location.href.replace('esm.town', 'val.town');\n    }\n  }, []);\n  \n  // Scroll to bottom when messages change\n  useEffect(() => {\n    if (chatContainerRef.current) {\n      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;\n    }\n  }, [messages]);\n  \n  // Function to send a message to the API\n  const sendMessage = async (userMessage: string) => {\n    // Add user message to state\n    setMessages(prev => [...prev, { role: 'user', content: userMessage }]);\n    \n    // Set loading state\n    setIsLoading(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({ \n          messages: [...messages, { role: 'user', content: userMessage }]\n        }),\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      // Add assistant message to state\n      setMessages(prev => [...prev, { role: 'assistant', content: assistantMessage }]);\n      \n    } catch (error) {\n      console.error('Error:', error);\n      \n      // Show error message\n      setMessages(prev => [...prev, { \n        role: 'assistant', \n        content: 'Sorry, I encountered an error. Please try again.' \n      }]);\n    } finally {\n      // Clear loading state\n      setIsLoading(false);\n    }\n  };\n  \n  return (\n    <div className=\"container mx-auto p-4 max-w-3xl\">\n      <header className=\"mb-8 pt-6\">\n        <div className=\"flex justify-center items-center mb-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-10 w-10 text-indigo-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z\" />\n          </svg>\n        </div>\n        <h1 className=\"text-4xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-500\">AI Chat Assistant</h1>\n        <p className=\"text-center text-indigo-200 mt-2 opacity-80\">Powered by OpenAI</p>\n      </header>\n\n      <div className=\"bg-gray-800 rounded-2xl shadow-2xl border border-gray-700 p-6 mb-6 backdrop-blur-sm bg-opacity-80\">\n        <div \n          ref={chatContainerRef}\n          className=\"space-y-4 mb-6 max-h-[60vh] overflow-y-auto p-2 scrollbar-thin scrollbar-thumb-indigo-600 scrollbar-track-gray-800\"\n        >\n          {messages.map((message, index) => (\n            <Message \n              key={index} \n              role={message.role} \n              content={message.content} \n            />\n          ))}\n          \n          {isLoading && <Message role=\"assistant\" content=\"\" isLoading={true} />}\n        </div>\n\n        <ChatInput \n          onSendMessage={sendMessage} \n          isDisabled={isLoading} \n        />\n      </div>\n\n      <div className=\"text-center text-sm text-gray-400 mt-8\">\n        <p className=\"mb-3\">This is a demo AI chat application. Your conversations are not stored.</p>\n        <a \n          id=\"view-source\" \n          href=\"#\" \n          className=\"inline-flex items-center text-indigo-400 hover:text-indigo-300 transition-colors duration-200\" \n          target=\"_top\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\" />\n          </svg>\n          View Source\n        </a>\n      </div>\n    </div>\n  );\n};",[],[137,209,219],"468b019a-14b4-11f0-b1f4-569c3dd06744",["D",1744142495858],[163,164,165],[137,209],["D",1744141478996],[162,166,167,168],[137],"7fe7f8e4-14b4-11f0-9f34-569c3dd06744",40,["D",1744142592094],9,"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\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\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) => {\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\n// Serve React app files\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\", import.meta.url));\napp.get(\"/index.tsx\", (c) => serveFile(\"/frontend/index.tsx\", import.meta.url));\n\n// Serve React components\napp.get(\"/components/:filename\", (c) => {\n  const filename = c.req.param(\"filename\");\n  return serveFile(`/frontend/components/${filename}`, import.meta.url);\n});\n\n// Export the Hono app\nexport default app.fetch;","chat-demo",[],[144,184],["D",1744141468311],[160],[144],["D",1744141435618],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":53,"_100":101,"_102":25},{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"ctx",{"_78":-5,"_123":282,"_283":284,"_285":286,"_287":25,"_288":25,"_289":25,"_290":57,"_291":-5,"_292":-7,"_293":-7,"_294":62,"_295":25,"_296":25,"_297":-5,"_298":25,"_299":25,"_300":25,"_301":-5},"ENV",{"_253":254,"_255":256,"_257":86,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281},"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"]
</article></body></html>

Diff · v41