MAJOR REFACTOR (#494)
* move index to home folder, create state and context files and barrell folder * Sanity Check Commit: reducer added to home.tsx manual QA all working * WIP: promptBar * fix missing json parse on folders and prompts * split context and add promptbar context * add context to nested prompt componets and componetize Folder componet * remove log * Create buttons folder and componetize sidebar action button * tidy up prompt handlers * componetized sidebar * added back chatbar componet to left side sidebar * monster commit: Componetized the common code between chatbar and promptbar into new componet Sidebar and added context to both bars * add useFetch service * added prettier import sort to keep imports ordered and easier to indentify * added react query and useFetch to work with RQ * added apiService, errorService and reactQuery * add callback and tidy up error service * refactor chat and child componets to useContext * fix extra calls and bad calls to mel endpoint * minor import cleanup --------- Co-authored-by: jc.durbin <jc.durbin@ardanis.com>
This commit is contained in:
Mckay Wrigley
GitHub
+466
-301
@@ -1,22 +1,31 @@
|
||||
import { Conversation, Message } from '@/types/chat';
|
||||
import { KeyValuePair } from '@/types/data';
|
||||
import { ErrorMessage } from '@/types/error';
|
||||
import { OpenAIModel, OpenAIModelID } from '@/types/openai';
|
||||
import { Plugin } from '@/types/plugin';
|
||||
import { Prompt } from '@/types/prompt';
|
||||
import { throttle } from '@/utils';
|
||||
import { IconArrowDown, IconClearAll, IconSettings } from '@tabler/icons-react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import {
|
||||
FC,
|
||||
MutableRefObject,
|
||||
memo,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { Spinner } from '../Global/Spinner';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
import { getEndpoint } from '@/utils/app/api';
|
||||
import {
|
||||
saveConversation,
|
||||
saveConversations,
|
||||
updateConversation,
|
||||
} from '@/utils/app/conversation';
|
||||
import { throttle } from '@/utils/data/throttle';
|
||||
|
||||
import { ChatBody, Conversation, Message } from '@/types/chat';
|
||||
import { Plugin } from '@/types/plugin';
|
||||
|
||||
import HomeContext from '@/pages/api/home/home.context';
|
||||
|
||||
import Spinner from '../Spinner';
|
||||
import { ChatInput } from './ChatInput';
|
||||
import { ChatLoader } from './ChatLoader';
|
||||
import { ChatMessage } from './ChatMessage';
|
||||
@@ -25,310 +34,466 @@ import { ModelSelect } from './ModelSelect';
|
||||
import { SystemPrompt } from './SystemPrompt';
|
||||
|
||||
interface Props {
|
||||
conversation: Conversation;
|
||||
models: OpenAIModel[];
|
||||
apiKey: string;
|
||||
serverSideApiKeyIsSet: boolean;
|
||||
defaultModelId: OpenAIModelID;
|
||||
messageIsStreaming: boolean;
|
||||
modelError: ErrorMessage | null;
|
||||
loading: boolean;
|
||||
prompts: Prompt[];
|
||||
onSend: (
|
||||
message: Message,
|
||||
deleteCount: number,
|
||||
plugin: Plugin | null,
|
||||
) => void;
|
||||
onUpdateConversation: (
|
||||
conversation: Conversation,
|
||||
data: KeyValuePair,
|
||||
) => void;
|
||||
onEditMessage: (message: Message, messageIndex: number) => void;
|
||||
stopConversationRef: MutableRefObject<boolean>;
|
||||
}
|
||||
|
||||
export const Chat: FC<Props> = memo(
|
||||
({
|
||||
conversation,
|
||||
models,
|
||||
apiKey,
|
||||
serverSideApiKeyIsSet,
|
||||
defaultModelId,
|
||||
messageIsStreaming,
|
||||
modelError,
|
||||
loading,
|
||||
prompts,
|
||||
onSend,
|
||||
onUpdateConversation,
|
||||
onEditMessage,
|
||||
stopConversationRef,
|
||||
}) => {
|
||||
const { t } = useTranslation('chat');
|
||||
const [currentMessage, setCurrentMessage] = useState<Message>();
|
||||
const [autoScrollEnabled, setAutoScrollEnabled] = useState<boolean>(true);
|
||||
const [showSettings, setShowSettings] = useState<boolean>(false);
|
||||
const [showScrollDownButton, setShowScrollDownButton] =
|
||||
useState<boolean>(false);
|
||||
export const Chat = memo(({ stopConversationRef }: Props) => {
|
||||
const { t } = useTranslation('chat');
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const chatContainerRef = useRef<HTMLDivElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const {
|
||||
state: {
|
||||
selectedConversation,
|
||||
conversations,
|
||||
models,
|
||||
apiKey,
|
||||
pluginKeys,
|
||||
serverSideApiKeyIsSet,
|
||||
messageIsStreaming,
|
||||
modelError,
|
||||
loading,
|
||||
prompts,
|
||||
},
|
||||
handleUpdateConversation,
|
||||
dispatch: homeDispatch,
|
||||
} = useContext(HomeContext);
|
||||
|
||||
const scrollToBottom = useCallback(() => {
|
||||
if (autoScrollEnabled) {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
textareaRef.current?.focus();
|
||||
}
|
||||
}, [autoScrollEnabled]);
|
||||
const [currentMessage, setCurrentMessage] = useState<Message>();
|
||||
const [autoScrollEnabled, setAutoScrollEnabled] = useState<boolean>(true);
|
||||
const [showSettings, setShowSettings] = useState<boolean>(false);
|
||||
const [showScrollDownButton, setShowScrollDownButton] =
|
||||
useState<boolean>(false);
|
||||
|
||||
const handleScroll = () => {
|
||||
if (chatContainerRef.current) {
|
||||
const { scrollTop, scrollHeight, clientHeight } =
|
||||
chatContainerRef.current;
|
||||
const bottomTolerance = 30;
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const chatContainerRef = useRef<HTMLDivElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
|
||||
setAutoScrollEnabled(false);
|
||||
setShowScrollDownButton(true);
|
||||
} else {
|
||||
setAutoScrollEnabled(true);
|
||||
setShowScrollDownButton(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleScrollDown = () => {
|
||||
chatContainerRef.current?.scrollTo({
|
||||
top: chatContainerRef.current.scrollHeight,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
};
|
||||
|
||||
const handleSettings = () => {
|
||||
setShowSettings(!showSettings);
|
||||
};
|
||||
|
||||
const onClearAll = () => {
|
||||
if (confirm(t<string>('Are you sure you want to clear all messages?'))) {
|
||||
onUpdateConversation(conversation, { key: 'messages', value: [] });
|
||||
}
|
||||
};
|
||||
|
||||
const scrollDown = () => {
|
||||
if (autoScrollEnabled) {
|
||||
messagesEndRef.current?.scrollIntoView(true);
|
||||
}
|
||||
};
|
||||
const throttledScrollDown = throttle(scrollDown, 250);
|
||||
|
||||
useEffect(() => {
|
||||
throttledScrollDown();
|
||||
setCurrentMessage(
|
||||
conversation.messages[conversation.messages.length - 2],
|
||||
);
|
||||
}, [conversation.messages, throttledScrollDown]);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
setAutoScrollEnabled(entry.isIntersecting);
|
||||
if (entry.isIntersecting) {
|
||||
textareaRef.current?.focus();
|
||||
const handleSend = useCallback(
|
||||
async (message: Message, deleteCount = 0, plugin: Plugin | null = null) => {
|
||||
if (selectedConversation) {
|
||||
let updatedConversation: Conversation;
|
||||
if (deleteCount) {
|
||||
const updatedMessages = [...selectedConversation.messages];
|
||||
for (let i = 0; i < deleteCount; i++) {
|
||||
updatedMessages.pop();
|
||||
}
|
||||
},
|
||||
{
|
||||
root: null,
|
||||
threshold: 0.5,
|
||||
},
|
||||
);
|
||||
const messagesEndElement = messagesEndRef.current;
|
||||
if (messagesEndElement) {
|
||||
observer.observe(messagesEndElement);
|
||||
}
|
||||
return () => {
|
||||
if (messagesEndElement) {
|
||||
observer.unobserve(messagesEndElement);
|
||||
updatedConversation = {
|
||||
...selectedConversation,
|
||||
messages: [...updatedMessages, message],
|
||||
};
|
||||
} else {
|
||||
updatedConversation = {
|
||||
...selectedConversation,
|
||||
messages: [...selectedConversation.messages, message],
|
||||
};
|
||||
}
|
||||
};
|
||||
}, [messagesEndRef]);
|
||||
homeDispatch({
|
||||
field: 'selectedConversation',
|
||||
value: updatedConversation,
|
||||
});
|
||||
homeDispatch({ field: 'loading', value: true });
|
||||
homeDispatch({ field: 'messageIsStreaming', value: true });
|
||||
const chatBody: ChatBody = {
|
||||
model: updatedConversation.model,
|
||||
messages: updatedConversation.messages,
|
||||
key: apiKey,
|
||||
prompt: updatedConversation.prompt,
|
||||
};
|
||||
const endpoint = getEndpoint(plugin);
|
||||
let body;
|
||||
if (!plugin) {
|
||||
body = JSON.stringify(chatBody);
|
||||
} else {
|
||||
body = JSON.stringify({
|
||||
...chatBody,
|
||||
googleAPIKey: pluginKeys
|
||||
.find((key) => key.pluginId === 'google-search')
|
||||
?.requiredKeys.find((key) => key.key === 'GOOGLE_API_KEY')?.value,
|
||||
googleCSEId: pluginKeys
|
||||
.find((key) => key.pluginId === 'google-search')
|
||||
?.requiredKeys.find((key) => key.key === 'GOOGLE_CSE_ID')?.value,
|
||||
});
|
||||
}
|
||||
const controller = new AbortController();
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
signal: controller.signal,
|
||||
body,
|
||||
});
|
||||
if (!response.ok) {
|
||||
homeDispatch({ field: 'loading', value: false });
|
||||
homeDispatch({ field: 'messageIsStreaming', value: false });
|
||||
toast.error(response.statusText);
|
||||
return;
|
||||
}
|
||||
const data = response.body;
|
||||
if (!data) {
|
||||
homeDispatch({ field: 'loading', value: false });
|
||||
homeDispatch({ field: 'messageIsStreaming', value: false });
|
||||
return;
|
||||
}
|
||||
if (!plugin) {
|
||||
if (updatedConversation.messages.length === 1) {
|
||||
const { content } = message;
|
||||
const customName =
|
||||
content.length > 30 ? content.substring(0, 30) + '...' : content;
|
||||
updatedConversation = {
|
||||
...updatedConversation,
|
||||
name: customName,
|
||||
};
|
||||
}
|
||||
homeDispatch({ field: 'loading', value: false });
|
||||
const reader = data.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let done = false;
|
||||
let isFirst = true;
|
||||
let text = '';
|
||||
while (!done) {
|
||||
if (stopConversationRef.current === true) {
|
||||
controller.abort();
|
||||
done = true;
|
||||
break;
|
||||
}
|
||||
const { value, done: doneReading } = await reader.read();
|
||||
done = doneReading;
|
||||
const chunkValue = decoder.decode(value);
|
||||
text += chunkValue;
|
||||
if (isFirst) {
|
||||
isFirst = false;
|
||||
const updatedMessages: Message[] = [
|
||||
...updatedConversation.messages,
|
||||
{ role: 'assistant', content: chunkValue },
|
||||
];
|
||||
updatedConversation = {
|
||||
...updatedConversation,
|
||||
messages: updatedMessages,
|
||||
};
|
||||
homeDispatch({
|
||||
field: 'selectedConversation',
|
||||
value: updatedConversation,
|
||||
});
|
||||
} else {
|
||||
const updatedMessages: Message[] =
|
||||
updatedConversation.messages.map((message, index) => {
|
||||
if (index === updatedConversation.messages.length - 1) {
|
||||
return {
|
||||
...message,
|
||||
content: text,
|
||||
};
|
||||
}
|
||||
return message;
|
||||
});
|
||||
updatedConversation = {
|
||||
...updatedConversation,
|
||||
messages: updatedMessages,
|
||||
};
|
||||
homeDispatch({
|
||||
field: 'selectedConversation',
|
||||
value: updatedConversation,
|
||||
});
|
||||
}
|
||||
}
|
||||
saveConversation(updatedConversation);
|
||||
const updatedConversations: Conversation[] = conversations.map(
|
||||
(conversation) => {
|
||||
if (conversation.id === selectedConversation.id) {
|
||||
return updatedConversation;
|
||||
}
|
||||
return conversation;
|
||||
},
|
||||
);
|
||||
if (updatedConversations.length === 0) {
|
||||
updatedConversations.push(updatedConversation);
|
||||
}
|
||||
homeDispatch({ field: 'conversations', value: updatedConversations });
|
||||
saveConversations(updatedConversations);
|
||||
homeDispatch({ field: 'messageIsStreaming', value: false });
|
||||
} else {
|
||||
const { answer } = await response.json();
|
||||
const updatedMessages: Message[] = [
|
||||
...updatedConversation.messages,
|
||||
{ role: 'assistant', content: answer },
|
||||
];
|
||||
updatedConversation = {
|
||||
...updatedConversation,
|
||||
messages: updatedMessages,
|
||||
};
|
||||
homeDispatch({
|
||||
field: 'selectedConversation',
|
||||
value: updateConversation,
|
||||
});
|
||||
saveConversation(updatedConversation);
|
||||
const updatedConversations: Conversation[] = conversations.map(
|
||||
(conversation) => {
|
||||
if (conversation.id === selectedConversation.id) {
|
||||
return updatedConversation;
|
||||
}
|
||||
return conversation;
|
||||
},
|
||||
);
|
||||
if (updatedConversations.length === 0) {
|
||||
updatedConversations.push(updatedConversation);
|
||||
}
|
||||
homeDispatch({ field: 'conversations', value: updatedConversations });
|
||||
saveConversations(updatedConversations);
|
||||
homeDispatch({ field: 'loading', value: false });
|
||||
homeDispatch({ field: 'messageIsStreaming', value: false });
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
apiKey,
|
||||
conversations,
|
||||
pluginKeys,
|
||||
selectedConversation,
|
||||
stopConversationRef,
|
||||
],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative flex-1 overflow-hidden bg-white dark:bg-[#343541]">
|
||||
{!(apiKey || serverSideApiKeyIsSet) ? (
|
||||
<div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[600px]">
|
||||
<div className="text-center text-4xl font-bold text-black dark:text-white">
|
||||
Welcome to Chatbot UI
|
||||
</div>
|
||||
<div className="text-center text-lg text-black dark:text-white">
|
||||
<div className="mb-8">{`Chatbot UI is an open source clone of OpenAI's ChatGPT UI.`}</div>
|
||||
<div className="mb-2 font-bold">
|
||||
Important: Chatbot UI is 100% unaffiliated with OpenAI.
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center text-gray-500 dark:text-gray-400">
|
||||
<div className="mb-2">
|
||||
Chatbot UI allows you to plug in your API key to use this UI
|
||||
with their API.
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
It is <span className="italic">only</span> used to communicate
|
||||
with their API.
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
{t(
|
||||
'Please set your OpenAI API key in the bottom left of the sidebar.',
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{t(
|
||||
"If you don't have an OpenAI API key, you can get one here: ",
|
||||
)}
|
||||
<a
|
||||
href="https://platform.openai.com/account/api-keys"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-blue-500 hover:underline"
|
||||
>
|
||||
openai.com
|
||||
</a>
|
||||
</div>
|
||||
const scrollToBottom = useCallback(() => {
|
||||
if (autoScrollEnabled) {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
textareaRef.current?.focus();
|
||||
}
|
||||
}, [autoScrollEnabled]);
|
||||
|
||||
const handleScroll = () => {
|
||||
if (chatContainerRef.current) {
|
||||
const { scrollTop, scrollHeight, clientHeight } =
|
||||
chatContainerRef.current;
|
||||
const bottomTolerance = 30;
|
||||
|
||||
if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
|
||||
setAutoScrollEnabled(false);
|
||||
setShowScrollDownButton(true);
|
||||
} else {
|
||||
setAutoScrollEnabled(true);
|
||||
setShowScrollDownButton(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleScrollDown = () => {
|
||||
chatContainerRef.current?.scrollTo({
|
||||
top: chatContainerRef.current.scrollHeight,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
};
|
||||
|
||||
const handleSettings = () => {
|
||||
setShowSettings(!showSettings);
|
||||
};
|
||||
|
||||
const onClearAll = () => {
|
||||
if (
|
||||
confirm(t<string>('Are you sure you want to clear all messages?')) &&
|
||||
selectedConversation
|
||||
) {
|
||||
handleUpdateConversation(selectedConversation, {
|
||||
key: 'messages',
|
||||
value: [],
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const scrollDown = () => {
|
||||
if (autoScrollEnabled) {
|
||||
messagesEndRef.current?.scrollIntoView(true);
|
||||
}
|
||||
};
|
||||
const throttledScrollDown = throttle(scrollDown, 250);
|
||||
|
||||
// useEffect(() => {
|
||||
// console.log('currentMessage', currentMessage);
|
||||
// if (currentMessage) {
|
||||
// handleSend(currentMessage);
|
||||
// homeDispatch({ field: 'currentMessage', value: undefined });
|
||||
// }
|
||||
// }, [currentMessage]);
|
||||
|
||||
useEffect(() => {
|
||||
throttledScrollDown();
|
||||
selectedConversation &&
|
||||
setCurrentMessage(
|
||||
selectedConversation.messages[selectedConversation.messages.length - 2],
|
||||
);
|
||||
}, [selectedConversation, throttledScrollDown]);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
setAutoScrollEnabled(entry.isIntersecting);
|
||||
if (entry.isIntersecting) {
|
||||
textareaRef.current?.focus();
|
||||
}
|
||||
},
|
||||
{
|
||||
root: null,
|
||||
threshold: 0.5,
|
||||
},
|
||||
);
|
||||
const messagesEndElement = messagesEndRef.current;
|
||||
if (messagesEndElement) {
|
||||
observer.observe(messagesEndElement);
|
||||
}
|
||||
return () => {
|
||||
if (messagesEndElement) {
|
||||
observer.unobserve(messagesEndElement);
|
||||
}
|
||||
};
|
||||
}, [messagesEndRef]);
|
||||
|
||||
return (
|
||||
<div className="relative flex-1 overflow-hidden bg-white dark:bg-[#343541]">
|
||||
{!(apiKey || serverSideApiKeyIsSet) ? (
|
||||
<div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[600px]">
|
||||
<div className="text-center text-4xl font-bold text-black dark:text-white">
|
||||
Welcome to Chatbot UI
|
||||
</div>
|
||||
<div className="text-center text-lg text-black dark:text-white">
|
||||
<div className="mb-8">{`Chatbot UI is an open source clone of OpenAI's ChatGPT UI.`}</div>
|
||||
<div className="mb-2 font-bold">
|
||||
Important: Chatbot UI is 100% unaffiliated with OpenAI.
|
||||
</div>
|
||||
</div>
|
||||
) : modelError ? (
|
||||
<ErrorMessageDiv error={modelError} />
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className="max-h-full overflow-x-hidden"
|
||||
ref={chatContainerRef}
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
{conversation.messages.length === 0 ? (
|
||||
<>
|
||||
<div className="mx-auto flex w-[350px] flex-col space-y-10 pt-12 sm:w-[600px]">
|
||||
<div className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
|
||||
{models.length === 0 ? (
|
||||
<div>
|
||||
<Spinner size="16px" className="mx-auto" />
|
||||
</div>
|
||||
) : (
|
||||
'Chatbot UI'
|
||||
)}
|
||||
</div>
|
||||
|
||||
{models.length > 0 && (
|
||||
<div className="flex h-full flex-col space-y-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-600">
|
||||
<ModelSelect
|
||||
model={conversation.model}
|
||||
models={models}
|
||||
defaultModelId={defaultModelId}
|
||||
onModelChange={(model) =>
|
||||
onUpdateConversation(conversation, {
|
||||
key: 'model',
|
||||
value: model,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<SystemPrompt
|
||||
conversation={conversation}
|
||||
prompts={prompts}
|
||||
onChangePrompt={(prompt) =>
|
||||
onUpdateConversation(conversation, {
|
||||
key: 'prompt',
|
||||
value: prompt,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</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}
|
||||
<button
|
||||
className="ml-2 cursor-pointer hover:opacity-50"
|
||||
onClick={handleSettings}
|
||||
>
|
||||
<IconSettings size={18} />
|
||||
</button>
|
||||
<button
|
||||
className="ml-2 cursor-pointer hover:opacity-50"
|
||||
onClick={onClearAll}
|
||||
>
|
||||
<IconClearAll size={18} />
|
||||
</button>
|
||||
</div>
|
||||
{showSettings && (
|
||||
<div className="flex flex-col space-y-10 md:mx-auto md:max-w-xl md:gap-6 md:py-3 md:pt-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
|
||||
<div className="flex h-full flex-col space-y-4 border-b border-neutral-200 p-4 dark:border-neutral-600 md:rounded-lg md:border">
|
||||
<ModelSelect
|
||||
model={conversation.model}
|
||||
models={models}
|
||||
defaultModelId={defaultModelId}
|
||||
onModelChange={(model) =>
|
||||
onUpdateConversation(conversation, {
|
||||
key: 'model',
|
||||
value: model,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{conversation.messages.map((message, index) => (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
message={message}
|
||||
messageIndex={index}
|
||||
onEditMessage={onEditMessage}
|
||||
/>
|
||||
))}
|
||||
|
||||
{loading && <ChatLoader />}
|
||||
|
||||
<div
|
||||
className="h-[162px] bg-white dark:bg-[#343541]"
|
||||
ref={messagesEndRef}
|
||||
/>
|
||||
</>
|
||||
<div className="text-center text-gray-500 dark:text-gray-400">
|
||||
<div className="mb-2">
|
||||
Chatbot UI allows you to plug in your API key to use this UI with
|
||||
their API.
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
It is <span className="italic">only</span> used to communicate
|
||||
with their API.
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
{t(
|
||||
'Please set your OpenAI API key in the bottom left of the sidebar.',
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ChatInput
|
||||
stopConversationRef={stopConversationRef}
|
||||
textareaRef={textareaRef}
|
||||
messageIsStreaming={messageIsStreaming}
|
||||
conversationIsEmpty={conversation.messages.length === 0}
|
||||
model={conversation.model}
|
||||
prompts={prompts}
|
||||
onSend={(message, plugin) => {
|
||||
setCurrentMessage(message);
|
||||
onSend(message, 0, plugin);
|
||||
}}
|
||||
onRegenerate={() => {
|
||||
if (currentMessage) {
|
||||
onSend(currentMessage, 2, null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{showScrollDownButton && (
|
||||
<div className="absolute bottom-0 right-0 mb-4 mr-4 pb-20">
|
||||
<button
|
||||
className="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-300 text-gray-800 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-neutral-200"
|
||||
onClick={handleScrollDown}
|
||||
>
|
||||
<IconArrowDown size={18} />
|
||||
</button>
|
||||
<div>
|
||||
{t("If you don't have an OpenAI API key, you can get one here: ")}
|
||||
<a
|
||||
href="https://platform.openai.com/account/api-keys"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-blue-500 hover:underline"
|
||||
>
|
||||
openai.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
</div>
|
||||
) : modelError ? (
|
||||
<ErrorMessageDiv error={modelError} />
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className="max-h-full overflow-x-hidden"
|
||||
ref={chatContainerRef}
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
{selectedConversation?.messages.length === 0 ? (
|
||||
<>
|
||||
<div className="mx-auto flex w-[350px] flex-col space-y-10 pt-12 sm:w-[600px]">
|
||||
<div className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
|
||||
{models.length === 0 ? (
|
||||
<div>
|
||||
<Spinner size="16px" className="mx-auto" />
|
||||
</div>
|
||||
) : (
|
||||
'Chatbot UI'
|
||||
)}
|
||||
</div>
|
||||
|
||||
{models.length > 0 && (
|
||||
<div className="flex h-full flex-col space-y-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-600">
|
||||
<ModelSelect />
|
||||
|
||||
<SystemPrompt
|
||||
conversation={selectedConversation}
|
||||
prompts={prompts}
|
||||
onChangePrompt={(prompt) =>
|
||||
handleUpdateConversation(selectedConversation, {
|
||||
key: 'prompt',
|
||||
value: prompt,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</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')}: {selectedConversation?.model.name}
|
||||
<button
|
||||
className="ml-2 cursor-pointer hover:opacity-50"
|
||||
onClick={handleSettings}
|
||||
>
|
||||
<IconSettings size={18} />
|
||||
</button>
|
||||
<button
|
||||
className="ml-2 cursor-pointer hover:opacity-50"
|
||||
onClick={onClearAll}
|
||||
>
|
||||
<IconClearAll size={18} />
|
||||
</button>
|
||||
</div>
|
||||
{showSettings && (
|
||||
<div className="flex flex-col space-y-10 md:mx-auto md:max-w-xl md:gap-6 md:py-3 md:pt-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
|
||||
<div className="flex h-full flex-col space-y-4 border-b border-neutral-200 p-4 dark:border-neutral-600 md:rounded-lg md:border">
|
||||
<ModelSelect />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedConversation?.messages.map((message, index) => (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
message={message}
|
||||
messageIndex={index}
|
||||
/>
|
||||
))}
|
||||
|
||||
{loading && <ChatLoader />}
|
||||
|
||||
<div
|
||||
className="h-[162px] bg-white dark:bg-[#343541]"
|
||||
ref={messagesEndRef}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ChatInput
|
||||
stopConversationRef={stopConversationRef}
|
||||
textareaRef={textareaRef}
|
||||
onSend={(message, plugin) => {
|
||||
setCurrentMessage(message);
|
||||
handleSend(message, 0, plugin);
|
||||
}}
|
||||
onRegenerate={() => {
|
||||
if (currentMessage) {
|
||||
handleSend(currentMessage, 2, null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{showScrollDownButton && (
|
||||
<div className="absolute bottom-0 right-0 mb-4 mr-4 pb-20">
|
||||
<button
|
||||
className="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-300 text-gray-800 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-neutral-200"
|
||||
onClick={handleScrollDown}
|
||||
>
|
||||
<IconArrowDown size={18} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Chat.displayName = 'Chat';
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
import { Message } from '@/types/chat';
|
||||
import { OpenAIModel } from '@/types/openai';
|
||||
import { Plugin } from '@/types/plugin';
|
||||
import { Prompt } from '@/types/prompt';
|
||||
import {
|
||||
IconBolt,
|
||||
IconBrandGoogle,
|
||||
@@ -9,43 +5,49 @@ import {
|
||||
IconRepeat,
|
||||
IconSend,
|
||||
} from '@tabler/icons-react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import {
|
||||
FC,
|
||||
KeyboardEvent,
|
||||
MutableRefObject,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
import { Message } from '@/types/chat';
|
||||
import { Plugin } from '@/types/plugin';
|
||||
import { Prompt } from '@/types/prompt';
|
||||
|
||||
import HomeContext from '@/pages/api/home/home.context';
|
||||
|
||||
import { PluginSelect } from './PluginSelect';
|
||||
import { PromptList } from './PromptList';
|
||||
import { VariableModal } from './VariableModal';
|
||||
|
||||
interface Props {
|
||||
messageIsStreaming: boolean;
|
||||
model: OpenAIModel;
|
||||
conversationIsEmpty: boolean;
|
||||
prompts: Prompt[];
|
||||
onSend: (message: Message, plugin: Plugin | null) => void;
|
||||
onRegenerate: () => void;
|
||||
stopConversationRef: MutableRefObject<boolean>;
|
||||
textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
|
||||
}
|
||||
|
||||
export const ChatInput: FC<Props> = ({
|
||||
messageIsStreaming,
|
||||
model,
|
||||
conversationIsEmpty,
|
||||
prompts,
|
||||
export const ChatInput = ({
|
||||
onSend,
|
||||
onRegenerate,
|
||||
stopConversationRef,
|
||||
textareaRef,
|
||||
}) => {
|
||||
}: Props) => {
|
||||
const { t } = useTranslation('chat');
|
||||
|
||||
const {
|
||||
state: { selectedConversation, messageIsStreaming, prompts },
|
||||
|
||||
dispatch: homeDispatch,
|
||||
} = useContext(HomeContext);
|
||||
|
||||
const [content, setContent] = useState<string>();
|
||||
const [isTyping, setIsTyping] = useState<boolean>(false);
|
||||
const [showPromptList, setShowPromptList] = useState(false);
|
||||
@@ -64,9 +66,9 @@ export const ChatInput: FC<Props> = ({
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const value = e.target.value;
|
||||
const maxLength = model.maxLength;
|
||||
const maxLength = selectedConversation?.model.maxLength;
|
||||
|
||||
if (value.length > maxLength) {
|
||||
if (maxLength && value.length > maxLength) {
|
||||
alert(
|
||||
t(
|
||||
`Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`,
|
||||
@@ -261,14 +263,16 @@ export const ChatInput: FC<Props> = ({
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!messageIsStreaming && !conversationIsEmpty && (
|
||||
<button
|
||||
className="absolute top-0 left-0 right-0 mx-auto mb-3 flex w-fit items-center gap-3 rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:mb-0 md:mt-2"
|
||||
onClick={onRegenerate}
|
||||
>
|
||||
<IconRepeat size={16} /> {t('Regenerate response')}
|
||||
</button>
|
||||
)}
|
||||
{!messageIsStreaming &&
|
||||
selectedConversation &&
|
||||
selectedConversation.messages.length > 0 && (
|
||||
<button
|
||||
className="absolute top-0 left-0 right-0 mx-auto mb-3 flex w-fit items-center gap-3 rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:mb-0 md:mt-2"
|
||||
onClick={onRegenerate}
|
||||
>
|
||||
<IconRepeat size={16} /> {t('Regenerate response')}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="relative mx-2 flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] sm:mx-4">
|
||||
<button
|
||||
|
||||
+231
-197
@@ -1,237 +1,271 @@
|
||||
import { Message } from '@/types/chat';
|
||||
import {
|
||||
IconCheck,
|
||||
IconCopy,
|
||||
IconEdit,
|
||||
IconUser,
|
||||
IconRobot,
|
||||
IconUser,
|
||||
} from '@tabler/icons-react';
|
||||
import { FC, memo, useContext, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { FC, memo, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { updateConversation } from '@/utils/app/conversation';
|
||||
|
||||
import { Message } from '@/types/chat';
|
||||
|
||||
import HomeContext from '@/pages/api/home/home.context';
|
||||
|
||||
import { CodeBlock } from '../Markdown/CodeBlock';
|
||||
import { MemoizedReactMarkdown } from '../Markdown/MemoizedReactMarkdown';
|
||||
|
||||
import rehypeMathjax from 'rehype-mathjax';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import remarkMath from 'remark-math';
|
||||
import { CodeBlock } from '../Markdown/CodeBlock';
|
||||
import { MemoizedReactMarkdown } from '../Markdown/MemoizedReactMarkdown';
|
||||
|
||||
interface Props {
|
||||
message: Message;
|
||||
messageIndex: number;
|
||||
onEditMessage: (message: Message, messageIndex: number) => void;
|
||||
}
|
||||
|
||||
export const ChatMessage: FC<Props> = memo(
|
||||
({ message, messageIndex, onEditMessage }) => {
|
||||
const { t } = useTranslation('chat');
|
||||
const [isEditing, setIsEditing] = useState<boolean>(false);
|
||||
const [isTyping, setIsTyping] = useState<boolean>(false);
|
||||
const [messageContent, setMessageContent] = useState(message.content);
|
||||
const [messagedCopied, setMessageCopied] = useState(false);
|
||||
export const ChatMessage: FC<Props> = memo(({ message, messageIndex }) => {
|
||||
const { t } = useTranslation('chat');
|
||||
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const {
|
||||
state: { selectedConversation, conversations },
|
||||
dispatch: homeDispatch,
|
||||
} = useContext(HomeContext);
|
||||
|
||||
const toggleEditing = () => {
|
||||
setIsEditing(!isEditing);
|
||||
};
|
||||
const [isEditing, setIsEditing] = useState<boolean>(false);
|
||||
const [isTyping, setIsTyping] = useState<boolean>(false);
|
||||
const [messageContent, setMessageContent] = useState(message.content);
|
||||
const [messagedCopied, setMessageCopied] = useState(false);
|
||||
|
||||
const handleInputChange = (
|
||||
event: React.ChangeEvent<HTMLTextAreaElement>,
|
||||
) => {
|
||||
setMessageContent(event.target.value);
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'inherit';
|
||||
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const toggleEditing = () => {
|
||||
setIsEditing(!isEditing);
|
||||
};
|
||||
|
||||
const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setMessageContent(event.target.value);
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'inherit';
|
||||
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditMessage = () => {
|
||||
if (message.content != messageContent) {
|
||||
if (selectedConversation) {
|
||||
const updatedMessages = selectedConversation.messages
|
||||
.map((m, i) => {
|
||||
if (i < messageIndex) {
|
||||
return m;
|
||||
}
|
||||
})
|
||||
.filter((m) => m) as Message[];
|
||||
|
||||
const updatedConversation = {
|
||||
...selectedConversation,
|
||||
messages: updatedMessages,
|
||||
};
|
||||
|
||||
const { single, all } = updateConversation(
|
||||
updatedConversation,
|
||||
conversations,
|
||||
);
|
||||
|
||||
homeDispatch({ field: 'selectedConversation', value: single });
|
||||
homeDispatch({ field: 'conversations', value: all });
|
||||
homeDispatch({
|
||||
field: 'currentMessage',
|
||||
value: { ...message, content: messageContent },
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleEditMessage = () => {
|
||||
if (message.content != messageContent) {
|
||||
onEditMessage({ ...message, content: messageContent }, messageIndex);
|
||||
}
|
||||
setIsEditing(false);
|
||||
};
|
||||
const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === 'Enter' && !isTyping && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleEditMessage();
|
||||
}
|
||||
};
|
||||
|
||||
const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === 'Enter' && !isTyping && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleEditMessage();
|
||||
}
|
||||
};
|
||||
const copyOnClick = () => {
|
||||
if (!navigator.clipboard) return;
|
||||
|
||||
const copyOnClick = () => {
|
||||
if (!navigator.clipboard) return;
|
||||
navigator.clipboard.writeText(message.content).then(() => {
|
||||
setMessageCopied(true);
|
||||
setTimeout(() => {
|
||||
setMessageCopied(false);
|
||||
}, 2000);
|
||||
});
|
||||
};
|
||||
|
||||
navigator.clipboard.writeText(message.content).then(() => {
|
||||
setMessageCopied(true);
|
||||
setTimeout(() => {
|
||||
setMessageCopied(false);
|
||||
}, 2000);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'inherit';
|
||||
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
|
||||
}
|
||||
}, [isEditing]);
|
||||
|
||||
useEffect(() => {
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'inherit';
|
||||
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
|
||||
}
|
||||
}, [isEditing]);
|
||||
return (
|
||||
<div
|
||||
className={`group px-4 ${
|
||||
message.role === 'assistant'
|
||||
? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100'
|
||||
: 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100'
|
||||
}`}
|
||||
style={{ overflowWrap: 'anywhere' }}
|
||||
>
|
||||
<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] text-right font-bold">
|
||||
{message.role === 'assistant' ? (
|
||||
<IconRobot size={30} />
|
||||
) : (
|
||||
<IconUser size={30} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group px-4 ${
|
||||
message.role === 'assistant'
|
||||
? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100'
|
||||
: 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100'
|
||||
}`}
|
||||
style={{ overflowWrap: 'anywhere' }}
|
||||
>
|
||||
<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] text-right font-bold">
|
||||
{message.role === 'assistant' ? (
|
||||
<IconRobot size={30} />
|
||||
) : (
|
||||
<IconUser size={30} />
|
||||
)}
|
||||
</div>
|
||||
<div className="prose mt-[-2px] w-full dark:prose-invert">
|
||||
{message.role === 'user' ? (
|
||||
<div className="flex w-full">
|
||||
{isEditing ? (
|
||||
<div className="flex w-full flex-col">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
className="w-full resize-none whitespace-pre-wrap border-none dark:bg-[#343541]"
|
||||
value={messageContent}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handlePressEnter}
|
||||
onCompositionStart={() => setIsTyping(true)}
|
||||
onCompositionEnd={() => setIsTyping(false)}
|
||||
style={{
|
||||
fontFamily: 'inherit',
|
||||
fontSize: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
padding: '0',
|
||||
margin: '0',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="prose mt-[-2px] w-full dark:prose-invert">
|
||||
{message.role === 'user' ? (
|
||||
<div className="flex w-full">
|
||||
{isEditing ? (
|
||||
<div className="flex w-full flex-col">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
className="w-full resize-none whitespace-pre-wrap border-none dark:bg-[#343541]"
|
||||
value={messageContent}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handlePressEnter}
|
||||
onCompositionStart={() => setIsTyping(true)}
|
||||
onCompositionEnd={() => setIsTyping(false)}
|
||||
style={{
|
||||
fontFamily: 'inherit',
|
||||
fontSize: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
padding: '0',
|
||||
margin: '0',
|
||||
overflow: 'hidden',
|
||||
<div className="mt-10 flex justify-center space-x-4">
|
||||
<button
|
||||
className="h-[40px] rounded-md bg-blue-500 px-4 py-1 text-sm font-medium text-white enabled:hover:bg-blue-600 disabled:opacity-50"
|
||||
onClick={handleEditMessage}
|
||||
disabled={messageContent.trim().length <= 0}
|
||||
>
|
||||
{t('Save & Submit')}
|
||||
</button>
|
||||
<button
|
||||
className="h-[40px] rounded-md border border-neutral-300 px-4 py-1 text-sm font-medium text-neutral-700 hover:bg-neutral-100 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
|
||||
onClick={() => {
|
||||
setMessageContent(message.content);
|
||||
setIsEditing(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="mt-10 flex justify-center space-x-4">
|
||||
<button
|
||||
className="h-[40px] rounded-md bg-blue-500 px-4 py-1 text-sm font-medium text-white enabled:hover:bg-blue-600 disabled:opacity-50"
|
||||
onClick={handleEditMessage}
|
||||
disabled={messageContent.trim().length <= 0}
|
||||
>
|
||||
{t('Save & Submit')}
|
||||
</button>
|
||||
<button
|
||||
className="h-[40px] rounded-md border border-neutral-300 px-4 py-1 text-sm font-medium text-neutral-700 hover:bg-neutral-100 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
|
||||
onClick={() => {
|
||||
setMessageContent(message.content);
|
||||
setIsEditing(false);
|
||||
}}
|
||||
>
|
||||
{t('Cancel')}
|
||||
</button>
|
||||
</div>
|
||||
>
|
||||
{t('Cancel')}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="prose whitespace-pre-wrap dark:prose-invert">
|
||||
{message.content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="prose whitespace-pre-wrap dark:prose-invert">
|
||||
{message.content}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(window.innerWidth < 640 || !isEditing) && (
|
||||
<button
|
||||
className={`absolute translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300 ${
|
||||
window.innerWidth < 640
|
||||
? 'bottom-1 right-3'
|
||||
: 'right-0 top-[26px]'
|
||||
}
|
||||
{(window.innerWidth < 640 || !isEditing) && (
|
||||
<button
|
||||
className={`absolute translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300 ${
|
||||
window.innerWidth < 640
|
||||
? 'bottom-1 right-3'
|
||||
: 'right-0 top-[26px]'
|
||||
}
|
||||
`}
|
||||
onClick={toggleEditing}
|
||||
onClick={toggleEditing}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`absolute ${
|
||||
window.innerWidth < 640
|
||||
? 'bottom-1 right-3'
|
||||
: 'right-0 top-[26px] m-0'
|
||||
}`}
|
||||
>
|
||||
{messagedCopied ? (
|
||||
<IconCheck
|
||||
size={20}
|
||||
className="text-green-500 dark:text-green-400"
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
className="translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300"
|
||||
onClick={copyOnClick}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
<IconCopy size={20} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`absolute ${
|
||||
window.innerWidth < 640
|
||||
? 'bottom-1 right-3'
|
||||
: 'right-0 top-[26px] m-0'
|
||||
}`}
|
||||
>
|
||||
{messagedCopied ? (
|
||||
<IconCheck
|
||||
size={20}
|
||||
className="text-green-500 dark:text-green-400"
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
className="translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300"
|
||||
onClick={copyOnClick}
|
||||
>
|
||||
<IconCopy size={20} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<MemoizedReactMarkdown
|
||||
className="prose dark:prose-invert"
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeMathjax]}
|
||||
components={{
|
||||
code({ node, inline, className, children, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
<MemoizedReactMarkdown
|
||||
className="prose dark:prose-invert"
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeMathjax]}
|
||||
components={{
|
||||
code({ node, inline, className, children, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
|
||||
return !inline ? (
|
||||
<CodeBlock
|
||||
key={Math.random()}
|
||||
language={(match && match[1]) || ''}
|
||||
value={String(children).replace(/\n$/, '')}
|
||||
{...props}
|
||||
/>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
table({ children }) {
|
||||
return (
|
||||
<table className="border-collapse border border-black px-3 py-1 dark:border-white">
|
||||
{children}
|
||||
</table>
|
||||
);
|
||||
},
|
||||
th({ children }) {
|
||||
return (
|
||||
<th className="break-words border border-black bg-gray-500 px-3 py-1 text-white dark:border-white">
|
||||
{children}
|
||||
</th>
|
||||
);
|
||||
},
|
||||
td({ children }) {
|
||||
return (
|
||||
<td className="break-words border border-black px-3 py-1 dark:border-white">
|
||||
{children}
|
||||
</td>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{message.content}
|
||||
</MemoizedReactMarkdown>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
return !inline ? (
|
||||
<CodeBlock
|
||||
key={Math.random()}
|
||||
language={(match && match[1]) || ''}
|
||||
value={String(children).replace(/\n$/, '')}
|
||||
{...props}
|
||||
/>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
table({ children }) {
|
||||
return (
|
||||
<table className="border-collapse border border-black px-3 py-1 dark:border-white">
|
||||
{children}
|
||||
</table>
|
||||
);
|
||||
},
|
||||
th({ children }) {
|
||||
return (
|
||||
<th className="break-words border border-black bg-gray-500 px-3 py-1 text-white dark:border-white">
|
||||
{children}
|
||||
</th>
|
||||
);
|
||||
},
|
||||
td({ children }) {
|
||||
return (
|
||||
<td className="break-words border border-black px-3 py-1 dark:border-white">
|
||||
{children}
|
||||
</td>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{message.content}
|
||||
</MemoizedReactMarkdown>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
</div>
|
||||
);
|
||||
});
|
||||
ChatMessage.displayName = 'ChatMessage';
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { ErrorMessage } from '@/types/error';
|
||||
import { IconCircleX } from '@tabler/icons-react';
|
||||
import { FC } from 'react';
|
||||
|
||||
import { ErrorMessage } from '@/types/error';
|
||||
|
||||
interface Props {
|
||||
error: ErrorMessage;
|
||||
}
|
||||
|
||||
@@ -1,23 +1,31 @@
|
||||
import { OpenAIModel, OpenAIModelID } from '@/types/openai';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { IconExternalLink } from '@tabler/icons-react';
|
||||
import { FC } from 'react';
|
||||
import { useContext } from 'react';
|
||||
|
||||
interface Props {
|
||||
model: OpenAIModel;
|
||||
models: OpenAIModel[];
|
||||
defaultModelId: OpenAIModelID;
|
||||
onModelChange: (model: OpenAIModel) => void;
|
||||
}
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
export const ModelSelect: FC<Props> = ({
|
||||
model,
|
||||
models,
|
||||
defaultModelId,
|
||||
onModelChange,
|
||||
}) => {
|
||||
import { OpenAIModel } from '@/types/openai';
|
||||
|
||||
import HomeContext from '@/pages/api/home/home.context';
|
||||
|
||||
export const ModelSelect = () => {
|
||||
const { t } = useTranslation('chat');
|
||||
|
||||
const {
|
||||
state: { selectedConversation, models, defaultModelId },
|
||||
handleUpdateConversation,
|
||||
dispatch: homeDispatch,
|
||||
} = useContext(HomeContext);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
selectedConversation &&
|
||||
handleUpdateConversation(selectedConversation, {
|
||||
key: 'model',
|
||||
value: models.find(
|
||||
(model) => model.id === e.target.value,
|
||||
) as OpenAIModel,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
|
||||
@@ -27,14 +35,8 @@ export const ModelSelect: FC<Props> = ({
|
||||
<select
|
||||
className="w-full bg-transparent p-2"
|
||||
placeholder={t('Select a model') || ''}
|
||||
value={model?.id || defaultModelId}
|
||||
onChange={(e) => {
|
||||
onModelChange(
|
||||
models.find(
|
||||
(model) => model.id === e.target.value,
|
||||
) as OpenAIModel,
|
||||
);
|
||||
}}
|
||||
value={selectedConversation?.model?.id || defaultModelId}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{models.map((model) => (
|
||||
<option
|
||||
@@ -50,8 +52,12 @@ export const ModelSelect: FC<Props> = ({
|
||||
</select>
|
||||
</div>
|
||||
<div className="w-full mt-3 text-left text-neutral-700 dark:text-neutral-400 flex items-center">
|
||||
<a href="https://platform.openai.com/account/usage" target="_blank" className="flex items-center">
|
||||
<IconExternalLink size={18} className={"inline mr-1"} />
|
||||
<a
|
||||
href="https://platform.openai.com/account/usage"
|
||||
target="_blank"
|
||||
className="flex items-center"
|
||||
>
|
||||
<IconExternalLink size={18} className={'inline mr-1'} />
|
||||
{t('View Account Usage')}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { Plugin, PluginList } from '@/types/plugin';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { FC, useEffect, useRef } from 'react';
|
||||
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
import { Plugin, PluginList } from '@/types/plugin';
|
||||
|
||||
interface Props {
|
||||
plugin: Plugin | null;
|
||||
onPluginChange: (plugin: Plugin) => void;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Prompt } from '@/types/prompt';
|
||||
import { FC, MutableRefObject } from 'react';
|
||||
|
||||
import { Prompt } from '@/types/prompt';
|
||||
|
||||
interface Props {
|
||||
prompts: Prompt[];
|
||||
activePromptIndex: number;
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { IconRefresh } from '@tabler/icons-react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { FC } from 'react';
|
||||
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
interface Props {
|
||||
onRegenerate: () => void;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
import { Conversation } from '@/types/chat';
|
||||
import { OpenAIModelID } from '@/types/openai';
|
||||
import { Prompt } from '@/types/prompt';
|
||||
import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import {
|
||||
FC,
|
||||
KeyboardEvent,
|
||||
@@ -11,6 +6,14 @@ import {
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
|
||||
|
||||
import { Conversation } from '@/types/chat';
|
||||
import { Prompt } from '@/types/prompt';
|
||||
|
||||
import { PromptList } from './PromptList';
|
||||
import { VariableModal } from './VariableModal';
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Prompt } from '@/types/prompt';
|
||||
import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { Prompt } from '@/types/prompt';
|
||||
|
||||
interface Props {
|
||||
prompt: Prompt;
|
||||
variables: string[];
|
||||
|
||||
Reference in New Issue
Block a user