From 4828abc79c3babe57d618e238e4d2aef84be8128 Mon Sep 17 00:00:00 2001 From: lihqi <455711093@qq.com> Date: Fri, 27 Sep 2024 15:20:06 +0800 Subject: [PATCH] fix(lb-components): Add LLM MultiWheel textControl --- .../LLMMultiWheelView/dialogView/index.tsx | 12 ++++----- .../components/LLMMultiWheelView/index.tsx | 20 +++++++++++++-- .../LLMMultiWheelView/sidebar/index.tsx | 22 ++++++++++------ .../src/components/LLMToolView/types.ts | 1 + .../src/store/LLMMultiWheel/index.ts | 25 +++++++------------ 5 files changed, 49 insertions(+), 31 deletions(-) diff --git a/packages/lb-components/src/components/LLMMultiWheelView/dialogView/index.tsx b/packages/lb-components/src/components/LLMMultiWheelView/dialogView/index.tsx index 9d203dcb..6d899adc 100644 --- a/packages/lb-components/src/components/LLMMultiWheelView/dialogView/index.tsx +++ b/packages/lb-components/src/components/LLMMultiWheelView/dialogView/index.tsx @@ -4,10 +4,8 @@ import ImgView from '@/components/LLMToolView/questionView/components/imgView'; import { ILLMMultiWheelToolConfig } from '@/components/LLMToolView/types'; import useLLMMultiWheelStore from '@/store/LLMMultiWheel'; import { classnames } from '@/utils'; -import { LLMMultiWheelViewCls } from '@/views/MainView/LLMMultiWheelLayout'; import { Button } from 'antd'; -import React, { useContext, useEffect, useState } from 'react'; -// import { LLMMultiWheelViewCls } from '..'; +import React from 'react'; interface IDialogViewProps { id: number | string; @@ -64,15 +62,17 @@ const DialogView = (props: IDialogViewProps) => {
{answerList.map((item: any, index: number) => { - const isTextControl = getTextControlByConfig(item, LLMConfig); + const order = index + 1; + const answer = { ...item, order }; + const isTextControl = getTextControlByConfig(answer, LLMConfig); return (
- + {answerIsImg ? ( ) : ( diff --git a/packages/lb-components/src/components/LLMMultiWheelView/index.tsx b/packages/lb-components/src/components/LLMMultiWheelView/index.tsx index 307f71f4..21376656 100644 --- a/packages/lb-components/src/components/LLMMultiWheelView/index.tsx +++ b/packages/lb-components/src/components/LLMMultiWheelView/index.tsx @@ -68,8 +68,8 @@ const LLMMultiWheelView: React.FC = (props) => { const { annotation, tips, showTips, drawLayerSlot } = props; const { imgIndex, imgList, stepList, step, toolInstance } = annotation; const [LLMConfig, setLLMConfig] = useState(); - const { setSelectedID } = useLLMMultiWheelStore(); - const [dialogList, setDialogList] = useState([]); + const { setSelectedID, newAnswerListMap } = useLLMMultiWheelStore(); + const [dialogList, setDialogList] = useState([]); const questionIsImg = LLMConfig?.dataType?.prompt === ELLMDataType.Picture; const answerIsImg = LLMConfig?.dataType?.response === ELLMDataType.Picture; const { t } = useTranslation(); @@ -88,6 +88,22 @@ const LLMMultiWheelView: React.FC = (props) => { } }, [imgIndex]); + useEffect(() => { + const newDialogList = dialogList.map((item: any) => { + return { + ...item, + answerList: item?.answerList?.map((answer: any) => { + const mapId = `${item?.id ?? ''}-${answer?.id ?? ''}`; + return { + ...answer, + newAnswer: newAnswerListMap[mapId] ?? answer.answer, + }; + }), + }; + }); + setDialogList(newDialogList); + }, [newAnswerListMap]); + useEffect(() => { if (stepList && step) { const LLMStepConfig = getStepConfig(stepList, step)?.config; diff --git a/packages/lb-components/src/components/LLMMultiWheelView/sidebar/index.tsx b/packages/lb-components/src/components/LLMMultiWheelView/sidebar/index.tsx index e511bbc4..761d35ec 100644 --- a/packages/lb-components/src/components/LLMMultiWheelView/sidebar/index.tsx +++ b/packages/lb-components/src/components/LLMMultiWheelView/sidebar/index.tsx @@ -54,7 +54,7 @@ interface IProps { interface ILLMAnnotationResultMap { [id: string | number]: IAnnotationResult & { id: string | number; - order: string; + order: string | number; }; } @@ -80,7 +80,6 @@ const LLMMultiWheelToolSidebar = (props: IProps) => { const { toolInstanceRef } = useCustomToolInstance({ basicInfo }); const [valid, setValid] = useState(true); const [annotationResultMap, setAnnotationResultMap] = useState({}); - const { selectedID } = useLLMMultiWheelStore(); const [globalResult, setGlobalResult] = useState(initGlobalResult); const answerSortRef = useRef(); const sortRef = useRef(); @@ -88,6 +87,7 @@ const LLMMultiWheelToolSidebar = (props: IProps) => { newSort?: IAnswerSort[][]; waitSorts?: IWaitAnswerSort[]; }>({}); + const { selectedID, setNewAnswerListMap, newAnswerListMap } = useLLMMultiWheelStore(); const currentLLMAnnotationResult = useMemo(() => { return annotationResultMap[selectedID]; @@ -139,7 +139,7 @@ const LLMMultiWheelToolSidebar = (props: IProps) => { return getCurrentResultFromResultList(currentData?.result, currentStepInfo.step); }; - const initResult = (initData?: any) => { + const initResult = useMemoizedFn((initData?: any) => { const result: any = getCurrentResult(); let sourceData = currentData?.questionList?.textList; @@ -159,15 +159,19 @@ const LLMMultiWheelToolSidebar = (props: IProps) => { const data = getRenderDataByResult(LLMConfig, { ...item, answerList: item?.answerList?.map((answer: any, index: number) => { + setNewAnswerListMap({ + ...newAnswerListMap, + [`${item.id}-${answer.id}`]: answer.answer, + }); return { ...answer, - order: `${index + 1}`, + order: index + 1, }; }), }); tmpMap[item.id] = { ...data, - order: `${modelIndex + 1}`, + order: modelIndex + 1, id: item.id, }; }); @@ -183,7 +187,7 @@ const LLMMultiWheelToolSidebar = (props: IProps) => { answerSort: result?.answerSort ?? [], }); setAnnotationResultMap(tmpMap); - }; + }); useEffect(() => { setExportData(); @@ -232,6 +236,10 @@ const LLMMultiWheelToolSidebar = (props: IProps) => { if (i?.order === order) { // text edit if (key === 'textEdit' && isString(value)) { + setNewAnswerListMap({ + ...newAnswerListMap, + [`${selectedID}-${i?.id ?? ''}`]: value, + }); return { ...i, newAnswer: value }; } if (isNumber(value)) { @@ -284,7 +292,7 @@ const LLMMultiWheelToolSidebar = (props: IProps) => { currentData?.questionList?.textList?.map((item: any, index: number) => { return { ...item, - title: `${index + 1}`, + title: index + 1, }; }) ?? [] ); diff --git a/packages/lb-components/src/components/LLMToolView/types.ts b/packages/lb-components/src/components/LLMToolView/types.ts index 48cbcf52..305544c2 100644 --- a/packages/lb-components/src/components/LLMToolView/types.ts +++ b/packages/lb-components/src/components/LLMToolView/types.ts @@ -22,6 +22,7 @@ export interface IAnswerList { newAnswer?: string; url?: string; // used to display picture tagList?: ISelectedTags; + id?: string | number; } export interface IModelAPIAnswer { diff --git a/packages/lb-components/src/store/LLMMultiWheel/index.ts b/packages/lb-components/src/store/LLMMultiWheel/index.ts index 8e5fd3f5..9cce25a8 100644 --- a/packages/lb-components/src/store/LLMMultiWheel/index.ts +++ b/packages/lb-components/src/store/LLMMultiWheel/index.ts @@ -1,17 +1,18 @@ import { EDataFormatType } from '@/constant'; import { create } from 'zustand'; import React from 'react'; + +interface INewAnswerListMap { + [key: string]: string; +} + interface Store { dataFormatType: EDataFormatType; setDataFormatType: (dataFormatType: EDataFormatType) => void; selectedID: React.Key; setSelectedID: (selectedID: React.Key) => void; - highlightIDs: number[]; - setHighlightIDs: (highlightIDs: number[]) => void; - selectedIDs: string[]; - setSelectedIDs: (selectedIDs: string[]) => void; - rectRotateSensitivity: number; - setRectRotateSensitivity: (sensitivity: number) => void; + newAnswerListMap: INewAnswerListMap; + setNewAnswerListMap: (newAnswerListMap: INewAnswerListMap) => void; } const useLLMMultiWheelStore = create((set) => ({ @@ -19,16 +20,8 @@ const useLLMMultiWheelStore = create((set) => ({ setDataFormatType: (dataFormatType) => set((state) => ({ dataFormatType })), selectedID: '', setSelectedID: (selectedID) => set((state) => ({ selectedID })), - highlightIDs: [], - setHighlightIDs: (highlightIDs) => set((state) => ({ highlightIDs })), - selectedIDs: [], - setSelectedIDs: (selectedIDs) => - set((state) => { - return { selectedIDs }; - }), - rectRotateSensitivity: 2, - setRectRotateSensitivity: (sensitivity) => - set((state) => ({ rectRotateSensitivity: sensitivity })), + newAnswerListMap: {}, + setNewAnswerListMap: (newAnswerListMap) => set((state) => ({ newAnswerListMap })), })); export default useLLMMultiWheelStore;