feat(lb-components): Add LLMMultiWheel

packages/lb-annotation/src/constant/tool.ts

@@ -71,6 +71,7 @@ export enum EToolName {
   LLM = 'LLMTool',
   /** NLP标注工具-大模型 */
   NLP = 'NLPTool',
+  LLMMultiWheel = 'LLMMultiWheelTool',
 }
 
 export enum ECheckModel {
@@ -110,6 +111,7 @@ export const TOOL_NAME: { [a: string]: string } = {
   [EToolName.Cuboid]: '立体框',
   [EToolName.LLM]: '大模型',
   [EToolName.NLP]: 'NLP标注',
+  [EToolName.LLMMultiWheel]: '大模型（多轮对话）',
 };
 
 export const TOOL_NAME_EN: { [a: string]: string } = {
@@ -136,6 +138,7 @@ export const TOOL_NAME_EN: { [a: string]: string } = {
   [EToolName.Cuboid]: 'Cuboid',
   [EToolName.LLM]: 'LLM',
   [EToolName.NLP]: 'NLP',
+  [EToolName.LLMMultiWheel]: 'LLMMultiWheelTool',
 };
 
 export enum EDependPattern {

packages/lb-components/src/components/LLMMultiWheelView/dialogView/index.tsx

@@ -0,0 +1,88 @@
+import { getTextControlByConfig, RenderAnswer } from '@/components/LLMToolView/questionView';
+import { RenderQuestion } from '@/components/LLMToolView/questionView/components/header';
+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 '..';
+
+interface IDialogViewProps {
+  id: number | string;
+  answerList: any;
+  question: any;
+  name?: string;
+  index: number;
+  isSelected: boolean;
+  answerIsImg: boolean;
+  questionIsImg: boolean;
+  LLMConfig?: ILLMMultiWheelToolConfig;
+}
+
+const DialogView = (props: IDialogViewProps) => {
+  const {
+    id,
+    answerList,
+    question,
+    index,
+    name = '',
+    answerIsImg,
+    questionIsImg,
+    LLMConfig,
+  } = props;
+  const { dataFormatType, selectedID, setSelectedID } = useLLMMultiWheelStore();
+  const order = index + 1;
+  const showName = name || `对话${order}`;
+
+  return (
+    <div
+      key={id}
+      onClick={() => setSelectedID(id)}
+      className={classnames({
+        dialog: true,
+        selected: id === selectedID,
+      })}
+    >
+      <div className={`header`}>
+        <span className={`order`}>{order}</span>
+        <div className={`name`}>
+          <div className={`show-name`}>{showName}</div>
+          <div className={`tips`}>（选中标注）</div>
+        </div>
+      </div>
+      <div className={`dialog-question`}>
+        <Button type='primary'>题目{order}</Button>
+        <div>
+          <RenderQuestion
+            question={question}
+            dataFormatType={dataFormatType}
+            isImg={questionIsImg}
+          />
+        </div>
+      </div>
+      <div className={`dialog-answer`}>
+        {answerList.map((item: any, index: number) => {
+          const isTextControl = getTextControlByConfig(item, LLMConfig);
+          return (
+            <div key={index}>
+              <Button type='primary'>答案{index + 1}</Button>
+              {answerIsImg ? (
+                <ImgView answerList={answerList} />
+              ) : (
+                <RenderAnswer
+                  i={item}
+                  isTextControl={isTextControl}
+                  dataFormatType={dataFormatType}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default DialogView;

packages/lb-components/src/components/LLMMultiWheelView/index.tsx

@@ -0,0 +1,74 @@
+import React, { useContext, useEffect, useState } from 'react';
+
+import { connect } from 'react-redux';
+import { AppState } from '@/store';
+import { getStepConfig } from '@/store/annotation/reducer';
+import { getCurrentResultFromResultList } from '../LLMToolView/utils/data';
+import { jsonParser } from '@/utils';
+import { ILLMMultiWheelToolConfig } from '../LLMToolView/types';
+import { ELLMDataType, prefix } from '@/constant';
+import { Layout } from 'antd/es';
+import { LabelBeeContext } from '@/store/ctx';
+import QuestionView from '../LLMToolView/questionView';
+import DialogView from './dialogView';
+import { LLMMultiWheelViewCls } from '@/views/MainView/LLMMultiWheelLayout';
+import useLLMMultiWheelStore from '@/store/LLMMultiWheel';
+
+interface IProps {
+  annotation?: any;
+}
+
+const LLMMultiWheelView: React.FC<IProps> = (props) => {
+  const { annotation } = props;
+  const { imgIndex, imgList, stepList, step, toolInstance } = annotation;
+  const [LLMConfig, setLLMConfig] = useState<ILLMMultiWheelToolConfig>();
+  const { setSelectedID } = useLLMMultiWheelStore();
+  const [dialogList, setDialogList] = useState([]);
+  const questionIsImg = LLMConfig?.dataType?.prompt === ELLMDataType.Picture;
+  const answerIsImg = LLMConfig?.dataType?.response === ELLMDataType.Picture;
+  useEffect(() => {
+    if (!imgList[imgIndex]) {
+      return;
+    }
+    const currentData = imgList[imgIndex] ?? {};
+    const dialogList = currentData?.questionList?.textList ?? [];
+
+    setDialogList(dialogList);
+    if (dialogList?.length) {
+      setSelectedID(dialogList[0].id);
+    }
+  }, [imgIndex]);
+
+  useEffect(() => {
+    if (stepList && step) {
+      const LLMStepConfig = getStepConfig(stepList, step)?.config;
+      setLLMConfig(jsonParser(LLMStepConfig));
+    }
+  }, [stepList, step]);
+
+  return (
+    <div className={`${LLMMultiWheelViewCls}-container`}>
+      {dialogList?.map((item: any, index) => (
+        <DialogView
+          {...item}
+          key={index}
+          index={index}
+          isSelected={true}
+          questionIsImg={questionIsImg}
+          answerIsImg={answerIsImg}
+          LLMConfig={LLMConfig}
+        />
+      ))}
+    </div>
+  );
+};
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    annotation: state.annotation,
+  };
+};
+
+export default connect(mapStateToProps, null, null, { context: LabelBeeContext })(
+  LLMMultiWheelView,
+);