Prompts (#229)
This commit is contained in:
Mckay Wrigley
GitHub
@@ -1,55 +0,0 @@
|
||||
import { IconCheck, IconTrash, IconX } from '@tabler/icons-react';
|
||||
import { FC, useState } from 'react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { SidebarButton } from './SidebarButton';
|
||||
|
||||
interface Props {
|
||||
onClearConversations: () => void;
|
||||
}
|
||||
|
||||
export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
|
||||
const [isConfirming, setIsConfirming] = useState<boolean>(false);
|
||||
|
||||
const { t } = useTranslation('sidebar');
|
||||
|
||||
const handleClearConversations = () => {
|
||||
onClearConversations();
|
||||
setIsConfirming(false);
|
||||
};
|
||||
|
||||
return isConfirming ? (
|
||||
<div className="flex w-full cursor-pointer items-center rounded-lg py-3 px-3 hover:bg-gray-500/10">
|
||||
<IconTrash size={18} />
|
||||
|
||||
<div className="ml-3 flex-1 text-left text-[12.5px] leading-3 text-white">
|
||||
{t('Are you sure?')}
|
||||
</div>
|
||||
|
||||
<div className="flex w-[40px]">
|
||||
<IconCheck
|
||||
className="ml-auto min-w-[20px] mr-1 text-neutral-400 hover:text-neutral-100"
|
||||
size={18}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleClearConversations();
|
||||
}}
|
||||
/>
|
||||
|
||||
<IconX
|
||||
className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
||||
size={18}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsConfirming(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<SidebarButton
|
||||
text={t('Clear conversations')}
|
||||
icon={<IconTrash size={18} />}
|
||||
onClick={() => setIsConfirming(true)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,162 +0,0 @@
|
||||
import { Conversation, KeyValuePair } from '@/types';
|
||||
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 rounded-lg bg-gray-500/10 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-4 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-gray-500/10 ${
|
||||
loading ? 'disabled:cursor-not-allowed' : ''
|
||||
} ${
|
||||
selectedConversation.id === conversation.id ? 'bg-gray-500/10' : ''
|
||||
}`}
|
||||
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="visible 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="visible 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,40 +0,0 @@
|
||||
import { Conversation, KeyValuePair } from '@/types';
|
||||
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 pt-2">
|
||||
{conversations.slice().reverse().map((conversation, index) => (
|
||||
<ConversationComponent
|
||||
key={index}
|
||||
selectedConversation={selectedConversation}
|
||||
conversation={conversation}
|
||||
loading={loading}
|
||||
onSelectConversation={onSelectConversation}
|
||||
onDeleteConversation={onDeleteConversation}
|
||||
onUpdateConversation={onUpdateConversation}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,202 +0,0 @@
|
||||
import { ChatFolder, Conversation, KeyValuePair } from '@/types';
|
||||
import {
|
||||
IconCaretDown,
|
||||
IconCaretRight,
|
||||
IconCheck,
|
||||
IconPencil,
|
||||
IconTrash,
|
||||
IconX,
|
||||
} from '@tabler/icons-react';
|
||||
import { FC, KeyboardEvent, useEffect, useState } from 'react';
|
||||
import { ConversationComponent } from './Conversation';
|
||||
|
||||
interface Props {
|
||||
searchTerm: string;
|
||||
conversations: Conversation[];
|
||||
currentFolder: ChatFolder;
|
||||
onDeleteFolder: (folder: number) => void;
|
||||
onUpdateFolder: (folder: number, name: string) => void;
|
||||
// conversation props
|
||||
selectedConversation: Conversation;
|
||||
loading: boolean;
|
||||
onSelectConversation: (conversation: Conversation) => void;
|
||||
onDeleteConversation: (conversation: Conversation) => void;
|
||||
onUpdateConversation: (
|
||||
conversation: Conversation,
|
||||
data: KeyValuePair,
|
||||
) => void;
|
||||
}
|
||||
|
||||
export const Folder: FC<Props> = ({
|
||||
searchTerm,
|
||||
conversations,
|
||||
currentFolder,
|
||||
onDeleteFolder,
|
||||
onUpdateFolder,
|
||||
// conversation props
|
||||
selectedConversation,
|
||||
loading,
|
||||
onSelectConversation,
|
||||
onDeleteConversation,
|
||||
onUpdateConversation,
|
||||
}) => {
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isRenaming, setIsRenaming] = useState(false);
|
||||
const [renameValue, setRenameValue] = useState('');
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleRename();
|
||||
}
|
||||
};
|
||||
|
||||
const handleRename = () => {
|
||||
onUpdateFolder(currentFolder.id, renameValue);
|
||||
setRenameValue('');
|
||||
setIsRenaming(false);
|
||||
};
|
||||
|
||||
const handleDrop = (e: any, folder: ChatFolder) => {
|
||||
if (e.dataTransfer) {
|
||||
setIsOpen(true);
|
||||
|
||||
const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
|
||||
onUpdateConversation(conversation, { key: 'folderId', value: folder.id });
|
||||
|
||||
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 (isRenaming) {
|
||||
setIsDeleting(false);
|
||||
} else if (isDeleting) {
|
||||
setIsRenaming(false);
|
||||
}
|
||||
}, [isRenaming, isDeleting]);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchTerm) {
|
||||
setIsOpen(true);
|
||||
} else {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}, [searchTerm]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className={`mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-[12px] leading-normal transition-colors duration-200 hover:bg-[#343541]/90`}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
onDrop={(e) => handleDrop(e, currentFolder)}
|
||||
onDragOver={allowDrop}
|
||||
onDragEnter={highlightDrop}
|
||||
onDragLeave={removeHighlight}
|
||||
>
|
||||
{isOpen ? <IconCaretDown size={16} /> : <IconCaretRight size={16} />}
|
||||
|
||||
{isRenaming ? (
|
||||
<input
|
||||
className="flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-left text-white outline-none focus:border-neutral-100"
|
||||
type="text"
|
||||
value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
onKeyDown={handleEnterDown}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<div className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap pr-1 text-left">
|
||||
{currentFolder.name}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(isDeleting || isRenaming) && (
|
||||
<div className="-ml-2 flex gap-1">
|
||||
<IconCheck
|
||||
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
||||
size={16}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
if (isDeleting) {
|
||||
onDeleteFolder(currentFolder.id);
|
||||
} else if (isRenaming) {
|
||||
handleRename();
|
||||
}
|
||||
|
||||
setIsDeleting(false);
|
||||
setIsRenaming(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<IconX
|
||||
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
||||
size={16}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDeleting(false);
|
||||
setIsRenaming(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isDeleting && !isRenaming && (
|
||||
<div className="ml-2 flex gap-1">
|
||||
<IconPencil
|
||||
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
||||
size={18}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsRenaming(true);
|
||||
setRenameValue(currentFolder.name);
|
||||
}}
|
||||
/>
|
||||
|
||||
<IconTrash
|
||||
className=" min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
||||
size={18}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDeleting(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isOpen
|
||||
? conversations.map((conversation, index) => {
|
||||
if (conversation.folderId === currentFolder.id) {
|
||||
return (
|
||||
<div key={index} className="ml-5 gap-2 border-l pl-2 pt-2">
|
||||
<ConversationComponent
|
||||
selectedConversation={selectedConversation}
|
||||
conversation={conversation}
|
||||
loading={loading}
|
||||
onSelectConversation={onSelectConversation}
|
||||
onDeleteConversation={onDeleteConversation}
|
||||
onUpdateConversation={onUpdateConversation}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,55 +0,0 @@
|
||||
import { ChatFolder, Conversation, KeyValuePair } from '@/types';
|
||||
import { FC } from 'react';
|
||||
import { Folder } from './Folder';
|
||||
|
||||
interface Props {
|
||||
searchTerm: string;
|
||||
conversations: Conversation[];
|
||||
folders: ChatFolder[];
|
||||
onDeleteFolder: (folder: number) => void;
|
||||
onUpdateFolder: (folder: number, name: string) => void;
|
||||
// conversation props
|
||||
selectedConversation: Conversation;
|
||||
loading: boolean;
|
||||
onSelectConversation: (conversation: Conversation) => void;
|
||||
onDeleteConversation: (conversation: Conversation) => void;
|
||||
onUpdateConversation: (
|
||||
conversation: Conversation,
|
||||
data: KeyValuePair,
|
||||
) => void;
|
||||
}
|
||||
|
||||
export const Folders: FC<Props> = ({
|
||||
searchTerm,
|
||||
conversations,
|
||||
folders,
|
||||
onDeleteFolder,
|
||||
onUpdateFolder,
|
||||
// conversation props
|
||||
selectedConversation,
|
||||
loading,
|
||||
onSelectConversation,
|
||||
onDeleteConversation,
|
||||
onUpdateConversation,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-1 pt-2">
|
||||
{folders.map((folder, index) => (
|
||||
<Folder
|
||||
key={index}
|
||||
searchTerm={searchTerm}
|
||||
conversations={conversations.filter((c) => c.folderId)}
|
||||
currentFolder={folder}
|
||||
onDeleteFolder={onDeleteFolder}
|
||||
onUpdateFolder={onUpdateFolder}
|
||||
// conversation props
|
||||
selectedConversation={selectedConversation}
|
||||
loading={loading}
|
||||
onSelectConversation={onSelectConversation}
|
||||
onDeleteConversation={onDeleteConversation}
|
||||
onUpdateConversation={onUpdateConversation}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,57 +0,0 @@
|
||||
import { ChatFolder, Conversation } from '@/types';
|
||||
import { cleanConversationHistory } from '@/utils/app/clean';
|
||||
import { IconFileImport } from '@tabler/icons-react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { FC } from 'react';
|
||||
import { SidebarButton } from './SidebarButton';
|
||||
|
||||
interface Props {
|
||||
onImport: (data: {
|
||||
conversations: Conversation[];
|
||||
folders: ChatFolder[];
|
||||
}) => void;
|
||||
}
|
||||
|
||||
export const Import: FC<Props> = ({ onImport }) => {
|
||||
const { t } = useTranslation('sidebar');
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
id="import-file"
|
||||
className="sr-only"
|
||||
tabIndex={-1}
|
||||
type="file"
|
||||
accept=".json"
|
||||
onChange={(e) => {
|
||||
if (!e.target.files?.length) return;
|
||||
|
||||
const file = e.target.files[0];
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
let json = JSON.parse(e.target?.result as string);
|
||||
|
||||
if (json && !json.folders) {
|
||||
json = { history: cleanConversationHistory(json), folders: [] };
|
||||
}
|
||||
|
||||
onImport({ conversations: json.history, folders: json.folders });
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}}
|
||||
/>
|
||||
|
||||
<SidebarButton
|
||||
text={t('Import conversations')}
|
||||
icon={<IconFileImport size={18} />}
|
||||
onClick={() => {
|
||||
const importFile = document.querySelector(
|
||||
'#import-file',
|
||||
) as HTMLInputElement;
|
||||
if (importFile) {
|
||||
importFile.click();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,69 +0,0 @@
|
||||
import { IconCheck, IconKey, IconX } from '@tabler/icons-react';
|
||||
import { FC, KeyboardEvent, useState } from 'react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { SidebarButton } from './SidebarButton';
|
||||
|
||||
interface Props {
|
||||
apiKey: string;
|
||||
onApiKeyChange: (apiKey: string) => void;
|
||||
}
|
||||
|
||||
export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
|
||||
const { t } = useTranslation('sidebar');
|
||||
const [isChanging, setIsChanging] = useState(false);
|
||||
const [newKey, setNewKey] = useState(apiKey);
|
||||
|
||||
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleUpdateKey(newKey);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateKey = (newKey: string) => {
|
||||
onApiKeyChange(newKey.trim());
|
||||
setIsChanging(false);
|
||||
};
|
||||
|
||||
return isChanging ? (
|
||||
<div className="duration:200 flex w-full cursor-pointer items-center rounded-md py-3 px-3 transition-colors hover:bg-gray-500/10">
|
||||
<IconKey size={18} />
|
||||
|
||||
<input
|
||||
className="ml-2 h-[20px] flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-[12.5px] leading-3 text-left text-white outline-none focus:border-neutral-100"
|
||||
type="password"
|
||||
value={newKey}
|
||||
onChange={(e) => setNewKey(e.target.value)}
|
||||
onKeyDown={handleEnterDown}
|
||||
placeholder={t('API Key') || 'API Key'}
|
||||
/>
|
||||
|
||||
<div className="flex w-[40px]">
|
||||
<IconCheck
|
||||
className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
||||
size={18}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleUpdateKey(newKey);
|
||||
}}
|
||||
/>
|
||||
|
||||
<IconX
|
||||
className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
||||
size={18}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsChanging(false);
|
||||
setNewKey(apiKey);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<SidebarButton
|
||||
text={t('OpenAI API Key')}
|
||||
icon={<IconKey size={18} />}
|
||||
onClick={() => setIsChanging(true)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,13 +1,14 @@
|
||||
import { IconX } from '@tabler/icons-react';
|
||||
import { FC } from 'react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { FC } from 'react';
|
||||
|
||||
interface Props {
|
||||
placeholder: string;
|
||||
searchTerm: string;
|
||||
onSearch: (searchTerm: string) => void;
|
||||
}
|
||||
|
||||
export const Search: FC<Props> = ({ searchTerm, onSearch }) => {
|
||||
export const Search: FC<Props> = ({ placeholder, searchTerm, onSearch }) => {
|
||||
const { t } = useTranslation('sidebar');
|
||||
|
||||
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -21,9 +22,9 @@ export const Search: FC<Props> = ({ searchTerm, onSearch }) => {
|
||||
return (
|
||||
<div className="relative flex items-center">
|
||||
<input
|
||||
className="w-full flex-1 rounded-md border border-neutral-600 bg-[#202123] px-4 py-3 pr-10 text-[12px] leading-3 text-white"
|
||||
className="w-full flex-1 rounded-md border border-neutral-600 bg-[#202123] px-4 py-3 pr-10 text-[14px] leading-3 text-white"
|
||||
type="text"
|
||||
placeholder={t('Search conversations...') || ''}
|
||||
placeholder={t(placeholder) || ''}
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
|
||||
@@ -1,214 +0,0 @@
|
||||
import { ChatFolder, Conversation, KeyValuePair } from '@/types';
|
||||
import {
|
||||
IconArrowBarLeft,
|
||||
IconFolderPlus,
|
||||
IconMessagesOff,
|
||||
IconPlus,
|
||||
} from '@tabler/icons-react';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { Conversations } from './Conversations';
|
||||
import { Folders } from './Folders';
|
||||
import { Search } from './Search';
|
||||
import { SidebarSettings } from './SidebarSettings';
|
||||
|
||||
interface Props {
|
||||
loading: boolean;
|
||||
conversations: Conversation[];
|
||||
lightMode: 'light' | 'dark';
|
||||
selectedConversation: Conversation;
|
||||
apiKey: string;
|
||||
folders: ChatFolder[];
|
||||
onCreateFolder: (name: string) => void;
|
||||
onDeleteFolder: (folderId: number) => void;
|
||||
onUpdateFolder: (folderId: number, name: string) => void;
|
||||
onNewConversation: () => void;
|
||||
onToggleLightMode: (mode: 'light' | 'dark') => void;
|
||||
onSelectConversation: (conversation: Conversation) => void;
|
||||
onDeleteConversation: (conversation: Conversation) => void;
|
||||
onToggleSidebar: () => void;
|
||||
onUpdateConversation: (
|
||||
conversation: Conversation,
|
||||
data: KeyValuePair,
|
||||
) => void;
|
||||
onApiKeyChange: (apiKey: string) => void;
|
||||
onClearConversations: () => void;
|
||||
onExportConversations: () => void;
|
||||
onImportConversations: (data: {
|
||||
conversations: Conversation[];
|
||||
folders: ChatFolder[];
|
||||
}) => void;
|
||||
}
|
||||
|
||||
export const Sidebar: FC<Props> = ({
|
||||
loading,
|
||||
conversations,
|
||||
lightMode,
|
||||
selectedConversation,
|
||||
apiKey,
|
||||
folders,
|
||||
onCreateFolder,
|
||||
onDeleteFolder,
|
||||
onUpdateFolder,
|
||||
onNewConversation,
|
||||
onToggleLightMode,
|
||||
onSelectConversation,
|
||||
onDeleteConversation,
|
||||
onToggleSidebar,
|
||||
onUpdateConversation,
|
||||
onApiKeyChange,
|
||||
onClearConversations,
|
||||
onExportConversations,
|
||||
onImportConversations,
|
||||
}) => {
|
||||
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 handleDeleteConversation = (conversation: Conversation) => {
|
||||
onDeleteConversation(conversation);
|
||||
setSearchTerm('');
|
||||
};
|
||||
|
||||
const handleDrop = (e: any) => {
|
||||
if (e.dataTransfer) {
|
||||
const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
|
||||
onUpdateConversation(conversation, { key: 'folderId', value: 0 });
|
||||
|
||||
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) => {
|
||||
const searchable =
|
||||
conversation.name.toLocaleLowerCase() +
|
||||
' ' +
|
||||
conversation.messages.map((message) => message.content).join(' ');
|
||||
return searchable.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
setFilteredConversations(conversations);
|
||||
}
|
||||
}, [searchTerm, conversations]);
|
||||
|
||||
return (
|
||||
<aside
|
||||
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`}
|
||||
>
|
||||
<header className="flex items-center">
|
||||
<button
|
||||
className="flex w-[190px] flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-[12.5px] leading-3 text-white transition-colors duration-200 select-none 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-[12.5px] leading-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
|
||||
onClick={() => onCreateFolder(t('New folder'))}
|
||||
>
|
||||
<IconFolderPlus size={18} />
|
||||
</button>
|
||||
|
||||
<IconArrowBarLeft
|
||||
className="ml-1 hidden cursor-pointer p-1 text-neutral-300 hover:text-neutral-400 sm:flex"
|
||||
size={32}
|
||||
onClick={onToggleSidebar}
|
||||
/>
|
||||
</header>
|
||||
|
||||
{conversations.length > 1 && (
|
||||
<Search searchTerm={searchTerm} onSearch={setSearchTerm} />
|
||||
)}
|
||||
|
||||
<div className="flex-grow overflow-y-auto overflow-x-clip">
|
||||
{folders.length > 0 && (
|
||||
<div className="flex border-b border-white/20 pb-2">
|
||||
<Folders
|
||||
searchTerm={searchTerm}
|
||||
conversations={filteredConversations.filter(
|
||||
(conversation) => conversation.folderId !== 0,
|
||||
)}
|
||||
folders={folders}
|
||||
onDeleteFolder={onDeleteFolder}
|
||||
onUpdateFolder={onUpdateFolder}
|
||||
selectedConversation={selectedConversation}
|
||||
loading={loading}
|
||||
onSelectConversation={onSelectConversation}
|
||||
onDeleteConversation={handleDeleteConversation}
|
||||
onUpdateConversation={handleUpdateConversation}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{conversations.length > 0 ? (
|
||||
<div
|
||||
className="h-full pt-2"
|
||||
onDrop={(e) => handleDrop(e)}
|
||||
onDragOver={allowDrop}
|
||||
onDragEnter={highlightDrop}
|
||||
onDragLeave={removeHighlight}
|
||||
>
|
||||
<Conversations
|
||||
loading={loading}
|
||||
conversations={filteredConversations.filter(
|
||||
(conversation) =>
|
||||
conversation.folderId === 0 ||
|
||||
!folders[conversation.folderId - 1],
|
||||
)}
|
||||
selectedConversation={selectedConversation}
|
||||
onSelectConversation={onSelectConversation}
|
||||
onDeleteConversation={handleDeleteConversation}
|
||||
onUpdateConversation={handleUpdateConversation}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-8 text-white text-center opacity-50 select-none">
|
||||
<IconMessagesOff className='mx-auto mb-3'/>
|
||||
<span className='text-[12.5px] leading-3'>{t('No conversations.')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<SidebarSettings
|
||||
lightMode={lightMode}
|
||||
apiKey={apiKey}
|
||||
conversationsCount={conversations.length}
|
||||
onToggleLightMode={onToggleLightMode}
|
||||
onApiKeyChange={onApiKeyChange}
|
||||
onClearConversations={onClearConversations}
|
||||
onExportConversations={onExportConversations}
|
||||
onImportConversations={onImportConversations}
|
||||
/>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
@@ -9,7 +9,7 @@ interface Props {
|
||||
export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
|
||||
return (
|
||||
<button
|
||||
className="flex w-full cursor-pointer select-none items-center gap-3 rounded-md py-3 px-3 text-[12.5px] leading-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
|
||||
className="flex w-full cursor-pointer select-none items-center gap-3 rounded-md py-3 px-3 text-[14px] leading-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div>{icon}</div>
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
import { ChatFolder, Conversation } from '@/types';
|
||||
import { IconFileExport, IconMoon, IconSun } from '@tabler/icons-react';
|
||||
import { FC } from 'react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { ClearConversations } from './ClearConversations';
|
||||
import { Import } from './Import';
|
||||
import { Key } from './Key';
|
||||
import { SidebarButton } from './SidebarButton';
|
||||
|
||||
interface Props {
|
||||
lightMode: 'light' | 'dark';
|
||||
apiKey: string;
|
||||
conversationsCount: number;
|
||||
onToggleLightMode: (mode: 'light' | 'dark') => void;
|
||||
onApiKeyChange: (apiKey: string) => void;
|
||||
onClearConversations: () => void;
|
||||
onExportConversations: () => void;
|
||||
onImportConversations: (data: {
|
||||
conversations: Conversation[];
|
||||
folders: ChatFolder[];
|
||||
}) => void;
|
||||
}
|
||||
|
||||
export const SidebarSettings: FC<Props> = ({
|
||||
lightMode,
|
||||
apiKey,
|
||||
conversationsCount,
|
||||
onToggleLightMode,
|
||||
onApiKeyChange,
|
||||
onClearConversations,
|
||||
onExportConversations,
|
||||
onImportConversations,
|
||||
}) => {
|
||||
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 conversations')}
|
||||
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')
|
||||
}
|
||||
/>
|
||||
|
||||
<Key apiKey={apiKey} onApiKeyChange={onApiKeyChange} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user