function MainComponent() { const [sentiment, setSentiment] = React.useState('Happy 😃'); const [issue, setIssue] = React.useState(''); const [anonymous, setAnonymous] = React.useState(false); const [chatGPTResponse, setChatGPTResponse] = React.useState(''); const [language, setLanguage] = React.useState('en-US'); const [loading, setLoading] = React.useState(false); const sentimentOptions = { "en-US": { title: "How are you feeling?", options: [ { text: "Happy 😃", value: "Happy 😃" }, { text: "Excited 🤩", value: "Excited 🤩" }, { text: "Loving 😍", value: "Loving 😍" }, { text: "Calm 😌", value: "Calm 😌" }, { text: "Angry 😡", value: "Angry 😡" }, { text: "Confused 😕", value: "Confused 😕" }, { text: "Sad 😢", value: "Sad 😢" }, { text: "Upset 😞", value: "Upset 😞" }, { text: "Disappointed 😔", value: "Disappointed 😔" }, { text: "Tired 😴", value: "Tired 😴" }, { text: "Nervous 😬", value: "Nervous 😬" } ], textBoxPlaceholder: "Tell me what went wrong. Please describe it in details.", assistantTitle: "Virtual assistant to help you to describe your issue in details", talkButton: "Talk to Assistant" }, es: { title: "¿Cómo te sientes?", options: [ { text: "Feliz 😃", value: "Happy 😃" }, { text: "Emocionado 🤩", value: "Excited 🤩" }, { text: "Enamorado 😍", value: "Loving 😍" }, { text: "Tranquilo 😌", value: "Calm 😌" }, { text: "Enfadado 😡", value: "Angry 😡" }, { text: "Confundido 😕", value: "Confused 😕" }, { text: "Triste 😢", value: "Sad 😢" }, { text: "Molesto 😞", value: "Upset 😞" }, { text: "Decepcionado 😔", value: "Disappointed 😔" }, { text: "Cansado 😴", value: "Tired 😴" }, { text: "Nervioso 😬", value: "Nervous 😬" } ], textBoxPlaceholder: "Dime qué salió mal. Por favor descríbelo en detalle.", assistantTitle: "Asistente virtual para ayudarte a describir tu problema en detalle", talkButton: "Hablar con el asistente" }, pt: { title: "Como você está se sentindo?", options: [ { text: "Feliz 😃", value: "Happy 😃" }, { text: "Empolgado 🤩", value: "Excited 🤩" }, { text: "Apaixonado 😍", value: "Loving 😍" }, { text: "Calmo 😌", value: "Calm 😌" }, { text: "Bravo 😡", value: "Angry 😡" }, { text: "Confuso 😕", value: "Confused 😕" }, { text: "Triste 😢", value: "Sad 😢" }, { text: "Chateado 😞", value: "Upset 😞" }, { text: "Decepcionado 😔", value: "Disappointed 😔" }, { text: "Cansado 😴", value: "Tired 😴" }, { text: "Nervoso 😬", value: "Nervous 😬" } ], textBoxPlaceholder: "Conte-me o que deu errado. Por favor, descreva em detalhes.", assistantTitle: "Assistente virtual para ajudá-lo a descrever seu problema em detalhes", talkButton: "Falar com o Assistente" } }; const languageOptions = { "en-US": "English - US", es: "Spanish", pt: "Portuguese" }; const currentUserLanguageOptions = sentimentOptions[language]; const handleSentimentChange = (event)=>setSentiment(event.target.value); const handleIssueChange = (event)=>setIssue(event.target.value); const handleAnonymousToggle = ()=>setAnonymous(!anonymous); const handleLanguageChange = (event)=>{ setLanguage(event.target.value); setSentiment(currentUserLanguageOptions.options[0].value); }; const handleTalkToAssistantClick = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: issue } ], system_prompt: sentiment.split(" ")[0], max_tokens: 2000 }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); setChatGPTResponse(data.result); } catch (error) { console.error('Error talking to assistant:', error); } setLoading(false); }; const handleSpeechToText = ()=>{ const recognition = new window.webkitSpeechRecognition(); recognition.lang = language; recognition.onresult = (event)=>setIssue((prev)=>prev + (prev ? ' ' : '') + event.results[0][0].transcript); recognition.start(); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-5 bg-[#f1f5f9] border-b border-gray-200", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `switch ${anonymous ? 'bg-blue-500' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "sr-only", checked: anonymous, onChange: handleAnonymousToggle, __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "slider round", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, anonymous ? 'Anonymous ON' : 'Anonymous OFF')), /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, !anonymous && `Hello, Kelyng Coelho!`), /*#__PURE__*/ React.createElement("select", { className: "px-3 py-2 border rounded", value: language, onChange: handleLanguageChange, __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, Object.entries(languageOptions).map(([key, text])=>/*#__PURE__*/ React.createElement("option", { key: key, value: key, __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, text)))), /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto p-5 space-y-4", __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, currentUserLanguageOptions.title), /*#__PURE__*/ React.createElement("select", { className: "w-full px-3 py-2 border rounded bg-white", value: sentiment, onChange: handleSentimentChange, __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, currentUserLanguageOptions.options.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, option.text))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full px-3 py-2 border rounded", placeholder: currentUserLanguageOptions.textBoxPlaceholder, rows: "4", value: issue, onChange: handleIssueChange, __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute right-2 top-2 text-blue-600", onClick: handleSpeechToText, __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-microphone", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: `w-full px-4 py-2 text-white bg-blue-500 rounded ${loading ? 'bg-blue-300' : 'hover:bg-blue-600'}`, onClick: handleTalkToAssistantClick, disabled: loading, __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, loading ? 'Loading...' : currentUserLanguageOptions.talkButton), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, currentUserLanguageOptions.assistantTitle), /*#__PURE__*/ React.createElement("div", { className: "px-3 py-2 border rounded bg-white min-h-[100px]", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, chatGPTResponse)))); }