@clikvn/agent-widget-embedded 1.1.11 → 1.1.12

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/BookMeetingDetail.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { BookMeetingType } from 'types/bookMeeting.type';
+import { UserContactType } from 'types/userContact.type';
+interface Props {
+    userContact?: UserContactType;
+    booking: BookMeetingType;
+    loading: boolean;
+    theme?: Record<string, any>;
+}
+declare const BookMeetingDetail: FC<Props>;
+export default BookMeetingDetail;
+//# sourceMappingURL=BookMeetingDetail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BookMeetingDetail.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/BookMeetingDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAQzD,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,OAAO,EAAE,eAAe,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC7B;AAED,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,KAAK,CAwGhC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import LoadingComponent from './LoadingComponent';
+import { CHANNEL_OPTIONS, DURATION_OPTIONS, TIME_OPTIONS, } from 'commons/constants';
+const BookMeetingDetail = ({ userContact, booking, loading, theme, }) => {
+    const loadingComponent = useMemo(() => _jsx(LoadingComponent, {}), []);
+    const bookMeetingDetailComponent = useMemo(() => {
+        if (!booking) {
+            return null;
+        }
+        const title = booking?.title || 'Book meeting';
+        const startDate = booking?.startDate
+            ? new Date(booking?.startDate).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+            })
+            : '';
+        const startTime = booking?.startTime
+            ? TIME_OPTIONS.find((option) => option.value === booking?.startTime)
+                ?.label
+            : '';
+        const duration = booking?.duration
+            ? DURATION_OPTIONS[booking?.duration]
+                ?.label
+            : '';
+        const channel = booking?.channel
+            ? CHANNEL_OPTIONS[booking?.channel]?.label
+            : '';
+        return (_jsxs("div", { className: "bg-white w-full shadow overflow-hidden sm:rounded-lg max-w-[358px] mx-auto border", children: [_jsx("div", { className: "p-3", children: _jsx("h3", { className: "text-[#18181B] text-base font-semibold", children: `${title}${userContact?.name?.firstName ? ` with ${userContact?.name?.firstName}` : ''}` }) }), _jsx("div", { children: _jsxs("dl", { children: [_jsxs("div", { className: "bg-gray-50 p-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", children: [_jsx("dt", { className: "text-[#00000073] font-medium text-[14px] leading-[14px]", children: theme?.bookMeetingForm?.labelDate || 'Date' }), _jsx("dd", { className: "mt-1 text-[#18181B] font-medium text-[14px] leading-[14px] sm:mt-0 sm:col-span-2", children: startDate })] }), _jsxs("div", { className: "bg-white p-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", children: [_jsx("dt", { className: "text-[#00000073] font-medium text-[14px] leading-[14px]", children: theme?.bookMeetingForm?.labelTime || 'Time' }), _jsx("dd", { className: "mt-1 text-[#18181B] font-medium text-[14px] leading-[14px] sm:mt-0 sm:col-span-2", children: startTime })] }), _jsxs("div", { className: "bg-gray-50 p-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", children: [_jsx("dt", { className: "text-[#00000073] font-medium text-[14px] leading-[14px]", children: theme?.bookMeetingForm?.labelDuration || 'Duration' }), _jsx("dd", { className: "mt-1 text-[#18181B] font-medium text-[14px] leading-[14px] sm:mt-0 sm:col-span-2", children: duration })] }), _jsxs("div", { className: "bg-white p-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", children: [_jsx("dt", { className: "text-[#00000073] font-medium text-[14px] leading-[14px]", children: theme?.bookMeetingForm?.labelChannel || 'Channel' }), _jsx("dd", { className: "mt-1 text-[#18181B] font-medium text-[14px] leading-[14px] sm:mt-0 sm:col-span-2", children: channel })] }), _jsxs("div", { className: "bg-gray-50 p-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", children: [_jsx("dt", { className: "text-[#00000073] font-medium text-[14px] leading-[14px]", children: theme?.bookMeetingForm?.labelHost || 'Host' }), _jsx("dd", { className: "mt-1 text-[#18181B] font-medium text-[14px] leading-[14px] sm:mt-0 sm:col-span-2", children: userContact?.emails?.primaryEmail })] }), _jsxs("div", { className: "bg-gray-50 p-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", children: [_jsx("dt", { className: "text-[#00000073] font-medium text-[14px] leading-[14px]", children: theme?.bookMeetingForm?.labelBrand || 'Brand' }), _jsx("dd", { className: "mt-1 text-[#18181B] font-medium text-[14px] leading-[14px] sm:mt-0 sm:col-span-2", children: booking?.brand })] })] }) })] }));
+    }, [booking, userContact]);
+    return (_jsxs(_Fragment, { children: [loading && loadingComponent, !loading && !!booking && bookMeetingDetailComponent] }));
+};
+export default BookMeetingDetail;
+//# sourceMappingURL=BookMeetingDetail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BookMeetingDetail.js","sourceRoot":"","sources":["../../../src/components/Chat/BookMeetingDetail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useMemo } from 'react';\nimport { BookMeetingType } from 'types/bookMeeting.type';\nimport { UserContactType } from 'types/userContact.type';\nimport LoadingComponent from './LoadingComponent';\nimport {\n  CHANNEL_OPTIONS,\n  DURATION_OPTIONS,\n  TIME_OPTIONS,\n} from 'commons/constants';\n\ninterface Props {\n  userContact?: UserContactType;\n  booking: BookMeetingType;\n  loading: boolean;\n  theme?: Record<string, any>;\n}\n\nconst BookMeetingDetail: FC<Props> = ({\n  userContact,\n  booking,\n  loading,\n  theme,\n}) => {\n  const loadingComponent = useMemo(() => <LoadingComponent />, []);\n\n  const bookMeetingDetailComponent = useMemo(() => {\n    if (!booking) {\n      return null;\n    }\n\n    const title = booking?.title || 'Book meeting';\n    const startDate = booking?.startDate\n      ? new Date(booking?.startDate).toLocaleDateString('en-US', {\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        })\n      : '';\n    const startTime = booking?.startTime\n      ? TIME_OPTIONS.find((option) => option.value === booking?.startTime)\n          ?.label\n      : '';\n\n    const duration = booking?.duration\n      ? DURATION_OPTIONS[booking?.duration as keyof typeof DURATION_OPTIONS]\n          ?.label\n      : '';\n\n    const channel = booking?.channel\n      ? CHANNEL_OPTIONS[booking?.channel as keyof typeof CHANNEL_OPTIONS]?.label\n      : '';\n\n    return (\n      <div className=\"bg-white w-full shadow overflow-hidden sm:rounded-lg max-w-[358px] mx-auto border\">\n        <div className=\"p-3\">\n          <h3 className=\"text-[#18181B] text-base font-semibold\">\n            {`${title}${userContact?.name?.firstName ? ` with ${userContact?.name?.firstName}` : ''}`}\n          </h3>\n        </div>\n        <div>\n          <dl>\n            <div className=\"bg-gray-50 p-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n              <dt className=\"text-[#00000073] font-medium text-[14px] leading-[14px]\">\n                {theme?.bookMeetingForm?.labelDate || 'Date'}\n              </dt>\n              <dd className=\"mt-1 text-[#18181B] font-medium text-[14px] leading-[14px] sm:mt-0 sm:col-span-2\">\n                {startDate}\n              </dd>\n            </div>\n            <div className=\"bg-white p-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n              <dt className=\"text-[#00000073] font-medium text-[14px] leading-[14px]\">\n                {theme?.bookMeetingForm?.labelTime || 'Time'}\n              </dt>\n              <dd className=\"mt-1 text-[#18181B] font-medium text-[14px] leading-[14px] sm:mt-0 sm:col-span-2\">\n                {startTime}\n              </dd>\n            </div>\n            <div className=\"bg-gray-50 p-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n              <dt className=\"text-[#00000073] font-medium text-[14px] leading-[14px]\">\n                {theme?.bookMeetingForm?.labelDuration || 'Duration'}\n              </dt>\n              <dd className=\"mt-1 text-[#18181B] font-medium text-[14px] leading-[14px] sm:mt-0 sm:col-span-2\">\n                {duration}\n              </dd>\n            </div>\n            <div className=\"bg-white p-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n              <dt className=\"text-[#00000073] font-medium text-[14px] leading-[14px]\">\n                {theme?.bookMeetingForm?.labelChannel || 'Channel'}\n              </dt>\n              <dd className=\"mt-1 text-[#18181B] font-medium text-[14px] leading-[14px] sm:mt-0 sm:col-span-2\">\n                {channel}\n              </dd>\n            </div>\n            <div className=\"bg-gray-50 p-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n              <dt className=\"text-[#00000073] font-medium text-[14px] leading-[14px]\">\n                {theme?.bookMeetingForm?.labelHost || 'Host'}\n              </dt>\n              <dd className=\"mt-1 text-[#18181B] font-medium text-[14px] leading-[14px] sm:mt-0 sm:col-span-2\">\n                {userContact?.emails?.primaryEmail}\n              </dd>\n            </div>\n            <div className=\"bg-gray-50 p-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n              <dt className=\"text-[#00000073] font-medium text-[14px] leading-[14px]\">\n                {theme?.bookMeetingForm?.labelBrand || 'Brand'}\n              </dt>\n              <dd className=\"mt-1 text-[#18181B] font-medium text-[14px] leading-[14px] sm:mt-0 sm:col-span-2\">\n                {booking?.brand}\n              </dd>\n            </div>\n          </dl>\n        </div>\n      </div>\n    );\n  }, [booking, userContact]);\n\n  return (\n    <>\n      {loading && loadingComponent}\n      {!loading && !!booking && bookMeetingDetailComponent}\n    </>\n  );\n};\n\nexport default BookMeetingDetail;\n"]}

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+type PropsType = {
+    chatId: string;
+    brandAlias: string;
+    userId: string;
+};
+declare const BookMeetingForm: FC<PropsType>;
+export default BookMeetingForm;
+//# sourceMappingURL=BookMeetingForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BookMeetingForm.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/BookMeetingForm.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAYhD,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,SAAS,CA+XlC,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CHANNEL_OPTIONS, DURATION_OPTIONS, TIME_OPTIONS, } from 'commons/constants';
+import { motion } from 'framer-motion';
+import { useConfiguration } from 'hooks/useConfiguration';
+import { useEffect, useState } from 'react';
+import { isValidPhoneNumber } from 'react-phone-number-input';
+import { createBookMeeting } from 'services/bookMeeting.service';
+import { getUserContact } from 'services/userContact.service';
+import { isEmptyString } from 'utils/functionUtils';
+import DataPickerCustom from './ui/DataPickerCustom';
+import { SelectBox } from './ui/SelectBox';
+import { SelectBoxWithIcon } from './ui/SelectBoxWithIcon';
+import Spinner from './ui/Spinner';
+import PhoneNumberInput from './ui/PhoneNumberInput';
+const BookMeetingForm = ({ chatId, brandAlias, userId }) => {
+    const { theme, apiHost } = useConfiguration();
+    const [loading, setLoading] = useState(false);
+    const [formData, setFormData] = useState({
+        startDate: new Date().toISOString().split('T')[0],
+        startTime: '',
+        duration: DURATION_OPTIONS.THIRTY_MINUTES.value,
+        channel: '',
+        host: '',
+        hostPhoneNumber: '',
+    });
+    const [statusSubmit, setStatusSubmit] = useState();
+    const [errors, setErrors] = useState({});
+    const [disabled, setDisabled] = useState(false);
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData((prevData) => ({
+            ...prevData,
+            [name]: value,
+        }));
+    };
+    const handleChangeSelect = (value, name) => {
+        setFormData((prevData) => ({
+            ...prevData,
+            [name]: value,
+        }));
+    };
+    const parseTimeToDate = (timeStr, dateStr) => {
+        const now = new Date(dateStr);
+        const [hours, minutes] = timeStr.split(':').map(Number);
+        if (isNaN(hours) ||
+            isNaN(minutes) ||
+            hours < 0 ||
+            hours > 23 ||
+            minutes < 0 ||
+            minutes > 59) {
+            throw new Error(`Invalid time format: ${timeStr}`);
+        }
+        const date = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes);
+        return date;
+    };
+    const validateForm = () => {
+        const errors = {};
+        const messages = theme?.bookMeetingForm?.messages;
+        if (isEmptyString(formData.startTime)) {
+            errors.startTime = messages?.startTimeError || 'Time is required';
+        }
+        else if (formData?.startDate) {
+            try {
+                const parsedDate = parseTimeToDate(formData.startTime, formData.startDate);
+                if (parsedDate < new Date()) {
+                    errors.startTime =
+                        messages?.startTimeInThePast || 'Time is in the past';
+                }
+            }
+            catch (e) {
+                errors.startTime = e.message;
+            }
+        }
+        if (isEmptyString(formData.duration)) {
+            errors.duration = messages?.durationError || 'Duration is required';
+        }
+        if (isEmptyString(formData.channel)) {
+            errors.channel = messages?.channelError || 'Channel is required';
+        }
+        if (isEmptyString(formData.host) &&
+            formData?.channel !== CHANNEL_OPTIONS.PHONE_CALL.value) {
+            errors.host = messages?.hostError || 'Host is required';
+        }
+        if (formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value &&
+            !isValidPhoneNumber(formData?.hostPhoneNumber)) {
+            errors.host = messages?.invalidPhoneNumber || 'Invalid phone number';
+        }
+        return errors;
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        try {
+            const validationErrors = validateForm();
+            if (Object.keys(validationErrors)?.length) {
+                setErrors(validationErrors);
+                return;
+            }
+            setErrors({});
+            const { startDate, startTime, duration, channel, host, hostPhoneNumber } = formData;
+            const requestData = {
+                startDate,
+                startTime,
+                duration,
+                channel,
+                title: 'Book Meeting',
+                chatId,
+                brand: `/${brandAlias}`,
+                userId,
+                host: formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value
+                    ? hostPhoneNumber
+                    : host,
+            };
+            const res = await createBookMeeting(requestData, apiHost);
+            if (res?.id) {
+                localStorage.setItem('bookMeetingId', res.id);
+                setDisabled(true);
+                setStatusSubmit({
+                    message: theme?.bookMeetingForm?.messages?.submitSuccess ||
+                        'Submit successful',
+                    status: 200,
+                });
+            }
+        }
+        catch (error) {
+            console.error(error);
+            setDisabled(false);
+            setStatusSubmit({
+                message: theme?.bookMeetingForm?.messages?.submitError || 'Failed to submit',
+                status: 500,
+            });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const getUserContactData = async (userId) => {
+        if (!userId)
+            return;
+        const res = await getUserContact(apiHost, { id: userId });
+        if (!res || !res?.length) {
+            return;
+        }
+        setFormData((prevData) => ({
+            ...prevData,
+            host: res[0]?.emails?.primaryEmail,
+        }));
+    };
+    useEffect(() => {
+        const userId = localStorage.getItem('userId');
+        if (userId) {
+            getUserContactData(userId);
+        }
+    }, []);
+    return (_jsx(motion.div, { className: "w-full mx-auto max-w-[358px] group/message", initial: { y: 5, opacity: 0 }, animate: { y: 0, opacity: 1 }, children: _jsxs("form", { className: "flex flex-col gap-3 bg-white px-3 py-3 pb-4 rounded-lg w-full", onSubmit: handleSubmit, children: [_jsx("div", { className: "text-[#18181B] font-semibold text-base", children: theme?.bookMeetingForm?.title || 'Book meeting' }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]", htmlFor: "startDate", children: theme?.bookMeetingForm?.labelDate || 'Date' }), _jsx("div", { className: "w-full", children: _jsx(DataPickerCustom, { onChange: (date) => {
+                                            if (!date)
+                                                return;
+                                            setFormData((prevData) => ({
+                                                ...prevData,
+                                                startDate: date.toISOString().split('T')[0],
+                                            }));
+                                        }, disabled: disabled, value: new Date(formData?.startDate) }) })] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex flex-col gap-2 w-1/2", children: [_jsx("label", { className: "text-[#18181B] font-medium text-[14px] leading-[14px]", htmlFor: "startTime", children: theme?.bookMeetingForm?.labelTime || 'Time' }), _jsx("div", { children: _jsx(SelectBox, { name: "startTime", options: TIME_OPTIONS, optionClassName: "text-[#18181B] h-[40px] py-2 pr-2 pl-3 border rounded-lg bg-white", placeholder: theme?.bookMeetingForm?.labelTime || 'Select Time', onChange: handleChangeSelect, disabled: disabled, className: errors?.startTime ? 'border-red-500' : '' }) })] }), _jsxs("div", { className: "flex flex-col gap-2 w-1/2", children: [_jsx("label", { className: "text-[#18181B] font-medium text-[14px] leading-[14px]", htmlFor: "duration", children: theme?.bookMeetingForm?.labelDuration || 'Duration' }), _jsx("div", { children: _jsx(SelectBox, { name: "duration", options: Object.values(DURATION_OPTIONS), optionContainerClassName: "gap-4", optionClassName: "!p-0 !h-[24px] hover:bg-transparent hover:!text-[#1E6EB4]", placeholder: theme?.bookMeetingForm?.labelDuration || 'Select Duration', onChange: handleChangeSelect, disabled: disabled, defaultValue: "30", className: errors?.duration ? 'border-red-500' : '' }) })] })] }), errors.startTime && (_jsx("p", { className: "text-red-500 text-sm", children: errors.startTime })), errors.duration && (_jsx("p", { className: "text-red-500 text-sm", children: errors.duration }))] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("label", { className: "w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]", htmlFor: "channel", children: theme?.bookMeetingForm?.labelChannel || 'Channel' }), _jsx("div", { className: "w-full", children: _jsx(SelectBoxWithIcon, { name: "channel", options: Object.values(CHANNEL_OPTIONS), placeholder: theme?.bookMeetingForm?.labelChannel || 'Select Channel', onChange: handleChangeSelect, disabled: disabled, className: errors?.channel ? 'border-red-500' : '' }) })] }), errors.channel && (_jsx("p", { className: "text-red-500 text-sm", children: errors.channel }))] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("label", { className: "w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]", htmlFor: "host", children: theme?.bookMeetingForm?.labelHost || 'Host' }), _jsx("div", { className: "flex flex-col w-full", children: formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value ? (_jsx(PhoneNumberInput, { onChange: (val) => {
+                                                    setFormData((prevData) => ({
+                                                        ...prevData,
+                                                        hostPhoneNumber: val,
+                                                    }));
+                                                }, placeholder: theme?.bookMeetingForm?.placeholderPhoneNumber ||
+                                                    'Phone number', value: formData?.hostPhoneNumber, disabled: disabled, numberInputClassName: errors?.host ? '!border-red-500' : '' })) : (_jsx("input", { type: "email", name: "host", id: "host", className: `w-full rounded-lg border border-[#e0e0e0] bg-white pt-2 pr-[8px] pb-2 pl-3 text-base font-medium text-[#18181B] outline-none focus:border-[#6A64F1] focus:shadow-md h-[40px] 
+                            disabled:cursor-not-allowed disabled:!bg-gray-100 disabled:!text-gray-500 ${errors?.host ? '!border-red-500' : ''}`, placeholder: theme?.bookMeetingForm?.placeholderEmail ||
+                                                    'Email address', required: true, disabled: disabled, onChange: handleChange, value: formData?.host })) })] }), errors.host && (_jsx("p", { className: "text-red-500 text-sm", children: errors.host }))] }), _jsxs("div", { className: "flex flex-col items-center justify-center", children: [statusSubmit && (_jsx("div", { className: "flex items-center w-full justify-center mb-2", children: _jsx("p", { className: `text-green-500 text-sm mt-1 ${statusSubmit?.status === 200 ? 'text-green-500' : 'text-red-500'}`, children: statusSubmit.message }) })), _jsx("div", { className: "w-full", children: _jsx("button", { className: `shadow bg-[#1E6EB4] hover:bg-[#4096ff] focus:shadow-outline focus:outline-none text-white font-bold py-2 px-8 rounded-lg w-full h-[40px] disabled:cursor-not-allowed disabled:!bg-[#0000000a] disabled:!text-[#00000040] ${loading ? 'flex items-center justify-center' : ''}`, type: "submit", disabled: disabled, children: loading ? (_jsx(Spinner, {})) : (`${theme?.buttons?.textBtnSubmit || 'Submit'}`) }) })] })] })] }) }));
+};
+export default BookMeetingForm;
+//# sourceMappingURL=BookMeetingForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BookMeetingForm.js","sourceRoot":"","sources":["../../../src/components/Chat/BookMeetingForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CHANNEL_OPTIONS,\n  DURATION_OPTIONS,\n  TIME_OPTIONS,\n} from 'commons/constants';\nimport { FormErrors, StatusSubmitType } from 'constants/form';\nimport { motion } from 'framer-motion';\nimport { useConfiguration } from 'hooks/useConfiguration';\nimport { FC, useEffect, useState } from 'react';\nimport { isValidPhoneNumber, Value } from 'react-phone-number-input';\nimport { createBookMeeting } from 'services/bookMeeting.service';\nimport { getUserContact } from 'services/userContact.service';\nimport { BookMeetingType } from 'types/bookMeeting.type';\nimport { isEmptyString } from 'utils/functionUtils';\nimport DataPickerCustom from './ui/DataPickerCustom';\nimport { SelectBox } from './ui/SelectBox';\nimport { SelectBoxWithIcon } from './ui/SelectBoxWithIcon';\nimport Spinner from './ui/Spinner';\nimport PhoneNumberInput from './ui/PhoneNumberInput';\n\ntype PropsType = {\n  chatId: string;\n  brandAlias: string;\n  userId: string;\n};\n\nconst BookMeetingForm: FC<PropsType> = ({ chatId, brandAlias, userId }) => {\n  const { theme, apiHost } = useConfiguration();\n\n  const [loading, setLoading] = useState(false);\n  const [formData, setFormData] = useState({\n    startDate: new Date().toISOString().split('T')[0],\n    startTime: '',\n    duration: DURATION_OPTIONS.THIRTY_MINUTES.value,\n    channel: '',\n    host: '',\n    hostPhoneNumber: '' as Value,\n  });\n  const [statusSubmit, setStatusSubmit] = useState<StatusSubmitType>();\n  const [errors, setErrors] = useState<FormErrors>({});\n  const [disabled, setDisabled] = useState(false);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const { name, value } = e.target;\n    setFormData((prevData) => ({\n      ...prevData,\n      [name]: value,\n    }));\n  };\n\n  const handleChangeSelect = (value: string, name: string) => {\n    setFormData((prevData) => ({\n      ...prevData,\n      [name]: value,\n    }));\n  };\n\n  const parseTimeToDate = (timeStr: string, dateStr: string) => {\n    const now = new Date(dateStr);\n    const [hours, minutes] = timeStr.split(':').map(Number);\n\n    if (\n      isNaN(hours) ||\n      isNaN(minutes) ||\n      hours < 0 ||\n      hours > 23 ||\n      minutes < 0 ||\n      minutes > 59\n    ) {\n      throw new Error(`Invalid time format: ${timeStr}`);\n    }\n\n    const date = new Date(\n      now.getFullYear(),\n      now.getMonth(),\n      now.getDate(),\n      hours,\n      minutes\n    );\n    return date;\n  };\n\n  const validateForm = () => {\n    const errors: FormErrors = {};\n    const messages = theme?.bookMeetingForm?.messages;\n\n    if (isEmptyString(formData.startTime)) {\n      errors.startTime = messages?.startTimeError || 'Time is required';\n    } else if (formData?.startDate) {\n      try {\n        const parsedDate = parseTimeToDate(\n          formData.startTime,\n          formData.startDate\n        );\n        if (parsedDate < new Date()) {\n          errors.startTime =\n            messages?.startTimeInThePast || 'Time is in the past';\n        }\n      } catch (e: any) {\n        errors.startTime = e.message;\n      }\n    }\n\n    if (isEmptyString(formData.duration)) {\n      errors.duration = messages?.durationError || 'Duration is required';\n    }\n\n    if (isEmptyString(formData.channel)) {\n      errors.channel = messages?.channelError || 'Channel is required';\n    }\n    if (\n      isEmptyString(formData.host) &&\n      formData?.channel !== CHANNEL_OPTIONS.PHONE_CALL.value\n    ) {\n      errors.host = messages?.hostError || 'Host is required';\n    }\n\n    if (\n      formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value &&\n      !isValidPhoneNumber(formData?.hostPhoneNumber as Value)\n    ) {\n      errors.host = messages?.invalidPhoneNumber || 'Invalid phone number';\n    }\n\n    return errors;\n  };\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    setLoading(true);\n    try {\n      const validationErrors = validateForm();\n      if (Object.keys(validationErrors)?.length) {\n        setErrors(validationErrors);\n        return;\n      }\n\n      setErrors({});\n      const { startDate, startTime, duration, channel, host, hostPhoneNumber } =\n        formData;\n      const requestData: BookMeetingType = {\n        startDate,\n        startTime,\n        duration,\n        channel,\n        title: 'Book Meeting',\n        chatId,\n        brand: `/${brandAlias}`,\n        userId,\n        host:\n          formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value\n            ? hostPhoneNumber\n            : host,\n      };\n\n      const res = await createBookMeeting(requestData, apiHost);\n\n      if (res?.id) {\n        localStorage.setItem('bookMeetingId', res.id);\n        setDisabled(true);\n        setStatusSubmit({\n          message:\n            theme?.bookMeetingForm?.messages?.submitSuccess ||\n            'Submit successful',\n          status: 200,\n        });\n      }\n    } catch (error) {\n      console.error(error);\n      setDisabled(false);\n      setStatusSubmit({\n        message:\n          theme?.bookMeetingForm?.messages?.submitError || 'Failed to submit',\n        status: 500,\n      });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const getUserContactData = async (userId: string) => {\n    if (!userId) return;\n\n    const res = await getUserContact(apiHost, { id: userId });\n    if (!res || !res?.length) {\n      return;\n    }\n\n    setFormData((prevData) => ({\n      ...prevData,\n      host: res[0]?.emails?.primaryEmail,\n    }));\n  };\n\n  useEffect(() => {\n    const userId = localStorage.getItem('userId');\n    if (userId) {\n      getUserContactData(userId);\n    }\n  }, []);\n\n  return (\n    <motion.div\n      className=\"w-full mx-auto max-w-[358px] group/message\"\n      initial={{ y: 5, opacity: 0 }}\n      animate={{ y: 0, opacity: 1 }}\n    >\n      <form\n        className=\"flex flex-col gap-3 bg-white px-3 py-3 pb-4 rounded-lg w-full\"\n        onSubmit={handleSubmit}\n      >\n        <div className=\"text-[#18181B] font-semibold text-base\">\n          {theme?.bookMeetingForm?.title || 'Book meeting'}\n        </div>\n\n        <div className=\"flex flex-col gap-3\">\n          {/* Date */}\n          <div className=\"flex items-center gap-2\">\n            <label\n              className=\"w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]\"\n              htmlFor=\"startDate\"\n            >\n              {theme?.bookMeetingForm?.labelDate || 'Date'}\n            </label>\n\n            <div className=\"w-full\">\n              <DataPickerCustom\n                onChange={(date: Date | null) => {\n                  if (!date) return;\n\n                  setFormData((prevData) => ({\n                    ...prevData,\n                    startDate: date.toISOString().split('T')[0],\n                  }));\n                }}\n                disabled={disabled}\n                value={new Date(formData?.startDate)}\n              />\n            </div>\n          </div>\n\n          {/* Time and Duration */}\n          <div className=\"flex flex-col\">\n            <div className=\"flex items-center gap-3\">\n              {/* Time */}\n              <div className=\"flex flex-col gap-2 w-1/2\">\n                <label\n                  className=\"text-[#18181B] font-medium text-[14px] leading-[14px]\"\n                  htmlFor=\"startTime\"\n                >\n                  {theme?.bookMeetingForm?.labelTime || 'Time'}\n                </label>\n\n                <div>\n                  <SelectBox\n                    name=\"startTime\"\n                    options={TIME_OPTIONS}\n                    optionClassName=\"text-[#18181B] h-[40px] py-2 pr-2 pl-3 border rounded-lg bg-white\"\n                    placeholder={\n                      theme?.bookMeetingForm?.labelTime || 'Select Time'\n                    }\n                    onChange={handleChangeSelect}\n                    disabled={disabled}\n                    className={errors?.startTime ? 'border-red-500' : ''}\n                  />\n                </div>\n              </div>\n              {/* Duration */}\n              <div className=\"flex flex-col gap-2 w-1/2\">\n                <label\n                  className=\"text-[#18181B] font-medium text-[14px] leading-[14px]\"\n                  htmlFor=\"duration\"\n                >\n                  {theme?.bookMeetingForm?.labelDuration || 'Duration'}\n                </label>\n\n                <div>\n                  <SelectBox\n                    name=\"duration\"\n                    options={Object.values(DURATION_OPTIONS)}\n                    optionContainerClassName=\"gap-4\"\n                    optionClassName=\"!p-0 !h-[24px] hover:bg-transparent hover:!text-[#1E6EB4]\"\n                    placeholder={\n                      theme?.bookMeetingForm?.labelDuration || 'Select Duration'\n                    }\n                    onChange={handleChangeSelect}\n                    disabled={disabled}\n                    defaultValue=\"30\"\n                    className={errors?.duration ? 'border-red-500' : ''}\n                  />\n                </div>\n              </div>\n            </div>\n\n            {errors.startTime && (\n              <p className=\"text-red-500 text-sm\">{errors.startTime}</p>\n            )}\n            {errors.duration && (\n              <p className=\"text-red-500 text-sm\">{errors.duration}</p>\n            )}\n          </div>\n\n          {/* Channel */}\n          <div className=\"flex flex-col\">\n            <div className=\"flex gap-2 items-center\">\n              <label\n                className=\"w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]\"\n                htmlFor=\"channel\"\n              >\n                {theme?.bookMeetingForm?.labelChannel || 'Channel'}\n              </label>\n\n              <div className=\"w-full\">\n                <SelectBoxWithIcon\n                  name=\"channel\"\n                  options={Object.values(CHANNEL_OPTIONS)}\n                  placeholder={\n                    theme?.bookMeetingForm?.labelChannel || 'Select Channel'\n                  }\n                  onChange={handleChangeSelect}\n                  disabled={disabled}\n                  className={errors?.channel ? 'border-red-500' : ''}\n                />\n              </div>\n            </div>\n            {errors.channel && (\n              <p className=\"text-red-500 text-sm\">{errors.channel}</p>\n            )}\n          </div>\n\n          {/* Host */}\n          <div className=\"flex flex-col\">\n            <div className=\"flex gap-2 items-center\">\n              <label\n                className=\"w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]\"\n                htmlFor=\"host\"\n              >\n                {theme?.bookMeetingForm?.labelHost || 'Host'}\n              </label>\n\n              <div className=\"flex flex-col w-full\">\n                {formData?.channel === CHANNEL_OPTIONS.PHONE_CALL.value ? (\n                  <PhoneNumberInput\n                    onChange={(val: Value) => {\n                      setFormData((prevData) => ({\n                        ...prevData,\n                        hostPhoneNumber: val,\n                      }));\n                    }}\n                    placeholder={\n                      theme?.bookMeetingForm?.placeholderPhoneNumber ||\n                      'Phone number'\n                    }\n                    value={formData?.hostPhoneNumber}\n                    disabled={disabled}\n                    numberInputClassName={errors?.host ? '!border-red-500' : ''}\n                  />\n                ) : (\n                  <input\n                    type=\"email\"\n                    name=\"host\"\n                    id=\"host\"\n                    className={`w-full rounded-lg border border-[#e0e0e0] bg-white pt-2 pr-[8px] pb-2 pl-3 text-base font-medium text-[#18181B] outline-none focus:border-[#6A64F1] focus:shadow-md h-[40px] \n                            disabled:cursor-not-allowed disabled:!bg-gray-100 disabled:!text-gray-500 ${errors?.host ? '!border-red-500' : ''}`}\n                    placeholder={\n                      theme?.bookMeetingForm?.placeholderEmail ||\n                      'Email address'\n                    }\n                    required\n                    disabled={disabled}\n                    onChange={handleChange}\n                    value={formData?.host}\n                  />\n                )}\n              </div>\n            </div>\n            {errors.host && (\n              <p className=\"text-red-500 text-sm\">{errors.host}</p>\n            )}\n          </div>\n\n          <div className=\"flex flex-col items-center justify-center\">\n            {statusSubmit && (\n              <div className=\"flex items-center w-full justify-center mb-2\">\n                <p\n                  className={`text-green-500 text-sm mt-1 ${statusSubmit?.status === 200 ? 'text-green-500' : 'text-red-500'}`}\n                >\n                  {statusSubmit.message}\n                </p>\n              </div>\n            )}\n            <div className=\"w-full\">\n              <button\n                className={`shadow bg-[#1E6EB4] hover:bg-[#4096ff] focus:shadow-outline focus:outline-none text-white font-bold py-2 px-8 rounded-lg w-full h-[40px] disabled:cursor-not-allowed disabled:!bg-[#0000000a] disabled:!text-[#00000040] ${loading ? 'flex items-center justify-center' : ''}`}\n                type=\"submit\"\n                disabled={disabled}\n              >\n                {loading ? (\n                  <Spinner />\n                ) : (\n                  `${theme?.buttons?.textBtnSubmit || 'Submit'}`\n                )}\n              </button>\n            </div>\n          </div>\n        </div>\n      </form>\n    </motion.div>\n  );\n};\n\nexport default BookMeetingForm;\n"]}

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+interface Props {
+    apiHost: string;
+    userId?: string;
+    theme?: Record<string, any>;
+}
+declare const BookMeetingList: FC<Props>;
+export default BookMeetingList;
+//# sourceMappingURL=BookMeetingList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BookMeetingList.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/BookMeetingList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AAQzD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC7B;AAED,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CA4F9B,CAAC;AAEF,eAAe,eAAe,CAAC"}