many buttons disabled on generate + flushed out whisper record genera…

…ting button
jackschedel · Jan 11, 2024 · c74c735 · c74c735
1 parent 74190e3
commit c74c735
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 16 deletions.
diff --git a/src/components/Chat/ChatContent/CloneChat.tsx b/src/components/Chat/ChatContent/CloneChat.tsx
@@ -9,10 +9,14 @@ import CloneIcon from '@icon/CloneIcon';
 const CloneChat = React.memo(() => {
   const setChats = useStore((state) => state.setChats);
   const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex);
+  const generating = useStore((state) => state.generating);
 
   const [cloned, setCloned] = useState<boolean>(false);
 
   const cloneChat = () => {
+    if (generating) {
+      return;
+    }
     const chats = useStore.getState().chats;
 
     if (chats) {
@@ -44,7 +48,11 @@ const CloneChat = React.memo(() => {
   return (
     <button
       type='button'
-      className={`text-custom-white transition-opacity cursor-pointer opacity-100`}
+      className={`text-custom-white transition-opacity ${
+        generating
+          ? 'cursor-not-allowed opacity-40'
+          : 'cursor-pointer opacity-100'
+      }`}
       onClick={cloneChat}
     >
       <div className='-ml-0.5 -mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-neutral-light'>

diff --git a/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx b/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
@@ -18,6 +18,7 @@ const CommandPrompt = ({
 }) => {
   const { t } = useTranslation();
   const prompts = useStore((state) => state.prompts);
+  const generating = useStore((state) => state.generating);
   const [_prompts, _setPrompts] = useState<Prompt[]>(prompts);
   const [input, setInput] = useState<string>('');
   const inputRef = useRef<HTMLInputElement>(null);
@@ -54,9 +55,17 @@ const CommandPrompt = ({
       <button
         className={`btn ${
           messageIndex % 2 ? 'btn-neutral' : 'btn-neutral-dark'
-        } btn-small inline-flex h-8 w-8 items-center justify-center`}
+        } btn-small inline-flex h-8 w-8 items-center justify-center ${
+          generating
+            ? 'cursor-not-allowed opacity-40'
+            : 'cursor-pointer opacity-100'
+        }`}
         aria-label='prompt library'
-        onClick={() => setDropDown(!dropDown)}
+        onClick={() => {
+          if (!generating) {
+            setDropDown(!dropDown);
+          }
+        }}
       >
         /
       </button>

diff --git a/src/components/Chat/ChatContent/Message/WhisperRecord.tsx b/src/components/Chat/ChatContent/Message/WhisperRecord.tsx
@@ -17,23 +17,34 @@ const WhisperRecord = ({
   const { t } = useTranslation('api');
   let apiKey = useStore((state) => state.apiKey);
   const setGenerating = useStore((state) => state.setGenerating);
+  const generating = useStore((state) => state.generating);
   const setError = useStore((state) => state.setError);
+  const setIsRecording = useStore((state) => state.setIsRecording);
+  const isRecording = useStore((state) => state.isRecording);
   apiKey = apiKey || '0';
 
   const { transcript, startRecording, stopRecording } = useWhisper({
     apiKey,
   });
 
   useEffect(() => {
-    if (transcript.text != null) {
-      _setContent((prev) => {
-        return prev.replace('◯', transcript.text || '');
-      });
-      setGenerating(false);
+    if (generating) {
+      if (transcript.text != null) {
+        _setContent((prev) => {
+          return prev.replace('◯', transcript.text || '');
+        });
+        setGenerating(false);
+      }
     }
   }, [transcript.text]);
 
-  const [isRecording, setIsRecording] = useState(false);
+  useEffect(() => {
+    if (!generating) {
+      _setContent((prev) => {
+        return prev.replace('◯', '');
+      });
+    }
+  }, [generating]);
 
   const handleRecording = () => {
     if (apiKey != '0') {
@@ -84,9 +95,19 @@ const WhisperRecord = ({
               ? 'btn-primary'
               : 'btn-neutral-dark'
             : 'btn-primary'
-        } btn-small inline-flex p-0 h-8 w-8 items-center justify-center mr-3`}
+        } btn-small inline-flex p-0 h-8 w-8 items-center justify-center mr-3 ${
+          generating && !isRecording
+            ? 'cursor-not-allowed opacity-40'
+            : 'cursor-pointer opacity-100'
+        }
+
+`}
         aria-label='whisper'
-        onClick={handleRecording}
+        onClick={() => {
+          if (!generating || isRecording) {
+            handleRecording();
+          }
+        }}
       >
         {isRecording ? <StopIcon /> : <MicrophoneIcon />}
       </button>

diff --git a/src/components/MobileBar/MobileBar.tsx b/src/components/MobileBar/MobileBar.tsx
@@ -58,16 +58,32 @@ const MobileBar = () => {
       </div>
       <button
         type='button'
-        className='-mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-neutral-light'
-        onClick={goBack}
+        className={`-mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-neutral-light ${
+          generating
+            ? 'cursor-not-allowed opacity-40'
+            : 'cursor-pointer opacity-100'
+        }`}
+        onClick={() => {
+          if (!generating) {
+            goBack();
+          }
+        }}
       >
         <span className='sr-only'>Open sidebar</span>
         <BackIcon height='1em' />
       </button>
       <button
         type='button'
-        className='-mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-neutral-light mr-4'
-        onClick={goForward}
+        className={`-mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-neutral-light ${
+          generating
+            ? 'cursor-not-allowed opacity-40'
+            : 'cursor-pointer opacity-100'
+        }`}
+        onClick={() => {
+          if (!generating) {
+            goForward();
+          }
+        }}
       >
         <span className='sr-only'>Open sidebar</span>
         <ForwardIcon height='1em' />

diff --git a/src/components/StopGeneratingButton/StopGeneratingButton.tsx b/src/components/StopGeneratingButton/StopGeneratingButton.tsx
@@ -4,8 +4,9 @@ import useStore from '@store/store';
 const StopGeneratingButton = () => {
   const setGenerating = useStore((state) => state.setGenerating);
   const generating = useStore((state) => state.generating);
+  const isRecording = useStore((state) => state.isRecording);
 
-  return generating ? (
+  return generating && !isRecording ? (
     <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'
       style={{ pointerEvents: 'none' }}

diff --git a/src/store/chat-slice.ts b/src/store/chat-slice.ts
@@ -10,6 +10,7 @@ export interface ChatSlice {
   error: string;
   folders: FolderCollection;
   bottomMessageRef: RefObject<HTMLTextAreaElement> | null;
+  isRecording: boolean;
   setBottomMessageRef: (
     bottomMessageRef: RefObject<HTMLTextAreaElement> | null
   ) => void;
@@ -20,6 +21,7 @@ export interface ChatSlice {
   setError: (error: string) => void;
   setFolders: (folders: FolderCollection) => void;
   setConfirmEditSubmission: (confirmEditSubmission: boolean) => void;
+  setIsRecording: (isRecording: boolean) => void;
 }
 
 export const createChatSlice: StoreSlice<ChatSlice> = (set) => ({
@@ -29,6 +31,13 @@ export const createChatSlice: StoreSlice<ChatSlice> = (set) => ({
   error: '',
   folders: {},
   bottomMessageRef: null,
+  isRecording: false,
+  setIsRecording: (isRecording: boolean) => {
+    set((prev: ChatSlice) => ({
+      ...prev,
+      isRecording: isRecording,
+    }));
+  },
   setBottomMessageRef: (
     bottomMessageRef: RefObject<HTMLTextAreaElement> | null
   ) => {