@mybricks/plugin-ai 0.0.1 → 0.0.2

package/src/components/sender/index.less

@@ -0,0 +1,203 @@
+@import url(../index.less);
+
+.container {
+  padding: 8px;
+
+  .editor {
+    z-index: 13;
+    position: relative;
+    background-color: #ffffff;
+    border: solid 1px rgba(0, 0, 0, .13);
+    width: 100%;
+    // border-radius: 20px;
+    border-radius: 12px;
+    box-shadow: 0 5px 16px -4px #00000012;
+    color: rgba(0, 0, 0, .9);
+    cursor: default;
+
+    &.noMentions {
+      background-color: #f7f7f7;
+      .inputPlaceholder {
+        color: rgba(0, 0, 0, .4) !important;
+      }
+    }
+
+    &:focus-within {
+      border-color: var(--mybricks-color-primary);
+    }
+
+    .mentions {
+      padding: 8px 8px 0 8px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      span {
+        font-size: 12px;
+        line-height: 20px;
+        white-space: nowrap;
+      }
+
+      .focusarea {
+        color: var(--mybricks-color-primary);
+      }
+
+      .vibeCoding {
+        color: var(--mybricks-color-primary);
+      }
+    }
+
+    .topArea {
+      padding: 8px;
+      box-shadow: 0 .5px 0 0 rgba(0, 0, 0, .13);
+    }
+
+    .input {
+      // padding: 12px 16px 10px;
+      padding: 8px 8px 10px;
+      // line-height: 20px;
+      line-height: 1.5;
+      min-height: 60px;
+      position: relative;
+
+      .inputEditorContainer {
+        font-size: 12px;
+        max-height: 140px;
+        // scrollbar-width: none;
+        position: relative;
+        min-height: inherit;
+        overflow: auto;
+
+        .scroll-bar();
+
+        .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;
+          top: 0;
+          left: 0;
+          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;
+        gap: 4px;
+
+        .attachmentButton {
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          // width: 32px;
+          // border-radius: 20px;
+          // height: 32px;
+          width: 25px;
+          height: 25px;
+          border-radius: 50%;
+          cursor: pointer;
+
+          svg {
+            width: 18px;
+            height: 18px;
+            color: rgba(0, 0, 0, .6);
+          }
+
+          &:hover {
+            background-color: rgba(0, 0, 0, .09);
+          }
+
+          input {
+            display: none;
+          }
+        }
+
+        &.disabled {
+          
+          opacity: 0.5;
+          .attachmentButton {
+            cursor: default;
+            &:hover {
+              background-color: transparent;
+            }
+          }
+        }
+      }
+
+      .rightArea {
+        display: flex;
+        align-items: center;
+
+        .sendButtonContainer {
+          cursor: pointer;
+          background-color: var(--mybricks-color-primary);
+          // border-radius: 12px;
+          // border-radius: 6px;
+          border-radius: 50%;
+          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;
+            width: 25px;
+            height: 25px;
+
+            svg {
+              width: 11px;
+              height: 11px;
+            }
+          }
+
+          .loadingButton {
+            svg {
+              width: 11px;
+              height: 11px;
+            }
+          }
+        }
+
+        .disabled {
+          cursor: default;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}

package/src/components/sender/index.tsx

@@ -0,0 +1,298 @@
+import React, { useEffect, useRef, useState, useImperativeHandle, PropsWithoutRef, forwardRef } from "react"
+import classNames from "classnames";
+import { message } from "antd";
+import { Attachment, Loading, Send, Code } from "../icons";
+import { MentionTag } from "../mention";
+import { AttachmentsList } from "../attachments";
+import { Mention, Attachments } from "../types";
+import css from "./index.less"
+
+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);
+  })
+}
+
+interface SenderProps {
+  onSend: (message: {
+    message: string;
+    attachments: Attachments;
+    mentions: Mention[];
+    [key: string]: any;
+  }) => void;
+  onMentionClick?: (mention: Mention) => void;
+  loading?: boolean;
+  placeholder?: string;
+  attachmentsPrompt?: string;
+  disabled?: boolean;
+  onBlur?: () => void;
+  mode?: "mention"
+}
+
+interface SenderRef {
+  focus: () => void;
+  // TODO: 目前仅展示聚焦组件且单个比较简单直接set即可，后续可通过输入框@唤起选择多个
+  setMentions: (mentions: Mention[]) => void;
+}
+
+const Sender = forwardRef<SenderRef, SenderProps>((props, ref) => {
+  const { loading, placeholder = "请输入", disabled, onMentionClick, onBlur, attachmentsPrompt, mode } = props;
+  const inputEditorRef = useRef<HTMLDivElement>(null);
+  const [isComposing, setIsComposing] = useState(false);
+  const [inputContent, setInputContent] = useState<string | null>(null);
+  const [attachments, setAttachments] = useState<Attachments>([]);
+  const [mentions, setMentions] = useState<Mention[]>([]);
+  const [vibeCoding, setVibeCoding] = useState(false);
+
+  useImperativeHandle(ref, () => {
+    return {
+      focus: () => {
+        inputEditorRef.current!.focus()
+      },
+      setMentions: (mentions) => {
+        setMentions(mentions)
+        setVibeCoding(mentions[0]?.vibeCoding || false);
+      },
+    };
+  }, []);
+
+  const send = () => {
+    const inputContent = inputEditorRef.current!.textContent;
+    if (inputContent && !loading && !disabled) {
+      props.onSend({
+        message: inputContent,
+        attachments,
+        mentions,
+      })
+
+      setAttachments([]);
+      setInputContent("");
+      inputEditorRef.current!.textContent = "";
+    }
+  }
+
+  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);
+  }
+
+  /** 检查附件数量是否超出限制，超出返回 true */
+  const checkAttachmentsLimit = () => {
+    if (attachments.length > 1) {
+      message.info("当前只能上传两张图片");
+      return true;
+    }
+    return false;
+  }
+
+  const updateAttachmentsByFile = (file: File) => {
+    if (file.size > 5000 * 1024) {
+      message.info(`当前文件大小 ${(file.size / 1024).toFixed(2)}K，超过了5000K，建议您截取页面中的某个区域作为附件`)
+      return;
+    }
+    readFileToBase64(file)
+      .then((base64) => {
+        setAttachments((attachments) => {
+          return [...attachments, { type: "image", content: base64 }]
+        })
+        if (!inputContent && attachmentsPrompt) {
+          setInputContent(attachmentsPrompt);
+          const selection = window.getSelection();
+
+          if (!selection?.rangeCount) {
+            return;
+          }
+
+          const range = selection.getRangeAt(0);
+          const textNode = document.createTextNode(attachmentsPrompt);
+          range.insertNode(textNode);
+          range.setStartAfter(textNode);
+          range.setEndAfter(textNode);
+        }
+      })
+      .catch((event) => {
+        console.error("[@mybricks/plugin-ai - 上传附件失败]", event);
+        message.error("[@mybricks/plugin-ai - 上传附件失败]");
+      })
+  }
+
+  const uploadAttachment = () => {
+    if (loading || disabled) {
+      return;
+    }
+    if (checkAttachmentsLimit()) {
+      return;
+    }
+    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;
+        }
+
+        updateAttachmentsByFile(file);
+      }
+    });
+
+    fileInput.click();
+  };
+
+  const onPaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    if (loading || disabled) {
+      return;
+    }
+    const file = event.clipboardData.files[0];
+    if (file?.type.startsWith('image/')) {
+      if (checkAttachmentsLimit()) {
+        return;
+      }
+      updateAttachmentsByFile(file);
+    } 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)
+    }
+  }
+
+  const onAttachmentsDelete = (index: number) => {
+    setAttachments((attachments) => {
+      attachments.splice(index, 1)
+      return [...attachments]
+    })
+  }
+
+  return (
+    <div className={css.container}>
+      <div className={classNames(css.editor, {
+        [css.noMentions]: mode === "mention" && !mentions.length
+      })}>
+        {attachments.length ? (
+          <div className={css.topArea}>
+            <AttachmentsList attachments={attachments} onDelete={onAttachmentsDelete}/>
+          </div>
+        ) : null}
+        {mentions.length ? (
+          <div className={css.mentions}>
+            <span>对于</span>
+            <MentionTag mention={mentions[0]} onClick={onMentionClick} />
+            <span>{(mentions[0].type === "page" ? "页面" : "组件") + (mentions[0].focusArea ? "的" : "")}</span>
+            {mentions[0].focusArea ? (
+              <span className={css.focusarea}>
+                {mentions[0].focusArea.title || "区域"}
+              </span>
+            ) : null}
+            {/* {vibeCoding ? <span className={css.vibeCoding}>(开发中)</span> : null} */}
+            {/* {mentions.map((mention) => {
+              return <MentionTag key={mention.id} mention={mention} onClick={onMentionClick} />
+            })} */}
+          </div>
+        ) : null}
+        <div className={css.input}>
+          <div className={css.inputEditorContainer}>
+            <div
+              ref={inputEditorRef}
+              className={css.inputEditor}
+              contentEditable={disabled ? false : true}
+              onKeyDown={onKeyDown}
+              onCompositionStart={onCompositionStart}
+              onCompositionEnd={onCompositionEnd}
+              onInput={onInput}
+              onPaste={onPaste}
+              onBlur={onBlur}
+            ></div>
+            {!inputContent && <div className={css.inputPlaceholder}>
+              {placeholder}
+            </div>}
+          </div>
+        </div>
+        <div className={css.editorAction}>
+          <div className={classNames(css.leftArea, {
+            [css.disabled]: loading || disabled
+          })}>
+            <div className={css.attachmentButton} onClick={uploadAttachment}>
+              <Attachment />
+            </div>
+            {/* {attachments.length ? (
+              <AttachmentsList attachments={attachments} onDelete={onAttachmentsDelete}/>
+            ) : null} */}
+          </div>
+          <div className={css.rightArea}>
+            <div className={classNames(css.sendButtonContainer, {
+              [css.disabled]: !inputContent || loading || disabled
+            })} onClick={send}>
+              <div className={classNames(css.sendButton, {
+                [css.loadingButton]: loading
+              })}>
+                {loading ? <Loading /> : <Send />}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+export { Sender }
+export type { SenderRef, SenderProps }

package/src/components/types.ts

@@ -0,0 +1,31 @@
+interface Mention {
+  /** 唯一ID */
+  id?: string;
+  /** 展示用 */
+  name?: string;
+
+  
+  /** 区域才会有 */
+  focusArea?: {
+    selector: string;
+    title: string;
+  }
+  comId: string;
+  pageId: string;
+  title: string;
+  /** 类型，组件、页面 */
+  type: "page" | "uiCom";
+  /** 是否为 vibeCoding 状态（代码编辑模式） */
+  vibeCoding?: boolean;
+}
+
+interface Extension {
+  mentions: Mention[]
+}
+
+type Attachments = {
+  type: "image";
+  content: string;
+}[]
+
+export type { Mention, Extension, Attachments }

package/src/constants/index.ts

@@ -0,0 +1,8 @@
+/**
+ * 是否启用辅助标记
+ * 
+ * 启用后，辅助标记会被保留在最终的actions.json文件中
+ * 禁用后，辅助标记会被删除
+ */
+export const ENABLED_ACTION_TAGS = true;
+

package/src/context/RequestStatusTracker.ts

@@ -0,0 +1,50 @@
+import { Events } from "@mybricks/rxai"
+
+interface RequestStatus {
+  state: "pending" | "fulfilled" | "rejected";
+  result: any;
+}
+class RequestStatusTracker {
+  private requests = new Map<string, RequestStatus>();
+  events = new Events<{promise: {
+    id: string;
+    status: RequestStatus
+  }}>();
+  constructor() {}
+
+  track(id: string, promise: Promise<any>) {
+    const status: RequestStatus = {
+      state: "pending",
+      result: null,
+    }
+    this.events.emit("promise", {
+      id,
+      status,
+    })
+
+    promise.then((result) => {
+      status.state = "fulfilled";
+      status.result = result
+    }).catch((error) => {
+      status.state = "rejected";
+      status.result = error
+      console.error(error);
+    }).finally(() => {
+      this.events.emit("promise", {
+        id,
+        status,
+      })
+    })
+
+    this.requests.set(id, status);
+  }
+
+  getStatus(id: string) {
+    return this.requests.get(id) || {
+      state: "fulfilled",
+      result: null
+    };
+  }
+}
+
+export { RequestStatusTracker };

package/src/context/index.ts

@@ -1,21 +1,83 @@
-import { Rxai } from "@mybricks/rxai"
+import { Rxai, Events, IDB } from "@mybricks/rxai"
+import { RequestStatusTracker } from "./RequestStatusTracker";
+import { DeviceType } from './../types';
+import type { AgentConfigParams } from '../agents/utils/config';
 
 class Context {
+
+  /** UI展示名称 */
+  name!: string
+
   rxai!: Rxai
+  globalRxai!: Rxai
   currentFocus?: AiServiceFocusParams;
   api!: AiServiceAPI;
+  aiViewAPI!: AiViewApi;
+
+  /** 设计器 API（带记录功能） */
+  designer?: {
+    createPage?: (id: string, title: string, config?: any) => Promise<{ id: string; onProgress: Function; }>;
+    createCanvas?: () => Promise<{ id: string; title: string; }>;
+    updatePage?: (...params: any[]) => Promise<void>;
+    updateUiCom?: (...params: any[]) => Promise<void>;
+    updateLogicCom?: (...params: any[]) => Promise<void>;
+    createDiagram?: (...params: any[]) => Promise<{ id: string; title: string }>;
+    updateDiagram?: (...params: any[]) => Promise<void>;
+    getDiagramInfo?: (...params: any[]) => any;
+    getDiagramInfoByVarId?: (...params: any[]) => any;
+    getDiagramInfoByListenerInfo?: (...params: any[]) => any;
+    getAllComDefPrompts: () => string;
+  };
 
-  /** 应用传入的系统提示词 */
-  prompts?: any;
+  /** Agent 配置 */
+  agents: AgentConfigParams[] = [];
 
-  createRxai(options: ConstructorParameters<typeof Rxai>[0]) {
+  /** 是否多画布 */
+  isMutiCanvas: boolean = true
+
+  userConfig?: {
+    useCloudComponents: boolean;
+    enabledActionTags: boolean;
+  }
+
+  get useCloudComponents() {
+    return this.userConfig?.useCloudComponents ?? false;
+  }
+
+  get enabledActionTags() {
+    return this.userConfig?.enabledActionTags ?? true;
+  }
+
+  deviceType: DeviceType = DeviceType.Mobile
+
+  /** 应用传入的创建页面模板 */
+  createTemplates?: {
+    page: any
+  }
+
+  events = new Events<{
+    aiViewDisplay: boolean;
+    focus: AiServiceFocusParams | undefined;
+  }>();
+
+  createRxai(options: ConstructorParameters<typeof Rxai>[0] & { key: number }) {
     if (!this.rxai) {
-      this.rxai = new Rxai(options)
+      this.rxai = new Rxai({
+        ...options,
+        idb: options.key ? new IDB({
+          dbName: "@mybricks/plugin-ai/messages",
+          key: options.key
+        }) : undefined
+      })
+      this.globalRxai = new Rxai(options)
     }
   }
+
+  requestStatusTracker = new RequestStatusTracker();
+
+  pluginParams: any = {};
 }
 
 const context = new Context();
 
 export { context };
-