refactor: reorganize AiAssistantManagementEditPages component structure and integrate PageSelectionMethodButtons and SelectablePagePageList

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

@@ -10,6 +10,8 @@ import { usePageSelectModal } from '~/stores/modal';
 import type { SelectedPage } from '../../../../interfaces/selected-page';
 
 import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
+import { PageSelectionMethodButtons } from './PageSelectionMethodButtons'; // Importing for side effects, if needed
+import { SelectablePagePageList } from './SelectablePagePageList';
 import { SelectedPageList } from './SelectedPageList';
 
 
@@ -25,6 +27,8 @@ export const AiAssistantManagementEditPages = (props: Props): JSX.Element => {
 
   const { selectedPages, onSelect, onRemove } = props;
 
+  const pages = selectedPages.map(selectedPageData => selectedPageData.page);
+
   const { open: openPageSelectModal } = usePageSelectModal();
 
   const clickOpenPageSelectModalHandler = useCallback(() => {
@@ -36,22 +40,37 @@ export const AiAssistantManagementEditPages = (props: Props): JSX.Element => {
       <AiAssistantManagementHeader labelTranslationKey="modal_ai_assistant.page_mode_title.pages" />
 
       <ModalBody className="px-4">
-        <p
-          className="text-secondary py-1"
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: t('modal_ai_assistant.edit_page_description', { limitLearnablePageCountPerAssistant }) }}
-        />
-
-        <button
-          type="button"
-          onClick={clickOpenPageSelectModalHandler}
-          className="btn btn-outline-primary w-100 mb-3 d-flex align-items-center justify-content-center"
-        >
-          <span className="material-symbols-outlined me-2">add</span>
-          {t('modal_ai_assistant.add_page_button')}
-        </button>
-
-        <SelectedPageList selectedPages={selectedPages} onRemove={onRemove} />
+        <div className="px-4">
+          <p
+            className="text-secondary"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: t('modal_ai_assistant.edit_page_description', { limitLearnablePageCountPerAssistant }) }}
+          />
+
+          <div className="mb-3">
+            <PageSelectionMethodButtons />
+          </div>
+
+          {/* <button
+            type="button"
+            onClick={clickOpenPageSelectModalHandler}
+            className="btn btn-outline-primary w-100 mb-3 d-flex align-items-center justify-content-center"
+          >
+            <span className="material-symbols-outlined me-2">add</span>
+            {t('modal_ai_assistant.add_page_button')}
+          </button> */}
+
+          {/* <SelectedPageList selectedPages={selectedPages} onRemove={onRemove} /> */}
+
+          <div className="">
+            <SelectablePagePageList
+              method="delete"
+              methodButtonPosition="right"
+              pages={pages}
+              onClickMethodButton={() => {}}
+            />
+          </div>
+        </div>
       </ModalBody>
     </>
   );