@baishuyun/ai-design 1.0.0

package/src/components/card-field.tsx

@@ -0,0 +1,23 @@
+import { cn } from '../lib/utils';
+import { ReactNode } from 'react';
+
+export interface CardFieldProps {
+  label: string;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const CardField = ({ label, children, className }: CardFieldProps) => {
+  return (
+    <div className={cn('flex gap-2 items-start w-full', className)}>
+      <div className="w-[100px] shrink-0 text-[#666] text-sm leading-normal truncate">{label}</div>
+      <div className="flex-1 min-w-0 text-sm leading-normal whitespace-pre-wrap break-words">
+        {children ?? <span className="text-[#666]">无</span>}
+      </div>
+    </div>
+  );
+};
+
+export const CardFieldsWrapper = ({ children }: { children: ReactNode }) => {
+  return <div className="flex flex-col gap-[10px] w-full">{children}</div>;
+};

package/src/components/card.tsx

@@ -0,0 +1,36 @@
+import { transCls } from '../const/ui';
+import { cn } from '../lib/utils';
+import { ReactNode } from 'react';
+
+export interface CardProps {
+  title: string;
+  desc?: string;
+  index?: number;
+  icon?: ReactNode;
+  iconCode?: string;
+  onClick?: (title: string, iconCode?: string) => void;
+}
+
+export const Card = ({ title, desc, index, icon, onClick, iconCode }: CardProps) => {
+  return (
+    <div
+      className={cn(
+        'bs-card group flex flex-col cursor-pointer p-2.5 gap-2.5 rounded-lg  bg-[#F5F7FA] max-w-[350px] border border-transparent hover:border-[#e0e0e0] hover:bg-white',
+        {
+          transCls,
+        }
+      )}
+      onClick={() => {
+        onClick?.(title, iconCode);
+      }}
+    >
+      <div className="px-2.5 flex items-center gap-1.5 rounded-[4px] h-[34px]  bg-white">
+        {index === undefined ? null : <div>{index}</div>}
+        {icon === undefined ? null : <div className="text-[#0265FF]">{icon}</div>}
+        {/* make title text ellipsis */}
+        <div className="truncate !text-[#12111] group-hover:text-[#0265FF]">{title}</div>
+      </div>
+      <div className="text-[#666] leading-5 text-[12px]">{desc}</div>
+    </div>
+  );
+};

package/src/components/chat-area-header.tsx

@@ -0,0 +1,65 @@
+import { cn } from '../lib/utils';
+import { ChatHeaderBgImgUrl } from '../const/ui';
+import { IconBtn } from './icon-btn';
+import { CloseIcon, DockIcon, FloatIcon } from './bs-icons';
+
+export interface ChatAreaHeaderProps {
+  title?: string;
+  width?: number;
+  onDockClick?: () => void;
+  onCloseClick?: () => void;
+  avatar?: React.ReactNode;
+  draggable?: boolean;
+  isDragging?: boolean;
+  isDocked?: boolean;
+  onDragStart?: (e: React.MouseEvent) => void;
+}
+
+export const ChatAreaHeader = ({
+  avatar,
+  width,
+  onDockClick,
+  onCloseClick,
+  draggable,
+  isDragging,
+  isDocked,
+  onDragStart,
+}: ChatAreaHeaderProps) => {
+  return (
+    <div
+      className={cn('flex items-center justify-between', 'px-4', 'h-[52px] min-w-[200px]', {
+        'w-full': !width,
+        [`w-[${width}px]`]: width,
+        'cursor-grab': draggable && !isDragging,
+        'cursor-grabbing': isDragging,
+      })}
+      style={{
+        backgroundImage: ChatHeaderBgImgUrl,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+      }}
+      onMouseDown={draggable ? onDragStart : undefined}
+    >
+      {avatar}
+
+      <div className="actions flex items-center gap-2.5 text-[#666]">
+        <IconBtn
+          onMouseDown={(e) => {
+            // 阻止事件冒泡，避免触发拖拽
+            e.stopPropagation();
+          }}
+          tooltip={isDocked ? '悬浮' : '右侧打开'}
+          // className="hover:!bg-[#ffffff]"
+          icon={isDocked ? <FloatIcon /> : <DockIcon />}
+          onClick={onDockClick}
+        />
+        <IconBtn
+          // tooltip="关闭"
+          // className="hover:!bg-[#ffffff]"
+          icon={<CloseIcon />}
+          onClick={onCloseClick}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/circle-checker.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { cn } from '../lib/utils';
+import { CheckerInBoxIcon } from './bs-icons';
+
+export interface CircleCheckerProps {
+  defaultChecked?: boolean;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const CircleChecker = ({
+  defaultChecked = false,
+  checked: controlledChecked,
+  onCheckedChange,
+  children,
+  disabled = false,
+  className,
+}: CircleCheckerProps) => {
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+
+  const isControlled = controlledChecked !== undefined;
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+
+  const handleClick = () => {
+    if (disabled) return;
+
+    const newChecked = !isChecked;
+    if (!isControlled) {
+      setInternalChecked(newChecked);
+    }
+    onCheckedChange?.(newChecked);
+  };
+
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={isChecked}
+      disabled={disabled}
+      onClick={handleClick}
+      className={cn(
+        'inline-flex items-center gap-[6px] cursor-pointer select-none',
+        'text-[#121111] text-[14px]',
+        disabled && 'cursor-not-allowed opacity-50',
+        className
+      )}
+    >
+      <span
+        className={cn(
+          'inline-flex items-center justify-center w-4 h-4 rounded-full transition-colors duration-200 box-border border',
+          isChecked ? 'bg-[#2E60FF] border-transparent' : 'bg-white border-[#e0e0e0]'
+        )}
+      >
+        {isChecked && (
+          <span className="text-white">
+            <CheckerInBoxIcon />
+          </span>
+        )}
+      </span>
+      {children && <span className="text-sm">{children}</span>}
+    </button>
+  );
+};

package/src/components/collapsible-txt-msg.tsx

@@ -0,0 +1,63 @@
+import { ReactNode, useState } from 'react';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+import { AnalysisIcon, ChevronIcon } from './bs-icons';
+
+export interface CollapsibleTxtMsgProps {
+  title: string;
+  content?: string;
+  icon?: ReactNode;
+  defaultOpen?: boolean;
+  children?: ReactNode;
+
+  disableExpand?: boolean;
+}
+
+export const CollapsibleTxtMsg = ({
+  title,
+  content,
+  icon,
+  disableExpand,
+  children,
+  defaultOpen,
+}: CollapsibleTxtMsgProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="bg-[#fafafa] border border-[#e0e0e0] border-solid flex flex-col gap-2.5 p-2.5 rounded-lg w-full">
+      <div
+        className={cn('flex items-center justify-between w-full', {
+          'cursor-pointer': !disableExpand,
+        })}
+        onClick={() => {
+          if (disableExpand) return;
+
+          setIsOpen(!isOpen);
+        }}
+      >
+        <div className="flex gap-2.5 items-center">
+          <div className="w-4 h-4 shrink-0 flex items-center">{icon || <AnalysisIcon />}</div>
+          <p className="text-[#666] text-[14px] leading-normal">{title}</p>
+        </div>
+        <button
+          onClick={() => {
+            if (disableExpand) return;
+            setIsOpen(!isOpen);
+          }}
+          className={cn(
+            'flex items-center justify-center w-5 h-5 rounded-[4px] cursor-pointer hover:bg-[#EFF0F6]',
+            transCls,
+            {
+              'pointer-events-none opacity-0': disableExpand,
+            }
+          )}
+        >
+          <ChevronIcon isOpen={isOpen} />
+        </button>
+      </div>
+      {isOpen && !disableExpand && (
+        <div className="text-[#121111] text-[14px] word-wrap">{content || children}</div>
+      )}
+    </div>
+  );
+};

package/src/components/confirm-dialog.tsx

@@ -0,0 +1,139 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { QuestionIcon } from './bs-icons';
+import { cn } from '../lib/utils';
+import { BaseButton } from './base-button';
+
+export interface ConfirmDialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title: string;
+  description?: string;
+  /** Text for the left link button */
+  linkText?: string;
+  /** Callback when link button is clicked */
+  onLinkClick?: () => void;
+  /** Text for the cancel button */
+  cancelText?: string;
+  /** Callback when cancel button is clicked */
+  onCancel?: () => void;
+  /** Text for the confirm button */
+  confirmText?: string;
+  /** Callback when confirm button is clicked */
+  onConfirm?: () => void;
+  /** Whether to show the link button */
+  showLink?: boolean;
+  /** Whether to show the cancel button */
+  showCancel?: boolean;
+  /** Container element for the dialog portal */
+  container?: HTMLElement;
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  linkText = '留在此页',
+  onLinkClick,
+  cancelText = '不保存',
+  onCancel,
+  confirmText = '保存并继续',
+  onConfirm,
+  container,
+  showLink = true,
+  showCancel = true,
+}: ConfirmDialogProps) {
+  const btnStyle = {
+    borderRadius: 4,
+    padding: '6px 20px',
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        container={container}
+        className={cn(
+          'w-[480px] max-w-[480px] p-0 gap-0 rounded-[10px] border-none',
+          'shadow-[0px_0px_10px_0px_rgba(0,0,0,0.04)]',
+          '[&>button]:hidden'
+        )}
+      >
+        <DialogHeader className="flex flex-row items-start gap-[10px] p-9 pb-0">
+          <div className="size-[30px] shrink-0 text-[#0265FF]">
+            <QuestionIcon />
+          </div>
+          <div className="flex flex-col gap-2">
+            <DialogTitle className="text-[16px] font-[700] text-[#030303] leading-normal">
+              {title}
+            </DialogTitle>
+            {description && (
+              <DialogDescription className="text-[14px] text-[#666] leading-normal">
+                {description}
+              </DialogDescription>
+            )}
+          </div>
+        </DialogHeader>
+
+        <DialogFooter className="flex flex-row items-center !justify-between p-9 pt-6">
+          {showLink ? (
+            <button
+              type="button"
+              className="text-[14px] text-[#0265ff] hover:text-[#0265ff]/80 bg-transparent border-none cursor-pointer"
+              onClick={onLinkClick || (() => {
+                console.log('Link clicked');
+
+                onOpenChange?.(false);
+              })}
+            >
+              {linkText}
+            </button>
+          ) : (
+            <div />
+          )}
+
+          <div className="flex items-center gap-3">
+            {showCancel && (
+              <BaseButton
+                className="hover:text-[#121111]"
+                onClick={onCancel}
+              >
+                {cancelText}
+              </BaseButton>
+              // <button
+              //   type="button"
+              //   onClick={onCancel}
+              //   style={btnStyle}
+              //   className={cn(
+              //     'h-8 px-5 py-1.5 rounded border border-[#e0e0e0]',
+              //     'text-[14px] text-[#030303] bg-white',
+              //     'hover:bg-gray-50 cursor-pointer'
+              //   )}
+              // >
+              //   {cancelText}
+              // </button>
+            )}
+            <button
+              type="button"
+              onClick={onConfirm}
+              style={btnStyle}
+              className={cn(
+                // 'h-8 px-5 py-1.5 rounded',
+                'text-[14px] text-white bg-[#0265ff]',
+                'hover:bg-[#0265ff]/80 cursor-pointer border-none'
+              )}
+            >
+              {confirmText}
+            </button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/fake-bot-msg.tsx

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+import { MessageContent } from './message-content';
+import { cn } from '../lib/utils';
+
+export const FakeBotMessage = ({
+  children,
+  headless,
+  className,
+}: {
+  children: ReactNode;
+  headless?: boolean;
+  offset?: boolean;
+  className?: string;
+}) => {
+  if (headless) {
+    return (
+      <div>
+        <MessageContent
+          className={cn(
+            'w-fit wrap-break-words rounded-2 bg-transparent px-0 py-0 text-left',
+            className
+          )}
+          data-testid="message-content"
+        >
+          {children}
+        </MessageContent>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn('group/message w-full')}
+      data-role="assistant"
+      data-testid={`message-assistant`}
+    >
+      <div className="flex w-full flex-col items-start justify-start gap-2.5">
+        <div className="flex flex-col min-w-0 grow gap-2.5 w-full">
+          <MessageContent
+            className="w-full wrap-break-words rounded-2 bg-transparent px-0 py-0 text-left"
+            data-testid="message-content"
+          >
+            {children}
+          </MessageContent>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/fields-design-info-table.tsx

@@ -0,0 +1,160 @@
+import { useState, useCallback, useMemo } from 'react';
+import { IFieldDesignInfo } from '@baishuyun/types';
+import { cn } from '../lib/utils';
+import { ChevronIcon } from './bs-icons';
+
+interface FieldsDesignInfoTableProps {
+  fields: IFieldDesignInfo[];
+}
+
+/** Group fields into top-level items and subform groups */
+function groupFields(fields: IFieldDesignInfo[]) {
+  const groups: Array<
+    | { kind: 'field'; field: IFieldDesignInfo }
+    | { kind: 'subform'; parent: IFieldDesignInfo; children: IFieldDesignInfo[] }
+  > = [];
+
+  let i = 0;
+  while (i < fields.length) {
+    const f = fields[i];
+    if (f.isSubForm) {
+      const children: IFieldDesignInfo[] = [];
+      let j = i + 1;
+      while (
+        j < fields.length &&
+        fields[j].isFieldInSubForm &&
+        fields[j].parentFormName === f.fieldName
+      ) {
+        children.push(fields[j]);
+        j++;
+      }
+      groups.push({ kind: 'subform', parent: f, children });
+      i = j;
+    } else {
+      groups.push({ kind: 'field', field: f });
+      i++;
+    }
+  }
+  return groups;
+}
+
+const cellCls = 'flex items-center px-1.5 py-2.5 text-xs leading-normal';
+
+function FieldRow({
+  field,
+  isSubFormChild = false,
+}: {
+  field: IFieldDesignInfo;
+  isSubFormChild?: boolean;
+}) {
+  return (
+    <div className="flex items-center w-full">
+      {/* 名称 */}
+      <div className={cn(cellCls, 'w-20 shrink-0 min-h-[34px]')}>
+        {isSubFormChild && (
+          <span className="inline-flex items-center justify-center shrink-0 w-5 h-5 opacity-0">
+            <ChevronIcon />
+          </span>
+        )}
+        <span>{field.fieldName}</span>
+      </div>
+      {/* 类型 */}
+      <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px]')}>
+        {field.type}
+      </div>
+      {/* 必填 */}
+      <div className={cn(cellCls, 'w-9 shrink-0 min-h-[34px]')}>
+        {field.required ? '是' : '否'}
+      </div>
+      {/* 说明 */}
+      <div className={cn(cellCls, 'flex-1 min-w-0 min-h-[34px]')}>
+        <span className="break-words min-w-0">{field.description}</span>
+      </div>
+    </div>
+  );
+}
+
+function SubFormGroup({
+  parent,
+  children,
+}: {
+  parent: IFieldDesignInfo;
+  children: IFieldDesignInfo[];
+}) {
+  const [isOpen, setIsOpen] = useState(true);
+  const toggle = useCallback(() => setIsOpen((v) => !v), []);
+
+  return (
+    <>
+      {/* 子表单 parent row */}
+      <div className="flex items-center w-full">
+        {/* 名称 */}
+        <div className={cn(cellCls, 'w-20 shrink-0 min-h-[34px]')}>
+          <button
+            type="button"
+            onClick={toggle}
+            className="inline-flex items-center justify-center shrink-0 w-5 h-5 rounded cursor-pointer text-[#666] relative -left-[2px]"
+          >
+            <ChevronIcon isOpen={isOpen} />
+          </button>
+          <span>{parent.fieldName}</span>
+        </div>
+        {/* 类型 */}
+        <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px] ')}>
+          {parent.type}
+        </div>
+        {/* 必填 */}
+        <div className={cn(cellCls, 'w-9 shrink-0 min-h-[34px]')}>
+          {parent.required ? '是' : '否'}
+        </div>
+        {/* 说明 */}
+        <div className={cn(cellCls, 'flex-1 min-w-0 min-h-[34px]')}>
+          <span className="break-words min-w-0">{parent.description}</span>
+        </div>
+      </div>
+
+      {/* 子表单 children */}
+      {isOpen && children.map((child, idx) => <FieldRow key={idx} field={child} isSubFormChild />)}
+    </>
+  );
+}
+
+export function FieldsDesignInfoTable({ fields }: FieldsDesignInfoTableProps) {
+  const groups = useMemo(() => groupFields(fields), [fields]);
+
+  return (
+    <div className="flex flex-col items-start w-full bg-white rounded-[10px] overflow-hidden text-black my-[10px] border border-[#E0E0E0]">
+      {/* 表头 */}
+      <div className="flex items-center w-full shrink-0 bg-[#E5E6EB] rounded-t-[10px] border-b border-[#E0E0E0]">
+        <div className={cn(cellCls, 'w-20 shrink-0 h-[34px] font-bold')}>
+          名称
+        </div>
+        <div className={cn(cellCls, 'w-[72px] shrink-0 h-[34px] font-bold')}>
+          类型
+        </div>
+        <div
+          className={cn(
+            cellCls,
+            'w-9 shrink-0 h-[34px] font-bold justify-center'
+          )}
+        >
+          必填
+        </div>
+        <div className={cn(cellCls, 'flex-1 min-w-0 h-[34px] font-bold')}>
+          说明
+        </div>
+      </div>
+
+      {/* 表体 */}
+      <div className="flex flex-col items-start w-full">
+        {groups.map((g, idx) =>
+          g.kind === 'field' ? (
+            <FieldRow key={idx} field={g.field} />
+          ) : (
+            <SubFormGroup key={idx} parent={g.parent} children={g.children} />
+          )
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/fields-generating-indicator.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { BorderColorAnimation } from './border-color-animation';
+import { MagicIcon } from './bs-icons';
+
+export const DotAnimation = () => {
+  return (
+    <>
+      <div className="flex gap-[2px] flex-shrink-0 relative -left-[4px] top-[3px]">
+        <div
+          className="w-[2px] h-[2px] rounded-full bg-[#0265FF] flex-shrink-0"
+          style={{
+            animation: 'pulse 1.4s ease-in-out infinite',
+            animationDelay: '0s',
+            marginRight: '2px',
+          }}
+        />
+        <div
+          className="w-[2px] h-[2px] rounded-full bg-[#0265FF] flex-shrink-0"
+          style={{
+            animation: 'pulse 1.4s ease-in-out infinite',
+            animationDelay: '0.2s',
+            marginRight: '2px',
+          }}
+        />
+        <div
+          className="w-[2px] h-[2px] rounded-full bg-[#0265FF] flex-shrink-0"
+          style={{
+            animation: 'pulse 1.4s ease-in-out infinite',
+            animationDelay: '0.4s',
+          }}
+        />
+      </div>
+      <style>{`
+        @keyframes pulse {
+          0%, 60%, 100% {
+            opacity: 0.3;
+            transform: scale(1);
+          }
+          30% {
+            opacity: 1;
+            transform: scale(1.2);
+          }
+        }
+      `}</style>
+    </>
+  );
+};
+
+export const FieldsGeneratingIndicator = ({
+  children,
+  loading = true,
+}: {
+  children?: React.ReactNode;
+  loading?: boolean;
+}) => {
+  const paddingAndGap = 16 * 2 + 6; // padding + gap
+  const animationWidth = loading ? 14 : 0;
+  const magicIconWidth = 16;
+  const textRef = useRef<HTMLSpanElement>(null);
+  const [textWidth, setWidth] = useState(0);
+
+  // get text width + padding + gap
+  const fullWidth = textWidth + paddingAndGap + animationWidth + magicIconWidth;
+
+  // when text changes, update width
+  useLayoutEffect(() => {
+    if (textRef.current) {
+      const rect = textRef.current.getBoundingClientRect();
+      setWidth(rect.width);
+    }
+  }, [children]);
+
+  // when text not change, get init width
+  useEffect(() => {
+    if (textRef.current) {
+      const rect = textRef.current.getBoundingClientRect();
+      console.log('rect.width', rect.width);
+      setWidth(rect.width);
+    }
+  }, []);
+
+  return (
+    <BorderColorAnimation borderRadius={100} width={fullWidth} height={34} borderWidth={1}>
+      <div className="flex items-center gap-[6px] h-[31px] ml-[16px]">
+        <div className="shrink-0">
+          <MagicIcon />
+        </div>
+        <span className="text-[14px] text-[#0265FF] shrink-0" ref={textRef}>
+          {children || '字段生成中'}
+        </span>
+        {loading && <DotAnimation />}
+      </div>
+    </BorderColorAnimation>
+  );
+};