@anker-in/campaign-ui 0.2.11-beta.2 → 0.2.11-beta.21

package/dist/esm/components/LiveChatWidget/components/ChatHeader.d.ts

@@ -0,0 +1,57 @@
+/**
+ * 聊天窗口头部组件
+ * 显示标题、Logo、关闭按钮和新会话按钮
+ * 基于 specs/livechat-widget/plan.md 的头部设计
+ */
+import React from 'react';
+export interface ChatHeaderProps {
+    /**
+     * 头部标题
+     */
+    title?: string;
+    /**
+     * Logo URL
+     */
+    logoUrl?: string;
+    /**
+     * 关闭按钮点击回调
+     */
+    onClose?: () => void;
+    /**
+     * 新会话按钮点击回调
+     */
+    onNewSession?: () => void;
+    /**
+     * 是否显示新会话按钮
+     * @default true
+     */
+    showNewSessionButton?: boolean;
+    /**
+     * 自定义样式类名
+     */
+    className?: string;
+}
+/**
+ * 聊天窗口头部组件
+ *
+ * 功能：
+ * - 显示标题和 Logo
+ * - 关闭按钮（移动端隐藏，桌面端显示）
+ * - 新会话按钮（清空当前对话）
+ *
+ * 布局：
+ * - Logo (可选) + 标题 | 新会话按钮 + 关闭按钮
+ * - 固定高度 64px
+ * - 边框分隔下方内容
+ *
+ * @example
+ * ```tsx
+ * <ChatHeader
+ *   title="AI 助手"
+ *   logoUrl="/logo.png"
+ *   onClose={() => setIsOpen(false)}
+ *   onNewSession={() => createNewSession()}
+ * />
+ * ```
+ */
+export declare const ChatHeader: React.FC<ChatHeaderProps>;

package/dist/esm/components/LiveChatWidget/components/ChatHeader.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";const l=()=>t("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),c=()=>t("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),e("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]}),x=({title:r="AI \u52A9\u624B",logoUrl:o,onClose:i,onNewSession:n,showNewSessionButton:s=!0,className:a=""})=>t("div",{className:`flex items-center justify-between border-b border-[#DADCE0] bg-white px-4 py-3 ${a}`,style:{minHeight:"48px"},children:[t("div",{className:"flex items-center gap-3",children:[o&&e("img",{src:o,alt:"Logo",className:"size-8 rounded-full object-cover"}),e("h2",{className:"text-lg font-semibold text-gray-900",children:r})]}),t("div",{className:"flex items-center gap-2",children:[s&&n&&e("button",{type:"button",onClick:n,className:"rounded-lg p-2 text-gray-600","aria-label":"\u5F00\u59CB\u65B0\u4F1A\u8BDD",title:"\u5F00\u59CB\u65B0\u4F1A\u8BDD",children:e(c,{})}),i&&e("button",{type:"button",onClick:i,className:"tablet:block  rounded-lg text-gray-600","aria-label":"\u5173\u95ED\u804A\u5929\u7A97\u53E3",children:e(l,{})})]})]});export{x as ChatHeader};
+//# sourceMappingURL=ChatHeader.js.map

package/dist/esm/components/LiveChatWidget/components/ChatHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/LiveChatWidget/components/ChatHeader.tsx"],
+  "sourcesContent": ["/**\n * \u804A\u5929\u7A97\u53E3\u5934\u90E8\u7EC4\u4EF6\n * \u663E\u793A\u6807\u9898\u3001Logo\u3001\u5173\u95ED\u6309\u94AE\u548C\u65B0\u4F1A\u8BDD\u6309\u94AE\n * \u57FA\u4E8E specs/livechat-widget/plan.md \u7684\u5934\u90E8\u8BBE\u8BA1\n */\n\nimport React from 'react'\n\nexport interface ChatHeaderProps {\n  /**\n   * \u5934\u90E8\u6807\u9898\n   */\n  title?: string\n\n  /**\n   * Logo URL\n   */\n  logoUrl?: string\n\n  /**\n   * \u5173\u95ED\u6309\u94AE\u70B9\u51FB\u56DE\u8C03\n   */\n  onClose?: () => void\n\n  /**\n   * \u65B0\u4F1A\u8BDD\u6309\u94AE\u70B9\u51FB\u56DE\u8C03\n   */\n  onNewSession?: () => void\n\n  /**\n   * \u662F\u5426\u663E\u793A\u65B0\u4F1A\u8BDD\u6309\u94AE\n   * @default true\n   */\n  showNewSessionButton?: boolean\n\n  /**\n   * \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D\n   */\n  className?: string\n}\n\n/**\n * \u9ED8\u8BA4\u5173\u95ED\u56FE\u6807 (X)\n */\nconst CloseIcon: React.FC = () => (\n  <svg\n    width=\"20\"\n    height=\"20\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n  </svg>\n)\n\n/**\n * \u65B0\u4F1A\u8BDD\u56FE\u6807 (\u52A0\u53F7)\n */\nconst NewSessionIcon: React.FC = () => (\n  <svg\n    width=\"18\"\n    height=\"18\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n  </svg>\n)\n\n/**\n * \u804A\u5929\u7A97\u53E3\u5934\u90E8\u7EC4\u4EF6\n *\n * \u529F\u80FD\uFF1A\n * - \u663E\u793A\u6807\u9898\u548C Logo\n * - \u5173\u95ED\u6309\u94AE\uFF08\u79FB\u52A8\u7AEF\u9690\u85CF\uFF0C\u684C\u9762\u7AEF\u663E\u793A\uFF09\n * - \u65B0\u4F1A\u8BDD\u6309\u94AE\uFF08\u6E05\u7A7A\u5F53\u524D\u5BF9\u8BDD\uFF09\n *\n * \u5E03\u5C40\uFF1A\n * - Logo (\u53EF\u9009) + \u6807\u9898 | \u65B0\u4F1A\u8BDD\u6309\u94AE + \u5173\u95ED\u6309\u94AE\n * - \u56FA\u5B9A\u9AD8\u5EA6 64px\n * - \u8FB9\u6846\u5206\u9694\u4E0B\u65B9\u5185\u5BB9\n *\n * @example\n * ```tsx\n * <ChatHeader\n *   title=\"AI \u52A9\u624B\"\n *   logoUrl=\"/logo.png\"\n *   onClose={() => setIsOpen(false)}\n *   onNewSession={() => createNewSession()}\n * />\n * ```\n */\nexport const ChatHeader: React.FC<ChatHeaderProps> = ({\n  title = 'AI \u52A9\u624B',\n  logoUrl,\n  onClose,\n  onNewSession,\n  showNewSessionButton = true,\n  className = '',\n}) => {\n  return (\n    <div\n      className={`flex items-center justify-between border-b border-[#DADCE0] bg-white px-4 py-3 ${className}`}\n      style={{ minHeight: '48px' }}\n    >\n      {/* \u5DE6\u4FA7\uFF1ALogo + \u6807\u9898 */}\n      <div className=\"flex items-center gap-3\">\n        {logoUrl && <img src={logoUrl} alt=\"Logo\" className=\"size-8 rounded-full object-cover\" />}\n        <h2 className=\"text-lg font-semibold text-gray-900\">{title}</h2>\n      </div>\n\n      {/* \u53F3\u4FA7\uFF1A\u65B0\u4F1A\u8BDD\u6309\u94AE + \u5173\u95ED\u6309\u94AE */}\n      <div className=\"flex items-center gap-2\">\n        {/* \u65B0\u4F1A\u8BDD\u6309\u94AE */}\n        {showNewSessionButton && onNewSession && (\n          <button\n            type=\"button\"\n            onClick={onNewSession}\n            className=\"rounded-lg p-2 text-gray-600\"\n            aria-label=\"\u5F00\u59CB\u65B0\u4F1A\u8BDD\"\n            title=\"\u5F00\u59CB\u65B0\u4F1A\u8BDD\"\n          >\n            <NewSessionIcon />\n          </button>\n        )}\n\n        {/* \u5173\u95ED\u6309\u94AE */}\n        {onClose && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"tablet:block  rounded-lg text-gray-600\"\n            aria-label=\"\u5173\u95ED\u804A\u5929\u7A97\u53E3\"\n          >\n            <CloseIcon />\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "AA6CE,OAUE,OAAAA,EAVF,QAAAC,MAAA,oBADF,MAAMC,EAAsB,IAC1BD,EAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QAEf,UAAAD,EAAC,QAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,EACpCA,EAAC,QAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GACtC,EAMIG,EAA2B,IAC/BF,EAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QAEf,UAAAD,EAAC,QAAK,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,EACrCA,EAAC,QAAK,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GACvC,EA0BWI,EAAwC,CAAC,CACpD,MAAAC,EAAQ,kBACR,QAAAC,EACA,QAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuB,GACvB,UAAAC,EAAY,EACd,IAEIT,EAAC,OACC,UAAW,kFAAkFS,CAAS,GACtG,MAAO,CAAE,UAAW,MAAO,EAG3B,UAAAT,EAAC,OAAI,UAAU,0BACZ,UAAAK,GAAWN,EAAC,OAAI,IAAKM,EAAS,IAAI,OAAO,UAAU,mCAAmC,EACvFN,EAAC,MAAG,UAAU,sCAAuC,SAAAK,EAAM,GAC7D,EAGAJ,EAAC,OAAI,UAAU,0BAEZ,UAAAQ,GAAwBD,GACvBR,EAAC,UACC,KAAK,SACL,QAASQ,EACT,UAAU,+BACV,aAAW,iCACX,MAAM,iCAEN,SAAAR,EAACG,EAAA,EAAe,EAClB,EAIDI,GACCP,EAAC,UACC,KAAK,SACL,QAASO,EACT,UAAU,yCACV,aAAW,uCAEX,SAAAP,EAACE,EAAA,EAAU,EACb,GAEJ,GACF",
+  "names": ["jsx", "jsxs", "CloseIcon", "NewSessionIcon", "ChatHeader", "title", "logoUrl", "onClose", "onNewSession", "showNewSessionButton", "className"]
+}

package/dist/esm/components/LiveChatWidget/components/ChatInput.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 聊天输入框组件
+ * 提供文本输入和发送按钮
+ * 基于 specs/livechat-widget/plan.md 的输入框设计
+ */
+import React from 'react';
+export interface ChatInputProps {
+    /**
+     * 输入框当前值
+     */
+    value: string;
+    /**
+     * 值变化回调
+     */
+    onChange: (value: string) => void;
+    /**
+     * 发送消息回调
+     */
+    onSend: () => void;
+    /**
+     * 占位符文本
+     * @default "输入消息..."
+     */
+    placeholder?: string;
+    /**
+     * 是否禁用输入
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 是否自动聚焦
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 最大字符数
+     * @default 5000
+     */
+    maxLength?: number;
+    /**
+     * 自定义样式类名
+     */
+    className?: string;
+}
+/**
+ * 聊天输入框组件
+ *
+ * 功能：
+ * - 多行文本输入（自动增长）
+ * - Enter 发送，Shift+Enter 换行
+ * - 字符数限制（5000）
+ * - 禁用状态（发送中）
+ * - 发送按钮（空内容时禁用）
+ *
+ * 样式：
+ * - 固定底部
+ * - 边框分隔上方内容
+ * - 自适应高度（1-5 行）
+ *
+ * @example
+ * ```tsx
+ * <ChatInput
+ *   value={inputValue}
+ *   onChange={setInputValue}
+ *   onSend={handleSend}
+ *   disabled={isStreaming}
+ * />
+ * ```
+ */
+export declare const ChatInput: React.FC<ChatInputProps>;

package/dist/esm/components/LiveChatWidget/components/ChatInput.js

@@ -0,0 +1,2 @@
+import{jsx as n,jsxs as l}from"react/jsx-runtime";import{useRef as w,useEffect as b}from"react";const y=()=>l("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[n("path",{d:"M10.2069 15.6997V4.69971",stroke:"white","stroke-width":"2","stroke-linecap":"round"}),n("path",{d:"M15.3995 8.50341L10.9506 4.05446C10.534 3.6379 9.85866 3.63791 9.4421 4.05446L5.00005 8.49651",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})]}),v=({value:t,onChange:d,onSend:i,placeholder:h="",disabled:a=!1,autoFocus:g=!1,maxLength:o=5e3,className:p=""})=>{const c=w(null);b(()=>{const e=c.current;if(!e)return;e.style.height="auto";const m=Math.min(e.scrollHeight,120);e.style.height=`${m}px`},[t]);const u=e=>{e.key==="Enter"&&!e.shiftKey&&(e.preventDefault(),t.trim()&&!a&&i())},x=e=>{const s=e.target.value;s.length<=o&&d(s)},f=()=>{t.trim()&&!a&&i()},r=t.trim().length>0&&!a;return n("div",{className:`flex items-end gap-2 bg-white px-4 py-3 ${p}`,children:n("div",{className:"flex flex-1 items-center gap-2 rounded-2xl",style:{background:"linear-gradient(to right, #7687F3, #7687F3, #4DA8F5, #A3DFCE)",padding:"2px"},children:l("div",{className:"flex flex-1 items-center gap-2 bg-white px-3 py-2",style:{borderRadius:"14px"},children:[n("textarea",{ref:c,value:t,onChange:x,onKeyDown:u,placeholder:h,disabled:a,autoFocus:g,rows:1,className:"flex-1 resize-none bg-transparent text-sm text-gray-900 outline-none placeholder:text-gray-400 disabled:cursor-not-allowed disabled:opacity-50",style:{resize:"none"}}),t.length>o*.8&&l("span",{className:"text-xs text-gray-400",children:[t.length,"/",o]}),n("button",{type:"button",onClick:f,disabled:!r,className:`shrink-0 rounded-full p-2 transition-all ${r?" active:scale-95":"cursor-not-allowed "}`,style:r?{background:"linear-gradient(to bottom, #A3DFCE, #4DA8F5, #7687F3)"}:{background:"#BEBEBE"},"aria-label":"\u53D1\u9001\u6D88\u606F",children:n(y,{})})]})})})};export{v as ChatInput};
+//# sourceMappingURL=ChatInput.js.map

package/dist/esm/components/LiveChatWidget/components/ChatInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/LiveChatWidget/components/ChatInput.tsx"],
+  "sourcesContent": ["/**\n * \u804A\u5929\u8F93\u5165\u6846\u7EC4\u4EF6\n * \u63D0\u4F9B\u6587\u672C\u8F93\u5165\u548C\u53D1\u9001\u6309\u94AE\n * \u57FA\u4E8E specs/livechat-widget/plan.md \u7684\u8F93\u5165\u6846\u8BBE\u8BA1\n */\n\nimport React, { useRef, useEffect } from 'react'\n\nexport interface ChatInputProps {\n  /**\n   * \u8F93\u5165\u6846\u5F53\u524D\u503C\n   */\n  value: string\n\n  /**\n   * \u503C\u53D8\u5316\u56DE\u8C03\n   */\n  onChange: (value: string) => void\n\n  /**\n   * \u53D1\u9001\u6D88\u606F\u56DE\u8C03\n   */\n  onSend: () => void\n\n  /**\n   * \u5360\u4F4D\u7B26\u6587\u672C\n   * @default \"\u8F93\u5165\u6D88\u606F...\"\n   */\n  placeholder?: string\n\n  /**\n   * \u662F\u5426\u7981\u7528\u8F93\u5165\n   * @default false\n   */\n  disabled?: boolean\n\n  /**\n   * \u662F\u5426\u81EA\u52A8\u805A\u7126\n   * @default false\n   */\n  autoFocus?: boolean\n\n  /**\n   * \u6700\u5927\u5B57\u7B26\u6570\n   * @default 5000\n   */\n  maxLength?: number\n\n  /**\n   * \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D\n   */\n  className?: string\n}\n\n/**\n * \u53D1\u9001\u56FE\u6807 (\u5411\u4E0A\u7BAD\u5934)\n */\nconst SendIcon: React.FC = () => (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M10.2069 15.6997V4.69971\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    <path\n      d=\"M15.3995 8.50341L10.9506 4.05446C10.534 3.6379 9.85866 3.63791 9.4421 4.05446L5.00005 8.49651\"\n      stroke=\"white\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n)\n\n/**\n * \u804A\u5929\u8F93\u5165\u6846\u7EC4\u4EF6\n *\n * \u529F\u80FD\uFF1A\n * - \u591A\u884C\u6587\u672C\u8F93\u5165\uFF08\u81EA\u52A8\u589E\u957F\uFF09\n * - Enter \u53D1\u9001\uFF0CShift+Enter \u6362\u884C\n * - \u5B57\u7B26\u6570\u9650\u5236\uFF085000\uFF09\n * - \u7981\u7528\u72B6\u6001\uFF08\u53D1\u9001\u4E2D\uFF09\n * - \u53D1\u9001\u6309\u94AE\uFF08\u7A7A\u5185\u5BB9\u65F6\u7981\u7528\uFF09\n *\n * \u6837\u5F0F\uFF1A\n * - \u56FA\u5B9A\u5E95\u90E8\n * - \u8FB9\u6846\u5206\u9694\u4E0A\u65B9\u5185\u5BB9\n * - \u81EA\u9002\u5E94\u9AD8\u5EA6\uFF081-5 \u884C\uFF09\n *\n * @example\n * ```tsx\n * <ChatInput\n *   value={inputValue}\n *   onChange={setInputValue}\n *   onSend={handleSend}\n *   disabled={isStreaming}\n * />\n * ```\n */\nexport const ChatInput: React.FC<ChatInputProps> = ({\n  value,\n  onChange,\n  onSend,\n  placeholder = '',\n  disabled = false,\n  autoFocus = false,\n  maxLength = 5000,\n  className = '',\n}) => {\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n  /**\n   * \u81EA\u52A8\u8C03\u6574 textarea \u9AD8\u5EA6\n   */\n  useEffect(() => {\n    const textarea = textareaRef.current\n    if (!textarea) return\n\n    // \u91CD\u7F6E\u9AD8\u5EA6\u4EE5\u83B7\u53D6\u6B63\u786E\u7684 scrollHeight\n    textarea.style.height = 'auto'\n\n    // \u8BBE\u7F6E\u9AD8\u5EA6\uFF0C\u6700\u5927 5 \u884C\uFF08\u7EA6 120px\uFF09\n    const maxHeight = 120\n    const newHeight = Math.min(textarea.scrollHeight, maxHeight)\n    textarea.style.height = `${newHeight}px`\n  }, [value])\n\n  /**\n   * \u5904\u7406\u952E\u76D8\u4E8B\u4EF6\n   * Enter \u53D1\u9001\uFF0CShift+Enter \u6362\u884C\n   */\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault()\n      if (value.trim() && !disabled) {\n        onSend()\n      }\n    }\n  }\n\n  /**\n   * \u5904\u7406\u8F93\u5165\u53D8\u5316\n   */\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const newValue = event.target.value\n\n    // \u5B57\u7B26\u6570\u9650\u5236\n    if (newValue.length <= maxLength) {\n      onChange(newValue)\n    }\n  }\n\n  /**\n   * \u5904\u7406\u53D1\u9001\u6309\u94AE\u70B9\u51FB\n   */\n  const handleSendClick = () => {\n    if (value.trim() && !disabled) {\n      onSend()\n    }\n  }\n\n  const canSend = value.trim().length > 0 && !disabled\n\n  return (\n    <div className={`flex items-end gap-2 bg-white px-4 py-3 ${className}`}>\n      {/* \u8F93\u5165\u6846\u5BB9\u5668 - \u5E26\u6E10\u53D8\u8FB9\u6846 */}\n      <div\n        className=\"flex flex-1 items-center gap-2 rounded-2xl\"\n        style={{\n          background: 'linear-gradient(to right, #7687F3, #7687F3, #4DA8F5, #A3DFCE)',\n          padding: '2px',\n        }}\n      >\n        {/* \u5185\u90E8\u767D\u8272\u80CC\u666F */}\n        <div className=\"flex flex-1 items-center gap-2 bg-white px-3 py-2\" style={{ borderRadius: '14px' }}>\n          {/* \u6587\u672C\u8F93\u5165\u6846 */}\n          <textarea\n            ref={textareaRef}\n            value={value}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            disabled={disabled}\n            autoFocus={autoFocus}\n            rows={1}\n            className=\"flex-1 resize-none bg-transparent text-sm text-gray-900 outline-none placeholder:text-gray-400 disabled:cursor-not-allowed disabled:opacity-50\"\n            style={{\n              resize: 'none',\n            }}\n          />\n\n          {/* \u5B57\u7B26\u6570\u63D0\u793A (\u63A5\u8FD1\u4E0A\u9650\u65F6\u663E\u793A) */}\n          {value.length > maxLength * 0.8 && (\n            <span className=\"text-xs text-gray-400\">\n              {value.length}/{maxLength}\n            </span>\n          )}\n\n          {/* \u53D1\u9001\u6309\u94AE */}\n          <button\n            type=\"button\"\n            onClick={handleSendClick}\n            disabled={!canSend}\n            className={`shrink-0 rounded-full p-2 transition-all ${canSend ? ' active:scale-95' : 'cursor-not-allowed '}`}\n            style={\n              canSend\n                ? {\n                    background: 'linear-gradient(to bottom, #A3DFCE, #4DA8F5, #7687F3)',\n                  }\n                : { background: '#BEBEBE' }\n            }\n            aria-label=\"\u53D1\u9001\u6D88\u606F\"\n          >\n            <SendIcon />\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "AA0DE,OACE,OAAAA,EADF,QAAAC,MAAA,oBApDF,OAAgB,UAAAC,EAAQ,aAAAC,MAAiB,QAmDzC,MAAMC,EAAqB,IACzBH,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,UAAAD,EAAC,QAAK,EAAE,2BAA2B,OAAO,QAAQ,eAAa,IAAI,iBAAe,QAAQ,EAC1FA,EAAC,QACC,EAAE,gGACF,OAAO,QACP,eAAa,IACb,iBAAe,QACf,kBAAgB,QAClB,GACF,EA4BWK,EAAsC,CAAC,CAClD,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,YAAAC,EAAc,GACd,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,UAAAC,EAAY,IACZ,UAAAC,EAAY,EACd,IAAM,CACJ,MAAMC,EAAcZ,EAA4B,IAAI,EAKpDC,EAAU,IAAM,CACd,MAAMY,EAAWD,EAAY,QAC7B,GAAI,CAACC,EAAU,OAGfA,EAAS,MAAM,OAAS,OAIxB,MAAMC,EAAY,KAAK,IAAID,EAAS,aADlB,GACyC,EAC3DA,EAAS,MAAM,OAAS,GAAGC,CAAS,IACtC,EAAG,CAACV,CAAK,CAAC,EAMV,MAAMW,EAAiBC,GAAoD,CACrEA,EAAM,MAAQ,SAAW,CAACA,EAAM,WAClCA,EAAM,eAAe,EACjBZ,EAAM,KAAK,GAAK,CAACI,GACnBF,EAAO,EAGb,EAKMW,EAAgBD,GAAkD,CACtE,MAAME,EAAWF,EAAM,OAAO,MAG1BE,EAAS,QAAUR,GACrBL,EAASa,CAAQ,CAErB,EAKMC,EAAkB,IAAM,CACxBf,EAAM,KAAK,GAAK,CAACI,GACnBF,EAAO,CAEX,EAEMc,EAAUhB,EAAM,KAAK,EAAE,OAAS,GAAK,CAACI,EAE5C,OACEV,EAAC,OAAI,UAAW,2CAA2Ca,CAAS,GAElE,SAAAb,EAAC,OACC,UAAU,6CACV,MAAO,CACL,WAAY,gEACZ,QAAS,KACX,EAGA,SAAAC,EAAC,OAAI,UAAU,oDAAoD,MAAO,CAAE,aAAc,MAAO,EAE/F,UAAAD,EAAC,YACC,IAAKc,EACL,MAAOR,EACP,SAAUa,EACV,UAAWF,EACX,YAAaR,EACb,SAAUC,EACV,UAAWC,EACX,KAAM,EACN,UAAU,iJACV,MAAO,CACL,OAAQ,MACV,EACF,EAGCL,EAAM,OAASM,EAAY,IAC1BX,EAAC,QAAK,UAAU,wBACb,UAAAK,EAAM,OAAO,IAAEM,GAClB,EAIFZ,EAAC,UACC,KAAK,SACL,QAASqB,EACT,SAAU,CAACC,EACX,UAAW,4CAA4CA,EAAU,mBAAqB,qBAAqB,GAC3G,MACEA,EACI,CACE,WAAY,uDACd,EACA,CAAE,WAAY,SAAU,EAE9B,aAAW,2BAEX,SAAAtB,EAACI,EAAA,EAAS,EACZ,GACF,EACF,EACF,CAEJ",
+  "names": ["jsx", "jsxs", "useRef", "useEffect", "SendIcon", "ChatInput", "value", "onChange", "onSend", "placeholder", "disabled", "autoFocus", "maxLength", "className", "textareaRef", "textarea", "newHeight", "handleKeyDown", "event", "handleChange", "newValue", "handleSendClick", "canSend"]
+}

package/dist/esm/components/LiveChatWidget/components/ChatMessage.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 单条聊天消息组件
+ * 显示消息气泡、发送者、时间戳
+ * 基于 specs/livechat-widget/plan.md 的消息展示设计
+ */
+import React from 'react';
+import type { Message, MessageRenderer } from '../types';
+import { MessageRendererRegistry } from '../utils/messageRenderers';
+export interface ChatMessageProps {
+    /**
+     * 消息数据
+     */
+    message: Message;
+    /**
+     * 自定义渲染器注册表
+     */
+    rendererRegistry?: MessageRendererRegistry;
+    /**
+     * 默认渲染器
+     */
+    defaultRenderer?: MessageRenderer;
+    /**
+     * 是否显示时间戳
+     * @default true
+     */
+    showTimestamp?: boolean;
+    /**
+     * 自定义样式类名
+     */
+    className?: string;
+    /**
+     * 商品添加到购物车回调
+     */
+    onAddToCart?: (product: any) => void;
+}
+/**
+ * 单条聊天消息组件
+ *
+ * 功能：
+ * - 显示消息气泡（用户 vs AI 助手不同样式）
+ * - 支持多个 content 块（一条消息可包含多种内容类型）
+ * - 显示时间戳
+ * - 系统消息居中显示
+ *
+ * 样式规则：
+ * - 用户消息：右对齐，灰色背景
+ * - AI 助手消息：左对齐，白色背景
+ * - 系统消息：居中，黄色背景
+ *
+ * @example
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   rendererRegistry={customRegistry}
+ *   showTimestamp={true}
+ * />
+ * ```
+ */
+export declare const ChatMessage: React.FC<ChatMessageProps>;

package/dist/esm/components/LiveChatWidget/components/ChatMessage.js

@@ -0,0 +1,5 @@
+import{jsx as t,jsxs as x}from"react/jsx-runtime";import{MessageContent as l}from"./MessageContent";function g(e){const r=new Date(e),o=r.getHours().toString().padStart(2,"0"),i=r.getMinutes().toString().padStart(2,"0");return`${o}:${i}`}const h=({message:e,rendererRegistry:r,defaultRenderer:o,showTimestamp:i=!0,className:d="",onAddToCart:c})=>{const n=e.role==="user",v=e.role==="assistant",m=e.role==="system",f=e.role==="tool";if(m)return t("div",{className:`flex justify-center py-2 ${d}`,children:t("div",{className:"max-w-xs rounded-lg border border-yellow-200 bg-yellow-50 px-4 py-2",children:e.content.map((s,a)=>t(l,{content:s,isUser:!1,isSystem:!0,rendererRegistry:r,defaultRenderer:o},a))})});if(f)return null;const p=["product_list","product_comparison","faq_list","promotion_list","cart"],u=e.content.filter(s=>!p.includes(s.type)),y=e.content.filter(s=>p.includes(s.type));return t("div",{className:`flex ${n?"justify-end":"justify-start"} py-2 ${d}`,children:x("div",{className:"flex w-fit max-w-full flex-col gap-2",children:[u.length>0&&t("div",{className:`w-full min-w-0 overflow-hidden rounded-2xl px-4 py-2 ${n?"rounded-br-sm text-white":"rounded-bl-sm  text-[#1D1D1F]"}`,style:{backgroundColor:n?"#005D8E":"#F5F6F7"},children:t("div",{className:"flex w-full min-w-0 flex-col gap-2",children:u.map((s,a)=>t(l,{content:s,isUser:n,isSystem:!1,rendererRegistry:r,defaultRenderer:o,onAddToCart:c},a))})}),y.map((s,a)=>t("div",{className:"w-full",children:t(l,{content:s,isUser:n,isSystem:!1,rendererRegistry:r,defaultRenderer:o,onAddToCart:c})},`standalone-${a}`)),i&&t("span",{className:`
+              px-2 text-xs text-gray-400
+              ${n?"text-right":"text-left"}
+            `,children:g(e.timestamp)})]})})};export{h as ChatMessage};
+//# sourceMappingURL=ChatMessage.js.map

package/dist/esm/components/LiveChatWidget/components/ChatMessage.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/LiveChatWidget/components/ChatMessage.tsx"],
+  "sourcesContent": ["/**\n * \u5355\u6761\u804A\u5929\u6D88\u606F\u7EC4\u4EF6\n * \u663E\u793A\u6D88\u606F\u6C14\u6CE1\u3001\u53D1\u9001\u8005\u3001\u65F6\u95F4\u6233\n * \u57FA\u4E8E specs/livechat-widget/plan.md \u7684\u6D88\u606F\u5C55\u793A\u8BBE\u8BA1\n */\n\nimport React from 'react'\nimport type { Message, MessageRenderer } from '../types'\nimport { MessageContent } from './MessageContent'\nimport { MessageRendererRegistry } from '../utils/messageRenderers'\n\nexport interface ChatMessageProps {\n  /**\n   * \u6D88\u606F\u6570\u636E\n   */\n  message: Message\n\n  /**\n   * \u81EA\u5B9A\u4E49\u6E32\u67D3\u5668\u6CE8\u518C\u8868\n   */\n  rendererRegistry?: MessageRendererRegistry\n\n  /**\n   * \u9ED8\u8BA4\u6E32\u67D3\u5668\n   */\n  defaultRenderer?: MessageRenderer\n\n  /**\n   * \u662F\u5426\u663E\u793A\u65F6\u95F4\u6233\n   * @default true\n   */\n  showTimestamp?: boolean\n\n  /**\n   * \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D\n   */\n  className?: string\n\n  /**\n   * \u5546\u54C1\u6DFB\u52A0\u5230\u8D2D\u7269\u8F66\u56DE\u8C03\n   */\n  onAddToCart?: (product: any) => void\n}\n\n/**\n * \u683C\u5F0F\u5316\u65F6\u95F4\u6233\u4E3A\u53EF\u8BFB\u683C\u5F0F\n * @param timestamp Unix \u65F6\u95F4\u6233\uFF08\u6BEB\u79D2\uFF09\n * @returns \u683C\u5F0F\u5316\u540E\u7684\u65F6\u95F4\u5B57\u7B26\u4E32 (\u5982 \"14:30\")\n */\nfunction formatTimestamp(timestamp: number): string {\n  const date = new Date(timestamp)\n  const hours = date.getHours().toString().padStart(2, '0')\n  const minutes = date.getMinutes().toString().padStart(2, '0')\n  return `${hours}:${minutes}`\n}\n\n/**\n * \u5355\u6761\u804A\u5929\u6D88\u606F\u7EC4\u4EF6\n *\n * \u529F\u80FD\uFF1A\n * - \u663E\u793A\u6D88\u606F\u6C14\u6CE1\uFF08\u7528\u6237 vs AI \u52A9\u624B\u4E0D\u540C\u6837\u5F0F\uFF09\n * - \u652F\u6301\u591A\u4E2A content \u5757\uFF08\u4E00\u6761\u6D88\u606F\u53EF\u5305\u542B\u591A\u79CD\u5185\u5BB9\u7C7B\u578B\uFF09\n * - \u663E\u793A\u65F6\u95F4\u6233\n * - \u7CFB\u7EDF\u6D88\u606F\u5C45\u4E2D\u663E\u793A\n *\n * \u6837\u5F0F\u89C4\u5219\uFF1A\n * - \u7528\u6237\u6D88\u606F\uFF1A\u53F3\u5BF9\u9F50\uFF0C\u7070\u8272\u80CC\u666F\n * - AI \u52A9\u624B\u6D88\u606F\uFF1A\u5DE6\u5BF9\u9F50\uFF0C\u767D\u8272\u80CC\u666F\n * - \u7CFB\u7EDF\u6D88\u606F\uFF1A\u5C45\u4E2D\uFF0C\u9EC4\u8272\u80CC\u666F\n *\n * @example\n * ```tsx\n * <ChatMessage\n *   message={message}\n *   rendererRegistry={customRegistry}\n *   showTimestamp={true}\n * />\n * ```\n */\nexport const ChatMessage: React.FC<ChatMessageProps> = ({\n  message,\n  rendererRegistry,\n  defaultRenderer,\n  showTimestamp = true,\n  className = '',\n  onAddToCart,\n}) => {\n  const isUser = message.role === 'user'\n  const isAssistant = message.role === 'assistant'\n  const isSystem = message.role === 'system'\n  const isTool = message.role === 'tool'\n\n  // \u7CFB\u7EDF\u6D88\u606F\u7279\u6B8A\u5904\u7406\uFF08\u5C45\u4E2D\u663E\u793A\uFF09\n  if (isSystem) {\n    return (\n      <div className={`flex justify-center py-2 ${className}`}>\n        <div className=\"max-w-xs rounded-lg border border-yellow-200 bg-yellow-50 px-4 py-2\">\n          {message.content.map((content, index) => (\n            <MessageContent\n              key={index}\n              content={content}\n              isUser={false}\n              isSystem={true}\n              rendererRegistry={rendererRegistry}\n              defaultRenderer={defaultRenderer}\n            />\n          ))}\n        </div>\n      </div>\n    )\n  }\n\n  // \u5DE5\u5177\u6D88\u606F\uFF08\u901A\u5E38\u4E0D\u663E\u793A\uFF0C\u6216\u663E\u793A\u4E3A\u7CFB\u7EDF\u6D88\u606F\uFF09\n  if (isTool) {\n    return null\n  }\n\n  // \u5206\u79BB\u5185\u5BB9\u7C7B\u578B\uFF1A\u9700\u8981\u72EC\u7ACB\u6E32\u67D3\u7684\u7ED3\u6784\u5316\u5185\u5BB9\n  const structuredContentTypes = ['product_list', 'product_comparison', 'faq_list', 'promotion_list', 'cart']\n\n  // \u5C06\u5185\u5BB9\u5206\u4E3A\u4E24\u7EC4\uFF1A\u6C14\u6CE1\u5185\u5BB9 \u548C \u72EC\u7ACB\u5185\u5BB9\n  const bubbleContent = message.content.filter(c => !structuredContentTypes.includes(c.type))\n  const standaloneContent = message.content.filter(c => structuredContentTypes.includes(c.type))\n\n  // \u7528\u6237/\u52A9\u624B\u6D88\u606F\n  return (\n    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} py-2 ${className}`}>\n      <div className=\"flex w-fit max-w-full flex-col gap-2\">\n        {/* \u6D88\u606F\u6C14\u6CE1\uFF08\u4EC5\u5305\u542B\u6587\u672C\u548C\u5FEB\u6377\u56DE\u590D\u7B49\uFF09 */}\n        {bubbleContent.length > 0 && (\n          <div\n            className={`w-full min-w-0 overflow-hidden rounded-2xl px-4 py-2 ${isUser ? 'rounded-br-sm text-white' : 'rounded-bl-sm  text-[#1D1D1F]'}`}\n            style={{\n              backgroundColor: isUser ? '#005D8E' : '#F5F6F7',\n            }}\n          >\n            {/* \u6E32\u67D3\u6C14\u6CE1\u5185\u7684\u5185\u5BB9\u5757 */}\n            <div className=\"flex w-full min-w-0 flex-col gap-2\">\n              {bubbleContent.map((content, index) => (\n                <MessageContent\n                  key={index}\n                  content={content}\n                  isUser={isUser}\n                  isSystem={false}\n                  rendererRegistry={rendererRegistry}\n                  defaultRenderer={defaultRenderer}\n                  onAddToCart={onAddToCart}\n                />\n              ))}\n            </div>\n          </div>\n        )}\n\n        {/* \u72EC\u7ACB\u6E32\u67D3\u7684\u7ED3\u6784\u5316\u5185\u5BB9\uFF08\u4E0D\u5728\u6C14\u6CE1\u5185\uFF09 */}\n        {standaloneContent.map((content, index) => (\n          <div key={`standalone-${index}`} className=\"w-full\">\n            <MessageContent\n              content={content}\n              isUser={isUser}\n              isSystem={false}\n              rendererRegistry={rendererRegistry}\n              defaultRenderer={defaultRenderer}\n              onAddToCart={onAddToCart}\n            />\n          </div>\n        ))}\n\n        {/* \u65F6\u95F4\u6233 */}\n        {showTimestamp && (\n          <span\n            className={`\n              px-2 text-xs text-gray-400\n              ${isUser ? 'text-right' : 'text-left'}\n            `}\n          >\n            {formatTimestamp(message.timestamp)}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "AAkGY,cAAAA,EA6BN,QAAAC,MA7BM,oBA1FZ,OAAS,kBAAAC,MAAsB,mBAyC/B,SAASC,EAAgBC,EAA2B,CAClD,MAAMC,EAAO,IAAI,KAAKD,CAAS,EACzBE,EAAQD,EAAK,SAAS,EAAE,SAAS,EAAE,SAAS,EAAG,GAAG,EAClDE,EAAUF,EAAK,WAAW,EAAE,SAAS,EAAE,SAAS,EAAG,GAAG,EAC5D,MAAO,GAAGC,CAAK,IAAIC,CAAO,EAC5B,CAyBO,MAAMC,EAA0C,CAAC,CACtD,QAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,cAAAC,EAAgB,GAChB,UAAAC,EAAY,GACZ,YAAAC,CACF,IAAM,CACJ,MAAMC,EAASN,EAAQ,OAAS,OAC1BO,EAAcP,EAAQ,OAAS,YAC/BQ,EAAWR,EAAQ,OAAS,SAC5BS,EAAST,EAAQ,OAAS,OAGhC,GAAIQ,EACF,OACEjB,EAAC,OAAI,UAAW,4BAA4Ba,CAAS,GACnD,SAAAb,EAAC,OAAI,UAAU,sEACZ,SAAAS,EAAQ,QAAQ,IAAI,CAACU,EAASC,IAC7BpB,EAACE,EAAA,CAEC,QAASiB,EACT,OAAQ,GACR,SAAU,GACV,iBAAkBT,EAClB,gBAAiBC,GALZS,CAMP,CACD,EACH,EACF,EAKJ,GAAIF,EACF,OAAO,KAIT,MAAMG,EAAyB,CAAC,eAAgB,qBAAsB,WAAY,iBAAkB,MAAM,EAGpGC,EAAgBb,EAAQ,QAAQ,OAAOc,GAAK,CAACF,EAAuB,SAASE,EAAE,IAAI,CAAC,EACpFC,EAAoBf,EAAQ,QAAQ,OAAOc,GAAKF,EAAuB,SAASE,EAAE,IAAI,CAAC,EAG7F,OACEvB,EAAC,OAAI,UAAW,QAAQe,EAAS,cAAgB,eAAe,SAASF,CAAS,GAChF,SAAAZ,EAAC,OAAI,UAAU,uCAEZ,UAAAqB,EAAc,OAAS,GACtBtB,EAAC,OACC,UAAW,wDAAwDe,EAAS,2BAA6B,+BAA+B,GACxI,MAAO,CACL,gBAAiBA,EAAS,UAAY,SACxC,EAGA,SAAAf,EAAC,OAAI,UAAU,qCACZ,SAAAsB,EAAc,IAAI,CAACH,EAASC,IAC3BpB,EAACE,EAAA,CAEC,QAASiB,EACT,OAAQJ,EACR,SAAU,GACV,iBAAkBL,EAClB,gBAAiBC,EACjB,YAAaG,GANRM,CAOP,CACD,EACH,EACF,EAIDI,EAAkB,IAAI,CAACL,EAASC,IAC/BpB,EAAC,OAAgC,UAAU,SACzC,SAAAA,EAACE,EAAA,CACC,QAASiB,EACT,OAAQJ,EACR,SAAU,GACV,iBAAkBL,EAClB,gBAAiBC,EACjB,YAAaG,EACf,GARQ,cAAcM,CAAK,EAS7B,CACD,EAGAR,GACCZ,EAAC,QACC,UAAW;AAAA;AAAA,gBAEPe,EAAS,aAAe,WAAW;AAAA,cAGtC,SAAAZ,EAAgBM,EAAQ,SAAS,EACpC,GAEJ,EACF,CAEJ",
+  "names": ["jsx", "jsxs", "MessageContent", "formatTimestamp", "timestamp", "date", "hours", "minutes", "ChatMessage", "message", "rendererRegistry", "defaultRenderer", "showTimestamp", "className", "onAddToCart", "isUser", "isAssistant", "isSystem", "isTool", "content", "index", "structuredContentTypes", "bubbleContent", "c", "standaloneContent"]
+}

package/dist/esm/components/LiveChatWidget/components/ChatWindow.d.ts

@@ -0,0 +1,127 @@
+/**
+ * 聊天窗口容器组件
+ * 包含头部、消息列表、输入框的完整聊天界面
+ * 基于 specs/livechat-widget/plan.md 的窗口设计
+ */
+import React from 'react';
+import type { Message, MessageRenderer } from '../types';
+import { MessageRendererRegistry } from '../utils/messageRenderers';
+export interface ChatWindowProps {
+    /**
+     * 消息列表
+     */
+    messages: Message[];
+    /**
+     * 输入框当前值
+     */
+    inputValue: string;
+    /**
+     * 输入框值变化回调
+     */
+    onInputChange: (value: string) => void;
+    /**
+     * 发送消息回调
+     */
+    onSend: () => void;
+    /**
+     * 关闭窗口回调
+     */
+    onClose?: () => void;
+    /**
+     * 新会话回调
+     */
+    onNewSession?: () => void;
+    /**
+     * 头部标题
+     */
+    title?: string;
+    /**
+     * Logo URL
+     */
+    logoUrl?: string;
+    /**
+     * 是否正在发送消息
+     * @default false
+     */
+    isSending?: boolean;
+    /**
+     * 是否正在加载历史消息
+     * @default false
+     */
+    isLoadingHistory?: boolean;
+    /**
+     * 是否显示时间戳
+     * @default true
+     */
+    showTimestamp?: boolean;
+    /**
+     * 是否自动滚动
+     * @default true
+     */
+    autoScroll?: boolean;
+    /**
+     * 自定义渲染器注册表
+     */
+    rendererRegistry?: MessageRendererRegistry;
+    /**
+     * 默认渲染器
+     */
+    defaultRenderer?: MessageRenderer;
+    /**
+     * 输入框占位符
+     */
+    inputPlaceholder?: string;
+    /**
+     * 自定义样式类名
+     */
+    className?: string;
+    /**
+     * 商品添加到购物车回调
+     */
+    onAddToCart?: (product: any) => void;
+    /**
+     * 是否显示新会话按钮
+     * @default true
+     */
+    showNewSessionButton?: boolean;
+}
+/**
+ * 聊天窗口容器组件
+ *
+ * 功能：
+ * - 组合头部、消息列表、输入框
+ * - 响应式布局（移动端全屏，桌面端固定尺寸）
+ * - 动画进入/退出效果
+ *
+ * 布局结构：
+ * ```
+ * ┌─────────────────────┐
+ * │  ChatHeader         │ (固定顶部)
+ * ├─────────────────────┤
+ * │  MessageList        │ (可滚动区域)
+ * │  (flex-1)           │
+ * ├─────────────────────┤
+ * │  ChatInput          │ (固定底部)
+ * └─────────────────────┘
+ * ```
+ *
+ * 响应式设计：
+ * - 移动端 (< 768px): 全屏显示
+ * - 平板及以上 (>= 768px): 固定尺寸弹窗
+ *
+ * @example
+ * ```tsx
+ * <ChatWindow
+ *   messages={messages}
+ *   inputValue={inputValue}
+ *   onInputChange={setInputValue}
+ *   onSend={handleSend}
+ *   onClose={() => setIsOpen(false)}
+ *   onNewSession={handleNewSession}
+ *   isSending={isStreaming}
+ *   title="AI 助手"
+ *   logoUrl="/logo.png"
+ * />
+ * ```
+ */
+export declare const ChatWindow: React.FC<ChatWindowProps>;

package/dist/esm/components/LiveChatWidget/components/ChatWindow.js

@@ -0,0 +1,2 @@
+import{jsx as n,jsxs as U}from"react/jsx-runtime";import{useState as s,useRef as i,useEffect as v}from"react";import{ChatHeader as z}from"./ChatHeader";import{MessageList as $}from"./MessageList";import{ChatInput as B}from"./ChatInput";const O=({messages:f,inputValue:p,onInputChange:w,onSend:R,onClose:b,onNewSession:E,title:M,logoUrl:y,isSending:C=!1,isLoadingHistory:S=!1,showTimestamp:L=!0,autoScroll:x=!0,rendererRegistry:D,defaultRenderer:H,inputPlaceholder:T,className:Y="",onAddToCart:N,showNewSessionButton:P=!0})=>{const[a,W]=s(375),[d,c]=s(!1),l=i(0),u=i(375),o=i(null),[h,A]=s(()=>typeof window<"u"?window.innerWidth<768:!1);v(()=>{const e=()=>{A(window.innerWidth<768)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const g=e=>{if(!h)return;c(!0);const t="touches"in e?e.touches[0].clientY:e.clientY;l.current=t,u.current=a,e.preventDefault()};return v(()=>{if(!d)return;const e=r=>{const I="touches"in r?r.touches[0].clientY:r.clientY,k=l.current-I,m=Math.max(375,Math.min(window.innerHeight*.9,u.current+k));W(m),o.current&&o.current.style.setProperty("--livechat-mobile-height",`${m}px`)},t=()=>{c(!1)};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",t),document.addEventListener("touchmove",e,{passive:!1}),document.addEventListener("touchend",t),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",t),document.removeEventListener("touchmove",e),document.removeEventListener("touchend",t)}},[d]),U("div",{ref:o,className:`livechat-window flex flex-col overflow-hidden bg-white ${Y}`,style:{borderRadius:"16px","--livechat-mobile-height":`${a}px`},children:[h&&n("div",{className:"flex cursor-ns-resize items-center justify-center",style:{touchAction:"none",backgroundColor:"#ffffff",paddingTop:"8px"},onMouseDown:g,onTouchStart:g,children:n("div",{style:{width:"64px",height:"6px",borderRadius:"999px",backgroundColor:"#DADCE0"}})}),n(z,{title:M,logoUrl:y,onClose:b,onNewSession:E,showNewSessionButton:P}),n($,{messages:f,rendererRegistry:D,defaultRenderer:H,showTimestamp:L,autoScroll:x,isLoadingHistory:S,onAddToCart:N}),n(B,{value:p,onChange:w,onSend:R,placeholder:T,disabled:C})]})};export{O as ChatWindow};
+//# sourceMappingURL=ChatWindow.js.map

package/dist/esm/components/LiveChatWidget/components/ChatWindow.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/LiveChatWidget/components/ChatWindow.tsx"],
+  "sourcesContent": ["/**\n * \u804A\u5929\u7A97\u53E3\u5BB9\u5668\u7EC4\u4EF6\n * \u5305\u542B\u5934\u90E8\u3001\u6D88\u606F\u5217\u8868\u3001\u8F93\u5165\u6846\u7684\u5B8C\u6574\u804A\u5929\u754C\u9762\n * \u57FA\u4E8E specs/livechat-widget/plan.md \u7684\u7A97\u53E3\u8BBE\u8BA1\n */\n\nimport React, { useState, useRef, useEffect } from 'react'\nimport type { Message, MessageRenderer } from '../types'\nimport { ChatHeader } from './ChatHeader'\nimport { MessageList } from './MessageList'\nimport { ChatInput } from './ChatInput'\nimport { MessageRendererRegistry } from '../utils/messageRenderers'\n\nexport interface ChatWindowProps {\n  /**\n   * \u6D88\u606F\u5217\u8868\n   */\n  messages: Message[]\n\n  /**\n   * \u8F93\u5165\u6846\u5F53\u524D\u503C\n   */\n  inputValue: string\n\n  /**\n   * \u8F93\u5165\u6846\u503C\u53D8\u5316\u56DE\u8C03\n   */\n  onInputChange: (value: string) => void\n\n  /**\n   * \u53D1\u9001\u6D88\u606F\u56DE\u8C03\n   */\n  onSend: () => void\n\n  /**\n   * \u5173\u95ED\u7A97\u53E3\u56DE\u8C03\n   */\n  onClose?: () => void\n\n  /**\n   * \u65B0\u4F1A\u8BDD\u56DE\u8C03\n   */\n  onNewSession?: () => void\n\n  /**\n   * \u5934\u90E8\u6807\u9898\n   */\n  title?: string\n\n  /**\n   * Logo URL\n   */\n  logoUrl?: string\n\n  /**\n   * \u662F\u5426\u6B63\u5728\u53D1\u9001\u6D88\u606F\n   * @default false\n   */\n  isSending?: boolean\n\n  /**\n   * \u662F\u5426\u6B63\u5728\u52A0\u8F7D\u5386\u53F2\u6D88\u606F\n   * @default false\n   */\n  isLoadingHistory?: boolean\n\n  /**\n   * \u662F\u5426\u663E\u793A\u65F6\u95F4\u6233\n   * @default true\n   */\n  showTimestamp?: boolean\n\n  /**\n   * \u662F\u5426\u81EA\u52A8\u6EDA\u52A8\n   * @default true\n   */\n  autoScroll?: boolean\n\n  /**\n   * \u81EA\u5B9A\u4E49\u6E32\u67D3\u5668\u6CE8\u518C\u8868\n   */\n  rendererRegistry?: MessageRendererRegistry\n\n  /**\n   * \u9ED8\u8BA4\u6E32\u67D3\u5668\n   */\n  defaultRenderer?: MessageRenderer\n\n  /**\n   * \u8F93\u5165\u6846\u5360\u4F4D\u7B26\n   */\n  inputPlaceholder?: string\n\n  /**\n   * \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D\n   */\n  className?: string\n\n  /**\n   * \u5546\u54C1\u6DFB\u52A0\u5230\u8D2D\u7269\u8F66\u56DE\u8C03\n   */\n  onAddToCart?: (product: any) => void\n\n  /**\n   * \u662F\u5426\u663E\u793A\u65B0\u4F1A\u8BDD\u6309\u94AE\n   * @default true\n   */\n  showNewSessionButton?: boolean\n}\n\n/**\n * \u804A\u5929\u7A97\u53E3\u5BB9\u5668\u7EC4\u4EF6\n *\n * \u529F\u80FD\uFF1A\n * - \u7EC4\u5408\u5934\u90E8\u3001\u6D88\u606F\u5217\u8868\u3001\u8F93\u5165\u6846\n * - \u54CD\u5E94\u5F0F\u5E03\u5C40\uFF08\u79FB\u52A8\u7AEF\u5168\u5C4F\uFF0C\u684C\u9762\u7AEF\u56FA\u5B9A\u5C3A\u5BF8\uFF09\n * - \u52A8\u753B\u8FDB\u5165/\u9000\u51FA\u6548\u679C\n *\n * \u5E03\u5C40\u7ED3\u6784\uFF1A\n * ```\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502  ChatHeader         \u2502 (\u56FA\u5B9A\u9876\u90E8)\n * \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n * \u2502  MessageList        \u2502 (\u53EF\u6EDA\u52A8\u533A\u57DF)\n * \u2502  (flex-1)           \u2502\n * \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n * \u2502  ChatInput          \u2502 (\u56FA\u5B9A\u5E95\u90E8)\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ```\n *\n * \u54CD\u5E94\u5F0F\u8BBE\u8BA1\uFF1A\n * - \u79FB\u52A8\u7AEF (< 768px): \u5168\u5C4F\u663E\u793A\n * - \u5E73\u677F\u53CA\u4EE5\u4E0A (>= 768px): \u56FA\u5B9A\u5C3A\u5BF8\u5F39\u7A97\n *\n * @example\n * ```tsx\n * <ChatWindow\n *   messages={messages}\n *   inputValue={inputValue}\n *   onInputChange={setInputValue}\n *   onSend={handleSend}\n *   onClose={() => setIsOpen(false)}\n *   onNewSession={handleNewSession}\n *   isSending={isStreaming}\n *   title=\"AI \u52A9\u624B\"\n *   logoUrl=\"/logo.png\"\n * />\n * ```\n */\nexport const ChatWindow: React.FC<ChatWindowProps> = ({\n  messages,\n  inputValue,\n  onInputChange,\n  onSend,\n  onClose,\n  onNewSession,\n  title,\n  logoUrl,\n  isSending = false,\n  isLoadingHistory = false,\n  showTimestamp = true,\n  autoScroll = true,\n  rendererRegistry,\n  defaultRenderer,\n  inputPlaceholder,\n  className = '',\n  onAddToCart,\n  showNewSessionButton = true,\n}) => {\n  // \u79FB\u52A8\u7AEF\u9AD8\u5EA6\u8C03\u8282\u72B6\u6001\uFF08\u9ED8\u8BA4375px\uFF09\n  const [mobileHeight, setMobileHeight] = useState(375)\n  const [isDragging, setIsDragging] = useState(false)\n  const dragStartY = useRef(0)\n  const dragStartHeight = useRef(375)\n  const windowRef = useRef<HTMLDivElement>(null)\n\n  // \u68C0\u6D4B\u662F\u5426\u4E3A\u79FB\u52A8\u7AEF\uFF08\u521D\u59CB\u5316\u65F6\u7ACB\u5373\u68C0\u6D4B\uFF09\n  const [isMobile, setIsMobile] = useState(() => {\n    if (typeof window !== 'undefined') {\n      return window.innerWidth < 768\n    }\n    return false\n  })\n\n  useEffect(() => {\n    const checkMobile = () => {\n      setIsMobile(window.innerWidth < 768)\n    }\n    window.addEventListener('resize', checkMobile)\n    return () => window.removeEventListener('resize', checkMobile)\n  }, [])\n\n  // \u62D6\u62FD\u5F00\u59CB\n  const handleDragStart = (e: React.MouseEvent | React.TouchEvent) => {\n    if (!isMobile) return\n\n    setIsDragging(true)\n    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY\n    dragStartY.current = clientY\n    dragStartHeight.current = mobileHeight\n\n    // \u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n    e.preventDefault()\n  }\n\n  // \u62D6\u62FD\u4E2D\n  useEffect(() => {\n    if (!isDragging) return\n\n    const handleDragMove = (e: MouseEvent | TouchEvent) => {\n      const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY\n      const deltaY = dragStartY.current - clientY // \u5411\u4E0A\u62D6\u52A8\u4E3A\u6B63\u503C\n      const newHeight = Math.max(375, Math.min(window.innerHeight * 0.9, dragStartHeight.current + deltaY))\n\n      setMobileHeight(newHeight)\n\n      // \u66F4\u65B0CSS\u53D8\u91CF\n      if (windowRef.current) {\n        windowRef.current.style.setProperty('--livechat-mobile-height', `${newHeight}px`)\n      }\n    }\n\n    const handleDragEnd = () => {\n      setIsDragging(false)\n    }\n\n    document.addEventListener('mousemove', handleDragMove)\n    document.addEventListener('mouseup', handleDragEnd)\n    document.addEventListener('touchmove', handleDragMove, { passive: false })\n    document.addEventListener('touchend', handleDragEnd)\n\n    return () => {\n      document.removeEventListener('mousemove', handleDragMove)\n      document.removeEventListener('mouseup', handleDragEnd)\n      document.removeEventListener('touchmove', handleDragMove)\n      document.removeEventListener('touchend', handleDragEnd)\n    }\n  }, [isDragging])\n\n  return (\n    <div\n      ref={windowRef}\n      className={`livechat-window flex flex-col overflow-hidden bg-white ${className}`}\n      style={\n        {\n          borderRadius: '16px',\n          '--livechat-mobile-height': `${mobileHeight}px`,\n        } as React.CSSProperties\n      }\n    >\n      {/* \u79FB\u52A8\u7AEF\u62D6\u62FD\u624B\u67C4 */}\n      {isMobile && (\n        <div\n          className=\"flex cursor-ns-resize items-center justify-center\"\n          style={{\n            touchAction: 'none',\n            backgroundColor: '#ffffff',\n            paddingTop: '8px',\n          }}\n          onMouseDown={handleDragStart}\n          onTouchStart={handleDragStart}\n        >\n          <div\n            style={{\n              width: '64px',\n              height: '6px',\n              borderRadius: '999px',\n              backgroundColor: '#DADCE0',\n            }}\n          />\n        </div>\n      )}\n\n      {/* \u5934\u90E8 */}\n      <ChatHeader\n        title={title}\n        logoUrl={logoUrl}\n        onClose={onClose}\n        onNewSession={onNewSession}\n        showNewSessionButton={showNewSessionButton}\n      />\n\n      {/* \u6D88\u606F\u5217\u8868\uFF08\u53EF\u6EDA\u52A8\u533A\u57DF\uFF09 */}\n      <MessageList\n        messages={messages}\n        rendererRegistry={rendererRegistry}\n        defaultRenderer={defaultRenderer}\n        showTimestamp={showTimestamp}\n        autoScroll={autoScroll}\n        isLoadingHistory={isLoadingHistory}\n        onAddToCart={onAddToCart}\n      />\n\n      {/* \u8F93\u5165\u6846 */}\n      <ChatInput\n        value={inputValue}\n        onChange={onInputChange}\n        onSend={onSend}\n        placeholder={inputPlaceholder}\n        disabled={isSending}\n      />\n    </div>\n  )\n}\n"],
+  "mappings": "AAgPI,OAsBM,OAAAA,EAtBN,QAAAC,MAAA,oBA1OJ,OAAgB,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,MAAiB,QAEnD,OAAS,cAAAC,MAAkB,eAC3B,OAAS,eAAAC,MAAmB,gBAC5B,OAAS,aAAAC,MAAiB,cA2InB,MAAMC,EAAwC,CAAC,CACpD,SAAAC,EACA,WAAAC,EACA,cAAAC,EACA,OAAAC,EACA,QAAAC,EACA,aAAAC,EACA,MAAAC,EACA,QAAAC,EACA,UAAAC,EAAY,GACZ,iBAAAC,EAAmB,GACnB,cAAAC,EAAgB,GAChB,WAAAC,EAAa,GACb,iBAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,UAAAC,EAAY,GACZ,YAAAC,EACA,qBAAAC,EAAuB,EACzB,IAAM,CAEJ,KAAM,CAACC,EAAcC,CAAe,EAAI1B,EAAS,GAAG,EAC9C,CAAC2B,EAAYC,CAAa,EAAI5B,EAAS,EAAK,EAC5C6B,EAAa5B,EAAO,CAAC,EACrB6B,EAAkB7B,EAAO,GAAG,EAC5B8B,EAAY9B,EAAuB,IAAI,EAGvC,CAAC+B,EAAUC,CAAW,EAAIjC,EAAS,IACnC,OAAO,OAAW,IACb,OAAO,WAAa,IAEtB,EACR,EAEDE,EAAU,IAAM,CACd,MAAMgC,EAAc,IAAM,CACxBD,EAAY,OAAO,WAAa,GAAG,CACrC,EACA,cAAO,iBAAiB,SAAUC,CAAW,EACtC,IAAM,OAAO,oBAAoB,SAAUA,CAAW,CAC/D,EAAG,CAAC,CAAC,EAGL,MAAMC,EAAmB,GAA2C,CAClE,GAAI,CAACH,EAAU,OAEfJ,EAAc,EAAI,EAClB,MAAMQ,EAAU,YAAa,EAAI,EAAE,QAAQ,CAAC,EAAE,QAAU,EAAE,QAC1DP,EAAW,QAAUO,EACrBN,EAAgB,QAAUL,EAG1B,EAAE,eAAe,CACnB,EAGA,OAAAvB,EAAU,IAAM,CACd,GAAI,CAACyB,EAAY,OAEjB,MAAMU,EAAkBC,GAA+B,CACrD,MAAMF,EAAU,YAAaE,EAAIA,EAAE,QAAQ,CAAC,EAAE,QAAUA,EAAE,QACpDC,EAASV,EAAW,QAAUO,EAC9BI,EAAY,KAAK,IAAI,IAAK,KAAK,IAAI,OAAO,YAAc,GAAKV,EAAgB,QAAUS,CAAM,CAAC,EAEpGb,EAAgBc,CAAS,EAGrBT,EAAU,SACZA,EAAU,QAAQ,MAAM,YAAY,2BAA4B,GAAGS,CAAS,IAAI,CAEpF,EAEMC,EAAgB,IAAM,CAC1Bb,EAAc,EAAK,CACrB,EAEA,gBAAS,iBAAiB,YAAaS,CAAc,EACrD,SAAS,iBAAiB,UAAWI,CAAa,EAClD,SAAS,iBAAiB,YAAaJ,EAAgB,CAAE,QAAS,EAAM,CAAC,EACzE,SAAS,iBAAiB,WAAYI,CAAa,EAE5C,IAAM,CACX,SAAS,oBAAoB,YAAaJ,CAAc,EACxD,SAAS,oBAAoB,UAAWI,CAAa,EACrD,SAAS,oBAAoB,YAAaJ,CAAc,EACxD,SAAS,oBAAoB,WAAYI,CAAa,CACxD,CACF,EAAG,CAACd,CAAU,CAAC,EAGb5B,EAAC,OACC,IAAKgC,EACL,UAAW,0DAA0DT,CAAS,GAC9E,MACE,CACE,aAAc,OACd,2BAA4B,GAAGG,CAAY,IAC7C,EAID,UAAAO,GACClC,EAAC,OACC,UAAU,oDACV,MAAO,CACL,YAAa,OACb,gBAAiB,UACjB,WAAY,KACd,EACA,YAAaqC,EACb,aAAcA,EAEd,SAAArC,EAAC,OACC,MAAO,CACL,MAAO,OACP,OAAQ,MACR,aAAc,QACd,gBAAiB,SACnB,EACF,EACF,EAIFA,EAACK,EAAA,CACC,MAAOU,EACP,QAASC,EACT,QAASH,EACT,aAAcC,EACd,qBAAsBY,EACxB,EAGA1B,EAACM,EAAA,CACC,SAAUG,EACV,iBAAkBY,EAClB,gBAAiBC,EACjB,cAAeH,EACf,WAAYC,EACZ,iBAAkBF,EAClB,YAAaO,EACf,EAGAzB,EAACO,EAAA,CACC,MAAOG,EACP,SAAUC,EACV,OAAQC,EACR,YAAaW,EACb,SAAUN,EACZ,GACF,CAEJ",
+  "names": ["jsx", "jsxs", "useState", "useRef", "useEffect", "ChatHeader", "MessageList", "ChatInput", "ChatWindow", "messages", "inputValue", "onInputChange", "onSend", "onClose", "onNewSession", "title", "logoUrl", "isSending", "isLoadingHistory", "showTimestamp", "autoScroll", "rendererRegistry", "defaultRenderer", "inputPlaceholder", "className", "onAddToCart", "showNewSessionButton", "mobileHeight", "setMobileHeight", "isDragging", "setIsDragging", "dragStartY", "dragStartHeight", "windowRef", "isMobile", "setIsMobile", "checkMobile", "handleDragStart", "clientY", "handleDragMove", "e", "deltaY", "newHeight", "handleDragEnd"]
+}

package/dist/esm/components/LiveChatWidget/components/MessageContent/CartCard.d.ts

@@ -0,0 +1,54 @@
+/**
+ * 购物车卡片渲染器
+ * 显示购物车内容、价格汇总和结账按钮
+ * 基于后端返回的购物车数据结构
+ */
+import type { MessageRenderer } from '../../types';
+/**
+ * 购物车卡片渲染器
+ *
+ * 功能：
+ * - 显示购物车商品列表
+ * - 显示价格汇总（小计、折扣、总计）
+ * - 显示折扣码
+ * - 提供 Checkout 按钮
+ * - 空购物车状态
+ *
+ * 布局：
+ * ```
+ * ┌─────────────────────────────────┐
+ * │ 购物车 (3 件商品)               │
+ * ├─────────────────────────────────┤
+ * │ [图] 商品1                      │
+ * │     变体: Black                 │
+ * │     数量: 2      $199.98        │
+ * ├─────────────────────────────────┤
+ * │ [图] 商品2                      │
+ * │     变体: White                 │
+ * │     数量: 1      $99.99         │
+ * ├─────────────────────────────────┤
+ * │ 小计              $299.97       │
+ * │ 折扣 [SPRING20]   -$30.00       │
+ * │ 总计              $269.97       │
+ * ├─────────────────────────────────┤
+ * │        [Checkout 按钮]          │
+ * └─────────────────────────────────┘
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const content: CartContent = {
+ *   type: 'cart',
+ *   data: {
+ *     isEmpty: false,
+ *     cartId: "gid://...",
+ *     totalQuantity: 3,
+ *     lines: [...],
+ *     cost: {...},
+ *     checkoutUrl: "https://..."
+ *   }
+ * }
+ * <CartCard.render(content, false, false) />
+ * ```
+ */
+export declare const CartCard: MessageRenderer;

package/dist/esm/components/LiveChatWidget/components/MessageContent/CartCard.js

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as l}from"react/jsx-runtime";import{CURRENCY_SYMBOLS as g}from"../../constants.js";function m(n){const{amount:r,currencyCode:o}=n,e=g[o]||o,a=parseFloat(r);return`${e}${a.toFixed(2)}`}const p=({line:n})=>{const{quantity:r,merchandise:o,cost:e}=n,{product:a,title:d,image:s}=o,i=s?.url||"",c=parseFloat(e.totalAmount.amount)<parseFloat(e.subtotalAmount.amount)&&e.totalAmount.currencyCode===e.subtotalAmount.currencyCode;return l("div",{className:"flex gap-4",children:[t("div",{className:"shrink-0 overflow-hidden rounded-md",style:{width:"72px",height:"72px"},children:t("img",{src:i,alt:a.title,className:"size-full object-cover",loading:"lazy"})}),t("div",{className:"flex flex-1 flex-col",children:l("div",{className:"flex items-end justify-between gap-2",children:[l("div",{className:"flex-1",children:[t("h4",{className:"line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]",children:a.title}),d&&t("p",{className:"mt-0.5 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56]",children:d}),l("p",{className:"mt-1 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]",children:["\xD7",r]})]}),l("div",{className:"flex gap-1 text-right",children:[t("div",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-gray-900",children:m(e.totalAmount)}),c&&t("div",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56] line-through",children:m(e.subtotalAmount)})]})]})})]})},x=({total:n})=>t("div",{className:"border-t border-gray-200 p-4",children:l("div",{className:"flex items-center justify-between",children:[t("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-gray-900",children:"Total"}),t("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-gray-900",children:m(n)})]})}),y={render:n=>{const r=n,{data:o}=r;if(!o)return null;const{isEmpty:e,lines:a,cost:d,checkoutUrl:s,onCart:i,cartId:c}=o,f=()=>{i?i(c,s):s&&window.open(s,"_blank","noopener,noreferrer")};return e||!a||a.length===0?null:l("div",{className:"w-full max-w-md overflow-hidden rounded-2xl shadow-sm",style:{backgroundColor:"#F5F6F7"},children:[t("div",{className:"flex max-h-[400px] flex-col gap-4 overflow-y-auto p-3",children:a.map(u=>t(p,{line:u},u.id))}),t(x,{total:d.totalAmount}),(s||i)&&t("div",{className:"px-4 pb-4",children:t("button",{type:"button",onClick:f,className:"w-full rounded-full py-[10px] text-center text-sm font-bold leading-[1.4] tracking-[-0.02em] text-white",style:{backgroundColor:"#1D1D1F"},children:"View More"})})]})}};export{y as CartCard};
+//# sourceMappingURL=CartCard.js.map

package/dist/esm/components/LiveChatWidget/components/MessageContent/CartCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/CartCard.tsx"],
+  "sourcesContent": ["/**\n * \u8D2D\u7269\u8F66\u5361\u7247\u6E32\u67D3\u5668\n * \u663E\u793A\u8D2D\u7269\u8F66\u5185\u5BB9\u3001\u4EF7\u683C\u6C47\u603B\u548C\u7ED3\u8D26\u6309\u94AE\n * \u57FA\u4E8E\u540E\u7AEF\u8FD4\u56DE\u7684\u8D2D\u7269\u8F66\u6570\u636E\u7ED3\u6784\n */\n\nimport React from 'react'\nimport type { MessageRenderer, CartContent, CartLine, CartAmount } from '../../types'\nimport { CURRENCY_SYMBOLS } from '../../constants.js'\n\n/**\n * \u683C\u5F0F\u5316\u91D1\u989D\n * @param amount \u91D1\u989D\u5BF9\u8C61\n * @returns \u683C\u5F0F\u5316\u540E\u7684\u91D1\u989D\u5B57\u7B26\u4E32\uFF08\u5982 \"$99.99\"\uFF09\n */\nfunction formatAmount(amount: CartAmount): string {\n  const { amount: value, currencyCode } = amount\n\n  const symbol = CURRENCY_SYMBOLS[currencyCode] || currencyCode\n  const numValue = parseFloat(value)\n\n  return `${symbol}${numValue.toFixed(2)}`\n}\n\n/**\n * \u8D2D\u7269\u8F66\u5546\u54C1\u884C\u7EC4\u4EF6\n */\nconst CartLineItem: React.FC<{\n  line: CartLine\n}> = ({ line }) => {\n  const { quantity, merchandise, cost } = line\n  const { product, title: variantTitle, image } = merchandise\n\n  // \u5546\u54C1\u56FE\u7247 URL\n  const imageUrl = image?.url || ''\n\n  // \u5224\u65AD\u662F\u5426\u6709\u6298\u6263\uFF08\u603B\u4EF7 < \u539F\u4EF7\uFF09\n  const hasDiscount =\n    parseFloat(cost.totalAmount.amount) < parseFloat(cost.subtotalAmount.amount) &&\n    cost.totalAmount.currencyCode === cost.subtotalAmount.currencyCode\n\n  return (\n    <div className=\"flex gap-4\">\n      {/* \u5546\u54C1\u56FE\u7247 */}\n      <div className=\"shrink-0 overflow-hidden rounded-md\" style={{ width: '72px', height: '72px' }}>\n        <img src={imageUrl} alt={product.title} className=\"size-full object-cover\" loading=\"lazy\" />\n      </div>\n\n      {/* \u5546\u54C1\u4FE1\u606F */}\n      <div className=\"flex flex-1 flex-col\">\n        <div className=\"flex items-end justify-between gap-2\">\n          {/* \u5DE6\u4FA7\uFF1A\u6807\u9898\u3001\u53D8\u4F53\u3001\u6570\u91CF */}\n          <div className=\"flex-1\">\n            <h4 className=\"line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]\">\n              {product.title}\n            </h4>\n            {variantTitle && (\n              <p className=\"mt-0.5 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56]\">{variantTitle}</p>\n            )}\n            <p className=\"mt-1 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]\">\u00D7{quantity}</p>\n          </div>\n\n          {/* \u53F3\u4FA7\uFF1A\u4EF7\u683C */}\n          <div className=\"flex gap-1 text-right\">\n            <div className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-gray-900\">\n              {formatAmount(cost.totalAmount)}\n            </div>\n            {hasDiscount && (\n              <div className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56] line-through\">\n                {formatAmount(cost.subtotalAmount)}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u4EF7\u683C\u6C47\u603B\u7EC4\u4EF6\uFF08\u7B80\u5316\u7248\uFF09\n */\nconst CartSummary: React.FC<{\n  total: CartAmount\n}> = ({ total }) => {\n  return (\n    <div className=\"border-t border-gray-200 p-4\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-gray-900\">Total</span>\n        <span className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-gray-900\">\n          {formatAmount(total)}\n        </span>\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u8D2D\u7269\u8F66\u5361\u7247\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u663E\u793A\u8D2D\u7269\u8F66\u5546\u54C1\u5217\u8868\n * - \u663E\u793A\u4EF7\u683C\u6C47\u603B\uFF08\u5C0F\u8BA1\u3001\u6298\u6263\u3001\u603B\u8BA1\uFF09\n * - \u663E\u793A\u6298\u6263\u7801\n * - \u63D0\u4F9B Checkout \u6309\u94AE\n * - \u7A7A\u8D2D\u7269\u8F66\u72B6\u6001\n *\n * \u5E03\u5C40\uFF1A\n * ```\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 \u8D2D\u7269\u8F66 (3 \u4EF6\u5546\u54C1)               \u2502\n * \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n * \u2502 [\u56FE] \u5546\u54C11                      \u2502\n * \u2502     \u53D8\u4F53: Black                 \u2502\n * \u2502     \u6570\u91CF: 2      $199.98        \u2502\n * \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n * \u2502 [\u56FE] \u5546\u54C12                      \u2502\n * \u2502     \u53D8\u4F53: White                 \u2502\n * \u2502     \u6570\u91CF: 1      $99.99         \u2502\n * \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n * \u2502 \u5C0F\u8BA1              $299.97       \u2502\n * \u2502 \u6298\u6263 [SPRING20]   -$30.00       \u2502\n * \u2502 \u603B\u8BA1              $269.97       \u2502\n * \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n * \u2502        [Checkout \u6309\u94AE]          \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ```\n *\n * @example\n * ```tsx\n * const content: CartContent = {\n *   type: 'cart',\n *   data: {\n *     isEmpty: false,\n *     cartId: \"gid://...\",\n *     totalQuantity: 3,\n *     lines: [...],\n *     cost: {...},\n *     checkoutUrl: \"https://...\"\n *   }\n * }\n * <CartCard.render(content, false, false) />\n * ```\n */\nexport const CartCard: MessageRenderer = {\n  render: content => {\n    const cartContent = content as CartContent\n    const { data } = cartContent\n\n    if (!data) {\n      return null\n    }\n\n    const { isEmpty, lines, cost, checkoutUrl, onCart, cartId } = data\n\n    // \u5904\u7406\u8D2D\u7269\u8F66\u6309\u94AE\u70B9\u51FB\n    const handleCart = () => {\n      if (onCart) {\n        onCart(cartId, checkoutUrl)\n      } else if (checkoutUrl) {\n        window.open(checkoutUrl, '_blank', 'noopener,noreferrer')\n      }\n    }\n\n    // \u7A7A\u8D2D\u7269\u8F66\u72B6\u6001 - \u4E0D\u5C55\u793A\u7EC4\u4EF6\n    if (isEmpty || !lines || lines.length === 0) {\n      return null\n    }\n\n    return (\n      <div className=\"w-full max-w-md overflow-hidden rounded-2xl shadow-sm\" style={{ backgroundColor: '#F5F6F7' }}>\n        {/* \u5546\u54C1\u5217\u8868 */}\n        <div className=\"flex max-h-[400px] flex-col gap-4 overflow-y-auto p-3\">\n          {lines.map(line => (\n            <CartLineItem key={line.id} line={line} />\n          ))}\n        </div>\n\n        {/* \u4EF7\u683C\u6C47\u603B */}\n        <CartSummary total={cost.totalAmount} />\n\n        {/* Checkout \u6309\u94AE */}\n        {(checkoutUrl || onCart) && (\n          <div className=\"px-4 pb-4\">\n            <button\n              type=\"button\"\n              onClick={handleCart}\n              className=\"w-full rounded-full py-[10px] text-center text-sm font-bold leading-[1.4] tracking-[-0.02em] text-white\"\n              style={{ backgroundColor: '#1D1D1F' }}\n            >\n              View More\n            </button>\n          </div>\n        )}\n      </div>\n    )\n  },\n}\n"],
+  "mappings": "AA6CQ,cAAAA,EAcI,QAAAC,MAdJ,oBArCR,OAAS,oBAAAC,MAAwB,qBAOjC,SAASC,EAAaC,EAA4B,CAChD,KAAM,CAAE,OAAQC,EAAO,aAAAC,CAAa,EAAIF,EAElCG,EAASL,EAAiBI,CAAY,GAAKA,EAC3CE,EAAW,WAAWH,CAAK,EAEjC,MAAO,GAAGE,CAAM,GAAGC,EAAS,QAAQ,CAAC,CAAC,EACxC,CAKA,MAAMC,EAED,CAAC,CAAE,KAAAC,CAAK,IAAM,CACjB,KAAM,CAAE,SAAAC,EAAU,YAAAC,EAAa,KAAAC,CAAK,EAAIH,EAClC,CAAE,QAAAI,EAAS,MAAOC,EAAc,MAAAC,CAAM,EAAIJ,EAG1CK,EAAWD,GAAO,KAAO,GAGzBE,EACJ,WAAWL,EAAK,YAAY,MAAM,EAAI,WAAWA,EAAK,eAAe,MAAM,GAC3EA,EAAK,YAAY,eAAiBA,EAAK,eAAe,aAExD,OACEZ,EAAC,OAAI,UAAU,aAEb,UAAAD,EAAC,OAAI,UAAU,sCAAsC,MAAO,CAAE,MAAO,OAAQ,OAAQ,MAAO,EAC1F,SAAAA,EAAC,OAAI,IAAKiB,EAAU,IAAKH,EAAQ,MAAO,UAAU,yBAAyB,QAAQ,OAAO,EAC5F,EAGAd,EAAC,OAAI,UAAU,uBACb,SAAAC,EAAC,OAAI,UAAU,uCAEb,UAAAA,EAAC,OAAI,UAAU,SACb,UAAAD,EAAC,MAAG,UAAU,mFACX,SAAAc,EAAQ,MACX,EACCC,GACCf,EAAC,KAAE,UAAU,2EAA4E,SAAAe,EAAa,EAExGd,EAAC,KAAE,UAAU,2EAA2E,iBAAEU,GAAS,GACrG,EAGAV,EAAC,OAAI,UAAU,wBACb,UAAAD,EAAC,OAAI,UAAU,qEACZ,SAAAG,EAAaU,EAAK,WAAW,EAChC,EACCK,GACClB,EAAC,OAAI,UAAU,mFACZ,SAAAG,EAAaU,EAAK,cAAc,EACnC,GAEJ,GACF,EACF,GACF,CAEJ,EAKMM,EAED,CAAC,CAAE,MAAAC,CAAM,IAEVpB,EAAC,OAAI,UAAU,+BACb,SAAAC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAAC,QAAK,UAAU,qEAAqE,iBAAK,EAC1FA,EAAC,QAAK,UAAU,qEACb,SAAAG,EAAaiB,CAAK,EACrB,GACF,EACF,EAmDSC,EAA4B,CACvC,OAAQC,GAAW,CACjB,MAAMC,EAAcD,EACd,CAAE,KAAAE,CAAK,EAAID,EAEjB,GAAI,CAACC,EACH,OAAO,KAGT,KAAM,CAAE,QAAAC,EAAS,MAAAC,EAAO,KAAAb,EAAM,YAAAc,EAAa,OAAAC,EAAQ,OAAAC,CAAO,EAAIL,EAGxDM,EAAa,IAAM,CACnBF,EACFA,EAAOC,EAAQF,CAAW,EACjBA,GACT,OAAO,KAAKA,EAAa,SAAU,qBAAqB,CAE5D,EAGA,OAAIF,GAAW,CAACC,GAASA,EAAM,SAAW,EACjC,KAIPzB,EAAC,OAAI,UAAU,wDAAwD,MAAO,CAAE,gBAAiB,SAAU,EAEzG,UAAAD,EAAC,OAAI,UAAU,wDACZ,SAAA0B,EAAM,IAAIhB,GACTV,EAACS,EAAA,CAA2B,KAAMC,GAAfA,EAAK,EAAgB,CACzC,EACH,EAGAV,EAACmB,EAAA,CAAY,MAAON,EAAK,YAAa,GAGpCc,GAAeC,IACf5B,EAAC,OAAI,UAAU,YACb,SAAAA,EAAC,UACC,KAAK,SACL,QAAS8B,EACT,UAAU,0GACV,MAAO,CAAE,gBAAiB,SAAU,EACrC,qBAED,EACF,GAEJ,CAEJ,CACF",
+  "names": ["jsx", "jsxs", "CURRENCY_SYMBOLS", "formatAmount", "amount", "value", "currencyCode", "symbol", "numValue", "CartLineItem", "line", "quantity", "merchandise", "cost", "product", "variantTitle", "image", "imageUrl", "hasDiscount", "CartSummary", "total", "CartCard", "content", "cartContent", "data", "isEmpty", "lines", "checkoutUrl", "onCart", "cartId", "handleCart"]
+}

package/dist/esm/components/LiveChatWidget/components/MessageContent/ErrorBlock.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 错误消息渲染器
+ * 显示错误提示信息
+ * 基于 specs/livechat-widget/plan.md 的错误处理设计
+ */
+import type { MessageRenderer } from '../../types';
+/**
+ * 错误消息渲染器
+ *
+ * 功能：
+ * - 显示错误消息
+ * - 红色背景警告样式
+ * - 可选错误代码
+ *
+ * 错误类型：
+ * - 网络错误
+ * - API 错误
+ * - 会话过期
+ * - 其他系统错误
+ *
+ * @example
+ * ```tsx
+ * const content: ErrorContent = {
+ *   type: 'error',
+ *   data: {
+ *     message: '网络连接失败，请重试',
+ *     code: 'NETWORK_ERROR'
+ *   }
+ * }
+ * <ErrorBlock.render(content, false, false) />
+ * ```
+ */
+export declare const ErrorBlock: MessageRenderer;

package/dist/esm/components/LiveChatWidget/components/MessageContent/ErrorBlock.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";const c={render:(o,d,i)=>{const n=o,{message:t,code:s}=n.data;return t?e("div",{className:"flex flex-col gap-1 rounded-lg border border-red-200 bg-red-50 px-3 py-2",children:r("div",{className:"flex items-start gap-2",children:[r("svg",{className:"mt-0.5 size-5 shrink-0 text-red-600",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("line",{x1:"12",y1:"8",x2:"12",y2:"12"}),e("line",{x1:"12",y1:"16",x2:"12.01",y2:"16"})]}),r("div",{className:"flex-1",children:[e("p",{className:"text-sm font-medium text-red-800",children:t}),s&&r("p",{className:"mt-1 font-mono text-xs text-red-600",children:["\u9519\u8BEF\u4EE3\u7801: ",s]})]})]})}):null}};export{c as ErrorBlock};
+//# sourceMappingURL=ErrorBlock.js.map

package/dist/esm/components/LiveChatWidget/components/MessageContent/ErrorBlock.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/ErrorBlock.tsx"],
+  "sourcesContent": ["/**\n * \u9519\u8BEF\u6D88\u606F\u6E32\u67D3\u5668\n * \u663E\u793A\u9519\u8BEF\u63D0\u793A\u4FE1\u606F\n * \u57FA\u4E8E specs/livechat-widget/plan.md \u7684\u9519\u8BEF\u5904\u7406\u8BBE\u8BA1\n */\n\nimport React from 'react'\nimport type { MessageRenderer, ErrorContent } from '../../types'\n\n/**\n * \u9519\u8BEF\u6D88\u606F\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u663E\u793A\u9519\u8BEF\u6D88\u606F\n * - \u7EA2\u8272\u80CC\u666F\u8B66\u544A\u6837\u5F0F\n * - \u53EF\u9009\u9519\u8BEF\u4EE3\u7801\n *\n * \u9519\u8BEF\u7C7B\u578B\uFF1A\n * - \u7F51\u7EDC\u9519\u8BEF\n * - API \u9519\u8BEF\n * - \u4F1A\u8BDD\u8FC7\u671F\n * - \u5176\u4ED6\u7CFB\u7EDF\u9519\u8BEF\n *\n * @example\n * ```tsx\n * const content: ErrorContent = {\n *   type: 'error',\n *   data: {\n *     message: '\u7F51\u7EDC\u8FDE\u63A5\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5',\n *     code: 'NETWORK_ERROR'\n *   }\n * }\n * <ErrorBlock.render(content, false, false) />\n * ```\n */\nexport const ErrorBlock: MessageRenderer = {\n  render: (content, isUser, isSystem) => {\n    const errorContent = content as ErrorContent\n    const { message, code } = errorContent.data\n\n    if (!message) {\n      return null\n    }\n\n    return (\n      <div className=\"flex flex-col gap-1 rounded-lg border border-red-200 bg-red-50 px-3 py-2\">\n        {/* \u9519\u8BEF\u56FE\u6807 + \u6D88\u606F */}\n        <div className=\"flex items-start gap-2\">\n          {/* \u9519\u8BEF\u56FE\u6807 */}\n          <svg\n            className=\"mt-0.5 size-5 shrink-0 text-red-600\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\n            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n          </svg>\n\n          {/* \u9519\u8BEF\u6D88\u606F */}\n          <div className=\"flex-1\">\n            <p className=\"text-sm font-medium text-red-800\">{message}</p>\n\n            {/* \u9519\u8BEF\u4EE3\u7801\uFF08\u53EF\u9009\uFF09 */}\n            {code && <p className=\"mt-1 font-mono text-xs text-red-600\">\u9519\u8BEF\u4EE3\u7801: {code}</p>}\n          </div>\n        </div>\n      </div>\n    )\n  },\n}\n"],
+  "mappings": "AAiDU,OASE,OAAAA,EATF,QAAAC,MAAA,oBAdH,MAAMC,EAA8B,CACzC,OAAQ,CAACC,EAASC,EAAQC,IAAa,CACrC,MAAMC,EAAeH,EACf,CAAE,QAAAI,EAAS,KAAAC,CAAK,EAAIF,EAAa,KAEvC,OAAKC,EAKHP,EAAC,OAAI,UAAU,2EAEb,SAAAC,EAAC,OAAI,UAAU,yBAEb,UAAAA,EAAC,OACC,UAAU,sCACV,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QAEf,UAAAD,EAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,EAC/BA,EAAC,QAAK,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,EACrCA,EAAC,QAAK,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,GAC3C,EAGAC,EAAC,OAAI,UAAU,SACb,UAAAD,EAAC,KAAE,UAAU,mCAAoC,SAAAO,EAAQ,EAGxDC,GAAQP,EAAC,KAAE,UAAU,sCAAsC,uCAAOO,GAAK,GAC1E,GACF,EACF,EA9BO,IAgCX,CACF",
+  "names": ["jsx", "jsxs", "ErrorBlock", "content", "isUser", "isSystem", "errorContent", "message", "code"]
+}

package/dist/esm/components/LiveChatWidget/components/MessageContent/FAQList.d.ts

@@ -0,0 +1,16 @@
+/**
+ * FAQ 列表组件
+ * 显示常见问题列表，支持折叠/展开
+ */
+import React from 'react';
+import type { FAQListContent, MessageRenderer } from '../../types';
+export interface FAQListProps {
+    content: FAQListContent;
+    onQuestionClick?: (question: string) => void;
+}
+/**
+ * FAQ 列表渲染器
+ * 用于注册到 MessageRendererRegistry
+ */
+export declare const FAQListRenderer: MessageRenderer;
+export declare const FAQList: React.FC<FAQListProps>;

package/dist/esm/components/LiveChatWidget/components/MessageContent/FAQList.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as g}from"react";import x from"react-markdown";const N={render:n=>n.type!=="faq_list"?null:e(v,{content:n})},v=({content:n,onQuestionClick:d})=>{const{found:i,count:f,total:b,results:o}=n.data,[l,c]=g(new Set);if(!i||o.length===0)return e("div",{className:"rounded-lg border border-gray-200 bg-white p-4",children:e("p",{className:"text-sm text-gray-500",children:"\u672A\u627E\u5230\u76F8\u5173\u95EE\u9898"})});const p=t=>{c(a=>{const s=new Set(a);return s.has(t)?s.delete(t):s.add(t),s})},u=t=>{d?.(t)};return e("div",{className:"space-y-2",children:e("div",{className:"space-y-2",children:o.map(t=>{const a=l.has(t.id);return r("div",{className:"overflow-hidden rounded-2xl  bg-[#F5F6F7] transition-all",children:[r("button",{onClick:()=>p(t.id),className:"flex w-full items-center justify-between gap-3 p-4 text-left transition-colors ",children:[e("div",{className:"flex-1",children:e("div",{className:"flex items-center gap-2",children:e("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]",children:t.question})})}),e("svg",{className:`size-5 shrink-0 text-[#080A0F] transition-transform ${a?"rotate-180":""}`,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),a&&r("div",{className:" bg-[#F5F6F7] px-4 py-3 pt-0",children:[e("div",{className:"prose prose-sm max-w-none border-t border-gray-100  text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56]",style:{paddingTop:"12px"},children:e(x,{children:t.answer})}),t.relatedQuestions&&t.relatedQuestions.length>0&&r("div",{className:"mt-4 border-t border-gray-200 pt-3",children:[e("p",{className:"mb-2 text-xs font-medium text-gray-500",children:"\u60A8\u53EF\u80FD\u8FD8\u60F3\u4E86\u89E3\uFF1A"}),e("div",{className:"space-y-1",children:t.relatedQuestions.map((s,m)=>e("button",{onClick:()=>u(s),className:"block w-full text-left text-xs text-blue-600 hover:text-blue-700 hover:underline",children:s},m))})]})]})]},t.id)})})})};export{v as FAQList,N as FAQListRenderer};
+//# sourceMappingURL=FAQList.js.map