Merge branch 'main' of https://github.com/mckaywrigley/chatbot-ui-pro into mac

components/Chat/Chat.tsx

@@ -80,7 +80,7 @@ export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, mode
                 {loading && <ChatLoader />}
 
                 <div
-                  className="bg-white dark:bg-[#343541] h-[113px] sm:h-[162px]"
+                  className="bg-white dark:bg-[#343541] h-[162px]"
                   ref={messagesEndRef}
                 />
               </>

components/Chat/ChatInput.tsx

@@ -1,5 +1,5 @@
 import { Message, OpenAIModel, OpenAIModelID } from "@/types";
-import { IconHandStop, IconSend } from "@tabler/icons-react";
+import { IconPlayerStop, IconSend } from "@tabler/icons-react";
 import { FC, KeyboardEvent, MutableRefObject, useEffect, useRef, useState } from "react";
 
 interface Props {
@@ -76,8 +76,20 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model, stopCo
   }
 
   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="absolute bottom-0 left-0 w-full dark:border-white/20 border-transparent dark:bg-[#444654] dark:bg-gradient-to-t from-[#343541] via-[#343541] to-[#343541]/0 bg-white dark:!bg-transparent dark:bg-vert-dark-gradient pt-6 md: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">
+        {messageIsStreaming && (
+          <button
+            className="absolute -top-2 md:top-0 left-0 right-0 mx-auto dark:bg-[#343541] border w-fit border-gray-500 py-2 px-4 rounded text-black dark:text-white hover:opacity-50"
+            onClick={handleStopConversation}
+          >
+            <IconPlayerStop
+              size={16}
+              className="inline-block mb-[2px]"
+            />{" "}
+            Stop Generating
+          </button>
+        )}
         <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}
@@ -106,17 +118,6 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model, stopCo
               className="opacity-60"
             />
           </button>
-          {messageIsStreaming ? (
-            <button
-              className="absolute right-12 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={handleStopConversation}
-            >
-              <IconHandStop
-                size={16}
-                className="opacity-60"
-              />
-            </button>
-          ) : null}
         </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">

utils/server/index.ts

@@ -24,7 +24,8 @@ export const OpenAIStream = async (model: OpenAIModel, systemPrompt: string, key
   });
 
   if (res.status !== 200) {
-    throw new Error("OpenAI API returned an error");
+    const statusText = res.statusText; 
+    throw new Error(`OpenAI API returned an error: ${statusText}`);
   }
 
   const encoder = new TextEncoder();