function MainComponent() { const [inputMessage, setInputMessage] = React.useState(''); const [messages, setMessages] = React.useState([]); const [searchQuery, setSearchQuery] = React.useState(''); const [searchResults, setSearchResults] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [sidebarOpen, setSidebarOpen] = React.useState(true); const [activeBot, setActiveBot] = React.useState(''); const sendMessageToGPT = async ()=>{ setIsLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: inputMessage } ], system_prompt: 'Provide legal advice:' }) }); const data = await response.json(); if (data.status) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: data.result } ]); } setIsLoading(false); }; const searchGoogle = async ()=>{ const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(searchQuery)}`, { method: 'GET' }); const data = await response.json(); if (data.status === 'success') { setSearchResults(data.items); } }; const handleSendMessage = ()=>{ if (inputMessage.trim()) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'user', content: inputMessage } ]); sendMessageToGPT(); setInputMessage(''); } }; const handleSearch = ()=>{ if (searchQuery.trim()) { searchGoogle(); } }; const handleClearSearch = ()=>{ setSearchQuery(''); setSearchResults([]); }; const toggleSidebar = ()=>{ setSidebarOpen(!sidebarOpen); }; const chatBots = [ "Business Law", "Criminal Defense", "Employment Law", "Family Law", "Personal Injury", "Real Estate Law", "Tax Law", "Immigration Law", "Intellectual Property" ]; const handleChatBotSelection = (topic)=>{ setInputMessage(topic); setActiveBot(topic); sendMessageToGPT(); }; const handleClearMessages = ()=>{ setMessages([]); }; const gptMessageElements = messages.map((message, index)=>{ let messageClasses = `message p-4 mb-2 rounded-lg text-white ${message.role === 'user' ? 'bg-[#2B2B2B]' : 'bg-[#4A4A4A]'}`; let content = message.content; if (message.role === 'system') { messageClasses = 'message p-4 mb-2 rounded-lg text-white bg-[#888888] italic'; content = /*#__PURE__*/ React.createElement("span", { className: "content", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, message.content); } return /*#__PURE__*/ React.createElement("div", { key: index, className: messageClasses, __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "content", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, content)); }); const sideBarButtons = chatBots.map((bot, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `text-white p-2 mb-2 rounded-md transition ${activeBot === bot ? 'bg-blue-600' : 'bg-[#333333] hover:bg-[#1C1C1C]'}`, onClick: ()=>handleChatBotSelection(bot), "aria-label": `Select ${bot} chat bot to get specialized legal advice`, __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }, bot)); const sidebarClass = `transition flex flex-col p-4 items-start ${sidebarOpen ? 'w-[250px]' : 'w-0'}`; const searchResultElements = searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "message p-2 mb-2 bg-[#4A4A4A] rounded-lg text-white", __source: { fileName: "", lineNumber: 108, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.link, className: "text-blue-400 hover:text-blue-300", target: "_blank", rel: "noreferrer", "aria-label": `Search result for ${result.title}`, __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "content", __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, result.snippet))); return /*#__PURE__*/ React.createElement("div", { id: "root", className: "font-roboto bg-[#121212] flex", __source: { fileName: "", lineNumber: 115, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "sidebar", className: sidebarClass, "aria-label": "Sidebar with chat bot options", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, "Select a Legal Bot:"), sidebarOpen && sideBarButtons, /*#__PURE__*/ React.createElement("button", { className: "text-white p-2 bg-[#333333] rounded-md hover:bg-[#1C1C1C] transition", onClick: toggleSidebar, "aria-expanded": sidebarOpen, "aria-label": sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar', __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, sidebarOpen ? '⏪ Collapse' : '⏩ Expand')), /*#__PURE__*/ React.createElement("div", { id: "main", className: "flex-grow flex flex-col p-4", "aria-label": "Main content area with conversation and search features", __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", "aria-label": "Google Search tool", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "google-search", className: "text-white mr-2", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "Google Search:"), /*#__PURE__*/ React.createElement("span", { className: "text-[#aaa]", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, "Search for information online"), /*#__PURE__*/ React.createElement("div", { className: "input-container mt-2", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", id: "google-search", className: "flex-grow py-2 px-4 rounded-md bg-[#333333] text-white", placeholder: "Type your query", value: searchQuery, onChange: (event)=>setSearchQuery(event.target.value), name: "search", "aria-label": "Search input for Google Search queries", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "text-white p-2 ml-2 bg-[#4A4A4A] rounded-md hover:bg-[#2B2B2B] transition", onClick: handleSearch, "aria-label": "Search Google with query", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, "🔍"), /*#__PURE__*/ React.createElement("button", { className: "text-white p-2 ml-2 bg-[#4A4A4A] rounded-md hover:bg-[#2B2B2B] transition", onClick: handleClearSearch, "aria-label": "Clear search results", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, "❌"))), /*#__PURE__*/ React.createElement("div", { className: "messages overflow-y-auto h-[200px]", "aria-label": "Google Search results container", __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this }, searchResultElements), /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-white", "aria-label": "Conversation with GPT-4 tool", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, "Conversation with GPT-4:"), /*#__PURE__*/ React.createElement("div", { className: "text-[#aaa]", "aria-label": "Chat with GPT-4 to get legal advice", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, "Chat with GPT-4 to get legal advice"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 164, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#aaa]", "aria-label": "Ask a legal question to GPT-4", __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }, "Ask a legal question to GPT-4"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4caf50] px-3 py-1 rounded-md text-white hover:bg-[#45a049] transition", onClick: handleClearMessages, "aria-label": "Clear the conversation with GPT-4", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, "Clear Conversation")), /*#__PURE__*/ React.createElement("div", { className: "messages overflow-y-auto flex-grow mt-2 mb-2", "aria-label": "Message container for conversation with GPT-4", __source: { fileName: "", lineNumber: 174, columnNumber: 9 }, __self: this }, gptMessageElements), isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-white", "aria-live": "polite", "aria-label": "Loading indicator", __source: { fileName: "", lineNumber: 177, columnNumber: 23 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("div", { className: "input-container mt-4", "aria-label": "Input field to send a message to GPT-4", __source: { fileName: "", lineNumber: 178, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message-input", className: "text-white mr-2", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, "Your Question:"), /*#__PURE__*/ React.createElement("div", { className: "input-container mt-2", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", id: "message-input", name: "message", className: "flex-grow py-2 px-4 mr-2 rounded-md bg-[#333333] text-white", placeholder: "Type your legal question", value: inputMessage, onChange: (event)=>setInputMessage(event.target.value), onKeyPress: (event)=>event.key === 'Enter' && handleSendMessage(), "aria-label": "Input for your legal question to GPT-4", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4caf50] w-auto px-4 py-2 rounded-md text-white hover:bg-[#45a049] transition", onClick: handleSendMessage, "aria-label": "Send message to GPT-4", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, "Send"))))); }