refactor: migrate to new state management for AiAssistant components

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementEditInstruction.tsx

@@ -10,7 +10,7 @@ import {
   DropdownItem,
 } from 'reactstrap';
 
-import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../../stores/ai-assistant';
+import { useAiAssistantManagementModalActions, AiAssistantManagementModalPageMode } from '../../../states/modal/ai-assistant-management';
 
 import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
 
@@ -24,7 +24,7 @@ type Props = {
 export const AiAssistantManagementEditInstruction = (props: Props): JSX.Element => {
   const { instruction, onChange, onReset } = props;
   const { t } = useTranslation();
-  const { changePageMode } = useAiAssistantManagementModal();
+  const { changePageMode } = useAiAssistantManagementModalActions();
 
   const handleComplete = () => {
     changePageMode(AiAssistantManagementModalPageMode.HOME);

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementHeader.tsx

@@ -3,7 +3,7 @@ import { type JSX } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ModalHeader } from 'reactstrap';
 
-import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../../stores/ai-assistant';
+import { useAiAssistantManagementModalActions, AiAssistantManagementModalPageMode } from '../../../states/modal/ai-assistant-management';
 
 type Props = {
   labelTranslationKey: string;
@@ -21,7 +21,7 @@ export const AiAssistantManagementHeader = (props: Props): JSX.Element => {
   } = props;
 
   const { t } = useTranslation();
-  const { close, changePageMode } = useAiAssistantManagementModal();
+  const { close, changePageMode } = useAiAssistantManagementModalActions();
 
   return (
     <ModalHeader

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementHome.tsx

@@ -15,7 +15,7 @@ import { limitLearnablePageCountPerAssistantAtom } from '~/states/server-configu
 
 import type { SelectablePage } from '../../../../interfaces/selectable-page';
 import { determineShareScope } from '../../../../utils/determine-share-scope';
-import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../../stores/ai-assistant';
+import { useAiAssistantManagementModalActions, AiAssistantManagementModalPageMode } from '../../../states/modal/ai-assistant-management';
 
 import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
 import { ShareScopeWarningModal } from './ShareScopeWarningModal';
@@ -56,7 +56,7 @@ export const AiAssistantManagementHome = (props: Props): JSX.Element => {
   const { t } = useTranslation();
   const currentUser = useCurrentUser();
   const limitLearnablePageCountPerAssistant = useAtomValue(limitLearnablePageCountPerAssistantAtom);
-  const { close: closeAiAssistantManagementModal, changePageMode } = useAiAssistantManagementModal();
+  const { close: closeAiAssistantManagementModal, changePageMode } = useAiAssistantManagementModalActions();
 
   const [isShareScopeWarningModalOpen, setIsShareScopeWarningModalOpen] = useState(false);
 

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementKeywordSearch.tsx

@@ -16,8 +16,8 @@ import { useSWRxSearch } from '~/stores/search';
 import type { SelectablePage } from '../../../../interfaces/selectable-page';
 import { useSelectedPages } from '../../../services/use-selected-pages';
 import {
-  useAiAssistantManagementModal, AiAssistantManagementModalPageMode,
-} from '../../../stores/ai-assistant';
+  useAiAssistantManagementModalStatus, useAiAssistantManagementModalActions, AiAssistantManagementModalPageMode,
+} from '../../../states/modal/ai-assistant-management';
 
 import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
 import { SelectablePageList } from './SelectablePageList';
@@ -87,7 +87,8 @@ export const AiAssistantKeywordSearch = (props: Props): JSX.Element => {
   }, [searchResult, selectedSearchKeywords.length]);
 
 
-  const { data: aiAssistantManagementModalData, changePageMode } = useAiAssistantManagementModal();
+  const aiAssistantManagementModalData = useAiAssistantManagementModalStatus();
+  const { changePageMode } = useAiAssistantManagementModalActions();
   const isNewAiAssistant = aiAssistantManagementModalData?.aiAssistantData == null;
 
   const typeaheadRef = useRef<TypeaheadRef>(null);

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

@@ -21,11 +21,11 @@ import type { SelectablePage } from '../../../../interfaces/selectable-page';
 import { removeGlobPath } from '../../../../utils/remove-glob-path';
 import { createAiAssistant, updateAiAssistant } from '../../../services/ai-assistant';
 import {
-  useSWRxAiAssistants,
-  useAiAssistantSidebar,
-  useAiAssistantManagementModal,
+  useAiAssistantManagementModalStatus,
+  useAiAssistantManagementModalActions,
   AiAssistantManagementModalPageMode,
-} from '../../../stores/ai-assistant';
+} from '../../../states/modal/ai-assistant-management';
+import { useSWRxAiAssistants, useAiAssistantSidebar } from '../../../stores/ai-assistant';
 
 import { AiAssistantManagementEditInstruction } from './AiAssistantManagementEditInstruction';
 import { AiAssistantManagementEditPages } from './AiAssistantManagementEditPages';
@@ -74,7 +74,8 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
   // Hooks
   const { t } = useTranslation();
   const { mutate: mutateAiAssistants } = useSWRxAiAssistants();
-  const { data: aiAssistantManagementModalData, close: closeAiAssistantManagementModal } = useAiAssistantManagementModal();
+  const aiAssistantManagementModalData = useAiAssistantManagementModalStatus();
+  const { close: closeAiAssistantManagementModal } = useAiAssistantManagementModalActions();
   const { data: aiAssistantSidebarData, refreshAiAssistantData } = useAiAssistantSidebar();
   const { data: pagePathsWithDescendantCount } = useSWRxPagePathsWithDescendantCount(
     removeGlobPath(aiAssistantManagementModalData?.aiAssistantData?.pagePathPatterns) ?? null,
@@ -348,7 +349,8 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
 
 
 export const AiAssistantManagementModal = (): JSX.Element => {
-  const { data: aiAssistantManagementModalData, close: closeAiAssistantManagementModal } = useAiAssistantManagementModal();
+  const aiAssistantManagementModalData = useAiAssistantManagementModalStatus();
+  const { close: closeAiAssistantManagementModal } = useAiAssistantManagementModalActions();
 
   const isOpened = aiAssistantManagementModalData?.isOpened ?? false;
 

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementPageSelectionMethod.tsx

@@ -5,14 +5,14 @@ import {
   ModalBody,
 } from 'reactstrap';
 
-import { useAiAssistantManagementModal } from '../../../stores/ai-assistant';
+import { useAiAssistantManagementModalStatus } from '../../../states/modal/ai-assistant-management';
 
 import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
 import { PageSelectionMethodButtons } from './PageSelectionMethodButtons';
 
 export const AiAssistantManagementPageSelectionMethod = (): JSX.Element => {
   const { t } = useTranslation();
-  const { data: aiAssistantManagementModalData } = useAiAssistantManagementModal();
+  const aiAssistantManagementModalData = useAiAssistantManagementModalStatus();
   const isNewAiAssistant = aiAssistantManagementModalData?.aiAssistantData == null;
 
   return (

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementPageTreeSelection.tsx

@@ -17,7 +17,10 @@ import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
 
 import { type SelectablePage, isSelectablePage } from '../../../../interfaces/selectable-page';
 import { useSelectedPages } from '../../../services/use-selected-pages';
-import { AiAssistantManagementModalPageMode, useAiAssistantManagementModal } from '../../../stores/ai-assistant';
+import {
+  AiAssistantManagementModalPageMode,
+  useAiAssistantManagementModalStatus, useAiAssistantManagementModalActions,
+} from '../../../states/modal/ai-assistant-management';
 
 import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
 import { SelectablePageList } from './SelectablePageList';
@@ -90,7 +93,8 @@ export const AiAssistantManagementPageTreeSelection = (props: Props): JSX.Elemen
   const { baseSelectedPages, updateBaseSelectedPages } = props;
 
   const { t } = useTranslation();
-  const { data: aiAssistantManagementModalData, changePageMode } = useAiAssistantManagementModal();
+  const aiAssistantManagementModalData = useAiAssistantManagementModalStatus();
+  const { changePageMode } = useAiAssistantManagementModalActions();
   const isNewAiAssistant = aiAssistantManagementModalData?.aiAssistantData == null;
 
   const {

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/PageSelectionMethodButtons.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useTranslation } from 'react-i18next';
 
-import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../../stores/ai-assistant';
+import { useAiAssistantManagementModalActions, AiAssistantManagementModalPageMode } from '../../../states/modal/ai-assistant-management';
 
 import styles from './PageSelectionMethodButtons.module.scss';
 
@@ -30,7 +30,7 @@ const SelectionButton = (props: { icon: string, label: string, onClick: () => vo
 
 export const PageSelectionMethodButtons = (): JSX.Element => {
   const { t } = useTranslation();
-  const { changePageMode } = useAiAssistantManagementModal();
+  const { changePageMode } = useAiAssistantManagementModalActions();
 
   return (
     <div className={moduleClass}>

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

@@ -12,7 +12,8 @@ import loggerFactory from '~/utils/logger';
 import { AiAssistantShareScope, type AiAssistantHasId } from '../../../../interfaces/ai-assistant';
 import { determineShareScope } from '../../../../utils/determine-share-scope';
 import { deleteAiAssistant, setDefaultAiAssistant } from '../../../services/ai-assistant';
-import { useAiAssistantSidebar, useAiAssistantManagementModal } from '../../../stores/ai-assistant';
+import { useAiAssistantManagementModalActions } from '../../../states/modal/ai-assistant-management';
+import { useAiAssistantSidebar } from '../../../stores/ai-assistant';
 import { getShareScopeIcon } from '../../../utils/get-share-scope-Icon';
 
 import { DeleteAiAssistantModal } from './DeleteAiAssistantModal';
@@ -146,7 +147,7 @@ export const AiAssistantList: React.FC<AiAssistantListProps> = ({
   const { t } = useTranslation();
   const { openChat } = useAiAssistantSidebar();
   const currentUser = useCurrentUser();
-  const { open: openAiAssistantManagementModal } = useAiAssistantManagementModal();
+  const { open: openAiAssistantManagementModal } = useAiAssistantManagementModalActions();
 
   const [isCollapsed, setIsCollapsed] = useState(false);
 

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

@@ -2,7 +2,8 @@ import React, { type JSX, useCallback } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
-import { useAiAssistantManagementModal, useSWRxAiAssistants, useAiAssistantSidebar } from '../../../stores/ai-assistant';
+import { useAiAssistantManagementModalActions } from '../../../states/modal/ai-assistant-management';
+import { useSWRxAiAssistants, useAiAssistantSidebar } from '../../../stores/ai-assistant';
 import { useSWRINFxRecentThreads } from '../../../stores/thread';
 
 import { AiAssistantList } from './AiAssistantList';
@@ -14,7 +15,7 @@ const moduleClass = styles['grw-ai-assistant-substance'] ?? '';
 
 export const AiAssistantContent = (): JSX.Element => {
   const { t } = useTranslation();
-  const { open } = useAiAssistantManagementModal();
+  const { open } = useAiAssistantManagementModalActions();
   const { data: aiAssistantSidebarData, close: closeAiAssistantSidebar } = useAiAssistantSidebar();
   const { mutate: mutateRecentThreads } = useSWRINFxRecentThreads();
   const { data: aiAssistants, mutate: mutateAiAssistants } = useSWRxAiAssistants();

apps/app/src/features/openai/client/services/use-selected-pages.tsx

@@ -3,7 +3,7 @@ import {
 } from 'react';
 
 import type { SelectablePage } from '../../interfaces/selectable-page';
-import { useAiAssistantManagementModal } from '../stores/ai-assistant';
+import { useAiAssistantManagementModalStatus } from '../states/modal/ai-assistant-management';
 
 
 type UseSelectedPages = {
@@ -16,7 +16,7 @@ type UseSelectedPages = {
 
 export const useSelectedPages = (initialPages?: SelectablePage[]): UseSelectedPages => {
   const [selectedPages, setSelectedPages] = useState<Map<string, SelectablePage>>(new Map());
-  const { data: aiAssistantManagementModalData } = useAiAssistantManagementModal();
+  const aiAssistantManagementModalData = useAiAssistantManagementModalStatus();
 
   const selectedPagesRef = useRef(selectedPages);
 

apps/app/src/features/openai/client/states/modal/ai-assistant-management.ts

@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+import type { AiAssistantHasId } from '../../../interfaces/ai-assistant';
+
+export const AiAssistantManagementModalPageMode = {
+  HOME: 'home',
+  SHARE: 'share',
+  PAGES: 'pages',
+  INSTRUCTION: 'instruction',
+  PAGE_SELECTION_METHOD: 'page-selection-method',
+  KEYWORD_SEARCH: 'keyword-search',
+  PAGE_TREE_SELECTION: 'page-tree-selection',
+} as const;
+
+export type AiAssistantManagementModalPageMode = typeof AiAssistantManagementModalPageMode[keyof typeof AiAssistantManagementModalPageMode];
+
+export type AiAssistantManagementModalStatus = {
+  isOpened: boolean;
+  pageMode?: AiAssistantManagementModalPageMode;
+  aiAssistantData?: AiAssistantHasId;
+};
+
+export type AiAssistantManagementModalActions = {
+  open: (aiAssistantData?: AiAssistantHasId) => void;
+  close: () => void;
+  changePageMode: (pageMode: AiAssistantManagementModalPageMode) => void;
+};
+
+// Atom definition
+const aiAssistantManagementModalAtom = atom<AiAssistantManagementModalStatus>({
+  isOpened: false,
+  pageMode: AiAssistantManagementModalPageMode.HOME,
+  aiAssistantData: undefined,
+});
+
+// Read-only hook (useAtomValue)
+export const useAiAssistantManagementModalStatus = (): AiAssistantManagementModalStatus => {
+  return useAtomValue(aiAssistantManagementModalAtom);
+};
+
+// Actions hook (useSetAtom + useCallback)
+export const useAiAssistantManagementModalActions = (): AiAssistantManagementModalActions => {
+  const setStatus = useSetAtom(aiAssistantManagementModalAtom);
+
+  const open = useCallback((aiAssistantData?: AiAssistantHasId) => {
+    setStatus({
+      isOpened: true,
+      aiAssistantData,
+      pageMode: aiAssistantData != null
+        ? AiAssistantManagementModalPageMode.HOME
+        : AiAssistantManagementModalPageMode.PAGE_SELECTION_METHOD,
+    });
+  }, [setStatus]);
+
+  const close = useCallback(() => {
+    setStatus({
+      isOpened: false,
+      aiAssistantData: undefined,
+      pageMode: AiAssistantManagementModalPageMode.HOME,
+    });
+  }, [setStatus]);
+
+  const changePageMode = useCallback((pageMode: AiAssistantManagementModalPageMode) => {
+    setStatus(current => ({
+      ...current,
+      pageMode,
+    }));
+  }, [setStatus]);
+
+  return { open, close, changePageMode };
+};

apps/app/src/features/openai/client/stores/ai-assistant.tsx

@@ -7,60 +7,7 @@ import useSWRImmutable from 'swr/immutable';
 import { apiv3Get } from '~/client/util/apiv3-client';
 
 import { type AccessibleAiAssistantsHasId, type AiAssistantHasId } from '../../interfaces/ai-assistant';
-import type { IThreadRelationHasId } from '../../interfaces/thread-relation'; // IThreadHasId を削除
-
-
-/*
-*  useAiAssistantManagementModal
-*/
-export const AiAssistantManagementModalPageMode = {
-  HOME: 'home',
-  SHARE: 'share',
-  PAGES: 'pages',
-  INSTRUCTION: 'instruction',
-  PAGE_SELECTION_METHOD: 'page-selection-method',
-  KEYWORD_SEARCH: 'keyword-search',
-  PAGE_TREE_SELECTION: 'page-tree-selection',
-} as const;
-
-export type AiAssistantManagementModalPageMode = typeof AiAssistantManagementModalPageMode[keyof typeof AiAssistantManagementModalPageMode];
-
-type AiAssistantManagementModalStatus = {
-  isOpened: boolean,
-  pageMode?: AiAssistantManagementModalPageMode,
-  aiAssistantData?: AiAssistantHasId;
-}
-
-type AiAssistantManagementModalUtils = {
-  open(aiAssistantData?: AiAssistantHasId): void
-  close(): void
-  changePageMode(pageType: AiAssistantManagementModalPageMode): void
-}
-
-export const useAiAssistantManagementModal = (
-    status?: AiAssistantManagementModalStatus,
-): SWRResponse<AiAssistantManagementModalStatus, Error> & AiAssistantManagementModalUtils => {
-  const initialStatus = { isOpened: false, pageType: AiAssistantManagementModalPageMode.HOME };
-  const swrResponse = useSWRStatic<AiAssistantManagementModalStatus, Error>('AiAssistantManagementModal', status, { fallbackData: initialStatus });
-
-  return {
-    ...swrResponse,
-    open: useCallback((aiAssistantData) => {
-      swrResponse.mutate({
-        isOpened: true,
-        aiAssistantData,
-        pageMode: aiAssistantData != null
-          ? AiAssistantManagementModalPageMode.HOME
-          : AiAssistantManagementModalPageMode.PAGE_SELECTION_METHOD,
-      });
-    }, [swrResponse]),
-    close: useCallback(() => swrResponse.mutate({ isOpened: false, aiAssistantData: undefined }), [swrResponse]),
-    changePageMode: useCallback((pageMode: AiAssistantManagementModalPageMode) => {
-      swrResponse.mutate({ isOpened: swrResponse.data?.isOpened ?? false, pageMode, aiAssistantData: swrResponse.data?.aiAssistantData });
-    }, [swrResponse]),
-  };
-};
-
+import type { IThreadRelationHasId } from '../../interfaces/thread-relation';
 
 export const useSWRxAiAssistants = (): SWRResponse<AccessibleAiAssistantsHasId, Error> => {
   return useSWRImmutable<AccessibleAiAssistantsHasId>(
@@ -69,7 +16,6 @@ export const useSWRxAiAssistants = (): SWRResponse<AccessibleAiAssistantsHasId,
   );
 };
 
-
 /*
 *  useAiAssistantSidebar
 */