npm - @anker-in/campaign-ui - Versions diffs - 0.2.11-beta.30 → 0.2.11-beta.32 - Mend

@anker-in/campaign-ui 0.2.11-beta.30 → 0.2.11-beta.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/dist/cjs/components/LiveChatWidget/components/MessageContent/FAQList.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/FAQList.tsx"],
-  "sourcesContent": ["/**\n * FAQ \u5217\u8868\u7EC4\u4EF6\n * \u663E\u793A\u5E38\u89C1\u95EE\u9898\u5217\u8868\uFF0C\u652F\u6301\u6298\u53E0/\u5C55\u5F00\n */\n\nimport React, { useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport type { FAQListContent, FAQItem, MessageRenderer, MessageContent } from '../../types'\n\nexport interface FAQListProps {\n  content: FAQListContent\n  onQuestionClick?: (question: string) => void\n}\n\n/**\n * FAQ \u5217\u8868\u6E32\u67D3\u5668\n * \u7528\u4E8E\u6CE8\u518C\u5230 MessageRendererRegistry\n */\nexport const FAQListRenderer: MessageRenderer = {\n  render: (content: MessageContent) => {\n    if (content.type !== 'faq_list') {\n      return null\n    }\n    return <FAQList content={content as FAQListContent} />\n  },\n}\n\nexport const FAQList: React.FC<FAQListProps> = ({ content, onQuestionClick }) => {\n  const { found, count, total, results } = content.data\n  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())\n\n  // \u5982\u679C\u6CA1\u6709\u627E\u5230\u7ED3\u679C\n  if (!found || results.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-gray-200 bg-white p-4\">\n        <p className=\"text-sm text-gray-500\">\u672A\u627E\u5230\u76F8\u5173\u95EE\u9898</p>\n      </div>\n    )\n  }\n\n  // \u5207\u6362\u5C55\u5F00/\u6298\u53E0\n  const toggleExpand = (id: string) => {\n    setExpandedIds(prev => {\n      const newSet = new Set(prev)\n      if (newSet.has(id)) {\n        newSet.delete(id)\n      } else {\n        newSet.add(id)\n      }\n      return newSet\n    })\n  }\n\n  // \u5904\u7406\u76F8\u5173\u95EE\u9898\u70B9\u51FB\n  const handleRelatedQuestionClick = (question: string) => {\n    onQuestionClick?.(question)\n  }\n\n  return (\n    <div className=\"space-y-2\">\n      {/* FAQ \u5217\u8868 */}\n      <div className=\"space-y-2\">\n        {results.map(item => {\n          const isExpanded = expandedIds.has(item.id)\n\n          return (\n            <div key={item.id} className=\"overflow-hidden rounded-2xl  bg-[#F5F6F7] transition-all\">\n              {/* \u95EE\u9898\u6807\u9898 - \u53EF\u70B9\u51FB\u5C55\u5F00/\u6298\u53E0 */}\n              <button\n                onClick={() => toggleExpand(item.id)}\n                className=\"flex w-full items-center justify-between gap-3 p-4 text-left transition-colors \"\n              >\n                <div className=\"flex-1\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]\">\n                      {item.question}\n                    </span>\n                  </div>\n                </div>\n\n                {/* \u5C55\u5F00/\u6298\u53E0\u56FE\u6807 */}\n                <svg\n                  className={`size-5 shrink-0 text-[#080A0F] transition-transform ${isExpanded ? 'rotate-180' : ''}`}\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n                </svg>\n              </button>\n\n              {/* \u7B54\u6848\u5185\u5BB9 - \u5C55\u5F00\u65F6\u663E\u793A */}\n              {isExpanded && (\n                <div className=\" bg-[#F5F6F7] px-4 py-3 pt-0\">\n                  <div\n                    className=\"prose prose-sm max-w-none border-t border-gray-100  text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56]\"\n                    style={{ paddingTop: '12px' }}\n                  >\n                    <ReactMarkdown>{item.answer}</ReactMarkdown>\n                  </div>\n\n                  {/* \u76F8\u5173\u95EE\u9898 */}\n                  {item.relatedQuestions && item.relatedQuestions.length > 0 && (\n                    <div className=\"mt-4 border-t border-gray-200 pt-3\">\n                      <p className=\"mb-2 text-xs font-medium text-gray-500\">You may also want to know:</p>\n                      <div className=\"space-y-1\">\n                        {item.relatedQuestions.map((q, idx) => (\n                          <button\n                            key={idx}\n                            onClick={() => handleRelatedQuestionClick(q)}\n                            className=\"block w-full text-left text-xs text-blue-600 hover:text-blue-700 hover:underline\"\n                          >\n                            {q}\n                          </button>\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,oBAAAC,IAAA,eAAAC,EAAAJ,GAuBW,IAAAK,EAAA,6BAlBXC,EAAgC,iBAChCC,EAA0B,6BAYnB,MAAMJ,EAAmC,CAC9C,OAASK,GACHA,EAAQ,OAAS,WACZ,QAEF,OAACN,EAAA,CAAQ,QAASM,EAA2B,CAExD,EAEaN,EAAkC,CAAC,CAAE,QAAAM,EAAS,gBAAAC,CAAgB,IAAM,CAC/E,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,QAAAC,CAAQ,EAAIL,EAAQ,KAC3C,CAACM,EAAaC,CAAc,KAAI,YAAsB,IAAI,GAAK,EAGrE,GAAI,CAACL,GAASG,EAAQ,SAAW,EAC/B,SACE,OAAC,OAAI,UAAU,iDACb,mBAAC,KAAE,UAAU,wBAAwB,sDAAO,EAC9C,EAKJ,MAAMG,EAAgBC,GAAe,CACnCF,EAAeG,GAAQ,CACrB,MAAMC,EAAS,IAAI,IAAID,CAAI,EAC3B,OAAIC,EAAO,IAAIF,CAAE,EACfE,EAAO,OAAOF,CAAE,EAEhBE,EAAO,IAAIF,CAAE,EAERE,CACT,CAAC,CACH,EAGMC,EAA8BC,GAAqB,CACvDZ,IAAkBY,CAAQ,CAC5B,EAEA,SACE,OAAC,OAAI,UAAU,YAEb,mBAAC,OAAI,UAAU,YACZ,SAAAR,EAAQ,IAAIS,GAAQ,CACnB,MAAMC,EAAaT,EAAY,IAAIQ,EAAK,EAAE,EAE1C,SACE,QAAC,OAAkB,UAAU,2DAE3B,qBAAC,UACC,QAAS,IAAMN,EAAaM,EAAK,EAAE,EACnC,UAAU,kFAEV,oBAAC,OAAI,UAAU,SACb,mBAAC,OAAI,UAAU,0BACb,mBAAC,QAAK,UAAU,oEACb,SAAAA,EAAK,SACR,EACF,EACF,KAGA,OAAC,OACC,UAAW,uDAAuDC,EAAa,aAAe,EAAE,GAChG,KAAK,OACL,QAAQ,YACR,OAAO,eAEP,mBAAC,QAAK,cAAc,QAAQ,eAAe,QAAQ,YAAa,EAAG,EAAE,iBAAiB,EACxF,GACF,EAGCA,MACC,QAAC,OAAI,UAAU,+BACb,oBAAC,OACC,UAAU,wHACV,MAAO,CAAE,WAAY,MAAO,EAE5B,mBAAC,EAAAC,QAAA,CAAe,SAAAF,EAAK,OAAO,EAC9B,EAGCA,EAAK,kBAAoBA,EAAK,iBAAiB,OAAS,MACvD,QAAC,OAAI,UAAU,qCACb,oBAAC,KAAE,UAAU,yCAAyC,sCAA0B,KAChF,OAAC,OAAI,UAAU,YACZ,SAAAA,EAAK,iBAAiB,IAAI,CAACG,EAAGC,OAC7B,OAAC,UAEC,QAAS,IAAMN,EAA2BK,CAAC,EAC3C,UAAU,mFAET,SAAAA,GAJIC,CAKP,CACD,EACH,GACF,GAEJ,IApDMJ,EAAK,EAsDf,CAEJ,CAAC,EACH,EACF,CAEJ",
+  "sourcesContent": ["/**\n * FAQ \u5217\u8868\u7EC4\u4EF6\n * \u663E\u793A\u5E38\u89C1\u95EE\u9898\u5217\u8868\uFF0C\u652F\u6301\u6298\u53E0/\u5C55\u5F00\n */\n\nimport React, { useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport type { FAQListContent, FAQItem, MessageRenderer, MessageContent } from '../../types'\n\nexport interface FAQListProps {\n  content: FAQListContent\n  onQuestionClick?: (question: string) => void\n}\n\n/**\n * FAQ \u5217\u8868\u6E32\u67D3\u5668\n * \u7528\u4E8E\u6CE8\u518C\u5230 MessageRendererRegistry\n */\nexport const FAQListRenderer: MessageRenderer = {\n  render: (content: MessageContent) => {\n    if (content.type !== 'faq_list') {\n      return null\n    }\n    return <FAQList content={content as FAQListContent} />\n  },\n}\n\nexport const FAQList: React.FC<FAQListProps> = ({ content, onQuestionClick }) => {\n  const { found, count, total, results } = content.data\n  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())\n\n  // \u5982\u679C\u6CA1\u6709\u627E\u5230\u7ED3\u679C\n  if (!found || results.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-gray-200 bg-white p-4\">\n        <p className=\"text-sm text-gray-500\">\u672A\u627E\u5230\u76F8\u5173\u95EE\u9898</p>\n      </div>\n    )\n  }\n\n  // \u5207\u6362\u5C55\u5F00/\u6298\u53E0\n  const toggleExpand = (id: string) => {\n    setExpandedIds(prev => {\n      const newSet = new Set(prev)\n      if (newSet.has(id)) {\n        newSet.delete(id)\n      } else {\n        newSet.add(id)\n      }\n      return newSet\n    })\n  }\n\n  // \u5904\u7406\u76F8\u5173\u95EE\u9898\u70B9\u51FB\n  const handleRelatedQuestionClick = (question: string) => {\n    onQuestionClick?.(question)\n  }\n\n  return (\n    <div className=\"space-y-2\">\n      {/* FAQ \u5217\u8868 */}\n      <div className=\"space-y-2\">\n        {results.map(item => {\n          const isExpanded = expandedIds.has(item.id)\n\n          return (\n            <div key={item.id} className=\"overflow-hidden rounded-2xl  bg-[#F5F6F7] transition-all\">\n              {/* \u95EE\u9898\u6807\u9898 - \u53EF\u70B9\u51FB\u5C55\u5F00/\u6298\u53E0 */}\n              <button\n                onClick={() => toggleExpand(item.id)}\n                className=\"flex w-full items-center justify-between gap-3 p-4 text-left transition-colors \"\n              >\n                <div className=\"flex-1\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]\">\n                      {item.question}\n                    </span>\n                  </div>\n                </div>\n\n                {/* \u5C55\u5F00/\u6298\u53E0\u56FE\u6807 */}\n                <svg\n                  className={`size-5 shrink-0 text-[#080A0F] transition-transform ${isExpanded ? 'rotate-180' : ''}`}\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n                </svg>\n              </button>\n\n              {/* \u7B54\u6848\u5185\u5BB9 - \u5C55\u5F00\u65F6\u663E\u793A */}\n              {isExpanded && (\n                <div className=\" bg-[#F5F6F7] px-4 py-3 pt-0\">\n                  <div\n                    className=\"prose prose-sm max-w-none border-t border-gray-100  text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56]\"\n                    style={{ paddingTop: '12px' }}\n                  >\n                    <ReactMarkdown>{item.answer}</ReactMarkdown>\n                  </div>\n\n                  {/* \u76F8\u5173\u95EE\u9898 */}\n                  {item.relatedQuestions && item.relatedQuestions.length > 0 && (\n                    <div className=\"mt-4 border-t border-gray-200 pt-3\">\n                      <p className=\"mb-2 text-xs font-medium text-gray-500\">You may also want to know:</p>\n                      <div className=\"space-y-1\">\n                        {item.relatedQuestions.map((q, idx) => (\n                          <button\n                            key={idx}\n                            onClick={() => handleRelatedQuestionClick(q)}\n                            className=\"block w-full text-left text-xs text-blue-600 hover:text-blue-700 hover:underline\"\n                          >\n                            {q}\n                          </button>\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,oBAAAC,IAAA,eAAAC,EAAAJ,GAuBW,IAAAK,EAAA,6BAlBXC,EAAgC,iBAChCC,EAA0B,6BAYnB,MAAMJ,EAAmC,CAC9C,OAASK,GACHA,EAAQ,OAAS,WACZ,QAEF,OAACN,EAAA,CAAQ,QAASM,EAA2B,CAExD,EAEaN,EAAkC,CAAC,CAAE,QAAAM,EAAS,gBAAAC,CAAgB,IAAM,CAC/E,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,QAAAC,CAAQ,EAAIL,EAAQ,KAC3C,CAACM,EAAaC,CAAc,KAAI,YAAsB,IAAI,GAAK,EAGrE,GAAI,CAACL,GAASG,EAAQ,SAAW,EAC/B,SACE,OAAC,OAAI,UAAU,iDACb,mBAAC,KAAE,UAAU,wBAAwB,sDAAO,EAC9C,EAKJ,MAAMG,EAAgBC,GAAe,CACnCF,EAAeG,GAAQ,CACrB,MAAMC,EAAS,IAAI,IAAID,CAAI,EAC3B,OAAIC,EAAO,IAAIF,CAAE,EACfE,EAAO,OAAOF,CAAE,EAEhBE,EAAO,IAAIF,CAAE,EAERE,CACT,CAAC,CACH,EAGMC,EAA8BC,GAAqB,CACvDZ,IAAkBY,CAAQ,CAC5B,EAEA,SACE,OAAC,OAAI,UAAU,YAEb,mBAAC,OAAI,UAAU,YACZ,SAAAR,EAAQ,IAAIS,GAAQ,CACnB,MAAMC,EAAaT,EAAY,IAAIQ,EAAK,EAAE,EAE1C,SACE,QAAC,OAAkB,UAAU,2DAE3B,qBAAC,UACC,QAAS,IAAMN,EAAaM,EAAK,EAAE,EACnC,UAAU,kFAEV,oBAAC,OAAI,UAAU,SACb,mBAAC,OAAI,UAAU,0BACb,mBAAC,QAAK,UAAU,sEACb,SAAAA,EAAK,SACR,EACF,EACF,KAGA,OAAC,OACC,UAAW,uDAAuDC,EAAa,aAAe,EAAE,GAChG,KAAK,OACL,QAAQ,YACR,OAAO,eAEP,mBAAC,QAAK,cAAc,QAAQ,eAAe,QAAQ,YAAa,EAAG,EAAE,iBAAiB,EACxF,GACF,EAGCA,MACC,QAAC,OAAI,UAAU,+BACb,oBAAC,OACC,UAAU,wHACV,MAAO,CAAE,WAAY,MAAO,EAE5B,mBAAC,EAAAC,QAAA,CAAe,SAAAF,EAAK,OAAO,EAC9B,EAGCA,EAAK,kBAAoBA,EAAK,iBAAiB,OAAS,MACvD,QAAC,OAAI,UAAU,qCACb,oBAAC,KAAE,UAAU,yCAAyC,sCAA0B,KAChF,OAAC,OAAI,UAAU,YACZ,SAAAA,EAAK,iBAAiB,IAAI,CAACG,EAAGC,OAC7B,OAAC,UAEC,QAAS,IAAMN,EAA2BK,CAAC,EAC3C,UAAU,mFAET,SAAAA,GAJIC,CAKP,CACD,EACH,GACF,GAEJ,IApDMJ,EAAK,EAsDf,CAEJ,CAAC,EACH,EACF,CAEJ",
   "names": ["FAQList_exports", "__export", "FAQList", "FAQListRenderer", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_markdown", "content", "onQuestionClick", "found", "count", "total", "results", "expandedIds", "setExpandedIds", "toggleExpand", "id", "prev", "newSet", "handleRelatedQuestionClick", "question", "item", "isExpanded", "ReactMarkdown", "q", "idx"]
 }

package/dist/cjs/components/LiveChatWidget/components/MessageContent/PolicyBlock.js CHANGED Viewed

@@ -1,5 +1,5 @@
 "use strict";var b=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(t,o)=>{for(var n in o)d(t,n,{get:o[n],enumerable:!0})},c=(t,o,n,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of x(o))!y.call(t,s)&&s!==n&&d(t,s,{get:()=>o[s],enumerable:!(i=u(o,s))||i.enumerable});return t};var h=(t,o,n)=>(n=t!=null?b(g(t)):{},c(o||!t||!t.__esModule?d(n,"default",{value:t,enumerable:!0}):n,t)),f=t=>c(d({},"__esModule",{value:!0}),t);var C={};v(C,{PolicyBlock:()=>k});module.exports=f(C);var e=require("react/jsx-runtime"),m=require("react"),p=h(require("react-markdown"));const k={render:(t,o,n)=>{const i=t,{title:s,content:a}=i.data;if(!s||!a)return null;const r=a.length>200;return(0,e.jsx)(N,{title:s,content:a,isLong:r})}},N=({title:t,content:o,isLong:n})=>{const[i,s]=(0,m.useState)(!n);return(0,e.jsxs)("div",{className:"overflow-hidden rounded-lg border border-blue-200 bg-blue-50",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2 border-b border-blue-200 bg-blue-100 px-3 py-2",children:[(0,e.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"shrink-0 text-blue-700",children:[(0,e.jsx)("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"}),(0,e.jsx)("polyline",{points:"14 2 14 8 20 8"}),(0,e.jsx)("line",{x1:"16",y1:"13",x2:"8",y2:"13"}),(0,e.jsx)("line",{x1:"16",y1:"17",x2:"8",y2:"17"}),(0,e.jsx)("polyline",{points:"10 9 9 9 8 9"})]}),(0,e.jsx)("h3",{className:"text-sm font-semibold text-blue-900",children:t})]}),(0,e.jsxs)("div",{className:"px-3 py-2",children:[(0,e.jsx)("div",{className:`
             text-sm leading-relaxed text-blue-900
             ${!i&&n?"line-clamp-3":""}
-          `,children:(0,e.jsx)(p.default,{components:{p:({node:r,...l})=>(0,e.jsx)("p",{...l,className:"mb-2 last:mb-0"}),ul:({node:r,...l})=>(0,e.jsx)("ul",{...l,className:"mb-2 ml-4 list-disc"}),ol:({node:r,...l})=>(0,e.jsx)("ol",{...l,className:"mb-2 ml-4 list-decimal"}),li:({node:r,...l})=>(0,e.jsx)("li",{...l,className:"mb-1"}),strong:({node:r,...l})=>(0,e.jsx)("strong",{...l,className:"font-semibold"})},children:o})}),n&&(0,e.jsxs)("button",{type:"button",onClick:()=>{s(r=>!r)},className:"mt-2 flex items-center gap-1 text-xs font-medium text-blue-700 hover:text-blue-800",children:[(0,e.jsx)("span",{children:i?"\u6536\u8D77":"\u5C55\u5F00"}),(0,e.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:`transition-transform ${i?"rotate-180":""}`,children:(0,e.jsx)("polyline",{points:"6 9 12 15 18 9"})})]})]})]})};
+          `,children:(0,e.jsx)(p.default,{components:{p:({node:r,...l})=>(0,e.jsx)("p",{...l,className:"mb-2 last:mb-0"}),ul:({node:r,...l})=>(0,e.jsx)("ul",{...l,className:"mb-2 ml-4 list-disc"}),ol:({node:r,...l})=>(0,e.jsx)("ol",{...l,className:"mb-2 ml-4 list-decimal"}),li:({node:r,...l})=>(0,e.jsx)("li",{...l,className:"mb-1"}),strong:({node:r,...l})=>(0,e.jsx)("strong",{...l,className:"font-bold"})},children:o})}),n&&(0,e.jsxs)("button",{type:"button",onClick:()=>{s(r=>!r)},className:"mt-2 flex items-center gap-1 text-xs font-medium text-blue-700 hover:text-blue-800",children:[(0,e.jsx)("span",{children:i?"\u6536\u8D77":"\u5C55\u5F00"}),(0,e.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:`transition-transform ${i?"rotate-180":""}`,children:(0,e.jsx)("polyline",{points:"6 9 12 15 18 9"})})]})]})]})};
 //# sourceMappingURL=PolicyBlock.js.map

package/dist/cjs/components/LiveChatWidget/components/MessageContent/PolicyBlock.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/PolicyBlock.tsx"],
-  "sourcesContent": ["/**\n * \u653F\u7B56\u8BF4\u660E\u6E32\u67D3\u5668\n * \u663E\u793A\u9000\u8D27\u3001\u4FDD\u4FEE\u7B49\u653F\u7B56\u4FE1\u606F\n * \u57FA\u4E8E specs/livechat-widget/data-model.md \u7684\u653F\u7B56\u6570\u636E\u6A21\u578B\n */\n\nimport React, { useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport type { MessageRenderer, PolicyContent } from '../../types'\n\n/**\n * \u653F\u7B56\u8BF4\u660E\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u663E\u793A\u653F\u7B56\u6807\u9898\u548C\u5185\u5BB9\n * - \u652F\u6301 Markdown \u683C\u5F0F\n * - \u53EF\u6298\u53E0/\u5C55\u5F00\uFF08\u5185\u5BB9\u8F83\u957F\u65F6\uFF09\n *\n * \u653F\u7B56\u7C7B\u578B\uFF1A\n * - \u9000\u8D27\u653F\u7B56\n * - \u4FDD\u4FEE\u653F\u7B56\n * - \u8FD0\u8D39\u653F\u7B56\n * - \u9690\u79C1\u653F\u7B56\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\u2510\n * \u2502 \uD83D\uDCCB \u653F\u7B56\u6807\u9898            \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\u2524\n * \u2502 \u653F\u7B56\u5185\u5BB9...             \u2502\n * \u2502 (\u652F\u6301 Markdown)         \u2502\n * \u2502                         \u2502\n * \u2502 [\u5C55\u5F00/\u6536\u8D77]             \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\u2518\n * ```\n *\n * @example\n * ```tsx\n * const content: PolicyContent = {\n *   type: 'policy',\n *   data: {\n *     title: '\u9000\u8D27\u653F\u7B56',\n *     content: '\u6211\u4EEC\u63D0\u4F9B 30 \u5929\u65E0\u7406\u7531\u9000\u8D27...'\n *   }\n * }\n * <PolicyBlock.render(content, false, false) />\n * ```\n */\nexport const PolicyBlock: MessageRenderer = {\n  render: (content, isUser, isSystem) => {\n    const policyContent = content as PolicyContent\n    const { title, content: policyText } = policyContent.data\n\n    if (!title || !policyText) {\n      return null\n    }\n\n    // \u5224\u65AD\u5185\u5BB9\u662F\u5426\u8F83\u957F\uFF08\u8D85\u8FC7 200 \u5B57\u7B26\uFF09\n    const isLongContent = policyText.length > 200\n\n    return <PolicyCard title={title} content={policyText} isLong={isLongContent} />\n  },\n}\n\n/**\n * \u653F\u7B56\u5361\u7247\u7EC4\u4EF6\uFF08\u652F\u6301\u6298\u53E0\uFF09\n */\nconst PolicyCard: React.FC<{\n  title: string\n  content: string\n  isLong: boolean\n}> = ({ title, content, isLong }) => {\n  const [isExpanded, setIsExpanded] = useState(!isLong)\n\n  const toggleExpand = () => {\n    setIsExpanded(prev => !prev)\n  }\n\n  return (\n    <div className=\"overflow-hidden rounded-lg border border-blue-200 bg-blue-50\">\n      {/* \u6807\u9898 */}\n      <div className=\"flex items-center gap-2 border-b border-blue-200 bg-blue-100 px-3 py-2\">\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          className=\"shrink-0 text-blue-700\"\n        >\n          <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n          <polyline points=\"14 2 14 8 20 8\" />\n          <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" />\n          <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" />\n          <polyline points=\"10 9 9 9 8 9\" />\n        </svg>\n        <h3 className=\"text-sm font-semibold text-blue-900\">{title}</h3>\n      </div>\n\n      {/* \u5185\u5BB9 */}\n      <div className=\"px-3 py-2\">\n        <div\n          className={`\n            text-sm leading-relaxed text-blue-900\n            ${!isExpanded && isLong ? 'line-clamp-3' : ''}\n          `}\n        >\n          <ReactMarkdown\n            components={{\n              p: ({ node, ...props }) => <p {...props} className=\"mb-2 last:mb-0\" />,\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              strong: ({ node, ...props }) => <strong {...props} className=\"font-semibold\" />,\n            }}\n          >\n            {content}\n          </ReactMarkdown>\n        </div>\n\n        {/* \u5C55\u5F00/\u6536\u8D77\u6309\u94AE\uFF08\u4EC5\u957F\u5185\u5BB9\u663E\u793A\uFF09 */}\n        {isLong && (\n          <button\n            type=\"button\"\n            onClick={toggleExpand}\n            className=\"mt-2 flex items-center gap-1 text-xs font-medium text-blue-700 hover:text-blue-800\"\n          >\n            <span>{isExpanded ? '\u6536\u8D77' : '\u5C55\u5F00'}</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    </div>\n  )\n}\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,GA4DW,IAAAI,EAAA,6BAtDXC,EAAgC,iBAChCC,EAA0B,6BAyCnB,MAAMJ,EAA+B,CAC1C,OAAQ,CAACK,EAASC,EAAQC,IAAa,CACrC,MAAMC,EAAgBH,EAChB,CAAE,MAAAI,EAAO,QAASC,CAAW,EAAIF,EAAc,KAErD,GAAI,CAACC,GAAS,CAACC,EACb,OAAO,KAIT,MAAMC,EAAgBD,EAAW,OAAS,IAE1C,SAAO,OAACE,EAAA,CAAW,MAAOH,EAAO,QAASC,EAAY,OAAQC,EAAe,CAC/E,CACF,EAKMC,EAID,CAAC,CAAE,MAAAH,EAAO,QAAAJ,EAAS,OAAAQ,CAAO,IAAM,CACnC,KAAM,CAACC,EAAYC,CAAa,KAAI,YAAS,CAACF,CAAM,EAMpD,SACE,QAAC,OAAI,UAAU,+DAEb,qBAAC,OAAI,UAAU,yEACb,qBAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,UAAU,yBAEV,oBAAC,QAAK,EAAE,6DAA6D,KACrE,OAAC,YAAS,OAAO,iBAAiB,KAClC,OAAC,QAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,KACrC,OAAC,QAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,KACrC,OAAC,YAAS,OAAO,eAAe,GAClC,KACA,OAAC,MAAG,UAAU,sCAAuC,SAAAJ,EAAM,GAC7D,KAGA,QAAC,OAAI,UAAU,YACb,oBAAC,OACC,UAAW;AAAA;AAAA,cAEP,CAACK,GAAcD,EAAS,eAAiB,EAAE;AAAA,YAG/C,mBAAC,EAAAG,QAAA,CACC,WAAY,CACV,EAAG,CAAC,CAAE,KAAAC,EAAM,GAAGC,CAAM,OAAM,OAAC,KAAG,GAAGA,EAAO,UAAU,iBAAiB,EACpE,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,EAC5D,OAAQ,CAAC,CAAE,KAAAD,EAAM,GAAGC,CAAM,OAAM,OAAC,UAAQ,GAAGA,EAAO,UAAU,gBAAgB,CAC/E,EAEC,SAAAb,EACH,EACF,EAGCQ,MACC,QAAC,UACC,KAAK,SACL,QArDW,IAAM,CACzBE,EAAcI,GAAQ,CAACA,CAAI,CAC7B,EAoDU,UAAU,qFAEV,oBAAC,QAAM,SAAAL,EAAa,eAAO,eAAK,KAChC,OAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,UAAW,wBAAwBA,EAAa,aAAe,EAAE,GAEjE,mBAAC,YAAS,OAAO,iBAAiB,EACpC,GACF,GAEJ,GACF,CAEJ",
+  "sourcesContent": ["/**\n * \u653F\u7B56\u8BF4\u660E\u6E32\u67D3\u5668\n * \u663E\u793A\u9000\u8D27\u3001\u4FDD\u4FEE\u7B49\u653F\u7B56\u4FE1\u606F\n * \u57FA\u4E8E specs/livechat-widget/data-model.md \u7684\u653F\u7B56\u6570\u636E\u6A21\u578B\n */\n\nimport React, { useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport type { MessageRenderer, PolicyContent } from '../../types'\n\n/**\n * \u653F\u7B56\u8BF4\u660E\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u663E\u793A\u653F\u7B56\u6807\u9898\u548C\u5185\u5BB9\n * - \u652F\u6301 Markdown \u683C\u5F0F\n * - \u53EF\u6298\u53E0/\u5C55\u5F00\uFF08\u5185\u5BB9\u8F83\u957F\u65F6\uFF09\n *\n * \u653F\u7B56\u7C7B\u578B\uFF1A\n * - \u9000\u8D27\u653F\u7B56\n * - \u4FDD\u4FEE\u653F\u7B56\n * - \u8FD0\u8D39\u653F\u7B56\n * - \u9690\u79C1\u653F\u7B56\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\u2510\n * \u2502 \uD83D\uDCCB \u653F\u7B56\u6807\u9898            \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\u2524\n * \u2502 \u653F\u7B56\u5185\u5BB9...             \u2502\n * \u2502 (\u652F\u6301 Markdown)         \u2502\n * \u2502                         \u2502\n * \u2502 [\u5C55\u5F00/\u6536\u8D77]             \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\u2518\n * ```\n *\n * @example\n * ```tsx\n * const content: PolicyContent = {\n *   type: 'policy',\n *   data: {\n *     title: '\u9000\u8D27\u653F\u7B56',\n *     content: '\u6211\u4EEC\u63D0\u4F9B 30 \u5929\u65E0\u7406\u7531\u9000\u8D27...'\n *   }\n * }\n * <PolicyBlock.render(content, false, false) />\n * ```\n */\nexport const PolicyBlock: MessageRenderer = {\n  render: (content, isUser, isSystem) => {\n    const policyContent = content as PolicyContent\n    const { title, content: policyText } = policyContent.data\n\n    if (!title || !policyText) {\n      return null\n    }\n\n    // \u5224\u65AD\u5185\u5BB9\u662F\u5426\u8F83\u957F\uFF08\u8D85\u8FC7 200 \u5B57\u7B26\uFF09\n    const isLongContent = policyText.length > 200\n\n    return <PolicyCard title={title} content={policyText} isLong={isLongContent} />\n  },\n}\n\n/**\n * \u653F\u7B56\u5361\u7247\u7EC4\u4EF6\uFF08\u652F\u6301\u6298\u53E0\uFF09\n */\nconst PolicyCard: React.FC<{\n  title: string\n  content: string\n  isLong: boolean\n}> = ({ title, content, isLong }) => {\n  const [isExpanded, setIsExpanded] = useState(!isLong)\n\n  const toggleExpand = () => {\n    setIsExpanded(prev => !prev)\n  }\n\n  return (\n    <div className=\"overflow-hidden rounded-lg border border-blue-200 bg-blue-50\">\n      {/* \u6807\u9898 */}\n      <div className=\"flex items-center gap-2 border-b border-blue-200 bg-blue-100 px-3 py-2\">\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          className=\"shrink-0 text-blue-700\"\n        >\n          <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n          <polyline points=\"14 2 14 8 20 8\" />\n          <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" />\n          <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" />\n          <polyline points=\"10 9 9 9 8 9\" />\n        </svg>\n        <h3 className=\"text-sm font-semibold text-blue-900\">{title}</h3>\n      </div>\n\n      {/* \u5185\u5BB9 */}\n      <div className=\"px-3 py-2\">\n        <div\n          className={`\n            text-sm leading-relaxed text-blue-900\n            ${!isExpanded && isLong ? 'line-clamp-3' : ''}\n          `}\n        >\n          <ReactMarkdown\n            components={{\n              p: ({ node, ...props }) => <p {...props} className=\"mb-2 last:mb-0\" />,\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              strong: ({ node, ...props }) => <strong {...props} className=\"font-bold\" />,\n            }}\n          >\n            {content}\n          </ReactMarkdown>\n        </div>\n\n        {/* \u5C55\u5F00/\u6536\u8D77\u6309\u94AE\uFF08\u4EC5\u957F\u5185\u5BB9\u663E\u793A\uFF09 */}\n        {isLong && (\n          <button\n            type=\"button\"\n            onClick={toggleExpand}\n            className=\"mt-2 flex items-center gap-1 text-xs font-medium text-blue-700 hover:text-blue-800\"\n          >\n            <span>{isExpanded ? '\u6536\u8D77' : '\u5C55\u5F00'}</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    </div>\n  )\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,GA4DW,IAAAI,EAAA,6BAtDXC,EAAgC,iBAChCC,EAA0B,6BAyCnB,MAAMJ,EAA+B,CAC1C,OAAQ,CAACK,EAASC,EAAQC,IAAa,CACrC,MAAMC,EAAgBH,EAChB,CAAE,MAAAI,EAAO,QAASC,CAAW,EAAIF,EAAc,KAErD,GAAI,CAACC,GAAS,CAACC,EACb,OAAO,KAIT,MAAMC,EAAgBD,EAAW,OAAS,IAE1C,SAAO,OAACE,EAAA,CAAW,MAAOH,EAAO,QAASC,EAAY,OAAQC,EAAe,CAC/E,CACF,EAKMC,EAID,CAAC,CAAE,MAAAH,EAAO,QAAAJ,EAAS,OAAAQ,CAAO,IAAM,CACnC,KAAM,CAACC,EAAYC,CAAa,KAAI,YAAS,CAACF,CAAM,EAMpD,SACE,QAAC,OAAI,UAAU,+DAEb,qBAAC,OAAI,UAAU,yEACb,qBAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,UAAU,yBAEV,oBAAC,QAAK,EAAE,6DAA6D,KACrE,OAAC,YAAS,OAAO,iBAAiB,KAClC,OAAC,QAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,KACrC,OAAC,QAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,KACrC,OAAC,YAAS,OAAO,eAAe,GAClC,KACA,OAAC,MAAG,UAAU,sCAAuC,SAAAJ,EAAM,GAC7D,KAGA,QAAC,OAAI,UAAU,YACb,oBAAC,OACC,UAAW;AAAA;AAAA,cAEP,CAACK,GAAcD,EAAS,eAAiB,EAAE;AAAA,YAG/C,mBAAC,EAAAG,QAAA,CACC,WAAY,CACV,EAAG,CAAC,CAAE,KAAAC,EAAM,GAAGC,CAAM,OAAM,OAAC,KAAG,GAAGA,EAAO,UAAU,iBAAiB,EACpE,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,EAC5D,OAAQ,CAAC,CAAE,KAAAD,EAAM,GAAGC,CAAM,OAAM,OAAC,UAAQ,GAAGA,EAAO,UAAU,YAAY,CAC3E,EAEC,SAAAb,EACH,EACF,EAGCQ,MACC,QAAC,UACC,KAAK,SACL,QArDW,IAAM,CACzBE,EAAcI,GAAQ,CAACA,CAAI,CAC7B,EAoDU,UAAU,qFAEV,oBAAC,QAAM,SAAAL,EAAa,eAAO,eAAK,KAChC,OAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,UAAW,wBAAwBA,EAAa,aAAe,EAAE,GAEjE,mBAAC,YAAS,OAAO,iBAAiB,EACpC,GACF,GAEJ,GACF,CAEJ",
   "names": ["PolicyBlock_exports", "__export", "PolicyBlock", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_markdown", "content", "isUser", "isSystem", "policyContent", "title", "policyText", "isLongContent", "PolicyCard", "isLong", "isExpanded", "setIsExpanded", "ReactMarkdown", "node", "props", "prev"]
 }

package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductCard.d.ts CHANGED Viewed

@@ -12,6 +12,7 @@ import type { MessageRenderer } from '../../types';
  * - 显示折扣标签、价格、评分
  * - 支持 Add to Cart 按钮
  * - 独立成段展示
+ * - 支持自定义渲染函数
  *
  * 布局：
  * ```
@@ -30,7 +31,8 @@ import type { MessageRenderer } from '../../types';
  *   type: 'product_card',
  *   data: {
  *     product: { ... },
- *     onAddToCart: (product) => { ... }
+ *     onAddToCart: (product) => { ... },
+ *     productCardRender: (product) => <CustomCard product={product} />
  *   }
  * }
  * <ProductCard.render(content, false, false) />

package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductCard.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var l=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var F=Object.prototype.hasOwnProperty;var P=(t,n)=>{for(var o in n)l(t,o,{get:n[o],enumerable:!0})},D=(t,n,o,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of w(n))!F.call(t,a)&&a!==o&&l(t,a,{get:()=>n[a],enumerable:!(s=k(n,a))||s.enumerable});return t};var T=t=>D(l({},"__esModule",{value:!0}),t);var A={};P(A,{ProductCard:()=>$});module.exports=T(A);var e=require("react/jsx-runtime"),r=require("../../constants.js");function v(t){const{amount:n,currency:o}=t;return`${r.CURRENCY_SYMBOLS[o]||o}${n.toFixed(2)}`}function M(t,n,o=r.DEFAULT_COMMON_TEXT.off){if(!t.discount_type||t.discount_value===void 0)return"";const s=typeof t.discount_value=="string"?parseFloat(t.discount_value):t.discount_value;return isNaN(s)?"":t.discount_type==="percentage"?`${Math.round(s)}% ${o}`:t.discount_type==="fixed_amount"?`${r.CURRENCY_SYMBOLS[n]||n}${Math.round(s)} ${o}`:""}const R=({product:t,onAddToCart:n,addToCartText:o=r.DEFAULT_COMMON_TEXT.addToCart,offText:s=r.DEFAULT_COMMON_TEXT.off})=>{const{title:a,description:u,price:i,imageUrl:b,stockStatus:y,averageRating:m,variants:C}=t,N=y==="out_of_stock",d=C?.[0],c=d?.discount?.has_discount,p=c?d?.discount?.discount_price:null,f=d?.discount,h=p?{amount:p,currency:i.currency}:i,g=f&&c?M(f,i.currency,s):"",_=x=>{x.preventDefault(),x.stopPropagation(),n&&n(t)};return(0,e.jsx)("div",{className:"block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow",children:(0,e.jsx)("div",{className:"block",children:(0,e.jsxs)("div",{className:"flex gap-2 p-4 bg-white",children:[(0,e.jsx)("div",{className:" flex shrink-0 items-center overflow-hidden rounded-md ",style:{width:"40%"},children:(0,e.jsx)("img",{src:b,alt:a,className:`h-auto w-full object-cover ${N?"opacity-50":""}`,loading:"lazy"})}),(0,e.jsxs)("div",{className:"flex flex-1 flex-col justify-center gap-0.5",children:[g&&(0,e.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:g}),(0,e.jsx)("h4",{className:"line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]",children:a}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:v(h)}),c&&(0,e.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through",children:v(i)})]}),m!==void 0&&(0,e.jsxs)("div",{className:"flex items-center gap-0.5 text-xs text-gray-600",children:[(0,e.jsx)("span",{className:"text-yellow-500",children:"\u2B50"}),(0,e.jsx)("span",{children:m.toFixed(1)})]})]}),(0,e.jsx)("button",{type:"button",onClick:_,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:o})]})]})})})},$={render:(t,n,o)=>{const s=t,{product:a,onAddToCart:u}=s.data;return a?(0,e.jsx)(R,{product:a,onAddToCart:u}):null}};
+"use strict";var u=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var F=(t,n)=>{for(var o in n)u(t,o,{get:n[o],enumerable:!0})},D=(t,n,o,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of w(n))!P.call(t,a)&&a!==o&&u(t,a,{get:()=>n[a],enumerable:!(r=k(n,a))||r.enumerable});return t};var T=t=>D(u({},"__esModule",{value:!0}),t);var A={};F(A,{ProductCard:()=>$});module.exports=T(A);var e=require("react/jsx-runtime"),s=require("../../constants.js");function b(t){const{amount:n,currency:o}=t;return`${s.CURRENCY_SYMBOLS[o]||o}${n.toFixed(2)}`}function R(t,n,o=s.DEFAULT_COMMON_TEXT.off){if(!t.discount_type||t.discount_value===void 0)return"";const r=typeof t.discount_value=="string"?parseFloat(t.discount_value):t.discount_value;return isNaN(r)?"":t.discount_type==="percentage"?`${Math.round(r)}% ${o}`:t.discount_type==="fixed_amount"?`${s.CURRENCY_SYMBOLS[n]||n}${Math.round(r)} ${o}`:""}const M=({product:t,onAddToCart:n,addToCartText:o=s.DEFAULT_COMMON_TEXT.addToCart,offText:r=s.DEFAULT_COMMON_TEXT.off})=>{const{title:a,description:m,price:i,imageUrl:d,stockStatus:y,averageRating:p,variants:C}=t,N=y==="out_of_stock",c=C?.[0],l=c?.discount?.has_discount,f=l?c?.discount?.discount_price:null,g=c?.discount,h=f?{amount:f,currency:i.currency}:i,x=g&&l?R(g,i.currency,r):"",_=v=>{v.preventDefault(),v.stopPropagation(),n&&n(t)};return(0,e.jsx)("div",{className:"block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow mb-[32px]",children:(0,e.jsx)("div",{className:"block",children:(0,e.jsxs)("div",{className:"flex gap-2 p-4 bg-white",children:[(0,e.jsx)("div",{className:" flex shrink-0 items-center overflow-hidden rounded-md ",style:{width:"40%"},children:(0,e.jsx)("img",{src:d,alt:a,className:`h-auto w-full object-cover ${N?"opacity-50":""}`,loading:"lazy"})}),(0,e.jsxs)("div",{className:"flex flex-1 flex-col justify-center",children:[x&&(0,e.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:x}),(0,e.jsx)("h4",{className:"line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]",children:a}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:b(h)}),l&&(0,e.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through",children:b(i)})]}),p!==void 0&&(0,e.jsxs)("div",{className:"flex items-center gap-0.5 text-xs text-gray-600",children:[(0,e.jsx)("span",{className:"text-yellow-500",children:"\u2B50"}),(0,e.jsx)("span",{children:p.toFixed(1)})]})]}),(0,e.jsx)("button",{type:"button",onClick:_,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:o})]})]})})})},$={render:(t,n,o)=>{const r=t,{product:a,rawProduct:m,onAddToCart:i,productCardRender:d}=r.data;return a?d?(0,e.jsx)(e.Fragment,{children:d(m||a)}):(0,e.jsx)(M,{product:a,onAddToCart:i}):null}};
 //# sourceMappingURL=ProductCard.js.map

package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductCard.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/ProductCard.tsx"],
-  "sourcesContent": ["/**\n * \u5546\u54C1\u5361\u7247\u6E32\u67D3\u5668 - \u7D27\u51D1\u578B\n * \u663E\u793A\u5355\u4E2A\u5546\u54C1\u7684\u8BE6\u7EC6\u4FE1\u606F\uFF08\u6A2A\u5411\u5E03\u5C40\uFF09\n * \u57FA\u4E8E specs/livechat-widget/data-model.md \u7684\u5546\u54C1\u6570\u636E\u6A21\u578B\n */\n\nimport React from 'react'\nimport type { MessageRenderer, ProductCardContent, Product, CommonText } from '../../types'\nimport { CURRENCY_SYMBOLS, DEFAULT_COMMON_TEXT } 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 * @param offText \"OFF\" \u6587\u6848\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  offText: string = DEFAULT_COMMON_TEXT.off\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)}% ${offText}`\n  }\n\n  if (discount.discount_type === 'fixed_amount') {\n    const symbol = CURRENCY_SYMBOLS[currency] || currency\n    return `${symbol}${Math.round(value)} ${offText}`\n  }\n\n  return ''\n}\n\n/**\n * \u7D27\u51D1\u578B\u5546\u54C1\u5361\u7247\u7EC4\u4EF6\uFF08\u6A2A\u5411\u5E03\u5C40\uFF09\n */\nconst CompactProductCard: React.FC<{\n  product: Product\n  onAddToCart?: (product: Product) => void\n  addToCartText?: string\n  offText?: string\n}> = ({ product, onAddToCart, addToCartText = DEFAULT_COMMON_TEXT.addToCart, offText = DEFAULT_COMMON_TEXT.off }) => {\n  const { title, description, price, imageUrl, 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, offText) : ''\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\">\n      <div className=\"block\">\n        <div className=\"flex gap-2 p-4 bg-white\">\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              {addToCartText}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u5546\u54C1\u5361\u7247\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u7D27\u51D1\u578B\u6A2A\u5411\u5E03\u5C40\uFF08\u56FE\u7247\u5728\u5DE6\uFF0C\u4FE1\u606F\u5728\u53F3\uFF09\n * - \u663E\u793A\u6298\u6263\u6807\u7B7E\u3001\u4EF7\u683C\u3001\u8BC4\u5206\n * - \u652F\u6301 Add to Cart \u6309\u94AE\n * - \u72EC\u7ACB\u6210\u6BB5\u5C55\u793A\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\u2510\n * \u2502 [\u56FE\u7247] \u6298\u6263\u6807\u7B7E             \u2502\n * \u2502        \u5546\u54C1\u6807\u9898             \u2502\n * \u2502        $29.99 (\u539F\u4EF7)        \u2502\n * \u2502        \u2B50 4.5               \u2502\n * \u2502        [Add to Cart]        \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\u2518\n * ```\n *\n * @example\n * ```tsx\n * const content: ProductCardContent = {\n *   type: 'product_card',\n *   data: {\n *     product: { ... },\n *     onAddToCart: (product) => { ... }\n *   }\n * }\n * <ProductCard.render(content, false, false) />\n * ```\n */\nexport const ProductCard: MessageRenderer = {\n  render: (content, isUser, isSystem) => {\n    const productContent = content as ProductCardContent\n    const { product, onAddToCart } = productContent.data\n\n    if (!product) {\n      return null\n    }\n\n    return <CompactProductCard product={product} onAddToCart={onAddToCart} />\n  },\n}\n"],
-  "mappings": "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",
-  "names": ["ProductCard_exports", "__export", "ProductCard", "__toCommonJS", "import_jsx_runtime", "import_constants", "formatPrice", "price", "amount", "currency", "formatDiscountLabel", "discount", "offText", "value", "CompactProductCard", "product", "onAddToCart", "addToCartText", "title", "description", "imageUrl", "stockStatus", "averageRating", "variants", "isOutOfStock", "firstVariant", "hasDiscount", "discountPrice", "currentPrice", "discountLabel", "handleAddToCart", "e", "content", "isUser", "isSystem", "productContent"]
+  "sourcesContent": ["/**\n * \u5546\u54C1\u5361\u7247\u6E32\u67D3\u5668 - \u7D27\u51D1\u578B\n * \u663E\u793A\u5355\u4E2A\u5546\u54C1\u7684\u8BE6\u7EC6\u4FE1\u606F\uFF08\u6A2A\u5411\u5E03\u5C40\uFF09\n * \u57FA\u4E8E specs/livechat-widget/data-model.md \u7684\u5546\u54C1\u6570\u636E\u6A21\u578B\n */\n\nimport React from 'react'\nimport type { MessageRenderer, ProductCardContent, Product, CommonText } from '../../types'\nimport { CURRENCY_SYMBOLS, DEFAULT_COMMON_TEXT } 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 * @param offText \"OFF\" \u6587\u6848\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  offText: string = DEFAULT_COMMON_TEXT.off\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)}% ${offText}`\n  }\n\n  if (discount.discount_type === 'fixed_amount') {\n    const symbol = CURRENCY_SYMBOLS[currency] || currency\n    return `${symbol}${Math.round(value)} ${offText}`\n  }\n\n  return ''\n}\n\n/**\n * \u7D27\u51D1\u578B\u5546\u54C1\u5361\u7247\u7EC4\u4EF6\uFF08\u6A2A\u5411\u5E03\u5C40\uFF09\n */\nconst CompactProductCard: React.FC<{\n  product: Product\n  onAddToCart?: (product: Product) => void\n  addToCartText?: string\n  offText?: string\n}> = ({ product, onAddToCart, addToCartText = DEFAULT_COMMON_TEXT.addToCart, offText = DEFAULT_COMMON_TEXT.off }) => {\n  const { title, description, price, imageUrl, 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, offText) : ''\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 mb-[32px]\">\n      <div className=\"block\">\n        <div className=\"flex gap-2 p-4 bg-white\">\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\">\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              {addToCartText}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u5546\u54C1\u5361\u7247\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u7D27\u51D1\u578B\u6A2A\u5411\u5E03\u5C40\uFF08\u56FE\u7247\u5728\u5DE6\uFF0C\u4FE1\u606F\u5728\u53F3\uFF09\n * - \u663E\u793A\u6298\u6263\u6807\u7B7E\u3001\u4EF7\u683C\u3001\u8BC4\u5206\n * - \u652F\u6301 Add to Cart \u6309\u94AE\n * - \u72EC\u7ACB\u6210\u6BB5\u5C55\u793A\n * - \u652F\u6301\u81EA\u5B9A\u4E49\u6E32\u67D3\u51FD\u6570\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\u2510\n * \u2502 [\u56FE\u7247] \u6298\u6263\u6807\u7B7E             \u2502\n * \u2502        \u5546\u54C1\u6807\u9898             \u2502\n * \u2502        $29.99 (\u539F\u4EF7)        \u2502\n * \u2502        \u2B50 4.5               \u2502\n * \u2502        [Add to Cart]        \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\u2518\n * ```\n *\n * @example\n * ```tsx\n * const content: ProductCardContent = {\n *   type: 'product_card',\n *   data: {\n *     product: { ... },\n *     onAddToCart: (product) => { ... },\n *     productCardRender: (product) => <CustomCard product={product} />\n *   }\n * }\n * <ProductCard.render(content, false, false) />\n * ```\n */\nexport const ProductCard: MessageRenderer = {\n  render: (content, isUser, isSystem) => {\n    const productContent = content as ProductCardContent\n    const { product, rawProduct, onAddToCart, productCardRender } = productContent.data\n\n    if (!product) {\n      return null\n    }\n\n    // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u6E32\u67D3\u51FD\u6570\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u6E32\u67D3\uFF08\u4F20\u5165\u539F\u59CB\u540E\u7AEF\u6570\u636E\uFF09\n    if (productCardRender) {\n      return <>{productCardRender(rawProduct || product)}</>\n    }\n\n    // \u5426\u5219\u4F7F\u7528\u9ED8\u8BA4\u6E32\u67D3\n    return <CompactProductCard product={product} onAddToCart={onAddToCart} />\n  },\n}\n"],
+  "mappings": "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",
+  "names": ["ProductCard_exports", "__export", "ProductCard", "__toCommonJS", "import_jsx_runtime", "import_constants", "formatPrice", "price", "amount", "currency", "formatDiscountLabel", "discount", "offText", "value", "CompactProductCard", "product", "onAddToCart", "addToCartText", "title", "description", "imageUrl", "stockStatus", "averageRating", "variants", "isOutOfStock", "firstVariant", "hasDiscount", "discountPrice", "currentPrice", "discountLabel", "handleAddToCart", "e", "content", "isUser", "isSystem", "productContent", "rawProduct", "productCardRender"]
 }

package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductComparison.d.ts CHANGED Viewed

@@ -25,6 +25,7 @@ export interface ProductComparisonData {
         variants?: ComparisonDimension;
         member_price?: ComparisonDimension;
         discount?: ComparisonDimension;
+        reviews?: ComparisonDimension;
         [key: string]: ComparisonDimension | undefined;
     };
     commonText?: CommonText;

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

@@ -1,2 +1,2 @@
-"use strict";var g=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var U=Object.prototype.hasOwnProperty;var _=(s,n)=>{for(var i in n)g(s,i,{get:n[i],enumerable:!0})},E=(s,n,i,d)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of R(n))!U.call(s,l)&&l!==i&&g(s,l,{get:()=>n[l],enumerable:!(d=M(n,l))||d.enumerable});return s};var $=s=>E(g({},"__esModule",{value:!0}),s);var O={};_(O,{ProductComparison:()=>h,ProductComparisonRenderer:()=>z});module.exports=$(O);var t=require("react/jsx-runtime"),D=require("react"),C=require("../../constants");const m=(s,n="USD")=>`${n==="USD"?"$":n}${s.toLocaleString("en-US",{minimumFractionDigits:2,maximumFractionDigits:2})}`,h=({data:s,onAddToCart:n,commonText:i})=>{const{products:d,dimensions:l}=s,k={...C.DEFAULT_COMMON_TEXT,...i},p=d?.filter(e=>e&&e.shopifyId)||[],f=2,N=p.slice(0,f),[x,P]=(0,D.useState)(N);if(p.length===0)return null;const w=(e,r)=>{const o=p.find(c=>c.shopifyId===r);if(o){const c=[...x];c[e]=o,P(c)}},v=x.slice(0,f),b=(e,r)=>!e||!e.values||!Array.isArray(e.values)?null:e.values.find(o=>o&&o.product_id===r),F=(e,r)=>r?(0,t.jsxs)("div",{className:"border-b border-[#DADCE0] pb-2",children:[(0,t.jsx)("div",{className:"mb-1",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:v.map((o,c)=>{if(!o||!o.shopifyId)return null;const u=b(r,o.shopifyId);return(0,t.jsx)("div",{className:"flex-1",children:T(u,r.label)},`comparison-${c}`)})})]}):null,T=(e,r)=>{if(!e)return(0,t.jsx)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:"-"});if(r.toLowerCase().includes("price")){const o=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:o})}return r.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:v.map((e,r)=>{if(!e||!e.shopifyId)return null;const o=l.price?b(l.price,e.shopifyId):null,c=e.variants?.[0],u=c?.discount?.has_discount,y=u?c?.discount?.discount_price:null,A=y||o?.min||e.price.amount,I=e.price.amount,S=a=>{a.preventDefault(),a.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:a=>w(r,a.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:p.map(a=>(0,t.jsx)("option",{value:a.shopifyId,children:a.title.length>30?`${a.title.slice(0,30)}...`:a.title},a.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(A,o?.currency||e.price.currency)}),u&&y&&(0,t.jsx)("span",{className:"text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#4A4C56] line-through",children:m(I,e.price.currency)})]})}),n&&(0,t.jsx)("button",{type:"button",onClick:S,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:k.addToCart}),e.variants&&e.variants.length>1&&(0,t.jsx)("div",{className:"flex gap-2",children:e.variants.slice(0,3).map((a,L)=>(0,t.jsx)("div",{className:"size-6 rounded-full border-2 border-[#DADCE0]",style:{backgroundColor:a.color||"#000"},title:a.title},a.id||L))})]},`product-column-${r}`)})}),(0,t.jsx)("div",{className:"flex flex-col gap-4 p-4",children:Object.entries(l).map(([e,r])=>!r||e==="price"?null:(0,t.jsx)("div",{children:F(r.label,r)},e))})]})},z={render:(s,n,i)=>{if(s.type!=="product_comparison"||!s.data)return null;const d=s.data;return(0,t.jsx)(h,{data:d,isUser:n,isSystem:i,onAddToCart:d.onAddToCart,commonText:d.commonText})}};
+"use strict";var f=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var L=(r,n)=>{for(var l in n)f(r,l,{get:n[l],enumerable:!0})},U=(r,n,l,d)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of _(n))!E.call(r,c)&&c!==l&&f(r,c,{get:()=>n[c],enumerable:!(d=S(n,c))||d.enumerable});return r};var O=r=>U(f({},"__esModule",{value:!0}),r);var z={};L(z,{ProductComparison:()=>h,ProductComparisonRenderer:()=>$});module.exports=O(z);var t=require("react/jsx-runtime"),D=require("react"),g=require("../../constants");const m=(r,n="USD")=>`${g.CURRENCY_SYMBOLS[n]||n}${r}`,h=({data:r,onAddToCart:n,commonText:l})=>{const{products:d,dimensions:c}=r,N={...g.DEFAULT_COMMON_TEXT,...l},p=d?.filter(e=>e&&e.shopifyId)||[],x=2,k=p.slice(0,x),[v,P]=(0,D.useState)(k);if(p.length===0)return null;const w=(e,s)=>{const o=p.find(i=>i.shopifyId===s);if(o){const i=[...v];i[e]=o,P(i)}},b=v.slice(0,x),C=(e,s)=>!e||!e.values||!Array.isArray(e.values)?null:e.values.find(o=>o&&o.product_id===s),F=(e,s)=>s?(0,t.jsxs)("div",{className:"border-b border-[#DADCE0] pb-2",children:[(0,t.jsx)("div",{className:"mb-1",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:b.map((o,i)=>{if(!o||!o.shopifyId)return null;const u=C(s,o.shopifyId);return(0,t.jsx)("div",{className:"flex-1",children:T(u,s.label)},`comparison-${i}`)})})]}):null,T=(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 o=e?.available?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:o||"-"})}if(s.toLowerCase().includes("variant"))return(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"]});if(s.toLowerCase().includes("review")){const o=e.rating||0,i=e.count||0;return(0,t.jsxs)("div",{className:"flex items-center gap-1",children:[(0,t.jsxs)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:["\u2B50 ",o.toFixed(1)]}),(0,t.jsxs)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#86868C]",children:["(",i,")"]})]})}return(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:b.map((e,s)=>{if(!e||!e.shopifyId)return null;const o=c.price?C(c.price,e.shopifyId):null,i=e.variants?.[0],u=i?.discount?.has_discount,y=u?i?.discount?.discount_price:null,A=y||o?.min||e.price.amount,I=e.price.amount,R=a=>{a.preventDefault(),a.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:a=>w(s,a.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:p.map(a=>(0,t.jsx)("option",{value:a.shopifyId,children:a.title.length>30?`${a.title.slice(0,30)}...`:a.title},a.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(A,o?.currency||e.price.currency)}),u&&y&&(0,t.jsx)("span",{className:"text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#4A4C56] line-through",children:m(I,e.price.currency)})]})}),n&&(0,t.jsx)("button",{type:"button",onClick:R,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:N.addToCart}),e.variants&&e.variants.length>1&&(0,t.jsx)("div",{className:"flex gap-2",children:e.variants.slice(0,3).map((a,M)=>(0,t.jsx)("div",{className:"size-6 rounded-full border-2 border-[#DADCE0]",style:{backgroundColor:a.color||"#000"},title:a.title},a.id||M))})]},`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:F(s.label,s)},e))})]})},$={render:(r,n,l)=>{if(r.type!=="product_comparison"||!r.data)return null;const d=r.data;return(0,t.jsx)(h,{data:d,isUser:n,isSystem:l,onAddToCart:d.onAddToCart,commonText:d.commonText})}};
 //# sourceMappingURL=ProductComparison.js.map

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

@@ -1,7 +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, CommonText } from '../../types'\nimport { DEFAULT_COMMON_TEXT } from '../../constants'\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  commonText?: CommonText\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   * \u901A\u7528\u6587\u6848\u914D\u7F6E\n   */\n  commonText?: CommonText\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, commonText }) => {\n  const { products: rawProducts, dimensions } = data\n\n  // \u5408\u5E76\u9ED8\u8BA4\u6587\u6848\u548C\u81EA\u5B9A\u4E49\u6587\u6848\n  const mergedText = { ...DEFAULT_COMMON_TEXT, ...commonText }\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-1\">\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                  {mergedText.addToCart}\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        commonText={comparisonData.commonText}\n      />\n    )\n  },\n}\n"],
-  "mappings": "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",
-  "names": ["ProductComparison_exports", "__export", "ProductComparison", "ProductComparisonRenderer", "__toCommonJS", "import_jsx_runtime", "import_react", "import_constants", "formatPrice", "amount", "currency", "data", "onAddToCart", "commonText", "rawProducts", "dimensions", "mergedText", "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"]
+  "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, CommonText } from '../../types'\nimport { DEFAULT_COMMON_TEXT, CURRENCY_SYMBOLS } from '../../constants'\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    reviews?: ComparisonDimension\n    [key: string]: ComparisonDimension | undefined\n  }\n  commonText?: CommonText\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   * \u901A\u7528\u6587\u6848\u914D\u7F6E\n   */\n  commonText?: CommonText\n}\n\n/**\n * \u683C\u5F0F\u5316\u4EF7\u683C\u663E\u793A\n */\nconst formatPrice = (amount: number, currency: string = 'USD'): string => {\n  const symbol = CURRENCY_SYMBOLS[currency] || currency\n  return `${symbol}${amount}`\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, commonText }) => {\n  const { products: rawProducts, dimensions } = data\n\n  // \u5408\u5E76\u9ED8\u8BA4\u6587\u6848\u548C\u81EA\u5B9A\u4E49\u6587\u6848\n  const mergedText = { ...DEFAULT_COMMON_TEXT, ...commonText }\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-1\">\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 = value?.available?\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    if (dimensionLabel.toLowerCase().includes('review')) {\n      // \u8BC4\u8BBA\u7EF4\u5EA6\uFF1A\u663E\u793A\u8BC4\u5206\u548C\u6570\u91CF\n      const rating = value.rating || 0\n      const count = value.count || 0\n      return (\n        <div className=\"flex items-center gap-1\">\n          <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n            \u2B50 {rating.toFixed(1)}\n          </span>\n          <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#86868C]\">\n            ({count})\n          </span>\n        </div>\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                  {mergedText.addToCart}\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        commonText={comparisonData.commonText}\n      />\n    )\n  },\n}\n"],
+  "mappings": "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",
+  "names": ["ProductComparison_exports", "__export", "ProductComparison", "ProductComparisonRenderer", "__toCommonJS", "import_jsx_runtime", "import_react", "import_constants", "formatPrice", "amount", "currency", "data", "onAddToCart", "commonText", "rawProducts", "dimensions", "mergedText", "allProducts", "p", "COMPARISON_COLUMNS", "initialSelectedProducts", "selectedProducts", "setSelectedProducts", "handleProductChange", "index", "productId", "newProduct", "newSelectedProducts", "products", "getDimensionValue", "dimension", "v", "renderComparisonRow", "label", "product", "value", "renderDimensionValue", "dimensionLabel", "priceDisplay", "rating", "count", "priceInfo", "firstVariant", "hasDiscount", "discountPrice", "currentPrice", "originalPrice", "handleAddToCart", "e", "variant", "idx", "key", "content", "isUser", "isSystem", "comparisonData"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";var g=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var F=(e,o)=>{for(var n in o)g(e,n,{get:o[n],enumerable:!0})},D=(e,o,n,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of _(o))!w.call(e,s)&&s!==n&&g(e,s,{get:()=>o[s],enumerable:!(a=P(o,s))||a.enumerable});return e};var L=e=>D(g({},"__esModule",{value:!0}),e);var $={};F($,{ProductList:()=>R});module.exports=L($);var t=require("react/jsx-runtime"),N=require("react"),c=require("../../constants.js");function C(e){const{amount:o,currency:n}=e;return`${c.CURRENCY_SYMBOLS[n]||n}${o.toFixed(2)}`}function A(e,o,n=c.DEFAULT_COMMON_TEXT.off){if(!e.discount_type||e.discount_value===void 0)return"";const a=typeof e.discount_value=="string"?parseFloat(e.discount_value):e.discount_value;return isNaN(a)?"":e.discount_type==="percentage"?`${Math.round(a)}% ${n}`:e.discount_type==="fixed_amount"?`${c.CURRENCY_SYMBOLS[o]||o}${Math.round(a)} ${n}`:""}const M=({product:e,onAddToCart:o,addToCartText:n=c.DEFAULT_COMMON_TEXT.addToCart,offText:a=c.DEFAULT_COMMON_TEXT.off})=>{const{title:s,description:l,price:r,imageUrl:d,stockStatus:u,averageRating:m,variants:p}=e,i=u==="out_of_stock",f=p?.[0],x=f?.discount?.has_discount,v=x?f?.discount?.discount_price:null,y=f?.discount,T=v?{amount:v,currency:r.currency}:r,h=y&&x?A(y,r.currency,a):"",k=b=>{b.preventDefault(),b.stopPropagation(),o&&o(e)};return(0,t.jsx)("div",{className:"block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow",children:(0,t.jsx)("div",{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:d,alt:s,className:`h-auto w-full object-cover ${i?"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:s}),l&&(0,t.jsx)("p",{className:"line-clamp-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:l}),(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:C(T)}),x&&(0,t.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through",children:C(r)})]}),m!==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:m.toFixed(1)})]})]}),(0,t.jsx)("button",{type:"button",onClick:k,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:n})]})]})})})},I=({products:e,title:o,onAddToCart:n,commonText:a})=>{const[s,l]=(0,N.useState)(!1),r={...c.DEFAULT_COMMON_TEXT,...a},d=e.filter(i=>i&&i.shopifyId),u=3,m=d.length>u,p=s?d:d.slice(0,u);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:p.map(i=>!i||!i.shopifyId?null:(0,t.jsx)(M,{product:i,onAddToCart:n,addToCartText:r.addToCart,offText:r.off},i.shopifyId))}),m&&(0,t.jsxs)("button",{type:"button",onClick:()=>l(!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?r.showLess:r.learnMore}),(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"})})]})]})},R={render:e=>{const o=e,{products:n,title:a,onAddToCart:s,commonText:l}=o.data,r=n?.filter(d=>d&&d.shopifyId)||[];return r.length===0?null:(0,t.jsx)(I,{products:r,title:a,onAddToCart:s,commonText:l})}};
+"use strict";var g=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var F=(e,o)=>{for(var n in o)g(e,n,{get:o[n],enumerable:!0})},D=(e,o,n,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of _(o))!w.call(e,s)&&s!==n&&g(e,s,{get:()=>o[s],enumerable:!(a=P(o,s))||a.enumerable});return e};var L=e=>D(g({},"__esModule",{value:!0}),e);var $={};F($,{ProductList:()=>R});module.exports=L($);var t=require("react/jsx-runtime"),N=require("react"),c=require("../../constants.js");function C(e){const{amount:o,currency:n}=e;return`${c.CURRENCY_SYMBOLS[n]||n}${o.toFixed(2)}`}function A(e,o,n=c.DEFAULT_COMMON_TEXT.off){if(!e.discount_type||e.discount_value===void 0)return"";const a=typeof e.discount_value=="string"?parseFloat(e.discount_value):e.discount_value;return isNaN(a)?"":e.discount_type==="percentage"?`${Math.round(a)}% ${n}`:e.discount_type==="fixed_amount"?`${c.CURRENCY_SYMBOLS[o]||o}${Math.round(a)} ${n}`:""}const M=({product:e,onAddToCart:o,addToCartText:n=c.DEFAULT_COMMON_TEXT.addToCart,offText:a=c.DEFAULT_COMMON_TEXT.off})=>{const{title:s,description:l,price:r,imageUrl:d,stockStatus:u,averageRating:m,variants:p}=e,i=u==="out_of_stock",f=p?.[0],x=f?.discount?.has_discount,v=x?f?.discount?.discount_price:null,y=f?.discount,T=v?{amount:v,currency:r.currency}:r,h=y&&x?A(y,r.currency,a):"",k=b=>{b.preventDefault(),b.stopPropagation(),o&&o(e)};return(0,t.jsx)("div",{className:"block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow",children:(0,t.jsx)("div",{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:d,alt:s,className:`h-auto w-full object-cover ${i?"opacity-50":""}`,loading:"lazy"})}),(0,t.jsxs)("div",{className:"flex flex-1 flex-col justify-center",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:s}),l&&(0,t.jsx)("p",{className:"line-clamp-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:l}),(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:C(T)}),x&&(0,t.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through",children:C(r)})]}),m!==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:m.toFixed(1)})]})]}),(0,t.jsx)("button",{type:"button",onClick:k,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:n})]})]})})})},I=({products:e,title:o,onAddToCart:n,commonText:a})=>{const[s,l]=(0,N.useState)(!1),r={...c.DEFAULT_COMMON_TEXT,...a},d=e.filter(i=>i&&i.shopifyId),u=3,m=d.length>u,p=s?d:d.slice(0,u);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:p.map(i=>!i||!i.shopifyId?null:(0,t.jsx)(M,{product:i,onAddToCart:n,addToCartText:r.addToCart,offText:r.off},i.shopifyId))}),m&&(0,t.jsxs)("button",{type:"button",onClick:()=>l(!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?r.showLess:r.learnMore}),(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"})})]})]})},R={render:e=>{const o=e,{products:n,title:a,onAddToCart:s,commonText:l}=o.data,r=n?.filter(d=>d&&d.shopifyId)||[];return r.length===0?null:(0,t.jsx)(I,{products:r,title:a,onAddToCart:s,commonText:l})}};
 //# sourceMappingURL=ProductList.js.map

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

@@ -1,7 +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, CommonText } from '../../types'\nimport { CURRENCY_SYMBOLS, DEFAULT_COMMON_TEXT } 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 * @param offText \"OFF\" \u6587\u6848\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  offText: string = DEFAULT_COMMON_TEXT.off\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)}% ${offText}`\n  }\n\n  if (discount.discount_type === 'fixed_amount') {\n    const symbol = CURRENCY_SYMBOLS[currency] || currency\n    return `${symbol}${Math.round(value)} ${offText}`\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  addToCartText?: string\n  offText?: string\n}> = ({ product, onAddToCart, addToCartText = DEFAULT_COMMON_TEXT.addToCart, offText = DEFAULT_COMMON_TEXT.off }) => {\n  const { title, description, price, imageUrl, 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, offText) : ''\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\">\n      <div 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              {addToCartText}\n            </button>\n          </div>\n        </div>\n      </div>\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  commonText?: CommonText\n}> = ({ products, title, onAddToCart, commonText }) => {\n  const [isExpanded, setIsExpanded] = useState(false)\n\n  // \u5408\u5E76\u9ED8\u8BA4\u6587\u6848\u548C\u81EA\u5B9A\u4E49\u6587\u6848\n  const mergedText = { ...DEFAULT_COMMON_TEXT, ...commonText }\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 => {\n          if (!product || !product.shopifyId) return null\n          return (\n            <CompactProductCard\n              key={product.shopifyId}\n              product={product}\n              onAddToCart={onAddToCart}\n              addToCartText={mergedText.addToCart}\n              offText={mergedText.off}\n            />\n          )\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 ? mergedText.showLess : mergedText.learnMore}</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, commonText } = 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 (\n      <ProductListComponent products={validProducts} title={title} onAddToCart={onAddToCart} commonText={commonText} />\n    )\n  },\n}\n"],
-  "mappings": "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",
+  "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, CommonText } from '../../types'\nimport { CURRENCY_SYMBOLS, DEFAULT_COMMON_TEXT } 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 * @param offText \"OFF\" \u6587\u6848\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  offText: string = DEFAULT_COMMON_TEXT.off\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)}% ${offText}`\n  }\n\n  if (discount.discount_type === 'fixed_amount') {\n    const symbol = CURRENCY_SYMBOLS[currency] || currency\n    return `${symbol}${Math.round(value)} ${offText}`\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  addToCartText?: string\n  offText?: string\n}> = ({ product, onAddToCart, addToCartText = DEFAULT_COMMON_TEXT.addToCart, offText = DEFAULT_COMMON_TEXT.off }) => {\n  const { title, description, price, imageUrl, 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, offText) : ''\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\">\n      <div 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\">\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              {addToCartText}\n            </button>\n          </div>\n        </div>\n      </div>\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  commonText?: CommonText\n}> = ({ products, title, onAddToCart, commonText }) => {\n  const [isExpanded, setIsExpanded] = useState(false)\n\n  // \u5408\u5E76\u9ED8\u8BA4\u6587\u6848\u548C\u81EA\u5B9A\u4E49\u6587\u6848\n  const mergedText = { ...DEFAULT_COMMON_TEXT, ...commonText }\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 => {\n          if (!product || !product.shopifyId) return null\n          return (\n            <CompactProductCard\n              key={product.shopifyId}\n              product={product}\n              onAddToCart={onAddToCart}\n              addToCartText={mergedText.addToCart}\n              offText={mergedText.off}\n            />\n          )\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 ? mergedText.showLess : mergedText.learnMore}</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, commonText } = 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 (\n      <ProductListComponent products={validProducts} title={title} onAddToCart={onAddToCart} commonText={commonText} />\n    )\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", "offText", "value", "CompactProductCard", "product", "onAddToCart", "addToCartText", "title", "description", "imageUrl", "stockStatus", "averageRating", "variants", "isOutOfStock", "firstVariant", "hasDiscount", "discountPrice", "currentPrice", "discountLabel", "handleAddToCart", "e", "ProductListComponent", "products", "commonText", "isExpanded", "setIsExpanded", "mergedText", "validProducts", "p", "INITIAL_DISPLAY_COUNT", "hasMore", "displayedProducts", "content", "productListContent"]
 }

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

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

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

@@ -1,7 +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 font-bold 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 className='text-left'>{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,mMAGT,UAAAA,EAAM,SAAQ,OAAC,QAAK,UAAU,YAAa,SAAAA,EAAM,KAAK,KAGvD,OAAC,QAAK,UAAU,YAAa,SAAAA,EAAM,MAAM,IATpCA,EAAM,EAUb,CACD,EACH,CAEJ,CACF,GAKaX,EAAgCC,EAA2B",
+  "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 font-bold items-center gap-1 rounded-[19px] px-3 py-[6px] text-sm leading-[140%] tracking-[-0.02em] transition-transform\"\n          >\n            {/* \u56FE\u6807\uFF08\u53EF\u9009\uFF09 */}\n            {reply.icon && <span className=\"text-base\">{reply.icon}</span>}\n\n            {/* \u6807\u7B7E */}\n            <span className='text-left'>{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,mKAGT,UAAAA,EAAM,SAAQ,OAAC,QAAK,UAAU,YAAa,SAAAA,EAAM,KAAK,KAGvD,OAAC,QAAK,UAAU,YAAa,SAAAA,EAAM,MAAM,IATpCA,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.js CHANGED Viewed

@@ -1,2 +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-base md:text-sm",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}};
+"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-base md:text-sm",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:"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-bold"}),em:({node:o,...e})=>(0,n.jsx)("em",{...e,className:"italic"})},children:s.text})}):null}};
 //# sourceMappingURL=TextBlock.js.map