@baishuyun/chat-sdk 0.0.1-alpha.1

package/src/components/biz-comp/multi-modal-input/preview-attachment.tsx

@@ -0,0 +1,72 @@
+import type { Attachment } from '@baishuyun/types';
+import { Button } from '@/components/ui/button';
+import { CrossSmallIcon, FileIcon, LoaderIcon } from '@/components/ui/icons';
+import { cn } from '@/lib/utils';
+import { HTMLAttributes } from 'react';
+
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+  size?: number;
+};
+
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+  <div className={cn('inline-flex animate-spin items-center justify-center', className)} {...props}>
+    <LoaderIcon size={size} />
+  </div>
+);
+
+export const PreviewAttachment = ({
+  attachment,
+  isUploading = false,
+  onRemove,
+}: {
+  attachment: Attachment;
+  isUploading?: boolean;
+  onRemove?: () => void;
+}) => {
+  const { name, url, contentType } = attachment;
+
+  return (
+    <div
+      className="group relative size-16 overflow-hidden rounded-lg border bg-muted"
+      data-testid="input-attachment-preview"
+    >
+      {contentType?.startsWith('image') ? (
+        <img
+          alt={name ?? 'An image attachment'}
+          className="size-full object-cover"
+          height={64}
+          src={url}
+          width={64}
+        />
+      ) : (
+        <div className="flex size-full items-center justify-center text-muted-foreground text-xs">
+          <FileIcon size={24} />
+        </div>
+      )}
+
+      {isUploading && (
+        <div
+          className="absolute inset-0 flex items-center justify-center bg-black/50"
+          data-testid="input-attachment-loader"
+        >
+          <Loader size={16} />
+        </div>
+      )}
+
+      {onRemove && !isUploading && (
+        <Button
+          className="absolute top-0.5 right-0.5 size-4 rounded-full p-0 opacity-0 transition-opacity group-hover:opacity-100"
+          onClick={onRemove}
+          size="sm"
+          variant="destructive"
+        >
+          <CrossSmallIcon size={8} />
+        </Button>
+      )}
+
+      <div className="absolute inset-x-0 bottom-0 truncate bg-linear-to-t from-black/80 to-transparent px-1 py-0.5 text-[10px]">
+        {name}
+      </div>
+    </div>
+  );
+};

package/src/components/biz-comp/multi-modal-input/prompt-input.tsx

@@ -0,0 +1,260 @@
+import * as react from "react";
+import type { ChatStatus } from "ai";
+import {
+  Loader2Icon,
+  LucideProps,
+  SendIcon,
+  XIcon,
+} from "lucide-react";
+import type {
+  ComponentProps,
+  HTMLAttributes,
+  KeyboardEventHandler,
+} from "react";
+import { Children } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import { StopIcon } from "@/components/bs-ui/bs-icons";
+
+export type PromptInputProps = HTMLAttributes<HTMLFormElement>;
+
+export const PromptInput = ({ className, ...props }: PromptInputProps) => (
+  <form
+    className={cn(
+      "w-full overflow-hidden rounded-[10px] border bg-background shadow-xs",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type PromptInputTextareaProps = ComponentProps<typeof Textarea> & {
+  minHeight?: number;
+  maxHeight?: number;
+  disableAutoResize?: boolean;
+  resizeOnNewLinesOnly?: boolean;
+};
+
+export const PromptInputTextarea = ({
+  onChange,
+  className,
+  placeholder = "What would you like to know?",
+  minHeight = 50,
+  maxHeight = 164,
+  disableAutoResize = false,
+  resizeOnNewLinesOnly = false,
+  ...props
+}: PromptInputTextareaProps) => {
+  const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
+    if (e.key === "Enter") {
+      // Don't submit if IME composition is in progress
+      if (e.nativeEvent.isComposing) {
+        return;
+      }
+
+      if (e.shiftKey) {
+        // Allow newline
+        return;
+      }
+
+      // Submit on Enter (without Shift)
+      e.preventDefault();
+      const form = e.currentTarget.form;
+      if (form) {
+        form.requestSubmit();
+      }
+    }
+  };
+
+  return (
+    <Textarea
+      className={cn(
+        "w-full resize-none rounded-none border-none shadow-none outline-hidden ring-0",
+        disableAutoResize
+          ? "field-sizing-fixed"
+          : resizeOnNewLinesOnly
+            ? "field-sizing-fixed"
+            : "field-sizing-content max-h-[6lh]",
+        "bg-transparent dark:bg-transparent",
+        "focus-visible:ring-0",
+        className,
+      )}
+      name="message"
+      onChange={(e) => {
+        onChange?.(e);
+      }}
+      onKeyDown={handleKeyDown}
+      placeholder={placeholder}
+      {...props}
+    />
+  );
+};
+
+export type PromptInputToolbarProps = HTMLAttributes<HTMLDivElement>;
+
+export const PromptInputToolbar = ({
+  className,
+  ...props
+}: PromptInputToolbarProps) => (
+  <div
+    className={cn("flex items-center justify-between p-1", className)}
+    {...props}
+  />
+);
+
+export type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;
+
+export const PromptInputTools = ({
+  className,
+  ...props
+}: PromptInputToolsProps) => (
+  <div
+    className={cn(
+      "flex items-center gap-1",
+      "[&_button:first-child]:rounded-bl-xl",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type PromptInputButtonProps = ComponentProps<typeof Button>;
+
+export const PromptInputButton = ({
+  variant = "ghost",
+  className,
+  size,
+  ...props
+}: PromptInputButtonProps) => {
+  const newSize =
+    (size ?? Children.count(props.children) > 1) ? "default" : "icon";
+
+  return (
+    <Button
+      className={cn(
+        "shrink-0 gap-1.5 rounded-lg",
+        variant === "ghost" && "text-muted-foreground",
+        newSize === "default" && "px-3",
+        className,
+      )}
+      size={newSize}
+      type="button"
+      variant={variant}
+      {...props}
+    />
+  );
+};
+
+export type PromptInputSubmitProps = ComponentProps<typeof Button> & {
+  status?: ChatStatus;
+};
+
+type CompatibleLucideComponent = react.ForwardRefExoticComponent<
+  Omit<LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>
+>;
+
+const getIconForStatus = (status?: ChatStatus) => {
+  const Loader = Loader2Icon as unknown as CompatibleLucideComponent;
+  const X = XIcon as unknown as CompatibleLucideComponent;
+  const Send = SendIcon as unknown as CompatibleLucideComponent;
+
+  if (status === undefined) {
+    return <Send className="size-4" />;
+  }
+
+  const StatusIconMap: Record<ChatStatus, react.ReactNode> = {
+    submitted: <Loader className="size-4 animate-spin" />,
+    streaming: <StopIcon />,
+    error: <X className="size-4" />,
+    ready: <Send className="size-4" />,
+  };
+
+  return StatusIconMap[status!] || <Send className="size-4" />;
+};
+
+export const PromptInputSubmit = ({
+  className,
+  variant = "default",
+  size = "icon",
+  status,
+  children,
+  ...props
+}: PromptInputSubmitProps) => {
+  let Icon = getIconForStatus(status);
+
+  return (
+    <Button
+      className={cn("gap-1.5 rounded-full", className)}
+      size={size}
+      type="submit"
+      variant={variant}
+      {...props}
+    >
+      {children ?? Icon}
+    </Button>
+  );
+};
+
+export type PromptInputModelSelectProps = ComponentProps<typeof Select>;
+
+export const PromptInputModelSelect = (props: PromptInputModelSelectProps) => (
+  <Select {...props} />
+);
+
+export type PromptInputModelSelectTriggerProps = ComponentProps<
+  typeof SelectTrigger
+>;
+
+export const PromptInputModelSelectTrigger = ({
+  className,
+  ...props
+}: PromptInputModelSelectTriggerProps) => (
+  <SelectTrigger
+    className={cn(
+      "border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors",
+      "hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground",
+      "h-auto px-2 py-1.5",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type PromptInputModelSelectContentProps = ComponentProps<
+  typeof SelectContent
+>;
+
+export const PromptInputModelSelectContent = ({
+  className,
+  ...props
+}: PromptInputModelSelectContentProps) => (
+  <SelectContent className={cn(className)} {...props} />
+);
+
+export type PromptInputModelSelectItemProps = ComponentProps<typeof SelectItem>;
+
+export const PromptInputModelSelectItem = ({
+  className,
+  ...props
+}: PromptInputModelSelectItemProps) => (
+  <SelectItem className={cn(className)} {...props} />
+);
+
+export type PromptInputModelSelectValueProps = ComponentProps<
+  typeof SelectValue
+>;
+
+export const PromptInputModelSelectValue = ({
+  className,
+  ...props
+}: PromptInputModelSelectValueProps) => (
+  <SelectValue className={cn(className)} {...props} />
+);

package/src/components/biz-comp/opening-lines.tsx

@@ -0,0 +1,34 @@
+import { usePluginComponent } from "@/hooks/use-plugin-component";
+import { Suggestions } from "./suggestions";
+import { OpeningLinesProps } from "@baishuyun/types";
+
+export const OpeningLines = ({ sendMessage }: OpeningLinesProps) => {
+  const PluginCom = usePluginComponent(
+    "OpeningLines",
+  ) as React.ComponentType<OpeningLinesProps>;
+
+  if (PluginCom) {
+    return <PluginCom sendMessage={sendMessage} />;
+  }
+
+  return (
+    <>
+      请问可以帮你创建什么表单？试试下面的建议吧！
+      <Suggestions
+        onSelect={(title) => {
+          sendMessage(
+            {
+              text: title,
+            },
+            {
+              body: {
+                stage: "design",
+                name: title,
+              },
+            },
+          );
+        }}
+      />
+    </>
+  );
+};

package/src/components/biz-comp/preview-message-wrapper.tsx

@@ -0,0 +1,55 @@
+import { cn } from '@/lib/utils';
+import { MsgSenderRole } from '@baishuyun/types';
+import { BotAvatarAndName } from '../bs-ui/bot-avatar-name';
+import { GenerateAnimation } from '../bs-ui/generate-animation';
+import { useDefaultPluginCustomComponent } from '@/hooks/use-plugin-custom-components';
+import { ComponentType } from 'react';
+
+export const PreviewMessageWrapper = ({
+  role,
+  requiresScrollPadding,
+  hasTextPart,
+  children,
+  isLoading,
+}: {
+  role: MsgSenderRole;
+  requiresScrollPadding?: boolean;
+  hasTextPart?: boolean;
+  children: React.ReactNode;
+  isLoading?: boolean;
+}) => {
+  const isBot = role === 'assistant';
+  const isUser = role === 'user';
+
+  const avatarComInfo = useDefaultPluginCustomComponent('AvatarAndName');
+  const Avatar: ComponentType<{ variant?: 'default' | 'active' }> | undefined =
+    avatarComInfo?.Component;
+  const avatarJsx = Avatar ? <Avatar /> : <BotAvatarAndName name={'AI表单搭建'} />;
+
+  return (
+    <div className="group/message w-full" data-role={role} data-testid={`message-${role}`}>
+      <div
+        className={cn('flex w-full justify-start flex-col gap-2.5', {
+          'items-end': role === 'user',
+          'items-start': role === 'assistant',
+        })}
+      >
+        {role === 'assistant' && avatarJsx}
+
+        <div
+          className={cn('flex flex-col min-w-0', {
+            'gap-2 md:gap-4': hasTextPart,
+            grow: isBot,
+            'min-h-96': isBot && requiresScrollPadding,
+            'w-full': isBot && hasTextPart,
+            'max-w-[calc(100%-2.5rem)] sm:max-w-[min(fit-content,80%)]': isUser,
+          })}
+        >
+          {children}
+
+          {isLoading && <GenerateAnimation />}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/biz-comp/preview-message.tsx

@@ -0,0 +1,91 @@
+"use client";
+import equal from "fast-deep-equal";
+import { memo } from "react";
+import type {
+  ChatMessage,
+  MsgPartCompProps,
+  UseChatHelpers,
+} from "@baishuyun/types";
+import { PreviewMessageWrapper } from "./preview-message-wrapper";
+import { usePluginCustomComponents } from "@/hooks/use-plugin-custom-components";
+import { MarkdownMsgpart } from "./markdown-part";
+import { usePluginLifeCycleChainRunner } from "@/hooks/use-plugin-life-cycle-chain-runner";
+import { UIDataTypes, UIMessagePart, UITools } from "ai";
+
+const PurePreviewMessage = ({
+  message,
+  isLoading,
+  addToolOutput,
+  sendMessage,
+  requiresScrollPadding,
+}: {
+  message: ChatMessage;
+  isLoading?: boolean;
+  setMessages: UseChatHelpers<ChatMessage>["setMessages"];
+  sendMessage: UseChatHelpers<ChatMessage>["sendMessage"];
+  addToolOutput: UseChatHelpers<ChatMessage>["addToolOutput"];
+  isReadonly?: boolean;
+  requiresScrollPadding?: boolean;
+}) => {
+  const hasTextPart = message.parts?.some(
+    (p: { type: string; text?: string }) => p.type === "text" && p.text?.trim(),
+  );
+
+  const MsgPartComps = usePluginCustomComponents("MessagePart");
+  const targetComConfig = MsgPartComps[0];
+  const MsgPartCom = (
+    MsgPartComps.length > 0 ? targetComConfig.Component : MarkdownMsgpart
+  ) as React.ComponentType<MsgPartCompProps>;
+
+  const { exec: onBeforePartsRender = (p) => p } =
+    usePluginLifeCycleChainRunner("onBeforeMessagePartsRender");
+
+  const parts = onBeforePartsRender(message.parts);
+
+  return (
+    <PreviewMessageWrapper
+      role={message.role}
+      isLoading={isLoading}
+      requiresScrollPadding={requiresScrollPadding}
+      hasTextPart={hasTextPart}
+    >
+      {parts?.map(
+        (part: UIMessagePart<UIDataTypes, UITools>, index: number) => {
+          const key = `message-${message.id}-part-${index}-${part.type}`;
+
+          return (
+            <MsgPartCom
+              sendMessage={sendMessage}
+              addToolOutput={addToolOutput}
+              part={part}
+              index={index}
+              key={key}
+              role={message.role}
+              id={message.id}
+            />
+          );
+        },
+      )}
+    </PreviewMessageWrapper>
+  );
+};
+
+export const PreviewMessage = memo(
+  PurePreviewMessage,
+  (prevProps, nextProps) => {
+    if (prevProps.isLoading !== nextProps.isLoading) {
+      return false;
+    }
+    if (prevProps.message.id !== nextProps.message.id) {
+      return false;
+    }
+    if (prevProps.requiresScrollPadding !== nextProps.requiresScrollPadding) {
+      return false;
+    }
+    if (!equal(prevProps.message.parts, nextProps.message.parts)) {
+      return false;
+    }
+
+    return false;
+  },
+);

package/src/components/biz-comp/response.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { type ComponentProps, memo } from "react";
+// @ts-ignore
+import { Streamdown } from "streamdown";
+import cn from "classnames";
+
+type ResponseProps = ComponentProps<typeof Streamdown>;
+
+export const Response = memo(
+  ({ className, ...props }: ResponseProps) => (
+    <Streamdown
+      className={cn(
+        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_code]:whitespace-pre-wrap [&_code]:wrap-break-words [&_pre]:max-w-full [&_pre]:overflow-x-auto",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children,
+);
+
+Response.displayName = "Response";

package/src/components/biz-comp/suggestions.tsx

@@ -0,0 +1,78 @@
+import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import { Card as BsCard } from '../bs-ui/card';
+import { ISuggestion, SuggestionCardProps } from '@baishuyun/types';
+import { BagIcon, BuildingIcon, UserIcon } from '../bs-ui/bs-icons';
+
+export const SuggestionCard = ({
+  title,
+  description,
+  onSelect,
+  headless,
+  classNames,
+}: SuggestionCardProps) => {
+  return (
+    <Card
+      className={cn('w-full max-w-sm cursor-pointer hover:shadow-md transition-shadow', classNames)}
+      onClick={() => {
+        if (onSelect) {
+          onSelect?.(title);
+        }
+      }}
+    >
+      <CardHeader>
+        {headless ? null : <CardTitle>{title}</CardTitle>}
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+    </Card>
+  );
+};
+
+const defaultSuggestions: ISuggestion[] = [
+  {
+    icon: <UserIcon />,
+    title: '供应商管理，子表单为产品信息',
+    description:
+      '用于记录和管理企业供应商的基本信息、资质认证、合作状态等，便于采购部门进行供应商评估和选择。',
+  },
+  {
+    icon: <BagIcon />,
+    title: '搭建订单表',
+    description:
+      '子表单为商品列表（包含：商品ID、商品名称、商品供应商为关联数据字段、商品原价、商品销售价、商品型号为关联查询字段）',
+  },
+  {
+    title: '供应商管理，产品信息为数据加载字段',
+    description:
+      '用于记录和管理企业供应商的基本信息、资质认证、合作状态等，便于采购部门进行供应商评估和选择。',
+  },
+  {
+    icon: <BuildingIcon />,
+    title: '创建合同表关联供应商信息管理表',
+    description:
+      '创建合同表用于记录与供应商签订的合同信息，并与供应商信息管理表进行关联，方便查询和管理合同相关的供应商信息。',
+  },
+];
+
+export const Suggestions = ({
+  items = defaultSuggestions,
+  onSelect,
+}: {
+  items?: ISuggestion[];
+  onSelect?: (title: string) => void;
+}) => {
+  return (
+    <>
+      {items.map((item, index) => (
+        <BsCard
+          icon={item.icon}
+          index={index + 1}
+          key={index}
+          title={item.title}
+          desc={item.description}
+          onClick={onSelect}
+        />
+      ))}
+    </>
+  );
+};

package/src/components/bs-ui/abs-fullscreen-gradient-bg.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react';
+
+export interface AbsFullscreenGradientBgProps {
+  children?: React.ReactNode;
+  zIndex: number;
+  padding?: number;
+  disableGradient?: boolean;
+}
+
+export const AbsFullscreenGradientBg = forwardRef<HTMLDivElement, AbsFullscreenGradientBgProps>(
+  ({ children, zIndex, padding, disableGradient }, ref) => {
+    return (
+      <div
+        ref={ref}
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          background: disableGradient
+            ? '#fff'
+            : 'linear-gradient(180deg, #DBE9FF 0%, #E9FFFD 100%)',
+          padding: padding || 0,
+          zIndex,
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+AbsFullscreenGradientBg.displayName = 'AbsFullscreenGradientBg';