@mybricks/plugin-ai 0.0.1 → 0.0.2

package/src/agents/workspace/outline-focus.ts

@@ -0,0 +1,188 @@
+import { OutlineInfoManager, type OutlineNode, type SlotInfo } from './outline-info';
+import { ComponentsManager } from './components-manager'
+
+export interface FocusInfo {
+  pageId?: string;
+  comId?: string;
+  title?: string;
+  type?: 'page' | 'uiCom' | 'section' | 'logicCom';
+  focusArea?: {
+    selector: string;
+    title: string;
+  }
+  diagramId?: string;
+}
+
+class PageHierarchyGenerator {
+  static generate(outlineInfo: OutlineNode, currentFocus: FocusInfo): string {
+    const processedData = currentFocus.type === 'uiCom'
+      ? this.filterToFocusedComponent(outlineInfo, currentFocus.comId!)
+      : outlineInfo;
+
+    return this.generateTreeDescription(processedData as OutlineNode, {
+      pageId: currentFocus.pageId,
+      comId: currentFocus.comId,
+    });
+  }
+
+  private static containsComponent(data: OutlineNode, targetId: string): boolean {
+    if (!data) return false;
+    if (data.id === targetId) return true;
+
+    if (data.slots && Array.isArray(data.slots)) {
+      return data.slots.some(slot => {
+        if (slot.components && Array.isArray(slot.components)) {
+          return slot.components.some(component => this.containsComponent(component, targetId));
+        }
+        return false;
+      });
+    }
+    return false;
+  }
+
+  private static hasChildren(data: OutlineNode): boolean {
+    if (!data?.slots || !Array.isArray(data.slots)) {
+      return false;
+    }
+    return data.slots.some(slot => {
+      return slot.components && Array.isArray(slot.components) && slot.components.length > 0;
+    });
+  }
+
+  private static filterToFocusedComponent(data: OutlineNode, targetId: string): OutlineNode | null {
+    if (!data) return null;
+
+    if (data.id === targetId) {
+      return data;
+    }
+
+    if (data.slots && Array.isArray(data.slots)) {
+      const filteredSlots = data.slots.map(slot => {
+        if (slot.components && Array.isArray(slot.components)) {
+          const filteredComponents = slot.components.map(component => {
+            if (this.containsComponent(component, targetId)) {
+              return this.filterToFocusedComponent(component, targetId);
+            } else {
+              const hasChildComponents = this.hasChildren(component);
+              return {
+                ...component,
+                slots: undefined,
+                _hasCollapsedChildren: hasChildComponents
+              };
+            }
+          }).filter(Boolean) as OutlineNode[];
+
+          return filteredComponents.length > 0 ? { ...slot, components: filteredComponents } : null;
+        }
+        return null;
+      }).filter(Boolean) as SlotInfo[];
+
+      if (filteredSlots.length > 0) {
+        return { ...data, slots: filteredSlots };
+      }
+    }
+    return null;
+  }
+
+  private static generateTreeDescription(data: OutlineNode | OutlineNode[], focusInfo: FocusInfo, level = 0): string {
+    const indent = '  '.repeat(level);
+    let result = '';
+
+    if (!data) {
+      return '无内容，代表内容为空';
+    }
+
+    if (Array.isArray(data)) {
+      if (data.length === 0) {
+        return '无内容，代表内容为空';
+      }
+      data.forEach(item => {
+        result += this.generateTreeDescription(item, focusInfo, level);
+      });
+      return result;
+    }
+
+    if (data.asRoot) {
+      if (Array.isArray(data.slots?.[0]?.components)) {
+        data.slots?.[0]?.components.forEach(component => {
+          result += this.generateTreeDescription(component, focusInfo, level);
+        });
+        return result;
+      }
+    }
+
+    if (data.title) {
+      const namespace = data.def?.namespace;
+      const isFocused = data.id === focusInfo.comId ||
+        data.id === focusInfo.pageId;
+      const focusMarker = isFocused ? ' 【当前聚焦】' : '';
+      const collapsedMarker = data._hasCollapsedChildren ? ' 【子组件已折叠】' : '';
+
+      result += `${indent}- ${data.title}[id=${data.id}]${namespace ? `(${ComponentsManager.getAbbreviation(namespace)})` : ''}${focusMarker}${collapsedMarker}\n`;
+    }
+
+    if (data.slots && Array.isArray(data.slots)) {
+      data.slots.forEach(slot => {
+        if (slot.components && Array.isArray(slot.components)) {
+          slot.components.forEach(component => {
+            result += this.generateTreeDescription(component, focusInfo, level + 1);
+          });
+        }
+      });
+    }
+
+    return result;
+  }
+}
+
+class FocusDescriptionGenerator {
+  static generate(currentFocus: FocusInfo): string {
+    const { pageId, comId, title, type } = currentFocus ?? {};
+
+    if (!currentFocus || (!currentFocus.pageId && !currentFocus.comId)) {
+      return '当前没有聚焦到任何页面或组件。';
+    }
+
+    let focusDesc = '';
+
+    switch (type) {
+      case 'uiCom':
+        focusDesc = `组件(title=${title},组件id=${comId})`;
+        break;
+      case 'page':
+      case 'section':
+        focusDesc = `页面(title=${title},页面id=${pageId})`;
+        break;
+      default:
+        focusDesc = `未知类型(title=${title})`;
+    }
+
+    return `当前已聚焦到${focusDesc}中，后续用户的提问，关于"这个"、"此"、"整体"，甚至不提主语，都是指代此元素及其子组件内容。`;
+  }
+}
+
+export class FocusOutlineInfoManager extends OutlineInfoManager {
+  private focusInfo: FocusInfo;
+  private focusPageOutlineInfo: OutlineNode | null;
+
+  constructor({ api, focusInfo }: { api: any, focusInfo: FocusInfo }) {
+    super({ api });
+    this.focusInfo = { ...focusInfo };
+    this.focusPageOutlineInfo = focusInfo?.pageId ? this.getPageOutline(focusInfo.pageId) : null;
+  }
+
+  getFocusPageOutline(): OutlineNode | null {
+    return this.focusPageOutlineInfo;
+  }
+
+  generateFocusHierarchy(): string {
+    if (!this.focusPageOutlineInfo || !this.focusInfo?.pageId) {
+      return '无内容，代表内容为空';
+    }
+    return PageHierarchyGenerator.generate(this.focusPageOutlineInfo, this.focusInfo);
+  }
+
+  generateFocusDescription(): string {
+    return FocusDescriptionGenerator.generate(this.focusInfo);
+  }
+}

package/src/agents/workspace/outline-info.ts

@@ -0,0 +1,520 @@
+import { ComponentsManager } from "./components-manager";
+
+export interface SlotInfo {
+  id: string;
+  title?: string;
+  layout?: any;
+  components?: OutlineNode[];
+}
+
+export interface OutlineNode {
+  id: string;
+  title: string;
+  def?: {
+    namespace?: string;
+  };
+  asRoot?: boolean;
+  data?: any;
+  style?: any;
+  slots?: SlotInfo[];
+  _hasCollapsedChildren?: boolean;
+}
+
+// 设计器给出的 OutlineNode
+export interface OriginOutlineNode extends OutlineNode {
+  components: OutlineNode[]
+  layout: {
+    width: string | number
+    height: string | number
+  }
+}
+
+
+export interface ComponentsResult {
+  id: string;
+  jsx: string;
+  namespaces: string[];
+}
+
+const ROOT_NAMESPACE = 'root';
+const ROOT_ID = '_root_';
+const ROOT_SLOT_ID = '_rootSlot_';
+
+export class OutlineInfoManager {
+
+  api: any;
+
+  constructor({ api }: { api: any }) {
+    this.api = api;
+  }
+
+  private getOutlineInfo(id: string, type: string): OriginOutlineNode {
+    if (type === "logicCom") {
+      return this.api?.logicCom?.api?.getOutlineInfo(id)
+    } else if (type === "uiCom") {
+      return this.api?.uiCom?.api?.getOutlineInfo(id)
+    } else {
+      return this.api?.page?.api?.getOutlineInfo(id)
+    }
+  }
+
+  getPageOutline(pageId: string) {
+    return this.normalizePageOutline(this.getOutlineInfo(pageId, 'page'), pageId);
+  }
+
+  getUiComOutline(componentId: string) {
+    return this.getOutlineInfo(componentId, 'uiCom');
+  }
+
+  getLogicComOutline(componentId: string) {
+    return this.getOutlineInfo(componentId, 'logicCom');
+  }
+
+  private getOriginOutlineRootCom = (originOutline: OriginOutlineNode) => {
+    return originOutline?.components?.[0]?.asRoot ? originOutline?.components?.[0] : null
+  }
+
+  getPageMetaInfo(pageId: string) {
+    const originOutlineJson =  this.getOutlineInfo(pageId, 'page')
+
+    const rootId = this.getOriginOutlineRootCom(originOutlineJson) ? this.getOriginOutlineRootCom(originOutlineJson)?.id : undefined;
+
+    return {
+      pageId,
+      rootId
+    }
+  }
+  
+
+  private normalizePageOutline(outline: OriginOutlineNode, pageId: string): OutlineNode {
+    if (outline?.id === pageId) {
+
+      let rootNode: OutlineNode = outline
+      let rootSlots: SlotInfo[] | undefined = [{
+        id: ROOT_SLOT_ID,
+        components: outline?.components,
+        layout: outline?.layout
+      }];
+      const whInfo: any = {
+        width: outline?.layout?.width,
+        height: outline?.layout?.height,
+      }
+
+      // 说明有asRoot组件，把asRoot的信息往上提取一层
+      const rootCom = this.getOriginOutlineRootCom(outline)
+      if (!!rootCom) {
+        rootNode = rootCom;
+        rootSlots = rootNode.slots
+      }
+
+      const normalized = {
+        ...rootNode,
+        style: {
+          ...(rootNode.style ?? {}),
+          ...whInfo, // 注意用的是页面的宽高
+        },
+        slots: rootSlots,
+        def: {
+          version: '1.0.0',
+          namespace: ROOT_NAMESPACE
+        },
+        asRoot: true
+      };
+
+      return {
+        id: pageId,
+        title: outline.title, // 注意用的是页面的title
+        slots: [{ id: ROOT_ID, components: [normalized] }]
+      };
+    }
+
+    return {
+      id: pageId,
+      title: outline.title,
+      slots: [{ id: ROOT_ID, components: [outline] }]
+    };
+  }
+
+  getComponentIdToTitleMap(pageId: string) {
+    const outline = this.getPageOutline(pageId);
+    const componentMap = new Map<string, string>();
+
+    componentMap.set(ROOT_ID, outline.title ?? '页面根节点');
+
+    function traverse(data: any) {
+      if (!data) return;
+
+      if (Array.isArray(data)) {
+        data.forEach(item => traverse(item));
+        return;
+      }
+
+      if (data.id && data.title) {
+        componentMap.set(data.id, data.title);
+      }
+
+      if (data.slots && Array.isArray(data.slots)) {
+        data.slots.forEach((slot: SlotInfo) => {
+          if (slot.components && Array.isArray(slot.components)) {
+            slot.components.forEach(component => traverse(component));
+          }
+        });
+      }
+    }
+
+    traverse(outline);
+    return componentMap;
+  }
+
+  generateJSXByPageId(pageId: string, targetComponentIds: string[] = []): ComponentsResult {
+    const outline = this.getPageOutline(pageId);
+    return this.generateJSXByOutline(outline, targetComponentIds);
+  }
+
+  generateJSXByOutline(outlineInfo: OutlineNode, targetComponentIds: string[] = []): ComponentsResult {
+    return OutlineJSXGenerator.generate(outlineInfo, targetComponentIds);
+  }
+
+  findParentNodeByComId(pageOutlineInfo: OutlineNode, comId: string): OutlineNode | null {
+    function helper(node: OutlineNode): OutlineNode | null {
+      if (!node || !node.slots) return null;
+      for (const slot of node.slots || []) {
+        if (slot.components && Array.isArray(slot.components)) {
+          for (const component of slot.components) {
+            if (component.id === comId) {
+              return node;
+            }
+            // 向下递归
+            const found = helper(component);
+            if (found) return found;
+          }
+        }
+      }
+      return null;
+    }
+    return helper(pageOutlineInfo);
+  }
+}
+
+class OutlineJSXGenerator {
+  private static namespacesSet = new Set<string>();
+
+  /**
+   * 遮蔽base64和svg代码，避免DSL过大
+   */
+  private static maskLargeContent(obj: any): any {
+    if (obj === null || obj === undefined) {
+      return obj;
+    }
+
+    // 如果是字符串，检查是否为base64或svg
+    if (typeof obj === 'string') {
+      // 检测base64图片（data:image开头或长base64字符串）
+      if (obj.startsWith('data:image/') || /^[A-Za-z0-9+/=]{100,}$/.test(obj)) {
+        const prefix = obj.substring(0, 22);
+        return `[BASE64_MASKED:${prefix}...length:${obj.length}]`;
+      }
+      // 检测SVG代码
+      if (obj.includes('<svg') || obj.includes('<?xml') && obj.includes('svg')) {
+        const length = obj.length;
+        if (length > 200) {
+          return `[SVG_MASKED:length:${length}]`;
+        }
+      }
+      return obj;
+    }
+
+    // 如果是数组，递归处理每个元素
+    if (Array.isArray(obj)) {
+      return obj.map(item => this.maskLargeContent(item));
+    }
+
+    // 如果是对象，递归处理每个属性
+    if (typeof obj === 'object') {
+      const result: any = {};
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          result[key] = this.maskLargeContent(obj[key]);
+        }
+      }
+      return result;
+    }
+
+    return obj;
+  }
+
+  static generate(outlineInfo: OutlineNode, targetComponentIds: string[] = []): ComponentsResult {
+    this.namespacesSet.clear();
+
+    if (targetComponentIds.length === 0) {
+      const jsx = this.processData(outlineInfo);
+      return {
+        id: outlineInfo.id,
+        jsx,
+        namespaces: Array.from(this.namespacesSet)
+      };
+    }
+
+    if (targetComponentIds.length === 1) {
+      const targetNode = this.findNodeById(outlineInfo, targetComponentIds[0]);
+      if (targetNode) {
+        const jsx = this.processData(targetNode);
+        return {
+          id: targetNode.id,
+          jsx,
+          namespaces: Array.from(this.namespacesSet)
+        };
+      }
+    }
+
+    const ancestorNodes = this.findMinimalCommonAncestors(outlineInfo, targetComponentIds);
+    const jsx = ancestorNodes.map(node => this.processData(node)).join('\n');
+
+    return {
+      id: ancestorNodes[0]?.id,
+      jsx,
+      namespaces: Array.from(this.namespacesSet)
+    };
+  }
+
+  private static findMinimalCommonAncestors(root: OutlineNode, targetIds: string[]): OutlineNode[] {
+    if (targetIds.length === 0) return [root];
+    if (targetIds.length === 1) {
+      const targetNode = this.findNodeById(root, targetIds[0]);
+      return targetNode ? [targetNode] : [];
+    }
+
+    const paths: OutlineNode[][] = [];
+    for (const targetId of targetIds) {
+      const path = this.findPathToNode(root, targetId);
+      if (path) {
+        paths.push(path);
+      }
+    }
+
+    if (paths.length === 0) {
+      return [];
+    }
+    if (paths.length === 1) {
+      return [paths[0][paths[0].length - 1]];
+    }
+
+    let commonAncestor: OutlineNode | null = null;
+    const minLength = Math.min(...paths.map(path => path.length));
+
+    for (let i = 0; i < minLength; i++) {
+      const currentNodes = paths.map(path => path[i]);
+      const firstNode = currentNodes[0];
+
+      if (currentNodes.every(node => node.id === firstNode.id)) {
+        commonAncestor = firstNode;
+      } else {
+        break;
+      }
+    }
+
+    if (commonAncestor) {
+      return [commonAncestor];
+    }
+
+    return [root];
+  }
+
+  private static findPathToNode(root: OutlineNode, targetId: string): OutlineNode[] | null {
+    if (root.id === targetId) {
+      return [root];
+    }
+
+    if (root.slots && Array.isArray(root.slots)) {
+      for (const slot of root.slots) {
+        if (slot.components && Array.isArray(slot.components)) {
+          for (const component of slot.components) {
+            const path = this.findPathToNode(component, targetId);
+            if (path) {
+              return [root, ...path];
+            }
+          }
+        }
+      }
+    }
+
+    return null;
+  }
+
+  private static findNodeById(root: OutlineNode, targetId: string): OutlineNode | null {
+    if (root.id === targetId) {
+      return root;
+    }
+
+    if (root.slots && Array.isArray(root.slots)) {
+      for (const slot of root.slots) {
+        if (slot.components && Array.isArray(slot.components)) {
+          for (const component of slot.components) {
+            const found = this.findNodeById(component, targetId);
+            if (found) return found;
+          }
+        }
+      }
+    }
+
+    return null;
+  }
+
+  private static extractLayout(style: any): Record<string, any> {
+    if (!style) return {};
+
+    const layout: Record<string, any> = {};
+
+    ['width', 'height', 'margin', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom']
+      .forEach(prop => {
+        if (style[prop] !== undefined) {
+          layout[prop] = style[prop];
+        }
+      });
+
+    if (style.layout !== undefined) {
+      if (style.layout === 'flex-column' || style.layout === 'flex') {
+        layout.display = 'flex';
+        layout.flexDirection = 'column';
+      }
+      if (style.layout === 'flex-row') {
+        layout.display = 'flex';
+        layout.flexDirection = 'row';
+      }
+      if (style.alignItems) layout.alignItems = style.alignItems;
+      if (style.justifyContent) layout.justifyContent = style.justifyContent;
+      if (style.layout === 'absolute') {
+        layout.position = 'relative';
+      }
+    }
+
+    if (style.position === 'absolute') {
+      ['left', 'right', 'top', 'bottom', 'widthFact', 'heightFact', 'position']
+        .forEach(prop => {
+          if (style[prop] !== undefined) {
+            layout[prop] = style[prop];
+          }
+        })
+    }
+
+    return layout;
+  }
+
+  private static extractStyleArray(style: any): string[] {
+    if (!style?.css || !Array.isArray(style.css)) return [];
+
+    return style.css.map((cssItem: any) => {
+      const selector = cssItem.selector || '';
+      const cssProps = cssItem.css || {};
+
+      const cssString = Object.entries(cssProps)
+        .map(([key, value]) => `${key}: '${value}'`)
+        .join(', ');
+
+      return `${selector} : { ${cssString} }`;
+    });
+  }
+
+  private static processData(node: OutlineNode | OutlineNode[]): string {
+    if (!node) return '';
+
+    if (Array.isArray(node)) {
+      return node.map(item => this.processData(item)).filter(Boolean).join('\n');
+    }
+
+    if (node.id && node.def?.namespace) {
+      return this.generateComponentJSX(node);
+    }
+
+    if (node.slots && Array.isArray(node.slots)) {
+      return node.slots.map(slot => {
+        if (slot.components && Array.isArray(slot.components)) {
+          return this.processData(slot.components);
+        }
+        return '';
+      }).filter(Boolean).join('');
+    }
+
+    return '';
+  }
+
+  private static generateComponentJSX(node: OutlineNode, indent = ''): string {
+    if (!node?.id) return '';
+
+    const namespace = node.def?.namespace;
+    if (namespace !== ROOT_NAMESPACE) {
+      this.namespacesSet.add(namespace);
+    }
+    const layout = this.extractLayout(node.style);
+    const styleArray = this.extractStyleArray(node.style);
+
+    let jsx;
+
+    const namespaceTag = ComponentsManager.getAbbreviation(namespace)
+
+    // 遮蔽data中的base64和svg内容
+    const maskedData = node.data ? this.maskLargeContent(node.data) : null;
+
+    if (node.asRoot) {
+      jsx = `<${ROOT_NAMESPACE} id="${ROOT_ID}"` + (maskedData ? ` data={${JSON.stringify(maskedData)}}` : '');
+    } else {
+      jsx = `<${namespaceTag} id="${node.id}" title="${node.title}"` + (maskedData ? ` data={${JSON.stringify(maskedData)}}` : '');
+    }
+
+    if (Object.keys(layout).length > 0) {
+      jsx += ` layout={${JSON.stringify(layout)}}`;
+    }
+
+    if (styleArray.length > 0) {
+      // 遮蔽styleArray中的base64和svg内容
+      const maskedStyleArray = styleArray.map(style => this.maskLargeContent(style));
+      jsx += ` styleAry={[${maskedStyleArray.map(style => `"${style}"`).join(', ')}]}`;
+    }
+
+    jsx += ' >';
+
+    const slotsJSX = this.generateSlotsJSX(node.slots || [], indent + '  ');
+    if (slotsJSX) {
+      jsx += slotsJSX;
+      jsx += `\n${indent}</${namespaceTag}>`;
+    } else {
+      jsx += ' />';
+    }
+
+    return jsx;
+  }
+
+  private static generateSlotsJSX(slots: SlotInfo[], indent = '  '): string {
+    if (!slots || slots.length === 0) return '';
+
+    let slotsJSX = '';
+    slots.forEach(slot => {
+      if (slot.id) {
+        slotsJSX += `\n${indent}<slots.${slot.id}`;
+
+        if (slot.title) {
+          slotsJSX += ` title="${slot.title}"`;
+        }
+
+        if (slot.layout) {
+          slotsJSX += ` layout={${JSON.stringify(this.extractLayout(slot.layout))}}`;
+        }
+
+        slotsJSX += '>';
+
+        if (slot.components && Array.isArray(slot.components)) {
+          slot.components.forEach(component => {
+            const childJSX = this.generateComponentJSX(component, indent + '    ');
+            if (childJSX) {
+              slotsJSX += `\n${indent}  ${childJSX}`;
+            }
+          });
+        }
+
+        slotsJSX += `\n${indent}</slots.${slot.id}>`;
+      }
+    });
+
+    return slotsJSX;
+  }
+}