schihei/chatbot-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add in prettier and format code for consistency (#168)

Browse Source
This commit is contained in:
Simon Holmes
2023-03-26 05:13:18 +00:00
committed by GitHub
parent b843f6e0e0
commit d6973b9ccc
72 changed files with 1140 additions and 4573 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chat/Chat.tsx
+81 -31
View File
@@ -1,12 +1,25 @@
import { Conversation, ErrorMessage, KeyValuePair, Message, OpenAIModel } from "@/types";
import { FC, MutableRefObject, useCallback, useEffect, useRef, useState } from "react";
import { useTranslation } from "next-i18next";
import { ChatInput } from "./ChatInput";
import { ChatLoader } from "./ChatLoader";
import { ChatMessage } from "./ChatMessage";
import { ErrorMessageDiv } from "./ErrorMessageDiv";
import { ModelSelect } from "./ModelSelect";
import { SystemPrompt } from "./SystemPrompt";
import {
Conversation,
ErrorMessage,
KeyValuePair,
Message,
OpenAIModel,
} from '@/types';
import {
FC,
MutableRefObject,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { useTranslation } from 'next-i18next';
import { ChatInput } from './ChatInput';
import { ChatLoader } from './ChatLoader';
import { ChatMessage } from './ChatMessage';
import { ErrorMessageDiv } from './ErrorMessageDiv';
import { ModelSelect } from './ModelSelect';
import { SystemPrompt } from './SystemPrompt';
interface Props {
conversation: Conversation;
@@ -17,14 +30,31 @@ interface Props {
modelError: ErrorMessage | null;
messageError: boolean;
loading: boolean;
lightMode: "light" | "dark";
lightMode: 'light' | 'dark';
onSend: (message: Message, deleteCount?: number) => void;
onUpdateConversation: (conversation: Conversation, data: KeyValuePair) => void;
onUpdateConversation: (
conversation: Conversation,
data: KeyValuePair,
) => void;
onEditMessage: (message: Message, messageIndex: number) => void;
stopConversationRef: MutableRefObject<boolean>;
}
export const Chat: FC<Props> = ({ conversation, models, apiKey, serverSideApiKeyIsSet, messageIsStreaming, modelError, messageError, loading, lightMode, onSend, onUpdateConversation, onEditMessage, stopConversationRef }) => {
export const Chat: FC<Props> = ({
conversation,
models,
apiKey,
serverSideApiKeyIsSet,
messageIsStreaming,
modelError,
messageError,
loading,
lightMode,
onSend,
onUpdateConversation,
onEditMessage,
stopConversationRef,
}) => {
const { t } = useTranslation('chat');
const [currentMessage, setCurrentMessage] = useState<Message>();
const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
@@ -42,7 +72,8 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, serverSideApiKey
const handleScroll = () => {
if (chatContainerRef.current) {
const { scrollTop, scrollHeight, clientHeight } = chatContainerRef.current;
const { scrollTop, scrollHeight, clientHeight } =
chatContainerRef.current;
const bottomTolerance = 5;
if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
@@ -62,43 +93,60 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, serverSideApiKey
const chatContainer = chatContainerRef.current;
if (chatContainer) {
chatContainer.addEventListener("scroll", handleScroll);
chatContainer.addEventListener('scroll', handleScroll);
return () => {
chatContainer.removeEventListener("scroll", handleScroll);
chatContainer.removeEventListener('scroll', handleScroll);
};
}
}, []);
return (
<div className="relative flex-1 overflow-none dark:bg-[#343541] bg-white">
<div className="overflow-none relative flex-1 bg-white dark:bg-[#343541]">
{!(apiKey || serverSideApiKeyIsSet) ? (
<div className="flex flex-col justify-center mx-auto h-full w-[300px] sm:w-[500px] space-y-6">
<div className="text-2xl font-semibold text-center text-gray-800 dark:text-gray-100">{t('OpenAI API Key Required')}</div>
<div className="text-center text-gray-500 dark:text-gray-400">{t('Please set your OpenAI API key in the bottom left of the sidebar.')}</div>
<div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[500px]">
<div className="text-center text-2xl font-semibold text-gray-800 dark:text-gray-100">
{t('OpenAI API Key Required')}
</div>
<div className="text-center text-gray-500 dark:text-gray-400">
{t(
'Please set your OpenAI API key in the bottom left of the sidebar.',
)}
</div>
</div>
) : modelError ? <ErrorMessageDiv error={modelError} /> : (
) : modelError ? (
<ErrorMessageDiv error={modelError} />
) : (
<>
<div
className="overflow-scroll max-h-full"
ref={chatContainerRef}
>
<div className="max-h-full overflow-scroll" ref={chatContainerRef}>
{conversation.messages.length === 0 ? (
<>
<div className="flex flex-col mx-auto pt-12 space-y-10 w-[350px] sm:w-[600px]">
<div className="text-4xl font-semibold text-center text-gray-800 dark:text-gray-100">{models.length === 0 ? t("Loading...") : "Chatbot UI"}</div>
<div className="mx-auto flex w-[350px] flex-col space-y-10 pt-12 sm:w-[600px]">
<div className="text-center text-4xl font-semibold text-gray-800 dark:text-gray-100">
{models.length === 0 ? t('Loading...') : 'Chatbot UI'}
</div>
{models.length > 0 && (
<div className="flex flex-col h-full space-y-4 border p-4 rounded border-neutral-500">
<div className="flex h-full flex-col space-y-4 rounded border border-neutral-500 p-4">
<ModelSelect
model={conversation.model}
models={models}
onModelChange={(model) => onUpdateConversation(conversation, { key: "model", value: model })}
onModelChange={(model) =>
onUpdateConversation(conversation, {
key: 'model',
value: model,
})
}
/>
<SystemPrompt
conversation={conversation}
onChangePrompt={(prompt) => onUpdateConversation(conversation, { key: "prompt", value: prompt })}
onChangePrompt={(prompt) =>
onUpdateConversation(conversation, {
key: 'prompt',
value: prompt,
})
}
/>
</div>
)}
@@ -106,7 +154,9 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, serverSideApiKey
</>
) : (
<>
<div className="flex justify-center py-2 text-neutral-500 bg-neutral-100 dark:bg-[#444654] dark:text-neutral-200 text-sm border border-b-neutral-300 dark:border-none">{t('Model')}: {conversation.model.name}</div>
<div className="flex justify-center border border-b-neutral-300 bg-neutral-100 py-2 text-sm text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200">
{t('Model')}: {conversation.model.name}
</div>
{conversation.messages.map((message, index) => (
<ChatMessage
@@ -121,7 +171,7 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, serverSideApiKey
{loading && <ChatLoader />}
<div
className="bg-white dark:bg-[#343541] h-[162px]"
className="h-[162px] bg-white dark:bg-[#343541]"
ref={messagesEndRef}
/>
</>
components/Chat/ChatInput.tsx
+60 -39
View File
@@ -1,7 +1,13 @@
import { Message, OpenAIModel, OpenAIModelID } from "@/types";
import { IconPlayerStop, IconRepeat, IconSend } from "@tabler/icons-react";
import { FC, KeyboardEvent, MutableRefObject, useEffect, useState } from "react";
import { useTranslation } from "next-i18next";
import { Message, OpenAIModel, OpenAIModelID } from '@/types';
import { IconPlayerStop, IconRepeat, IconSend } from '@tabler/icons-react';
import {
FC,
KeyboardEvent,
MutableRefObject,
useEffect,
useState,
} from 'react';
import { useTranslation } from 'next-i18next';
interface Props {
messageIsStreaming: boolean;
@@ -13,7 +19,15 @@ interface Props {
textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
}
export const ChatInput: FC<Props> = ({ messageIsStreaming, model, messages, onSend, onRegenerate, stopConversationRef, textareaRef }) => {
export const ChatInput: FC<Props> = ({
messageIsStreaming,
model,
messages,
onSend,
onRegenerate,
stopConversationRef,
textareaRef,
}) => {
const { t } = useTranslation('chat');
const [content, setContent] = useState<string>();
const [isTyping, setIsTyping] = useState<boolean>(false);
@@ -23,7 +37,12 @@ export const ChatInput: FC<Props> = ({ messageIsStreaming, model, messages, onSe
const maxLength = model.id === OpenAIModelID.GPT_3_5 ? 12000 : 24000;
if (value.length > maxLength) {
alert(t(`Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`, { maxLength, valueLength: value.length }));
alert(
t(
`Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`,
{ maxLength, valueLength: value.length },
),
);
return;
}
@@ -36,12 +55,12 @@ export const ChatInput: FC<Props> = ({ messageIsStreaming, model, messages, onSe
}
if (!content) {
alert(t("Please enter a message"));
alert(t('Please enter a message'));
return;
}
onSend({ role: "user", content });
setContent("");
onSend({ role: 'user', content });
setContent('');
if (window.innerWidth < 640 && textareaRef && textareaRef.current) {
textareaRef.current.blur();
@@ -49,14 +68,16 @@ export const ChatInput: FC<Props> = ({ messageIsStreaming, model, messages, onSe
};
const isMobile = () => {
const userAgent = typeof window.navigator === "undefined" ? "" : navigator.userAgent;
const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
const userAgent =
typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
const mobileRegex =
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
return mobileRegex.test(userAgent);
};
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
if (!isTyping) {
if (e.key === "Enter" && !e.shiftKey && !isMobile()) {
if (e.key === 'Enter' && !e.shiftKey && !isMobile()) {
e.preventDefault();
handleSend();
}
@@ -65,9 +86,11 @@ export const ChatInput: FC<Props> = ({ messageIsStreaming, model, messages, onSe
useEffect(() => {
if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = "inherit";
textareaRef.current.style.height = 'inherit';
textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
textareaRef.current.style.overflow = `${textareaRef?.current?.scrollHeight > 400 ? "auto" : "hidden"}`;
textareaRef.current.style.overflow = `${
textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
}`;
}
}, [content]);
@@ -79,45 +102,43 @@ export const ChatInput: FC<Props> = ({ messageIsStreaming, model, messages, onSe
}
return (
<div className="absolute bottom-0 left-0 w-full dark:border-white/20 border-transparent dark:bg-[#444654] dark:bg-gradient-to-t from-[#343541] via-[#343541] to-[#343541]/0 bg-white dark:!bg-transparent dark:bg-vert-dark-gradient pt-6 md:pt-2">
<div className="stretch mx-2 md:mt-[52px] mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-3xl">
<div className="dark:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-transparent bg-white from-[#343541] via-[#343541] to-[#343541]/0 pt-6 dark:border-white/20 dark:bg-[#444654] dark:!bg-transparent dark:bg-gradient-to-t 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 md:top-0 left-0 right-0 mx-auto dark:bg-[#343541] border w-fit border-gray-500 py-2 px-4 rounded text-black dark:text-white hover:opacity-50"
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-gray-500 py-2 px-4 text-black hover:opacity-50 dark:bg-[#343541] dark:text-white md:top-0"
onClick={handleStopConversation}
>
<IconPlayerStop
size={16}
className="inline-block mb-[2px]"
/>{" "}
<IconPlayerStop size={16} className="mb-[2px] inline-block" />{' '}
{t('Stop Generating')}
</button>
)}
{!messageIsStreaming && messages.length > 0 && (
<button
className="absolute -top-2 md:top-0 left-0 right-0 mx-auto dark:bg-[#343541] border w-fit border-gray-500 py-2 px-4 rounded text-black dark:text-white hover:opacity-50"
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-gray-500 py-2 px-4 text-black hover:opacity-50 dark:bg-[#343541] dark:text-white md:top-0"
onClick={onRegenerate}
>
<IconRepeat
size={16}
className="inline-block mb-[2px]"
/>{" "}
{t("Regenerate response")}
<IconRepeat size={16} className="mb-[2px] inline-block" />{' '}
{t('Regenerate response')}
</button>
)}
<div className="flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-[#40414F] rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]">
<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">
<textarea
ref={textareaRef}
className="text-black dark:text-white m-0 w-full resize-none outline-none border-0 bg-transparent p-0 pr-7 focus:ring-0 focus-visible:ring-0 dark:bg-transparent pl-2 md:pl-0"
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"
style={{
resize: "none",
resize: 'none',
bottom: `${textareaRef?.current?.scrollHeight}px`,
maxHeight: "400px",
overflow: `${textareaRef.current && textareaRef.current.scrollHeight > 400 ? "auto" : "hidden"}`
maxHeight: '400px',
overflow: `${
textareaRef.current && textareaRef.current.scrollHeight > 400
? 'auto'
: 'hidden'
}`,
}}
placeholder={t("Type a message...") || ''}
placeholder={t('Type a message...') || ''}
value={content}
rows={1}
onCompositionStart={() => setIsTyping(true)}
@@ -127,13 +148,10 @@ export const ChatInput: FC<Props> = ({ messageIsStreaming, model, messages, onSe
/>
<button
className="absolute right-5 focus:outline-none text-neutral-800 hover:text-neutral-900 dark:text-neutral-100 dark:hover:text-neutral-200 dark:bg-opacity-50 hover:bg-neutral-200 p-1 rounded-sm"
className="absolute right-5 rounded-sm p-1 text-neutral-800 hover:bg-neutral-200 hover:text-neutral-900 focus:outline-none dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
onClick={handleSend}
>
<IconSend
size={16}
className="opacity-60"
/>
<IconSend size={16} className="opacity-60" />
</button>
</div>
</div>
@@ -146,7 +164,10 @@ export const ChatInput: FC<Props> = ({ messageIsStreaming, model, messages, onSe
>
ChatBot UI
</a>
. {t("Chatbot UI is an advanced chatbot kit for OpenAI's chat models aiming to mimic ChatGPT's interface and functionality.")}
.{' '}
{t(
"Chatbot UI is an advanced chatbot kit for OpenAI's chat models aiming to mimic ChatGPT's interface and functionality.",
)}
</div>
</div>
);
components/Chat/ChatLoader.tsx
+6 -6
View File
@@ -1,16 +1,16 @@
import { IconDots } from "@tabler/icons-react";
import { FC } from "react";
import { IconDots } from '@tabler/icons-react';
import { FC } from 'react';
interface Props {}
export const ChatLoader: FC<Props> = () => {
return (
<div
className="group text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]"
style={{ overflowWrap: "anywhere" }}
className="group border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100"
style={{ overflowWrap: 'anywhere' }}
>
<div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div className="font-bold min-w-[40px]">AI:</div>
<div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="min-w-[40px] font-bold">AI:</div>
<IconDots className="animate-pulse" />
</div>
</div>
components/Chat/ChatMessage.tsx
+66 -38
View File
@@ -1,23 +1,28 @@
import { Message } from "@/types";
import { IconEdit } from "@tabler/icons-react";
import { useTranslation } from "next-i18next";
import { FC, useEffect, useRef, useState } from "react";
import ReactMarkdown from "react-markdown";
import rehypeMathjax from "rehype-mathjax";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import { CodeBlock } from "../Markdown/CodeBlock";
import { CopyButton } from "./CopyButton";
import { Message } from '@/types';
import { IconEdit } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { FC, useEffect, useRef, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeMathjax from 'rehype-mathjax';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import { CodeBlock } from '../Markdown/CodeBlock';
import { CopyButton } from './CopyButton';
interface Props {
message: Message;
messageIndex: number;
lightMode: "light" | "dark";
lightMode: 'light' | 'dark';
onEditMessage: (message: Message, messageIndex: number) => void;
}
export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEditMessage }) => {
const { t } = useTranslation("chat");
export const ChatMessage: FC<Props> = ({
message,
messageIndex,
lightMode,
onEditMessage,
}) => {
const { t } = useTranslation('chat');
const [isEditing, setIsEditing] = useState<boolean>(false);
const [isHovering, setIsHovering] = useState<boolean>(false);
const [messageContent, setMessageContent] = useState(message.content);
@@ -32,7 +37,7 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setMessageContent(event.target.value);
if (textareaRef.current) {
textareaRef.current.style.height = "inherit";
textareaRef.current.style.height = 'inherit';
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
}
};
@@ -45,7 +50,7 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
};
const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === "Enter" && !e.shiftKey) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleEditMessage();
}
@@ -64,23 +69,29 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
useEffect(() => {
if (textareaRef.current) {
textareaRef.current.style.height = "inherit";
textareaRef.current.style.height = 'inherit';
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
}
}, [isEditing]);
return (
<div
className={`group ${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"}`}
style={{ overflowWrap: "anywhere" }}
className={`group ${
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'
}`}
style={{ overflowWrap: 'anywhere' }}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
<div className="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="min-w-[40px] font-bold">{message.role === "assistant" ? t("AI") : t("You")}:</div>
<div className="min-w-[40px] font-bold">
{message.role === 'assistant' ? t('AI') : t('You')}:
</div>
<div className="prose mt-[-2px] w-full dark:prose-invert">
{message.role === "user" ? (
{message.role === 'user' ? (
<div className="flex w-full">
{isEditing ? (
<div className="flex w-full flex-col">
@@ -91,12 +102,12 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
onChange={handleInputChange}
onKeyDown={handlePressEnter}
style={{
fontFamily: "inherit",
fontSize: "inherit",
lineHeight: "inherit",
padding: "0",
margin: "0",
overflow: "hidden"
fontFamily: 'inherit',
fontSize: 'inherit',
lineHeight: 'inherit',
padding: '0',
margin: '0',
overflow: 'hidden',
}}
/>
@@ -120,11 +131,19 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
</div>
</div>
) : (
<div className="prose whitespace-pre-wrap dark:prose-invert">{message.content}</div>
<div className="prose whitespace-pre-wrap dark:prose-invert">
{message.content}
</div>
)}
{(isHovering || window.innerWidth < 640) && !isEditing && (
<button className={`absolute ${window.innerWidth < 640 ? "right-3 bottom-1" : "right-[-20px] top-[26px]"}`}>
<button
className={`absolute ${
window.innerWidth < 640
? 'right-3 bottom-1'
: 'right-[-20px] top-[26px]'
}`}
>
<IconEdit
size={20}
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
@@ -141,33 +160,42 @@ export const ChatMessage: FC<Props> = ({ message, messageIndex, lightMode, onEdi
rehypePlugins={[rehypeMathjax]}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || "");
const match = /language-(\w+)/.exec(className || '');
return !inline && match ? (
<CodeBlock
key={Math.random()}
language={match[1]}
value={String(children).replace(/\n$/, "")}
value={String(children).replace(/\n$/, '')}
lightMode={lightMode}
{...props}
/>
) : (
<code
className={className}
{...props}
>
<code className={className} {...props}>
{children}
</code>
);
},
table({ children }) {
return <table className="border-collapse border border-black py-1 px-3 dark:border-white">{children}</table>;
return (
<table className="border-collapse border border-black py-1 px-3 dark:border-white">
{children}
</table>
);
},
th({ children }) {
return <th className="break-words border border-black bg-gray-500 py-1 px-3 text-white dark:border-white">{children}</th>;
return (
<th className="break-words border border-black bg-gray-500 py-1 px-3 text-white dark:border-white">
{children}
</th>
);
},
td({ children }) {
return <td className="break-words border border-black py-1 px-3 dark:border-white">{children}</td>;
}
return (
<td className="break-words border border-black py-1 px-3 dark:border-white">
{children}
</td>
);
},
}}
>
{message.content}
components/Chat/ErrorMessageDiv.tsx
+14 -9
View File
@@ -1,17 +1,22 @@
import { ErrorMessage } from "@/types";
import { FC } from "react";
import { ErrorMessage } from '@/types';
import { FC } from 'react';
interface Props {
error: ErrorMessage
error: ErrorMessage;
}
export const ErrorMessageDiv: FC<Props> = ({ error }) => {
return (
<div className= "flex flex-col justify-center mx-auto h-full w-[300px] sm:w-[500px] space-y-6" >
<div className="text-center text-red-500" >{error.title} {error.code ? <i>({error.code}) </i> : "" }</div >
{ error.messageLines.map((line, index) => (
<div key={index} className="text-center text-red-500" > {line} </div>
)) }
return (
<div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[500px]">
<div className="text-center text-red-500">
{error.title} {error.code ? <i>({error.code}) </i> : ''}
</div>
{error.messageLines.map((line, index) => (
<div key={index} className="text-center text-red-500">
{' '}
{line}{' '}
</div>
))}
</div>
);
};
components/Chat/ModelSelect.tsx
+13 -12
View File
@@ -1,6 +1,6 @@
import { OpenAIModel } from "@/types";
import { FC } from "react";
import { useTranslation } from "next-i18next";
import { OpenAIModel } from '@/types';
import { FC } from 'react';
import { useTranslation } from 'next-i18next';
interface Props {
model: OpenAIModel;
@@ -9,23 +9,24 @@ interface Props {
}
export const ModelSelect: FC<Props> = ({ model, models, onModelChange }) => {
const {t} = useTranslation('chat')
const { t } = useTranslation('chat');
return (
<div className="flex flex-col">
<label className="text-left mb-2 dark:text-neutral-400 text-neutral-700">{t('Model')}</label>
<label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
{t('Model')}
</label>
<select
className="w-full p-3 dark:text-white dark:bg-[#343541] border border-neutral-500 rounded-lg appearance-none focus:shadow-outline text-neutral-900 cursor-pointer"
placeholder={t("Select a model") || ''}
className="focus:shadow-outline w-full cursor-pointer appearance-none rounded-lg border border-neutral-500 p-3 text-neutral-900 dark:bg-[#343541] dark:text-white"
placeholder={t('Select a model') || ''}
value={model.id}
onChange={(e) => {
onModelChange(models.find((model) => model.id === e.target.value) as OpenAIModel);
onModelChange(
models.find((model) => model.id === e.target.value) as OpenAIModel,
);
}}
>
{models.map((model) => (
<option
key={model.id}
value={model.id}
>
<option key={model.id} value={model.id}>
{model.name}
</option>
))}
components/Chat/Regenerate.tsx
+9 -7
View File
@@ -1,18 +1,20 @@
import { IconRefresh } from "@tabler/icons-react";
import { FC } from "react";
import { useTranslation } from "next-i18next";
import { IconRefresh } from '@tabler/icons-react';
import { FC } from 'react';
import { useTranslation } from 'next-i18next';
interface Props {
onRegenerate: () => void;
}
export const Regenerate: FC<Props> = ({ onRegenerate }) => {
const { t } = useTranslation('chat')
const { t } = useTranslation('chat');
return (
<div className="fixed sm:absolute bottom-4 sm:bottom-8 w-full sm:w-1/2 px-2 left-0 sm:left-[280px] lg:left-[200px] right-0 ml-auto mr-auto">
<div className="text-center mb-4 text-red-500">{t('Sorry, there was an error.')}</div>
<div className="fixed bottom-4 left-0 right-0 ml-auto mr-auto w-full px-2 sm:absolute sm:bottom-8 sm:left-[280px] sm:w-1/2 lg:left-[200px]">
<div className="mb-4 text-center text-red-500">
{t('Sorry, there was an error.')}
</div>
<button
className="flex items-center justify-center w-full h-12 bg-neutral-100 dark:bg-[#444654] text-neutral-500 dark:text-neutral-200 text-sm font-semibold rounded-lg border border-b-neutral-300 dark:border-none"
className="flex h-12 w-full items-center justify-center rounded-lg border border-b-neutral-300 bg-neutral-100 text-sm font-semibold text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200"
onClick={onRegenerate}
>
<IconRefresh className="mr-2" />
components/Chat/SystemPrompt.tsx
+19 -13
View File
@@ -1,7 +1,7 @@
import { Conversation } from "@/types";
import { DEFAULT_SYSTEM_PROMPT } from "@/utils/app/const";
import { FC, useEffect, useRef, useState } from "react";
import { useTranslation } from "next-i18next";
import { Conversation } from '@/types';
import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
import { FC, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'next-i18next';
interface Props {
conversation: Conversation;
@@ -9,8 +9,8 @@ interface Props {
}
export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
const { t } = useTranslation('chat')
const [value, setValue] = useState<string>("");
const { t } = useTranslation('chat');
const [value, setValue] = useState<string>('');
const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -32,7 +32,7 @@ export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
useEffect(() => {
if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = "inherit";
textareaRef.current.style.height = 'inherit';
textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
}
}, [value]);
@@ -47,17 +47,23 @@ export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
return (
<div className="flex flex-col">
<label className="text-left dark:text-neutral-400 text-neutral-700 mb-2">{t('System Prompt')}</label>
<label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
{t('System Prompt')}
</label>
<textarea
ref={textareaRef}
className="w-full rounded-lg px-4 py-2 focus:outline-none dark:bg-[#40414F] dark:border-opacity-50 dark:border-neutral-800 dark:text-neutral-100 border border-neutral-500 shadow text-neutral-900"
className="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",
resize: 'none',
bottom: `${textareaRef?.current?.scrollHeight}px`,
maxHeight: "300px",
overflow: `${textareaRef.current && textareaRef.current.scrollHeight > 400 ? "auto" : "hidden"}`
maxHeight: '300px',
overflow: `${
textareaRef.current && textareaRef.current.scrollHeight > 400
? 'auto'
: 'hidden'
}`,
}}
placeholder={t("Enter a prompt") || ''}
placeholder={t('Enter a prompt') || ''}
value={t(value) || ''}
rows={1}
onChange={handleChange}
components/Markdown/CodeBlock.tsx
+37 -21
View File
@@ -1,14 +1,20 @@
import { generateRandomString, programmingLanguages } from "@/utils/app/codeblock";
import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
import { FC, useState } from "react";
import { useTranslation } from "next-i18next";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark, oneLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
import {
generateRandomString,
programmingLanguages,
} from '@/utils/app/codeblock';
import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
import { FC, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import {
oneDark,
oneLight,
} from 'react-syntax-highlighter/dist/cjs/styles/prism';
interface Props {
language: string;
value: string;
lightMode: "light" | "dark";
lightMode: 'light' | 'dark';
}
export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
@@ -29,40 +35,50 @@ export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
});
};
const downloadAsFile = () => {
const fileExtension = programmingLanguages[language] || ".file";
const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
const fileName = window.prompt(t("Enter file name") || '', suggestedFileName);
const fileExtension = programmingLanguages[language] || '.file';
const suggestedFileName = `file-${generateRandomString(
3,
true,
)}${fileExtension}`;
const fileName = window.prompt(
t('Enter file name') || '',
suggestedFileName,
);
if (!fileName) {
// user pressed cancel on prompt
return;
}
const blob = new Blob([value], { type: "text/plain" });
const blob = new Blob([value], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
const link = document.createElement('a');
link.download = fileName;
link.href = url;
link.style.display = "none";
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
return (
<div className="codeblock relative text-[16px] font-sans">
<div className="codeblock relative font-sans text-[16px]">
<div className="flex items-center justify-between py-1.5 px-4">
<span className="text-xs text-white lowercase">{language}</span>
<span className="text-xs lowercase text-white">{language}</span>
<div className="flex items-center">
<button
className="text-white bg-none py-0.5 px-2 rounded focus:outline-none text-xs flex items-center"
className="flex items-center rounded bg-none py-0.5 px-2 text-xs text-white focus:outline-none"
onClick={copyToClipboard}
>
{isCopied ? <IconCheck size={18} className="mr-1.5"/> : <IconClipboard size={18} className="mr-1.5"/>}
{isCopied ? t("Copied!") : t("Copy code")}
{isCopied ? (
<IconCheck size={18} className="mr-1.5" />
) : (
<IconClipboard size={18} className="mr-1.5" />
)}
{isCopied ? t('Copied!') : t('Copy code')}
</button>
<button
className="text-white bg-none py-0.5 pl-2 rounded focus:outline-none text-xs flex items-center"
className="flex items-center rounded bg-none py-0.5 pl-2 text-xs text-white focus:outline-none"
onClick={downloadAsFile}
>
<IconDownload size={18} />
@@ -72,8 +88,8 @@ export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
<SyntaxHighlighter
language={language}
style={lightMode === "light" ? oneLight : oneDark}
customStyle={{margin: 0}}
style={lightMode === 'light' ? oneLight : oneDark}
customStyle={{ margin: 0 }}
>
{value}
</SyntaxHighlighter>
components/Mobile/Navbar.tsx
+11 -6
View File
@@ -1,18 +1,23 @@
import { Conversation } from "@/types";
import { IconPlus } from "@tabler/icons-react";
import { FC } from "react";
import { Conversation } from '@/types';
import { IconPlus } from '@tabler/icons-react';
import { FC } from 'react';
interface Props {
selectedConversation: Conversation;
onNewConversation: () => void;
}
export const Navbar: FC<Props> = ({ selectedConversation, onNewConversation }) => {
export const Navbar: FC<Props> = ({
selectedConversation,
onNewConversation,
}) => {
return (
<nav className="flex justify-between bg-[#202123] py-3 px-4 w-full">
<nav className="flex w-full justify-between bg-[#202123] py-3 px-4">
<div className="mr-4"></div>
<div className="max-w-[240px] whitespace-nowrap overflow-hidden text-ellipsis">{selectedConversation.name}</div>
<div className="max-w-[240px] overflow-hidden text-ellipsis whitespace-nowrap">
{selectedConversation.name}
</div>
<IconPlus
className="cursor-pointer hover:text-neutral-400"
components/Sidebar/ClearConversations.tsx
+10 -8
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 { IconCheck, IconTrash, IconX } from '@tabler/icons-react';
import { FC, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { SidebarButton } from './SidebarButton';
interface Props {
onClearConversations: () => void;
@@ -10,7 +10,7 @@ interface Props {
export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
const [isConfirming, setIsConfirming] = useState<boolean>(false);
const { t } = useTranslation('sidebar')
const { t } = useTranslation('sidebar');
const handleClearConversations = () => {
onClearConversations();
@@ -18,10 +18,12 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
};
return isConfirming ? (
<div className="flex hover:bg-[#343541] py-3 px-3 rounded-md cursor-pointer w-full items-center">
<div className="flex w-full cursor-pointer items-center rounded-md py-3 px-3 hover:bg-[#343541]">
<IconTrash size={16} />
<div className="ml-3 flex-1 text-left text-white">{t('Are you sure?')}</div>
<div className="ml-3 flex-1 text-left text-white">
{t('Are you sure?')}
</div>
<div className="flex w-[40px]">
<IconCheck
@@ -45,7 +47,7 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
</div>
) : (
<SidebarButton
text={t("Clear conversations")}
text={t('Clear conversations')}
icon={<IconTrash size={16} />}
onClick={() => setIsConfirming(true)}
/>
components/Sidebar/Conversation.tsx
+93 -65
View File
@@ -1,6 +1,12 @@
import { Conversation, KeyValuePair } from "@/types";
import { IconCheck, IconMessage, IconPencil, IconTrash, IconX } from "@tabler/icons-react";
import { DragEvent, FC, KeyboardEvent, useEffect, useState } from "react";
import { Conversation, KeyValuePair } from '@/types';
import {
IconCheck,
IconMessage,
IconPencil,
IconTrash,
IconX,
} from '@tabler/icons-react';
import { DragEvent, FC, KeyboardEvent, useEffect, useState } from 'react';
interface Props {
selectedConversation: Conversation;
@@ -8,30 +14,43 @@ interface Props {
loading: boolean;
onSelectConversation: (conversation: Conversation) => void;
onDeleteConversation: (conversation: Conversation) => void;
onUpdateConversation: (conversation: Conversation, data: KeyValuePair) => void;
onUpdateConversation: (
conversation: Conversation,
data: KeyValuePair,
) => void;
}
export const ConversationComponent: FC<Props> = ({ selectedConversation, conversation, loading, onSelectConversation, onDeleteConversation, onUpdateConversation }) => {
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 [renameValue, setRenameValue] = useState('');
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === "Enter") {
if (e.key === 'Enter') {
e.preventDefault();
handleRename(selectedConversation);
}
};
const handleDragStart = (e: DragEvent<HTMLButtonElement>, conversation: Conversation) => {
const handleDragStart = (
e: DragEvent<HTMLButtonElement>,
conversation: Conversation,
) => {
if (e.dataTransfer) {
e.dataTransfer.setData("conversation", JSON.stringify(conversation));
e.dataTransfer.setData('conversation', JSON.stringify(conversation));
}
};
const handleRename = (conversation: Conversation) => {
onUpdateConversation(conversation, { key: "name", value: renameValue });
setRenameValue("");
onUpdateConversation(conversation, { key: 'name', value: renameValue });
setRenameValue('');
setIsRenaming(false);
};
@@ -45,7 +64,11 @@ export const ConversationComponent: FC<Props> = ({ selectedConversation, convers
return (
<button
className={`flex w-full gap-3 items-center p-3 text-sm rounded-lg hover:bg-[#343541]/90 transition-colors duration-200 cursor-pointer ${loading ? "disabled:cursor-not-allowed" : ""} ${selectedConversation.id === conversation.id ? "bg-[#343541]/90" : ""}`}
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"
@@ -55,7 +78,7 @@ export const ConversationComponent: FC<Props> = ({ selectedConversation, convers
{isRenaming && selectedConversation.id === conversation.id ? (
<input
className="flex-1 bg-transparent border-b border-neutral-400 focus:border-neutral-100 text-left overflow-hidden overflow-ellipsis pr-1 outline-none text-white"
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)}
@@ -63,62 +86,67 @@ export const ConversationComponent: FC<Props> = ({ selectedConversation, convers
autoFocus
/>
) : (
<div className="overflow-hidden whitespace-nowrap overflow-ellipsis pr-1 flex-1 text-left">{conversation.name}</div>
)}
{(isDeleting || isRenaming) && selectedConversation.id === conversation.id && (
<div className="flex gap-1 -ml-2">
<IconCheck
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={16}
onClick={(e) => {
e.stopPropagation();
if (isDeleting) {
onDeleteConversation(conversation);
} else if (isRenaming) {
handleRename(conversation);
}
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 className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap pr-1 text-left">
{conversation.name}
</div>
)}
{selectedConversation.id === conversation.id && !isDeleting && !isRenaming && (
<div className="flex gap-1 -ml-2">
<IconPencil
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
onClick={(e) => {
e.stopPropagation();
setIsRenaming(true);
setRenameValue(selectedConversation.name);
}}
/>
{(isDeleting || isRenaming) &&
selectedConversation.id === conversation.id && (
<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();
<IconTrash
className=" min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
onClick={(e) => {
e.stopPropagation();
setIsDeleting(true);
}}
/>
</div>
)}
if (isDeleting) {
onDeleteConversation(conversation);
} else if (isRenaming) {
handleRename(conversation);
}
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>
)}
{selectedConversation.id === conversation.id &&
!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(selectedConversation.name);
}}
/>
<IconTrash
className=" min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
onClick={(e) => {
e.stopPropagation();
setIsDeleting(true);
}}
/>
</div>
)}
</button>
);
};
components/Sidebar/Conversations.tsx
+16 -6
View File
@@ -1,6 +1,6 @@
import { Conversation, KeyValuePair } from "@/types";
import { FC } from "react";
import { ConversationComponent } from "./Conversation";
import { Conversation, KeyValuePair } from '@/types';
import { FC } from 'react';
import { ConversationComponent } from './Conversation';
interface Props {
loading: boolean;
@@ -8,12 +8,22 @@ interface Props {
selectedConversation: Conversation;
onSelectConversation: (conversation: Conversation) => void;
onDeleteConversation: (conversation: Conversation) => void;
onUpdateConversation: (conversation: Conversation, data: KeyValuePair) => void;
onUpdateConversation: (
conversation: Conversation,
data: KeyValuePair,
) => void;
}
export const Conversations: FC<Props> = ({ loading, conversations, selectedConversation, onSelectConversation, onDeleteConversation, onUpdateConversation }) => {
export const Conversations: FC<Props> = ({
loading,
conversations,
selectedConversation,
onSelectConversation,
onDeleteConversation,
onUpdateConversation,
}) => {
return (
<div className="flex flex-col gap-1 w-full pt-2">
<div className="flex w-full flex-col gap-1 pt-2">
{conversations.slice().reverse().map((conversation, index) => (
<ConversationComponent
key={index}
components/Sidebar/Folder.tsx
+32 -23
View File
@@ -1,7 +1,14 @@
import { ChatFolder, Conversation, KeyValuePair } from "@/types";
import { IconCaretDown, IconCaretRight, IconCheck, IconPencil, IconTrash, IconX } from "@tabler/icons-react";
import { FC, KeyboardEvent, useEffect, useState } from "react";
import { ConversationComponent } from "./Conversation";
import { ChatFolder, Conversation, KeyValuePair } from '@/types';
import {
IconCaretDown,
IconCaretRight,
IconCheck,
IconPencil,
IconTrash,
IconX,
} from '@tabler/icons-react';
import { FC, KeyboardEvent, useEffect, useState } from 'react';
import { ConversationComponent } from './Conversation';
interface Props {
searchTerm: string;
@@ -14,7 +21,10 @@ interface Props {
loading: boolean;
onSelectConversation: (conversation: Conversation) => void;
onDeleteConversation: (conversation: Conversation) => void;
onUpdateConversation: (conversation: Conversation, data: KeyValuePair) => void;
onUpdateConversation: (
conversation: Conversation,
data: KeyValuePair,
) => void;
}
export const Folder: FC<Props> = ({
@@ -28,15 +38,15 @@ export const Folder: FC<Props> = ({
loading,
onSelectConversation,
onDeleteConversation,
onUpdateConversation
onUpdateConversation,
}) => {
const [isDeleting, setIsDeleting] = useState(false);
const [isRenaming, setIsRenaming] = useState(false);
const [renameValue, setRenameValue] = useState("");
const [renameValue, setRenameValue] = useState('');
const [isOpen, setIsOpen] = useState(false);
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === "Enter") {
if (e.key === 'Enter') {
e.preventDefault();
handleRename();
}
@@ -44,7 +54,7 @@ export const Folder: FC<Props> = ({
const handleRename = () => {
onUpdateFolder(currentFolder.id, renameValue);
setRenameValue("");
setRenameValue('');
setIsRenaming(false);
};
@@ -52,10 +62,10 @@ export const Folder: FC<Props> = ({
if (e.dataTransfer) {
setIsOpen(true);
const conversation = JSON.parse(e.dataTransfer.getData("conversation"));
onUpdateConversation(conversation, { key: "folderId", value: folder.id });
const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
onUpdateConversation(conversation, { key: 'folderId', value: folder.id });
e.target.style.background = "none";
e.target.style.background = 'none';
}
};
@@ -64,11 +74,11 @@ export const Folder: FC<Props> = ({
};
const highlightDrop = (e: any) => {
e.target.style.background = "#343541";
e.target.style.background = '#343541';
};
const removeHighlight = (e: any) => {
e.target.style.background = "none";
e.target.style.background = 'none';
};
useEffect(() => {
@@ -90,7 +100,7 @@ export const Folder: FC<Props> = ({
return (
<div>
<div
className={`mb-1 flex gap-3 items-center px-3 py-2 text-sm rounded-lg hover:bg-[#343541]/90 transition-colors duration-200 cursor-pointer`}
className={`mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors duration-200 hover:bg-[#343541]/90`}
onClick={() => setIsOpen(!isOpen)}
onDrop={(e) => handleDrop(e, currentFolder)}
onDragOver={allowDrop}
@@ -101,7 +111,7 @@ export const Folder: FC<Props> = ({
{isRenaming ? (
<input
className="flex-1 bg-transparent border-b border-neutral-400 focus:border-neutral-100 text-left overflow-hidden overflow-ellipsis pr-1 outline-none text-white"
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)}
@@ -109,11 +119,13 @@ export const Folder: FC<Props> = ({
autoFocus
/>
) : (
<div className="overflow-hidden whitespace-nowrap overflow-ellipsis pr-1 flex-1 text-left">{currentFolder.name}</div>
<div className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap pr-1 text-left">
{currentFolder.name}
</div>
)}
{(isDeleting || isRenaming) && (
<div className="flex gap-1 -ml-2">
<div className="-ml-2 flex gap-1">
<IconCheck
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={16}
@@ -144,7 +156,7 @@ export const Folder: FC<Props> = ({
)}
{!isDeleting && !isRenaming && (
<div className="flex gap-1 ml-2">
<div className="ml-2 flex gap-1">
<IconPencil
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
@@ -171,10 +183,7 @@ export const Folder: FC<Props> = ({
? conversations.map((conversation, index) => {
if (conversation.folderId === currentFolder.id) {
return (
<div
key={index}
className="ml-5 pl-2 border-l gap-2 pt-2"
>
<div key={index} className="ml-5 gap-2 border-l pl-2 pt-2">
<ConversationComponent
selectedConversation={selectedConversation}
conversation={conversation}
components/Sidebar/Folders.tsx
+9 -6
View File
@@ -1,6 +1,6 @@
import { ChatFolder, Conversation, KeyValuePair } from "@/types";
import { FC } from "react";
import { Folder } from "./Folder";
import { ChatFolder, Conversation, KeyValuePair } from '@/types';
import { FC } from 'react';
import { Folder } from './Folder';
interface Props {
searchTerm: string;
@@ -13,7 +13,10 @@ interface Props {
loading: boolean;
onSelectConversation: (conversation: Conversation) => void;
onDeleteConversation: (conversation: Conversation) => void;
onUpdateConversation: (conversation: Conversation, data: KeyValuePair) => void;
onUpdateConversation: (
conversation: Conversation,
data: KeyValuePair,
) => void;
}
export const Folders: FC<Props> = ({
@@ -27,10 +30,10 @@ export const Folders: FC<Props> = ({
loading,
onSelectConversation,
onDeleteConversation,
onUpdateConversation
onUpdateConversation,
}) => {
return (
<div className="flex flex-col gap-1 w-full pt-2">
<div className="flex w-full flex-col gap-1 pt-2">
{folders.map((folder, index) => (
<Folder
key={index}
components/Sidebar/Import.tsx
+15 -10
View File
@@ -1,16 +1,19 @@
import { ChatFolder, Conversation } from "@/types";
import { cleanConversationHistory } from "@/utils/app/clean";
import { IconFileImport } from "@tabler/icons-react";
import { useTranslation } from "next-i18next";
import { FC } from "react";
import { SidebarButton } from "./SidebarButton";
import { ChatFolder, Conversation } from '@/types';
import { cleanConversationHistory } from '@/utils/app/clean';
import { IconFileImport } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { FC } from 'react';
import { SidebarButton } from './SidebarButton';
interface Props {
onImport: (data: { conversations: Conversation[]; folders: ChatFolder[] }) => void;
onImport: (data: {
conversations: Conversation[];
folders: ChatFolder[];
}) => void;
}
export const Import: FC<Props> = ({ onImport }) => {
const { t } = useTranslation("sidebar");
const { t } = useTranslation('sidebar');
return (
<>
<input
@@ -38,10 +41,12 @@ export const Import: FC<Props> = ({ onImport }) => {
/>
<SidebarButton
text={t("Import conversations")}
text={t('Import conversations')}
icon={<IconFileImport size={16} />}
onClick={() => {
const importFile = document.querySelector("#import-file") as HTMLInputElement;
const importFile = document.querySelector(
'#import-file',
) as HTMLInputElement;
if (importFile) {
importFile.click();
}
components/Sidebar/Key.tsx
+8 -8
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 { IconCheck, IconKey, IconX } from '@tabler/icons-react';
import { FC, KeyboardEvent, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { SidebarButton } from './SidebarButton';
interface Props {
apiKey: string;
@@ -14,7 +14,7 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
const [newKey, setNewKey] = useState(apiKey);
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === "Enter") {
if (e.key === 'Enter') {
e.preventDefault();
handleUpdateKey(newKey);
}
@@ -26,11 +26,11 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
};
return isChanging ? (
<div className="flex transition-colors duration:200 hover:bg-gray-500/10 py-3 px-3 rounded-md cursor-pointer w-full items-center">
<div className="duration:200 flex w-full cursor-pointer items-center rounded-md py-3 px-3 transition-colors hover:bg-gray-500/10">
<IconKey size={16} />
<input
className="ml-2 flex-1 h-[20px] bg-transparent border-b border-neutral-400 focus:border-neutral-100 text-left overflow-hidden overflow-ellipsis pr-1 outline-none text-white"
className="ml-2 h-[20px] 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="password"
value={newKey}
onChange={(e) => setNewKey(e.target.value)}
@@ -60,7 +60,7 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
</div>
) : (
<SidebarButton
text={t("OpenAI API Key")}
text={t('OpenAI API Key')}
icon={<IconKey size={16} />}
onClick={() => setIsChanging(true)}
/>
components/Sidebar/Search.tsx
+6 -6
View File
@@ -1,6 +1,6 @@
import { IconX } from "@tabler/icons-react";
import { FC } from "react";
import { useTranslation } from "next-i18next";
import { IconX } from '@tabler/icons-react';
import { FC } from 'react';
import { useTranslation } from 'next-i18next';
interface Props {
searchTerm: string;
@@ -15,13 +15,13 @@ export const Search: FC<Props> = ({ searchTerm, onSearch }) => {
};
const clearSearch = () => {
onSearch("");
onSearch('');
};
return (
<div className="relative flex items-center">
<input
className="flex-1 w-full pr-10 bg-[#202123] border border-neutral-600 text-sm rounded-md px-4 py-3 text-white"
className="w-full flex-1 rounded-md border border-neutral-600 bg-[#202123] px-4 py-3 pr-10 text-sm text-white"
type="text"
placeholder={t('Search conversations...') || ''}
value={searchTerm}
@@ -30,7 +30,7 @@ export const Search: FC<Props> = ({ searchTerm, onSearch }) => {
{searchTerm && (
<IconX
className="absolute right-4 text-neutral-300 cursor-pointer hover:text-neutral-400"
className="absolute right-4 cursor-pointer text-neutral-300 hover:text-neutral-400"
size={24}
onClick={clearSearch}
/>
components/Sidebar/Sidebar.tsx
+81 -40
View File
@@ -1,16 +1,20 @@
import { ChatFolder, Conversation, KeyValuePair } from "@/types";
import { IconArrowBarLeft, IconFolderPlus, IconPlus } from "@tabler/icons-react";
import { FC, useEffect, useState } from "react";
import { useTranslation } from "next-i18next";
import { Conversations } from "./Conversations";
import { Folders } from "./Folders";
import { Search } from "./Search";
import { SidebarSettings } from "./SidebarSettings";
import { ChatFolder, Conversation, KeyValuePair } from '@/types';
import {
IconArrowBarLeft,
IconFolderPlus,
IconPlus,
} from '@tabler/icons-react';
import { FC, useEffect, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { Conversations } from './Conversations';
import { Folders } from './Folders';
import { Search } from './Search';
import { SidebarSettings } from './SidebarSettings';
interface Props {
loading: boolean;
conversations: Conversation[];
lightMode: "light" | "dark";
lightMode: 'light' | 'dark';
selectedConversation: Conversation;
apiKey: string;
folders: ChatFolder[];
@@ -18,39 +22,68 @@ interface Props {
onDeleteFolder: (folderId: number) => void;
onUpdateFolder: (folderId: number, name: string) => void;
onNewConversation: () => void;
onToggleLightMode: (mode: "light" | "dark") => void;
onToggleLightMode: (mode: 'light' | 'dark') => void;
onSelectConversation: (conversation: Conversation) => void;
onDeleteConversation: (conversation: Conversation) => void;
onToggleSidebar: () => void;
onUpdateConversation: (conversation: Conversation, data: KeyValuePair) => void;
onUpdateConversation: (
conversation: Conversation,
data: KeyValuePair,
) => void;
onApiKeyChange: (apiKey: string) => void;
onClearConversations: () => void;
onExportConversations: () => void;
onImportConversations: (data: { conversations: Conversation[]; folders: ChatFolder[] }) => void;
onImportConversations: (data: {
conversations: Conversation[];
folders: ChatFolder[];
}) => void;
}
export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selectedConversation, apiKey, folders, onCreateFolder, onDeleteFolder, onUpdateFolder, onNewConversation, onToggleLightMode, onSelectConversation, onDeleteConversation, onToggleSidebar, onUpdateConversation, onApiKeyChange, onClearConversations, onExportConversations, onImportConversations }) => {
export const Sidebar: FC<Props> = ({
loading,
conversations,
lightMode,
selectedConversation,
apiKey,
folders,
onCreateFolder,
onDeleteFolder,
onUpdateFolder,
onNewConversation,
onToggleLightMode,
onSelectConversation,
onDeleteConversation,
onToggleSidebar,
onUpdateConversation,
onApiKeyChange,
onClearConversations,
onExportConversations,
onImportConversations,
}) => {
const { t } = useTranslation('sidebar');
const [searchTerm, setSearchTerm] = useState<string>("");
const [filteredConversations, setFilteredConversations] = useState<Conversation[]>(conversations);
const [searchTerm, setSearchTerm] = useState<string>('');
const [filteredConversations, setFilteredConversations] =
useState<Conversation[]>(conversations);
const handleUpdateConversation = (conversation: Conversation, data: KeyValuePair) => {
const handleUpdateConversation = (
conversation: Conversation,
data: KeyValuePair,
) => {
onUpdateConversation(conversation, data);
setSearchTerm("");
setSearchTerm('');
};
const handleDeleteConversation = (conversation: Conversation) => {
onDeleteConversation(conversation);
setSearchTerm("");
setSearchTerm('');
};
const handleDrop = (e: any) => {
if (e.dataTransfer) {
const conversation = JSON.parse(e.dataTransfer.getData("conversation"));
onUpdateConversation(conversation, { key: "folderId", value: 0 });
const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
onUpdateConversation(conversation, { key: 'folderId', value: 0 });
e.target.style.background = "none";
e.target.style.background = 'none';
}
};
@@ -59,20 +92,23 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
};
const highlightDrop = (e: any) => {
e.target.style.background = "#343541";
e.target.style.background = '#343541';
};
const removeHighlight = (e: any) => {
e.target.style.background = "none";
e.target.style.background = 'none';
};
useEffect(() => {
if (searchTerm) {
setFilteredConversations(
conversations.filter((conversation) => {
const searchable = conversation.name.toLocaleLowerCase() + " " + conversation.messages.map((message) => message.content).join(" ");
const searchable =
conversation.name.toLocaleLowerCase() +
' ' +
conversation.messages.map((message) => message.content).join(' ');
return searchable.toLowerCase().includes(searchTerm.toLowerCase());
})
}),
);
} else {
setFilteredConversations(conversations);
@@ -80,13 +116,15 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
}, [searchTerm, conversations]);
return (
<aside className={`h-full transition-all flex flex-none space-y-2 p-2 flex-col bg-[#202123] w-[260px] z-50 sm:relative sm:top-0 fixed top-0 bottom-0`}>
<aside
className={`fixed top-0 bottom-0 z-50 flex h-full w-[260px] flex-none flex-col space-y-2 bg-[#202123] p-2 transition-all sm:relative sm:top-0`}
>
<header className="flex items-center">
<button
className="flex gap-3 p-3 items-center w-[190px] rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm flex-shrink-0 border border-white/20"
className="flex w-[190px] 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={() => {
onNewConversation();
setSearchTerm("");
setSearchTerm('');
}}
>
<IconPlus size={16} />
@@ -94,24 +132,21 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
</button>
<button
className="ml-2 flex gap-3 p-3 items-center rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm flex-shrink-0 border border-white/20"
onClick={() => onCreateFolder(t("New folder"))}
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>
<IconArrowBarLeft
className="ml-1 p-1 text-neutral-300 cursor-pointer hover:text-neutral-400 hidden sm:flex"
className="ml-1 hidden cursor-pointer p-1 text-neutral-300 hover:text-neutral-400 sm:flex"
size={32}
onClick={onToggleSidebar}
/>
</header>
{conversations.length > 1 && (
<Search
searchTerm={searchTerm}
onSearch={setSearchTerm}
/>
<Search searchTerm={searchTerm} onSearch={setSearchTerm} />
)}
<div className="flex-grow overflow-auto">
@@ -119,7 +154,9 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
<div className="flex border-b border-white/20 pb-2">
<Folders
searchTerm={searchTerm}
conversations={filteredConversations.filter((conversation) => conversation.folderId !== 0)}
conversations={filteredConversations.filter(
(conversation) => conversation.folderId !== 0,
)}
folders={folders}
onDeleteFolder={onDeleteFolder}
onUpdateFolder={onUpdateFolder}
@@ -134,7 +171,7 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
{conversations.length > 0 ? (
<div
className="pt-2 h-full"
className="h-full pt-2"
onDrop={(e) => handleDrop(e)}
onDragOver={allowDrop}
onDragEnter={highlightDrop}
@@ -142,7 +179,11 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
>
<Conversations
loading={loading}
conversations={filteredConversations.filter((conversation) => conversation.folderId === 0 || !folders[conversation.folderId - 1])}
conversations={filteredConversations.filter(
(conversation) =>
conversation.folderId === 0 ||
!folders[conversation.folderId - 1],
)}
selectedConversation={selectedConversation}
onSelectConversation={onSelectConversation}
onDeleteConversation={handleDeleteConversation}
@@ -150,7 +191,7 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
/>
</div>
) : (
<div className="mt-4 text-white text-center">
<div className="mt-4 text-center text-white">
<div>{t('No conversations.')}</div>
</div>
)}
components/Sidebar/SidebarButton.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { FC } from "react";
import { FC } from 'react';
interface Props {
text: string;
@@ -9,7 +9,7 @@ interface Props {
export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
return (
<button
className="flex py-3 px-3 gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer w-full items-center"
className="flex w-full cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
onClick={onClick}
>
<div>{icon}</div>
components/Sidebar/SidebarSettings.tsx
+34 -22
View File
@@ -1,46 +1,58 @@
import { ChatFolder, Conversation } from "@/types";
import { IconFileExport, IconMoon, IconSun } from "@tabler/icons-react";
import { FC } from "react";
import { useTranslation } from "next-i18next";
import { ClearConversations } from "./ClearConversations";
import { Import } from "./Import";
import { Key } from "./Key";
import { SidebarButton } from "./SidebarButton";
import { ChatFolder, Conversation } from '@/types';
import { IconFileExport, IconMoon, IconSun } from '@tabler/icons-react';
import { FC } from 'react';
import { useTranslation } from 'next-i18next';
import { ClearConversations } from './ClearConversations';
import { Import } from './Import';
import { Key } from './Key';
import { SidebarButton } from './SidebarButton';
interface Props {
lightMode: "light" | "dark";
lightMode: 'light' | 'dark';
apiKey: string;
onToggleLightMode: (mode: "light" | "dark") => void;
onToggleLightMode: (mode: 'light' | 'dark') => void;
onApiKeyChange: (apiKey: string) => void;
onClearConversations: () => void;
onExportConversations: () => void;
onImportConversations: (data: { conversations: Conversation[]; folders: ChatFolder[] }) => void;
onImportConversations: (data: {
conversations: Conversation[];
folders: ChatFolder[];
}) => void;
}
export const SidebarSettings: FC<Props> = ({ lightMode, apiKey, onToggleLightMode, onApiKeyChange, onClearConversations, onExportConversations, onImportConversations }) => {
const { t} = useTranslation('sidebar')
export const SidebarSettings: FC<Props> = ({
lightMode,
apiKey,
onToggleLightMode,
onApiKeyChange,
onClearConversations,
onExportConversations,
onImportConversations,
}) => {
const { t } = useTranslation('sidebar');
return (
<div className="flex flex-col pt-1 items-center border-t border-white/20 text-sm space-y-1">
<div className="flex flex-col items-center space-y-1 border-t border-white/20 pt-1 text-sm">
<ClearConversations onClearConversations={onClearConversations} />
<Import onImport={onImportConversations} />
<SidebarButton
text={t("Export conversations")}
text={t('Export conversations')}
icon={<IconFileExport size={16} />}
onClick={() => onExportConversations()}
/>
<SidebarButton
text={lightMode === "light" ? t("Dark mode") : t("Light mode")}
icon={lightMode === "light" ? <IconMoon size={16} /> : <IconSun size={16} />}
onClick={() => onToggleLightMode(lightMode === "light" ? "dark" : "light")}
text={lightMode === 'light' ? t('Dark mode') : t('Light mode')}
icon={
lightMode === 'light' ? <IconMoon size={16} /> : <IconSun size={16} />
}
onClick={() =>
onToggleLightMode(lightMode === 'light' ? 'dark' : 'light')
}
/>
<Key
apiKey={apiKey}
onApiKeyChange={onApiKeyChange}
/>
<Key apiKey={apiKey} onApiKeyChange={onApiKeyChange} />
</div>
);
};