MAJOR REFACTOR (#494)

* move index to home folder, create state and context files and barrell folder

* Sanity Check Commit:  reducer added to home.tsx manual QA all working

* WIP: promptBar

* fix missing json parse on folders and prompts

* split context and add promptbar context

* add context to nested prompt componets and componetize Folder componet

* remove log

* Create buttons folder and componetize sidebar action button

* tidy up prompt handlers

* componetized sidebar

* added back chatbar componet to left side sidebar

* monster commit: Componetized the common code between chatbar and promptbar into new componet Sidebar and added context to both bars

* add useFetch service

* added prettier import sort to keep imports ordered and easier to indentify

* added react query and useFetch to work with RQ

* added apiService, errorService and reactQuery

* add callback and tidy up error service

* refactor chat and child componets to useContext

* fix extra calls and bad calls to mel endpoint

* minor import cleanup

---------

Co-authored-by: jc.durbin <jc.durbin@ardanis.com>

components/Chat/ModelSelect.tsx

@@ -1,23 +1,31 @@
-import { OpenAIModel, OpenAIModelID } from '@/types/openai';
-import { useTranslation } from 'next-i18next';
 import { IconExternalLink } from '@tabler/icons-react';
-import { FC } from 'react';
+import { useContext } from 'react';
 
-interface Props {
-  model: OpenAIModel;
-  models: OpenAIModel[];
-  defaultModelId: OpenAIModelID;
-  onModelChange: (model: OpenAIModel) => void;
-}
+import { useTranslation } from 'next-i18next';
 
-export const ModelSelect: FC<Props> = ({
-  model,
-  models,
-  defaultModelId,
-  onModelChange,
-}) => {
+import { OpenAIModel } from '@/types/openai';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+export const ModelSelect = () => {
   const { t } = useTranslation('chat');
 
+  const {
+    state: { selectedConversation, models, defaultModelId },
+    handleUpdateConversation,
+    dispatch: homeDispatch,
+  } = useContext(HomeContext);
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    selectedConversation &&
+      handleUpdateConversation(selectedConversation, {
+        key: 'model',
+        value: models.find(
+          (model) => model.id === e.target.value,
+        ) as OpenAIModel,
+      });
+  };
+
   return (
     <div className="flex flex-col">
       <label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
@@ -27,14 +35,8 @@ export const ModelSelect: FC<Props> = ({
         <select
           className="w-full bg-transparent p-2"
           placeholder={t('Select a model') || ''}
-          value={model?.id || defaultModelId}
-          onChange={(e) => {
-            onModelChange(
-              models.find(
-                (model) => model.id === e.target.value,
-              ) as OpenAIModel,
-            );
-          }}
+          value={selectedConversation?.model?.id || defaultModelId}
+          onChange={handleChange}
         >
           {models.map((model) => (
             <option
@@ -50,8 +52,12 @@ export const ModelSelect: FC<Props> = ({
         </select>
       </div>
       <div className="w-full mt-3 text-left text-neutral-700 dark:text-neutral-400 flex items-center">
-        <a href="https://platform.openai.com/account/usage" target="_blank" className="flex items-center">
-          <IconExternalLink size={18} className={"inline mr-1"} />
+        <a
+          href="https://platform.openai.com/account/usage"
+          target="_blank"
+          className="flex items-center"
+        >
+          <IconExternalLink size={18} className={'inline mr-1'} />
           {t('View Account Usage')}
         </a>
       </div>