@baishuyun/chat-sdk 0.0.1-alpha.1

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

@@ -0,0 +1,286 @@
+import { cn } from '@/lib/utils';
+import { 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 data from iconfont.json (icons with name starting with "表单")
+export const FORM_ICON_OPTIONS: FormIconOption[] = [
+  { id: 'biaodan1', code: '', label: '表单1', value: 25 },
+  { id: 'biaodan2', code: '', label: '表单2', value: 26 },
+  { id: 'biaodan3', code: '', label: '表单3', value: 27 },
+  { id: 'biaodan4', code: '', label: '表单4', value: 28 },
+  { id: 'biaodan5', code: '', label: '表单5', value: 29 },
+  { id: 'biaodan6', code: '', label: '表单6', value: 30 },
+  { id: 'biaodan7', code: '', label: '表单7', value: 31 },
+  { id: 'biaodan8', code: '', label: '表单8', value: 32 },
+  { id: 'biaodan9', code: '', label: '表单9', value: 33 },
+  { id: 'biaodan10', code: '', label: '表单10', value: 34 },
+  { id: 'biaodan11', code: '', label: '表单11', value: 35 },
+  { id: 'biaodan12', code: '', label: '表单12', value: 36 },
+  { id: 'biaodan13', code: '', label: '表单13', value: 37 },
+  { id: 'biaodan14', code: '', label: '表单14', value: 38 },
+  { id: 'biaodan15', code: '', label: '表单15', value: 39 },
+  { id: 'biaodan16', code: '', label: '表单16', value: 40 },
+  { id: 'biaodan17', code: '', label: '表单17', value: 41 },
+  { id: 'biaodan18', code: '', label: '表单18', value: 42 },
+  { id: 'biaodan19', code: '', label: '表单19', value: 43 },
+  { id: 'biaodan20', code: '', label: '表单20', value: 44 },
+  { id: 'biaodan21', code: '', label: '表单21', value: 45 },
+  { id: 'biaodan22', code: '', label: '表单22', value: 46 },
+  { id: 'biaodan23', code: '', label: '表单23', value: 47 },
+  { id: 'biaodan24', code: '', label: '表单24', value: 48 },
+  { id: 'biaodan25', code: '', label: '表单25', value: 49 },
+  { id: 'biaodan26', code: '', label: '表单26', value: 50 },
+  { id: 'biaodan27', code: '', label: '表单27', value: 51 },
+  { id: 'biaodan28', code: '', label: '表单28', value: 52 },
+  { id: 'biaodan29', code: '', label: '表单29', value: 53 },
+  { id: 'biaodan30', code: '', label: '表单30', value: 54 },
+  { id: 'biaodan31', code: '', label: '表单31', value: 55 },
+  { id: 'biaodan32', code: '', label: '表单32', value: 56 },
+  { id: 'biaodan33', code: '', label: '表单33', value: 57 },
+  { id: 'biaodan34', code: '', label: '表单34', value: 58 },
+  { id: 'biaodan35', code: '', label: '表单35', value: 59 },
+  { id: 'biaodan36', code: '', label: '表单36', value: 60 },
+];
+
+// 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;
+}
+
+/**
+ * Form Info Editor Component
+ * Displays form name and icon with an expandable editor interface
+ */
+export const FormInfoEditor = memo(
+  ({
+    name,
+    onNameChange,
+    onMount,
+    selectedIcon,
+    iconOptions = [],
+    onIconChange,
+    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) {
+      return (
+        <div
+          className={cn(
+            'bg-[#fafafa] border border-[#e0e0e0] rounded-[10px] px-[10px] py-0 flex items-center justify-between h-[56px]',
+            transCls,
+            className
+          )}
+        >
+          {/* 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>
+
+          {/* Right side: Edit button */}
+          <button
+            onClick={() => setExpanded(true)}
+            className={cn(
+              'w-[16px] h-[16px] flex items-center justify-center cursor-pointer hover:opacity-70',
+              transCls
+            )}
+          >
+            <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
+        )}
+      >
+        {/* 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]',
+              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(
+                        'w-[40px] h-[40px] rounded-[9.5px] border flex items-center justify-center cursor-pointer',
+                        iconOpt?.id === option.id
+                          ? 'border-[#0265ff] border-2'
+                          : 'border-[#e0e0e0] hover:bg-[#eff0f6]',
+                        transCls
+                      )}
+                      title={option.label}
+                    >
+                      <FormIcon
+                        size={40}
+                        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/generate-animation.tsx

@@ -0,0 +1,54 @@
+export const GenerateAnimation = (props: { children?: React.ReactNode }) => {
+  return (
+    <div className="flex items-center gap-[6px]">
+      <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.4s 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.4s 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.4s 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

@@ -0,0 +1,31 @@
+import { ReactNode, forwardRef } from 'react';
+import { Button, ButtonProps } from '../ui/button';
+import { cn } from '@/lib/utils';
+import { transCls } from '@/const/ui';
+
+export interface IconBtnProps extends ButtonProps {
+  icon: ReactNode;
+}
+
+export const IconBtn = forwardRef<HTMLButtonElement, IconBtnProps>(
+  ({ icon, className, size, ...rest }, ref) => {
+    return (
+      <Button
+        ref={ref}
+        variant="ghost"
+        size="icon"
+        className={cn(
+          className,
+          'p-2.5',
+          'rounded-[4px]',
+          'cursor-pointer',
+          '!hover:bg-[#EFF0F6]',
+          transCls
+        )}
+        {...rest}
+      >
+        {icon}
+      </Button>
+    );
+  }
+);

package/src/components/bs-ui/line-checker.tsx

@@ -0,0 +1,129 @@
+import React, { CSSProperties, useState } from 'react';
+import { Checkbox } from '@/components/ui/checkbox';
+import classNames from 'classnames';
+import { cn } from '@/lib/utils';
+
+export interface LineCheckerProps {
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+
+  icon?: React.ReactNode;
+  title: string;
+  shortDesc?: string;
+  className?: string;
+  extra?: React.ReactNode;
+
+  style?: CSSProperties;
+}
+
+export const LineChecker: React.FC<LineCheckerProps> = ({
+  defaultChecked = false,
+  disabled = false,
+  onCheckedChange,
+  icon,
+  className,
+  title,
+  extra,
+  style,
+  shortDesc,
+}) => {
+  const [checked, setChecked] = useState(defaultChecked);
+
+  const handleClick = () => {
+    if (disabled) return;
+
+    const newChecked = !checked;
+    setChecked(newChecked);
+    onCheckedChange?.(newChecked);
+  };
+
+  const hasExtra = Boolean(extra);
+
+  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,
+        },
+        className
+      )}
+      style={style}
+      onClick={() => {
+        handleClick();
+      }}
+    >
+      <Checkbox
+        className={classNames(
+          'outline-none grow-0 shrink-0 rounded-[2px] cursor-pointer bg-white text-white border-[#0265ff] data-[state=checked]:bg-[#0265ff] data-[state=checked]:border-[#0265ff] data-[state=checked]:bg-[#0265ff]',
+          {
+            'mt-[2px]': hasExtra,
+            'opacity-80 cursor-not-allowed': disabled,
+          }
+        )}
+        id={title}
+        checked={checked}
+        disabled={disabled}
+        onCheckedChange={handleClick}
+      />
+
+      <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', {
+                'flex-1': !!icon,
+                'flex-grow-1 flex-shrink-0': !icon,
+              })}
+            >
+              {title}
+            </p>
+          </div>
+
+          {shortDesc && (
+            <p
+              className={classNames('text-sm text-[#666]', {
+                'whitespace-nowrap flex-shrink-0': !!icon,
+                'break-words': !icon,
+              })}
+            >
+              {shortDesc}
+            </p>
+          )}
+        </div>
+        {hasExtra ? (
+          <div className="overflow-x-auto whitespace-nowrap no-scrollbar flex items-center gap-2">
+            {extra}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default LineChecker;

package/src/components/bs-ui/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/bs-ui/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/bs-ui/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>
+    )
+}