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

new load behavior

Browse Source
This commit is contained in:
Mckay Wrigley
2023-03-23 08:54:22 -06:00
parent 2b1ef7be3e
commit 83217c6d83
3 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chat/Chat.tsx
+9 -1
View File
@@ -10,6 +10,7 @@ import { SystemPrompt } from "./SystemPrompt";
interface Props {
conversation: Conversation;
models: OpenAIModel[];
apiKey: string;
messageIsStreaming: boolean;
modelError: boolean;
messageError: boolean;
@@ -20,7 +21,7 @@ interface Props {
stopConversationRef: MutableRefObject<boolean>;
}
export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, modelError, messageError, loading, lightMode, onSend, onUpdateConversation, stopConversationRef }) => {
export const Chat: FC<Props> = ({ conversation, models, apiKey, messageIsStreaming, modelError, messageError, loading, lightMode, onSend, onUpdateConversation, stopConversationRef }) => {
const [currentMessage, setCurrentMessage] = useState<Message>();
const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
@@ -64,6 +65,13 @@ export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, mode
return (
<div className="relative flex-1 overflow-none dark:bg-[#343541] bg-white">
{!apiKey && (
<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">OpenAI API Key Required</div>
<div className="text-center text-gray-500 dark:text-gray-400">Please set your OpenAI API key in the bottom left of the sidebar.</div>
</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>
components/Chat/ChatLoader.tsx
+3 -3
View File
@@ -6,11 +6,11 @@ interface Props {}
export const ChatLoader: FC<Props> = () => {
return (
<div
className={`flex justify-center py-[20px] sm:py-[30px] whitespace-pre-wrap dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 dark:border-none"`}
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" }}
>
<div className="w-full sm:w-4/5 md:w-3/5 lg:w-[600px] xl:w-[800px] flex px-4">
<div className="mr-1 sm:mr-2 font-bold min-w-[40px]">AI:</div>
<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>
<IconDots className="animate-pulse" />
</div>
</div>