@baishuyun/ai-design 2.1.0-alpha.4 → 2.1.0

package/.storybook/preview.ts

@@ -1,6 +1,8 @@
 import type { Preview } from "@storybook/react-vite";
 
 import "../src/style.css";
+// 加载 iconfont（sdk-icon）字体 + .sdk-icon 类，使 FontIcon 字体图标在 storybook 中可渲染
+import "../src/stories/assets/iconfont.css";
 
 const preview: Preview = {
   parameters: {

package/CHANGELOG.md

@@ -1,60 +1,211 @@
 # @baishuyun/ai-design
 
-## 2.1.0-alpha.4
+## 2.1.0
+
+### Minor Changes
+
+- MemoizedMarkdown 增加 Prose，按块套用排版。
+
+## 2.0.61
 
 ### Patch Changes
 
-- fix skill doc
 - Updated dependencies
-  - @baishuyun/ai-feat-utils@2.0.34-alpha.4
-  - @baishuyun/types@3.1.0-alpha.4
+  - @baishuyun/ai-feat-utils@2.0.55
 
-## 2.1.0-alpha.3
+## 2.0.60
 
 ### Patch Changes
 
-- refactor coze-tools
 - Updated dependencies
-  - @baishuyun/ai-feat-utils@2.0.34-alpha.3
-  - @baishuyun/types@3.1.0-alpha.3
+  - @baishuyun/ai-feat-utils@2.0.54
 
-## 2.1.0-alpha.2
+## 2.0.59
 
 ### Patch Changes
 
-- session
 - Updated dependencies
-  - @baishuyun/ai-feat-utils@2.0.34-alpha.2
-  - @baishuyun/types@3.1.0-alpha.2
+  - @baishuyun/ai-feat-utils@2.0.53
 
-## 2.1.0-alpha.1
+## 2.0.58
 
 ### Patch Changes
 
-- session manager
+- 4b49068: 用户文本气泡超过 200 字可关闭折叠，折叠条图标可隐藏，正文保留换行并解析 Markdown。
+
+## 2.0.57
+
+### Patch Changes
+
+- use middleware stackoverflow
 - Updated dependencies
-  - @baishuyun/ai-feat-utils@2.0.34-alpha.1
-  - @baishuyun/types@3.1.0-alpha.1
+  - @baishuyun/ai-feat-utils@2.0.52
+  - @baishuyun/types@3.0.48
 
-## 2.1.0-alpha.0
+## 2.0.56
 
-### Minor Changes
+### Patch Changes
 
-- 8716e65: Upgrade AI SDK from 5.x to 7.x.
+- bugfi
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.51
+  - @baishuyun/types@3.0.47
 
-  - `ai` -> `^7.0.66`, `@ai-sdk/react` -> `^4.0.69`
-  - `@ai-sdk/provider` -> `^4.0.7`, `@ai-sdk/provider-utils` -> `^5.0.27`
-  - `@ai-sdk/deepseek` -> `^3.0.28`
-  - Remove unused `@ai-sdk/mcp`
-  - Add `engines.node >= 22`
+## 2.0.55
 
 ### Patch Changes
 
-- add agent
-- Updated dependencies [8716e65]
+- 移动端样式更新
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.50
+  - @baishuyun/types@3.0.46
+
+## 2.0.54
+
+### Patch Changes
+
+- bugfix
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.49
+  - @baishuyun/types@3.0.45
+
+## 2.0.53
+
+### Patch Changes
+
+- fix mobile style
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.48
+  - @baishuyun/types@3.0.44
+
+## 2.0.52
+
+### Patch Changes
+
+- Updated dependencies
+  - @baishuyun/types@3.0.43
+  - @baishuyun/ai-feat-utils@2.0.47
+
+## 2.0.51
+
+### Patch Changes
+
+- fix mobile style
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.46
+
+## 2.0.50
+
+### Patch Changes
+
+- agent helper error
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.45
+  - @baishuyun/types@3.0.42
+
+## 2.0.49
+
+### Patch Changes
+
+- mobile style
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.44
+  - @baishuyun/types@3.0.41
+
+## 2.0.48
+
+### Patch Changes
+
+- fix style and other bugs
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.43
+  - @baishuyun/types@3.0.40
+
+## 2.0.47
+
+### Patch Changes
+
+- fix agent helper style
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.42
+  - @baishuyun/types@3.0.39
+
+## 2.0.46
+
+### Patch Changes
+
+- fix host style overwrite
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.41
+  - @baishuyun/types@3.0.38
+
+## 2.0.45
+
+### Patch Changes
+
+- fix mask layer
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.40
+  - @baishuyun/types@3.0.37
+
+## 2.0.44
+
+### Patch Changes
+
+- fix style
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.39
+  - @baishuyun/types@3.0.36
+
+## 2.0.43
+
+### Patch Changes
+
+- mobile optimization
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.38
+  - @baishuyun/types@3.0.35
+
+## 2.0.42
+
+### Patch Changes
+
+- mobile update
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.37
+  - @baishuyun/types@3.0.34
+
+## 2.0.41
+
+### Patch Changes
+
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.36
+  - @baishuyun/types@3.0.33
+
+## 2.0.40
+
+### Patch Changes
+
+- 完善必填校验逻辑
+
+## 2.0.39
+
+### Patch Changes
+
+- token usage report
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.35
+  - @baishuyun/types@3.0.32
+
+## 2.0.38
+
+### Patch Changes
+
+- bugfix
 - Updated dependencies
-  - @baishuyun/types@3.1.0-alpha.0
-  - @baishuyun/ai-feat-utils@2.0.34-alpha.0
+  - @baishuyun/ai-feat-utils@2.0.34
+  - @baishuyun/types@3.0.31
 
 ## 2.0.37
 

package/package.json

@@ -1,9 +1,6 @@
 {
   "name": "@baishuyun/ai-design",
-  "version": "2.1.0-alpha.4",
-  "engines": {
-    "node": ">=22"
-  },
+  "version": "2.1.0",
   "description": "AI 功能 UI 组件库 - 所有 AI 功能的 UI 表现唯一真相来源",
   "type": "module",
   "main": "src/index.ts",
@@ -46,7 +43,7 @@
     "@radix-ui/react-tabs": "^1.1.14",
     "@radix-ui/react-tooltip": "^1.2.9",
     "@tanstack/react-table": "^8.21.3",
-    "ai": "^7.0.66",
+    "ai": "^5.0.101",
     "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
@@ -58,13 +55,14 @@
     "react-day-picker": "^9.11.2",
     "react-hook-form": "^7.76.0",
     "react-markdown": "^10.1.0",
+    "remark-breaks": "^4.0.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.13",
-    "@baishuyun/ai-feat-utils": "2.0.34-alpha.4",
-    "@baishuyun/types": "3.1.0-alpha.4"
+    "@baishuyun/ai-feat-utils": "2.0.55",
+    "@baishuyun/types": "3.0.48"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -87,15 +85,16 @@
     "vite": "^5.1.4",
     "vite-plugin-dts": "^4.5.4",
     "@baishuyun/tailwind-config": "3.0.9",
-    "@baishuyun/types": "3.1.0-alpha.4",
+    "@baishuyun/types": "3.0.48",
     "@baishuyun/typescript-config": "2.0.9"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "scripts": {
-    "build": "vite build && tailwindcss -i src/style.css -o dist/tailwind.css && cat dist/tailwind.css dist/index.css > dist/ai-design.css && node scripts/strip-layers.cjs && cp dist/ai-design.css style.css && rm dist/tailwind.css dist/index.css",
+    "build": "vite build && tailwindcss -i src/style.css -o dist/tailwind.css && node scripts/post-build.cjs",
     "dev": "vite build --watch",
+    "dev:build": "vite build --emptyOutDir false",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build"
   }

package/scripts/post-build.cjs

@@ -0,0 +1,32 @@
+/**
+ * ai-design 构建后处理：跨平台替代 cat / cp / rm。
+ * Windows 的 cmd.exe 没有这些 Unix 命令，脚本会在 cat 处失败，
+ * 而且失败前 `>` 已把 dist/ai-design.css 截断成 0 字节。
+ *
+ * 步骤：合并 tailwind CLI 产物与 vite 产物 -> 去 @layer 包裹 -> 拷到包根 style.css -> 清理临时文件。
+ */
+const fs = require('node:fs');
+const path = require('node:path');
+
+// strip-layers.cjs 内部用相对 cwd 的路径，这里统一锚定到包根
+process.chdir(path.resolve(__dirname, '..'));
+
+const DIST = 'dist';
+
+// 1. 合并（原：cat dist/tailwind.css dist/index.css > dist/ai-design.css）
+const merged =
+  fs.readFileSync(`${DIST}/tailwind.css`, 'utf-8') + fs.readFileSync(`${DIST}/index.css`, 'utf-8');
+fs.writeFileSync(`${DIST}/ai-design.css`, merged);
+
+// 2. 去掉 @layer 包裹（复用现有脚本，它在 require 时执行）
+require('./strip-layers.cjs');
+
+// 3. 拷到包根（原：cp dist/ai-design.css style.css）
+fs.copyFileSync(`${DIST}/ai-design.css`, 'style.css');
+
+// 4. 清理临时文件（原：rm dist/tailwind.css dist/index.css）
+for (const file of ['tailwind.css', 'index.css']) {
+  fs.rmSync(`${DIST}/${file}`, { force: true });
+}
+
+console.log('ai-design post-build done.');

package/src/components/agent-drawer.tsx

@@ -0,0 +1,119 @@
+import { useCallback, useState } from 'react';
+import { EnhancedDrawer } from './ui/enhanced-drawer';
+import { AgentSelect } from './agent-select';
+import type { AgentSelectAgent } from './agent-select';
+
+export interface AgentDrawerProps {
+  agents: Array<AgentSelectAgent>;
+  activeAgent?: { id: string } | null;
+  onSelect: (agent: AgentSelectAgent) => void | Promise<void>;
+  /** 受控开关 */
+  open?: boolean;
+  /** 非受控默认开关 */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  showSearch?: boolean;
+  /** 触发器（可选；不传则完全由 open 控制） */
+  trigger?: React.ReactNode;
+}
+
+/** 关闭图标（设计稿 40434:34111，20×20，#121111） */
+const CloseIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+    <path
+      d="M11.2584 9.99867L17.874 3.37975C18.0348 3.21757 18.125 2.99839 18.125 2.76996C18.125 2.54153 18.0348 2.32235 17.874 2.16017L17.8388 2.12495C17.6764 1.96522 17.4578 1.87572 17.23 1.87572C17.0023 1.87572 16.7837 1.96522 16.6213 2.12495L10.0027 8.75414L3.38708 2.12495C3.22461 1.96478 3.00568 1.875 2.77759 1.875C2.54951 1.875 2.33057 1.96478 2.1681 2.12495L2.13143 2.16017C2.05026 2.23946 1.98576 2.33419 1.94172 2.43878C1.89769 2.54338 1.875 2.65573 1.875 2.76923C1.875 2.88272 1.89769 2.99507 1.94172 3.09967C1.98576 3.20427 2.05026 3.299 2.13143 3.37828L8.74706 9.99867L2.13143 16.6205C1.97109 16.7826 1.88115 17.0015 1.88115 17.2296C1.88115 17.4577 1.97109 17.6765 2.13143 17.8386L2.1681 17.8739C2.33014 18.0343 2.5489 18.1243 2.77686 18.1243C3.00482 18.1243 3.22358 18.0343 3.38561 17.8739L10.0027 11.2549L16.6183 17.8739C16.7804 18.0347 16.9995 18.125 17.2278 18.125C17.4561 18.125 17.6752 18.0347 17.8373 17.8739L17.874 17.8386C18.0343 17.6765 18.1243 17.4577 18.1243 17.2296C18.1243 17.0015 18.0343 16.7826 17.874 16.6205L11.2598 9.99867H11.2584Z"
+      fill="#121111"
+    />
+  </svg>
+);
+
+/**
+ * 智能体选择抽屉（移动端从底部滑出），复用 AgentSelect 列表，选中后自动关闭。
+ * 视觉对齐设计稿 40434:34107：顶部圆角面板 +「全部智能体」18px 标题 +
+ * 关闭按钮 + 搜索框 + 全宽列表行。
+ * shadow DOM 兼容逻辑统一由 EnhancedDrawer 处理。
+ */
+export const AgentDrawer = ({
+  agents,
+  activeAgent,
+  onSelect,
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  showSearch = true,
+  trigger,
+}: AgentDrawerProps) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (controlledOpen === undefined) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+
+  const handleSelect = useCallback(
+    async (agent: AgentSelectAgent) => {
+      await onSelect(agent);
+      setOpen(false);
+    },
+    [onSelect, setOpen]
+  );
+
+  return (
+    <>
+      {trigger && (
+        <span onClick={() => setOpen(true)} style={{ display: 'contents' }}>
+          {trigger}
+        </span>
+      )}
+      <EnhancedDrawer
+        open={open}
+        onOpenChange={setOpen}
+        direction="bottom"
+        title="选择智能体"
+        // DrawerContent 内联 style 强制 borderRadius: 0（会压掉方向圆角），
+        // 用 !important 任意值恢复设计稿的顶部 10px 圆角
+        className="rounded-t-[20px]!"
+      >
+        <div className="flex flex-col">
+          {/* 头部：标题 18px Bold + 关闭（设计稿 40434:34109，上 20、下 20、左右 12） */}
+          <div className="flex items-center justify-between px-[12px] pt-[20px] pb-[20px]">
+            <span className="text-[18px] font-bold text-[#030303] leading-[normal]">
+              全部智能体
+            </span>
+            <button
+              type="button"
+              aria-label="关闭"
+              className="shrink-0 size-[20px] border-none bg-transparent p-0 text-[#121111] cursor-pointer"
+              onClick={() => setOpen(false)}
+            >
+              <CloseIcon />
+            </button>
+          </div>
+          {/* 搜索 + 列表（样式见 AgentSelect large；85px ≈ 头部块高度；
+              底部 16px 内边距，设计稿 40654:39900） */}
+          <div
+            className="overflow-y-auto pb-[16px]"
+            style={{
+              maxHeight: 'calc(100vh - 52px - 85px)',
+              scrollbarWidth: 'none',
+            }}
+            data-vaul-no-drag
+          >
+            <AgentSelect
+              agents={agents}
+              activeAgent={activeAgent}
+              onSelect={handleSelect}
+              showSearch={showSearch}
+              showAllItems
+              large
+            />
+          </div>
+        </div>
+      </EnhancedDrawer>
+    </>
+  );
+};

package/src/components/agent-helper/agent-entry-card/index.tsx

@@ -9,18 +9,13 @@ export interface AgentEntryCardProps {
   onLogClick: () => void;
 }
 
-export const AgentEntryCard = ({
-  agent,
-  className,
-  onSelect,
-  onLogClick: _onLogClick,
-}: AgentEntryCardProps) => {
+export const AgentEntryCard = ({ agent, className, onSelect, onLogClick }: AgentEntryCardProps) => {
   return (
     <div
       className={cn(
         'bg-white border border-[#e0e0e0] border-solid content-stretch flex flex-col items-start p-[16px] rounded-[10px] w-full drop-shadow-[0px_0px_5px_rgba(0,0,0,0.04)] hover:drop-shadow-[0px_0px_8px_rgba(0,0,0,0.1)]',
         transCls,
-        className,
+        className
       )}
 
       onClick={onSelect}
@@ -32,7 +27,7 @@ export const AgentEntryCard = ({
           <div className="content-stretch flex gap-[10px] items-center min-w-0">
             <img
               alt={agent.name}
-              className="rounded-[10px] shrink-0 size-[40px] object-cover"
+              className="rounded-[20px] shrink-0 size-[40px] object-cover"
               src={agent.icon}
             />
             <p className="font-bold leading-[normal] overflow-hidden shrink-0 text-[#030303] text-[18px] text-ellipsis whitespace-nowrap">

package/src/components/agent-helper/agent-helper-card/index.tsx

@@ -118,11 +118,11 @@ export const AgentHelperCard = ({
       )}
     >
       {/* Header */}
-      <div className="grid-rows-[max-content] inline-grid leading-[0] place-items-start shrink-0 w-full">
+      <div className="grid-cols-1 grid-rows-[max-content] inline-grid leading-[0] place-items-start shrink-0 w-full">
         <div className="col-1 content-stretch flex h-[42px] items-center justify-between ml-0 mt-0 px-[12px] row-1 w-full">
-          <div className="content-stretch flex gap-[6px] items-center shrink-0 min-w-0">
+          <div className="content-stretch flex gap-[6px] items-center min-w-0">
             <TriggerTypeIcon triggerType={helper.triggerType} size={18} />
-            <p className="leading-[normal] shrink-0 text-[#030303] text-[14px] truncate">
+            <p className="leading-[normal] text-[#030303] text-[14px] truncate">
               {helper.helperName}
             </p>
           </div>