plugin-build-guide-block 1.0.2 → 1.0.3

package/src/client/UserGuideManager.tsx

@@ -0,0 +1,133 @@
+import React, { useMemo } from 'react';
+import {
+  SchemaComponent,
+  ActionContextProvider,
+  useActionContext,
+  useCollectionRecordData,
+  useDataBlockRequest,
+  useDataBlockResource,
+  useDestroyActionProps,
+  ExtendCollectionsProvider,
+} from '@nocobase/client';
+import { createForm } from '@formily/core';
+import { App } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { spacesSchema } from './schemas/spacesSchema';
+import { LLMServiceSelect } from './components/LLMServiceSelect';
+import { ModelSelect } from './components/ModelSelect';
+import { StatusTag } from './components/StatusTag';
+import { BuildButton } from './components/BuildButton';
+
+export const UserGuideManager = () => {
+  const { t } = useTranslation();
+
+  const useCreateFormProps = () => {
+    const form = useMemo(() => createForm(), []);
+    return { form };
+  };
+
+  const useEditFormProps = () => {
+    const record = useCollectionRecordData();
+    const form = useMemo(() => createForm({ initialValues: record }), [record]);
+    return { form };
+  };
+
+  const useCancelActionProps = () => {
+    const { setVisible } = useActionContext();
+    return {
+      type: 'default',
+      onClick() {
+        setVisible(false);
+      },
+    };
+  };
+
+  const useCreateActionProps = () => {
+    const { setVisible } = useActionContext();
+    const { message } = App.useApp();
+    const resource = useDataBlockResource();
+    const { refresh } = useDataBlockRequest();
+
+    return {
+      type: 'primary',
+      async onClick() {
+        const form = (this as any).form;
+        await form.submit();
+        await resource.create({ values: form.values });
+        refresh();
+        message.success(t('Saved successfully'));
+        setVisible(false);
+      },
+    };
+  };
+
+  const useUpdateActionProps = () => {
+    const { setVisible } = useActionContext();
+    const { message } = App.useApp();
+    const resource = useDataBlockResource();
+    const { refresh } = useDataBlockRequest();
+    const record = useCollectionRecordData();
+
+    return {
+      type: 'primary',
+      async onClick() {
+        const form = (this as any).form;
+        await form.submit();
+        await resource.update({
+          filterByTk: record.id,
+          values: form.values,
+        });
+        refresh();
+        message.success(t('Saved successfully'));
+        setVisible(false);
+      },
+    };
+  };
+
+  const useTableBlockProps = () => {
+    return {
+      collection: 'aiBuildGuideSpaces',
+      request: {
+        resource: 'aiBuildGuideSpaces',
+        action: 'list',
+        params: {
+          appends: ['documents'],
+          sort: ['-createdAt'],
+        },
+      },
+    };
+  };
+
+  return (
+    <ExtendCollectionsProvider collections={[{
+      name: 'aiBuildGuideSpaces',
+      fields: [
+        { name: 'title', type: 'string' },
+        { name: 'llmService', type: 'string' },
+        { name: 'model', type: 'string' },
+        { name: 'status', type: 'string' },
+        { name: 'buildLog', type: 'string' },
+      ],
+    }]}>
+      <SchemaComponent
+        schema={spacesSchema}
+        components={{
+          LLMServiceSelect,
+          ModelSelect,
+          StatusTag,
+          BuildButton,
+        }}
+        scope={{
+          t,
+          useCreateFormProps,
+          useEditFormProps,
+          useCancelActionProps,
+          useCreateActionProps,
+          useUpdateActionProps,
+          useDestroyActionProps,
+          useTableBlockProps,
+        }}
+      />
+    </ExtendCollectionsProvider>
+  );
+};

package/src/client/client.d.ts

@@ -0,0 +1,249 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+// CSS modules
+type CSSModuleClasses = { readonly [key: string]: string };
+
+declare module '*.module.css' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.less' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.styl' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.stylus' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.pcss' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.sss' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+
+// CSS
+declare module '*.css' { }
+declare module '*.scss' { }
+declare module '*.sass' { }
+declare module '*.less' { }
+declare module '*.styl' { }
+declare module '*.stylus' { }
+declare module '*.pcss' { }
+declare module '*.sss' { }
+
+// Built-in asset types
+// see `src/node/constants.ts`
+
+// images
+declare module '*.apng' {
+  const src: string;
+  export default src;
+}
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+declare module '*.jfif' {
+  const src: string;
+  export default src;
+}
+declare module '*.pjpeg' {
+  const src: string;
+  export default src;
+}
+declare module '*.pjp' {
+  const src: string;
+  export default src;
+}
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}
+declare module '*.ico' {
+  const src: string;
+  export default src;
+}
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+
+// media
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}
+declare module '*.webm' {
+  const src: string;
+  export default src;
+}
+declare module '*.ogg' {
+  const src: string;
+  export default src;
+}
+declare module '*.mp3' {
+  const src: string;
+  export default src;
+}
+declare module '*.wav' {
+  const src: string;
+  export default src;
+}
+declare module '*.flac' {
+  const src: string;
+  export default src;
+}
+declare module '*.aac' {
+  const src: string;
+  export default src;
+}
+declare module '*.opus' {
+  const src: string;
+  export default src;
+}
+declare module '*.mov' {
+  const src: string;
+  export default src;
+}
+declare module '*.m4a' {
+  const src: string;
+  export default src;
+}
+declare module '*.vtt' {
+  const src: string;
+  export default src;
+}
+
+// fonts
+declare module '*.woff' {
+  const src: string;
+  export default src;
+}
+declare module '*.woff2' {
+  const src: string;
+  export default src;
+}
+declare module '*.eot' {
+  const src: string;
+  export default src;
+}
+declare module '*.ttf' {
+  const src: string;
+  export default src;
+}
+declare module '*.otf' {
+  const src: string;
+  export default src;
+}
+
+// other
+declare module '*.webmanifest' {
+  const src: string;
+  export default src;
+}
+declare module '*.pdf' {
+  const src: string;
+  export default src;
+}
+declare module '*.txt' {
+  const src: string;
+  export default src;
+}
+
+// wasm?init
+declare module '*.wasm?init' {
+  const initWasm: (options?: WebAssembly.Imports) => Promise<WebAssembly.Instance>;
+  export default initWasm;
+}
+
+// web worker
+declare module '*?worker' {
+  const workerConstructor: {
+    new(options?: { name?: string }): Worker;
+  };
+  export default workerConstructor;
+}
+
+declare module '*?worker&inline' {
+  const workerConstructor: {
+    new(options?: { name?: string }): Worker;
+  };
+  export default workerConstructor;
+}
+
+declare module '*?worker&url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*?sharedworker' {
+  const sharedWorkerConstructor: {
+    new(options?: { name?: string }): SharedWorker;
+  };
+  export default sharedWorkerConstructor;
+}
+
+declare module '*?sharedworker&inline' {
+  const sharedWorkerConstructor: {
+    new(options?: { name?: string }): SharedWorker;
+  };
+  export default sharedWorkerConstructor;
+}
+
+declare module '*?sharedworker&url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*?raw' {
+  const src: string;
+  export default src;
+}
+
+declare module '*?url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*?inline' {
+  const src: string;
+  export default src;
+}

package/src/client/components/BuildButton.tsx

@@ -0,0 +1,43 @@
+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>
+  );
+};

package/src/client/components/LLMServiceSelect.tsx

@@ -0,0 +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);
+  }} />;
+};

package/src/client/components/ModelSelect.tsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+import { useAPIClient } from '@nocobase/client';
+import { Select } from 'antd';
+import { useField, useForm } from '@formily/react';
+import { Field } from '@formily/core';
+
+export const ModelSelect = (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

@@ -0,0 +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>;
+};

package/src/client/index.tsx

@@ -0,0 +1 @@
+export { default } from './plugin';

package/src/client/models/UserGuideBlockModel.ts

@@ -0,0 +1,47 @@
+import { BlockModel } from '@nocobase/client';
+import { escapeT } from '@nocobase/flow-engine';
+
+export class UserGuideBlockModel extends BlockModel {}
+
+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

@@ -0,0 +1,12 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { ModelConstructor } from '@nocobase/flow-engine';
+
+export default {} as Record<string, ModelConstructor>;

package/src/client/plugin.tsx

@@ -0,0 +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;