impl SelectedPageList

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

@@ -1,10 +1,11 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { useTranslation } from 'react-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input,
 } from 'reactstrap';
 
+import type { IPageForItem } from '~/interfaces/page';
 import { usePageSelectModal } from '~/stores/modal';
 
 import { useAiAssistantManegementModal } from '../../stores/ai-assistant';
@@ -14,12 +15,35 @@ import styles from './AiAssistantManegementModal.module.scss';
 const moduleClass = styles['grw-ai-assistant-manegement'] ?? '';
 
 
+const SelectedPageList = ({ selectedPages }: { selectedPages: IPageForItem[] }): JSX.Element => {
+  if (selectedPages.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div className="mb-3">
+      {selectedPages.map(page => (
+        <p key={page._id} className="mb-1">
+          <code>{ page.path }</code>
+        </p>
+      ))}
+    </div>
+  );
+};
+
+
 const AiAssistantManegementModalSubstance = (): JSX.Element => {
   const { open: openPageSelectModal } = usePageSelectModal();
+  const [selectedPages, setSelectedPages] = useState<IPageForItem[]>([]);
 
   const onClickOpenPageSelectModalButton = useCallback(() => {
-    openPageSelectModal();
-  }, [openPageSelectModal]);
+    const onSelected = (page: IPageForItem) => {
+      setSelectedPages([...selectedPages, page]);
+    };
+
+    openPageSelectModal({ onSelected });
+  }, [openPageSelectModal, selectedPages]);
+
 
   return (
     <div className="px-4">
@@ -70,6 +94,7 @@ const AiAssistantManegementModalSubstance = (): JSX.Element => {
               <Label className="mb-0">参照するページ</Label>
               <span className="ms-1 fs-5 material-symbols-outlined text-secondary">help</span>
             </div>
+            <SelectedPageList selectedPages={selectedPages} />
             <button
               type="button"
               className="btn btn-outline-primary d-flex align-items-center gap-1"