Access myshell widgets

web/apps/web/src/app/app/detail/page.tsx

@@ -63,6 +63,8 @@ const FlowEngineWrapper = observer(
     // 退出页面初始化状态
     useEffect(() => {
       appBuilder.getFlowList({ type: 'workflow' });
+      appBuilder.getLocalWidgetList();
+      appBuilder.getMyShellWidgetList();
       return () => {
         resetState();
       };
@@ -103,7 +105,7 @@ const FlowEngineWrapper = observer(
         ref={flowRef}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
-        materialList={materialList}
+        materialList={appBuilder.materialList}
         footerExtra={<ListFooterExtra />}
         header={
           <div onDoubleClick={e => e.stopPropagation()}>

web/apps/web/src/components/app/config-form/widget-config/index.tsx

@@ -47,14 +47,28 @@ const StandardWidgetConfig: React.FC<CommonWidgetConfigProps> = ({
   );
 
   useEffect(() => {
-    if (values?.widget_class_name && !widgetSchema[values.widget_class_name]) {
-      getWidgetSchema({ widget_name: values.widget_class_name });
+    if (
+      values?.widget_class_name &&
+      values?.widget_name &&
+      !widgetSchema[[values.widget_class_name, values.widget_name].join('_')]
+    ) {
+      getWidgetSchema({
+        widget_name: values.widget_class_name,
+        myshell_widget_name: values.widget_name,
+      });
     }
-  }, [values?.widget_class_name, getWidgetSchema, widgetSchema]);
+  }, [
+    values?.widget_class_name,
+    values?.widget_name,
+    getWidgetSchema,
+    widgetSchema,
+  ]);
 
   const schema = useMemo(() => {
     const schema = getSchemaByWidget({
-      ...widgetSchema[values?.widget_class_name],
+      ...widgetSchema[
+        [values?.widget_class_name, values?.widget_name].join('_')
+      ],
     });
     // Special process ImageCanvasWidget
     if (values?.widget_class_name === 'ImageCanvasWidget') {

web/apps/web/src/components/app/node-form/widgets/tasks-config.tsx

@@ -12,6 +12,8 @@ import { useDrag, useDrop } from 'react-dnd';
 import { materialList } from '@/components/app/constants';
 import { TaskList } from '@/components/app/task-list';
 import { useAppState } from '@/stores/app/use-app-state';
+import { useInjection } from 'inversify-react';
+import { AppBuilderModel } from '@/stores/app/models/app-builder.model';
 
 const TaskItem = ({
   name,
@@ -122,6 +124,7 @@ const TasksConfig = ({
   onChange: (value: Task[]) => void;
   draggable?: boolean;
 }) => {
+  const appBuilder = useInjection<AppBuilderModel>('AppBuilderModel');
   const btnRef = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState(false);
   const { getValues } = useFormContext();
@@ -225,7 +228,7 @@ const TasksConfig = ({
             onClick={e => e.stopPropagation()}>
             <TaskList
               className="rounded-xl"
-              data={materialList.slice(1)}
+              data={appBuilder.materialList.slice(1)}
               loading={false}
               onChange={handleSelect}
             />

web/apps/web/src/services/app/index.tsx

@@ -30,6 +30,8 @@ import {
   GetIntroDisplayResponse,
 } from './type';
 import { APIFetch } from '../base';
+import { MaterialListType } from '@shellagent/flow-engine';
+import { z } from 'zod';
 
 // 保存
 export const saveApp = (params: SaveAppRequest) => {
@@ -145,3 +147,64 @@ export const checkIp = (params: CheckIpRequest) => {
     body: params,
   });
 };
+
+export const get_local_widget_list_res = z.object({
+  widget_list: z.array(
+    z.object({
+      title: z.string(),
+      items: z.array(
+        z.object({
+          name: z.string(),
+          children: z.array(
+            z.object({
+              name: z.string(),
+              display_name: z.string(),
+            }),
+          ),
+        }),
+      ),
+    }),
+  ),
+});
+
+export type type_get_local_widget_list_res = z.infer<
+  typeof get_local_widget_list_res
+>;
+
+export const getLocalWidgetList: Fetcher<
+  type_get_local_widget_list_res,
+  {}
+> = params => {
+  return APIFetch.get('/api/widget/get_local_widget_list', {
+    params,
+  });
+};
+
+export const get_myshell_widget_list_res = z.object({
+  widget_list: z.array(
+    z.object({
+      title: z.string(),
+      items: z.array(
+        z.object({
+          name: z.string(),
+          display_name: z.string(),
+          type: z.string(),
+          widget_name: z.string(),
+        }),
+      ),
+    }),
+  ),
+});
+
+export type type_get_myshell_widget_list = z.infer<
+  typeof get_myshell_widget_list_res
+>;
+
+export const getMyShellWidgetList: Fetcher<
+  type_get_myshell_widget_list,
+  {}
+> = params => {
+  return APIFetch.get('/api/widget/get_myshell_widget_list', {
+    params,
+  });
+};

web/apps/web/src/services/workflow/type.ts

@@ -19,6 +19,7 @@ export type GetWidgetListResponse = {
 // /api/workflow/get_widget_schema
 export type GetWidgetSchemaRequest = {
   widget_name: string; // 后续需要考虑版本
+  myshell_widget_name: string;
 };
 
 export type GetWidgetSchemaResponse = {

web/apps/web/src/stores/app/models/app-builder.model.ts

@@ -1,5 +1,11 @@
-import { type IFlow, type ReactFlowInstance } from '@shellagent/flow-engine';
-import { CustomKey, CustomEventName } from '@shellagent/pro-config';
+import {
+  type IFlow,
+  type MaterialListType,
+  type ReactFlowInstance,
+  NodeTypeEnum,
+  WidgetItem,
+} from '@shellagent/flow-engine';
+import { CustomEventName, CustomKey } from '@shellagent/pro-config';
 import {
   customSnakeCase,
   getRefOptions,
@@ -13,9 +19,15 @@ import {
 import { Issue, IssueTypeEnum } from '@shellagent/shared/type';
 import type { FieldValues } from '@shellagent/ui';
 import { message } from 'antd';
-import { injectable, inject } from 'inversify';
+import { inject, injectable } from 'inversify';
 import { isEmpty } from 'lodash-es';
-import { action, makeObservable, observable, runInAction } from 'mobx';
+import {
+  action,
+  computed,
+  makeObservable,
+  observable,
+  runInAction,
+} from 'mobx';
 
 import { defaultFlow } from '@/components/app/constants';
 import { ComfyUIModel } from '@/components/app/plugins/comfyui/comfyui.model';
@@ -26,32 +38,36 @@ import {
 import { AppBuilderChatModel } from '@/components/chat/app-builder-chat.model';
 import { SettingsModel } from '@/components/settings/settings.model';
 import {
+  type type_get_local_widget_list_res,
+  type type_get_myshell_widget_list,
+  checkIp,
+  exportApp,
   fetchAppVersionList,
   fetchAutomata,
   fetchFlow,
+  getIntroDisplay,
+  getLocalWidgetList,
+  getMyShellWidgetList,
   releaseApp,
-  exportApp,
-  checkIp,
   saveApp,
-  getIntroDisplay,
 } from '@/services/app';
 import type {
   GetAppFlowRequest,
   GetAppVersionListResponse,
   GetAutomataRequest,
 } from '@/services/app/type';
-import { fetchList as fetchFlowList, editItem } from '@/services/home';
+import { editItem, fetchList as fetchFlowList } from '@/services/home';
 import type { GetListRequest, GetListResponse } from '@/services/home/type';
 import emitter, { EventType } from '@/stores/app/models/emitter';
 import {
-  onDownload,
   checkDependency,
   LackDependency,
+  onDownload,
 } from '@/stores/app/utils/automata-export';
 import {
-  genNodeData,
-  genAutomata,
   formatReactFlow2Flow,
+  genAutomata,
+  genNodeData,
 } from '@/stores/app/utils/data-transformer';
 import type { Config, Metadata, NodeDataType } from '@/types/app/types';
 import { ToastModel } from '@/utils/toast.model';
@@ -73,6 +89,23 @@ import {
 
 const settingsDisabled = process.env.NEXT_PUBLIC_DISABLE_SETTING === 'yes';
 
+const LocalWigets: MaterialListType = [
+  {
+    plain: true,
+    items: [
+      {
+        name: 'State',
+        display_name: 'State',
+        type: NodeTypeEnum.state,
+      },
+      {
+        name: 'Note',
+        display_name: 'Note',
+        type: NodeTypeEnum.note,
+      },
+    ],
+  },
+];
 @injectable()
 export class AppBuilderModel {
   nodeData: NodeDataType = {};
@@ -112,6 +145,76 @@ export class AppBuilderModel {
   @observable openExportDialog = false;
   @observable openValidationDialog = false;
   @observable validateAlert: Issue[] = [];
+  @observable rawLocalWidgetList: type_get_local_widget_list_res = {
+    widget_list: [],
+  };
+
+  @observable rawMyShellWidgetList: type_get_myshell_widget_list = {
+    widget_list: [],
+  };
+
+  @computed get materialList() {
+    const backendLocalWidgets: MaterialListType =
+      this.rawLocalWidgetList.widget_list.map(m => {
+        return {
+          ...m,
+          plain: true,
+          items: m.items.reduce<MaterialListType[number]['items']>((acc, i) => {
+            acc = acc.concat(
+              i.children.map(c => {
+                if (c.name === 'ComfyUIWidget') {
+                  return {
+                    ...c,
+                    type: NodeTypeEnum.widget,
+                    undraggable: true,
+                    custom: true,
+                  };
+                }
+                return {
+                  ...c,
+                  type: NodeTypeEnum.widget,
+                  undraggable: true,
+                };
+              }),
+            );
+            return acc;
+          }, []),
+        };
+      });
+    const myshellWidgets: MaterialListType =
+      this.rawMyShellWidgetList.widget_list.map(m => {
+        return {
+          ...m,
+          items: m.items.map(i => {
+            return {
+              ...i,
+              undraggable: true,
+            } as WidgetItem;
+          }),
+          plain: true,
+        };
+      });
+
+    const mergedWidgets = [...LocalWigets, ...backendLocalWidgets];
+
+    myshellWidgets.forEach(myshellWidget => {
+      const existingIndex = mergedWidgets.findIndex(
+        w => w.title === myshellWidget.title,
+      );
+      if (existingIndex !== -1) {
+        mergedWidgets[existingIndex] = {
+          ...mergedWidgets[existingIndex],
+          items: [
+            ...mergedWidgets[existingIndex].items,
+            ...myshellWidget.items,
+          ],
+        };
+      } else {
+        mergedWidgets.push(myshellWidget);
+      }
+    });
+    return mergedWidgets;
+  }
 
   copyNodeData: FieldValues = {};
 
@@ -687,4 +790,32 @@ export class AppBuilderModel {
       this.appEditing = editing;
     });
   }
+
+  @action.bound
+  async getLocalWidgetList() {
+    try {
+      const res = await getLocalWidgetList({});
+      runInAction(() => {
+        this.rawLocalWidgetList = res;
+      });
+    } catch (e) {
+      if (e instanceof Error) {
+        this.emitter.error(e.message);
+      }
+    }
+  }
+
+  @action.bound
+  async getMyShellWidgetList() {
+    try {
+      const res = await getMyShellWidgetList({});
+      runInAction(() => {
+        this.rawMyShellWidgetList = res;
+      });
+    } catch (e) {
+      if (e instanceof Error) {
+        this.emitter.error(e.message);
+      }
+    }
+  }
 }

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

@@ -87,7 +87,7 @@ export const SchemaProvider: React.FC<SchemaProviderProps> = ({
 
   useEffect(() => {
     if (name && !widgetSchema[name] && type === NodeTypeEnum.widget) {
-      getWidgetSchema({ widget_name: name });
+      getWidgetSchema({ widget_name: name, myshell_widget_name: '' });
     }
   }, [name]);
 

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

@@ -102,7 +102,7 @@ export const SchemaProvider: React.FC<SchemaProviderProps> = ({
       id !== NodeIdEnum.start &&
       id !== NodeIdEnum.end
     ) {
-      getWidgetSchema({ widget_name: name });
+      getWidgetSchema({ widget_name: name, myshell_widget_name: '' });
     }
   }, [name]);
 

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

@@ -207,7 +207,9 @@ export const createWorkflowStore = () => {
 
         set(
           produce(state => {
-            state.widgetSchema[params.widget_name] = response;
+            state.widgetSchema[
+              [params.widget_name, params.myshell_widget_name].join('_')
+            ] = response;
             state.loading.getWidgetSchema[params.widget_name] = false;
           }),
         );