@baishuyun/ai-design 1.0.0

package/src/stories/AgentScrollSelector.stories.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AgentScrollSelector } from '../components/agent-scroll-selector';
+import type { AgentSelectAgent } from '../components/agent-select';
+
+const mockAgents: AgentSelectAgent[] = [
+  { id: '1', name: 'AI助手', icon: 'https://picsum.photos/32/32?random=1', builtIn: true },
+  { id: '2', name: '代码助手', icon: 'https://picsum.photos/32/32?random=2', builtIn: true },
+  { id: '3', name: '翻译专家', icon: 'https://picsum.photos/32/32?random=3', builtIn: false },
+  { id: '4', name: '文档写手', icon: 'https://picsum.photos/32/32?random=4', builtIn: false },
+];
+
+const manyAgents: AgentSelectAgent[] = [
+  { id: '1', name: 'AI助手', icon: 'https://picsum.photos/32/32?random=1', builtIn: true },
+  { id: '2', name: '代码助手', icon: 'https://picsum.photos/32/32?random=2', builtIn: true },
+  { id: '3', name: '翻译专家翻译专家', icon: 'https://picsum.photos/32/32?random=3', builtIn: false },
+  { id: '4', name: '文档写手', icon: 'https://picsum.photos/32/32?random=4', builtIn: false },
+  { id: '5', name: 'AI表单搭建', icon: 'https://picsum.photos/32/32?random=5', builtIn: true },
+  { id: '6', name: '数据分析', icon: 'https://picsum.photos/32/32?random=6', builtIn: false },
+  { id: '7', name: 'AI填写', icon: 'https://picsum.photos/32/32?random=7', builtIn: true },
+  { id: '8', name: '智能搜索', icon: 'https://picsum.photos/32/32?random=8', builtIn: false },
+];
+
+const meta: Meta<typeof AgentScrollSelector> = {
+  title: 'AI Office/AgentScrollSelector',
+  component: AgentScrollSelector,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {
+    agents: mockAgents,
+    onSelect: () => {},
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 600, padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithActiveAgent: Story = {
+  args: {
+    activeAgent: { id: '2' },
+  },
+};
+
+export const ManyAgents: Story = {
+  args: {
+    agents: manyAgents,
+    activeAgent: { id: '5' },
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    agents: [],
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [selected, setSelected] = useState<AgentSelectAgent | null>(null);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <AgentScrollSelector
+          {...args}
+          onSelect={(agent) => setSelected(agent)}
+          activeAgent={selected}
+        />
+        {selected && (
+          <div
+            style={{
+              padding: 12,
+              background: '#F5F7FA',
+              borderRadius: 8,
+              fontSize: 14,
+            }}
+          >
+            <strong>已选择:</strong> {selected.name}
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: {
+    agents: manyAgents,
+  },
+};

package/src/stories/AgentSelect.stories.tsx

@@ -0,0 +1,134 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AgentSelect } from '../components/agent-select';
+import type { AgentSelectAgent } from '../components/agent-select';
+
+const mockAgents: AgentSelectAgent[] = [
+  {
+    id: '1',
+    name: 'AI助手',
+    icon: 'https://picsum.photos/32/32?random=1',
+    builtIn: true,
+  },
+  {
+    id: '2',
+    name: '代码助手',
+    icon: 'https://picsum.photos/32/32?random=2',
+    builtIn: true,
+  },
+  {
+    id: '3',
+    name: '翻译专家',
+    icon: 'https://picsum.photos/32/32?random=3',
+    builtIn: false,
+  },
+  {
+    id: '4',
+    name: '文档写手',
+    icon: 'https://picsum.photos/32/32?random=4',
+    builtIn: false,
+  },
+];
+
+const onlySystemAgents: AgentSelectAgent[] = [
+  { id: '1', name: 'AI助手', icon: 'https://picsum.photos/32/32?random=1', builtIn: true },
+  { id: '2', name: '代码助手', icon: 'https://picsum.photos/32/32?random=2', builtIn: true },
+];
+
+const onlyCustomAgents: AgentSelectAgent[] = [
+  { id: '3', name: '翻译专家', icon: 'https://picsum.photos/32/32?random=3', builtIn: false },
+  { id: '4', name: '文档写手', icon: 'https://picsum.photos/32/32?random=4', builtIn: false },
+];
+
+const meta: Meta<typeof AgentSelect> = {
+  title: 'AI Office/AgentSelect',
+  component: AgentSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {
+    agents: mockAgents,
+    onSelect: () => {},
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 280, padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithSearch: Story = {
+  args: {
+    showSearch: true,
+  },
+};
+
+export const WithActiveAgent: Story = {
+  args: {
+    activeAgent: { id: '2' },
+  },
+};
+
+export const WithSearchAndActiveAgent: Story = {
+  args: {
+    showSearch: true,
+    activeAgent: { id: '1' },
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    agents: [],
+    showSearch: true,
+  },
+};
+
+export const OnlySystemAgents: Story = {
+  args: {
+    agents: onlySystemAgents,
+  },
+};
+
+export const OnlyCustomAgents: Story = {
+  args: {
+    agents: onlyCustomAgents,
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [selected, setSelected] = useState<AgentSelectAgent | null>(null);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <AgentSelect
+          {...args}
+          onSelect={(agent) => setSelected(agent)}
+          activeAgent={selected}
+          showSearch={true}
+        />
+        {selected && (
+          <div
+            style={{
+              padding: 12,
+              background: '#F5F7FA',
+              borderRadius: 8,
+              fontSize: 14,
+            }}
+          >
+            <strong>已选择:</strong> {selected.name}
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: {
+    agents: mockAgents,
+  },
+};

package/src/stories/AttachmentPart.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AttachmentPart, FilePart } from '../components/attachment-part';
+
+const meta = {
+  title: 'Example/Chat/AttachmentPart',
+  component: AttachmentPart,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof AttachmentPart>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const imagePart: FilePart = {
+  type: 'file',
+  url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
+  name: 'mountain.jpg',
+  mediaType: 'image/jpeg',
+};
+
+const excelPart: FilePart = {
+  type: 'file',
+  url: 'http://example.com/test.xlsx',
+  name: 'bot_files/uuid/test excel upload.xlsx',
+  mediaType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+};
+
+const csvPart: FilePart = {
+  type: 'file',
+  url: 'http://example.com/data.csv',
+  name: 'data.csv',
+  mediaType: 'text/csv',
+};
+
+const txtPart: FilePart = {
+  type: 'file',
+  url: 'http://example.com/readme.txt',
+  name: 'readme.txt',
+  mediaType: 'text/plain',
+};
+
+const tsPart: FilePart = {
+  type: 'file',
+  url: 'http://example.com/useFormChat.ts',
+  name: 'bot_files/uuid/useFormChat_Version3.ts',
+  mediaType: 'application/octet-stream',
+};
+
+const unknownPart: FilePart = {
+  type: 'file',
+  url: 'http://example.com/unknown.bin',
+  name: 'unknown.bin',
+  mediaType: 'application/x-unknown',
+};
+
+export const Image: Story = {
+  args: {
+    part: imagePart,
+  },
+};
+
+export const Excel: Story = {
+  args: {
+    part: excelPart,
+  },
+};
+
+export const CSV: Story = {
+  args: {
+    part: csvPart,
+  },
+};
+
+export const TXT: Story = {
+  args: {
+    part: txtPart,
+  },
+};
+
+export const TypeScript: Story = {
+  args: {
+    part: tsPart,
+  },
+};
+
+export const Unknown: Story = {
+  args: {
+    part: unknownPart,
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    part: excelPart,
+    size: 150,
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    part: csvPart,
+    size: 64,
+    iconOnly: true,
+  },
+};
+
+export const AllTypes = {
+  render: () => (
+    <div className="flex gap-4 flex-wrap">
+      <AttachmentPart part={imagePart} />
+      <AttachmentPart part={excelPart} />
+      <AttachmentPart part={csvPart} />
+      <AttachmentPart part={txtPart} />
+      <AttachmentPart part={tsPart} />
+      <AttachmentPart part={unknownPart} />
+    </div>
+  ),
+};

package/src/stories/AttachmentPartGroup.stories.tsx

@@ -0,0 +1,152 @@
+// @ts-nocheck
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AttachmentPartGroup } from '../components/attachment-part-group';
+import { FilePart } from '../components/attachment-part';
+
+const meta = {
+  title: 'Example/Chat/AttachmentPartGroup',
+  component: AttachmentPartGroup,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof AttachmentPartGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const imageParts: FilePart[] = [
+  {
+    type: 'file',
+    url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
+    name: 'mountain1.jpg',
+    mediaType: 'image/jpeg',
+  },
+  {
+    type: 'file',
+    url: 'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=400',
+    name: 'mountain2.jpg',
+    mediaType: 'image/jpeg',
+  },
+  {
+    type: 'file',
+    url: 'https://images.unsplash.com/photo-1454496522488-7a8e488e8606?w=400',
+    name: 'mountain3.jpg',
+    mediaType: 'image/jpeg',
+  },
+];
+
+const mixedParts: FilePart[] = [
+  {
+    type: 'file',
+    url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
+    name: 'photo1.jpg',
+    mediaType: 'image/jpeg',
+  },
+  {
+    type: 'file',
+    url: 'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=400',
+    name: 'photo2.jpg',
+    mediaType: 'image/jpeg',
+  },
+  {
+    type: 'file',
+    url: 'https://images.unsplash.com/photo-1454496522488-7a8e488e8606?w=400',
+    name: 'photo3.jpg',
+    mediaType: 'image/jpeg',
+  },
+  {
+    type: 'file',
+    url: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=400',
+    name: 'photo4.jpg',
+    mediaType: 'image/jpeg',
+  },
+  {
+    type: 'file',
+    url: 'https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?w=400',
+    name: 'photo5.jpg',
+    mediaType: 'image/jpeg',
+  },
+  {
+    type: 'file',
+    url: 'http://example.com/test.xlsx',
+    name: '生产小工单.excel',
+    mediaType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  },
+];
+
+const fileParts: FilePart[] = [
+  {
+    type: 'file',
+    url: 'http://example.com/report.xlsx',
+    name: 'report.xlsx',
+    mediaType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  },
+  {
+    type: 'file',
+    url: 'http://example.com/data.csv',
+    name: 'data.csv',
+    mediaType: 'text/csv',
+  },
+  {
+    type: 'file',
+    url: 'http://example.com/readme.txt',
+    name: 'readme.txt',
+    mediaType: 'text/plain',
+  },
+  {
+    type: 'file',
+    url: 'http://example.com/unknown.bin',
+    name: 'unknown.bin',
+    mediaType: 'application/x-unknown',
+  },
+];
+
+export const ImagesOnly: Story = {
+  args: {
+    parts: imageParts,
+  },
+};
+
+export const MixedContent: Story = {
+  args: {
+    parts: mixedParts,
+  },
+};
+
+export const FilesOnly: Story = {
+  args: {
+    parts: fileParts,
+  },
+};
+
+export const IconOnly: Story = {
+  args: {
+    parts: fileParts,
+    iconOnly: true,
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    parts: mixedParts,
+    size: 80,
+  },
+};
+
+export const LargeGap: Story = {
+  args: {
+    parts: mixedParts,
+    gap: 20,
+  },
+};
+
+export const ConstrainedWidth = {
+  render: () => (
+    <div style={{ width: 330 }}>
+      <AttachmentPartGroup parts={mixedParts} />
+    </div>
+  ),
+};