Create SelectedPageList.tsx

apps/app/src/features/openai/chat/components/AiChatModal/AiChatModal.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import {
   Collapse,
   Modal, ModalBody, ModalFooter, ModalHeader,
-  UncontrolledTooltip,
+  UncontrolledTooltip, Label,
 } from 'reactstrap';
 
 import { apiv3Post } from '~/client/util/apiv3-client';
@@ -14,6 +14,7 @@ import { toastError } from '~/client/util/toastr';
 import { useGrowiCloudUri } from '~/stores-universal/context';
 import loggerFactory from '~/utils/logger';
 
+import { SelectedPageList } from '../../../client/components/Common/SelectedPageList';
 import { useRagSearchModal } from '../../../client/stores/rag-search';
 import { MessageErrorCode, StreamErrorCode } from '../../../interfaces/message-error';
 
@@ -194,12 +195,11 @@ const AiChatModalSubstance = (): JSX.Element => {
     <>
       <ModalBody className="pb-0 pt-3 pt-lg-4 px-3 px-lg-4">
 
-        <div className="text-muted py-3">
+        <div className="text-muted mb-4">
           ここに設定したアシスタントの説明が入ります。ここに設定したアシスタントの説明が入ります。
         </div>
 
-
-        <div className="mb-8">
+        <div className="mb-4">
           <p>
             アシスタントへの指示
           </p>
@@ -210,6 +210,17 @@ const AiChatModalSubstance = (): JSX.Element => {
           </div>
         </div>
 
+        <div className="mb-4">
+          <div className="d-flex align-items-center mb-2">
+            <Label className="mb-0">参照するページ</Label>
+            <span className="ms-1 fs-5 material-symbols-outlined text-secondary">help</span>
+          </div>
+          <SelectedPageList selectedPages={[
+            { page: { _id: '1', path: '/Project/GROWI/新機能/GROWI AI' }, isIncludeSubPage: true },
+            { page: { _id: '2', path: '/AI導入検討/調査' }, isIncludeSubPage: false },
+          ]}
+          />
+        </div>
 
         <div className="vstack gap-4 pb-4">
           { messageLogs.map(message => (

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

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { useTranslation } from 'react-i18next';
 import {
@@ -8,37 +8,14 @@ import {
 import type { IPageForItem } from '~/interfaces/page';
 import { usePageSelectModal } from '~/stores/modal';
 
+import type { SelectedPage } from '../../../interfaces/selected-page';
 import { useAiAssistantManegementModal } from '../../stores/ai-assistant';
+import { SelectedPageList } from '../Common/SelectedPageList';
 
 import styles from './AiAssistantManegementModal.module.scss';
 
 const moduleClass = styles['grw-ai-assistant-manegement'] ?? '';
 
-
-type SelectedPage = {
-  page: IPageForItem,
-  isIncludeSubPage: boolean,
-}
-
-const SelectedPageList = memo(({ selectedPages }: { selectedPages: SelectedPage[] }): JSX.Element => {
-  const { t } = useTranslation();
-
-  if (selectedPages.length === 0) {
-    return <></>;
-  }
-
-  return (
-    <div className="mb-3">
-      {selectedPages.map(({ page, isIncludeSubPage }) => (
-        <p key={page._id} className="mb-1">
-          <code>{ page.path }</code>
-          {isIncludeSubPage && <span className="badge rounded-pill text-bg-secondary ms-2">{t('Include Subordinated Page')}</span>}
-        </p>
-      ))}
-    </div>
-  );
-});
-
 const AiAssistantManegementModalSubstance = (): JSX.Element => {
   const { open: openPageSelectModal } = usePageSelectModal();
   const [selectedPages, setSelectedPages] = useState<SelectedPage[]>([]);

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

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import type { SelectedPage } from '../../../interfaces/selected-page';
+
+export const SelectedPageList = memo(({ selectedPages }: { selectedPages: SelectedPage[] }): JSX.Element => {
+  const { t } = useTranslation();
+
+  if (selectedPages.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div className="mb-3">
+      {selectedPages.map(({ page, isIncludeSubPage }) => (
+        <p key={page._id} className="mb-1">
+          <code>{ page.path }</code>
+          {isIncludeSubPage && <span className="badge rounded-pill text-bg-secondary ms-2">{t('Include Subordinated Page')}</span>}
+        </p>
+      ))}
+    </div>
+  );
+});

apps/app/src/features/openai/interfaces/selected-page.ts

@@ -0,0 +1,6 @@
+import type { IPageForItem } from '~/interfaces/page';
+
+export type SelectedPage = {
+  page: IPageForItem,
+  isIncludeSubPage: boolean,
+}