@mybricks/plugin-ai 0.0.2 → 0.0.3

package/src/components/sender/index.tsx

@@ -1,298 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

package/src/context/RequestStatusTracker.ts

@@ -1,50 +0,0 @@
-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,83 +0,0 @@
-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;
-  };
-
-  /** Agent 配置 */
-  agents: AgentConfigParams[] = [];
-
-  /** 是否多画布 */
-  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,
-        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 };

package/src/data.ts

@@ -1,5 +0,0 @@
-const data = {
-
-}
-
-export default data

package/src/global.d.ts

@@ -1,100 +0,0 @@
-interface AiServiceAPI {
-  global: {
-    title: string;
-    api: {
-      getAllPageInfo: () => {pageAry: any[]}[];
-      getAllComDefPrompts: () => string;
-      getComEditorPrompts: (...params: any) => 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; }
-      getPageOnProcess: (...params: any) => any;
-    }
-  };
-  uiCom: {
-    title: string;
-    api: {
-      updateCom: (...params: any) => void;
-      getComPrompts: (...params: any) => string;
-      getComDSLPrompts: (...params: any) => string;
-      /** @deprecated 废弃 */
-      getComEditorPrompts: (...params: any) => string;
-      getOutlineInfo: (...params: any) => any
-      getComOnProcess: (...params: any) => any;
-    }
-  }
-  diagram: {
-    title: string;
-    api: {
-      createDiagram: (...args: any) => { id: string; title: string }
-      updateDiagram: (...args: any) => void;
-      getDiagramInfo: (...args: any) => any;
-      getDiagramInfoByVarId: (...args: any) => any;
-      getDiagramInfoByListenerInfo: (...args: any) => any;
-    }
-  },
-  logicCom: {
-    title: string;
-    api: {
-      getOutlineInfo: (...params: any) => any;
-      updateCom: (...params: any) => any;
-    }
-  }
-}
-
-type AiServiceFocusParams = {
-  onProgress: (status: "start" | "ing" | "complete") => void;
-  /** 区域才会有 */
-  focusArea?: {
-    selector: string;
-    title: string;
-  }
-  comId: string;
-  pageId: string;
-  title: string;
-  /** 类型，组件、页面，或自定义类型 */
-  type: "page" | "uiCom" | "section" | "logicCom" | string;
-  vibeCoding?: boolean;
-}
-
-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: "start" | "ing" | "complete") => void;
-}
-interface AiViewApi {
-  focusPage: (pageId: string) => void;
-  focusCom: (comId: string) => void;
-}
-
-interface AiStartViewApi {
-  onProgress: (state: "start" | "ing") => void;
-}