2.06 - top mobile bar features

.github/workflows/check_on_pr.yml

@@ -9,7 +9,7 @@ permissions:
 
 concurrency:
   group: build_test
-  cancel-in-progress: false
+  cancel-in-progress: true
 
 jobs:
   build:
@@ -36,18 +36,18 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-            
+
       - name: Install dependencies
         run: yarn
-        
+
       - name: Cache release assets
         uses: actions/cache@v3
         with:
           path: ./release
           key: ${{ runner.os }}-release-${{github.sha}}
           restore-keys: |
             ${{ runner.os }}-release-
-            
+
       - name: Build
         run: yarn make
         env:

.github/workflows/prettier.yml

@@ -0,0 +1,23 @@
+name: Prettier Autoformat
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.head_ref }}
+
+      - name: Prettify code
+        uses: creyD/[email protected]
+        with:
+          prettier_options: --write ./
+          github_token: ${{ secrets.PERSONAL_GITHUB_TOKEN }}

.github/workflows/publish.yml

@@ -39,18 +39,18 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-            
+
       - name: Install dependencies
         run: yarn
-        
+
       - name: Cache release assets
         uses: actions/cache@v3
         with:
           path: ./release
           key: ${{ runner.os }}-release-${{github.sha}}
           restore-keys: |
             ${{ runner.os }}-release-
-            
+
       - name: Build
         run: yarn make
         env:
@@ -66,7 +66,7 @@ jobs:
   release:
     needs: build
     runs-on: ubuntu-latest
-    steps:    
+    steps:
       - name: Commit substring
         uses: bhowell2/[email protected]
         id: committag
@@ -94,8 +94,8 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
-          asset_path: ./release-Linux/koala-client-2.0.5-linux-x86_64.AppImage
-          asset_name: KoalaClient-2.0.5-${{ steps.committag.outputs.substring }}-linux-x86_64.AppImage
+          asset_path: ./release-Linux/koala-client-2.0.6-linux-x86_64.AppImage
+          asset_name: KoalaClient-2.0.6-${{ steps.committag.outputs.substring }}-linux-x86_64.AppImage
           asset_content_type: application
 
       - name: Upload Release Asset - MacOS
@@ -104,8 +104,8 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
-          asset_path: ./release-macOS/koala-client-2.0.5-mac-x64.dmg
-          asset_name: KoalaClient-2.0.5-${{ steps.committag.outputs.substring }}-mac-x64.dmg
+          asset_path: ./release-macOS/koala-client-2.0.6-mac-x64.dmg
+          asset_name: KoalaClient-2.0.6-${{ steps.committag.outputs.substring }}-mac-x64.dmg
           asset_content_type: application
 
       - name: Upload Release Asset - Windows
@@ -114,24 +114,24 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
-          asset_path: ./release-Windows/koala-client-2.0.5-win-x64.exe
-          asset_name: KoalaClient-2.0.5-${{ steps.committag.outputs.substring }}-win-x64.exe
+          asset_path: ./release-Windows/koala-client-2.0.6-win-x64.exe
+          asset_name: KoalaClient-2.0.6-${{ steps.committag.outputs.substring }}-win-x64.exe
           asset_content_type: application
-          
+
       - name: Zip Unpacked Release - Windows
         run: |
           cd ./release-Windows
           7z a win-unpacked.zip win-unpacked/
           cd ..
-          
+
       - name: Upload Unpacked Release - Windows
         uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
           asset_path: ./release-Windows/win-unpacked.zip
-          asset_name: KoalaClient-2.0.5-${{ steps.committag.outputs.substring }}-win-unpacked-x64.zip
+          asset_name: KoalaClient-2.0.6-${{ steps.committag.outputs.substring }}-win-unpacked-x64.zip
           asset_content_type: zip
 
       - name: Zip Hash Info

electron/index.cjs

@@ -28,7 +28,7 @@ const instanceLock = app.requestSingleInstanceLock();
 
 if (require('electron-squirrel-startup')) app.quit();
 
-const PORT = isDev ? '5174' : '51736';
+const PORT = isDev ? '5173' : '51736';
 
 contextMenu({
   prepend: (defaultActions, parameters, browserWindow) => [],
@@ -92,11 +92,6 @@ function createWindow() {
     return { action: 'deny' };
   });
 
-  win.on('show', function (event) {
-    win.maximize();
-    win.focus();
-  });
-
   return win;
 }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "koala-client",
   "private": true,
-  "version": "2.0.5",
+  "version": "2.0.6",
   "type": "module",
   "homepage": "./",
   "main": "electron/index.cjs",
@@ -13,9 +13,8 @@
     "preview": "vite preview",
     "electron": "concurrently -k \"BROWSER=none yarn dev\" \"wait-on tcp:5173 && electron .\"",
     "pack": "yarn build && electron-builder --dir",
-    "wslbuild": "yarn build && electron-builder --dir --win && cp -r release/win-unpacked/* /mnt/c/Programs/KoalaClient",
-    "wslcopy": "cp -r release/win-unpacked/* /mnt/c/Programs/KoalaClient",
-    "make": "yarn build && electron-builder"
+    "make": "yarn build && electron-builder",
+    "format": "prettier --write ./"
   },
   "build": {
     "appId": "koala-client",
@@ -85,7 +84,7 @@
     "@vitejs/plugin-react-swc": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "concurrently": "^8.0.1",
-    "electron": "^23.2.0",
+    "electron": "^28.1.1",
     "electron-builder": "^23.6.0",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7",

src/App.tsx

@@ -5,6 +5,7 @@ import i18n from './i18n';
 import Chat from '@components/Chat';
 import Menu from '@components/Menu';
 
+import useAddChat from '@hooks/useAddChat';
 import useInitialiseNewChat from '@hooks/useInitialiseNewChat';
 import { ChatInterface } from '@type/chat';
 import { Theme } from '@type/theme';
@@ -20,13 +21,19 @@ function App() {
   const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex);
   const setHideSideMenu = useStore((state) => state.setHideSideMenu);
   const hideSideMenu = useStore((state) => state.hideSideMenu);
+  const addChat = useAddChat();
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     // put any general app-wide keybinds here
     if (e.ctrlKey && e.key === 'e') {
       e.preventDefault();
       setHideSideMenu(!hideSideMenu);
     }
+
+    if (e.ctrlKey && e.key === 'n') {
+      e.preventDefault();
+      addChat();
+    }
   };
 
   if (isElectron()) {

src/api/api.ts

@@ -24,10 +24,10 @@ export const getChatCompletion = async (
     const model = isTitleGen
       ? 'gpt-35-turbo'
       : config.model === 'gpt-3.5-turbo'
-      ? 'gpt-35-turbo'
-      : config.model === 'gpt-3.5-turbo-16k'
-      ? 'gpt-35-turbo-16k'
-      : config.model;
+        ? 'gpt-35-turbo'
+        : config.model === 'gpt-3.5-turbo-16k'
+          ? 'gpt-35-turbo-16k'
+          : config.model;
 
     const apiVersion = '2023-03-15-preview';
 
@@ -84,8 +84,8 @@ export const getChatCompletionStream = async (
       config.model === 'gpt-3.5-turbo'
         ? 'gpt-35-turbo'
         : config.model === 'gpt-3.5-turbo-16k'
-        ? 'gpt-35-turbo-16k'
-        : config.model;
+          ? 'gpt-35-turbo-16k'
+          : config.model;
 
     const apiVersion = '2023-03-15-preview';
 

src/api/helper.ts

@@ -4,8 +4,8 @@ export const parseEventSource = (
   data: string
 ): '[DONE]' | EventSourceData[] => {
   const result = data
-        .split('\n')
-    .filter(line => line.startsWith('data: ') || line === '[DONE]')
+    .split('\n')
+    .filter((line) => line.startsWith('data: ') || line === '[DONE]')
     .map((line) => {
       if (line === '[DONE]') return line;
       const jsonString = line.replace(/^data: /, '');

src/assets/icons/BackIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const BackIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='currentColor'
+      height='24'
+      viewBox='0 -960 960 960'
+      width='24'
+      {...props}
+    >
+      <path d='M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z' />
+    </svg>
+  );
+};
+
+export default BackIcon;

src/assets/icons/CloneIcon.tsx

@@ -3,13 +3,14 @@ import React from 'react';
 const CloneIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
-      viewBox='0 0 512 512'
+      xmlns='http://www.w3.org/2000/svg'
       fill='currentColor'
-      height='1em'
-      width='1em'
+      height='24'
+      viewBox='0 -960 960 960'
+      width='24'
       {...props}
     >
-      <path d='M64 464h224c8.8 0 16-7.2 16-16v-64h48v64c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V224c0-35.3 28.65-64 64-64h64v48H64c-8.84 0-16 7.2-16 16v224c0 8.8 7.16 16 16 16zm96-400c0-35.35 28.7-64 64-64h224c35.3 0 64 28.65 64 64v224c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64V64zm64 240h224c8.8 0 16-7.2 16-16V64c0-8.84-7.2-16-16-16H224c-8.8 0-16 7.16-16 16v224c0 8.8 7.2 16 16 16z' />
+      <path d='M120-220v-80h80v80h-80Zm0-140v-80h80v80h-80Zm0-140v-80h80v80h-80ZM260-80v-80h80v80h-80Zm100-160q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480Zm40 240v-80h80v80h-80Zm-200 0q-33 0-56.5-23.5T120-160h80v80Zm340 0v-80h80q0 33-23.5 56.5T540-80ZM120-640q0-33 23.5-56.5T200-720v80h-80Zm420 80Z' />
     </svg>
   );
 };

src/assets/icons/CrossIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const CrossIcon = () => {
+const CrossIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
       stroke='currentColor'
@@ -13,6 +13,7 @@ const CrossIcon = () => {
       height='1em'
       width='1em'
       xmlns='http://www.w3.org/2000/svg'
+      {...props}
     >
       <line x1='18' y1='6' x2='6' y2='18'></line>
       <line x1='6' y1='6' x2='18' y2='18'></line>

src/assets/icons/ForwardIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const ForwardIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='currentColor'
+      height='24'
+      viewBox='0 -960 960 960'
+      width='24'
+      {...props}
+    >
+      <path d='m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z' />
+    </svg>
+  );
+};
+
+export default ForwardIcon;

src/components/Chat/ChatContent/ChatContent.tsx

@@ -49,7 +49,6 @@ const ChatContent = () => {
   return (
     <div className='flex-1 overflow-hidden bg-neutral-dark'>
       <ScrollToBottom className='h-full' followButtonClassName='hidden'>
-        <ScrollToBottomButton />
         <div className='flex flex-col items-center text-sm'>
           <div
             className='flex flex-col items-center text-sm w-full'
@@ -89,21 +88,6 @@ const ChatContent = () => {
               </div>
             </div>
           )}
-          <div
-            className={`mt-4 w-full m-auto  ${
-              hideSideMenu
-                ? 'md:max-w-5xl lg:max-w-5xl xl:max-w-6xl'
-                : 'md:max-w-3xl lg:max-w-3xl xl:max-w-4xl'
-            }`}
-          >
-            {useStore.getState().generating || (
-              <div className='md:w-[calc(100%)] flex gap-4 flex-wrap justify-center'>
-                <DownloadChat saveRef={saveRef} />
-                <CloneChat />
-              </div>
-            )}
-          </div>
-          <div className='w-full h-3'></div>
         </div>
       </ScrollToBottom>
     </div>

src/components/Chat/ChatContent/CloneChat.tsx

@@ -1,14 +1,12 @@
 import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import useStore from '@store/store';
 
 import { ChatInterface } from '@type/chat';
 
 import TickIcon from '@icon/TickIcon';
+import CloneIcon from '@icon/CloneIcon';
 
 const CloneChat = React.memo(() => {
-  const { t } = useTranslation();
-
   const setChats = useStore((state) => state.setChats);
   const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex);
 
@@ -45,17 +43,17 @@ const CloneChat = React.memo(() => {
 
   return (
     <button
-      className='btn btn-neutral flex gap-2'
-      aria-label={t('cloneChat') as string}
+      type='button'
+      className={`text-custom-white transition-opacity cursor-pointer opacity-100`}
       onClick={cloneChat}
     >
-      {cloned ? (
-        <>
-          <TickIcon /> {t('cloned')}
-        </>
-      ) : (
-        <>{t('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'>
+        {cloned ? (
+          <TickIcon className='h-6 w-6' />
+        ) : (
+          <CloneIcon className='h-6 w-6' />
+        )}
+      </div>
     </button>
   );
 });