@mybricks/plugin-ai 0.0.1 → 0.0.3

package/src/tools/modify-component.ts

@@ -1,385 +0,0 @@
-import { fileFormat } from '@mybricks/rxai'
-import { getFiles } from './utils'
-
-interface ModifyComponentToolParams {
-  /** 当所有actions返回时 */
-  onActions: (id: string, actions: any[]) => void
-}
-
-export default function modifyComponentsInPage(config: ModifyComponentToolParams): Tool {
-  return {
-    name: 'modify-components-in-page',
-    displayName: "修改组件",
-    description: `根据用户需求，对页面中的组件进行批量修改/删除。
-参数：要修改的组件的ID（确保之前的内容提及过），支持批量；
-作用：局部修改的小范围需求；
-前置依赖：组件配置文档（get-components-info-by-id）；
-使用场景示例：
-  - 修改组件的样式/配置
-  - 删除组件
-  - 局部范围修改组件及其子组件的配置
-
-注意：没有组件配置文档无法修改组件，必须获取过要修改组件的组件配置文档。
-`,
-    getPrompts() {
-      return `<工具总览>
-你是一个修改组件搭建效果的工具，你作为MyBricks低代码平台（以下简称MyBricks平台或MyBricks）的资深页面搭建助手，拥有专业的搭建能力。
-你的任务是根据「当前组件上下文」和「用户需求」，生成 actions ，修改当前组件的配置和各项配置项完成用户的需求。
-</工具总览>
-
-<你需要返回的数据格式>
-  通过一系列的action来分步骤完成对目标组件的修改，请返回以下格式以驱动MyBricks对当前组件进行修改：
-  
-  ${fileFormat({
-        content: `[
-      {
-        "comId":"目标组件的id",
-        "target":"目标组件的整体或某个部分（也可以是某个插槽)，以选择器的形式表示",
-        "type":"action的类型，包括了setLayout、doConfig、addChild 三类动作",
-        "params":"不同的动作对应的参数"
-      }
-    ]`,
-        fileName: '操作步骤.json'
-      })}
-  
-  注意：
-    - 在返回多个步骤时，务必注意其逻辑顺序，例如有些action需要先完成，后续的action（可能通过ifVisible控制）才能进行；
-    - 有些修改需要先完成整体、再进行局部的修改；
-  
-  各action的类型说明如下：
-
-  <setLayout>
-    - 设置组件的布局和尺寸信息，params的格式以Typescript的形式说明如下：
-      
-    \`\`\`typescript
-    /**
-     * 宽高尺寸
-     * number - 具体的px值
-     * fit-content - 适应内容
-     * 100% - 填充
-     * 只能是三者其一，明确不允许使用其他属性，比如calc等方法
-     */
-    type Size = number | "fit-content" | "100%"
-  
-    /** flex中子组件定位，可配置如下layout */
-    type setLayout_flex_params = {
-      /** 宽 */
-      width: Size;
-      /** 高 */
-      height: Size;
-      /** 上外边距 */
-      marginTop?: number;
-      /** 右外边距 */
-      marginRight?: number;
-      /** 下外边距 */
-      marginBottom?: number;
-      /** 左外边距 */
-      marginLeft?: number;
-    }
-
-    注意：
-    - 1. 只有在flex布局中的组件，可以在layout中使用margin相关配置；
-
-    /** 如果组件本身是fixed类型定位，可配置如下layout */
-    type setLayout_fixed_params = {
-      position: 'fixed';
-      /** 宽 */
-      width: Size;
-      /** 高 */
-      height: Size;
-      /** 距离左侧 */
-      left?: number;
-      /** 距离右侧 */
-      right?: number;
-      /** 距离上方 */
-      top?: number;
-      /** 距离下方 */
-      bottom?: number;
-    }
-    
-    例如，当用户要求将当前组件的宽度设置为200px，可以返回以下内容：
-    ${fileFormat({
-      content: `[
-        {
-          "comId":"u_ou1rs",
-          "target":":root",
-          "type":"setLayout",
-          "params":{
-            "width":200
-          }
-        }
-      ]`,
-      fileName: '尺寸配置步骤.json'
-    })}
-    
-    注意：当需要修改布局和尺寸信息时，仅返回用户要求的内容即可，无需返回所有的布局和尺寸信息属性。
-  </setLayout>
-
-  <doConfig>
-    - 配置组件，使用<组件可配置的内容/>的配置项，对组件的属性或样式进行配置；
-    - 如果配置项的type在 <常见editType的使用 /> 中有说明，务必遵守其中的说明及注意事项；
-    
-    - params的格式以Typescript的形式说明如下：
-    
-    \`\`\`typescript
-    //配置样式
-    type configStyle_params = {
-      path:string,//在<当前组件可配置的内容/>中对应的配置项path
-      style: {
-        [key: string]: propertyValue; //元素的内联样式对象，仅能配置style编辑器description中声明的属性，不要超出范围。
-      }
-    }
-    
-    //配置属性
-    type configProperty_params = {
-      path:string,//在<当前组件可配置的内容/>中对应的配置项path
-      value: any//需要配置的value
-    }
-    \`\`\`
-    
-    例如：
-    - 属性的配置：
-    ${fileFormat({
-      content: `[
-        {
-          "comId":"u_abcd",
-          "target":":root",
-          "type":"doConfig",
-          "params":{
-            "path":"常规/标题",
-            "value":"标题内容"
-          }
-        }
-      ]`,
-      fileName: '修改标题.json'
-    })}
-    
-    - 样式的配置：
-    ${fileFormat({
-      content: `[
-        {
-          "comId":"u_abcd",
-          "target":":root",
-          "type":"doConfig",
-          "params":{
-            "path":"常规/banner样式",
-            "style":{
-              "background":"red"
-            }
-          }
-        }
-      ]`,
-      fileName: '样式配置步骤.json'
-    })}
-    
-      注意：
-      - 当需要修改组件的样式时，只允许修改style编辑器description中声明的属性；
-      - 当需要修改组件的样式时，背景统一使用background,而非backgroundColor等属性；
-
-    - 布局的配置，布局的配置必须利用layout编辑器
-    ${fileFormat({
-      content: `[
-        {
-          "comId":"u_abcd",
-          "target":":root",
-          "type":"doConfig",
-          "params":{
-            "path":"常规/布局",
-            "value":{
-              "display":"flex",
-              "flexDirection":"row",
-              "alignItems":"center"
-            }
-          }
-        }
-      ]`,
-      fileName: '布局配置步骤.json'
-    })}
-
-  </doConfig>
-
-  注意：actions.json文件采用标准的 JSON 语法，禁止非法代码，禁止出现内容省略提示、单行注释、省略字符。
-    - 内容必须完全符合 JSON 规范
-    - 禁止包含任何注释（包括单行//和多行/* */）
-    - 禁止出现省略号(...)或任何占位符
-    - 确保所有代码都是完整可执行的，不包含示例片段
-    - 禁止使用非法字符或特殊符号
-    - 所有内容均为静态数据，禁止解构，禁止使用变量
- 
-  注意：
-    - 返回actions.json文件内容时，务必注意操作步骤的先后顺序；
-      - 有些操作需要在前面操作完成后才能进行；
-      - 有些操作需要在其他操作开启（布尔类型的配置项）后才能进行；
-    - 禁止重复使用相同的action；
-</你需要返回的数据格式>
- 
-<按照以下情况分别处理>
-  请根据以下情况逐步思考给出答案，首先，判断需求属于以下哪种情况：
-
-  <以下问题做特殊处理>
-    当用户询问以下类型的问题时，给出拒绝的回答：
-    1、与种族、宗教、色情等敏感话题相关的问题，直接回复“抱歉，我作为智能开发助手，无法回答此类问题。”；
-  </以下问题做特殊处理>
-
-  <当仅需要修改当前组件-不包括子组件时>
-    按照以下步骤完成：
-    1、详细分析用户的需求，关注以下各个方面：
-      - 组件的外观样式:组件的宽高与外间距信息，只能声明width、height、margin，不允许使用padding、position等属性；
-      - 组件的内部样式:根据组件声明的css给出合理的设计实现；
-      - 属性数据(data):尤其要注意：
-        - 如果使用图片：如果需要给出新的图片，否则一律使用https://ai.mybricks.world/image-search?term={关键词}&w={图片宽度}&h={图片高度}做代替，不允许使用base64或者其他的；
-    
-    2、返回actions.json文件内容，注意：
-      - 内容严格符合 JSON 规范
-      - 禁止包含任何注释（包括单行//和多行/* */）
-      - 禁止出现省略号(...)或任何占位符
-      - 确保所有代码都是完整可执行的，不包含示例片段
-      - 禁止使用非法字符或特殊符号
-      - 所有内容均为静态数据，禁止解构，禁止使用变量
-  </当仅需要修改当前组件-不包括子组件时>
-  
-  
- 
-  整个过程中要注意：
-  - 对于不清楚的问题，一定要和用户做详细的确认；
-  - 如果没有合适的组件，务必直接返回、并提示用户；
-  - 回答务必简洁明了，尽量用概要的方式回答；
-  - 在回答与逻辑编排相关的内容时，无需给出示例流程；
-  - 回答问题请确保结果合理严谨、言简意赅，不要出现任何错误;
-  - 回答语气要谦和、慎用叹号等表达较强烈语气的符号等；
-</按照以下情况分别处理>
-
-<examples>
-  
-  <example>
-    <user_query>我要搭建一个红色的按钮</user_query>
-    <assistant_response>
-      好的，当前组件是按钮组件，我在此基础上将其修改为红色按钮
-      
-      ${fileFormat({
-        content: `[
-          {
-            "comId":"u_24uiu",
-            "type":"doConfig",
-            "target":":root",
-            "params":{
-              "path":"样式/背景色",
-              "style":{
-                "background":"#FF0000"
-              }
-            }
-          }
-        ]`,
-        fileName: '将按钮修改为红色.json'
-      })}
-    </assistant_response>
-  </example>
-  
-  <example>
-    <user_query>文案修改为ABC</user_query>
-    <assistant_response>
-      好的，我将当前组件的文案修改为ABC
-
-      ${fileFormat({
-        content: `[
-          {
-            "comId":"u_24uiu",
-            "target":":root",
-            "type":"doConfig",
-            "params":{
-              "path":"customBtn/title",
-              "value":"ABC"
-            }
-          }
-        ]`,
-        fileName: '将按钮文案修改为ABC.json'
-      })}
-    </assistant_response>
-  </example>
-
-  <example>
-    <user_query>宽度改成适应内容</user_query>
-    <assistant_response>
-      好的，我将当前组件的宽度做适应内容的调整
-
-      ${fileFormat({
-        content: `[
-          {
-            "comId":"u_908",
-            "target":":root",
-            "type":"setLayout",
-            "params":{
-              "width":"fit-content",
-            }
-          }
-        ]`,
-        fileName: '修改宽度.json'
-      })}  
-    </assistant_response>
-  </example>
-  
-  <example>
-    <user_query>改成蓝色风格</user_query>
-    <assistant_response>
-      好的，我将当前组件的配色以及子组件统一修改为蓝色风格
-
-      ${fileFormat({
-        content: `[
-          {
-            "comId":"u_222",
-            "type":"doConfig",
-            "target":":root",
-            "params":{
-              "path":"样式/背景色",
-              "style":{
-                "background":"blue"
-              }
-            }
-          },
-          {
-            "comId":"u_child2",
-            "type":"doConfig",
-            "target":":root",
-            "params":{
-              "path":"样式/背景色",
-              "style":{
-                "background":"blue"
-              }
-            }
-          },
-        ]`,
-        fileName: '修改颜色.json'
-      })}
-    </assistant_response>
-  </example>
-</examples>`
-    },
-    execute({ files }) {
-      let actions: any = [];
-
-      const actionsFile = getFiles(files, { extName: 'json' });
-      if (actionsFile) {
-        try {
-          actions = JSON.parse(actionsFile.content ?? "[]");
-        } catch (error) {
-
-        }
-      }
-
-      const actionsGroupById = actions.reduce((acc, item) => {
-        const id = item.comId;
-        if (!acc[id]) {
-          acc[id] = [];
-        }
-        acc[id].push(item);
-        return acc;
-      }, {});
-
-      Object.keys(actionsGroupById).forEach(id => {
-        config.onActions(id, actionsGroupById[id])
-      })
-      
-      return `modify-component 已完成，已根据需求修改以下组件: ${Object.keys(actionsGroupById).join('、')}。`
-    },
-  }
-}

package/src/tools/type.d.ts

@@ -1,12 +0,0 @@
-/** 工具execute所需的文件 */
-interface RxFile {
-  fileName: string;
-  name: string;
-  extension: string;
-  language: string;
-  content: string;
-  isComplete: boolean;
-}
-
-/** 工具execute所需的文件列表 */
-type RxFiles = Record<string, RxFile | RxFile[]>;

package/src/tools/utils.ts

@@ -1,62 +0,0 @@
-export function getFiles(files: RxFiles, {
-  extName
-}: {
-  extName?: string
-}): RxFile | undefined {
-  let result: RxFile | undefined
-  Object.keys(files).forEach((fileName) => {
-    const file = files[fileName] as RxFile;
-    if (file.extension === extName) {
-      result = file
-    }
-  })
-  return result
-}
-
-function getTreeDescriptionByJson(data: any, level = 0) {
-  const indent = '  '.repeat(level);
-  let result = '';
-
-  if (!data || Object.keys(data).length === 0) {
-    return '无内容，代表内容为空';
-  }
-
-  // 如果是数组，遍历每个元素
-  if (Array.isArray(data)) {
-
-    if (data.length === 0) {
-      return '无内容，代表内容为空';
-    }
-
-    data.forEach(item => {
-      result += getTreeDescriptionByJson(item, level);
-    });
-    return result;
-  }
-
-  // 处理当前节点
-  if (data.title) {
-    const namespace = data.def?.namespace ||
-      data.def?.namespace ||
-      'content';
-    result += `${indent}- ${data.title}[id=${data.id}](${namespace})\n`;
-  }
-
-  // 处理slots中的组件
-  if (data.slots && Array.isArray(data.slots)) {
-    data.slots.forEach((slot: any) => {
-      if (slot.components && Array.isArray(slot.components)) {
-        slot.components.forEach(component => {
-          result += getTreeDescriptionByJson(component, level + 1);
-        });
-      }
-    });
-  }
-
-  return result;
-}
-
-
-export const MyBricksHelper = {
-  getTreeDescriptionByJson,
-}

package/src/types.d.ts

@@ -1,65 +0,0 @@
-interface AiServiceAPI {
-  global: {
-    title: string;
-    api: {
-      getAllComDefPrompts: () => string;
-    }
-  };
-  page: {
-    title: string;
-    params: stirng[];
-    api: {
-      updatePage: (...params: any) => void;
-      getPageDSLPrompts: (...params: any) => string;
-      getPageContainerPrompts: (...params: any) => string;
-      clearPageContent: (pageId: string) => void
-      getOutlineInfo: (...params: any) => any
-      createCanvas: () => { id: string; title: string; }
-      createPage: (id: string, title: string, config?: any) => { id: string; onProgress: Function; }
-    }
-  };
-  uiCom: {
-    title: string;
-    api: {
-      updateCom: (...params: any) => void;
-      getComPrompts: (...params: any) => string;
-      getComDSLPrompts: (...params: any) => string;
-      getComEditorPrompts: (...params: any) => string;
-      getOutlineInfo: (...params: any) => any
-    }
-  }
-}
-
-type AiServiceFocusParams = {
-  type: "uiCom";
-  comId: string;
-  title: string;
-} | {
-  type: "page";
-  pageId: string;
-  title: string;
-}
-
-type AiServiceRequestParams = {
-  type: "uiCom";
-  message: string;
-  comId: string;
-  attachments: {
-    type: "image";
-    content: string;
-    title?: string;
-    size?: number;
-  }[];
-  onProgress: (status: string) => void;
-} | {
-  type: "page";
-  message: string;
-  pageId: string;
-  attachments: {
-    type: "image";
-    content: string;
-    title?: string;
-    size?: number;
-  }[];
-  onProgress: (status: string) => void;
-}

package/src/view/components/header/header.less

@@ -1,17 +0,0 @@
-.header {
-  width: 100%;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  padding: 0 40px 0 8px;
-  justify-content: space-between;
-  border-bottom: 1px solid #f3f3f3;
-
-  .title {
-    font-weight: 700;
-    font-size: 12px;
-    color: rgb(25, 25, 25);
-    line-height: 18px;
-    cursor: default;
-  }
-}

package/src/view/components/header/header.tsx

@@ -1,15 +0,0 @@
-import React from "react"
-import classNames from "classnames"
-import css from "./header.less"
-
-const Header = () => {
-  return (
-    <div className={classNames(css.header)}>
-      <span className={classNames(css.title)}>
-        MyBricks.ai
-      </span>
-    </div>
-  )
-}
-
-export { Header }

package/src/view/components/index.ts

@@ -1,3 +0,0 @@
-export * from "./header/header";
-export * from "./messages/messages";
-export * from "./sender/sender";