AI Chat App

\n \n\n",[],[134,179],"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};",[],[134,195,187],"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};",[],[134,195,197],"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};",[],[134,195,205],"468b019a-14b4-11f0-b1f4-569c3dd06744",["D",1744142495858],[159,160,161],[134,195],["D",1744141478996],[158,162,163],[134],"7fe7f8e4-14b4-11f0-9f34-569c3dd06744","index.ts",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",[],[141,220],["D",1744141468311],[156],[141],["D",1744141435618],{"_11":12,"_88":84},{"_11":12,"_82":-5,"_83":84,"_44":45,"_85":86,"_87":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_77":-5,"_78":-5,"_79":-5,"_80":14,"_81":12},"ctx",{"_70":-5,"_110":269,"_270":271,"_272":273,"_274":38,"_275":38,"_276":38,"_277":49,"_278":-5,"_279":-7,"_280":-7,"_281":54,"_282":38,"_283":38,"_284":-5,"_285":38,"_286":38,"_287":38,"_288":-5},"ENV",{"_240":241,"_242":243,"_244":26,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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>

Branches1

Branches
1