plugin-build-guide-block 1.0.11 → 1.1.2

package/src/client/UserGuideBlockProvider.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { SchemaComponentOptions } from '@nocobase/client';
-import { UserGuideBlock } from './UserGuideBlock';
-import { UserGuideBlockInitializer } from './UserGuideBlockInitializer';
+import { SchemaComponentOptions } from '@nocobase/client';
+import { UserGuideBlock } from './UserGuideBlock';
+import { UserGuideBlockInitializer } from './UserGuideBlockInitializer';
+import { SpaceSelect } from './components/SpaceSelect';
 
 export const UserGuideBlockProvider = (props: any) => {
   return (
-    <SchemaComponentOptions components={{ UserGuideBlock, UserGuideBlockInitializer }}>
-      {props.children}
-    </SchemaComponentOptions>
-  );
-};
+    <SchemaComponentOptions components={{ UserGuideBlock, UserGuideBlockInitializer, SpaceSelect }}>
+      {props.children}
+    </SchemaComponentOptions>
+  );
+};

package/src/client/components/SpaceSelect.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Select } from 'antd';
+import { useRequest } from '@nocobase/client';
+
+function normalizeRecords(response: any) {
+  const records = response?.data?.data || response?.data || response || [];
+  return Array.isArray(records) ? records : [];
+}
+
+export const SpaceSelect = (props: any) => {
+  const { data, loading } = useRequest<any>({
+    resource: 'aiBuildGuideSpaces',
+    action: 'list',
+    params: {
+      filter: { status: 'completed' },
+      pageSize: 100,
+      sort: ['-createdAt'],
+    },
+  });
+
+  const options = normalizeRecords(data).map((item: any) => ({
+    label: item.title,
+    value: item.id,
+  })) || [];
+
+  return (
+    <Select
+      {...props}
+      loading={loading}
+      options={options}
+      showSearch
+      filterOption={(input, option) =>
+        (option?.label as string)?.toLowerCase().includes(input.toLowerCase())
+      }
+    />
+  );
+};

package/src/client/locale.ts

@@ -0,0 +1,18 @@
+import { useApp } from '@nocobase/client';
+import { useCallback } from 'react';
+import { name } from '../locale/namespace';
+
+export const namespace = name;
+
+export function useT() {
+  const app = useApp();
+  return useCallback(
+    (str: string, options?: any): string =>
+      app.i18n.t(str, { ns: [namespace, 'client'], ...options }) as unknown as string,
+    [app.i18n],
+  );
+}
+
+export function tStr(key: string) {
+  return `{{t(${JSON.stringify(key)}, { ns: ['${namespace}', 'client'], nsMode: 'fallback' })}}`;
+}

package/src/client/models/UserGuideBlockModel.ts

@@ -1,7 +1,8 @@
 import { BlockModel } from '@nocobase/client';
-import { escapeT } from '@nocobase/flow-engine';
-import React from 'react';
-import { UserGuideBlock } from '../UserGuideBlock';
+import { escapeT } from '@nocobase/flow-engine';
+import React from 'react';
+import { UserGuideBlock } from '../UserGuideBlock';
+import { SpaceSelect } from '../components/SpaceSelect';
 
 export class UserGuideBlockModel extends BlockModel {
   renderComponent() {
@@ -19,32 +20,21 @@ UserGuideBlockModel.registerFlow({
       uiSchema(ctx) {
         const t = ctx.t;
         return {
-          spaceId: {
-            title: t('Space'),
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'RemoteSelect',
-            'x-component-props': {
-              showSearch: true,
-              fieldNames: { label: 'title', value: 'id' },
-              service: {
-                resource: 'aiBuildGuideSpaces',
-                action: 'list',
-                params: {
-                  filter: { status: 'completed' },
-                },
-              },
-            },
-            required: true,
-          },
-        };
-      },
-      async handler(ctx, params) {
-        const { spaceId } = params;
-        ctx.model.setProps({
-          spaceId,
-        });
-      },
+          spaceId: {
+            title: t('Space'),
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': SpaceSelect,
+            required: true,
+          },
+        };
+      },
+      async handler(ctx, params) {
+        const { spaceId } = params;
+        ctx.model.setProps({
+          spaceId,
+        });
+      },
     },
   },
 });

package/src/client/plugin.tsx

@@ -1,30 +1,53 @@
-import { Plugin } from '@nocobase/client';
-import { UserGuideManager } from './UserGuideManager';
-import { UserGuideBlockProvider } from './UserGuideBlockProvider';
-import { UserGuideBlockInitializer } from './UserGuideBlockInitializer';
-import { UserGuideBlockModel } from './models/UserGuideBlockModel';
-
-export class PluginBuildGuideBlockClient extends Plugin {
-  async load() {
-    this.app.pluginSettingsManager.add('ai-build-guide', {
-      icon: 'ReadOutlined',
-      title: '{{t("Build Guide Block", { ns: "build-guide-block" })}}',
-      Component: UserGuideManager,
-      aclSnippet: 'pm.ai-build-guide',
-    });
-
-    this.app.use(UserGuideBlockProvider);
-
-    const blocksInit = this.app.schemaInitializerManager.get('page:addBlock');
-    blocksInit?.add('otherBlocks.aiUserGuide', {
-      title: '{{t("User Guide", { ns: "build-guide-block" })}}',
-      Component: 'UserGuideBlockInitializer',
-    });
-
-    this.flowEngine.registerModels({
-      UserGuideBlockModel,
-    });
-  }
-}
-
-export default PluginBuildGuideBlockClient;
+import { Plugin } from '@nocobase/client';
+import { UserGuideManager } from './UserGuideManager';
+import { UserGuideBlockProvider } from './UserGuideBlockProvider';
+import { UserGuideBlockInitializer } from './UserGuideBlockInitializer';
+import { UserGuideBlock } from './UserGuideBlock';
+import { UserGuideBlockModel } from './models/UserGuideBlockModel';
+import { userGuideBlockSettings } from './schemaSettings';
+import { BuildButton } from './components/BuildButton';
+import { LLMServiceSelect } from './components/LLMServiceSelect';
+import { ModelSelect } from './components/ModelSelect';
+import { StatusTag } from './components/StatusTag';
+import { SpaceSelect } from './components/SpaceSelect';
+import { namespace } from './locale';
+
+export class PluginBuildGuideBlockClient extends Plugin {
+  async load() {
+    this.app.addComponents({
+      UserGuideBlock,
+      UserGuideBlockInitializer,
+      BuildButton,
+      LLMServiceSelect,
+      ModelSelect,
+      StatusTag,
+      SpaceSelect,
+    });
+
+    this.app.schemaSettingsManager.add(userGuideBlockSettings);
+
+    this.app.use(UserGuideBlockProvider);
+
+    this.app.pluginSettingsManager.add('ai-build-guide', {
+      icon: 'ReadOutlined',
+      title: `{{t("Build Guide Block", { ns: "${namespace}" })}}`,
+      Component: UserGuideManager,
+      aclSnippet: 'pm.ai-build-guide',
+    });
+
+    const initializerItem = {
+      title: `{{t("User Guide", { ns: "${namespace}" })}}`,
+      Component: 'UserGuideBlockInitializer',
+    };
+
+    this.app.schemaInitializerManager.addItem('page:addBlock', 'otherBlocks.aiUserGuide', initializerItem);
+    this.app.schemaInitializerManager.addItem('popup:common:addBlock', 'otherBlocks.aiUserGuide', initializerItem);
+    this.app.schemaInitializerManager.addItem('popup:addNew:addBlock', 'otherBlocks.aiUserGuide', initializerItem);
+
+    this.flowEngine.registerModels({
+      UserGuideBlockModel,
+    });
+  }
+}
+
+export default PluginBuildGuideBlockClient;

package/src/client/schemaSettings.ts

@@ -0,0 +1,65 @@
+import { useFieldSchema } from '@formily/react';
+import { SchemaSettings, useDesignable } from '@nocobase/client';
+import { useT } from './locale';
+import { SpaceSelect } from './components/SpaceSelect';
+
+export const userGuideBlockSettings = new SchemaSettings({
+  name: 'userGuideBlockSettings',
+  items: [
+    {
+      name: 'selectSpace',
+      type: 'modal',
+      useComponentProps() {
+        const fieldSchema = useFieldSchema();
+        const { dn } = useDesignable();
+        const t = useT();
+
+        const currentSpaceId = fieldSchema?.['x-component-props']?.spaceId || '';
+
+        return {
+          title: t('Select Space'),
+          schema: {
+            type: 'object',
+            properties: {
+              spaceId: {
+                title: t('Space'),
+                type: 'string',
+                'x-decorator': 'FormItem',
+                'x-component': SpaceSelect,
+                default: currentSpaceId,
+                required: true,
+              },
+            },
+          },
+          onSubmit({ spaceId }: { spaceId: string }) {
+            const componentProps = { ...fieldSchema['x-component-props'], spaceId };
+            fieldSchema['x-component-props'] = componentProps;
+            dn.emit('patch', {
+              schema: {
+                'x-uid': fieldSchema['x-uid'],
+                'x-component-props': componentProps,
+              },
+            });
+            dn.refresh();
+          },
+        };
+      },
+    },
+    {
+      name: 'divider',
+      type: 'divider',
+    },
+    {
+      name: 'delete',
+      type: 'remove',
+      useComponentProps() {
+        return {
+          removeParentsIfNoChildren: true,
+          breakRemoveOn: {
+            'x-component': 'Grid',
+          },
+        };
+      },
+    },
+  ],
+});