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;