Merge pull request #98 from jackschedel/2.0.8

2.0.8
jackschedel · Jan 11, 2024 · ded4562 · ded4562
2 parents 5be890c + 9227e21
commit ded4562
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "koala-client",
   "private": true,
-  "version": "2.0.7",
+  "version": "2.0.8",
   "type": "module",
   "homepage": "./",
   "main": "electron/index.cjs",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import useStore from '@store/store';
 import i18n from './i18n';
 
@@ -16,44 +16,38 @@ import { Theme } from '@type/theme';
 import ApiPopup from '@components/ApiPopup';
 import Toast from '@components/Toast';
 import isElectron from '@utils/electron';
-import GlobalContext from '@hooks/GlobalContext';
 
 function App() {
-  const initialiseNewChat = useInitialiseNewChat();
   const setChats = useStore((state) => state.setChats);
   const setTheme = useStore((state) => state.setTheme);
   const setApiKey = useStore((state) => state.setApiKey);
   const currentChatIndex = useStore((state) => state.currentChatIndex);
   const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex);
   const setHideSideMenu = useStore((state) => state.setHideSideMenu);
   const hideSideMenu = useStore((state) => state.hideSideMenu);
+  const bottomMessageRef = useStore((state) => state.bottomMessageRef);
+
+  const initialiseNewChat = useInitialiseNewChat();
   const addChat = useAddChat();
   const goBack = useGoBack();
   const goForward = useGoForward();
   const copyCodeBlock = useCopyCodeBlock();
   const { handleSubmit } = useSubmit();
 
-  const [sharedTextareaRef, setSharedTextareaRef] =
-    useState<React.RefObject<HTMLTextAreaElement> | null>(null);
-
-  const setRef = (newRef: React.RefObject<HTMLTextAreaElement> | null) => {
-    setSharedTextareaRef(newRef);
-  };
-
   const handleGenerate = () => {
     if (useStore.getState().generating) return;
     const updatedChats: ChatInterface[] = JSON.parse(
       JSON.stringify(useStore.getState().chats)
     );
-    const content = sharedTextareaRef?.current?.value;
+    const content = bottomMessageRef?.current?.value;
     const updatedMessages = updatedChats[currentChatIndex].messages;
     if (!content) {
       return;
     }
 
     updatedMessages.push({ role: 'user', content: content });
-    if (sharedTextareaRef && sharedTextareaRef.current) {
-      sharedTextareaRef.current.value = '';
+    if (bottomMessageRef && bottomMessageRef?.current) {
+      bottomMessageRef.current.value = '';
     }
 
     setChats(updatedChats);
@@ -74,8 +68,8 @@ function App() {
       }
 
       updatedMessages.push({ role: 'user', content: text });
-      if (sharedTextareaRef && sharedTextareaRef.current) {
-        sharedTextareaRef.current.value = '';
+      if (bottomMessageRef && bottomMessageRef.current) {
+        bottomMessageRef.current.value = '';
       }
 
       setChats(updatedChats);
@@ -98,7 +92,7 @@ function App() {
     if (e.ctrlKey && e.key === 'n') {
       e.preventDefault();
       addChat();
-      sharedTextareaRef?.current?.focus();
+      bottomMessageRef?.current?.focus();
     }
 
     // ctrl+o - Copy code block
@@ -110,7 +104,7 @@ function App() {
     // ctrl+g - Focus textarea
     if (e.ctrlKey && e.key === 'g') {
       e.preventDefault();
-      sharedTextareaRef?.current?.focus();
+      bottomMessageRef?.current?.focus();
     }
 
     // ctrl+s - Save bottom message + generate
@@ -229,19 +223,17 @@ function App() {
   }, []);
 
   return (
-    <GlobalContext.Provider value={{ ref: sharedTextareaRef, setRef }}>
-      <div
-        tabIndex={0}
-        className='overflow-hidden w-full h-full relative'
-        onKeyDown={handleKeyDown}
-        onMouseUp={handleMouseUp}
-      >
-        <Menu />
-        <Chat />
-        <ApiPopup />
-        <Toast />
-      </div>
-    </GlobalContext.Provider>
+    <div
+      tabIndex={0}
+      className='overflow-hidden w-full h-full relative'
+      onKeyDown={handleKeyDown}
+      onMouseUp={handleMouseUp}
+    >
+      <Menu />
+      <Chat />
+      <ApiPopup />
+      <Toast />
+    </div>
   );
 }
 

diff --git a/src/components/Chat/ChatContent/Message/NewMessageButton.tsx b/src/components/Chat/ChatContent/Message/NewMessageButton.tsx
@@ -11,17 +11,25 @@ const NewMessageButton = React.memo(
     const setChats = useStore((state) => state.setChats);
     const currentChatIndex = useStore((state) => state.currentChatIndex);
     const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex);
+    const autoTitle = useStore((state) => state.autoTitle);
 
     const addChat = () => {
       const chats = useStore.getState().chats;
       if (chats) {
         const updatedChats: ChatInterface[] = JSON.parse(JSON.stringify(chats));
         let titleIndex = 1;
-        let title = `New Chat ${titleIndex}`;
-
-        while (chats.some((chat) => chat.title === title)) {
-          titleIndex += 1;
+        let title: string;
+        if (!autoTitle) {
           title = `New Chat ${titleIndex}`;
+        } else {
+          title = `New Chat`;
+        }
+
+        if (!autoTitle) {
+          while (chats.some((chat) => chat.title === title)) {
+            titleIndex += 1;
+            title = `New Chat ${titleIndex}`;
+          }
         }
 
         updatedChats.unshift(generateDefaultChat(title));

diff --git a/src/components/Chat/ChatContent/Message/View/EditView.tsx b/src/components/Chat/ChatContent/Message/View/EditView.tsx
@@ -1,7 +1,6 @@
-import React, { memo, useContext, useEffect, useRef, useState } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useStore from '@store/store';
-import isElectron from '@utils/electron';
 import useSubmit from '@hooks/useSubmit';
 
 import { ChatInterface } from '@type/chat';
@@ -11,7 +10,6 @@ import TokenCount from '@components/TokenCount';
 import CommandPrompt from '../CommandPrompt';
 
 import WhisperRecord from '../WhisperRecord';
-import GlobalContext from '@hooks/GlobalContext';
 
 const EditView = ({
   content,
@@ -35,12 +33,12 @@ const EditView = ({
   const [_content, _setContent] = useState<string>(content);
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const { setRef } = useContext(GlobalContext);
+  const setBottomMessageRef = useStore((state) => state.setBottomMessageRef);
   const { t } = useTranslation();
 
   useEffect(() => {
     if (sticky) {
-      setRef(textareaRef);
+      setBottomMessageRef(textareaRef);
     }
   }, [textareaRef]);
 
@@ -286,13 +284,11 @@ const EditViewButtons = memo(
         </div>
         <div className='flex-1 flex items-center justify-end'>
           {sticky && <TokenCount />}
-          {isElectron() && (
-            <WhisperRecord
-              cursorPosition={cursorPosition}
-              _setContent={_setContent}
-              messageIndex={messageIndex}
-            />
-          )}
+          <WhisperRecord
+            cursorPosition={cursorPosition}
+            _setContent={_setContent}
+            messageIndex={messageIndex}
+          />
           <CommandPrompt
             cursorPosition={cursorPosition}
             _setContent={_setContent}

diff --git a/src/components/Menu/NewChat.tsx b/src/components/Menu/NewChat.tsx
@@ -1,16 +1,15 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import useStore from '@store/store';
 
 import PlusIcon from '@icon/PlusIcon';
 
 import useAddChat from '@hooks/useAddChat';
-import GlobalContext from '@hooks/GlobalContext';
 
 const NewChat = ({ folder }: { folder?: string }) => {
   const { t } = useTranslation();
   const addChat = useAddChat();
-  const { ref } = useContext(GlobalContext);
+  const bottomMessageRef = useStore((state) => state.bottomMessageRef);
   const generating = useStore((state) => state.generating);
 
   return (
@@ -27,7 +26,7 @@ const NewChat = ({ folder }: { folder?: string }) => {
       onClick={() => {
         if (!generating) {
           addChat(folder);
-          ref?.current?.focus();
+          bottomMessageRef?.current?.focus();
         }
       }}
       title={String(t('newChat'))}

diff --git a/src/components/MobileBar/MobileBar.tsx b/src/components/MobileBar/MobileBar.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import useGStore from '@store/cloud-auth-store';
 import useStore from '@store/store';
 import PlusIcon from '@icon/PlusIcon';
@@ -12,7 +12,6 @@ import ForwardIcon from '@icon/ForwardIcon';
 
 import useGoBack from '@hooks/useGoBack';
 import useGoForward from '@hooks/useGoForward';
-import GlobalContext from '@hooks/GlobalContext';
 
 const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID || undefined;
 
@@ -22,7 +21,7 @@ const MobileBar = () => {
   const hideSideMenu = useStore((state) => state.hideSideMenu);
   const currentChatIndex = useStore((state) => state.currentChatIndex);
   const chats = useStore((state) => state.chats);
-  const { ref } = useContext(GlobalContext);
+  const bottomMessageRef = useStore((state) => state.bottomMessageRef);
   const cloudSync = useGStore((state) => state.cloudSync);
   const syncStatus = useGStore((state) => state.syncStatus);
 
@@ -89,7 +88,7 @@ const MobileBar = () => {
         onClick={() => {
           if (!generating) {
             addChat(chats?.[currentChatIndex]?.folder);
-            ref?.current?.focus();
+            bottomMessageRef?.current?.focus();
           }
         }}
       >

diff --git a/src/hooks/GlobalContext.tsx b/src/hooks/GlobalContext.tsx
diff --git a/src/hooks/useAddChat.ts b/src/hooks/useAddChat.ts
@@ -5,17 +5,25 @@ import { ChatInterface } from '@type/chat';
 const useAddChat = () => {
   const setChats = useStore((state) => state.setChats);
   const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex);
+  const autoTitle = useStore((state) => state.autoTitle);
 
   const addChat = (folder?: string) => {
     const chats = useStore.getState().chats;
     if (chats) {
       const updatedChats: ChatInterface[] = JSON.parse(JSON.stringify(chats));
       let titleIndex = 1;
-      let title = `New Chat ${titleIndex}`;
-
-      while (chats.some((chat) => chat.title === title)) {
-        titleIndex += 1;
+      let title: string;
+      if (!autoTitle) {
         title = `New Chat ${titleIndex}`;
+      } else {
+        title = `New Chat`;
+      }
+
+      if (!autoTitle) {
+        while (chats.some((chat) => chat.title === title)) {
+          titleIndex += 1;
+          title = `New Chat ${titleIndex}`;
+        }
       }
 
       updatedChats.unshift(generateDefaultChat(title, folder));

diff --git a/src/store/chat-slice.ts b/src/store/chat-slice.ts
@@ -1,5 +1,6 @@
 import { StoreSlice } from './store';
 import { ChatInterface, FolderCollection, MessageInterface } from '@type/chat';
+import { RefObject } from 'react';
 
 export interface ChatSlice {
   messages: MessageInterface[];
@@ -8,6 +9,10 @@ export interface ChatSlice {
   generating: boolean;
   error: string;
   folders: FolderCollection;
+  bottomMessageRef: RefObject<HTMLTextAreaElement> | null;
+  setBottomMessageRef: (
+    bottomMessageRef: RefObject<HTMLTextAreaElement> | null
+  ) => void;
   setMessages: (messages: MessageInterface[]) => void;
   setChats: (chats: ChatInterface[]) => void;
   setCurrentChatIndex: (currentChatIndex: number) => void;
@@ -23,6 +28,15 @@ export const createChatSlice: StoreSlice<ChatSlice> = (set) => ({
   generating: false,
   error: '',
   folders: {},
+  bottomMessageRef: null,
+  setBottomMessageRef: (
+    bottomMessageRef: RefObject<HTMLTextAreaElement> | null
+  ) => {
+    set((prev: ChatSlice) => ({
+      ...prev,
+      bottomMessageRef: bottomMessageRef,
+    }));
+  },
   setMessages: (messages: MessageInterface[]) => {
     set((prev: ChatSlice) => ({
       ...prev,

diff --git a/vite.config.ts b/vite.config.ts
@@ -20,4 +20,7 @@ export default defineConfig({
     },
   },
   base: './',
+  optimizeDeps: {
+    include: ['@chengsokdara/use-whisper > lamejs'],
+  },
 });