{persona.name}

{persona.scenario}

\n \n {getDifficultyLevel(persona.id)} Difficulty\n \n

\n \n 🔄\n New Customer\n \n

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

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

\n \n {message.sender === 'customer' ? (\n <>\n {getPersonaEmoji(persona.id)}\n {persona.name}\n \n ) : (\n <>\n 👤 You (Support Agent)\n \n )}\n \n \n {new Date(message.timestamp).toLocaleTimeString()}\n \n

{message.content}

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

\n \n {persona.name} is typing...\n \n

\n )}\n \n

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

\n ✅\n

\n Training Session Complete!\n

\n Excellent work! The customer's issue has been resolved successfully. \n You demonstrated good customer service skills. 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' && handleSendMessage()}\n placeholder={sessionEnded ? \"Session ended - start a new conversation\" : \"Type your response to the customer...\"}\n disabled={isLoading || sessionEnded}\n className=\"flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed\"\n />\n \n 📤\n Send\n \n

\n \n

\n 💡\n

Quick Tips for this Customer:

\n {getPersonaTips(persona.id)}\n

\n );\n}\n\nfunction getPersonaTips(personaId: string): React.ReactNode {\n const tips: Record = {\n frustrated: (\n

• Acknowledge their frustration immediately
• Apologize for the inconvenience
• Focus on immediate solutions
• Avoid making them repeat information

\n ),\n confused: (\n

• Use simple, non-technical language
• Provide step-by-step instructions
• Be patient and encouraging
• Confirm understanding at each step

\n ),\n demanding: (\n

• Stay calm and professional
• Acknowledge their VIP status
• Provide specific timelines
• Escalate if necessary

\n ),\n polite: (\n

• Match their friendly tone
• Take time to explain options thoroughly
• Ask about their specific needs
• Thank them for their patience

\n ),\n technical: (\n

• Use technical terminology appropriately
• Provide detailed explanations
• Share specific data when possible
• Be prepared for follow-up questions

\n ),\n anxious: (\n

• Provide immediate reassurance
• Explain security measures clearly
• Guide them through verification steps
• Follow up with preventive advice

\n ),\n budget: (\n

• Present cost-effective options first
• Explain value and savings clearly
• Be transparent about all fees
• Highlight long-term benefits

\n ),\n returning: (\n

• Acknowledge past issues honestly
• Highlight recent improvements
• Offer incentives for returning
• Provide guarantees when possible

\n )\n };\n \n return tips[personaId] || (\n

Stay professional, listen actively, and work towards resolving the customer's issue.

\n );\n}","deleted","label",[168,169,149],"frontend","components","permalink","https://www.val.town/x/bami_kole/my-first-val/code/frontend/components/ChatInterface.tsx","extension","actionData","errors"]