function ChatSidebarComponent({ addNewChat, chats, togglePin }) { const { pinnedChats, chatHistory } = chats; return /*#__PURE__*/ React.createElement("div", { className: "w-1/4 h-full bg-gray-100 overflow-y-auto", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: addNewChat, className: "bg-blue-500 text-white p-2 rounded block w-full", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, "New Chat"), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl px-2", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Pinned Chats"), pinnedChats.map((chat, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2 bg-gray-200 rounded-lg m-2 flex justify-between items-center cursor-pointer", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-serif", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, chat.title), /*#__PURE__*/ React.createElement("i", { className: "fa fa-thumb-tack text-blue-500", onClick: (e)=>{ e.stopPropagation(); togglePin(index, true); }, __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl px-2", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Chat History"), chatHistory.map((chat, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2 bg-gray-200 rounded-lg m-2 flex justify-between items-center cursor-pointer", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-serif", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, chat.title), /*#__PURE__*/ React.createElement("i", { className: "fa fa-thumb-tack text-gray-400", onClick: (e)=>{ e.stopPropagation(); togglePin(index, false); }, __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }))))); } function ChatSidebarComponentStory() { const togglePin = (index, isPinned)=>{ if (isPinned) { chats.chatHistory.push(chats.pinnedChats.splice(index, 1)[0]); } else { chats.pinnedChats.splice(index, 0, chats.chatHistory.splice(index, 1)[0]); } setChats({ ...chats, pinnedChats: [ ...chats.pinnedChats ], chatHistory: [ ...chats.chatHistory ] }); }; const addNewChat = ()=>{ setChats({ ...chats, chatHistory: [ ...chats.chatHistory, { title: `Chat ${chats.chatHistory.length + chats.pinnedChats.length + 1}` } ] }); }; const [chats, setChats] = React.useState({ pinnedChats: [ { title: 'Important Chat 1' } ], chatHistory: [ { title: 'General Chat 2' }, { title: 'General Chat 3' } ] }); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatSidebarComponent, { addNewChat: addNewChat, togglePin: togglePin, chats: chats, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this })); } function ChatMainComponent({ model, currentTitle, systemPrompt, chatHistory, onSelectModel, onSystemPromptChange, userInput, onUserInputChange, onSendMessage, isLoading }) { const handleKeyDown = (event)=>{ if (event.ctrlKey && event.key === 'Enter') { onSendMessage(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: model, onChange: onSelectModel, className: "p-2 border rounded w-full", name: "llm-select", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "gpt", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "GPT"), /*#__PURE__*/ React.createElement("option", { value: "gpt-4", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "GPT4"), /*#__PURE__*/ React.createElement("option", { value: "google-gemini", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Gemini Ultra"), /*#__PURE__*/ React.createElement("option", { value: "anthropic-claude", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Claude3 Opus"), /*#__PURE__*/ React.createElement("option", { value: "anthropic-claude-haiku", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "Claude3 Haiku"))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 flex justify-center items-center", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, currentTitle))), /*#__PURE__*/ React.createElement("div", { className: "mb-2 flex-grow-0 resize-y", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full border rounded font-roboto resize", placeholder: "System Prompt", value: systemPrompt, onChange: onSystemPromptChange, style: { resize: 'vertical' }, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, chatHistory.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "my-2 p-2 bg-gray-200 rounded-lg font-roboto whitespace-pre-wrap", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, message.content))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 w-full p-2 bg-white border-t", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full border rounded font-roboto mb-2", placeholder: "Type your message here...", value: userInput, onChange: onUserInputChange, onKeyDown: handleKeyDown, name: "user-input", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 flex items-center justify-center", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, isLoading && /*#__PURE__*/ React.createElement("div", { className: "animate-spin w-5 h-5 border-2 border-blue-500 rounded-full", __source: { fileName: "", lineNumber: 54, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onSendMessage, className: "w-full bg-blue-500 text-white p-2 rounded font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Send"))))); } function ChatMainComponentStory() { const [model, setModel] = React.useState('gpt'); const [currentTitle, setCurrentTitle] = React.useState('Chat Title'); const [systemPrompt, setSystemPrompt] = React.useState(''); const [chatHistory, setChatHistory] = React.useState([]); const [userInput, setUserInput] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleSelectModel = (e)=>setModel(e.target.value); const handleSystemPromptChange = (e)=>setSystemPrompt(e.target.value); const handleUserInputChange = (e)=>setUserInput(e.target.value); const onSendMessage = ()=>{ setIsLoading(true); setChatHistory([ ...chatHistory, { content: userInput } ]); setUserInput(''); setTimeout(()=>setIsLoading(false), 2000); }; return /*#__PURE__*/ React.createElement(ChatMainComponent, { model: model, currentTitle: currentTitle, systemPrompt: systemPrompt, chatHistory: chatHistory, onSelectModel: handleSelectModel, onSystemPromptChange: handleSystemPromptChange, userInput: userInput, onUserInputChange: handleUserInputChange, onSendMessage: onSendMessage, isLoading: isLoading, __source: { fileName: "", lineNumber: 89, columnNumber: 5 }, __self: this }); } function MainComponent() { const [chats, setChats] = React.useState({ pinnedChats: [ { title: 'Important Chat 1' } ], chatHistory: [ { title: 'General Chat 2' }, { title: 'General Chat 3' } ] }); const [currentChat, setCurrentChat] = React.useState(null); const [model, setModel] = React.useState('google-gemini'); const [systemPrompt, setSystemPrompt] = React.useState(''); const [chatContents, setChatContents] = React.useState([]); const [userInput, setUserInput] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const togglePin = (index, isPinned)=>{ let updatedChats; if (isPinned) { const chatToUnpin = chats.pinnedChats.splice(index, 1)[0]; updatedChats = { ...chats, chatHistory: [ ...chats.chatHistory, chatToUnpin ], pinnedChats: [ ...chats.pinnedChats ] }; } else { const chatToPin = chats.chatHistory.splice(index, 1)[0]; updatedChats = { ...chats, pinnedChats: [ ...chats.pinnedChats, chatToPin ], chatHistory: [ ...chats.chatHistory ] }; } setChats(updatedChats); if (currentChat && currentChat.title === (isPinned ? chats.pinnedChats[index] : chats.chatHistory[index]).title) { setCurrentChat(null); setChatContents([]); setUserInput(''); setSystemPrompt(''); } }; const addNewChat = ()=>{ const newChatTitle = systemPrompt || `Chat ${chats.chatHistory.length + chats.pinnedChats.length + 1}`; setCurrentChat({ title: newChatTitle, messages: [], systemPrompt: '' }); setChats({ ...chats, chatHistory: [ ...chats.chatHistory, { title: newChatTitle } ] }); setChatContents([]); setSystemPrompt(''); setUserInput(''); }; const selectChat = (chat)=>{ setCurrentChat(chat); setChatContents(chat.messages || []); setSystemPrompt(chat.systemPrompt || ''); setUserInput(''); }; const handleSelectModel = (e)=>setModel(e.target.value); const handleSystemPromptChange = (e)=>!chatContents.length && setSystemPrompt(e.target.value); const handleUserInputChange = (e)=>setUserInput(e.target.value); const appendMessageToChat = (newMessage)=>{ const updatedMessages = [ ...chatContents, newMessage ]; setChatContents(updatedMessages); saveChat(updatedMessages); }; const saveChat = (messages)=>{ if (currentChat) { const updatedChatWithMessages = { ...currentChat, messages: messages, systemPrompt: systemPrompt }; const chatList = chats.pinnedChats.includes(currentChat) ? 'pinnedChats' : 'chatHistory'; setChats({ ...chats, [chatList]: chats[chatList].map((chat)=>chat.title === currentChat.title ? updatedChatWithMessages : chat) }); setCurrentChat(updatedChatWithMessages); } }; const onSendMessage = ()=>{ if (!currentChat) return; setIsLoading(true); const newMessage = { role: 'user', content: userInput }; appendMessageToChat(newMessage); fetch(`/integrations/${model}/`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: chatContents.map((message)=>({ role: message.role, content: message.content })).concat([ { role: 'user', content: userInput } ]), system_prompt: systemPrompt }) }).then((response)=>response.json()).then((data)=>{ setIsLoading(false); const assistantResponse = { role: 'assistant', content: data.choices[0].message.content }; appendMessageToChat(assistantResponse); }).catch(()=>{ setIsLoading(false); const errorResponse = { role: 'assistant', content: "Error: Could not get a response from the LLM." }; appendMessageToChat(errorResponse); }); if (!chatContents.length) { setCurrentChat({ ...currentChat, title: userInput }); } setUserInput(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-full", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "btn", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars", __source: { fileName: "", lineNumber: 108, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:block md:w-1/5 lg:w-1/4 max-w-[24%]", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(ChatSidebarComponent, { addNewChat: addNewChat, chats: chats, togglePin: togglePin, onSelectChat: selectChat, __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:w-4/5 lg:w-3/4 max-w-[72%]", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(ChatMainComponent, { model: model, currentTitle: currentChat ? currentChat.title : '', systemPrompt: systemPrompt, chatHistory: chatContents, onSelectModel: handleSelectModel, onSystemPromptChange: handleSystemPromptChange, userInput: userInput, onUserInputChange: handleUserInputChange, onSendMessage: onSendMessage, isLoading: isLoading, __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }))); }