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

package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductComparison.js

@@ -0,0 +1,2 @@
+"use strict";var u=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var U=(r,n)=>{for(var l in n)u(r,l,{get:n[l],enumerable:!0})},M=(r,n,l,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of R(n))!L.call(r,o)&&o!==l&&u(r,o,{get:()=>n[o],enumerable:!(c=S(n,o))||c.enumerable});return r};var _=r=>M(u({},"__esModule",{value:!0}),r);var E={};U(E,{ProductComparison:()=>D,ProductComparisonRenderer:()=>$});module.exports=_(E);var t=require("react/jsx-runtime"),y=require("react");const m=(r,n="USD")=>`${n==="USD"?"$":n}${r.toLocaleString("en-US",{minimumFractionDigits:2,maximumFractionDigits:2})}`,D=({data:r,onAddToCart:n})=>{const{products:l,dimensions:c}=r,o=l?.filter(e=>e&&e.shopifyId)||[],g=2,C=o.slice(0,g),[f,h]=(0,y.useState)(C);if(o.length===0)return null;const k=(e,s)=>{const a=o.find(d=>d.shopifyId===s);if(a){const d=[...f];d[e]=a,h(d)}},x=f.slice(0,g),v=(e,s)=>!e||!e.values||!Array.isArray(e.values)?null:e.values.find(a=>a&&a.product_id===s),N=(e,s)=>s?(0,t.jsxs)("div",{className:"border-b border-[#DADCE0] pb-2",children:[(0,t.jsx)("div",{className:"mb-3",children:(0,t.jsx)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#86868C]",children:e})}),(0,t.jsx)("div",{className:"flex gap-4",style:{gap:"36px"},children:x.map((a,d)=>{if(!a||!a.shopifyId)return null;const p=v(s,a.shopifyId);return(0,t.jsx)("div",{className:"flex-1",children:P(p,s.label)},`comparison-${d}`)})})]}):null,P=(e,s)=>{if(!e)return(0,t.jsx)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:"-"});if(s.toLowerCase().includes("price")){const a=e.min===e.max?m(e.min,e.currency):`${m(e.min,e.currency)} - ${m(e.max,e.currency)}`;return(0,t.jsx)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:a})}return s.toLowerCase().includes("variant")?(0,t.jsxs)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:[e.count||0," ",e.count===1?"variant":"variants"]}):(0,t.jsx)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:e.display||e.value||"-"})};return(0,t.jsxs)("div",{className:"w-full overflow-hidden rounded-2xl bg-[#F5F6F7]",children:[(0,t.jsx)("div",{className:"flex  p-4",style:{gap:"36px",paddingBottom:"0px"},children:x.map((e,s)=>{if(!e||!e.shopifyId)return null;const a=c.price?v(c.price,e.shopifyId):null,d=e.variants?.[0],p=d?.discount?.has_discount,b=p?d?.discount?.discount_price:null,w=b||a?.min||e.price.amount,F=e.price.amount,A=i=>{i.preventDefault(),i.stopPropagation(),n&&n(e)};return(0,t.jsxs)("div",{className:"flex flex-1 flex-col items-center",children:[(0,t.jsx)("div",{className:"mb-4 w-full",children:(0,t.jsx)("select",{value:e.shopifyId,onChange:i=>k(s,i.target.value),className:"w-full rounded-lg border border-[#DADCE0] bg-[#F5F6F7] px-3 py-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",style:{appearance:"none",backgroundImage:`url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231D1D1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`,backgroundRepeat:"no-repeat",backgroundPosition:"right 12px center",paddingRight:"32px"},children:o.map(i=>(0,t.jsx)("option",{value:i.shopifyId,children:i.title.length>30?`${i.title.slice(0,30)}...`:i.title},i.shopifyId))})}),(0,t.jsx)("a",{href:e.productUrl,target:"_blank",rel:"noopener noreferrer",className:"mb-4 block w-full max-w-[160px]",children:(0,t.jsx)("div",{className:"aspect-square w-full overflow-hidden rounded-lg",children:e.imageUrl?(0,t.jsx)("img",{src:e.imageUrl,alt:e.title,className:"size-full object-contain",loading:"lazy"}):(0,t.jsx)("div",{className:"flex size-full items-center justify-center text-gray-400",children:(0,t.jsx)("svg",{className:"size-12",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:(0,t.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"})})})})}),(0,t.jsx)("div",{className:"mb-4 flex flex-col items-center gap-1",children:(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)("span",{className:"text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:m(w,a?.currency||e.price.currency)}),p&&b&&(0,t.jsx)("span",{className:"text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#4A4C56] line-through",children:m(F,e.price.currency)})]})}),n&&(0,t.jsx)("button",{type:"button",onClick:A,className:"mb-3 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white",style:{backgroundColor:"#1D1D1F"},children:"Add to Cart"}),e.variants&&e.variants.length>1&&(0,t.jsx)("div",{className:"flex gap-2",children:e.variants.slice(0,3).map((i,I)=>(0,t.jsx)("div",{className:"size-6 rounded-full border-2 border-[#DADCE0]",style:{backgroundColor:i.color||"#000"},title:i.title},i.id||I))})]},`product-column-${s}`)})}),(0,t.jsx)("div",{className:"flex flex-col gap-4 p-4",children:Object.entries(c).map(([e,s])=>!s||e==="price"?null:(0,t.jsx)("div",{children:N(s.label,s)},e))})]})},$={render:(r,n,l)=>{if(r.type!=="product_comparison"||!r.data)return null;const c=r.data;return(0,t.jsx)(D,{data:c,isUser:n,isSystem:l,onAddToCart:c.onAddToCart})}};
+//# sourceMappingURL=ProductComparison.js.map

package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductComparison.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/ProductComparison.tsx"],
+  "sourcesContent": ["/**\n * \u4EA7\u54C1\u5BF9\u6BD4\u7EC4\u4EF6\n * \u663E\u793A\u591A\u4E2A\u4EA7\u54C1\u7684\u5BF9\u6BD4\u4FE1\u606F\uFF0C\u91C7\u7528\u8868\u683C\u5E03\u5C40\u5C55\u793A\u5404\u7EF4\u5EA6\u5DEE\u5F02\n * \u57FA\u4E8E\u53C2\u8003\u8BBE\u8BA1\uFF1A\u9876\u90E8\u4EA7\u54C1\u5C55\u793A + \u5E95\u90E8\u5BF9\u6BD4\u8868\u683C\n */\n\nimport React, { useState } from 'react'\nimport type { Product, MessageRenderer } from '../../types'\n\n/**\n * \u5BF9\u6BD4\u7EF4\u5EA6\u6570\u636E\u7ED3\u6784\n */\ninterface ComparisonDimension {\n  label: string\n  values: Array<{\n    product_id: string\n    [key: string]: any\n  }>\n}\n\n/**\n * \u4EA7\u54C1\u5BF9\u6BD4\u6570\u636E\u7ED3\u6784\n */\nexport interface ProductComparisonData {\n  products: Product[]\n  dimensions: {\n    price?: ComparisonDimension\n    variants?: ComparisonDimension\n    member_price?: ComparisonDimension\n    discount?: ComparisonDimension\n    [key: string]: ComparisonDimension | undefined\n  }\n}\n\nexport interface ProductComparisonProps {\n  /**\n   * \u4EA7\u54C1\u5BF9\u6BD4\u6570\u636E\n   */\n  data: ProductComparisonData\n\n  /**\n   * \u662F\u5426\u4E3A\u7528\u6237\u6D88\u606F\n   */\n  isUser?: boolean\n\n  /**\n   * \u662F\u5426\u4E3A\u7CFB\u7EDF\u6D88\u606F\n   */\n  isSystem?: boolean\n\n  /**\n   * \u6DFB\u52A0\u5230\u8D2D\u7269\u8F66\u56DE\u8C03\n   */\n  onAddToCart?: (product: Product) => void\n}\n\n/**\n * \u683C\u5F0F\u5316\u4EF7\u683C\u663E\u793A\n */\nconst formatPrice = (amount: number, currency: string = 'USD'): string => {\n  const symbol = currency === 'USD' ? '$' : currency\n  return `${symbol}${amount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`\n}\n\n/**\n * \u4EA7\u54C1\u5BF9\u6BD4\u7EC4\u4EF6\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\u2500\u2500\u2500\u2500\u2510\n * \u2502  [\u4EA7\u54C11\u56FE\u7247]    [\u4EA7\u54C12\u56FE\u7247]         \u2502\n * \u2502   \u4EF7\u683C1          \u4EF7\u683C2              \u2502\n * \u2502   \u989C\u8272\u9009\u9879       \u989C\u8272\u9009\u9879            \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\u2500\u2500\u2500\u2500\u2524\n * \u2502 \u7EF4\u5EA61   \u2502  \u503C1-1   \u2502   \u503C1-2        \u2502\n * \u2502 \u7EF4\u5EA62   \u2502  \u503C2-1   \u2502   \u503C2-2        \u2502\n * \u2502 \u7EF4\u5EA63   \u2502  \u503C3-1   \u2502   \u503C3-2        \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\u2500\u2500\u2500\u2500\u2518\n * ```\n */\nexport const ProductComparison: React.FC<ProductComparisonProps> = ({ data, onAddToCart }) => {\n  const { products: rawProducts, dimensions } = data\n\n  // \u8FC7\u6EE4\u6389 null \u6216\u65E0\u6548\u7684\u4EA7\u54C1\n  const allProducts = rawProducts?.filter(p => p && p.shopifyId) || []\n\n  // \u5BF9\u6BD4\u5217\u6570\uFF08\u56FA\u5B9A\u4E3A2\u5217\uFF09\n  const COMPARISON_COLUMNS = 2\n\n  // \u521D\u59CB\u5316\u6BCF\u4E2A\u5BF9\u6BD4\u4F4D\u7F6E\u7684\u9009\u4E2D\u4EA7\u54C1\uFF08\u9ED8\u8BA4\u53D6\u524D\u4E24\u4E2A\u4EA7\u54C1\uFF09\n  const initialSelectedProducts = allProducts.slice(0, COMPARISON_COLUMNS)\n  const [selectedProducts, setSelectedProducts] = useState<Product[]>(initialSelectedProducts)\n\n  // Early return \u5FC5\u987B\u5728\u6240\u6709 hooks \u4E4B\u540E\n  if (allProducts.length === 0) {\n    return null\n  }\n\n  // \u5904\u7406\u4EA7\u54C1\u9009\u62E9\u53D8\u66F4\n  const handleProductChange = (index: number, productId: string) => {\n    const newProduct = allProducts.find(p => p.shopifyId === productId)\n    if (newProduct) {\n      const newSelectedProducts = [...selectedProducts]\n      newSelectedProducts[index] = newProduct\n      setSelectedProducts(newSelectedProducts)\n    }\n  }\n\n  // \u5F53\u524D\u663E\u793A\u7684\u4EA7\u54C1\uFF08\u786E\u4FDD\u53EA\u663E\u793A\u6307\u5B9A\u5217\u6570\uFF09\n  const products = selectedProducts.slice(0, COMPARISON_COLUMNS)\n\n  /**\n   * \u83B7\u53D6\u6307\u5B9A\u4EA7\u54C1\u5728\u67D0\u4E2A\u7EF4\u5EA6\u7684\u503C\n   */\n  const getDimensionValue = (dimension: ComparisonDimension, productId: string): any => {\n    if (!dimension || !dimension.values || !Array.isArray(dimension.values)) {\n      return null\n    }\n    return dimension.values.find(v => v && v.product_id === productId)\n  }\n\n  /**\n   * \u6E32\u67D3\u901A\u7528\u5BF9\u6BD4\u884C\n   */\n  const renderComparisonRow = (label: string, dimension: ComparisonDimension | undefined) => {\n    if (!dimension) return null\n\n    return (\n      <div className=\"border-b border-[#DADCE0] pb-2\">\n        {/* \u7EF4\u5EA6\u6807\u7B7E\uFF08\u6807\u9898\uFF09 */}\n        <div className=\"mb-3\">\n          <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#86868C]\">{label}</span>\n        </div>\n\n        {/* \u4EA7\u54C1\u503C\u5217\u8868\uFF08\u6A2A\u5411\u6392\u5217\uFF09 */}\n        <div className=\"flex gap-4\" style={{ gap: '36px' }}>\n          {products.map((product, index) => {\n            if (!product || !product.shopifyId) return null\n            const value = getDimensionValue(dimension, product.shopifyId)\n\n            return (\n              <div key={`comparison-${index}`} className=\"flex-1\">\n                {renderDimensionValue(value, dimension.label)}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    )\n  }\n\n  /**\n   * \u6E32\u67D3\u7EF4\u5EA6\u503C\n   */\n  const renderDimensionValue = (value: any, dimensionLabel: string) => {\n    if (!value) {\n      return <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">-</span>\n    }\n\n    // \u6839\u636E\u4E0D\u540C\u7EF4\u5EA6\u7C7B\u578B\u6E32\u67D3\u4E0D\u540C\u683C\u5F0F\n    if (dimensionLabel.toLowerCase().includes('price')) {\n      // \u4EF7\u683C\u7EF4\u5EA6\n      const priceDisplay =\n        value.min === value.max\n          ? formatPrice(value.min, value.currency)\n          : `${formatPrice(value.min, value.currency)} - ${formatPrice(value.max, value.currency)}`\n      return <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">{priceDisplay}</span>\n    }\n\n    if (dimensionLabel.toLowerCase().includes('variant')) {\n      // \u53D8\u4F53\u6570\u91CF\n      return (\n        <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n          {value.count || 0} {value.count === 1 ? 'variant' : 'variants'}\n        </span>\n      )\n    }\n\n    // \u9ED8\u8BA4\u663E\u793A\n    return (\n      <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n        {value.display || value.value || '-'}\n      </span>\n    )\n  }\n\n  return (\n    <div className=\"w-full overflow-hidden rounded-2xl bg-[#F5F6F7]\">\n      {/* \u9876\u90E8\u4EA7\u54C1\u5C55\u793A\u533A\u57DF */}\n      <div className=\"flex  p-4\" style={{ gap: '36px', paddingBottom: '0px' }}>\n        {products.map((product, index) => {\n          if (!product || !product.shopifyId) return null\n\n          // \u83B7\u53D6\u4EF7\u683C\u4FE1\u606F\n          const priceInfo = dimensions.price ? getDimensionValue(dimensions.price, product.shopifyId) : null\n\n          // \u83B7\u53D6\u6298\u6263\u4FE1\u606F\n          const firstVariant = product.variants?.[0]\n          const hasDiscount = firstVariant?.discount?.has_discount\n          const discountPrice = hasDiscount ? firstVariant?.discount?.discount_price : null\n\n          // \u5F53\u524D\u663E\u793A\u4EF7\u683C\uFF1A\u6709\u6298\u6263\u65F6\u663E\u793A\u6298\u6263\u4EF7\uFF0C\u5426\u5219\u663E\u793A\u539F\u4EF7\n          const currentPrice = discountPrice || priceInfo?.min || product.price.amount\n          const originalPrice = product.price.amount\n\n          // Add to Cart \u6309\u94AE\u70B9\u51FB\u5904\u7406\n          const handleAddToCart = (e: React.MouseEvent) => {\n            e.preventDefault()\n            e.stopPropagation()\n            if (onAddToCart) {\n              onAddToCart(product)\n            }\n          }\n\n          return (\n            <div key={`product-column-${index}`} className=\"flex flex-1 flex-col items-center\">\n              {/* \u4EA7\u54C1\u9009\u62E9\u4E0B\u62C9\u6846 */}\n              <div className=\"mb-4 w-full\">\n                <select\n                  value={product.shopifyId}\n                  onChange={e => handleProductChange(index, e.target.value)}\n                  className=\"w-full rounded-lg border border-[#DADCE0] bg-[#F5F6F7] px-3 py-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\"\n                  style={{\n                    appearance: 'none',\n                    backgroundImage:\n                      \"url(\\\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231D1D1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\\\")\",\n                    backgroundRepeat: 'no-repeat',\n                    backgroundPosition: 'right 12px center',\n                    paddingRight: '32px',\n                  }}\n                >\n                  {allProducts.map(p => (\n                    <option key={p.shopifyId} value={p.shopifyId}>\n                      {p.title.length > 30 ? `${p.title.slice(0, 30)}...` : p.title}\n                    </option>\n                  ))}\n                </select>\n              </div>\n\n              {/* \u4EA7\u54C1\u56FE\u7247 */}\n              <a\n                href={product.productUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"mb-4 block w-full max-w-[160px]\"\n              >\n                <div className=\"aspect-square w-full overflow-hidden rounded-lg\">\n                  {product.imageUrl ? (\n                    <img\n                      src={product.imageUrl}\n                      alt={product.title}\n                      className=\"size-full object-contain\"\n                      loading=\"lazy\"\n                    />\n                  ) : (\n                    <div className=\"flex size-full items-center justify-center text-gray-400\">\n                      <svg className=\"size-12\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n                        />\n                      </svg>\n                    </div>\n                  )}\n                </div>\n              </a>\n\n              {/* \u4EF7\u683C\u5C55\u793A\uFF08\u5E26\u5212\u7EBF\u4EF7\uFF09 */}\n              <div className=\"mb-4 flex flex-col items-center gap-1\">\n                <div className=\"flex items-center gap-2\">\n                  {/* \u5F53\u524D\u4EF7\u683C\uFF08\u6298\u6263\u4EF7\u6216\u539F\u4EF7\uFF09 */}\n                  <span className=\"text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n                    {formatPrice(currentPrice, priceInfo?.currency || product.price.currency)}\n                  </span>\n                  {/* \u5212\u7EBF\u4EF7 - \u4EC5\u5728\u6709\u6298\u6263\u65F6\u663E\u793A */}\n                  {hasDiscount && discountPrice && (\n                    <span className=\"text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#4A4C56] line-through\">\n                      {formatPrice(originalPrice, product.price.currency)}\n                    </span>\n                  )}\n                </div>\n              </div>\n\n              {/* Add to Cart \u6309\u94AE */}\n              {onAddToCart && (\n                <button\n                  type=\"button\"\n                  onClick={handleAddToCart}\n                  className=\"mb-3 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white\"\n                  style={{ backgroundColor: '#1D1D1F' }}\n                >\n                  Add to Cart\n                </button>\n              )}\n\n              {/* \u989C\u8272\u9009\u9879\uFF08\u5982\u679C\u6709variants\uFF09 */}\n              {product.variants && product.variants.length > 1 && (\n                <div className=\"flex gap-2\">\n                  {product.variants.slice(0, 3).map((variant, idx) => (\n                    <div\n                      key={variant.id || idx}\n                      className=\"size-6 rounded-full border-2 border-[#DADCE0]\"\n                      style={{ backgroundColor: variant.color || '#000' }}\n                      title={variant.title}\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          )\n        })}\n      </div>\n\n      {/* \u5BF9\u6BD4\u8868\u683C\u533A\u57DF */}\n      <div className=\"flex flex-col gap-4 p-4\">\n        {/* \u904D\u5386\u6240\u6709\u7EF4\u5EA6\u5E76\u6E32\u67D3 */}\n        {Object.entries(dimensions).map(([key, dimension]) => {\n          if (!dimension || key === 'price') return null // price \u5DF2\u5728\u9876\u90E8\u663E\u793A\n          return <div key={key}>{renderComparisonRow(dimension.label, dimension)}</div>\n        })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u521B\u5EFA\u4EA7\u54C1\u5BF9\u6BD4\u6E32\u67D3\u5668\n */\nexport const ProductComparisonRenderer: MessageRenderer = {\n  render: (content, isUser, isSystem) => {\n    if (content.type !== 'product_comparison' || !content.data) {\n      return null\n    }\n\n    const comparisonData = content.data as ProductComparisonData & { onAddToCart?: (product: Product) => void }\n\n    return (\n      <ProductComparison\n        data={comparisonData}\n        isUser={isUser}\n        isSystem={isSystem}\n        onAddToCart={comparisonData.onAddToCart}\n      />\n    )\n  },\n}\n"],
+  "mappings": "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",
+  "names": ["ProductComparison_exports", "__export", "ProductComparison", "ProductComparisonRenderer", "__toCommonJS", "import_jsx_runtime", "import_react", "formatPrice", "amount", "currency", "data", "onAddToCart", "rawProducts", "dimensions", "allProducts", "p", "COMPARISON_COLUMNS", "initialSelectedProducts", "selectedProducts", "setSelectedProducts", "handleProductChange", "index", "productId", "newProduct", "newSelectedProducts", "products", "getDimensionValue", "dimension", "v", "renderComparisonRow", "label", "product", "value", "renderDimensionValue", "dimensionLabel", "priceDisplay", "priceInfo", "firstVariant", "hasDiscount", "discountPrice", "currentPrice", "originalPrice", "handleAddToCart", "e", "variant", "idx", "key", "content", "isUser", "isSystem", "comparisonData"]
+}

package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductList.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 商品列表渲染器
+ * 显示多个商品的纵向列表，支持展开/收起
+ * 基于 specs/livechat-widget/data-model.md 的商品数据模型
+ */
+import type { MessageRenderer } from '../../types';
+/**
+ * 商品列表渲染器
+ *
+ * 功能：
+ * - 纵向展示多个商品
+ * - 默认显示前3个产品
+ * - 支持展开/收起查看全部
+ * - 紧凑型卡片设计
+ * - 可选标题
+ *
+ * 布局：
+ * ```
+ * 标题（可选）
+ * ┌─────────────────┐
+ * │ [图] 商品标题   │
+ * │      $29.99     │
+ * └─────────────────┘
+ * ┌─────────────────┐
+ * │ [图] 商品标题   │
+ * │      $39.99     │
+ * └─────────────────┘
+ * ┌─────────────────┐
+ * │ [图] 商品标题   │
+ * │      $49.99     │
+ * └─────────────────┘
+ * [ Learn More ↓ ]
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const content: ProductListContent = {
+ *   type: 'product_list',
+ *   data: {
+ *     title: '相关商品推荐',
+ *     products: [product1, product2, product3, product4, product5]
+ *   }
+ * }
+ * <ProductList.render(content, false, false) />
+ * ```
+ */
+export declare const ProductList: MessageRenderer;

package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductList.js

@@ -0,0 +1,2 @@
+"use strict";var m=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var w=(e,o)=>{for(var n in o)m(e,n,{get:o[n],enumerable:!0})},L=(e,o,n,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of F(o))!_.call(e,a)&&a!==n&&m(e,a,{get:()=>o[a],enumerable:!(s=P(o,a))||s.enumerable});return e};var D=e=>L(m({},"__esModule",{value:!0}),e);var T={};w(T,{ProductList:()=>M});module.exports=D(T);var t=require("react/jsx-runtime"),N=require("react"),f=require("../../constants.js");function b(e){const{amount:o,currency:n}=e;return`${f.CURRENCY_SYMBOLS[n]||n}${o.toFixed(2)}`}function A(e,o){if(!e.discount_type||e.discount_value===void 0)return"";const n=typeof e.discount_value=="string"?parseFloat(e.discount_value):e.discount_value;return isNaN(n)?"":e.discount_type==="percentage"?`${Math.round(n)}% OFF`:e.discount_type==="fixed_amount"?`${f.CURRENCY_SYMBOLS[o]||o}${Math.round(n)} OFF`:""}const I=({product:e,onAddToCart:o})=>{const{title:n,description:s,price:a,imageUrl:i,productUrl:d,stockStatus:l,averageRating:c,variants:r}=e,g=l==="out_of_stock",u=r?.[0],p=u?.discount?.has_discount,x=p?u?.discount?.discount_price:null,v=u?.discount,k=x?{amount:x,currency:a.currency}:a,h=v&&p?A(v,a.currency):"",C=y=>{y.preventDefault(),y.stopPropagation(),o&&o(e)};return(0,t.jsx)("div",{className:"block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow hover:shadow-md",children:(0,t.jsx)("a",{href:d,target:"_blank",rel:"noopener noreferrer",className:"block",children:(0,t.jsxs)("div",{className:"flex gap-2 p-4",children:[(0,t.jsx)("div",{className:" flex shrink-0 items-center overflow-hidden rounded-md ",style:{width:"40%"},children:(0,t.jsx)("img",{src:i,alt:n,className:`h-auto w-full object-cover ${g?"opacity-50":""}`,loading:"lazy"})}),(0,t.jsxs)("div",{className:"flex flex-1 flex-col justify-center gap-0.5",children:[h&&(0,t.jsx)("div",{className:"mb-1 w-fit rounded-full px-2 text-sm font-bold leading-none tracking-[-0.04em] text-white",style:{backgroundColor:"#005D8E",paddingTop:"6px",paddingBottom:"4px"},children:h}),(0,t.jsx)("h4",{className:"line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]",children:n}),s&&(0,t.jsx)("p",{className:"line-clamp-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:s}),(0,t.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,t.jsxs)("div",{className:"flex items-center gap-1",children:[(0,t.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:b(k)}),p&&(0,t.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through",children:b(a)})]}),c!==void 0&&(0,t.jsxs)("div",{className:"flex items-center gap-0.5 text-xs text-gray-600",children:[(0,t.jsx)("span",{className:"text-yellow-500",children:"\u2B50"}),(0,t.jsx)("span",{children:c.toFixed(1)})]})]}),(0,t.jsx)("button",{type:"button",onClick:C,className:"mt-2 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white",style:{backgroundColor:"#1D1D1F"},children:"Add to Cart"})]})]})})})},R=({products:e,title:o,onAddToCart:n})=>{const[s,a]=(0,N.useState)(!1),i=e.filter(r=>r&&r.shopifyId),d=3,l=i.length>d,c=s?i:i.slice(0,d);return(0,t.jsxs)("div",{className:"flex w-full flex-col gap-2",children:[o&&(0,t.jsx)("h3",{className:"text-sm font-semibold text-gray-900",children:o}),(0,t.jsx)("div",{className:"flex flex-col gap-1.5",children:c.map((r,g)=>!r||!r.shopifyId?null:(0,t.jsx)(I,{product:r,onAddToCart:n},r.shopifyId))}),l&&(0,t.jsxs)("button",{type:"button",onClick:()=>a(!s),className:"flex items-center justify-center gap-1.5  px-3 py-2 text-[14px] font-bold leading-[1.2] tracking-tighter text-[#080A0F]",children:[(0,t.jsx)("span",{children:s?"Show Less":"Learn More"}),(0,t.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:`transition-transform ${s?"rotate-180":""}`,children:(0,t.jsx)("polyline",{points:"6 9 12 15 18 9"})})]})]})},M={render:e=>{const o=e,{products:n,title:s,onAddToCart:a}=o.data,i=n?.filter(d=>d&&d.shopifyId)||[];return i.length===0?null:(0,t.jsx)(R,{products:i,title:s,onAddToCart:a})}};
+//# sourceMappingURL=ProductList.js.map

package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/ProductList.tsx"],
+  "sourcesContent": ["/**\n * \u5546\u54C1\u5217\u8868\u6E32\u67D3\u5668\n * \u663E\u793A\u591A\u4E2A\u5546\u54C1\u7684\u7EB5\u5411\u5217\u8868\uFF0C\u652F\u6301\u5C55\u5F00/\u6536\u8D77\n * \u57FA\u4E8E specs/livechat-widget/data-model.md \u7684\u5546\u54C1\u6570\u636E\u6A21\u578B\n */\n\nimport React, { useState } from 'react'\nimport type { MessageRenderer, ProductListContent, Product } from '../../types'\nimport { CURRENCY_SYMBOLS } from '../../constants.js'\n\n/**\n * \u683C\u5F0F\u5316\u4EF7\u683C\n */\nfunction formatPrice(price: Product['price']): string {\n  const { amount, currency } = price\n\n  const symbol = CURRENCY_SYMBOLS[currency] || currency\n  return `${symbol}${amount.toFixed(2)}`\n}\n\n/**\n * \u683C\u5F0F\u5316\u6298\u6263\u6807\u7B7E\u6587\u672C\n * @param discount \u6298\u6263\u5BF9\u8C61\n * @param currency \u8D27\u5E01\u4EE3\u7801\n * @returns \u683C\u5F0F\u5316\u540E\u7684\u6298\u6263\u6587\u672C\uFF08\u5982 \"$10 OFF\" \u6216 \"20% OFF\"\uFF09\n */\nfunction formatDiscountLabel(\n  discount: { discount_type?: string; discount_value?: string | number },\n  currency: string\n): string {\n  if (!discount.discount_type || discount.discount_value === undefined) {\n    return ''\n  }\n\n  // \u5C06 discount_value \u8F6C\u6362\u4E3A\u6570\u5B57\n  const value =\n    typeof discount.discount_value === 'string' ? parseFloat(discount.discount_value) : discount.discount_value\n\n  if (isNaN(value)) {\n    return ''\n  }\n\n  if (discount.discount_type === 'percentage') {\n    return `${Math.round(value)}% OFF`\n  }\n\n  if (discount.discount_type === 'fixed_amount') {\n    const symbol = CURRENCY_SYMBOLS[currency] || currency\n    return `${symbol}${Math.round(value)} OFF`\n  }\n\n  return ''\n}\n\n/**\n * \u7D27\u51D1\u578B\u5546\u54C1\u5361\u7247\uFF08\u7528\u4E8E\u7EB5\u5411\u5217\u8868\uFF09\n */\nconst CompactProductCard: React.FC<{\n  product: Product\n  onAddToCart?: (product: Product) => void\n}> = ({ product, onAddToCart }) => {\n  const { title, description, price, imageUrl, productUrl, stockStatus, averageRating, variants } = product\n\n  const isOutOfStock = stockStatus === 'out_of_stock'\n\n  // \u83B7\u53D6\u7B2C\u4E00\u4E2A\u53D8\u4F53\u7684\u6298\u6263\u4FE1\u606F\n  const firstVariant = variants?.[0]\n  const hasDiscount = firstVariant?.discount?.has_discount\n  const discountPrice = hasDiscount ? firstVariant?.discount?.discount_price : null\n  const discount = firstVariant?.discount\n\n  // \u5F53\u524D\u663E\u793A\u4EF7\u683C\uFF1A\u6709\u6298\u6263\u65F6\u663E\u793A\u6298\u6263\u4EF7\uFF0C\u5426\u5219\u663E\u793A\u539F\u4EF7\n  const currentPrice = discountPrice ? { amount: discountPrice, currency: price.currency } : price\n\n  // \u683C\u5F0F\u5316\u6298\u6263\u6807\u7B7E\n  const discountLabel = discount && hasDiscount ? formatDiscountLabel(discount, price.currency) : ''\n\n  const handleAddToCart = (e: React.MouseEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    if (onAddToCart) {\n      onAddToCart(product)\n    }\n  }\n\n  return (\n    <div className=\"block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow hover:shadow-md\">\n      <a href={productUrl} target=\"_blank\" rel=\"noopener noreferrer\" className=\"block\">\n        <div className=\"flex gap-2 p-4\">\n          {/* \u5546\u54C1\u56FE\u7247 */}\n          <div className=\" flex shrink-0 items-center overflow-hidden rounded-md \" style={{ width: '40%' }}>\n            <img\n              src={imageUrl}\n              alt={title}\n              className={`h-auto w-full object-cover ${isOutOfStock ? 'opacity-50' : ''}`}\n              loading=\"lazy\"\n            />\n          </div>\n\n          {/* \u5546\u54C1\u4FE1\u606F */}\n          <div className=\"flex flex-1 flex-col justify-center gap-0.5\">\n            {/* \u6298\u6263\u6807\u7B7E */}\n            {discountLabel && (\n              <div\n                className=\"mb-1 w-fit rounded-full px-2 text-sm font-bold leading-none tracking-[-0.04em] text-white\"\n                style={{ backgroundColor: '#005D8E', paddingTop: '6px', paddingBottom: '4px' }}\n              >\n                {discountLabel}\n              </div>\n            )}\n\n            {/* \u6807\u9898 */}\n            <h4 className=\"line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]\">\n              {title}\n            </h4>\n\n            {/* \u63CF\u8FF0\uFF08\u53EF\u9009\uFF09 */}\n            {description && (\n              <p className=\"line-clamp-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n                {description}\n              </p>\n            )}\n\n            {/* \u4EF7\u683C\u548C\u8BC4\u5206 */}\n            <div className=\"mt-4 flex items-center gap-2\">\n              <div className=\"flex items-center gap-1\">\n                {/* \u5F53\u524D\u4EF7\u683C\uFF08\u6709\u6298\u6263\u65F6\u663E\u793A\u6298\u6263\u4EF7\uFF0C\u5426\u5219\u663E\u793A\u539F\u4EF7\uFF09 */}\n                <span className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n                  {formatPrice(currentPrice)}\n                </span>\n                {/* \u539F\u4EF7\uFF08\u5212\u7EBF\u4EF7\uFF09- \u4EC5\u5728\u6709\u6298\u6263\u65F6\u663E\u793A */}\n                {hasDiscount && (\n                  <span className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through\">\n                    {formatPrice(price)}\n                  </span>\n                )}\n              </div>\n              {/* \u8BC4\u5206\uFF08\u53EF\u9009\uFF09 */}\n              {averageRating !== undefined && (\n                <div className=\"flex items-center gap-0.5 text-xs text-gray-600\">\n                  <span className=\"text-yellow-500\">\u2B50</span>\n                  <span>{averageRating.toFixed(1)}</span>\n                </div>\n              )}\n            </div>\n\n            {/* Add to Cart \u6309\u94AE - \u5728\u4EF7\u683C\u4E0B\u65B9 */}\n            <button\n              type=\"button\"\n              onClick={handleAddToCart}\n              className=\"mt-2 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white\"\n              style={{ backgroundColor: '#1D1D1F' }}\n            >\n              Add to Cart\n            </button>\n          </div>\n        </div>\n      </a>\n    </div>\n  )\n}\n\n/**\n * \u5546\u54C1\u5217\u8868\u5185\u90E8\u7EC4\u4EF6\uFF08\u652F\u6301\u5C55\u5F00/\u6536\u8D77\uFF09\n */\nconst ProductListComponent: React.FC<{\n  products: Product[]\n  title?: string\n  onAddToCart?: (product: Product) => void\n}> = ({ products, title, onAddToCart }) => {\n  const [isExpanded, setIsExpanded] = useState(false)\n\n  // \u8FC7\u6EE4\u6389 null \u6216\u65E0\u6548\u7684\u4EA7\u54C1\n  const validProducts = products.filter(p => p && p.shopifyId)\n\n  // \u9ED8\u8BA4\u663E\u793A\u524D3\u4E2A\u4EA7\u54C1\n  const INITIAL_DISPLAY_COUNT = 3\n  const hasMore = validProducts.length > INITIAL_DISPLAY_COUNT\n  const displayedProducts = isExpanded ? validProducts : validProducts.slice(0, INITIAL_DISPLAY_COUNT)\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      {/* \u5217\u8868\u6807\u9898\uFF08\u53EF\u9009\uFF09 */}\n      {title && <h3 className=\"text-sm font-semibold text-gray-900\">{title}</h3>}\n\n      {/* \u7EB5\u5411\u6392\u5217\u7684\u5546\u54C1\u5217\u8868 */}\n      <div className=\"flex flex-col gap-1.5\">\n        {displayedProducts.map((product, index) => {\n          if (!product || !product.shopifyId) return null\n          return <CompactProductCard key={product.shopifyId} product={product} onAddToCart={onAddToCart} />\n        })}\n      </div>\n\n      {/* Learn More \u6309\u94AE */}\n      {hasMore && (\n        <button\n          type=\"button\"\n          onClick={() => setIsExpanded(!isExpanded)}\n          className=\"flex items-center justify-center gap-1.5  px-3 py-2 text-[14px] font-bold leading-[1.2] tracking-tighter text-[#080A0F]\"\n        >\n          <span>{isExpanded ? 'Show Less' : 'Learn More'}</span>\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className={`transition-transform ${isExpanded ? 'rotate-180' : ''}`}\n          >\n            <polyline points=\"6 9 12 15 18 9\" />\n          </svg>\n        </button>\n      )}\n    </div>\n  )\n}\n\n/**\n * \u5546\u54C1\u5217\u8868\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u7EB5\u5411\u5C55\u793A\u591A\u4E2A\u5546\u54C1\n * - \u9ED8\u8BA4\u663E\u793A\u524D3\u4E2A\u4EA7\u54C1\n * - \u652F\u6301\u5C55\u5F00/\u6536\u8D77\u67E5\u770B\u5168\u90E8\n * - \u7D27\u51D1\u578B\u5361\u7247\u8BBE\u8BA1\n * - \u53EF\u9009\u6807\u9898\n *\n * \u5E03\u5C40\uFF1A\n * ```\n * \u6807\u9898\uFF08\u53EF\u9009\uFF09\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 [\u56FE] \u5546\u54C1\u6807\u9898   \u2502\n * \u2502      $29.99     \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 [\u56FE] \u5546\u54C1\u6807\u9898   \u2502\n * \u2502      $39.99     \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 [\u56FE] \u5546\u54C1\u6807\u9898   \u2502\n * \u2502      $49.99     \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * [ Learn More \u2193 ]\n * ```\n *\n * @example\n * ```tsx\n * const content: ProductListContent = {\n *   type: 'product_list',\n *   data: {\n *     title: '\u76F8\u5173\u5546\u54C1\u63A8\u8350',\n *     products: [product1, product2, product3, product4, product5]\n *   }\n * }\n * <ProductList.render(content, false, false) />\n * ```\n */\nexport const ProductList: MessageRenderer = {\n  render: content => {\n    const productListContent = content as ProductListContent\n    const { products, title, onAddToCart } = productListContent.data\n\n    // \u8FC7\u6EE4\u6389 null \u6216\u65E0\u6548\u7684\u4EA7\u54C1\n    const validProducts = products?.filter(p => p && p.shopifyId) || []\n\n    if (validProducts.length === 0) {\n      return null\n    }\n\n    return <ProductListComponent products={validProducts} title={title} onAddToCart={onAddToCart} />\n  },\n}\n"],
+  "mappings": "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",
+  "names": ["ProductList_exports", "__export", "ProductList", "__toCommonJS", "import_jsx_runtime", "import_react", "import_constants", "formatPrice", "price", "amount", "currency", "formatDiscountLabel", "discount", "value", "CompactProductCard", "product", "onAddToCart", "title", "description", "imageUrl", "productUrl", "stockStatus", "averageRating", "variants", "isOutOfStock", "firstVariant", "hasDiscount", "discountPrice", "currentPrice", "discountLabel", "handleAddToCart", "e", "ProductListComponent", "products", "isExpanded", "setIsExpanded", "validProducts", "p", "INITIAL_DISPLAY_COUNT", "hasMore", "displayedProducts", "index", "content", "productListContent"]
+}

package/dist/cjs/components/LiveChatWidget/components/MessageContent/PromotionList.d.ts

@@ -0,0 +1,78 @@
+/**
+ * 促销活动列表组件
+ * 显示当前进行中的促销活动信息
+ * 基于后端数据结构规范：promotion_list
+ */
+import React from 'react';
+import type { MessageRenderer } from '../../types';
+/**
+ * 促销活动数据结构
+ */
+export interface PromotionItem {
+    id: string;
+    title: string;
+    subtitle?: string;
+    description?: string;
+    banner_url?: string;
+    url?: string;
+    time_range: {
+        start: string;
+        end?: string | null;
+        is_active: boolean;
+    };
+    priority?: number;
+    product_count?: number;
+    metadata?: {
+        display_order?: number;
+        target_audience?: string;
+    };
+}
+/**
+ * 促销活动列表数据结构
+ */
+export interface PromotionListData {
+    found: boolean;
+    count: number;
+    total?: number;
+    results: PromotionItem[];
+}
+export interface PromotionListProps {
+    /**
+     * 促销活动列表数据
+     */
+    data: PromotionListData;
+    /**
+     * 是否为用户消息
+     */
+    isUser?: boolean;
+    /**
+     * 是否为系统消息
+     */
+    isSystem?: boolean;
+}
+/**
+ * 促销活动列表组件
+ *
+ * 功能：
+ * - 显示当前进行中的促销活动
+ * - 支持活动 Banner 图片展示
+ * - 显示活动时间范围
+ * - 显示参与商品数量
+ * - 支持跳转到活动详情页
+ *
+ * @example
+ * ```tsx
+ * <PromotionList
+ *   data={{
+ *     found: true,
+ *     count: 2,
+ *     results: [...]
+ *   }}
+ * />
+ * ```
+ */
+export declare const PromotionList: React.FC<PromotionListProps>;
+/**
+ * 创建促销活动列表渲染器
+ */
+export declare const PromotionListRenderer: MessageRenderer;

package/dist/cjs/components/LiveChatWidget/components/MessageContent/PromotionList.js

@@ -0,0 +1,2 @@
+"use strict";var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var g=(t,r)=>{for(var n in r)o(t,n,{get:r[n],enumerable:!0})},u=(t,r,n,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of m(r))!c.call(t,a)&&a!==n&&o(t,a,{get:()=>r[a],enumerable:!(i=d(r,a))||i.enumerable});return t};var b=t=>u(o({},"__esModule",{value:!0}),t);var p={};g(p,{PromotionList:()=>l,PromotionListRenderer:()=>f});module.exports=b(p);var e=require("react/jsx-runtime");const x=t=>new Date(t).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"}),l=({data:t,isUser:r=!1,isSystem:n=!1})=>{const{found:i,results:a}=t;return!i||!a||a.length===0?(0,e.jsx)("div",{className:"rounded-lg border border-gray-200 bg-gray-50 p-4 text-center",children:(0,e.jsx)("p",{className:"text-sm text-gray-500",children:"\u6682\u65E0\u8FDB\u884C\u4E2D\u7684\u6D3B\u52A8"})}):(0,e.jsx)("div",{className:"space-y-3",children:a.map(s=>(0,e.jsxs)("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md",children:[s.banner_url&&(0,e.jsx)("div",{className:"aspect-[16/9] w-full overflow-hidden bg-gray-100",children:(0,e.jsx)("img",{src:s.banner_url,alt:s.title,className:"size-full object-cover object-center",loading:"lazy"})}),(0,e.jsxs)("div",{className:"p-4",children:[(0,e.jsxs)("div",{className:"mb-2",children:[(0,e.jsx)("h3",{className:"text-xl font-bold leading-[1.2] tracking-[-0.04em] text-gray-900",children:s.title}),s.subtitle&&(0,e.jsx)("p",{className:"mt-1 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-red-600",children:s.subtitle})]}),s.url&&(0,e.jsxs)("a",{href:s.url,target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center gap-1 text-sm font-bold leading-[1.2] tracking-[-0.04em]",children:["Learn More",(0,e.jsx)("svg",{className:"size-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:(0,e.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})})]})]})]},s.id))})},f={render:(t,r,n)=>t.type!=="promotion_list"||!t.data?null:(0,e.jsx)(l,{data:t.data,isUser:r,isSystem:n})};
+//# sourceMappingURL=PromotionList.js.map

package/dist/cjs/components/LiveChatWidget/components/MessageContent/PromotionList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/PromotionList.tsx"],
+  "sourcesContent": ["/**\n * \u4FC3\u9500\u6D3B\u52A8\u5217\u8868\u7EC4\u4EF6\n * \u663E\u793A\u5F53\u524D\u8FDB\u884C\u4E2D\u7684\u4FC3\u9500\u6D3B\u52A8\u4FE1\u606F\n * \u57FA\u4E8E\u540E\u7AEF\u6570\u636E\u7ED3\u6784\u89C4\u8303\uFF1Apromotion_list\n */\n\nimport React from 'react'\nimport type { MessageRenderer } from '../../types'\n\n/**\n * \u4FC3\u9500\u6D3B\u52A8\u6570\u636E\u7ED3\u6784\n */\nexport interface PromotionItem {\n  id: string // \u6D3B\u52A8 ID\n  title: string // \u6D3B\u52A8\u6807\u9898\n  subtitle?: string // \u526F\u6807\u9898\uFF08\u5982 \"Up to 30% off\"\uFF09\n  description?: string // \u6D3B\u52A8\u63CF\u8FF0\n  banner_url?: string // Banner \u56FE\u7247 URL\n  url?: string // \u6D3B\u52A8\u8BE6\u60C5\u9875 URL\n  time_range: {\n    start: string // \u5F00\u59CB\u65F6\u95F4 (ISO 8601)\n    end?: string | null // \u7ED3\u675F\u65F6\u95F4\uFF0Cnull \u8868\u793A\u65E0\u7ED3\u675F\u65E5\u671F\n    is_active: boolean // \u662F\u5426\u5F53\u524D\u6D3B\u8DC3\n  }\n  priority?: number // \u4F18\u5148\u7EA7\uFF08\u6570\u5B57\u8D8A\u5927\u8D8A\u9760\u524D\uFF09\n  product_count?: number // \u53C2\u4E0E\u5546\u54C1\u6570\u91CF\n  metadata?: {\n    display_order?: number\n    target_audience?: string\n  }\n}\n\n/**\n * \u4FC3\u9500\u6D3B\u52A8\u5217\u8868\u6570\u636E\u7ED3\u6784\n */\nexport interface PromotionListData {\n  found: boolean // \u662F\u5426\u627E\u5230\u6D3B\u52A8\n  count: number // \u8FD4\u56DE\u7684\u6D3B\u52A8\u6570\u91CF\n  total?: number // \u603B\u6D3B\u52A8\u6570\u91CF\uFF08\u53EF\u9009\uFF09\n  results: PromotionItem[] // \u6D3B\u52A8\u5217\u8868\n}\n\nexport interface PromotionListProps {\n  /**\n   * \u4FC3\u9500\u6D3B\u52A8\u5217\u8868\u6570\u636E\n   */\n  data: PromotionListData\n\n  /**\n   * \u662F\u5426\u4E3A\u7528\u6237\u6D88\u606F\n   */\n  isUser?: boolean\n\n  /**\n   * \u662F\u5426\u4E3A\u7CFB\u7EDF\u6D88\u606F\n   */\n  isSystem?: boolean\n}\n\n/**\n * \u683C\u5F0F\u5316\u65E5\u671F\u663E\u793A\n */\nconst formatDate = (dateStr: string): string => {\n  const date = new Date(dateStr)\n  return date.toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'short',\n    day: 'numeric',\n  })\n}\n\n/**\n * \u4FC3\u9500\u6D3B\u52A8\u5217\u8868\u7EC4\u4EF6\n *\n * \u529F\u80FD\uFF1A\n * - \u663E\u793A\u5F53\u524D\u8FDB\u884C\u4E2D\u7684\u4FC3\u9500\u6D3B\u52A8\n * - \u652F\u6301\u6D3B\u52A8 Banner \u56FE\u7247\u5C55\u793A\n * - \u663E\u793A\u6D3B\u52A8\u65F6\u95F4\u8303\u56F4\n * - \u663E\u793A\u53C2\u4E0E\u5546\u54C1\u6570\u91CF\n * - \u652F\u6301\u8DF3\u8F6C\u5230\u6D3B\u52A8\u8BE6\u60C5\u9875\n *\n * @example\n * ```tsx\n * <PromotionList\n *   data={{\n *     found: true,\n *     count: 2,\n *     results: [...]\n *   }}\n * />\n * ```\n */\nexport const PromotionList: React.FC<PromotionListProps> = ({ data, isUser = false, isSystem = false }) => {\n  const { found, results } = data\n\n  // \u7A7A\u72B6\u6001\u5904\u7406\n  if (!found || !results || results.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-gray-200 bg-gray-50 p-4 text-center\">\n        <p className=\"text-sm text-gray-500\">\u6682\u65E0\u8FDB\u884C\u4E2D\u7684\u6D3B\u52A8</p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      {results.map(promotion => (\n        <div\n          key={promotion.id}\n          className=\"overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md\"\n        >\n          {/* Banner \u56FE\u7247 */}\n          {promotion.banner_url && (\n            <div className=\"aspect-[16/9] w-full overflow-hidden bg-gray-100\">\n              <img\n                src={promotion.banner_url}\n                alt={promotion.title}\n                className=\"size-full object-cover object-center\"\n                loading=\"lazy\"\n              />\n            </div>\n          )}\n\n          {/* \u6D3B\u52A8\u4FE1\u606F */}\n          <div className=\"p-4\">\n            {/* \u6807\u9898\u548C\u526F\u6807\u9898 */}\n            <div className=\"mb-2\">\n              <h3 className=\"text-xl font-bold leading-[1.2] tracking-[-0.04em] text-gray-900\">{promotion.title}</h3>\n              {promotion.subtitle && (\n                <p className=\"mt-1 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-red-600\">\n                  {promotion.subtitle}\n                </p>\n              )}\n            </div>\n\n            {/* \u6D3B\u52A8\u63CF\u8FF0 */}\n            {/* {promotion.description && (\n              <p className=\"mb-3 text-sm leading-relaxed text-gray-600\">{promotion.description}</p>\n            )} */}\n\n            {/* \u6D3B\u52A8\u5143\u4FE1\u606F */}\n            {/* <div className=\"mb-3 space-y-1 text-xs text-gray-500\"> */}\n            {/* \u6D3B\u52A8\u65F6\u95F4 */}\n            {/* <div className=\"flex items-center gap-1\">\n                <svg className=\"size-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n                  />\n                </svg>\n                <span>\n                  {formatDate(promotion.time_range.start)}\n                  {promotion.time_range.end ? ` - ${formatDate(promotion.time_range.end)}` : ' - Ongoing'}\n                </span>\n              </div> */}\n\n            {/* \u53C2\u4E0E\u5546\u54C1\u6570\u91CF */}\n            {/* {promotion.product_count !== undefined && promotion.product_count > 0 && (\n                <div className=\"flex items-center gap-1\">\n                  <svg className=\"size-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z\"\n                    />\n                  </svg>\n                  <span>{promotion.product_count} products</span>\n                </div>\n              )}\n            </div> */}\n\n            {/* \u67E5\u770B\u8BE6\u60C5\u6309\u94AE */}\n            {promotion.url && (\n              <a\n                href={promotion.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"inline-flex items-center gap-1 text-sm font-bold leading-[1.2] tracking-[-0.04em]\"\n              >\n                Learn More\n                <svg className=\"size-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n                </svg>\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n\n/**\n * \u521B\u5EFA\u4FC3\u9500\u6D3B\u52A8\u5217\u8868\u6E32\u67D3\u5668\n */\nexport const PromotionListRenderer: MessageRenderer = {\n  render: (content, isUser, isSystem) => {\n    if (content.type !== 'promotion_list' || !content.data) {\n      return null\n    }\n\n    return <PromotionList data={content.data as PromotionListData} isUser={isUser} isSystem={isSystem} />\n  },\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,0BAAAC,IAAA,eAAAC,EAAAJ,GAmGQ,IAAAK,EAAA,6BArCR,MAAMC,EAAcC,GACL,IAAI,KAAKA,CAAO,EACjB,mBAAmB,QAAS,CACtC,KAAM,UACN,MAAO,QACP,IAAK,SACP,CAAC,EAwBUL,EAA8C,CAAC,CAAE,KAAAM,EAAM,OAAAC,EAAS,GAAO,SAAAC,EAAW,EAAM,IAAM,CACzG,KAAM,CAAE,MAAAC,EAAO,QAAAC,CAAQ,EAAIJ,EAG3B,MAAI,CAACG,GAAS,CAACC,GAAWA,EAAQ,SAAW,KAEzC,OAAC,OAAI,UAAU,+DACb,mBAAC,KAAE,UAAU,wBAAwB,4DAAQ,EAC/C,KAKF,OAAC,OAAI,UAAU,YACZ,SAAAA,EAAQ,IAAIC,MACX,QAAC,OAEC,UAAU,yGAGT,UAAAA,EAAU,eACT,OAAC,OAAI,UAAU,mDACb,mBAAC,OACC,IAAKA,EAAU,WACf,IAAKA,EAAU,MACf,UAAU,uCACV,QAAQ,OACV,EACF,KAIF,QAAC,OAAI,UAAU,MAEb,qBAAC,OAAI,UAAU,OACb,oBAAC,MAAG,UAAU,mEAAoE,SAAAA,EAAU,MAAM,EACjGA,EAAU,aACT,OAAC,KAAE,UAAU,uEACV,SAAAA,EAAU,SACb,GAEJ,EA0CCA,EAAU,QACT,QAAC,KACC,KAAMA,EAAU,IAChB,OAAO,SACP,IAAI,sBACJ,UAAU,oFACX,0BAEC,OAAC,OAAI,UAAU,SAAS,KAAK,OAAO,OAAO,eAAe,QAAQ,YAChE,mBAAC,QAAK,cAAc,QAAQ,eAAe,QAAQ,YAAa,EAAG,EAAE,eAAe,EACtF,GACF,GAEJ,IAhFKA,EAAU,EAiFjB,CACD,EACH,CAEJ,EAKaV,EAAyC,CACpD,OAAQ,CAACW,EAASL,EAAQC,IACpBI,EAAQ,OAAS,kBAAoB,CAACA,EAAQ,KACzC,QAGF,OAACZ,EAAA,CAAc,KAAMY,EAAQ,KAA2B,OAAQL,EAAQ,SAAUC,EAAU,CAEvG",
+  "names": ["PromotionList_exports", "__export", "PromotionList", "PromotionListRenderer", "__toCommonJS", "import_jsx_runtime", "formatDate", "dateStr", "data", "isUser", "isSystem", "found", "results", "promotion", "content"]
+}

package/dist/cjs/components/LiveChatWidget/components/MessageContent/QuickReplies.d.ts

@@ -0,0 +1,54 @@
+/**
+ * 快捷回复按钮渲染器
+ * 显示可点击的快捷回复选项
+ * 基于 specs/livechat-widget/data-model.md 的快捷回复数据模型
+ */
+import type { MessageRenderer, QuickReply } from '../../types';
+export interface QuickRepliesProps {
+    /**
+     * 快捷回复点击回调
+     */
+    onReplyClick?: (reply: QuickReply) => void;
+}
+/**
+ * 快捷回复按钮渲染器
+ *
+ * 功能：
+ * - 显示多个快捷回复按钮
+ * - 支持图标（可选）
+ * - 点击后发送对应的消息
+ *
+ * 使用场景：
+ * - 欢迎消息后的常见问题
+ * - 引导用户选择
+ * - 快速操作按钮
+ *
+ * 布局：
+ * ```
+ * ┌──────────┐ ┌──────────┐
+ * │ 🛒 查价格 │ │ 📦 查物流 │
+ * └──────────┘ └──────────┘
+ * ┌──────────┐ ┌──────────┐
+ * │ 📞 联系客服│ │ 💬 其他问题│
+ * └──────────┘ └──────────┘
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const content: QuickRepliesContent = {
+ *   type: 'quick_replies',
+ *   data: {
+ *     replies: [
+ *       { id: '1', label: '查价格', value: '我想查询商品价格', icon: '🛒' },
+ *       { id: '2', label: '查物流', value: '我想查询物流信息', icon: '📦' }
+ *     ]
+ *   }
+ * }
+ * <QuickReplies.render(content, false, false) />
+ * ```
+ */
+export declare const createQuickRepliesRenderer: (onReplyClick?: (reply: QuickReply) => void) => MessageRenderer;
+/**
+ * 默认快捷回复渲染器（无回调）
+ */
+export declare const QuickReplies: MessageRenderer;

package/dist/cjs/components/LiveChatWidget/components/MessageContent/QuickReplies.js

@@ -0,0 +1,2 @@
+"use strict";var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var d=(t,e)=>{for(var a in e)l(t,a,{get:e[a],enumerable:!0})},m=(t,e,a,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of k(e))!R.call(t,i)&&i!==a&&l(t,i,{get:()=>e[i],enumerable:!(c=u(e,i))||c.enumerable});return t};var x=t=>m(l({},"__esModule",{value:!0}),t);var Q={};d(Q,{QuickReplies:()=>y,createQuickRepliesRenderer:()=>r});module.exports=x(Q);var s=require("react/jsx-runtime");const r=t=>({render:(e,a,c)=>{const i=e,{replies:p}=i.data;if(!p||p.length===0)return null;const o=n=>{t?.(n)};return(0,s.jsx)("div",{className:"flex flex-wrap gap-2",children:p.map(n=>(0,s.jsxs)("button",{type:"button",onClick:()=>o(n),className:"livechat-quick-reply-button inline-flex items-center gap-1 rounded-[19px] px-3 py-[6px] text-sm leading-[140%] tracking-[-0.02em] transition-transform hover:scale-105 active:scale-95",children:[n.icon&&(0,s.jsx)("span",{className:"text-base",children:n.icon}),(0,s.jsx)("span",{children:n.label})]},n.id))})}}),y=r();
+//# sourceMappingURL=QuickReplies.js.map

package/dist/cjs/components/LiveChatWidget/components/MessageContent/QuickReplies.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/QuickReplies.tsx"],
+  "sourcesContent": ["/**\n * \u5FEB\u6377\u56DE\u590D\u6309\u94AE\u6E32\u67D3\u5668\n * \u663E\u793A\u53EF\u70B9\u51FB\u7684\u5FEB\u6377\u56DE\u590D\u9009\u9879\n * \u57FA\u4E8E specs/livechat-widget/data-model.md \u7684\u5FEB\u6377\u56DE\u590D\u6570\u636E\u6A21\u578B\n */\n\nimport React from 'react'\nimport type { MessageRenderer, QuickRepliesContent, QuickReply } from '../../types'\n\nexport interface QuickRepliesProps {\n  /**\n   * \u5FEB\u6377\u56DE\u590D\u70B9\u51FB\u56DE\u8C03\n   */\n  onReplyClick?: (reply: QuickReply) => void\n}\n\n/**\n * \u5FEB\u6377\u56DE\u590D\u6309\u94AE\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u663E\u793A\u591A\u4E2A\u5FEB\u6377\u56DE\u590D\u6309\u94AE\n * - \u652F\u6301\u56FE\u6807\uFF08\u53EF\u9009\uFF09\n * - \u70B9\u51FB\u540E\u53D1\u9001\u5BF9\u5E94\u7684\u6D88\u606F\n *\n * \u4F7F\u7528\u573A\u666F\uFF1A\n * - \u6B22\u8FCE\u6D88\u606F\u540E\u7684\u5E38\u89C1\u95EE\u9898\n * - \u5F15\u5BFC\u7528\u6237\u9009\u62E9\n * - \u5FEB\u901F\u64CD\u4F5C\u6309\u94AE\n *\n * \u5E03\u5C40\uFF1A\n * ```\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 \uD83D\uDED2 \u67E5\u4EF7\u683C \u2502 \u2502 \uD83D\uDCE6 \u67E5\u7269\u6D41 \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 \uD83D\uDCDE \u8054\u7CFB\u5BA2\u670D\u2502 \u2502 \uD83D\uDCAC \u5176\u4ED6\u95EE\u9898\u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ```\n *\n * @example\n * ```tsx\n * const content: QuickRepliesContent = {\n *   type: 'quick_replies',\n *   data: {\n *     replies: [\n *       { id: '1', label: '\u67E5\u4EF7\u683C', value: '\u6211\u60F3\u67E5\u8BE2\u5546\u54C1\u4EF7\u683C', icon: '\uD83D\uDED2' },\n *       { id: '2', label: '\u67E5\u7269\u6D41', value: '\u6211\u60F3\u67E5\u8BE2\u7269\u6D41\u4FE1\u606F', icon: '\uD83D\uDCE6' }\n *     ]\n *   }\n * }\n * <QuickReplies.render(content, false, false) />\n * ```\n */\nexport const createQuickRepliesRenderer = (onReplyClick?: (reply: QuickReply) => void): MessageRenderer => ({\n  render: (content, isUser, isSystem) => {\n    const quickRepliesContent = content as QuickRepliesContent\n    const { replies } = quickRepliesContent.data\n\n    if (!replies || replies.length === 0) {\n      return null\n    }\n\n    const handleClick = (reply: QuickReply) => {\n      onReplyClick?.(reply)\n    }\n\n    return (\n      <div className=\"flex flex-wrap gap-2\">\n        {replies.map(reply => (\n          <button\n            key={reply.id}\n            type=\"button\"\n            onClick={() => handleClick(reply)}\n            className=\"livechat-quick-reply-button inline-flex items-center gap-1 rounded-[19px] px-3 py-[6px] text-sm leading-[140%] tracking-[-0.02em] transition-transform hover:scale-105 active:scale-95\"\n          >\n            {/* \u56FE\u6807\uFF08\u53EF\u9009\uFF09 */}\n            {reply.icon && <span className=\"text-base\">{reply.icon}</span>}\n\n            {/* \u6807\u7B7E */}\n            <span>{reply.label}</span>\n          </button>\n        ))}\n      </div>\n    )\n  },\n})\n\n/**\n * \u9ED8\u8BA4\u5FEB\u6377\u56DE\u590D\u6E32\u67D3\u5668\uFF08\u65E0\u56DE\u8C03\uFF09\n */\nexport const QuickReplies: MessageRenderer = createQuickRepliesRenderer()\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,+BAAAC,IAAA,eAAAC,EAAAJ,GAqEU,IAAAK,EAAA,6BAhBH,MAAMF,EAA8BG,IAAiE,CAC1G,OAAQ,CAACC,EAASC,EAAQC,IAAa,CACrC,MAAMC,EAAsBH,EACtB,CAAE,QAAAI,CAAQ,EAAID,EAAoB,KAExC,GAAI,CAACC,GAAWA,EAAQ,SAAW,EACjC,OAAO,KAGT,MAAMC,EAAeC,GAAsB,CACzCP,IAAeO,CAAK,CACtB,EAEA,SACE,OAAC,OAAI,UAAU,uBACZ,SAAAF,EAAQ,IAAIE,MACX,QAAC,UAEC,KAAK,SACL,QAAS,IAAMD,EAAYC,CAAK,EAChC,UAAU,yLAGT,UAAAA,EAAM,SAAQ,OAAC,QAAK,UAAU,YAAa,SAAAA,EAAM,KAAK,KAGvD,OAAC,QAAM,SAAAA,EAAM,MAAM,IATdA,EAAM,EAUb,CACD,EACH,CAEJ,CACF,GAKaX,EAAgCC,EAA2B",
+  "names": ["QuickReplies_exports", "__export", "QuickReplies", "createQuickRepliesRenderer", "__toCommonJS", "import_jsx_runtime", "onReplyClick", "content", "isUser", "isSystem", "quickRepliesContent", "replies", "handleClick", "reply"]
+}

package/dist/cjs/components/LiveChatWidget/components/MessageContent/TextBlock.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 文本消息内容渲染器
+ * 支持 Markdown 格式
+ * 基于 specs/livechat-widget/plan.md 的文本消息设计
+ */
+import type { MessageRenderer } from '../../types';
+/**
+ * 文本消息渲染器
+ *
+ * 功能：
+ * - 支持 Markdown 语法（粗体、斜体、链接、列表等）
+ * - 安全渲染（React Markdown 自动防护 XSS）
+ * - 响应式文本样式
+ *
+ * Markdown 支持：
+ * - 粗体：**text** 或 __text__
+ * - 斜体：*text* 或 _text_
+ * - 链接：[text](url)
+ * - 列表：- item 或 1. item
+ * - 代码：`code` 或 ```code block```
+ *
+ * @example
+ * ```tsx
+ * const content: TextContent = {
+ *   type: 'text',
+ *   text: '您好！**这是粗体**，*这是斜体*。'
+ * }
+ * <TextBlock.render(content, false, false) />
+ * ```
+ */
+export declare const TextBlock: MessageRenderer;

package/dist/cjs/components/LiveChatWidget/components/MessageContent/TextBlock.js

@@ -0,0 +1,2 @@
+"use strict";var c=Object.create;var m=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var i=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var N=(t,a)=>{for(var l in a)m(t,l,{get:a[l],enumerable:!0})},d=(t,a,l,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of b(a))!g.call(t,o)&&o!==l&&m(t,o,{get:()=>a[o],enumerable:!(s=x(a,o))||s.enumerable});return t};var f=(t,a,l)=>(l=t!=null?c(i(t)):{},d(a||!t||!t.__esModule?m(l,"default",{value:t,enumerable:!0}):l,t)),u=t=>d(m({},"__esModule",{value:!0}),t);var p={};N(p,{TextBlock:()=>h});module.exports=u(p);var n=require("react/jsx-runtime"),r=f(require("react-markdown"));const h={render:(t,a,l)=>{const s=t;return s.text?(0,n.jsx)("div",{className:"livechat-markdown text-sm leading-relaxed",children:(0,n.jsx)(r.default,{components:{a:({node:o,...e})=>(0,n.jsx)("a",{...e,className:`underline ${a?"text-blue-200 hover:text-blue-100":"text-blue-600 hover:text-blue-700"}`,target:"_blank",rel:"noopener noreferrer"}),code:({node:o,...e})=>e.inline?(0,n.jsx)("code",{...e,className:`rounded px-1.5 py-0.5 font-mono text-xs ${a?"bg-[#004A6E] text-white":"bg-gray-200 text-gray-800"}`}):(0,n.jsx)("code",{...e,className:`block overflow-x-auto rounded px-3 py-2 font-mono text-xs ${a?"bg-[#004A6E] text-white":"bg-gray-200 text-gray-800"}`}),p:({node:o,...e})=>(0,n.jsx)("p",{...e,className:"last:mb-0"}),ul:({node:o,...e})=>(0,n.jsx)("ul",{...e,className:"mb-2 ml-4 list-disc"}),ol:({node:o,...e})=>(0,n.jsx)("ol",{...e,className:"mb-2 ml-4 list-decimal"}),li:({node:o,...e})=>(0,n.jsx)("li",{...e,className:"mb-1"}),h1:({node:o,...e})=>(0,n.jsx)("h1",{...e,className:"mb-2 text-lg font-bold"}),h2:({node:o,...e})=>(0,n.jsx)("h2",{...e,className:"mb-2 text-base font-bold"}),h3:({node:o,...e})=>(0,n.jsx)("h3",{...e,className:"mb-1 text-sm font-bold"}),strong:({node:o,...e})=>(0,n.jsx)("strong",{...e,className:"font-semibold"}),em:({node:o,...e})=>(0,n.jsx)("em",{...e,className:"italic"})},children:s.text})}):null}};
+//# sourceMappingURL=TextBlock.js.map

package/dist/cjs/components/LiveChatWidget/components/MessageContent/TextBlock.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/TextBlock.tsx"],
+  "sourcesContent": ["/**\n * \u6587\u672C\u6D88\u606F\u5185\u5BB9\u6E32\u67D3\u5668\n * \u652F\u6301 Markdown \u683C\u5F0F\n * \u57FA\u4E8E specs/livechat-widget/plan.md \u7684\u6587\u672C\u6D88\u606F\u8BBE\u8BA1\n */\n\nimport React from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport type { MessageRenderer, TextContent } from '../../types'\n\n/**\n * \u6587\u672C\u6D88\u606F\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u652F\u6301 Markdown \u8BED\u6CD5\uFF08\u7C97\u4F53\u3001\u659C\u4F53\u3001\u94FE\u63A5\u3001\u5217\u8868\u7B49\uFF09\n * - \u5B89\u5168\u6E32\u67D3\uFF08React Markdown \u81EA\u52A8\u9632\u62A4 XSS\uFF09\n * - \u54CD\u5E94\u5F0F\u6587\u672C\u6837\u5F0F\n *\n * Markdown \u652F\u6301\uFF1A\n * - \u7C97\u4F53\uFF1A**text** \u6216 __text__\n * - \u659C\u4F53\uFF1A*text* \u6216 _text_\n * - \u94FE\u63A5\uFF1A[text](url)\n * - \u5217\u8868\uFF1A- item \u6216 1. item\n * - \u4EE3\u7801\uFF1A`code` \u6216 ```code block```\n *\n * @example\n * ```tsx\n * const content: TextContent = {\n *   type: 'text',\n *   text: '\u60A8\u597D\uFF01**\u8FD9\u662F\u7C97\u4F53**\uFF0C*\u8FD9\u662F\u659C\u4F53*\u3002'\n * }\n * <TextBlock.render(content, false, false) />\n * ```\n */\nexport const TextBlock: MessageRenderer = {\n  render: (content, isUser, isSystem) => {\n    const textContent = content as TextContent\n\n    if (!textContent.text) {\n      return null\n    }\n\n    return (\n      <div className=\"livechat-markdown text-sm leading-relaxed\">\n        <ReactMarkdown\n          components={{\n            // \u81EA\u5B9A\u4E49\u94FE\u63A5\u6837\u5F0F\n            a: ({ node, ...props }) => (\n              <a\n                {...props}\n                className={`underline ${isUser ? 'text-blue-200 hover:text-blue-100' : 'text-blue-600 hover:text-blue-700'}`}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              />\n            ),\n            // \u81EA\u5B9A\u4E49\u4EE3\u7801\u5757\u6837\u5F0F\n            code: ({ node, ...props }: any) =>\n              props.inline ? (\n                <code\n                  {...props}\n                  className={`rounded px-1.5 py-0.5 font-mono text-xs ${isUser ? 'bg-[#004A6E] text-white' : 'bg-gray-200 text-gray-800'}`}\n                />\n              ) : (\n                <code\n                  {...props}\n                  className={`block overflow-x-auto rounded px-3 py-2 font-mono text-xs ${isUser ? 'bg-[#004A6E] text-white' : 'bg-gray-200 text-gray-800'}`}\n                />\n              ),\n            // \u81EA\u5B9A\u4E49\u6BB5\u843D\u6837\u5F0F\n            p: ({ node, ...props }) => <p {...props} className=\"last:mb-0\" />,\n            // \u81EA\u5B9A\u4E49\u5217\u8868\u6837\u5F0F\n            ul: ({ node, ...props }) => <ul {...props} className=\"mb-2 ml-4 list-disc\" />,\n            ol: ({ node, ...props }) => <ol {...props} className=\"mb-2 ml-4 list-decimal\" />,\n            li: ({ node, ...props }) => <li {...props} className=\"mb-1\" />,\n            // \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F\n            h1: ({ node, ...props }) => <h1 {...props} className=\"mb-2 text-lg font-bold\" />,\n            h2: ({ node, ...props }) => <h2 {...props} className=\"mb-2 text-base font-bold\" />,\n            h3: ({ node, ...props }) => <h3 {...props} className=\"mb-1 text-sm font-bold\" />,\n            // \u81EA\u5B9A\u4E49\u5F3A\u8C03\u6837\u5F0F\n            strong: ({ node, ...props }) => <strong {...props} className=\"font-semibold\" />,\n            em: ({ node, ...props }) => <em {...props} className=\"italic\" />,\n          }}\n        >\n          {textContent.text}\n        </ReactMarkdown>\n      </div>\n    )\n  },\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAgDc,IAAAI,EAAA,6BAzCdC,EAA0B,6BA2BnB,MAAMH,EAA6B,CACxC,OAAQ,CAACI,EAASC,EAAQC,IAAa,CACrC,MAAMC,EAAcH,EAEpB,OAAKG,EAAY,QAKf,OAAC,OAAI,UAAU,4CACb,mBAAC,EAAAC,QAAA,CACC,WAAY,CAEV,EAAG,CAAC,CAAE,KAAAC,EAAM,GAAGC,CAAM,OACnB,OAAC,KACE,GAAGA,EACJ,UAAW,aAAaL,EAAS,oCAAsC,mCAAmC,GAC1G,OAAO,SACP,IAAI,sBACN,EAGF,KAAM,CAAC,CAAE,KAAAI,EAAM,GAAGC,CAAM,IACtBA,EAAM,UACJ,OAAC,QACE,GAAGA,EACJ,UAAW,2CAA2CL,EAAS,0BAA4B,2BAA2B,GACxH,KAEA,OAAC,QACE,GAAGK,EACJ,UAAW,6DAA6DL,EAAS,0BAA4B,2BAA2B,GAC1I,EAGJ,EAAG,CAAC,CAAE,KAAAI,EAAM,GAAGC,CAAM,OAAM,OAAC,KAAG,GAAGA,EAAO,UAAU,YAAY,EAE/D,GAAI,CAAC,CAAE,KAAAD,EAAM,GAAGC,CAAM,OAAM,OAAC,MAAI,GAAGA,EAAO,UAAU,sBAAsB,EAC3E,GAAI,CAAC,CAAE,KAAAD,EAAM,GAAGC,CAAM,OAAM,OAAC,MAAI,GAAGA,EAAO,UAAU,yBAAyB,EAC9E,GAAI,CAAC,CAAE,KAAAD,EAAM,GAAGC,CAAM,OAAM,OAAC,MAAI,GAAGA,EAAO,UAAU,OAAO,EAE5D,GAAI,CAAC,CAAE,KAAAD,EAAM,GAAGC,CAAM,OAAM,OAAC,MAAI,GAAGA,EAAO,UAAU,yBAAyB,EAC9E,GAAI,CAAC,CAAE,KAAAD,EAAM,GAAGC,CAAM,OAAM,OAAC,MAAI,GAAGA,EAAO,UAAU,2BAA2B,EAChF,GAAI,CAAC,CAAE,KAAAD,EAAM,GAAGC,CAAM,OAAM,OAAC,MAAI,GAAGA,EAAO,UAAU,yBAAyB,EAE9E,OAAQ,CAAC,CAAE,KAAAD,EAAM,GAAGC,CAAM,OAAM,OAAC,UAAQ,GAAGA,EAAO,UAAU,gBAAgB,EAC7E,GAAI,CAAC,CAAE,KAAAD,EAAM,GAAGC,CAAM,OAAM,OAAC,MAAI,GAAGA,EAAO,UAAU,SAAS,CAChE,EAEC,SAAAH,EAAY,KACf,EACF,EA9CO,IAgDX,CACF",
+  "names": ["TextBlock_exports", "__export", "TextBlock", "__toCommonJS", "import_jsx_runtime", "import_react_markdown", "content", "isUser", "isSystem", "textContent", "ReactMarkdown", "node", "props"]
+}

package/dist/cjs/components/LiveChatWidget/components/MessageContent/ThinkingBlock.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 思考状态消息渲染器
+ * 显示 AI 助手正在思考的动画
+ * 基于 specs/livechat-widget/plan.md 的思考状态设计
+ */
+import type { MessageRenderer } from '../../types';
+/**
+ * 思考状态渲染器
+ *
+ * 功能：
+ * - 显示"正在思考..."动画
+ * - 三个跳动的圆点
+ * - 黄色背景提示
+ *
+ * 动画效果：
+ * - 使用 CSS 动画（livechat.css 中定义）
+ * - 三个圆点依次跳动
+ * - 循环播放
+ *
+ * @example
+ * ```tsx
+ * const content: ThinkingContent = {
+ *   type: 'thinking',
+ *   data: {
+ *     status: '正在查询商品信息...'
+ *   }
+ * }
+ * <ThinkingBlock.render(content, false, false) />
+ * ```
+ */
+export declare const ThinkingBlock: MessageRenderer;

package/dist/cjs/components/LiveChatWidget/components/MessageContent/ThinkingBlock.js

@@ -0,0 +1,2 @@
+"use strict";var r=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var g=(s,e)=>{for(var a in e)r(s,a,{get:e[a],enumerable:!0})},c=(s,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of l(e))!d.call(s,t)&&t!==a&&r(s,t,{get:()=>e[t],enumerable:!(o=i(e,t))||o.enumerable});return s};var p=s=>c(r({},"__esModule",{value:!0}),s);var k={};g(k,{ThinkingBlock:()=>u});module.exports=p(k);var n=require("react/jsx-runtime");const u={render:(s,e,a)=>{const t=s.data.status||"";return(0,n.jsx)("div",{className:"flex items-center gap-2 py-1",children:(0,n.jsxs)("div",{className:"livechat-thinking-dots flex gap-1",children:[(0,n.jsx)("span",{className:"size-2 rounded-full",style:{backgroundColor:"rgba(0, 93, 142, 1)"}}),(0,n.jsx)("span",{className:"size-2 rounded-full",style:{backgroundColor:"rgba(0, 93, 142, 0.6)"}}),(0,n.jsx)("span",{className:"size-2 rounded-full",style:{backgroundColor:"rgba(0, 93, 142, 0.2)"}})]})})}};
+//# sourceMappingURL=ThinkingBlock.js.map

package/dist/cjs/components/LiveChatWidget/components/MessageContent/ThinkingBlock.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/ThinkingBlock.tsx"],
+  "sourcesContent": ["/**\n * \u601D\u8003\u72B6\u6001\u6D88\u606F\u6E32\u67D3\u5668\n * \u663E\u793A AI \u52A9\u624B\u6B63\u5728\u601D\u8003\u7684\u52A8\u753B\n * \u57FA\u4E8E specs/livechat-widget/plan.md \u7684\u601D\u8003\u72B6\u6001\u8BBE\u8BA1\n */\n\nimport React from 'react'\nimport type { MessageRenderer, ThinkingContent } from '../../types'\n\n/**\n * \u601D\u8003\u72B6\u6001\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u663E\u793A\"\u6B63\u5728\u601D\u8003...\"\u52A8\u753B\n * - \u4E09\u4E2A\u8DF3\u52A8\u7684\u5706\u70B9\n * - \u9EC4\u8272\u80CC\u666F\u63D0\u793A\n *\n * \u52A8\u753B\u6548\u679C\uFF1A\n * - \u4F7F\u7528 CSS \u52A8\u753B\uFF08livechat.css \u4E2D\u5B9A\u4E49\uFF09\n * - \u4E09\u4E2A\u5706\u70B9\u4F9D\u6B21\u8DF3\u52A8\n * - \u5FAA\u73AF\u64AD\u653E\n *\n * @example\n * ```tsx\n * const content: ThinkingContent = {\n *   type: 'thinking',\n *   data: {\n *     status: '\u6B63\u5728\u67E5\u8BE2\u5546\u54C1\u4FE1\u606F...'\n *   }\n * }\n * <ThinkingBlock.render(content, false, false) />\n * ```\n */\nexport const ThinkingBlock: MessageRenderer = {\n  render: (content, isUser, isSystem) => {\n    const thinkingContent = content as ThinkingContent\n    const status = thinkingContent.data.status || ''\n\n    return (\n      <div className=\"flex items-center gap-2 py-1\">\n        {/* \u601D\u8003\u52A8\u753B - \u4E09\u4E2A\u8DF3\u52A8\u7684\u70B9 */}\n        <div className=\"livechat-thinking-dots flex gap-1\">\n          <span className=\"size-2 rounded-full\" style={{ backgroundColor: 'rgba(0, 93, 142, 1)' }} />\n          <span className=\"size-2 rounded-full\" style={{ backgroundColor: 'rgba(0, 93, 142, 0.6)' }} />\n          <span className=\"size-2 rounded-full\" style={{ backgroundColor: 'rgba(0, 93, 142, 0.2)' }} />\n        </div>\n\n        {/* \u72B6\u6001\u6587\u672C\uFF08\u53EF\u9009\uFF09 */}\n        {/* {status && <span className=\"text-sm text-gray-500\">{status}</span>} */}\n      </div>\n    )\n  },\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAyCQ,IAAAI,EAAA,6BARD,MAAMF,EAAiC,CAC5C,OAAQ,CAACG,EAASC,EAAQC,IAAa,CAErC,MAAMC,EADkBH,EACO,KAAK,QAAU,GAE9C,SACE,OAAC,OAAI,UAAU,+BAEb,oBAAC,OAAI,UAAU,oCACb,oBAAC,QAAK,UAAU,sBAAsB,MAAO,CAAE,gBAAiB,qBAAsB,EAAG,KACzF,OAAC,QAAK,UAAU,sBAAsB,MAAO,CAAE,gBAAiB,uBAAwB,EAAG,KAC3F,OAAC,QAAK,UAAU,sBAAsB,MAAO,CAAE,gBAAiB,uBAAwB,EAAG,GAC7F,EAIF,CAEJ,CACF",
+  "names": ["ThinkingBlock_exports", "__export", "ThinkingBlock", "__toCommonJS", "import_jsx_runtime", "content", "isUser", "isSystem", "status"]
+}

package/dist/cjs/components/LiveChatWidget/components/MessageContent/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 消息内容渲染器统一导出
+ */
+export { MessageContent } from '../MessageContent';
+export { TextBlock } from './TextBlock';
+export { ProductCard } from './ProductCard';
+export { ProductList } from './ProductList';
+export { ProductComparison, ProductComparisonRenderer } from './ProductComparison';
+export { PolicyBlock } from './PolicyBlock';
+export { QuickReplies, createQuickRepliesRenderer } from './QuickReplies';
+export { ThinkingBlock } from './ThinkingBlock';
+export { ErrorBlock } from './ErrorBlock';
+export { FAQList, FAQListRenderer } from './FAQList.js';
+export { PromotionList, PromotionListRenderer } from './PromotionList.js';
+export { CartCard } from './CartCard.js';

package/dist/cjs/components/LiveChatWidget/components/MessageContent/index.js

@@ -0,0 +1,2 @@
+"use strict";var c=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var B=(o,r)=>{for(var t in r)c(o,t,{get:r[t],enumerable:!0})},Q=(o,r,t,f)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of R(r))!L.call(o,e)&&e!==t&&c(o,e,{get:()=>r[e],enumerable:!(f=C(r,e))||f.enumerable});return o};var g=o=>Q(c({},"__esModule",{value:!0}),o);var A={};B(A,{CartCard:()=>u.CartCard,ErrorBlock:()=>P.ErrorBlock,FAQList:()=>p.FAQList,FAQListRenderer:()=>p.FAQListRenderer,MessageContent:()=>n.MessageContent,PolicyBlock:()=>k.PolicyBlock,ProductCard:()=>d.ProductCard,ProductComparison:()=>i.ProductComparison,ProductComparisonRenderer:()=>i.ProductComparisonRenderer,ProductList:()=>a.ProductList,PromotionList:()=>x.PromotionList,PromotionListRenderer:()=>x.PromotionListRenderer,QuickReplies:()=>m.QuickReplies,TextBlock:()=>s.TextBlock,ThinkingBlock:()=>l.ThinkingBlock,createQuickRepliesRenderer:()=>m.createQuickRepliesRenderer});module.exports=g(A);var n=require("../MessageContent"),s=require("./TextBlock"),d=require("./ProductCard"),a=require("./ProductList"),i=require("./ProductComparison"),k=require("./PolicyBlock"),m=require("./QuickReplies"),l=require("./ThinkingBlock"),P=require("./ErrorBlock"),p=require("./FAQList.js"),x=require("./PromotionList.js"),u=require("./CartCard.js");
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/LiveChatWidget/components/MessageContent/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/index.ts"],
+  "sourcesContent": ["/**\n * \u6D88\u606F\u5185\u5BB9\u6E32\u67D3\u5668\u7EDF\u4E00\u5BFC\u51FA\n */\n\nexport { MessageContent } from '../MessageContent'\nexport { TextBlock } from './TextBlock'\nexport { ProductCard } from './ProductCard'\nexport { ProductList } from './ProductList'\nexport { ProductComparison, ProductComparisonRenderer } from './ProductComparison'\nexport { PolicyBlock } from './PolicyBlock'\nexport { QuickReplies, createQuickRepliesRenderer } from './QuickReplies'\nexport { ThinkingBlock } from './ThinkingBlock'\nexport { ErrorBlock } from './ErrorBlock'\nexport { FAQList, FAQListRenderer } from './FAQList.js'\nexport { PromotionList, PromotionListRenderer } from './PromotionList.js'\nexport { CartCard } from './CartCard.js'\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,glBAAAE,EAAAF,GAIA,IAAAG,EAA+B,6BAC/BC,EAA0B,uBAC1BC,EAA4B,yBAC5BC,EAA4B,yBAC5BC,EAA6D,+BAC7DC,EAA4B,yBAC5BC,EAAyD,0BACzDC,EAA8B,2BAC9BC,EAA2B,wBAC3BC,EAAyC,wBACzCC,EAAqD,8BACrDC,EAAyB",
+  "names": ["MessageContent_exports", "__export", "__toCommonJS", "import_MessageContent", "import_TextBlock", "import_ProductCard", "import_ProductList", "import_ProductComparison", "import_PolicyBlock", "import_QuickReplies", "import_ThinkingBlock", "import_ErrorBlock", "import_FAQList", "import_PromotionList", "import_CartCard"]
+}

package/dist/cjs/components/LiveChatWidget/components/MessageContent.d.ts

@@ -0,0 +1,63 @@
+/**
+ * 消息内容容器组件
+ * 根据消息内容类型分发到对应的渲染器
+ * 基于 specs/livechat-widget/plan.md 的消息内容渲染设计
+ */
+import React from 'react';
+import type { MessageContent as MessageContentType, MessageRenderer } from '../types';
+import { MessageRendererRegistry } from '../utils/messageRenderers';
+export interface MessageContentProps {
+    /**
+     * 消息内容
+     */
+    content: MessageContentType;
+    /**
+     * 是否为用户消息
+     */
+    isUser: boolean;
+    /**
+     * 是否为系统消息
+     */
+    isSystem: boolean;
+    /**
+     * 自定义渲染器注册表
+     */
+    rendererRegistry?: MessageRendererRegistry;
+    /**
+     * 默认渲染器（当找不到对应渲染器时使用）
+     */
+    defaultRenderer?: MessageRenderer;
+    /**
+     * 自定义样式类名
+     */
+    className?: string;
+    /**
+     * 商品添加到购物车回调
+     */
+    onAddToCart?: (product: any) => void;
+}
+/**
+ * 消息内容容器组件
+ *
+ * 功能：
+ * - 根据 content.type 分发到对应的渲染器
+ * - 支持自定义渲染器注册表
+ * - 提供默认兜底渲染器
+ *
+ * 渲染流程：
+ * 1. 检查自定义渲染器注册表是否有对应类型
+ * 2. 如果有，使用自定义渲染器
+ * 3. 如果没有，使用默认渲染器
+ * 4. 如果默认渲染器也没有，显示未知类型提示
+ *
+ * @example
+ * ```tsx
+ * <MessageContent
+ *   content={content}
+ *   isUser={message.role === 'user'}
+ *   isSystem={message.role === 'system'}
+ *   rendererRegistry={customRegistry}
+ * />
+ * ```
+ */
+export declare const MessageContent: React.FC<MessageContentProps>;

package/dist/cjs/components/LiveChatWidget/components/MessageContent.js

@@ -0,0 +1,2 @@
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var l=(e,r)=>{for(var t in r)d(e,t,{get:r[t],enumerable:!0})},m=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of y(r))!R.call(e,s)&&s!==t&&d(e,s,{get:()=>r[s],enumerable:!(n=c(r,s))||n.enumerable});return e};var M=e=>m(d({},"__esModule",{value:!0}),e);var u={};l(u,{MessageContent:()=>f});module.exports=M(u);var a=require("react/jsx-runtime");const C={render:e=>(0,a.jsxs)("div",{className:"text-sm italic text-gray-500",children:["\u672A\u77E5\u6D88\u606F\u7C7B\u578B: ",e.type]})},f=({content:e,isUser:r,isSystem:t,rendererRegistry:n,defaultRenderer:s,className:g="",onAddToCart:i})=>{let o=e;e.type==="product_list"&&i&&(o={...e,data:{...e.data,onAddToCart:i}});const p=(n?.get(o.type)||s||C).render(o,r,t);return(0,a.jsx)("div",{className:g,children:p})};
+//# sourceMappingURL=MessageContent.js.map

package/dist/cjs/components/LiveChatWidget/components/MessageContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/LiveChatWidget/components/MessageContent.tsx"],
+  "sourcesContent": ["/**\n * \u6D88\u606F\u5185\u5BB9\u5BB9\u5668\u7EC4\u4EF6\n * \u6839\u636E\u6D88\u606F\u5185\u5BB9\u7C7B\u578B\u5206\u53D1\u5230\u5BF9\u5E94\u7684\u6E32\u67D3\u5668\n * \u57FA\u4E8E specs/livechat-widget/plan.md \u7684\u6D88\u606F\u5185\u5BB9\u6E32\u67D3\u8BBE\u8BA1\n */\n\nimport React from 'react'\nimport type { MessageContent as MessageContentType, MessageRenderer } from '../types'\nimport { MessageRendererRegistry } from '../utils/messageRenderers'\n\nexport interface MessageContentProps {\n  /**\n   * \u6D88\u606F\u5185\u5BB9\n   */\n  content: MessageContentType\n\n  /**\n   * \u662F\u5426\u4E3A\u7528\u6237\u6D88\u606F\n   */\n  isUser: boolean\n\n  /**\n   * \u662F\u5426\u4E3A\u7CFB\u7EDF\u6D88\u606F\n   */\n  isSystem: 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\uFF08\u5F53\u627E\u4E0D\u5230\u5BF9\u5E94\u6E32\u67D3\u5668\u65F6\u4F7F\u7528\uFF09\n   */\n  defaultRenderer?: MessageRenderer\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 * \u9ED8\u8BA4\u6E32\u67D3\u5668 - \u663E\u793A\u672A\u77E5\u7C7B\u578B\u63D0\u793A\n */\nconst defaultFallbackRenderer: MessageRenderer = {\n  render: content => <div className=\"text-sm italic text-gray-500\">\u672A\u77E5\u6D88\u606F\u7C7B\u578B: {content.type}</div>,\n}\n\n/**\n * \u6D88\u606F\u5185\u5BB9\u5BB9\u5668\u7EC4\u4EF6\n *\n * \u529F\u80FD\uFF1A\n * - \u6839\u636E content.type \u5206\u53D1\u5230\u5BF9\u5E94\u7684\u6E32\u67D3\u5668\n * - \u652F\u6301\u81EA\u5B9A\u4E49\u6E32\u67D3\u5668\u6CE8\u518C\u8868\n * - \u63D0\u4F9B\u9ED8\u8BA4\u515C\u5E95\u6E32\u67D3\u5668\n *\n * \u6E32\u67D3\u6D41\u7A0B\uFF1A\n * 1. \u68C0\u67E5\u81EA\u5B9A\u4E49\u6E32\u67D3\u5668\u6CE8\u518C\u8868\u662F\u5426\u6709\u5BF9\u5E94\u7C7B\u578B\n * 2. \u5982\u679C\u6709\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u6E32\u67D3\u5668\n * 3. \u5982\u679C\u6CA1\u6709\uFF0C\u4F7F\u7528\u9ED8\u8BA4\u6E32\u67D3\u5668\n * 4. \u5982\u679C\u9ED8\u8BA4\u6E32\u67D3\u5668\u4E5F\u6CA1\u6709\uFF0C\u663E\u793A\u672A\u77E5\u7C7B\u578B\u63D0\u793A\n *\n * @example\n * ```tsx\n * <MessageContent\n *   content={content}\n *   isUser={message.role === 'user'}\n *   isSystem={message.role === 'system'}\n *   rendererRegistry={customRegistry}\n * />\n * ```\n */\nexport const MessageContent: React.FC<MessageContentProps> = ({\n  content,\n  isUser,\n  isSystem,\n  rendererRegistry,\n  defaultRenderer,\n  className = '',\n  onAddToCart,\n}) => {\n  // \u52A8\u6001\u6CE8\u5165 onAddToCart \u5230 product_list \u7C7B\u578B\u7684\u5185\u5BB9\u4E2D\n  let processedContent = content\n  if (content.type === 'product_list' && onAddToCart) {\n    processedContent = {\n      ...content,\n      data: {\n        ...(content as any).data,\n        onAddToCart,\n      },\n    }\n  }\n\n  // \u5C1D\u8BD5\u4ECE\u6CE8\u518C\u8868\u83B7\u53D6\u6E32\u67D3\u5668\n  const customRenderer = rendererRegistry?.get(processedContent.type)\n\n  // \u786E\u5B9A\u6700\u7EC8\u4F7F\u7528\u7684\u6E32\u67D3\u5668\n  const renderer = customRenderer || defaultRenderer || defaultFallbackRenderer\n\n  // \u6E32\u67D3\u5185\u5BB9\n  const rendered = renderer.render(processedContent, isUser, isSystem)\n\n  return <div className={className}>{rendered}</div>\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,IAAA,eAAAC,EAAAH,GAmDqB,IAAAI,EAAA,6BADrB,MAAMC,EAA2C,CAC/C,OAAQC,MAAW,QAAC,OAAI,UAAU,+BAA+B,mDAASA,EAAQ,MAAK,CACzF,EA0BaJ,EAAgD,CAAC,CAC5D,QAAAI,EACA,OAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,UAAAC,EAAY,GACZ,YAAAC,CACF,IAAM,CAEJ,IAAIC,EAAmBP,EACnBA,EAAQ,OAAS,gBAAkBM,IACrCC,EAAmB,CACjB,GAAGP,EACH,KAAM,CACJ,GAAIA,EAAgB,KACpB,YAAAM,CACF,CACF,GAUF,MAAME,GANiBL,GAAkB,IAAII,EAAiB,IAAI,GAG/BH,GAAmBL,GAG5B,OAAOQ,EAAkBN,EAAQC,CAAQ,EAEnE,SAAO,OAAC,OAAI,UAAWG,EAAY,SAAAG,EAAS,CAC9C",
+  "names": ["MessageContent_exports", "__export", "MessageContent", "__toCommonJS", "import_jsx_runtime", "defaultFallbackRenderer", "content", "isUser", "isSystem", "rendererRegistry", "defaultRenderer", "className", "onAddToCart", "processedContent", "rendered"]
+}