Optimize Chat

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "i18n-ally.localesPaths": ["public/locales"]
+}

components/Chat/Chat.tsx

@@ -33,6 +33,7 @@ import { ModelSelect } from './ModelSelect';
 import { SystemPrompt } from './SystemPrompt';
 import { TemperatureSlider } from './Temperature';
 import { MemoizedChatMessage } from './MemoizedChatMessage';
+import { ChatSettings } from "./ChatSettings"
 
 interface Props {
   stopConversationRef: MutableRefObject<boolean>;
@@ -411,35 +412,15 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
 
                   {models.length > 0 && (
                     <div className="flex h-full flex-col space-y-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-600">
-                      <ModelSelect />
-
-                      <SystemPrompt
-                        conversation={selectedConversation}
-                        prompts={prompts}
-                        onChangePrompt={(prompt) =>
-                          handleUpdateConversation(selectedConversation, {
-                            key: 'prompt',
-                            value: prompt,
-                          })
-                        }
-                      />
-
-                      <TemperatureSlider
-                        label={t('Temperature')}
-                        onChangeTemperature={(temperature) =>
-                          handleUpdateConversation(selectedConversation, {
-                            key: 'temperature',
-                            value: temperature,
-                          })
-                        }
-                      />
+                      <ChatSettings />
                     </div>
                   )}
                 </div>
               </>
             ) : (
               <>
-                <div className="sticky top-0 z-10 flex justify-center border border-b-neutral-300 bg-neutral-100 py-2 text-sm text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200">
+                <div className="sticky top-0 z-10 border border-b-neutral-300 bg-neutral-100 text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200">
+                <div className="flex justify-center py-2 text-sm">
                   {t('Model')}: {selectedConversation?.model.name} | {t('Temp')}
                   : {selectedConversation?.temperature} |
                   <button
@@ -457,11 +438,13 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
                 </div>
                 {showSettings && (
                   <div className="flex flex-col space-y-10 md:mx-auto md:max-w-xl md:gap-6 md:py-3 md:pt-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
-                    <div className="flex h-full flex-col space-y-4 border-b border-neutral-200 p-4 dark:border-neutral-600 md:rounded-lg md:border">
+                    {/* <div className="flex h-full flex-col space-y-4 border-b border-neutral-200 p-4 dark:border-neutral-600 md:rounded-lg md:border">
                       <ModelSelect />
-                    </div>
+                    </div> */}
+                    <ChatSettings/>
                   </div>
                 )}
+                </div>
 
                 {selectedConversation?.messages.map((message, index) => (
                   <MemoizedChatMessage

components/Chat/ChatSettings.tsx

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+import { ModelSelect } from './ModelSelect';
+import { SystemPrompt } from './SystemPrompt';
+import { TemperatureSlider } from './Temperature';
+import { useTranslation } from 'react-i18next';
+
+export const ChatSettings = () => {
+  const { t } = useTranslation('chat')
+
+  const {
+    state: { selectedConversation, prompts },
+    handleUpdateConversation,
+  } = useContext(HomeContext);
+  if (!selectedConversation) return null;
+  return (
+    <div className="flex h-full flex-col space-y-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-600">
+      <ModelSelect />
+      <SystemPrompt
+        conversation={selectedConversation}
+        prompts={prompts}
+        onChangePrompt={(prompt) =>
+          handleUpdateConversation(selectedConversation, {
+            key: 'prompt',
+            value: prompt,
+          })
+        }
+      />
+
+      <TemperatureSlider
+        label={t('Temperature')}
+        onChangeTemperature={(temperature) =>
+          handleUpdateConversation(selectedConversation, {
+            key: 'temperature',
+            value: temperature,
+          })
+        }
+      />
+    </div>
+  );
+};

components/Chatbar/Chatbar.tsx

@@ -186,6 +186,12 @@ export const Chatbar = () => {
     }
   };
 
+  const beforeCreate = () => {
+    const folderName = prompt(t('Enter folder name: ') || "",  t('New folder') || "")
+    if (folderName) 
+      handleCreateFolder(folderName, 'chat')
+  }
+
   useEffect(() => {
     if (searchTerm) {
       chatDispatch({
@@ -232,7 +238,7 @@ export const Chatbar = () => {
         }
         toggleOpen={handleToggleChatbar}
         handleCreateItem={handleNewConversation}
-        handleCreateFolder={() => handleCreateFolder(t('New folder'), 'chat')}
+        handleCreateFolder={beforeCreate}
         handleDrop={handleDrop}
         footerComponent={<ChatbarSettings />}
       />

components/Folder/Folder.tsx

@@ -11,6 +11,7 @@ import {
   ReactElement,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 
@@ -33,13 +34,26 @@ const Folder = ({
   handleDrop,
   folderComponent,
 }: Props) => {
-  const { handleDeleteFolder, handleUpdateFolder } = useContext(HomeContext);
+  const {
+    handleDeleteFolder,
+    handleUpdateFolder,
+    dispatch: homeDispatch,
+    state: { selectedFolder },
+  } = useContext(HomeContext);
 
   const [isDeleting, setIsDeleting] = useState(false);
   const [isRenaming, setIsRenaming] = useState(false);
   const [renameValue, setRenameValue] = useState('');
   const [isOpen, setIsOpen] = useState(false);
 
+  const isFolderSelected = useMemo(() => currentFolder.id === selectedFolder?.id, [currentFolder, selectedFolder])
+
+  const handleSelect = () => {
+    setIsOpen(!isOpen);
+    const selectedFolder = isOpen ? undefined : currentFolder
+    homeDispatch({ field: 'selectedFolder', value: selectedFolder });
+  };
+
   const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -112,8 +126,8 @@ const Folder = ({
           </div>
         ) : (
           <button
-            className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90`}
-            onClick={() => setIsOpen(!isOpen)}
+            className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90 ${isFolderSelected ? 'bg-[#343541]' : ''}`}
+            onClick={handleSelect}
             onDrop={(e) => dropHandler(e)}
             onDragOver={allowDrop}
             onDragEnter={highlightDrop}

pages/api/home/home.state.tsx

@@ -1,7 +1,7 @@
 import { Conversation, Message } from '@/types/chat';
 import { ErrorMessage } from '@/types/error';
 import { FolderInterface } from '@/types/folder';
-import { OpenAIModel, OpenAIModelID } from '@/types/openai';
+import { OpenAIModel, OpenAIModelID, OpenAIModels } from '@/types/openai';
 import { PluginKey } from '@/types/plugin';
 import { Prompt } from '@/types/prompt';
 
@@ -16,6 +16,7 @@ export interface HomeInitialState {
   folders: FolderInterface[];
   conversations: Conversation[];
   selectedConversation: Conversation | undefined;
+  selectedFolder: FolderInterface | undefined;
   currentMessage: Message | undefined;
   prompts: Prompt[];
   temperature: number;
@@ -29,17 +30,19 @@ export interface HomeInitialState {
   serverSidePluginKeysSet: boolean;
 }
 
+const models = Object.values(OpenAIModels)
 export const initialState: HomeInitialState = {
   apiKey: '',
   loading: false,
   pluginKeys: [],
   lightMode: 'dark',
   messageIsStreaming: false,
   modelError: null,
-  models: [],
+  models,
   folders: [],
   conversations: [],
   selectedConversation: undefined,
+  selectedFolder: undefined,
   currentMessage: undefined,
   prompts: [],
   temperature: 1,

pages/api/home/home.tsx

@@ -45,12 +45,14 @@ interface Props {
   serverSideApiKeyIsSet: boolean;
   serverSidePluginKeysSet: boolean;
   defaultModelId: OpenAIModelID;
+  openAiKey: string;
 }
 
 const Home = ({
   serverSideApiKeyIsSet,
   serverSidePluginKeysSet,
   defaultModelId,
+  openAiKey,
 }: Props) => {
   const { t } = useTranslation('chat');
   const { getModels } = useApiService();
@@ -68,6 +70,7 @@ const Home = ({
       folders,
       conversations,
       selectedConversation,
+      selectedFolder,
       prompts,
       temperature,
     },
@@ -92,7 +95,7 @@ const Home = ({
   );
 
   useEffect(() => {
-    if (data) dispatch({ field: 'models', value: data });
+    // if (data) dispatch({ field: 'models', value: data });
   }, [data, dispatch]);
 
   useEffect(() => {
@@ -193,7 +196,7 @@ const Home = ({
       },
       prompt: DEFAULT_SYSTEM_PROMPT,
       temperature: lastConversation?.temperature ?? DEFAULT_TEMPERATURE,
-      folderId: null,
+      folderId: selectedFolder?.id ?? null,
     };
 
     const updatedConversations = [...conversations, newConversation];
@@ -262,7 +265,7 @@ const Home = ({
     const apiKey = localStorage.getItem('apiKey');
 
     if (serverSideApiKeyIsSet) {
-      dispatch({ field: 'apiKey', value: '' });
+      dispatch({ field: 'apiKey', value: openAiKey });
 
       localStorage.removeItem('apiKey');
     } else if (apiKey) {
@@ -403,6 +406,8 @@ export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
       ) &&
       process.env.DEFAULT_MODEL) ||
     fallbackModelID;
+  const openAiKey = process.env.OPENAI_API_KEY
+  console.debug('[home] [Line 409]: openaiKey', openAiKey);
 
   let serverSidePluginKeysSet = false;
 
@@ -418,6 +423,7 @@ export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
       serverSideApiKeyIsSet: !!process.env.OPENAI_API_KEY,
       defaultModelId,
       serverSidePluginKeysSet,
+      openAiKey,
       ...(await serverSideTranslations(locale ?? 'en', [
         'common',
         'chat',

types/openai.ts

@@ -9,9 +9,9 @@ export interface OpenAIModel {
 
 export enum OpenAIModelID {
   GPT_3_5 = 'gpt-3.5-turbo',
-  GPT_3_5_AZ = 'gpt-35-turbo',
+  GPT_3_5_PREVIEW = 'gpt-3.5-turbo-1106',
   GPT_4 = 'gpt-4',
-  GPT_4_32K = 'gpt-4-32k',
+  GPT_4_PREVIEW = 'gpt-4-1106-preview',
 }
 
 // in case the `DEFAULT_MODEL` environment variable is not set or set to an unsupported model
@@ -24,9 +24,9 @@ export const OpenAIModels: Record<OpenAIModelID, OpenAIModel> = {
     maxLength: 12000,
     tokenLimit: 4000,
   },
-  [OpenAIModelID.GPT_3_5_AZ]: {
-    id: OpenAIModelID.GPT_3_5_AZ,
-    name: 'GPT-3.5',
+  [OpenAIModelID.GPT_3_5_PREVIEW]: {
+    id: OpenAIModelID.GPT_3_5_PREVIEW,
+    name: 'GPT-3.5-PREVIEW',
     maxLength: 12000,
     tokenLimit: 4000,
   },
@@ -36,8 +36,8 @@ export const OpenAIModels: Record<OpenAIModelID, OpenAIModel> = {
     maxLength: 24000,
     tokenLimit: 8000,
   },
-  [OpenAIModelID.GPT_4_32K]: {
-    id: OpenAIModelID.GPT_4_32K,
+  [OpenAIModelID.GPT_4_PREVIEW]: {
+    id: OpenAIModelID.GPT_4_PREVIEW,
     name: 'GPT-4-32K',
     maxLength: 96000,
     tokenLimit: 32000,