TechyJaunt AI Customer Support

\n \n \n

\n\n {activeTab === \"search\" && (\n

\n \n\n

\n {results.length > 0 ? (\n

\n {results.map((result, index) => (\n

{result.question}

{result.answer}

\n {result.category}\n

\n ))}\n

\n ) : (\n

Search for questions about our training programs in:

🖥️ Frontend Web Development
🔒 Cybersecurity
🎨 UI/UX Design
📊 Data Analysis
💼 Product Management
🖥️ Backend Web Development

\n )}\n

\n )}\n\n {activeTab === \"chat\" && (\n

\n {chatHistory.map((message, index) => (\n

\n {message.content}\n

\n ))}\n

\n \n

\n )}\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 const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const KEY = \"faq_chatbot\";\n const SCHEMA_VERSION = 2;\n\n // Create table for knowledge base entries\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_knowledge_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n question TEXT NOT NULL,\n answer TEXT NOT NULL,\n category TEXT,\n keywords TEXT,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Handle chat requests\n if (new URL(request.url).pathname === \"/chat\") {\n const body = await request.json();\n const openai = new OpenAI();\n\n const systemPrompt = `You are an AI assistant for TechyJaunt, an eduTech platform that trains Africans in tech skills. \n Your training programs include Frontend Web Development, Backend Web Development, Cybersecurity, \n Product Management, UI/UX Design, and Data Analysis. Always be helpful, professional, and encourage \n potential students to learn and grow in their tech careers.`;\n\n try {\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages: [\n { role: \"system\", content: systemPrompt },\n ...body.messages\n ],\n max_tokens: 300\n });\n\n return new Response(JSON.stringify({\n response: completion.choices[0].message.content\n }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n return new Response(JSON.stringify({\n response: \"I'm experiencing some technical difficulties. Could you please try again?\"\n }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n\n // Handle search requests\n if (new URL(request.url).pathname === \"/search\") {\n const searchParams = new URL(request.url).searchParams;\n const query = searchParams.get(\"q\")?.toLowerCase() || \"\";\n\n const searchResults = await sqlite.execute(`\n SELECT question, answer, category \n FROM ${KEY}_knowledge_${SCHEMA_VERSION}\n WHERE \n LOWER(question) LIKE ? OR \n LOWER(answer) LIKE ? OR \n LOWER(keywords) LIKE ?\n `, [`%${query}%`, `%${query}%`, `%${query}%`]);\n\n return new Response(JSON.stringify(searchResults.rows), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n\n return new Response(`\n \n \n TechyJaunt AI Support\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n\nconst css = `\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.6;\n max-width: 800px;\n margin: 0 auto;\n padding: 1rem;\n background-color: #f4f4f4;\n}\n\n.knowledge-base {\n background: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n padding: 2rem;\n}\n\nheader {\n text-align: center;\n margin-bottom: 2rem;\n}\n\n.tab-navigation {\n display: flex;\n justify-content: center;\n margin-bottom: 1rem;\n}\n\n.tab-navigation button {\n margin: 0 0.5rem;\n padding: 0.5rem 1rem;\n background-color: #f0f0f0;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.tab-navigation button.active {\n background-color: #007bff;\n color: white;\n}\n\nform {\n display: flex;\n margin-top: 1rem;\n}\n\ninput {\n flex-grow: 1;\n padding: 0.5rem;\n border: 1px solid #ddd;\n border-radius: 4px 0 0 4px;\n}\n\nbutton {\n padding: 0.5rem 1rem;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 0 4px 4px 0;\n cursor: pointer;\n}\n\nbutton:disabled {\n background-color: #cccccc;\n}\n\n.result-card {\n background-color: #f9f9f9;\n border-left: 4px solid #007bff;\n padding: 1rem;\n margin-bottom: 1rem;\n border-radius: 4px;\n}\n\n.result-card .category {\n display: inline-block;\n background-color: #007bff;\n color: white;\n padding: 0.2rem 0.5rem;\n border-radius: 4px;\n font-size: 0.8rem;\n margin-top: 0.5rem;\n}\n\n.welcome-message ul {\n list-style-type: none;\n padding: 0;\n}\n\n.welcome-message li {\n margin-bottom: 0.5rem;\n}\n\n.chat-section {\n display: flex;\n flex-direction: column;\n height: 400px;\n}\n\n.chat-history {\n flex-grow: 1;\n overflow-y: auto;\n border: 1px solid #ddd;\n padding: 1rem;\n margin-bottom: 1rem;\n border-radius: 4px;\n}\n\n.chat-message {\n margin-bottom: 0.5rem;\n padding: 0.5rem;\n border-radius: 4px;\n}\n\n.chat-message.user {\n background-color: #e6f2ff;\n text-align: right;\n}\n\n.chat-message.assistant {\n background-color: #f0f0f0;\n text-align: left;\n}\n\n.chat-input {\n display: flex;\n}\n\nfooter {\n text-align: center;\n margin-top: 2rem;\n font-size: 0.9rem;\n color: #666;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/sunmade/faq_chatbot/code/main.tsx","extension","actionData","errors"]