@mybricks/plugin-ai 0.0.1

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@mybricks/plugin-ai",
+  "version": "0.0.1",
+  "main": "src/index.tsx",
+  "files": [
+    "src",
+    "package.json"
+  ],
+  "author": "MyBricks Team",
+  "license": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mybricks/plugin-ai.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {},
+  "dependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "@mybricks/rxai": "0.0.2",
+    "classnames": "^2.5.1",
+    "jsonrepair": "^3.13.1",
+    "marked": "^17.0.0"
+  }
+}

package/src/agents/app.ts

@@ -0,0 +1,173 @@
+import { context } from './../context';
+import { MYBRICKS_TOOLS } from "./../tools"
+
+window.plugin_ai_context = context
+
+export const requestGeneratePageAgent = (pageId: string, pageTitle: string, params: any) => {
+
+  const prompts = context.prompts
+
+  params?.onProgress?.('start')
+
+  context.rxai.requestAI({
+    ...params,
+    message: params?.message,
+    key: pageId,
+    emits: {
+      write: () => { },
+      complete: () => {
+        // params?.onProgress?.("complete");
+      },
+      error: () => {
+        params?.onProgress?.("error");
+      },
+      cancel: () => {
+        // params?.onProgress?.("complete");
+      },
+    },
+    planList: ["generate-page-prd-and-require-component", "generate-page"],
+    tools: [
+      MYBRICKS_TOOLS.GetComponentsDocAndPrd({
+        allowComponents: context.api?.global?.api?.getAllComDefPrompts?.(),
+        examples: prompts.prdExamplesPrompts,
+        canvasWidth: prompts.canvasWidth,
+        queryComponentsDocsByNamespaces: (namespaces) => {
+          return namespaces.reduce((acc, cur) => {
+            return acc + '\n' + context.api?.uiCom?.api?.getComEditorPrompts?.(cur.namespace)
+          }, '')
+        }
+      }),
+      MYBRICKS_TOOLS.GeneratePage({
+        getFocusRootComponentDoc: () => context.api?.page?.api?.getPageContainerPrompts?.(pageId) as string,
+        getTargetId: () => pageId as string,
+        appendPrompt: prompts.systemAppendPrompts,
+        examples: prompts.generatePageActionExamplesPrompts,
+        onActions: (actions, status) => {
+          context.api?.page?.api?.updatePage?.(pageId, actions, status)
+
+          if (status === 'complete') {
+            params?.onProgress?.("complete");
+          }
+        },
+        onClearPage: () => {
+          context.api?.page?.api?.clearPageContent?.(pageId)
+        }
+      }),
+    ],
+    // presetMessages: [
+    //   {
+    //     role: 'user',
+    //     content: `检测到聚焦位置发生变化`
+    //   },
+    //   {
+    //     role: 'assistant',
+    //     content: `当前已聚焦到${`页面(title=${pageTitle},id=${pageId})`}中，后续用户的提问，关于”这个“、“此”，甚至不提主语，都是指代此元素。
+    // <当前聚焦元素的内容简介>
+    //   内容为空
+    // </当前聚焦元素的内容简介>
+    //                 `
+    //   }
+    // ]
+  });
+}
+
+async function createCanvasByAICanvas(canvasId: string, aiCanvas: any) {
+
+  function sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  // TOOD，之前不去掉设计器会有报错
+  await sleep(1000)
+
+  const pageArray = [];
+
+  for (let index = 0; index < aiCanvas.pages.length; index++) {
+    const page = aiCanvas.pages[index];
+
+    const pageRef = await context.api.page?.api?.createPage?.(canvasId, page.title, {
+      type: "normal",
+      title: page.title,
+      template: {
+        namespace: 'mybricks.harmony.systemPage',
+        deletable: false,
+        asRoot: true,
+        data: {
+          useTabBar: false,
+        },
+      },
+      inputs: [
+        {
+          id: "open",
+          title: "打开",
+          schema: {
+            type: "object",
+          },
+        },
+      ],
+    })
+    pageArray.push({ page, pageRef })
+  }
+
+  pageArray.forEach(async ({ page, pageRef }) => {
+    await requestGeneratePageAgent(pageRef.id, page.title, {
+      message: `标题：${page.title}
+<需求>
+${page.prd}
+</需求>
+
+<样式风格>
+${aiCanvas.style}
+</样式风格>
+`,
+      onProgress: pageRef.onProgress,
+      id: pageRef.id,
+    })
+  })
+}
+
+export const requestGenerateCanvasAgent = (params: any) => {
+  return new Promise((resolve, reject) => {
+    params?.onProgress?.('start')
+
+    context.rxai.requestAI({
+      ...params,
+      message: params?.message,
+      key: params.id,
+      emits: {
+        write: () => { },
+        complete: () => {
+          params?.onProgress?.("complete");
+        },
+        error: () => {
+          reject('error')
+          params?.onProgress?.("error");
+        },
+        cancel: () => {
+          params?.onProgress?.("complete");
+        },
+      },
+      planList: ["analyze-and-expand-prd"],
+      tools: [
+        MYBRICKS_TOOLS.AnalyzeAndExpandPrd({
+          onProjectCreate: (projectJson) => {
+            if (!projectJson || !projectJson.title) {
+              return reject('不合法的项目文件')
+            }
+            let canvasId
+            try {
+              const { id, title } = context.api.page?.api?.createCanvas?.()
+              canvasId = id
+            } catch (error) {
+              reject(error)
+            }
+            resolve('complete')
+            if (canvasId) {
+              createCanvasByAICanvas(canvasId, projectJson);
+            }
+          }
+        })
+      ],
+    });
+  })
+}

package/src/agents/common.ts

@@ -0,0 +1,111 @@
+import { context } from './../context';
+import { MYBRICKS_TOOLS, MyBricksHelper } from "./../tools"
+
+
+export const requestCommonAgent = (params: any) => {
+
+  return new Promise((resolve, reject) => {
+    const prompts = context.prompts;
+
+    const targetId = context.currentFocus?.type === 'uiCom' ? context.currentFocus?.comId : context.currentFocus?.pageId
+
+    params?.onProgress?.('start')
+
+    context.rxai.requestAI({
+      ...params,
+      message: params?.message,
+      key: targetId,
+      emits: {
+        write: () => { },
+        complete: () => {
+          resolve('complete')
+          params?.onProgress?.("complete");
+        },
+        error: () => {
+          reject('error')
+          params?.onProgress?.("error");
+        },
+        cancel: () => {},
+      },
+      tools: [
+        MYBRICKS_TOOLS.GetComponentsDocAndPrd({
+          allowComponents: context.api?.global?.api?.getAllComDefPrompts?.(),
+          examples: prompts.prdExamplesPrompts,
+          canvasWidth: prompts.canvasWidth,
+          queryComponentsDocsByNamespaces: (namespaces) => {
+            return namespaces.reduce((acc, cur) => {
+              return acc + '\n' + context.api?.uiCom?.api?.getComEditorPrompts?.(cur.namespace)
+            }, '')
+          }
+        }),
+        MYBRICKS_TOOLS.GeneratePage({
+          getFocusRootComponentDoc: () => context.api?.page?.api?.getPageContainerPrompts?.(targetId) as string,
+          getTargetId: () => targetId as string,
+          appendPrompt: prompts.systemAppendPrompts,
+          examples: prompts.generatePageActionExamplesPrompts,
+          onActions: (actions, status) => {
+            context.api?.page?.api?.updatePage?.(targetId, actions, status)
+          },
+          onClearPage: () => {
+            context.api?.page?.api?.clearPageContent?.(targetId)
+          }
+        }),
+        // MYBRICKS_TOOLS.GetMybricksDSL({
+        //   getContext: (id, type) => {
+        //     if (type === 'page') {
+        //       return api?.page?.api?.getPageDSLPrompts?.(id)?.toDSL?.()?.replaceAll(`slots.${id}`, 'canvas') as string
+        //     }
+        //     return api?.uiCom?.api?.getComDSLPrompts?.(id) as string
+        //   },
+        // }),
+        MYBRICKS_TOOLS.GetFocusMybricksDSL({
+          id: targetId as string,
+          getFocusContext() {
+            if (context.currentFocus?.type === 'page') {
+              return context.api?.page?.api?.getPageDSLPrompts?.(targetId)?.toDSL?.()?.replaceAll(`slots.${targetId}`, 'canvas') as string
+            }
+            return context.api?.uiCom?.api?.getComDSLPrompts?.(targetId) as string
+          },
+        }),
+        MYBRICKS_TOOLS.GetComponentsInfoByIds({
+          getPageJson(id) {
+            return context.api?.page?.api?.getOutlineInfo(id)
+          },
+          getComInfo(namespace) {
+            return context.api?.uiCom?.api?.getComEditorPrompts?.(namespace)
+          },
+          getComJson(id) {
+            return context.api?.uiCom?.api?.getOutlineInfo(id)
+          },
+        }),
+        // MYBRICKS_TOOLS.GetComponentInfo({
+        //   getComInfo(id) {
+        //     return context.api?.uiCom?.api?.getComPrompts?.(id)?.replace(/当前组件的情况/g, `组件${id}的信息`) as string
+        //   },
+        // }),
+        MYBRICKS_TOOLS.ModifyComponent({
+          onActions: (id, actions) => {
+            context.api?.uiCom?.api?.updateCom?.(id, actions)
+          }
+        }),
+      ],
+      presetMessages: [
+        {
+          role: 'user',
+          content: `检测到聚焦位置发生变化`
+        },
+        {
+          role: 'assistant',
+          content: `当前已聚焦到${context.currentFocus?.type === 'uiCom' ? `组件(id=${context.currentFocus?.comId})` : `页面(title=${context.currentFocus?.title},id=${context.currentFocus?.pageId})`}中，后续用户的提问，关于”这个“、“此”，甚至不提主语，都是指代此元素。
+    <当前聚焦元素的内容简介>
+    ${MyBricksHelper.getTreeDescriptionByJson(context.currentFocus?.type === 'uiCom' ? context.api?.uiCom?.api?.getOutlineInfo(context.currentFocus?.comId) : context.api?.page?.api?.getOutlineInfo(context.currentFocus?.pageId))}
+    
+      > 如果内容不为空，代表组件通过插槽放置有子组件，如果内容为空，则代表此组件没有任何子组件。
+    </当前聚焦元素的内容简介>
+                    `
+        }
+      ]
+    });
+  })
+
+}

package/src/agents/index.ts

@@ -0,0 +1,7 @@
+import { requestGenerateCanvasAgent } from './app'
+import { requestCommonAgent } from './common'
+
+export const Agents = {
+  requestGenerateCanvasAgent,
+  requestCommonAgent
+}

package/src/components/icons/index.less

@@ -0,0 +1,8 @@
+.spin {
+  animation: spin 1.2s linear infinite;
+}
+
+@keyframes spin{
+  from { transform: rotate(0deg);   }
+  to   { transform: rotate(360deg); }
+}

package/src/components/icons/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import css from "./index.less";
+
+const ArrowUp = () => {
+  return <svg data-v-dbdac3f2="" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 1024 1024" name="Send"><path d="M705.536 433.664a38.4 38.4 0 1 1-54.272 54.272L550.4 387.114667V729.6a38.4 38.4 0 0 1-76.8 0V387.114667l-100.864 100.821333a38.4 38.4 0 1 1-54.272-54.272l166.4-166.4a38.4 38.4 0 0 1 54.272 0l166.4 166.4z" fill="currentColor"></path></svg>
+}
+
+const Attachment = () => {
+  return <svg data-v-5d21dc8d="" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 1024 1024" name="Clip"><path d="M239.08352 319.0784a188.17024 188.17024 0 0 1 376.29952 0v0.16384l4.62848 347.62752v0.08192a112.64 112.64 0 0 1-156.0576 105.63584 112.55808 112.55808 0 0 1-68.97664-105.39008V315.14624a36.864 36.864 0 1 1 73.728 0v352.99328a38.83008 38.83008 0 1 0 77.57824 0v-0.16384l-4.58752-347.58656V320.3072a114.4832 114.4832 0 0 0-228.88448-0.4096l4.5056 347.58656a190.13632 190.13632 0 1 0 380.3136 0l0.4096-334.39744a36.864 36.864 0 1 1 73.728 0.08192l-0.4096 334.31552a263.90528 263.90528 0 0 1-450.43712 186.61376 263.86432 263.86432 0 0 1-77.29152-186.368l-4.54656-347.50464v-1.10592z" fill="currentColor"></path></svg>
+}
+
+const Loading = () => {
+  return <svg className={css.spin} viewBox="0 0 1024 1024" focusable="false" data-icon="loading-3-quarters" fill="currentColor" aria-hidden="true"><path d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"></path></svg>
+}
+
+const Close = () => {
+  return <svg fill-rule="evenodd" viewBox="64 64 896 896" focusable="false" data-icon="close-circle" fill="currentColor" aria-hidden="true"><path d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm0 76c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm128.01 198.83c.03 0 .05.01.09.06l45.02 45.01a.2.2 0 01.05.09.12.12 0 010 .07c0 .02-.01.04-.05.08L557.25 512l127.87 127.86a.27.27 0 01.05.06v.02a.12.12 0 010 .07c0 .03-.01.05-.05.09l-45.02 45.02a.2.2 0 01-.09.05.12.12 0 01-.07 0c-.02 0-.04-.01-.08-.05L512 557.25 384.14 685.12c-.04.04-.06.05-.08.05a.12.12 0 01-.07 0c-.03 0-.05-.01-.09-.05l-45.02-45.02a.2.2 0 01-.05-.09.12.12 0 010-.07c0-.02.01-.04.06-.08L466.75 512 338.88 384.14a.27.27 0 01-.05-.06l-.01-.02a.12.12 0 010-.07c0-.03.01-.05.05-.09l45.02-45.02a.2.2 0 01.09-.05.12.12 0 01.07 0c.02 0 .04.01.08.06L512 466.75l127.86-127.86c.04-.05.06-.06.08-.06a.12.12 0 01.07 0z"></path></svg>
+}
+
+const Success = () => {
+  return <svg role="presentation" xmlns="http://www.w3.org/2000/svg" fill="none" version="1.1" viewBox="0 0 14 14"><path d="M12.25,7.000000238418579C12.25,9.899500238418579,9.8995,12.250000238418579,7,12.250000238418579C4.1005,12.250000238418579,1.75,9.899500238418579,1.75,7.000000238418579C1.75,4.100510238418579,4.1005,1.750000238418579,7,1.750000238418579C9.8995,1.750000238418579,12.25,4.100510238418579,12.25,7.000000238418579ZM11.08333,7.000000238418579C11.08333,4.744840238418579,9.25516,2.916670238418579,7,2.916670238418579C4.74484,2.916670238418579,2.91667,4.744840238418579,2.91667,7.000000238418579C2.91667,9.25516023841858,4.74484,11.08333023841858,7,11.08333023841858C9.25516,11.08333023841858,11.08333,9.25516023841858,11.08333,7.000000238418579ZM9.20146,6.202720238418579C9.28673,6.098500238418579,9.33333,5.9679902384185795,9.33333,5.833330238418579C9.33333,5.511170238418579,9.07217,5.250000238418579,8.75,5.250000238418579C8.575040000000001,5.250000238418579,8.4093,5.32853023841858,8.2984,5.464070238418579L6.37337,7.298400238418579L5.6624300000000005,6.587530238418579C5.55304,6.478130238418579,5.40471,6.416670238418579,5.25,6.416670238418579C4.92783,6.416670238418579,4.66667,6.677830238418579,4.66667,7.000000238418579C4.66667,7.154710238418579,4.72809,7.303090238418579,4.8377099999999995,7.412700238418579L6.00423,8.579140238418578C6.01794,8.59285023841858,6.03224,8.605870238418579,6.04724,8.61814023841858C6.29658,8.82215023841858,6.66412,8.785400238418578,6.86812,8.536060238418578L9.20146,6.202720238418579Z" fill="currentColor"></path></svg>
+}
+
+export { ArrowUp, Attachment, Loading, Close, Success }