@formicoidea/labre-core 0.23.0

package/src/_pkgs/affine-components/hover/when-hover.ts

@@ -0,0 +1,144 @@
+import { dedupe, delayHide, delayShow } from './middlewares/basic.js';
+import { safeBridge, safeTriangle } from './middlewares/safe-area.js';
+import type { HoverMiddleware, WhenHoverOptions } from './types.js';
+
+/**
+ * Call the `whenHoverChange` callback when the element is hovered.
+ *
+ * After the mouse leaves the element, there is a 300ms delay by default.
+ *
+ * Note: The callback may be called multiple times when the mouse is hovering or hovering out.
+ *
+ * See also https://floating-ui.com/docs/useHover
+ *
+ * @example
+ * ```ts
+ * private _setReference: RefOrCallback;
+ *
+ * connectedCallback() {
+ *   let hoverTip: HTMLElement | null = null;
+ *   const { setReference, setFloating } = whenHover(isHover => {
+ *     if (!isHover) {
+ *       hoverTips?.remove();
+ *       return;
+ *     }
+ *     hoverTip = document.createElement('div');
+ *     document.body.append(hoverTip);
+ *     setFloating(hoverTip);
+ *   }, { hoverDelay: 500 });
+ *   this._setReference = setReference;
+ * }
+ *
+ * render() {
+ *   return html`
+ *     <div ref=${this._setReference}></div>
+ *   `;
+ * }
+ * ```
+ */
+export const whenHover = (
+  whenHoverChange: (isHover: boolean, event?: Event) => void,
+  {
+    enterDelay = 0,
+    leaveDelay = 250,
+    alwayRunWhenNoFloating = true,
+    safeTriangle: triangleOptions = false,
+    safeBridge: bridgeOptions = true,
+  }: WhenHoverOptions = {}
+) => {
+  /**
+   * The event listener will be removed when the signal is aborted.
+   */
+  const abortController = new AbortController();
+  let referenceElement: Element | undefined;
+  let floatingElement: Element | undefined;
+
+  const middlewares: HoverMiddleware[] = [
+    dedupe(alwayRunWhenNoFloating),
+    triangleOptions &&
+      safeTriangle(
+        typeof triangleOptions === 'boolean' ? undefined : triangleOptions
+      ),
+    bridgeOptions &&
+      safeBridge(
+        typeof bridgeOptions === 'boolean' ? undefined : bridgeOptions
+      ),
+    delayShow(enterDelay),
+    delayHide(leaveDelay),
+  ].filter(v => typeof v !== 'boolean') as HoverMiddleware[];
+
+  let currentEvent: Event | null = null;
+  const onHoverChange = (async (e: Event) => {
+    currentEvent = e;
+    for (const middleware of middlewares) {
+      const go = await middleware({
+        event: e,
+        floatingElement,
+        referenceElement,
+      });
+      if (!go) return;
+    }
+    // ignore expired event
+    if (e !== currentEvent) return;
+    const isHover = e.type === 'mouseenter' ? true : false;
+    whenHoverChange(isHover, e);
+  }) as (e: Event) => void;
+
+  const addHoverListener = (element?: Element) => {
+    if (!element) return;
+    // see https://stackoverflow.com/questions/14795099/pure-javascript-to-check-if-something-has-hover-without-setting-on-mouseover-ou
+    const alreadyHover = element.matches(':hover');
+    if (alreadyHover && !abortController.signal.aborted) {
+      // When the element is already hovered, we need to trigger the callback manually
+      onHoverChange(new MouseEvent('mouseenter'));
+    }
+    element.addEventListener('mouseenter', onHoverChange, {
+      capture: true,
+      signal: abortController.signal,
+    });
+    element.addEventListener('mouseleave', onHoverChange, {
+      // Please refrain use `capture: true` here.
+      // It will cause the `mouseleave` trigger incorrectly when the pointer is still within the element.
+      // The issue is detailed in https://github.com/toeverything/blocksuite/issues/6241
+      //
+      // The `mouseleave` does not **bubble**.
+      // This means that `mouseleave` is fired when the pointer has exited the element and all of its descendants,
+      // If `capture` is used, all `mouseleave` events will be received when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element).
+      //
+      // capture: true,
+      signal: abortController.signal,
+    });
+  };
+
+  const removeHoverListener = (element?: Element) => {
+    if (!element) return;
+    element.removeEventListener('mouseenter', onHoverChange, {
+      capture: true,
+    });
+    element.removeEventListener('mouseleave', onHoverChange);
+  };
+
+  const setReference = (element?: Element) => {
+    // Clean previous listeners
+    removeHoverListener(referenceElement);
+    addHoverListener(element);
+    referenceElement = element;
+  };
+
+  const setFloating = (element?: Element) => {
+    // Clean previous listeners
+    removeHoverListener(floatingElement);
+    addHoverListener(element);
+    floatingElement = element;
+  };
+
+  return {
+    setReference,
+    setFloating,
+    dispose: () => {
+      abortController.abort();
+    },
+  };
+};
+
+export type { WhenHoverOptions };

package/src/_pkgs/affine-components/icon-button/index.ts

@@ -0,0 +1,242 @@
+import { baseTheme } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import {
+  css,
+  html,
+  LitElement,
+  nothing,
+  type TemplateResult,
+  unsafeCSS,
+} from 'lit';
+import { property, query } from 'lit/decorators.js';
+
+/**
+ * Default size is 32px, you can override it by setting `size` property.
+ * For example, `<icon-button size="32px"></icon-button>`.
+ *
+ * You can also set `width` or `height` property to override the size.
+ *
+ * Set `text` property to show a text label.
+ *
+ * @example
+ * ```ts
+ * html`<icon-button @click=${this.onUnlink}>
+ *   ${UnlinkIcon}
+ * </icon-button>`
+ *
+ * html`<icon-button size="32px" text="HTML" @click=${this._importHtml}>
+ *   ${ExportToHTMLIcon}
+ * </icon-button>`
+ * ```
+ */
+export class IconButton extends LitElement {
+  static override styles = css`
+    :host {
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: none;
+      width: var(--button-width);
+      height: var(--button-height);
+      border-radius: 4px;
+      background: transparent;
+      cursor: pointer;
+      user-select: none;
+      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
+      color: var(--affine-text-primary-color);
+      pointer-events: auto;
+      padding: 4px;
+    }
+
+    // This media query can detect if the device has a hover capability
+    @media (hover: hover) {
+      :host(:hover) {
+        background: var(--affine-hover-color);
+      }
+    }
+
+    :host(:active) {
+      background: transparent;
+    }
+
+    :host([disabled]),
+    :host(:disabled) {
+      background: transparent;
+      color: var(--affine-text-disable-color);
+      cursor: not-allowed;
+    }
+
+    /* You can add a 'hover' attribute to the button to show the hover style */
+    :host([hover='true']) {
+      background: var(--affine-hover-color);
+    }
+    :host([hover='false']) {
+      background: transparent;
+    }
+
+    :host(:active[active]) {
+      background: transparent;
+    }
+
+    /* not supported "until-found" yet */
+    :host([hidden]) {
+      display: none;
+    }
+
+    :host > .text-container {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    :host .text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: var(--affine-font-sm);
+      line-height: var(--affine-line-height);
+    }
+
+    :host .sub-text {
+      font-size: var(--affine-font-xs);
+      color: var(
+        --light-textColor-textSecondaryColor,
+        var(--textColor-textSecondaryColor, #8e8d91)
+      );
+      line-height: var(--affine-line-height);
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin-top: -2px;
+    }
+
+    ::slotted(svg) {
+      flex-shrink: 0;
+      color: var(--svg-icon-color);
+    }
+
+    ::slotted([slot='suffix']) {
+      margin-left: auto;
+    }
+  `;
+
+  constructor() {
+    super();
+    // Allow activate button by pressing Enter key
+    this.addEventListener('keypress', event => {
+      if (this.disabled) {
+        return;
+      }
+      if (event.key === 'Enter' && !event.isComposing) {
+        this.click();
+      }
+    });
+
+    // Prevent click event when disabled
+    this.addEventListener(
+      'click',
+      event => {
+        if (this.disabled === true) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
+      { capture: true }
+    );
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.tabIndex = 0;
+    this.role = 'button';
+
+    const DEFAULT_SIZE = '28px';
+    if (this.size && (this.width || this.height)) {
+      return;
+    }
+
+    let width = this.width ?? DEFAULT_SIZE;
+    let height = this.height ?? DEFAULT_SIZE;
+    if (this.size) {
+      width = this.size;
+      height = this.size;
+    }
+
+    this.style.setProperty(
+      '--button-width',
+      typeof width === 'string' ? width : `${width}px`
+    );
+    this.style.setProperty(
+      '--button-height',
+      typeof height === 'string' ? height : `${height}px`
+    );
+  }
+
+  override render() {
+    if (this.hidden) return nothing;
+    if (this.disabled) {
+      const disabledColor = cssVarV2('icon/disable');
+      this.style.setProperty('--svg-icon-color', disabledColor);
+      this.dataset.testDisabled = 'true';
+    } else {
+      this.dataset.testDisabled = 'false';
+      const iconColor = this.active
+        ? cssVarV2('icon/activated')
+        : cssVarV2('icon/primary');
+      this.style.setProperty('--svg-icon-color', iconColor);
+    }
+
+    const text = this.text
+      ? // wrap a span around the text so we can ellipsis it automatically
+        html`<div class="text">${this.text}</div>`
+      : nothing;
+
+    const subText = this.subText
+      ? html`<div class="sub-text">${this.subText}</div>`
+      : nothing;
+
+    const textContainer =
+      this.text || this.subText
+        ? html`<div class="text-container">${text}${subText}</div>`
+        : nothing;
+
+    return html`<slot></slot>
+      ${textContainer}
+      <slot name="suffix"></slot>`;
+  }
+
+  @property({ attribute: true, type: Boolean })
+  accessor active: boolean = false;
+
+  // Do not add `{ attribute: false }` option here, otherwise the `disabled` styles will not work
+  @property({ attribute: true, type: Boolean })
+  accessor disabled: boolean | undefined = undefined;
+
+  @property()
+  accessor height: string | number | null = null;
+
+  @property({ attribute: true, type: String })
+  accessor hover: 'true' | 'false' | undefined = undefined;
+
+  @property()
+  accessor size: string | number | null = null;
+
+  @property()
+  accessor subText: string | TemplateResult<1> | null = null;
+
+  @property()
+  accessor text: string | TemplateResult<1> | null = null;
+
+  @query('.text-container .text')
+  accessor textElement: HTMLDivElement | null = null;
+
+  @property()
+  accessor width: string | number | null = null;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'icon-button': IconButton;
+  }
+}

package/src/_pkgs/affine-components/icons/ai.ts

@@ -0,0 +1,103 @@
+import { html } from 'lit';
+
+export const AIStarIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_7444_26654)">
+    <path
+      d="M9.40033 4.57585C9.36627 4.27519 9.11207 4.04792 8.80948 4.04761C8.50689 4.0473 8.25223 4.27405 8.21756 4.57465C7.99211 6.52928 7.40771 7.90373 6.46492 8.84651C5.52213 9.7893 4.14769 10.3737 2.19305 10.5991C1.89246 10.6338 1.66571 10.8885 1.66602 11.1911C1.66633 11.4937 1.8936 11.7479 2.19426 11.7819C4.11659 11.9997 5.52025 12.5838 6.48542 13.5315C7.44696 14.4757 8.04356 15.8498 8.21597 17.7908C8.24327 18.0981 8.50096 18.3337 8.80954 18.3333C9.11813 18.333 9.37528 18.0969 9.40189 17.7894C9.56714 15.8804 10.1632 14.4774 11.1295 13.5111C12.0958 12.5448 13.4988 11.9487 15.4078 11.7835C15.7153 11.7569 15.9514 11.4997 15.9517 11.1911C15.9521 10.8825 15.7165 10.6249 15.4092 10.5976C13.4683 10.4252 12.0941 9.82855 11.15 8.86701C10.2022 7.90184 9.61807 6.49818 9.40033 4.57585Z"
+      fill="#1E96EB"
+    />
+    <path
+      d="M15.7849 1.87208C15.7717 1.75516 15.6728 1.66678 15.5551 1.66666C15.4375 1.66654 15.3384 1.75472 15.3249 1.87162C15.2373 2.63175 15.01 3.16626 14.6434 3.5329C14.2767 3.89954 13.7422 4.1268 12.9821 4.21448C12.8652 4.22796 12.777 4.327 12.7771 4.44467C12.7772 4.56234 12.8656 4.6612 12.9826 4.67445C13.7301 4.75912 14.276 4.9863 14.6513 5.35485C15.0253 5.72203 15.2573 6.25642 15.3243 7.01121C15.335 7.13075 15.4352 7.22235 15.5552 7.22221C15.6752 7.22208 15.7752 7.13025 15.7855 7.01069C15.8498 6.26831 16.0816 5.72268 16.4574 5.3469C16.8332 4.97111 17.3788 4.73932 18.1212 4.67505C18.2407 4.6647 18.3325 4.5647 18.3327 4.44469C18.3328 4.32469 18.2412 4.22448 18.1217 4.21386C17.3669 4.14681 16.8325 3.9148 16.4653 3.54087C16.0968 3.16552 15.8696 2.61966 15.7849 1.87208Z"
+      fill="#1E96EB"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_7444_26654">
+      <rect width="20" height="20" fill="white" />
+    </clipPath>
+  </defs>
+</svg>`;
+
+// dotlottie-wc can only be used in the browser
+if (typeof window !== 'undefined') {
+  import('@lottiefiles/dotlottie-wc').catch(console.error);
+}
+
+export const AIStarIconWithAnimation = html`<dotlottie-wc
+  data='{"v":"5.12.1","fr":120,"ip":0,"op":239,"w":240,"h":240,"nm":"ai","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"big 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.5],"y":[1]},"o":{"x":[0.5],"y":[0]},"t":38,"s":[80]},{"t":76,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[107.859,132.143,0],"ix":2,"l":2},"a":{"a":0,"k":[8.572,11.429,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.5,0.5,0.5],"y":[1,1,1]},"o":{"x":[0.5,0.5,0.5],"y":[0,0,0]},"t":38,"s":[0,0,100]},{"t":76,"s":[1005,1005,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.261,2.307],[0.363,0],[0.041,-0.361],[1.131,-1.132],[2.346,-0.271],[-0.001,-0.363],[-0.361,-0.041],[-1.158,-1.137],[-0.207,-2.329],[-0.37,0],[-0.032,0.369],[-1.16,1.16],[-2.291,0.198],[-0.001,0.371],[0.368,0.033],[1.133,1.154]],"o":[[-0.041,-0.361],[-0.363,0],[-0.271,2.345],[-1.132,1.131],[-0.36,0.042],[0,0.363],[2.307,0.262],[1.154,1.133],[0.033,0.369],[0.37,0],[0.198,-2.29],[1.16,-1.159],[0.369,-0.032],[0,-0.37],[-2.329,-0.207],[-1.138,-1.158]],"v":[[0.71,-7.937],[0.001,-8.571],[-0.709,-7.938],[-2.812,-2.812],[-7.939,-0.709],[-8.571,0.001],[-7.937,0.71],[-2.788,2.81],[-0.711,7.921],[0.001,8.572],[0.712,7.919],[2.785,2.785],[7.919,0.712],[8.572,0.001],[7.921,-0.711],[2.81,-2.788]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.117647058824,0.588235294118,0.921568627451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[8.572,11.429],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"组 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":8400,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"big","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.5],"y":[1]},"o":{"x":[0.5],"y":[0]},"t":0,"s":[100]},{"i":{"x":[0.5],"y":[1]},"o":{"x":[0.5],"y":[0]},"t":15,"s":[80]},{"t":38,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[107.859,132.143,0],"ix":2,"l":2},"a":{"a":0,"k":[8.572,11.429,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.5,0.5,0.5],"y":[1,1,1]},"o":{"x":[0.5,0.5,0.5],"y":[0,0,0]},"t":0,"s":[1005,1005,100]},{"i":{"x":[0.5,0.5,0.5],"y":[1,1,1]},"o":{"x":[0.5,0.5,0.5],"y":[0,0,0]},"t":15,"s":[1035,1035,100]},{"t":38,"s":[0,0,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.261,2.307],[0.363,0],[0.041,-0.361],[1.131,-1.132],[2.346,-0.271],[-0.001,-0.363],[-0.361,-0.041],[-1.158,-1.137],[-0.207,-2.329],[-0.37,0],[-0.032,0.369],[-1.16,1.16],[-2.291,0.198],[-0.001,0.371],[0.368,0.033],[1.133,1.154]],"o":[[-0.041,-0.361],[-0.363,0],[-0.271,2.345],[-1.132,1.131],[-0.36,0.042],[0,0.363],[2.307,0.262],[1.154,1.133],[0.033,0.369],[0.37,0],[0.198,-2.29],[1.16,-1.159],[0.369,-0.032],[0,-0.37],[-2.329,-0.207],[-1.138,-1.158]],"v":[[0.71,-7.937],[0.001,-8.571],[-0.709,-7.938],[-2.812,-2.812],[-7.939,-0.709],[-8.571,0.001],[-7.937,0.71],[-2.788,2.81],[-0.711,7.921],[0.001,8.572],[0.712,7.919],[2.785,2.785],[7.919,0.712],[8.572,0.001],[7.921,-0.711],[2.81,-2.788]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.117647058824,0.588235294118,0.921568627451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[8.572,11.429],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"组 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":8400,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"small 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.5],"y":[1]},"o":{"x":[0.5],"y":[0]},"t":48.074,"s":[80]},{"t":85.07421875,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[183,56.999,0],"ix":2,"l":2},"a":{"a":0,"k":[16.667,3.333,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.5,0.5,0.5],"y":[1,1,1]},"o":{"x":[0.5,0.5,0.5],"y":[0,0,0]},"t":48,"s":[0,0,100]},{"t":85.07421875,"s":[1005,1005,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.102,0.897],[0.141,0.001],[0.016,-0.14],[0.44,-0.44],[0.912,-0.105],[0,-0.141],[-0.14,-0.016],[-0.451,-0.442],[-0.08,-0.906],[-0.144,0],[-0.013,0.144],[-0.451,0.451],[-0.89,0.077],[0,0.144],[0.143,0.013],[0.441,0.448]],"o":[[-0.016,-0.14],[-0.141,0],[-0.105,0.913],[-0.44,0.44],[-0.141,0.016],[0,0.141],[0.897,0.101],[0.448,0.441],[0.013,0.143],[0.144,0],[0.077,-0.891],[0.451,-0.451],[0.144,-0.013],[0,-0.144],[-0.906,-0.08],[-0.442,-0.451]],"v":[[0.276,-3.087],[0,-3.334],[-0.276,-3.088],[-1.094,-1.094],[-3.087,-0.276],[-3.333,0],[-3.087,0.276],[-1.084,1.092],[-0.277,3.08],[0,3.333],[0.277,3.079],[1.083,1.083],[3.079,0.277],[3.333,0],[3.08,-0.277],[1.092,-1.084]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.117647058824,0.588235294118,0.921568627451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[16.667,3.333],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"组 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":8400,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"small","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.5],"y":[1]},"o":{"x":[0.5],"y":[0]},"t":10.074,"s":[100]},{"i":{"x":[0.5],"y":[1]},"o":{"x":[0.5],"y":[0]},"t":25.074,"s":[80]},{"t":48.07421875,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[183,56.999,0],"ix":2,"l":2},"a":{"a":0,"k":[16.667,3.333,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.5,0.5,0.5],"y":[1,1,1]},"o":{"x":[0.5,0.5,0.5],"y":[0,0,0]},"t":10.074,"s":[1005,1005,100]},{"i":{"x":[0.5,0.5,0.5],"y":[1,1,1]},"o":{"x":[0.5,0.5,0.5],"y":[0,0,0]},"t":25.074,"s":[1235,1235,100]},{"t":48,"s":[0,0,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.102,0.897],[0.141,0.001],[0.016,-0.14],[0.44,-0.44],[0.912,-0.105],[0,-0.141],[-0.14,-0.016],[-0.451,-0.442],[-0.08,-0.906],[-0.144,0],[-0.013,0.144],[-0.451,0.451],[-0.89,0.077],[0,0.144],[0.143,0.013],[0.441,0.448]],"o":[[-0.016,-0.14],[-0.141,0],[-0.105,0.913],[-0.44,0.44],[-0.141,0.016],[0,0.141],[0.897,0.101],[0.448,0.441],[0.013,0.143],[0.144,0],[0.077,-0.891],[0.451,-0.451],[0.144,-0.013],[0,-0.144],[-0.906,-0.08],[-0.442,-0.451]],"v":[[0.276,-3.087],[0,-3.334],[-0.276,-3.088],[-1.094,-1.094],[-3.087,-0.276],[-3.333,0],[-3.087,0.276],[-1.084,1.092],[-0.277,3.08],[0,3.333],[0.277,3.079],[1.083,1.083],[3.079,0.277],[3.333,0],[3.08,-0.277],[1.092,-1.084]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.117647058824,0.588235294118,0.921568627451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[16.667,3.333],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"组 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":8400,"st":0,"ct":1,"bm":0}],"markers":[],"props":{}}'
+  backgroundColor="00000000"
+  speed="1"
+  style="width: 20px; height: 20px;"
+  loop
+  autoplay
+></dotlottie-wc>`;
+
+export const AIStopIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_7496_34464)">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17.0827 10C17.0827 13.912 13.9114 17.0834 9.99935 17.0834C6.08733 17.0834 2.91602 13.912 2.91602 10C2.91602 6.088 6.08733 2.91669 9.99935 2.91669C13.9114 2.91669 17.0827 6.088 17.0827 10ZM18.3327 10C18.3327 14.6024 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6024 1.66602 10C1.66602 5.39765 5.39698 1.66669 9.99935 1.66669C14.6017 1.66669 18.3327 5.39765 18.3327 10ZM8.33268 6.66669C7.41221 6.66669 6.66602 7.41288 6.66602 8.33335V11.6667C6.66602 12.5872 7.41221 13.3334 8.33268 13.3334H11.666C12.5865 13.3334 13.3327 12.5872 13.3327 11.6667V8.33335C13.3327 7.41288 12.5865 6.66669 11.666 6.66669H8.33268Z"
+      fill="#1E96EB"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_7496_34464">
+      <rect width="20" height="20" fill="white" />
+    </clipPath>
+  </defs>
+</svg>`;
+
+export const AIDoneIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M16.2751 5.39143C16.5192 5.63551 16.5192 6.03124 16.2751 6.27532L7.94178 14.6086C7.6977 14.8527 7.30197 14.8527 7.0579 14.6086L3.72456 11.2753C3.48048 11.0312 3.48048 10.6355 3.72456 10.3914C3.96864 10.1474 4.36437 10.1474 4.60845 10.3914L7.49984 13.2828L15.3912 5.39143C15.6353 5.14735 16.031 5.14735 16.2751 5.39143Z"
+  />
+</svg>`;
+
+export const EnterIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M11.2502 4.16663C11.2502 3.82145 11.53 3.54163 11.8752 3.54163H15.6252C15.9703 3.54163 16.2502 3.82145 16.2502 4.16663V11.25C16.2502 11.4157 16.1843 11.5747 16.0671 11.6919C15.9499 11.8091 15.7909 11.875 15.6252 11.875L5.45567 11.875L8.24903 14.6994C8.49175 14.9448 8.48957 15.3405 8.24414 15.5832C7.99872 15.826 7.603 15.8238 7.36027 15.5783L3.51412 11.6895C3.27329 11.4459 3.27329 11.054 3.51412 10.8105L7.36027 6.92158C7.603 6.67615 7.99872 6.67397 8.24414 6.91669C8.48957 7.15942 8.49175 7.55514 8.24903 7.80056L5.45567 10.625L15.0002 10.625V4.79163H11.8752C11.53 4.79163 11.2502 4.5118 11.2502 4.16663Z"
+  />
+</svg> `;
+
+export const ArrowRightIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.05838 5.39143C6.81431 5.63551 6.81431 6.03124 7.05838 6.27532L10.7831 10L7.05838 13.7248C6.81431 13.9688 6.81431 14.3646 7.05838 14.6087C7.30246 14.8527 7.69819 14.8527 7.94227 14.6087L12.1089 10.442C12.353 10.1979 12.353 9.80218 12.1089 9.5581L7.94227 5.39143C7.69819 5.14735 7.30246 5.14735 7.05838 5.39143Z"
+  />
+</svg> `;

package/src/_pkgs/affine-components/icons/file-icons-rc.ts

@@ -0,0 +1,173 @@
+import {
+  FileIconAepIcon,
+  FileIconAiIcon,
+  FileIconAviIcon,
+  FileIconCssIcon,
+  FileIconCsvIcon,
+  FileIconDmgIcon,
+  FileIconDocIcon,
+  FileIconDocxIcon,
+  FileIconEpsIcon,
+  FileIconExeIcon,
+  FileIconFigIcon,
+  FileIconGifIcon,
+  FileIconHtmlIcon,
+  FileIconInddIcon,
+  FileIconJavaIcon,
+  FileIconJpegIcon,
+  FileIconJsIcon,
+  FileIconJsonIcon,
+  FileIconMkvIcon,
+  FileIconMp3Icon,
+  FileIconMp4Icon,
+  FileIconMpegIcon,
+  FileIconNoneIcon,
+  FileIconPdfIcon,
+  FileIconPngIcon,
+  FileIconPptIcon,
+  FileIconPptxIcon,
+  FileIconPsdIcon,
+  FileIconRarIcon,
+  FileIconRssIcon,
+  FileIconSqlIcon,
+  FileIconSvgIcon,
+  FileIconTiffIcon,
+  FileIconTxtIcon,
+  FileIconWavIcon,
+  FileIconWebpIcon,
+  FileIconXlsIcon,
+  FileIconXlsxIcon,
+  FileIconXmlIcon,
+  FileIconZipIcon,
+  ImageIcon,
+} from '@blocksuite/icons/rc';
+
+export function getAttachmentFileIconRC(filetype: string) {
+  switch (filetype) {
+    case 'img':
+      return ImageIcon;
+    case 'image/jpeg':
+    case 'jpg':
+    case 'jpeg':
+      return FileIconJpegIcon;
+    case 'image/png':
+    case 'png':
+      return FileIconPngIcon;
+    case 'image/webp':
+    case 'webp':
+      return FileIconWebpIcon;
+    case 'image/tiff':
+    case 'tiff':
+      return FileIconTiffIcon;
+    case 'image/gif':
+    case 'gif':
+      return FileIconGifIcon;
+    case 'image/svg':
+    case 'svg':
+      return FileIconSvgIcon;
+    case 'image/eps':
+    case 'eps':
+      return FileIconEpsIcon;
+    case 'application/pdf':
+    case 'pdf':
+      return FileIconPdfIcon;
+    case 'application/msword':
+    case 'application/x-iwork-pages-sffpages':
+    case 'doc':
+      return FileIconDocIcon;
+    case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+    case 'docx':
+      return FileIconDocxIcon;
+    case 'text/plain':
+    case 'txt':
+      return FileIconTxtIcon;
+    case 'csv':
+      return FileIconCsvIcon;
+    case 'application/vnd.ms-excel':
+    case 'xls':
+      return FileIconXlsIcon;
+    case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+    case 'application/x-iwork-numbers-sffnumbers':
+    case 'xlsx':
+      return FileIconXlsxIcon;
+    case 'application/vnd.ms-powerpoint':
+    case 'application/x-iwork-keynote-sffkeynote':
+    case 'ppt':
+      return FileIconPptIcon;
+    case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+    case 'pptx':
+      return FileIconPptxIcon;
+    case 'application/illustrator':
+    case 'fig':
+      return FileIconFigIcon;
+    case 'application/postscript':
+    case 'ai':
+      return FileIconAiIcon;
+    case 'application/vnd.adobe.photoshop':
+    case 'psd':
+      return FileIconPsdIcon;
+    case 'application/vnd.adobe.indesign':
+    case 'indd':
+      return FileIconInddIcon;
+    case 'application/vnd.adobe.afterfx':
+    case 'aep':
+      return FileIconAepIcon;
+    case 'audio/mpeg':
+    case 'audio/mp3':
+    case 'mp3':
+      return FileIconMp3Icon;
+    case 'audio/wav':
+    case 'wav':
+      return FileIconWavIcon;
+    case 'video/mpeg':
+    case 'mpeg':
+      return FileIconMpegIcon;
+    case 'video/mp4':
+    case 'mp4':
+      return FileIconMp4Icon;
+    case 'video/avi':
+    case 'avi':
+      return FileIconAviIcon;
+    case 'video/mkv':
+    case 'mkv':
+      return FileIconMkvIcon;
+    case 'text/html':
+    case 'html':
+      return FileIconHtmlIcon;
+    case 'text/css':
+    case 'css':
+      return FileIconCssIcon;
+    case 'application/rss+xml':
+    case 'rss':
+      return FileIconRssIcon;
+    case 'application/sql':
+    case 'sql':
+      return FileIconSqlIcon;
+    case 'application/javascript':
+    case 'js':
+      return FileIconJsIcon;
+    case 'application/json':
+    case 'json':
+      return FileIconJsonIcon;
+    case 'application/java':
+    case 'java':
+      return FileIconJavaIcon;
+    case 'application/xml':
+    case 'xml':
+      return FileIconXmlIcon;
+    case 'application/x-msdos-program':
+    case 'exe':
+      return FileIconExeIcon;
+    case 'application/x-apple-diskimage':
+    case 'dmg':
+      return FileIconDmgIcon;
+    case 'application/zip':
+    case 'zip':
+      return FileIconZipIcon;
+    case 'application/x-rar-compressed':
+    case 'rar':
+      return FileIconRarIcon;
+    default:
+      return FileIconNoneIcon;
+  }
+}