fix(lb-components): Add LLM MultiWheel shortcut

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

Hide file tree

Showing 3 changed files with 43 additions and 10 deletions.
diff --git a/packages/lb-components/src/components/LLMMultiWheelView/index.tsx b/packages/lb-components/src/components/LLMMultiWheelView/index.tsx
@@ -10,9 +10,18 @@ import useLLMMultiWheelStore from '@/store/LLMMultiWheel';
 import { LLMMultiWheelViewCls } from '@/views/MainView/LLMMultiWheelLayout';
 import { ToggleDataFormatType } from '../LLMToolView/questionView/components/header';
 import DialogView from './dialogView';
+import { DrawLayerSlot } from '@/types/main';
+import MessageMaskLayer from '../messageMaskLayer';
+import AnnotationTips from '@/views/MainView/annotationTips';
+import { useTranslation } from 'react-i18next';
+import { LLMViewCls } from '../LLMToolView/questionView';
+import { Layout } from 'antd';
 
 interface IProps {
   annotation?: any;
+  showTips?: boolean;
+  tips?: string;
+  drawLayerSlot?: DrawLayerSlot;
 }
 
 interface ILLMMultiWheelSourceViewProps {
@@ -56,13 +65,16 @@ export const LLMMultiWheelSourceView: React.FC<ILLMMultiWheelSourceViewProps> =
 };
 
 const LLMMultiWheelView: React.FC<IProps> = (props) => {
-  const { annotation } = props;
-  const { imgIndex, imgList, stepList, step } = annotation;
+  const { annotation, tips, showTips, drawLayerSlot } = 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;
+  const { t } = useTranslation();
+  const [, forceRender] = useState(0);
+
   useEffect(() => {
     if (!imgList[imgIndex]) {
       return;
@@ -83,13 +95,29 @@ const LLMMultiWheelView: React.FC<IProps> = (props) => {
     }
   }, [stepList, step]);
 
+  useEffect(() => {
+    if (toolInstance) {
+      toolInstance.on('validUpdated', () => {
+        forceRender((s) => s + 1);
+      });
+      return () => {
+        toolInstance.unbindAll('validUpdated');
+      };
+    }
+  }, [toolInstance]);
+
   return (
-    <LLMMultiWheelSourceView
-      questionIsImg={questionIsImg}
-      answerIsImg={answerIsImg}
-      LLMConfig={LLMConfig}
-      dialogList={dialogList}
-    />
+    <Layout className={LLMViewCls}>
+      {!toolInstance?.valid && <MessageMaskLayer message={t('InvalidQuestionAndSkip')} />}
+      {drawLayerSlot?.({})}
+      {showTips === true && <AnnotationTips tips={tips} />}
+      <LLMMultiWheelSourceView
+        questionIsImg={questionIsImg}
+        answerIsImg={answerIsImg}
+        LLMConfig={LLMConfig}
+        dialogList={dialogList}
+      />
+    </Layout>
   );
 };
 

diff --git a/packages/lb-components/src/views/MainView/LLMMultiWheelLayout/index.tsx b/packages/lb-components/src/views/MainView/LLMMultiWheelLayout/index.tsx
@@ -29,7 +29,11 @@ const LLMMultiWheelLayout: React.FC<AppProps & IProps> = (props) => {
           [`${prefix}-LLMLayout`]: true,
         })}
       >
-        <LLMMultiWheelView />
+        <LLMMultiWheelView
+          showTips={props.showTips}
+          tips={props.tips}
+          drawLayerSlot={props.drawLayerSlot}
+        />
         <ToolFooter style={props.style?.footer} mode={props.mode} footer={props?.footer} />
       </Content>
       <Sider className={`${layoutCls}__side`} width={600} style={{ position: 'relative' }}>

diff --git a/packages/lb-components/src/views/MainView/toolFooter/FooterTips/ToolHotKey/index.tsx b/packages/lb-components/src/views/MainView/toolFooter/FooterTips/ToolHotKey/index.tsx
@@ -19,7 +19,7 @@ import scribbleShortCutTable from './scribble';
 import cuboidShortCutTable from './cuboid';
 import LLMShortCutTable from './LLM';
 import NLPShortCutTable from './NLP';
-import audioTextShortCutTable from './audioText'
+import audioTextShortCutTable from './audioText';
 
 import { footerCls } from '../../index';
 import { useTranslation } from 'react-i18next';
@@ -63,6 +63,7 @@ export const shortCutTable: { [a: string]: IShortCutInfo[] } = {
   [EToolName.ScribbleTool]: scribbleShortCutTable,
   [EToolName.Cuboid]: cuboidShortCutTable,
   [EToolName.LLM]: LLMShortCutTable,
+  [EToolName.LLMMultiWheel]: LLMShortCutTable,
   [EToolName.NLP]: NLPShortCutTable,
   [EAudioToolName.AudioTextTool]: audioTextShortCutTable,
 };