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,