{"_id":"@aiwanna-team/message-list","_rev":"3-a26a50713c0de85978defb097143cac3","name":"@aiwanna-team/message-list","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@aiwanna-team/message-list","version":"0.1.0","_id":"@aiwanna-team/message-list@0.1.0","maintainers":[{"name":"yarnb","email":"yarnb@foxmail.com"}],"dist":{"shasum":"e83a9ace98c18d6c2eba15f4c5f54b5a2d9c5a70","tarball":"https://registry.npmjs.org/@aiwanna-team/message-list/-/message-list-0.1.0.tgz","fileCount":6,"integrity":"sha512-T20BMW5wOy7EfeMvXIRA15QczKan+PKrcdtQLLWI+bbuyoluIWQ951YTOcAyTf5pafYz5L5ySNhF//GQ8mBu+A==","signatures":[{"sig":"MEUCIQCvLwYtzWpdUbGlQQXX2s2JIc7aqdVNBETH1tNmiFyEjAIgbTOjkQLZpUgTVzPfS9RYMhH8QpgdzDB6T4zg1z9vDoo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":522247},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"npm":">=9.0.0","node":">=20.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./css":{"import":"./dist/index.css"}},"gitHead":"67b4ef294ee7d6029465600c08e05787ac6776a8","scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","build":"tsc -b && vite build --config vite.build.config.ts","ci:test":"node scripts/ci-test.js","prepare":"husky","preview":"vite preview","version":"npm run changelog && git add CHANGELOG.md","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s","storybook":"storybook dev -p 6006","typecheck":"tsc --noEmit --project tsconfig.app.json","build:verify":"npm run build && node scripts/verify-build.js","changelog:all":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0","build-storybook":"storybook build"},"_npmUser":{"name":"yarnb","email":"yarnb@foxmail.com"},"_npmVersion":"10.8.2","description":"这是一个基于 React + TypeScript + Vite + TailwindCSS 的组件库模板，支持发布到 npm。","directories":{},"_nodeVersion":"20.19.2","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.3.0","simplebar-react":"^3.2.4","@virtuoso.dev/message-list":"^1.12.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.3.5","husky":"^9.1.7","eslint":"^9.25.0","vitest":"^3.2.2","globals":"^16.0.0","storybook":"^9.0.6","@eslint/js":"^9.25.0","playwright":"^1.52.0","typescript":"~5.8.3","@types/node":"^22.15.30","@types/react":"^19.1.2","@ngneat/falso":"^7.4.0","@commitlint/cli":"^19.8.1","@vitest/browser":"^3.2.2","vite-plugin-dts":"^4.3.0","@types/react-dom":"^19.1.2","typescript-eslint":"^8.30.1","@vitest/coverage-v8":"^3.2.2","@storybook/addon-a11y":"^9.0.6","@storybook/addon-docs":"^9.0.6","@storybook/react-vite":"^9.0.6","@storybook/addon-vitest":"^9.0.6","eslint-plugin-storybook":"^9.0.6","@chromatic-com/storybook":"^4.0.0","@vitejs/plugin-react-swc":"^3.9.0","eslint-plugin-react-hooks":"^5.2.0","conventional-changelog-cli":"^5.0.0","@storybook/addon-onboarding":"^9.0.6","eslint-plugin-react-refresh":"^0.4.19","@commitlint/config-conventional":"^19.8.1"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0","tailwindcss":"^4.1.8","@tailwindcss/vite":"^4.1.8"},"_npmOperationalInternal":{"tmp":"tmp/message-list_0.1.0_1749456939064_0.826201702901294","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@aiwanna-team/message-list","version":"0.1.2","_id":"@aiwanna-team/message-list@0.1.2","maintainers":[{"name":"yarnb","email":"yarnb@foxmail.com"}],"dist":{"shasum":"457622e7cec77b68a005b4aaab30f3a7f3fcccb9","tarball":"https://registry.npmjs.org/@aiwanna-team/message-list/-/message-list-0.1.2.tgz","fileCount":7,"integrity":"sha512-eLIXcgfi0R2VnfZke1wTzl70lbpz+z0cFoGbqTUcPq1r5IFqAu9Bv1NfiuabE8tXvx/PbK0GbuSnEyBCGcUEDg==","signatures":[{"sig":"MEYCIQDeo9hIKBbnwO9Dtt9Pvr5FHi6hOos9dwZZW35A/D/LfAIhAPjDplzvKajlCcPPNyhSCBetRL56lKhpVdiQNMpWWapE","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":529216},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"npm":">=9.0.0","node":">=20.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./css":{"types":"./dist/index.css.d.ts","import":"./dist/index.css"}},"gitHead":"087bb37e7968c0379b3cebf4a493be397829697b","scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","build":"tsc -b && vite build --config vite.build.config.ts && node scripts/generate-css-types.js","ci:test":"node scripts/ci-test.js","prepare":"husky","preview":"vite preview","version":"npm run changelog && git add CHANGELOG.md","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s","storybook":"storybook dev -p 6006","typecheck":"tsc --noEmit --project tsconfig.app.json","build:verify":"npm run build && node scripts/verify-build.js","changelog:all":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0","build-storybook":"storybook build"},"_npmUser":{"name":"yarnb","email":"yarnb@foxmail.com"},"_npmVersion":"10.8.2","description":"一个基于 React + TypeScript + Virtuoso 的高性能消息列表组件，专为聊天应用和实时通讯场景设计。","directories":{},"_nodeVersion":"20.19.2","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.3.0","simplebar-react":"^3.2.4","@virtuoso.dev/message-list":"^1.12.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.3.5","husky":"^9.1.7","eslint":"^9.25.0","vitest":"^3.2.2","globals":"^16.0.0","storybook":"^9.0.6","@eslint/js":"^9.25.0","playwright":"^1.52.0","typescript":"~5.8.3","@types/node":"^22.15.30","@types/react":"^19.1.2","@ngneat/falso":"^7.4.0","@commitlint/cli":"^19.8.1","@vitest/browser":"^3.2.2","vite-plugin-dts":"^4.3.0","@types/react-dom":"^19.1.2","typescript-eslint":"^8.30.1","@vitest/coverage-v8":"^3.2.2","@storybook/addon-a11y":"^9.0.6","@storybook/addon-docs":"^9.0.6","@storybook/react-vite":"^9.0.6","@storybook/addon-vitest":"^9.0.6","eslint-plugin-storybook":"^9.0.6","@chromatic-com/storybook":"^4.0.0","@vitejs/plugin-react-swc":"^3.9.0","eslint-plugin-react-hooks":"^5.2.0","conventional-changelog-cli":"^5.0.0","@storybook/addon-onboarding":"^9.0.6","eslint-plugin-react-refresh":"^0.4.19","@commitlint/config-conventional":"^19.8.1"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0","tailwindcss":"^4.1.8","@tailwindcss/vite":"^4.1.8"},"_npmOperationalInternal":{"tmp":"tmp/message-list_0.1.2_1749459654310_0.43198500055032074","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@aiwanna-team/message-list","version":"0.1.1","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./css":{"import":"./dist/index.css"}},"scripts":{"dev":"vite","build":"tsc -b && vite build --config vite.build.config.ts","build:verify":"npm run build && node scripts/verify-build.js","typecheck":"tsc --noEmit --project tsconfig.app.json","ci:test":"node scripts/ci-test.js","lint":"eslint .","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"vitest run","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s","changelog:all":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0","version":"npm run changelog && git add CHANGELOG.md","prepare":"husky"},"peerDependencies":{"@tailwindcss/vite":"^4.1.8","react":"^19.1.0","react-dom":"^19.1.0","tailwindcss":"^4.1.8"},"engines":{"node":">=20.0.0","npm":">=9.0.0"},"devDependencies":{"@chromatic-com/storybook":"^4.0.0","@commitlint/cli":"^19.8.1","@commitlint/config-conventional":"^19.8.1","@eslint/js":"^9.25.0","@ngneat/falso":"^7.4.0","@storybook/addon-a11y":"^9.0.6","@storybook/addon-docs":"^9.0.6","@storybook/addon-onboarding":"^9.0.6","@storybook/addon-vitest":"^9.0.6","@storybook/react-vite":"^9.0.6","@types/node":"^22.15.30","@types/react":"^19.1.2","@types/react-dom":"^19.1.2","@vitejs/plugin-react-swc":"^3.9.0","@vitest/browser":"^3.2.2","@vitest/coverage-v8":"^3.2.2","conventional-changelog-cli":"^5.0.0","eslint":"^9.25.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.19","eslint-plugin-storybook":"^9.0.6","globals":"^16.0.0","husky":"^9.1.7","playwright":"^1.52.0","storybook":"^9.0.6","typescript":"~5.8.3","typescript-eslint":"^8.30.1","vite":"^6.3.5","vite-plugin-dts":"^4.3.0","vitest":"^3.2.2"},"dependencies":{"@virtuoso.dev/message-list":"^1.12.0","clsx":"^2.1.1","simplebar-react":"^3.2.4","tailwind-merge":"^3.3.0"},"_id":"@aiwanna-team/message-list@0.1.1","gitHead":"f22a84fbaf1429403b0df66d56eef77493f49f08","description":"一个基于 React + TypeScript + Virtuoso 的高性能消息列表组件，专为聊天应用和实时通讯场景设计。","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-dAOW+LI9SiPWgNt4pfDf34EYnSDD0jz9tYyOiIjhNkLEdO6mFQ5iK7cE78oLiwQdwtc3ZdTe6L6QRhvpGT5vUQ==","shasum":"b1a960d5da80e2d1468ba5e3a1eced8d58a6b0b3","tarball":"https://registry.npmjs.org/@aiwanna-team/message-list/-/message-list-0.1.1.tgz","fileCount":6,"unpackedSize":529005,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDn67vawiahEZaLPng9gt6m/iyNN89/RXCqN2Y6jypeTQIgG0ov7iIqt+ebpFG2X1j37liuqUn9gDhxg+Svj3mEKrE="}]},"_npmUser":{"name":"yarnb","email":"yarnb@foxmail.com"},"directories":{},"maintainers":[{"name":"yarnb","email":"yarnb@foxmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/message-list_0.1.1_1749459667342_0.4457408466177182"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-09T08:15:39.007Z","modified":"2025-06-09T09:01:07.726Z","0.1.0":"2025-06-09T08:15:39.274Z","0.1.2":"2025-06-09T09:00:54.564Z","0.1.1":"2025-06-09T09:01:07.549Z"},"description":"一个基于 React + TypeScript + Virtuoso 的高性能消息列表组件，专为聊天应用和实时通讯场景设计。","maintainers":[{"name":"yarnb","email":"yarnb@foxmail.com"}],"readme":"# @aiwanna-team/message-list\n\n一个基于 React + TypeScript + Virtuoso 的高性能消息列表组件，专为聊天应用和实时通讯场景设计。\n\n## ✨ 功能特性\n\n- 🚀 **高性能虚拟滚动** - 基于 Virtuoso 引擎，支持大量消息流畅渲染\n- 💬 **智能消息气泡** - 自动分组显示，支持连续消息的视觉优化\n- 📱 **响应式设计** - 完美适配移动端和桌面端\n- ⏰ **时间戳显示** - 自动格式化消息时间\n- 🔄 **上拉加载历史** - 支持异步加载历史消息，游标分页\n- 🎨 **自定义样式** - 基于 TailwindCSS，易于定制\n- 📝 **消息更新** - 支持实时更新消息内容（AI 流式回复场景）\n- 🔧 **TypeScript 支持** - 完整的类型定义\n\n## 📦 安装\n\n```bash\nnpm install @aiwanna-team/message-list\n```\n\n### 依赖要求\n\n确保你的项目已安装以下依赖：\n\n```bash\nnpm install react react-dom tailwindcss @tailwindcss/vite\n```\n\n**最低版本要求：**\n- Node.js >= 20.0.0\n- React >= 19.1.0\n- TailwindCSS >= 4.1.8\n\n## 🚀 快速开始\n\n### 设置步骤\n\n1. **安装组件库**\n   ```bash\n   npm install @aiwanna-team/message-list\n   ```\n\n2. **配置 TailwindCSS 源文件检测**\n   \n   在你的主 CSS 文件（如 `src/app.css`）中添加：\n   ```css\n   @import \"tailwindcss\";\n   @source \"../node_modules/@aiwanna-team/message-list\";\n   ```\n\n3. **开始使用组件**\n\n### 基础使用\n\n```tsx\nimport React, { useRef } from 'react'\nimport MessageList, { \n  type MessageListMethods, \n  type Message \n} from '@aiwanna-team/message-list'\nimport '@aiwanna-team/message-list/css'\n\nfunction ChatApp() {\n  const messageListRef = useRef<MessageListMethods>(null)\n\n  const initialMessages: Message[] = [\n    {\n      key: 'msg-1',\n      text: '你好！欢迎使用消息列表组件',\n      user: 'other',\n      timestamp: new Date(),\n    },\n    {\n      key: 'msg-2',\n      text: '这个组件很棒！',\n      user: 'me',\n      timestamp: new Date(),\n    }\n  ]\n\n  const handleSendMessage = () => {\n    messageListRef.current?.sendMessage('新消息内容')\n  }\n\n  return (\n    <div className=\"w-full max-w-2xl mx-auto\">\n      <MessageList\n        ref={messageListRef}\n        height=\"500px\"\n        initialMessages={initialMessages}\n      />\n      <button \n        onClick={handleSendMessage}\n        className=\"mt-4 px-4 py-2 bg-blue-500 text-white rounded\"\n      >\n        发送消息\n      </button>\n    </div>\n  )\n}\n```\n\n### 配置 TailwindCSS\n\n> **⚠️ 重要配置**：由于该组件使用了 TailwindCSS 样式，你需要在项目的 CSS 文件中注册组件库的源文件，否则 TailwindCSS 无法检测到组件中使用的类名，导致样式缺失。\n\n在你的主 CSS 文件中添加：\n\n```css\n@import \"tailwindcss\";\n@source \"../node_modules/@aiwanna-team/message-list\";\n```\n\n这样 TailwindCSS 就能扫描组件库中的样式类并生成对应的 CSS。\n\n**示例项目结构：**\n```\nyour-project/\n├── src/\n│   ├── app.css          # 在这里添加 @source 指令\n│   └── main.tsx\n└── node_modules/\n    └── @aiwanna-team/\n        └── message-list/\n```\n\n了解更多关于源文件检测的信息，请参考 [TailwindCSS 官方文档](https://tailwindcss.com/docs/detecting-classes-in-source-files)。\n\n## 📚 API 文档\n\n### MessageList 组件属性\n\n| 属性 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| `height` | `string \\| number` | `\"500px\"` | 消息列表容器高度 |\n| `className` | `string` | `\"\"` | 自定义 CSS 类名 |\n| `style` | `React.CSSProperties` | - | 自定义样式 |\n| `initialMessages` | `Message[]` | `[]` | 初始消息列表 |\n| `onLoadHistory` | `LoadHistoryFunction` | - | 历史消息加载回调 |\n| `historyLoadLimit` | `number` | `20` | 每次加载历史消息数量 |\n| `loadThreshold` | `number` | `100` | 触发加载的滚动阈值(px) |\n| `autoHideScrollbar` | `boolean` | `true` | 是否自动隐藏滚动条 |\n| `licenseKey` | `string` | `\"\"` | Virtuoso 许可证密钥 |\n\n### MessageListMethods 实例方法\n\n```tsx\ninterface MessageListMethods {\n  /** 发送消息，返回消息key */\n  sendMessage: (text: string) => string\n  /** 接收消息，返回消息key */\n  receiveMessage: (text: string) => string\n  /** 更新消息内容 */\n  updateMessage: (key: string, newText: string) => void\n  /** 获取所有消息 */\n  getAllMessages: () => Message[]\n  /** 清空消息列表 */\n  clearMessages: () => void\n  /** 重设消息列表 */\n  resetMessages: (messages: Message[]) => void\n}\n```\n\n### Message 数据结构\n\n```tsx\ninterface Message {\n  /** 消息唯一标识 */\n  key: string\n  /** 消息文本内容 */\n  text: string\n  /** 消息发送者 */\n  user: \"me\" | \"other\"\n  /** 消息时间戳 */\n  timestamp?: Date\n}\n```\n\n### LoadHistoryFunction 回调类型\n\n```tsx\ntype LoadHistoryFunction = (\n  beforeMessageKey?: string,\n  limit?: number\n) => Promise<Message[]>\n```\n\n## 🔄 历史消息加载\n\n### 基础配置\n\n```tsx\nimport { useCallback } from 'react'\n\nfunction ChatApp() {\n  // 历史消息加载函数\n  const handleLoadHistory = useCallback(async (beforeMessageKey, limit = 20) => {\n    try {\n      // 调用你的 API\n      const response = await fetch(`/api/messages?before=${beforeMessageKey}&limit=${limit}`)\n      const data = await response.json()\n      \n      // 返回消息数组\n      return data.messages.map(msg => ({\n        key: msg.id,\n        text: msg.content,\n        user: msg.sender === 'currentUser' ? 'me' : 'other',\n        timestamp: new Date(msg.createdAt),\n      }))\n    } catch (error) {\n      console.error('加载历史消息失败:', error)\n      return [] // 返回空数组表示加载完成\n    }\n  }, [])\n\n  return (\n    <MessageList\n      onLoadHistory={handleLoadHistory}\n      historyLoadLimit={20}\n      loadThreshold={100}\n    />\n  )\n}\n```\n\n### 游标分页说明\n\n- `beforeMessageKey`: 游标位置，加载此消息之前的历史记录\n- `limit`: 每次加载的消息数量\n- 返回空数组 `[]` 表示没有更多历史消息\n\n## 🤖 AI 聊天集成\n\n### 流式回复示例\n\n```tsx\nfunction AIChatApp() {\n  const messageListRef = useRef<MessageListMethods>(null)\n\n  const handleAIChat = async (question: string) => {\n    // 发送用户问题\n    messageListRef.current?.sendMessage(question)\n    \n    // 创建 AI 回复占位符\n    const botMessageKey = messageListRef.current?.receiveMessage('正在思考...')\n    \n    try {\n      // 模拟流式回复\n      const responses = [\n        '让我想想...',\n        '让我想想...这是一个很好的问题',\n        '让我想想...这是一个很好的问题，我来为你详细解答。'\n      ]\n      \n      for (let i = 0; i < responses.length; i++) {\n        await new Promise(resolve => setTimeout(resolve, 500))\n        messageListRef.current?.updateMessage(botMessageKey!, responses[i])\n      }\n    } catch (error) {\n      messageListRef.current?.updateMessage(botMessageKey!, '抱歉，出现了错误')\n    }\n  }\n\n  return (\n    <div>\n      <MessageList ref={messageListRef} />\n      <button onClick={() => handleAIChat('你好，你是谁？')}>\n        测试 AI 回复\n      </button>\n    </div>\n  )\n}\n```\n\n## 🎨 自定义样式\n\n### 基础样式定制\n\n```tsx\n<MessageList\n  className=\"border-2 border-blue-200 shadow-lg\"\n  style={{\n    borderRadius: '16px',\n    background: 'linear-gradient(to bottom, #f8fafc, #ffffff)'\n  }}\n/>\n```\n\n### 高级样式定制（待开发）\n\n通过 CSS 变量覆盖默认样式：\n\n```css\n.message-list-container {\n  --message-bg-me: #3b82f6;\n  --message-bg-other: #f3f4f6;\n  --message-text-me: #ffffff;\n  --message-text-other: #1f2937;\n}\n```\n\n## 📖 使用示例\n\n### 聊天室应用\n\n```tsx\nimport { useState, useRef, useCallback } from 'react'\nimport MessageList, { type MessageListMethods, type Message } from '@aiwanna-team/message-list'\n\nfunction ChatRoom() {\n  const [inputValue, setInputValue] = useState('')\n  const messageListRef = useRef<MessageListMethods>(null)\n  \n  const handleSend = () => {\n    if (inputValue.trim()) {\n      messageListRef.current?.sendMessage(inputValue)\n      setInputValue('')\n    }\n  }\n  \n  const handleLoadHistory = useCallback(async (beforeKey, limit) => {\n    // 实现你的历史消息加载逻辑\n    const messages = await loadHistoryFromAPI(beforeKey, limit)\n    return messages\n  }, [])\n\n  return (\n    <div className=\"flex flex-col h-screen max-w-2xl mx-auto\">\n      <div className=\"flex-1 p-4\">\n        <MessageList\n          ref={messageListRef}\n          height=\"100%\"\n          onLoadHistory={handleLoadHistory}\n        />\n      </div>\n      \n      <div className=\"p-4 border-t flex gap-2\">\n        <input\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          onKeyPress={(e) => e.key === 'Enter' && handleSend()}\n          className=\"flex-1 px-3 py-2 border rounded-lg\"\n          placeholder=\"输入消息...\"\n        />\n        <button\n          onClick={handleSend}\n          className=\"px-4 py-2 bg-blue-500 text-white rounded-lg\"\n        >\n          发送\n        </button>\n      </div>\n    </div>\n  )\n}\n```\n\n## 🧪 开发和测试\n\n### 运行 Storybook\n\n```bash\n# 克隆仓库\ngit clone <repository-url>\ncd message-list\n\n# 安装依赖\nnpm install\n\n# 启动 Storybook\nnpm run storybook\n```\n\n### 可用的演示\n\n- **Default** - 基础使用演示\n- **WithInitialMessages** - 初始消息展示\n- **Interactive** - 交互式功能演示\n- **HistoryLoading** - 历史消息加载演示\n- **Performance** - 性能压力测试\n- **CustomStyle** - 自定义样式演示\n\n## ⚡ 性能优化\n\n### 最佳实践\n\n1. **合理设置历史加载数量**\n```tsx\n<MessageList\n  historyLoadLimit={30}  // 根据网络状况调整\n  loadThreshold={150}    // 调整触发距离\n/>\n```\n\n2. **使用 useCallback 优化回调**\n```tsx\nconst handleLoadHistory = useCallback(async (beforeKey, limit) => {\n  // 实现逻辑\n}, [/* 最小依赖 */])\n```\n\n3. **避免频繁的消息更新**\n```tsx\n// 批量更新而不是逐条更新\nconst batchUpdate = (updates) => {\n  updates.forEach(({ key, text }) => {\n    messageListRef.current?.updateMessage(key, text)\n  })\n}\n```\n\n## 🔧 故障排除\n\n### 常见问题\n\n**Q: 样式不显示或错乱？**\nA: 最常见的原因是没有在 CSS 中添加 `@source` 指令。请确保：\n   1. 在主 CSS 文件中添加了 `@source \"../node_modules/@aiwanna-team/message-list\";`\n   2. 项目使用的是 TailwindCSS 4.0+\n   3. 检查控制台是否有 TailwindCSS 相关的错误信息\n\n**Q: 历史消息加载不触发？**\nA: 检查 `onLoadHistory` 回调是否正确设置，确保有足够的初始消息支持滚动\n\n**Q: 消息更新不生效？**\nA: 确保使用正确的消息 key，检查 `updateMessage` 调用\n\n**Q: 性能问题？**\nA: 调整 `historyLoadLimit` 和虚拟滚动配置，避免一次性加载过多消息\n\n## 📄 许可证\n\nMIT License\n\n## 🤝 贡献\n\n欢迎提交 Issue 和 Pull Request！\n\n---\n\n**官方文档**: [查看 Storybook 演示](https://your-storybook-url.com)\n**GitHub**: [aiwanna-team/message-list](https://github.com/aiwanna-team/message-list)\n","readmeFilename":"README.md"}