Add remove functionality for selected pages in AiAssistantManagementModal

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

@@ -32,6 +32,11 @@ const AiAssistantManegementModalSubstance = (): JSX.Element => {
   }, [openPageSelectModal, selectedPages]);
 
 
+  const clickRmoveSelectedPageHandler = useCallback((pageId: string) => {
+    setSelectedPages(selectedPages.filter(selectedPage => selectedPage.page._id !== pageId));
+  }, [selectedPages]);
+
+
   return (
     <div className="px-4">
       <ModalBody>
@@ -81,7 +86,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} />
+            <SelectedPageList selectedPages={selectedPages} onRemove={clickRmoveSelectedPageHandler} />
             <button
               type="button"
               className="btn btn-outline-primary d-flex align-items-center gap-1"

apps/app/src/features/openai/client/components/Common/SelectedPageList.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import type { SelectedPage } from '../../../interfaces/selected-page';
 
-export const SelectedPageList = memo(({ selectedPages }: { selectedPages: SelectedPage[] }): JSX.Element => {
+export const SelectedPageList = memo(({ selectedPages, onRemove }: { selectedPages: SelectedPage[], onRemove?: (pageId?: string) => void }): JSX.Element => {
   const { t } = useTranslation();
 
   if (selectedPages.length === 0) {
@@ -14,10 +14,15 @@ export const SelectedPageList = memo(({ selectedPages }: { selectedPages: Select
   return (
     <div className="mb-3">
       {selectedPages.map(({ page, isIncludeSubPage }) => (
-        <p key={page._id} className="mb-1">
+        <div key={page._id} className="mb-1 d-flex align-items-center">
           <code>{ page.path }</code>
           {isIncludeSubPage && <span className="badge rounded-pill text-bg-secondary ms-2">{t('Include Subordinated Page')}</span>}
-        </p>
+          {onRemove != null && page._id != null && page._id && (
+            <button className="btn border-0 " type="button" onClick={() => onRemove(page._id)}>
+              <span className="fs-5 material-symbols-outlined text-secondary">delete</span>
+            </button>
+          )}
+        </div>
       ))}
     </div>
   );