Shun Miyazawa 1 год назад
Родитель
Сommit
4e709dfb61

+ 3 - 3
apps/app/src/components/Layout/BasicLayout.tsx

@@ -35,9 +35,9 @@ const DeleteBookmarkFolderModal = dynamic(
 );
 const SearchModal = dynamic(() => import('../../features/search/client/components/SearchModal'), { ssr: false });
 const AiChatModal = dynamic(() => import('~/features/openai/chat/components/AiChatModal').then(mod => mod.AiChatModal), { ssr: false });
-const AiAssistantManegementModal = dynamic(
+const AiAssistantManagementModal = dynamic(
   () => import('~/features/openai/client/components/AiAssistant/AiAssistantManegementModal')
-    .then(mod => mod.AiAssistantManegementModal), { ssr: false },
+    .then(mod => mod.AiAssistantManagementModal), { ssr: false },
 );
 const PageSelectModal = dynamic(() => import('~/client/components/PageSelectModal/PageSelectModal').then(mod => mod.PageSelectModal), { ssr: false });
 
@@ -74,7 +74,7 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
       <PageSelectModal />
       <SearchModal />
       <AiChatModal />
-      <AiAssistantManegementModal />
+      <AiAssistantManagementModal />
 
       <PagePresentationModal />
       <HotkeysManager />

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

@@ -1,9 +1,9 @@
 import { ModalHeader } from 'reactstrap';
 
-import { useAiAssistantManegementModal, AiAssistantManegementModalPageMode } from '../../../stores/ai-assistant';
+import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../../stores/ai-assistant';
 
 export const AiAssistantManagementHeader = (): JSX.Element => {
-  const { close, changePageMode } = useAiAssistantManegementModal();
+  const { close, changePageMode } = useAiAssistantManagementModal();
 
   return (
     <ModalHeader
@@ -14,7 +14,7 @@ export const AiAssistantManagementHeader = (): JSX.Element => {
       )}
     >
       <div className="d-flex align-items-center">
-        <button type="button" className="btn p-0 me-3" onClick={() => changePageMode(AiAssistantManegementModalPageMode.HOME)}>
+        <button type="button" className="btn p-0 me-3" onClick={() => changePageMode(AiAssistantManagementModalPageMode.HOME)}>
           <span className="material-symbols-outlined text-primary">chevron_left</span>
         </button>
         <span>アシスタントへの指示</span>

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

@@ -4,7 +4,7 @@ import {
   ModalHeader, ModalBody, ModalFooter, Input,
 } from 'reactstrap';
 
-import { useAiAssistantManegementModal, AiAssistantManegementModalPageMode } from '../../../stores/ai-assistant';
+import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../../stores/ai-assistant';
 
 type Props = {
   instruction: string;
@@ -13,11 +13,11 @@ type Props = {
 export const AiAssistantManagementHome = (props: Props): JSX.Element => {
   const { instruction } = props;
 
-  const { close: closeAiAssistantManegementModal, changePageMode } = useAiAssistantManegementModal();
+  const { close: closeAiAssistantManagementModal, changePageMode } = useAiAssistantManagementModal();
 
   return (
     <>
-      <ModalHeader tag="h4" toggle={closeAiAssistantManegementModal} className="pe-4">
+      <ModalHeader tag="h4" toggle={closeAiAssistantManagementModal} className="pe-4">
         <span className="growi-custom-icons growi-ai-assistant-icon me-3 fs-4">ai_assistant</span>
         <span className="fw-bold">新規アシスタントの追加</span> {/* TODO i18n */}
       </ModalHeader>
@@ -73,7 +73,7 @@ export const AiAssistantManagementHome = (props: Props): JSX.Element => {
 
             <button
               type="button"
-              onClick={() => { changePageMode(AiAssistantManegementModalPageMode.INSTRUCTION) }}
+              onClick={() => { changePageMode(AiAssistantManagementModalPageMode.INSTRUCTION) }}
               className="btn w-100 d-flex justify-content-between align-items-center py-3 mb-2 border-0"
             >
               <span className="fw-normal">アシスタントへの指示</span>

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

@@ -10,7 +10,7 @@ import loggerFactory from '~/utils/logger';
 
 import type { SelectedPage } from '../../../interfaces/selected-page';
 import { createAiAssistant } from '../../services/ai-assistant';
-import { useAiAssistantManegementModal, AiAssistantManegementModalPageMode } from '../../stores/ai-assistant';
+import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../stores/ai-assistant';
 import { SelectedPageList } from '../Common/SelectedPageList';
 
 import { AiAssistantManagementEditInstruction } from './AiAssistantManagementModal/AiAssistantManagementEditInstruction';
@@ -18,17 +18,17 @@ import { AiAssistantManagementHome } from './AiAssistantManagementModal/AiAssist
 
 import styles from './AiAssistantManegementModal.module.scss';
 
-const moduleClass = styles['grw-ai-assistant-manegement'] ?? '';
+const moduleClass = styles['grw-ai-assistant-management'] ?? '';
 
 const logger = loggerFactory('growi:openai:client:components:AiAssistantManegementModal');
 
-const AiAssistantManegementModalSubstance = (): JSX.Element => {
+const AiAssistantManagementModalSubstance = (): JSX.Element => {
   // Hooks
   const { t } = useTranslation();
   const { open: openPageSelectModal } = usePageSelectModal();
-  const { data: aiAssistantManegementModalData } = useAiAssistantManegementModal();
+  const { data: aiAssistantManagementModalData } = useAiAssistantManagementModal();
 
-  const pageMode = aiAssistantManegementModalData?.pageMode ?? AiAssistantManegementModalPageMode.HOME;
+  const pageMode = aiAssistantManagementModalData?.pageMode ?? AiAssistantManagementModalPageMode.HOME;
 
   // States
   const [selectedPages, setSelectedPages] = useState<SelectedPage[]>([]);
@@ -86,13 +86,13 @@ const AiAssistantManegementModalSubstance = (): JSX.Element => {
 
   return (
     <>
-      {pageMode === AiAssistantManegementModalPageMode.HOME && (
+      {pageMode === AiAssistantManagementModalPageMode.HOME && (
         <AiAssistantManagementHome
           instruction={instruction}
         />
       )}
 
-      {pageMode === AiAssistantManegementModalPageMode.INSTRUCTION && (
+      {pageMode === AiAssistantManagementModalPageMode.INSTRUCTION && (
         <AiAssistantManagementEditInstruction
           instruction={instruction}
           onChange={changeInstructionHandler}
@@ -205,15 +205,15 @@ const AiAssistantManegementModalSubstance = (): JSX.Element => {
 };
 
 
-export const AiAssistantManegementModal = (): JSX.Element => {
-  const { data: aiAssistantManegementModalData, close: closeAiAssistantManegementModal } = useAiAssistantManegementModal();
+export const AiAssistantManagementModal = (): JSX.Element => {
+  const { data: aiAssistantManagementModalData, close: closeAiAssistantManagementModal } = useAiAssistantManagementModal();
 
-  const isOpened = aiAssistantManegementModalData?.isOpened ?? false;
+  const isOpened = aiAssistantManagementModalData?.isOpened ?? false;
 
   return (
-    <Modal size="lg" isOpen={isOpened} toggle={closeAiAssistantManegementModal} className={moduleClass} scrollable>
+    <Modal size="lg" isOpen={isOpened} toggle={closeAiAssistantManagementModal} className={moduleClass} scrollable>
       { isOpened && (
-        <AiAssistantManegementModalSubstance />
+        <AiAssistantManagementModalSubstance />
       ) }
     </Modal>
   );

+ 2 - 2
apps/app/src/features/openai/client/components/AiAssistant/Sidebar/AiAssistantSubstance.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { useAiAssistantManegementModal } from '../../../stores/ai-assistant';
+import { useAiAssistantManagementModal } from '../../../stores/ai-assistant';
 
 export const AiAssistantContent = (): JSX.Element => {
-  const { open } = useAiAssistantManegementModal();
+  const { open } = useAiAssistantManagementModal();
 
   return (
     <div>

+ 12 - 12
apps/app/src/features/openai/client/stores/ai-assistant.tsx

@@ -3,35 +3,35 @@ import { useCallback } from 'react';
 import { useSWRStatic } from '@growi/core/dist/swr';
 import type { SWRResponse } from 'swr';
 
-export const AiAssistantManegementModalPageMode = {
+export const AiAssistantManagementModalPageMode = {
   HOME: 'home',
   INSTRUCTION: 'instruction',
 } as const;
 
-type AiAssistantManegementModalPageMode = typeof AiAssistantManegementModalPageMode[keyof typeof AiAssistantManegementModalPageMode];
+type AiAssistantManagementModalPageMode = typeof AiAssistantManagementModalPageMode[keyof typeof AiAssistantManagementModalPageMode];
 
-type AiAssistantManegementModalStatus = {
+type AiAssistantManagementModalStatus = {
   isOpened: boolean,
-  pageMode?: AiAssistantManegementModalPageMode,
+  pageMode?: AiAssistantManagementModalPageMode,
 }
 
-type AiAssistantManegementModalUtils = {
+type AiAssistantManagementModalUtils = {
   open(): void
   close(): void
-  changePageMode(pageType: AiAssistantManegementModalPageMode): void
+  changePageMode(pageType: AiAssistantManagementModalPageMode): void
 }
 
-export const useAiAssistantManegementModal = (
-    status?: AiAssistantManegementModalStatus,
-): SWRResponse<AiAssistantManegementModalStatus, Error> & AiAssistantManegementModalUtils => {
-  const initialStatus = { isOpened: false, pageType: AiAssistantManegementModalPageMode.HOME };
-  const swrResponse = useSWRStatic<AiAssistantManegementModalStatus, Error>('AiAssistantManegementModal', status, { fallbackData: initialStatus });
+export const useAiAssistantManagementModal = (
+    status?: AiAssistantManagementModalStatus,
+): SWRResponse<AiAssistantManagementModalStatus, Error> & AiAssistantManagementModalUtils => {
+  const initialStatus = { isOpened: false, pageType: AiAssistantManagementModalPageMode.HOME };
+  const swrResponse = useSWRStatic<AiAssistantManagementModalStatus, Error>('AiAssistantManagementModal', status, { fallbackData: initialStatus });
 
   return {
     ...swrResponse,
     open: useCallback(() => { swrResponse.mutate({ isOpened: true }) }, [swrResponse]),
     close: useCallback(() => swrResponse.mutate({ isOpened: false }), [swrResponse]),
-    changePageMode: useCallback((pageMode: AiAssistantManegementModalPageMode) => {
+    changePageMode: useCallback((pageMode: AiAssistantManagementModalPageMode) => {
       swrResponse.mutate({ isOpened: swrResponse.data?.isOpened ?? false, pageMode });
     }, [swrResponse]),
   };