From 5bffa8b0c97daa9c405d7ff7bc211222c09994ab Mon Sep 17 00:00:00 2001
From: Mckay Wrigley <mckaywrigley@gmail.com>
Date: Wed, 22 Mar 2023 10:46:30 -0600
Subject: [PATCH] hotfix

---
 components/Chat/ChatInput.tsx | 63 +++++++++++++++++++++--------------
 pages/index.tsx               |  5 +++
 2 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index 5423f1d..d1e8310 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -70,34 +70,47 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model }) => {
   return (
     <div className="absolute bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent dark:bg-[#444654] md:dark:bg-gradient-to-t from-[#343541] via-[#343541] to-[#343541]/0 bg-white md:dark:!bg-transparent dark:md:bg-vert-dark-gradient 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="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)]">
-      <textarea
-        ref={textareaRef}
-        className="text-base 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"
-        style={{
-          resize: "none",
-          bottom: `${textareaRef?.current?.scrollHeight}px`,
-          maxHeight: "400px",
-          overflow: `${textareaRef.current && textareaRef.current.scrollHeight > 400 ? "auto" : "hidden"}`
-        }}
-        placeholder="Type a message..."
-        value={content}
-        rows={1}
-        onCompositionStart={() => setIsTyping(true)}
-        onCompositionEnd={() => setIsTyping(false)}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-      />
+        <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)]">
+          <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"
+            style={{
+              resize: "none",
+              bottom: `${textareaRef?.current?.scrollHeight}px`,
+              maxHeight: "400px",
+              overflow: `${textareaRef.current && textareaRef.current.scrollHeight > 400 ? "auto" : "hidden"}`
+            }}
+            placeholder="Type a message..."
+            value={content}
+            rows={1}
+            onCompositionStart={() => setIsTyping(true)}
+            onCompositionEnd={() => setIsTyping(false)}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+          />
 
-      <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"
-        onClick={handleSend}
-      >
-        <IconSend size={16} className="opacity-60"/>
-      </button>
+          <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"
+            onClick={handleSend}
+          >
+            <IconSend
+              size={16}
+              className="opacity-60"
+            />
+          </button>
+        </div>
       </div>
+      <div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
+        <a
+          href="https://github.com/mckaywrigley/chatbot-ui"
+          target="_blank"
+          rel="noreferrer"
+          className="underline"
+        >
+          ChatBot UI
+        </a>
+        . Chatbot UI is an advanced chatbot kit for OpenAI&apos;s chat models aiming to mimic ChatGPT&apos;s interface and functionality.
       </div>
-      <div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6"><a href="https://github.com/mckaywrigley/chatbot-ui" target="_blank" rel="noreferrer" className="underline">ChatBot UI</a>. Chatbot UI is an advanced chatbot kit for OpenAI&apos;s chat models aiming to mimic ChatGPT&apos;s interface and functionality.</div>
     </div>
   );
 };
diff --git a/pages/index.tsx b/pages/index.tsx
index 2554a86..2eaf84f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -170,6 +170,7 @@ export default function Home() {
     }
 
     setModels(data);
+    setModelError(false);
   };
 
   const handleLightMode = (mode: "dark" | "light") => {
@@ -271,6 +272,10 @@ export default function Home() {
     }
   }, [selectedConversation]);
 
+  useEffect(() => {
+    fetchModels(apiKey);
+  }, [apiKey]);
+
   useEffect(() => {
     const theme = localStorage.getItem("theme");
     if (theme) {