@baishuyun/ai-design 1.0.0

package/dist/src/stories/TabRadioGroup.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('../components/tab-radio-group').TabRadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const NormalSelected: Story;
+export declare const ThreeOptions: Story;
+export declare const WithCustomWidth: Story;
+export declare const Controlled: Story;
+//# sourceMappingURL=TabRadioGroup.stories.d.ts.map

package/dist/src/stories/TabRadioGroup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabRadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/TabRadioGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAK5D,QAAA,MAAM,IAAI;;;;;;;;CAQ4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAoBF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC"}

package/dist/src/stories/UserTextMsgBubble.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ text, children }: import('../components/user-txt-msg-bubble').UserTextMsgBubbleProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+//# sourceMappingURL=UserTextMsgBubble.stories.d.ts.map

package/dist/src/stories/UserTextMsgBubble.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserTextMsgBubble.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/UserTextMsgBubble.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;;;;;;CAUgC,CAAC;AAE3C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}

package/dist/src/stories/WarningMessage.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ message, className, }: import('../components/warning-msg').WarningMessageProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        message: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+//# sourceMappingURL=WarningMessage.stories.d.ts.map

package/dist/src/stories/WarningMessage.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WarningMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/WarningMessage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;;;;;;;;CAU6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

package/dist/src/stories/fields-design-info-table.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { FieldsDesignInfoTable } from '../components/fields-design-info-table';
+declare const meta: Meta<typeof FieldsDesignInfoTable>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** 基础表格 - 无子表单 */
+export declare const Basic: Story;
+/** 包含子表单 - 可展开/收起 */
+export declare const WithSubForm: Story;
+/** 空数据 */
+export declare const Empty: Story;
+/** 多个子表单 */
+export declare const MultipleSubForms: Story;
+//# sourceMappingURL=fields-design-info-table.stories.d.ts.map

package/dist/src/stories/fields-design-info-table.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fields-design-info-table.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/fields-design-info-table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,qBAAqB,CAcC,CAAC;AAE/C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwFnC,kBAAkB;AAClB,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,qBAAqB;AACrB,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,UAAU;AACV,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,YAAY;AACZ,eAAO,MAAM,gBAAgB,EAAE,KAuE9B,CAAC"}

package/dist/src/stories/fields-generating.stories.d.ts

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ children, loading, }: {
+        children?: React.ReactNode;
+        loading?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const CustomText: Story;
+export declare const LongText: Story;
+export declare const ShortText: Story;
+//# sourceMappingURL=fields-generating.stories.d.ts.map

package/dist/src/stories/fields-generating.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fields-generating.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/fields-generating.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;gBAqC4c,CAAC;eAA4B,CAAC;;;;;;;CA3Blc,CAAC;AAEnD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC"}

package/dist/src/stories/fields-previewer.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('../components/fields-previewer').FieldsPreviewerProps & import('react').RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const WithSideSpace: Story;
+export declare const streaming: Story;
+export declare const Empty: Story;
+export declare const Fullscreen: Story;
+export declare const DataVariant: Story;
+//# sourceMappingURL=fields-previewer.stories.d.ts.map

package/dist/src/stories/fields-previewer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fields-previewer.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/fields-previewer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;;;;;;CAU8B,CAAC;AAEzC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC"}

package/dist/src/types.d.ts

@@ -0,0 +1,8 @@
+export interface FormIconOption {
+    id: string;
+    code: string;
+    label: string;
+    value: number;
+}
+export type LegacySlotRenderer = (container: HTMLElement, props: Record<string, any>) => () => void;
+//# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,kBAAkB,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC"}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@baishuyun/ai-design",
+  "version": "1.0.0",
+  "description": "AI 功能 UI 组件库 - 所有 AI 功能的 UI 表现唯一真相来源",
+  "type": "module",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "style": "src/style.css",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./*": {
+      "types": "./src/components/*.tsx",
+      "import": "./src/components/*.tsx"
+    },
+    "./lib/*": {
+      "types": "./src/lib/*.ts",
+      "import": "./src/lib/*.ts"
+    },
+    "./hooks/*": {
+      "types": "./src/hooks/*.ts",
+      "import": "./src/hooks/*.ts"
+    },
+    "./const/*": {
+      "types": "./src/const/*.ts",
+      "import": "./src/const/*.ts"
+    },
+    "./style.css": "./src/style.css"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "ai": "^5.0.101",
+    "class-variance-authority": "^0.7.1",
+    "marked": "^17.0.1",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.554.0",
+    "react": "^18.2.0",
+    "react-markdown": "^10.1.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.4.0",
+    "@baishuyun/types": "2.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@vitejs/plugin-react": "^5.1.1",
+    "storybook": "^10.1.11",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.5.0",
+    "vite": "^5.1.4",
+    "vite-plugin-dts": "^4.5.4",
+    "@baishuyun/tailwind-config": "2.0.0",
+    "@baishuyun/types": "2.0.0",
+    "@baishuyun/typescript-config": "1.0.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build"
+  }
+}

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

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

package/src/components/agent-scroll-selector.tsx

@@ -0,0 +1,181 @@
+import { useCallback, useState, useRef, useEffect } from 'react';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+import { IconBtn } from './icon-btn';
+import { LeftArrowIcon, MenuLinesIcon } from './bs-icons';
+import { AgentSelect } from './agent-select';
+import type { AgentSelectAgent } from './agent-select';
+import { Popover, PopoverTrigger, PopoverContent } from './ui/popover';
+
+export interface AgentScrollSelectorProps {
+  agents: Array<AgentSelectAgent>;
+  activeAgent?: { id: string } | null;
+  onSelect: (agent: AgentSelectAgent) => void | Promise<void>;
+  className?: string;
+}
+
+export const AgentScrollSelector = ({
+  agents,
+  activeAgent,
+  onSelect,
+  className,
+}: AgentScrollSelectorProps) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+// 用 callback ref，在 DOM attach/detach 时触发
+const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
+  if (!node) {
+    setPortalContainer(null);
+    return;
+  }
+
+  const rootNode = node.getRootNode();
+  if (rootNode instanceof ShadowRoot) {
+    const existing = rootNode.querySelector<HTMLElement>('[data-bs-popover-portal]');
+    if (existing) {
+      setPortalContainer(existing);
+      return;
+    }
+    const container = document.createElement('div');
+    container.setAttribute('data-bs-popover-portal', 'true');
+    rootNode.appendChild(container);
+    setPortalContainer(container);
+  } else {
+    setPortalContainer(null);
+  }
+}, []);
+
+  const checkScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+
+  useEffect(() => {
+    checkScroll();
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver(checkScroll);
+    observer.observe(el);
+    el.addEventListener('scroll', checkScroll, { passive: true });
+    return () => {
+      observer.disconnect();
+      el.removeEventListener('scroll', checkScroll);
+    };
+  }, [agents, checkScroll]);
+
+  const scroll = useCallback((direction: 'left' | 'right') => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollBy({
+      left: direction === 'left' ? -150 : 150,
+      behavior: 'smooth',
+    });
+  }, []);
+
+  const handleSelect = useCallback(
+    (agent: AgentSelectAgent) => {
+      onSelect(agent);
+      setPopoverOpen(false);
+    },
+    [onSelect]
+  );
+
+  return (
+    <div className={cn('flex items-center gap-2.5 w-fit max-w-full min-w-0', className)}>
+      <IconBtn
+        rounded
+        disabled={!canScrollLeft}
+        icon={<LeftArrowIcon />}
+        onClick={() => scroll('left')}
+      />
+
+      <div
+        ref={scrollRef}
+        className="flex-1 overflow-x-auto scrollbar-hide flex gap-[6px] min-w-0"
+      >
+        {agents.map((agent) => {
+          const isActive = activeAgent?.id === agent.id;
+          return (
+            <button
+              key={agent.id}
+              type="button"
+              onClick={() => onSelect(agent)}
+              className={cn(
+                'flex items-center gap-[6px] shrink-0 max-w-[240px]',
+                'px-[10px] py-[7px] rounded-[100px]',
+                transCls,
+                isActive
+                  ? 'border border-[#f0f6ff] bg-[#F0F6FF] text-[#0265FF]'
+                  : 'border border-[#E0E0E0] text-[#121111] hover:bg-[#F0F6FF] hover:text-[#0265FF]'
+              )}
+            >
+              <img
+                src={agent.icon}
+                alt={agent.name}
+                className="h-4 w-4 rounded-[4px] object-cover shrink-0"
+              />
+              <span className="text-[14px] leading-[normal] truncate">
+                {agent.name}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      <IconBtn
+        rounded
+        disabled={!canScrollRight}
+        icon={
+          <span className="rotate-180 inline-flex">
+            <LeftArrowIcon />
+          </span>
+        }
+        onClick={() => scroll('right')}
+      />
+
+      {agents.length > 0 && (
+        <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+          <PopoverTrigger asChild>
+            <button
+              ref={setTriggerRef}
+              type="button"
+              className={cn(
+                'flex items-center gap-[6px] shrink-0 h-[34px]',
+                'px-[10px] py-[5px] rounded-[4px]',
+                'text-[14px] text-[#121111] leading-[normal]',
+                'hover:bg-[#EFF0F6]',
+                {
+                  'bg-[#eff0f6]': popoverOpen,
+                },
+                transCls
+              )}
+            >
+              <MenuLinesIcon />
+              <span>全部</span>
+            </button>
+          </PopoverTrigger>
+          <PopoverContent
+            align="end"
+            sideOffset={4}
+            portalContainer={portalContainer}
+          >
+            <AgentSelect
+              agents={agents}
+              showSearch
+              activeAgent={activeAgent}
+              onSelect={handleSelect}
+            />
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
+  );
+};

package/src/components/agent-select.tsx

@@ -0,0 +1,149 @@
+import { useMemo, useState, useCallback } from 'react';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+
+export interface AgentSelectAgent {
+  id: string;
+  name: string;
+  icon: string;
+  builtIn?: boolean;
+}
+
+export interface AgentSelectProps {
+  agents: Array<AgentSelectAgent>;
+  showSearch?: boolean;
+  activeAgent?: { id: string } | null;
+  onSelect: (agent: AgentSelectAgent) => void | Promise<void>;
+}
+
+interface AgentGroup {
+  label: string;
+  agents: Array<AgentSelectAgent>;
+}
+
+export const AgentSelect = ({
+  agents,
+  showSearch = false,
+  activeAgent,
+  onSelect,
+}: AgentSelectProps) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const groups = useMemo<AgentGroup[]>(() => {
+    const systemAgents = agents.filter((a) => a.builtIn);
+    const customAgents = agents.filter((a) => !a.builtIn);
+    return [
+      { label: '系统智能体', agents: systemAgents },
+      { label: '自定义智能体', agents: customAgents },
+    ]
+      .map((g) => ({
+        ...g,
+        agents: g.agents.filter((a) =>
+          a.name.toLowerCase().includes(searchQuery.toLowerCase())
+        ),
+      }))
+      .filter((g) => g.agents.length > 0);
+  }, [agents, searchQuery]);
+
+  const handleSelect = useCallback(
+    (agent: AgentSelectAgent) => {
+      onSelect(agent);
+    },
+    [onSelect]
+  );
+
+  return (
+    <div className="flex flex-col">
+      {showSearch && (
+        <div className="px-1.5 pt-1 pb-0.5">
+          <div className="flex h-7.5 items-center gap-1.5 rounded-[4px] bg-white px-2.5 py-1.25 border border-[#E0E0E0]">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="shrink-0 text-[#999999]"
+            >
+              <path
+                d="M6.41667 11.0833C8.994 11.0833 11.0833 8.994 11.0833 6.41667C11.0833 3.83934 8.994 1.75 6.41667 1.75C3.83934 1.75 1.75 3.83934 1.75 6.41667C1.75 8.994 3.83934 11.0833 6.41667 11.0833Z"
+                stroke="currentColor"
+                strokeWidth="1.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M12.25 12.25L9.7125 9.7125"
+                stroke="currentColor"
+                strokeWidth="1.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <input
+              type="text"
+              placeholder="搜索智能体"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="h-full flex-1 bg-transparent text-[12px] text-[#121111] placeholder:text-[#999999] outline-none"
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="max-h-80 overflow-y-auto scrollbar-hide">
+        {groups.map((group, groupIndex) => (
+          <div key={group.label}>
+            <div
+              className={cn(
+                'flex h-8 items-start px-2.5 pt-2.25',
+                groupIndex > 0 && 'mt-0.5'
+              )}
+            >
+              <div className="flex w-full flex-col gap-1.5">
+                <span className="text-[12px] font-medium text-[#666666] leading-4.25">
+                  {group.label}
+                </span>
+                <div className="h-0 w-full border-b border-[#E0E0E0]" />
+              </div>
+            </div>
+
+            <div className="px-1">
+              {group.agents.map((agent) => {
+                const isActive = activeAgent?.id === agent.id;
+                return (
+                  <button
+                    key={agent.id}
+                    className={cn(
+                      'flex h-8 w-full cursor-pointer items-center gap-1.5 rounded-[4px] px-2.5 py-1.5 text-left',
+                      transCls,
+                      isActive
+                        ? 'bg-[#F0F6FF] text-[#0265FF]'
+                        : 'text-[#121111] hover:bg-[#EFF0F6]'
+                    )}
+                    onClick={() => handleSelect(agent)}
+                  >
+                    <img
+                      src={agent.icon}
+                      alt={agent.name}
+                      className="h-4 w-4 rounded-[4px] object-cover shrink-0"
+                    />
+                    <span className="truncate text-[14px] leading-5">
+                      {agent.name}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+
+        {groups.length === 0 && (
+          <div className="flex h-15 items-center justify-center text-[12px] text-[#999999]">
+            未找到相关智能体
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/attachment-part-group.tsx

@@ -0,0 +1,35 @@
+import { cn } from '../lib/utils';
+import { AttachmentPart, FilePart } from './attachment-part';
+import { FileUIPart } from 'ai';
+
+export interface AttachmentPartGroupProps {
+  parts: FileUIPart[];
+  className?: string;
+  /** Size in pixels for each item, defaults to 102 */
+  size?: number;
+  /** Gap between items in pixels, defaults to 10 */
+  gap?: number;
+  /** Show only icons without file names */
+  iconOnly?: boolean;
+  /** Click handler for individual parts */
+  onPartClick?: (part: FilePart) => void;
+}
+
+export const AttachmentPartGroup = ({
+  parts,
+  className,
+  size = 100,
+  gap = 10,
+  iconOnly,
+  onPartClick,
+}: AttachmentPartGroupProps) => {
+  if (!parts.length) return null;
+
+  return (
+    <div className={cn('flex flex-wrap content-center items-center', className)} style={{ gap }}>
+      {parts.map((part, index) => (
+        <AttachmentPart key={part.url || index} part={part} size={size} iconOnly={iconOnly} onClick={onPartClick} />
+      ))}
+    </div>
+  );
+};