Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@tbrandaws
tbrandaws committed Dec 3, 2024
1 parent 4b44220 commit 86884b8
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 15 deletions.
4 changes: 3 additions & 1 deletion packages/cdk/lambda/useCaseBuilder/useCaseBuilderRepository.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export const createUseCase = async (
description: content.description,
promptTemplate: content.promptTemplate,
inputExamples: content.inputExamples,
fixedModelId: content.fixedModelId,
isShared: false,
};

Expand Down Expand Up @@ -257,12 +258,13 @@ export const updateUseCase = async (
dataType: useCaseInTable.dataType,
},
UpdateExpression:
'set title = :title, promptTemplate = :promptTemplate, description = :description, inputExamples = :inputExamples',
'set title = :title, promptTemplate = :promptTemplate, description = :description, inputExamples = :inputExamples, fixedModelId = :fixedModelId',
ExpressionAttributeValues: {
':title': content.title,
':promptTemplate': content.promptTemplate,
':description': content.description ?? '',
':inputExamples': content.inputExamples ?? [],
':fixedModelId': content.fixedModelId ?? '',
},
})
);
Expand Down
1 change: 1 addition & 0 deletions packages/types/src/useCaseBuilder.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export type UseCaseContent = {
description?: string;
promptTemplate: string;
inputExamples?: UseCaseInputExample[];
fixedModelId?: string;
};

// Table に記録されている内容
Expand Down
30 changes: 20 additions & 10 deletions packages/web/src/components/useCaseBuilder/UseCaseBuilderView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ type Props = {
promptTemplate: string;
description?: string;
inputExamples?: UseCaseInputExample[];
fixedModelId: string;
isLoading?: boolean;
} & (
| {
Expand Down Expand Up @@ -93,7 +94,13 @@ const UseCaseBuilderView: React.FC<Props> = (props) => {
postChat,
clear: clearChat,
} = useChat(pathname);
const modelId = getModelId();
const modelId = useMemo(() => {
if (props.fixedModelId !== '') {
return props.fixedModelId;
} else {
return getModelId();
}
}, [getModelId, props.fixedModelId]);
const { modelIds: availableModels } = MODELS;
const { setTypingTextInput, typingTextOutput } = useTyping(loading);
const { updateRecentUseUseCase } = useMyUseCases();
Expand Down Expand Up @@ -214,15 +221,18 @@ const UseCaseBuilderView: React.FC<Props> = (props) => {
<div className="pb-4 text-sm text-gray-600">{props.description}</div>
)}

<div className="mb-2 flex w-full flex-col justify-between sm:flex-row">
<Select
value={modelId}
onChange={setModelId}
options={availableModels.map((m) => {
return { value: m, label: m };
})}
/>
</div>
{props.fixedModelId === '' && (
<div className="mb-2 flex w-full flex-col justify-between sm:flex-row">
<Select
value={modelId}
onChange={setModelId}
options={availableModels.map((m) => {
return { value: m, label: m };
})}
/>
</div>
)}

{props.isLoading && (
<div className="my-3 flex flex-col gap-3">
<Skeleton className="h-28" />
Expand Down
3 changes: 3 additions & 0 deletions packages/web/src/hooks/useCaseBuilder/useMyUseCases.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const useMyUseCases = () => {
promptTemplate: string;
description?: string;
inputExamples?: UseCaseInputExample[];
fixedModelId?: string;
}) => {
return createUseCase(params).finally(() => {
mutateMyUseCases();
Expand All @@ -61,6 +62,7 @@ const useMyUseCases = () => {
promptTemplate: string;
description?: string;
inputExamples?: UseCaseInputExample[];
fixedModelId?: string;
}) => {
// 一覧の更新
const index = findIndex(params.useCaseId);
Expand All @@ -80,6 +82,7 @@ const useMyUseCases = () => {
promptTemplate: params.promptTemplate,
description: params.description,
inputExamples: params.inputExamples,
fixedModelId: params.fixedModelId,
}).finally(() => {
mutateMyUseCases();
mutateFavoriteUseCases();
Expand Down
73 changes: 70 additions & 3 deletions packages/web/src/pages/useCaseBuilder/UseCaseBuilderEditPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ import {
getItemsFromPlaceholders,
} from '../../utils/UseCaseBuilderUtils';
import usePageTitle from '../../hooks/usePageTitle';
import Select from '../../components/Select';
import Switch from '../../components/Switch';
import { MODELS } from '../../hooks/useModel';

type StateType = {
useCaseId: string | null;
Expand All @@ -38,6 +41,8 @@ type StateType = {
removeInputExample: (index: number) => void;
setInputExample: (index: number, inputExample: UseCaseInputExample) => void;
setInputExamples: (inputExamples: UseCaseInputExample[]) => void;
fixedModelId: string;
setFixedModelId: (m: string) => void;
clear: () => void;
};

Expand All @@ -47,6 +52,7 @@ const useUseCaseBuilderEditPageState = create<StateType>((set, get) => {
description: '',
promptTemplate: '',
inputExamples: [],
fixedModelId: '',
};
return {
...INIT_STATE,
Expand Down Expand Up @@ -97,6 +103,11 @@ const useUseCaseBuilderEditPageState = create<StateType>((set, get) => {
inputExamples: inputExamples,
}));
},
setFixedModelId: (m: string) => {
set(() => ({
fixedModelId: m,
}));
},
clear: () => {
set(INIT_STATE);
},
Expand All @@ -122,10 +133,13 @@ const UseCaseBuilderEditPage: React.FC = () => {
setInputExample,
setInputExamples,
removeInputExample,
fixedModelId,
setFixedModelId,
clear,
} = useUseCaseBuilderEditPageState();

const { useCase, isLoading } = useUseCase(useCaseId ?? useCaseIdPathParam);

const {
createUseCase,
updateUseCase,
Expand All @@ -135,14 +149,13 @@ const UseCaseBuilderEditPage: React.FC = () => {
const { setPageTitle } = usePageTitle();

const [isDisabledUpdate, setIsDisabledUpdate] = useState(false);

const [isOpenDeleteDialog, setIsOpenDeleteDialog] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);

const [isPosting, setIsPosting] = useState(false);

const [isOpen, setIsOpen] = useState(false);

const { modelIds: availableModels } = MODELS;

useEffect(() => {
// 初期表示時にIDを設定する
setUseCaseId(useCaseIdPathParam ?? null);
Expand All @@ -156,13 +169,15 @@ const UseCaseBuilderEditPage: React.FC = () => {
setPromptTemplate(useCase?.promptTemplate ?? '');
setDescription(useCase?.description ?? '');
setInputExamples(useCase?.inputExamples ?? []);
setFixedModelId(useCase?.fixedModelId ?? '');

// サンプル集から遷移した場合（RouterのStateから設定）
} else if (state) {
setTitle(state.title ?? '');
setPromptTemplate(state.promptTemplate ?? '');
setDescription(state.description ?? '');
setInputExamples(state.inputExamples ?? []);
setFixedModelId(state.fixedModelId ?? '');
} else {
clear();
}
Expand Down Expand Up @@ -216,6 +231,7 @@ const UseCaseBuilderEditPage: React.FC = () => {
promptTemplate,
description: description === '' ? undefined : description,
inputExamples,
fixedModelId,
})
.then(() => {
// DB変更直後は更新ボタンをDisabledにする
Expand All @@ -230,6 +246,7 @@ const UseCaseBuilderEditPage: React.FC = () => {
promptTemplate,
description: description === '' ? undefined : description,
inputExamples,
fixedModelId,
})
.then(async (res) => {
setUseCaseId(res.useCaseId);
Expand All @@ -256,6 +273,7 @@ const UseCaseBuilderEditPage: React.FC = () => {
updateRecentUseUseCase,
updateUseCase,
useCaseId,
fixedModelId,
]);

const onClickDelete = useCallback(() => {
Expand Down Expand Up @@ -445,6 +463,54 @@ const UseCaseBuilderEditPage: React.FC = () => {
</Button>
</div>
</ExpandableField>
<ExpandableField label="モデルの選択">
<div className="rounded border px-4 py-2">
<Switch
checked={fixedModelId !== ''}
className="text-xl"
label={
fixedModelId !== ''
? 'モデルが固定化されています。'
: 'モデルは固定化されていません。'
}
onSwitch={() => {
if (fixedModelId !== '') {
setFixedModelId('');
} else {
setFixedModelId(availableModels[0]);
}
setIsDisabledUpdate(false);
}}
/>

{fixedModelId !== '' && (
<Select
value={fixedModelId}
onChange={(m) => {
setFixedModelId(m);
setIsDisabledUpdate(false);
}}
options={availableModels.map((m) => {
return { value: m, label: m };
})}
/>
)}

<div className="text-xs text-gray-800">
{fixedModelId !== '' ? (
<>
モデル選択の UI が表示されないため、ユーザーは生成 AI
の存在を意識せずにユースケースを利用できます
</>
) : (
<>
モデル選択の UI
が表示され、ユーザーは自由にモデルを選択できます。
</>
)}
</div>
</div>
</ExpandableField>
</RowItem>
<div className="flex justify-between">
{isUpdate ? (
Expand Down Expand Up @@ -482,6 +548,7 @@ const UseCaseBuilderEditPage: React.FC = () => {
promptTemplate={promptTemplate}
description={description}
inputExamples={inputExamples}
fixedModelId={fixedModelId}
previewMode
/>
</Card>
Expand Down
1 change: 1 addition & 0 deletions packages/web/src/pages/useCaseBuilder/UseCaseBuilderExecutePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ const UseCaseBuilderExecutePage: React.FC = () => {
promptTemplate={useCase?.promptTemplate ?? ''}
description={useCase?.description}
inputExamples={useCase?.inputExamples}
fixedModelId={useCase?.fixedModelId ?? ''}
isShared={useCase?.isShared ?? false}
isFavorite={useCase?.isFavorite ?? false}
useCaseId={useCaseId ?? ''}
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/pages/useCaseBuilder/UseCaseBuilderMyUseCasePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const UseCaseBuilderMyUseCasePage: React.FC = () => {
return (
<div
key={useCase.useCaseId}
className={`flex flex-row items-center gap-x-2 p-2 last:border-b hover:bg-gray-100 ${idx > 0 ? 'border-t' : ''}`}>
className={`flex flex-row items-center gap-x-2 p-2 hover:bg-gray-100 ${idx > 0 ? 'border-t' : ''}`}>
<div
className="flex flex-1 cursor-pointer flex-col justify-start"
onClick={() => {
Expand Down

0 comments on commit 86884b8

Please sign in to comment.