prevent submission while generating

src/components/Chat/ChatContent/ChatContent.tsx

@@ -15,23 +15,34 @@ import RefreshIcon from '@icon/RefreshIcon';
 import { MessageInterface } from '@type/chat';
 
 const ChatContent = () => {
-  const [messages, inputRole, apiFree, apiKey, setMessages] = useStore(
-    (state) => [
-      state.messages,
-      state.inputRole,
-      state.apiFree,
-      state.apiKey,
-      state.setMessages,
-    ]
-  );
+  const [
+    messages,
+    inputRole,
+    apiFree,
+    apiKey,
+    setMessages,
+    setGenerating,
+    generating,
+  ] = useStore((state) => [
+    state.messages,
+    state.inputRole,
+    state.apiFree,
+    state.apiKey,
+    state.setMessages,
+    state.setGenerating,
+    state.generating,
+  ]);
   const [error, setError] = useState<string>('');
 
   const handleSubmit = async () => {
+    if (generating) return;
+
     const updatedMessages: MessageInterface[] = JSON.parse(
       JSON.stringify(messages)
     );
     updatedMessages.push({ role: 'assistant', content: '' });
     setMessages(updatedMessages);
+    setGenerating(true);
     let stream;
 
     try {
@@ -77,6 +88,7 @@ const ChatContent = () => {
         setError(''), 10000;
       });
     }
+    setGenerating(false);
   };
 
   return (

src/store/chat-slice.ts

@@ -5,14 +5,17 @@ export interface ChatSlice {
   messages: MessageInterface[];
   chats?: ChatInterface[];
   currentChatIndex: number;
+  generating: boolean;
   setMessages: (messages: MessageInterface[]) => void;
   setChats: (chats: ChatInterface[]) => void;
   setCurrentChatIndex: (currentChatIndex: number) => void;
+  setGenerating: (generating: boolean) => void;
 }
 
 export const createChatSlice: StoreSlice<ChatSlice> = (set, get) => ({
   messages: [],
   currentChatIndex: -1,
+  generating: false,
   setMessages: (messages: MessageInterface[]) => {
     set((prev: ChatSlice) => ({
       ...prev,
@@ -31,4 +34,10 @@ export const createChatSlice: StoreSlice<ChatSlice> = (set, get) => ({
       currentChatIndex: currentChatIndex,
     }));
   },
+  setGenerating: (generating: boolean) => {
+    set((prev: ChatSlice) => ({
+      ...prev,
+      generating: generating,
+    }));
+  },
 });