Refactor AiAssistantManagementHome to handle name and description changes with new props

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

@@ -11,12 +11,25 @@ import { useCurrentUser } from '~/stores-universal/context';
 import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../../stores/ai-assistant';
 
 type Props = {
+  name: string;
+  description: string;
   instruction: string;
   shareScope: AiAssistantShareScope
+  onNameChange: (value: string) => void;
+  onDescriptionChange: (value: string) => void;
+  onCreateAiAssistant: () => Promise<void>
 }
 
 export const AiAssistantManagementHome = (props: Props): JSX.Element => {
-  const { instruction, shareScope } = props;
+  const {
+    name,
+    description,
+    instruction,
+    shareScope,
+    onNameChange,
+    onDescriptionChange,
+    onCreateAiAssistant,
+  } = props;
 
   const { t } = useTranslation();
   const { data: currentUser } = useCurrentUser();
@@ -44,6 +57,8 @@ export const AiAssistantManagementHome = (props: Props): JSX.Element => {
               placeholder="アシスタント名を入力"
               bsSize="lg"
               className="border-0 border-bottom border-2 px-0 rounded-0"
+              value={name}
+              onChange={e => onNameChange(e.target.value)}
             />
           </div>
 
@@ -56,6 +71,8 @@ export const AiAssistantManagementHome = (props: Props): JSX.Element => {
               type="textarea"
               placeholder="内容や用途のメモを表示させることができます"
               rows="4"
+              value={description}
+              onChange={e => onDescriptionChange(e.target.value)}
             />
             <small className="text-secondary d-block mt-2">
               メモの内容はアシスタントの処理に影響しません。
@@ -105,7 +122,7 @@ export const AiAssistantManagementHome = (props: Props): JSX.Element => {
 
         <ModalFooter>
           <button type="button" className="btn btn-outline-secondary" onClick={() => {}}>キャンセル</button>
-          <button type="button" className="btn btn-primary" onClick={() => {}}>アシスタントを作成する</button>
+          <button type="button" className="btn btn-primary" onClick={onCreateAiAssistant}>アシスタントを作成する</button>
         </ModalFooter>
       </div>
     </>

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

@@ -32,6 +32,8 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
   const pageMode = aiAssistantManagementModalData?.pageMode ?? AiAssistantManagementModalPageMode.HOME;
 
   // States
+  const [name, setName] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
   const [selectedShareScope, setSelectedShareScope] = useState<AiAssistantShareScope>(AiAssistantShareScope.OWNER);
   const [selectedAccessScope, setSelectedAccessScope] = useState<AiAssistantAccessScope>(AiAssistantAccessScope.OWNER);
   const [selectedUserGroupsForAccessScope, setSelectedUserGroupsForAccessScope] = useState<PopulatedGrantedGroup[]>([]);
@@ -39,28 +41,40 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
   const [selectedPages, setSelectedPages] = useState<SelectedPage[]>([]);
   const [instruction, setInstruction] = useState<string>(t('modal_ai_assistant.default_instruction'));
 
-  // Functions
-  const clickCreateAiAssistantHandler = useCallback(async() => {
+
+  /*
+  *  For AiAssistantManagementHome methods
+  */
+  const changeNameHandler = useCallback((value: string) => {
+    setName(value);
+  }, []);
+
+  const changeDescriptionHandler = useCallback((value: string) => {
+    setDescription(value);
+  }, []);
+
+  const createAiAssistantHandler = useCallback(async() => {
     try {
       const pagePathPatterns = selectedPages
         .map(selectedPage => (selectedPage.isIncludeSubPage ? `${selectedPage.page.path}/*` : selectedPage.page.path))
         .filter((path): path is string => path !== undefined && path !== null);
 
       await createAiAssistant({
-        name: 'test',
-        description: 'test',
+        name,
+        description,
         additionalInstruction: instruction,
         pagePathPatterns,
-        shareScope: 'publicOnly',
-        accessScope: 'publicOnly',
+        shareScope: selectedShareScope,
+        accessScope: selectedAccessScope,
       });
+
       toastSuccess('アシスタントを作成しました');
     }
     catch (err) {
       toastError('アシスタントの作成に失敗しました');
       logger.error(err);
     }
-  }, [instruction, selectedPages]);
+  }, [description, instruction, name, selectedAccessScope, selectedPages, selectedShareScope]);
 
 
   /*
@@ -126,8 +140,13 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
       <TabContent activeTab={pageMode}>
         <TabPane tabId={AiAssistantManagementModalPageMode.HOME}>
           <AiAssistantManagementHome
+            name={name}
+            description={description}
             shareScope={selectedShareScope}
             instruction={instruction}
+            onNameChange={changeNameHandler}
+            onDescriptionChange={changeDescriptionHandler}
+            onCreateAiAssistant={createAiAssistantHandler}
           />
         </TabPane>