@mybricks/plugin-ai 0.0.1

package/src/startView/index.less

@@ -0,0 +1,216 @@
+.editor {
+  z-index: 13;
+  position: relative;
+  background-color: #ffffff;
+  border: solid 1px rgba(0, 0, 0, .13);
+  max-width: 768px;
+  width: 100%;
+  border-radius: 20px;
+  box-shadow: 0 5px 16px -4px #00000012;
+  color: rgba(0, 0, 0, .9);
+  cursor: default;
+
+  .topArea {
+    padding: 12px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    box-shadow: 0 .5px 0 0 rgba(0, 0, 0, .13);
+
+    .imageThumbnail {
+      cursor: pointer;
+      pointer-events: auto;
+      flex-shrink: 0;
+      width: 56px;
+      aspect-ratio: 1;
+      min-width: 56px;
+      border-radius: 8px;
+      border: 1px solid rgba(0, 0, 0, .13);
+      position: relative;
+
+      img {
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+        background-repeat: no-repeat;
+        background-size: cover;
+        overflow: hidden;
+      }
+
+      .imageDeleteContainer {
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 4px;
+        z-index: 2;
+
+        .imageDeleteIcon {
+          width: 12px;
+          height: 12px;
+          border-radius: 50%;
+          background-color: rgba(0, 0, 0, .4);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #ffffff;
+
+          svg {
+            width: 8px;
+            height: 8px;
+          }
+
+          &:hover {
+            opacity: 0.8;
+            background-color: var(--mybricks-color-primary);
+          }
+        }
+      }
+    }
+  }
+
+  .input {
+    padding: 12px 16px 10px;
+    line-height: 20px;
+    min-height: 60px;
+    position: relative;
+
+    .inputEditorContainer {
+      font-size: 12px;
+      max-height: 140px;
+      scrollbar-width: none;
+      position: relative;
+      min-height: inherit;
+      overflow: auto;
+
+      .inputEditor {
+        user-select: text;
+        white-space: pre-wrap;
+        word-break: break-word;
+        width: 100%;
+        max-height: fit-content;
+        min-height: inherit;
+        overflow: hidden;
+        outline: none;
+        cursor: text;
+
+        &[contentEditable="false"] {
+          cursor: default;
+        }
+      }
+
+      .inputPlaceholder {
+        position: absolute;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        top: 1px;
+        left: 1px;
+        user-select: none;
+        pointer-events: none;
+        color: rgba(0, 0, 0, .6);
+      }
+    }
+  }
+
+  .editorAction {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 0 8px;
+    margin-top: 2px;
+    margin-bottom: 8px;
+    position: relative;
+
+    .leftArea {
+      display: flex;
+      align-items: center;
+
+      .attachmentButton {
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        border-radius: 20px;
+        height: 32px;
+        cursor: pointer;
+
+        svg {
+          width: 20px;
+          height: 20px;
+          color: rgba(0, 0, 0, .6);
+        }
+
+        &:hover {
+          background-color: rgba(0, 0, 0, .09);
+        }
+
+        input {
+          display: none;
+        }
+      }
+    }
+
+    .rightArea {
+      display: flex;
+      align-items: center;
+
+      .sendButtonContainer {
+        cursor: pointer;
+        background-color: var(--mybricks-color-primary);
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        color: rgba(255, 255, 255, .9);
+
+        .sendButton {
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 32px;
+          height: 32px;
+
+          svg {
+            width: 28px;
+            height: 28px;
+          }
+        }
+
+        .loadingButton {
+          svg {
+            width: 14px;
+            height: 14px;
+          }
+        }
+      }
+
+      .disabled {
+        cursor: default;
+        opacity: 0.5;
+      }
+    }
+  }
+
+  :global {
+    * {
+      scrollbar-color: transparent transparent;
+    }
+  }
+}
+
+.temp {
+  z-index: 13;
+  position: relative;
+  background-color: #ffffff;
+  border: solid 1px rgba(0, 0, 0, .13);
+  max-width: 768px;
+  width: 100%;
+  border-radius: 20px;
+  box-shadow: 0 5px 16px -4px #00000012;
+  color: rgba(0, 0, 0, .9);
+  cursor: default;
+  height: 80%;
+  padding: 10px;
+  display: flex;
+}

package/src/startView/index.tsx

@@ -0,0 +1,229 @@
+import React, { useEffect, useRef, useState } from "react"
+import classNames from "classnames";
+import { message } from "antd";
+import { ArrowUp, Attachment, Loading, Close } from "../components/icons";
+import { Agents } from "../agents";
+// import { Messages } from "../view/components/messages/messages";
+import { Messages } from "../components/messages";
+import css from "./index.less"
+import { context } from "../context";
+
+const readFileToBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = function (event) {
+      if (event.target) {
+        const base64 = event.target.result as string;
+        resolve(base64);
+      } else {
+        reject(event);
+      }
+    };
+    reader.onerror = function (event) {
+      reject(event);
+    };
+    reader.readAsDataURL(file);
+  })
+}
+
+const StartView = ({ user, copilot }: any) => {
+  const inputEditorRef = useRef<HTMLDivElement>(null);
+  const [isComposing, setIsComposing] = useState(false);
+  const [inputContent, setInputContent] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [attachments, setAttachments] = useState<string[]>([]);
+
+  const send = () => {
+    const inputContent = inputEditorRef.current!.textContent || "开发一个商城APP";
+    if (inputContent && !loading) {
+      setLoading(true);
+
+      Agents.requestGenerateCanvasAgent({
+        message: inputContent,
+        attachments: attachments.map((attachment) => {
+          return {
+            type: "image",
+            content: attachment
+          }
+        }),
+      }).then(() => {
+
+      }).catch((e) => {
+        message.error(e)
+      }).finally(() => {
+        setLoading(false);
+      });
+    }
+  }
+
+  const onInput = () => {
+    setInputContent(inputEditorRef.current!.textContent)
+  }
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter") {
+      if (isComposing) {
+        return;
+      }
+
+      if (event.shiftKey) {
+
+      } else {
+        event.preventDefault();
+        send();
+      }
+    }
+  }
+
+  const onCompositionStart = () => {
+    setIsComposing(true);
+  }
+
+  const onCompositionEnd = () => {
+    setIsComposing(false);
+  }
+
+  const uploadAttachment = () => {
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = 'image/*';
+
+    fileInput.addEventListener('change', function (e) {
+      const target = e.target as HTMLInputElement;
+      if (!target) {
+        return;
+      }
+      const file = target.files?.[0];
+
+      if (file) {
+        if (!file.type.startsWith('image/')) {
+          return;
+        }
+
+        readFileToBase64(file)
+          .then((base64) => {
+            setAttachments((attachments) => {
+              return [...attachments, base64]
+            })
+          })
+          .catch((event) => {
+            console.error("[@mybricks/plugin-ai - 上传附件失败]", event);
+            message.error("[@mybricks/plugin-ai - 上传附件失败]");
+          })
+      }
+    });
+
+    fileInput.click();
+  };
+
+  const deleteAttachment = (index: number) => {
+    setAttachments((attachments) => {
+      attachments.splice(index, 1)
+      return [...attachments]
+    })
+  }
+
+  const onPaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const file = event.clipboardData.files[0];
+    if (file?.type.startsWith('image/')) {
+      readFileToBase64(file)
+        .then((base64) => {
+          setAttachments((attachments) => {
+            return [...attachments, base64]
+          })
+        })
+        .catch((event) => {
+          console.error("[@mybricks/plugin-ai - 上传附件失败]", event);
+          message.error("[@mybricks/plugin-ai - 上传附件失败]");
+        })
+    } else {
+      const content = event.clipboardData.getData('text/plain');
+
+      if (!content) {
+        return;
+      }
+
+      const selection = window.getSelection();
+
+      if (!selection?.rangeCount) {
+        return;
+      }
+
+      const range = selection.getRangeAt(0);
+      range.deleteContents();
+      const textNode = document.createTextNode(content);
+      range.insertNode(textNode);
+      range.setStartAfter(textNode);
+      range.setEndAfter(textNode);
+
+      setInputContent(inputEditorRef.current!.textContent)
+    }
+  }
+
+  useEffect(() => {
+    inputEditorRef.current!.focus();
+  }, [])
+
+  return (
+    <>
+    {/* TODO：临时，把Messages再封装下 */}
+    <div className={css.temp} style={{ display: loading ? "flex" : "none"}}>
+      <Messages user={user} rxai={context.rxai} copilot={copilot}/>
+    </div>
+    <div className={css.editor} style={{ display: !loading ? "block" : "none"}}>
+      {attachments.length ? <div className={css.topArea}>
+        {attachments.map((attachment, index) => {
+          return (
+            <div className={css.imageThumbnail}>
+              <img src={attachment} />
+              <div className={css.imageDeleteContainer} onClick={() => deleteAttachment(index)}>
+                <div className={css.imageDeleteIcon}>
+                  <Close />
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div> : null}
+      <div className={css.input}>
+        <div className={css.inputEditorContainer}>
+          <div
+            ref={inputEditorRef}
+            className={css.inputEditor}
+            contentEditable={!loading}
+            onKeyDown={onKeyDown}
+            onCompositionStart={onCompositionStart}
+            onCompositionEnd={onCompositionEnd}
+            onInput={onInput}
+            onPaste={onPaste}
+          ></div>
+          {!inputContent && <div className={css.inputPlaceholder}>
+            您好，我是智能助手，请详细描述您要搭建的应用内容
+          </div>}
+        </div>
+      </div>
+      <div className={css.editorAction}>
+        <div className={css.leftArea}>
+          <div className={css.attachmentButton} onClick={uploadAttachment}>
+            <Attachment />
+          </div>
+        </div>
+        <div className={css.rightArea}>
+          <div className={classNames(css.sendButtonContainer, {
+            [css.disabled]: !inputContent || loading
+          })} onClick={send}>
+            <div className={classNames(css.sendButton, {
+              [css.loadingButton]: loading
+            })}>
+              {loading ? <Loading /> : <ArrowUp />}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    </>
+  )
+}
+
+export { StartView }

package/src/tools/analyze-and-expand-prd.ts

@@ -0,0 +1,166 @@
+import { fileFormat } from '@mybricks/rxai'
+import { getFiles } from './utils'
+
+interface AnalyzeAndExpandPrdParams {
+  onProjectCreate: (projectJson: any) => void,
+  demo?: any
+}
+
+export default function analyzeAndExpandPrd(config: AnalyzeAndExpandPrdParams): any {
+  const {
+    demo = {
+      title: '本地生活APP',
+      pages: [
+        {
+          title: '首页',
+          prd: `目的：诱导用户进行点击，完成商品转化
+        需求：
+        从上往下依次为
+        1. 搜索模块：提供全局的商品搜索能力
+        2. 导航入口：一般使用一行N列来提供各个子界面的快捷入口
+        3. 轮播图：轮播当前热门的活动图片
+        4. 猜你喜欢：使用商品瀑布流来展示各类商品`,
+        },
+        {
+          title: '首页',
+          prd: `目的：对所有商品提供分类索引入口
+        需求：
+        从上往下依次为
+        1. 搜索模块：提供全局的商品搜索能力
+        2. 分类模块：
+          2.1 分类侧栏：用于提供商品分类的快捷入口
+          2.2 商品列表：在分类侧栏的子项里展示当前分类的商品列表`,
+        },
+        {
+          title: '我的',
+          prd: `目的：提供对个人信息的查看以及修改界面
+        需求：
+        从上往下依次为
+        1. 个人信息：通常包含头像和昵称，以及二维码信息
+        2. 订单入口：提供对订单已支付、已收获等分类的快捷入口
+        3. 会员信息：提供各类会员优惠活动入口`,
+        }
+      ],
+      style: `一个偏向活力的橙色风格是一个不错的选择
+        - 颜色
+        - 主颜色：活力橙 #FF5733
+        - 背景色：浅灰色 #F7F7F7
+        - 文本颜色：沉稳黑 #000000 可用于主要的文本
+        - 二级颜色：灰色 #A6A6A6 可用于边框或者浅色文本
+        - 样式
+        - 圆角：12px，增加柔和感
+        - 间距：16px
+        同样的，你也可以参考一些常见的APP，比如美团和饿了么的元素设计。`
+    }
+  } = config ?? {}
+  return {
+    name: 'analyze-and-expand-prd',
+    displayName: "对原始产品需求文档分析并扩写",
+    description: `对用户提供的原始产品需求文档进行需求分析与扩写，最后拆分成不同的页面，输出结构化的结果。
+参数：原始需求文档（可能是一句话、一个图片、甚至各种类型附件）
+作用：将模糊、简略的需求转化为清晰、分页面的详细描述，用于指导后续低代码搭建；
+返回值：扩写后的结构化文档；`,
+    getPrompts: () => {
+      return `<工具总览>
+你是MyBricks低代码平台（以下简称MyBricks平台或MyBricks）的资深搭建助手，经验丰富、实事求是、逻辑严谨。
+  
+  你需要根据用户提出的问题或需求，切换不同的身份，完成以下任务
+
+  任务一：根据【用户需求】，作为产品经理，为用户合理整理或者拓展需求，返回整理好的需求；
+  任务二：根据【用户需求】，作为产品经理，为用户提供一个应用的标题，言简意赅，不多于10个字；
+  任务三：根据【用户需求】和【拓展需求】，作为设计师，为用户提供样式设计参考；
+</工具总览>
+
+<特别注意>
+  - 对话可能由多轮构成，每轮对话中，用户会提出不同的问题或给与信息补充，你需要根据用户的问题、逐步分析处理。
+  - 你所面向的用户是MyBricks平台上的用户，这些用户不是专业的开发人员，因此你需要以简洁、易懂的方式，回答用户的问题。
+  - 如果附件中有图片，请在设计开发中作为重要参考，进行详细的需求及设计分析，当作用户的需求。
+</特别注意>
+
+<遵循原则>
+你要切换不同的角色来完成一个需求的设计和开发，同时特别注意，生成的页面数量不得超过5个。
+</遵循原则>
+
+<处理流程>
+  根据你的角色定义来完成以下任务，汇总给出一个Json
+  <任务一>
+  角色：产品经理
+  工作任务：梳理 / 拓展需求，并且分析总共需要几个页面来承接这个系统
+  返回内容：每个页面的名称以及需求
+  对应字段：页面字段中的title以及prd
+  返回规则：
+    - 如果是一句话需求，从上到下梳理并拓展需求
+      - 如何定义一句话需求？例如 "一个简历页面" "实现用户管理系统" "一个首页"
+      - 如何拓展？
+        - "一个简历页面" -> "一个个人简历页面，包含个人介绍、技能特长、项目经历、联系方式"
+        - "实现用户管理系统" -> "
+          一个用户管理的系统，包含用户管理页面
+          - 查询列表：查询、新增、删除用户
+          - 新增用户页面
+          - 删除用户页面"
+    - 如果需求较为详实，则整理即可，不要拓展需求
+      - 如何定义需求较为详实？例如 "一个包含导航、公司介绍、公司优势、页脚的公司官网"，这种对内容有定义的需求就无需拓展
+    - 如果用户提供了图片，将用户提供的【用户需求】原样返回即可
+    注意：
+    - 由于我们不能实现太复杂的需求，需要控制拓展需求的规模，拓展不要超过5个页面
+    - 需求仅围绕UI的实现来拓展，不要涉及多语言、服务端、逻辑、SEO、打印、截图、动画，以及一些复杂交互的周边能力，我们仅关注UI部分
+  </任务一>
+
+  <任务二>
+  角色：产品经理
+  返回内容：总结的应用标题，言简意赅，不超过10个字
+  对应字段：title
+  </任务二>
+
+  <任务三>
+  角色：设计师
+  返回内容：给出设计规范的建议，范围局限于颜色和样式，和参考建议。不提供任何需求和布局方面的信息，风格化信息是给到下一轮大模型的提示词，提供建议即可。
+  对应字段：style
+  返回规则：
+    - 区分场景：
+      - 对于C端网页，可以多考虑几个区域的风格样式建议，以及一些常见APP的风格推荐
+      - 对于中后台系统，默认使用antd风格，仅提供一些重点区域的风格样式建议
+    - 范围：目前限制在颜色、字体样式（不包含字体）、阴影和圆角这些基础UI细节，不要考虑视差滚动这类复杂样式
+    - 不要提供针对组件维度的样式建议，要从需求维度去建议
+    - 如果用户自己提了风格化主题相关需求，整理扩展即可
+  </任务三>
+</处理流程>
+
+<examples>
+  <example>
+    <user_query>一个本地生活APP</user_query>
+    <assistant_response>
+      好的，即将为你生成一个关于一个本地生活APP的页面。
+
+      这是我的思考结果：
+      由于当前信息较少，我们来扩写下需求，一个本地生活APP，一般包含「首页」、「分类页」、「个人页」等界面。
+
+      从需求来看，我觉得可以给应用起「本地生活APP」这个标题。
+
+      同时作为我也会给出我的组件建议和设计规范。
+
+      最终我们应该返回这样的结构
+      ${fileFormat({
+        content: JSON.stringify(demo, null, 2),
+        fileName: '本地生活APP项目需求文档.json'
+      })}
+    </assistant_response>
+  </example>
+</examples>`;
+    },
+    // aiRole: 'architect',
+    aiRole: "expert",
+    execute({ files, content }) {
+      const projectFile = getFiles(files, { extName: 'json' });
+      let projectJson = {}
+      try {
+        projectJson = JSON.parse(projectFile?.content)
+      } catch (error) {
+
+      }
+      config.onProjectCreate(projectJson)
+      return content;
+    },
+    streamThoughts: true
+  };
+}

package/src/tools/answer-user.ts

@@ -0,0 +1,35 @@
+import { fileFormat } from '@mybricks/rxai'
+
+interface AnswerUserParams {
+  // 暂无配置参数，未来可扩展语气风格、知识库范围等
+}
+
+export default function answerUser(config: AnswerUserParams): any {
+  return {
+    name: 'answer-user',
+    displayName: "专家思考中",
+    description: `回答用户在页面搭建过程中/对话中的问题。
+参数：用户提出的问题（文本），前面工具仅获取一些小白难以理解的内容；
+作用：理解用户意图，针对搭建专用术语和前面工具的复杂返回，为用户提供清晰、准确、与 MyBricks 平台相关的解答或引导；
+返回值：一段自然语言回答；
+
+建议使用场景：
+1. 前置只有一个获取DSL工具，返回的是MyBricksDsl
+2. 前置只有一个获取组件配置文档，返回的是专业的组件知识
+`,
+    getPrompts: () => {
+      return `<工具总览>
+你是一个 MyBricks 低代码平台的智能问答助手，专注于解答用户在页面/组件搭建过程中提出的各类问题。
+你需要根据历史对话记录，为用户解答疑难问题。
+</工具总览>
+
+<人设>
+你是一个能将复杂问题通俗易懂进行解释的MyBricks 平台专家，擅长用简单易懂的语言帮助用户理解问题。
+</人设>
+`;
+    },
+    execute({ content }) {
+      return content;
+    }
+  };
+}

package/src/tools/focus-element.ts

@@ -0,0 +1,47 @@
+import { fileFormat } from '@mybricks/rxai'
+
+interface FocusElementToolParams {
+ 
+}
+
+export default function focusElement(config: FocusElementToolParams, ): Tool {
+  return {
+    name: 'focus-element',
+    description: `通过id聚焦到任何可聚焦的页面 / 组件。
+参数：页面ID或者组件ID；
+作用：聚焦到某个可搭建的元素上，获取元素元信息，用于后续搭建；
+返回值：聚焦元素的元信息，格式是包含id、type（component / page）、namespace（可能存在）字段的对象；
+`,
+    getPrompts: () => {
+        return `<工具总览>
+你是一个可以聚焦页面/组件的工具，你作为MyBricks低代码平台（以下简称MyBricks平台或MyBricks）的资深页面搭建助手，可以根据需求聚焦元素用于下一步的搭建。
+</工具总览>
+ 
+<任务流程>
+  按照以下格式返回所要聚焦的元素：
+    ${fileFormat({ content: '{ "id": "u_1sd23" }', fileName: '聚焦元素ID.json' })}
+    - 注意：文件要严格按照JSON格式返回，注意不要出现语法错误；
+</任务流程>`
+      },
+    execute({ files, content }) {
+      let selectFile: File | undefined = undefined;
+      Object.keys(files).forEach((fileKey) => {
+        const file: File = files[fileKey] as File;
+        if (file.extension === 'json') {
+          selectFile = file
+        }
+
+      })
+
+      let selectFileId = {};
+      try {
+        selectFileId = JSON.parse(selectFile?.content);
+      } catch (error) {}
+
+      return `<当前选中元素情况>
+ID: ${selectFileId.id}
+类型：页面
+</当前选中元素情况>`
+    },
+  }
+}