@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/ScenariosList.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScenariosList.js","sourceRoot":"","sources":["../../../src/components/Chat/ScenariosList.tsx"],"names":[],"mappings":";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"]}

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

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

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

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

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

@@ -0,0 +1,268 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useAudioMessage } from '../../../hooks/useAudioMesseagePlayer';
+import { useChatData } from '../../../hooks/useChatData';
+import { useConfiguration } from '../../../hooks/useConfiguration';
+import { createMessageAudio } from '../../../services/chat.service';
+import { ClikPauseIcon, ClikXIcon, LoadingIcon, PlayIcon } from '../Icons';
+import { Button } from '../ui/Button';
+const AudioPlayerSimplified = ({ message, chatId, autoplay = false, onClose, }) => {
+    const { theme, apiHost } = useConfiguration();
+    const { disable, setDisabled, playingId, onPlay } = useAudioMessage();
+    const { listeners } = useChatData();
+    const audioRef = useRef(null);
+    const audioContextRef = useRef(null);
+    const sourceRef = useRef(null);
+    const currentPlaying = !!playingId && playingId === message.id;
+    const [src, setSrc] = useState(''); // null is meaning that audio was streamed
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [fetching, setFetching] = useState(false);
+    const [progress, setProgress] = useState('00:00');
+    const [duration, setDuration] = useState('');
+    const language = theme?.language?.options
+        ?.find((option) => option.code === theme?.language?.code)
+        ?.name?.toLowerCase() || 'en';
+    const toggleAudio = () => {
+        if (!audioRef.current || !message.id) {
+            return;
+        }
+        // create audio if not existed
+        if (!src && chatId && message.id && message.content && !isPlaying) {
+            createAudio(chatId);
+            if (onPlay) {
+                onPlay(message.id);
+            }
+            return;
+        }
+        if (isPlaying) {
+            audioRef.current.pause();
+            sourceRef.current?.stop();
+        }
+        else {
+            audioRef.current.play();
+        }
+    };
+    const handleOnPlay = () => {
+        setIsPlaying(true);
+        if (onPlay && message.id)
+            onPlay(message.id);
+        if (listeners?.['ON_PLAY_AUDIO']) {
+            listeners['ON_PLAY_AUDIO']();
+        }
+    };
+    const handleOnPause = () => {
+        setIsPlaying(false);
+        if (onPlay && message.id)
+            onPlay(message.id, true);
+        if (listeners?.['ON_PAUSE_AUDIO']) {
+            listeners['ON_PAUSE_AUDIO']();
+        }
+    };
+    const handleOnEnded = () => {
+        setIsPlaying(false);
+        if (onPlay && message.id) {
+            onPlay(message.id, true);
+        }
+        if (listeners?.['ON_ENDED_AUDIO']) {
+            listeners['ON_ENDED_AUDIO']();
+        }
+        if (theme?.autoCloseAudioPlayer && onClose) {
+            onClose();
+        }
+    };
+    const createAudio = async (id) => {
+        setFetching(true);
+        if (setDisabled)
+            setDisabled(true);
+        try {
+            const stream = src !== null; // null is meaning that audio was streamed
+            const resp = await createMessageAudio({
+                id,
+                apiHost,
+                messageId: message.id,
+                content: message.content,
+                stream,
+                language,
+            });
+            if (audioRef.current) {
+                if (!stream) {
+                    setSrc(resp);
+                    audioRef.current.play();
+                }
+                else {
+                    const response = resp;
+                    const contentType = response.headers.get('content-type') || 'audio/mpeg';
+                    if (window.MediaSource) {
+                        // MediaSource does not support .ogg
+                        if (contentType.includes('ogg')) {
+                            setSrc(null); // null is meaning that audio was streamed
+                            const reader = response.body.getReader();
+                            if (!audioContextRef.current) {
+                                audioContextRef.current = new AudioContext();
+                            }
+                            const audioChunks = [];
+                            // eslint-disable-next-line no-constant-condition
+                            while (true) {
+                                const { done, value } = await reader.read();
+                                if (done) {
+                                    break;
+                                }
+                                audioChunks.push(value);
+                            }
+                            // Create a blob and update the audio source.
+                            const blob = new Blob(audioChunks, { type: contentType });
+                            audioRef.current.src = URL.createObjectURL(blob);
+                            if (audioRef.current.currentTime === 0) {
+                                audioRef.current?.play();
+                            }
+                        }
+                        else {
+                            setSrc(null); // null is meaning that audio was streamed
+                            const mediaSource = new MediaSource();
+                            audioRef.current.src = URL.createObjectURL(mediaSource);
+                            mediaSource.addEventListener('sourceopen', async () => {
+                                const sourceBuffer = mediaSource.addSourceBuffer(contentType);
+                                const reader = response.body.getReader();
+                                async function processStream() {
+                                    // eslint-disable-next-line no-constant-condition
+                                    while (true) {
+                                        const { done, value } = await reader.read();
+                                        if (done) {
+                                            mediaSource.endOfStream();
+                                            break;
+                                        }
+                                        await new Promise((resolve) => {
+                                            if (!sourceBuffer.updating) {
+                                                resolve();
+                                            }
+                                            else {
+                                                sourceBuffer.addEventListener('updateend', () => resolve(), {
+                                                    once: true,
+                                                });
+                                            }
+                                        });
+                                        try {
+                                            sourceBuffer.appendBuffer(value);
+                                        }
+                                        catch (error) {
+                                            console.error(error);
+                                        }
+                                    }
+                                }
+                                processStream().catch(console.error);
+                                audioRef.current?.play();
+                            });
+                        }
+                    }
+                    else {
+                        // for iphone
+                        setSrc(null); // null is meaning that audio was streamed
+                        const reader = response.body.getReader();
+                        if (!audioContextRef.current) {
+                            audioContextRef.current = new AudioContext();
+                        }
+                        const audioChunks = [];
+                        // eslint-disable-next-line no-constant-condition
+                        while (true) {
+                            const { done, value } = await reader.read();
+                            if (done) {
+                                break;
+                            }
+                            audioChunks.push(value);
+                            // Create a blob and update the audio source.
+                            const blob = new Blob(audioChunks, { type: contentType });
+                            audioRef.current.src = URL.createObjectURL(blob);
+                            if (audioRef.current.currentTime === 0) {
+                                audioRef.current?.play();
+                            }
+                        }
+                        // end
+                    }
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+        finally {
+            setFetching(false);
+            if (setDisabled)
+                setDisabled(false);
+        }
+    };
+    const handleOnTimeUpdate = () => {
+        const s = audioRef.current.currentTime;
+        if (!s) {
+            setProgress('00:00');
+            return;
+        }
+        // >= 1 hour
+        if (s >= 3600) {
+            setProgress(new Date(s * 1000).toISOString().substring(11, 16));
+            return;
+        }
+        setProgress(new Date(s * 1000).toISOString().substring(14, 19));
+    };
+    const handleOnLoadedMetadata = () => {
+        const s = audioRef.current.duration;
+        if (!s) {
+            setDuration('');
+            return;
+        }
+        // >= 60 hour
+        if (s >= 216000) {
+            setDuration('59:99+');
+            return;
+        }
+        // >= 1 hour
+        if (s >= 3600) {
+            setDuration(new Date(s * 1000).toISOString().substring(11, 16));
+            return;
+        }
+        setDuration(new Date(s * 1000).toISOString().substring(14, 19));
+    };
+    // handle streaming response chat
+    useEffect(() => {
+        if (autoplay) {
+            if (onPlay && message.id)
+                onPlay(message.id);
+            const isStreamResponseDone = !!message.tts && !!message.ttsUrl;
+            setFetching(isStreamResponseDone);
+            if (!isStreamResponseDone) {
+                if (setDisabled)
+                    setDisabled(true); // disable button play
+            }
+            else {
+                if (setDisabled)
+                    setDisabled(false); // enable button play
+                toggleAudio();
+            }
+        }
+    }, [autoplay, message.ttsUrl]);
+    // handle init ttsUrl
+    useEffect(() => {
+        if (!src && message.ttsUrl && message.ttsUrl.startsWith('http')) {
+            setSrc(message.ttsUrl);
+        }
+    }, [message.ttsUrl, src]);
+    useEffect(() => {
+        if (!currentPlaying && isPlaying) {
+            if (audioRef.current) {
+                audioRef.current.pause();
+                audioRef.current.currentTime = 0;
+            }
+            sourceRef.current?.stop();
+            setIsPlaying(false);
+        }
+    }, [currentPlaying, isPlaying]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "w-full flex flex-row gap-[8px] items-center justify-between", children: [_jsxs(Button, { className: "rounded-full z-[2] p-0 w-[20px] h-[20px] m-0 text-[#18181B]", onClick: (event) => {
+                            event.preventDefault();
+                            toggleAudio();
+                        }, variant: "outline", disabled: disable || fetching, children: [fetching && _jsx(LoadingIcon, {}), !fetching && (_jsx(_Fragment, { children: isPlaying ? _jsx(ClikPauseIcon, { size: 20 }) : _jsx(PlayIcon, { size: 20 }) }))] }), _jsx("div", { className: "h-[20px] flex items-center justify-start text-muted-foreground text-base", style: { width: 'calc(100% - 56px)' }, children: `${progress}${theme?.hideAudioMetadata || !duration ? '' : ` / ${duration}`}` }), _jsx(Button, { className: "rounded-full z-[2] p-0 w-[20px] h-[20px] text-[#18181B]", onClick: (event) => {
+                            event.preventDefault();
+                            audioRef.current?.pause();
+                            onClose();
+                        }, variant: "outline", children: _jsx(ClikXIcon, { size: 20 }) })] }), _jsx("audio", { ref: audioRef, className: "hidden", src: src || '', autoPlay: autoplay, onEnded: handleOnEnded, onPause: handleOnPause, onPlay: handleOnPlay, onTimeUpdate: handleOnTimeUpdate, onLoadedMetadata: handleOnLoadedMetadata })] }));
+};
+export default AudioPlayerSimplified;
+//# sourceMappingURL=AudioPlayerSimplified.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayerSimplified.js","sourceRoot":"","sources":["../../../../src/components/Chat/Simplified/AudioPlayerSimplified.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { useAudioMessage } from '../../../hooks/useAudioMesseagePlayer';\nimport { useChatData } from '../../../hooks/useChatData';\nimport { useConfiguration } from '../../../hooks/useConfiguration';\nimport { createMessageAudio } from '../../../services/chat.service';\nimport { ChatMessageType } from '../../../types/flowise.type';\nimport { ClikPauseIcon, ClikXIcon, LoadingIcon, PlayIcon } from '../Icons';\nimport { Button } from '../ui/Button';\n\nconst AudioPlayerSimplified = ({\n  message,\n  chatId,\n  autoplay = false,\n  onClose,\n}: {\n  message: ChatMessageType;\n  chatId?: string;\n  autoplay?: boolean;\n  onClose: () => void;\n}) => {\n  const { theme, apiHost } = useConfiguration();\n  const { disable, setDisabled, playingId, onPlay } = useAudioMessage();\n  const { listeners } = useChatData();\n\n  const audioRef = useRef<HTMLAudioElement | null>(null);\n  const audioContextRef = useRef<AudioContext | null>(null);\n  const sourceRef = useRef<AudioBufferSourceNode | null>(null);\n\n  const currentPlaying = !!playingId && playingId === message.id;\n\n  const [src, setSrc] = useState<string | null>(''); // null is meaning that audio was streamed\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [fetching, setFetching] = useState(false);\n\n  const [progress, setProgress] = useState('00:00');\n  const [duration, setDuration] = useState('');\n\n  const language =\n    theme?.language?.options\n      ?.find((option) => option.code === theme?.language?.code)\n      ?.name?.toLowerCase() || 'en';\n\n  const toggleAudio = () => {\n    if (!audioRef.current || !message.id) {\n      return;\n    }\n    // create audio if not existed\n    if (!src && chatId && message.id && message.content && !isPlaying) {\n      createAudio(chatId);\n      if (onPlay) {\n        onPlay(message.id);\n      }\n      return;\n    }\n\n    if (isPlaying) {\n      audioRef.current.pause();\n      sourceRef.current?.stop();\n    } else {\n      audioRef.current.play();\n    }\n  };\n\n  const handleOnPlay = () => {\n    setIsPlaying(true);\n    if (onPlay && message.id) onPlay(message.id);\n    if (listeners?.['ON_PLAY_AUDIO']) {\n      listeners['ON_PLAY_AUDIO']();\n    }\n  };\n\n  const handleOnPause = () => {\n    setIsPlaying(false);\n    if (onPlay && message.id) onPlay(message.id, true);\n    if (listeners?.['ON_PAUSE_AUDIO']) {\n      listeners['ON_PAUSE_AUDIO']();\n    }\n  };\n\n  const handleOnEnded = () => {\n    setIsPlaying(false);\n    if (onPlay && message.id) {\n      onPlay(message.id, true);\n    }\n    if (listeners?.['ON_ENDED_AUDIO']) {\n      listeners['ON_ENDED_AUDIO']();\n    }\n    if (theme?.autoCloseAudioPlayer && onClose) {\n      onClose();\n    }\n  };\n\n  const createAudio = async (id: string) => {\n    setFetching(true);\n    if (setDisabled) setDisabled(true);\n    try {\n      const stream = src !== null; // null is meaning that audio was streamed\n      const resp: any = await createMessageAudio({\n        id,\n        apiHost,\n        messageId: message.id!,\n        content: message.content!,\n        stream,\n        language,\n      });\n\n      if (audioRef.current) {\n        if (!stream) {\n          setSrc(resp as string);\n          audioRef.current.play();\n        } else {\n          const response = resp as Response;\n          const contentType =\n            response.headers.get('content-type') || 'audio/mpeg';\n\n          if (window.MediaSource) {\n            // MediaSource does not support .ogg\n            if (contentType.includes('ogg')) {\n              setSrc(null); // null is meaning that audio was streamed\n              const reader = response.body!.getReader();\n              if (!audioContextRef.current) {\n                audioContextRef.current = new AudioContext();\n              }\n              const audioChunks = [];\n              // eslint-disable-next-line no-constant-condition\n              while (true) {\n                const { done, value } = await reader.read();\n                if (done) {\n                  break;\n                }\n                audioChunks.push(value);\n              }\n\n              // Create a blob and update the audio source.\n              const blob = new Blob(audioChunks, { type: contentType });\n              audioRef.current.src = URL.createObjectURL(blob);\n              if (audioRef.current.currentTime === 0) {\n                audioRef.current?.play();\n              }\n            } else {\n              setSrc(null); // null is meaning that audio was streamed\n              const mediaSource = new MediaSource();\n              audioRef.current.src = URL.createObjectURL(mediaSource);\n              mediaSource.addEventListener('sourceopen', async () => {\n                const sourceBuffer = mediaSource.addSourceBuffer(contentType);\n                const reader = response.body!.getReader();\n\n                async function processStream() {\n                  // eslint-disable-next-line no-constant-condition\n                  while (true) {\n                    const { done, value } = await reader.read();\n                    if (done) {\n                      mediaSource.endOfStream();\n                      break;\n                    }\n                    await new Promise<void>((resolve) => {\n                      if (!sourceBuffer.updating) {\n                        resolve();\n                      } else {\n                        sourceBuffer.addEventListener(\n                          'updateend',\n                          () => resolve(),\n                          {\n                            once: true,\n                          }\n                        );\n                      }\n                    });\n                    try {\n                      sourceBuffer.appendBuffer(value);\n                    } catch (error) {\n                      console.error(error);\n                    }\n                  }\n                }\n\n                processStream().catch(console.error);\n                audioRef.current?.play();\n              });\n            }\n          } else {\n            // for iphone\n            setSrc(null); // null is meaning that audio was streamed\n            const reader = response.body!.getReader();\n            if (!audioContextRef.current) {\n              audioContextRef.current = new AudioContext();\n            }\n            const audioChunks = [];\n            // eslint-disable-next-line no-constant-condition\n            while (true) {\n              const { done, value } = await reader.read();\n              if (done) {\n                break;\n              }\n              audioChunks.push(value);\n              // Create a blob and update the audio source.\n              const blob = new Blob(audioChunks, { type: contentType });\n              audioRef.current.src = URL.createObjectURL(blob);\n              if (audioRef.current.currentTime === 0) {\n                audioRef.current?.play();\n              }\n            }\n            // end\n          }\n        }\n      }\n    } catch (e) {\n      console.error(e);\n    } finally {\n      setFetching(false);\n      if (setDisabled) setDisabled(false);\n    }\n  };\n\n  const handleOnTimeUpdate = () => {\n    const s = audioRef.current!.currentTime;\n    if (!s) {\n      setProgress('00:00');\n      return;\n    }\n\n    // >= 1 hour\n    if (s >= 3600) {\n      setProgress(new Date(s * 1000).toISOString().substring(11, 16));\n      return;\n    }\n\n    setProgress(new Date(s * 1000).toISOString().substring(14, 19));\n  };\n\n  const handleOnLoadedMetadata = () => {\n    const s = audioRef.current!.duration;\n    if (!s) {\n      setDuration('');\n      return;\n    }\n\n    // >= 60 hour\n    if (s >= 216000) {\n      setDuration('59:99+');\n      return;\n    }\n\n    // >= 1 hour\n    if (s >= 3600) {\n      setDuration(new Date(s * 1000).toISOString().substring(11, 16));\n      return;\n    }\n\n    setDuration(new Date(s * 1000).toISOString().substring(14, 19));\n  };\n\n  // handle streaming response chat\n  useEffect(() => {\n    if (autoplay) {\n      if (onPlay && message.id) onPlay(message.id);\n      const isStreamResponseDone = !!message.tts && !!message.ttsUrl;\n      setFetching(isStreamResponseDone);\n      if (!isStreamResponseDone) {\n        if (setDisabled) setDisabled(true); // disable button play\n      } else {\n        if (setDisabled) setDisabled(false); // enable button play\n        toggleAudio();\n      }\n    }\n  }, [autoplay, message.ttsUrl]);\n\n  // handle init ttsUrl\n  useEffect(() => {\n    if (!src && message.ttsUrl && message.ttsUrl.startsWith('http')) {\n      setSrc(message.ttsUrl);\n    }\n  }, [message.ttsUrl, src]);\n\n  useEffect(() => {\n    if (!currentPlaying && isPlaying) {\n      if (audioRef.current) {\n        audioRef.current.pause();\n        audioRef.current.currentTime = 0;\n      }\n      sourceRef.current?.stop();\n      setIsPlaying(false);\n    }\n  }, [currentPlaying, isPlaying]);\n\n  return (\n    <>\n      <div className=\"w-full flex flex-row gap-[8px] items-center justify-between\">\n        <Button\n          className=\"rounded-full z-[2] p-0 w-[20px] h-[20px] m-0 text-[#18181B]\"\n          onClick={(event) => {\n            event.preventDefault();\n            toggleAudio();\n          }}\n          variant=\"outline\"\n          disabled={disable || fetching}\n        >\n          {fetching && <LoadingIcon />}\n          {!fetching && (\n            <>\n              {isPlaying ? <ClikPauseIcon size={20} /> : <PlayIcon size={20} />}\n            </>\n          )}\n        </Button>\n        <div\n          className=\"h-[20px] flex items-center justify-start text-muted-foreground text-base\"\n          style={{ width: 'calc(100% - 56px)' }}\n        >\n          {`${progress}${theme?.hideAudioMetadata || !duration ? '' : ` / ${duration}`}`}\n        </div>\n        <Button\n          className=\"rounded-full z-[2] p-0 w-[20px] h-[20px] text-[#18181B]\"\n          onClick={(event) => {\n            event.preventDefault();\n            audioRef.current?.pause();\n            onClose();\n          }}\n          variant=\"outline\"\n        >\n          <ClikXIcon size={20} />\n        </Button>\n      </div>\n      <audio\n        ref={audioRef}\n        className=\"hidden\"\n        src={src || ''}\n        autoPlay={autoplay}\n        onEnded={handleOnEnded}\n        onPause={handleOnPause}\n        onPlay={handleOnPlay}\n        onTimeUpdate={handleOnTimeUpdate}\n        onLoadedMetadata={handleOnLoadedMetadata}\n      />\n    </>\n  );\n};\n\nexport default AudioPlayerSimplified;\n"]}

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

@@ -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=MultimodalInputSimplified.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultimodalInputSimplified.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/Simplified/MultimodalInputSimplified.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"}