Implement useSWRMUTxThreads to fetch threads at arbitrary times

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantChatSidebar/AiAssistantChatSidebar.tsx

@@ -17,6 +17,7 @@ import loggerFactory from '~/utils/logger';
 import type { AiAssistantHasId } from '../../../../interfaces/ai-assistant';
 import { useAiAssistantChatSidebar } from '../../../stores/ai-assistant';
 import { useSWRMUTxMessages } from '../../../stores/message';
+import { useSWRMUTxThreads } from '../../../stores/thread';
 
 import { MessageCard } from './MessageCard';
 import { ResizableTextarea } from './ResizableTextArea';
@@ -59,6 +60,7 @@ const AiAssistantChatSidebarSubstance: React.FC<AiAssistantChatSidebarSubstanceP
 
   const { t } = useTranslation();
   const { data: growiCloudUri } = useGrowiCloudUri();
+  const { trigger: mutateThreadData } = useSWRMUTxThreads(aiAssistantData._id);
   const { trigger: mutateMessageData } = useSWRMUTxMessages(aiAssistantData._id, threadId);
 
   const form = useForm<FormData>({
@@ -118,13 +120,16 @@ const AiAssistantChatSidebarSubstance: React.FC<AiAssistantChatSidebarSubstanceP
 
     // create thread
     let currentThreadId_ = currentThreadId;
-    if (threadId == null) {
+    if (currentThreadId_ == null) {
       try {
         const res = await apiv3Post('/openai/thread', { aiAssistantId: aiAssistantData._id });
         const thread = res.data.thread;
 
         setCurrentThreadId(thread.id);
         currentThreadId_ = thread.id;
+
+        // No need to await because data is not used
+        mutateThreadData();
       }
       catch (err) {
         logger.error(err.toString());
@@ -216,7 +221,7 @@ const AiAssistantChatSidebarSubstance: React.FC<AiAssistantChatSidebarSubstanceP
       form.setError('input', { type: 'manual', message: err.toString() });
     }
 
-  }, [aiAssistantData._id, currentThreadId, form, growiCloudUri, isGenerating, messageLogs, t, threadId]);
+  }, [aiAssistantData._id, currentThreadId, form, growiCloudUri, isGenerating, messageLogs, mutateThreadData, t]);
 
   const keyDownHandler = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {

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

@@ -10,7 +10,7 @@ import type { AiAssistantAccessScope } from '../../../../interfaces/ai-assistant
 import { AiAssistantShareScope, type AiAssistantHasId } from '../../../../interfaces/ai-assistant';
 import { deleteAiAssistant } from '../../../services/ai-assistant';
 import { useAiAssistantChatSidebar, useAiAssistantManagementModal } from '../../../stores/ai-assistant';
-import { useSWRxThreads } from '../../../stores/thread';
+import { useSWRMUTxThreads, useSWRxThreads } from '../../../stores/thread';
 
 import styles from './AiAssistantTree.module.scss';
 
@@ -126,6 +126,8 @@ const AiAssistantItem: React.FC<AiAssistantItemProps> = ({
 }) => {
   const [isThreadsOpened, setIsThreadsOpened] = useState(false);
 
+  const { trigger: mutateThreadData } = useSWRMUTxThreads(aiAssistant._id);
+
   const openManagementModalHandler = useCallback((aiAssistantData: AiAssistantHasId) => {
     onEditClick(aiAssistantData);
   }, [onEditClick]);
@@ -134,9 +136,10 @@ const AiAssistantItem: React.FC<AiAssistantItemProps> = ({
     onItemClick(aiAssistantData);
   }, [onItemClick]);
 
-  const openThreadsHandler = useCallback(() => {
+  const openThreadsHandler = useCallback(async() => {
+    mutateThreadData();
     setIsThreadsOpened(toggle => !toggle);
-  }, []);
+  }, [mutateThreadData]);
 
   const deleteAiAssistantHandler = useCallback(async() => {
     try {

apps/app/src/features/openai/client/stores/thread.tsx

@@ -1,5 +1,6 @@
 import { type SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
+import useSWRMutation, { type SWRMutationResponse } from 'swr/mutation';
 
 import { apiv3Get } from '~/client/util/apiv3-client';
 
@@ -7,9 +8,17 @@ import type { IThreadRelationHasId } from '../../interfaces/thread-relation';
 
 export const useSWRxThreads = (aiAssistantId: string): SWRResponse<IThreadRelationHasId[], Error> => {
   const key = [`openai/threads/${aiAssistantId}`];
-
   return useSWRImmutable<IThreadRelationHasId[]>(
     key,
     ([endpoint]) => apiv3Get(endpoint).then(response => response.data.threads),
   );
 };
+
+
+export const useSWRMUTxThreads = (aiAssistantId: string): SWRMutationResponse<IThreadRelationHasId[], Error> => {
+  const key = [`openai/threads/${aiAssistantId}`];
+  return useSWRMutation(
+    key,
+    ([endpoint]) => apiv3Get(endpoint).then(response => response.data.threads),
+  );
+};