feat: add in prettier and format code for consistency (#168)
This commit is contained in:
Simon Holmes
GitHub
+81
-31
@@ -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}
|
||||
/>
|
||||
</>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
))}
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user