AI Assistant

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","createdAt",["D",1740572414796],"version",27,"currentUserHasLiked","likeCount","forkCount",1,"referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","Hemant","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydFl1WDl6TnN1TU5YRzYxZjlEaUo3aG5IVDcifQ","forkedVal","interval","slug","Hemant/dynamicTomatoAnglerfish","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232,236,240,243,246],{"_117":118,"_142":-5,"_115":143,"_112":110},"prId",["D",1740572414796],{"_117":145,"_142":-5,"_115":146,"_112":147},26,["D",1740572256058],"a9cc0018-f43b-11ef-8c06-569c3dd06744",{"_117":149,"_142":-5,"_115":150,"_112":151},25,["D",1740571881820],"cabcb2fa-f43a-11ef-95b8-569c3dd06744",{"_117":153,"_142":-5,"_115":154,"_112":155},24,["D",1740571735169],"7352b604-f43a-11ef-a68e-569c3dd06744",{"_117":157,"_142":-5,"_115":158,"_112":159},23,["D",1740571484392],"ddda28c8-f439-11ef-937e-569c3dd06744",{"_117":161,"_142":-5,"_115":162,"_112":163},22,["D",1740571406893],"afa86f64-f439-11ef-a195-569c3dd06744",{"_117":165,"_142":-5,"_115":166,"_112":167},21,["D",1740571268243],"5d05b776-f439-11ef-985c-569c3dd06744",{"_117":169,"_142":-5,"_115":170,"_112":171},20,["D",1740570673760],"faad8a6e-f437-11ef-aa09-569c3dd06744",{"_117":173,"_142":-5,"_115":174,"_112":175},19,["D",1740570578768],"c20e9662-f437-11ef-9c4d-569c3dd06744",{"_117":177,"_142":-5,"_115":178,"_112":179},18,["D",1740570498719],"92584c88-f437-11ef-93dc-569c3dd06744",{"_117":181,"_142":-5,"_115":182,"_112":183},17,["D",1740570456160],"78fa2e14-f437-11ef-8f2d-569c3dd06744",{"_117":185,"_142":-5,"_115":186,"_112":187},16,["D",1740570313848],"2426e008-f437-11ef-b132-569c3dd06744",{"_117":189,"_142":-5,"_115":190,"_112":191},15,["D",1740569712570],"bdc2e498-f435-11ef-a8f4-569c3dd06744",{"_117":193,"_142":-5,"_115":194,"_112":195},14,["D",1740569617292],"84f9cd3e-f435-11ef-be80-569c3dd06744",{"_117":197,"_142":-5,"_115":198,"_112":199},13,["D",1740569482453],"349a003e-f435-11ef-a1cb-569c3dd06744",{"_117":201,"_142":-5,"_115":202,"_112":203},12,["D",1740569319746],"d39f3600-f434-11ef-890a-569c3dd06744",{"_117":205,"_142":-5,"_115":206,"_112":207},11,["D",1740569198346],"8b424f6e-f434-11ef-a17b-569c3dd06744",{"_117":209,"_142":-5,"_115":210,"_112":211},10,["D",1740569123391],"5e95e7a0-f434-11ef-9285-569c3dd06744",{"_117":213,"_142":-5,"_115":214,"_112":215},9,["D",1740568996728],"13179724-f434-11ef-afbb-569c3dd06744",{"_117":217,"_142":-5,"_115":218,"_112":219},8,["D",1740568838596],"b4d551c4-f433-11ef-9294-569c3dd06744",{"_117":221,"_142":-5,"_115":222,"_112":223},7,["D",1740568714363],"6acc3476-f433-11ef-9294-569c3dd06744",{"_117":225,"_142":-5,"_115":226,"_112":227},6,["D",1740568547277],"07308408-f433-11ef-ba9e-569c3dd06744",{"_117":229,"_142":-5,"_115":230,"_112":231},5,["D",1740568423149],"bd354276-f432-11ef-a7b8-569c3dd06744",{"_117":233,"_142":-5,"_115":234,"_112":235},4,["D",1740568287671],"6c75df4e-f432-11ef-89c2-569c3dd06744",{"_117":237,"_142":-5,"_115":238,"_112":239},3,["D",1740568120044],"088bee06-f432-11ef-a71b-569c3dd06744",{"_117":90,"_142":-5,"_115":241,"_112":242},["D",1740568036868],"d6f83e80-f431-11ef-a1c8-569c3dd06744",{"_117":122,"_142":-5,"_115":244,"_112":245},["D",1740567904962],"88583140-f431-11ef-a7aa-569c3dd06744",{"_117":31,"_142":-5,"_115":247,"_112":248},["D",1740567845054],"64a3c1ec-f431-11ef-9e88-569c3dd06744","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":256,"_257":258,"_94":259},"single","redirect","/v/Hemant/dynamicTomatoAnglerfish/versions",{"_112":175,"_113":260,"_117":173,"_115":261,"_262":99,"_100":101,"_107":108,"_129":130,"_11":96,"_263":-5,"_264":-5,"_265":-5,"_253":26,"_135":136},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst THEME_EMOJIS = {\n rainbow: [\"🌈\", \"🦄\", \"🎨\", \"🌟\", \"🍭\"],\n cyberpunk: [\"🤖\", \"💻\", \"🌐\", \"⚡\", \"🚀\"],\n pastel: [\"🍦\", \"🎀\", \"🦄\", \"🍭\", \"🌸\"],\n neon: [\"✨\", \"🌈\", \"💡\", \"🎉\", \"🔮\"],\n light: [\"☀️\", \"🌞\", \"🦋\", \"🍦\", \"🌻\"],\n dark: [\"🌙\", \"🦉\", \"🌑\", \"🖤\", \"🌌\"],\n};\n\nconst DEFAULT_EMOJIS = [\"👋\", \"🌈\", \"✨\", \"🚀\", \"🎉\", \"🤖\"];\n\nconst THEMES = {\n rainbow: {\n background: \"linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #f9d56e, #ff9ff3)\",\n backgroundAnimation: \"rainbow 10s ease infinite\",\n userBubble: \"linear-gradient(135deg, #ff6b6b, #ff9ff3)\",\n assistantBubble: \"linear-gradient(135deg, #4ecdc4, #45b7d1)\",\n accent: \"#f9d56e\",\n textColor: \"white\",\n keyframes: `\n @keyframes rainbow {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n `,\n },\n cyberpunk: {\n background: \"linear-gradient(135deg, #0f2027, #203a43, #2c5364)\",\n userBubble: \"linear-gradient(135deg, #00b4db, #0083b0)\",\n assistantBubble: \"linear-gradient(135deg, #8e2de2, #4a00e0)\",\n accent: \"#00ff87\",\n textColor: \"#00ff87\",\n keyframes: \"\",\n },\n pastel: {\n background: \"linear-gradient(135deg, #ffecd2, #fcb69f)\",\n userBubble: \"linear-gradient(135deg, #ff9a9e, #fad0c4)\",\n assistantBubble: \"linear-gradient(135deg, #a1c4fd, #c2e9fb)\",\n accent: \"#ff6b6b\",\n textColor: \"#333\",\n keyframes: \"\",\n },\n neon: {\n background: \"linear-gradient(135deg, #000428, #004e92)\",\n userBubble: \"linear-gradient(135deg, #ff00cc, #3333ff)\",\n assistantBubble: \"linear-gradient(135deg, #00dbde, #fc00ff)\",\n accent: \"#00ff87\",\n textColor: \"white\",\n keyframes: \"\",\n },\n light: {\n background: \"linear-gradient(135deg, #f5f7fa, #c3cfe2)\",\n userBubble: \"linear-gradient(135deg, #6a11cb, #2575fc)\",\n assistantBubble: \"linear-gradient(135deg, #5f2c82, #49a09d)\",\n accent: \"#007bff\",\n textColor: \"#333\",\n keyframes: \"\",\n },\n dark: {\n background: \"linear-gradient(135deg, #232526, #414345)\",\n userBubble: \"linear-gradient(135deg, #667eea, #764ba2)\",\n assistantBubble: \"linear-gradient(135deg, #434343, #000000)\",\n accent: \"#17a2b8\",\n textColor: \"white\",\n keyframes: \"\",\n },\n};\n\nfunction getRandomEmoji(theme) {\n // Use theme-specific emojis if available, otherwise use default emojis\n const emojis = THEME_EMOJIS[theme] || DEFAULT_EMOJIS;\n return emojis[Math.floor(Math.random() * emojis.length)];\n}\n\nfunction TypingIndicator({ theme }) {\n const emoji = getRandomEmoji(theme);\n return (\n \n {emoji} Typing\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction App() {\n const themeKeys = Object.keys(THEMES);\n const [theme, setTheme] = useState(\"light\");\n const [messages, setMessages] = useState([\n {\n role: \"assistant\",\n content: `Hey there! 👋 I'm your HEMANT assistant. I can help you with almost anything - just ask! ${\n getRandomEmoji(theme)\n }`,\n },\n ]);\n const [inputMessage, setInputMessage] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const messagesEndRef = useRef(null);\n const currentTheme = THEMES[theme];\n\n // Automatically change theme every 10 seconds\n useEffect(() => {\n const themeInterval = setInterval(() => {\n const currentIndex = themeKeys.indexOf(theme);\n const nextIndex = (currentIndex + 1) % themeKeys.length;\n setTheme(themeKeys[nextIndex]);\n }, 10000);\n\n return () => clearInterval(themeInterval);\n }, [theme, themeKeys]);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const sendMessage = async () => {\n if (!inputMessage.trim()) return;\n\n const newMessages = [...messages, { role: \"user\", content: inputMessage }];\n setMessages(newMessages);\n setInputMessage(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n messages: newMessages,\n }),\n });\n\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(errorText);\n }\n\n const data = await response.json();\n setMessages(prev => [...prev, {\n role: \"assistant\",\n content: data.message + ` ${getRandomEmoji(theme)}`,\n }]);\n } catch (error) {\n console.error(\"sorry not reply:\", error);\n setMessages(prev => [...prev, {\n role: \"assistant\",\n content: `Oops! Something went wrong: ${error.message} 🤖`,\n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n <>\n \n \n \n {messages.map((msg, index) => (\n \n {msg.content}\n \n ))}\n {isLoading && }\n

\n\n \n setInputMessage(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && sendMessage()}\n placeholder=\"Ask me anything...\"\n style={{\n flex: 1,\n padding: \"12px\",\n borderRadius: \"20px\",\n border: \"none\",\n marginRight: \"10px\",\n background: \"rgba(255,255,255,0.2)\",\n color: currentTheme.textColor,\n outline: \"none\",\n }}\n />\n e.target.style.transform = \"scale(1.05)\"}\n onMouseLeave={(e) => e.target.style.transform = \"scale(1)\"}\n >\n Send\n \n \n e.target.style.opacity = \"1\"}\n onMouseLeave={(e) => e.target.style.opacity = \"0.7\"}\n >\n View Source\n \n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\") {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n const SCHEMA_VERSION = 10;\n\n // Ensure messages table exists\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n role TEXT NOT NULL,\n content TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Chat endpoint\n if (new URL(request.url).pathname === \"/chat\") {\n const body = await request.json();\n const messages = body.messages || [];\n\n // Truncate messages to last 10 interactions to manage token count\n const truncatedMessages = messages.slice(-10).map(msg => ({\n role: msg.role,\n content: msg.content.length > 500 ? msg.content.slice(0, 500) + \"...\" : msg.content,\n }));\n\n // Add a comprehensive system message to provide context\n const systemMessage = {\n role: \"system\",\n content: `You are an advanced AI assistant designed to help with ANY type of question or task. \n Your capabilities include:\n - Answering questions on any topic (science, history, current events, etc.)\n - Explaining complex concepts\n - Providing step-by-step instructions\n - Offering creative solutions\n - Helping with problem-solving\n - Engaging in intellectual discussions\n\n Guidelines:\n - Be thorough and detailed in your responses\n - If a question requires specialized knowledge, provide a comprehensive explanation\n - Use clear, concise language\n - Break down complex topics into easy-to-understand parts\n - If you're unsure about something, explain why and offer the most likely information\n - Be honest about the limitations of your knowledge\n\n You can handle questions about:\n - Academic subjects\n - Technical problems\n - Creative writing\n - Math and calculations\n - Language translations\n - Coding and programming\n - Life advice\n - Current events\n - And much more!\n\n Always aim to be helpful, informative, and engaging.`,\n };\n\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n messages: [systemMessage, ...truncatedMessages],\n model: \"gpt-4o-mini\",\n max_tokens: 500,\n });\n\n const aiMessage = completion.choices[0].message.content;\n\n // Store messages in SQLite\n await Promise.all(messages.map(msg =>\n sqlite.execute(\n `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (role, content) VALUES (?, ?)`,\n [msg.role, msg.content],\n )\n ));\n\n return new Response(JSON.stringify({ message: aiMessage }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n Universal AI Assistant\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",["D",1740570578768],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

dynamicTomatoAnglerfish

Version 19