plugin-build-guide-block 1.0.11 → 1.0.12

package/src/client/plugin.tsx

@@ -1,30 +1,52 @@
-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, RemoteSelect } 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 { namespace } from './locale';
+
+export class PluginBuildGuideBlockClient extends Plugin {
+  async load() {
+    this.app.addComponents({
+      UserGuideBlock,
+      UserGuideBlockInitializer,
+      BuildButton,
+      LLMServiceSelect,
+      ModelSelect,
+      StatusTag,
+      RemoteSelect,
+    });
+
+    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,75 @@
+import { useFieldSchema } from '@formily/react';
+import { SchemaSettings, useDesignable } from '@nocobase/client';
+import { useT } from './locale';
+
+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': 'RemoteSelect',
+                'x-component-props': {
+                  showSearch: true,
+                  fieldNames: { label: 'title', value: 'id' },
+                  service: {
+                    resource: 'aiBuildGuideSpaces',
+                    action: 'list',
+                    params: {
+                      filter: { status: 'completed' },
+                    },
+                  },
+                },
+                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',
+          },
+        };
+      },
+    },
+  ],
+});

package/src/client/schemas/spacesSchema.ts

@@ -75,6 +75,18 @@ export const spacesSchema = {
                             },
                           },
                         },
+                        outputFormat: {
+                          type: 'string',
+                          title: '{{t("Output format")}}',
+                          required: true,
+                          default: 'html',
+                          'x-decorator': 'FormItem',
+                          'x-component': 'Select',
+                          enum: [
+                            { label: 'HTML', value: 'html' },
+                            { label: 'Markdown', value: 'markdown' },
+                          ],
+                        },
                         systemPrompt: {
                           type: 'string',
                           title: '{{t("System Prompt")}}',
@@ -84,7 +96,7 @@ export const spacesSchema = {
                             rows: 4,
                           },
                           default:
-                            'You are an expert technical writer. Please generate a comprehensive HTML user guide based on the provided documents. Ensure the output is valid HTML and does not include Markdown syntax like ```html blocks.',
+                            'You are an expert technical writer. Generate a comprehensive user guide based on the provided documents.',
                         },
                         documents: {
                           type: 'array',
@@ -231,6 +243,17 @@ export const spacesSchema = {
                                   'x-decorator': 'FormItem',
                                   'x-component': 'ModelSelect',
                                 },
+                                outputFormat: {
+                                  type: 'string',
+                                  title: '{{t("Output format")}}',
+                                  required: true,
+                                  'x-decorator': 'FormItem',
+                                  'x-component': 'Select',
+                                  enum: [
+                                    { label: 'HTML', value: 'html' },
+                                    { label: 'Markdown', value: 'markdown' },
+                                  ],
+                                },
                                 systemPrompt: {
                                   type: 'string',
                                   title: '{{t("System Prompt")}}',
@@ -261,6 +284,24 @@ export const spacesSchema = {
                                   },
                                   'x-read-pretty': true,
                                 },
+                                generatedMarkdown: {
+                                  type: 'string',
+                                  title: '{{t("Generated Markdown")}}',
+                                  'x-decorator': 'FormItem',
+                                  'x-component': 'Input.TextArea',
+                                  'x-component-props': {
+                                    rows: 6,
+                                  },
+                                  'x-read-pretty': true,
+                                  'x-reactions': {
+                                    dependencies: ['outputFormat'],
+                                    fulfill: {
+                                      state: {
+                                        visible: '{{$deps[0] === "markdown"}}',
+                                      },
+                                    },
+                                  },
+                                },
                                 buildLog: {
                                   type: 'string',
                                   title: '{{t("Build Log")}}',

package/src/locale/en-US.json

@@ -16,6 +16,9 @@
   "Edit": "Edit",
   "Edit space": "Edit space",
   "Generated HTML": "Generated HTML",
+  "Generated Markdown": "Generated Markdown",
+  "Output format": "Output format",
+  "Select Space": "Select Space",
   "Build Log": "Build Log",
   "Delete": "Delete",
   "Saved successfully": "Saved successfully",

package/src/locale/namespace.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared namespace constant.
+ * Matches the namespace already used in inline schema strings
+ * such as {{t("...", { ns: "build-guide-block" })}}.
+ */
+export const name = 'build-guide-block';

package/src/locale/vi-VN.json

@@ -16,6 +16,9 @@
   "Edit": "Sửa",
   "Edit space": "Sửa Space",
   "Generated HTML": "HTML Đã tạo",
+  "Generated Markdown": "Markdown Đã tạo",
+  "Output format": "Định dạng đầu ra",
+  "Select Space": "Chọn Space",
   "Build Log": "Log quá trình Build",
   "Delete": "Xóa",
   "Saved successfully": "Lưu thành công",

package/src/locale/zh-CN.json

@@ -16,6 +16,9 @@
   "Edit": "编辑",
   "Edit space": "编辑空间",
   "Generated HTML": "生成的 HTML",
+  "Generated Markdown": "生成的 Markdown",
+  "Output format": "输出格式",
+  "Select Space": "选择空间",
   "Build Log": "构建日志",
   "Delete": "删除",
   "Saved successfully": "保存成功",

package/src/server/actions/build.ts

@@ -9,6 +9,28 @@ import { HumanMessage, SystemMessage } from '@langchain/core/messages';
 import axios from 'axios';
 import fs from 'fs';
 import path from 'path';
+import { marked } from 'marked';
+
+const SANITIZE_OPTIONS: sanitizeHtml.IOptions = {
+  allowedTags: [
+    'div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+    'ul', 'ol', 'li', 'table', 'thead', 'tbody', 'tr', 'td', 'th',
+    'a', 'img', 'span', 'strong', 'em', 'code', 'pre', 'blockquote', 'br', 'hr',
+  ],
+  allowedAttributes: {
+    a: ['href', 'target'],
+    img: ['src', 'alt', 'width', 'height'],
+    '*': ['style', 'class'],
+  },
+  allowedStyles: {
+    '*': {
+      color: [/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/, /^rgb/, /^rgba/],
+      'background-color': [/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/, /^rgb/, /^rgba/],
+      'text-align': [/^left$/, /^right$/, /^center$/, /^justify$/],
+      'font-size': [/^\d+(?:px|em|%)$/],
+    },
+  },
+};
 
 async function fetchFileContent(app: any, file: any): Promise<string> {
   const fileManager = app.pm.get('file-manager') as PluginFileManagerServer;
@@ -87,7 +109,8 @@ export async function build(ctx: Context, next: Next) {
         throw new Error('Plugin AI is not available');
       }
 
-      const { llmService, model, systemPrompt } = space.get();
+      const { llmService, model, systemPrompt, outputFormat } = space.get();
+      const format = outputFormat === 'markdown' ? 'markdown' : 'html';
 
       if (!llmService || !model) {
         throw new Error('LLM Service or model is missing in space configuration');
@@ -101,44 +124,34 @@ export async function build(ctx: Context, next: Next) {
         messages.push(new SystemMessage(systemPrompt));
       }
 
-      const instruction = `Please generate an HTML user guide based on the following documents. Output ONLY valid HTML without Markdown blocks.\n\nDocuments:\n${documentsText}`;
+      const instruction =
+        format === 'markdown'
+          ? `Please generate a comprehensive user guide in pure Markdown based on the following documents. Output ONLY Markdown content (no HTML wrappers, no code-fence around the whole document).\n\nDocuments:\n${documentsText}`
+          : `Please generate an HTML user guide based on the following documents. Output ONLY valid HTML without Markdown blocks.\n\nDocuments:\n${documentsText}`;
       messages.push(new HumanMessage(instruction));
 
       const response = await provider.chatModel.invoke(messages);
-      let rawHtml = typeof response.content === 'string' ? response.content : JSON.stringify(response.content);
-
-      // Strip markdown code block if present
-      rawHtml = rawHtml.replace(/^```html\s*/, '').replace(/```\s*$/, '');
-
-      // 2c. Sanitize HTML output
-      const cleanHtml = sanitizeHtml(rawHtml, {
-        allowedTags: [
-          'div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-          'ul', 'ol', 'li', 'table', 'thead', 'tbody', 'tr', 'td', 'th',
-          'a', 'img', 'span', 'strong', 'em', 'code', 'pre', 'blockquote', 'br', 'hr'
-        ],
-        allowedAttributes: {
-          'a': ['href', 'target'],
-          'img': ['src', 'alt', 'width', 'height'],
-          '*': ['style', 'class']
-        },
-        allowedStyles: {
-          '*': {
-            'color': [/^\#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/, /^rgb/, /^rgba/],
-            'background-color': [/^\#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/, /^rgb/, /^rgba/],
-            'text-align': [/^left$/, /^right$/, /^center$/, /^justify$/],
-            'font-size': [/^\d+(?:px|em|%)$/]
-          }
-        }
-      });
+      const rawText =
+        typeof response.content === 'string' ? response.content : JSON.stringify(response.content);
+
+      const updateValues: Record<string, unknown> = { status: 'completed' };
+
+      if (format === 'markdown') {
+        const rawMarkdown = rawText.replace(/^```(?:markdown|md)?\s*/, '').replace(/```\s*$/, '');
+        const renderedHtml = await marked.parse(rawMarkdown, { async: true });
+        const cleanHtml = sanitizeHtml(renderedHtml, SANITIZE_OPTIONS);
+        updateValues.generatedMarkdown = rawMarkdown;
+        updateValues.generatedHtml = cleanHtml;
+      } else {
+        const rawHtml = rawText.replace(/^```html\s*/, '').replace(/```\s*$/, '');
+        const cleanHtml = sanitizeHtml(rawHtml, SANITIZE_OPTIONS);
+        updateValues.generatedHtml = cleanHtml;
+        updateValues.generatedMarkdown = null;
+      }
 
-      // 2d. Save generated HTML
       await bgRepo.update({
         filterByTk,
-        values: {
-          generatedHtml: cleanHtml,
-          status: 'completed',
-        },
+        values: updateValues,
       });
     })();
 

package/src/server/actions/getMarkdown.ts

@@ -0,0 +1,26 @@
+import { Context, Next } from '@nocobase/actions';
+import { Repository } from '@nocobase/database';
+
+export async function getMarkdown(ctx: Context, next: Next) {
+  const { filterByTk } = ctx.action.params;
+  const { resourceName } = ctx.action;
+  const repository = ctx.db.getRepository<any>(resourceName) as Repository;
+  const model = await repository.findById(filterByTk);
+
+  if (!model) {
+    ctx.throw(404, 'User Guide not found');
+  }
+
+  if (model.get('status') !== 'completed') {
+    ctx.throw(400, 'User Guide is not ready yet');
+  }
+
+  ctx.body = model.get('generatedMarkdown') || '';
+  ctx.withoutDataWrapping = true;
+
+  ctx.set({
+    'Content-Type': 'text/markdown; charset=UTF-8',
+  });
+
+  await next();
+}

package/src/server/collections/ai-build-guide-spaces.ts

@@ -28,10 +28,19 @@ export default defineCollection({
       type: 'text',
       name: 'systemPrompt',
     },
+    {
+      type: 'string',
+      name: 'outputFormat',
+      defaultValue: 'html',
+    },
     {
       type: 'text',
       name: 'generatedHtml',
     },
+    {
+      type: 'text',
+      name: 'generatedMarkdown',
+    },
     {
       type: 'string',
       name: 'status',

package/src/server/plugin.ts

@@ -1,76 +1,83 @@
-import { InstallOptions, Plugin } from '@nocobase/server';
-import path from 'path';
-import { build } from './actions/build';
-import { getHtml } from './actions/getHtml';
-
-export class PluginBuildGuideBlockServer extends Plugin {
-  afterAdd() {}
-
-  beforeLoad() {}
-
-  async load() {
-    this.app.resourceManager.registerActionHandlers({
-      'aiBuildGuideSpaces:build': build,
-      'aiBuildGuideSpaces:getHtml': getHtml,
-    });
-
-    this.app.acl.allow('aiBuildGuideSpaces', 'getHtml', 'loggedIn');
-    this.app.acl.registerSnippet({
-      name: 'pm.ai-build-guide',
-      actions: [
-        'aiBuildGuideSpaces:create',
-        'aiBuildGuideSpaces:update',
-        'aiBuildGuideSpaces:destroy',
-        'aiBuildGuideSpaces:list',
-        'aiBuildGuideSpaces:get',
-        'aiBuildGuideSpaces:build',
-      ],
-    });
-
-    // Recover stale "building" status after server restart
-    this.app.on('afterStart', async () => {
-      try {
-        const repo = this.db.getRepository('aiBuildGuideSpaces');
-        await repo.update({
-          filter: { status: 'building' },
-          values: {
-            status: 'error',
-            buildLog: 'Build interrupted by server restart',
-          },
-        });
-      } catch (err) {
-        this.app.logger.warn('[plugin-build-guide-block] Failed to recover stale builds', err);
-      }
-    });
-  }
-
-  async install(options?: InstallOptions) {
-    const collection = this.db.getCollection('aiBuildGuideSpaces');
-    if (collection) {
-      await collection.model.sync();
-    }
-    const repo = this.db.getRepository<any>('collections');
-    if (repo) {
-      await repo.db2cm('aiBuildGuideSpaces');
-    }
-  }
-
-  async upgrade() {
-    const collection = this.db.getCollection('aiBuildGuideSpaces');
-    if (collection) {
-      await collection.model.sync();
-    }
-    const repo = this.db.getRepository<any>('collections');
-    if (repo) {
-      await repo.db2cm('aiBuildGuideSpaces');
-    }
-  }
-
-  async afterEnable() {}
-
-  async afterDisable() {}
-
-  async remove() {}
-}
-
-export default PluginBuildGuideBlockServer;
+import { InstallOptions, Plugin } from '@nocobase/server';
+import { resolve } from 'path';
+import { build } from './actions/build';
+import { getHtml } from './actions/getHtml';
+import { getMarkdown } from './actions/getMarkdown';
+
+export class PluginBuildGuideBlockServer extends Plugin {
+  afterAdd() {}
+
+  beforeLoad() {}
+
+  async load() {
+    await this.db.import({
+      directory: resolve(__dirname, 'collections'),
+    });
+
+    this.app.resourceManager.registerActionHandlers({
+      'aiBuildGuideSpaces:build': build,
+      'aiBuildGuideSpaces:getHtml': getHtml,
+      'aiBuildGuideSpaces:getMarkdown': getMarkdown,
+    });
+
+    this.app.acl.allow('aiBuildGuideSpaces', 'getHtml', 'loggedIn');
+    this.app.acl.allow('aiBuildGuideSpaces', 'getMarkdown', 'loggedIn');
+    this.app.acl.registerSnippet({
+      name: 'pm.ai-build-guide',
+      actions: [
+        'aiBuildGuideSpaces:create',
+        'aiBuildGuideSpaces:update',
+        'aiBuildGuideSpaces:destroy',
+        'aiBuildGuideSpaces:list',
+        'aiBuildGuideSpaces:get',
+        'aiBuildGuideSpaces:build',
+      ],
+    });
+
+    // Recover stale "building" status after server restart
+    this.app.on('afterStart', async () => {
+      try {
+        const repo = this.db.getRepository('aiBuildGuideSpaces');
+        await repo.update({
+          filter: { status: 'building' },
+          values: {
+            status: 'error',
+            buildLog: 'Build interrupted by server restart',
+          },
+        });
+      } catch (err) {
+        this.app.logger.warn('[plugin-build-guide-block] Failed to recover stale builds', err);
+      }
+    });
+  }
+
+  async install(options?: InstallOptions) {
+    const collection = this.db.getCollection('aiBuildGuideSpaces');
+    if (collection) {
+      await collection.model.sync();
+    }
+    const repo = this.db.getRepository<any>('collections');
+    if (repo) {
+      await repo.db2cm('aiBuildGuideSpaces');
+    }
+  }
+
+  async upgrade() {
+    const collection = this.db.getCollection('aiBuildGuideSpaces');
+    if (collection) {
+      await collection.model.sync();
+    }
+    const repo = this.db.getRepository<any>('collections');
+    if (repo) {
+      await repo.db2cm('aiBuildGuideSpaces');
+    }
+  }
+
+  async afterEnable() {}
+
+  async afterDisable() {}
+
+  async remove() {}
+}
+
+export default PluginBuildGuideBlockServer;