@baishuyun/chat-sdk 0.0.1-alpha.1

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

@@ -0,0 +1,134 @@
+import { useState } from 'react';
+import classNames from 'classnames';
+import { IconBtn } from './icon-btn';
+import { BackIcon, InfoIcon } from './bs-icons';
+import { LinearGradientColorBgAnimation } from './linear-gradient-color-bg-animation';
+import { ConfirmDialog } from './confirm-dialog';
+
+export interface PreviewerHeaderProps {
+  title: string;
+  tips?: string;
+  active?: boolean;
+  className?: string;
+  onBackClick?: () => void;
+  onSave?: () => void;
+  onCancel?: () => void;
+  style?: React.CSSProperties;
+
+  dialogContainer?: HTMLElement;
+}
+
+export const PreviewerHeader = ({
+  title,
+  tips,
+  style,
+  className,
+  active,
+  onBackClick,
+  onSave,
+  onCancel,
+  dialogContainer,
+}: PreviewerHeaderProps) => {
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+
+  const btnResetStyle = classNames(
+    'w-[94px] h-[34px] flex items-center justify-center rounded-[4px]'
+  );
+
+  const contentJsx = (
+    <>
+      <div className="flex items-center gap-3">
+        <IconBtn
+          icon={<BackIcon />}
+          onClick={() => setShowConfirmDialog(true)}
+          className="text-[#0265FF] hover:text-[#0265FF]"
+        />
+        <span className="text-[#121111] text-[16px] font-[700]">{title}</span>
+        {tips && active && (
+          <div className="flex items-center gap-[6px] text-[#999999] text-[12px]">
+            <InfoIcon />
+            {tips}
+          </div>
+        )}
+      </div>
+      <div className="flex items-center gap-[10px]">
+        {onSave && (
+          <button
+            onClick={onSave}
+            className={classNames(
+              btnResetStyle,
+              'bg-[#0265FF] hover:opacity-90 text-white text-[14px]'
+            )}
+          >
+            保存
+          </button>
+        )}
+        {onCancel && (
+          <button
+            onClick={() => {
+              setShowConfirmDialog(true);
+              console.log('click onCancel');
+            }}
+            className={classNames(
+              btnResetStyle,
+              'text-[#121111] text-[14px] bg-[#fff] border border-solid border-[#e0e0e0] hover:bg-[#f0f0f0]'
+            )}
+          >
+            取消
+          </button>
+        )}
+      </div>
+      <ConfirmDialog
+        container={dialogContainer}
+        open={showConfirmDialog}
+        onOpenChange={setShowConfirmDialog}
+        title="AI表单搭建有修改，是否保存？"
+        description="您修改了AI表单搭建但没有保存，是否需要保存并继续？"
+        onLinkClick={() => setShowConfirmDialog(false)}
+        onCancel={() => {
+          setShowConfirmDialog(false);
+          onCancel?.();
+          onBackClick?.();
+        }}
+        onConfirm={() => {
+          setShowConfirmDialog(false);
+          onSave?.();
+        }}
+      />
+    </>
+  );
+
+  const borderCls = classNames({
+    'border-b border-solid border-[#e0e0e0]': !active,
+  });
+
+  if (active) {
+    return (
+      <LinearGradientColorBgAnimation
+        height={52}
+        style={style}
+        childrenContainerStyle={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0 20px',
+        }}
+      >
+        {contentJsx}
+      </LinearGradientColorBgAnimation>
+    );
+  }
+
+  return (
+    <div
+      style={style}
+      className={classNames(
+        'w-full h-[52px] flex items-center justify-between px-[20px]',
+        className,
+        borderCls
+      )}
+    >
+      {contentJsx}
+    </div>
+  );
+};

package/src/components/bs-ui/primary-confirm-btn.tsx

@@ -0,0 +1,46 @@
+import { Button, ButtonProps } from "../ui/button";
+import { cn } from "@/lib/utils";
+import { transCls } from "@/const/ui";
+
+export interface PrimaryConfirmBtnProps extends ButtonProps {
+  text?: string;
+  prefixDesc?: string;
+}
+
+export const PrimaryConfirmBtn = ({
+  text = "确认",
+  prefixDesc,
+  className,
+  disabled,
+  ...rest
+}: PrimaryConfirmBtnProps) => {
+  const btn = (
+    <Button
+      {...rest}
+      variant="default"
+      disabled={disabled}
+      className={cn(
+        "px-2.5 py-0 rounded-[100px] text-[14px] leading-normal h-[34px] min-w-[300px] cursor-pointer w-full",
+        disabled
+          ? "bg-[#f0f0f0] text-[#999] cursor-not-allowed"
+          : "bg-[#0265ff] text-white hover:bg-[#0265ff]/80",
+
+        transCls,
+        className
+      )}
+    >
+      {text}
+    </Button>
+  );
+
+  if (!prefixDesc) {
+    return btn;
+  }
+
+  return (
+    <div className="flex flex-col items-start gap-2.5">
+      <p className="text-[#4D609F]">{prefixDesc}</p>
+      {btn}
+    </div>
+  );
+};

package/src/components/bs-ui/primary-entry-btn.tsx

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { Button, ButtonProps } from '../ui/button';
+import { BotIcon } from './bot-icon';
+import { cn } from '@/lib/utils';
+
+export interface PrimaryEntryBtnProps extends ButtonProps {
+  minimal?: boolean;
+  entryVariant?: 'default' | 'ghost' | 'selected';
+  icon?: ReactNode;
+}
+
+export const PrimaryEntryBtn = ({
+  children,
+  className,
+  minimal,
+  entryVariant = 'default',
+  icon,
+  ...rest
+}: PrimaryEntryBtnProps) => {
+  const variantStyles = {
+    default: 'bg-[linear-gradient(180deg,#DBE9FF_0%,#E9FFFD_100%)]',
+    ghost: 'bg-transparent text-[#030303] font-[400] px-[10px] hover:bg-[#EFF0F6]',
+    selected: 'bg-[#EFF0F6] text-[#030303] font-[400] px-[10px]',
+  };
+
+  return (
+    <Button
+      {...rest}
+      variant="entry"
+      size="entry"
+      className={cn('rounded-[4px] cursor-pointer', variantStyles[entryVariant], className)}
+    >
+      {icon ?? <BotIcon />}
+      {minimal ? null : children}
+    </Button>
+  );
+};

package/src/components/bs-ui/tab-radio-group.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+import { cn } from '@/lib/utils';
+
+export interface TabRadioOption {
+  value: string;
+  label: React.ReactNode;
+}
+
+export interface TabRadioGroupProps extends Omit<
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
+  'children'
+> {
+  options: TabRadioOption[];
+}
+
+const TabRadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  TabRadioGroupProps
+>(({ className, options, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      ref={ref}
+      className={cn(
+        'flex flex-col items-start justify-center p-[2px] rounded-[4px] bg-[#EFF0F6]',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex gap-[2px] items-center w-full">
+        {options.map((option) => (
+          <TabRadioItem key={option.value} value={option.value}>
+            {option.label}
+          </TabRadioItem>
+        ))}
+      </div>
+    </RadioGroupPrimitive.Root>
+  );
+});
+TabRadioGroup.displayName = 'TabRadioGroup';
+
+interface TabRadioItemProps extends React.ComponentPropsWithoutRef<
+  typeof RadioGroupPrimitive.Item
+> {
+  children: React.ReactNode;
+}
+
+const TabRadioItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  TabRadioItemProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'flex-1 h-[30px] flex items-center justify-center px-[10px] py-[7px] rounded-[4px] text-[14px] text-[#121111] cursor-pointer',
+        'border border-solid border-[#EFF0F6] bg-transparent',
+        'transition-all ease-out duration-200',
+        'outline-none',
+        'hover:text-[#121111] hover:border-[#E0E0E0] hover:bg-white',
+        'data-[state=checked]:text-[#0265FF] data-[state=checked]:border-[#E0E0E0] data-[state=checked]:bg-white',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </RadioGroupPrimitive.Item>
+  );
+});
+TabRadioItem.displayName = 'TabRadioItem';
+
+export { TabRadioGroup, TabRadioItem };

package/src/components/bs-ui/tooltip.tsx

@@ -0,0 +1,18 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+export const BsTooltip = ({
+  children,
+  content,
+}: {
+  children: React.ReactNode;
+  content: React.ReactNode;
+}) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent className="z-50 rounded-[4px] bg-[#525867] px-[10px] py-[6px] text-[14px] text-white leading-normal max-w-[288px]">
+        {content}
+      </TooltipContent>
+    </Tooltip>
+  );
+};

package/src/components/bs-ui/user-txt-msg-bubble.tsx

@@ -0,0 +1,19 @@
+export interface UserTextMsgBubbleProps {
+  text?: string;
+  children?: string;
+}
+
+export const UserTextMsgBubble = ({ text, children }: UserTextMsgBubbleProps) => {
+  return (
+    <div
+      className="px-2.5 py-[7px] text-[#0265FF] text-[14px]"
+      style={{
+        borderRadius: `10px 0 10px 10px`,
+        wordWrap: 'break-word',
+        background: `linear-gradient(180deg, #DBE9FF 0%, #E9FFFD 100%)`,
+      }}
+    >
+      {text || children}
+    </div>
+  );
+};

package/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/button.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        entry: '',
+      },
+      size: {
+        default: 'h-[34px] px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-[24px] w-[24px]',
+        entry: 'h-[30px] px-1.5 py-0 gap-1.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("grid place-content-center text-current")}
+    >
+      {/* @ts-ignore */}
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/components/ui/dialog.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    position?: 'fixed' | 'absolute';
+  }
+>(({ className, position = 'fixed', ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'inset-0 z-50 bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      position === 'absolute' ? 'absolute' : 'fixed',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { container?: HTMLElement }
+>(({ className, children, container, ...props }, ref) => {
+  return (
+    <DialogPortal container={container}>
+      <DialogOverlay position={container ? 'absolute' : 'fixed'} />
+      <DialogPrimitive.Content
+        style={{ padding: 0 }}
+        ref={ref}
+        className={cn(
+          'left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          container ? 'absolute' : 'fixed',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};