error handling (#27)

README.md

@@ -24,10 +24,11 @@ Expect frequent improvements.
 - [ ] Folders
 - [ ] Custom model settings
 - [ ] Prompt templates
-- [ ] Regenerate responses
+- [ ] Regenerate & edit responses
 
 **Recent updates:**
 
+- [x] Error handling (3/20/23)
 - [x] GPT-4 support (access required) (3/20/23)
 - [x] Search conversations (3/19/23)
 - [x] Code syntax highlighting (3/18/23)

components/Chat/Chat.tsx

@@ -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,6 +33,14 @@ export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, load
 
   return (
     <div className="flex-1 overflow-scroll dark:bg-[#343541]">
+      {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 ? (
               <>
@@ -39,7 +52,7 @@ export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, load
                   />
                 </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="text-4xl text-center text-neutral-600 dark:text-neutral-200 pt-[160px] sm:pt-[280px]">{models.length === 0 ? "Loading..." : "Chatbot UI"}</div>
               </>
             ) : (
               <>
@@ -63,10 +76,25 @@ export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, load
             )}
           </div>
 
+          {messageError ? (
+            <Regenerate
+              onRegenerate={() => {
+                if (currentMessage) {
+                  onSend(currentMessage, true);
+                }
+              }}
+            />
+          ) : (
             <ChatInput
               messageIsStreaming={messageIsStreaming}
-        onSend={onSend}
+              onSend={(message) => {
+                setCurrentMessage(message);
+                onSend(message, false);
+              }}
             />
+          )}
+        </>
+      )}
     </div>
   );
 };

components/Chat/Regenerate.tsx

@@ -0,0 +1,21 @@
+import { IconRefresh } from "@tabler/icons-react";
+import { FC } from "react";
+
+interface Props {
+  onRegenerate: () => void;
+}
+
+export const Regenerate: FC<Props> = ({ onRegenerate }) => {
+  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">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"
+        onClick={onRegenerate}
+      >
+        <IconRefresh className="mr-2" />
+        <div>Regenerate response</div>
+      </button>
+    </div>
+  );
+};

pages/index.tsx

@@ -16,17 +16,32 @@ export default function Home() {
   const [messageIsStreaming, setMessageIsStreaming] = useState<boolean>(false);
   const [showSidebar, setShowSidebar] = useState<boolean>(true);
   const [apiKey, setApiKey] = useState<string>("");
+  const [messageError, setMessageError] = useState<boolean>(false);
+  const [modelError, setModelError] = useState<boolean>(false);
 
-  const handleSend = async (message: Message) => {
+  const handleSend = async (message: Message, isResend: boolean) => {
     if (selectedConversation) {
-      let updatedConversation: Conversation = {
+      let updatedConversation: Conversation;
+
+      if (isResend) {
+        const updatedMessages = [...selectedConversation.messages];
+        updatedMessages.pop();
+
+        updatedConversation = {
+          ...selectedConversation,
+          messages: [...updatedMessages, message]
+        };
+      } else {
+        updatedConversation = {
           ...selectedConversation,
           messages: [...selectedConversation.messages, message]
         };
+      }
 
       setSelectedConversation(updatedConversation);
       setLoading(true);
       setMessageIsStreaming(true);
+      setMessageError(false);
 
       const response = await fetch("/api/chat", {
         method: "POST",
@@ -42,6 +57,8 @@ export default function Home() {
 
       if (!response.ok) {
         setLoading(false);
+        setMessageIsStreaming(false);
+        setMessageError(true);
         return;
       }
 
@@ -50,6 +67,8 @@ export default function Home() {
       if (!data) {
         setLoading(false);
         setMessageIsStreaming(false);
+        setMessageError(true);
+
         return;
       }
 
@@ -218,8 +237,6 @@ export default function Home() {
   };
 
   const fetchModels = async (key: string) => {
-    setLoading(true);
-
     const response = await fetch("/api/models", {
       method: "POST",
       headers: {
@@ -229,13 +246,20 @@ export default function Home() {
         key
       })
     });
-    const data = await response.json();
 
-    if (data) {
-      setModels(data);
+    if (!response.ok) {
+      setModelError(true);
+      return;
     }
 
-    setLoading(false);
+    const data = await response.json();
+
+    if (!data) {
+      setModelError(true);
+      return;
+    }
+
+    setModels(data);
   };
 
   useEffect(() => {
@@ -336,6 +360,8 @@ export default function Home() {
             <Chat
               conversation={selectedConversation}
               messageIsStreaming={messageIsStreaming}
+              modelError={modelError}
+              messageError={messageError}
               models={models}
               loading={loading}
               lightMode={lightMode}