refactor: integrate AiAssistantManagementHeader into AiAssistantManagementHome for improved header management

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

@@ -19,6 +19,7 @@ export const AiAssistantManagementHeader = (props: Props): JSX.Element => {
 
   return (
     <ModalHeader
+      tag="h4"
       close={(
         <button type="button" className="btn p-0" onClick={close}>
           <span className="material-symbols-outlined">close</span>
@@ -26,12 +27,17 @@ export const AiAssistantManagementHeader = (props: Props): JSX.Element => {
       )}
     >
       <div className="d-flex align-items-center">
-        { !hideBackButton && (
-          <button type="button" className="btn p-0 me-3" onClick={() => changePageMode(backToPageMode ?? AiAssistantManagementModalPageMode.HOME)}>
-            <span className="material-symbols-outlined text-primary">chevron_left</span>
-          </button>
-        )}
-        <span>{t(`modal_ai_assistant.page_mode_title.${data?.pageMode}`)}</span>
+        { hideBackButton
+          ? (
+            <span className="growi-custom-icons growi-ai-assistant-icon me-3 fs-4">growi_ai</span>
+          )
+          : (
+            <button type="button" className="btn p-0 me-3" onClick={() => changePageMode(backToPageMode ?? AiAssistantManagementModalPageMode.HOME)}>
+              <span className="material-symbols-outlined text-primary">chevron_left</span>
+            </button>
+          )
+        }
+        <span className='fw-bold'>{label ?? t(`modal_ai_assistant.page_mode_title.${data?.pageMode}`)}</span>
       </div>
     </ModalHeader>
   );

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

@@ -14,6 +14,7 @@ import { useCurrentUser, useLimitLearnablePageCountPerAssistant } from '~/stores
 import type { SelectedPage } from '../../../../interfaces/selected-page';
 import { determineShareScope } from '../../../../utils/determine-share-scope';
 import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../../stores/ai-assistant';
+import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
 
 import { ShareScopeWarningModal } from './ShareScopeWarningModal';
 
@@ -116,10 +117,10 @@ export const AiAssistantManagementHome = (props: Props): JSX.Element => {
 
   return (
     <>
-      <ModalHeader tag="h4" toggle={closeAiAssistantManagementModal} className="pe-4">
-        <span className="growi-custom-icons growi-ai-assistant-icon me-3 fs-4">growi_ai</span>
-        <span className="fw-bold">{t(shouldEdit ? 'modal_ai_assistant.header.update_assistant' : 'modal_ai_assistant.header.add_new_assistant')}</span>
-      </ModalHeader>
+      <AiAssistantManagementHeader
+        hideBackButton
+        label={t(shouldEdit ? 'modal_ai_assistant.header.update_assistant' : 'modal_ai_assistant.header.add_new_assistant')}
+      />
 
       <div className="px-4">
         <ModalBody>