@baishuyun/ai-design 1.0.0

package/src/components/fields-portal.tsx

@@ -0,0 +1,18 @@
+import { useShadow } from '../hooks/use-shadow';
+import { createPortal } from 'react-dom';
+import { FieldsPreviewer, FieldsPreviewerProps } from './fields-previewer';
+import { ReactPortal } from 'react';
+
+export interface FieldsPortalProps extends FieldsPreviewerProps {
+  portalEl: HTMLElement;
+  children?: React.ReactNode;
+}
+
+export const FieldsPortal = ({ portalEl, children, ...rest }: FieldsPortalProps): ReactPortal => {
+  const { shadowContainer: shadowEntry } = useShadow({
+    rootEl: portalEl,
+    id: 'chat-sdk-fields-portal',
+  });
+
+  return createPortal(<FieldsPreviewer {...rest}>{children}</FieldsPreviewer>, shadowEntry!);
+};

package/src/components/fields-previewer.tsx

@@ -0,0 +1,216 @@
+import classNames from 'classnames';
+import { forwardRef, useState } from 'react';
+import { AbsFullscreenGradientBg } from './abs-fullscreen-gradient-bg';
+import { BorderColorAnimation } from './border-color-animation';
+import { FieldsGeneratingIndicator } from './fields-generating-indicator';
+import { PreviewerHeader, PreviewerHeaderProps } from './previewer-header';
+import { useShadow } from '../hooks/use-shadow';
+import { TooltipProvider } from './ui/tooltip';
+
+export interface FieldsPreviewerProps extends PreviewerHeaderProps {
+  fullscreen?: boolean;
+
+  rightSpaceWidth?: number;
+  rightSpaceRef?: (right: HTMLDivElement) => void;
+  rightElement?: React.ReactNode;
+
+  // generating fields
+  streaming?: boolean;
+  streamingText?: string;
+
+  empty?: boolean;
+
+  zIndex?: number;
+
+  padding?: number;
+
+  containerStyle?: string;
+
+  fullContent?: boolean;
+
+  // children means the content inside the previewer, not the right side components
+  children?: React.ReactNode;
+
+  readonly?: boolean;
+
+  disableShadowContainer?: boolean;
+}
+
+const PlaceholderDashedBox = () => {
+  return (
+    <div
+      style={{
+        borderRadius: 10,
+        width: '100%',
+        height: '100%',
+        border: '1px dashed var(---e0e0e0, #E0E0E0)',
+      }}
+    />
+  );
+};
+
+export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
+  ({
+    zIndex = 1,
+    children,
+    title,
+    tips,
+    active,
+    fullscreen,
+    padding = 10,
+    className,
+    empty,
+    rightSpaceWidth,
+    rightSpaceRef,
+    rightElement,
+    streaming,
+    streamingText,
+    onBackClick,
+    dialogContainer,
+    disableShadowContainer,
+    variant = 'fields-previewer',
+    onSave,
+    onCancel,
+    onClear,
+    style,
+    confirmContent,
+    fullContent,
+    confirmTitle,
+    containerStyle,
+    readonly,
+
+    closeBtnLabel,
+    disableOperation,
+    disableConfirm,
+
+    customOperationElement,
+  }: FieldsPreviewerProps, _) => {
+    const p = fullscreen ? 0 : padding;
+    const pr = fullscreen ? 0 : rightSpaceWidth;
+
+    // const absWrapperRef = useRef<HTMLDivElement>(null);
+    const [absContainer, setAbsContainer] = useState<HTMLDivElement | null>(null);
+
+    const isFields = variant === 'fields-previewer';
+    const isData = variant === 'data-previewer';
+
+    const contentCls = classNames({
+      'm-[20px]': isFields,
+      'mx-[12px] mb-[10px]': isData,
+      'p-[10px]': isFields,
+      'p-0': isData,
+      'opacity-60': streaming && isFields,
+      'w-[calc(100%-40px)] h-[calc(100%-90px)] relative overflow-x-hidden overflow-y-auto':
+        isFields,
+      'w-[calc(100%-24px)] h-[calc(100%-62px)] relative overflow-x-hidden overflow-y-auto': isData,
+      'rounded-[4px] bg-white': isData,
+    });
+
+    const fullContentStyle = fullContent
+      ? {
+          width: '100%',
+          height: '100%',
+          padding: 0,
+          margin: 0,
+        }
+      : {};
+
+    const { shadowContainer } = useShadow({
+      id: 'dialog-container',
+      rootEl: dialogContainer,
+      style: containerStyle,
+      wrapperStyle: {
+        zIndex: Date.now(),
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+      },
+    });
+
+    const contentJsx = (
+      <>
+        <PreviewerHeader
+          title={title}
+          tips={tips}
+          active={active}
+          variant={variant}
+          className={className}
+          onBackClick={onBackClick}
+          onSave={streaming ? undefined : onSave}
+          onCancel={streaming ? undefined : onCancel}
+          style={style}
+          dialogContainer={disableShadowContainer ? absContainer! : (shadowContainer || absContainer!)}
+          confirmTitle={confirmTitle}
+          confirmContent={confirmContent}
+          closeBtnLabel={closeBtnLabel}
+          disableOperation={disableOperation}
+          disableConfirm={disableConfirm}
+          onClear={onClear}
+          customOperationElement={customOperationElement}
+        />
+        <div className={contentCls} style={fullContentStyle}>
+          {empty && isFields ? <PlaceholderDashedBox /> : children}
+          {readonly && <div className="absolute inset-0 z-50 cursor-not-allowed" />}
+        </div>
+        {streaming && (
+          // abs center
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+            <FieldsGeneratingIndicator>{streamingText}</FieldsGeneratingIndicator>
+          </div>
+        )}
+      </>
+    );
+
+    const content = isFields ? (
+      <BorderColorAnimation
+        width={pr ? `calc(100% - ${pr}px)` : '100%'}
+        style={{ overflow: 'hidden' }}
+      >
+        {contentJsx}
+      </BorderColorAnimation>
+    ) : (
+      <div className="h-full" style={{ width: pr ? `calc(100% - ${pr}px)` : '100%' }}>
+        {contentJsx}
+      </div>
+    );
+
+    const rightArea = (
+      <div
+        style={{
+          width: fullscreen ? 0 : rightSpaceWidth,
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          pointerEvents: fullscreen ? 'none' : 'auto',
+        }}
+        className="h-full"
+        ref={(n) => {
+          if (n) {
+            rightSpaceRef?.(n);
+          }
+        }}
+      >
+        {rightElement}
+      </div>
+    );
+
+    return (
+      <TooltipProvider
+        delayDuration={100}
+        zIndex={zIndex}
+      >
+        <AbsFullscreenGradientBg
+          zIndex={zIndex}
+          padding={isFields ? p : 0}
+          disableGradient={fullscreen || !isFields}
+          bgColor={isFields ? '#fff' : '#F5F7FA'}
+          ref={setAbsContainer}
+        >
+          {fullscreen ? contentJsx : content}
+          {rightArea}
+        </AbsFullscreenGradientBg>
+      </TooltipProvider>
+    );
+  }
+);

package/src/components/font-icon.tsx

@@ -0,0 +1,17 @@
+export const FontIcon = ({
+  code,
+  className,
+  style,
+}: {
+  code: string;
+  className?: string;
+  style?: React.CSSProperties;
+}) => {
+  return (
+    <i
+      className={`sdk-icon ${className || ''}`}
+      style={style}
+      dangerouslySetInnerHTML={{ __html: code }}
+    />
+  );
+};

package/src/components/form-info-editor.tsx

@@ -0,0 +1,253 @@
+import { cn } from '../lib/utils';
+import { FORM_ICON_OPTIONS, transCls } from '../const/ui';
+import { useState, memo, useEffect } from 'react';
+import { ChevronDownIcon } from './ui/icons';
+import { PrimaryConfirmBtn } from './primary-confirm-btn';
+import { EditIcon } from './bs-icons';
+import { FontIcon } from './font-icon';
+import { FormIconOption } from '../types';
+
+export type { FormIconOption };
+
+// Form icon component with blue background - dynamically shows selected icon
+const FormIcon = ({
+  size = 36,
+  code,
+  style,
+}: {
+  size?: number;
+  code?: string;
+  style?: React.CSSProperties;
+}) => {
+  const borderRadius = size * 0.238; // ~8.57px for 36px container
+  const fontSize = size * 0.6875; // Icon font size relative to container
+
+  return (
+    <div
+      className="relative flex items-center justify-center bg-[#0265ff] flex-shrink-0 text-white"
+      style={{
+        width: size,
+        height: size,
+        borderRadius,
+        fontSize: fontSize,
+        ...style,
+      }}
+    >
+      <FontIcon code={code || FORM_ICON_OPTIONS[0].code} style={{ fontSize }} />
+    </div>
+  );
+};
+
+export interface FormInfoEditorProps {
+  /** Form name */
+  name: string;
+  /** Callback when name changes */
+  onNameChange?: (name: string) => void;
+  /** Currently selected icon option */
+  selectedIcon?: FormIconOption;
+  /** Available icon options */
+  iconOptions?: FormIconOption[];
+  /** Callback when icon changes */
+  onIconChange?: (icon: FormIconOption) => void;
+  /** Callback when confirm button is clicked */
+  onConfirm?: (name: string, iconVal: number) => void;
+  /** Whether the editor is in expanded mode */
+  expanded?: boolean;
+  /** Callback when expanded state changes */
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Custom class name */
+  className?: string;
+  onMount?: () => void;
+  readonly?: boolean;
+}
+
+/**
+ * Form Info Editor Component
+ * Displays form name and icon with an expandable editor interface
+ */
+export const FormInfoEditor = memo(
+  ({
+    name,
+    onNameChange,
+    onMount,
+    selectedIcon = FORM_ICON_OPTIONS[0],
+    iconOptions = [],
+    onIconChange,
+    readonly,
+    onConfirm,
+    expanded: controlledExpanded,
+    onExpandedChange,
+    className,
+  }: FormInfoEditorProps) => {
+    const [internalExpanded, setInternalExpanded] = useState(false);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+    const expanded = controlledExpanded ?? internalExpanded;
+    const setExpanded = (value: boolean) => {
+      setInternalExpanded(value);
+      onExpandedChange?.(value);
+    };
+
+    const [nameVal, setNameVal] = useState(name);
+    const [iconOpt, setIconOpt] = useState(selectedIcon);
+
+    useEffect(() => {
+      onMount?.();
+    }, []);
+
+    // Default Status (Collapsed)
+    if (!expanded || readonly) {
+      return (
+        <div
+          className={cn(
+            'bg-white hover:bg-[#fafafa] border border-[#e0e0e0] rounded-[10px] px-[10px] py-0 flex items-center justify-between h-[56px] cursor-pointer',
+            transCls,
+            className,
+            'duration-100'
+          )}
+          onClick={() => {
+            if (readonly) return;
+            setExpanded(true);
+          }}
+        >
+          {/* Left side: Form icon and name */}
+          <div className="flex items-center gap-[10px] min-w-0 flex-1 mr-[10px]">
+            <FormIcon size={36} code={iconOpt?.code} />
+            <p className="text-[14px] text-black leading-normal truncate">{nameVal}</p>
+          </div>
+
+          <button
+            onClick={() => {
+              if (readonly) return;
+              setExpanded(true);
+            }}
+            className={cn(
+              'w-[16px] h-[16px] flex items-center justify-center cursor-pointer hover:text-[#0265ff]',
+              transCls,
+              {
+                'pointer-events-none opacity-0': readonly,
+              }
+            )}
+          >
+            <EditIcon />
+          </button>
+        </div>
+      );
+    }
+
+    // Expanded Status (Edit mode)
+    return (
+      <div
+        className={cn(
+          'bg-[#fafafa] border border-[#e0e0e0] rounded-[10px] p-[12px] flex flex-col gap-[22px]',
+          transCls,
+          className,
+          'duration-100'
+        )}
+      >
+        {/* Name field */}
+        <div className="flex flex-col gap-[10px] w-full">
+          <p className="text-[14px] text-[#030303] font-bold leading-normal">名称</p>
+          <input
+            type="text"
+            value={nameVal}
+            onChange={(e) => {
+              setNameVal(e.target.value);
+            }}
+            onBlur={() => {
+              onNameChange?.(nameVal);
+            }}
+            className={cn(
+              'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px] w-full',
+              'text-[14px] text-[#030303] leading-normal outline-none',
+              'focus:border-[#0265ff]',
+              'hover:border-[#0265ff]',
+              transCls
+            )}
+          />
+        </div>
+
+        {/* Icon field */}
+        <div className="flex flex-col gap-[10px] w-full">
+          <p className="text-[14px] text-[#030303] font-bold leading-normal">图标</p>
+          <div className="relative" style={{ zIndex: 10 }}>
+            <button
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+              className={cn(
+                'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px] w-full',
+                'flex items-center justify-between cursor-pointer',
+                'hover:border-[#0265ff]',
+                transCls
+              )}
+            >
+              {/* Selected icon */}
+              <div className="flex items-center">
+                <FormIcon size={16} code={iconOpt?.code} />
+              </div>
+
+              {/* Dropdown arrow */}
+              <div className={cn('text-[#666]', transCls, isDropdownOpen && 'rotate-180')}>
+                <ChevronDownIcon size={16} />
+              </div>
+            </button>
+
+            {/* Dropdown menu - Grid layout matching Figma design */}
+            {isDropdownOpen && iconOptions.length > 0 && (
+              <div
+                className={cn(
+                  'absolute top-full left-0 mt-[4px] bg-white rounded-[10px] shadow-md z-10 p-[12px]',
+                  transCls
+                )}
+              >
+                <div className="grid grid-cols-6 gap-[8px]">
+                  {iconOptions.map((option) => (
+                    <button
+                      key={option.id}
+                      onClick={() => {
+                        onIconChange?.(option);
+                        setIconOpt(option);
+                        setIsDropdownOpen(false);
+                      }}
+                      className={cn(
+                        'aspect-square rounded-[9.5px] border flex items-center justify-center cursor-pointer overflow-hidden',
+                        iconOpt?.id === option.id
+                          ? 'border-[#0265ff] border-2'
+                          : 'border-[#e0e0e0] hover:bg-[#eff0f6]',
+                        transCls
+                      )}
+                      title={option.label}
+                    >
+                      <FormIcon
+                        code={option.code}
+                        style={{ background: 'transparent', color: '#0265ff' }}
+                      />
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Confirm button */}
+        <PrimaryConfirmBtn
+          text="确认"
+          onClick={() => {
+            onConfirm?.(nameVal, iconOpt?.value || 25);
+            setExpanded(false);
+          }}
+        />
+      </div>
+    );
+  },
+  (p1, p2) => {
+    return (
+      p1.name === p2.name &&
+      p1.selectedIcon?.id === p2.selectedIcon?.id &&
+      p1.expanded === p2.expanded &&
+      p1.iconOptions === p2.iconOptions
+    );
+  }
+);
+
+export default FormInfoEditor;

package/src/components/formula-tag.tsx

@@ -0,0 +1,32 @@
+import { cn } from '../lib/utils';
+import { type FormulaOp, FORMULA_OP_LABEL } from '@baishuyun/types';
+
+/** 统计方式 → 背景色 */
+const FORMULA_OP_COLOR: Record<FormulaOp, string> = {
+  sum: '#3767F1',
+  max: '#F06648',
+  min: '#4ACC8C',
+  average: '#4AC0EC',
+  count: '#9362CE',
+  countDistinct: '#F168B6',
+};
+
+export interface FormulaTagProps {
+  /** 统计方式 */
+  type: FormulaOp;
+  className?: string;
+}
+
+export const FormulaTag = ({ type, className }: FormulaTagProps) => {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center justify-center rounded-[100px] px-[6px] text-[14px] leading-[20px] text-white',
+        className
+      )}
+      style={{ backgroundColor: FORMULA_OP_COLOR[type] }}
+    >
+      {FORMULA_OP_LABEL[type]}
+    </span>
+  );
+};

package/src/components/generate-animation.tsx

@@ -0,0 +1,56 @@
+import classNames from "classnames";
+
+export const GenerateAnimation = (props: { children?: React.ReactNode, className?: string }) => {
+  return (
+    <div className={classNames("flex items-center gap-[6px]", props.className)}>
+      <div className="flex gap-[2px] flex-shrink-0" style={{ marginRight: '6px' }}>
+        <div
+          className="w-[5px] h-[5px] rounded-full bg-[#999] flex-shrink-0"
+          style={{
+            animation: 'pulse 1.0s ease-in-out infinite',
+            animationDelay: '0s',
+            width: '5px',
+            height: '5px',
+            background: '#999',
+            marginRight: '3px',
+          }}
+        />
+        <div
+          className="w-[5px] h-[5px] rounded-full bg-[#999] flex-shrink-0"
+          style={{
+            animation: 'pulse 1.0s ease-in-out infinite',
+            width: '5px',
+            height: '5px',
+            background: '#999',
+            animationDelay: '0.2s',
+            marginRight: '3px',
+          }}
+        />
+        <div
+          className="w-[5px] h-[5px] rounded-full bg-[#999] flex-shrink-0"
+          style={{
+            animation: 'pulse 1.0s ease-in-out infinite',
+            width: '5px',
+            height: '5px',
+            marginRight: '3px',
+            background: '#999',
+            animationDelay: '0.4s',
+          }}
+        />
+      </div>
+      <span className="text-[14px] text-[#999]">{props.children || '生成中'}</span>
+      <style>{`
+        @keyframes pulse {
+          0%, 60%, 100% {
+            opacity: 0.3;
+            transform: scale(1);
+          }
+          30% {
+            opacity: 1;
+            transform: scale(1.2);
+          }
+        }
+      `}</style>
+    </div>
+  );
+};

package/src/components/icon-btn.tsx

@@ -0,0 +1,43 @@
+import { ReactNode, forwardRef } from 'react';
+import { Button, ButtonProps } from './ui/button';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+import { BsTooltip } from './tooltip';
+
+export interface IconBtnProps extends ButtonProps {
+  icon: ReactNode;
+  rounded?: boolean;
+  tooltip?: string;
+}
+
+export const IconBtn = forwardRef<HTMLButtonElement, IconBtnProps>(
+  ({ icon, className, tooltip, size, rounded, ...rest }, ref) => {
+    const btn = (
+      <Button
+        ref={ref}
+        variant="ghost"
+        size="icon"
+        className={cn(
+          'p-2.5',
+          {
+            'rounded-full w-[26px] h-[26px] aspect-square !text-[#121111]': rounded,
+            'rounded-[4px]': !rounded,
+          },
+          'cursor-pointer',
+          'hover:!bg-[#EFF0F6]',
+          className,
+          transCls
+        )}
+        {...rest}
+      >
+        {icon}
+      </Button>
+    );
+
+    if (tooltip) {
+      return <BsTooltip content={tooltip}>{btn}</BsTooltip>;
+    }
+
+    return btn;
+  }
+);

package/src/components/img-part.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../lib/utils';
+
+export interface ImgMsgPartProps {
+  url: string;
+  alt?: string;
+  className?: string;
+  /** Size in pixels (width & height), defaults to 102 */
+  size?: number;
+  onClick?: () => void;
+}
+
+export const ImgMsgPart = ({ url, alt = '', className, size = 102, onClick }: ImgMsgPartProps) => {
+  return (
+    <div
+      className={cn('relative overflow-hidden rounded-[10px] border border-[#e0e0e0] hover:border-[#0265FF]/20 hover:cursor-pointer', onClick && 'cursor-pointer', className)}
+      style={{ width: size, height: size }}
+      onClick={onClick}
+    >
+      <img
+        src={url}
+        alt={alt}
+        className="block w-full h-full object-cover rounded-[10px]"
+        loading="lazy"
+      />
+    </div>
+  );
+};