@clikvn/agent-widget-embedded 1.1.10 → 1.1.11-hotfix-01

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/ProductDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductDetail.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ProductDetail.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAcxE,UAAU,SAAS;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;;AAiQD,wBAAyC"}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/ProductDetail.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState, useMemo } from 'react';
+import { useChatData } from '../../hooks/useChatData';
+import { getProductDetails } from '../../services/vt360.service';
+import { BookmarkIcon, Product360Icon, ProductARIcon, ProductGalleryIcon, ProductInfoIcon, } from './Icons';
+import { convertCurrencyVnd, formatPriceProduct } from 'utils/currency';
+import LoadingComponent from './LoadingComponent';
+const ProductDetail = ({ productCode, tourCode, languageCode = 'VN', apiUrl, }) => {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const { listeners } = useChatData();
+    useEffect(() => {
+        const fetchProductData = async () => {
+            if (!productCode || !tourCode) {
+                return;
+            }
+            setLoading(true);
+            try {
+                const productData = await getProductDetails(productCode, tourCode, languageCode, apiUrl ? { api: apiUrl } : undefined);
+                setData(productData);
+            }
+            catch (err) {
+                console.error('Error fetching product details:', err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchProductData();
+    }, [productCode]);
+    const handleOnClick = (url) => {
+        if (listeners?.['ON_LINK_CLICK']) {
+            listeners['ON_LINK_CLICK'](url);
+        }
+        else {
+            window?.open(url, '_blank');
+        }
+    };
+    const handleActionClick = (action) => {
+        if (!listeners?.['CMD_CALLBACK']) {
+            return;
+        }
+        // template command tool {"tool":"show_product_image_gallery","toolInput":{"product_code":"ITEM27GETN2D2M94"},"toolOutput":"[{\"type\":\"text\",\"text\":\"{\\n  \\\"action\\\": \\\"show_product_image_gallery\\\",\\n  \\\"product_code\\\": \\\"ITEM27GETN2D2M94\\\",\\n  \\\"status\\\": \\\"opening\\\",\\n  \\\"message\\\": \\\"Opening image gallery for product ITEM27GETN2D2M94\\\"\\n}\"}]"}
+        let cmdTool = null;
+        switch (action) {
+            case 'PRODUCT_INFO':
+                cmdTool = {
+                    tool: 'show_product_info',
+                    output: JSON.stringify([
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                action: 'show_product_info',
+                                product_code: data?.code,
+                            }),
+                        },
+                    ]),
+                };
+                break;
+            case 'PRODUCT_GALLERY':
+                cmdTool = {
+                    tool: 'show_product_image_gallery',
+                    output: JSON.stringify([
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                action: 'show_product_image_gallery',
+                                product_code: data?.code,
+                            }),
+                        },
+                    ]),
+                };
+                break;
+            case 'PRODUCT_360':
+                cmdTool = {
+                    tool: 'show_product_360_image',
+                    output: JSON.stringify([
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                action: 'show_product_360_image',
+                                product_code: data?.code,
+                            }),
+                        },
+                    ]),
+                };
+                break;
+            case 'PRODUCT_AR':
+                cmdTool = {
+                    tool: 'show_product_AR',
+                    output: JSON.stringify([
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                action: 'show_product_AR',
+                                product_code: data?.code,
+                            }),
+                        },
+                    ]),
+                };
+                break;
+            default:
+                break;
+        }
+        if (cmdTool) {
+            listeners['CMD_CALLBACK'](cmdTool);
+        }
+    };
+    const loadingComponent = useMemo(() => _jsx(LoadingComponent, {}), []);
+    const cardAction = [
+        {
+            label: 'Info',
+            key: 'PRODUCT_INFO',
+            icon: _jsx(ProductInfoIcon, { size: 20, color: "#71717A" }),
+            onClick: () => handleActionClick('PRODUCT_INFO'),
+            isShow: true,
+        },
+        {
+            label: 'Gallery',
+            key: 'PRODUCT_GALLERY',
+            icon: _jsx(ProductGalleryIcon, { size: 20, color: "#71717A" }),
+            onClick: () => handleActionClick('PRODUCT_GALLERY'),
+            isShow: data?.collections?.some((item) => item.gallery?.length && item.gallery?.length > 0),
+        },
+        {
+            label: '360',
+            key: 'PRODUCT_360',
+            icon: _jsx(Product360Icon, { size: 20, color: "#71717A" }),
+            onClick: () => handleActionClick('PRODUCT_360'),
+            isShow: data?.collections.some((item) => item.webRotateCode),
+        },
+        {
+            label: 'AR',
+            key: 'PRODUCT_AR',
+            icon: _jsx(ProductARIcon, { size: 20, color: "#71717A" }),
+            onClick: () => handleActionClick('PRODUCT_AR'),
+            isShow: data?.collections.some((item) => item.model3DAndroid?.url || item.model3DIos?.url),
+        },
+    ];
+    const productDataComponent = useMemo(() => {
+        if (!data)
+            return null;
+        return (_jsx("div", { className: "py-4", children: _jsxs("div", { className: "bg-white rounded-lg overflow-hidden w-full p-[12px] gap-[12px] flex flex-col justify-center items-start", children: [_jsxs("div", { className: "flex flex-col w-full gap-1", children: [_jsx("div", { className: "flex flex-row items-center w-full h-6 gap-1", children: _jsx("h2", { className: "text-card-foreground truncate font-semibold text-[16px] leading-6 flex-1 min-w-0", children: data.name }) }), _jsxs("div", { className: "flex w-full gap-[4px] justify-between", children: [_jsxs("div", { className: "min-w-0", children: [data.tourProductQuotations.length > 0 && (_jsx("span", { className: "text-card-foreground text-[16px] leading-[24px] font-semibold", children: `${formatPriceProduct(convertCurrencyVnd(data.tourProductQuotations[0]?.price.toString() ?? ''), data.currencyUnit ?? '', data.unit ?? '')} ` })), _jsx("span", { className: `${data.tourProductQuotations.length > 0 ? 'line-through text-muted-foreground text-[14px] leading-[14px] font-medium' : 'text-card-foreground text-[16px] leading-[24px] font-semibold'}`, children: `${formatPriceProduct(convertCurrencyVnd(data?.price.toString() ?? ''), data.currencyUnit ?? '', data.unit ?? '')} ` })] }), _jsx("div", { className: "flex justify-center items-center w-5 h-5", children: _jsx(BookmarkIcon, { size: 20, color: "#71717A" }) })] }), _jsx("p", { className: "text-muted-foreground w-full font-normal text-[14px] leading-5 overflow-hidden line-clamp-2", children: data.description })] }), _jsx("div", { className: "flex flex-row items-center w-full relative gap-3 pb-[56%]", children: _jsx("div", { className: "absolute top-0 left-0 cursor-pointer w-full h-full bg-cover bg-center rounded-[5px] flex-1", style: {
+                                backgroundImage: `url(${data.icon?.url || data.logo?.url})`,
+                                backgroundSize: 'contain',
+                                backgroundRepeat: 'no-repeat',
+                            }, onClick: () => handleOnClick(data.virtualTourUrl) }) }), _jsx("div", { className: "flex flex-row items-center w-full h-6 gap-3", children: _jsx("div", { className: "flex flex-row items-center h-6 gap-3", children: cardAction.map((item) => {
+                                if (!item.isShow) {
+                                    return null;
+                                }
+                                return (_jsxs("button", { className: "flex flex-row items-center hover:opacity-80 transition-opacity w-fit h-6 px-[8px] py-[2px] gap-[4px] bg-secondary border rounded-[8px]", onClick: () => handleActionClick(item.key), children: [_jsx("div", { className: "flex justify-center items-center w-5 h-5", children: item.icon }), _jsx("span", { className: "font-medium text-[14px] leading-5 text-muted-foreground", children: item.label })] }, item.key));
+                            }) }) })] }) }));
+    }, [data, handleOnClick, handleActionClick]);
+    return (_jsxs(_Fragment, { children: [loading && loadingComponent, !!data && productDataComponent] }));
+};
+export default React.memo(ProductDetail);
+//# sourceMappingURL=ProductDetail.js.map

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/ProductDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductDetail.js","sourceRoot":"","sources":["../../../src/components/Chat/ProductDetail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Marked, Renderer } from '@ts-stack/markdown';\nimport React, { FC, useEffect, useRef, useState, useMemo } from 'react';\nimport { useChatData } from '../../hooks/useChatData';\nimport { getProductDetails } from '../../services/vt360.service';\nimport {\n  BookmarkIcon,\n  Product360Icon,\n  ProductARIcon,\n  ProductGalleryIcon,\n  ProductInfoIcon,\n} from './Icons';\nimport { convertCurrencyVnd, formatPriceProduct } from 'utils/currency';\nimport { ProductType } from 'types/product.type';\nimport LoadingComponent from './LoadingComponent';\n\ninterface PropTypes {\n  productCode?: string;\n  tourCode?: string;\n  languageCode?: string;\n  apiUrl?: string;\n}\n\nconst ProductDetail: FC<PropTypes> = ({\n  productCode,\n  tourCode,\n  languageCode = 'VN',\n  apiUrl,\n}) => {\n  const [data, setData] = useState<ProductType | null>(null);\n  const [loading, setLoading] = useState<boolean>(false);\n  const { listeners } = useChatData();\n\n  useEffect(() => {\n    const fetchProductData = async () => {\n      if (!productCode || !tourCode) {\n        return;\n      }\n\n      setLoading(true);\n\n      try {\n        const productData = await getProductDetails(\n          productCode,\n          tourCode,\n          languageCode,\n          apiUrl ? { api: apiUrl } : undefined\n        );\n        setData(productData);\n      } catch (err) {\n        console.error('Error fetching product details:', err);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchProductData();\n  }, [productCode]);\n\n  const handleOnClick = (url: string) => {\n    if (listeners?.['ON_LINK_CLICK']) {\n      listeners['ON_LINK_CLICK'](url);\n    } else {\n      window?.open(url, '_blank');\n    }\n  };\n\n  const handleActionClick = (action: string) => {\n    if (!listeners?.['CMD_CALLBACK']) {\n      return;\n    }\n    // template command tool {\"tool\":\"show_product_image_gallery\",\"toolInput\":{\"product_code\":\"ITEM27GETN2D2M94\"},\"toolOutput\":\"[{\\\"type\\\":\\\"text\\\",\\\"text\\\":\\\"{\\\\n  \\\\\\\"action\\\\\\\": \\\\\\\"show_product_image_gallery\\\\\\\",\\\\n  \\\\\\\"product_code\\\\\\\": \\\\\\\"ITEM27GETN2D2M94\\\\\\\",\\\\n  \\\\\\\"status\\\\\\\": \\\\\\\"opening\\\\\\\",\\\\n  \\\\\\\"message\\\\\\\": \\\\\\\"Opening image gallery for product ITEM27GETN2D2M94\\\\\\\"\\\\n}\\\"}]\"}\n    let cmdTool = null;\n    switch (action) {\n      case 'PRODUCT_INFO':\n        cmdTool = {\n          tool: 'show_product_info',\n          output: JSON.stringify([\n            {\n              type: 'text',\n              text: JSON.stringify({\n                action: 'show_product_info',\n                product_code: data?.code,\n              }),\n            },\n          ]),\n        };\n        break;\n      case 'PRODUCT_GALLERY':\n        cmdTool = {\n          tool: 'show_product_image_gallery',\n          output: JSON.stringify([\n            {\n              type: 'text',\n              text: JSON.stringify({\n                action: 'show_product_image_gallery',\n                product_code: data?.code,\n              }),\n            },\n          ]),\n        };\n        break;\n      case 'PRODUCT_360':\n        cmdTool = {\n          tool: 'show_product_360_image',\n          output: JSON.stringify([\n            {\n              type: 'text',\n              text: JSON.stringify({\n                action: 'show_product_360_image',\n                product_code: data?.code,\n              }),\n            },\n          ]),\n        };\n        break;\n      case 'PRODUCT_AR':\n        cmdTool = {\n          tool: 'show_product_AR',\n          output: JSON.stringify([\n            {\n              type: 'text',\n              text: JSON.stringify({\n                action: 'show_product_AR',\n                product_code: data?.code,\n              }),\n            },\n          ]),\n        };\n        break;\n      default:\n        break;\n    }\n    if (cmdTool) {\n      listeners['CMD_CALLBACK'](cmdTool);\n    }\n  };\n\n  const loadingComponent = useMemo(() => <LoadingComponent />, []);\n\n  const cardAction = [\n    {\n      label: 'Info',\n      key: 'PRODUCT_INFO',\n      icon: <ProductInfoIcon size={20} color=\"#71717A\" />,\n      onClick: () => handleActionClick('PRODUCT_INFO'),\n      isShow: true,\n    },\n    {\n      label: 'Gallery',\n      key: 'PRODUCT_GALLERY',\n      icon: <ProductGalleryIcon size={20} color=\"#71717A\" />,\n      onClick: () => handleActionClick('PRODUCT_GALLERY'),\n      isShow: data?.collections?.some(\n        (item) => item.gallery?.length && item.gallery?.length > 0\n      ),\n    },\n    {\n      label: '360',\n      key: 'PRODUCT_360',\n      icon: <Product360Icon size={20} color=\"#71717A\" />,\n      onClick: () => handleActionClick('PRODUCT_360'),\n      isShow: data?.collections.some((item) => item.webRotateCode),\n    },\n    {\n      label: 'AR',\n      key: 'PRODUCT_AR',\n      icon: <ProductARIcon size={20} color=\"#71717A\" />,\n      onClick: () => handleActionClick('PRODUCT_AR'),\n      isShow: data?.collections.some(\n        (item) => item.model3DAndroid?.url || item.model3DIos?.url\n      ),\n    },\n  ];\n\n  const productDataComponent = useMemo(() => {\n    if (!data) return null;\n\n    return (\n      <div className=\"py-4\">\n        {/* item-card: full width responsive with 12px padding and 12px gap */}\n        <div className=\"bg-white rounded-lg overflow-hidden w-full p-[12px] gap-[12px] flex flex-col justify-center items-start\">\n          {/* content: full width x 68px with 4px gap */}\n          <div className=\"flex flex-col w-full gap-1\">\n            {/* price section: 334px x 24px with 4px gap */}\n            <div className=\"flex flex-row items-center w-full h-6 gap-1\">\n              {/* ARC Dining Table - now takes flex-grow: 1 */}\n              <h2 className=\"text-card-foreground truncate font-semibold text-[16px] leading-6 flex-1 min-w-0\">\n                {data.name}\n              </h2>\n\n              {/* Bookmark icon: 20px x 20px */}\n            </div>\n            <div className=\"flex w-full gap-[4px] justify-between\">\n              <div className=\"min-w-0\">\n                {data.tourProductQuotations.length > 0 && (\n                  <span className=\"text-card-foreground text-[16px] leading-[24px] font-semibold\">\n                    {`${formatPriceProduct(\n                      convertCurrencyVnd(\n                        data.tourProductQuotations[0]?.price.toString() ?? ''\n                      ),\n                      data.currencyUnit ?? '',\n                      data.unit ?? ''\n                    )} `}\n                  </span>\n                )}\n                <span\n                  className={`${data.tourProductQuotations.length > 0 ? 'line-through text-muted-foreground text-[14px] leading-[14px] font-medium' : 'text-card-foreground text-[16px] leading-[24px] font-semibold'}`}\n                >\n                  {`${formatPriceProduct(\n                    convertCurrencyVnd(data?.price.toString() ?? ''),\n                    data.currencyUnit ?? '',\n                    data.unit ?? ''\n                  )} `}\n                </span>\n              </div>\n              <div className=\"flex justify-center items-center w-5 h-5\">\n                <BookmarkIcon size={20} color=\"#71717A\" />\n              </div>\n            </div>\n            {/* Description text */}\n            <p className=\"text-muted-foreground w-full font-normal text-[14px] leading-5 overflow-hidden line-clamp-2\">\n              {data.description}\n            </p>\n          </div>\n          {/* gallery: full width x 187.88px with 12px gap */}\n          <div className=\"flex flex-row items-center w-full relative gap-3 pb-[56%]\">\n            {/* Main Image */}\n            <div\n              className=\"absolute top-0 left-0 cursor-pointer w-full h-full bg-cover bg-center rounded-[5px] flex-1\"\n              style={{\n                backgroundImage: `url(${data.icon?.url || data.logo?.url})`,\n                backgroundSize: 'contain',\n                backgroundRepeat: 'no-repeat',\n              }}\n              onClick={() => handleOnClick(data.virtualTourUrl)}\n            />\n          </div>\n\n          {/* right: full width x 24px with 12px gap */}\n          <div className=\"flex flex-row items-center w-full h-6 gap-3\">\n            {/* content: 316px x 24px with 12px gap - contains the 4 buttons */}\n            <div className=\"flex flex-row items-center h-6 gap-3\">\n              {/* Info button: 66px x 24px */}\n              {cardAction.map((item) => {\n                if (!item.isShow) {\n                  return null;\n                }\n                return (\n                  <button\n                    key={item.key}\n                    className=\"flex flex-row items-center hover:opacity-80 transition-opacity w-fit h-6 px-[8px] py-[2px] gap-[4px] bg-secondary border rounded-[8px]\"\n                    onClick={() => handleActionClick(item.key)}\n                  >\n                    <div className=\"flex justify-center items-center w-5 h-5\">\n                      {item.icon}\n                    </div>\n                    <span className=\"font-medium text-[14px] leading-5 text-muted-foreground\">\n                      {item.label}\n                    </span>\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }, [data, handleOnClick, handleActionClick]);\n\n  return (\n    <>\n      {loading && loadingComponent}\n      {!!data && productDataComponent}\n    </>\n  );\n};\n\nexport default React.memo(ProductDetail);\n"]}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/ProductList.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface PropTypes {
+    productCodes?: string[];
+    tourCode?: string;
+    languageCode?: string;
+    apiUrl?: string;
+}
+declare const ProductList: FC<PropTypes>;
+export default ProductList;
+//# sourceMappingURL=ProductList.d.ts.map

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/ProductList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductList.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ProductList.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAA8C,MAAM,OAAO,CAAC;AAkB9E,UAAU,SAAS;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,SAAS,CA8P9B,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/ProductList.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useMemo } from 'react';
+import { useChatData } from '../../hooks/useChatData';
+import { getProducts } from '../../services/vt360.service';
+import { BookmarkIcon } from './Icons';
+import { convertCurrencyVnd, formatPriceProduct } from 'utils/currency';
+import LoadingComponent from './LoadingComponent';
+const FORMATTER = new Intl.NumberFormat('vi-VN', {
+    style: 'currency',
+    currency: 'VND',
+});
+const ProductList = ({ productCodes, tourCode, languageCode = 'VN', apiUrl, }) => {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const { listeners } = useChatData();
+    useEffect(() => {
+        const fetchProductsData = async () => {
+            if (!productCodes || !productCodes.length || !tourCode) {
+                return;
+            }
+            setLoading(true);
+            try {
+                const productsData = await getProducts(productCodes, tourCode, languageCode, apiUrl ? { api: apiUrl } : undefined);
+                setData(productsData);
+            }
+            catch (err) {
+                console.error('Error fetching products:', err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchProductsData();
+    }, [productCodes, tourCode, languageCode, apiUrl]);
+    const handleOnClick = (url) => {
+        if (listeners?.['ON_LINK_CLICK']) {
+            listeners['ON_LINK_CLICK'](url);
+        }
+        else {
+            window?.open(url, '_blank');
+        }
+    };
+    const handleActionClick = (action, productCode) => {
+        if (!listeners?.['CMD_CALLBACK']) {
+            return;
+        }
+        // template command tool {"tool":"show_product_image_gallery","toolInput":{"product_code":"ITEM27GETN2D2M94"},"toolOutput":"[{\"type\":\"text\",\"text\":\"{\\n  \\\"action\\\": \\\"show_product_image_gallery\\\",\\n  \\\"product_code\\\": \\\"ITEM27GETN2D2M94\\\",\\n  \\\"status\\\": \\\"opening\\\",\\n  \\\"message\\\": \\\"Opening image gallery for product ITEM27GETN2D2M94\\\"\\n}\"}]"}
+        let cmdTool = null;
+        switch (action) {
+            case 'PRODUCT_INFO':
+                cmdTool = {
+                    tool: 'show_product_info',
+                    output: JSON.stringify([
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                action: 'show_product_info',
+                                product_code: productCode,
+                            }),
+                        },
+                    ]),
+                };
+                break;
+            case 'PRODUCT_GALLERY':
+                cmdTool = {
+                    tool: 'show_product_image_gallery',
+                    output: JSON.stringify([
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                action: 'show_product_image_gallery',
+                                product_code: productCode,
+                            }),
+                        },
+                    ]),
+                };
+                break;
+            case 'PRODUCT_360':
+                cmdTool = {
+                    tool: 'show_product_360_image',
+                    output: JSON.stringify([
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                action: 'show_product_360_image',
+                                product_code: productCode,
+                            }),
+                        },
+                    ]),
+                };
+                break;
+            case 'PRODUCT_AR':
+                cmdTool = {
+                    tool: 'show_product_AR',
+                    output: JSON.stringify([
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                action: 'show_product_AR',
+                                product_code: productCode,
+                            }),
+                        },
+                    ]),
+                };
+                break;
+            default:
+                break;
+        }
+        if (cmdTool) {
+            listeners['CMD_CALLBACK'](cmdTool);
+        }
+    };
+    const loadingComponent = useMemo(() => _jsx(LoadingComponent, {}), []);
+    const productListComponent = useMemo(() => {
+        if (!data || (!data?.products?.length && !data?.scenarioUrl))
+            return null;
+        return (_jsx("div", { className: "py-4", children: _jsx("div", { className: "bg-white rounded-lg overflow-hidden w-full", style: {
+                    padding: '12px',
+                    gap: '12px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    alignItems: 'flex-start',
+                }, children: _jsxs("div", { className: "flex flex-col w-full", style: {
+                        gap: '12px',
+                    }, children: [!!data?.products?.length &&
+                            data.products.map((product, index) => (_jsxs("div", { className: "flex flex-row items-start w-full", style: {
+                                    gap: '12px',
+                                    minHeight: '82px',
+                                }, children: [_jsx("div", { className: "flex-shrink-0 w-[80px] h-[80px] rounded-[5px] bg-cover bg-center ", style: {
+                                            backgroundImage: `url(${product.icon?.url})`,
+                                        } }), _jsxs("div", { className: "flex flex-col font-vietnam-pro flex-1 min-w-0", style: {
+                                            minHeight: '82px',
+                                        }, children: [_jsx("div", { className: "flex flex-row items-center w-full h-5 gap-1", children: _jsx("h3", { className: "text-card-foreground truncate mb-[4px] font-medium text-[14px] leading-[14px] underline cursor-pointer hover:opacity-80 flex-1 min-w-0 ", onClick: (e) => {
+                                                        e.preventDefault();
+                                                        handleActionClick('PRODUCT_INFO', product.code);
+                                                    }, children: product.name }) }), _jsxs("div", { className: "flex flex-row gap-[4px] min-h-[28px] justify-between w-full", children: [_jsxs("div", { className: "min-w-0", children: [product.tourProductQuotations.length > 0 && (_jsx("span", { className: "text-card-foreground text-[16px] leading-[24px] mr-[4px] font-semibold", children: `${formatPriceProduct(convertCurrencyVnd(product.tourProductQuotations[0]?.price.toString() ??
+                                                                    ''), product.currencyUnit ?? '', product.unit ?? '')} ` })), _jsx("span", { className: `${product.tourProductQuotations.length > 0 ? 'line-through text-muted-foreground text-[14px] leading-[14px] font-medium' : 'text-card-foreground text-[16px] leading-[24px] font-semibold'}`, children: `${formatPriceProduct(convertCurrencyVnd(product?.price.toString() ?? ''), product.currencyUnit ?? '', product.unit ?? '')} ` })] }), _jsx("div", { className: "flex justify-center items-center", style: { width: '20px', height: '20px' }, children: _jsx(BookmarkIcon, { size: 20, color: "#71717A" }) })] }), _jsx("p", { className: "font-normal text-[14px] leading-[20px] text-muted-foreground overflow-hidden w-full text-ellipsis", style: {
+                                                    minHeight: '20px',
+                                                    display: '-webkit-box',
+                                                    WebkitLineClamp: 2,
+                                                    WebkitBoxOrient: 'vertical',
+                                                    wordBreak: 'break-word',
+                                                }, children: product.description })] })] }, product.code || index))), !!data?.scenarioUrl && (_jsx("button", { className: "flex h-[40px] px-[16px] py-[8px] gap-[10px] font-medium leading-[24px] flex-row justify-center items-center hover:opacity-80 transition-opacity bg-secondary border rounded-md text-sm text-card-foreground  w-full", onClick: (e) => {
+                                e.preventDefault();
+                                handleOnClick(data?.scenarioUrl);
+                            }, children: "View all products" }))] }) }) }));
+    }, [data, handleActionClick, handleOnClick, FORMATTER]);
+    return (_jsxs(_Fragment, { children: [loading && loadingComponent, productListComponent] }));
+};
+export default ProductList;
+//# sourceMappingURL=ProductList.js.map

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/ProductList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductList.js","sourceRoot":"","sources":["../../../src/components/Chat/ProductList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Marked, Renderer } from '@ts-stack/markdown';\nimport React, { FC, useEffect, useRef, memo, useState, useMemo } from 'react';\nimport { useChatData } from '../../hooks/useChatData';\nimport { getProducts } from '../../services/vt360.service';\nimport { BookmarkIcon } from './Icons';\nimport { convertCurrencyVnd, formatPriceProduct } from 'utils/currency';\nimport { ProductType } from 'types/product.type';\nimport LoadingComponent from './LoadingComponent';\n\nconst FORMATTER = new Intl.NumberFormat('vi-VN', {\n  style: 'currency',\n  currency: 'VND',\n});\n\ninterface ProductDataResultType {\n  products: ProductType[];\n  scenarioUrl: string;\n}\n\ninterface PropTypes {\n  productCodes?: string[];\n  tourCode?: string;\n  languageCode?: string;\n  apiUrl?: string;\n}\n\nconst ProductList: FC<PropTypes> = ({\n  productCodes,\n  tourCode,\n  languageCode = 'VN',\n  apiUrl,\n}) => {\n  const [data, setData] = useState<ProductDataResultType | null>(null);\n  const [loading, setLoading] = useState<boolean>(false);\n  const { listeners } = useChatData();\n\n  useEffect(() => {\n    const fetchProductsData = async () => {\n      if (!productCodes || !productCodes.length || !tourCode) {\n        return;\n      }\n\n      setLoading(true);\n\n      try {\n        const productsData = await getProducts(\n          productCodes,\n          tourCode,\n          languageCode,\n          apiUrl ? { api: apiUrl } : undefined\n        );\n        setData(productsData);\n      } catch (err) {\n        console.error('Error fetching products:', err);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchProductsData();\n  }, [productCodes, tourCode, languageCode, apiUrl]);\n\n  const handleOnClick = (url: string) => {\n    if (listeners?.['ON_LINK_CLICK']) {\n      listeners['ON_LINK_CLICK'](url);\n    } else {\n      window?.open(url, '_blank');\n    }\n  };\n\n  const handleActionClick = (action: string, productCode: string) => {\n    if (!listeners?.['CMD_CALLBACK']) {\n      return;\n    }\n    // template command tool {\"tool\":\"show_product_image_gallery\",\"toolInput\":{\"product_code\":\"ITEM27GETN2D2M94\"},\"toolOutput\":\"[{\\\"type\\\":\\\"text\\\",\\\"text\\\":\\\"{\\\\n  \\\\\\\"action\\\\\\\": \\\\\\\"show_product_image_gallery\\\\\\\",\\\\n  \\\\\\\"product_code\\\\\\\": \\\\\\\"ITEM27GETN2D2M94\\\\\\\",\\\\n  \\\\\\\"status\\\\\\\": \\\\\\\"opening\\\\\\\",\\\\n  \\\\\\\"message\\\\\\\": \\\\\\\"Opening image gallery for product ITEM27GETN2D2M94\\\\\\\"\\\\n}\\\"}]\"}\n    let cmdTool = null;\n    switch (action) {\n      case 'PRODUCT_INFO':\n        cmdTool = {\n          tool: 'show_product_info',\n          output: JSON.stringify([\n            {\n              type: 'text',\n              text: JSON.stringify({\n                action: 'show_product_info',\n                product_code: productCode,\n              }),\n            },\n          ]),\n        };\n        break;\n      case 'PRODUCT_GALLERY':\n        cmdTool = {\n          tool: 'show_product_image_gallery',\n          output: JSON.stringify([\n            {\n              type: 'text',\n              text: JSON.stringify({\n                action: 'show_product_image_gallery',\n                product_code: productCode,\n              }),\n            },\n          ]),\n        };\n        break;\n      case 'PRODUCT_360':\n        cmdTool = {\n          tool: 'show_product_360_image',\n          output: JSON.stringify([\n            {\n              type: 'text',\n              text: JSON.stringify({\n                action: 'show_product_360_image',\n                product_code: productCode,\n              }),\n            },\n          ]),\n        };\n        break;\n      case 'PRODUCT_AR':\n        cmdTool = {\n          tool: 'show_product_AR',\n          output: JSON.stringify([\n            {\n              type: 'text',\n              text: JSON.stringify({\n                action: 'show_product_AR',\n                product_code: productCode,\n              }),\n            },\n          ]),\n        };\n        break;\n      default:\n        break;\n    }\n    if (cmdTool) {\n      listeners['CMD_CALLBACK'](cmdTool);\n    }\n  };\n\n  const loadingComponent = useMemo(() => <LoadingComponent />, []);\n\n  const productListComponent = useMemo(() => {\n    if (!data || (!data?.products?.length && !data?.scenarioUrl)) return null;\n    return (\n      <div className=\"py-4\">\n        {/* item-card: 358px x 252px with 12px padding and 12px gap */}\n        <div\n          className=\"bg-white rounded-lg overflow-hidden w-full\"\n          style={{\n            padding: '12px',\n            gap: '12px',\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'flex-start',\n          }}\n        >\n          {/* Message bubble: 334px x 228px with 12px gap */}\n          <div\n            className=\"flex flex-col w-full\"\n            style={{\n              gap: '12px',\n            }}\n          >\n            {!!data?.products?.length &&\n              data.products.map((product, index) => (\n                <div\n                  key={product.code || index}\n                  className=\"flex flex-row items-start w-full\"\n                  style={{\n                    gap: '12px',\n                    minHeight: '82px',\n                  }}\n                >\n                  {/* Image: 80px x 80px */}\n                  <div\n                    className=\"flex-shrink-0 w-[80px] h-[80px] rounded-[5px] bg-cover bg-center \"\n                    style={{\n                      backgroundImage: `url(${product.icon?.url})`,\n                    }}\n                  />\n\n                  {/* Content: 242px x 82px */}\n                  <div\n                    className=\"flex flex-col font-vietnam-pro flex-1 min-w-0\"\n                    style={{\n                      minHeight: '82px',\n                    }}\n                  >\n                    {/* Product Name */}\n                    <div className=\"flex flex-row items-center w-full h-5 gap-1\">\n                      <h3\n                        className=\"text-card-foreground truncate mb-[4px] font-medium text-[14px] leading-[14px] underline cursor-pointer hover:opacity-80 flex-1 min-w-0 \"\n                        onClick={(e) => {\n                          e.preventDefault();\n                          handleActionClick('PRODUCT_INFO', product.code);\n                        }}\n                      >\n                        {product.name}\n                      </h3>\n                    </div>\n\n                    {/* Price section */}\n                    <div className=\"flex flex-row gap-[4px] min-h-[28px] justify-between w-full\">\n                      <div className=\"min-w-0\">\n                        {/* Original Price (crossed out) */}\n                        {product.tourProductQuotations.length > 0 && (\n                          <span className=\"text-card-foreground text-[16px] leading-[24px] mr-[4px] font-semibold\">\n                            {`${formatPriceProduct(\n                              convertCurrencyVnd(\n                                product.tourProductQuotations[0]?.price.toString() ??\n                                  ''\n                              ),\n                              product.currencyUnit ?? '',\n                              product.unit ?? ''\n                            )} `}\n                          </span>\n                        )}\n                        <span\n                          className={`${product.tourProductQuotations.length > 0 ? 'line-through text-muted-foreground text-[14px] leading-[14px] font-medium' : 'text-card-foreground text-[16px] leading-[24px] font-semibold'}`}\n                        >\n                          {`${formatPriceProduct(\n                            convertCurrencyVnd(product?.price.toString() ?? ''),\n                            product.currencyUnit ?? '',\n                            product.unit ?? ''\n                          )} `}\n                        </span>\n                      </div>\n                      {/* Bookmark Icon */}\n                      <div\n                        className=\"flex justify-center items-center\"\n                        style={{ width: '20px', height: '20px' }}\n                      >\n                        <BookmarkIcon size={20} color=\"#71717A\" />\n                      </div>\n                    </div>\n\n                    {/* Description */}\n                    <p\n                      className=\"font-normal text-[14px] leading-[20px] text-muted-foreground overflow-hidden w-full text-ellipsis\"\n                      style={{\n                        minHeight: '20px',\n                        display: '-webkit-box',\n                        WebkitLineClamp: 2,\n                        WebkitBoxOrient: 'vertical',\n                        wordBreak: 'break-word',\n                      }}\n                    >\n                      {product.description}\n                    </p>\n                  </div>\n                </div>\n              ))}\n\n            {/* View all products button */}\n            {!!data?.scenarioUrl && (\n              <button\n                className=\"flex h-[40px] px-[16px] py-[8px] gap-[10px] font-medium leading-[24px] flex-row justify-center items-center hover:opacity-80 transition-opacity bg-secondary border rounded-md text-sm text-card-foreground  w-full\"\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleOnClick(data?.scenarioUrl);\n                }}\n              >\n                View all products\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }, [data, handleActionClick, handleOnClick, FORMATTER]);\n\n  return (\n    <>\n      {loading && loadingComponent}\n      {productListComponent}\n    </>\n  );\n};\n\nexport default ProductList;\n"]}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/ScenariosList.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface PropTypes {
+    scenarioCodes?: string[];
+    tourCode?: string;
+    languageCode?: string;
+    apiUrl?: string;
+    playBtn?: boolean;
+}
+declare const _default: React.NamedExoticComponent<PropTypes>;
+export default _default;
+//# sourceMappingURL=ScenariosList.d.ts.map

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/ScenariosList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScenariosList.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ScenariosList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAehE,UAAU,SAAS;IACjB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;;AAyKD,wBAAyC"}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/ScenariosList.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState, useMemo } from 'react';
+import { useChatData } from '../../hooks/useChatData';
+import { getScenarios } from '../../services/vt360.service';
+const ScenariosList = ({ scenarioCodes, tourCode, languageCode = 'VN', apiUrl, playBtn = false, }) => {
+    const [data, setData] = useState(null);
+    const [showAll, setShowAll] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const { listeners } = useChatData();
+    useEffect(() => {
+        const fetchScenariosData = async () => {
+            if (!scenarioCodes || !scenarioCodes.length || !tourCode) {
+                return;
+            }
+            setLoading(true);
+            try {
+                const scenariosData = await getScenarios(scenarioCodes, tourCode, languageCode, apiUrl ? { api: apiUrl } : undefined);
+                setData(scenariosData);
+            }
+            catch (err) {
+                console.error('Error fetching scenarios:', err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchScenariosData();
+    }, [scenarioCodes]);
+    const handleOnClick = (url) => {
+        console.log('Scenario link clicked:', url);
+        if (listeners?.['ON_LINK_CLICK']) {
+            listeners['ON_LINK_CLICK'](url);
+        }
+        else {
+            window?.open(url, '_blank');
+        }
+    };
+    const loadingComponent = useMemo(() => (_jsx("div", { className: "py-4", children: _jsx("div", { className: "bg-white rounded-lg border border-gray-200 p-4", children: _jsxs("div", { className: "animate-pulse", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-3/4 mb-4" }), _jsx("div", { className: "h-20 bg-gray-200 rounded mb-4" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-1/2" })] }) }) })), []);
+    const scenarioListComponent = useMemo(() => {
+        if (!data || !data.length)
+            return null;
+        return (_jsx("div", { className: "py-4", children: _jsx("div", { className: "bg-white rounded-lg overflow-hidden w-full", style: {
+                    padding: '12px',
+                    gap: '12px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    alignItems: 'flex-start',
+                }, children: _jsxs("div", { className: "flex flex-col w-full", style: {
+                        gap: '12px',
+                    }, children: [[...data]
+                            .splice(0, showAll ? data.length : 5)
+                            .map((scenario, index) => (_jsxs("div", { className: "flex flex-row items-start w-full", style: {
+                                gap: '12px',
+                                minHeight: '82px',
+                            }, children: [_jsx("div", { className: "flex-shrink-0 w-[80px] h-[80px] rounded-[5px] bg-cover bg-center bg-gray-200", style: {
+                                        backgroundImage: scenario.image?.file?.url
+                                            ? `url(${scenario.image.file.url})`
+                                            : 'none',
+                                    } }), _jsxs("div", { className: "flex flex-col items-center justify-center font-vietnam-pro flex-1 min-w-0", style: {
+                                        minHeight: '82px',
+                                    }, children: [_jsx("div", { className: "flex flex-row items-center w-full h-5 gap-1", children: _jsx("h3", { className: "text-card-foreground truncate mb-[4px] font-medium text-[14px] leading-[14px] underline cursor-pointer hover:opacity-80 flex-1 min-w-0", onClick: () => handleOnClick(scenario.code), children: scenario.name }) }), playBtn && (_jsx("div", { className: "flex flex-row gap-[4px] min-h-[28px] justify-end w-full", children: _jsx("button", { className: "flex h-[28px] px-[12px] py-[4px] gap-[8px] font-medium leading-[20px] flex-row justify-center items-center hover:opacity-80 transition-opacity bg-secondary border rounded-md text-sm text-card-foreground", onClick: () => handleOnClick(scenario.code), children: "Play" }) })), scenario.description && (_jsx("p", { className: "font-normal text-[14px] leading-[20px] text-muted-foreground overflow-hidden w-full text-ellipsis", style: {
+                                                minHeight: '20px',
+                                                display: '-webkit-box',
+                                                WebkitLineClamp: 3,
+                                                WebkitBoxOrient: 'vertical',
+                                                wordBreak: 'break-word',
+                                            }, children: scenario.description }))] })] }, scenario.code || index))), !showAll && data?.length > 5 && (_jsx("button", { className: "flex h-[40px] px-[16px] py-[8px] gap-[10px] font-medium leading-[24px] flex-row justify-center items-center hover:opacity-80 transition-opacity bg-secondary border rounded-md text-sm text-card-foreground w-full", onClick: () => setShowAll(true), children: "View all scenarios" }))] }) }) }));
+    }, [data, showAll, handleOnClick]);
+    return (_jsxs(_Fragment, { children: [loading && loadingComponent, scenarioListComponent] }));
+};
+export default React.memo(ScenariosList);
+//# sourceMappingURL=ScenariosList.js.map

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/ScenariosList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScenariosList.js","sourceRoot":"","sources":["../../../src/components/Chat/ScenariosList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, useEffect, useState, useMemo } from 'react';\nimport { useChatData } from '../../hooks/useChatData';\nimport { getScenarios } from '../../services/vt360.service';\n\ninterface ScenarioType {\n  code: string;\n  name: string;\n  description?: string;\n  image?: {\n    file: {\n      url: string;\n    };\n  };\n}\n\ninterface PropTypes {\n  scenarioCodes?: string[];\n  tourCode?: string;\n  languageCode?: string;\n  apiUrl?: string;\n  playBtn?: boolean;\n}\n\nconst ScenariosList: FC<PropTypes> = ({\n  scenarioCodes,\n  tourCode,\n  languageCode = 'VN',\n  apiUrl,\n  playBtn = false,\n}) => {\n  const [data, setData] = useState<ScenarioType[] | null>(null);\n  const [showAll, setShowAll] = useState<boolean>(false);\n  const [loading, setLoading] = useState<boolean>(false);\n  const { listeners } = useChatData();\n\n  useEffect(() => {\n    const fetchScenariosData = async () => {\n      if (!scenarioCodes || !scenarioCodes.length || !tourCode) {\n        return;\n      }\n\n      setLoading(true);\n\n      try {\n        const scenariosData = await getScenarios(\n          scenarioCodes,\n          tourCode,\n          languageCode,\n          apiUrl ? { api: apiUrl } : undefined\n        );\n        setData(scenariosData);\n      } catch (err) {\n        console.error('Error fetching scenarios:', err);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchScenariosData();\n  }, [scenarioCodes]);\n\n  const handleOnClick = (url: string) => {\n    console.log('Scenario link clicked:', url);\n    if (listeners?.['ON_LINK_CLICK']) {\n      listeners['ON_LINK_CLICK'](url);\n    } else {\n      window?.open(url, '_blank');\n    }\n  };\n\n  const loadingComponent = useMemo(\n    () => (\n      <div className=\"py-4\">\n        <div className=\"bg-white rounded-lg border border-gray-200 p-4\">\n          <div className=\"animate-pulse\">\n            <div className=\"h-4 bg-gray-200 rounded w-3/4 mb-4\"></div>\n            <div className=\"h-20 bg-gray-200 rounded mb-4\"></div>\n            <div className=\"h-4 bg-gray-200 rounded w-1/2\"></div>\n          </div>\n        </div>\n      </div>\n    ),\n    []\n  );\n\n  const scenarioListComponent = useMemo(() => {\n    if (!data || !data.length) return null;\n\n    return (\n      <div className=\"py-4\">\n        <div\n          className=\"bg-white rounded-lg overflow-hidden w-full\"\n          style={{\n            padding: '12px',\n            gap: '12px',\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'flex-start',\n          }}\n        >\n          <div\n            className=\"flex flex-col w-full\"\n            style={{\n              gap: '12px',\n            }}\n          >\n            {[...data]\n              .splice(0, showAll ? data.length : 5)\n              .map((scenario, index) => (\n                <div\n                  key={scenario.code || index}\n                  className=\"flex flex-row items-start w-full\"\n                  style={{\n                    gap: '12px',\n                    minHeight: '82px',\n                  }}\n                >\n                  <div\n                    className=\"flex-shrink-0 w-[80px] h-[80px] rounded-[5px] bg-cover bg-center bg-gray-200\"\n                    style={{\n                      backgroundImage: scenario.image?.file?.url\n                        ? `url(${scenario.image.file.url})`\n                        : 'none',\n                    }}\n                  />\n                  <div\n                    className=\"flex flex-col items-center justify-center font-vietnam-pro flex-1 min-w-0\"\n                    style={{\n                      minHeight: '82px',\n                    }}\n                  >\n                    <div className=\"flex flex-row items-center w-full h-5 gap-1\">\n                      <h3\n                        className=\"text-card-foreground truncate mb-[4px] font-medium text-[14px] leading-[14px] underline cursor-pointer hover:opacity-80 flex-1 min-w-0\"\n                        onClick={() => handleOnClick(scenario.code)}\n                      >\n                        {scenario.name}\n                      </h3>\n                    </div>\n                    {playBtn && (\n                      <div className=\"flex flex-row gap-[4px] min-h-[28px] justify-end w-full\">\n                        <button\n                          className=\"flex h-[28px] px-[12px] py-[4px] gap-[8px] font-medium leading-[20px] flex-row justify-center items-center hover:opacity-80 transition-opacity bg-secondary border rounded-md text-sm text-card-foreground\"\n                          onClick={() => handleOnClick(scenario.code)}\n                        >\n                          Play\n                        </button>\n                      </div>\n                    )}\n                    {scenario.description && (\n                      <p\n                        className=\"font-normal text-[14px] leading-[20px] text-muted-foreground overflow-hidden w-full text-ellipsis\"\n                        style={{\n                          minHeight: '20px',\n                          display: '-webkit-box',\n                          WebkitLineClamp: 3,\n                          WebkitBoxOrient: 'vertical',\n                          wordBreak: 'break-word',\n                        }}\n                      >\n                        {scenario.description}\n                      </p>\n                    )}\n                  </div>\n                </div>\n              ))}\n\n            {!showAll && data?.length > 5 && (\n              <button\n                className=\"flex h-[40px] px-[16px] py-[8px] gap-[10px] font-medium leading-[24px] flex-row justify-center items-center hover:opacity-80 transition-opacity bg-secondary border rounded-md text-sm text-card-foreground w-full\"\n                onClick={() => setShowAll(true)}\n              >\n                View all scenarios\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }, [data, showAll, handleOnClick]);\n\n  return (\n    <>\n      {loading && loadingComponent}\n      {scenarioListComponent}\n    </>\n  );\n};\n\nexport default React.memo(ScenariosList);\n"]}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/Simplified/AudioPlayerSimplified.d.ts

@@ -0,0 +1,9 @@
+import { ChatMessageType } from '../../../types/flowise.type';
+declare const AudioPlayerSimplified: ({ message, chatId, autoplay, onClose, }: {
+    message: ChatMessageType;
+    chatId?: string;
+    autoplay?: boolean;
+    onClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AudioPlayerSimplified;
+//# sourceMappingURL=AudioPlayerSimplified.d.ts.map

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/Simplified/AudioPlayerSimplified.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayerSimplified.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/Simplified/AudioPlayerSimplified.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAI9D,QAAA,MAAM,qBAAqB,4CAKxB;IACD,OAAO,EAAE,eAAe,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,4CA4TA,CAAC;AAEF,eAAe,qBAAqB,CAAC"}