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

error handling (#27)

Browse Source
This commit is contained in:
Mckay Wrigley
2023-03-20 07:17:58 -06:00
committed by GitHub
parent a0751994b1
commit dd439bb4a8
4 changed files with 125 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chat/Chat.tsx
+65 -37
View File
@@ -1,21 +1,26 @@
import { Conversation, Message, OpenAIModel } from "@/types";
import { FC, useEffect, useRef } from "react";
import { FC, useEffect, useRef, useState } from "react";
import { ChatInput } from "./ChatInput";
import { ChatLoader } from "./ChatLoader";
import { ChatMessage } from "./ChatMessage";
import { ModelSelect } from "./ModelSelect";
import { Regenerate } from "./Regenerate";
interface Props {
conversation: Conversation;
models: OpenAIModel[];
messageIsStreaming: boolean;
modelError: boolean;
messageError: boolean;
loading: boolean;
lightMode: "light" | "dark";
onSend: (message: Message) => void;
onSend: (message: Message, isResend: boolean) => void;
onModelChange: (conversation: Conversation, model: OpenAIModel) => void;
}
export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, loading, lightMode, onSend, onModelChange }) => {
export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, modelError, messageError, loading, lightMode, onSend, onModelChange }) => {
const [currentMessage, setCurrentMessage] = useState<Message>();
const messagesEndRef = useRef<HTMLDivElement>(null);
const scrollToBottom = () => {
@@ -28,45 +33,68 @@ export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, load
return (
<div className="flex-1 overflow-scroll dark:bg-[#343541]">
<div>
{conversation.messages.length === 0 ? (
<>
<div className="flex justify-center pt-8">
<ModelSelect
model={conversation.model}
models={models}
onModelChange={(model) => onModelChange(conversation, model)}
/>
</div>
{modelError ? (
<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 fetching models.</div>
<div className="text-center text-red-500">Make sure your OpenAI API key is set in the bottom left of the sidebar or in a .env.local file and refresh.</div>
<div className="text-center text-red-500">If you completed this step, OpenAI may be experiencing issues.</div>
</div>
) : (
<>
<div>
{conversation.messages.length === 0 ? (
<>
<div className="flex justify-center pt-8">
<ModelSelect
model={conversation.model}
models={models}
onModelChange={(model) => onModelChange(conversation, model)}
/>
</div>
<div className="text-4xl text-center text-neutral-600 dark:text-neutral-200 pt-[160px] sm:pt-[280px]">{loading ? "Loading..." : "Chatbot UI"}</div>
</>
) : (
<>
<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">Model: {conversation.model.name}</div>
<div className="text-4xl text-center text-neutral-600 dark:text-neutral-200 pt-[160px] sm:pt-[280px]">{models.length === 0 ? "Loading..." : "Chatbot UI"}</div>
</>
) : (
<>
<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">Model: {conversation.model.name}</div>
{conversation.messages.map((message, index) => (
<ChatMessage
key={index}
message={message}
lightMode={lightMode}
/>
))}
{conversation.messages.map((message, index) => (
<ChatMessage
key={index}
message={message}
lightMode={lightMode}
/>
))}
{loading && <ChatLoader />}
{loading && <ChatLoader />}
<div
className="bg-white dark:bg-[#343541] h-24 sm:h-32"
ref={messagesEndRef}
<div
className="bg-white dark:bg-[#343541] h-24 sm:h-32"
ref={messagesEndRef}
/>
</>
)}
</div>
{messageError ? (
<Regenerate
onRegenerate={() => {
if (currentMessage) {
onSend(currentMessage, true);
}
}}
/>
</>
)}
</div>
<ChatInput
messageIsStreaming={messageIsStreaming}
onSend={onSend}
/>
) : (
<ChatInput
messageIsStreaming={messageIsStreaming}
onSend={(message) => {
setCurrentMessage(message);
onSend(message, false);
}}
/>
)}
</>
)}
</div>
);
};