@clikvn/agent-widget-embedded 1.1.5-dev-07 → 1.1.5-dev-08

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

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Marked, Renderer } from '@ts-stack/markdown';
+import React, { useEffect, useRef, 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';
+const ProductDetail = ({ content, productCode, tourCode, languageCode = 'VN', apiUrl, }) => {
+    const botMessageElRef = useRef(null);
+    const [stringData, setStringData] = useState('');
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const { listeners } = useChatData();
+    useEffect(() => {
+        if (!content) {
+            return;
+        }
+        if (typeof content === 'string' || content instanceof String) {
+            setStringData(content);
+        }
+        else {
+            if (content?.code) {
+                setData(content);
+            }
+        }
+    }, [content]);
+    useEffect(() => {
+        const fetchProductData = async () => {
+            if (!productCode || !tourCode) {
+                return;
+            }
+            setLoading(true);
+            setError(null);
+            try {
+                const productData = await getProductDetails(productCode, tourCode, languageCode, apiUrl ? { api: apiUrl } : undefined);
+                setData(productData);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'Failed to fetch product details');
+                console.error('Error fetching product details:', err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchProductData();
+    }, [productCode, tourCode, languageCode, apiUrl]);
+    useEffect(() => {
+        const botMessageEl = botMessageElRef.current;
+        if (!stringData || !botMessageEl) {
+            return;
+        }
+        Marked.setOptions({
+            renderer: new Renderer(),
+            gfm: true,
+            tables: true,
+            breaks: false,
+            pedantic: false,
+            sanitize: false,
+            smartLists: true,
+            smartypants: false,
+        });
+        botMessageEl.innerHTML = Marked.parse(stringData);
+        botMessageEl.querySelectorAll('a').forEach((link) => {
+            if (listeners?.['ON_LINK_CLICK']) {
+                link['data-json'] = link.href;
+                link.href = 'javascript:void(0);';
+                link.target = '';
+                link.onclick = () => {
+                    listeners['ON_LINK_CLICK'](link['data-json']);
+                };
+            }
+            else {
+                link.target = '_blank';
+            }
+        });
+    }, [stringData]);
+    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("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-48 bg-gray-200 rounded mb-4" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-1/2" })] }) }) })), []);
+    const errorComponent = useMemo(() => (_jsx("div", { className: "py-4", children: _jsx("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4 text-red-700", children: error }) })), [error]);
+    const stringDataComponent = useMemo(() => (_jsx("span", { className: "product-detail bg-white text-gray-700 text-base rounded-md", ref: botMessageElRef })), [stringData]);
+    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})`,
+                            }, 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, error && errorComponent, !!stringData && stringDataComponent, !!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';\n\ninterface PropTypes {\n  content?: ProductType | string;\n  productCode?: string;\n  tourCode?: string;\n  languageCode?: string;\n  apiUrl?: string;\n}\n\nconst ProductDetail: FC<PropTypes> = ({\n  content,\n  productCode,\n  tourCode,\n  languageCode = 'VN',\n  apiUrl,\n}) => {\n  const botMessageElRef = useRef<HTMLSpanElement | null>(null);\n  const [stringData, setStringData] = useState<string>('');\n  const [data, setData] = useState<ProductType | null>(null);\n  const [loading, setLoading] = useState<boolean>(false);\n  const [error, setError] = useState<string | null>(null);\n  const { listeners } = useChatData();\n\n  useEffect(() => {\n    if (!content) {\n      return;\n    }\n    if (typeof content === 'string' || content instanceof String) {\n      setStringData(content as string);\n    } else {\n      if (content?.code) {\n        setData(content as ProductType);\n      }\n    }\n  }, [content]);\n\n  useEffect(() => {\n    const fetchProductData = async () => {\n      if (!productCode || !tourCode) {\n        return;\n      }\n\n      setLoading(true);\n      setError(null);\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        setError(\n          err instanceof Error ? err.message : 'Failed to fetch product details'\n        );\n        console.error('Error fetching product details:', err);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchProductData();\n  }, [productCode, tourCode, languageCode, apiUrl]);\n  useEffect(() => {\n    const botMessageEl = botMessageElRef.current;\n    if (!stringData || !botMessageEl) {\n      return;\n    }\n\n    Marked.setOptions({\n      renderer: new Renderer(),\n      gfm: true,\n      tables: true,\n      breaks: false,\n      pedantic: false,\n      sanitize: false,\n      smartLists: true,\n      smartypants: false,\n    });\n    botMessageEl.innerHTML = Marked.parse(stringData);\n\n    botMessageEl.querySelectorAll('a').forEach((link) => {\n      if (listeners?.['ON_LINK_CLICK']) {\n        (link as any)['data-json'] = link.href;\n        link.href = 'javascript:void(0);';\n        link.target = '';\n        link.onclick = () => {\n          listeners['ON_LINK_CLICK']((link as any)['data-json']);\n        };\n      } else {\n        link.target = '_blank';\n      }\n    });\n  }, [stringData]);\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(\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-48 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 errorComponent = useMemo(\n    () => (\n      <div className=\"py-4\">\n        <div className=\"bg-red-50 border border-red-200 rounded-lg p-4 text-red-700\">\n          {error}\n        </div>\n      </div>\n    ),\n    [error]\n  );\n\n  const stringDataComponent = useMemo(\n    () => (\n      <span\n        className=\"product-detail bg-white text-gray-700 text-base rounded-md\"\n        ref={botMessageElRef}\n      />\n    ),\n    [stringData]\n  );\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              }}\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      {error && errorComponent}\n      {!!stringData && stringDataComponent}\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,16 @@
+import React from 'react';
+import { ProductType } from 'types/product.type';
+interface ProductDataResultType {
+    products: ProductType[];
+    scenarioUrl: string;
+}
+interface PropTypes {
+    content?: ProductDataResultType | string;
+    productCodesStr?: string;
+    tourCode?: string;
+    languageCode?: string;
+    apiUrl?: string;
+}
+declare const _default: React.NamedExoticComponent<PropTypes>;
+export default _default;
+//# 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,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAOjD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;;AAiWD,wBAAuC"}

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

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Marked, Renderer } from '@ts-stack/markdown';
+import React, { useEffect, useRef, 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';
+const FORMATTER = new Intl.NumberFormat('vi-VN', {
+    style: 'currency',
+    currency: 'VND',
+});
+const ProductList = ({ content, productCodesStr, tourCode, languageCode = 'VN', apiUrl, }) => {
+    const botMessageElRef = useRef(null);
+    const [stringData, setStringData] = useState('');
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const { listeners } = useChatData();
+    const productCodes = useMemo(() => {
+        if (!productCodesStr)
+            return [];
+        return productCodesStr.split(',').map((code) => code.trim());
+    }, [productCodesStr]);
+    useEffect(() => {
+        if (!content) {
+            return;
+        }
+        if (typeof content === 'string' || content instanceof String) {
+            setStringData(content);
+        }
+        else {
+            setData(content);
+        }
+    }, [content]);
+    useEffect(() => {
+        const fetchProductsData = async () => {
+            if (!productCodes || !productCodes.length || !tourCode) {
+                return;
+            }
+            setLoading(true);
+            setError(null);
+            try {
+                const productsData = await getProducts(productCodes, tourCode, languageCode, apiUrl ? { api: apiUrl } : undefined);
+                setData(productsData);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'Failed to fetch products');
+                console.error('Error fetching products:', err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchProductsData();
+    }, [productCodes, tourCode, languageCode, apiUrl]);
+    useEffect(() => {
+        const botMessageEl = botMessageElRef.current;
+        if (!stringData || !botMessageEl) {
+            return;
+        }
+        Marked.setOptions({
+            renderer: new Renderer(),
+            gfm: true,
+            tables: true,
+            breaks: false,
+            pedantic: false,
+            sanitize: false,
+            smartLists: true,
+            smartypants: false,
+        });
+        botMessageEl.innerHTML = Marked.parse(stringData);
+        botMessageEl.querySelectorAll('a').forEach((link) => {
+            if (listeners?.['ON_LINK_CLICK']) {
+                link['data-json'] = link.href;
+                link.href = 'javascript:void(0);';
+                link.target = '';
+                link.onclick = () => {
+                    listeners['ON_LINK_CLICK'](link['data-json']);
+                };
+            }
+            else {
+                link.target = '_blank';
+            }
+        });
+    }, [stringData]);
+    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("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 errorComponent = useMemo(() => (_jsx("div", { className: "py-4", children: _jsx("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4 text-red-700", children: error }) })), [error]);
+    const stringDataComponent = useMemo(() => (_jsx("span", { className: "product-list", ref: botMessageElRef, style: {
+            borderRadius: '6px',
+            backgroundColor: 'rgb(255, 255, 255)',
+            color: 'rgb(48, 50, 53)',
+            fontSize: '16px',
+        } })), [stringData]);
+    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 React.memo(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, 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';\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  content?: ProductDataResultType | string;\n  productCodesStr?: string;\n  tourCode?: string;\n  languageCode?: string;\n  apiUrl?: string;\n}\n\nconst ProductList: FC<PropTypes> = ({\n  content,\n  productCodesStr,\n  tourCode,\n  languageCode = 'VN',\n  apiUrl,\n}) => {\n  const botMessageElRef = useRef<HTMLSpanElement | null>(null);\n  const [stringData, setStringData] = useState<string>('');\n  const [data, setData] = useState<ProductDataResultType | null>(null);\n  const [loading, setLoading] = useState<boolean>(false);\n  const [error, setError] = useState<string | null>(null);\n  const { listeners } = useChatData();\n  const productCodes = useMemo(() => {\n    if (!productCodesStr) return [];\n    return productCodesStr.split(',').map((code) => code.trim());\n  }, [productCodesStr]);\n  useEffect(() => {\n    if (!content) {\n      return;\n    }\n    if (typeof content === 'string' || content instanceof String) {\n      setStringData(content as string);\n    } else {\n      setData(content as ProductDataResultType);\n    }\n  }, [content]);\n\n  useEffect(() => {\n    const fetchProductsData = async () => {\n      if (!productCodes || !productCodes.length || !tourCode) {\n        return;\n      }\n\n      setLoading(true);\n      setError(null);\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        setError(\n          err instanceof Error ? err.message : 'Failed to fetch products'\n        );\n        console.error('Error fetching products:', err);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchProductsData();\n  }, [productCodes, tourCode, languageCode, apiUrl]);\n  useEffect(() => {\n    const botMessageEl = botMessageElRef.current;\n    if (!stringData || !botMessageEl) {\n      return;\n    }\n\n    Marked.setOptions({\n      renderer: new Renderer(),\n      gfm: true,\n      tables: true,\n      breaks: false,\n      pedantic: false,\n      sanitize: false,\n      smartLists: true,\n      smartypants: false,\n    });\n    botMessageEl.innerHTML = Marked.parse(stringData);\n\n    botMessageEl.querySelectorAll('a').forEach((link) => {\n      if (listeners?.['ON_LINK_CLICK']) {\n        (link as any)['data-json'] = link.href;\n        link.href = 'javascript:void(0);';\n        link.target = '';\n        link.onclick = () => {\n          listeners['ON_LINK_CLICK']((link as any)['data-json']);\n        };\n      } else {\n        link.target = '_blank';\n      }\n    });\n  }, [stringData]);\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(\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 errorComponent = useMemo(\n    () => (\n      <div className=\"py-4\">\n        <div className=\"bg-red-50 border border-red-200 rounded-lg p-4 text-red-700\">\n          {error}\n        </div>\n      </div>\n    ),\n    [error]\n  );\n\n  const stringDataComponent = useMemo(\n    () => (\n      <span\n        className=\"product-list\"\n        ref={botMessageElRef}\n        style={{\n          borderRadius: '6px',\n          backgroundColor: 'rgb(255, 255, 255)',\n          color: 'rgb(48, 50, 53)',\n          fontSize: '16px',\n        }}\n      />\n    ),\n    [stringData]\n  );\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      {/* {error && errorComponent} */}\n      {/* {!!stringData && stringDataComponent} */}\n      {productListComponent}\n    </>\n  );\n};\n\nexport default React.memo(ProductList);\n"]}

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

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+interface ScenarioType {
+    code: string;
+    name: string;
+    description?: string;
+    image?: {
+        file: {
+            url: string;
+        };
+    };
+}
+interface PropTypes {
+    content?: ScenarioType[];
+    scenarioCodesStr?: string;
+    tourCode?: string;
+    languageCode?: string;
+    apiUrl?: string;
+    playBtn?: boolean;
+}
+export declare const ScenariosList: FC<PropTypes>;
+export {};
+//# 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,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AAIzD,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE;YACJ,GAAG,EAAE,MAAM,CAAC;SACb,CAAC;KACH,CAAC;CACH;AAED,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,SAAS,CAkMvC,CAAC"}