@baishuyun/chat-sdk 0.0.1-alpha.1

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

@@ -0,0 +1,37 @@
+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;
+  onClick?: (title: string) => void;
+}
+
+export const Card = ({ title, desc, index, icon, onClick }: CardProps) => {
+  return (
+    <div
+      className={cn(
+        "bs-card flex flex-col cursor-pointer p-2.5 gap-2.5 rounded-lg  bg-[#F5F7FA] max-w-[350px] border border-transparent hover:border-[#e0e0e0]",
+        {
+          transCls,
+        },
+      )}
+      onClick={() => {
+        onClick?.(title);
+      }}
+    >
+      <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">{title}</div>
+      </div>
+      <div className="text-[#666] leading-5">{desc}</div>
+    </div>
+  );
+};

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

@@ -0,0 +1,41 @@
+import { cn } from '@/lib/utils';
+import { BotIcon } from './bot-icon';
+import { ChatHeaderBgImgUrl } from '@/const/ui';
+import { IconBtn } from './icon-btn';
+import { CloseIcon, DockIcon } from './bs-icons';
+
+export interface ChatAreaHeaderProps {
+  title?: string;
+  width?: number;
+  onDockClick?: () => void;
+  onCloseClick?: () => void;
+  avatar?: React.ReactNode;
+}
+
+export const ChatAreaHeader = ({
+  avatar,
+  width,
+  onDockClick,
+  onCloseClick,
+}: ChatAreaHeaderProps) => {
+  return (
+    <div
+      className={cn('flex items-center justify-between', 'px-4', 'h-[52px] min-w-[200px]', {
+        'w-full': !width,
+        [`w-[${width}px]`]: width,
+      })}
+      style={{
+        backgroundImage: ChatHeaderBgImgUrl,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+      }}
+    >
+      {avatar}
+
+      <div className="actions flex items-center gap-2.5">
+        <IconBtn icon={<DockIcon />} onClick={onDockClick} />
+        <IconBtn icon={<CloseIcon />} onClick={onCloseClick} />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,50 @@
+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;
+}
+
+
+export const CollapsibleTxtMsg = ({
+  title,
+  content,
+  icon,
+  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="flex items-center justify-between w-full cursor-pointer" onClick={() => {
+         setIsOpen(!isOpen)
+      }}>
+        <div className="flex gap-1.5 items-center">
+          <div className="w-4 h-4 shrink-0">{icon || <AnalysisIcon />}</div>
+          <p className="text-[#666] text-[14px] leading-normal">{title}</p>
+        </div>
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className={cn(
+            "flex items-center justify-center w-5 h-5 rounded cursor-pointer",
+            transCls
+          )}
+        >
+          <ChevronIcon isOpen={isOpen} />
+        </button>
+      </div>
+      {isOpen && (
+        <div className="text-[#030303] text-[14px]">
+          {content || children}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/bs-ui/confirm-dialog.tsx

@@ -0,0 +1,128 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { QuestionIcon } from './bs-icons';
+import { cn } from '@/lib/utils';
+
+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"
+              onClick={onLinkClick}
+              className="text-[14px] text-[#0265ff] hover:text-[#0265ff]/80 bg-transparent border-none cursor-pointer"
+            >
+              {linkText}
+            </button>
+          ) : (
+            <div />
+          )}
+
+          <div className="flex items-center gap-3">
+            {showCancel && (
+              <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-generating-indicator.tsx

@@ -0,0 +1,50 @@
+import { BorderColorAnimation } from './border-color-animation';
+import { MagicIcon } from './bs-icons';
+
+export const FieldsGeneratingIndicator = () => {
+  return (
+    <BorderColorAnimation borderRadius={100} width={136} height={34} borderWidth={1}>
+      <div className="flex items-center gap-[6px] h-[31px] ml-[16px]">
+        <MagicIcon />
+        <span className="text-[14px] text-[#0265FF]">字段生成中</span>
+        <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>
+      </div>
+    </BorderColorAnimation>
+  );
+};

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

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

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

@@ -0,0 +1,109 @@
+import classNames from 'classnames';
+import { useRef } 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';
+
+export interface FieldsPreviewerProps extends PreviewerHeaderProps {
+  fullscreen?: boolean;
+
+  rightSpaceWidth?: number;
+
+  // generating fields
+  streaming?: boolean;
+
+  empty?: boolean;
+
+  zIndex?: number;
+
+  padding?: number;
+
+  // children means the content inside the previewer, not the right side components
+  children?: React.ReactNode;
+}
+
+const PlaceholderDashedBox = () => {
+  return (
+    <div
+      style={{
+        borderRadius: 10,
+        width: '100%',
+        height: '100%',
+        border: '1px dashed var(---e0e0e0, #E0E0E0)',
+      }}
+    />
+  );
+};
+
+export const FieldsPreviewer = ({
+  zIndex = 1,
+  children,
+  title,
+  tips,
+  active,
+  fullscreen,
+  padding = 10,
+  className,
+  empty,
+  rightSpaceWidth,
+  streaming,
+  onBackClick,
+  onSave,
+  onCancel,
+  style,
+}: FieldsPreviewerProps) => {
+  const p = fullscreen ? 0 : padding;
+  const pr = fullscreen ? 0 : rightSpaceWidth;
+
+  const absWrapperRef = useRef<HTMLDivElement>(null);
+
+  const contentJsx = (
+    <>
+      <PreviewerHeader
+        title={title}
+        tips={tips}
+        active={active}
+        className={className}
+        onBackClick={onBackClick}
+        onSave={streaming ? undefined : onSave}
+        onCancel={streaming ? undefined : onCancel}
+        style={style}
+        dialogContainer={absWrapperRef.current!}
+      />
+      <div
+        className={classNames(
+          'm-[20px] w-[calc(100%-40px)] h-[calc(100%-90px)] relative p-[10px] overflow-x-hidden overflow-y-auto',
+          {
+            'opacity-60': streaming,
+          }
+        )}
+      >
+        {empty ? <PlaceholderDashedBox /> : children}
+      </div>
+      {streaming && (
+        // abs center
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+          <FieldsGeneratingIndicator />
+        </div>
+      )}
+    </>
+  );
+
+  return (
+    <AbsFullscreenGradientBg
+      zIndex={zIndex}
+      padding={p}
+      disableGradient={fullscreen}
+      ref={absWrapperRef}
+    >
+      {fullscreen ? (
+        contentJsx
+      ) : (
+        <BorderColorAnimation width={pr ? `calc(100% - ${pr}px)` : '100%'}>
+          {contentJsx}
+        </BorderColorAnimation>
+      )}
+    </AbsFullscreenGradientBg>
+  );
+};

package/src/components/bs-ui/font-icon.tsx

@@ -0,0 +1,17 @@
+export const FontIcon = ({
+  code,
+  className,
+  style,
+}: {
+  code: string;
+  className?: string;
+  style?: React.CSSProperties;
+}) => {
+  return (
+    <i
+      className={`sdk-icon ${className || ''}`}
+      style={style}
+      dangerouslySetInnerHTML={{ __html: code }}
+    />
+  );
+};