@baishuyun/chat-sdk 0.1.9 → 1.0.0

package/src/components/bs-ui/fields-previewer.tsx

@@ -1,210 +0,0 @@
-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;
-}
-
-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,
-    variant = 'fields-previewer',
-    onSave,
-    onCancel,
-    onClear,
-    style,
-    confirmContent,
-    fullContent,
-    confirmTitle,
-    containerStyle,
-    readonly,
-
-    closeBtnLabel,
-    disableOperation,
-    disableConfirm,
-  }: 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={shadowContainer || absContainer!}
-          confirmTitle={confirmTitle}
-          confirmContent={confirmContent}
-          closeBtnLabel={closeBtnLabel}
-          disableOperation={disableOperation}
-          disableConfirm={disableConfirm}
-          onClear={onClear}
-        />
-        <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/bs-ui/font-icon.tsx

@@ -1,17 +0,0 @@
-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/bs-ui/form-info-editor.tsx

@@ -1,259 +0,0 @@
-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';
-
-export interface FormIconOption {
-  id: string;
-  /** Unicode code for FontIcon (e.g., "") */
-  code: string;
-  label: string;
-  /** Icon class number (e.g., 25 for icon-new-bsy-form-25) */
-  value: number;
-}
-
-// 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/bs-ui/formula-tag.tsx

@@ -1,32 +0,0 @@
-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/bs-ui/generate-animation.tsx

@@ -1,56 +0,0 @@
-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/bs-ui/icon-btn.tsx

@@ -1,43 +0,0 @@
-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, ...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]': rest.rounded,
-            'rounded-[4px]': !rest.rounded,
-          },
-          'cursor-pointer',
-          'hover:!bg-[#EFF0F6]',
-          className,
-          transCls
-        )}
-        {...rest}
-      >
-        {icon}
-      </Button>
-    );
-
-    if (tooltip) {
-      return <BsTooltip content={tooltip}>{btn}</BsTooltip>;
-    }
-
-    return btn;
-  }
-);

package/src/components/bs-ui/img-part.tsx

@@ -1,27 +0,0 @@
-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>
-  );
-};