From 1103aba184df720cf7f5243688397cc5703e7692 Mon Sep 17 00:00:00 2001
From: Zihao Zhou <ziz244@ucsd.edu>
Date: Wed, 24 Apr 2024 09:13:59 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Tune=20for=20Poe?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Chat/ChatContent/ChatTitle.tsx | 76 +++++++++++-------
 src/components/ConfigMenu/ConfigMenu.tsx      |  6 +-
 src/components/Menu/Menu.tsx                  |  2 +-
 src/components/TokenCount/TokenCount.tsx      |  2 +-
 src/constants/chat.ts                         | 79 ++++++++++++++++---
 src/hooks/useSubmit.ts                        |  9 ++-
 src/types/chat.ts                             | 17 +++-
 tailwind.config.cjs                           |  1 +
 8 files changed, 143 insertions(+), 49 deletions(-)

diff --git a/src/components/Chat/ChatContent/ChatTitle.tsx b/src/components/Chat/ChatContent/ChatTitle.tsx
index 4130b0ee1..836228140 100644
--- a/src/components/Chat/ChatContent/ChatTitle.tsx
+++ b/src/components/Chat/ChatContent/ChatTitle.tsx
@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 import useStore from '@store/store';
 import ConfigMenu from '@components/ConfigMenu';
-import { ChatInterface, ConfigInterface } from '@type/chat';
+import { ModelSelector } from '@components/ConfigMenu/ConfigMenu';
+import { ChatInterface, ConfigInterface, ModelOptions } from '@type/chat';
 import { _defaultChatConfig } from '@constants/chat';
 
 const ChatTitle = React.memo(() => {
@@ -40,31 +41,52 @@ const ChatTitle = React.memo(() => {
     }
   }, [currentChatIndex]);
 
+  const [_model, _setModel] = useState<ModelOptions>(config?.model ?? _defaultChatConfig.model);
+  useEffect(() => {
+    // Assuming 'config' contains the current configuration
+    // and '_model' is the updated model state from the local component state:
+    if (config) {
+      setConfig({
+        ...config, // This spreads the current config.
+        model: _model // This overwrites 'model' with the updated state.
+      });
+    }
+  }, [_model, config, setConfig]);
+  
   return config ? (
     <>
       <div
-        className='flex gap-x-4 gap-y-1 flex-wrap w-full items-center justify-center border-b border-black/10 bg-gray-50 p-3 dark:border-gray-900/50 dark:bg-gray-700 text-gray-600 dark:text-gray-300 cursor-pointer'
-        onClick={() => {
-          setIsModalOpen(true);
-        }}
+        className='flex gap-x-4 gap-y-1 w-full items-center justify-center border-b border-black/10 bg-gray-50 p-3 dark:border-gray-900/50 dark:bg-gray-700 text-gray-600 dark:text-gray-300 sticky top-0 z-10'
+        // Added sticky, top-0, and z-10 to make the chat title stick to the top
+        // Removed flex-wrap to avoid wrapping
       >
-        <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
-          {t('model')}: {config.model}
-        </div>
-        <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
-          {t('token.label')}: {config.max_tokens}
-        </div>
-        <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
-          {t('temperature.label')}: {config.temperature}
-        </div>
-        <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
-          {t('topP.label')}: {config.top_p}
-        </div>
-        <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
-          {t('presencePenalty.label')}: {config.presence_penalty}
-        </div>
-        <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
-          {t('frequencyPenalty.label')}: {config.frequency_penalty}
+        {/* ModelSelector is used here instead of displaying the model as text */}
+          <ModelSelector
+            _model={_model}
+            _setModel={_setModel}
+          />
+        {/* Wrapping the rest of the divs so they can open the modal */}
+        <div
+          onClick={() => {
+            setIsModalOpen(true);
+          }}
+          className='cursor-pointer flex gap-x-4' // Add flex and gap-x-4 to align the buttons in a row
+        >
+          <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
+            {t('token.label')}: {config.max_tokens}
+          </div>
+          <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
+            {t('temperature.label')}: {config.temperature}
+          </div>
+          <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
+            {t('topP.label')}: {config.top_p}
+          </div>
+          <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
+            {t('presencePenalty.label')}: {config.presence_penalty}
+          </div>
+          <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
+            {t('frequencyPenalty.label')}: {config.frequency_penalty}
+          </div>
         </div>
       </div>
       {isModalOpen && (
@@ -75,9 +97,7 @@ const ChatTitle = React.memo(() => {
         />
       )}
     </>
-  ) : (
-    <></>
-  );
-});
-
-export default ChatTitle;
+  ) : null; // Use null for no-render instead of <></>
+  });
+  
+  export default ChatTitle;
\ No newline at end of file
diff --git a/src/components/ConfigMenu/ConfigMenu.tsx b/src/components/ConfigMenu/ConfigMenu.tsx
index 52f5c396a..1b6302a27 100644
--- a/src/components/ConfigMenu/ConfigMenu.tsx
+++ b/src/components/ConfigMenu/ConfigMenu.tsx
@@ -47,7 +47,9 @@ const ConfigMenu = ({
       handleClickBackdrop={handleConfirm}
     >
       <div className='p-6 border-b border-gray-200 dark:border-gray-600'>
-        <ModelSelector _model={_model} _setModel={_setModel} />
+        <div style={{ marginBottom: '1rem' }}>
+          <ModelSelector _model={_model} _setModel={_setModel} />
+        </div>
         <MaxTokenSlider
           _maxToken={_maxToken}
           _setMaxToken={_setMaxToken}
@@ -81,7 +83,7 @@ export const ModelSelector = ({
   const [dropDown, setDropDown] = useState<boolean>(false);
 
   return (
-    <div className='mb-4'>
+    <div className='mb-4' style={{ marginBottom: 0 }}>
       <button
         className='btn btn-neutral btn-small flex gap-1'
         type='button'
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index d808368dc..b97313a93 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -32,7 +32,7 @@ const Menu = () => {
     <>
       <div
         id='menu'
-        className={`group/menu dark bg-gray-900 fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col transition-transform z-[999] top-0 left-0 h-full max-md:w-3/4 ${
+        className={`group/menu dark bg-gray-900 fixed md:inset-y-0 md:flex md:w-[300px] md:flex-col transition-transform z-[999] top-0 left-0 h-full max-md:w-3/4 ${
           hideSideMenu ? 'translate-x-[-100%]' : 'translate-x-[0%]'
         }`}
       >
diff --git a/src/components/TokenCount/TokenCount.tsx b/src/components/TokenCount/TokenCount.tsx
index 5ad12c9a0..e86d5c683 100644
--- a/src/components/TokenCount/TokenCount.tsx
+++ b/src/components/TokenCount/TokenCount.tsx
@@ -17,7 +17,7 @@ const TokenCount = React.memo(() => {
   const model = useStore((state) =>
     state.chats
       ? state.chats[state.currentChatIndex].config.model
-      : 'gpt-3.5-turbo'
+      : 'gpt-4'
   );
 
   const cost = useMemo(() => {
diff --git a/src/constants/chat.ts b/src/constants/chat.ts
index 07985497b..0baeda82a 100644
--- a/src/constants/chat.ts
+++ b/src/constants/chat.ts
@@ -18,22 +18,33 @@ Carefully heed the user's instructions.
 Respond using Markdown.`;
 
 export const modelOptions: ModelOptions[] = [
-  'gpt-3.5-turbo',
-  'gpt-3.5-turbo-16k',
-  'gpt-3.5-turbo-1106',
-  'gpt-3.5-turbo-0125',
-  'gpt-4',
-  'gpt-4-32k',
-  'gpt-4-1106-preview',
-  'gpt-4-0125-preview'
-  // 'gpt-3.5-turbo-0301',
-  // 'gpt-4-0314',
-  // 'gpt-4-32k-0314',
+  'GPT-3.5-Turbo',
+  'GPT-4',
+  'GPT-4-32k',
+  'GPT-4-128k',
+  'Claude-3-Opus',
+  'Claude-3-Sonnet',
+  'ChatGPT-16k',
+  'Mistral-Large',
+  'Gemini-Pro',
+  'Llama-2-70b-Groq',
+  'Mixtral-8x7b-Groq',
 ];
 
-export const defaultModel = 'gpt-3.5-turbo';
+export const defaultModel = 'GPT-4';
 
 export const modelMaxToken = {
+  'GPT-4': 4096,
+  'GPT-4-32k': 32768,
+  'GPT-4-128k': 131072,
+  'Claude-3-Opus': 4096,
+  'Claude-3-Sonnet': 4096,
+  'GPT-3.5-Turbo': 4096,
+  'ChatGPT-16k': 16384,
+  'Mistral-Large': 32768,
+  'Gemini-Pro': 32768,
+  'Llama-2-70b-Groq': 4096,
+  'Mixtral-8x7b-Groq': 32768,
   'gpt-3.5-turbo': 4096,
   'gpt-3.5-turbo-0301': 4096,
   'gpt-3.5-turbo-0613': 4096,
@@ -52,6 +63,50 @@ export const modelMaxToken = {
 };
 
 export const modelCost = {
+  'GPT-3.5-Turbo': {
+    prompt: { price: 0.000, unit: 1000 },
+    completion: { price: 0.000, unit: 1000 },
+  },
+  'GPT-4': {
+    prompt: { price: 0.000, unit: 1000 },
+    completion: { price: 0.000, unit: 1000 },
+  },
+  'GPT-4-32k': {
+    prompt: { price: 0.000, unit: 1000 },
+    completion: { price: 0.000, unit: 1000 },
+  },
+  'GPT-4-128k': {
+    prompt: { price: 0.000, unit: 1000 },
+    completion: { price: 0.000, unit: 1000 },
+  },
+  'Claude-3-Opus': {
+    prompt: { price: 0.000, unit: 1000 },
+    completion: { price: 0.000, unit: 1000 },
+  },
+  'Claude-3-Sonnet': {
+    prompt: { price: 0.000, unit: 1000 },
+    completion: { price: 0.000, unit: 1000 },
+  },
+  'ChatGPT-16k': {
+    prompt: { price: 0.000, unit: 1000 },
+    completion: { price: 0.000, unit: 1000 },
+  },
+  'Mistral-Large': {
+    prompt: { price: 0.000, unit: 1000 },
+    completion: { price: 0.000, unit: 1000 },
+  },
+  'Gemini-Pro': {
+    prompt: { price: 0.000, unit: 1000 },
+    completion: { price: 0.000, unit: 1000 },
+  },
+  'Llama-2-70b-Groq': {
+    prompt: { price: 0.000, unit: 1000 },
+    completion: { price: 0.000, unit: 1000 },
+  },
+  'Mixtral-8x7b-Groq':{
+    prompt: { price: 0.000, unit: 1000 },
+    completion: { price: 0.000, unit: 1000 },
+  },
   'gpt-3.5-turbo': {
     prompt: { price: 0.0015, unit: 1000 },
     completion: { price: 0.002, unit: 1000 },
diff --git a/src/hooks/useSubmit.ts b/src/hooks/useSubmit.ts
index cd6efc5aa..0ef633fb2 100644
--- a/src/hooks/useSubmit.ts
+++ b/src/hooks/useSubmit.ts
@@ -6,6 +6,7 @@ import { getChatCompletion, getChatCompletionStream } from '@api/api';
 import { parseEventSource } from '@api/helper';
 import { limitMessageTokens, updateTotalTokenUsed } from '@utils/messageUtils';
 import { _defaultChatConfig } from '@constants/chat';
+import { ConfigInterface } from '@type/chat';
 import { officialAPIEndpoint } from '@constants/auth';
 
 const useSubmit = () => {
@@ -37,11 +38,15 @@ const useSubmit = () => {
           _defaultChatConfig
         );
       } else if (apiKey) {
+        const customChatConfig: ConfigInterface = {
+          ..._defaultChatConfig,
+          model: "GPT-3.5-Turbo",
+        };
         // own apikey
         data = await getChatCompletion(
           useStore.getState().apiEndpoint,
           message,
-          _defaultChatConfig,
+          customChatConfig,
           apiKey
         );
       }
@@ -173,7 +178,7 @@ const useSubmit = () => {
 
         const message: MessageInterface = {
           role: 'user',
-          content: `Generate a title in less than 6 words for the following message (language: ${i18n.language}):\n"""\nUser: ${user_message}\nAssistant: ${assistant_message}\n"""`,
+          content: `Generate a title in 2 words or 3 words for the following message (language: ${i18n.language}):\n"""\nUser: ${user_message}\nAssistant: ${assistant_message}\n\nRemember to use fewer than or equal to 3 words."""`,
         };
 
         let title = (await generateTitle([message])).trim();
diff --git a/src/types/chat.ts b/src/types/chat.ts
index 54f7d286f..3e9d14d16 100644
--- a/src/types/chat.ts
+++ b/src/types/chat.ts
@@ -50,17 +50,28 @@ export interface Folder {
 }
 
 export type ModelOptions =
+  | 'GPT-4'
   | 'gpt-4'
+  | 'GPT-4-32k'
   | 'gpt-4-32k'
+  | 'GPT-4-128k'
   | 'gpt-4-1106-preview'
   | 'gpt-4-0125-preview'
+  | 'Claude-3-Opus'
+  | 'Claude-3-Sonnet'
+  | 'ChatGPT-16k'
+  | 'Mistral-Large'
+  | "Gemini-Pro"
+  | 'Llama-2-70b-Groq'
+  | 'Mixtral-8x7b-Groq'
+  | 'GPT-3.5-Turbo'
   | 'gpt-3.5-turbo'
   | 'gpt-3.5-turbo-16k'
   | 'gpt-3.5-turbo-1106'
   | 'gpt-3.5-turbo-0125';
-// | 'gpt-3.5-turbo-0301';
-// | 'gpt-4-0314'
-// | 'gpt-4-32k-0314'
+  // | 'gpt-3.5-turbo-0301';
+  // | 'gpt-4-0314'
+  // | 'gpt-4-32k-0314'
 
 export type TotalTokenUsed = {
   [model in ModelOptions]?: {
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 5774b7d11..42e232500 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -32,6 +32,7 @@ module.exports = {
         'Noto Color Emoji',
       ],
       mono: [
+        'Cascadia Code',
         'Söhne Mono',
         'Monaco',
         'Andale Mono',