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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,283 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from 'framer-motion';
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { useWindowSize } from 'usehooks-ts';
+import { useAudioRecording } from '../../../hooks/useAudioRecording';
+import { useChatData } from '../../../hooks/useChatData';
+import { useConfiguration } from '../../../hooks/useConfiguration';
+import { getAudioTranscript } from '../../../services/chat.service';
+import { cn, generateUUID, sleep } from '../../../utils/commonUtils';
+import { getBestMimeType, getFileExtension } from '../../../utils/fileUtils';
+import { ArrowUpIcon, ClikAIIcon, ClikChatIcon, ClikMicrophoneIcon, PlusIcon, } from '../Icons';
+import { Button } from '../ui/Button';
+import { VoiceRecordingUI } from '../VoiceRecordingUI';
+import { Textarea } from '../ui/Textarea';
+export const MultimodalInputSimplified = (props) => {
+    const { input, setInput, message, handleSubmit, className, apiHost, setEnableTTS, } = props;
+    const { onLoaded, theme = {} } = useConfiguration();
+    const { modeButtonChat = false, gapInput = 16 } = theme;
+    const { listeners } = useChatData();
+    const { isRecording, onRecordingCancelled, onRecordingStopped, onRecordingStarted, audioData, elapsedTime, updateMaxHistoryLength, } = useAudioRecording();
+    const { width } = useWindowSize();
+    const language = theme?.language?.options
+        ?.find((option) => option.code === theme?.language?.code)
+        ?.name?.toUpperCase() || 'EN';
+    const [transcribing, setTranscribing] = useState(false);
+    const [showAudioPlayer, setShowAudioPlayer] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    const [expanded, setExpanded] = useState(!modeButtonChat);
+    const [animationCompleted, setAnimationCompleted] = useState(false);
+    const textareaRef = useRef(null);
+    const setInputRef = useRef(null);
+    const welcomeMessage = theme.welcomeMessage || "Hi, I'm your showroom assistant";
+    const adjustHeight = () => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = '24px';
+            textareaRef.current.style.height =
+                `${textareaRef.current?.scrollHeight}px`;
+        }
+    };
+    const readonly = isRecording || transcribing;
+    const handleSetInput = useCallback((value) => {
+        setInput(value);
+    }, [setInput]);
+    const handleInput = (event) => {
+        handleSetInput(event.target.value);
+        if (textareaRef.current) {
+            textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
+        }
+    };
+    const submitForm = useCallback(async () => {
+        setSubmitting(true);
+        if (listeners?.['ON_SUBMIT_MESSAGE']) {
+            listeners['ON_SUBMIT_MESSAGE']();
+        }
+        handleSubmit(undefined);
+        await sleep(500);
+        setShowAudioPlayer(true);
+    }, [handleSubmit, listeners]);
+    const toAudioBase64 = (blob) => {
+        return new Promise((resolve) => {
+            let mimeType = getBestMimeType();
+            const pos = blob.type.indexOf(';');
+            if (pos === -1) {
+                mimeType = blob.type;
+            }
+            else {
+                mimeType = blob.type.substring(0, pos);
+            }
+            // read blob and add to previews
+            const reader = new FileReader();
+            reader.readAsDataURL(blob);
+            reader.onloadend = () => {
+                const base64data = reader.result;
+                const upload = {
+                    tempId: generateUUID(),
+                    data: base64data,
+                    type: 'audio',
+                    name: `audio_${Date.now()}.${getFileExtension(mimeType)}`,
+                    mime: mimeType,
+                };
+                resolve(upload);
+            };
+        });
+    };
+    const speechToText = async (blob) => {
+        try {
+            setTranscribing(true);
+            const fileUpload = await toAudioBase64(blob);
+            const base64Data = fileUpload.data.replace(/^data:.+;base64,/, '');
+            const byteCharacters = atob(base64Data); // Decode Base64 string
+            const byteNumbers = new Array(byteCharacters.length);
+            for (let i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            const byteArray = new Uint8Array(byteNumbers);
+            const file = new File([byteArray], fileUpload.name, {
+                lastModified: new Date().getTime(),
+                type: fileUpload.type,
+            });
+            const text = await getAudioTranscript({ file, apiHost, language });
+            if (text) {
+                handleSetInput(text);
+            }
+        }
+        catch (error) {
+            console.error('Error getting audio transcript!', error);
+        }
+        finally {
+            setTranscribing(false);
+        }
+    };
+    const handleFinishRecording = () => {
+        if (isRecording) {
+            onRecordingStopped(speechToText);
+        }
+        if (listeners?.['ON_FINISHED_RECORDING']) {
+            listeners['ON_FINISHED_RECORDING']();
+        }
+    };
+    const handleStartRecording = useCallback(() => {
+        onRecordingStarted();
+        handleSetInput('');
+        if (listeners?.['ON_START_RECORDING']) {
+            listeners['ON_START_RECORDING']();
+        }
+    }, [onRecordingStarted, handleSetInput, listeners]);
+    const handleCancelRecording = () => {
+        handleOnClick('CancelRecording');
+        onRecordingCancelled();
+        handleSetInput('');
+        if (listeners?.['ON_CANCEL_RECORDING']) {
+            listeners['ON_CANCEL_RECORDING']();
+        }
+    };
+    const handleSend = useCallback(async () => {
+        if (!isRecording) {
+            submitForm();
+        }
+    }, [submitForm, isRecording]);
+    const handleOnClickOpenChatmode = () => {
+        handleOnClick('WelcomeMsg');
+    };
+    const handleOnClick = (type) => {
+        if (listeners?.['ON_CLICK']) {
+            listeners['ON_CLICK'](type);
+        }
+    };
+    const handleToggleExpand = () => {
+        handleOnClick('ClickButtonAI');
+        setExpanded(!expanded);
+        setAnimationCompleted(false);
+        if (!expanded) {
+            // Focus vào textarea khi expand
+            setTimeout(() => {
+                if (textareaRef.current) {
+                    textareaRef.current.focus();
+                }
+            }, 300);
+        }
+    };
+    useEffect(() => {
+        adjustHeight();
+    }, [input, readonly]);
+    useEffect(() => {
+        setInputRef.current = setInput;
+    }, [setInput]);
+    useEffect(() => {
+        if (onLoaded) {
+            onLoaded({
+                setInput: (txt) => {
+                    if (setInputRef.current) {
+                        setInputRef.current(txt || '');
+                    }
+                },
+                startRecording: async () => {
+                    handleStartRecording();
+                },
+            });
+        }
+    }, []);
+    useEffect(() => {
+        setEnableTTS(true);
+        return () => {
+            setEnableTTS(false);
+        };
+    }, [setEnableTTS]);
+    useEffect(() => {
+        if (message && submitting) {
+            setSubmitting(false);
+            if (listeners?.['ON_FINISHED_SUBMITTING_MESSAGE']) {
+                listeners['ON_FINISHED_SUBMITTING_MESSAGE']();
+            }
+        }
+    }, [message, submitting, listeners]);
+    const handleWidthChange = useCallback((maxBars) => {
+        updateMaxHistoryLength(maxBars);
+    }, [updateMaxHistoryLength]);
+    const recordingPlaceholder = isRecording && !transcribing
+        ? theme?.input?.recordingPlaceholder || 'Recording...'
+        : '';
+    const transcribingPlaceholder = transcribing
+        ? theme?.input?.transcribingPlaceholder || 'Transcribing...'
+        : '';
+    const processing = isRecording || transcribing;
+    const canShowAudioPlayer = !theme?.noAutoplayMessage &&
+        showAudioPlayer &&
+        message?.new &&
+        message?.tts;
+    // Animation variants
+    const containerVariants = {
+        collapsed: {
+            width: '0px',
+            height: '0px',
+            opacity: 0,
+            borderRadius: '28px',
+        },
+        expanded: {
+            width: width ? `${width - gapInput - 2}px` : '100%',
+            height: 'auto',
+            opacity: 1,
+            borderRadius: '16px',
+        },
+    };
+    const contentVariants = {
+        collapsed: {
+            opacity: 0,
+            scale: 0.8,
+        },
+        expanded: {
+            opacity: 1,
+            scale: 1,
+        },
+    };
+    const showButtonAI = !isRecording &&
+        modeButtonChat &&
+        !input?.length &&
+        !processing &&
+        !submitting &&
+        !transcribing;
+    return (_jsxs("div", { className: "flex justify-end", children: [showButtonAI && (_jsx("div", { className: cn('absolute z-20 transition-all duration-300 top-1 right-1'), children: _jsx(Button, { className: cn('rounded-full bg-[#fff] hover:bg-[#fff] text-white border-none shadow-lg w-[32px] h-[32px] p-0 flex items-center justify-center', expanded && 'bg-[#595959] hover:bg-[#595959] text-white'), onClick: handleToggleExpand, children: expanded ? (_jsx(ClikChatIcon, { size: 20, style: { width: '20px', height: '20px' } })) : (_jsx(ClikAIIcon, { size: 20, style: { width: '20px', height: '20px' } })) }) })), _jsx(motion.div, { variants: containerVariants, initial: "collapsed", animate: expanded ? 'expanded' : 'collapsed', transition: { duration: 0.3, ease: 'easeInOut' }, className: cn('relative flex gap-4  scrollbar-hidden  ', className, {
+                    'flex-col min-h-[40px]': !canShowAudioPlayer && expanded,
+                    'flex-row min-h-[40px]': canShowAudioPlayer && expanded,
+                    'items-center justify-center': !expanded,
+                }), children: _jsx(AnimatePresence, { children: expanded && (_jsx(motion.div, { variants: contentVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", transition: { duration: 0.2, delay: 0 }, onAnimationComplete: () => setAnimationCompleted(true), className: `w-full  `, children: !canShowAudioPlayer && (_jsx(_Fragment, { children: _jsxs("div", { className: " w-full flex gap-4 justify-end items-end", children: [isRecording ? (_jsx(Button, { className: ` rounded-full w-[40px] h-[40px] flex items-center  justify-center bg-white hover:bg-white`, onClick: (event) => {
+                                            event.preventDefault();
+                                            handleFinishRecording();
+                                        }, children: _jsx("div", { className: "w-[12px] h-[12px] bg-muted-foreground rounded-full" }) })) : (_jsx(Button, { className: ` rounded-full w-[40px] h-[40px] flex items-center justify-center bg-white hover:bg-white`, onClick: (event) => {
+                                            event.preventDefault();
+                                            handleOnClick('AddFile');
+                                        }, children: _jsx(PlusIcon, { size: 20, color: '#71717A' }) })), _jsxs("div", { className: "block flex-1 min-w-0 min-h-[40px] relative bg-white rounded-[24px] border border-[#E5E5E5] shadow-[0px_2px_6px_0px_rgba(0,0,0,0.08)] backdrop-blur-[50px]", children: [_jsx(AnimatePresence, { mode: "wait", children: _jsx(_Fragment, { children: _jsx(motion.div, { initial: { opacity: 0, height: 40 }, animate: { opacity: 1, height: 'auto' }, exit: { opacity: 0, height: 40 }, transition: {
+                                                            duration: 0.2,
+                                                            ease: 'easeInOut',
+                                                        }, style: {
+                                                            display: input.length || transcribing
+                                                                ? 'block'
+                                                                : 'none',
+                                                        }, children: _jsx(Textarea, { readOnly: readonly, ref: textareaRef, placeholder: transcribing
+                                                                ? transcribingPlaceholder
+                                                                : 'Nhập tin nhắn của bạn...', value: input, onChange: handleInput, className: cn(`min-h-[24px] max-h-[120px] overflow-hidden resize-none text-base bg-muted bg-[#ffffff] scrollbar-hidden p-[12px] pb-[32px] rounded-[24px] border border-[#E5E5E5] shadow-[0px_2px_6px_0px_rgba(0,0,0,0.08)] backdrop-blur-[50px]  `, className), style: {
+                                                                height: 60,
+                                                            }, autoFocus: true, onKeyDown: (event) => {
+                                                                if (event.key === 'Enter' &&
+                                                                    !event.shiftKey) {
+                                                                    event.preventDefault();
+                                                                    handleOnClick('Submit');
+                                                                    handleSend();
+                                                                }
+                                                            } }) }, "textarea") }) }), !isRecording &&
+                                                !input?.length &&
+                                                !transcribing &&
+                                                animationCompleted && (_jsx("div", { className: "p-[10px] pr-[80px] text-[14px] text-muted-foreground cursor-pointer w-full  text-ellipsis overflow-hidden whitespace-nowrap truncate", onClick: handleOnClickOpenChatmode, children: welcomeMessage })), _jsx("div", { className: "w-full ", children: _jsx(VoiceRecordingUI, { isRecording: isRecording, elapsedTime: elapsedTime, onCancel: handleCancelRecording, transcribing: transcribing, audioData: audioData, label: transcribing
+                                                        ? transcribingPlaceholder
+                                                        : recordingPlaceholder, onWidthChange: handleWidthChange }) }), _jsxs("div", { className: "button-voice right-[4px] absolute bottom-[4px] flex gap-[12px]", children: [!isRecording && (_jsx(Button, { className: "rounded-full z-[2] p-1.5 h-[32px] w-[32px] m-0 bg-transparent", onClick: (event) => {
+                                                            event.preventDefault();
+                                                            handleOnClick('StartRecording');
+                                                            handleStartRecording();
+                                                        }, children: _jsx(ClikMicrophoneIcon, { size: 20 }) })), _jsx(Button, { className: "rounded-full z-[2] p-1.5 h-[32px] w-[32px] m-0 border bg-[#71717A]", onClick: (event) => {
+                                                            event.preventDefault();
+                                                            handleOnClick('Submit');
+                                                            handleSend();
+                                                        }, disabled: isRecording || input.length === 0, children: _jsx(ArrowUpIcon, { size: 20 }) })] })] })] }) })) })) }) })] }));
+};
+//# sourceMappingURL=MultimodalInputSimplified.js.map