@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/commons/constants/index.d.ts

@@ -0,0 +1,2 @@
+export * from './variables';
+//# sourceMappingURL=index.d.ts.map

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/commons/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/commons/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/commons/constants/index.js

@@ -0,0 +1,2 @@
+export * from './variables';
+//# sourceMappingURL=index.js.map

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/commons/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/commons/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC","sourcesContent":["export * from './variables';\n"]}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/commons/constants/variables.d.ts

@@ -0,0 +1,11 @@
+export declare const BE_API = "";
+export declare const LANGUAGE_HEADER: {
+    [key: string]: string;
+};
+export declare const LAYOUT_MODE: {
+    GRID: string;
+    SCROLL: string;
+};
+export declare const FONT_SIZE_DEFAULT = 16;
+export declare const COLOR_DEFAULT = "#595959";
+//# sourceMappingURL=variables.d.ts.map

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/commons/constants/variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../../../src/commons/constants/variables.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,KAAK,CAAC;AAEzB,eAAO,MAAM,eAAe,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAiBpD,CAAC;AAEF,eAAO,MAAM,WAAW;;;CAGvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,aAAa,YAAY,CAAC"}

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/commons/constants/variables.js

@@ -0,0 +1,26 @@
+export const BE_API = '';
+export const LANGUAGE_HEADER = {
+    vi: 'vn',
+    en: 'en',
+    jp: 'jp',
+    kr: 'kr',
+    cn: 'cn',
+    es: 'es',
+    fr: 'fr',
+    de: 'de',
+    ru: 'ru',
+    th: 'th',
+    tw: 'tw',
+    sg: 'sg',
+    my: 'my',
+    kh: 'kh',
+    au: 'au',
+    global: 'global',
+};
+export const LAYOUT_MODE = {
+    GRID: 'grid',
+    SCROLL: 'scroll',
+};
+export const FONT_SIZE_DEFAULT = 16;
+export const COLOR_DEFAULT = '#595959';
+//# sourceMappingURL=variables.js.map

package/.rollup.cache/Users/tungthai/Desktop/Develop/clik-ai-chatbot-embedded/dist/commons/constants/variables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables.js","sourceRoot":"","sources":["../../../src/commons/constants/variables.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG,EAAE,CAAC;AAEzB,MAAM,CAAC,MAAM,eAAe,GAA8B;IACxD,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,CAAC;AACpC,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,CAAC","sourcesContent":["export const BE_API = '';\n\nexport const LANGUAGE_HEADER: { [key: string]: string } = {\n  vi: 'vn',\n  en: 'en',\n  jp: 'jp',\n  kr: 'kr',\n  cn: 'cn',\n  es: 'es',\n  fr: 'fr',\n  de: 'de',\n  ru: 'ru',\n  th: 'th',\n  tw: 'tw',\n  sg: 'sg',\n  my: 'my',\n  kh: 'kh',\n  au: 'au',\n  global: 'global',\n};\n\nexport const LAYOUT_MODE = {\n  GRID: 'grid',\n  SCROLL: 'scroll',\n};\n\nexport const FONT_SIZE_DEFAULT = 16;\nexport const COLOR_DEFAULT = '#595959';\n"]}

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

@@ -0,0 +1,3 @@
+declare const Agent: () => import("react/jsx-runtime").JSX.Element;
+export default Agent;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Agent/index.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,KAAK,+CAkBV,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useChatData } from '../../hooks/useChatData';
+import { useConfiguration } from '../../hooks/useConfiguration';
+import { Chat } from '../Chat/Chat';
+import SimplifiedChat from '../Chat/Simplified';
+const Agent = () => {
+    const { agentId, theme = {} } = useConfiguration();
+    const { simplified } = theme;
+    const { chatId, initialMessages } = useChatData();
+    if (simplified) {
+        return (_jsx(SimplifiedChat, { agentId: agentId, id: chatId, initialMessages: initialMessages }));
+    }
+    return (_jsx(Chat, { agentId: agentId, id: chatId, initialMessages: initialMessages }));
+};
+export default Agent;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Agent/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,MAAM,KAAK,GAAG,GAAG,EAAE;IACjB,MAAM,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAC7B,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,WAAW,EAAE,CAAC;IAElD,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,CACL,KAAC,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,MAAM,EACV,eAAe,EAAE,eAAe,GAChC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,eAAe,GAAI,CACzE,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { useChatData } from '../../hooks/useChatData';\nimport { useConfiguration } from '../../hooks/useConfiguration';\nimport { Chat } from '../Chat/Chat';\nimport SimplifiedChat from '../Chat/Simplified';\n\nconst Agent = () => {\n  const { agentId, theme = {} } = useConfiguration();\n  const { simplified } = theme;\n  const { chatId, initialMessages } = useChatData();\n\n  if (simplified) {\n    return (\n      <SimplifiedChat\n        agentId={agentId}\n        id={chatId}\n        initialMessages={initialMessages}\n      />\n    );\n  }\n\n  return (\n    <Chat agentId={agentId} id={chatId} initialMessages={initialMessages} />\n  );\n};\n\nexport default Agent;\n"]}

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { AgentStep } from 'types/flowise.type';
+interface Props {
+    steps: AgentStep[];
+    isLoading?: boolean;
+}
+declare const AgentThinking: FC<Props>;
+export default AgentThinking;
+//# sourceMappingURL=AgentThinking.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentThinking.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/AgentThinking.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAS/C,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,KAAK,CAsN5B,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,161 @@
+/* eslint-disable max-len */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useState, useEffect } from 'react';
+import { ChevronDownIcon } from './Icons';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from './ui/collapsible';
+import { Badge } from './ui/badge';
+const AgentThinking = ({ steps, isLoading }) => {
+    const [isThinkingOpen, setIsThinkingOpen] = useState(false);
+    const [displayedText, setDisplayedText] = useState('');
+    const [isStreaming, setIsStreaming] = useState(false);
+    const formatStepContent = (step, stepIndex, allSteps) => {
+        // Simple, clean formatting
+        let content = step.content || '';
+        // Enhanced tool detection and formatting
+        if (content.startsWith('Invoking ')) {
+            // Extract tool name from "Invoking "tool_name" with {...}" pattern
+            const toolMatch = content.match(/^Invoking\s+"([^"]+)"/);
+            if (toolMatch) {
+                const toolName = toolMatch[1];
+                const restOfContent = content.replace(/^Invoking\s+"[^"]+"/, '').trim();
+                // Add proper spacing before "with" if it exists
+                if (restOfContent.startsWith('with')) {
+                    content = `Starting ${toolName} ${restOfContent}`;
+                }
+                else if (restOfContent) {
+                    content = `Starting ${toolName} ${restOfContent}`;
+                }
+                else {
+                    content = `Starting ${toolName}`;
+                }
+            }
+            else {
+                // Fallback: just remove "Invoking "
+                content = content.replace(/^Invoking\s+/, '').trim();
+            }
+        }
+        else if (content.startsWith('Starting unknown-tool')) {
+            // For unknown-tool cases, try to get context from previous steps to identify the tool
+            let toolName = 'tool';
+            const stepsToSearch = allSteps || steps;
+            if (stepIndex !== undefined && stepIndex > 0) {
+                // Look at the previous step to find the tool that was invoked
+                for (let i = stepIndex - 1; i >= 0; i--) {
+                    const prevStep = stepsToSearch[i];
+                    const prevContent = prevStep?.content || '';
+                    const toolMatch = prevContent.match(/^Invoking\s+"([^"]+)"/);
+                    if (toolMatch) {
+                        toolName = toolMatch[1];
+                        break;
+                    }
+                }
+            }
+            content = content.replace(/unknown-tool/gi, toolName);
+        }
+        else if (content === 'Completed tool') {
+            // For completed tool messages, try to get context from previous steps
+            let toolName = 'tool';
+            const stepsToSearch = allSteps || steps;
+            if (stepIndex !== undefined) {
+                // Look backwards through all steps to find the most recent tool invocation
+                for (let i = stepIndex - 1; i >= 0; i--) {
+                    const prevStep = stepsToSearch[i];
+                    const prevContent = prevStep?.content || '';
+                    // Check for both processed and original formats
+                    const toolMatch = prevContent.match(/^(?:Invoking\s+"([^"]+)"|Starting\s+([^\s]+))/);
+                    if (toolMatch) {
+                        toolName = toolMatch[1] || toolMatch[2];
+                        break;
+                    }
+                }
+            }
+            content = `Completed ${toolName}`;
+        }
+        else {
+            // Clean up other common prefixes
+            content = content
+                .replace(/^Using tool:\s+/, '')
+                .replace(/^Action:\s+/, '')
+                .replace(/^Tuyệt vời!\s+/, '')
+                .trim();
+        }
+        // Replace any remaining "unknown-tool" references
+        content = content.replace(/unknown-tool/gi, 'tool');
+        // If content is too long, truncate it
+        if (content.length > 300) {
+            content = content.substring(0, 300) + '...';
+        }
+        return content || 'Processing...';
+    };
+    const processSteps = (steps) => {
+        const processed = [];
+        for (let i = 0; i < steps.length; i++) {
+            const step = steps[i];
+            const content = step.content || '';
+            // Skip exact duplicates
+            if (processed.some((p) => p.content === content)) {
+                continue;
+            }
+            // Skip standalone "Starting unknown-tool" that follows an invocation
+            if (content === 'Starting unknown-tool' && i > 0) {
+                const prevContent = steps[i - 1]?.content || '';
+                if (prevContent.startsWith('Invoking ')) {
+                    continue;
+                }
+            }
+            // Skip standalone "Completed tool" without context
+            if (content === 'Completed tool' && processed.length > 0) {
+                // Try to find the matching tool start
+                const lastStep = processed[processed.length - 1];
+                if (lastStep?.content?.startsWith('Starting ')) {
+                    // Update the last step to show completion instead of adding new step
+                    const toolMatch = lastStep.content.match(/^Starting ([^\\s]+)/);
+                    if (toolMatch) {
+                        lastStep.content = `Completed ${toolMatch[1]}`;
+                    }
+                    continue;
+                }
+            }
+            processed.push(step);
+        }
+        return processed;
+    };
+    const filteredSteps = useMemo(() => processSteps(steps), [steps]);
+    // Get the current (latest) step for inline display
+    const currentStepContent = useMemo(() => {
+        const currentStep = filteredSteps[filteredSteps.length - 1];
+        return formatStepContent(currentStep, filteredSteps.length - 1, filteredSteps);
+    }, [steps]);
+    // Character-by-character streaming animation effect for better JSON/structured data handling
+    useEffect(() => {
+        if (!isLoading || !currentStepContent) {
+            setDisplayedText('');
+            setIsStreaming(false);
+            return;
+        }
+        setIsStreaming(true);
+        setDisplayedText('');
+        let currentCharIndex = 0;
+        const streamInterval = setInterval(() => {
+            if (currentCharIndex < currentStepContent.length) {
+                setDisplayedText((prev) => prev + currentStepContent[currentCharIndex]);
+                currentCharIndex++;
+            }
+            else {
+                setIsStreaming(false);
+                clearInterval(streamInterval);
+            }
+        }, 30); // Faster character-by-character streaming (30ms per character)
+        return () => {
+            clearInterval(streamInterval);
+        };
+    }, [currentStepContent, isLoading]);
+    if (!steps || steps.length === 0) {
+        return null;
+    }
+    return (_jsxs(Collapsible, { open: isThinkingOpen, onOpenChange: setIsThinkingOpen, children: [_jsxs("div", { className: "mb-3", children: [!isLoading && (_jsx(CollapsibleTrigger, { className: "flex items-center gap-2 hover:opacity-70 transition-opacity", children: _jsxs(Badge, { variant: "custom1", className: "gap-1.5", children: ["Thought for", isThinkingOpen ? (_jsx(ChevronDownIcon, { style: { transform: 'rotate(180deg)' } })) : (_jsx(ChevronDownIcon, {}))] }) })), !isThinkingOpen && isLoading && (displayedText || isStreaming) && (_jsxs("div", { className: "text-muted-foreground text-sm opacity-70 font-mono whitespace-pre-wrap", children: [displayedText, isStreaming && _jsx("span", { className: "animate-pulse", children: "|" })] }))] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "border-l-2 pl-4 mb-4 space-y-2", children: filteredSteps.map((step, index) => (_jsxs("div", { className: "text-muted-foreground space-y-1", children: [_jsxs("div", { className: "opacity-60", children: ["Step ", index + 1] }), _jsx("div", { className: "whitespace-pre-wrap", children: formatStepContent(step, index, filteredSteps) })] }, step.id))) }) })] }));
+};
+export default AgentThinking;
+//# sourceMappingURL=AgentThinking.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentThinking.js","sourceRoot":"","sources":["../../../src/components/Chat/AgentThinking.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable max-len */\n'use client';\n\nimport { FC, useMemo } from 'react';\nimport { useState, useEffect } from 'react';\nimport { AgentStep } from 'types/flowise.type';\nimport { ArrowUpIcon, ChevronDownIcon } from './Icons';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from './ui/collapsible';\nimport { Badge } from './ui/badge';\n\ninterface Props {\n  steps: AgentStep[];\n  isLoading?: boolean;\n}\n\nconst AgentThinking: FC<Props> = ({ steps, isLoading }) => {\n  const [isThinkingOpen, setIsThinkingOpen] = useState(false);\n  const [displayedText, setDisplayedText] = useState('');\n  const [isStreaming, setIsStreaming] = useState(false);\n\n  const formatStepContent = (\n    step: AgentStep,\n    stepIndex?: number,\n    allSteps?: AgentStep[]\n  ) => {\n    // Simple, clean formatting\n    let content = step.content || '';\n\n    // Enhanced tool detection and formatting\n    if (content.startsWith('Invoking ')) {\n      // Extract tool name from \"Invoking \"tool_name\" with {...}\" pattern\n      const toolMatch = content.match(/^Invoking\\s+\"([^\"]+)\"/);\n      if (toolMatch) {\n        const toolName = toolMatch[1];\n        const restOfContent = content.replace(/^Invoking\\s+\"[^\"]+\"/, '').trim();\n        // Add proper spacing before \"with\" if it exists\n        if (restOfContent.startsWith('with')) {\n          content = `Starting ${toolName} ${restOfContent}`;\n        } else if (restOfContent) {\n          content = `Starting ${toolName} ${restOfContent}`;\n        } else {\n          content = `Starting ${toolName}`;\n        }\n      } else {\n        // Fallback: just remove \"Invoking \"\n        content = content.replace(/^Invoking\\s+/, '').trim();\n      }\n    } else if (content.startsWith('Starting unknown-tool')) {\n      // For unknown-tool cases, try to get context from previous steps to identify the tool\n      let toolName = 'tool';\n\n      const stepsToSearch = allSteps || steps;\n      if (stepIndex !== undefined && stepIndex > 0) {\n        // Look at the previous step to find the tool that was invoked\n        for (let i = stepIndex - 1; i >= 0; i--) {\n          const prevStep = stepsToSearch[i];\n          const prevContent = prevStep?.content || '';\n          const toolMatch = prevContent.match(/^Invoking\\s+\"([^\"]+)\"/);\n          if (toolMatch) {\n            toolName = toolMatch[1];\n            break;\n          }\n        }\n      }\n\n      content = content.replace(/unknown-tool/gi, toolName);\n    } else if (content === 'Completed tool') {\n      // For completed tool messages, try to get context from previous steps\n      let toolName = 'tool';\n\n      const stepsToSearch = allSteps || steps;\n      if (stepIndex !== undefined) {\n        // Look backwards through all steps to find the most recent tool invocation\n        for (let i = stepIndex - 1; i >= 0; i--) {\n          const prevStep = stepsToSearch[i];\n          const prevContent = prevStep?.content || '';\n\n          // Check for both processed and original formats\n          const toolMatch = prevContent.match(\n            /^(?:Invoking\\s+\"([^\"]+)\"|Starting\\s+([^\\s]+))/\n          );\n          if (toolMatch) {\n            toolName = toolMatch[1] || toolMatch[2];\n            break;\n          }\n        }\n      }\n\n      content = `Completed ${toolName}`;\n    } else {\n      // Clean up other common prefixes\n      content = content\n        .replace(/^Using tool:\\s+/, '')\n        .replace(/^Action:\\s+/, '')\n        .replace(/^Tuyệt vời!\\s+/, '')\n        .trim();\n    }\n\n    // Replace any remaining \"unknown-tool\" references\n    content = content.replace(/unknown-tool/gi, 'tool');\n\n    // If content is too long, truncate it\n    if (content.length > 300) {\n      content = content.substring(0, 300) + '...';\n    }\n\n    return content || 'Processing...';\n  };\n  const processSteps = (steps: AgentStep[]) => {\n    const processed: AgentStep[] = [];\n\n    for (let i = 0; i < steps.length; i++) {\n      const step = steps[i];\n      const content = step.content || '';\n\n      // Skip exact duplicates\n      if (processed.some((p) => p.content === content)) {\n        continue;\n      }\n\n      // Skip standalone \"Starting unknown-tool\" that follows an invocation\n      if (content === 'Starting unknown-tool' && i > 0) {\n        const prevContent = steps[i - 1]?.content || '';\n        if (prevContent.startsWith('Invoking ')) {\n          continue;\n        }\n      }\n\n      // Skip standalone \"Completed tool\" without context\n      if (content === 'Completed tool' && processed.length > 0) {\n        // Try to find the matching tool start\n        const lastStep = processed[processed.length - 1];\n        if (lastStep?.content?.startsWith('Starting ')) {\n          // Update the last step to show completion instead of adding new step\n          const toolMatch = lastStep.content.match(/^Starting ([^\\\\s]+)/);\n          if (toolMatch) {\n            lastStep.content = `Completed ${toolMatch[1]}`;\n          }\n          continue;\n        }\n      }\n\n      processed.push(step);\n    }\n\n    return processed;\n  };\n  const filteredSteps = useMemo(() => processSteps(steps), [steps]);\n  // Get the current (latest) step for inline display\n  const currentStepContent = useMemo(() => {\n    const currentStep = filteredSteps[filteredSteps.length - 1];\n    return formatStepContent(\n      currentStep,\n      filteredSteps.length - 1,\n      filteredSteps\n    );\n  }, [steps]);\n\n  // Character-by-character streaming animation effect for better JSON/structured data handling\n  useEffect(() => {\n    if (!isLoading || !currentStepContent) {\n      setDisplayedText('');\n      setIsStreaming(false);\n      return;\n    }\n\n    setIsStreaming(true);\n    setDisplayedText('');\n\n    let currentCharIndex = 0;\n\n    const streamInterval = setInterval(() => {\n      if (currentCharIndex < currentStepContent.length) {\n        setDisplayedText((prev) => prev + currentStepContent[currentCharIndex]);\n        currentCharIndex++;\n      } else {\n        setIsStreaming(false);\n        clearInterval(streamInterval);\n      }\n    }, 30); // Faster character-by-character streaming (30ms per character)\n\n    return () => {\n      clearInterval(streamInterval);\n    };\n  }, [currentStepContent, isLoading]);\n\n  if (!steps || steps.length === 0) {\n    return null;\n  }\n  return (\n    <Collapsible open={isThinkingOpen} onOpenChange={setIsThinkingOpen}>\n      <div className=\"mb-3\">\n        {/* Show badge only when not loading (at the end) */}\n        {!isLoading && (\n          <CollapsibleTrigger className=\"flex items-center gap-2 hover:opacity-70 transition-opacity\">\n            <Badge variant=\"custom1\" className=\"gap-1.5\">\n              Thought for\n              {isThinkingOpen ? (\n                <ChevronDownIcon style={{ transform: 'rotate(180deg)' }} />\n              ) : (\n                <ChevronDownIcon />\n              )}\n            </Badge>\n          </CollapsibleTrigger>\n        )}\n\n        {/* Show streaming text during loading */}\n        {!isThinkingOpen && isLoading && (displayedText || isStreaming) && (\n          <div className=\"text-muted-foreground text-sm opacity-70 font-mono whitespace-pre-wrap\">\n            {displayedText}\n            {isStreaming && <span className=\"animate-pulse\">|</span>}\n          </div>\n        )}\n      </div>\n\n      <CollapsibleContent>\n        <div className=\"border-l-2 pl-4 mb-4 space-y-2\">\n          {filteredSteps.map((step, index) => (\n            <div key={step.id} className=\"text-muted-foreground space-y-1\">\n              <div className=\"opacity-60\">Step {index + 1}</div>\n              <div className=\"whitespace-pre-wrap\">\n                {formatStepContent(step, index, filteredSteps)}\n              </div>\n            </div>\n          ))}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nexport default AgentThinking;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayer.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/AudioPlayer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAG3D,QAAA,MAAM,WAAW,mCAId;IACD,OAAO,EAAE,eAAe,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,4CAwPA,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,228 @@
+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 { LoadingIcon, PlayIcon, StopIcon1 } from './Icons';
+const AudioPlayer = ({ message, chatId, autoplay = false, }) => {
+    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 language = theme?.language?.options
+        ?.find((option) => option.code === theme?.language?.code)
+        ?.name?.toLowerCase() || 'en';
+    const togglePlay = () => {
+        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 handlePlayPause = (e) => {
+        e.preventDefault();
+        togglePlay();
+    };
+    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']();
+        }
+    };
+    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);
+        }
+    };
+    // 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
+                togglePlay();
+            }
+        }
+    }, [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("button", { disabled: fetching || disable, className: "rounded-full cursor-pointer h-fit w-[24px]", onClick: handlePlayPause, children: [fetching && _jsx(LoadingIcon, {}), !fetching && _jsx(_Fragment, { children: isPlaying ? _jsx(StopIcon1, {}) : _jsx(PlayIcon, {}) })] }), _jsx("audio", { ref: audioRef, className: "hidden", src: src || '', autoPlay: autoplay, onEnded: handleOnEnded, onPause: handleOnPause, onPlay: handleOnPlay })] }));
+};
+export default AudioPlayer;
+//# sourceMappingURL=AudioPlayer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayer.js","sourceRoot":"","sources":["../../../src/components/Chat/AudioPlayer.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 { LoadingIcon, PlayIcon, StopIcon1 } from './Icons';\n\nconst AudioPlayer = ({\n  message,\n  chatId,\n  autoplay = false,\n}: {\n  message: ChatMessageType;\n  chatId?: string;\n  autoplay?: boolean;\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 language =\n    theme?.language?.options\n      ?.find((option) => option.code === theme?.language?.code)\n      ?.name?.toLowerCase() || 'en';\n\n  const togglePlay = () => {\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 handlePlayPause = (e: any) => {\n    e.preventDefault();\n    togglePlay();\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  };\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  // 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        togglePlay();\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      <button\n        disabled={fetching || disable}\n        className=\"rounded-full cursor-pointer h-fit w-[24px]\"\n        onClick={handlePlayPause}\n      >\n        {fetching && <LoadingIcon />}\n        {!fetching && <>{isPlaying ? <StopIcon1 /> : <PlayIcon />}</>}\n      </button>\n      <audio\n        ref={audioRef}\n        className=\"hidden\"\n        src={src || ''}\n        autoPlay={autoplay}\n        onEnded={handleOnEnded}\n        onPause={handleOnPause}\n        onPlay={handleOnPlay}\n      />\n    </>\n  );\n};\n\nexport default AudioPlayer;\n"]}

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ChatMessageType } from '../../types/flowise.type';
+type PropsType = {
+    id?: string;
+    initialMessages?: ChatMessageType[];
+    agentId?: string;
+};
+export declare const Chat: FC<PropsType>;
+export {};
+//# sourceMappingURL=Chat.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAe,MAAM,0BAA0B,CAAC;AAgBxE,KAAK,SAAS,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA4G9B,CAAC"}