diff options
Diffstat (limited to 'examples/server/webui/src/components')
| -rw-r--r-- | examples/server/webui/src/components/ChatMessage.tsx | 17 | ||||
| -rw-r--r-- | examples/server/webui/src/components/ChatScreen.tsx | 57 | ||||
| -rw-r--r-- | examples/server/webui/src/components/Header.tsx | 86 | ||||
| -rw-r--r-- | examples/server/webui/src/components/ModalProvider.tsx | 151 | ||||
| -rw-r--r-- | examples/server/webui/src/components/SettingDialog.tsx | 268 | ||||
| -rw-r--r-- | examples/server/webui/src/components/Sidebar.tsx | 382 |
6 files changed, 901 insertions, 60 deletions
diff --git a/examples/server/webui/src/components/ChatMessage.tsx b/examples/server/webui/src/components/ChatMessage.tsx index 40ea7471..a60fd241 100644 --- a/examples/server/webui/src/components/ChatMessage.tsx +++ b/examples/server/webui/src/components/ChatMessage.tsx @@ -20,6 +20,7 @@ export default function ChatMessage({ onEditMessage, onChangeSibling, isPending, + onContinueMessage, }: { msg: Message | PendingMessage; siblingLeafNodeIds: Message['id'][]; @@ -27,6 +28,7 @@ export default function ChatMessage({ id?: string; onRegenerateMessage(msg: Message): void; onEditMessage(msg: Message, content: string): void; + onContinueMessage(msg: Message, content: string): void; onChangeSibling(sibling: Message['id']): void; isPending?: boolean; }) { @@ -112,7 +114,11 @@ export default function ChatMessage({ onClick={() => { if (msg.content !== null) { setEditingContent(null); - onEditMessage(msg as Message, editingContent); + if (msg.role === 'user') { + onEditMessage(msg as Message, editingContent); + } else { + onContinueMessage(msg as Message, editingContent); + } } }} > @@ -283,6 +289,15 @@ export default function ChatMessage({ 🔄 Regenerate </button> )} + {!isPending && ( + <button + className="badge btn-mini show-on-hover" + onClick={() => setEditingContent(msg.content)} + disabled={msg.content === null} + > + ✍️ Edit + </button> + )} </> )} <CopyButton diff --git a/examples/server/webui/src/components/ChatScreen.tsx b/examples/server/webui/src/components/ChatScreen.tsx index 29ab5ea6..9bb333de 100644 --- a/examples/server/webui/src/components/ChatScreen.tsx +++ b/examples/server/webui/src/components/ChatScreen.tsx @@ -99,6 +99,7 @@ export default function ChatScreen() { pendingMessages, canvasData, replaceMessageAndGenerate, + continueMessageAndGenerate, } = useAppContext(); const textarea: ChatTextareaApi = useChatTextarea(prefilledMsg.content()); @@ -187,6 +188,20 @@ export default function ChatScreen() { scrollToBottom(false); }; + const handleContinueMessage = async (msg: Message, content: string) => { + if (!viewingChat || !continueMessageAndGenerate) return; + setCurrNodeId(msg.id); + scrollToBottom(false); + await continueMessageAndGenerate( + viewingChat.conv.id, + msg.id, + content, + onChunk + ); + setCurrNodeId(-1); + scrollToBottom(false); + }; + const hasCanvas = !!canvasData; useEffect(() => { @@ -204,7 +219,7 @@ export default function ChatScreen() { // due to some timing issues of StorageUtils.appendMsg(), we need to make sure the pendingMsg is not duplicated upon rendering (i.e. appears once in the saved conversation and once in the pendingMsg) const pendingMsgDisplay: MessageDisplay[] = - pendingMsg && messages.at(-1)?.msg.id !== pendingMsg.id + pendingMsg && !messages.some((m) => m.msg.id === pendingMsg.id) // Only show if pendingMsg is not an existing message being continued ? [ { msg: pendingMsg, @@ -236,17 +251,35 @@ export default function ChatScreen() { {/* placeholder to shift the message to the bottom */} {viewingChat ? '' : 'Send a message to start'} </div> - {[...messages, ...pendingMsgDisplay].map((msg) => ( - <ChatMessage - key={msg.msg.id} - msg={msg.msg} - siblingLeafNodeIds={msg.siblingLeafNodeIds} - siblingCurrIdx={msg.siblingCurrIdx} - onRegenerateMessage={handleRegenerateMessage} - onEditMessage={handleEditMessage} - onChangeSibling={setCurrNodeId} - /> - ))} + {[...messages, ...pendingMsgDisplay].map((msgDisplay) => { + const actualMsgObject = msgDisplay.msg; + // Check if the current message from the list is the one actively being generated/continued + const isThisMessageTheActivePendingOne = + pendingMsg?.id === actualMsgObject.id; + + return ( + <ChatMessage + key={actualMsgObject.id} + // If this message is the active pending one, use the live object from pendingMsg state (which has streamed content). + // Otherwise, use the version from the messages array (from storage). + msg={ + isThisMessageTheActivePendingOne + ? pendingMsg + : actualMsgObject + } + siblingLeafNodeIds={msgDisplay.siblingLeafNodeIds} + siblingCurrIdx={msgDisplay.siblingCurrIdx} + onRegenerateMessage={handleRegenerateMessage} + onEditMessage={handleEditMessage} + onChangeSibling={setCurrNodeId} + // A message is pending if it's the actively streaming one OR if it came from pendingMsgDisplay (for new messages) + isPending={ + isThisMessageTheActivePendingOne || msgDisplay.isPending + } + onContinueMessage={handleContinueMessage} + /> + ); + })} </div> {/* chat input */} diff --git a/examples/server/webui/src/components/Header.tsx b/examples/server/webui/src/components/Header.tsx index 84fea191..601fb960 100644 --- a/examples/server/webui/src/components/Header.tsx +++ b/examples/server/webui/src/components/Header.tsx @@ -5,6 +5,14 @@ import { classNames } from '../utils/misc'; import daisyuiThemes from 'daisyui/theme/object'; import { THEMES } from '../Config'; import { useNavigate } from 'react-router'; +import toast from 'react-hot-toast'; +import { useModals } from './ModalProvider'; +import { + ArrowUpTrayIcon, + ArrowDownTrayIcon, + PencilIcon, + TrashIcon, +} from '@heroicons/react/24/outline'; export default function Header() { const navigate = useNavigate(); @@ -24,9 +32,11 @@ export default function Header() { ); }, [selectedTheme]); + const {showPrompt } = useModals(); const { isGenerating, viewingChat } = useAppContext(); const isCurrConvGenerating = isGenerating(viewingChat?.conv.id ?? ''); + // remove conversation const removeConversation = () => { if (isCurrConvGenerating || !viewingChat) return; const convId = viewingChat?.conv.id; @@ -35,6 +45,37 @@ export default function Header() { navigate('/'); } }; + + // rename conversation + async function renameConversation() { + if (isGenerating(viewingChat?.conv.id ?? '')) { + toast.error( + 'Cannot rename conversation while generating' + ); + return; + } + const newName = await showPrompt( + 'Enter new name for the conversation', + viewingChat?.conv.name + ); + if (newName && newName.trim().length > 0) { + StorageUtils.updateConversationName(viewingChat?.conv.id ?? '', newName); + } + //const importedConv = await StorageUtils.updateConversationName(); + //if (importedConv) { + //console.log('Successfully imported:', importedConv.name); + // Refresh UI or navigate to conversation + //} + }; + + // at the top of your file, alongside ConversationExport: + async function importConversation() { + const importedConv = await StorageUtils.importConversationFromFile(); + if (importedConv) { + console.log('Successfully imported:', importedConv.name); + // Refresh UI or navigate to conversation + } + }; const downloadConversation = () => { if (isCurrConvGenerating || !viewingChat) return; @@ -99,12 +140,45 @@ export default function Header() { tabIndex={0} className="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow" > - <li onClick={downloadConversation}> - <a>Download</a> - </li> - <li className="text-error" onClick={removeConversation}> - <a>Delete</a> - </li> + {/* Always show Upload when viewingChat is false */} + {!viewingChat && ( + <li onClick={importConversation}> + <a> + <ArrowUpTrayIcon className="w-4 h-4" /> + Upload + </a> + </li> + )} + + {/* Show all three when viewingChat is true */} + {viewingChat && ( + <> + <li onClick={importConversation}> + <a> + <ArrowUpTrayIcon className="w-4 h-4" /> + Upload + </a> + </li> + <li onClick={renameConversation} tabIndex={0}> + <a> + <PencilIcon className="w-4 h-4" /> + Rename + </a> + </li> + <li onClick={downloadConversation}> + <a> + <ArrowDownTrayIcon className="w-4 h-4" /> + Download + </a> + </li> + <li className="text-error" onClick={removeConversation}> + <a> + <TrashIcon className="w-4 h-4" /> + Delete + </a> + </li> + </> + )} </ul> </div> )} diff --git a/examples/server/webui/src/components/ModalProvider.tsx b/examples/server/webui/src/components/ModalProvider.tsx new file mode 100644 index 00000000..f2ebf8e0 --- /dev/null +++ b/examples/server/webui/src/components/ModalProvider.tsx @@ -0,0 +1,151 @@ +import React, { createContext, useState, useContext } from 'react'; + +type ModalContextType = { + showConfirm: (message: string) => Promise<boolean>; + showPrompt: ( + message: string, + defaultValue?: string + ) => Promise<string | undefined>; + showAlert: (message: string) => Promise<void>; +}; +const ModalContext = createContext<ModalContextType>(null!); + +interface ModalState<T> { + isOpen: boolean; + message: string; + defaultValue?: string; + resolve: ((value: T) => void) | null; +} + +export function ModalProvider({ children }: { children: React.ReactNode }) { + const [confirmState, setConfirmState] = useState<ModalState<boolean>>({ + isOpen: false, + message: '', + resolve: null, + }); + const [promptState, setPromptState] = useState< + ModalState<string | undefined> + >({ isOpen: false, message: '', resolve: null }); + const [alertState, setAlertState] = useState<ModalState<void>>({ + isOpen: false, + message: '', + resolve: null, + }); + const inputRef = React.useRef<HTMLInputElement>(null); + + const showConfirm = (message: string): Promise<boolean> => { + return new Promise((resolve) => { + setConfirmState({ isOpen: true, message, resolve }); + }); + }; + + const showPrompt = ( + message: string, + defaultValue?: string + ): Promise<string | undefined> => { + return new Promise((resolve) => { + setPromptState({ isOpen: true, message, defaultValue, resolve }); + }); + }; + + const showAlert = (message: string): Promise<void> => { + return new Promise((resolve) => { + setAlertState({ isOpen: true, message, resolve }); + }); + }; + + const handleConfirm = (result: boolean) => { + confirmState.resolve?.(result); + setConfirmState({ isOpen: false, message: '', resolve: null }); + }; + + const handlePrompt = (result?: string) => { + promptState.resolve?.(result); + setPromptState({ isOpen: false, message: '', resolve: null }); + }; + + const handleAlertClose = () => { + alertState.resolve?.(); + setAlertState({ isOpen: false, message: '', resolve: null }); + }; + + return ( + <ModalContext.Provider value={{ showConfirm, showPrompt, showAlert }}> + {children} + + {/* Confirm Modal */} + {confirmState.isOpen && ( + <dialog className="modal modal-open z-[1100]"> + <div className="modal-box"> + <h3 className="font-bold text-lg">{confirmState.message}</h3> + <div className="modal-action"> + <button + className="btn btn-ghost" + onClick={() => handleConfirm(false)} + > + Cancel + </button> + <button + className="btn btn-error" + onClick={() => handleConfirm(true)} + > + Confirm + </button> + </div> + </div> + </dialog> + )} + + {/* Prompt Modal */} + {promptState.isOpen && ( + <dialog className="modal modal-open z-[1100]"> + <div className="modal-box"> + <h3 className="font-bold text-lg">{promptState.message}</h3> + <input + type="text" + className="input input-bordered w-full mt-2" + defaultValue={promptState.defaultValue} + ref={inputRef} + onKeyDown={(e) => { + if (e.key === 'Enter') { + handlePrompt((e.target as HTMLInputElement).value); + } + }} + /> + <div className="modal-action"> + <button className="btn btn-ghost" onClick={() => handlePrompt()}> + Cancel + </button> + <button + className="btn btn-primary" + onClick={() => handlePrompt(inputRef.current?.value)} + > + Submit + </button> + </div> + </div> + </dialog> + )} + + {/* Alert Modal */} + {alertState.isOpen && ( + <dialog className="modal modal-open z-[1100]"> + <div className="modal-box"> + <h3 className="font-bold text-lg">{alertState.message}</h3> + <div className="modal-action"> + <button className="btn" onClick={handleAlertClose}> + OK + </button> + </div> + </div> + </dialog> + )} + </ModalContext.Provider> + ); +} + +export function useModals() { + const context = useContext(ModalContext); + if (!context) throw new Error('useModals must be used within ModalProvider'); + return context; +} diff --git a/examples/server/webui/src/components/SettingDialog.tsx b/examples/server/webui/src/components/SettingDialog.tsx index cd091a55..004b51ab 100644 --- a/examples/server/webui/src/components/SettingDialog.tsx +++ b/examples/server/webui/src/components/SettingDialog.tsx @@ -3,16 +3,21 @@ import { useAppContext } from '../utils/app.context'; import { CONFIG_DEFAULT, CONFIG_INFO } from '../Config'; import { isDev } from '../Config'; import StorageUtils from '../utils/storage'; +import { useModals } from './ModalProvider'; import { classNames, isBoolean, isNumeric, isString } from '../utils/misc'; import { BeakerIcon, + BookmarkIcon, ChatBubbleOvalLeftEllipsisIcon, Cog6ToothIcon, FunnelIcon, HandRaisedIcon, SquaresPlusIcon, + TrashIcon, } from '@heroicons/react/24/outline'; import { OpenInNewTab } from '../utils/common'; +import { SettingsPreset } from '../utils/types'; +import toast from 'react-hot-toast' type SettKey = keyof typeof CONFIG_DEFAULT; @@ -74,7 +79,155 @@ interface SettingSection { const ICON_CLASSNAME = 'w-4 h-4 mr-1 inline'; -const SETTING_SECTIONS: SettingSection[] = [ +// Presets Component +function PresetsManager({ + currentConfig, + onLoadPreset, +}: { + currentConfig: typeof CONFIG_DEFAULT; + onLoadPreset: (config: typeof CONFIG_DEFAULT) => void; +}) { + const [presets, setPresets] = useState<SettingsPreset[]>(() => + StorageUtils.getPresets() + ); + const [presetName, setPresetName] = useState(''); + const [selectedPresetId, setSelectedPresetId] = useState<string | null>(null); + const { showConfirm, showAlert } = useModals(); + + const handleSavePreset = async () => { + if (!presetName.trim()) { + await showAlert('Please enter a preset name'); + return; + } + + // Check if preset name already exists + const existingPreset = presets.find((p) => p.name === presetName.trim()); + if (existingPreset) { + if ( + await showConfirm( + `Preset "${presetName}" already exists. Do you want to overwrite it?` + ) + ) { + StorageUtils.updatePreset(existingPreset.id, currentConfig); + setPresets(StorageUtils.getPresets()); + setPresetName(''); + await showAlert('Preset updated successfully'); + } + } else { + const newPreset = StorageUtils.savePreset( + presetName.trim(), + currentConfig + ); + setPresets([...presets, newPreset]); + setPresetName(''); + await showAlert('Preset saved successfully'); + } + }; + + const handleLoadPreset = async (preset: SettingsPreset) => { + if ( + await showConfirm( + `Load preset "${preset.name}"? Current settings will be replaced.` + ) + ) { + onLoadPreset(preset.config as typeof CONFIG_DEFAULT); + setSelectedPresetId(preset.id); + } + }; + + const handleDeletePreset = async (preset: SettingsPreset) => { + if (await showConfirm(`Delete preset "${preset.name}"?`)) { + StorageUtils.deletePreset(preset.id); + setPresets(presets.filter((p) => p.id !== preset.id)); + if (selectedPresetId === preset.id) { + setSelectedPresetId(null); + } + } + }; + + return ( + <div className="space-y-4"> + {/* Save current settings as preset */} + <div className="form-control"> + <label className="label"> + <span className="label-text">Save current settings as preset</span> + </label> + <div className="join"> + <input + type="text" + placeholder="Enter preset name" + className="input input-bordered join-item flex-1" + value={presetName} + onChange={(e) => setPresetName(e.target.value)} + onKeyPress={(e) => { + if (e.key === 'Enter') { + handleSavePreset(); + } + }} + /> + <button + className="btn btn-primary join-item" + onClick={handleSavePreset} + > + Save Preset + </button> + </div> + </div> + + {/* List of saved presets */} + <div className="form-control"> + <label className="label"> + <span className="label-text">Saved presets</span> + </label> + {presets.length === 0 ? ( + <div className="alert"> + <span>No presets saved yet</span> + </div> + ) : ( + <div className="space-y-2 max-h-64 overflow-y-auto"> + {presets.map((preset) => ( + <div + key={preset.id} + className={classNames({ + 'card bg-base-200 p-3': true, + 'ring-2 ring-primary': selectedPresetId === preset.id, + })} + > + <div className="flex items-center justify-between"> + <div> + <h4 className="font-semibold">{preset.name}</h4> + <p className="text-sm opacity-70"> + Created: {new Date(preset.createdAt).toLocaleString()} + </p> + </div> + <div className="flex gap-2"> + <button + className="btn btn-sm btn-primary" + onClick={() => handleLoadPreset(preset)} + > + Load + </button> + <button + className="btn btn-sm btn-error" + onClick={() => handleDeletePreset(preset)} + > + <TrashIcon className="w-4 h-4" /> + </button> + </div> + </div> + </div> + ))} + </div> + )} + </div> + </div> + ); +} + +const SETTING_SECTIONS = ( + localConfig: typeof CONFIG_DEFAULT, + setLocalConfig: (config: typeof CONFIG_DEFAULT) => void +): SettingSection[] => [ { title: ( <> @@ -188,6 +341,85 @@ const SETTING_SECTIONS: SettingSection[] = [ }, }, { + type: SettingInputType.CUSTOM, + key: 'custom', // dummy key, won't be used + component: () => { + const exportDB = async () => { + const blob = await StorageUtils.exportDB(); + const a = document.createElement('a'); + document.body.appendChild(a); + a.href = URL.createObjectURL(blob); + document.body.appendChild(a); + a.download = `llamawebui_dump.json`; + a.click(); + document.body.removeChild(a); + }; + return ( + <button className="btn" onClick={exportDB}> + Export conversation database + </button> + ); + }, + }, + { + type: SettingInputType.CUSTOM, + key: 'custom', // dummy key, won't be used + component: () => { + const importDB = async (e: React.ChangeEvent<HTMLInputElement>) => { + console.log(e); + if (!e.target.files) { + toast.error('Target.files cant be null'); + throw new Error('e.target.files cant be null'); + } + if (e.target.files.length != 1) + { + toast.error( + 'Number of selected files for DB import must be 1 but was ' + + e.target.files.length + + '.'); + throw new Error( + 'Number of selected files for DB import must be 1 but was ' + + e.target.files.length + + '.' + ); + } + const file = e.target.files[0]; + try { + if (!file) throw new Error('No DB found to import.'); + console.log('Importing DB ' + file.name); + await StorageUtils.importDB(file); + toast.success('Import complete') + window.location.reload(); + } catch (error) { + console.error('' + error); + toast.error('' + error); + } + }; + return ( + <div> + <label + htmlFor="db-import" + className="btn" + role="button" + tabIndex={0} + > + {' '} + Reset and import conversation database{' '} + </label> + <input + id="db-import" + type="file" + accept=".json" + className="file-upload" + onInput={importDB} + hidden + /> + </div> + ); + }, + }, + + { type: SettingInputType.CHECKBOX, label: 'Show tokens per second', key: 'showTokensPerSecond', @@ -257,6 +489,26 @@ const SETTING_SECTIONS: SettingSection[] = [ }, ], }, + { + title: ( + <> + <BookmarkIcon className={ICON_CLASSNAME} /> + Presets + </> + ), + fields: [ + { + type: SettingInputType.CUSTOM, + key: 'custom', // dummy key for presets + component: () => ( + <PresetsManager + currentConfig={localConfig} + onLoadPreset={setLocalConfig} + /> + ), + }, + ], + }, ]; export default function SettingDialog({ @@ -274,6 +526,12 @@ export default function SettingDialog({ JSON.parse(JSON.stringify(config)) ); + // Generate sections with access to local state + const SETTING_SECTIONS_GENERATED = SETTING_SECTIONS( + localConfig, + setLocalConfig + ); + const resetConfig = () => { if (window.confirm('Are you sure you want to reset all settings?')) { setLocalConfig(CONFIG_DEFAULT); @@ -332,7 +590,7 @@ export default function SettingDialog({ <div className="flex flex-col md:flex-row h-[calc(90vh-12rem)]"> {/* Left panel, showing sections - Desktop version */} <div className="hidden md:flex flex-col items-stretch pr-4 mr-4 border-r-2 border-base-200"> - {SETTING_SECTIONS.map((section, idx) => ( + {SETTING_SECTIONS_GENERATED.map((section, idx) => ( <div key={idx} className={classNames({ @@ -351,10 +609,10 @@ export default function SettingDialog({ <div className="md:hidden flex flex-row gap-2 mb-4"> <details className="dropdown"> <summary className="btn bt-sm w-full m-1"> - {SETTING_SECTIONS[sectionIdx].title} + {SETTING_SECTIONS_GENERATED[sectionIdx].title} </summary> <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow"> - {SETTING_SECTIONS.map((section, idx) => ( + {SETTING_SECTIONS_GENERATED.map((section, idx) => ( <div key={idx} className={classNames({ @@ -373,7 +631,7 @@ export default function SettingDialog({ {/* Right panel, showing setting fields */} <div className="grow overflow-y-auto px-4"> - {SETTING_SECTIONS[sectionIdx].fields.map((field, idx) => { + {SETTING_SECTIONS_GENERATED[sectionIdx].fields.map((field, idx) => { const key = `${sectionIdx}-${idx}`; if (field.type === SettingInputType.SHORT_INPUT) { return ( diff --git a/examples/server/webui/src/components/Sidebar.tsx b/examples/server/webui/src/components/Sidebar.tsx index 34727c62..4b0adbae 100644 --- a/examples/server/webui/src/components/Sidebar.tsx +++ b/examples/server/webui/src/components/Sidebar.tsx @@ -1,13 +1,36 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { classNames } from '../utils/misc'; import { Conversation } from '../utils/types'; import StorageUtils from '../utils/storage'; import { useNavigate, useParams } from 'react-router'; +import { + ArrowUpTrayIcon, + ArrowDownTrayIcon, + EllipsisVerticalIcon, + PencilIcon, + PencilSquareIcon, + TrashIcon, + XMarkIcon, +} from '@heroicons/react/24/outline'; +import { BtnWithTooltips } from '../utils/common'; +import { useAppContext } from '../utils/app.context'; +import toast from 'react-hot-toast'; +import { useModals } from './ModalProvider'; + // at the top of your file, alongside ConversationExport: + async function importConversation() { + const importedConv = await StorageUtils.importConversationFromFile(); + if (importedConv) { + console.log('Successfully imported:', importedConv.name); + // Refresh UI or navigate to conversation + } + }; export default function Sidebar() { const params = useParams(); const navigate = useNavigate(); + const { isGenerating, viewingChat } = useAppContext(); + const [conversations, setConversations] = useState<Conversation[]>([]); const [currConv, setCurrConv] = useState<Conversation | null>(null); @@ -25,68 +48,176 @@ export default function Sidebar() { StorageUtils.offConversationChanged(handleConversationChange); }; }, []); + const { showConfirm, showPrompt } = useModals(); + + const groupedConv = useMemo( + () => groupConversationsByDate(conversations), + [conversations] + ); + + return ( <> <input id="toggle-drawer" type="checkbox" className="drawer-toggle" + aria-label="Toggle sidebar" defaultChecked /> - <div className="drawer-side h-screen lg:h-screen z-50 lg:max-w-64"> + <div + className="drawer-side h-screen lg:h-screen z-50 lg:max-w-64" + role="complementary" + aria-label="Sidebar" + tabIndex={0} + > <label htmlFor="toggle-drawer" - aria-label="close sidebar" + aria-label="Close sidebar" className="drawer-overlay" ></label> + + <a + href="#main-scroll" + className="absolute -left-80 top-0 w-1 h-1 overflow-hidden" + > + Skip to main content + </a> + <div className="flex flex-col bg-base-200 min-h-full max-w-64 py-4 px-4"> <div className="flex flex-row items-center justify-between mb-4 mt-4"> - <h2 className="font-bold ml-4">Conversations</h2> + <h2 className="font-bold ml-4" role="heading"> + Conversations + </h2> {/* close sidebar button */} - <label htmlFor="toggle-drawer" className="btn btn-ghost lg:hidden"> - <svg - xmlns="http://www.w3.org/2000/svg" - width="16" - height="16" - fill="currentColor" - className="bi bi-arrow-bar-left" - viewBox="0 0 16 16" - > - <path - fillRule="evenodd" - d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5M10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5" - /> - </svg> + <label + htmlFor="toggle-drawer" + className="btn btn-ghost lg:hidden" + aria-label="Close sidebar" + role="button" + tabIndex={0} + > + <XMarkIcon className="w-5 h-5" /> </label> </div> - {/* list of conversations */} - <div + {/* new conversation button */} + <button className={classNames({ - 'btn btn-ghost justify-start': true, - 'btn-active': !currConv, + 'btn btn-ghost justify-start px-2': true, + 'btn-soft': !currConv, })} onClick={() => navigate('/')} + aria-label="New conversation" > - + New conversation - </div> - {conversations.map((conv) => ( - <div - key={conv.id} - className={classNames({ - 'btn btn-ghost justify-start font-normal': true, - 'btn-active': conv.id === currConv?.id, - })} - onClick={() => navigate(`/chat/${conv.id}`)} - dir="auto" - > - <span className="truncate">{conv.name}</span> + <PencilSquareIcon className="w-5 h-5" /> + New conversation + </button> + + {/* list of conversations */} + {groupedConv.map((group, i) => ( + <div key={i} role="group"> + {/* group name (by date) */} + {group.title ? ( + // we use btn class here to make sure that the padding/margin are aligned with the other items + <b + className="btn btn-ghost btn-xs bg-none btn-disabled block text-xs text-base-content text-start px-2 mb-0 mt-6 font-bold" + role="note" + aria-description={group.title} + tabIndex={0} + > + {group.title} + </b> + ) : ( + <div className="h-2" /> + )} + + {group.conversations.map((conv) => ( + <ConversationItem + key={conv.id} + conv={conv} + isCurrConv={currConv?.id === conv.id} + onSelect={() => { + navigate(`/chat/${conv.id}`); + }} + onDelete={async () => { + if (isGenerating(conv.id)) { + toast.error( + 'Cannot delete conversation while generating' + ); + return; + } + if ( + await showConfirm( + 'Are you sure to delete this conversation?' + ) + ) { + toast.success('Conversation deleted'); + StorageUtils.remove(conv.id); + navigate('/'); + } + }} + + onDownload={() => { + if (isGenerating(conv.id)) { + toast.error( + 'Cannot download conversation while generating' + ); + return; + } + // Get the current system message from config + const systemMessage = StorageUtils.getConfig().systemMessage; + + // Clone the viewingChat object to avoid modifying the original + const exportData = { + conv: { ...viewingChat?.conv }, + messages: viewingChat?.messages.map(msg => ({ ...msg })) + }; + + // Find the root message and update its content + const rootMessage = exportData.messages?.find(m => m.type === 'root'); + if (rootMessage) { + rootMessage.content = systemMessage; + } + + + const conversationJson = JSON.stringify(exportData, null, 2); + // const conversationJson = JSON.stringify(conv, null, 2); + const blob = new Blob([conversationJson], { + type: 'application/json', + }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `conversation_${conv.id}.json`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + }} + onRename={async () => { + if (isGenerating(conv.id)) { + toast.error( + 'Cannot rename conversation while generating' + ); + return; + } + const newName = await showPrompt( + 'Enter new name for the conversation', + conv.name + ); + if (newName && newName.trim().length > 0) { + StorageUtils.updateConversationName(conv.id, newName); + } + }} + /> + ))} </div> ))} - <div className="text-center text-xs opacity-40 mt-auto mx-4"> + <div className="text-center text-xs opacity-40 mt-auto mx-4 pt-8"> Conversations are saved to browser's IndexedDB </div> </div> @@ -94,3 +225,182 @@ export default function Sidebar() { </> ); } + +function ConversationItem({ + conv, + isCurrConv, + onSelect, + onDelete, + onDownload, + onRename, +}: { + conv: Conversation; + isCurrConv: boolean; + onSelect: () => void; + onDelete: () => void; + onDownload: () => void; + onRename: () => void; +}) { + return ( + <div + role="menuitem" + tabIndex={0} + aria-label={conv.name} + className={classNames({ + 'group flex flex-row btn btn-ghost justify-start items-center font-normal px-2 h-9': + true, + 'btn-soft': isCurrConv, + })} + > + <button + key={conv.id} + className="w-full overflow-hidden truncate text-start" + onClick={onSelect} + dir="auto" + > + {conv.name} + </button> + <div className="dropdown dropdown-end h-5"> + <BtnWithTooltips + // on mobile, we always show the ellipsis icon + // on desktop, we only show it when the user hovers over the conversation item + // we use opacity instead of hidden to avoid layout shift + className="cursor-pointer opacity-100 md:opacity-0 group-hover:opacity-100" + onClick={() => {}} + tooltipsContent="More" + > + <EllipsisVerticalIcon className="w-5 h-5" /> + </BtnWithTooltips> + {/* dropdown menu */} + <ul + aria-label="More options" + tabIndex={0} + className="dropdown-content menu bg-base-100 rounded-box z-[1] p-2 shadow" + > + {/* Always show Upload when viewingChat is false */} + + <li onClick={importConversation}> + <a> + <ArrowUpTrayIcon className="w-4 h-4" /> + Upload + </a> + </li> + <li onClick={onRename} tabIndex={0}> + <a> + <PencilIcon className="w-4 h-4" /> + Rename + </a> + </li> + <li onClick={onDownload} tabIndex={0}> + <a> + <ArrowDownTrayIcon className="w-4 h-4" /> + Download + </a> + </li> + <li className="text-error" onClick={onDelete} tabIndex={0}> + <a> + <TrashIcon className="w-4 h-4" /> + Delete + </a> + </li> + </ul> + </div> + </div> + ); +} + +// WARN: vibe code below + +export interface GroupedConversations { + title?: string; + conversations: Conversation[]; +} + +// TODO @ngxson : add test for this function +// Group conversations by date +// - "Previous 7 Days" +// - "Previous 30 Days" +// - "Month Year" (e.g., "April 2023") +export function groupConversationsByDate( + conversations: Conversation[] +): GroupedConversations[] { + const now = new Date(); + const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // Start of today + + const sevenDaysAgo = new Date(today); + sevenDaysAgo.setDate(today.getDate() - 7); + + const thirtyDaysAgo = new Date(today); + thirtyDaysAgo.setDate(today.getDate() - 30); + + const groups: { [key: string]: Conversation[] } = { + Today: [], + 'Previous 7 Days': [], + 'Previous 30 Days': [], + }; + const monthlyGroups: { [key: string]: Conversation[] } = {}; // Key format: "Month Year" e.g., "April 2023" + + // Sort conversations by lastModified date in descending order (newest first) + // This helps when adding to groups, but the final output order of groups is fixed. + const sortedConversations = [...conversations].sort( + (a, b) => b.lastModified - a.lastModified + ); + + for (const conv of sortedConversations) { + const convDate = new Date(conv.lastModified); + + if (convDate >= today) { + groups['Today'].push(conv); + } else if (convDate >= sevenDaysAgo) { + groups['Previous 7 Days'].push(conv); + } else if (convDate >= thirtyDaysAgo) { + groups['Previous 30 Days'].push(conv); + } else { + const monthName = convDate.toLocaleString('default', { month: 'long' }); + const year = convDate.getFullYear(); + const monthYearKey = `${monthName} ${year}`; + if (!monthlyGroups[monthYearKey]) { + monthlyGroups[monthYearKey] = []; + } + monthlyGroups[monthYearKey].push(conv); + } + } + + const result: GroupedConversations[] = []; + + if (groups['Today'].length > 0) { + result.push({ + title: undefined, // no title for Today + conversations: groups['Today'], + }); + } + + if (groups['Previous 7 Days'].length > 0) { + result.push({ + title: 'Previous 7 Days', + conversations: groups['Previous 7 Days'], + }); + } + + if (groups['Previous 30 Days'].length > 0) { + result.push({ + title: 'Previous 30 Days', + conversations: groups['Previous 30 Days'], + }); + } + + // Sort monthly groups by date (most recent month first) + const sortedMonthKeys = Object.keys(monthlyGroups).sort((a, b) => { + const dateA = new Date(a); // "Month Year" can be parsed by Date constructor + const dateB = new Date(b); + return dateB.getTime() - dateA.getTime(); + }); + + for (const monthKey of sortedMonthKeys) { + if (monthlyGroups[monthKey].length > 0) { + result.push({ title: monthKey, conversations: monthlyGroups[monthKey] }); + } + } + + return result; +} |