fix(lb-components): Export LLMMultiWheelSourceView

open-mmlab · Sep 25, 2024 · 3dfce77 · 3dfce77
1 parent e68d1f6
commit 3dfce77
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 51 deletions.
diff --git a/packages/lb-components/src/components/LLMMultiWheelView/index.tsx b/packages/lb-components/src/components/LLMMultiWheelView/index.tsx
@@ -1,26 +1,63 @@
-import React, { useContext, useEffect, useState } from 'react';
-
-import { connect } from 'react-redux';
+import React, { useEffect, useState } from 'react';
+import { ELLMDataType } from '@/constant';
 import { AppState } from '@/store';
 import { getStepConfig } from '@/store/annotation/reducer';
-import { getCurrentResultFromResultList } from '../LLMToolView/utils/data';
+import { LabelBeeContext } from '@/store/ctx';
 import { jsonParser } from '@/utils';
+import { connect } from 'react-redux';
 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';
+import { LLMMultiWheelViewCls } from '@/views/MainView/LLMMultiWheelLayout';
+import { ToggleDataFormatType } from '../LLMToolView/questionView/components/header';
+import DialogView from './dialogView';
 
 interface IProps {
   annotation?: any;
 }
 
+interface ILLMMultiWheelSourceViewProps {
+  questionIsImg: boolean;
+  answerIsImg: boolean;
+  LLMConfig?: ILLMMultiWheelToolConfig;
+  dialogList: any[];
+}
+
+export const LLMMultiWheelSourceView: React.FC<ILLMMultiWheelSourceViewProps> = (props) => {
+  const { questionIsImg, answerIsImg, LLMConfig, dialogList } = props;
+  const { dataFormatType, setDataFormatType } = useLLMMultiWheelStore();
+  return (
+    <div className={`${LLMMultiWheelViewCls}`}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+        }}
+      >
+        <ToggleDataFormatType
+          dataFormatType={dataFormatType}
+          setDataFormatType={setDataFormatType}
+        />
+      </div>
+
+      <div className={`${LLMMultiWheelViewCls}-container`}>
+        {dialogList?.map((item: any, index: number) => (
+          <DialogView
+            {...item}
+            key={index}
+            index={index}
+            questionIsImg={questionIsImg}
+            answerIsImg={answerIsImg}
+            LLMConfig={LLMConfig}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
 const LLMMultiWheelView: React.FC<IProps> = (props) => {
   const { annotation } = props;
-  const { imgIndex, imgList, stepList, step, toolInstance } = annotation;
+  const { imgIndex, imgList, stepList, step } = annotation;
   const [LLMConfig, setLLMConfig] = useState<ILLMMultiWheelToolConfig>();
   const { setSelectedID } = useLLMMultiWheelStore();
   const [dialogList, setDialogList] = useState([]);
@@ -47,19 +84,12 @@ const LLMMultiWheelView: React.FC<IProps> = (props) => {
   }, [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>
+    <LLMMultiWheelSourceView
+      questionIsImg={questionIsImg}
+      answerIsImg={answerIsImg}
+      LLMConfig={LLMConfig}
+      dialogList={dialogList}
+    />
   );
 };
 

diff --git a/packages/lb-components/src/index.tsx b/packages/lb-components/src/index.tsx
@@ -33,6 +33,7 @@ import SubAttributeList from './components/subAttributeList';
 import { ToolStyleProvider } from './hooks/useToolStyle';
 import { LoadFileAndFileData } from './store/annotation/reducer';
 import useToolConfigStore from '@/store/toolConfig';
+import { LLMMultiWheelSourceView } from './components/LLMMultiWheelView';
 
 export const store = configureStore();
 
@@ -90,6 +91,7 @@ export {
   AnnotationView,
   PointCloudAnnotationView,
   QuestionView,
+  LLMMultiWheelSourceView,
   TextContent,
   LLMToolView,
   i18n,

diff --git a/packages/lb-components/src/views/MainView/LLMMultiWheelLayout/index.tsx b/packages/lb-components/src/views/MainView/LLMMultiWheelLayout/index.tsx
@@ -1,18 +1,13 @@
 import { AppProps } from '@/App';
+import LLMMultiWheelView from '@/components/LLMMultiWheelView';
 import { prefix } from '@/constant';
+import { classnames } from '@/utils';
+import { getClassName } from '@/utils/dom';
 import { Layout } from 'antd/es';
 import _ from 'lodash';
-import React, { useState, useMemo } from 'react';
+import React from 'react';
 import Sidebar from '../sidebar';
 import ToolFooter from '../toolFooter';
-import { getClassName } from '@/utils/dom';
-import { classnames } from '@/utils';
-import { LLMContext, LLMMultiWheelContext } from '@/store/ctx';
-import LLMToolView from '@/components/LLMToolView';
-import { IModelAPIAnswer, IAnswerList } from '@/components/LLMToolView/types';
-import useLLMMultiWheelStore from '@/store/LLMMultiWheel';
-import { ToggleDataFormatType } from '@/components/LLMToolView/questionView/components/header';
-import LLMMultiWheelView from '@/components/LLMMultiWheelView';
 
 export const LLMMultiWheelViewCls = `${prefix}-LLMMultiWheelView`;
 
@@ -25,8 +20,6 @@ const { Sider, Content } = Layout;
 const layoutCls = `${prefix}-layout`;
 
 const LLMMultiWheelLayout: React.FC<AppProps & IProps> = (props) => {
-  const { dataFormatType, setDataFormatType } = useLLMMultiWheelStore();
-
   return (
     <Layout className={getClassName('layout', 'container')}>
       {props?.leftSider}
@@ -36,22 +29,7 @@ const LLMMultiWheelLayout: React.FC<AppProps & IProps> = (props) => {
           [`${prefix}-LLMLayout`]: true,
         })}
       >
-        <div className={`${LLMMultiWheelViewCls}`}>
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'flex-end',
-            }}
-          >
-            <ToggleDataFormatType
-              dataFormatType={dataFormatType}
-              setDataFormatType={setDataFormatType}
-            />
-          </div>
-
-          <LLMMultiWheelView />
-        </div>
-
+        <LLMMultiWheelView />
         <ToolFooter style={props.style?.footer} mode={props.mode} footer={props?.footer} />
       </Content>
       <Sider className={`${layoutCls}__side`} width={600} style={{ position: 'relative' }}>