@mybricks/plugin-ai 0.0.1 → 0.0.3

package/src/tools/get-component-info-by-ids.ts

@@ -1,166 +0,0 @@
-import { fileFormat } from '@mybricks/rxai'
-import { getFiles } from './utils'
-
-interface GetComponentInfoParams {
-  getComInfo: (namespace: string) => string
-  getComJson: (id: string) => string
-  getPageJson: (id: string) => string
-}
-
-export default function getComponentsInfoByIds(config: GetComponentInfoParams, ): any {
-  return {
-    name: 'get-components-info-by-id',
-    displayName: "获取组件配置文档",
-    description: `通过现有的元素ID（组件或页面）获取「当前元素及其所有子组件」的DSL（包含父子结构信息和当前搭建信息）和涉及的组件配置文档。
-参数：元素ID；
-作用：获取组件的配置文档和当前元素DSL（包含父子结构信息和当前搭建信息），用于后续修改组件；
-返回值：相关组件的配置文档和当前元素DSL；
-`,
-    getPrompts: () => {
-        return `<工具总览>
-你是一个可以获取组件配置文档和搭建信息工具，你作为MyBricks低代码平台（以下简称MyBricks平台或MyBricks）的资深页面搭建助手，可以选中组件的ID，返回组件的各类上下文。
-</工具总览>
- 
-<任务流程>
-  按照以下格式返回所要获取上下文的所有组件：
-    ${fileFormat({ content: '{ "id": "u_23ver", "type": "com" }', fileName: '需要获取上下文的组件ID.json' })}
-    - type为 *page* 或 *com* ；
-    - 注意：文件内容注意不要出现语法错误，文件声明要保持一致；
-</任务流程>`
-      },
-    lastAppendMessage: '已提供组件文档和搭建配置，请继续。',
-    execute({ files, content }) {
-      const selectFile = getFiles(files, { extName: 'json' });
-      let selectId,selectType
-      try {
-        selectId = JSON.parse(selectFile?.content)?.id;
-        selectType = JSON.parse(selectFile?.content)?.type;
-      } catch (error) {}
-
-      if (!selectId) {
-        return '没有选择的组件ID'
-      }
-
-      const { jsx, namespaces } = getComponentsInfoByJson(selectType === 'page' ? config.getPageJson(selectId) : config.getComJson(selectId))
-
-      const docs = namespaces.reduce((acc, cur) => {
-        return acc + '\n' + config.getComInfo(cur)
-      }, '')
-
-      return `<元素${selectId}的DSL>
-${jsx}
-</元素${selectId}的DSL>
-
-<关联的所有组件配置文档>
-${docs}
-</关联的所有组件配置文档>`
-    },
-  }
-}
-
-
-interface GetComponentsResult {
-  jsx: string;
-  namespaces: string[];
-}
-
-function getComponentsInfoByJson(data: any): GetComponentsResult {
-  const namespacesSet = new Set<string>(); // 使用Set去重
-  
-  // 生成插槽JSX
-  function generateSlotsJSX(slots: any[], indent = '  ') {
-    if (!slots || slots.length === 0) return '';
-    
-    let slotsJSX = '';
-    slots.forEach(slot => {
-      if (slot.id) {
-        slotsJSX += `\n${indent}<slots.${slot.id}>`;
-        
-        // 如果插槽有组件，递归处理
-        if (slot.components && Array.isArray(slot.components)) {
-          slot.components.forEach(component => {
-            const childJSX = generateComponentJSX(component, indent + '    ');
-            if (childJSX) {
-              slotsJSX += `\n${indent}  ${childJSX}`;
-            }
-          });
-        }
-        
-        slotsJSX += `\n${indent}</slots.${slot.id}>`;
-      }
-    });
-    
-    return slotsJSX;
-  }
-  
-  // 生成单个组件的JSX
-  function generateComponentJSX(node: any, indent = '') {
-    if (!node || !node.id) return '';
-    
-    const namespace = node.def?.namespace || 'content';
-    namespacesSet.add(namespace); // 添加到namespace集合
-    
-    const dataStr = JSON.stringify(node.data || {});
-    let jsx = `<${namespace} id="${node.id}" data={${dataStr}}`;
-    
-    // 处理插槽
-    const slotsJSX = generateSlotsJSX(node.slots || [], indent + '  ');
-    if (slotsJSX) {
-      jsx += slotsJSX;
-      jsx += `\n${indent}</${namespace}>`;
-    } else {
-      jsx += ` />`;
-    }
-    
-    return jsx;
-  }
-  
-  // 递归处理数据
-  function processData(node: any) {
-    if (!node) return '';
-    
-    // 如果是数组，遍历每个元素
-    if (Array.isArray(node)) {
-      let result = '';
-      node.forEach((item, index) => {
-        const jsx = processData(item);
-        if (jsx) {
-          result += jsx;
-          if (index < node.length - 1) {
-            result += '\n';
-          }
-        }
-      });
-      return result;
-    }
-    
-    // 如果是组件节点
-    if (node.id) {
-      return generateComponentJSX(node);
-    }
-    
-    // 处理slots中的组件
-    if (node.slots && Array.isArray(node.slots)) {
-      let result = '';
-      node.slots.forEach(slot => {
-        if (slot.components && Array.isArray(slot.components)) {
-          const slotResult = processData(slot.components);
-          if (slotResult) {
-            result += slotResult;
-          }
-        }
-      });
-      return result;
-    }
-    
-    return '';
-  }
-  
-  // 开始处理
-  const jsx = processData(data);
-  
-  return {
-    jsx,
-    namespaces: Array.from(namespacesSet) // 转换为数组并去重
-  };
-}

package/src/tools/get-component-info.ts

@@ -1,53 +0,0 @@
-import { fileFormat } from '@mybricks/rxai'
-import { getFiles } from './utils'
-
-interface GetComponentInfoParams {
-  getComInfo: (id: string) => string
-}
-
-/**
- * 
- * @deprecated 信息不完整，后面估计要废弃了
- * @param config 
- * @returns 
- */
-export default function getComponentsInfoByIds(config: GetComponentInfoParams, ): any {
-  return {
-    name: 'get-components-info-by-ids',
-    displayName: "获取组件配置文档",
-    description: `通过现有的组件ID获取当前组件的配置文档和当前组件搭建配置。
-参数：组件ID；
-作用：获取组件的配置文档和当前搭建信息，用于后续修改组件；
-返回值：相关组件的配置文档和搭建配置；
-
-注意：搭建配置不包含DSL（没有子组件信息），仅包含当前组件的配置信息。
-`,
-    getPrompts: () => {
-        return `<工具总览>
-你是一个可以获取组件配置文档和搭建信息工具，你作为MyBricks低代码平台（以下简称MyBricks平台或MyBricks）的资深页面搭建助手，可以选中要返回组件的ID返回组件的各类上下文。
-</工具总览>
- 
-<任务流程>
-  按照以下格式返回所要获取上下文的所有组件：
-    ${fileFormat({ content: '[{ "id": "u_23ver" }, { "id": "u_9sdi2" }]', fileName: '需要获取上下文的组件ID列表.json' })}
-    - 注意：文件内容注意不要出现语法错误，文件声明要保持一致；
-</任务流程>`
-      },
-    lastAppendMessage: '已提供组件文档和搭建配置，请继续。',
-    execute({ files, content }) {
-      const idsFile = getFiles(files, { extName: 'json' });
-      let ids = [];
-      try {
-        ids = JSON.parse(idsFile?.content);
-      } catch (error) {}
-
-      const docs = ids.reduce((acc, cur) => {
-        return acc + '\n' + config.getComInfo(cur.id)
-      }, '')
-
-      return `<组件配置文档和搭建情况>
-${docs}
-</组件搭建文档和搭建情况>`
-    },
-  }
-}

package/src/tools/get-components-doc-and-prd.ts

@@ -1,137 +0,0 @@
-import { fileFormat } from '@mybricks/rxai'
-
-interface GetComponentsDocAndPrdToolParams {
-  allowComponents: string;
-  examples: string;
-  canvasWidth: string;
-  queryComponentsDocsByNamespaces: (
-    namespaces: [{ namespace: string }],
-  ) => string;
-}
-
-export default function getComponentsDocAndPrd(config: GetComponentsDocAndPrdToolParams, ): any {
-  return {
-    name: 'generate-page-prd-and-require-component',
-    displayName: "理解和整理当前页面需求",
-    description: `整理/扩写需求/分析图片 + 组件选型，是页面搭建/生成的前置操作。
-前置要求：用户提出过搭建页面需求
-参数：用户需求（可能是文本，一句话、图片附近、文件附件等需求）
-返回值：需求分析规格说明书（PRD）文件 + 组件选型；`,
-    aiRole: "expert",
-    getPrompts: () => {
-        return `<工具总览>
-你是一个获取组件文档和用户需求的工具，你作为MyBricks低代码平台（以下简称MyBricks平台或MyBricks）的资深页面搭建助手，拥有专业的产品经理能力。
-你的任务是根据「允许使用的组件及其说明」，整理或扩写用户的需求（如果有图片附件、需要参考图片中的内容，对图片详细理解），并将需求中可能用到的组件列出来整理成「需求文档」和「组件使用文档」。
-
-提示：MyBricks是用来通过AI+可视化搭建的方式生成各类应用的生产力工具，用户可以与AI沟通、让AI搭建完成一部分内容，以及通过拖拽、配置等方式，快速搭建出各类应用。
-</工具总览>
-
-<任务流程>
-  根据「用户需求」和「搭建上下文」，按照以下格式返回内容：
-    ${fileFormat({ content: '(需求分析规格说明书的内容)', fileName: 'XX需求文档.md' })}
-    
-    ${fileFormat({ content: '(搭建所需要的组件选型)', fileName: 'XX需求组件选型.json' })}
-    - - 注意：文件内容注意不要出现语法错误，文件声明要保持一致；
-</任务流程>
-
-
-<允许使用的组件及其说明>
-
-${config.allowComponents}
-
-  注意：
-    - 以上是允许使用的组件及说明，包括了 title、type、namespace、description等信息；
-    - 在回答各类问题或者搭建页面时，只能使用上述范围的组件，禁止臆造内容；
-</允许使用的组件及其说明>
-    
-</MyBricks组件>
-
-<你的工作流程>
-  按照以下步骤完成prd(需求分析规格说明书)文件：
-  1、总体需求分析，详细分析用户需求：
-    1.1）首先，确定总体的功能，描述整体的概述信息
-
-    其次，我们需要区分用户的目的是「还原设计稿/图片效果」还是「根据自然语言/原型文件/草稿生成应用」，在「还原设计稿/图片效果」下，需要关注画布和设计稿图片的尺寸风险。
-    1.2 ）确定设计风格、布局和内容、颜色样式、文案内容、特别注意事项、风险提示等内容，其中：
-    - 设计风格(themes)：包括风格、色系、字号等，总体按照现代简洁、扁平化、美观大方的原则，注意色彩结构紧凑、搭配合理、字体清晰；
-    - 布局和内容(layout)：总体的布局结构，以及各个区块内的元素位置、视觉、亮点等；
-    - 颜色样式(colors)：考虑主色调、辅助色调、背景颜色、字体颜色、按钮颜色、边框颜色等；
-    - 特别注意事项(attention)：界面中的一些设计细节，例如背景、定位、圆角、特别的图标等；
-    - 风险提示(risk)：
-      > 如果是「还原设计稿/图片效果」，关注画布和图片尺寸不一致的风险；
-        目标画布是${config.canvasWidth}*任意高度的尺寸，需要依据参考图片宽度（事实值，不要捏造）给出可能的风险，一般来说存在两种情况：
-          如果是，图片宽度比画布大，那一定存在内容多大/过多溢出的情况，此时需要你发现并列出以下风险：
-            - 风险分类一：自适应布局
-              - 看起来间距相等、宽度相似的排列，在目标画布上，建议使用宽度固定的均分/网格布局来实现；
-            - 风险分类二：避免遮挡
-              - 内容丰富的卡片，考虑文本需要缩小到一个较小的值避免遮挡；
-              - 兄弟元素的互相影响，比如居右有一个头像，文本居右但是在头像左侧，需要注意位置计算，文本不要遮挡到头像；
-            - 风险分类三：错误的宽度
-              - 设置宽度时，父节点及其上层节点的宽度（扣除各类间距），避免超出画布宽度；
-          如果是，图片宽度比画布小，那一定存在留白的情况，此时需要你发现并列出以下风险：
-            - 风险分类一：自适应布局
-              - 看看起来间距相等、宽度相似的排列，在目标画布上，建议使用宽度固定的均分/网格布局来实现；
-          主要是大图片缩放后尺寸别溢出，小图片缩放后别留白。
-      > 如果是「根据自然语言/原型文件/草稿生成应用」，关注需求细节不要遗漏的风险；
-
-    > 特别注意：
-      - 你只需要客观事实地描述需求的元素排列即可，可以告知用户风险，不允许出现直接的布局建议以及组件使用建议（比如flex布局、弹性布局，比如使用XX组件，比如CSS代码）；
-      - 斟酌你的用词，使用通用的名词（比如卡片、内容、文本、图片、图标），禁止使用带有语义的名词（比如选项卡，会被误解成某个组件）来描述元素；
-    
-  2、根据需求分析，详细拆解所需要的组件，注意：
-    - 根据业务类型选择合理的技术方案（类库、组件、图标等），注意不要超出允许的范围；
-    - 禁止主观臆造不存在的组件等，只能基于事实上提供的组件进行；
-    - 组件选型不要想当然的认为英文的namespace就是语义化的，更多关注于中文描述和「何时使用」「注意事项」来判断应该使用什么组件。
-  
-  接下来，根据上述分析，按照以下格式返回内容：
-  ${fileFormat({ content: '(需求分析规格说明书的内容)', fileName: 'XX需求文档.md' })}
-  
-  ${fileFormat({ content: '(搭建所需要的组件选型)', fileName: 'XX需求组件选型.json' })}
-  
-  注意：require.json文件要严格按照JSON格式返回，注意不要出现语法错误；
-  
-</你的工作流程>
-
-
-<examples>
-${config.examples}
-</examples>
-`
-      },
-    execute({ files, content }) {
-      let prdFile: File | undefined = undefined, requireComsFile: File | undefined = undefined;
-      Object.keys(files).forEach((fileKey) => {
-        const file: File = files[fileKey] as File;
-        if (file.extension === 'md') {
-          prdFile = file
-        }
-
-        if (file.extension === 'json') {
-          requireComsFile = file
-        }
-      })
-
-      let requireComponents = [];
-      try {
-        requireComponents = JSON.parse(requireComsFile?.content);
-      } catch (error) {}
-      const requireComponentsDocs = config.queryComponentsDocsByNamespaces(requireComponents);
-        return `<需求文档>
----
-${prdFile?.name}    
----
-
-${prdFile?.content}
-</需求文档>
-
-<允许使用的组件知识库文档>
----
-${requireComsFile?.name}    
----
-
-${requireComponentsDocs}
-
-</允许使用的组件知识库文档>`
-    },
-  }
-}

package/src/tools/get-focus-mybricks-dsl.ts

@@ -1,26 +0,0 @@
-import { fileFormat } from '@mybricks/rxai'
-import { getFiles } from './utils'
-
-interface GetMybricksDslToolParams {
-  id: string
-  getFocusContext: () => string;
-}
-
-export default function getMybricksDsl(config: GetMybricksDslToolParams): any {
-  return {
-    name: 'get-focus-mybricks-dsl-by-id',
-    displayName: "获取当前搭建上下文",
-    description: `获取聚焦（页面/组件）的完整当前搭建内容，特别是子组件内容，包括搭建的DSL、结构、组件层级、配置信息等。
-返回值：聚焦元素的完整DSL结构，包括搭建的组件id、层级、配置信息等；
-
-注意：信息不包含组件配置文档。
-`,
-    lastAppendMessage: '已提供上下文，请继续。',
-    execute() {
-      const contextDoc = config.getFocusContext();
-      return `<元素${config.id}的上下文信息>
-${contextDoc}
-</元素${config.id}的上下文信息>`
-    },
-  }
-}

package/src/tools/get-mybricks-dsl.ts

@@ -1,73 +0,0 @@
-import { fileFormat } from '@mybricks/rxai'
-import { getFiles } from './utils'
-
-interface GetMybricksDslToolParams {
-  getContext: (
-    id: string,
-    type: 'com' | 'page'
-  ) => string;
-}
-
-export default function getMybricksDsl(config: GetMybricksDslToolParams): Tool {
-  return {
-    name: 'get-mybricks-dsl-by-id',
-    displayName: "根据ID获取（页面/组件）的完整内容",
-    description: `根据ID获取（页面/组件）的完整内容，包括搭建的DSL、结构、组件层级、配置信息等。
-参数：元素ID（页面ID或者组件ID）；
-返回值：页面的完整上下文信息，包括搭建的DSL结构、组件id、层级、配置信息等；
-`,
-    getPrompts: () => {
-      return `<工具总览>
-你是一个上下文分析工具，作为MyBricks低代码平台（以下简称MyBricks平台或MyBricks）的资深页面分析助手，拥有专业的技术分析能力。
-你的任务是选择需要获取上下文的「元素ID」，系统会自动根据ID返回页面的完整上下文信息。
-</工具总览>
- 
-<任务流程>
-  选中需要获取上下文的「元素ID」：
-    ${fileFormat({ content: '{ "id": "u_s1213"， "type": "com" }', fileName: '选择的元素.json' })}
-    - 注意：要严格按照此格式返回，注意不要出现语法错误；
-</任务流程>
-
-<关于返回值>
-  只能按照「任务流程」设计，返回选择的「元素ID」和「类型」。
-  注意：
-  type：固定为 "com" 或 "page"，表示组件或页面；
-</关于返回值>
-
-<examples>
-  <example>
-    <user_query>解释一下组件u_s1213的搭建结构</user_query>
-    <assistant_response>
-    解释搭建结构，需要先获取组件u_s1213的搭建DSL，才能开始分析。
-    ${fileFormat({ content: '{ "id": "u_s1213", "type": "com" }', fileName: '选择的元素.json' })}
-    </assistant_response>
-  </example>
-  <example>
-    <user_query>我聚焦的页面是有什么内容</user_query>
-    <assistant_response>
-    解释内容，需要先获取页面u_pju67的搭建DSL，才能开始分析。
-    ${fileFormat({ content: '{ "id": "u_pju67", "type": "page" }', fileName: '选择的元素.json' })}
-    </assistant_response>
-  </example>
-</examples>
-`
-    },
-    execute({ files, content }) {
-      const selectFile = getFiles(files, { extName: 'json' })
-
-      let selectDom
-      try {
-        selectDom = JSON.parse(selectFile?.content)
-      } catch (error) {}
-
-      if (!selectDom?.id) {
-        return '未获取到元素ID，请重新选择'
-      }
-   
-      const contextDoc = config.getContext(selectDom?.id, selectDom?.type);
-      return `<元素${selectDom?.id}的上下文信息>
-${contextDoc}
-</元素${selectDom?.id}的上下文信息>`
-    },
-  }
-}

package/src/tools/index.ts

@@ -1,25 +0,0 @@
-import GeneratePage from './generate-page';
-import GetComponentsDocAndPrd from './get-components-doc-and-prd';
-import ModifyComponent from './modify-component'
-import GetMybricksDSL from './get-mybricks-dsl';
-import GetFocusMybricksDSL from './get-focus-mybricks-dsl';
-import FocusElement from './focus-element'
-import GetComponentInfo from './get-component-info'
-import GetComponentsInfoByIds from './get-component-info-by-ids';
-import AnswerUser from './answer-user';
-import AnalyzeAndExpandPrd from './analyze-and-expand-prd';
-
-export const MYBRICKS_TOOLS = {
-  GeneratePage,
-  GetComponentsDocAndPrd,
-  ModifyComponent,
-  // GetMybricksDSL,
-  GetFocusMybricksDSL,
-  GetComponentInfo,
-  GetComponentsInfoByIds,
-  AnalyzeAndExpandPrd,
-  // AnswerUser
-  // FocusElement
-}
-
-export { MyBricksHelper } from './utils'