npm - @clikvn/agent-widget-embedded - Versions diffs - 1.1.5-dev-14 → 1.1.5-dev-16 - Mend

@clikvn/agent-widget-embedded 1.1.5-dev-14 → 1.1.5-dev-16

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

Files changed (53) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProductList.js","sourceRoot":"","sources":["../../../src/components/Chat/ProductList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAGxE,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;IAC/C,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,KAAK;CAChB,CAAC,CAAC;AAeH,MAAM,WAAW,GAAkB,CAAC,EAClC,OAAO,EACP,eAAe,EACf,QAAQ,EACR,YAAY,GAAG,IAAI,EACnB,MAAM,GACP,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA+B,IAAI,CAAC,CAAC;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACxD,MAAM,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC;IACpC,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,eAAe;YAAE,OAAO,EAAE,CAAC;QAChC,OAAO,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IACtB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QACD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,YAAY,MAAM,EAAE,CAAC;YAC7D,aAAa,CAAC,OAAiB,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,OAAgC,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,KAAK,IAAI,EAAE;YACnC,IAAI,CAAC,YAAY,IAAI,CAAC,YAAY,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACvD,OAAO;YACT,CAAC;YAED,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,IAAI,CAAC,CAAC;YAEf,IAAI,CAAC;gBACH,MAAM,YAAY,GAAG,MAAM,WAAW,CACpC,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CACrC,CAAC;gBACF,OAAO,CAAC,YAAY,CAAC,CAAC;YACxB,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,QAAQ,CACN,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAChE,CAAC;gBACF,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,GAAG,CAAC,CAAC;YACjD,CAAC;oBAAS,CAAC;gBACT,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEF,iBAAiB,EAAE,CAAC;IACtB,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC;QAC7C,IAAI,CAAC,UAAU,IAAI,CAAC,YAAY,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QAED,MAAM,CAAC,UAAU,CAAC;YAChB,QAAQ,EAAE,IAAI,QAAQ,EAAE;YACxB,GAAG,EAAE,IAAI;YACT,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,KAAK;YACb,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,UAAU,EAAE,IAAI;YAChB,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC;QACH,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAElD,YAAY,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAClD,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC;gBAChC,IAAY,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;gBACvC,IAAI,CAAC,IAAI,GAAG,qBAAqB,CAAC;gBAClC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;gBACjB,IAAI,CAAC,OAAO,GAAG,GAAG,EAAE;oBAClB,SAAS,CAAC,eAAe,CAAC,CAAE,IAAY,CAAC,WAAW,CAAC,CAAC,CAAC;gBACzD,CAAC,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;YACzB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;QACpC,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC;YACjC,SAAS,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC;QAClC,CAAC;aAAM,CAAC;YACN,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,MAAc,EAAE,WAAmB,EAAE,EAAE;QAChE,IAAI,CAAC,SAAS,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QACD,uYAAuY;QACvY,IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,QAAQ,MAAM,EAAE,CAAC;YACf,KAAK,cAAc;gBACjB,OAAO,GAAG;oBACR,IAAI,EAAE,mBAAmB;oBACzB,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC;wBACrB;4BACE,IAAI,EAAE,MAAM;4BACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;gCACnB,MAAM,EAAE,mBAAmB;gCAC3B,YAAY,EAAE,WAAW;6BAC1B,CAAC;yBACH;qBACF,CAAC;iBACH,CAAC;gBACF,MAAM;YACR,KAAK,iBAAiB;gBACpB,OAAO,GAAG;oBACR,IAAI,EAAE,4BAA4B;oBAClC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC;wBACrB;4BACE,IAAI,EAAE,MAAM;4BACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;gCACnB,MAAM,EAAE,4BAA4B;gCACpC,YAAY,EAAE,WAAW;6BAC1B,CAAC;yBACH;qBACF,CAAC;iBACH,CAAC;gBACF,MAAM;YACR,KAAK,aAAa;gBAChB,OAAO,GAAG;oBACR,IAAI,EAAE,wBAAwB;oBAC9B,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC;wBACrB;4BACE,IAAI,EAAE,MAAM;4BACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;gCACnB,MAAM,EAAE,wBAAwB;gCAChC,YAAY,EAAE,WAAW;6BAC1B,CAAC;yBACH;qBACF,CAAC;iBACH,CAAC;gBACF,MAAM;YACR,KAAK,YAAY;gBACf,OAAO,GAAG;oBACR,IAAI,EAAE,iBAAiB;oBACvB,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC;wBACrB;4BACE,IAAI,EAAE,MAAM;4BACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;gCACnB,MAAM,EAAE,iBAAiB;gCACzB,YAAY,EAAE,WAAW;6BAC1B,CAAC;yBACH;qBACF,CAAC;iBACH,CAAC;gBACF,MAAM;YACR;gBACE,MAAM;QACV,CAAC;QACD,IAAI,OAAO,EAAE,CAAC;YACZ,SAAS,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,CACJ,cAAK,SAAS,EAAC,MAAM,YACnB,cAAK,SAAS,EAAC,gDAAgD,YAC7D,eAAK,SAAS,EAAC,eAAe,aAC5B,cAAK,SAAS,EAAC,oCAAoC,GAAO,EAC1D,cAAK,SAAS,EAAC,+BAA+B,GAAO,EACrD,cAAK,SAAS,EAAC,+BAA+B,GAAO,IACjD,GACF,GACF,CACP,EACD,EAAE,CACH,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,CACJ,cAAK,SAAS,EAAC,MAAM,YACnB,cAAK,SAAS,EAAC,6DAA6D,YACzE,KAAK,GACF,GACF,CACP,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,CACJ,eACE,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE;YACL,YAAY,EAAE,KAAK;YACnB,eAAe,EAAE,oBAAoB;YACrC,KAAK,EAAE,iBAAiB;YACxB,QAAQ,EAAE,MAAM;SACjB,GACD,CACH,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE;QACxC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC;YAAE,OAAO,IAAI,CAAC;QAC1E,OAAO,CACL,cAAK,SAAS,EAAC,MAAM,YAEnB,cACE,SAAS,EAAC,4CAA4C,EACtD,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,GAAG,EAAE,MAAM;oBACX,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,cAAc,EAAE,QAAQ;oBACxB,UAAU,EAAE,YAAY;iBACzB,YAGD,eACE,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE;wBACL,GAAG,EAAE,MAAM;qBACZ,aAEA,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM;4BACvB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,eAEE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE;oCACL,GAAG,EAAE,MAAM;oCACX,SAAS,EAAE,MAAM;iCAClB,aAGD,cACE,SAAS,EAAC,mEAAmE,EAC7E,KAAK,EAAE;4CACL,eAAe,EAAE,OAAO,OAAO,CAAC,IAAI,EAAE,GAAG,GAAG;yCAC7C,GACD,EAGF,eACE,SAAS,EAAC,+CAA+C,EACzD,KAAK,EAAE;4CACL,SAAS,EAAE,MAAM;yCAClB,aAGD,cAAK,SAAS,EAAC,6CAA6C,YAC1D,aACE,SAAS,EAAC,yIAAyI,EACnJ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wDACb,CAAC,CAAC,cAAc,EAAE,CAAC;wDACnB,iBAAiB,CAAC,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;oDAClD,CAAC,YAEA,OAAO,CAAC,IAAI,GACV,GACD,EAGN,eAAK,SAAS,EAAC,6DAA6D,aAC1E,eAAK,SAAS,EAAC,SAAS,aAErB,OAAO,CAAC,qBAAqB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3C,eAAM,SAAS,EAAC,wEAAwE,YACrF,GAAG,kBAAkB,CACpB,kBAAkB,CAChB,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,EAAE;oEAChD,EAAE,CACL,EACD,OAAO,CAAC,YAAY,IAAI,EAAE,EAC1B,OAAO,CAAC,IAAI,IAAI,EAAE,CACnB,GAAG,GACC,CACR,EACD,eACE,SAAS,EAAE,GAAG,OAAO,CAAC,qBAAqB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,2EAA2E,CAAC,CAAC,CAAC,+DAA+D,EAAE,YAEvM,GAAG,kBAAkB,CACpB,kBAAkB,CAAC,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,EACnD,OAAO,CAAC,YAAY,IAAI,EAAE,EAC1B,OAAO,CAAC,IAAI,IAAI,EAAE,CACnB,GAAG,GACC,IACH,EAEN,cACE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAExC,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,SAAS,GAAG,GACtC,IACF,EAGN,YACE,SAAS,EAAC,mGAAmG,EAC7G,KAAK,EAAE;oDACL,SAAS,EAAE,MAAM;oDACjB,OAAO,EAAE,aAAa;oDACtB,eAAe,EAAE,CAAC;oDAClB,eAAe,EAAE,UAAU;oDAC3B,SAAS,EAAE,YAAY;iDACxB,YAEA,OAAO,CAAC,WAAW,GAClB,IACA,KAnFD,OAAO,CAAC,IAAI,IAAI,KAAK,CAoFtB,CACP,CAAC,EAGH,CAAC,CAAC,IAAI,EAAE,WAAW,IAAI,CACtB,iBACE,SAAS,EAAC,qNAAqN,EAC/N,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gCACb,CAAC,CAAC,cAAc,EAAE,CAAC;gCACnB,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;4BACnC,CAAC,kCAGM,CACV,IACG,GACF,GACF,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;IAExD,OAAO,CACL,8BACG,OAAO,IAAI,gBAAgB,EAG3B,oBAAoB,IACpB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC","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"]}
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 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(\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 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 React.memo(ProductList);\n"]}

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

@@ -1,17 +1,6 @@
 import { FC } from 'react';
-interface ScenarioType {
-    code: string;
-    name: string;
-    description?: string;
-    image?: {
-        file: {
-            url: string;
-        };
-    };
-}
 interface PropTypes {
-    content?: ScenarioType[];
-    scenarioCodesStr?: string;
+    scenarioCodes?: string[];
     tourCode?: string;
     languageCode?: string;
     apiUrl?: string;

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"ScenariosList.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ScenariosList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AAezD,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;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,SAAS,CAoKvC,CAAC"}

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

@@ -2,36 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState, useMemo } from 'react';
 import { useChatData } from '../../hooks/useChatData';
 import { getScenarios } from '../../services/vt360.service';
-export const ScenariosList = ({ content, scenarioCodesStr, tourCode, languageCode = 'VN', apiUrl, playBtn = false, }) => {
+export 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 [error, setError] = useState(null);
     const { listeners } = useChatData();
-    const scenarioCodes = useMemo(() => {
-        if (!scenarioCodesStr)
-            return [];
-        return scenarioCodesStr.split(',').map((code) => code.trim());
-    }, [scenarioCodesStr]);
-    useEffect(() => {
-        if (!content) {
-            return;
-        }
-        setData(content);
-    }, [content]);
     useEffect(() => {
         const fetchScenariosData = async () => {
             if (!scenarioCodes || !scenarioCodes.length || !tourCode) {
                 return;
             }
             setLoading(true);
-            setError(null);
             try {
                 const scenariosData = await getScenarios(scenarioCodes, tourCode, languageCode, apiUrl ? { api: apiUrl } : undefined);
                 setData(scenariosData);
             }
             catch (err) {
-                setError(err instanceof Error ? err.message : 'Failed to fetch scenarios');
                 console.error('Error fetching scenarios:', err);
             }
             finally {
@@ -39,7 +25,7 @@ export const ScenariosList = ({ content, scenarioCodesStr, tourCode, languageCod
             }
         };
         fetchScenariosData();
-    }, [scenarioCodes, tourCode, languageCode, apiUrl]);
+    }, [scenarioCodes]);
     const handleOnClick = (url) => {
         if (listeners?.['ON_LINK_CLICK']) {
             listeners['ON_LINK_CLICK'](url);
@@ -49,7 +35,6 @@ export const ScenariosList = ({ content, scenarioCodesStr, tourCode, languageCod
         }
     };
     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 scenarioListComponent = useMemo(() => {
         if (!data || !data.length)
             return null;
@@ -81,6 +66,6 @@ export const ScenariosList = ({ content, scenarioCodesStr, tourCode, languageCod
                                                 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, error && errorComponent, scenarioListComponent] }));
+    return (_jsxs(_Fragment, { children: [loading && loadingComponent, scenarioListComponent] }));
 };
 //# sourceMappingURL=ScenariosList.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ScenariosList.js","sourceRoot":"","sources":["../../../src/components/Chat/ScenariosList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAsB5D,MAAM,CAAC,MAAM,aAAa,GAAkB,CAAC,EAC3C,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,YAAY,GAAG,IAAI,EACnB,MAAM,EACN,OAAO,GAAG,KAAK,GAChB,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC9D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACvD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACxD,MAAM,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC;IAEpC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,CAAC,gBAAgB;YAAE,OAAO,EAAE,CAAC;QACjC,OAAO,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QACD,OAAO,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,KAAK,IAAI,EAAE;YACpC,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACzD,OAAO;YACT,CAAC;YAED,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,IAAI,CAAC,CAAC;YAEf,IAAI,CAAC;gBACH,MAAM,aAAa,GAAG,MAAM,YAAY,CACtC,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CACrC,CAAC;gBACF,OAAO,CAAC,aAAa,CAAC,CAAC;YACzB,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,QAAQ,CACN,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,2BAA2B,CACjE,CAAC;gBACF,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,GAAG,CAAC,CAAC;YAClD,CAAC;oBAAS,CAAC;gBACT,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEF,kBAAkB,EAAE,CAAC;IACvB,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;QACpC,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC;YACjC,SAAS,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC;QAClC,CAAC;aAAM,CAAC;YACN,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,CACJ,cAAK,SAAS,EAAC,MAAM,YACnB,cAAK,SAAS,EAAC,gDAAgD,YAC7D,eAAK,SAAS,EAAC,eAAe,aAC5B,cAAK,SAAS,EAAC,oCAAoC,GAAO,EAC1D,cAAK,SAAS,EAAC,+BAA+B,GAAO,EACrD,cAAK,SAAS,EAAC,+BAA+B,GAAO,IACjD,GACF,GACF,CACP,EACD,EAAE,CACH,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,CACJ,cAAK,SAAS,EAAC,MAAM,YACnB,cAAK,SAAS,EAAC,6DAA6D,YACzE,KAAK,GACF,GACF,CACP,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QAEvC,OAAO,CACL,cAAK,SAAS,EAAC,MAAM,YACnB,cACE,SAAS,EAAC,4CAA4C,EACtD,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,GAAG,EAAE,MAAM;oBACX,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,cAAc,EAAE,QAAQ;oBACxB,UAAU,EAAE,YAAY;iBACzB,YAED,eACE,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE;wBACL,GAAG,EAAE,MAAM;qBACZ,aAEA,CAAC,GAAG,IAAI,CAAC;6BACP,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;6BACpC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,eAEE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE;gCACL,GAAG,EAAE,MAAM;gCACX,SAAS,EAAE,MAAM;6BAClB,aAED,cACE,SAAS,EAAC,8EAA8E,EACxF,KAAK,EAAE;wCACL,eAAe,EAAE,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG;4CACxC,CAAC,CAAC,OAAO,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,GAAG;4CACnC,CAAC,CAAC,MAAM;qCACX,GACD,EACF,eACE,SAAS,EAAC,2EAA2E,EACrF,KAAK,EAAE;wCACL,SAAS,EAAE,MAAM;qCAClB,aAED,cAAK,SAAS,EAAC,6CAA6C,YAC1D,aACE,SAAS,EAAC,wIAAwI,EAClJ,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,YAE1C,QAAQ,CAAC,IAAI,GACX,GACD,EACL,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,yDAAyD,YACtE,iBACE,SAAS,EAAC,4MAA4M,EACtN,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,qBAGpC,GACL,CACP,EACA,QAAQ,CAAC,WAAW,IAAI,CACvB,YACE,SAAS,EAAC,mGAAmG,EAC7G,KAAK,EAAE;gDACL,SAAS,EAAE,MAAM;gDACjB,OAAO,EAAE,aAAa;gDACtB,eAAe,EAAE,CAAC;gDAClB,eAAe,EAAE,UAAU;gDAC3B,SAAS,EAAE,YAAY;6CACxB,YAEA,QAAQ,CAAC,WAAW,GACnB,CACL,IACG,KArDD,QAAQ,CAAC,IAAI,IAAI,KAAK,CAsDvB,CACP,CAAC,EAEH,CAAC,OAAO,IAAI,IAAI,EAAE,MAAM,GAAG,CAAC,IAAI,CAC/B,iBACE,SAAS,EAAC,oNAAoN,EAC9N,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,mCAGxB,CACV,IACG,GACF,GACF,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,8BACG,OAAO,IAAI,gBAAgB,EAC3B,KAAK,IAAI,cAAc,EACvB,qBAAqB,IACrB,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { 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 content?: ScenarioType[];\n scenarioCodesStr?: string;\n tourCode?: string;\n languageCode?: string;\n apiUrl?: string;\n playBtn?: boolean;\n}\n\nexport const ScenariosList: FC<PropTypes> = ({\n content,\n scenarioCodesStr,\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 [error, setError] = useState<string \| null>(null);\n const { listeners } = useChatData();\n\n const scenarioCodes = useMemo(() => {\n if (!scenarioCodesStr) return [];\n return scenarioCodesStr.split(',').map((code) => code.trim());\n }, [scenarioCodesStr]);\n\n useEffect(() => {\n if (!content) {\n return;\n }\n setData(content);\n }, [content]);\n\n useEffect(() => {\n const fetchScenariosData = async () => {\n if (!scenarioCodes \|\| !scenarioCodes.length \|\| !tourCode) {\n return;\n }\n\n setLoading(true);\n setError(null);\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 setError(\n err instanceof Error ? err.message : 'Failed to fetch scenarios'\n );\n console.error('Error fetching scenarios:', err);\n } finally {\n setLoading(false);\n }\n };\n\n fetchScenariosData();\n }, [scenarioCodes, 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 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 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 {error && errorComponent}\n {scenarioListComponent}\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"ScenariosList.js","sourceRoot":"","sources":["../../../src/components/Chat/ScenariosList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { 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\nexport const 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 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"]}

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

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { BotType } from '../../../types/bot.type';
+import { ChatMessageType, IFileUpload } from '../../../types/flowise.type';
+type PropsType = {
+    input: string;
+    setInput: (value: string) => void;
+    loadingChat: boolean;
+    message: ChatMessageType | null;
+    chatId: string;
+    handleSubmit: (event?: {
+        preventDefault?: () => void;
+    }, files?: IFileUpload[]) => void;
+    className?: string;
+    bot: BotType | null;
+    apiHost: string;
+    setEnableTTS: (value: boolean) => void;
+    enableTTS: boolean;
+    onAudioEnded: () => void;
+};
+export declare const MultimodalInputSimplified: FC<PropsType>;
+export {};
+//# sourceMappingURL=MultimodalInputSimplifiedOld.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"MultimodalInputSimplifiedOld.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/Simplified/MultimodalInputSimplifiedOld.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,EAAE,EAKH,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAe3E,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,eAAe,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CACZ,KAAK,CAAC,EAAE;QAAE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,EACvC,KAAK,CAAC,EAAE,WAAW,EAAE,KAClB,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAcF,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,SAAS,CA0iBnD,CAAC"}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/components/Chat/Simplified/MultimodalInputSimplifiedOld.js ADDED Viewed

@@ -0,0 +1,301 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AnimatePresence, motion } from 'framer-motion';
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { useWindowSize } from 'usehooks-ts';
+import { useAudioRecording } from '../../../hooks/useAudioRecording';
+import { useChatData } from '../../../hooks/useChatData';
+import { useConfiguration } from '../../../hooks/useConfiguration';
+import { getAudioTranscript } from '../../../services/chat.service';
+import { cn, generateUUID, sleep } from '../../../utils/commonUtils';
+import { getBestMimeType, getFileExtension } from '../../../utils/fileUtils';
+import { AnimatedRecordingIcon, ArrowUpIcon, CheckCirclFillIcon, ClikAIIcon, ClikChatIcon, ClikCloseIcon, ClikMicrophoneIcon, } from '../Icons';
+import { Button } from '../ui/Button';
+import AudioPlayerSimplified from './AudioPlayerSimplified';
+export const MultimodalInputSimplified = (props) => {
+    const { input, setInput, loadingChat, message, chatId, handleSubmit, className, bot, apiHost, setEnableTTS, onAudioEnded, } = props;
+    const { onLoaded, theme = {} } = useConfiguration();
+    const { modeButtonChat = false, gapInput = 16 } = theme;
+    const { listeners } = useChatData();
+    const { isRecording, onRecordingCancelled, onRecordingStopped, onRecordingStarted, isLoadingRecording, audioData, } = useAudioRecording();
+    const { width } = useWindowSize();
+    const language = theme?.language?.options
+        ?.find((option) => option.code === theme?.language?.code)
+        ?.name?.toUpperCase() || 'EN';
+    const [transcribing, setTranscribing] = useState(false);
+    const [showAudioPlayer, setShowAudioPlayer] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    const [expanded, setExpanded] = useState(!modeButtonChat);
+    const [animationCompleted, setAnimationCompleted] = useState(false);
+    const textareaRef = useRef(null);
+    const setInputRef = useRef(null);
+    const welcomeMessage = theme.welcomeMessage || "Hi, I'm your showroom assistant";
+    const adjustHeight = () => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = '24px';
+            textareaRef.current.style.height =
+                `${textareaRef.current?.scrollHeight}px`;
+        }
+    };
+    const readonly = isRecording || transcribing;
+    const handleSetInput = useCallback((value) => {
+        setInput(value);
+    }, [setInput]);
+    const handleInput = (event) => {
+        handleSetInput(event.target.value);
+        if (textareaRef.current) {
+            textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
+        }
+    };
+    const submitForm = useCallback(async () => {
+        setSubmitting(true);
+        if (listeners?.['ON_SUBMIT_MESSAGE']) {
+            listeners['ON_SUBMIT_MESSAGE']();
+        }
+        handleSubmit(undefined);
+        await sleep(500);
+        setShowAudioPlayer(true);
+    }, [handleSubmit, listeners]);
+    const toAudioBase64 = (blob) => {
+        return new Promise((resolve) => {
+            let mimeType = getBestMimeType();
+            const pos = blob.type.indexOf(';');
+            if (pos === -1) {
+                mimeType = blob.type;
+            }
+            else {
+                mimeType = blob.type.substring(0, pos);
+            }
+            // read blob and add to previews
+            const reader = new FileReader();
+            reader.readAsDataURL(blob);
+            reader.onloadend = () => {
+                const base64data = reader.result;
+                const upload = {
+                    tempId: generateUUID(),
+                    data: base64data,
+                    type: 'audio',
+                    name: `audio_${Date.now()}.${getFileExtension(mimeType)}`,
+                    mime: mimeType,
+                };
+                resolve(upload);
+            };
+        });
+    };
+    const speechToText = async (blob) => {
+        try {
+            setTranscribing(true);
+            const fileUpload = await toAudioBase64(blob);
+            const base64Data = fileUpload.data.replace(/^data:.+;base64,/, '');
+            const byteCharacters = atob(base64Data); // Decode Base64 string
+            const byteNumbers = new Array(byteCharacters.length);
+            for (let i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            const byteArray = new Uint8Array(byteNumbers);
+            const file = new File([byteArray], fileUpload.name, {
+                lastModified: new Date().getTime(),
+                type: fileUpload.type,
+            });
+            const text = await getAudioTranscript({ file, apiHost, language });
+            if (text) {
+                handleSetInput(text);
+            }
+        }
+        catch (error) {
+            console.error('Error getting audio transcript!', error);
+        }
+        finally {
+            setTranscribing(false);
+        }
+    };
+    const handleFinishRecording = () => {
+        if (isRecording) {
+            onRecordingStopped(speechToText);
+        }
+        if (listeners?.['ON_FINISHED_RECORDING']) {
+            listeners['ON_FINISHED_RECORDING']();
+        }
+    };
+    const handleStartRecording = useCallback(() => {
+        onRecordingStarted();
+        handleSetInput('');
+        if (listeners?.['ON_START_RECORDING']) {
+            listeners['ON_START_RECORDING']();
+        }
+    }, [onRecordingStarted, handleSetInput, listeners]);
+    const handleCancelRecording = () => {
+        onRecordingCancelled();
+        handleSetInput('');
+        if (listeners?.['ON_CANCEL_RECORDING']) {
+            listeners['ON_CANCEL_RECORDING']();
+        }
+    };
+    const handleSend = useCallback(async () => {
+        if (!isRecording) {
+            submitForm();
+        }
+    }, [submitForm, isRecording]);
+    const handleOnClickOpenChatmode = () => {
+        handleOnClick('WelcomeMsg');
+    };
+    const handleOnClick = (type) => {
+        if (listeners?.['ON_CLICK']) {
+            listeners['ON_CLICK'](type);
+        }
+    };
+    const handleToggleExpand = () => {
+        handleOnClick('ClickButtonAI');
+        setExpanded(!expanded);
+        setAnimationCompleted(false);
+        if (!expanded) {
+            // Focus vào textarea khi expand
+            setTimeout(() => {
+                if (textareaRef.current) {
+                    textareaRef.current.focus();
+                }
+            }, 300);
+        }
+    };
+    useEffect(() => {
+        adjustHeight();
+    }, [input, readonly]);
+    useEffect(() => {
+        setInputRef.current = setInput;
+    }, [setInput]);
+    useEffect(() => {
+        if (onLoaded) {
+            onLoaded({
+                setInput: (txt) => {
+                    if (setInputRef.current) {
+                        setInputRef.current(txt || '');
+                    }
+                },
+                startRecording: async () => {
+                    handleStartRecording();
+                },
+            });
+        }
+    }, []);
+    useEffect(() => {
+        setEnableTTS(true);
+        return () => {
+            setEnableTTS(false);
+        };
+    }, [setEnableTTS]);
+    useEffect(() => {
+        if (message && submitting) {
+            setSubmitting(false);
+            if (listeners?.['ON_FINISHED_SUBMITTING_MESSAGE']) {
+                listeners['ON_FINISHED_SUBMITTING_MESSAGE']();
+            }
+        }
+    }, [message, submitting, listeners]);
+    const recordingPlaceholder = isRecording && !transcribing
+        ? theme?.input?.recordingPlaceholder || 'Recording...'
+        : '';
+    const transcribingPlaceholder = transcribing
+        ? theme?.input?.transcribingPlaceholder || 'Transcribing...'
+        : '';
+    const processing = isRecording || transcribing;
+    const canShowAudioPlayer = !theme?.noAutoplayMessage &&
+        showAudioPlayer &&
+        message?.new &&
+        message?.tts;
+    // Animation variants
+    const containerVariants = {
+        collapsed: {
+            width: '0px',
+            height: '0px',
+            opacity: 0,
+            borderRadius: '28px',
+        },
+        expanded: {
+            width: width ? `${width - gapInput}px` : '400px',
+            height: 'auto',
+            opacity: 1,
+            borderRadius: '16px',
+        },
+    };
+    const contentVariants = {
+        collapsed: {
+            opacity: 0,
+            scale: 0.8,
+        },
+        expanded: {
+            opacity: 1,
+            scale: 1,
+        },
+    };
+    const showButtonAI = !isRecording &&
+        modeButtonChat &&
+        !input?.length &&
+        !processing &&
+        !submitting &&
+        !transcribing;
+    const showToggleChatIcon = showButtonAI && expanded;
+    let centerWidthOffset = 72; // left: 24px, right: 32px, gap: 8px x 2, padding: 12px
+    if (transcribing || submitting) {
+        centerWidthOffset = 80; // left: 24px, right: 40px, gap: 8px x 2, padding: 12px
+    }
+    if (showToggleChatIcon) {
+        centerWidthOffset = 108; // left: 24px, right: 68px, gap: 8px x 2, padding: 12px
+    }
+    return (_jsxs("div", { className: "flex justify-end", children: [showButtonAI && (_jsx("div", { className: cn('absolute z-20 transition-all duration-300 top-1 right-1'), children: _jsx(Button, { className: cn('rounded-full bg-[#fff] hover:bg-[#fff] text-white border-none shadow-lg w-[40px] h-[40px] p-0 flex items-center justify-center', expanded && 'bg-[#595959] hover:bg-[#595959] text-white'), onClick: handleToggleExpand, children: expanded ? (_jsx(ClikChatIcon, { size: 24, style: { width: '24px', height: '24px' } })) : (_jsx(ClikAIIcon, { size: 24, style: { width: '24px', height: '24px' } })) }) })), _jsxs(motion.div, { variants: containerVariants, initial: "collapsed", animate: expanded ? 'expanded' : 'collapsed', transition: { duration: 0.3, ease: 'easeInOut' }, className: cn('relative flex gap-4 bg-[#ffffff] py-[8px] px-[12px] scrollbar-hidden border border-[#E5E5E5] shadow-[0px_2px_6px_0px_rgba(0,0,0,0.08)] backdrop-blur-[50px]', className, {
+                    'flex-col min-h-[48px]': !canShowAudioPlayer && expanded,
+                    'flex-row min-h-[48px]': canShowAudioPlayer && expanded,
+                    'items-center justify-center': !expanded,
+                }), children: [_jsx(AnimatePresence, { children: expanded && (_jsx(motion.div, { variants: contentVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", transition: { duration: 0.2, delay: 0 }, onAnimationComplete: () => setAnimationCompleted(true), className: `w-full ${showButtonAI ? 'pr-9' : ''}`, children: !canShowAudioPlayer && (_jsxs(_Fragment, { children: [!processing && !!input?.length && (_jsx("textarea", { readOnly: readonly, ref: textareaRef, value: input, onChange: handleInput, placeholder: "Nh\u1EADp tin nh\u1EAFn c\u1EE7a b\u1EA1n...", className: cn(`resize-none text-base bg-muted bg-[#ffffff] scrollbar-hidden ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 w-full mb-3`), style: {
+                                            fontSize: '16px',
+                                        }, onKeyDown: (event) => {
+                                            if (isRecording) {
+                                                return;
+                                            }
+                                            if (event.key === 'Enter' && !event.shiftKey) {
+                                                event.preventDefault();
+                                                if (loadingChat) {
+                                                    console.error('Please wait for the model to finish its response!');
+                                                }
+                                                else {
+                                                    handleSend();
+                                                }
+                                            }
+                                        } })), processing && (_jsx("div", { className: cn(`placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 resize-none text-base scrollbar-hidden mb-3`, className), style: {
+                                            fontSize: '16px',
+                                        }, children: _jsxs("div", { className: "animate-pulse", children: [recordingPlaceholder, transcribingPlaceholder] }) })), _jsxs("div", { className: "flex flex-row gap-[8px] items-center justify-between", children: [_jsxs("div", { className: "w-[24px] h-[24px]", children: [!isRecording && (_jsx("button", { className: "w-[24px] h-[24px] opacity-100", onClick: (e) => {
+                                                            e.preventDefault();
+                                                            e.stopPropagation();
+                                                            handleOnClick('ChangeLanguage');
+                                                        }, "aria-label": "Change language", children: _jsx("span", { className: "text-[#595959] text-center text-[12px] border-[1px] font-bold rounded-[4px] border-[#595959] px-[2px]", children: language }) })), isRecording && (_jsx(Button, { disabled: isLoadingRecording, className: "rounded-full dark:border-zinc-700 h-[24px] w-[24px] px-0 py-0", variant: "outline", onClick: (event) => {
+                                                            event.preventDefault();
+                                                            handleOnClick('CancelRecording');
+                                                            handleCancelRecording();
+                                                        }, children: _jsx(ClikCloseIcon, { className: "!w-full !h-full" }) }))] }), _jsxs("div", { className: "min-h-[24px] flex items-center justify-center text-ellipsis overflow-hidden whitespace-nowrap", style: { width: `calc(100% - ${centerWidthOffset}px)` }, children: [!isRecording &&
+                                                        !input?.length &&
+                                                        !loadingChat &&
+                                                        !transcribing &&
+                                                        animationCompleted && (_jsx("div", { className: "text-center text-[14px] text-muted-foreground cursor-pointer w-full  text-ellipsis overflow-hidden whitespace-nowrap", onClick: handleOnClickOpenChatmode, children: welcomeMessage })), isRecording && (_jsx(AnimatedRecordingIcon, { frequencies: audioData?.frequencies, isActive: true }))] }), !input?.length && (_jsxs("div", { className: "relative", style: transcribing || submitting
+                                                    ? { width: '40px', height: '40px', padding: '4px' }
+                                                    : undefined, children: [(transcribing || submitting) && (_jsx("div", { className: "absolute rounded-full left-0 top-0 w-[40px] h-[40px] animate-spin z-[1]", style: {
+                                                            background: 'conic-gradient(from 180deg at 50% 50%, #1E6EB4 0deg, rgba(30, 110, 180, 0) 360deg)',
+                                                        } })), (!isRecording || transcribing) && (_jsxs(Button, { className: "relative rounded-full z-[2] w-[32px] h-[32px] m-0 text-[#18181B] disabled:opacity-100", onClick: (event) => {
+                                                            event.preventDefault();
+                                                            handleOnClick('StartRecording');
+                                                            handleStartRecording();
+                                                        }, variant: "outline", size: "icon", disabled: loadingChat || isRecording || submitting, children: [!submitting && _jsx(ClikMicrophoneIcon, { size: 20 }), submitting && _jsx(ArrowUpIcon, { size: 20 })] }))] })), !input?.length && isRecording && !isLoadingRecording && (_jsx(Button, { className: "rounded-full dark:border-zinc-700 p-0 w-[32px] h-[32px] border-none flex-shrink-0", variant: "outline", onClick: (event) => {
+                                                    event.preventDefault();
+                                                    handleOnClick('FinishRecording');
+                                                    handleFinishRecording();
+                                                }, children: _jsx(CheckCirclFillIcon, { className: "!w-full !h-full" }) })), !!input?.length && (_jsxs("div", { className: "relative flex gap-[4px]", children: [_jsx(Button, { className: "rounded-full z-[2] p-1.5 w-[32px] h-[32px] m-0 px-2 py-1 text-[#18181B]", onClick: (event) => {
+                                                            event.preventDefault();
+                                                            handleOnClick('StartRecording');
+                                                            handleStartRecording();
+                                                        }, variant: "outline", disabled: loadingChat, children: _jsx(ClikMicrophoneIcon, { size: 16 }) }), _jsx(Button, { className: "rounded-full z-[2] p-1.5 w-[32px] h-[32px] m-0 bg-zinc-900 hover:bg-zinc-900 px-2 py-1 text-[#FFF]", onClick: (event) => {
+                                                            event.preventDefault();
+                                                            handleOnClick('Submit');
+                                                            handleSend();
+                                                        }, disabled: isRecording || !input?.length || loadingChat, children: _jsx(ArrowUpIcon, { size: 16 }) })] }))] })] })) })) }), canShowAudioPlayer && expanded && (_jsx(motion.div, { variants: contentVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", transition: { duration: 0.2, delay: 0 }, className: "w-full", children: _jsx(AudioPlayerSimplified, { message: message, chatId: chatId, autoplay: true, onClose: () => {
+                                setShowAudioPlayer(false);
+                                onAudioEnded();
+                            } }) }))] })] }));
+};
+//# sourceMappingURL=MultimodalInputSimplifiedOld.js.map