From cccf75374328dd977e2c1f623f60cd66e6b74903 Mon Sep 17 00:00:00 2001
From: Xiangxuan Liu <9570112+nauxliu@users.noreply.github.com>
Date: Thu, 23 Mar 2023 01:38:48 +0800
Subject: [PATCH] Update the Stop Generating button style (#79)

---
 components/Chat/Chat.tsx      |  2 +-
 components/Chat/ChatInput.tsx | 21 +++++++++------------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index 6c09133..5e41ef3 100644
--- a/components/Chat/Chat.tsx
+++ b/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}
                 />
               </>
diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index 29054a1..78bffd3 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -1,5 +1,5 @@
 import { Message, OpenAIModel, OpenAIModelID } from "@/types";
-import { IconHandStop, IconSend } from "@tabler/icons-react";
+import { IconSend, IconPlayerStop } from "@tabler/icons-react";
 import { FC, KeyboardEvent, MutableRefObject, useEffect, useRef, useState } from "react";
 
 interface Props {
@@ -78,6 +78,14 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model, stopCo
   return (
     <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"
+            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 +114,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">