From 01e79a4fa6980fe189054aa5ee8b9d736c808c18 Mon Sep 17 00:00:00 2001
From: Jack Schedel <jackschedel@gmail.com>
Date: Tue, 2 Jan 2024 20:54:10 -0500
Subject: [PATCH] new mobile bar polish

---
 src/assets/icons/BackIcon.tsx                 | 18 +++++++++++
 src/assets/icons/CloneIcon.tsx                |  2 +-
 src/assets/icons/ForwardIcon.tsx              | 18 +++++++++++
 src/components/Chat/ChatContent/CloneChat.tsx |  5 +---
 src/components/MobileBar/MobileBar.tsx        | 20 ++++++++-----
 src/hooks/useSubmit.ts                        | 10 ++++---
 src/types/chat.ts                             | 30 +++++++++----------
 7 files changed, 71 insertions(+), 32 deletions(-)
 create mode 100644 src/assets/icons/BackIcon.tsx
 create mode 100644 src/assets/icons/ForwardIcon.tsx

diff --git a/src/assets/icons/BackIcon.tsx b/src/assets/icons/BackIcon.tsx
new file mode 100644
index 00000000..5f448a28
--- /dev/null
+++ b/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;
diff --git a/src/assets/icons/CloneIcon.tsx b/src/assets/icons/CloneIcon.tsx
index 565b735f..263f3480 100644
--- a/src/assets/icons/CloneIcon.tsx
+++ b/src/assets/icons/CloneIcon.tsx
@@ -10,7 +10,7 @@ const CloneIcon = (props: React.SVGProps<SVGSVGElement>) => {
       width='24'
       {...props}
     >
-      <path d='M320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-320H520v-160H320v480Zm0-480v480-480ZM240-80v-80h80v80h-80Zm-80-640H80q0-33 23.5-56.5T160-800v80ZM400-80v-80h80v80h-80Zm160 0v-80h80v80h-80Zm-400-80v80q-33 0-56.5-23.5T80-160h80Zm-80-80v-80h80v80H80Zm0-160v-80h80v80H80Zm0-160v-80h80v80H80Zm640 400h80q0 33-23.5 56.5T720-80v-80Z' />
+      <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>
   );
 };
diff --git a/src/assets/icons/ForwardIcon.tsx b/src/assets/icons/ForwardIcon.tsx
new file mode 100644
index 00000000..9aa1f8c1
--- /dev/null
+++ b/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;
diff --git a/src/components/Chat/ChatContent/CloneChat.tsx b/src/components/Chat/ChatContent/CloneChat.tsx
index 41fb775c..eed9c6bf 100644
--- a/src/components/Chat/ChatContent/CloneChat.tsx
+++ b/src/components/Chat/ChatContent/CloneChat.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import useStore from '@store/store';
 
 import { ChatInterface } from '@type/chat';
@@ -8,8 +7,6 @@ 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);
 
@@ -47,7 +44,7 @@ const CloneChat = React.memo(() => {
   return (
     <button
       type='button'
-      className={`px-3 text-custom-white transition-opacity cursor-pointer opacity-100`}
+      className={`text-custom-white transition-opacity 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/MobileBar/MobileBar.tsx b/src/components/MobileBar/MobileBar.tsx
index 83832e0f..89056fa8 100644
--- a/src/components/MobileBar/MobileBar.tsx
+++ b/src/components/MobileBar/MobileBar.tsx
@@ -7,6 +7,8 @@ import useAddChat from '@hooks/useAddChat';
 import { SyncIcon } from '@components/GoogleSync/GoogleSync';
 import isElectron from '@utils/electron';
 import CloneChat from '@components/Chat/ChatContent/CloneChat';
+import BackIcon from '@icon/BackIcon';
+import ForwardIcon from '@icon/ForwardIcon';
 
 const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID || undefined;
 
@@ -33,10 +35,10 @@ const MobileBar = () => {
   const addChat = useAddChat();
 
   return (
-    <div className='sticky top-0 left-0 w-full z-50 flex items-center border-b-2 border-neutral-base bg-neutral-dark pl-1 pt-1.5 pb-1 text-custom-white sm:pl-3'>
+    <div className='sticky top-0 left-0 w-full z-50 flex items-center border-b-2 border-neutral-base bg-neutral-dark px-2 pt-1.5 pb-1 text-custom-white sm:pl-3'>
       <button
         type='button'
-        className='-ml-0.5 -mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-neutral-light'
+        className='-mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-neutral-light mr-4'
         onClick={() => {
           setHideSideMenu(!hideSideMenu);
         }}
@@ -52,32 +54,34 @@ const MobileBar = () => {
       </div>
       <button
         type='button'
-        className='-ml-0.5 -mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-neutral-light'
+        className='-mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-neutral-light'
         onClick={() => {
           if (currentChatIndex < (chats?.length ?? 0) - 1)
             setCurrentChatIndex(currentChatIndex + 1);
         }}
       >
         <span className='sr-only'>Open sidebar</span>
-        <strong>{'<'}</strong>
+        <BackIcon height='1em' />
       </button>
       <button
         type='button'
-        className='-ml-0.5 -mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-neutral-light'
+        className='-mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-neutral-light mr-4'
         onClick={() => {
           if (currentChatIndex > 0) setCurrentChatIndex(currentChatIndex - 1);
         }}
       >
         <span className='sr-only'>Open sidebar</span>
-        <strong>{'>'}</strong>
+        <ForwardIcon height='1em' />
       </button>
       <h1 className='flex-1 text-center text-base font-normal px-2 py-0 max-h-20 overflow-y-auto'>
         {chatTitle}
       </h1>
-      <CloneChat />
+      <div className='ml-14'>
+        <CloneChat />
+      </div>
       <button
         type='button'
-        className={`px-3 text-custom-white transition-opacity ${
+        className={`ml-4 text-custom-white transition-opacity ${
           generating
             ? 'cursor-not-allowed opacity-40'
             : 'cursor-pointer opacity-100'
diff --git a/src/hooks/useSubmit.ts b/src/hooks/useSubmit.ts
index c85ae93c..fbee594f 100644
--- a/src/hooks/useSubmit.ts
+++ b/src/hooks/useSubmit.ts
@@ -179,10 +179,12 @@ const useSubmit = () => {
         const messages_length = currChats[currentChatIndex].messages.length;
 
         // only first 800 chars of each message
-        const assistant_message =
-          currChats[currentChatIndex].messages[messages_length - 1].content.slice(0, 800);
-        const user_message =
-          currChats[currentChatIndex].messages[messages_length - 2].content.slice(0, 800);
+        const assistant_message = currChats[currentChatIndex].messages[
+          messages_length - 1
+        ].content.slice(0, 800);
+        const user_message = currChats[currentChatIndex].messages[
+          messages_length - 2
+        ].content.slice(0, 800);
 
         const message: MessageInterface = {
           role: 'user',
diff --git a/src/types/chat.ts b/src/types/chat.ts
index 1debaf74..ca426e88 100644
--- a/src/types/chat.ts
+++ b/src/types/chat.ts
@@ -52,21 +52,21 @@ export interface Folder {
 }
 
 export type ModelChoice =
-|  'gpt-3.5-turbo'
-|  'gpt-3.5-turbo-1106'
-|  'gpt-3.5-turbo-0301'
-|  'gpt-3.5-turbo-0613'
-|  'gpt-3.5-turbo-16k'
-|  'gpt-3.5-turbo-16k-0613'
-|  'gpt-4'
-|  'gpt-4-0314'
-|  'gpt-4-0613'
-|  'gpt-4-1106-preview'
-|  'gpt-4-32k'
-|  'gpt-4-32k-0314'
-|  'gpt-4-32k-0613'
-|  'claude-2'
-|  'claude-instant-1';
+  | 'gpt-3.5-turbo'
+  | 'gpt-3.5-turbo-1106'
+  | 'gpt-3.5-turbo-0301'
+  | 'gpt-3.5-turbo-0613'
+  | 'gpt-3.5-turbo-16k'
+  | 'gpt-3.5-turbo-16k-0613'
+  | 'gpt-4'
+  | 'gpt-4-0314'
+  | 'gpt-4-0613'
+  | 'gpt-4-1106-preview'
+  | 'gpt-4-32k'
+  | 'gpt-4-32k-0314'
+  | 'gpt-4-32k-0613'
+  | 'claude-2'
+  | 'claude-instant-1';
 
 export type TotalTokenUsed = {
   [model in ModelChoice]?: {