feat: mission widget

web/apps/web/src/components/workflow/import-modal/index.tsx

@@ -39,7 +39,6 @@ const ImportModal: React.FC<{
   onOpenChange: (open: boolean) => void;
 }> = ({ open, onOpenChange }) => {
   const [openTips, setOpenTips] = useBoolean(false);
-  const [isExpand, isExpandAction] = useBoolean(false);
   const [fileUrl, setFileUrl] = useState<string | undefined>();
   const [workflow, setWorkflow] = useState<Workflow | undefined>();
   const { existedInfo, importWorkflow, setExistedInfo } = useWorkflowStore(
@@ -204,31 +203,17 @@ const ImportModal: React.FC<{
               </AlertDialogTitle>
             </AlertDialogHeader>
             <AlertDialogDescription className="flex flex-col gap-1.5">
-              <Heading size="h2">Warning</Heading>
+              <Heading size="h2">Missing Items</Heading>
               <Text size="sm" color="subtle">
                 The following items are missing.
                 <br />
-                Replace it with installed models/widgets, or contact us to add
-                it to the standard environment.
+                If this workflow would run in MyShell, please replace the
+                missing models/widgets with similar installed ones, or contact
+                us to add them to the standard environment.
               </Text>
-              <div
-                className="flex items-center cursor-pointer"
-                onClick={() => isExpandAction.toggle()}>
-                <Text size="sm" color="subtler">
-                  {isExpand ? 'Show Less' : 'View Detail'}
-                </Text>
-                <ChevronDownIcon
-                  className={cn('w-4 h-4 ml-1.5 text-subtler', {
-                    'rotate-180': isExpand,
-                  })}
-                />
-              </div>
               <div
                 className={cn(
                   'flex-1 rounded-lg border border-default p-3 w-[340px] max-h-60 overflow-x-hidden',
-                  {
-                    hidden: !isExpand,
-                  },
                 )}>
                 {!isEmpty(existedInfo.non_existed_models) ? (
                   <div>

web/apps/web/src/components/workflow/node-card/index.tsx

@@ -48,17 +48,20 @@ const NodeCard: React.FC<
         <SchemaProvider
           id={id}
           name={name}
+          mode={mode}
           display_name={display_name}
           output={runtime_data?.output}>
           <ContextMenu>
             {isUndefined ? (
               <div className="pb-2">
                 <Heading size="h1" color="critical">
-                  Undefined Widget
+                  Missing Widget
                 </Heading>
+                {/* <Text color="critical">Missing Model</Text> */}
+                <br />
                 <Text color="critical">
-                  Replace it with installed widgets, or contact us to add it to
-                  the standard environment.
+                  Replace it with installed widgets/models, or contact us to add
+                  it to the standard environment.
                 </Text>
               </div>
             ) : null}

web/apps/web/src/components/workflow/node-form/index.tsx

@@ -65,6 +65,8 @@ const NodeForm = forwardRef<FormRef, NodeFormProps>(
       }
     }, [currentSchema, loading, defaultValues]);
 
+    console.log('values: ', values);
+
     if (loading || isEmpty(currentSchema)) {
       return <FormSkeleton />;
     }

web/apps/web/src/stores/workflow/schema-provider.tsx

@@ -52,14 +52,16 @@ export const useSchemaContext = <T,>(
 
 export interface SchemaProviderProps {
   id: string;
-  name: string | undefined;
-  display_name: string | undefined;
+  name?: string;
+  mode?: string;
+  display_name?: string;
   children: React.ReactNode | React.ReactNode[];
   output?: Record<string, any>;
 }
 
 export const SchemaProvider: React.FC<SchemaProviderProps> = ({
   name = '',
+  mode,
   display_name = '',
   id,
   children,
@@ -122,7 +124,7 @@ export const SchemaProvider: React.FC<SchemaProviderProps> = ({
       memoized.schema = endSchema;
     } else if (!isEmpty(currentWidgetSchema)) {
       const schema = getSchemaByWidget({
-        name: display_name,
+        name: mode === 'undefined' ? name : display_name,
         inputSchema: currentWidgetSchema?.input_schema,
         outputSchema: currentWidgetSchema?.output_schema,
         fieldsModeMap: currentFieldsModeMap,
@@ -142,7 +144,7 @@ export const SchemaProvider: React.FC<SchemaProviderProps> = ({
       outputs: memoized.outputRefTypes,
     });
     return memoized;
-  }, [id, name, display_name, currentWidgetSchema, currentFieldsModeMap]);
+  }, [id, mode, name, display_name, currentWidgetSchema, currentFieldsModeMap]);
 
   const formKey = useMemo(() => {
     return `${JSON.stringify({

web/apps/web/src/stores/workflow/workflow-store.tsx

@@ -395,7 +395,6 @@ export const createWorkflowStore = () => {
           );
         }
         if (type === EventStatusEnum.workflow_end) {
-          get().flowInstance?.fitView();
           set(
             produce(state => {
               state.loading.workflowRunning = false;
@@ -453,11 +452,30 @@ export const createWorkflowStore = () => {
             return nodes;
           });
           if (data?.node_status === NodeStatusEnum.failed) {
+            get().flowInstance?.fitView({
+              minZoom: 0.8,
+              maxZoom: 1.5,
+              nodes: [{ id: data?.node_id as string }],
+              padding: 400,
+            });
+            // 设置为选中状态，放到最上层
+            get().flowInstance?.setNodes(nodes =>
+              nodes.map(node =>
+                node.id === data?.node_id
+                  ? {
+                      ...node,
+                      selected: true,
+                    }
+                  : node,
+              ),
+            );
             set(
               produce(state => {
                 state.loading.workflowRunning = false;
               }),
             );
+          } else {
+            get().flowInstance?.fitView();
           }
         }
       },