MAJOR REFACTOR (#494)
* move index to home folder, create state and context files and barrell folder * Sanity Check Commit: reducer added to home.tsx manual QA all working * WIP: promptBar * fix missing json parse on folders and prompts * split context and add promptbar context * add context to nested prompt componets and componetize Folder componet * remove log * Create buttons folder and componetize sidebar action button * tidy up prompt handlers * componetized sidebar * added back chatbar componet to left side sidebar * monster commit: Componetized the common code between chatbar and promptbar into new componet Sidebar and added context to both bars * add useFetch service * added prettier import sort to keep imports ordered and easier to indentify * added react query and useFetch to work with RQ * added apiService, errorService and reactQuery * add callback and tidy up error service * refactor chat and child componets to useContext * fix extra calls and bad calls to mel endpoint * minor import cleanup --------- Co-authored-by: jc.durbin <jc.durbin@ardanis.com>
This commit is contained in:
Mckay Wrigley
GitHub
@@ -0,0 +1,25 @@
|
||||
import { Dispatch, createContext } from 'react';
|
||||
|
||||
import { ActionType } from '@/hooks/useCreateReducer';
|
||||
|
||||
import { Conversation } from '@/types/chat';
|
||||
import { SupportedExportFormats } from '@/types/export';
|
||||
import { PluginKey } from '@/types/plugin';
|
||||
|
||||
import { ChatbarInitialState } from './Chatbar.state';
|
||||
|
||||
export interface ChatbarContextProps {
|
||||
state: ChatbarInitialState;
|
||||
dispatch: Dispatch<ActionType<ChatbarInitialState>>;
|
||||
handleDeleteConversation: (conversation: Conversation) => void;
|
||||
handleClearConversations: () => void;
|
||||
handleExportData: () => void;
|
||||
handleImportConversations: (data: SupportedExportFormats) => void;
|
||||
handlePluginKeyChange: (pluginKey: PluginKey) => void;
|
||||
handleClearPluginKey: (pluginKey: PluginKey) => void;
|
||||
handleApiKeyChange: (apiKey: string) => void;
|
||||
}
|
||||
|
||||
const ChatbarContext = createContext<ChatbarContextProps>(undefined!);
|
||||
|
||||
export default ChatbarContext;
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Conversation } from '@/types/chat';
|
||||
|
||||
export interface ChatbarInitialState {
|
||||
searchTerm: string;
|
||||
filteredConversations: Conversation[];
|
||||
}
|
||||
|
||||
export const initialState: ChatbarInitialState = {
|
||||
searchTerm: '',
|
||||
filteredConversations: [],
|
||||
};
|
||||
+203
-185
@@ -1,219 +1,237 @@
|
||||
import { Conversation } from '@/types/chat';
|
||||
import { KeyValuePair } from '@/types/data';
|
||||
import { SupportedExportFormats } from '@/types/export';
|
||||
import { Folder } from '@/types/folder';
|
||||
import { PluginKey } from '@/types/plugin';
|
||||
import { IconFolderPlus, IconMessagesOff, IconPlus } from '@tabler/icons-react';
|
||||
import { useCallback, useContext, useEffect } from 'react';
|
||||
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { ChatFolders } from '../Folders/Chat/ChatFolders';
|
||||
import { Search } from '../Sidebar/Search';
|
||||
import { ChatbarSettings } from './ChatbarSettings';
|
||||
import { Conversations } from './Conversations';
|
||||
|
||||
interface Props {
|
||||
loading: boolean;
|
||||
conversations: Conversation[];
|
||||
lightMode: 'light' | 'dark';
|
||||
selectedConversation: Conversation;
|
||||
apiKey: string;
|
||||
serverSideApiKeyIsSet: boolean;
|
||||
pluginKeys: PluginKey[];
|
||||
serverSidePluginKeysSet: boolean;
|
||||
folders: Folder[];
|
||||
onCreateFolder: (name: string) => void;
|
||||
onDeleteFolder: (folderId: string) => void;
|
||||
onUpdateFolder: (folderId: string, name: string) => void;
|
||||
onNewConversation: () => void;
|
||||
onToggleLightMode: (mode: 'light' | 'dark') => void;
|
||||
onSelectConversation: (conversation: Conversation) => void;
|
||||
onDeleteConversation: (conversation: Conversation) => void;
|
||||
onUpdateConversation: (
|
||||
conversation: Conversation,
|
||||
data: KeyValuePair,
|
||||
) => void;
|
||||
onApiKeyChange: (apiKey: string) => void;
|
||||
onClearConversations: () => void;
|
||||
onExportConversations: () => void;
|
||||
onImportConversations: (data: SupportedExportFormats) => void;
|
||||
onPluginKeyChange: (pluginKey: PluginKey) => void;
|
||||
onClearPluginKey: (pluginKey: PluginKey) => void;
|
||||
}
|
||||
import { useCreateReducer } from '@/hooks/useCreateReducer';
|
||||
|
||||
export const Chatbar: FC<Props> = ({
|
||||
loading,
|
||||
conversations,
|
||||
lightMode,
|
||||
selectedConversation,
|
||||
apiKey,
|
||||
serverSideApiKeyIsSet,
|
||||
pluginKeys,
|
||||
serverSidePluginKeysSet,
|
||||
folders,
|
||||
onCreateFolder,
|
||||
onDeleteFolder,
|
||||
onUpdateFolder,
|
||||
onNewConversation,
|
||||
onToggleLightMode,
|
||||
onSelectConversation,
|
||||
onDeleteConversation,
|
||||
onUpdateConversation,
|
||||
onApiKeyChange,
|
||||
onClearConversations,
|
||||
onExportConversations,
|
||||
onImportConversations,
|
||||
onPluginKeyChange,
|
||||
onClearPluginKey,
|
||||
}) => {
|
||||
import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
|
||||
import { saveConversation, saveConversations } from '@/utils/app/conversation';
|
||||
import { saveFolders } from '@/utils/app/folders';
|
||||
import { exportData, importData } from '@/utils/app/importExport';
|
||||
|
||||
import { Conversation } from '@/types/chat';
|
||||
import { LatestExportFormat, SupportedExportFormats } from '@/types/export';
|
||||
import { OpenAIModels } from '@/types/openai';
|
||||
import { PluginKey } from '@/types/plugin';
|
||||
|
||||
import HomeContext from '@/pages/api/home/home.context';
|
||||
|
||||
import { ChatFolders } from './components/ChatFolders';
|
||||
import { ChatbarSettings } from './components/ChatbarSettings';
|
||||
import { Conversations } from './components/Conversations';
|
||||
|
||||
import Sidebar from '../Sidebar';
|
||||
import ChatbarContext from './Chatbar.context';
|
||||
import { ChatbarInitialState, initialState } from './Chatbar.state';
|
||||
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
export const Chatbar = () => {
|
||||
const { t } = useTranslation('sidebar');
|
||||
const [searchTerm, setSearchTerm] = useState<string>('');
|
||||
const [filteredConversations, setFilteredConversations] =
|
||||
useState<Conversation[]>(conversations);
|
||||
|
||||
const handleUpdateConversation = (
|
||||
conversation: Conversation,
|
||||
data: KeyValuePair,
|
||||
) => {
|
||||
onUpdateConversation(conversation, data);
|
||||
setSearchTerm('');
|
||||
const chatBarContextValue = useCreateReducer<ChatbarInitialState>({
|
||||
initialState,
|
||||
});
|
||||
|
||||
const {
|
||||
state: { conversations, showChatbar, defaultModelId, folders, pluginKeys },
|
||||
dispatch: homeDispatch,
|
||||
handleCreateFolder,
|
||||
handleNewConversation,
|
||||
handleUpdateConversation,
|
||||
} = useContext(HomeContext);
|
||||
|
||||
const {
|
||||
state: { searchTerm, filteredConversations },
|
||||
dispatch: chatDispatch,
|
||||
} = chatBarContextValue;
|
||||
|
||||
const handleApiKeyChange = useCallback(
|
||||
(apiKey: string) => {
|
||||
homeDispatch({ field: 'apiKey', value: apiKey });
|
||||
|
||||
localStorage.setItem('apiKey', apiKey);
|
||||
},
|
||||
[homeDispatch],
|
||||
);
|
||||
|
||||
const handlePluginKeyChange = (pluginKey: PluginKey) => {
|
||||
if (pluginKeys.some((key) => key.pluginId === pluginKey.pluginId)) {
|
||||
const updatedPluginKeys = pluginKeys.map((key) => {
|
||||
if (key.pluginId === pluginKey.pluginId) {
|
||||
return pluginKey;
|
||||
}
|
||||
|
||||
return key;
|
||||
});
|
||||
|
||||
homeDispatch({ field: 'pluginKeys', value: updatedPluginKeys });
|
||||
|
||||
localStorage.setItem('pluginKeys', JSON.stringify(updatedPluginKeys));
|
||||
} else {
|
||||
homeDispatch({ field: 'pluginKeys', value: [...pluginKeys, pluginKey] });
|
||||
|
||||
localStorage.setItem(
|
||||
'pluginKeys',
|
||||
JSON.stringify([...pluginKeys, pluginKey]),
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearPluginKey = (pluginKey: PluginKey) => {
|
||||
const updatedPluginKeys = pluginKeys.filter(
|
||||
(key) => key.pluginId !== pluginKey.pluginId,
|
||||
);
|
||||
|
||||
if (updatedPluginKeys.length === 0) {
|
||||
homeDispatch({ field: 'pluginKeys', value: [] });
|
||||
localStorage.removeItem('pluginKeys');
|
||||
return;
|
||||
}
|
||||
|
||||
homeDispatch({ field: 'pluginKeys', value: updatedPluginKeys });
|
||||
|
||||
localStorage.setItem('pluginKeys', JSON.stringify(updatedPluginKeys));
|
||||
};
|
||||
|
||||
const handleExportData = () => {
|
||||
exportData();
|
||||
};
|
||||
|
||||
const handleImportConversations = (data: SupportedExportFormats) => {
|
||||
const { history, folders, prompts }: LatestExportFormat = importData(data);
|
||||
homeDispatch({ field: 'conversations', value: history });
|
||||
homeDispatch({
|
||||
field: 'selectedConversation',
|
||||
value: history[history.length - 1],
|
||||
});
|
||||
homeDispatch({ field: 'folders', value: folders });
|
||||
homeDispatch({ field: 'prompts', value: prompts });
|
||||
};
|
||||
|
||||
const handleClearConversations = () => {
|
||||
defaultModelId &&
|
||||
homeDispatch({
|
||||
field: 'selectedConversation',
|
||||
value: {
|
||||
id: uuidv4(),
|
||||
name: 'New conversation',
|
||||
messages: [],
|
||||
model: OpenAIModels[defaultModelId],
|
||||
prompt: DEFAULT_SYSTEM_PROMPT,
|
||||
folderId: null,
|
||||
},
|
||||
});
|
||||
|
||||
homeDispatch({ field: 'conversations', value: [] });
|
||||
|
||||
localStorage.removeItem('conversationHistory');
|
||||
localStorage.removeItem('selectedConversation');
|
||||
|
||||
const updatedFolders = folders.filter((f) => f.type !== 'chat');
|
||||
|
||||
homeDispatch({ field: 'folders', value: updatedFolders });
|
||||
saveFolders(updatedFolders);
|
||||
};
|
||||
|
||||
const handleDeleteConversation = (conversation: Conversation) => {
|
||||
onDeleteConversation(conversation);
|
||||
setSearchTerm('');
|
||||
const updatedConversations = conversations.filter(
|
||||
(c) => c.id !== conversation.id,
|
||||
);
|
||||
|
||||
homeDispatch({ field: 'conversations', value: updatedConversations });
|
||||
chatDispatch({ field: 'searchTerm', value: '' });
|
||||
saveConversations(updatedConversations);
|
||||
|
||||
if (updatedConversations.length > 0) {
|
||||
homeDispatch({
|
||||
field: 'selectedConversation',
|
||||
value: updatedConversations[updatedConversations.length - 1],
|
||||
});
|
||||
|
||||
saveConversation(updatedConversations[updatedConversations.length - 1]);
|
||||
} else {
|
||||
defaultModelId &&
|
||||
homeDispatch({
|
||||
field: 'selectedConversation',
|
||||
value: {
|
||||
id: uuidv4(),
|
||||
name: 'New conversation',
|
||||
messages: [],
|
||||
model: OpenAIModels[defaultModelId],
|
||||
prompt: DEFAULT_SYSTEM_PROMPT,
|
||||
folderId: null,
|
||||
},
|
||||
});
|
||||
|
||||
localStorage.removeItem('selectedConversation');
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleChatbar = () => {
|
||||
homeDispatch({ field: 'showChatbar', value: !showChatbar });
|
||||
localStorage.setItem('showChatbar', JSON.stringify(!showChatbar));
|
||||
};
|
||||
|
||||
const handleDrop = (e: any) => {
|
||||
if (e.dataTransfer) {
|
||||
const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
|
||||
onUpdateConversation(conversation, { key: 'folderId', value: 0 });
|
||||
|
||||
handleUpdateConversation(conversation, { key: 'folderId', value: 0 });
|
||||
chatDispatch({ field: 'searchTerm', value: '' });
|
||||
e.target.style.background = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
const allowDrop = (e: any) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const highlightDrop = (e: any) => {
|
||||
e.target.style.background = '#343541';
|
||||
};
|
||||
|
||||
const removeHighlight = (e: any) => {
|
||||
e.target.style.background = 'none';
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (searchTerm) {
|
||||
setFilteredConversations(
|
||||
conversations.filter((conversation) => {
|
||||
chatDispatch({
|
||||
field: 'filteredConversations',
|
||||
value: conversations.filter((conversation) => {
|
||||
const searchable =
|
||||
conversation.name.toLocaleLowerCase() +
|
||||
' ' +
|
||||
conversation.messages.map((message) => message.content).join(' ');
|
||||
return searchable.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
}),
|
||||
);
|
||||
});
|
||||
} else {
|
||||
setFilteredConversations(conversations);
|
||||
chatDispatch({
|
||||
field: 'filteredConversations',
|
||||
value: conversations,
|
||||
});
|
||||
}
|
||||
}, [searchTerm, conversations]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed top-0 bottom-0 z-50 flex h-full w-[260px] flex-none flex-col space-y-2 bg-[#202123] p-2 transition-all sm:relative sm:top-0`}
|
||||
<ChatbarContext.Provider
|
||||
value={{
|
||||
...chatBarContextValue,
|
||||
handleDeleteConversation,
|
||||
handleClearConversations,
|
||||
handleImportConversations,
|
||||
handleExportData,
|
||||
handlePluginKeyChange,
|
||||
handleClearPluginKey,
|
||||
handleApiKeyChange,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
className="flex w-[190px] flex-shrink-0 cursor-pointer select-none items-center gap-3 rounded-md border border-white/20 p-3 text-[14px] leading-normal text-white transition-colors duration-200 hover:bg-gray-500/10"
|
||||
onClick={() => {
|
||||
onNewConversation();
|
||||
setSearchTerm('');
|
||||
}}
|
||||
>
|
||||
<IconPlus size={18} />
|
||||
{t('New chat')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="ml-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-[14px] leading-normal text-white transition-colors duration-200 hover:bg-gray-500/10"
|
||||
onClick={() => onCreateFolder(t('New folder'))}
|
||||
>
|
||||
<IconFolderPlus size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{conversations.length > 1 && (
|
||||
<Search
|
||||
placeholder="Search conversations..."
|
||||
searchTerm={searchTerm}
|
||||
onSearch={setSearchTerm}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex-grow overflow-auto">
|
||||
{folders.length > 0 && (
|
||||
<div className="flex border-b border-white/20 pb-2">
|
||||
<ChatFolders
|
||||
searchTerm={searchTerm}
|
||||
conversations={filteredConversations.filter(
|
||||
(conversation) => conversation.folderId,
|
||||
)}
|
||||
folders={folders}
|
||||
onDeleteFolder={onDeleteFolder}
|
||||
onUpdateFolder={onUpdateFolder}
|
||||
selectedConversation={selectedConversation}
|
||||
loading={loading}
|
||||
onSelectConversation={onSelectConversation}
|
||||
onDeleteConversation={handleDeleteConversation}
|
||||
onUpdateConversation={handleUpdateConversation}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{conversations.length > 0 ? (
|
||||
<div
|
||||
className="pt-2"
|
||||
onDrop={(e) => handleDrop(e)}
|
||||
onDragOver={allowDrop}
|
||||
onDragEnter={highlightDrop}
|
||||
onDragLeave={removeHighlight}
|
||||
>
|
||||
<Conversations
|
||||
loading={loading}
|
||||
conversations={filteredConversations.filter(
|
||||
(conversation) => !conversation.folderId,
|
||||
)}
|
||||
selectedConversation={selectedConversation}
|
||||
onSelectConversation={onSelectConversation}
|
||||
onDeleteConversation={handleDeleteConversation}
|
||||
onUpdateConversation={handleUpdateConversation}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-8 flex flex-col items-center gap-3 text-sm leading-normal text-white opacity-50">
|
||||
<IconMessagesOff />
|
||||
{t('No conversations.')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ChatbarSettings
|
||||
lightMode={lightMode}
|
||||
apiKey={apiKey}
|
||||
serverSideApiKeyIsSet={serverSideApiKeyIsSet}
|
||||
pluginKeys={pluginKeys}
|
||||
serverSidePluginKeysSet={serverSidePluginKeysSet}
|
||||
conversationsCount={conversations.length}
|
||||
onToggleLightMode={onToggleLightMode}
|
||||
onApiKeyChange={onApiKeyChange}
|
||||
onClearConversations={onClearConversations}
|
||||
onExportConversations={onExportConversations}
|
||||
onImportConversations={onImportConversations}
|
||||
onPluginKeyChange={onPluginKeyChange}
|
||||
onClearPluginKey={onClearPluginKey}
|
||||
<Sidebar<Conversation>
|
||||
side={'left'}
|
||||
isOpen={showChatbar}
|
||||
addItemButtonTitle={t('New chat')}
|
||||
itemComponent={<Conversations conversations={filteredConversations} />}
|
||||
folderComponent={<ChatFolders searchTerm={searchTerm} />}
|
||||
items={filteredConversations}
|
||||
searchTerm={searchTerm}
|
||||
handleSearchTerm={(searchTerm: string) =>
|
||||
chatDispatch({ field: 'searchTerm', value: searchTerm })
|
||||
}
|
||||
toggleOpen={handleToggleChatbar}
|
||||
handleCreateItem={handleNewConversation}
|
||||
handleCreateFolder={() => handleCreateFolder(t('New folder'), 'chat')}
|
||||
handleDrop={handleDrop}
|
||||
footerComponent={<ChatbarSettings />}
|
||||
/>
|
||||
</div>
|
||||
</ChatbarContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
import { SupportedExportFormats } from '@/types/export';
|
||||
import { PluginKey } from '@/types/plugin';
|
||||
import { IconFileExport, IconMoon, IconSun } from '@tabler/icons-react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { FC } from 'react';
|
||||
import { Import } from '../Settings/Import';
|
||||
import { Key } from '../Settings/Key';
|
||||
import { SidebarButton } from '../Sidebar/SidebarButton';
|
||||
import { ClearConversations } from './ClearConversations';
|
||||
import { PluginKeys } from './PluginKeys';
|
||||
|
||||
interface Props {
|
||||
lightMode: 'light' | 'dark';
|
||||
apiKey: string;
|
||||
serverSideApiKeyIsSet: boolean;
|
||||
pluginKeys: PluginKey[];
|
||||
serverSidePluginKeysSet: boolean;
|
||||
conversationsCount: number;
|
||||
onToggleLightMode: (mode: 'light' | 'dark') => void;
|
||||
onApiKeyChange: (apiKey: string) => void;
|
||||
onClearConversations: () => void;
|
||||
onExportConversations: () => void;
|
||||
onImportConversations: (data: SupportedExportFormats) => void;
|
||||
onPluginKeyChange: (pluginKey: PluginKey) => void;
|
||||
onClearPluginKey: (pluginKey: PluginKey) => void;
|
||||
}
|
||||
|
||||
export const ChatbarSettings: FC<Props> = ({
|
||||
lightMode,
|
||||
apiKey,
|
||||
serverSideApiKeyIsSet,
|
||||
pluginKeys,
|
||||
serverSidePluginKeysSet,
|
||||
conversationsCount,
|
||||
onToggleLightMode,
|
||||
onApiKeyChange,
|
||||
onClearConversations,
|
||||
onExportConversations,
|
||||
onImportConversations,
|
||||
onPluginKeyChange,
|
||||
onClearPluginKey,
|
||||
}) => {
|
||||
const { t } = useTranslation('sidebar');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center space-y-1 border-t border-white/20 pt-1 text-sm">
|
||||
{conversationsCount > 0 ? (
|
||||
<ClearConversations onClearConversations={onClearConversations} />
|
||||
) : null}
|
||||
|
||||
<Import onImport={onImportConversations} />
|
||||
|
||||
<SidebarButton
|
||||
text={t('Export data')}
|
||||
icon={<IconFileExport size={18} />}
|
||||
onClick={() => onExportConversations()}
|
||||
/>
|
||||
|
||||
<SidebarButton
|
||||
text={lightMode === 'light' ? t('Dark mode') : t('Light mode')}
|
||||
icon={
|
||||
lightMode === 'light' ? <IconMoon size={18} /> : <IconSun size={18} />
|
||||
}
|
||||
onClick={() =>
|
||||
onToggleLightMode(lightMode === 'light' ? 'dark' : 'light')
|
||||
}
|
||||
/>
|
||||
|
||||
{!(serverSideApiKeyIsSet) ? (
|
||||
<Key apiKey={apiKey} onApiKeyChange={onApiKeyChange} />
|
||||
) : null}
|
||||
|
||||
{!(serverSidePluginKeysSet) ? (
|
||||
<PluginKeys
|
||||
pluginKeys={pluginKeys}
|
||||
onPluginKeyChange={onPluginKeyChange}
|
||||
onClearPluginKey={onClearPluginKey}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,163 +0,0 @@
|
||||
import { Conversation } from '@/types/chat';
|
||||
import { KeyValuePair } from '@/types/data';
|
||||
import {
|
||||
IconCheck,
|
||||
IconMessage,
|
||||
IconPencil,
|
||||
IconTrash,
|
||||
IconX,
|
||||
} from '@tabler/icons-react';
|
||||
import { DragEvent, FC, KeyboardEvent, useEffect, useState } from 'react';
|
||||
|
||||
interface Props {
|
||||
selectedConversation: Conversation;
|
||||
conversation: Conversation;
|
||||
loading: boolean;
|
||||
onSelectConversation: (conversation: Conversation) => void;
|
||||
onDeleteConversation: (conversation: Conversation) => void;
|
||||
onUpdateConversation: (
|
||||
conversation: Conversation,
|
||||
data: KeyValuePair,
|
||||
) => void;
|
||||
}
|
||||
|
||||
export const ConversationComponent: FC<Props> = ({
|
||||
selectedConversation,
|
||||
conversation,
|
||||
loading,
|
||||
onSelectConversation,
|
||||
onDeleteConversation,
|
||||
onUpdateConversation,
|
||||
}) => {
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isRenaming, setIsRenaming] = useState(false);
|
||||
const [renameValue, setRenameValue] = useState('');
|
||||
|
||||
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleRename(selectedConversation);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragStart = (
|
||||
e: DragEvent<HTMLButtonElement>,
|
||||
conversation: Conversation,
|
||||
) => {
|
||||
if (e.dataTransfer) {
|
||||
e.dataTransfer.setData('conversation', JSON.stringify(conversation));
|
||||
}
|
||||
};
|
||||
|
||||
const handleRename = (conversation: Conversation) => {
|
||||
if (renameValue.trim().length > 0) {
|
||||
onUpdateConversation(conversation, { key: 'name', value: renameValue });
|
||||
setRenameValue('');
|
||||
setIsRenaming(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isRenaming) {
|
||||
setIsDeleting(false);
|
||||
} else if (isDeleting) {
|
||||
setIsRenaming(false);
|
||||
}
|
||||
}, [isRenaming, isDeleting]);
|
||||
|
||||
return (
|
||||
<div className="relative flex items-center">
|
||||
{isRenaming && selectedConversation.id === conversation.id ? (
|
||||
<div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3 rounded-lg">
|
||||
<IconMessage size={18} />
|
||||
<input
|
||||
className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"
|
||||
type="text"
|
||||
value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
onKeyDown={handleEnterDown}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90 ${
|
||||
loading ? 'disabled:cursor-not-allowed' : ''
|
||||
} ${
|
||||
selectedConversation.id === conversation.id ? 'bg-[#343541]/90' : ''
|
||||
}`}
|
||||
onClick={() => onSelectConversation(conversation)}
|
||||
disabled={loading}
|
||||
draggable="true"
|
||||
onDragStart={(e) => handleDragStart(e, conversation)}
|
||||
>
|
||||
<IconMessage size={18} />
|
||||
<div
|
||||
className={`relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3 ${
|
||||
selectedConversation.id === conversation.id ? 'pr-12' : 'pr-1'
|
||||
}`}
|
||||
>
|
||||
{conversation.name}
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{(isDeleting || isRenaming) &&
|
||||
selectedConversation.id === conversation.id && (
|
||||
<div className="absolute right-1 z-10 flex text-gray-300">
|
||||
<button
|
||||
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (isDeleting) {
|
||||
onDeleteConversation(conversation);
|
||||
} else if (isRenaming) {
|
||||
handleRename(conversation);
|
||||
}
|
||||
setIsDeleting(false);
|
||||
setIsRenaming(false);
|
||||
}}
|
||||
>
|
||||
<IconCheck size={18} />
|
||||
</button>
|
||||
<button
|
||||
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDeleting(false);
|
||||
setIsRenaming(false);
|
||||
}}
|
||||
>
|
||||
<IconX size={18} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedConversation.id === conversation.id &&
|
||||
!isDeleting &&
|
||||
!isRenaming && (
|
||||
<div className="absolute right-1 z-10 flex text-gray-300">
|
||||
<button
|
||||
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsRenaming(true);
|
||||
setRenameValue(selectedConversation.name);
|
||||
}}
|
||||
>
|
||||
<IconPencil size={18} />
|
||||
</button>
|
||||
<button
|
||||
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDeleting(true);
|
||||
}}
|
||||
>
|
||||
<IconTrash size={18} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,44 +0,0 @@
|
||||
import { Conversation } from '@/types/chat';
|
||||
import { KeyValuePair } from '@/types/data';
|
||||
import { FC } from 'react';
|
||||
import { ConversationComponent } from './Conversation';
|
||||
|
||||
interface Props {
|
||||
loading: boolean;
|
||||
conversations: Conversation[];
|
||||
selectedConversation: Conversation;
|
||||
onSelectConversation: (conversation: Conversation) => void;
|
||||
onDeleteConversation: (conversation: Conversation) => void;
|
||||
onUpdateConversation: (
|
||||
conversation: Conversation,
|
||||
data: KeyValuePair,
|
||||
) => void;
|
||||
}
|
||||
|
||||
export const Conversations: FC<Props> = ({
|
||||
loading,
|
||||
conversations,
|
||||
selectedConversation,
|
||||
onSelectConversation,
|
||||
onDeleteConversation,
|
||||
onUpdateConversation,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-1">
|
||||
{conversations
|
||||
.slice()
|
||||
.reverse()
|
||||
.map((conversation, index) => (
|
||||
<ConversationComponent
|
||||
key={index}
|
||||
selectedConversation={selectedConversation}
|
||||
conversation={conversation}
|
||||
loading={loading}
|
||||
onSelectConversation={onSelectConversation}
|
||||
onDeleteConversation={onDeleteConversation}
|
||||
onUpdateConversation={onUpdateConversation}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useContext } from 'react';
|
||||
|
||||
import { FolderInterface } from '@/types/folder';
|
||||
|
||||
import HomeContext from '@/pages/api/home/home.context';
|
||||
|
||||
import Folder from '@/components/Folder';
|
||||
|
||||
import { ConversationComponent } from './Conversation';
|
||||
|
||||
interface Props {
|
||||
searchTerm: string;
|
||||
}
|
||||
|
||||
export const ChatFolders = ({ searchTerm }: Props) => {
|
||||
const {
|
||||
state: { folders, conversations },
|
||||
handleUpdateConversation,
|
||||
} = useContext(HomeContext);
|
||||
|
||||
const handleDrop = (e: any, folder: FolderInterface) => {
|
||||
if (e.dataTransfer) {
|
||||
const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
|
||||
handleUpdateConversation(conversation, {
|
||||
key: 'folderId',
|
||||
value: folder.id,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const ChatFolders = (currentFolder: FolderInterface) => {
|
||||
return (
|
||||
conversations &&
|
||||
conversations
|
||||
.filter((conversation) => conversation.folderId)
|
||||
.map((conversation, index) => {
|
||||
if (conversation.folderId === currentFolder.id) {
|
||||
return (
|
||||
<div key={index} className="ml-5 gap-2 border-l pl-2">
|
||||
<ConversationComponent conversation={conversation} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col pt-2">
|
||||
{folders
|
||||
.filter((folder) => folder.type === 'chat')
|
||||
.map((folder, index) => (
|
||||
<Folder
|
||||
key={index}
|
||||
searchTerm={searchTerm}
|
||||
currentFolder={folder}
|
||||
handleDrop={handleDrop}
|
||||
folderComponent={ChatFolders(folder)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,71 @@
|
||||
import { IconFileExport, IconMoon, IconSun } from '@tabler/icons-react';
|
||||
import { useContext } from 'react';
|
||||
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
import HomeContext from '@/pages/api/home/home.context';
|
||||
|
||||
import { Import } from '../../Settings/Import';
|
||||
import { Key } from '../../Settings/Key';
|
||||
import { SidebarButton } from '../../Sidebar/SidebarButton';
|
||||
import ChatbarContext from '../Chatbar.context';
|
||||
import { ClearConversations } from './ClearConversations';
|
||||
import { PluginKeys } from './PluginKeys';
|
||||
|
||||
export const ChatbarSettings = () => {
|
||||
const { t } = useTranslation('sidebar');
|
||||
|
||||
const {
|
||||
state: {
|
||||
apiKey,
|
||||
lightMode,
|
||||
serverSideApiKeyIsSet,
|
||||
serverSidePluginKeysSet,
|
||||
conversations,
|
||||
},
|
||||
dispatch: homeDispatch,
|
||||
} = useContext(HomeContext);
|
||||
|
||||
const {
|
||||
handleClearConversations,
|
||||
handleImportConversations,
|
||||
handleExportData,
|
||||
|
||||
handleApiKeyChange,
|
||||
} = useContext(ChatbarContext);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center space-y-1 border-t border-white/20 pt-1 text-sm">
|
||||
{conversations.length > 0 ? (
|
||||
<ClearConversations onClearConversations={handleClearConversations} />
|
||||
) : null}
|
||||
|
||||
<Import onImport={handleImportConversations} />
|
||||
|
||||
<SidebarButton
|
||||
text={t('Export data')}
|
||||
icon={<IconFileExport size={18} />}
|
||||
onClick={() => handleExportData()}
|
||||
/>
|
||||
|
||||
<SidebarButton
|
||||
text={lightMode === 'light' ? t('Dark mode') : t('Light mode')}
|
||||
icon={
|
||||
lightMode === 'light' ? <IconMoon size={18} /> : <IconSun size={18} />
|
||||
}
|
||||
onClick={() =>
|
||||
homeDispatch({
|
||||
field: 'lightMode',
|
||||
value: lightMode === 'light' ? 'dark' : 'light',
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
{!serverSideApiKeyIsSet ? (
|
||||
<Key apiKey={apiKey} onApiKeyChange={handleApiKeyChange} />
|
||||
) : null}
|
||||
|
||||
{!serverSidePluginKeysSet ? <PluginKeys /> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+5
-3
@@ -1,7 +1,9 @@
|
||||
import { IconCheck, IconTrash, IconX } from '@tabler/icons-react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { FC, useState } from 'react';
|
||||
import { SidebarButton } from '../Sidebar/SidebarButton';
|
||||
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
import { SidebarButton } from '@/components/Sidebar/SidebarButton';
|
||||
|
||||
interface Props {
|
||||
onClearConversations: () => void;
|
||||
@@ -27,7 +29,7 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
|
||||
|
||||
<div className="flex w-[40px]">
|
||||
<IconCheck
|
||||
className="ml-auto min-w-[20px] mr-1 text-neutral-400 hover:text-neutral-100"
|
||||
className="ml-auto mr-1 min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
||||
size={18}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -0,0 +1,168 @@
|
||||
import {
|
||||
IconCheck,
|
||||
IconMessage,
|
||||
IconPencil,
|
||||
IconTrash,
|
||||
IconX,
|
||||
} from '@tabler/icons-react';
|
||||
import {
|
||||
DragEvent,
|
||||
KeyboardEvent,
|
||||
MouseEventHandler,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import { Conversation } from '@/types/chat';
|
||||
|
||||
import HomeContext from '@/pages/api/home/home.context';
|
||||
|
||||
import SidebarActionButton from '@/components/Buttons/SidebarActionButton';
|
||||
import ChatbarContext from '@/components/Chatbar/Chatbar.context';
|
||||
|
||||
interface Props {
|
||||
conversation: Conversation;
|
||||
}
|
||||
|
||||
export const ConversationComponent = ({ conversation }: Props) => {
|
||||
const {
|
||||
state: { selectedConversation, messageIsStreaming },
|
||||
handleSelectConversation,
|
||||
handleUpdateConversation,
|
||||
} = useContext(HomeContext);
|
||||
|
||||
const { handleDeleteConversation } = useContext(ChatbarContext);
|
||||
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isRenaming, setIsRenaming] = useState(false);
|
||||
const [renameValue, setRenameValue] = useState('');
|
||||
|
||||
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
selectedConversation && handleRename(selectedConversation);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragStart = (
|
||||
e: DragEvent<HTMLButtonElement>,
|
||||
conversation: Conversation,
|
||||
) => {
|
||||
if (e.dataTransfer) {
|
||||
e.dataTransfer.setData('conversation', JSON.stringify(conversation));
|
||||
}
|
||||
};
|
||||
|
||||
const handleRename = (conversation: Conversation) => {
|
||||
if (renameValue.trim().length > 0) {
|
||||
handleUpdateConversation(conversation, {
|
||||
key: 'name',
|
||||
value: renameValue,
|
||||
});
|
||||
setRenameValue('');
|
||||
setIsRenaming(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirm: MouseEventHandler<HTMLButtonElement> = (e) => {
|
||||
e.stopPropagation();
|
||||
if (isDeleting) {
|
||||
handleDeleteConversation(conversation);
|
||||
} else if (isRenaming) {
|
||||
handleRename(conversation);
|
||||
}
|
||||
setIsDeleting(false);
|
||||
setIsRenaming(false);
|
||||
};
|
||||
|
||||
const handleCancel: MouseEventHandler<HTMLButtonElement> = (e) => {
|
||||
e.stopPropagation();
|
||||
setIsDeleting(false);
|
||||
setIsRenaming(false);
|
||||
};
|
||||
|
||||
const handleOpenRenameModal: MouseEventHandler<HTMLButtonElement> = (e) => {
|
||||
e.stopPropagation();
|
||||
setIsRenaming(true);
|
||||
selectedConversation && setRenameValue(selectedConversation.name);
|
||||
};
|
||||
const handleOpenDeleteModal: MouseEventHandler<HTMLButtonElement> = (e) => {
|
||||
e.stopPropagation();
|
||||
setIsDeleting(true);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isRenaming) {
|
||||
setIsDeleting(false);
|
||||
} else if (isDeleting) {
|
||||
setIsRenaming(false);
|
||||
}
|
||||
}, [isRenaming, isDeleting]);
|
||||
|
||||
return (
|
||||
<div className="relative flex items-center">
|
||||
{isRenaming && selectedConversation?.id === conversation.id ? (
|
||||
<div className="flex w-full items-center gap-3 rounded-lg bg-[#343541]/90 p-3">
|
||||
<IconMessage size={18} />
|
||||
<input
|
||||
className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"
|
||||
type="text"
|
||||
value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
onKeyDown={handleEnterDown}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90 ${
|
||||
messageIsStreaming ? 'disabled:cursor-not-allowed' : ''
|
||||
} ${
|
||||
selectedConversation?.id === conversation.id
|
||||
? 'bg-[#343541]/90'
|
||||
: ''
|
||||
}`}
|
||||
onClick={() => handleSelectConversation(conversation)}
|
||||
disabled={messageIsStreaming}
|
||||
draggable="true"
|
||||
onDragStart={(e) => handleDragStart(e, conversation)}
|
||||
>
|
||||
<IconMessage size={18} />
|
||||
<div
|
||||
className={`relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3 ${
|
||||
selectedConversation?.id === conversation.id ? 'pr-12' : 'pr-1'
|
||||
}`}
|
||||
>
|
||||
{conversation.name}
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{(isDeleting || isRenaming) &&
|
||||
selectedConversation?.id === conversation.id && (
|
||||
<div className="absolute right-1 z-10 flex text-gray-300">
|
||||
<SidebarActionButton handleClick={handleConfirm}>
|
||||
<IconCheck size={18} />
|
||||
</SidebarActionButton>
|
||||
<SidebarActionButton handleClick={handleCancel}>
|
||||
<IconX size={18} />
|
||||
</SidebarActionButton>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedConversation?.id === conversation.id &&
|
||||
!isDeleting &&
|
||||
!isRenaming && (
|
||||
<div className="absolute right-1 z-10 flex text-gray-300">
|
||||
<SidebarActionButton handleClick={handleOpenRenameModal}>
|
||||
<IconPencil size={18} />
|
||||
</SidebarActionButton>
|
||||
<SidebarActionButton handleClick={handleOpenDeleteModal}>
|
||||
<IconTrash size={18} />
|
||||
</SidebarActionButton>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Conversation } from '@/types/chat';
|
||||
|
||||
import { ConversationComponent } from './Conversation';
|
||||
|
||||
interface Props {
|
||||
conversations: Conversation[];
|
||||
}
|
||||
|
||||
export const Conversations = ({ conversations }: Props) => {
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-1">
|
||||
{conversations
|
||||
.filter((conversation) => !conversation.folderId)
|
||||
.slice()
|
||||
.reverse()
|
||||
.map((conversation, index) => (
|
||||
<ConversationComponent key={index} conversation={conversation} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,22 +1,25 @@
|
||||
import { PluginID, PluginKey } from '@/types/plugin';
|
||||
import { IconKey } from '@tabler/icons-react';
|
||||
import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
|
||||
import { KeyboardEvent, useContext, useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SidebarButton } from '../Sidebar/SidebarButton';
|
||||
|
||||
interface Props {
|
||||
pluginKeys: PluginKey[];
|
||||
onPluginKeyChange: (pluginKey: PluginKey) => void;
|
||||
onClearPluginKey: (pluginKey: PluginKey) => void;
|
||||
}
|
||||
import { PluginID, PluginKey } from '@/types/plugin';
|
||||
|
||||
export const PluginKeys: FC<Props> = ({
|
||||
pluginKeys,
|
||||
onPluginKeyChange,
|
||||
onClearPluginKey,
|
||||
}) => {
|
||||
import HomeContext from '@/pages/api/home/home.context';
|
||||
|
||||
import { SidebarButton } from '@/components/Sidebar/SidebarButton';
|
||||
|
||||
import ChatbarContext from '../Chatbar.context';
|
||||
|
||||
export const PluginKeys = () => {
|
||||
const { t } = useTranslation('sidebar');
|
||||
|
||||
const {
|
||||
state: { pluginKeys },
|
||||
} = useContext(HomeContext);
|
||||
|
||||
const { handlePluginKeyChange, handleClearPluginKey } =
|
||||
useContext(ChatbarContext);
|
||||
|
||||
const [isChanging, setIsChanging] = useState(false);
|
||||
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
@@ -118,7 +121,7 @@ export const PluginKeys: FC<Props> = ({
|
||||
}),
|
||||
};
|
||||
|
||||
onPluginKeyChange(updatedPluginKey);
|
||||
handlePluginKeyChange(updatedPluginKey);
|
||||
}
|
||||
} else {
|
||||
const newPluginKey: PluginKey = {
|
||||
@@ -135,7 +138,7 @@ export const PluginKeys: FC<Props> = ({
|
||||
],
|
||||
};
|
||||
|
||||
onPluginKeyChange(newPluginKey);
|
||||
handlePluginKeyChange(newPluginKey);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -177,7 +180,7 @@ export const PluginKeys: FC<Props> = ({
|
||||
}),
|
||||
};
|
||||
|
||||
onPluginKeyChange(updatedPluginKey);
|
||||
handlePluginKeyChange(updatedPluginKey);
|
||||
}
|
||||
} else {
|
||||
const newPluginKey: PluginKey = {
|
||||
@@ -194,7 +197,7 @@ export const PluginKeys: FC<Props> = ({
|
||||
],
|
||||
};
|
||||
|
||||
onPluginKeyChange(newPluginKey);
|
||||
handlePluginKeyChange(newPluginKey);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -207,7 +210,7 @@ export const PluginKeys: FC<Props> = ({
|
||||
);
|
||||
|
||||
if (pluginKey) {
|
||||
onClearPluginKey(pluginKey);
|
||||
handleClearPluginKey(pluginKey);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Reference in New Issue
Block a user