move clear conversation to settings + focus prompt searchbar + hid electron menubar (#285)

* hid electron menubar

* command prompt search bar automatically focused on button press

* moved clear conversation into settings, revamped to match style

electron/index.cjs

@@ -18,6 +18,7 @@ function createWindow() {
   autoUpdater.checkForUpdatesAndNotify();
 
   const win = new BrowserWindow({
+	autoHideMenuBar: true,
     show: false,
     icon: iconPath,
   });

public/locales/en-US/main.json

@@ -6,7 +6,7 @@
   "warning": "Warning",
   "clearMessageWarning": "Please be advised that by submitting this message, all subsequent messages will be deleted!",
   "clearConversationWarning": "Please be advised that by confirming this action, all messages will be deleted!",
-  "clearConversation": "Clear Conversation",
+  "clearConversation": "Clear Conversation History",
   "import": "Import",
   "export": "Export",
   "author": "Made by Jing Hua",

public/locales/en/main.json

@@ -6,7 +6,7 @@
   "warning": "Warning",
   "clearMessageWarning": "Please be advised that by submitting this message, all subsequent messages will be deleted!",
   "clearConversationWarning": "Please be advised that by confirming this action, all messages will be deleted!",
-  "clearConversation": "Clear Conversation",
+  "clearConversation": "Clear Conversation History",
   "import": "Import",
   "export": "Export",
   "author": "Made by Jing Hua",

src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx

@@ -16,9 +16,18 @@ const CommandPrompt = ({
   const prompts = useStore((state) => state.prompts);
   const [_prompts, _setPrompts] = useState<Prompt[]>(prompts);
   const [input, setInput] = useState<string>('');
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const [dropDown, setDropDown, dropDownRef] = useHideOnOutsideClick();
 
+
+  useEffect(() => {
+    if (dropDown && inputRef.current) {
+      // When dropdown is visible, focus the input
+      inputRef.current.focus();
+    }
+  }, [dropDown]);
+  
   useEffect(() => {
     const filteredPrompts = matchSorter(useStore.getState().prompts, input, {
       keys: ['name'],
@@ -46,6 +55,7 @@ const CommandPrompt = ({
       >
         <div className='text-sm px-4 py-2 w-max'>{t('promptLibrary')}</div>
         <input
+          ref={inputRef}
           type='text'
           className='text-gray-800 dark:text-white p-3 text-sm border-none bg-gray-200 dark:bg-gray-600 m-0 w-full mr-0 h-8 focus:outline-none'
           value={input}

src/components/Menu/MenuOptions/ClearConversation.tsx

@@ -21,15 +21,14 @@ const ClearConversation = () => {
 
   return (
     <>
-      <a
+      <button className='btn btn-neutral'
-        className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
         onClick={() => {
           setIsModalOpen(true);
         }}
       >
         <DeleteIcon />
         {t('clearConversation')}
-      </a>
+      </button>
       {isModalOpen && (
         <PopupModal
           setIsModalOpen={setIsModalOpen}

src/components/Menu/MenuOptions/MenuOptions.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import useStore from '@store/store';
 
-import ClearConversation from './ClearConversation';
 import Api from './Api';
 import Me from './Me';
 import AboutMenu from '@components/AboutMenu';
@@ -27,7 +26,6 @@ const MenuOptions = () => {
         {countTotalTokens && <TotalTokenCostDisplay />}
         {googleClientId && <GoogleSync clientId={googleClientId} />}
         <AboutMenu />
-        <ClearConversation />
         <ImportExportChat />
         <Api />
         <SettingsMenu />

src/components/SettingsMenu/SettingsMenu.tsx

@@ -15,6 +15,7 @@ import PromptLibraryMenu from '@components/PromptLibraryMenu';
 import ChatConfigMenu from '@components/ChatConfigMenu';
 import EnterToSubmitToggle from './EnterToSubmitToggle';
 import TotalTokenCost, { TotalTokenCostToggle } from './TotalTokenCost';
+import ClearConversation from '@components/Menu/MenuOptions/ClearConversation';
 
 const SettingsMenu = () => {
   const { t } = useTranslation();
@@ -51,6 +52,7 @@ const SettingsMenu = () => {
               <AdvancedModeToggle />
               <TotalTokenCostToggle />
             </div>
+            <ClearConversation />
             <PromptLibraryMenu />
             <ChatConfigMenu />
             <TotalTokenCost />