@baishuyun/chat-sdk 0.0.1-alpha.1

package/src/stories/AttachmentsPreviewer.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AttachmentsPreviewer, AttachmentItem } from '@/components/bs-ui/attachments-previewer';
+
+const sampleImages: AttachmentItem[] = [
+  {
+    id: '1',
+    url: 'https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=200&h=200&fit=crop',
+    alt: 'Coffee',
+  },
+  {
+    id: '2',
+    url: 'https://images.unsplash.com/photo-1543466835-00a7907e9de1?w=200&h=200&fit=crop',
+    alt: 'Dog',
+  },
+  {
+    id: '3',
+    url: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=200&h=200&fit=crop',
+    alt: 'Cat',
+  },
+  {
+    id: '4',
+    url: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=200&h=200&fit=crop',
+    alt: 'Coffee cup',
+  },
+  {
+    id: '5',
+    url: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop',
+    alt: 'Portrait',
+  },
+];
+
+const manyImages: AttachmentItem[] = [
+  ...sampleImages,
+  {
+    id: '6',
+    url: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=200&h=200&fit=crop',
+    alt: 'Tech',
+  },
+  {
+    id: '7',
+    url: 'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=200&h=200&fit=crop',
+    alt: 'Japan',
+  },
+  {
+    id: '8',
+    url: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?w=200&h=200&fit=crop',
+    alt: 'Nature',
+  },
+  {
+    id: '9',
+    url: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=200&h=200&fit=crop',
+    alt: 'Fog',
+  },
+  {
+    id: '10',
+    url: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=200&h=200&fit=crop',
+    alt: 'Forest',
+  },
+];
+
+const meta: Meta<typeof AttachmentsPreviewer> = {
+  title: 'Example/Chat/AttachmentsPreviewer',
+  component: AttachmentsPreviewer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {},
+  decorators: [
+    (Story) => (
+      <div style={{ width: 308 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    attachments: sampleImages,
+  },
+};
+
+export const FewImages: Story = {
+  args: {
+    attachments: sampleImages.slice(0, 3),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 220 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const ManyImages: Story = {
+  args: {
+    attachments: manyImages,
+    onImageRemove: (attachment, index) => {
+      alert(`Remove image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 350 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithClickHandler: Story = {
+  args: {
+    attachments: sampleImages,
+    onImageClick: (attachment, index) => {
+      alert(`Clicked image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+};
+
+export const WithRemoveHandler: Story = {
+  args: {
+    attachments: sampleImages,
+    onImageRemove: (attachment, index) => {
+      alert(`Remove image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    attachments: sampleImages,
+    imageSize: 80,
+    gap: 12,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const SmallSize: Story = {
+  args: {
+    attachments: sampleImages,
+    imageSize: 40,
+    gap: 8,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 250 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const SingleImage: Story = {
+  args: {
+    attachments: sampleImages.slice(0, 1),
+  },
+};
+
+export const TwoImages: Story = {
+  args: {
+    attachments: sampleImages.slice(0, 2),
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    attachments: manyImages,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 600 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/stories/BorderColorAnimation.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { BorderColorAnimation } from "@/components/bs-ui/border-color-animation";
+
+const meta = {
+  title: "Example/Animation/BorderColorAnimation",
+  component: BorderColorAnimation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof BorderColorAnimation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    width: '600px',
+    height: '400px',
+  },
+};
+
+export const WithContent: Story = {
+  args: {
+    width: '600px',
+    height: '400px',
+  },
+  render: (args) => (
+    <BorderColorAnimation {...args}>
+      <div style={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        height: '100%',
+        color: '#333',
+      }}>
+        <div style={{ textAlign: 'center' }}>
+          <h2 style={{ margin: '0 0 12px 0' }}>Animated Border</h2>
+          <p style={{ margin: 0 }}>Content inside the animated border frame</p>
+        </div>
+      </div>
+    </BorderColorAnimation>
+  ),
+};
+
+export const SmallSize: Story = {
+  args: {
+    width: '300px',
+    height: '200px',
+  },
+};
+
+export const SquareSize: Story = {
+  args: {
+    width: '400px',
+    height: '400px',
+  },
+};

package/src/stories/BotAvatarAndName.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { BotAvatarAndName } from "@/components/bs-ui/bot-avatar-name";
+
+const meta = {
+  title: "Example/Chat/Bot Avatar And Name",
+  component: BotAvatarAndName,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof BotAvatarAndName>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    name: "AI表单搭建",
+  },
+};

package/src/stories/BotIcon.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { BotIcon } from "@/components/bs-ui/bot-icon";
+
+const meta = {
+  title: "Example/Icons/BotIcon",
+  component: BotIcon,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof BotIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {},
+};

package/src/stories/BsTooltip.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BsTooltip } from '@/components/bs-ui/tooltip';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { IconBtn } from '@/components/bs-ui/icon-btn';
+import { ColorfulEditIcon } from '@/components/bs-ui/bs-icons';
+
+const meta: Meta<typeof BsTooltip> = {
+  title: 'Example/Chat/BsTooltip',
+  component: BsTooltip,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <TooltipProvider delayDuration={100}>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: <IconBtn icon={<ColorfulEditIcon />} />,
+    content: '编辑消息',
+  },
+};

package/src/stories/Card.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Card } from "@/components/bs-ui/card";
+import { UserIcon } from "@/components/bs-ui/bs-icons";
+
+const meta = {
+  title: "Example/Chat/Card",
+  component: Card,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    title: "供应商管理，子表单为产品信息",
+    index: 1,
+    desc: "用于记录和管理企业供应商的基本信息、资质认证、合作状态等，便于采购部门进行供应商评估和选择。",
+    icon: <UserIcon />,
+  },
+};

package/src/stories/ChatAreaHeader.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+// import { Header } from "./Header";
+import { ChatAreaHeader } from "@/components/bs-ui/chat-area-header";
+
+const meta = {
+  title: "Example/Chat/ChatAreaHeader",
+  component: ChatAreaHeader,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof ChatAreaHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    title: "TEST",
+    width: 0,
+  },
+};

package/src/stories/CollapsibleTextMsg.stories.ts

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { CollapsibleTxtMsg } from "@/components/bs-ui/collapsible-txt-msg";
+
+const meta = {
+  title: "Example/Chat/CollapsibleTxtMsg",
+  component: CollapsibleTxtMsg,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof CollapsibleTxtMsg>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    title: "表单分析",
+    content:
+      "一些文字描述，字段分析\n设计说明：表单按供应商管理逻辑设计，先填写供应商基础信息（ID、名称、联系人等），再通过子表单填写关联的产品信息（名称、型号、单价等），最后留备注补充。核心字段均设为必填确保信息完整。？试试下面建议吧！",
+    defaultOpen: true,
+  },
+};
+
+export const Collapsed: Story = {
+  args: {
+    title: "表单分析",
+    content:
+      "一些文字描述，字段分析\n设计说明：表单按供应商管理逻辑设计，先填写供应商基础信息（ID、名称、联系人等），再通过子表单填写关联的产品信息（名称、型号、单价等），最后留备注补充。核心字段均设为必填确保信息完整。？试试下面建议吧！",
+    defaultOpen: false,
+  },
+};
+
+export const ShortContent: Story = {
+  args: {
+    title: "简短说明",
+    content: "这是一个简短的内容示例。",
+    defaultOpen: true,
+  },
+};

package/src/stories/ConfirmDialog.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { ConfirmDialog } from '@/components/bs-ui/confirm-dialog';
+
+const meta = {
+  title: 'Example/Chat/ConfirmDialog',
+  component: ConfirmDialog,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    open: true,
+    title: 'AI表单搭建有修改，是否保存？',
+    description: '您修改了AI表单搭建但没有保存，是否需要保存并继续？',
+  },
+  argTypes: {
+    open: { control: 'boolean' },
+    title: { control: 'text' },
+    description: { control: 'text' },
+    linkText: { control: 'text' },
+    cancelText: { control: 'text' },
+    confirmText: { control: 'text' },
+    showLink: { control: 'boolean' },
+    showCancel: { control: 'boolean' },
+    onLinkClick: { action: 'onLinkClick' },
+    onCancel: { action: 'onCancel' },
+    onConfirm: { action: 'onConfirm' },
+    onOpenChange: { action: 'onOpenChange' },
+  },
+} satisfies Meta<typeof ConfirmDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story matching the Figma design
+export const Default: Story = {
+  args: {
+    open: true,
+    title: 'AI表单搭建有修改，是否保存？',
+    description: '您修改了AI表单搭建但没有保存，是否需要保存并继续？',
+    linkText: '留在此页',
+    cancelText: '不保存',
+    confirmText: '保存并继续',
+  },
+};
+
+// Without link button
+export const WithoutLink: Story = {
+  args: {
+    open: true,
+    title: '确认删除？',
+    description: '删除后将无法恢复，请确认是否继续。',
+    showLink: false,
+    cancelText: '取消',
+    confirmText: '删除',
+  },
+};
+
+// Without cancel button
+export const WithoutCancel: Story = {
+  args: {
+    open: true,
+    title: '操作成功',
+    description: '您的更改已保存。',
+    showLink: false,
+    showCancel: false,
+    confirmText: '确定',
+  },
+};
+
+// Simple confirmation
+export const SimpleConfirm: Story = {
+  args: {
+    open: true,
+    title: '确认退出？',
+    description: '退出后未保存的内容将会丢失。',
+    showLink: false,
+    cancelText: '取消',
+    confirmText: '确认退出',
+  },
+};
+
+// Interactive example with state management
+const InteractiveDialogWrapper = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen(true)}
+        className="px-4 py-2 bg-[#0265ff] text-white rounded cursor-pointer"
+      >
+        打开对话框
+      </button>
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="AI表单搭建有修改，是否保存？"
+        description="您修改了AI表单搭建但没有保存，是否需要保存并继续？"
+        onLinkClick={() => {
+          console.log('Link clicked');
+          setOpen(false);
+        }}
+        onCancel={() => {
+          console.log('Cancel clicked');
+          setOpen(false);
+        }}
+        onConfirm={() => {
+          console.log('Confirm clicked');
+          setOpen(false);
+        }}
+      />
+    </div>
+  );
+};
+
+export const Interactive: Story = {
+  render: () => <InteractiveDialogWrapper />,
+  args: {
+    open: false,
+  },
+};