@baishuyun/ai-design 1.0.0

package/src/components/legacy-slot.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef } from 'react';
+import { LegacySlotRenderer } from '../types';
+
+export interface LegacySlotProps {
+  renderLegacy: LegacySlotRenderer;
+  props: unknown;
+  shadow?: boolean;
+  injectedStyles?: string;
+  withHostStyles?: boolean;
+  onSetRef?: (ref: HTMLDivElement) => void;
+}
+
+const STYLE_INJECTED_ATTR = 'data-style-injected';
+
+const injectStylesIntoShadow = (currentElement: Node) => {
+  if (!currentElement) return;
+
+  let shadowRoot: ShadowRoot | null = null;
+
+  if (currentElement instanceof Element && currentElement.shadowRoot) {
+    shadowRoot = currentElement.shadowRoot;
+  } else {
+    let node: Node | null = currentElement.parentNode;
+    while (node) {
+      if (node instanceof ShadowRoot) {
+        shadowRoot = node;
+        break;
+      }
+      node = node.parentNode;
+    }
+  }
+
+  if (!shadowRoot) return;
+  if (shadowRoot.querySelector(`style[${STYLE_INJECTED_ATTR}]`)) return;
+
+  document.head.querySelectorAll('style').forEach((styleEl) => {
+    const cloned = styleEl.cloneNode(true) as HTMLElement;
+    cloned.setAttribute(STYLE_INJECTED_ATTR, '');
+    shadowRoot!.appendChild(cloned);
+  });
+};
+
+export function LegacySlot({
+  renderLegacy,
+  props,
+  shadow = false,
+  withHostStyles = false,
+  injectedStyles,
+  onSetRef,
+}: LegacySlotProps) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const cleanupRef = useRef<(() => void) | null>(null);
+  const mountPointRef = useRef<HTMLDivElement | null>(null);
+  const targetRef = useRef<HTMLElement | ShadowRoot | null>(null);
+
+  useEffect(() => {
+    if (!hostRef.current) return;
+
+    const host = hostRef.current;
+    onSetRef?.(host);
+    let target: HTMLElement | ShadowRoot = host;
+
+    if (shadow) {
+      const shadowRoot = host.shadowRoot || host.attachShadow({ mode: 'open' });
+      target = shadowRoot;
+
+      if (withHostStyles) {
+        injectStylesIntoShadow(host);
+      }
+      if (typeof injectedStyles === 'string') {
+        const styleEl = document.createElement('style');
+        styleEl.setAttribute('data-legacy-injected-raw', '');
+        styleEl.textContent = injectedStyles;
+        shadowRoot.appendChild(styleEl);
+      }
+    }
+
+    targetRef.current = target;
+
+    const mountPoint = document.createElement('div');
+    mountPoint.style.display = 'contents';
+    target.appendChild(mountPoint);
+    mountPointRef.current = mountPoint;
+
+    cleanupRef.current = renderLegacy(mountPoint, props as Record<string, any>);
+
+    return () => {
+      cleanupRef.current?.();
+      if (mountPointRef.current) {
+        mountPointRef.current.remove();
+        mountPointRef.current = null;
+      }
+      targetRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!mountPointRef.current) return;
+    cleanupRef.current = renderLegacy(mountPointRef.current, props as Record<string, any>);
+  }, [props, renderLegacy]);
+
+  return <div ref={hostRef} style={{ display: 'contents' }} />;
+}

package/src/components/line-checker.tsx

@@ -0,0 +1,160 @@
+import React, { CSSProperties, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { cn } from '../lib/utils';
+import { CheckerIcon } from './bs-icons';
+import { SquareChecker } from './square-checker';
+
+export interface LineCheckerProps {
+  defaultChecked?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+
+  icon?: React.ReactNode;
+  title: string;
+  shortDesc?: string;
+  className?: string;
+  extra?: React.ReactNode;
+
+  style?: CSSProperties;
+  streaming?: boolean;
+  confirmed?: boolean;
+  readonly?: boolean;
+}
+
+export const LineChecker: React.FC<LineCheckerProps> = ({
+  defaultChecked = false,
+  checked: checkedProp,
+  disabled = false,
+  onCheckedChange,
+  icon,
+  className,
+  title,
+  extra,
+  style,
+  streaming,
+  confirmed,
+  readonly,
+  shortDesc,
+}) => {
+  const [checked, setChecked] = useState(defaultChecked);
+
+  useEffect(() => {
+    if (checkedProp !== undefined) {
+      setChecked(checkedProp);
+    }
+  }, [checkedProp]);
+
+  const handleClick = () => {
+    if (streaming || disabled) return;
+
+    const newChecked = !checked;
+    setChecked(newChecked);
+    onCheckedChange?.(newChecked);
+  };
+
+  const hasExtra = Boolean(extra);
+
+  const checker =
+    confirmed && checked ? (
+      <CheckerIcon className="grow-0 shrink-0 text-[#0265ff]" />
+    ) : (
+      <SquareChecker
+        className={classNames('outline-none grow-0 shrink-0 cursor-pointer', {
+          'mt-[2px]': hasExtra,
+          'opacity-80 cursor-not-allowed': disabled,
+          'opacity-50': streaming,
+          'pointer-events-none': streaming,
+        })}
+        id={title}
+        checked={checked}
+        disabled={disabled || confirmed}
+        onCheckedChange={handleClick}
+      />
+    );
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-[10px] px-4 py-[10px] rounded-[4px]',
+        'w-full transition-colors cursor-pointer',
+        {
+          'cursor-not-allowed': disabled,
+          'hover:bg-[#EFF0F6]': !disabled,
+          'items-start': hasExtra,
+          'items-center': !hasExtra,
+          'pointer-events-none': streaming || disabled || readonly || confirmed,
+        },
+        className
+      )}
+      style={style}
+      onClick={() => {
+        handleClick();
+      }}
+    >
+      {readonly ? null : checker}
+
+      <div
+        className={classNames('flex flex-col flex-1 min-w-0', {
+          'gap-2.5': hasExtra,
+        })}
+      >
+        <div
+          className={classNames('flex items-center justify-between w-full', {
+            'gap-1.5': !!icon,
+            'gap-2.5': !icon,
+          })}
+        >
+          <div
+            className={classNames('flex items-center gap-[6px] min-w-0', {
+              'flex-1': !!icon,
+              'w-[100px] flex-shrink-0': !icon,
+            })}
+          >
+            {/* Icon */}
+            {icon && (
+              <div className="w-4 h-4 flex-shrink-0 text-[#6F829E] leading-[16px]">{icon}</div>
+            )}
+
+            {/* Title - truncates */}
+            <p
+              className={classNames(' min-w-0 text-sm text-[#121111] truncate text-[12px]', {
+                'flex-1': !!icon,
+                'flex-grow-1 flex-shrink-0': !icon,
+                '!text-[#666]': readonly,
+              })}
+            >
+              {title}
+            </p>
+          </div>
+
+          {shortDesc && (
+            <p
+              className={classNames('text-sm text-[#666] text-[12px]', {
+                'whitespace-nowrap flex-shrink-0': !!icon,
+                anywhere: !icon,
+                '!text-[#121111]': readonly,
+              })}
+            >
+              {shortDesc}
+            </p>
+          )}
+        </div>
+        {hasExtra ? (
+          <div
+            className={cn(
+              'overflow-x-auto whitespace-nowrap no-scrollbar flex items-center gap-2',
+              {
+                '!overflow-x-hidden': disabled || readonly || confirmed,
+              }
+            )}
+          >
+            {extra}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default LineChecker;

package/src/components/linear-gradient-border-btn.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { cn } from '../lib/utils';
+
+export interface LinearGradientBorderBtnProps {
+    children?: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+
+export const LinearGradientBorderBtn: React.FC<LinearGradientBorderBtnProps> = ({
+    children,
+    onClick,
+    disabled = false,
+    className,
+}) => {
+    return (
+        <div
+            className={cn(
+                "relative rounded-[6px] p-[1px] cursor-pointer h-[34px] flex items-center justify-center",
+                "bg-gradient-to-b from-[#84B4FF] to-[#B1FAFF]",
+                className
+            )}
+            style={{
+                background: 'linear-gradient(180deg, #84B4FF 0%, #B1FAFF 100%)',
+            }}
+        >
+            <button
+                className={cn(
+                    "w-full h-[32px] px-[10px]",
+                    "bg-white rounded-[5px]",
+                    "flex items-center justify-center",
+                    "text-[#0265ff] text-[14px]",
+                    "cursor-pointer",
+                    "transition-all duration-200",
+                    "hover:bg-[#f5f9ff]",
+                    "disabled:opacity-95 disabled:cursor-not-allowed"
+                )}
+                onClick={onClick}
+                disabled={disabled}
+            >
+                {children}
+            </button>
+        </div>
+    );
+};
+
+export default LinearGradientBorderBtn;

package/src/components/linear-gradient-color-bg-animation.tsx

@@ -0,0 +1,103 @@
+export const LinearGradientColorBgAnimation = ({ 
+  children,
+  width,
+  height,
+  style,
+  childrenContainerStyle,
+}: { 
+  children?: React.ReactNode;
+  width?: string | number;
+  height?: string | number;
+  style?: React.CSSProperties;
+  childrenContainerStyle?: React.CSSProperties;
+}) => {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: width ?? '100%',
+        height: height ?? '100%',
+        overflow: 'hidden',
+        borderRadius: '10px 10px 0 0',
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          top: 0,
+          left: 0,
+          background: '#F4FFFC',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          top: 0,
+          left: 0,
+          background: 'radial-gradient(circle at 25% -15%, #EEFFCE 0%, transparent 55%)',
+          filter: 'blur(70px)',
+          animation: 'floatCircle1 4s ease-in-out infinite',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          top: 0,
+          left: 0,
+          background: 'radial-gradient(circle at 80% 200%, #CEFFFB 0%, transparent 45%)',
+          filter: 'blur(70px)',
+          animation: 'floatCircle2 5s ease-in-out infinite 0.5s',
+        }}
+      />
+      <div style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', ...childrenContainerStyle }}>
+        {children}
+      </div>
+      <style>{`
+        @keyframes floatCircle1 {
+          0%, 100% {
+            transform: translate(0%, 0%) scale(1.2);
+            opacity: 1;
+          }
+          25% {
+            transform: translate(-15%, 20%) scale(1.6);
+            opacity: 0.95;
+          }
+          50% {
+            transform: translate(12%, -15%) scale(0.9);
+            opacity: 1;
+          }
+          75% {
+            transform: translate(-10%, 10%) scale(1.4);
+            opacity: 0.9;
+          }
+        }
+        
+        @keyframes floatCircle2 {
+          0%, 100% {
+            transform: translate(0%, 0%) scale(1.1);
+            opacity: 1;
+          }
+          30% {
+            transform: translate(18%, -12%) scale(1.5);
+            opacity: 1;
+          }
+          60% {
+            transform: translate(-12%, 15%) scale(0.85);
+            opacity: 0.95;
+          }
+          85% {
+            transform: translate(14%, -8%) scale(1.3);
+            opacity: 0.9;
+          }
+        }
+      `}</style>
+    </div>
+  );
+};

package/src/components/memoized-markdown.tsx

@@ -0,0 +1,32 @@
+import { marked } from "marked";
+import { memo, useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+
+function parseMarkdownIntoBlocks(markdown: string): string[] {
+  const tokens = marked.lexer(markdown);
+  return tokens.map((token) => token.raw);
+}
+
+const MemoizedMarkdownBlock = memo(
+  ({ content }: { content: string }) => {
+    return <ReactMarkdown>{content}</ReactMarkdown>;
+  },
+  (prevProps, nextProps) => {
+    if (prevProps.content !== nextProps.content) return false;
+    return true;
+  },
+);
+
+MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock";
+
+export const MemoizedMarkdown = memo(
+  ({ content, id }: { content: string; id: string }) => {
+    const blocks = useMemo(() => parseMarkdownIntoBlocks(content), [content]);
+
+    return blocks.map((block, index) => (
+      <MemoizedMarkdownBlock content={block} key={`${id}-block_${index}`} />
+    ));
+  },
+);
+
+MemoizedMarkdown.displayName = "MemoizedMarkdown";

package/src/components/message-content.tsx

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+import { cn } from '../lib/utils';
+
+export type MessageContentProps = HTMLAttributes<HTMLDivElement> & {
+  compact?: boolean;
+};
+
+export const MessageContent = ({ children, className, ...props }: MessageContentProps) => (
+  <div
+    className={cn(
+      'flex flex-col gap-2.5 overflow-hidden p-0 text-foreground text-[14px]',
+      'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',
+      'group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground',
+      'is-user:dark overflow-visible',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);

package/src/components/number-part.tsx

@@ -0,0 +1,46 @@
+import { cn } from '../lib/utils';
+import { XlsxIcon } from './bs-icons';
+
+export interface NumbersMsgPartProps {
+  /** File name to display (optional) */
+  fileName?: string;
+  className?: string;
+  /** Size in pixels (width & height), defaults to 102 */
+  size?: number;
+}
+
+export const NumbersMsgPart = ({ fileName, className, size = 102 }: NumbersMsgPartProps) => {
+  // Calculate icon size proportionally (52/102 ≈ 51% of container)
+  const iconScale = size / 102;
+  const hasFileName = Boolean(fileName);
+
+  return (
+    <div
+      className={cn(
+        'relative flex flex-col items-center justify-center rounded-[10px] bg-[#EFF0F6] px-[10px]',
+        hasFileName && 'gap-[6px]',
+        className
+      )}
+      style={{ width: size, height: size }}
+    >
+      <div
+        className="shrink-0"
+        style={{
+          transform: iconScale !== 1 ? `scale(${iconScale})` : undefined,
+          transformOrigin: 'center',
+        }}
+      >
+        <XlsxIcon />
+      </div>
+      {hasFileName && (
+        <p
+          className="block max-w-full shrink-0 truncate text-center text-[14px] leading-normal text-[#030303]"
+          style={{ fontSize: 14 * iconScale, maxWidth: '100%', display: 'block' }}
+          title={fileName}
+        >
+          {fileName}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/components/office-container.tsx

@@ -0,0 +1,83 @@
+import { FC } from 'react';
+import { useResizableWidth } from '../hooks/use-resizable-width';
+import classNames from 'classnames';
+
+export interface IOfficeContainerProps {
+    headerHeight?: number;
+
+    hideLeftCol?: boolean;
+
+    leftColWidthRange?: [number, number];
+    leftColHeaderElement?: React.ReactNode;
+    leftColContentElement?: React.ReactNode;
+    rightColHeaderElement?: React.ReactNode;
+    rightColContentElement?: React.ReactNode;
+}
+
+export const OfficeContainer: FC<IOfficeContainerProps> = ({
+    headerHeight = 64,
+    hideLeftCol = false,
+    leftColWidthRange = [360, 500],
+    leftColHeaderElement,
+    leftColContentElement,
+    rightColHeaderElement,
+    rightColContentElement,
+}) => {
+    const { width: leftColWidth, handleMouseDown, isDragging } = useResizableWidth({
+        range: leftColWidthRange,
+        initialWidth: leftColWidthRange[0]
+    });
+
+    const borderColorCls = /* isAtEdge ? 'border-[#ff8888]' : */ 'border-[#0265fc]';
+
+    return (
+        <div className="relative h-full w-full flex overflow-hidden bg-white">
+            {/* left col */}
+            <div
+                className={classNames("shrink-0 h-full flex flex-col relative bg-[#F5F7FA]", {
+                    "pointer-events-none": hideLeftCol,
+                    "opacity-0": hideLeftCol,
+                })}
+                style={{ width: hideLeftCol ? 0 : leftColWidth }}
+            >
+                    <div
+                        className="shrink-0 w-full"
+                    style={{ height: headerHeight }}
+                >
+                    {leftColHeaderElement}
+                </div>
+                <div className="flex-1 min-h-0 overflow-auto">
+                    {leftColContentElement}
+                </div>
+                {/* resizer */}
+                <div
+                    className={classNames(`h-full w-5 cursor-col-resize z-10 flex justify-center group absolute top-0 right-0 hover:border-r hover:${borderColorCls}`, {
+                        [`border-r ${borderColorCls}`]: isDragging,
+                    })}
+                    onMouseDown={handleMouseDown}
+                >
+
+                </div>
+            </div>
+
+
+            {/* right col */}
+            <div className={
+                classNames("flex-1 h-full flex flex-col min-w-0", {
+                    // "shadow-[0_0_16px_rgba(0,0,0,0.10)]": !isDragging,
+                    // "shadow-[0_0_20px_rgba(0,0,0,0.10)]": isDragging,
+                })
+            }>
+                <div
+                    className="shrink-0 w-full"
+                    style={{ height: headerHeight }}
+                >
+                    {rightColHeaderElement}
+                </div>
+                <div className="flex-1 min-h-0 overflow-auto">
+                    {rightColContentElement}
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/components/option-item.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+
+export interface OptionItemProps {
+    bgColor?: string;
+    color?: string;
+    label?: ReactNode;
+    children?: ReactNode;
+}
+
+export const OptionItem = ({
+    bgColor = "#E8F4FF",
+    color = "#0265FF",
+    label,
+    children,
+}: OptionItemProps
+) => {
+    return (
+        <div
+            className="flex items-center justify-center gap-1.5 px-1.5 h-[26px] rounded-[100px] text-[13px]"
+            style={{
+                backgroundColor: bgColor,
+                color: color,
+            }}
+        >
+            {label || children}
+        </div>
+    )
+}