From 48e33fe1e99b5c1aa3a3ed83cd16b1bd7641a1cf Mon Sep 17 00:00:00 2001
From: Daniel D Orlando <dan@danorlando.com>
Date: Thu, 6 Apr 2023 08:02:08 -0700
Subject: [PATCH] Add support for deleting individual presets

---
 .../Input/Endpoints/NewConversationMenu.jsx   | 22 ++++++------
 .../components/Input/Endpoints/PresetItem.jsx |  9 -----
 client/src/components/Nav/index.jsx           |  1 +
 client/src/data-provider/api-endpoints.ts     |  6 +++-
 client/src/data-provider/data-service.ts      |  6 ++--
 .../src/data-provider/react-query-service.ts  | 34 +++++++++++--------
 6 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/client/src/components/Input/Endpoints/NewConversationMenu.jsx b/client/src/components/Input/Endpoints/NewConversationMenu.jsx
index a35a79693c..72ddfc51f5 100644
--- a/client/src/components/Input/Endpoints/NewConversationMenu.jsx
+++ b/client/src/components/Input/Endpoints/NewConversationMenu.jsx
@@ -5,7 +5,7 @@ import EndpointItems from './EndpointItems';
 import PresetItems from './PresetItems';
 import FileUpload from './FileUpload';
 import getIcon from '~/utils/getIcon';
-import { useDeleteAllPresetsMutation } from '~/data-provider';
+import { useDeletePresetMutation } from '~/data-provider';
 import { Button } from '../../ui/Button.tsx';
 import {
   DropdownMenu,
@@ -33,7 +33,7 @@ export default function NewConversationMenu() {
   // const { model, promptPrefix, chatGptLabel, conversationId } = conversation;
   const { newConversation } = store.useConversation();
 
-  const deletePresetsMutation = useDeleteAllPresetsMutation();
+  const deletePresetsMutation = useDeletePresetMutation();
 
   const importPreset = jsonData => {
     handleFileSelected(jsonData).then(setPresets);
@@ -79,8 +79,12 @@ export default function NewConversationMenu() {
     setPreset(preset);
   };
 
-  const clearPreset = () => {
-    deletePresetsMutation.mutate();
+  const clearAllPresets = () => {
+    deletePresetsMutation.mutate({arg: {}});
+  };
+
+  const onDeletePreset = preset => {
+    deletePresetsMutation.mutate({arg: preset});
   };
 
   const icon = getIcon({
@@ -92,9 +96,7 @@ export default function NewConversationMenu() {
   });
 
   return (
-    <Dialog
-    // onOpenChange={onOpenChange}
-    >
+    <Dialog>
       <DropdownMenu
         open={menuOpen}
         onOpenChange={setMenuOpen}
@@ -102,7 +104,6 @@ export default function NewConversationMenu() {
         <DropdownMenuTrigger asChild>
           <Button
             variant="outline"
-            // style={{backgroundColor: 'rgb(16, 163, 127)'}}
             className={`absolute top-[0.25px] mb-0 ml-1 items-center rounded-md border-0 p-1 outline-none focus:ring-0 focus:ring-offset-0 disabled:top-[0.25px] dark:data-[state=open]:bg-opacity-50 md:top-1 md:left-1 md:ml-0 md:pl-1 md:disabled:top-1`}
           >
             {icon}
@@ -140,7 +141,6 @@ export default function NewConversationMenu() {
                 <Button
                   type="button"
                   className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-red-700 hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-red-400 dark:hover:bg-gray-800 dark:hover:text-red-400"
-                  // onClick={clearPreset}
                 >
                   Clear All
                 </Button>
@@ -149,7 +149,7 @@ export default function NewConversationMenu() {
                 title="Clear presets"
                 description="Are you sure you want to clear all presets? This is irreversible."
                 selection={{
-                  selectHandler: clearPreset,
+                  selectHandler: clearAllPresets,
                   selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
                   selectText: 'Clear'
                 }}
@@ -166,7 +166,7 @@ export default function NewConversationMenu() {
                 presets={presets}
                 onSelect={onSelectPreset}
                 onChangePreset={onChangePreset}
-                onDeletePreset={clearPresetsTrigger}
+                onDeletePreset={onDeletePreset}
               />
             ) : (
               <DropdownMenuLabel className="dark:text-gray-300">No preset yet.</DropdownMenuLabel>
diff --git a/client/src/components/Input/Endpoints/PresetItem.jsx b/client/src/components/Input/Endpoints/PresetItem.jsx
index fe8503d2cc..ad7e2e2b69 100644
--- a/client/src/components/Input/Endpoints/PresetItem.jsx
+++ b/client/src/components/Input/Endpoints/PresetItem.jsx
@@ -45,15 +45,6 @@ export default function PresetItem({ preset = {}, value, onSelect, onChangePrese
       {icon}
       {preset?.title}
       <small className="ml-2">({getPresetTitle()})</small>
-
-      {/* <RenameButton
-        twcss={`ml-auto mr-2 ${buttonClass.className}`}
-        onRename={onRename}
-        renaming={renaming}
-        onMouseOver={handleMouseOver}
-        onMouseOut={handleMouseOut}
-        renameHandler={renameHandler}
-      /> */}
       <div className="flex w-4 flex-1" />
       <button
         className="invisible m-0 p-2 mr-1 rounded-md text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200        "
diff --git a/client/src/components/Nav/index.jsx b/client/src/components/Nav/index.jsx
index 3cb9fb4d6f..86feff0212 100644
--- a/client/src/components/Nav/index.jsx
+++ b/client/src/components/Nav/index.jsx
@@ -62,6 +62,7 @@ export default function Nav({ navVisible, setNavVisible }) {
   });
 
   useEffect(() => {
+    //we use isInitialLoading here instead of isLoading because query is disabled by default
     if (searchQueryFn.isInitialLoading) {
       setIsFetching(true);
     }
diff --git a/client/src/data-provider/api-endpoints.ts b/client/src/data-provider/api-endpoints.ts
index 3ca970e35b..eb35fa2f7c 100644
--- a/client/src/data-provider/api-endpoints.ts
+++ b/client/src/data-provider/api-endpoints.ts
@@ -42,10 +42,14 @@ export const presets = () => {
   return `/api/presets`;
 }
 
-export const deletePresets = () => {
+export const deletePreset = () => {
   return `/api/presets/delete`;
 }
 
 export const aiEndpoints = () => {
   return `/api/endpoints`;
 }
+
+export const tokenizer = () => {
+  return `/api/tokenizer`;
+}
diff --git a/client/src/data-provider/data-service.ts b/client/src/data-provider/data-service.ts
index db34b15d0b..f6a359b1fd 100644
--- a/client/src/data-provider/data-service.ts
+++ b/client/src/data-provider/data-service.ts
@@ -41,8 +41,8 @@ export function updatePreset(payload: t.TPreset): Promise<t.TPreset[]> {
   return request.post(endpoints.presets(), payload);
 }
 
-export function deletePresets(): Promise<unknown> {
-  return request.post(endpoints.deletePresets(), {arg: {}});
+export function deletePreset(arg: t.TPreset | {}): Promise<t.TPreset[]> {
+  return request.post(endpoints.deletePreset(), arg);
 }
 
 export function getSearchEnabled(): Promise<boolean> {
@@ -59,4 +59,4 @@ export const searchConversations = async(q: string, pageNumber: string): Promise
 
 export const getAIEndpoints = () => {
   return request.get(endpoints.aiEndpoints());
-}
\ No newline at end of file
+}
diff --git a/client/src/data-provider/react-query-service.ts b/client/src/data-provider/react-query-service.ts
index 67ba0eeda0..f0222ab999 100644
--- a/client/src/data-provider/react-query-service.ts
+++ b/client/src/data-provider/react-query-service.ts
@@ -77,8 +77,7 @@ export const useGetConversationByIdMutation = (
 
 export const useUpdateConversationMutation = (
   id: string
-): UseMutationResult<
-  t.TUpdateConversationResponse> => {
+): UseMutationResult<t.TUpdateConversationResponse, unknown, t.TUpdateConversationRequest, unknown> => {
   const queryClient = useQueryClient();
   return useMutation(
     (payload: t.TUpdateConversationRequest) =>
@@ -92,9 +91,10 @@ export const useUpdateConversationMutation = (
   );
 };
 
+
 export const useDeleteConversationMutation = (
   id?: string
-): UseMutationResult<t.TDeleteConversationResponse> => {
+): UseMutationResult<t.TDeleteConversationResponse, unknown, t.TDeleteConversationRequest, unknown> => {
   const queryClient = useQueryClient();
   return useMutation(
     (payload: t.TDeleteConversationRequest) =>
@@ -117,7 +117,7 @@ export const useClearConversationsMutation = (): UseMutationResult<unknown> => {
   });
 };
 
-export const useGetConversationsQuery = (pageNumber: string): QueryObserverResult<t.Conversation[]> => {
+export const useGetConversationsQuery = (pageNumber: string): QueryObserverResult<t.TConversation[]> => {
   return useQuery([QueryKeys.allConversations, pageNumber], () =>
     dataService.getConversations(pageNumber), {
       refetchOnReconnect: false,
@@ -147,10 +147,10 @@ export const useGetEndpointsQuery = (): QueryObserverResult<t.TEndpoints> => {
   );
 }
 
-export const useCreatePresetMutation = (): UseMutationResult<t.Preset[]> => {
+export const useCreatePresetMutation = (): UseMutationResult<t.TPreset[], unknown, t.TPreset, unknown> => {
   const queryClient = useQueryClient();
   return useMutation(
-    (payload: t.TCreatePresetRequest) =>
+    (payload: t.TPreset) =>
       dataService.createPreset(payload),
     {
       onSuccess: () => {
@@ -160,10 +160,10 @@ export const useCreatePresetMutation = (): UseMutationResult<t.Preset[]> => {
   );
 };
 
-export const useUpdatePresetMutation = (): UseMutationResult<t.TPreset[]> => {
+export const useUpdatePresetMutation = (): UseMutationResult<t.TPreset[], unknown, t.TPreset, unknown> => {
   const queryClient = useQueryClient();
   return useMutation(
-    (payload: t.TUpdatePresetRequest) =>
+    (payload: t.TPreset) =>
       dataService.updatePreset(payload),
     {
       onSuccess: () => {
@@ -181,13 +181,17 @@ export const useGetPresetsQuery = (): QueryObserverResult<t.TPreset[], unknown>
   });
 };
 
-export const useDeleteAllPresetsMutation = (): UseMutationResult<unknown> => {
+export const useDeletePresetMutation = (): UseMutationResult<t.TPreset[], unknown, t.TPreset | {}, unknown> => {
   const queryClient = useQueryClient();
-  return useMutation(() => dataService.deletePresets(), {
-    onSuccess: () => {
-      queryClient.invalidateQueries([QueryKeys.presets]);
-    },
-  });
+  return useMutation(
+    (payload: t.TPreset | {}) => 
+      dataService.deletePreset(payload), 
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([QueryKeys.presets]);
+      },
+    }
+  );
 }
 
 export const useSearchQuery = (
@@ -196,7 +200,7 @@ export const useSearchQuery = (
   config?: UseQueryOptions<t.TSearchResults>
   ): QueryObserverResult<t.TSearchResults> => {
   console.log('useSearchFetcher', searchQuery, pageNumber)
-  return useQuery<t.TSearchResponse>([QueryKeys.searchResults, pageNumber, searchQuery], () =>
+  return useQuery<t.TSearchResults>([QueryKeys.searchResults, pageNumber, searchQuery], () =>
     dataService.searchConversations(searchQuery, pageNumber), {
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,