Impl KnowledgeAssistantManegementModal

apps/app/src/components/Layout/BasicLayout.tsx

@@ -35,6 +35,10 @@ const DeleteBookmarkFolderModal = dynamic(
 );
 const SearchModal = dynamic(() => import('../../features/search/client/components/SearchModal'), { ssr: false });
 const AiChatModal = dynamic(() => import('~/features/openai/chat/components/AiChatModal').then(mod => mod.AiChatModal), { ssr: false });
+const KnowledgeAssistantManegementModal = dynamic(
+  () => import('~/features/openai/client/components/KnowledgeAssistant/KnowledgeAssistantManegementModal')
+    .then(mod => mod.KnowledgeAssistantManegementModal), { ssr: false },
+);
 
 type Props = {
   children?: ReactNode
@@ -68,6 +72,7 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
       <PutbackPageModal />
       <SearchModal />
       <AiChatModal />
+      <KnowledgeAssistantManegementModal />
 
       <PagePresentationModal />
       <HotkeysManager />

apps/app/src/features/openai/client/components/KnowledgeAssistant/KnowledgeAssistantManegementModal.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+
+import { useKnowledgeAssistantModal } from '../../stores/knowledge-assistant';
+
+const KnowledgeAssistantManegementModalSubstance = (): JSX.Element => {
+  return (
+    <>
+      <ModalBody>
+        TODO: https://redmine.weseek.co.jp/issues/159180
+      </ModalBody>
+    </>
+  );
+};
+
+
+export const KnowledgeAssistantManegementModal = (): JSX.Element => {
+
+  const { t } = useTranslation();
+
+  const { data: knowledgeAssistantModalData, close: closeKnowledgeAssistantModal } = useKnowledgeAssistantModal();
+
+  const isOpened = knowledgeAssistantModalData?.isOpened ?? false;
+
+  return (
+    <Modal size="lg" isOpen={isOpened} toggle={closeKnowledgeAssistantModal} scrollable>
+
+      <ModalHeader tag="h4" toggle={closeKnowledgeAssistantModal} className="pe-4">
+        <span className="growi-custom-icons growi-ai-chat-icon me-3 fs-4">knowledge_assistant</span>
+        <span className="fw-bold">新規アシスタントの追加</span>
+        <span className="fs-5 text-body-secondary ms-3">{t('modal_aichat.title_beta_label')}</span>
+      </ModalHeader>
+
+      { isOpened && (
+        <KnowledgeAssistantManegementModalSubstance />
+      ) }
+
+    </Modal>
+  );
+};

apps/app/src/features/openai/client/components/Sidebar/KnowledgeAssistantSubstance.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 
+import { useKnowledgeAssistantModal } from '../../stores/knowledge-assistant';
+
 export const KnowledgeAssistantContent = (): JSX.Element => {
+  const { open } = useKnowledgeAssistantModal();
+
   return (
     <div>
-      <button type="button" className="btn btn-primary">
+      <button type="button" className="btn btn-primary" onClick={open}>
         アシスタントを追加する
       </button>
     </div>

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

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+
+import { useSWRStatic } from '@growi/core/dist/swr';
+import type { SWRResponse } from 'swr';
+
+
+type KnowledgeAssistantMoldalStatus = {
+  isOpened: boolean,
+}
+
+type KnowledgeAssistantUtils = {
+  open(): void
+  close(): void
+}
+export const useKnowledgeAssistantModal = (
+    status?: KnowledgeAssistantMoldalStatus,
+): SWRResponse<KnowledgeAssistantMoldalStatus, Error> & KnowledgeAssistantUtils => {
+  const initialStatus = { isOpened: false };
+  const swrResponse = useSWRStatic<KnowledgeAssistantMoldalStatus, Error>('KnowledgeAssistantModal', status, { fallbackData: initialStatus });
+
+  return {
+    ...swrResponse,
+    open: useCallback(() => {
+      swrResponse.mutate({ isOpened: true });
+    }, [swrResponse]),
+    close: useCallback(() => swrResponse.mutate({ isOpened: false }), [swrResponse]),
+  };
+};