This commit is contained in:
Mckay Wrigley 2023-03-27 09:38:56 -06:00 committed by GitHub
parent 2269403806
commit 34c79c0d66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 1744 additions and 295 deletions

View File

@ -1,14 +1,20 @@
import {
Conversation,
ErrorMessage,
KeyValuePair,
Message,
OpenAIModel,
} from '@/types';
import { Conversation, Message } from '@/types/chat';
import { KeyValuePair } from '@/types/data';
import { ErrorMessage } from '@/types/error';
import { OpenAIModel } from '@/types/openai';
import { Prompt } from '@/types/prompt';
import { throttle } from '@/utils';
import { IconClearAll, IconKey, IconSettings } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { FC, memo, MutableRefObject, useEffect, useRef, useState } from 'react';
import {
FC,
memo,
MutableRefObject,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { Spinner } from '../Global/Spinner';
import { ChatInput } from './ChatInput';
import { ChatLoader } from './ChatLoader';
@ -24,8 +30,8 @@ interface Props {
serverSideApiKeyIsSet: boolean;
messageIsStreaming: boolean;
modelError: ErrorMessage | null;
messageError: boolean;
loading: boolean;
prompts: Prompt[];
onSend: (message: Message, deleteCount?: number) => void;
onUpdateConversation: (
conversation: Conversation,
@ -43,8 +49,8 @@ export const Chat: FC<Props> = memo(
serverSideApiKeyIsSet,
messageIsStreaming,
modelError,
messageError,
loading,
prompts,
onSend,
onUpdateConversation,
onEditMessage,
@ -59,6 +65,27 @@ export const Chat: FC<Props> = memo(
const chatContainerRef = useRef<HTMLDivElement>(null);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const scrollToBottom = useCallback(() => {
if (autoScrollEnabled) {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
textareaRef.current?.focus();
}
}, [autoScrollEnabled]);
const handleScroll = () => {
if (chatContainerRef.current) {
const { scrollTop, scrollHeight, clientHeight } =
chatContainerRef.current;
const bottomTolerance = 30;
if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
setAutoScrollEnabled(false);
} else {
setAutoScrollEnabled(true);
}
}
};
const handleSettings = () => {
setShowSettings(!showSettings);
};
@ -174,6 +201,7 @@ export const Chat: FC<Props> = memo(
<SystemPrompt
conversation={conversation}
prompts={prompts}
onChangePrompt={(prompt) =>
onUpdateConversation(conversation, {
key: 'prompt',
@ -201,8 +229,8 @@ export const Chat: FC<Props> = memo(
/>
</div>
{showSettings && (
<div className="flex flex-col space-y-10 md:max-w-xl md:gap-6 md:py-3 md:pt-6 md:mx-auto lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="flex h-full flex-col space-y-4 border-b md:rounded-lg md:border border-neutral-200 p-4 dark:border-neutral-600">
<div className="flex flex-col space-y-10 md:mx-auto md:max-w-xl md:gap-6 md:py-3 md:pt-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="flex h-full flex-col space-y-4 border-b border-neutral-200 p-4 dark:border-neutral-600 md:rounded-lg md:border">
<ModelSelect
model={conversation.model}
models={models}
@ -241,7 +269,9 @@ export const Chat: FC<Props> = memo(
textareaRef={textareaRef}
messageIsStreaming={messageIsStreaming}
conversationIsEmpty={conversation.messages.length === 0}
messages={conversation.messages}
model={conversation.model}
prompts={prompts}
onSend={(message) => {
setCurrentMessage(message);
onSend(message);

View File

@ -1,18 +1,26 @@
import { Message, OpenAIModel, OpenAIModelID } from '@/types';
import { Message } from '@/types/chat';
import { OpenAIModel, OpenAIModelID } from '@/types/openai';
import { Prompt } from '@/types/prompt';
import { IconPlayerStop, IconRepeat, IconSend } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import {
FC,
KeyboardEvent,
MutableRefObject,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { PromptList } from './PromptList';
import { VariableModal } from './VariableModal';
interface Props {
messageIsStreaming: boolean;
model: OpenAIModel;
conversationIsEmpty: boolean;
messages: Message[];
prompts: Prompt[];
onSend: (message: Message) => void;
onRegenerate: () => void;
stopConversationRef: MutableRefObject<boolean>;
@ -23,14 +31,28 @@ export const ChatInput: FC<Props> = ({
messageIsStreaming,
model,
conversationIsEmpty,
messages,
prompts,
onSend,
onRegenerate,
stopConversationRef,
textareaRef,
}) => {
const { t } = useTranslation('chat');
const [content, setContent] = useState<string>();
const [isTyping, setIsTyping] = useState<boolean>(false);
const [showPromptList, setShowPromptList] = useState(false);
const [activePromptIndex, setActivePromptIndex] = useState(0);
const [promptInputValue, setPromptInputValue] = useState('');
const [variables, setVariables] = useState<string[]>([]);
const [isModalVisible, setIsModalVisible] = useState(false);
const promptListRef = useRef<HTMLUListElement | null>(null);
const filteredPrompts = prompts.filter((prompt) =>
prompt.name.toLowerCase().includes(promptInputValue.toLowerCase()),
);
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
@ -47,6 +69,7 @@ export const ChatInput: FC<Props> = ({
}
setContent(value);
updatePromptListVisibility(value);
};
const handleSend = () => {
@ -67,6 +90,13 @@ export const ChatInput: FC<Props> = ({
}
};
const handleStopConversation = () => {
stopConversationRef.current = true;
setTimeout(() => {
stopConversationRef.current = false;
}, 1000);
};
const isMobile = () => {
const userAgent =
typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
@ -75,15 +105,106 @@ export const ChatInput: FC<Props> = ({
return mobileRegex.test(userAgent);
};
const handleInitModal = () => {
const selectedPrompt = filteredPrompts[activePromptIndex];
setContent((prevContent) => {
const newContent = prevContent?.replace(/\/\w*$/, selectedPrompt.content);
return newContent;
});
handlePromptSelect(selectedPrompt);
setShowPromptList(false);
};
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
if (!isTyping) {
if (e.key === 'Enter' && !e.shiftKey && !isMobile()) {
if (showPromptList) {
if (e.key === 'ArrowDown') {
e.preventDefault();
handleSend();
setActivePromptIndex((prevIndex) =>
prevIndex < prompts.length - 1 ? prevIndex + 1 : prevIndex,
);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex > 0 ? prevIndex - 1 : prevIndex,
);
} else if (e.key === 'Tab') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex < prompts.length - 1 ? prevIndex + 1 : 0,
);
} else if (e.key === 'Enter') {
e.preventDefault();
handleInitModal();
} else if (e.key === 'Escape') {
e.preventDefault();
setShowPromptList(false);
} else {
setActivePromptIndex(0);
}
} else if (e.key === 'Enter' && !isMobile() && !e.shiftKey) {
e.preventDefault();
handleSend();
}
};
const parseVariables = (content: string) => {
const regex = /{{(.*?)}}/g;
const foundVariables = [];
let match;
while ((match = regex.exec(content)) !== null) {
foundVariables.push(match[1]);
}
return foundVariables;
};
const updatePromptListVisibility = useCallback((text: string) => {
const match = text.match(/\/\w*$/);
if (match) {
setShowPromptList(true);
setPromptInputValue(match[0].slice(1));
} else {
setShowPromptList(false);
setPromptInputValue('');
}
}, []);
const handlePromptSelect = (prompt: Prompt) => {
const parsedVariables = parseVariables(prompt.content);
setVariables(parsedVariables);
if (parsedVariables.length > 0) {
setIsModalVisible(true);
} else {
setContent((prevContent) => {
const updatedContent = prevContent?.replace(/\/\w*$/, prompt.content);
return updatedContent;
});
updatePromptListVisibility(prompt.content);
}
};
const handleSubmit = (updatedVariables: string[]) => {
const newContent = content?.replace(/{{(.*?)}}/g, (match, variable) => {
const index = variables.indexOf(variable);
return updatedVariables[index];
});
setContent(newContent);
if (textareaRef && textareaRef.current) {
textareaRef.current.focus();
}
};
useEffect(() => {
if (promptListRef.current) {
promptListRef.current.scrollTop = activePromptIndex * 30;
}
}, [activePromptIndex]);
useEffect(() => {
if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = 'inherit';
@ -94,19 +215,29 @@ export const ChatInput: FC<Props> = ({
}
}, [content]);
function handleStopConversation() {
stopConversationRef.current = true;
setTimeout(() => {
stopConversationRef.current = false;
}, 1000);
}
useEffect(() => {
const handleOutsideClick = (e: MouseEvent) => {
if (
promptListRef.current &&
!promptListRef.current.contains(e.target as Node)
) {
setShowPromptList(false);
}
};
window.addEventListener('click', handleOutsideClick);
return () => {
window.removeEventListener('click', handleOutsideClick);
};
}, []);
return (
<div className="absolute bottom-0 left-0 w-full border-transparent bg-gradient-to-b from-transparent via-white to-white pt-6 dark:border-white/20 dark:via-[#343541] dark:to-[#343541] md:pt-2">
<div className="stretch mx-2 mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:mt-[52px] md:last:mb-6 lg:mx-auto lg:max-w-3xl">
{messageIsStreaming && (
<button
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 bg-white py-2 px-4 text-black dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
className="absolute top-2 left-0 right-0 mx-auto mt-2 w-fit rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
onClick={handleStopConversation}
>
<IconPlayerStop size={16} className="mb-[2px] inline-block" />{' '}
@ -116,7 +247,7 @@ export const ChatInput: FC<Props> = ({
{!messageIsStreaming && !conversationIsEmpty && (
<button
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 bg-white py-2 px-4 text-black dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
className="absolute left-0 right-0 mx-auto mt-2 w-fit rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
onClick={onRegenerate}
>
<IconRepeat size={16} className="mb-[2px] inline-block" />{' '}
@ -124,10 +255,10 @@ export const ChatInput: FC<Props> = ({
</button>
)}
<div className="relative flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4">
<div className="relative mx-2 flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] sm:mx-4 md:py-3 md:pl-4">
<textarea
ref={textareaRef}
className="m-0 w-full resize-none border-0 bg-transparent p-0 pr-7 pl-2 text-black outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:text-white md:pl-0"
className="m-0 w-full resize-none border-0 bg-transparent p-0 pr-8 pl-2 text-black outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:text-white md:pl-0"
style={{
resize: 'none',
bottom: `${textareaRef?.current?.scrollHeight}px`,
@ -138,7 +269,9 @@ export const ChatInput: FC<Props> = ({
: 'hidden'
}`,
}}
placeholder={t('Type a message...') || ''}
placeholder={
t('Type a message or type "/" to select a prompt...') || ''
}
value={content}
rows={1}
onCompositionStart={() => setIsTyping(true)}
@ -153,9 +286,30 @@ export const ChatInput: FC<Props> = ({
>
<IconSend size={16} className="opacity-60" />
</button>
{showPromptList && prompts.length > 0 && (
<div className="absolute bottom-12 w-full">
<PromptList
activePromptIndex={activePromptIndex}
prompts={filteredPrompts}
onSelect={handleInitModal}
onMouseOver={setActivePromptIndex}
promptListRef={promptListRef}
/>
</div>
)}
{isModalVisible && (
<VariableModal
prompt={prompts[activePromptIndex]}
variables={variables}
onSubmit={handleSubmit}
onClose={() => setIsModalVisible(false)}
/>
)}
</div>
</div>
<div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
<div className="px-3 pt-2 pb-3 text-center text-[12px] text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
<a
href="https://github.com/mckaywrigley/chatbot-ui"
target="_blank"

View File

@ -1,7 +1,7 @@
import { Message } from '@/types';
import { Message } from '@/types/chat';
import { IconEdit } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { FC, useEffect, useRef, useState, memo } from 'react';
import { FC, memo, useEffect, useRef, useState } from 'react';
import rehypeMathjax from 'rehype-mathjax';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
@ -73,7 +73,7 @@ export const ChatMessage: FC<Props> = memo(
return (
<div
className={`group ${
className={`group px-4 ${
message.role === 'assistant'
? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100'
: 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100'
@ -138,7 +138,7 @@ export const ChatMessage: FC<Props> = memo(
className={`absolute ${
window.innerWidth < 640
? 'right-3 bottom-1'
: 'right-[-20px] top-[26px]'
: 'right-0 top-[26px]'
}`}
>
<IconEdit

View File

@ -1,5 +1,5 @@
import { IconCheck, IconCopy } from "@tabler/icons-react";
import { FC } from "react";
import { IconCheck, IconCopy } from '@tabler/icons-react';
import { FC } from 'react';
type Props = {
messagedCopied: boolean;
@ -7,16 +7,17 @@ type Props = {
};
export const CopyButton: FC<Props> = ({ messagedCopied, copyOnClick }) => (
<button className={`absolute ${window.innerWidth < 640 ? "right-3 bottom-1" : "right-[-20px] top-[26px] m-0"}`}>
<button
className={`absolute ${
window.innerWidth < 640 ? 'right-3 bottom-1' : 'right-0 top-[26px] m-0'
}`}
>
{messagedCopied ? (
<IconCheck
size={20}
className="text-green-500 dark:text-green-400"
/>
<IconCheck size={20} className="text-green-500 dark:text-green-400" />
) : (
<IconCopy
size={20}
className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
onClick={copyOnClick}
/>
)}

View File

@ -1,4 +1,4 @@
import { ErrorMessage } from '@/types';
import { ErrorMessage } from '@/types/error';
import { IconCircleX } from '@tabler/icons-react';
import { FC } from 'react';
@ -19,7 +19,7 @@ export const ErrorMessageDiv: FC<Props> = ({ error }) => {
{line}{' '}
</div>
))}
<div className="text-xs dark:text-red-400 opacity-50 mt-4">
<div className="mt-4 text-xs opacity-50 dark:text-red-400">
{error.code ? <i>Code: {error.code}</i> : ''}
</div>
</div>

View File

@ -1,6 +1,6 @@
import { OpenAIModel } from '@/types';
import { FC } from 'react';
import { OpenAIModel } from '@/types/openai';
import { useTranslation } from 'next-i18next';
import { FC } from 'react';
interface Props {
model: OpenAIModel;

View File

@ -0,0 +1,50 @@
import { Prompt } from '@/types/prompt';
import { FC, MutableRefObject } from 'react';
interface Props {
prompts: Prompt[];
activePromptIndex: number;
onSelect: () => void;
onMouseOver: (index: number) => void;
promptListRef: MutableRefObject<HTMLUListElement | null>;
}
export const PromptList: FC<Props> = ({
prompts,
activePromptIndex,
onSelect,
onMouseOver,
promptListRef,
}) => {
return (
<ul
ref={promptListRef}
className="z-10 w-full rounded border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-neutral-500 dark:bg-[#343541] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]"
style={{
width: 'calc(100% - 48px)',
bottom: '100%',
marginBottom: '4px',
maxHeight: '200px',
}}
>
{prompts.map((prompt, index) => (
<li
key={prompt.id}
className={`${
index === activePromptIndex
? 'bg-gray-200 dark:bg-[#202123] dark:text-black'
: ''
} cursor-pointer px-3 py-2 text-sm text-black dark:text-white`}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onSelect();
}}
onMouseEnter={() => onMouseOver(index)}
>
{prompt.name}
</li>
))}
</ul>
);
};

View File

@ -1,6 +1,6 @@
import { IconRefresh } from '@tabler/icons-react';
import { FC } from 'react';
import { useTranslation } from 'next-i18next';
import { FC } from 'react';
interface Props {
onRegenerate: () => void;

View File

@ -1,35 +1,162 @@
import { Conversation } from '@/types';
import { Conversation } from '@/types/chat';
import { OpenAIModelID } from '@/types/openai';
import { Prompt } from '@/types/prompt';
import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
import { FC, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'next-i18next';
import {
FC,
KeyboardEvent,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { PromptList } from './PromptList';
import { VariableModal } from './VariableModal';
interface Props {
conversation: Conversation;
prompts: Prompt[];
onChangePrompt: (prompt: string) => void;
}
export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
export const SystemPrompt: FC<Props> = ({
conversation,
prompts,
onChangePrompt,
}) => {
const { t } = useTranslation('chat');
const [value, setValue] = useState<string>('');
const [activePromptIndex, setActivePromptIndex] = useState(0);
const [showPromptList, setShowPromptList] = useState(false);
const [promptInputValue, setPromptInputValue] = useState('');
const [variables, setVariables] = useState<string[]>([]);
const [isModalVisible, setIsModalVisible] = useState(false);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const promptListRef = useRef<HTMLUListElement | null>(null);
const filteredPrompts = prompts.filter((prompt) =>
prompt.name.toLowerCase().includes(promptInputValue.toLowerCase()),
);
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
const maxLength = 4000;
const maxLength =
conversation.model.id === OpenAIModelID.GPT_3_5 ? 12000 : 24000;
if (value.length > maxLength) {
alert(t(`Prompt limit is {{maxLength}} characters`, { maxLength }));
alert(
t(
`Prompt limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`,
{ maxLength, valueLength: value.length },
),
);
return;
}
setValue(value);
updatePromptListVisibility(value);
if (value.length > 0) {
onChangePrompt(value);
}
};
const handleInitModal = () => {
const selectedPrompt = filteredPrompts[activePromptIndex];
setValue((prevVal) => {
const newContent = prevVal?.replace(/\/\w*$/, selectedPrompt.content);
return newContent;
});
handlePromptSelect(selectedPrompt);
setShowPromptList(false);
};
const parseVariables = (content: string) => {
const regex = /{{(.*?)}}/g;
const foundVariables = [];
let match;
while ((match = regex.exec(content)) !== null) {
foundVariables.push(match[1]);
}
return foundVariables;
};
const updatePromptListVisibility = useCallback((text: string) => {
const match = text.match(/\/\w*$/);
if (match) {
setShowPromptList(true);
setPromptInputValue(match[0].slice(1));
} else {
setShowPromptList(false);
setPromptInputValue('');
}
}, []);
const handlePromptSelect = (prompt: Prompt) => {
const parsedVariables = parseVariables(prompt.content);
setVariables(parsedVariables);
if (parsedVariables.length > 0) {
setIsModalVisible(true);
} else {
const updatedContent = value?.replace(/\/\w*$/, prompt.content);
setValue(updatedContent);
onChangePrompt(updatedContent);
updatePromptListVisibility(prompt.content);
}
};
const handleSubmit = (updatedVariables: string[]) => {
const newContent = value?.replace(/{{(.*?)}}/g, (match, variable) => {
const index = variables.indexOf(variable);
return updatedVariables[index];
});
setValue(newContent);
onChangePrompt(newContent);
if (textareaRef && textareaRef.current) {
textareaRef.current.focus();
}
};
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
if (showPromptList) {
if (e.key === 'ArrowDown') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex < prompts.length - 1 ? prevIndex + 1 : prevIndex,
);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex > 0 ? prevIndex - 1 : prevIndex,
);
} else if (e.key === 'Tab') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex < prompts.length - 1 ? prevIndex + 1 : 0,
);
} else if (e.key === 'Enter') {
e.preventDefault();
handleInitModal();
} else if (e.key === 'Escape') {
e.preventDefault();
setShowPromptList(false);
} else {
setActivePromptIndex(0);
}
}
};
useEffect(() => {
if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = 'inherit';
@ -45,6 +172,23 @@ export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
}
}, [conversation]);
useEffect(() => {
const handleOutsideClick = (e: MouseEvent) => {
if (
promptListRef.current &&
!promptListRef.current.contains(e.target as Node)
) {
setShowPromptList(false);
}
};
window.addEventListener('click', handleOutsideClick);
return () => {
window.removeEventListener('click', handleOutsideClick);
};
}, []);
return (
<div className="flex flex-col">
<label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
@ -52,7 +196,7 @@ export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
</label>
<textarea
ref={textareaRef}
className="w-full rounded-lg border border-neutral-200 px-4 py-3 text-neutral-900 focus:outline-none bg-transparent dark:border-neutral-600 dark:text-neutral-100"
className="w-full rounded-lg border border-neutral-200 bg-transparent px-4 py-3 text-neutral-900 focus:outline-none dark:border-neutral-600 dark:text-neutral-100"
style={{
resize: 'none',
bottom: `${textareaRef?.current?.scrollHeight}px`,
@ -63,11 +207,35 @@ export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
: 'hidden'
}`,
}}
placeholder={t('Enter a prompt') || ''}
placeholder={
t(`Enter a prompt or type "/" to select a prompt...`) || ''
}
value={t(value) || ''}
rows={1}
onChange={handleChange}
onKeyDown={handleKeyDown}
/>
{showPromptList && prompts.length > 0 && (
<div>
<PromptList
activePromptIndex={activePromptIndex}
prompts={filteredPrompts}
onSelect={handleInitModal}
onMouseOver={setActivePromptIndex}
promptListRef={promptListRef}
/>
</div>
)}
{isModalVisible && (
<VariableModal
prompt={prompts[activePromptIndex]}
variables={variables}
onSubmit={handleSubmit}
onClose={() => setIsModalVisible(false)}
/>
)}
</div>
);
};

View File

@ -0,0 +1,123 @@
import { Prompt } from '@/types/prompt';
import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
interface Props {
prompt: Prompt;
variables: string[];
onSubmit: (updatedVariables: string[]) => void;
onClose: () => void;
}
export const VariableModal: FC<Props> = ({
prompt,
variables,
onSubmit,
onClose,
}) => {
const [updatedVariables, setUpdatedVariables] = useState<
{ key: string; value: string }[]
>(
variables
.map((variable) => ({ key: variable, value: '' }))
.filter(
(item, index, array) =>
array.findIndex((t) => t.key === item.key) === index,
),
);
const modalRef = useRef<HTMLDivElement>(null);
const nameInputRef = useRef<HTMLTextAreaElement>(null);
const handleChange = (index: number, value: string) => {
setUpdatedVariables((prev) => {
const updated = [...prev];
updated[index].value = value;
return updated;
});
};
const handleSubmit = () => {
if (updatedVariables.some((variable) => variable.value === '')) {
alert('Please fill out all variables');
return;
}
onSubmit(updatedVariables.map((variable) => variable.value));
onClose();
};
const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSubmit();
} else if (e.key === 'Escape') {
onClose();
}
};
useEffect(() => {
const handleOutsideClick = (e: MouseEvent) => {
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
onClose();
}
};
window.addEventListener('click', handleOutsideClick);
return () => {
window.removeEventListener('click', handleOutsideClick);
};
}, [onClose]);
useEffect(() => {
if (nameInputRef.current) {
nameInputRef.current.focus();
}
}, []);
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
onKeyDown={handleKeyDown}
>
<div
ref={modalRef}
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
role="dialog"
>
<div className="mb-4 text-xl font-bold text-black dark:text-neutral-200">
{prompt.name}
</div>
<div className="mb-4 text-sm italic text-black dark:text-neutral-200">
{prompt.description}
</div>
{updatedVariables.map((variable, index) => (
<div className="mb-4" key={index}>
<div className="mb-2 text-sm font-bold text-neutral-200">
{variable.key}
</div>
<textarea
ref={index === 0 ? nameInputRef : undefined}
className="mt-1 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
style={{ resize: 'none' }}
placeholder={`Enter a value for ${variable.key}...`}
value={variable.value}
onChange={(e) => handleChange(index, e.target.value)}
rows={3}
/>
</div>
))}
<button
className="mt-6 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
onClick={handleSubmit}
>
Submit
</button>
</div>
</div>
);
};

View File

@ -1,16 +1,18 @@
import { ChatFolder, Conversation, KeyValuePair } from '@/types';
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 { FC, useEffect, useState } 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';
import { Folders } from './Folders';
import { Search } from './Search';
import { SidebarSettings } from './SidebarSettings';
interface Props {
loading: boolean;
@ -18,10 +20,10 @@ interface Props {
lightMode: 'light' | 'dark';
selectedConversation: Conversation;
apiKey: string;
folders: ChatFolder[];
folders: Folder[];
onCreateFolder: (name: string) => void;
onDeleteFolder: (folderId: number) => void;
onUpdateFolder: (folderId: number, name: string) => void;
onDeleteFolder: (folderId: string) => void;
onUpdateFolder: (folderId: string, name: string) => void;
onNewConversation: () => void;
onToggleLightMode: (mode: 'light' | 'dark') => void;
onSelectConversation: (conversation: Conversation) => void;
@ -36,11 +38,11 @@ interface Props {
onExportConversations: () => void;
onImportConversations: (data: {
conversations: Conversation[];
folders: ChatFolder[];
folders: Folder[];
}) => void;
}
export const Sidebar: FC<Props> = ({
export const Chatbar: FC<Props> = ({
loading,
conversations,
lightMode,
@ -117,12 +119,12 @@ export const Sidebar: FC<Props> = ({
}, [searchTerm, conversations]);
return (
<aside
<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`}
>
<header className="flex items-center">
<div 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"
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('');
@ -133,7 +135,7 @@ export const Sidebar: FC<Props> = ({
</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"
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} />
@ -144,21 +146,25 @@ export const Sidebar: FC<Props> = ({
size={32}
onClick={onToggleSidebar}
/>
</header>
</div>
{conversations.length > 1 && (
<Search searchTerm={searchTerm} onSearch={setSearchTerm} />
<Search
placeholder="Search conversations..."
searchTerm={searchTerm}
onSearch={setSearchTerm}
/>
)}
<div className="flex-grow overflow-y-auto overflow-x-clip">
<div className="flex-grow overflow-auto">
{folders.length > 0 && (
<div className="flex border-b border-white/20 pb-2">
<Folders
<ChatFolders
searchTerm={searchTerm}
conversations={filteredConversations.filter(
(conversation) => conversation.folderId !== 0,
(conversation) => conversation.folderId,
)}
folders={folders}
folders={folders.filter((folder) => folder.type === 'chat')}
onDeleteFolder={onDeleteFolder}
onUpdateFolder={onUpdateFolder}
selectedConversation={selectedConversation}
@ -181,9 +187,7 @@ export const Sidebar: FC<Props> = ({
<Conversations
loading={loading}
conversations={filteredConversations.filter(
(conversation) =>
conversation.folderId === 0 ||
!folders[conversation.folderId - 1],
(conversation) => !conversation.folderId,
)}
selectedConversation={selectedConversation}
onSelectConversation={onSelectConversation}
@ -192,14 +196,16 @@ export const Sidebar: FC<Props> = ({
/>
</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 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>
<SidebarSettings
<ChatbarSettings
lightMode={lightMode}
apiKey={apiKey}
conversationsCount={conversations.length}
@ -209,6 +215,6 @@ export const Sidebar: FC<Props> = ({
onExportConversations={onExportConversations}
onImportConversations={onImportConversations}
/>
</aside>
</div>
);
};

View File

@ -1,11 +1,12 @@
import { ChatFolder, Conversation } from '@/types';
import { Conversation } from '@/types/chat';
import { Folder } from '@/types/folder';
import { IconFileExport, IconMoon, IconSun } from '@tabler/icons-react';
import { FC } from '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 { Import } from './Import';
import { Key } from './Key';
import { SidebarButton } from './SidebarButton';
interface Props {
lightMode: 'light' | 'dark';
@ -17,11 +18,11 @@ interface Props {
onExportConversations: () => void;
onImportConversations: (data: {
conversations: Conversation[];
folders: ChatFolder[];
folders: Folder[];
}) => void;
}
export const SidebarSettings: FC<Props> = ({
export const ChatbarSettings: FC<Props> = ({
lightMode,
apiKey,
conversationsCount,

View File

@ -1,7 +1,7 @@
import { IconCheck, IconTrash, IconX } from '@tabler/icons-react';
import { FC, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { SidebarButton } from './SidebarButton';
import { FC, useState } from 'react';
import { SidebarButton } from '../Sidebar/SidebarButton';
interface Props {
onClearConversations: () => void;

View File

@ -1,4 +1,5 @@
import { Conversation, KeyValuePair } from '@/types';
import { Conversation } from '@/types/chat';
import { KeyValuePair } from '@/types/data';
import {
IconCheck,
IconMessage,
@ -67,10 +68,10 @@ export const ConversationComponent: FC<Props> = ({
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">
<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-4 text-white outline-none focus:border-neutral-100"
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)}
@ -80,10 +81,10 @@ export const ConversationComponent: FC<Props> = ({
</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 ${
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-gray-500/10' : ''
selectedConversation.id === conversation.id ? 'bg-[#343541]/90' : ''
}`}
onClick={() => onSelectConversation(conversation)}
disabled={loading}

View File

@ -1,4 +1,5 @@
import { Conversation, KeyValuePair } from '@/types';
import { Conversation } from '@/types/chat';
import { KeyValuePair } from '@/types/data';
import { FC } from 'react';
import { ConversationComponent } from './Conversation';
@ -23,18 +24,21 @@ export const Conversations: FC<Props> = ({
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 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>
);
};

View File

@ -1,4 +1,6 @@
import { ChatFolder, Conversation, KeyValuePair } from '@/types';
import { Conversation } from '@/types/chat';
import { KeyValuePair } from '@/types/data';
import { Folder } from '@/types/folder';
import {
IconCaretDown,
IconCaretRight,
@ -8,14 +10,14 @@ import {
IconX,
} from '@tabler/icons-react';
import { FC, KeyboardEvent, useEffect, useState } from 'react';
import { ConversationComponent } from './Conversation';
import { ConversationComponent } from '../../Chatbar/Conversation';
interface Props {
searchTerm: string;
conversations: Conversation[];
currentFolder: ChatFolder;
onDeleteFolder: (folder: number) => void;
onUpdateFolder: (folder: number, name: string) => void;
currentFolder: Folder;
onDeleteFolder: (folder: string) => void;
onUpdateFolder: (folder: string, name: string) => void;
// conversation props
selectedConversation: Conversation;
loading: boolean;
@ -27,7 +29,7 @@ interface Props {
) => void;
}
export const Folder: FC<Props> = ({
export const ChatFolder: FC<Props> = ({
searchTerm,
conversations,
currentFolder,
@ -58,7 +60,7 @@ export const Folder: FC<Props> = ({
setIsRenaming(false);
};
const handleDrop = (e: any, folder: ChatFolder) => {
const handleDrop = (e: any, folder: Folder) => {
if (e.dataTransfer) {
setIsOpen(true);
@ -100,7 +102,7 @@ export const Folder: FC<Props> = ({
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`}
className={`mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-[14px] leading-normal transition-colors duration-200 hover:bg-[#343541]/90`}
onClick={() => setIsOpen(!isOpen)}
onDrop={(e) => handleDrop(e, currentFolder)}
onDragOver={allowDrop}

View File

@ -1,13 +1,15 @@
import { ChatFolder, Conversation, KeyValuePair } from '@/types';
import { Conversation } from '@/types/chat';
import { KeyValuePair } from '@/types/data';
import { Folder } from '@/types/folder';
import { FC } from 'react';
import { Folder } from './Folder';
import { ChatFolder } from './ChatFolder';
interface Props {
searchTerm: string;
conversations: Conversation[];
folders: ChatFolder[];
onDeleteFolder: (folder: number) => void;
onUpdateFolder: (folder: number, name: string) => void;
folders: Folder[];
onDeleteFolder: (folder: string) => void;
onUpdateFolder: (folder: string, name: string) => void;
// conversation props
selectedConversation: Conversation;
loading: boolean;
@ -19,7 +21,7 @@ interface Props {
) => void;
}
export const Folders: FC<Props> = ({
export const ChatFolders: FC<Props> = ({
searchTerm,
conversations,
folders,
@ -35,7 +37,7 @@ export const Folders: FC<Props> = ({
return (
<div className="flex w-full flex-col gap-1 pt-2">
{folders.map((folder, index) => (
<Folder
<ChatFolder
key={index}
searchTerm={searchTerm}
conversations={conversations.filter((c) => c.folderId)}

View File

@ -0,0 +1,197 @@
import { PromptComponent } from '@/components/Promptbar/Prompt';
import { Folder } from '@/types/folder';
import { Prompt } from '@/types/prompt';
import {
IconCaretDown,
IconCaretRight,
IconCheck,
IconPencil,
IconTrash,
IconX,
} from '@tabler/icons-react';
import { FC, KeyboardEvent, useEffect, useState } from 'react';
interface Props {
searchTerm: string;
prompts: Prompt[];
currentFolder: Folder;
onDeleteFolder: (folder: string) => void;
onUpdateFolder: (folder: string, name: string) => void;
// prompt props
onDeletePrompt: (prompt: Prompt) => void;
onUpdatePrompt: (prompt: Prompt) => void;
}
export const PromptFolder: FC<Props> = ({
searchTerm,
prompts,
currentFolder,
onDeleteFolder,
onUpdateFolder,
// prompt props
onDeletePrompt,
onUpdatePrompt,
}) => {
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: Folder) => {
if (e.dataTransfer) {
setIsOpen(true);
const prompt = JSON.parse(e.dataTransfer.getData('prompt'));
const updatedPrompt = {
...prompt,
folderId: folder.id,
};
onUpdatePrompt(updatedPrompt);
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-[14px] 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
? prompts.map((prompt, index) => {
if (prompt.folderId === currentFolder.id) {
return (
<div key={index} className="ml-5 gap-2 border-l pl-2 pt-2">
<PromptComponent
prompt={prompt}
onDeletePrompt={onDeletePrompt}
onUpdatePrompt={onUpdatePrompt}
/>
</div>
);
}
})
: null}
</div>
);
};

View File

@ -0,0 +1,44 @@
import { Folder } from '@/types/folder';
import { Prompt } from '@/types/prompt';
import { FC } from 'react';
import { PromptFolder } from './PromptFolder';
interface Props {
searchTerm: string;
prompts: Prompt[];
folders: Folder[];
onDeleteFolder: (folder: string) => void;
onUpdateFolder: (folder: string, name: string) => void;
// prompt props
onDeletePrompt: (prompt: Prompt) => void;
onUpdatePrompt: (prompt: Prompt) => void;
}
export const PromptFolders: FC<Props> = ({
searchTerm,
prompts,
folders,
onDeleteFolder,
onUpdateFolder,
// prompt props
onDeletePrompt,
onUpdatePrompt,
}) => {
return (
<div className="flex w-full flex-col gap-1 pt-2">
{folders.map((folder, index) => (
<PromptFolder
key={index}
searchTerm={searchTerm}
prompts={prompts.filter((p) => p.folderId)}
currentFolder={folder}
onDeleteFolder={onDeleteFolder}
onUpdateFolder={onUpdateFolder}
// prompt props
onDeletePrompt={onDeletePrompt}
onUpdatePrompt={onUpdatePrompt}
/>
))}
</div>
);
};

View File

@ -3,8 +3,8 @@ import {
programmingLanguages,
} from '@/utils/app/codeblock';
import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
import { FC, useState, memo } from 'react';
import { useTranslation } from 'next-i18next';
import { FC, memo, useState } from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';

View File

@ -1,4 +1,4 @@
import { Conversation } from '@/types';
import { Conversation } from '@/types/chat';
import { IconPlus } from '@tabler/icons-react';
import { FC } from 'react';

View File

@ -0,0 +1,123 @@
import { Prompt } from '@/types/prompt';
import {
IconBulbFilled,
IconCheck,
IconTrash,
IconX,
} from '@tabler/icons-react';
import { DragEvent, FC, useEffect, useState } from 'react';
import { PromptModal } from './PromptModal';
interface Props {
prompt: Prompt;
onUpdatePrompt: (prompt: Prompt) => void;
onDeletePrompt: (prompt: Prompt) => void;
}
export const PromptComponent: FC<Props> = ({
prompt,
onUpdatePrompt,
onDeletePrompt,
}) => {
const [showModal, setShowModal] = useState<boolean>(false);
const [isDeleting, setIsDeleting] = useState(false);
const [isRenaming, setIsRenaming] = useState(false);
const [renameValue, setRenameValue] = useState('');
const handleDragStart = (e: DragEvent<HTMLButtonElement>, prompt: Prompt) => {
if (e.dataTransfer) {
e.dataTransfer.setData('prompt', JSON.stringify(prompt));
}
};
useEffect(() => {
if (isRenaming) {
setIsDeleting(false);
} else if (isDeleting) {
setIsRenaming(false);
}
}, [isRenaming, isDeleting]);
return (
<>
<button
className="text-sidebar flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-[14px] transition-colors duration-200 hover:bg-[#343541]/90"
draggable="true"
onClick={(e) => {
e.stopPropagation();
setShowModal(true);
}}
onDragStart={(e) => handleDragStart(e, prompt)}
onMouseLeave={() => {
setIsDeleting(false);
setIsRenaming(false);
setRenameValue('');
}}
>
<IconBulbFilled 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)}
autoFocus
/>
) : (
<div className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap pr-1 text-left">
{prompt.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) {
onDeletePrompt(prompt);
}
setIsDeleting(false);
}}
/>
<IconX
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={16}
onClick={(e) => {
e.stopPropagation();
setIsDeleting(false);
}}
/>
</div>
)}
{!isDeleting && !isRenaming && (
<div className="-ml-2 flex gap-1">
<IconTrash
className=" min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
onClick={(e) => {
e.stopPropagation();
setIsDeleting(true);
}}
/>
</div>
)}
</button>
{showModal && (
<PromptModal
prompt={prompt}
onClose={() => setShowModal(false)}
onUpdatePrompt={onUpdatePrompt}
/>
)}
</>
);
};

View File

@ -0,0 +1,117 @@
import { Prompt } from '@/types/prompt';
import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
interface Props {
prompt: Prompt;
onClose: () => void;
onUpdatePrompt: (prompt: Prompt) => void;
}
export const PromptModal: FC<Props> = ({ prompt, onClose, onUpdatePrompt }) => {
const [name, setName] = useState(prompt.name);
const [description, setDescription] = useState(prompt.description);
const [content, setContent] = useState(prompt.content);
const modalRef = useRef<HTMLDivElement>(null);
const nameInputRef = useRef<HTMLInputElement>(null);
const handleEnter = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
onUpdatePrompt({ ...prompt, name, description, content: content.trim() });
onClose();
}
};
useEffect(() => {
const handleOutsideClick = (e: MouseEvent) => {
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
onClose();
}
};
window.addEventListener('click', handleOutsideClick);
return () => {
window.removeEventListener('click', handleOutsideClick);
};
}, [onClose]);
useEffect(() => {
nameInputRef.current?.focus();
}, []);
return (
<div
className="z-100 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
onKeyDown={handleEnter}
>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-screen items-center justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div
className="hidden sm:inline-block sm:h-screen sm:align-middle"
aria-hidden="true"
/>
<div
ref={modalRef}
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
role="dialog"
>
<div className="text-sm font-bold text-black dark:text-neutral-200">
Name
</div>
<input
ref={nameInputRef}
className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
placeholder="A name for your prompt."
value={name}
onChange={(e) => setName(e.target.value)}
/>
<div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
Description
</div>
<textarea
className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
style={{ resize: 'none' }}
placeholder="A description for your prompt."
value={description}
onChange={(e) => setDescription(e.target.value)}
rows={3}
/>
<div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
Prompt
</div>
<textarea
className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
style={{ resize: 'none' }}
placeholder="Prompt content. Use {{}} to denote a variable. Ex: {{name}} is a {{adjective}} {{noun}}"
value={content}
onChange={(e) => setContent(e.target.value)}
rows={10}
/>
<button
type="button"
className="mt-6 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
onClick={() => {
const updatedPrompt = {
...prompt,
name,
description,
content: content.trim(),
};
onUpdatePrompt(updatedPrompt);
onClose();
}}
>
Save
</button>
</div>
</div>
</div>
</div>
);
};

View File

@ -0,0 +1,175 @@
import { Folder } from '@/types/folder';
import { Prompt } from '@/types/prompt';
import {
IconArrowBarRight,
IconFolderPlus,
IconPlus,
} from '@tabler/icons-react';
import { FC, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PromptFolders } from '../Folders/Prompt/PromptFolders';
import { Search } from '../Sidebar/Search';
import { PromptbarSettings } from './PromptbarSettings';
import { Prompts } from './Prompts';
interface Props {
prompts: Prompt[];
folders: Folder[];
onCreateFolder: (name: string) => void;
onDeleteFolder: (folderId: string) => void;
onUpdateFolder: (folderId: string, name: string) => void;
onToggleSidebar: () => void;
onCreatePrompt: () => void;
onUpdatePrompt: (prompt: Prompt) => void;
onDeletePrompt: (prompt: Prompt) => void;
}
export const Promptbar: FC<Props> = ({
folders,
prompts,
onCreateFolder,
onDeleteFolder,
onUpdateFolder,
onCreatePrompt,
onUpdatePrompt,
onDeletePrompt,
onToggleSidebar,
}) => {
const { t } = useTranslation('promptbar');
const [searchTerm, setSearchTerm] = useState<string>('');
const [filteredPrompts, setFilteredPrompts] = useState<Prompt[]>(prompts);
const handleUpdatePrompt = (prompt: Prompt) => {
onUpdatePrompt(prompt);
setSearchTerm('');
};
const handleDeletePrompt = (prompt: Prompt) => {
onDeletePrompt(prompt);
setSearchTerm('');
};
const handleDrop = (e: any) => {
if (e.dataTransfer) {
const prompt = JSON.parse(e.dataTransfer.getData('prompt'));
const updatedPrompt = {
...prompt,
folderId: e.target.dataset.folderId,
};
onUpdatePrompt(updatedPrompt);
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) {
setFilteredPrompts(
prompts.filter((prompt) => {
const searchable =
prompt.name.toLowerCase() +
' ' +
prompt.description.toLowerCase() +
' ' +
prompt.content.toLowerCase();
return searchable.includes(searchTerm.toLowerCase());
}),
);
} else {
setFilteredPrompts(prompts);
}
}, [searchTerm, prompts]);
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 text-[14px] transition-all sm:relative sm:top-0`}
>
<div className="flex items-center">
<button
className="text-sidebar flex w-[190px] flex-shrink-0 cursor-pointer select-none items-center gap-3 rounded-md border border-white/20 p-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
onClick={() => {
onCreatePrompt();
setSearchTerm('');
}}
>
<IconPlus size={16} />
{t('New prompt')}
</button>
<button
className="ml-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
onClick={() => onCreateFolder(t('New folder'))}
>
<IconFolderPlus size={16} />
</button>
<IconArrowBarRight
className="ml-1 hidden cursor-pointer p-1 text-neutral-300 hover:text-neutral-400 sm:flex"
size={32}
onClick={onToggleSidebar}
/>
</div>
{prompts.length > 1 && (
<Search
placeholder="Search prompts..."
searchTerm={searchTerm}
onSearch={setSearchTerm}
/>
)}
<div className="flex-grow overflow-auto">
{folders.length > 0 && (
<div className="flex border-b border-white/20 pb-2">
<PromptFolders
searchTerm={searchTerm}
prompts={filteredPrompts}
folders={folders.filter((folder) => folder.type === 'prompt')}
onUpdateFolder={onUpdateFolder}
onDeleteFolder={onDeleteFolder}
// prompt props
onDeletePrompt={handleDeletePrompt}
onUpdatePrompt={handleUpdatePrompt}
/>
</div>
)}
{prompts.length > 0 ? (
<div
className="h-full pt-2"
onDrop={(e) => handleDrop(e)}
onDragOver={allowDrop}
onDragEnter={highlightDrop}
onDragLeave={removeHighlight}
>
<Prompts
prompts={filteredPrompts.filter((prompt) => !prompt.folderId)}
onUpdatePrompt={handleUpdatePrompt}
onDeletePrompt={handleDeletePrompt}
/>
</div>
) : (
<div className="mt-4 text-center text-white">
<div>{t('No prompts.')}</div>
</div>
)}
</div>
<PromptbarSettings />
</div>
);
};

View File

@ -0,0 +1,7 @@
import { FC } from "react";
interface Props {}
export const PromptbarSettings: FC<Props> = () => {
return <div></div>;
};

View File

@ -0,0 +1,31 @@
import { Prompt } from '@/types/prompt';
import { FC } from 'react';
import { PromptComponent } from './Prompt';
interface Props {
prompts: Prompt[];
onUpdatePrompt: (prompt: Prompt) => void;
onDeletePrompt: (prompt: Prompt) => void;
}
export const Prompts: FC<Props> = ({
prompts,
onUpdatePrompt,
onDeletePrompt,
}) => {
return (
<div className="flex w-full flex-col gap-1">
{prompts
.slice()
.reverse()
.map((prompt, index) => (
<PromptComponent
key={index}
prompt={prompt}
onUpdatePrompt={onUpdatePrompt}
onDeletePrompt={onDeletePrompt}
/>
))}
</div>
);
};

View File

@ -1,14 +1,15 @@
import { ChatFolder, Conversation } from '@/types';
import { Conversation } from '@/types/chat';
import { Folder } from '@/types/folder';
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';
import { SidebarButton } from '../Sidebar/SidebarButton';
interface Props {
onImport: (data: {
conversations: Conversation[];
folders: ChatFolder[];
folders: Folder[];
}) => void;
}

View File

@ -1,7 +1,7 @@
import { IconCheck, IconKey, IconX } from '@tabler/icons-react';
import { FC, KeyboardEvent, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { SidebarButton } from './SidebarButton';
import { FC, KeyboardEvent, useState } from 'react';
import { SidebarButton } from '../Sidebar/SidebarButton';
interface Props {
apiKey: string;

View File

@ -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}
/>

View File

@ -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>

29
package-lock.json generated
View File

@ -22,7 +22,8 @@
"react-syntax-highlighter": "^15.5.0",
"rehype-mathjax": "^4.0.2",
"remark-gfm": "^3.0.1",
"remark-math": "^5.1.1"
"remark-math": "^5.1.1",
"uuid": "^9.0.0"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.9",
@ -30,6 +31,7 @@
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
"@types/react-syntax-highlighter": "^15.5.6",
"@types/uuid": "^9.0.1",
"autoprefixer": "^10.4.14",
"eslint": "8.36.0",
"eslint-config-next": "13.2.4",
@ -574,6 +576,12 @@
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
},
"node_modules/@types/uuid": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
"integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
"dev": true
},
"node_modules/@types/web": {
"version": "0.0.46",
"resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.46.tgz",
@ -6441,6 +6449,14 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"dev": true
},
"node_modules/uuid": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
"integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
"bin": {
"uuid": "dist/bin/uuid"
}
},
"node_modules/uvu": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
@ -7088,6 +7104,12 @@
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
},
"@types/uuid": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
"integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
"dev": true
},
"@types/web": {
"version": "0.0.46",
"resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.46.tgz",
@ -11086,6 +11108,11 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"dev": true
},
"uuid": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
"integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
},
"uvu": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",

View File

@ -24,7 +24,8 @@
"react-syntax-highlighter": "^15.5.0",
"rehype-mathjax": "^4.0.2",
"remark-gfm": "^3.0.1",
"remark-math": "^5.1.1"
"remark-math": "^5.1.1",
"uuid": "^9.0.0"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.9",
@ -32,6 +33,7 @@
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
"@types/react-syntax-highlighter": "^15.5.6",
"@types/uuid": "^9.0.1",
"autoprefixer": "^10.4.14",
"eslint": "8.36.0",
"eslint-config-next": "13.2.4",

View File

@ -1,4 +1,5 @@
import { ChatBody, Message, OpenAIModelID } from '@/types';
import { ChatBody, Message } from '@/types/chat';
import { OpenAIModelID } from '@/types/openai';
import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
import { OpenAIStream } from '@/utils/server';
import tiktokenModel from '@dqbd/tiktoken/encoders/cl100k_base.json';

View File

@ -1,4 +1,4 @@
import { OpenAIModel, OpenAIModelID, OpenAIModels } from '@/types';
import { OpenAIModel, OpenAIModelID, OpenAIModels } from '@/types/openai';
import { OPENAI_API_HOST } from '@/utils/app/const';
export const config = {

View File

@ -1,17 +1,13 @@
import { Chat } from '@/components/Chat/Chat';
import { Chatbar } from '@/components/Chatbar/Chatbar';
import { Navbar } from '@/components/Mobile/Navbar';
import { Sidebar } from '@/components/Sidebar/Sidebar';
import {
ChatBody,
ChatFolder,
Conversation,
ErrorMessage,
KeyValuePair,
Message,
OpenAIModel,
OpenAIModelID,
OpenAIModels,
} from '@/types';
import { Promptbar } from '@/components/Promptbar/Promptbar';
import { ChatBody, Conversation, Message } from '@/types/chat';
import { KeyValuePair } from '@/types/data';
import { ErrorMessage } from '@/types/error';
import { Folder, FolderType } from '@/types/folder';
import { OpenAIModel, OpenAIModelID, OpenAIModels } from '@/types/openai';
import { Prompt } from '@/types/prompt';
import {
cleanConversationHistory,
cleanSelectedConversation,
@ -24,12 +20,14 @@ import {
} from '@/utils/app/conversation';
import { saveFolders } from '@/utils/app/folders';
import { exportData, importData } from '@/utils/app/importExport';
import { savePrompts } from '@/utils/app/prompts';
import { IconArrowBarLeft, IconArrowBarRight } from '@tabler/icons-react';
import { GetServerSideProps } from 'next';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import Head from 'next/head';
import { useEffect, useRef, useState } from 'react';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';
import { v4 as uuidv4 } from 'uuid';
interface HomeProps {
serverSideApiKeyIsSet: boolean;
@ -37,22 +35,36 @@ interface HomeProps {
const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
const { t } = useTranslation('chat');
const [folders, setFolders] = useState<ChatFolder[]>([]);
// STATE ----------------------------------------------
const [apiKey, setApiKey] = useState<string>('');
const [loading, setLoading] = useState<boolean>(false);
const [lightMode, setLightMode] = useState<'dark' | 'light'>('dark');
const [messageIsStreaming, setMessageIsStreaming] = useState<boolean>(false);
const [modelError, setModelError] = useState<ErrorMessage | null>(null);
const [models, setModels] = useState<OpenAIModel[]>([]);
const [folders, setFolders] = useState<Folder[]>([]);
const [conversations, setConversations] = useState<Conversation[]>([]);
const [selectedConversation, setSelectedConversation] =
useState<Conversation>();
const [loading, setLoading] = useState<boolean>(false);
const [models, setModels] = useState<OpenAIModel[]>([]);
const [lightMode, setLightMode] = useState<'dark' | 'light'>('dark');
const [messageIsStreaming, setMessageIsStreaming] = useState<boolean>(false);
const [showSidebar, setShowSidebar] = useState<boolean>(true);
const [apiKey, setApiKey] = useState<string>('');
const [messageError, setMessageError] = useState<boolean>(false);
const [modelError, setModelError] = useState<ErrorMessage | null>(null);
const [currentMessage, setCurrentMessage] = useState<Message>();
const [showSidebar, setShowSidebar] = useState<boolean>(true);
const [prompts, setPrompts] = useState<Prompt[]>([]);
const [showPromptbar, setShowPromptbar] = useState<boolean>(true);
// REFS ----------------------------------------------
const stopConversationRef = useRef<boolean>(false);
// FETCH RESPONSE ----------------------------------------------
const handleSend = async (message: Message, deleteCount = 0) => {
if (selectedConversation) {
let updatedConversation: Conversation;
@ -77,7 +89,6 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
setSelectedConversation(updatedConversation);
setLoading(true);
setMessageIsStreaming(true);
setMessageError(false);
const chatBody: ChatBody = {
model: updatedConversation.model,
@ -99,7 +110,6 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
if (!response.ok) {
setLoading(false);
setMessageIsStreaming(false);
setMessageError(true);
return;
}
@ -108,8 +118,6 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
if (!data) {
setLoading(false);
setMessageIsStreaming(false);
setMessageError(true);
return;
}
@ -204,6 +212,8 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
}
};
// FETCH MODELS ----------------------------------------------
const fetchModels = async (key: string) => {
const error = {
title: t('Error fetching models.'),
@ -249,6 +259,8 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
setModelError(null);
};
// BASIC HANDLERS --------------------------------------------
const handleLightMode = (mode: 'dark' | 'light') => {
setLightMode(mode);
localStorage.setItem('theme', mode);
@ -259,18 +271,33 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
localStorage.setItem('apiKey', apiKey);
};
const handleToggleChatbar = () => {
setShowSidebar(!showSidebar);
localStorage.setItem('showChatbar', JSON.stringify(!showSidebar));
};
const handleTogglePromptbar = () => {
setShowPromptbar(!showPromptbar);
localStorage.setItem('showPromptbar', JSON.stringify(!showPromptbar));
};
const handleExportData = () => {
exportData();
};
const handleImportConversations = (data: {
conversations: Conversation[];
folders: ChatFolder[];
folders: Folder[];
}) => {
importData(data.conversations, data.folders);
setConversations(data.conversations);
setSelectedConversation(data.conversations[data.conversations.length - 1]);
setFolders(data.folders);
const updatedConversations = [...conversations, ...data.conversations];
const updatedFolders = [...folders, ...data.folders];
importData(updatedConversations, updatedFolders);
setConversations(updatedConversations);
setSelectedConversation(
updatedConversations[updatedConversations.length - 1],
);
setFolders(updatedFolders);
};
const handleSelectConversation = (conversation: Conversation) => {
@ -278,12 +305,13 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
saveConversation(conversation);
};
const handleCreateFolder = (name: string) => {
const lastFolder = folders[folders.length - 1];
// FOLDER OPERATIONS --------------------------------------------
const newFolder: ChatFolder = {
id: lastFolder ? lastFolder.id + 1 : 1,
const handleCreateFolder = (name: string, type: FolderType) => {
const newFolder: Folder = {
id: uuidv4(),
name,
type,
};
const updatedFolders = [...folders, newFolder];
@ -292,7 +320,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
saveFolders(updatedFolders);
};
const handleDeleteFolder = (folderId: number) => {
const handleDeleteFolder = (folderId: string) => {
const updatedFolders = folders.filter((f) => f.id !== folderId);
setFolders(updatedFolders);
saveFolders(updatedFolders);
@ -301,7 +329,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
if (c.folderId === folderId) {
return {
...c,
folderId: 0,
folderId: null,
};
}
@ -309,9 +337,22 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
});
setConversations(updatedConversations);
saveConversations(updatedConversations);
const updatedPrompts: Prompt[] = prompts.map((p) => {
if (p.folderId === folderId) {
return {
...p,
folderId: null,
};
}
return p;
});
setPrompts(updatedPrompts);
savePrompts(updatedPrompts);
};
const handleUpdateFolder = (folderId: number, name: string) => {
const handleUpdateFolder = (folderId: string, name: string) => {
const updatedFolders = folders.map((f) => {
if (f.id === folderId) {
return {
@ -327,18 +368,18 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
saveFolders(updatedFolders);
};
// CONVERSATION OPERATIONS --------------------------------------------
const handleNewConversation = () => {
const lastConversation = conversations[conversations.length - 1];
const newConversation: Conversation = {
id: lastConversation ? lastConversation.id + 1 : 1,
name: `${t('Conversation')} ${
lastConversation ? lastConversation.id + 1 : 1
}`,
id: uuidv4(),
name: `${t('New Conversation')}`,
messages: [],
model: OpenAIModels[OpenAIModelID.GPT_3_5],
prompt: DEFAULT_SYSTEM_PROMPT,
folderId: 0,
folderId: null,
};
const updatedConversations = [...conversations, newConversation];
@ -366,12 +407,12 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
saveConversation(updatedConversations[updatedConversations.length - 1]);
} else {
setSelectedConversation({
id: 1,
id: uuidv4(),
name: 'New conversation',
messages: [],
model: OpenAIModels[OpenAIModelID.GPT_3_5],
prompt: DEFAULT_SYSTEM_PROMPT,
folderId: 0,
folderId: null,
});
localStorage.removeItem('selectedConversation');
}
@ -400,17 +441,18 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
localStorage.removeItem('conversationHistory');
setSelectedConversation({
id: 1,
id: uuidv4(),
name: 'New conversation',
messages: [],
model: OpenAIModels[OpenAIModelID.GPT_3_5],
prompt: DEFAULT_SYSTEM_PROMPT,
folderId: 0,
folderId: null,
});
localStorage.removeItem('selectedConversation');
setFolders([]);
localStorage.removeItem('folders');
const updatedFolders = folders.filter((f) => f.type !== 'chat');
setFolders(updatedFolders);
saveFolders(updatedFolders);
};
const handleEditMessage = (message: Message, messageIndex: number) => {
@ -440,6 +482,49 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
}
};
// PROMPT OPERATIONS --------------------------------------------
const handleCreatePrompt = () => {
const lastPrompt = prompts[prompts.length - 1];
const newPrompt: Prompt = {
id: uuidv4(),
name: `Prompt ${prompts.length + 1}`,
description: '',
content: '',
model: OpenAIModels[OpenAIModelID.GPT_3_5],
folderId: null,
};
const updatedPrompts = [...prompts, newPrompt];
setPrompts(updatedPrompts);
savePrompts(updatedPrompts);
};
const handleUpdatePrompt = (prompt: Prompt) => {
const updatedPrompts = prompts.map((p) => {
if (p.id === prompt.id) {
return prompt;
}
return p;
});
setPrompts(updatedPrompts);
savePrompts(updatedPrompts);
};
const handleDeletePrompt = (prompt: Prompt) => {
const updatedPrompts = prompts.filter((p) => p.id !== prompt.id);
setPrompts(updatedPrompts);
savePrompts(updatedPrompts);
};
const handleCreatePromptFolder = (name: string) => {};
// EFFECTS --------------------------------------------
useEffect(() => {
if (currentMessage) {
handleSend(currentMessage);
@ -459,6 +544,8 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
}
}, [apiKey]);
// ON LOAD --------------------------------------------
useEffect(() => {
const theme = localStorage.getItem('theme');
if (theme) {
@ -477,11 +564,26 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
setShowSidebar(false);
}
const showChatbar = localStorage.getItem('showChatbar');
if (showChatbar) {
setShowSidebar(showChatbar === 'true');
}
const showPromptbar = localStorage.getItem('showPromptbar');
if (showPromptbar) {
setShowPromptbar(showPromptbar === 'true');
}
const folders = localStorage.getItem('folders');
if (folders) {
setFolders(JSON.parse(folders));
}
const prompts = localStorage.getItem('prompts');
if (prompts) {
setPrompts(JSON.parse(prompts));
}
const conversationHistory = localStorage.getItem('conversationHistory');
if (conversationHistory) {
const parsedConversationHistory: Conversation[] =
@ -502,12 +604,12 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
setSelectedConversation(cleanedSelectedConversation);
} else {
setSelectedConversation({
id: 1,
id: uuidv4(),
name: 'New conversation',
messages: [],
model: OpenAIModels[OpenAIModelID.GPT_3_5],
prompt: DEFAULT_SYSTEM_PROMPT,
folderId: 0,
folderId: null,
});
}
}, [serverSideApiKeyIsSet]);
@ -517,7 +619,10 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
<Head>
<title>Chatbot UI</title>
<meta name="description" content="ChatGPT but better." />
<meta name="viewport" content="height=device-height ,width=device-width, initial-scale=1, user-scalable=no" />
<meta
name="viewport"
content="height=device-height ,width=device-width, initial-scale=1, user-scalable=no"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
{selectedConversation && (
@ -534,7 +639,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
<div className="flex h-full w-full pt-[48px] sm:pt-0">
{showSidebar ? (
<div>
<Sidebar
<Chatbar
loading={messageIsStreaming}
conversations={conversations}
lightMode={lightMode}
@ -542,13 +647,13 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
apiKey={apiKey}
folders={folders}
onToggleLightMode={handleLightMode}
onCreateFolder={handleCreateFolder}
onCreateFolder={(name) => handleCreateFolder(name, 'chat')}
onDeleteFolder={handleDeleteFolder}
onUpdateFolder={handleUpdateFolder}
onNewConversation={handleNewConversation}
onSelectConversation={handleSelectConversation}
onDeleteConversation={handleDeleteConversation}
onToggleSidebar={() => setShowSidebar(!showSidebar)}
onToggleSidebar={handleToggleChatbar}
onUpdateConversation={handleUpdateConversation}
onApiKeyChange={handleApiKeyChange}
onClearConversations={handleClearConversations}
@ -558,35 +663,66 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
<IconArrowBarLeft
className="fixed top-5 left-[270px] z-50 h-7 w-7 cursor-pointer hover:text-gray-400 dark:text-white dark:hover:text-gray-300 sm:top-0.5 sm:left-[270px] sm:h-8 sm:w-8 sm:text-neutral-700"
onClick={() => setShowSidebar(!showSidebar)}
onClick={handleToggleChatbar}
/>
<div
onClick={() => setShowSidebar(!showSidebar)}
onClick={handleToggleChatbar}
className="absolute top-0 left-0 z-10 h-full w-full bg-black opacity-70 sm:hidden"
></div>
</div>
) : (
<IconArrowBarRight
className="fixed top-2.5 left-4 z-50 h-7 w-7 cursor-pointer text-white hover:text-gray-400 dark:text-white dark:hover:text-gray-300 sm:top-0.5 sm:left-4 sm:h-8 sm:w-8 sm:text-neutral-700"
onClick={() => setShowSidebar(!showSidebar)}
onClick={handleToggleChatbar}
/>
)}
<Chat
conversation={selectedConversation}
messageIsStreaming={messageIsStreaming}
apiKey={apiKey}
serverSideApiKeyIsSet={serverSideApiKeyIsSet}
modelError={modelError}
messageError={messageError}
models={models}
loading={loading}
onSend={handleSend}
onUpdateConversation={handleUpdateConversation}
onEditMessage={handleEditMessage}
stopConversationRef={stopConversationRef}
/>
<div className="flex flex-1">
<Chat
conversation={selectedConversation}
messageIsStreaming={messageIsStreaming}
apiKey={apiKey}
serverSideApiKeyIsSet={serverSideApiKeyIsSet}
modelError={modelError}
models={models}
loading={loading}
prompts={prompts}
onSend={handleSend}
onUpdateConversation={handleUpdateConversation}
onEditMessage={handleEditMessage}
stopConversationRef={stopConversationRef}
/>
</div>
{showPromptbar ? (
<div>
<Promptbar
prompts={prompts}
folders={folders}
onToggleSidebar={handleTogglePromptbar}
onCreatePrompt={handleCreatePrompt}
onUpdatePrompt={handleUpdatePrompt}
onDeletePrompt={handleDeletePrompt}
onCreateFolder={(name) => handleCreateFolder(name, 'prompt')}
onDeleteFolder={handleDeleteFolder}
onUpdateFolder={handleUpdateFolder}
/>
<IconArrowBarRight
className="fixed top-5 right-[270px] z-50 h-7 w-7 cursor-pointer hover:text-gray-400 dark:text-white dark:hover:text-gray-300 sm:top-0.5 sm:right-[270px] sm:h-8 sm:w-8 sm:text-neutral-700"
onClick={handleTogglePromptbar}
/>
<div
onClick={handleTogglePromptbar}
className="absolute top-0 left-0 z-10 h-full w-full bg-black opacity-70 sm:hidden"
></div>
</div>
) : (
<IconArrowBarLeft
className="fixed top-2.5 right-4 z-50 h-7 w-7 cursor-pointer text-white hover:text-gray-400 dark:text-white dark:hover:text-gray-300 sm:top-0.5 sm:right-4 sm:h-8 sm:w-8 sm:text-neutral-700"
onClick={handleTogglePromptbar}
/>
)}
</div>
</main>
)}

24
types/chat.ts Normal file
View File

@ -0,0 +1,24 @@
import { OpenAIModel } from './openai';
export interface Message {
role: Role;
content: string;
}
export type Role = 'assistant' | 'user';
export interface ChatBody {
model: OpenAIModel;
messages: Message[];
key: string;
prompt: string;
}
export interface Conversation {
id: string;
name: string;
messages: Message[];
model: OpenAIModel;
prompt: string;
folderId: string | null;
}

4
types/data.ts Normal file
View File

@ -0,0 +1,4 @@
export interface KeyValuePair {
key: string;
value: any;
}

6
types/env.d.ts vendored
View File

@ -1,6 +0,0 @@
namespace NodeJS {
interface ProcessEnv {
OPENAI_API_KEY: string;
OPENAI_API_HOST?: string;
}
}

4
types/env.ts Normal file
View File

@ -0,0 +1,4 @@
export interface ProcessEnv {
OPENAI_API_KEY: string;
OPENAI_API_HOST?: string;
}

5
types/error.ts Normal file
View File

@ -0,0 +1,5 @@
export interface ErrorMessage {
code: String | null;
title: String;
messageLines: String[];
}

7
types/folder.ts Normal file
View File

@ -0,0 +1,7 @@
export interface Folder {
id: string;
name: string;
type: FolderType;
}
export type FolderType = 'chat' | 'prompt';

View File

@ -1,69 +1 @@
export interface OpenAIModel {
id: string;
name: string;
}
export enum OpenAIModelID {
GPT_3_5 = 'gpt-3.5-turbo',
GPT_4 = 'gpt-4',
}
export const OpenAIModels: Record<OpenAIModelID, OpenAIModel> = {
[OpenAIModelID.GPT_3_5]: {
id: OpenAIModelID.GPT_3_5,
name: 'Default (GPT-3.5)',
},
[OpenAIModelID.GPT_4]: {
id: OpenAIModelID.GPT_4,
name: 'GPT-4',
},
};
export interface Message {
role: Role;
content: string;
}
export type Role = 'assistant' | 'user';
export interface ChatFolder {
id: number;
name: string;
}
export interface Conversation {
id: number;
name: string;
messages: Message[];
model: OpenAIModel;
prompt: string;
folderId: number;
}
export interface ChatBody {
model: OpenAIModel;
messages: Message[];
key: string;
prompt: string;
}
export interface KeyValuePair {
key: string;
value: any;
}
// keep track of local storage schema
export interface LocalStorage {
apiKey: string;
conversationHistory: Conversation[];
selectedConversation: Conversation;
theme: 'light' | 'dark';
// added folders (3/23/23)
folders: ChatFolder[];
}
export interface ErrorMessage {
code: String | null;
title: String;
messageLines: String[];
}
export {};

20
types/openai.ts Normal file
View File

@ -0,0 +1,20 @@
export interface OpenAIModel {
id: string;
name: string;
}
export enum OpenAIModelID {
GPT_3_5 = 'gpt-3.5-turbo',
GPT_4 = 'gpt-4',
}
export const OpenAIModels: Record<OpenAIModelID, OpenAIModel> = {
[OpenAIModelID.GPT_3_5]: {
id: OpenAIModelID.GPT_3_5,
name: 'Default (GPT-3.5)',
},
[OpenAIModelID.GPT_4]: {
id: OpenAIModelID.GPT_4,
name: 'GPT-4',
},
};

10
types/prompt.ts Normal file
View File

@ -0,0 +1,10 @@
import { OpenAIModel } from './openai';
export interface Prompt {
id: string;
name: string;
description: string;
content: string;
model: OpenAIModel;
folderId: string | null;
}

18
types/storage.ts Normal file
View File

@ -0,0 +1,18 @@
import { Conversation } from './chat';
import { Folder } from './folder';
import { Prompt } from './prompt';
// keep track of local storage schema
export interface LocalStorage {
apiKey: string;
conversationHistory: Conversation[];
selectedConversation: Conversation;
theme: 'light' | 'dark';
// added folders (3/23/23)
folders: Folder[];
// added prompts (3/26/23)
prompts: Prompt[];
// added showChatbar and showPromptbar (3/26/23)
showChatbar: boolean;
showPromptbar: boolean;
}

View File

@ -1,10 +1,12 @@
import { Conversation, OpenAIModelID, OpenAIModels } from '@/types';
import { Conversation } from '@/types/chat';
import { OpenAIModelID, OpenAIModels } from '@/types/openai';
import { DEFAULT_SYSTEM_PROMPT } from './const';
export const cleanSelectedConversation = (conversation: Conversation) => {
// added model for each conversation (3/20/23)
// added system prompt for each conversation (3/21/23)
// added folders (3/23/23)
// added prompts (3/26/23)
let updatedConversation = conversation;
@ -27,7 +29,7 @@ export const cleanSelectedConversation = (conversation: Conversation) => {
if (!updatedConversation.folderId) {
updatedConversation = {
...updatedConversation,
folderId: updatedConversation.folderId || 0,
folderId: updatedConversation.folderId || null,
};
}
@ -38,6 +40,7 @@ export const cleanConversationHistory = (history: Conversation[]) => {
// added model for each conversation (3/20/23)
// added system prompt for each conversation (3/21/23)
// added folders (3/23/23)
// added prompts (3/26/23)
return history.reduce((acc: Conversation[], conversation) => {
try {
@ -50,7 +53,7 @@ export const cleanConversationHistory = (history: Conversation[]) => {
}
if (!conversation.folderId) {
conversation.folderId = 0;
conversation.folderId = null;
}
acc.push(conversation);

View File

@ -1,4 +1,4 @@
import { Conversation } from '@/types';
import { Conversation } from '@/types/chat';
export const updateConversation = (
updatedConversation: Conversation,

View File

@ -1,5 +1,5 @@
import { ChatFolder } from '@/types';
import { Folder } from '@/types/folder';
export const saveFolders = (folders: ChatFolder[]) => {
export const saveFolders = (folders: Folder[]) => {
localStorage.setItem('folders', JSON.stringify(folders));
};

View File

@ -1,4 +1,5 @@
import { ChatFolder, Conversation } from '@/types';
import { Conversation } from '@/types/chat';
import { Folder } from '@/types/folder';
function currentDate() {
const date = new Date();
@ -40,7 +41,7 @@ export const exportData = () => {
export const importData = (
conversations: Conversation[],
folders: ChatFolder[],
folders: Folder[],
) => {
localStorage.setItem('conversationHistory', JSON.stringify(conversations));
localStorage.setItem(

22
utils/app/prompts.ts Normal file
View File

@ -0,0 +1,22 @@
import { Prompt } from '@/types/prompt';
export const updatePrompt = (updatedPrompt: Prompt, allPrompts: Prompt[]) => {
const updatedPrompts = allPrompts.map((c) => {
if (c.id === updatedPrompt.id) {
return updatedPrompt;
}
return c;
});
savePrompts(updatedPrompts);
return {
single: updatedPrompt,
all: updatedPrompts,
};
};
export const savePrompts = (prompts: Prompt[]) => {
localStorage.setItem('prompts', JSON.stringify(prompts));
};

View File

@ -1,4 +1,5 @@
import { Message, OpenAIModel } from '@/types';
import { Message } from '@/types/chat';
import { OpenAIModel } from '@/types/openai';
import {
createParser,
ParsedEvent,