refactor: update AiAssistantManagementHeader to use labelTranslationKey for dynamic translations

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

@@ -18,7 +18,7 @@ export const AiAssistantManagementEditInstruction = (props: Props): JSX.Element
 
   return (
     <>
-      <AiAssistantManagementHeader />
+      <AiAssistantManagementHeader labelTranslationKey="modal_ai_assistant.page_mode_title.instruction" />
 
       <ModalBody className="px-4">
         <p className="text-secondary py-1">

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

@@ -33,7 +33,7 @@ export const AiAssistantManagementEditPages = (props: Props): JSX.Element => {
 
   return (
     <>
-      <AiAssistantManagementHeader />
+      <AiAssistantManagementHeader labelTranslationKey="modal_ai_assistant.page_mode_title.pages" />
 
       <ModalBody className="px-4">
         <p

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

@@ -98,7 +98,7 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
 
   return (
     <>
-      <AiAssistantManagementHeader />
+      <AiAssistantManagementHeader labelTranslationKey="modal_ai_assistant.page_mode_title.share" />
 
       <ModalBody className="px-4">
         <div className="form-check form-switch mb-4">

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

@@ -6,7 +6,7 @@ import { ModalHeader } from 'reactstrap';
 import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../../stores/ai-assistant';
 
 type Props = {
-  label?: string;
+  labelTranslationKey: string;
   backToPageMode?: AiAssistantManagementModalPageMode;
   hideBackButton?: boolean;
   backButtonColor?: 'primary' | 'secondary';
@@ -14,11 +14,11 @@ type Props = {
 
 export const AiAssistantManagementHeader = (props: Props): JSX.Element => {
   const {
-    label, backToPageMode, hideBackButton, backButtonColor = 'primary',
+    labelTranslationKey, backToPageMode, hideBackButton, backButtonColor = 'primary',
   } = props;
 
   const { t } = useTranslation();
-  const { data, close, changePageMode } = useAiAssistantManagementModal();
+  const { close, changePageMode } = useAiAssistantManagementModal();
 
   return (
     <ModalHeader
@@ -40,7 +40,7 @@ export const AiAssistantManagementHeader = (props: Props): JSX.Element => {
             </button>
           )
         }
-        <span className="fw-bold">{label ?? t(`modal_ai_assistant.page_mode_title.${data?.pageMode}`)}</span>
+        <span className="fw-bold">{t(labelTranslationKey)}</span>
       </div>
     </ModalHeader>
   );

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

@@ -119,7 +119,7 @@ export const AiAssistantManagementHome = (props: Props): JSX.Element => {
     <>
       <AiAssistantManagementHeader
         hideBackButton
-        label={t(shouldEdit ? 'modal_ai_assistant.header.update_assistant' : 'modal_ai_assistant.header.add_new_assistant')}
+        labelTranslationKey={shouldEdit ? 'modal_ai_assistant.header.update_assistant' : 'modal_ai_assistant.header.add_new_assistant'}
       />
 
       <div className="px-4">

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

@@ -44,7 +44,7 @@ export const AiAssistantManagementPageSelectionMethod = (): JSX.Element => {
     <>
       <AiAssistantManagementHeader
         hideBackButton={isNewAiAssistant}
-        label={t(isNewAiAssistant ? 'modal_ai_assistant.header.add_new_assistant' : 'modal_ai_assistant.header.update_assistant')}
+        labelTranslationKey={isNewAiAssistant ? 'modal_ai_assistant.header.add_new_assistant' : 'modal_ai_assistant.header.update_assistant'}
       />
 
       <ModalBody className="px-4">