@clikvn/agent-widget-embedded 1.1.11 → 1.1.12-dev-01

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

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+let lastUpdateTime = 0;
+const updateInterval = 100;
+const DEFAULT_MAX_HISTORY_LENGTH = 65;
+export const useAudioAnalyzer = (maxHistoryLength = DEFAULT_MAX_HISTORY_LENGTH) => {
+    const [audioData, setAudioData] = useState({
+        volume: 0,
+        frequencies: Array(maxHistoryLength).fill(1), // Dynamic array size
+    });
+    const [isAnalyzing, setIsAnalyzing] = useState(false);
+    const audioContextRef = useRef(null);
+    const analyzerRef = useRef(null);
+    const sourceRef = useRef(null);
+    const animationFrameRef = useRef(null);
+    // Update frequencies array when maxHistoryLength changes
+    useEffect(() => {
+        setAudioData((prevData) => {
+            const newFrequencies = [...prevData.frequencies];
+            if (newFrequencies.length > maxHistoryLength) {
+                // Trim from beginning if too long
+                return {
+                    ...prevData,
+                    frequencies: newFrequencies.slice(-maxHistoryLength),
+                };
+            }
+            else if (newFrequencies.length < maxHistoryLength) {
+                // Pad with zeros if too short
+                const padding = Array(maxHistoryLength - newFrequencies.length).fill(0);
+                return {
+                    ...prevData,
+                    frequencies: [...padding, ...newFrequencies],
+                };
+            }
+            return prevData;
+        });
+    }, [maxHistoryLength]);
+    const startAnalyzing = useCallback((stream) => {
+        try {
+            // Create audio context
+            audioContextRef.current = new (window.AudioContext ||
+                window
+                    .webkitAudioContext)();
+            // Create analyzer
+            analyzerRef.current = audioContextRef.current.createAnalyser();
+            analyzerRef.current.fftSize = 256;
+            analyzerRef.current.smoothingTimeConstant = 0.8;
+            // Create source from stream
+            sourceRef.current =
+                audioContextRef.current.createMediaStreamSource(stream);
+            sourceRef.current.connect(analyzerRef.current);
+            setIsAnalyzing(true);
+            // Add throttling variables
+            // Start analyzing
+            const analyze = () => {
+                if (!analyzerRef.current)
+                    return;
+                const bufferLength = analyzerRef.current.frequencyBinCount;
+                const dataArray = new Uint8Array(bufferLength);
+                analyzerRef.current.getByteFrequencyData(dataArray);
+                // Calculate volume (0-100)
+                const sum = dataArray.reduce((acc, value) => acc + value, 0);
+                const average = sum / bufferLength;
+                const volume = Math.min(100, (average / 255) * 100);
+                // Throttle updates - only update every 150ms
+                const currentTime = Date.now();
+                if (currentTime - lastUpdateTime >= updateInterval) {
+                    lastUpdateTime = currentTime;
+                    // Use frequencies array to store volume history
+                    setAudioData((prevData) => {
+                        const newFrequencies = [...prevData.frequencies];
+                        // Add current volume to the end of the array
+                        newFrequencies.push(volume);
+                        // Keep only the last DEFAULT_MAX_HISTORY_LENGTH volume values for waveform display
+                        if (newFrequencies.length > maxHistoryLength) {
+                            newFrequencies.shift(); // Remove oldest value
+                        }
+                        return {
+                            volume, // Always update current volume for real-time display
+                            frequencies: newFrequencies,
+                        };
+                    });
+                }
+                else {
+                    // Still update current volume for real-time feedback
+                    setAudioData((prevData) => ({
+                        ...prevData,
+                        volume, // Update volume but keep same frequencies array
+                    }));
+                }
+                animationFrameRef.current = requestAnimationFrame(analyze);
+            };
+            analyze();
+        }
+        catch (error) {
+            console.error('Error starting audio analysis:', error);
+        }
+    }, [maxHistoryLength]);
+    const stopAnalyzing = useCallback(() => {
+        setIsAnalyzing(false);
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+        if (sourceRef.current) {
+            sourceRef.current.disconnect();
+            sourceRef.current = null;
+        }
+        if (analyzerRef.current) {
+            analyzerRef.current.disconnect();
+            analyzerRef.current = null;
+        }
+        if (audioContextRef.current) {
+            audioContextRef.current.close();
+            audioContextRef.current = null;
+        }
+        // Smooth reset: gradually fade out frequencies instead of instant reset
+        setAudioData((prevData) => ({
+            volume: 0,
+            frequencies: prevData.frequencies.map(() => 0), // Fade to 0 instead of defaultFrequencies
+        }));
+    }, []);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            stopAnalyzing();
+        };
+    }, [stopAnalyzing]);
+    return {
+        audioData,
+        isAnalyzing,
+        startAnalyzing,
+        stopAnalyzing,
+    };
+};
+//# sourceMappingURL=useAudioAnalyzer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAudioAnalyzer.js","sourceRoot":"","sources":["../../src/hooks/useAudioAnalyzer.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface AudioAnalyzerData {\n  volume: number; // 0-100\n  frequencies: number[]; // Array of frequency data\n}\n\nlet lastUpdateTime = 0;\nconst updateInterval = 100;\nconst DEFAULT_MAX_HISTORY_LENGTH = 65;\n\nexport const useAudioAnalyzer = (\n  maxHistoryLength: number = DEFAULT_MAX_HISTORY_LENGTH\n) => {\n  const [audioData, setAudioData] = useState<AudioAnalyzerData>({\n    volume: 0,\n    frequencies: Array(maxHistoryLength).fill(1), // Dynamic array size\n  });\n  const [isAnalyzing, setIsAnalyzing] = useState(false);\n\n  const audioContextRef = useRef<AudioContext | null>(null);\n  const analyzerRef = useRef<AnalyserNode | null>(null);\n  const sourceRef = useRef<MediaStreamAudioSourceNode | null>(null);\n  const animationFrameRef = useRef<number | null>(null);\n\n  // Update frequencies array when maxHistoryLength changes\n  useEffect(() => {\n    setAudioData((prevData) => {\n      const newFrequencies = [...prevData.frequencies];\n\n      if (newFrequencies.length > maxHistoryLength) {\n        // Trim from beginning if too long\n        return {\n          ...prevData,\n          frequencies: newFrequencies.slice(-maxHistoryLength),\n        };\n      } else if (newFrequencies.length < maxHistoryLength) {\n        // Pad with zeros if too short\n        const padding = Array(maxHistoryLength - newFrequencies.length).fill(0);\n        return {\n          ...prevData,\n          frequencies: [...padding, ...newFrequencies],\n        };\n      }\n\n      return prevData;\n    });\n  }, [maxHistoryLength]);\n\n  const startAnalyzing = useCallback(\n    (stream: MediaStream) => {\n      try {\n        // Create audio context\n        audioContextRef.current = new (window.AudioContext ||\n          (window as unknown as { webkitAudioContext: typeof AudioContext })\n            .webkitAudioContext)();\n\n        // Create analyzer\n        analyzerRef.current = audioContextRef.current.createAnalyser();\n        analyzerRef.current.fftSize = 256;\n        analyzerRef.current.smoothingTimeConstant = 0.8;\n\n        // Create source from stream\n        sourceRef.current =\n          audioContextRef.current.createMediaStreamSource(stream);\n        sourceRef.current.connect(analyzerRef.current);\n\n        setIsAnalyzing(true);\n\n        // Add throttling variables\n\n        // Start analyzing\n        const analyze = () => {\n          if (!analyzerRef.current) return;\n\n          const bufferLength = analyzerRef.current.frequencyBinCount;\n          const dataArray = new Uint8Array(bufferLength);\n          analyzerRef.current.getByteFrequencyData(dataArray);\n\n          // Calculate volume (0-100)\n          const sum = dataArray.reduce((acc, value) => acc + value, 0);\n          const average = sum / bufferLength;\n          const volume = Math.min(100, (average / 255) * 100);\n\n          // Throttle updates - only update every 150ms\n          const currentTime = Date.now();\n          if (currentTime - lastUpdateTime >= updateInterval) {\n            lastUpdateTime = currentTime;\n\n            // Use frequencies array to store volume history\n            setAudioData((prevData) => {\n              const newFrequencies = [...prevData.frequencies];\n\n              // Add current volume to the end of the array\n              newFrequencies.push(volume);\n\n              // Keep only the last DEFAULT_MAX_HISTORY_LENGTH volume values for waveform display\n\n              if (newFrequencies.length > maxHistoryLength) {\n                newFrequencies.shift(); // Remove oldest value\n              }\n\n              return {\n                volume, // Always update current volume for real-time display\n                frequencies: newFrequencies,\n              };\n            });\n          } else {\n            // Still update current volume for real-time feedback\n            setAudioData((prevData) => ({\n              ...prevData,\n              volume, // Update volume but keep same frequencies array\n            }));\n          }\n\n          animationFrameRef.current = requestAnimationFrame(analyze);\n        };\n\n        analyze();\n      } catch (error) {\n        console.error('Error starting audio analysis:', error);\n      }\n    },\n    [maxHistoryLength]\n  );\n\n  const stopAnalyzing = useCallback(() => {\n    setIsAnalyzing(false);\n\n    if (animationFrameRef.current) {\n      cancelAnimationFrame(animationFrameRef.current);\n      animationFrameRef.current = null;\n    }\n\n    if (sourceRef.current) {\n      sourceRef.current.disconnect();\n      sourceRef.current = null;\n    }\n\n    if (analyzerRef.current) {\n      analyzerRef.current.disconnect();\n      analyzerRef.current = null;\n    }\n\n    if (audioContextRef.current) {\n      audioContextRef.current.close();\n      audioContextRef.current = null;\n    }\n\n    // Smooth reset: gradually fade out frequencies instead of instant reset\n    setAudioData((prevData) => ({\n      volume: 0,\n      frequencies: prevData.frequencies.map(() => 0), // Fade to 0 instead of defaultFrequencies\n    }));\n  }, []);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      stopAnalyzing();\n    };\n  }, [stopAnalyzing]);\n\n  return {\n    audioData,\n    isAnalyzing,\n    startAnalyzing,\n    stopAnalyzing,\n  };\n};\n"]}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+type AudioMessagePlayerData = {
+    playingId: string | null;
+    disable: boolean;
+    onPlay: (messageId: string | null, stopping?: boolean) => void;
+    setDisabled: (value: boolean) => void;
+};
+export declare const AudioMessagePlayerProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useAudioMessage: () => AudioMessagePlayerData;
+export {};
+//# sourceMappingURL=useAudioMesseagePlayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAudioMesseagePlayer.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudioMesseagePlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAG1E,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/D,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAMF,eAAO,MAAM,0BAA0B,kBAEpC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,4CAqCA,CAAC;AAEF,eAAO,MAAM,eAAe,8BAQ3B,CAAC"}

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useEffect, useRef, useState } from 'react';
+import { useScrollContainer } from './useScrollContainer';
+const AudioMessagePlayerContext = createContext(undefined);
+export const AudioMessagePlayerProvider = ({ children, }) => {
+    const [playingId, setPlayingId] = useState(null);
+    const [disable, setDisabled] = useState(false);
+    const timeoutRef = useRef(null);
+    const scroll = useScrollContainer();
+    const onPlay = (messageId, stopping = false) => {
+        if (!timeoutRef.current) {
+            scroll[2](false);
+            timeoutRef.current = setTimeout(() => {
+                scroll[2](true);
+                timeoutRef.current = null;
+            }, 300);
+        }
+        if (stopping && messageId !== playingId) {
+            return;
+        }
+        const msgId = stopping && messageId === playingId ? null : messageId;
+        setPlayingId(msgId);
+    };
+    useEffect(() => { }, []);
+    return (_jsx(AudioMessagePlayerContext.Provider, { value: {
+            playingId,
+            onPlay,
+            disable,
+            setDisabled,
+        }, children: children }));
+};
+export const useAudioMessage = () => {
+    const context = React.useContext(AudioMessagePlayerContext);
+    if (context === undefined) {
+        throw new Error('useAudioMessage must be used within a AudioMessagePlayerContext');
+    }
+    return context;
+};
+//# sourceMappingURL=useAudioMesseagePlayer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAudioMesseagePlayer.js","sourceRoot":"","sources":["../../src/hooks/useAudioMesseagePlayer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAS1D,MAAM,yBAAyB,GAAG,aAAa,CAE7C,SAAS,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,EACzC,QAAQ,GAGT,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAChE,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACxD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,MAAM,GAAG,kBAAkB,EAAkB,CAAC;IAEpD,MAAM,MAAM,GAAG,CAAC,SAAwB,EAAE,WAAoB,KAAK,EAAE,EAAE;QACrE,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;YACxB,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YACjB,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;gBAChB,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC;QAED,IAAI,QAAQ,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,QAAQ,IAAI,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;QACrE,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE,GAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAExB,OAAO,CACL,KAAC,yBAAyB,CAAC,QAAQ,IACjC,KAAK,EAAE;YACL,SAAS;YACT,MAAM;YACN,OAAO;YACP,WAAW;SACZ,YAEA,QAAQ,GAC0B,CACtC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;IAC5D,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CACb,iEAAiE,CAClE,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import React, { createContext, useEffect, useRef, useState } from 'react';\nimport { useScrollContainer } from './useScrollContainer';\n\ntype AudioMessagePlayerData = {\n  playingId: string | null;\n  disable: boolean;\n  onPlay: (messageId: string | null, stopping?: boolean) => void;\n  setDisabled: (value: boolean) => void;\n};\n\nconst AudioMessagePlayerContext = createContext<\n  AudioMessagePlayerData | undefined\n>(undefined);\n\nexport const AudioMessagePlayerProvider = ({\n  children,\n}: {\n  children: React.ReactNode;\n}) => {\n  const [playingId, setPlayingId] = useState<string | null>(null);\n  const [disable, setDisabled] = useState<boolean>(false);\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const scroll = useScrollContainer<HTMLDivElement>();\n\n  const onPlay = (messageId: string | null, stopping: boolean = false) => {\n    if (!timeoutRef.current) {\n      scroll[2](false);\n      timeoutRef.current = setTimeout(() => {\n        scroll[2](true);\n        timeoutRef.current = null;\n      }, 300);\n    }\n\n    if (stopping && messageId !== playingId) {\n      return;\n    }\n\n    const msgId = stopping && messageId === playingId ? null : messageId;\n    setPlayingId(msgId);\n  };\n\n  useEffect(() => {}, []);\n\n  return (\n    <AudioMessagePlayerContext.Provider\n      value={{\n        playingId,\n        onPlay,\n        disable,\n        setDisabled,\n      }}\n    >\n      {children}\n    </AudioMessagePlayerContext.Provider>\n  );\n};\n\nexport const useAudioMessage = () => {\n  const context = React.useContext(AudioMessagePlayerContext);\n  if (context === undefined) {\n    throw new Error(\n      'useAudioMessage must be used within a AudioMessagePlayerContext'\n    );\n  }\n  return context;\n};\n"]}

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

@@ -0,0 +1,13 @@
+export declare const useAudioRecording: (maxHistoryLength?: number) => {
+    elapsedTime: string;
+    recordingNotSupported: boolean;
+    isLoadingRecording: boolean;
+    isRecording: boolean;
+    setIsRecording: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    onRecordingCancelled: () => void;
+    onRecordingStopped: (onStop: null | ((blob: Blob) => void)) => void;
+    onRecordingStarted: () => void;
+    audioData: import("./useAudioAnalyzer").AudioAnalyzerData;
+    updateMaxHistoryLength: (newLength: number) => void;
+};
+//# sourceMappingURL=useAudioRecording.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAudioRecording.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudioRecording.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB,sBAAuB,MAAM;;;;;;;iCAoCrB,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;;;wCAYtB,MAAM;CAkBlD,CAAC"}

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

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { cancelAudioRecording, startAudioRecording, stopAudioRecording, audioRecorder, } from '../utils/audioRecording';
+import { useAudioAnalyzer } from './useAudioAnalyzer';
+export const useAudioRecording = (maxHistoryLength) => {
+    const [elapsedTime, setElapsedTime] = useState('00:00');
+    const [recordingNotSupported, setRecordingNotSupported] = useState(false);
+    const [isLoadingRecording, setIsLoadingRecording] = useState(false);
+    const [isRecording, setIsRecording] = useState(false);
+    const [dynamicMaxLength, setDynamicMaxLength] = useState(maxHistoryLength || 65);
+    // Add audio analyzer with dynamic maxHistoryLength
+    const { audioData, startAnalyzing, stopAnalyzing } = useAudioAnalyzer(dynamicMaxLength);
+    const onRecordingStarted = () => {
+        setIsRecording(true);
+        setIsLoadingRecording(false);
+        startAudioRecording((recordingStarted) => {
+            setIsRecording(recordingStarted);
+            // Start analyzing audio when recording starts
+            if (recordingStarted && audioRecorder.streamBeingCaptured) {
+                startAnalyzing(audioRecorder.streamBeingCaptured);
+            }
+        }, setRecordingNotSupported, setElapsedTime);
+    };
+    const onRecordingCancelled = () => {
+        if (!recordingNotSupported)
+            cancelAudioRecording();
+        setIsRecording(false);
+        setRecordingNotSupported(false);
+        stopAnalyzing();
+    };
+    const onRecordingStopped = (onStop) => {
+        setIsLoadingRecording(true);
+        stopAnalyzing();
+        stopAudioRecording((blob) => {
+            setIsLoadingRecording(false);
+            setIsRecording(false);
+            if (onStop) {
+                onStop(blob);
+            }
+        });
+    };
+    const updateMaxHistoryLength = (newLength) => {
+        setDynamicMaxLength(newLength);
+    };
+    return {
+        elapsedTime,
+        recordingNotSupported,
+        isLoadingRecording,
+        isRecording,
+        setIsRecording,
+        onRecordingCancelled,
+        onRecordingStopped,
+        onRecordingStarted,
+        // Add audio data for visualization
+        audioData,
+        // Add function to update maxHistoryLength
+        updateMaxHistoryLength,
+    };
+};
+//# sourceMappingURL=useAudioRecording.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAudioRecording.js","sourceRoot":"","sources":["../../src/hooks/useAudioRecording.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EACL,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,aAAa,GACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,gBAAyB,EAAE,EAAE;IAC7D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IACxD,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1E,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CACtD,gBAAgB,IAAI,EAAE,CACvB,CAAC;IAEF,mDAAmD;IACnD,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,aAAa,EAAE,GAChD,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAErC,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAC7B,mBAAmB,CACjB,CAAC,gBAAyB,EAAE,EAAE;YAC5B,cAAc,CAAC,gBAAgB,CAAC,CAAC;YACjC,8CAA8C;YAC9C,IAAI,gBAAgB,IAAI,aAAa,CAAC,mBAAmB,EAAE,CAAC;gBAC1D,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;YACpD,CAAC;QACH,CAAC,EACD,wBAAwB,EACxB,cAAc,CACf,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,CAAC,qBAAqB;YAAE,oBAAoB,EAAE,CAAC;QACnD,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAChC,aAAa,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,MAAqC,EAAE,EAAE;QACnE,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC5B,aAAa,EAAE,CAAC;QAChB,kBAAkB,CAAC,CAAC,IAAU,EAAE,EAAE;YAChC,qBAAqB,CAAC,KAAK,CAAC,CAAC;YAC7B,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,IAAI,CAAC,CAAC;YACf,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,CAAC,SAAiB,EAAE,EAAE;QACnD,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO;QACL,WAAW;QACX,qBAAqB;QACrB,kBAAkB;QAClB,WAAW;QACX,cAAc;QACd,oBAAoB;QACpB,kBAAkB;QAClB,kBAAkB;QAClB,mCAAmC;QACnC,SAAS;QACT,0CAA0C;QAC1C,sBAAsB;KACvB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useState } from 'react';\nimport {\n  cancelAudioRecording,\n  startAudioRecording,\n  stopAudioRecording,\n  audioRecorder,\n} from '../utils/audioRecording';\nimport { useAudioAnalyzer } from './useAudioAnalyzer';\n\nexport const useAudioRecording = (maxHistoryLength?: number) => {\n  const [elapsedTime, setElapsedTime] = useState('00:00');\n  const [recordingNotSupported, setRecordingNotSupported] = useState(false);\n  const [isLoadingRecording, setIsLoadingRecording] = useState(false);\n  const [isRecording, setIsRecording] = useState(false);\n  const [dynamicMaxLength, setDynamicMaxLength] = useState(\n    maxHistoryLength || 65\n  );\n\n  // Add audio analyzer with dynamic maxHistoryLength\n  const { audioData, startAnalyzing, stopAnalyzing } =\n    useAudioAnalyzer(dynamicMaxLength);\n\n  const onRecordingStarted = () => {\n    setIsRecording(true);\n    setIsLoadingRecording(false);\n    startAudioRecording(\n      (recordingStarted: boolean) => {\n        setIsRecording(recordingStarted);\n        // Start analyzing audio when recording starts\n        if (recordingStarted && audioRecorder.streamBeingCaptured) {\n          startAnalyzing(audioRecorder.streamBeingCaptured);\n        }\n      },\n      setRecordingNotSupported,\n      setElapsedTime\n    );\n  };\n\n  const onRecordingCancelled = () => {\n    if (!recordingNotSupported) cancelAudioRecording();\n    setIsRecording(false);\n    setRecordingNotSupported(false);\n    stopAnalyzing();\n  };\n\n  const onRecordingStopped = (onStop: null | ((blob: Blob) => void)) => {\n    setIsLoadingRecording(true);\n    stopAnalyzing();\n    stopAudioRecording((blob: Blob) => {\n      setIsLoadingRecording(false);\n      setIsRecording(false);\n      if (onStop) {\n        onStop(blob);\n      }\n    });\n  };\n\n  const updateMaxHistoryLength = (newLength: number) => {\n    setDynamicMaxLength(newLength);\n  };\n\n  return {\n    elapsedTime,\n    recordingNotSupported,\n    isLoadingRecording,\n    isRecording,\n    setIsRecording,\n    onRecordingCancelled,\n    onRecordingStopped,\n    onRecordingStarted,\n    // Add audio data for visualization\n    audioData,\n    // Add function to update maxHistoryLength\n    updateMaxHistoryLength,\n  };\n};\n"]}

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

@@ -0,0 +1,29 @@
+import { SuggestionType } from 'types/common.type';
+import { BotType } from '../types/bot.type';
+import { ChatMessageType } from '../types/flowise.type';
+type PropsType = {
+    id?: string;
+    agentId?: string;
+    initialMessages: ChatMessageType[];
+    initialInput?: string;
+};
+type ReturnType = {
+    messages?: ChatMessageType[];
+    setMessages: (messages: ChatMessageType[]) => void;
+    handleSubmit: (event?: {
+        preventDefault?: () => void;
+    }) => void;
+    input?: string;
+    setInput: (input: string) => void;
+    isLoading: boolean;
+    stop: () => void;
+    chatId: string;
+    append: (message: ChatMessageType) => Promise<void>;
+    bot: BotType | null;
+    enableTTS: boolean;
+    setEnableTTS: (value: boolean) => void;
+    suggestions: SuggestionType[];
+};
+export declare const useChat: (props: PropsType) => ReturnType;
+export {};
+//# sourceMappingURL=useChat.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChat.d.ts","sourceRoot":"","sources":["../../src/hooks/useChat.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAInD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAEL,eAAe,EAKhB,MAAM,uBAAuB,CAAC;AAS/B,KAAK,SAAS,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,eAAe,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;IAC7B,WAAW,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,KAAK,CAAC,EAAE;QAAE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,GAAG,EAAE,OAAO,GAAG,IAAI,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,cAAc,EAAE,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,OAAO,UAAW,SAAS,KAAG,UAiR1C,CAAC"}

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

@@ -0,0 +1,225 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import useSWR from 'swr';
+import { getBot } from '../services/bot.service';
+import { getSuggestions, predict } from '../services/chat.service';
+import { generateUUID } from '../utils/commonUtils';
+import { useConfiguration } from './useConfiguration';
+import { parseTraceEventMessage, groupChatflowSteps as groupChatFlowSteps, groupAgentFlowSteps, } from 'utils/agentTraceUtils';
+export const useChat = (props) => {
+    const { id, initialMessages, initialInput, agentId } = props;
+    const { apiHost, overrideConfig, theme, skipSuggestion = false, } = useConfiguration();
+    const idKey = id ?? generateUUID();
+    const chatIdRef = useRef(idKey);
+    const [chatId, setChatId] = useState(idKey);
+    const [bot, setBot] = useState(null);
+    const [enableTTS, setEnableTTS] = useState(false);
+    const [suggestions, setSuggestions] = useState([]);
+    const updateChatId = (uuid) => {
+        chatIdRef.current = uuid;
+        setChatId(uuid);
+    };
+    useEffect(() => {
+        if (id) {
+            updateChatId(id);
+        }
+    }, [id]);
+    useEffect(() => {
+        getBot(agentId || 'default', apiHost).then((res) => setBot(res));
+    }, [agentId, apiHost]);
+    useEffect(() => {
+        if (bot?.id && chatId) {
+            updateSuggestions(`Agent name: ${bot.name}, Title: ${theme?.overview?.title}`);
+        }
+    }, [bot?.id, chatId, skipSuggestion]);
+    const updateSuggestions = useCallback(async (question) => {
+        if (skipSuggestion) {
+            setSuggestions([]);
+            return;
+        }
+        const resSuggestions = await getSuggestions({
+            id: chatId,
+            question,
+            apiHost,
+            botId: bot?.id,
+        });
+        setSuggestions(resSuggestions);
+    }, [setSuggestions, chatId, bot?.id, skipSuggestion]);
+    const processResponseStream = async (msgs, req) => {
+        // Do an optimistic update to the chat state to show the updated messages immediately:
+        mutateMessages(msgs, false);
+        const newMessage = {
+            id: generateUUID(),
+            chatId: chatIdRef.current,
+            role: 'apiMessage',
+            content: '',
+            createdDate: new Date().toISOString(),
+            tts: enableTTS,
+            new: true,
+            agentSteps: [],
+        };
+        const onUpdate = (chunk) => {
+            if (chunk?.event === 'token') {
+                newMessage.content = newMessage.content + chunk.data;
+                mutateMessages([...msgs, { ...newMessage }]);
+            }
+            else if (chunk.event == 'usedTools') {
+                newMessage.usedTools = chunk.data;
+                mutateMessages([...msgs, { ...newMessage }]);
+            }
+            else if (chunk.event == 'sourceDocuments') {
+                newMessage.sourceDocuments = chunk.data;
+                mutateMessages([...msgs, { ...newMessage }]);
+            }
+            else if (chunk.event == 'metadata') {
+                newMessage.metaData = chunk.data;
+                const lastMsg = msgs[msgs.length - 1];
+                if (lastMsg) {
+                    lastMsg.content = newMessage.metaData.question;
+                }
+                mutateMessages([...msgs, { ...newMessage }]);
+                updateSuggestions(`Agent name: ${bot?.name}, Title: ${theme?.overview?.title}`);
+            }
+            else if (chunk.event == 'audio') {
+                newMessage.ttsUrl = chunk.data;
+                mutateMessages([...msgs, { ...newMessage }]);
+            }
+            else if (chunk.event == 'agent_trace') {
+                // Handle agent trace events for chatflow thinking display
+                const agentStep = parseTraceEventMessage(chunk);
+                if (agentStep) {
+                    if (!newMessage.agentSteps) {
+                        newMessage.agentSteps = [];
+                    }
+                    newMessage.agentSteps.push(agentStep);
+                    newMessage.agentSteps = groupChatFlowSteps(newMessage.agentSteps);
+                    mutateMessages([...msgs, { ...newMessage }]);
+                }
+            }
+            else if (chunk.event == 'agentFlowEvent' ||
+                chunk.event == 'nextAgentFlow' ||
+                chunk.event == 'agentFlowExecutedData') {
+                // Handle AgentFlow events for multi-agent workflow display
+                const agentStep = parseTraceEventMessage(chunk);
+                if (agentStep) {
+                    if (!newMessage.agentSteps) {
+                        newMessage.agentSteps = [];
+                    }
+                    newMessage.agentSteps.push(agentStep);
+                    // Combine both grouped step types
+                    newMessage.agentSteps = groupAgentFlowSteps(newMessage.agentSteps);
+                    mutateMessages([...msgs, { ...newMessage }]);
+                }
+            }
+        };
+        return predict({
+            req,
+            apiHost,
+            onUpdate,
+        });
+    };
+    // Store a empty array as the initial messages
+    // (instead of using a default parameter value that gets re-created each time)
+    // to avoid re-renders:
+    const [initialMessagesFallback] = useState([]);
+    // Store the chat state in SWR, using the chatId as the key to share states.
+    const { data: messages, mutate: mutateMessages } = useSWR([chatId, 'messages'], null, { fallbackData: initialMessages ?? initialMessagesFallback });
+    // Keep the latest messages in a ref.
+    const messagesRef = useRef(messages || []);
+    useEffect(() => {
+        messagesRef.current = messages || [];
+    }, [messages]);
+    // We store loading state in another hook to sync loading states across hook invocations
+    const { data: isLoading = false, mutate: mutateLoading } = useSWR([chatId, 'loading'], null);
+    // Abort controller to cancel the current API call.
+    const abortControllerRef = useRef(null);
+    const triggerRequest = useCallback(async (msgs, req) => {
+        try {
+            mutateLoading(true);
+            const abortController = new AbortController();
+            abortControllerRef.current = abortController;
+            await processResponseStream(msgs, req);
+            abortControllerRef.current = null;
+        }
+        catch (err) {
+            // Ignore abort errors as they are expected.
+            if (err.name === 'AbortError') {
+                abortControllerRef.current = null;
+                return null;
+            }
+            console.error(err);
+        }
+        finally {
+            mutateLoading(false);
+        }
+    }, [mutateMessages, mutateLoading, enableTTS]);
+    const append = async (message) => {
+        if (!message.content) {
+            return;
+        }
+        const msgs = messagesRef.current.concat({
+            id: generateUUID(),
+            chatId: chatIdRef.current,
+            role: 'userMessage',
+            content: message.content,
+            createdDate: new Date().toISOString(),
+        });
+        triggerRequest(msgs, {
+            chatId: chatIdRef.current,
+            question: message.content,
+            chatflowId: bot?.id,
+            overrideConfig: overrideConfig,
+            tts: enableTTS,
+        });
+        setInput('');
+    };
+    const stop = useCallback(() => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current?.abort();
+            abortControllerRef.current = null;
+        }
+    }, []);
+    const setMessages = useCallback((msgs) => {
+        mutateMessages(msgs, false);
+        messagesRef.current = msgs;
+    }, [mutateMessages]);
+    // Input state and handlers.
+    const [input, setInput] = useState(initialInput);
+    const handleSubmit = useCallback(async (event, files) => {
+        event?.preventDefault?.();
+        if (!input && !files)
+            return;
+        const msgs = messagesRef.current.concat({
+            id: generateUUID(),
+            chatId: chatIdRef.current,
+            role: 'userMessage',
+            content: input || '',
+            createdDate: new Date().toISOString(),
+            fileUploads: files || [],
+        });
+        triggerRequest(msgs, {
+            chatId: chatIdRef.current,
+            question: input || '',
+            uploads: files || [],
+            chatflowId: bot?.id,
+            overrideConfig: overrideConfig,
+            tts: enableTTS,
+        });
+        setInput('');
+    }, [input, triggerRequest, bot]);
+    return {
+        messages,
+        setMessages,
+        input,
+        setInput,
+        isLoading,
+        handleSubmit,
+        stop,
+        chatId,
+        append,
+        bot,
+        enableTTS,
+        setEnableTTS,
+        suggestions,
+    };
+};
+//# sourceMappingURL=useChat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChat.js","sourceRoot":"","sources":["../../src/hooks/useChat.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport useSWR from 'swr';\nimport { SuggestionType } from 'types/common.type';\nimport { StreamResponse } from '../models/FlowiseClient';\nimport { getBot } from '../services/bot.service';\nimport { getSuggestions, predict } from '../services/chat.service';\nimport { BotType } from '../types/bot.type';\nimport {\n  ChatMessageMetadataType,\n  ChatMessageType,\n  IFileUpload,\n  PredictionData,\n  SourceDocument,\n  ToolUsage,\n} from '../types/flowise.type';\nimport { generateUUID } from '../utils/commonUtils';\nimport { useConfiguration } from './useConfiguration';\nimport {\n  parseTraceEventMessage,\n  groupChatflowSteps as groupChatFlowSteps,\n  groupAgentFlowSteps,\n} from 'utils/agentTraceUtils';\n\ntype PropsType = {\n  id?: string;\n  agentId?: string;\n  initialMessages: ChatMessageType[];\n  initialInput?: string;\n};\n\ntype ReturnType = {\n  messages?: ChatMessageType[];\n  setMessages: (messages: ChatMessageType[]) => void;\n  handleSubmit: (event?: { preventDefault?: () => void }) => void;\n  input?: string;\n  setInput: (input: string) => void;\n  isLoading: boolean;\n  stop: () => void;\n  chatId: string;\n  append: (message: ChatMessageType) => Promise<void>;\n  bot: BotType | null;\n  enableTTS: boolean;\n  setEnableTTS: (value: boolean) => void;\n  suggestions: SuggestionType[];\n};\n\nexport const useChat = (props: PropsType): ReturnType => {\n  const { id, initialMessages, initialInput, agentId } = props;\n  const {\n    apiHost,\n    overrideConfig,\n    theme,\n    skipSuggestion = false,\n  } = useConfiguration();\n\n  const idKey = id ?? generateUUID();\n  const chatIdRef = useRef<string>(idKey);\n  const [chatId, setChatId] = useState(idKey);\n  const [bot, setBot] = useState<BotType | null>(null);\n  const [enableTTS, setEnableTTS] = useState(false);\n  const [suggestions, setSuggestions] = useState<SuggestionType[]>([]);\n\n  const updateChatId = (uuid: string) => {\n    chatIdRef.current = uuid;\n    setChatId(uuid);\n  };\n\n  useEffect(() => {\n    if (id) {\n      updateChatId(id);\n    }\n  }, [id]);\n\n  useEffect(() => {\n    getBot(agentId || 'default', apiHost).then((res) => setBot(res));\n  }, [agentId, apiHost]);\n\n  useEffect(() => {\n    if (bot?.id && chatId) {\n      updateSuggestions(\n        `Agent name: ${bot.name}, Title: ${theme?.overview?.title}`\n      );\n    }\n  }, [bot?.id, chatId, skipSuggestion]);\n\n  const updateSuggestions = useCallback(\n    async (question?: string) => {\n      if (skipSuggestion) {\n        setSuggestions([]);\n        return;\n      }\n\n      const resSuggestions = await getSuggestions({\n        id: chatId,\n        question,\n        apiHost,\n        botId: bot?.id,\n      });\n      setSuggestions(resSuggestions);\n    },\n    [setSuggestions, chatId, bot?.id, skipSuggestion]\n  );\n\n  const processResponseStream = async (\n    msgs: ChatMessageType[],\n    req: PredictionData\n  ) => {\n    // Do an optimistic update to the chat state to show the updated messages immediately:\n    mutateMessages(msgs, false);\n\n    const newMessage: ChatMessageType = {\n      id: generateUUID(),\n      chatId: chatIdRef.current,\n      role: 'apiMessage',\n      content: '',\n      createdDate: new Date().toISOString(),\n      tts: enableTTS,\n      new: true,\n      agentSteps: [],\n    };\n\n    const onUpdate = (chunk: StreamResponse) => {\n      if (chunk?.event === 'token') {\n        newMessage.content = newMessage.content + (chunk.data as string);\n        mutateMessages([...msgs, { ...newMessage }]);\n      } else if (chunk.event == 'usedTools') {\n        newMessage.usedTools = chunk.data as ToolUsage[];\n        mutateMessages([...msgs, { ...newMessage }]);\n      } else if (chunk.event == 'sourceDocuments') {\n        newMessage.sourceDocuments = chunk.data as SourceDocument[];\n        mutateMessages([...msgs, { ...newMessage }]);\n      } else if (chunk.event == 'metadata') {\n        newMessage.metaData = chunk.data as ChatMessageMetadataType;\n        const lastMsg = msgs[msgs.length - 1];\n        if (lastMsg) {\n          lastMsg.content = newMessage.metaData.question;\n        }\n        mutateMessages([...msgs, { ...newMessage }]);\n        updateSuggestions(\n          `Agent name: ${bot?.name}, Title: ${theme?.overview?.title}`\n        );\n      } else if (chunk.event == 'audio') {\n        newMessage.ttsUrl = chunk.data as string;\n        mutateMessages([...msgs, { ...newMessage }]);\n      } else if (chunk.event == 'agent_trace') {\n        // Handle agent trace events for chatflow thinking display\n        const agentStep = parseTraceEventMessage(chunk as any);\n        if (agentStep) {\n          if (!newMessage.agentSteps) {\n            newMessage.agentSteps = [];\n          }\n          newMessage.agentSteps.push(agentStep);\n\n          newMessage.agentSteps = groupChatFlowSteps(newMessage.agentSteps);\n          mutateMessages([...msgs, { ...newMessage }]);\n        }\n      } else if (\n        chunk.event == 'agentFlowEvent' ||\n        chunk.event == 'nextAgentFlow' ||\n        chunk.event == 'agentFlowExecutedData'\n      ) {\n        // Handle AgentFlow events for multi-agent workflow display\n        const agentStep = parseTraceEventMessage(chunk as any);\n        if (agentStep) {\n          if (!newMessage.agentSteps) {\n            newMessage.agentSteps = [];\n          }\n          newMessage.agentSteps.push(agentStep);\n\n          // Combine both grouped step types\n          newMessage.agentSteps = groupAgentFlowSteps(newMessage.agentSteps);\n          mutateMessages([...msgs, { ...newMessage }]);\n        }\n      }\n    };\n\n    return predict({\n      req,\n      apiHost,\n      onUpdate,\n    });\n  };\n\n  // Store a empty array as the initial messages\n  // (instead of using a default parameter value that gets re-created each time)\n  // to avoid re-renders:\n  const [initialMessagesFallback] = useState([]);\n\n  // Store the chat state in SWR, using the chatId as the key to share states.\n  const { data: messages, mutate: mutateMessages } = useSWR<ChatMessageType[]>(\n    [chatId, 'messages'],\n    null,\n    { fallbackData: initialMessages ?? initialMessagesFallback }\n  );\n\n  // Keep the latest messages in a ref.\n  const messagesRef = useRef<ChatMessageType[]>(messages || []);\n  useEffect(() => {\n    messagesRef.current = messages || [];\n  }, [messages]);\n\n  // We store loading state in another hook to sync loading states across hook invocations\n  const { data: isLoading = false, mutate: mutateLoading } = useSWR<boolean>(\n    [chatId, 'loading'],\n    null\n  );\n\n  // Abort controller to cancel the current API call.\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const triggerRequest = useCallback(\n    async (msgs: ChatMessageType[], req: PredictionData) => {\n      try {\n        mutateLoading(true);\n\n        const abortController = new AbortController();\n        abortControllerRef.current = abortController;\n\n        await processResponseStream(msgs, req);\n\n        abortControllerRef.current = null;\n      } catch (err) {\n        // Ignore abort errors as they are expected.\n        if ((err as any).name === 'AbortError') {\n          abortControllerRef.current = null;\n          return null;\n        }\n\n        console.error(err);\n      } finally {\n        mutateLoading(false);\n      }\n    },\n    [mutateMessages, mutateLoading, enableTTS]\n  );\n\n  const append = async (message: ChatMessageType) => {\n    if (!message.content) {\n      return;\n    }\n    const msgs = messagesRef.current.concat({\n      id: generateUUID(),\n      chatId: chatIdRef.current,\n      role: 'userMessage',\n      content: message.content,\n      createdDate: new Date().toISOString(),\n    });\n\n    triggerRequest(msgs, {\n      chatId: chatIdRef.current,\n      question: message.content,\n      chatflowId: bot?.id,\n      overrideConfig: overrideConfig,\n      tts: enableTTS,\n    });\n    setInput('');\n  };\n\n  const stop = useCallback(() => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current?.abort();\n      abortControllerRef.current = null;\n    }\n  }, []);\n\n  const setMessages = useCallback(\n    (msgs: ChatMessageType[]) => {\n      mutateMessages(msgs, false);\n      messagesRef.current = msgs;\n    },\n    [mutateMessages]\n  );\n\n  // Input state and handlers.\n  const [input, setInput] = useState(initialInput);\n\n  const handleSubmit = useCallback(\n    async (event?: { preventDefault?: () => void }, files?: IFileUpload[]) => {\n      event?.preventDefault?.();\n\n      if (!input && !files) return;\n\n      const msgs = messagesRef.current.concat({\n        id: generateUUID(),\n        chatId: chatIdRef.current,\n        role: 'userMessage',\n        content: input || '',\n        createdDate: new Date().toISOString(),\n        fileUploads: files || [],\n      });\n\n      triggerRequest(msgs, {\n        chatId: chatIdRef.current,\n        question: input || '',\n        uploads: files || [],\n        chatflowId: bot?.id,\n        overrideConfig: overrideConfig,\n        tts: enableTTS,\n      });\n      setInput('');\n    },\n    [input, triggerRequest, bot]\n  );\n\n  return {\n    messages,\n    setMessages,\n    input,\n    setInput,\n    isLoading,\n    handleSubmit,\n    stop,\n    chatId,\n    append,\n    bot,\n    enableTTS,\n    setEnableTTS,\n    suggestions,\n  };\n};\n"]}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { EVENT_TYPE } from '../models';
+import { SuggestionType } from '../types/common.type';
+import { ChatMessageType } from '../types/flowise.type';
+type ChatData = {
+    chatId?: string | undefined;
+    listeners?: Record<EVENT_TYPE, (props?: any) => void>;
+    initialMessages?: ChatMessageType[];
+    suggestedActions?: SuggestionType[];
+};
+type Actions = {
+    createNew?: () => string;
+};
+export declare const ChatDataProvider: ({ children, data, }: {
+    children: React.ReactNode;
+    data: ChatData;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useChatData: () => ChatData & Actions;
+export {};
+//# sourceMappingURL=useChatData.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChatData.d.ts","sourceRoot":"","sources":["../../src/hooks/useChatData.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIxD,KAAK,QAAQ,GAAG;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;IACtD,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;IACpC,gBAAgB,CAAC,EAAE,cAAc,EAAE,CAAC;CACrC,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC;CAC1B,CAAC;AAMF,eAAO,MAAM,gBAAgB,wBAG1B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,QAAQ,CAAC;CAChB,4CAqEA,CAAC;AAEF,eAAO,MAAM,WAAW,0BAMvB,CAAC"}