From 1bdf6a85e9e3b4c4ed1803729711c7b7123ea5dc Mon Sep 17 00:00:00 2001 From: Taichiro Suzuki Date: Fri, 20 Dec 2024 10:15:09 +0900 Subject: [PATCH] fix --- .../useCaseBuilder/UseCaseBuilderEditPage.tsx | 211 ++++++++++-------- 1 file changed, 112 insertions(+), 99 deletions(-) diff --git a/packages/web/src/pages/useCaseBuilder/UseCaseBuilderEditPage.tsx b/packages/web/src/pages/useCaseBuilder/UseCaseBuilderEditPage.tsx index 92dcfc85..d7e640ba 100644 --- a/packages/web/src/pages/useCaseBuilder/UseCaseBuilderEditPage.tsx +++ b/packages/web/src/pages/useCaseBuilder/UseCaseBuilderEditPage.tsx @@ -1,12 +1,13 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import Card from '../../components/Card'; import Button from '../../components/Button'; +import ButtonIcon from '../../components/ButtonIcon'; import Textarea from '../../components/Textarea'; import { create } from 'zustand'; import RowItem from '../../components/RowItem'; import AppBuilderView from '../../components/useCaseBuilder/UseCaseBuilderView'; import InputText from '../../components/InputText'; -import { PiPlus, PiQuestion, PiTrash, PiEye } from 'react-icons/pi'; +import { PiPlus, PiQuestion, PiTrash, PiEye, PiX } from 'react-icons/pi'; import useMyUseCases from '../../hooks/useCaseBuilder/useMyUseCases'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; import useUseCase from '../../hooks/useCaseBuilder/useUseCase'; @@ -27,15 +28,22 @@ import Select from '../../components/Select'; import Switch from '../../components/Switch'; import { MODELS } from '../../hooks/useModel'; -type MenuItem = { - title: string; - focusColor: string; +type ErrorWithMenu = { + message: string; + menu: string; }; -const ErrorMesage: React.FC<{ message: string }> = (props: { +const ErrorMesage: React.FC<{ message: string; -}) => { - return
  • {props.message}
    • ; + onClick: () => void; +}> = (props: { message: string; onClick: () => void }) => { + return ( +
  • + {props.message} +
    • + ); }; type StateType = { @@ -176,9 +184,13 @@ const UseCaseBuilderEditPage: React.FC = () => { const [isPreview, setIsPreview] = useState(true); // 作成条件を満たしていない場合のエラーメッセージ - const [createErrorMessages, setCreateErrorMessages] = useState([]); + const [createErrorMessages, setCreateErrorMessages] = useState< + ErrorWithMenu[] + >([]); // 更新条件を満たしていない場合のエラーメッセージ - const [updateErrorMessages, setUpdateErrorMessages] = useState([]); + const [updateErrorMessages, setUpdateErrorMessages] = useState< + ErrorWithMenu[] + >([]); const { modelIds: availableModels } = MODELS; @@ -244,49 +256,21 @@ const UseCaseBuilderEditPage: React.FC = () => { }, [useCaseId]); const menu = useMemo(() => { - const base: MenuItem[] = [ - { - title: 'アプリ定義', - focusColor: 'aws-smile', - }, - { - title: '入力例', - focusColor: 'aws-smile', - }, - { - title: 'モデル選択', - focusColor: 'aws-smile', - }, - { - title: 'ファイル添付', - focusColor: 'aws-smile', - }, + const base: string[] = [ + 'アプリ定義', + '入力例', + 'モデル選択', + 'ファイル添付', ]; if (isUpdate) { - return [ - ...base, - { - title: '更新', - focusColor: 'aws-smile', - }, - { - title: '削除', - focusColor: 'red-600', - }, - ]; + return [...base, '更新', '削除']; } else { - return [ - ...base, - { - title: '作成', - focusColor: 'aws-smile', - }, - ]; + return [...base, '作成']; } }, [isUpdate]); - const [currentMenu, setCurrentMenu] = useState(menu[0].title); + const [currentMenu, setCurrentMenu] = useState(menu[0]); // ページタイトルの設定 useEffect(() => { @@ -298,18 +282,26 @@ const UseCaseBuilderEditPage: React.FC = () => { // eslint-disable-next-line no-irregular-whitespace if (title.replace(/[ 　]/g, '') === '') { - tmp.push('タイトルを入力してください'); + tmp.push({ + menu: 'アプリ定義', + message: 'タイトルを入力してください', + }); } // eslint-disable-next-line no-irregular-whitespace if (promptTemplate.replace(/[ 　]/g, '') === '') { - tmp.push('プロンプトテンプレートを入力してください'); + tmp.push({ + menu: 'アプリ定義', + message: 'プロンプトテンプレートを入力してください', + }); } if (placeholders.length === 0 && !fileUpload) { - tmp.push( - '動的な入力を受け付けていないプロンプトテンプレート (Placeholder 及びファイル添付なし) は作成できません' - ); + tmp.push({ + menu: 'アプリ定義', + message: + 'ユースケースがユーザーの入力を受け付けていません。プロンプトテンプレートに placeholder を追加するか、ファイル添付を ON にしてください。', + }); } setCreateErrorMessages(tmp); @@ -325,12 +317,24 @@ const UseCaseBuilderEditPage: React.FC = () => { const tmp = []; if (isDisabledUpdate) { - tmp.push('更新内容がありません'); + tmp.push({ + menu: 'アプリ定義', + message: '更新内容がありません', + }); } setUpdateErrorMessages(tmp); }, [isDisabledUpdate, setUpdateErrorMessages]); + // ページ遷移時に存在しないメニューが表示されないようにする + useEffect(() => { + const idx = menu.indexOf(currentMenu); + + if (idx < 0) { + setCurrentMenu(menu[0]); + } + }, [menu, currentMenu]); + const canCreate = useMemo(() => { return createErrorMessages.length === 0; }, [createErrorMessages]); @@ -444,29 +448,29 @@ const UseCaseBuilderEditPage: React.FC = () => {
    {menu.map((m, idx) => { - let className = - 'cursor-pointer border-b-2 px-2 py-2 text-sm lg:border-b-0 lg:border-r-2 '; - - if (currentMenu === m.title) { - className += [ - 'font-bold', - `text-${m.focusColor}`, - `border-${m.focusColor}`, - ].join(' '); + if (currentMenu === m) { + return ( +
    { + setCurrentMenu(m); + }}> + {m} +
    + ); } else { - className += `text-gray-800 hover:text-${m.focusColor} border-gray-200`; + return ( +
    { + setCurrentMenu(m); + }}> + {m} +
    + ); } - - return ( -
    { - setCurrentMenu(m.title); - }}> - {m.title} -
    - ); })}
    @@ -508,7 +512,7 @@ const UseCaseBuilderEditPage: React.FC = () => { setIsDisabledUpdate(false); }} placeholder="プロントテンプレートの書き方については、「ヘルプ」か「サンプル集」をご覧ください。" - hint="動的な入力を受け付けていないプロンプトテンプレート (Placeholder 及びファイル添付なし) は作成できません。" + hint="ユーザーの入力を受け付けないユースケースは作成できません。プロンプトテンプレートに Placeholder を定義するか、ファイル添付を ON にしてください。" required /> @@ -521,18 +525,26 @@ const UseCaseBuilderEditPage: React.FC = () => { return (
    - { - setInputExample(idx, { - ...inputExample, - title: v, - }); - setIsDisabledUpdate(false); - }} - /> +
    + { + setInputExample(idx, { + ...inputExample, + title: v, + }); + setIsDisabledUpdate(false); + }} + /> + { + removeInputExample(idx); + }}> + + +
    {textFormItems.map((item, itemIndex) => { return ( @@ -562,17 +574,6 @@ const UseCaseBuilderEditPage: React.FC = () => { /> ); })} - -
    - -
    ); @@ -674,9 +675,15 @@ const UseCaseBuilderEditPage: React.FC = () => {
    作成可能なユースケースの条件を満たしていません。以下条件を全て満たしてください。
    -
      +
        {createErrorMessages.map((m, idx) => ( - + { + setCurrentMenu(m.menu); + }} + /> ))}
      @@ -701,7 +708,13 @@ const UseCaseBuilderEditPage: React.FC = () => {
        {[...createErrorMessages, ...updateErrorMessages].map( (m, idx) => ( - + { + setCurrentMenu(m.menu); + }} + /> ) )}