\n \n \n\n",[],[181,188],{"_104":196,"_95":197,"_153":198,"_155":182,"_156":138,"_157":101,"_159":22,"_106":199,"_100":32,"_162":174,"_164":200,"_165":22,"_166":-5,"_167":201,"_98":202},"51ce7588-3f9c-11f0-bed4-76b3cceeab13","index.tsx","51ce7678-3f9c-11f0-bed4-76b3cceeab13",["D",1748860106833],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0';\nimport type { CustomerPersona, Message, ChatSession } from '../shared/types.ts';\n\ninterface AppState {\n personas: CustomerPersona[];\n selectedPersona: CustomerPersona | null;\n sessionId: string | null;\n messages: Message[];\n isLoading: boolean;\n sessionEnded: boolean;\n}\n\nfunction App() {\n const [state, setState] = useState({\n personas: (window as any).__INITIAL_DATA__?.personas || [],\n selectedPersona: null,\n sessionId: null,\n messages: [],\n isLoading: false,\n sessionEnded: false\n });\n \n const [inputMessage, setInputMessage] = useState('');\n const messagesEndRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(() => {\n scrollToBottom();\n }, [state.messages]);\n\n const startNewSession = async (persona: CustomerPersona) => {\n setState(prev => ({ ...prev, isLoading: true }));\n \n try {\n const response = await fetch('/api/sessions', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ personaId: persona.id })\n });\n \n const data = await response.json();\n \n setState(prev => ({\n ...prev,\n selectedPersona: persona,\n sessionId: data.sessionId,\n messages: [data.initialMessage],\n isLoading: false,\n sessionEnded: false\n }));\n } catch (error) {\n console.error('Failed to start session:', error);\n setState(prev => ({ ...prev, isLoading: false }));\n }\n };\n\n const sendMessage = async () => {\n if (!inputMessage.trim() || !state.sessionId || state.isLoading) return;\n \n const message = inputMessage.trim();\n setInputMessage('');\n \n // Add support message immediately\n const supportMessage: Message = {\n id: crypto.randomUUID(),\n content: message,\n sender: 'support',\n timestamp: new Date()\n };\n \n setState(prev => ({\n ...prev,\n messages: [...prev.messages, supportMessage],\n isLoading: true\n }));\n \n try {\n const response = await fetch('/api/chat', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ sessionId: state.sessionId, message })\n });\n \n const data = await response.json();\n \n setState(prev => ({\n ...prev,\n messages: [...prev.messages, data.message],\n isLoading: false,\n sessionEnded: data.sessionEnded || false\n }));\n } catch (error) {\n console.error('Failed to send message:', error);\n setState(prev => ({ ...prev, isLoading: false }));\n }\n };\n\n const resetSession = () => {\n setState(prev => ({\n ...prev,\n selectedPersona: null,\n sessionId: null,\n messages: [],\n sessionEnded: false\n }));\n setInputMessage('');\n };\n\n if (!state.selectedPersona) {\n return (\n

\n Customer Support Training\n

\n Choose a customer persona to practice your support skills\n

\n \n

\n {state.personas.map(persona => (\n startNewSession(persona)}\n >\n

\n {persona.name}\n

\n {persona.description}\n

Scenario:

{persona.scenario}

\n {persona.traits.map(trait => (\n \n {trait}\n \n ))}\n

\n ))}\n

\n \n {state.isLoading && (\n

Starting conversation...

\n )}\n \n );\n }\n\n return (\n

\n {/* Header */}\n

{state.selectedPersona.name}

{state.selectedPersona.scenario}

\n \n New Customer\n \n

\n \n {/* Chat Messages */}\n

\n {state.messages.map(message => (\n \n

\n \n {message.sender === 'customer' ? state.selectedPersona.name : 'You (Support)'}\n \n \n {new Date(message.timestamp).toLocaleTimeString()}\n \n

{message.content}

\n ))}\n \n {state.isLoading && (\n

\n Customer is typing...\n

\n )}\n \n

\n \n {/* Session Ended Message */}\n {state.sessionEnded && (\n

\n ✓\n

\n Session Complete! The customer's issue has been resolved.\n Great job! Click \"New Customer\" to practice with another scenario.\n

\n )}\n \n {/* Input Area */}\n

\n setInputMessage(e.target.value)}\n onKeyPress={(e) => e.key === 'Enter' && sendMessage()}\n placeholder={state.sessionEnded ? \"Session ended - start a new conversation\" : \"Type your response...\"}\n disabled={state.isLoading || state.sessionEnded}\n className=\"flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100\"\n />\n \n Send\n \n

\n \n

\n 💡 Tip: Stay professional, listen actively, and work towards resolving the customer's issue.\n

\n );\n}\n\n// Mount the app\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[],[181,197],[181],{"_104":205,"_95":206,"_153":207,"_155":-5,"_156":138,"_157":208,"_159":160,"_106":209,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":210,"_98":219},"1f61ad22-3f9c-11f0-9a0a-76b3cceeab13","shared","620f965d-bb9d-486c-84b9-47eb217e0941",7,["D",1748860022233],[211],{"_104":212,"_95":213,"_153":214,"_155":207,"_156":138,"_157":208,"_159":160,"_106":215,"_100":32,"_162":174,"_164":216,"_165":22,"_166":-5,"_167":217,"_98":218},"1f61a75a-3f9c-11f0-9a0a-76b3cceeab13","types.ts","1f61a84a-3f9c-11f0-9a0a-76b3cceeab13",["D",1748860022233],"export interface Message {\n id: string;\n content: string;\n sender: 'customer' | 'support';\n timestamp: Date;\n}\n\nexport interface CustomerPersona {\n id: string;\n name: string;\n description: string;\n traits: string[];\n scenario: string;\n initialMessage: string;\n}\n\nexport interface ChatSession {\n id: string;\n persona: CustomerPersona;\n messages: Message[];\n startTime: Date;\n isActive: boolean;\n}\n\nexport interface ChatRequest {\n sessionId: string;\n message: string;\n}\n\nexport interface ChatResponse {\n message: Message;\n sessionEnded?: boolean;\n feedback?: string;\n}",[],[206,213],[206],{"_104":221,"_95":222,"_153":223,"_155":-5,"_156":138,"_157":224,"_159":22,"_106":225,"_100":32,"_162":174,"_164":226,"_165":22,"_166":-5,"_167":227,"_98":228},"115d8094-3f9b-11f0-a0ce-76b3cceeab13","01_script.tsx","115d815c-3f9b-11f0-a0ce-76b3cceeab13",2,["D",1748859569226],"// This script returns a random fun fact\n// You can run scripts manually in this view or call it from other vals.\nexport default function getRandomFact() {\n const funFacts = [\n \"Honey never spoils.\",\n \"Bananas are actually berries, but strawberries are not.\",\n \"Val Town has a citizen Juicy Bear. 🐻\",\n ];\n const fact = funFacts[Math.floor(Math.random() * funFacts.length)];\n return fact;\n}\nconsole.log(\"Fun fact:\", getRandomFact());\n",[],[222],{"_104":230,"_95":99,"_153":231,"_155":-5,"_156":138,"_157":232,"_159":22,"_106":233,"_100":32,"_162":234,"_164":235,"_165":22,"_166":-5,"_167":236,"_98":237},"116076fa-3f9b-11f0-a0ce-76b3cceeab13","1160793e-3f9b-11f0-a0ce-76b3cceeab13",3,["D",1748859569245],"http","// This code responds to HTTP web requests.\n// Access it via its public URL (you can also pick a nicer subdomain).\n// Try adding ?name=YourName to the URL!\nexport default function httpHandler(req: Request): Response {\n const url = new URL(req.url);\n const name = url.searchParams.get(\"name\") || \"Friend\";\n console.log(`Greeted ${name} via HTTP`);\n return new Response(`Hello, ${name}! Welcome to Val Town.`);\n}",[],[99],{"_104":239,"_95":240,"_153":241,"_155":-5,"_156":138,"_157":242,"_159":22,"_106":243,"_100":32,"_162":244,"_164":245,"_165":22,"_166":-5,"_167":246,"_98":247},"11637f08-3f9b-11f0-a0ce-76b3cceeab13","03_cron.tsx","11637fbc-3f9b-11f0-a0ce-76b3cceeab13",4,["D",1748859569265],"interval","// This cron runs on a schedule (e.g. every hour, day).\n// Configure the timer with the 🕒 icon in the top right.\n// This example just logs the current time.\nexport function scheduledHandler() {\n const timestamp = new Date().toISOString();\n console.log(`Cron val executed at: ${timestamp}`);\n return `Executed at ${timestamp}`;\n}",[],[240],{"_104":249,"_95":250,"_153":251,"_155":-5,"_156":138,"_157":252,"_159":22,"_106":253,"_100":32,"_162":254,"_164":255,"_165":22,"_166":-5,"_167":256,"_98":257},"11673198-3f9b-11f0-a0ce-76b3cceeab13","04_email.tsx","1167324c-3f9b-11f0-a0ce-76b3cceeab13",5,["D",1748859569289],"email","// This code is triggered when an email is sent to its unique address.\n// Click \"Run\", copy and paste the email address and send an email to it.\n// This example will log the email details received.\nexport default async function emailHandler(email: Email){\n console.log(\"Email received!\", email.from, email.subject, email.text);\n for (const file of email.attachments) {\n console.log(`Filename: ${file.name}`);\n console.log(`Content Type: ${file.type}`);\n console.log(`Content: ${await file.text()}`);\n }\n}",[],[250],{"_104":259,"_95":260,"_153":261,"_155":-5,"_156":138,"_157":262,"_159":160,"_106":263,"_100":264,"_162":191,"_164":265,"_165":22,"_166":-5,"_167":266,"_98":267},"1c4a7218-3f9c-11f0-be5d-76b3cceeab13","README.md","11553010-3f9b-11f0-a0ce-76b3cceeab13",6,["D",1748860017046],1,"# Customer Role-Play Training App\n\nA training application for customer support personnel where AI acts as various customer personas to help practice handling different types of customer interactions.\n\n## Features\n\n- Multiple customer personas (frustrated, confused, polite, demanding, etc.)\n- Realistic customer scenarios and issues\n- Real-time chat interface\n- Training feedback and tips\n\n## Structure\n\n- `backend/index.ts` - Main Hono server with API routes\n- `frontend/index.html` - Main chat interface\n- `frontend/index.tsx` - React chat components\n- `shared/types.ts` - Shared TypeScript types\n\n## Usage\n\nThe app presents different customer scenarios where support trainees can practice their skills. The AI customer will respond realistically based on the chosen persona and scenario.",[],[260],"files",[150,169,179,186,195,204,211,220,229,238,248,258],"counts",{"_272":32,"_273":264,"_274":32,"_275":32},"pulls","branches","forks","envVars","contents",[],{"_104":230,"_95":99,"_153":231,"_155":-5,"_156":138,"_157":232,"_159":22,"_106":279,"_100":32,"_162":234,"_164":235,"_165":22,"_166":-5,"_98":280},["D",1748859569245],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":289,"_148":294,"_268":331,"_191":332,"_276":334,"_335":-5,"_336":22,"_337":-5,"_338":-5,"_339":-5,"_340":341},{"_104":105,"_95":96,"_106":290,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":291,"_132":292,"_135":293,"_147":22},["D",1748859569162],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[295,301,310,316,319,322,325,328],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":296,"_98":300},[297],{"_104":170,"_95":171,"_153":172,"_155":154,"_156":138,"_157":158,"_159":22,"_106":173,"_100":32,"_162":174,"_164":175,"_165":22,"_166":-5,"_167":298,"_98":299},[],[152,171],[152],{"_104":180,"_95":181,"_153":182,"_155":-5,"_156":138,"_157":183,"_159":160,"_106":184,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":302,"_98":309},[303,306],{"_104":187,"_95":188,"_153":189,"_155":182,"_156":138,"_157":183,"_159":22,"_106":190,"_100":32,"_162":191,"_164":192,"_165":22,"_166":-5,"_167":304,"_98":305},[],[181,188],{"_104":196,"_95":197,"_153":198,"_155":182,"_156":138,"_157":101,"_159":22,"_106":199,"_100":32,"_162":174,"_164":200,"_165":22,"_166":-5,"_167":307,"_98":308},[],[181,197],[181],{"_104":205,"_95":206,"_153":207,"_155":-5,"_156":138,"_157":208,"_159":160,"_106":209,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":311,"_98":315},[312],{"_104":212,"_95":213,"_153":214,"_155":207,"_156":138,"_157":208,"_159":160,"_106":215,"_100":32,"_162":174,"_164":216,"_165":22,"_166":-5,"_167":313,"_98":314},[],[206,213],[206],{"_104":221,"_95":222,"_153":223,"_155":-5,"_156":138,"_157":224,"_159":22,"_106":225,"_100":32,"_162":174,"_164":226,"_165":22,"_166":-5,"_167":317,"_98":318},[],[222],{"_104":230,"_95":99,"_153":231,"_155":-5,"_156":138,"_157":232,"_159":22,"_106":233,"_100":32,"_162":234,"_164":235,"_165":22,"_166":-5,"_167":320,"_98":321},[],[99],{"_104":239,"_95":240,"_153":241,"_155":-5,"_156":138,"_157":242,"_159":22,"_106":243,"_100":32,"_162":244,"_164":245,"_165":22,"_166":-5,"_167":323,"_98":324},[],[240],{"_104":249,"_95":250,"_153":251,"_155":-5,"_156":138,"_157":252,"_159":22,"_106":253,"_100":32,"_162":254,"_164":255,"_165":22,"_166":-5,"_167":326,"_98":327},[],[250],{"_104":259,"_95":260,"_153":261,"_155":-5,"_156":138,"_157":262,"_159":160,"_106":263,"_100":264,"_162":191,"_164":265,"_165":22,"_166":-5,"_167":329,"_98":330},[],[260],[295,297,301,303,306,310,312,316,319,322,325,328],{"_104":230,"_95":99,"_153":231,"_155":-5,"_156":138,"_157":232,"_159":22,"_106":279,"_100":32,"_162":234,"_164":235,"_165":22,"_166":-5,"_98":333},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]