From 16caec50761b238a8bc96780c4ecdd41652b5a6e Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Sun, 5 Mar 2023 23:26:52 +0800
Subject: [PATCH] feat: StopGeneratingButton

fixes #16
---
 src/components/Chat/Chat.tsx                  |  4 +-
 .../StopGeneratingButton.tsx                  | 38 +++++++++++++++++++
 src/hooks/useSubmit.ts                        |  2 +-
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 src/components/StopGeneratingButton/StopGeneratingButton.tsx

diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index f239a31..fde63af 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 import ChatContent from './ChatContent';
-import ChatInput from './ChatInput';
 import MobileBar from '../MobileBar';
+import StopGeneratingButton from '@components/StopGeneratingButton/StopGeneratingButton';
 
 const Chat = () => {
   return (
@@ -10,7 +10,7 @@ const Chat = () => {
       <MobileBar />
       <main className='relative h-full w-full transition-width flex flex-col overflow-hidden items-stretch flex-1'>
         <ChatContent />
-        {/* <ChatInput /> */}
+        <StopGeneratingButton />
       </main>
     </div>
   );
diff --git a/src/components/StopGeneratingButton/StopGeneratingButton.tsx b/src/components/StopGeneratingButton/StopGeneratingButton.tsx
new file mode 100644
index 0000000..e3c7fba
--- /dev/null
+++ b/src/components/StopGeneratingButton/StopGeneratingButton.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import useStore from '@store/store';
+
+const StopGeneratingButton = () => {
+  const setGenerating = useStore((state) => state.setGenerating);
+  const generating = useStore((state) => state.generating);
+
+  return generating ? (
+    <div
+      className='absolute bottom-6 left-0 right-0 m-auto flex md:w-full md:m-auto gap-0 md:gap-2 justify-center'
+      onClick={() => setGenerating(false)}
+    >
+      <button className='btn relative btn-neutral border-0 md:border'>
+        <div className='flex w-full items-center justify-center gap-2'>
+          <svg
+            stroke='currentColor'
+            fill='none'
+            strokeWidth='1.5'
+            viewBox='0 0 24 24'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+            className='h-3 w-3'
+            height='1em'
+            width='1em'
+            xmlns='http://www.w3.org/2000/svg'
+          >
+            <rect x='3' y='3' width='18' height='18' rx='2' ry='2'></rect>
+          </svg>
+          Stop generating
+        </div>
+      </button>
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+export default StopGeneratingButton;
diff --git a/src/hooks/useSubmit.ts b/src/hooks/useSubmit.ts
index 29703c9..e776748 100644
--- a/src/hooks/useSubmit.ts
+++ b/src/hooks/useSubmit.ts
@@ -45,7 +45,7 @@ const useSubmit = () => {
       if (stream) {
         const reader = stream.getReader();
         let reading = true;
-        while (reading) {
+        while (reading && useStore.getState().generating) {
           const { done, value } = await reader.read();
 
           const result = parseEventSource(new TextDecoder().decode(value));