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

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"}

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PreviewMessage, ThinkingMessage } from './Message';
+import { useChat } from '../../hooks/useChat';
+import { useScrollToBottom } from '../../hooks/useScrollToBottom';
+import { MultimodalInput } from './MultimodalInput';
+import { Overview } from './Overview';
+import { useConfiguration } from '../../hooks/useConfiguration';
+import { MenuIcon } from './Icons';
+import { DropdownMenu, DropdownMenuItem, DropdownMenuContent, DropdownMenuTrigger, } from './ui/DropdownMenu';
+import { useChatData } from 'hooks/useChatData';
+export const Chat = ({ id, agentId, initialMessages = [] }) => {
+    const { messages = [], setMessages, handleSubmit, input = '', setInput, isLoading, stop, chatId, append, bot, enableTTS, setEnableTTS, suggestions, } = useChat({ id, initialMessages, agentId });
+    const { apiHost } = useConfiguration();
+    const [messagesContainerRef, messagesEndRef] = useScrollToBottom();
+    const [attachments, setAttachments] = useState([]);
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const { listeners, createNew } = useChatData();
+    const handleCreateNewChat = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        let id = '';
+        if (createNew) {
+            id = createNew();
+        }
+        if (listeners?.['ON_NEW_CHAT']) {
+            listeners['ON_NEW_CHAT'](id);
+        }
+        // Đóng dropdown sau khi tạo chat mới
+        setDropdownOpen(false);
+    };
+    const hasMessages = (messages?.length || 0) > 0;
+    const isThinking = isLoading &&
+        hasMessages &&
+        messages[messages.length - 1].role === 'userMessage';
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col min-w-0 h-full relative bg-background", children: [_jsx("div", { className: "absolute left-4 top-4 z-10", children: _jsxs(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [_jsx(DropdownMenuTrigger, { className: "outline-none", children: _jsx("div", { className: "w-10 h-[40px] shadow-sm flex items-center justify-center p-1 bg-white rounded-full outline-none", children: _jsx(MenuIcon, { size: 20 }) }) }), _jsx(DropdownMenuContent, { side: "right", children: _jsx(DropdownMenuItem, { children: _jsx("div", { onClick: handleCreateNewChat, children: "New chat" }) }) })] }) }), _jsxs("div", { ref: messagesContainerRef, className: "flex flex-col min-w-0 gap-[16px] flex-1 overflow-y-scroll pt-[16px]", children: [!hasMessages && _jsx(Overview, { bot: bot }), hasMessages &&
+                            messages.map((message, index) => (_jsx(PreviewMessage, { bot: bot, chatId: id, message: message, isLoading: isLoading && (messages || []).length - 1 === index, enableTTS: enableTTS }, message.id))), isThinking && _jsx(ThinkingMessage, { bot: bot }), _jsx("div", { ref: messagesEndRef, className: "shrink-0 min-w-[24px] min-h-[24px]" })] }), _jsx("form", { className: "flex mx-auto px-4 bg-background pb-4 md:pb-6 gap-2 w-full md:max-w-3xl", children: _jsx(MultimodalInput, { input: input, setInput: setInput, chatId: chatId, handleSubmit: handleSubmit, isLoading: isLoading, stop: stop, messages: messages, setMessages: setMessages, append: append, attachments: attachments, setAttachments: setAttachments, bot: bot, apiHost: apiHost, setEnableTTS: setEnableTTS, enableTTS: enableTTS, suggestedActions: suggestions }) })] }) }));
+};
+//# sourceMappingURL=Chat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState } from 'react';\nimport { ChatMessageType, IFileUpload } from '../../types/flowise.type';\nimport { PreviewMessage, ThinkingMessage } from './Message';\nimport { useChat } from '../../hooks/useChat';\nimport { useScrollToBottom } from '../../hooks/useScrollToBottom';\nimport { MultimodalInput } from './MultimodalInput';\nimport { Overview } from './Overview';\nimport { useConfiguration } from '../../hooks/useConfiguration';\nimport { MenuIcon } from './Icons';\nimport {\n  DropdownMenu,\n  DropdownMenuItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from './ui/DropdownMenu';\nimport { useChatData } from 'hooks/useChatData';\n\ntype PropsType = {\n  id?: string;\n  initialMessages?: ChatMessageType[];\n  agentId?: string;\n};\n\nexport const Chat: FC<PropsType> = ({ id, agentId, initialMessages = [] }) => {\n  const {\n    messages = [],\n    setMessages,\n    handleSubmit,\n    input = '',\n    setInput,\n    isLoading,\n    stop,\n    chatId,\n    append,\n    bot,\n    enableTTS,\n    setEnableTTS,\n    suggestions,\n  } = useChat({ id, initialMessages, agentId });\n  const { apiHost } = useConfiguration();\n  const [messagesContainerRef, messagesEndRef] =\n    useScrollToBottom<HTMLDivElement>();\n  const [attachments, setAttachments] = useState<Array<IFileUpload>>([]);\n  const [dropdownOpen, setDropdownOpen] = useState(false);\n  const { listeners, createNew } = useChatData();\n\n  const handleCreateNewChat = (e: React.MouseEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    let id: string = '';\n    if (createNew) {\n      id = createNew();\n    }\n    if (listeners?.['ON_NEW_CHAT']) {\n      listeners['ON_NEW_CHAT'](id);\n    }\n    // Đóng dropdown sau khi tạo chat mới\n    setDropdownOpen(false);\n  };\n\n  const hasMessages = (messages?.length || 0) > 0;\n  const isThinking =\n    isLoading &&\n    hasMessages &&\n    messages[messages.length - 1].role === 'userMessage';\n\n  return (\n    <>\n      <div className=\"flex flex-col min-w-0 h-full relative bg-background\">\n        {/* <Header title={theme?.header?.title} language={language} /> */}\n        <div className=\"absolute left-4 top-4 z-10\">\n          <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>\n            <DropdownMenuTrigger className=\"outline-none\">\n              <div className=\"w-10 h-[40px] shadow-sm flex items-center justify-center p-1 bg-white rounded-full outline-none\">\n                <MenuIcon size={20} />\n              </div>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side=\"right\">\n              <DropdownMenuItem>\n                <div onClick={handleCreateNewChat}>New chat</div>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n        <div\n          ref={messagesContainerRef}\n          className=\"flex flex-col min-w-0 gap-[16px] flex-1 overflow-y-scroll pt-[16px]\"\n        >\n          {!hasMessages && <Overview bot={bot} />}\n\n          {hasMessages &&\n            messages.map((message, index) => (\n              <PreviewMessage\n                key={message.id}\n                bot={bot}\n                chatId={id}\n                message={message}\n                isLoading={isLoading && (messages || []).length - 1 === index}\n                enableTTS={enableTTS}\n              />\n            ))}\n          {isThinking && <ThinkingMessage bot={bot} />}\n\n          <div\n            ref={messagesEndRef}\n            className=\"shrink-0 min-w-[24px] min-h-[24px]\"\n          />\n        </div>\n        <form className=\"flex mx-auto px-4 bg-background pb-4 md:pb-6 gap-2 w-full md:max-w-3xl\">\n          <MultimodalInput\n            input={input}\n            setInput={setInput}\n            chatId={chatId}\n            handleSubmit={handleSubmit}\n            isLoading={isLoading}\n            stop={stop}\n            messages={messages}\n            setMessages={setMessages}\n            append={append}\n            attachments={attachments}\n            setAttachments={setAttachments}\n            bot={bot}\n            apiHost={apiHost}\n            setEnableTTS={setEnableTTS}\n            enableTTS={enableTTS}\n            suggestedActions={suggestions}\n          />\n        </form>\n      </div>\n    </>\n  );\n};\n"]}

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface HeaderPropType {
+    title?: string;
+    language?: string;
+    onLanguageClick?: () => void;
+    onMenuClick?: () => void;
+}
+declare const Header: FC<HeaderPropType>;
+export default Header;
+//# sourceMappingURL=Header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,cAAc,CAgF9B,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChatData } from '../../hooks/useChatData';
+import { CaretDown, ChevronLeft, List } from './Icons';
+const Header = (props) => {
+    const { createNew, listeners } = useChatData();
+    const { title, language, onLanguageClick, onMenuClick } = props;
+    const showNew = !!listeners?.['ON_NEW_CHAT'] && !!createNew;
+    const handleCreateNewChat = () => {
+        let id = '';
+        if (createNew) {
+            id = createNew();
+        }
+        if (listeners?.['ON_NEW_CHAT']) {
+            listeners['ON_NEW_CHAT'](id);
+        }
+    };
+    return (_jsxs("header", { className: "flex mx-auto px-4 py-[8px] bg-background gap-2 w-full md:max-w-3xl justify-between", children: [_jsx("button", { className: "p-1 text-gray-600 opacity-[0]", "aria-label": "Go back", children: _jsx(ChevronLeft, { size: 24 }) }), _jsxs("div", { className: "flex items-center gap-1 ", "aria-label": "AI Guide options", children: [_jsx("span", { className: "text-[18px] font-semibold leading-[28px] text-[#595959]", children: title }), _jsx(CaretDown, { className: "opacity-25", size: 12 })] }), _jsxs("div", { className: "flex items-center gap-[8px]", children: [_jsx("button", { className: "opacity-25", onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (onLanguageClick) {
+                                onLanguageClick();
+                            }
+                        }, "aria-label": "Change language", children: _jsx("span", { className: "text-[#595959] text-center text-[12px] border-[1px] font-bold rounded-[4px] border-[#595959] px-[6px] py-[2px]", children: language }) }), showNew && (_jsx("button", { onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleCreateNewChat();
+                        }, "aria-label": "New Chat", children: _jsx("span", { className: "text-[#595959] text-center text-[12px] border-[1px] font-bold rounded-[4px] border-[#595959] px-[6px] py-[2px]", children: "New" }) })), !!onMenuClick && (_jsx("button", { onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (onMenuClick) {
+                                onMenuClick();
+                            }
+                        }, className: "p-1 text-gray-600 opacity-25", "aria-label": "Open menu", children: _jsx(List, { size: 24 }) }))] })] }));
+};
+export default Header;
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/Chat/Header.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AASvD,MAAM,MAAM,GAAuB,CAAC,KAAK,EAAE,EAAE;IAC3C,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAEhE,MAAM,OAAO,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;IAE5D,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,EAAE,GAAW,EAAE,CAAC;QACpB,IAAI,SAAS,EAAE,CAAC;YACd,EAAE,GAAG,SAAS,EAAE,CAAC;QACnB,CAAC;QACD,IAAI,SAAS,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC;YAC/B,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,kBAAQ,SAAS,EAAC,oFAAoF,aACpG,iBAAQ,SAAS,EAAC,+BAA+B,gBAAY,SAAS,YACpE,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI,GAClB,EAET,eAAK,SAAS,EAAC,0BAA0B,gBAAY,kBAAkB,aACrE,eAAM,SAAS,EAAC,yDAAyD,YACtE,KAAK,GACD,EACP,KAAC,SAAS,IAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAE,EAAE,GAAI,IAC1C,EACN,eAAK,SAAS,EAAC,6BAA6B,aAC1C,iBACE,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;4BACb,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,CAAC,CAAC,eAAe,EAAE,CAAC;4BAEpB,IAAI,eAAe,EAAE,CAAC;gCACpB,eAAe,EAAE,CAAC;4BACpB,CAAC;wBACH,CAAC,gBACU,iBAAiB,YAE5B,eAAM,SAAS,EAAC,gHAAgH,YAC7H,QAAQ,GACJ,GACA,EAER,OAAO,IAAI,CACV,iBACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;4BACb,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,CAAC,CAAC,eAAe,EAAE,CAAC;4BACpB,mBAAmB,EAAE,CAAC;wBACxB,CAAC,gBACU,UAAU,YAErB,eAAM,SAAS,EAAC,gHAAgH,oBAEzH,GACA,CACV,EAEA,CAAC,CAAC,WAAW,IAAI,CAChB,iBACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;4BACb,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,CAAC,CAAC,eAAe,EAAE,CAAC;4BAEpB,IAAI,WAAW,EAAE,CAAC;gCAChB,WAAW,EAAE,CAAC;4BAChB,CAAC;wBACH,CAAC,EACD,SAAS,EAAC,8BAA8B,gBAC7B,WAAW,YAEtB,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,GACX,CACV,IACG,IACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useChatData } from '../../hooks/useChatData';\nimport { CaretDown, ChevronLeft, List } from './Icons';\n\ninterface HeaderPropType {\n  title?: string;\n  language?: string;\n  onLanguageClick?: () => void;\n  onMenuClick?: () => void;\n}\n\nconst Header: FC<HeaderPropType> = (props) => {\n  const { createNew, listeners } = useChatData();\n  const { title, language, onLanguageClick, onMenuClick } = props;\n\n  const showNew = !!listeners?.['ON_NEW_CHAT'] && !!createNew;\n\n  const handleCreateNewChat = () => {\n    let id: string = '';\n    if (createNew) {\n      id = createNew();\n    }\n    if (listeners?.['ON_NEW_CHAT']) {\n      listeners['ON_NEW_CHAT'](id);\n    }\n  };\n\n  return (\n    <header className=\"flex mx-auto px-4 py-[8px] bg-background gap-2 w-full md:max-w-3xl justify-between\">\n      <button className=\"p-1 text-gray-600 opacity-[0]\" aria-label=\"Go back\">\n        <ChevronLeft size={24} />\n      </button>\n\n      <div className=\"flex items-center gap-1 \" aria-label=\"AI Guide options\">\n        <span className=\"text-[18px] font-semibold leading-[28px] text-[#595959]\">\n          {title}\n        </span>\n        <CaretDown className=\"opacity-25\" size={12} />\n      </div>\n      <div className=\"flex items-center gap-[8px]\">\n        <button\n          className=\"opacity-25\"\n          onClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            if (onLanguageClick) {\n              onLanguageClick();\n            }\n          }}\n          aria-label=\"Change language\"\n        >\n          <span className=\"text-[#595959] text-center text-[12px] border-[1px] font-bold rounded-[4px] border-[#595959] px-[6px] py-[2px]\">\n            {language}\n          </span>\n        </button>\n\n        {showNew && (\n          <button\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n              handleCreateNewChat();\n            }}\n            aria-label=\"New Chat\"\n          >\n            <span className=\"text-[#595959] text-center text-[12px] border-[1px] font-bold rounded-[4px] border-[#595959] px-[6px] py-[2px]\">\n              New\n            </span>\n          </button>\n        )}\n\n        {!!onMenuClick && (\n          <button\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n\n              if (onMenuClick) {\n                onMenuClick();\n              }\n            }}\n            className=\"p-1 text-gray-600 opacity-25\"\n            aria-label=\"Open menu\"\n          >\n            <List size={24} />\n          </button>\n        )}\n      </div>\n    </header>\n  );\n};\n\nexport default Header;\n"]}

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface PropTypes {
+    content?: string;
+}
+export declare const HtmlContent: FC<PropTypes>;
+export {};
+//# sourceMappingURL=HtmlContent.d.ts.map