plugin-build-guide-block 1.0.9 → 1.0.11

package/src/client/components/BuildButton.tsx

@@ -1,43 +1,78 @@
-import React, { useState } from 'react';
-import { Button, App } from 'antd';
-import { useAPIClient, useCollectionRecordData, useDataBlockRequest } from '@nocobase/client';
-import { PlayCircleOutlined } from '@ant-design/icons';
-import { useTranslation } from 'react-i18next';
-
-export const BuildButton = () => {
-  const [loading, setLoading] = useState(false);
-  const api = useAPIClient();
-  const { message } = App.useApp();
-  const { t } = useTranslation();
-  const record = useCollectionRecordData();
-  const { refresh } = useDataBlockRequest();
-
-  const handleBuild = async () => {
-    if (!record?.id) return;
-    setLoading(true);
-    try {
-      await api.resource('aiBuildGuideSpaces').build({
-        filterByTk: record.id,
-      });
-      message.success(t('Build started'));
-      // Delay slightly to allow background status update to propagate
-      setTimeout(() => refresh?.(), 1500);
-    } catch (err: any) {
-      console.error(err);
-      message.error(err?.response?.data?.error?.message || t('Build failed'));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Button
-      type="primary"
-      icon={<PlayCircleOutlined />}
-      loading={loading}
-      onClick={handleBuild}
-    >
-      {t('Build')}
-    </Button>
-  );
-};
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { Button, App } from 'antd';
+import { useAPIClient, useCollectionRecordData, useDataBlockRequest } from '@nocobase/client';
+import { PlayCircleOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+
+const POLL_INTERVAL_MS = 3000;
+const MAX_POLL_COUNT = 100; // ~5 minutes max
+
+export const BuildButton = () => {
+  const [loading, setLoading] = useState(false);
+  const api = useAPIClient();
+  const { message } = App.useApp();
+  const { t } = useTranslation();
+  const record = useCollectionRecordData();
+  const { refresh } = useDataBlockRequest();
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const stopPolling = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    setLoading(false);
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => stopPolling, [stopPolling]);
+
+  const handleBuild = async () => {
+    if (!record?.id) return;
+    setLoading(true);
+    try {
+      await api.resource('aiBuildGuideSpaces').build({
+        filterByTk: record.id,
+      });
+      message.success(t('Build started'));
+
+      // Poll until status leaves "building"
+      let pollCount = 0;
+      timerRef.current = setInterval(async () => {
+        pollCount++;
+        try {
+          const res = await api.resource('aiBuildGuideSpaces').get({ filterByTk: record.id });
+          const status = res?.data?.data?.status;
+          if (status !== 'building' || pollCount >= MAX_POLL_COUNT) {
+            stopPolling();
+            refresh?.();
+            if (status === 'completed') {
+              message.success(t('Build completed'));
+            } else if (status === 'error') {
+              message.error(t('Build failed'));
+            }
+          }
+        } catch {
+          stopPolling();
+          refresh?.();
+        }
+      }, POLL_INTERVAL_MS);
+    } catch (err: any) {
+      console.error(err);
+      message.error(err?.response?.data?.error?.message || t('Build failed'));
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      type="primary"
+      icon={<PlayCircleOutlined />}
+      loading={loading}
+      onClick={handleBuild}
+      disabled={record?.status === 'building'}
+    >
+      {t('Build')}
+    </Button>
+  );
+};

package/src/client/components/LLMServiceSelect.tsx

@@ -1,44 +1,44 @@
-import React, { useState, useEffect } from 'react';
-import { useAPIClient } from '@nocobase/client';
-import { Select } from 'antd';
-import { useField } from '@formily/react';
-import { Field } from '@formily/core';
-
-export const LLMServiceSelect = (props: any) => {
-  const [options, setOptions] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const api = useAPIClient();
-  const field = useField<Field>();
-
-  useEffect(() => {
-    let active = true;
-    setLoading(true);
-    api.resource('ai').listLLMServices()
-      .then((res) => {
-        if (!active) return;
-        const data = res?.data?.data || [];
-        setOptions(
-          data.map((item: any) => ({
-            label: item.title || item.name,
-            value: item.name,
-          }))
-        );
-      })
-      .catch((err) => {
-        if (!active) return;
-        console.error('Failed to load LLM services:', err);
-      })
-      .finally(() => {
-        if (active) setLoading(false);
-      });
-    return () => {
-      active = false;
-    };
-  }, [api]);
-
-  return <Select {...props} options={options} loading={loading} value={field.value} onChange={(v) => {
-    field.setValue(v);
-    // Reset model when service changes
-    (field.query('.model').take() as any)?.setValue(undefined);
-  }} />;
-};
+import React, { useState, useEffect } from 'react';
+import { useAPIClient } from '@nocobase/client';
+import { Select } from 'antd';
+import { useField } from '@formily/react';
+import { Field } from '@formily/core';
+
+export const LLMServiceSelect = (props: any) => {
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const api = useAPIClient();
+  const field = useField<Field>();
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    api.resource('ai').listLLMServices()
+      .then((res) => {
+        if (!active) return;
+        const data = res?.data?.data || [];
+        setOptions(
+          data.map((item: any) => ({
+            label: item.title || item.name,
+            value: item.name,
+          }))
+        );
+      })
+      .catch((err) => {
+        if (!active) return;
+        console.error('Failed to load LLM services:', err);
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, [api]);
+
+  return <Select {...props} options={options} loading={loading} value={field.value} onChange={(v) => {
+    field.setValue(v);
+    // Reset model when service changes
+    (field.query('.model').take() as any)?.setValue(undefined);
+  }} />;
+};

package/src/client/components/ModelSelect.tsx

@@ -1,41 +1,41 @@
-import React, { useState, useEffect } from 'react';
-import { useAPIClient } from '@nocobase/client';
-import { Select } from 'antd';
-import { useField, useForm, observer } from '@formily/react';
-import { Field } from '@formily/core';
-
-export const ModelSelect = observer((props: any) => {
-  const [options, setOptions] = useState([]);
-  const api = useAPIClient();
-  const field = useField<Field>();
-  const form = useForm();
-  
-  const llmService = form.values.llmService;
-
-  useEffect(() => {
-    let active = true;
-    if (!llmService) {
-      setOptions([]);
-      return;
-    }
-    
-    api.resource('ai').listModels({ llmService }).then((res) => {
-      if (!active) return;
-      const data = res?.data?.data || [];
-      setOptions(
-        data.map((item: any) => ({
-          label: item.id || item.name,
-          value: item.id || item.name,
-        }))
-      );
-    }).catch(console.error);
-
-    return () => {
-      active = false;
-    };
-  }, [api, llmService]);
-
-  return <Select {...props} options={options} value={field.value} onChange={(v) => {
-    field.setValue(v);
-  }} disabled={!llmService} />;
-});
+import React, { useState, useEffect } from 'react';
+import { useAPIClient } from '@nocobase/client';
+import { Select } from 'antd';
+import { useField, useForm, observer } from '@formily/react';
+import { Field } from '@formily/core';
+
+export const ModelSelect = observer((props: any) => {
+  const [options, setOptions] = useState([]);
+  const api = useAPIClient();
+  const field = useField<Field>();
+  const form = useForm();
+  
+  const llmService = form.values.llmService;
+
+  useEffect(() => {
+    let active = true;
+    if (!llmService) {
+      setOptions([]);
+      return;
+    }
+    
+    api.resource('ai').listModels({ llmService }).then((res) => {
+      if (!active) return;
+      const data = res?.data?.data || [];
+      setOptions(
+        data.map((item: any) => ({
+          label: item.id || item.name,
+          value: item.id || item.name,
+        }))
+      );
+    }).catch(console.error);
+
+    return () => {
+      active = false;
+    };
+  }, [api, llmService]);
+
+  return <Select {...props} options={options} value={field.value} onChange={(v) => {
+    field.setValue(v);
+  }} disabled={!llmService} />;
+});

package/src/client/components/StatusTag.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import { Tag } from 'antd';
-import { useField } from '@formily/react';
-
-const colors = {
-  draft: 'default',
-  building: 'blue',
-  completed: 'success',
-  error: 'error',
-};
-
-export const StatusTag = (props: any) => {
-  const field = useField();
-  const value = props.value || (field as any).value;
-  if (!value) return null;
-  return <Tag color={colors[value] || 'default'}>{String(value).toUpperCase()}</Tag>;
-};
+import React from 'react';
+import { Tag } from 'antd';
+import { useField } from '@formily/react';
+
+const colors = {
+  draft: 'default',
+  building: 'blue',
+  completed: 'success',
+  error: 'error',
+};
+
+export const StatusTag = (props: any) => {
+  const field = useField();
+  const value = props.value || (field as any).value;
+  if (!value) return null;
+  return <Tag color={colors[value] || 'default'}>{String(value).toUpperCase()}</Tag>;
+};

package/src/client/models/UserGuideBlockModel.ts

@@ -1,54 +1,54 @@
-import { BlockModel } from '@nocobase/client';
-import { escapeT } from '@nocobase/flow-engine';
-import React from 'react';
-import { UserGuideBlock } from '../UserGuideBlock';
-
-export class UserGuideBlockModel extends BlockModel {
-  renderComponent() {
-    const { spaceId } = this.props;
-    return React.createElement(UserGuideBlock, { spaceId });
-  }
-}
-
-UserGuideBlockModel.registerFlow({
-  key: 'userGuideBlockSettings',
-  title: escapeT('User guide block setting', { ns: 'build-guide-block' }),
-  steps: {
-    editUserGuide: {
-      title: escapeT('Edit user guide settings', { ns: 'build-guide-block' }),
-      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,
-        });
-      },
-    },
-  },
-});
-
-UserGuideBlockModel.define({
-  label: escapeT('User Guide'),
-});
+import { BlockModel } from '@nocobase/client';
+import { escapeT } from '@nocobase/flow-engine';
+import React from 'react';
+import { UserGuideBlock } from '../UserGuideBlock';
+
+export class UserGuideBlockModel extends BlockModel {
+  renderComponent() {
+    const { spaceId } = this.props;
+    return React.createElement(UserGuideBlock, { spaceId });
+  }
+}
+
+UserGuideBlockModel.registerFlow({
+  key: 'userGuideBlockSettings',
+  title: escapeT('User guide block setting', { ns: 'build-guide-block' }),
+  steps: {
+    editUserGuide: {
+      title: escapeT('Edit user guide settings', { ns: 'build-guide-block' }),
+      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,
+        });
+      },
+    },
+  },
+});
+
+UserGuideBlockModel.define({
+  label: escapeT('User Guide'),
+});

package/src/client/models/index.ts

@@ -7,6 +7,4 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { ModelConstructor } from '@nocobase/flow-engine';
-
-export default {} as Record<string, ModelConstructor>;
+export { UserGuideBlockModel } from './UserGuideBlockModel';

package/src/client/plugin.tsx

@@ -1,30 +1,30 @@
-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 { 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;