plugin-build-guide-block 1.0.12 → 1.1.3

package/dist/server/plugin.js

@@ -1,12 +1,3 @@
-/**
- * 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.
- */
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -36,6 +27,7 @@ var import_build = require("./actions/build");
 var import_getHtml = require("./actions/getHtml");
 var import_getMarkdown = require("./actions/getMarkdown");
 class PluginBuildGuideBlockServer extends import_server.Plugin {
+  schemaCollections = ["aiBuildGuideSpaces", "aiBuildGuidePages"];
   afterAdd() {
   }
   beforeLoad() {
@@ -59,13 +51,24 @@ class PluginBuildGuideBlockServer extends import_server.Plugin {
         "aiBuildGuideSpaces:destroy",
         "aiBuildGuideSpaces:list",
         "aiBuildGuideSpaces:get",
-        "aiBuildGuideSpaces:build"
+        "aiBuildGuideSpaces:build",
+        "aiBuildGuidePages:list",
+        "aiBuildGuidePages:get"
       ]
     });
     this.app.on("afterStart", async () => {
       try {
         const repo = this.db.getRepository("aiBuildGuideSpaces");
         await repo.update({
+          filter: { status: "building" },
+          values: {
+            status: "error",
+            buildPhase: "error",
+            buildLog: "Build interrupted by server restart"
+          }
+        });
+        const pageRepo = this.db.getRepository("aiBuildGuidePages");
+        await pageRepo.update({
           filter: { status: "building" },
           values: {
             status: "error",
@@ -77,26 +80,52 @@ class PluginBuildGuideBlockServer extends import_server.Plugin {
       }
     });
   }
-  async install(options) {
-    const collection = this.db.getCollection("aiBuildGuideSpaces");
-    if (collection) {
+  async ensureCollectionSchema(collectionName) {
+    const collection = this.db.getCollection(collectionName);
+    if (!collection) {
+      this.app.logger.warn(`[plugin-build-guide-block] Collection "${collectionName}" is not registered`);
+      return;
+    }
+    const queryInterface = this.db.sequelize.getQueryInterface();
+    const tableName = collection.getTableNameWithSchema();
+    let columns = null;
+    try {
+      columns = await queryInterface.describeTable(tableName);
+    } catch (error) {
       await collection.model.sync();
+      columns = await queryInterface.describeTable(tableName);
     }
-    const repo = this.db.getRepository("collections");
-    if (repo) {
-      await repo.db2cm("aiBuildGuideSpaces");
+    const attributes = collection.model.rawAttributes;
+    for (const [attributeName, attribute] of Object.entries(attributes)) {
+      const columnName = attribute.field || attributeName;
+      if (columns[columnName]) {
+        continue;
+      }
+      const columnDefinition = { ...attribute };
+      delete columnDefinition.Model;
+      delete columnDefinition.fieldName;
+      await queryInterface.addColumn(tableName, columnName, columnDefinition);
+      columns[columnName] = columnDefinition;
+      this.app.logger.info(`[plugin-build-guide-block] Added missing column "${columnName}" to "${collectionName}"`);
     }
   }
-  async upgrade() {
-    const collection = this.db.getCollection("aiBuildGuideSpaces");
-    if (collection) {
-      await collection.model.sync();
+  async ensureSchema() {
+    for (const collectionName of this.schemaCollections) {
+      await this.ensureCollectionSchema(collectionName);
     }
     const repo = this.db.getRepository("collections");
     if (repo) {
-      await repo.db2cm("aiBuildGuideSpaces");
+      for (const collectionName of this.schemaCollections) {
+        await repo.db2cm(collectionName);
+      }
     }
   }
+  async install(options) {
+    await this.ensureSchema();
+  }
+  async upgrade() {
+    await this.ensureSchema();
+  }
   async afterEnable() {
   }
   async afterDisable() {

package/package.json

@@ -5,7 +5,7 @@
   "displayName.zh-CN": "构建指南区块",
   "description": "Generate user guides, tutorials and help books from documents using AI, then render the result as a block (HTML or Markdown).",
   "description.vi-VN": "Tạo hướng dẫn người dùng, tutorial và help book từ tài liệu bằng AI, hiển thị kết quả dưới dạng block (HTML hoặc Markdown).",
-  "version": "1.0.12",
+  "version": "1.1.3",
   "license": "Apache-2.0",
   "keywords": [
     "ai",

package/src/client/UserGuideBlock.tsx

@@ -1,53 +1,368 @@
-import React from 'react';
-import { Card, Spin } from 'antd';
-import { useRequest } from '@nocobase/client';
-import { observer } from '@formily/react';
-import { useTranslation } from 'react-i18next';
-import DOMPurify from 'dompurify';
-
-export const UserGuideBlock = observer(
-  (props: any) => {
-    const { spaceId } = props;
-    const { t } = useTranslation();
-
-    const { loading, data: htmlContent } = useRequest(
-      {
-        url: `aiBuildGuideSpaces:getHtml/${spaceId}`,
-      },
-      {
-        refreshDeps: [spaceId],
-        ready: !!spaceId,
-      }
-    );
-
-    if (!spaceId) {
-      return (
-        <Card style={{ padding: 24, textAlign: 'center', color: '#888' }}>
-          {t('Please select a User Guide Space in block settings')}
-        </Card>
-      );
-    }
-
-    if (loading) {
-      return (
-        <Card style={{ padding: 24, textAlign: 'center' }}>
-          <Spin size="large" />
-        </Card>
-      );
-    }
-
-    return (
-      <Card
-        bordered={false}
-        className="user-guide-block"
-        style={{ width: '100%', minHeight: 300 }}
-      >
-        <div
-          className="user-guide-content"
-          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize((htmlContent as any)?.data || '') }}
-        />
-      </Card>
-    );
-  },
-  { displayName: 'UserGuideBlock' }
-);
+import React from 'react';
+import { Card, Empty, Spin } from 'antd';
+import { useRequest } from '@nocobase/client';
+import { observer, useFieldSchema } from '@formily/react';
+import { useTranslation } from 'react-i18next';
+import DOMPurify from 'dompurify';
+import { marked } from 'marked';
+
+type TocItem = {
+  id: string;
+  text: string;
+  level: number;
+};
+
+function getHtmlContent(response: unknown) {
+  if (typeof response === 'string') {
+    return response;
+  }
+
+  if (response && typeof response === 'object' && 'data' in response) {
+    const data = (response as { data?: unknown }).data;
+    return typeof data === 'string' ? data : '';
+  }
+
+  return '';
+}
+
+function decodeHtml(text: string) {
+  if (typeof document === 'undefined') return text;
+  const textarea = document.createElement('textarea');
+  textarea.innerHTML = text;
+  return textarea.value;
+}
+
+function extractTextFromContentArray(value: unknown) {
+  if (!Array.isArray(value)) return '';
+  return value
+    .map((item: any) => {
+      if (typeof item === 'string') return item;
+      if (typeof item?.text === 'string') return item.text;
+      if (typeof item?.content === 'string') return item.content;
+      return '';
+    })
+    .filter(Boolean)
+    .join('\n');
+}
+
+function extractLegacyMarkdown(html: string) {
+  const trimmed = html.trim();
+  const paragraphMatch = trimmed.match(/^<p>([\s\S]*)<\/p>$/i);
+  const maybeJson = decodeHtml(paragraphMatch?.[1] || trimmed);
+
+  if (!maybeJson.startsWith('[')) {
+    return '';
+  }
+
+  try {
+    return extractTextFromContentArray(JSON.parse(maybeJson));
+  } catch {
+    return '';
+  }
+}
+
+function normalizeGuideHtml(html: string) {
+  const legacyMarkdown = extractLegacyMarkdown(html);
+  if (legacyMarkdown) {
+    return marked.parse(legacyMarkdown) as string;
+  }
+  return html;
+}
+
+function slugify(text: string, fallback: string) {
+  const slug = text
+    .toLowerCase()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+  return slug || fallback;
+}
+
+function parseGuideContent(html: string): { html: string; toc: TocItem[] } {
+  if (typeof DOMParser === 'undefined') {
+    return { html, toc: [] };
+  }
+
+  const document = new DOMParser().parseFromString(`<article>${html}</article>`, 'text/html');
+  const article = document.querySelector('article');
+  if (!article) {
+    return { html, toc: [] };
+  }
+
+  const usedIds = new Set<string>();
+  const toc = Array.from(article.querySelectorAll('h2, h3'))
+    .map((heading, index) => {
+      const text = heading.textContent?.trim() || '';
+      if (!text) return null;
+
+      const baseId = slugify(text, `section-${index + 1}`);
+      let id = baseId;
+      let suffix = 2;
+      while (usedIds.has(id)) {
+        id = `${baseId}-${suffix}`;
+        suffix++;
+      }
+      usedIds.add(id);
+      heading.setAttribute('id', id);
+
+      return {
+        id,
+        text,
+        level: heading.tagName === 'H3' ? 3 : 2,
+      };
+    })
+    .filter(Boolean) as TocItem[];
+
+  return {
+    html: article.innerHTML,
+    toc,
+  };
+}
+
+const guideStyles = `
+  .user-guide-block .ant-card-body {
+    padding: 0;
+  }
+
+  .user-guide-shell {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    max-width: 95%;
+    margin: 0 auto;
+  }
+
+  .user-guide-shell.has-toc {
+    grid-template-columns: 220px minmax(0, 1fr);
+  }
+
+  .user-guide-toc {
+    position: sticky;
+    top: 16px;
+    align-self: start;
+    max-height: calc(100vh - 120px);
+    overflow: auto;
+    padding: 32px 0 32px 24px;
+    border-right: 1px solid #eef0f2;
+  }
+
+  .user-guide-toc-title {
+    margin-bottom: 10px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  .user-guide-toc a {
+    display: block;
+    padding: 5px 10px;
+    border-radius: 4px;
+    color: rgba(0, 0, 0, 0.66);
+    font-size: 13px;
+    line-height: 1.42;
+    text-decoration: none;
+  }
+
+  .user-guide-toc a:hover {
+    background: #f5f7fa;
+    color: #1677ff;
+  }
+
+  .user-guide-toc .level-3 {
+    padding-left: 22px;
+    font-size: 12px;
+  }
+
+  .user-guide-content {
+    max-width: 95%;
+    margin: 0 auto;
+    padding: 32px;
+    color: rgba(0, 0, 0, 0.82);
+    font-size: 15px;
+    line-height: 1.78;
+  }
+
+  .user-guide-content h1,
+  .user-guide-content h2,
+  .user-guide-content h3,
+  .user-guide-content h4 {
+    color: rgba(0, 0, 0, 0.92);
+    font-weight: 650;
+    line-height: 1.28;
+    margin: 28px 0 12px;
+  }
+
+  .user-guide-content h1:first-child,
+  .user-guide-content h2:first-child,
+  .user-guide-content h3:first-child {
+    margin-top: 0;
+  }
+
+  .user-guide-content h1 {
+    font-size: 30px;
+  }
+
+  .user-guide-content h2 {
+    font-size: 24px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e6e8eb;
+  }
+
+  .user-guide-content h3 {
+    font-size: 19px;
+  }
+
+  .user-guide-content p,
+  .user-guide-content ul,
+  .user-guide-content ol,
+  .user-guide-content table,
+  .user-guide-content blockquote,
+  .user-guide-content pre {
+    margin: 0 0 16px;
+  }
+
+  .user-guide-content ul,
+  .user-guide-content ol {
+    padding-left: 24px;
+  }
+
+  .user-guide-content li + li {
+    margin-top: 6px;
+  }
+
+  .user-guide-content table {
+    width: 100%;
+    border-collapse: collapse;
+    overflow: hidden;
+    border: 1px solid #e6e8eb;
+    border-radius: 6px;
+  }
+
+  .user-guide-content th,
+  .user-guide-content td {
+    padding: 10px 12px;
+    border: 1px solid #e6e8eb;
+    vertical-align: top;
+  }
+
+  .user-guide-content th {
+    background: #f7f8fa;
+    font-weight: 600;
+  }
+
+  .user-guide-content blockquote {
+    padding: 12px 16px;
+    border-left: 4px solid #1677ff;
+    background: #f3f8ff;
+    color: rgba(0, 0, 0, 0.76);
+  }
+
+  .user-guide-content code {
+    padding: 2px 5px;
+    border-radius: 4px;
+    background: #f2f4f7;
+    font-size: 0.92em;
+  }
+
+  .user-guide-content pre {
+    padding: 14px 16px;
+    overflow: auto;
+    border-radius: 6px;
+    background: #111827;
+    color: #f9fafb;
+  }
+
+  .user-guide-content pre code {
+    padding: 0;
+    background: transparent;
+    color: inherit;
+  }
+
+  .user-guide-content hr {
+    border: 0;
+    border-top: 1px solid #e6e8eb;
+    margin: 28px 0;
+  }
+
+  @media (max-width: 900px) {
+    .user-guide-shell.has-toc {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .user-guide-toc {
+      position: static;
+      max-height: none;
+      padding: 20px 24px 0;
+      border-right: 0;
+    }
+
+    .user-guide-content {
+      padding: 24px;
+    }
+  }
+`;
+
+export const UserGuideBlock = observer(
+  (props: any) => {
+    const fieldSchema = useFieldSchema();
+    const spaceId = props.spaceId || fieldSchema?.['x-component-props']?.spaceId;
+    const { t } = useTranslation();
+
+    const { loading, data: htmlContent } = useRequest<string>(
+      {
+        url: `aiBuildGuideSpaces:getHtml/${spaceId}`,
+      },
+      {
+        refreshDeps: [spaceId],
+        ready: !!spaceId,
+      },
+    );
+
+    if (!spaceId) {
+      return (
+        <Card style={{ padding: 24, textAlign: 'center', color: '#888' }}>
+          {t('Please select a User Guide Space in block settings')}
+        </Card>
+      );
+    }
+
+    if (loading) {
+      return (
+        <Card style={{ padding: 24, textAlign: 'center' }}>
+          <Spin size="large" />
+        </Card>
+      );
+    }
+
+    const guide = parseGuideContent(normalizeGuideHtml(getHtmlContent(htmlContent)));
+    const showToc = guide.toc.length > 2;
+
+    return (
+      <Card bordered={false} className="user-guide-block" style={{ width: '100%', minHeight: 300 }}>
+        <style>{guideStyles}</style>
+        {guide.html ? (
+          <div className={`user-guide-shell${showToc ? ' has-toc' : ''}`}>
+            {showToc && (
+              <nav className="user-guide-toc">
+                <div className="user-guide-toc-title">{t('Contents')}</div>
+                {guide.toc.map((item) => (
+                  <a key={item.id} href={`#${item.id}`} className={`level-${item.level}`}>
+                    {item.text}
+                  </a>
+                ))}
+              </nav>
+            )}
+            <article
+              className="user-guide-content"
+              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(guide.html) }}
+            />
+          </div>
+        ) : (
+          <Empty description={t('No guide content available')} style={{ padding: 32 }} />
+        )}
+      </Card>
+    );
+  },
+  { displayName: 'UserGuideBlock' },
+);

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/UserGuideManager.tsx

@@ -12,25 +12,53 @@ import { createForm } from '@formily/core';
 import { useForm } from '@formily/react';
 import { App } from 'antd';
 import { useTranslation } from 'react-i18next';
-import { spacesSchema } from './schemas/spacesSchema';
+import {
+  DEFAULT_TARGET_CHAPTER_COUNT,
+  MAX_TARGET_CHAPTER_COUNT,
+  MIN_TARGET_CHAPTER_COUNT,
+  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 };
-  };
+import { ModelSelect } from './components/ModelSelect';
+import { StatusTag } from './components/StatusTag';
+import { BuildButton } from './components/BuildButton';
+
+const normalizeTargetChapterCount = (value: unknown) => {
+  const count = Number(value);
+  if (!Number.isFinite(count)) return DEFAULT_TARGET_CHAPTER_COUNT;
+  return Math.max(MIN_TARGET_CHAPTER_COUNT, Math.min(MAX_TARGET_CHAPTER_COUNT, Math.round(count)));
+};
+
+export const UserGuideManager = () => {
+  const { t } = useTranslation();
+
+  const useCreateFormProps = () => {
+    const form = useMemo(
+      () =>
+        createForm({
+          initialValues: {
+            targetChapterCount: DEFAULT_TARGET_CHAPTER_COUNT,
+          },
+        }),
+      [],
+    );
+    return { form };
+  };
+
+  const useEditFormProps = () => {
+    const record = useCollectionRecordData();
+    const form = useMemo(
+      () =>
+        createForm({
+          initialValues: {
+            ...record,
+            targetChapterCount: normalizeTargetChapterCount(record?.targetChapterCount),
+          },
+        }),
+      [record],
+    );
+    return { form };
+  };
 
   const useCancelActionProps = () => {
     const { setVisible } = useActionContext();
@@ -42,11 +70,12 @@ export const UserGuideManager = () => {
     };
   };
 
-  const normalizeValues = (values: any) => {
-    const { documents, ...rest } = values;
-    if (Array.isArray(documents)) {
-      rest.documents = documents.map((doc: any) => (typeof doc === 'object' && doc?.id ? { id: doc.id } : doc));
-    }
+  const normalizeValues = (values: any) => {
+    const { documents, ...rest } = values;
+    rest.targetChapterCount = normalizeTargetChapterCount(rest.targetChapterCount);
+    if (Array.isArray(documents)) {
+      rest.documents = documents.map((doc: any) => (typeof doc === 'object' && doc?.id ? { id: doc.id } : doc));
+    }
     return rest;
   };
 

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())
+      }
+    />
+  );
+};