Merge pull request #10117 from weseek/fix/168066-mutation-when-deleting-thread

imrpv: Mutation when deleting thread

apps/app/src/features/openai/client/components/AiAssistant/Sidebar/AiAssistantList.tsx

@@ -26,7 +26,7 @@ type AiAssistantItemProps = {
   onEditClick: (aiAssistantData: AiAssistantHasId) => void;
   onItemClick: (aiAssistantData: AiAssistantHasId) => void;
   onUpdated?: () => void;
-  onDeleted?: () => void;
+  onDeleted?: (aiAssistantId: string) => void;
 };
 
 const AiAssistantItem: React.FC<AiAssistantItemProps> = ({
@@ -64,7 +64,7 @@ const AiAssistantItem: React.FC<AiAssistantItemProps> = ({
   const deleteAiAssistantHandler = useCallback(async() => {
     try {
       await deleteAiAssistant(aiAssistant._id);
-      onDeleted?.();
+      onDeleted?.(aiAssistant._id);
       toastSuccess(t('ai_assistant_substance.toaster.ai_assistant_deleted_success'));
     }
     catch (err) {
@@ -146,7 +146,7 @@ type AiAssistantListProps = {
   isTeamAssistant?: boolean;
   aiAssistants: AiAssistantHasId[];
   onUpdated?: () => void;
-  onDeleted?: () => void;
+  onDeleted?: (aiAssistantId: string) => void;
   onCollapsed?: () => void;
 };
 

apps/app/src/features/openai/client/components/AiAssistant/Sidebar/AiAssistantSubstance.tsx

@@ -2,7 +2,7 @@ import React, { type JSX, useCallback } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
-import { useAiAssistantManagementModal, useSWRxAiAssistants } from '../../../stores/ai-assistant';
+import { useAiAssistantManagementModal, useSWRxAiAssistants, useAiAssistantSidebar } from '../../../stores/ai-assistant';
 import { useSWRINFxRecentThreads } from '../../../stores/thread';
 
 import { AiAssistantList } from './AiAssistantList';
@@ -15,13 +15,19 @@ const moduleClass = styles['grw-ai-assistant-substance'] ?? '';
 export const AiAssistantContent = (): JSX.Element => {
   const { t } = useTranslation();
   const { open } = useAiAssistantManagementModal();
+  const { data: aiAssistantSidebarData, close: closeAiAssistantSidebar } = useAiAssistantSidebar();
   const { mutate: mutateRecentThreads } = useSWRINFxRecentThreads();
   const { data: aiAssistants, mutate: mutateAiAssistants } = useSWRxAiAssistants();
 
-  const deleteAiAssistantHandler = useCallback(async() => {
+  const deleteAiAssistantHandler = useCallback(async(aiAssistantId: string) => {
     await mutateAiAssistants();
     await mutateRecentThreads();
-  }, [mutateAiAssistants, mutateRecentThreads]);
+
+    // If the sidebar is opened for the assistant being deleted, close it
+    if (aiAssistantSidebarData?.isOpened && aiAssistantSidebarData?.aiAssistantData?._id === aiAssistantId) {
+      closeAiAssistantSidebar();
+    }
+  }, [aiAssistantSidebarData?.aiAssistantData?._id, aiAssistantSidebarData?.isOpened, closeAiAssistantSidebar, mutateAiAssistants, mutateRecentThreads]);
 
   return (
     <div className={moduleClass}>

apps/app/src/features/openai/client/components/AiAssistant/Sidebar/ThreadList.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import InfiniteScroll from '~/client/components/InfiniteScroll';
 import { toastError, toastSuccess } from '~/client/util/toastr';
-import { useSWRINFxRecentThreads } from '~/features/openai/client/stores/thread';
+import { useSWRMUTxThreads, useSWRINFxRecentThreads } from '~/features/openai/client/stores/thread';
 import loggerFactory from '~/utils/logger';
 
 import { deleteThread } from '../../../services/thread';
@@ -16,8 +16,9 @@ const logger = loggerFactory('growi:openai:client:components:ThreadList');
 export const ThreadList: React.FC = () => {
   const swrInifiniteThreads = useSWRINFxRecentThreads();
   const { t } = useTranslation();
-  const { data, mutate } = swrInifiniteThreads;
-  const { openChat } = useAiAssistantSidebar();
+  const { data, mutate: mutateRecentThreads } = swrInifiniteThreads;
+  const { openChat, data: aiAssistantSidebarData, close: closeAiAssistantSidebar } = useAiAssistantSidebar();
+  const { trigger: mutateAssistantThreadData } = useSWRMUTxThreads(aiAssistantSidebarData?.aiAssistantData?._id);
 
   const isEmpty = data?.[0]?.paginateResult.totalDocs === 0;
   const isReachingEnd = isEmpty || (data != null && (data[data.length - 1].paginateResult.hasNextPage === false));
@@ -26,13 +27,19 @@ export const ThreadList: React.FC = () => {
     try {
       await deleteThread({ aiAssistantId, threadRelationId });
       toastSuccess(t('ai_assistant_substance.toaster.thread_deleted_success'));
-      mutate();
+
+      await Promise.all([mutateAssistantThreadData(), mutateRecentThreads()]);
+
+      // Close if the thread to be deleted is open in right sidebar
+      if (aiAssistantSidebarData?.isOpened && aiAssistantSidebarData?.threadData?._id === threadRelationId) {
+        closeAiAssistantSidebar();
+      }
     }
     catch (err) {
       logger.error(err);
       toastError(t('ai_assistant_substance.toaster.thread_deleted_failed'));
     }
-  }, [mutate, t]);
+  }, [aiAssistantSidebarData?.isOpened, aiAssistantSidebarData?.threadData?._id, closeAiAssistantSidebar, mutateAssistantThreadData, mutateRecentThreads, t]);
 
   return (
     <>