@baishuyun/chat-sdk 0.1.9 → 1.0.0

package/src/components/bs-ui/card-field.tsx

@@ -1,23 +0,0 @@
-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/bs-ui/card.tsx

@@ -1,36 +0,0 @@
-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/bs-ui/chat-area-header.tsx

@@ -1,65 +0,0 @@
-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/bs-ui/circle-checker.tsx

@@ -1,66 +0,0 @@
-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/bs-ui/collapsible-txt-msg.tsx

@@ -1,63 +0,0 @@
-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-[10px] 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-[10px] 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/bs-ui/confirm-dialog.tsx

@@ -1,139 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/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/bs-ui/fields-design-info-table.tsx

@@ -1,160 +0,0 @@
-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/bs-ui/fields-generating-indicator.tsx

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

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

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