@mybricks/plugin-ai 0.0.1 → 0.0.2

package/src/api-record-replay/replayer.ts

@@ -0,0 +1,148 @@
+/**
+ * API 调用回放模块
+ * 根据记录的 JSON 序列执行回放
+ */
+
+import { RecordedAction, RecordedActionType } from './recorder';
+
+export interface ReplayOptions {
+  /** 是否忽略时间间隔，立即执行 */
+  ignoreDelay?: boolean;
+  /** 时间间隔的倍数（用于加速或减速回放） */
+  delayMultiplier?: number;
+  /** 每个操作执行前的回调 */
+  onBeforeAction?: (action: RecordedAction, index: number) => void;
+  /** 每个操作执行后的回调 */
+  onAfterAction?: (action: RecordedAction, index: number, result: any) => void;
+  /** 回放完成后的回调 */
+  onComplete?: () => void;
+  /** 回放出错时的回调 */
+  onError?: (error: Error, action: RecordedAction, index: number) => void;
+}
+
+export interface ReplayAPI {
+  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<any>;
+  updateDiagram: (...params: any[]) => Promise<any>;
+}
+
+/**
+ * 回放记录的 API 调用
+ * @param records 记录的 API 调用序列
+ * @param api API 实现对象
+ * @param options 回放选项
+ */
+export async function replay(
+  records: RecordedAction[],
+  api: ReplayAPI,
+  options: ReplayOptions = {}
+): Promise<void> {
+  const {
+    ignoreDelay = false,
+    delayMultiplier = 1,
+    onBeforeAction,
+    onAfterAction,
+    onComplete,
+    onError,
+  } = options;
+
+  for (let i = 0; i < records.length; i++) {
+    const action = records[i];
+
+    try {
+      // 执行前回调
+      onBeforeAction?.(action, i);
+
+      // 等待时间间隔
+      if (!ignoreDelay && action.delay > 0) {
+        const delay = action.delay * delayMultiplier;
+        await sleep(delay);
+      }
+
+      // 执行 API 调用
+      let result: any;
+      switch (action.type) {
+        case 'createPage': {
+          const [id, title, config] = action.params;
+          result = await api.createPage(id, title, config);
+          break;
+        }
+        case 'createCanvas': {
+          result = await api.createCanvas();
+          break;
+        }
+        case 'updatePage': {
+          // updatePage 的参数是展开的，需要展开传递
+          result = await api.updatePage(...action.params);
+          break;
+        }
+        case 'updateUiCom': {
+          // updateUiCom 的参数是展开的，需要展开传递
+          result = await api.updateUiCom(...action.params);
+          break;
+        }
+        case 'updateLogicCom': {
+          // updateLogicCom 的参数是展开的，需要展开传递
+          result = await api.updateLogicCom(...action.params);
+          break;
+        }
+        case 'createDiagram': {
+          // createDiagram 的参数是展开的，需要展开传递
+          result = await api.createDiagram(...action.params);
+          break;
+        }
+        case 'updateDiagram': {
+          // updateDiagram 的参数是展开的，需要展开传递
+          result = await api.updateDiagram(...action.params);
+          break;
+        }
+        default:
+          throw new Error(`Unknown action type: ${(action as any).type}`);
+      }
+
+      // 执行后回调
+      onAfterAction?.(action, i, result);
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      onError?.(err, action, i);
+      
+      // 根据选项决定是否继续执行
+      // 默认继续执行，只记录错误
+      console.error(`Replay error at action ${i} (${action.type}):`, err);
+    }
+  }
+
+  // 完成回调
+  onComplete?.();
+}
+
+/**
+ * 从 JSON 字符串加载并回放
+ * @param jsonString JSON 字符串
+ * @param api API 实现对象
+ * @param options 回放选项
+ */
+export async function replayFromJSON(
+  jsonString: string,
+  api: ReplayAPI,
+  options: ReplayOptions = {}
+): Promise<void> {
+  try {
+    const records: RecordedAction[] = JSON.parse(jsonString);
+    await replay(records, api, options);
+  } catch (error) {
+    throw new Error(`Failed to parse replay JSON: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+
+/**
+ * 睡眠函数
+ */
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+

package/src/components/attachments/index.less

@@ -0,0 +1,117 @@
+.attachments {
+  display: flex;
+  // gap: 8px;
+  gap: 4px;
+  align-items: center;
+
+  .imageThumbnail {
+    cursor: pointer;
+    pointer-events: auto;
+    flex-shrink: 0;
+    // width: 56px;
+    aspect-ratio: 1;
+    // min-width: 56px;
+    // border-radius: 8px;
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+    // border: 1px solid rgba(0, 0, 0, .13);
+    position: relative;
+    // overflow: hidden;
+    background: #fff;
+
+    img {
+      // width: 100%;
+      // height: 100%;
+      width: 32px;
+      height: 32px;
+      display: inline-block;
+      // background-repeat: no-repeat;
+      // background-size: cover;
+      overflow: hidden;
+      // object-fit: contain;
+      // background-size: cover;
+      // background-position: center;
+      // background-repeat: no-repeat;
+      border-radius: 4px;
+      object-fit: contain;
+      outline: 1px solid rgba(0, 0, 0, 0.13);
+    }
+
+    .imageDeleteContainer {
+      visibility: hidden;
+      cursor: pointer;
+      position: absolute;
+      // top: 0;
+      // right: 0;
+      top: -4px;
+      right: -4px;
+      // 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);
+        }
+      }
+    }
+
+    .preview {
+      z-index: 2000;
+      position: absolute;
+      width: 300px;
+      background: #fff;
+      box-shadow: 0 5px 16px -4px rgba(0, 0, 0, 0.07059);
+      padding: 10px;
+      border-radius: 8px;
+      border: 1px solid #f1f1f1;
+      visibility: hidden;
+
+      img {
+        width: 280px;
+        height: fit-content;
+      }
+    }
+
+    &:hover {
+      .preview {
+        visibility: visible;
+      }
+      .imageDeleteContainer {
+        visibility: visible;
+      }
+    }
+  }
+}
+
+.preview {
+  z-index: 2000;
+  position: absolute;
+  width: 300px;
+  background: #fff;
+  box-shadow: 0 5px 16px -4px rgba(0, 0, 0, 0.07059);
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #f1f1f1;
+  visibility: hidden;
+
+  img {
+    width: 280px;
+    height: fit-content;
+  }
+}

package/src/components/attachments/index.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useRef, useState, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { Close } from "../icons";
+import css from "./index.less";
+import classNames from "classnames";
+
+interface Attachment {
+  type: "image";
+  content: string;
+}
+
+interface AttachmentsProps {
+  attachments: Attachment[];
+  className?: string;
+  onDelete?: (index: number) => void;
+}
+/** 附件图片 */
+const AttachmentsList = (props: AttachmentsProps) => {
+  const { attachments, onDelete, className } = props;
+
+  return (
+    <div className={classNames(css.attachments, className)}>
+      {attachments.map((attachment, index) => {
+        return <Attachment key={index} attachment={attachment} onDelete={onDelete ? () => onDelete(index) : undefined} />
+      })}
+    </div>
+  )
+}
+
+export { AttachmentsList };
+
+const Attachment = (props: { attachment: Attachment, onDelete?: () => void; }) => {
+  const imgRef = useRef<HTMLImageElement>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
+  const { attachment, onDelete } = props;
+  const [previewBCR, setPreviewBCR] = useState<DOMRect | null>(null);
+  const [visible, setVisible] = useState(false);
+
+  const delayedTask = useMemo(() => {
+    return new DelayedTask<[boolean]>((visible) => {
+      setVisible(visible);
+    }, 50)
+  }, [])
+
+  useEffect(() => {
+    if (visible) {
+      if (previewBCR) {
+        const imgBcr = imgRef.current!.getBoundingClientRect();
+
+        const topSpace = imgBcr.top - 4 - previewBCR.height;
+
+        if (topSpace > 0) {
+          previewRef.current!.style.top = `${topSpace}px`;
+        } else {
+          previewRef.current!.style.top = `${imgBcr.top + imgBcr.height}px`;
+        }
+        
+        if (imgBcr.left + previewBCR.width > document.body.offsetWidth) {
+          previewRef.current!.style.left = `${imgBcr.left + imgBcr.width - previewBCR.width}px`
+        } else {
+          previewRef.current!.style.left = `${imgBcr.left}px`;
+        }
+
+        previewRef.current!.style.visibility = "visible";
+      }
+    } else {
+      previewRef.current!.style.visibility = "hidden";
+    }
+  }, [previewBCR, visible])
+
+  return (
+    <>
+      <div
+        className={css.imageThumbnail}
+        onMouseEnter={() => {
+          delayedTask.startNow(true);
+        }}
+        onMouseLeave={() => {
+          delayedTask.start(false);
+        }}
+      >
+        <img ref={imgRef} src={attachment.content} />
+        {onDelete && <div className={css.imageDeleteContainer} onClick={onDelete}>
+          <div className={css.imageDeleteIcon}>
+            <Close />
+          </div>
+        </div>}
+      </div>
+      {createPortal((
+        <div
+          ref={previewRef}
+          className={css.preview}
+          onMouseEnter={() => {
+            delayedTask.startNow(true);
+          }}
+          onMouseLeave={() => {
+            delayedTask.start(false);
+          }}
+        >
+          <img src={attachment.content} onLoad={(event) => {
+            setPreviewBCR((event.target as HTMLImageElement).parentElement!.getBoundingClientRect())
+          }} />
+        </div>
+      ), document.body)}
+    </>
+  )
+}
+
+class DelayedTask<T extends unknown[]> {
+  private timerId: number | null = null;
+  constructor(private callback: (...args: T) => void, private delay: number) {}
+
+  start(...args: T) {
+    this.cancel();
+    this.timerId = setTimeout(() => {
+      this.callback(...args);
+      this.timerId = null;
+    }, this.delay) as unknown as number;
+
+    return this;
+  }
+
+  cancel() {
+    if (this.timerId) {
+      clearTimeout(this.timerId);
+      this.timerId = null;
+    }
+    return this;
+  }
+
+  startNow(...args: T) {
+    this.cancel();
+    this.callback(...args);
+    return this;
+  }
+}

package/src/components/icons/index.tsx

@@ -21,4 +21,24 @@ 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 }
+const Send = () => {
+  return <svg viewBox="0 0 1024 1024" version="1.1"><path d="M24.65 399.36L965.485 7.314a29.257 29.257 0 0 1 39.643 34.085L770.78 978.87a29.257 29.257 0 0 1-47.104 15.36L520.192 824.686a29.257 29.257 0 0 0-39.424 1.828L376.393 930.816a29.257 29.257 0 0 1-49.883-20.626V689.737a29.257 29.257 0 0 1 8.557-20.7L759.515 244.59 258.414 620.47a29.257 29.257 0 0 1-36.28-0.95L17.19 448.805a29.257 29.257 0 0 1 7.46-49.445z" fill="currentColor" p-id="5126"></path></svg>
+}
+
+const Delete = () => {
+  return <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16298"><path d="M928.814545 405.783273a28.858182 28.858182 0 0 0 0-40.773818l-309.992727-309.992728a28.858182 28.858182 0 0 0-40.820363 0l-451.118546 451.118546a115.246545 115.246545 0 0 0 0 163.048727l244.968727 243.432727a115.432727 115.432727 0 0 0 81.221819 33.512728h370.501818a28.811636 28.811636 0 1 0 0-57.669819h-238.266182c-51.339636 0-77.079273-62.045091-40.820364-98.443636l384.325818-384.232727zM436.968727 816.174545a57.623273 57.623273 0 0 1-81.501091 0l-187.810909-187.717818a57.623273 57.623273 0 0 1 0-81.501091l115.2-115.2 269.312 269.312-115.2 115.106909z" p-id="16299" fill="currentColor"></path></svg>
+}
+
+const Export = () => {
+  return <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4683"><path d="M712.533333 371.2l-128 128-59.733333-59.733333 128-128L597.333333 256l-42.666666-42.666667h256v256l-42.666667-42.666666-55.466667-55.466667zM657.066667 256H768v110.933333V256h-110.933333zM298.666667 298.666667v426.666666h426.666666v-256l85.333334 85.333334v256H213.333333V213.333333h256l85.333334 85.333334H298.666667z" fill="currentColor" p-id="4684"></path></svg>
+}
+
+const Chat = () => {
+  return <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5661"><path d="M767.424 130.032 256.576 130.032c-70.4 0-128 57.6-128 128l0 335.632c0 70.4 57.6 128 128 128l118.352 0 0 172.288 213.328-172.288 179.152 0c70.4 0 128-57.6 128-128L895.408 258.032C895.424 187.632 837.824 130.032 767.424 130.032zM815.424 593.664c0 26.016-21.984 48-48 48L588.272 641.664 560 641.664l-22 17.76-83.056 67.088 0-4.848 0-80-80 0-118.352 0c-26.016 0-48-21.984-48-48L208.592 258.032c0-26.016 21.984-48 48-48l510.848 0c26.016 0 48 21.984 48 48L815.44 593.664z" p-id="5662" fill="currentColor"></path><path d="M347.888 425.872m-46.608 0a2.913 2.913 0 1 0 93.216 0 2.913 2.913 0 1 0-93.216 0Z" p-id="5663" fill="currentColor"></path><path d="M512 425.872m-46.608 0a2.913 2.913 0 1 0 93.216 0 2.913 2.913 0 1 0-93.216 0Z" p-id="5664" fill="currentColor"></path><path d="M676.096 425.872m-46.608 0a2.913 2.913 0 1 0 93.216 0 2.913 2.913 0 1 0-93.216 0Z" p-id="5665" fill="currentColor"></path></svg>
+}
+
+const Code = () => {
+  return <svg viewBox="0 0 1024 1024" p-id="4803"><path d="M318.578 819.2L17.067 512l301.51-307.2 45.512 45.511L96.71 512 364.09 773.689z m386.844 0l-45.51-45.511L927.288 512 659.91 250.311l45.511-45.511L1006.933 512zM540.786 221.867l55.75 11.15-113.379 569.116-55.75-11.093z" fill="currentColor" p-id="4804"></path></svg>
+}
+
+export { ArrowUp, Attachment, Loading, Close, Success, Send, Delete, Export, Chat, Code }

package/src/components/index.less

@@ -0,0 +1,34 @@
+.scroll-bar() {
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent !important;
+  }
+
+  &:hover {
+    background: transparent; //防止没有激活
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(0, 0, 0, 0.3) !important;
+    }
+  }
+}
+
+.loading-shimmer {
+  -webkit-text-fill-color: transparent;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-name: loading-shimmer;
+  background: #adadad linear-gradient(to right, #adadad 0, #1a1a1abf 40%, #1a1a1abf 60%, #adadad 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  background-repeat: no-repeat;
+  background-size: 50% 200%;
+  display: inline-block;
+}
+
+@keyframes loading-shimmer {
+  0% {
+    background-position: -100% 0;
+  }
+  100% {
+    background-position: 250% 0;
+  }
+}

package/src/components/mention/index.less

@@ -0,0 +1,23 @@
+.mention {
+  cursor: pointer;
+  color: var(--mybricks-color-primary);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+  border-radius: 10px;
+  // max-width: 88px;
+  // width: fit-content;
+  overflow: hidden;
+  // white-space: nowrap;
+  // text-overflow: ellipsis;
+  height: 20px;
+  display: inline-flex;
+  max-width: 100%;
+
+  .text {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    // padding: 0 5px; /* 添加内边距 */
+  }
+}

package/src/components/mention/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Mention } from "../types";
+import css from "./index.less";
+
+interface MentionTagProps {
+  mention: Mention
+  focusarea?: boolean;
+  onClick?: (mention: Mention) => void;
+}
+const MentionTag = (props: MentionTagProps) => {
+  const { mention, focusarea, onClick } = props;
+  return (
+    <div className={css.mention} onClick={() => onClick?.(mention)}>
+      <div className={css.text}>{`@${mention.title || mention.name}`}{focusarea && mention.focusArea ? `(${mention.focusArea.title || "区域"})` : ""}</div>
+    </div>
+  );
+};
+
+export { MentionTag }