Prompts (#229)
This commit is contained in:
Mckay Wrigley
GitHub
@@ -0,0 +1,220 @@
|
||||
import { Conversation } from '@/types/chat';
|
||||
import { KeyValuePair } from '@/types/data';
|
||||
import { Folder } from '@/types/folder';
|
||||
import {
|
||||
IconArrowBarLeft,
|
||||
IconFolderPlus,
|
||||
IconMessagesOff,
|
||||
IconPlus,
|
||||
} from '@tabler/icons-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;
|
||||
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;
|
||||
onToggleSidebar: () => void;
|
||||
onUpdateConversation: (
|
||||
conversation: Conversation,
|
||||
data: KeyValuePair,
|
||||
) => void;
|
||||
onApiKeyChange: (apiKey: string) => void;
|
||||
onClearConversations: () => void;
|
||||
onExportConversations: () => void;
|
||||
onImportConversations: (data: {
|
||||
conversations: Conversation[];
|
||||
folders: Folder[];
|
||||
}) => void;
|
||||
}
|
||||
|
||||
export const Chatbar: 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 (
|
||||
<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`}
|
||||
>
|
||||
<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>
|
||||
|
||||
<IconArrowBarLeft
|
||||
className="ml-1 hidden cursor-pointer p-1 text-neutral-300 hover:text-neutral-400 sm:flex"
|
||||
size={32}
|
||||
onClick={onToggleSidebar}
|
||||
/>
|
||||
</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.filter((folder) => folder.type === 'chat')}
|
||||
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,
|
||||
)}
|
||||
selectedConversation={selectedConversation}
|
||||
onSelectConversation={onSelectConversation}
|
||||
onDeleteConversation={handleDeleteConversation}
|
||||
onUpdateConversation={handleUpdateConversation}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-8 select-none text-center text-white opacity-50">
|
||||
<IconMessagesOff className="mx-auto mb-3" />
|
||||
<span className="text-[14px] leading-normal">
|
||||
{t('No conversations.')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ChatbarSettings
|
||||
lightMode={lightMode}
|
||||
apiKey={apiKey}
|
||||
conversationsCount={conversations.length}
|
||||
onToggleLightMode={onToggleLightMode}
|
||||
onApiKeyChange={onApiKeyChange}
|
||||
onClearConversations={onClearConversations}
|
||||
onExportConversations={onExportConversations}
|
||||
onImportConversations={onImportConversations}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,63 @@
|
||||
import { Conversation } from '@/types/chat';
|
||||
import { Folder } from '@/types/folder';
|
||||
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';
|
||||
|
||||
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: Folder[];
|
||||
}) => void;
|
||||
}
|
||||
|
||||
export const ChatbarSettings: 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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
import { IconCheck, IconTrash, IconX } from '@tabler/icons-react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { FC, useState } from 'react';
|
||||
import { SidebarButton } from '../Sidebar/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)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,163 @@
|
||||
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">
|
||||
<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="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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user