npm - @clikvn/agent-widget-embedded - Versions diffs - 1.1.5-dev-11 → 1.1.5-dev-13 - Mend

@clikvn/agent-widget-embedded 1.1.5-dev-11 → 1.1.5-dev-13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

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

@@ -0,0 +1,14 @@
+export declare const TIME_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export declare const DURATION_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export declare const CHANNEL_OPTIONS: {
+    value: string;
+    label: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+}[];
+//# sourceMappingURL=bookMeeting.d.ts.map

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"bookMeeting.d.ts","sourceRoot":"","sources":["../../../src/commons/constants/bookMeeting.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;GAiDxB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;GAQ5B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;GAO3B,CAAC"}

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MapPinIcon, PhoneIcon, VideoIcon } from 'components/Chat/Icons';
+export const TIME_OPTIONS = [
+    { value: '00:00', label: '12:00 AM' },
+    { value: '00:30', label: '12:30 AM' },
+    { value: '01:00', label: '01:00 AM' },
+    { value: '01:30', label: '01:30 AM' },
+    { value: '02:00', label: '02:00 AM' },
+    { value: '02:30', label: '02:30 AM' },
+    { value: '03:00', label: '03:00 AM' },
+    { value: '03:30', label: '03:30 AM' },
+    { value: '04:00', label: '04:00 AM' },
+    { value: '04:30', label: '04:30 AM' },
+    { value: '05:00', label: '05:00 AM' },
+    { value: '05:30', label: '05:30 AM' },
+    { value: '06:00', label: '06:00 AM' },
+    { value: '06:30', label: '06:30 AM' },
+    { value: '07:00', label: '07:00 AM' },
+    { value: '07:30', label: '07:30 AM' },
+    { value: '08:00', label: '08:00 AM' },
+    { value: '08:30', label: '08:30 AM' },
+    { value: '09:00', label: '09:00 AM' },
+    { value: '09:30', label: '09:30 AM' },
+    { value: '10:00', label: '10:00 AM' },
+    { value: '10:30', label: '10:30 AM' },
+    { value: '11:00', label: '11:00 AM' },
+    { value: '11:30', label: '11:30 AM' },
+    { value: '12:00', label: '12:00 PM' },
+    { value: '12:30', label: '12:30 PM' },
+    { value: '13:00', label: '01:00 PM' },
+    { value: '13:30', label: '01:30 PM' },
+    { value: '14:00', label: '02:00 PM' },
+    { value: '14:30', label: '02:30 PM' },
+    { value: '15:00', label: '03:00 PM' },
+    { value: '15:30', label: '03:30 PM' },
+    { value: '16:00', label: '04:00 PM' },
+    { value: '16:30', label: '04:30 PM' },
+    { value: '17:00', label: '05:00 PM' },
+    { value: '17:30', label: '05:30 PM' },
+    { value: '18:00', label: '06:00 PM' },
+    { value: '18:30', label: '06:30 PM' },
+    { value: '19:00', label: '07:00 PM' },
+    { value: '19:30', label: '07:30 PM' },
+    { value: '20:00', label: '08:00 PM' },
+    { value: '20:30', label: '08:30 PM' },
+    { value: '21:00', label: '09:00 PM' },
+    { value: '21:30', label: '09:30 PM' },
+    { value: '22:00', label: '10:00 PM' },
+    { value: '22:30', label: '10:30 PM' },
+    { value: '23:00', label: '11:00 PM' },
+    { value: '23:30', label: '11:30 PM' },
+];
+export const DURATION_OPTIONS = [
+    { value: '15', label: '15 min' },
+    { value: '20', label: '20 min' },
+    { value: '25', label: '25 min' },
+    { value: '30', label: '30 min' },
+    { value: '60', label: '60 min' },
+    { value: '90', label: '90 min' },
+    { value: '120', label: '120 min' },
+];
+export const CHANNEL_OPTIONS = [
+    { value: 'ZOOM', label: 'Zoom', icon: _jsx(VideoIcon, {}) },
+    { value: 'PHONE_CALL', label: 'Phone Call', icon: _jsx(PhoneIcon, {}) },
+    { value: 'IN_PERSON', label: 'In Person', icon: _jsx(MapPinIcon, {}) },
+    { value: 'GOOGLE_MEET', label: 'Google Meet', icon: _jsx(VideoIcon, {}) },
+    { value: 'MICROSOFT_TEAMS', label: 'Microsoft Teams', icon: _jsx(VideoIcon, {}) },
+    { value: 'WEBEX', label: 'Webex', icon: _jsx(VideoIcon, {}) },
+];
+//# sourceMappingURL=bookMeeting.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"bookMeeting.js","sourceRoot":"","sources":["../../../src/commons/constants/bookMeeting.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEzE,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAC,SAAS,KAAG,EAAE;IACrD,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,KAAC,SAAS,KAAG,EAAE;IACjE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,KAAC,UAAU,KAAG,EAAE;IAChE,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,KAAC,SAAS,KAAG,EAAE;IACnE,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,KAAC,SAAS,KAAG,EAAE;IAC3E,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAC,SAAS,KAAG,EAAE;CACxD,CAAC","sourcesContent":["import { MapPinIcon, PhoneIcon, VideoIcon } from 'components/Chat/Icons';\n\nexport const TIME_OPTIONS = [\n { value: '00:00', label: '12:00 AM' },\n { value: '00:30', label: '12:30 AM' },\n { value: '01:00', label: '01:00 AM' },\n { value: '01:30', label: '01:30 AM' },\n { value: '02:00', label: '02:00 AM' },\n { value: '02:30', label: '02:30 AM' },\n { value: '03:00', label: '03:00 AM' },\n { value: '03:30', label: '03:30 AM' },\n { value: '04:00', label: '04:00 AM' },\n { value: '04:30', label: '04:30 AM' },\n { value: '05:00', label: '05:00 AM' },\n { value: '05:30', label: '05:30 AM' },\n { value: '06:00', label: '06:00 AM' },\n { value: '06:30', label: '06:30 AM' },\n { value: '07:00', label: '07:00 AM' },\n { value: '07:30', label: '07:30 AM' },\n { value: '08:00', label: '08:00 AM' },\n { value: '08:30', label: '08:30 AM' },\n { value: '09:00', label: '09:00 AM' },\n { value: '09:30', label: '09:30 AM' },\n { value: '10:00', label: '10:00 AM' },\n { value: '10:30', label: '10:30 AM' },\n { value: '11:00', label: '11:00 AM' },\n { value: '11:30', label: '11:30 AM' },\n { value: '12:00', label: '12:00 PM' },\n { value: '12:30', label: '12:30 PM' },\n { value: '13:00', label: '01:00 PM' },\n { value: '13:30', label: '01:30 PM' },\n { value: '14:00', label: '02:00 PM' },\n { value: '14:30', label: '02:30 PM' },\n { value: '15:00', label: '03:00 PM' },\n { value: '15:30', label: '03:30 PM' },\n { value: '16:00', label: '04:00 PM' },\n { value: '16:30', label: '04:30 PM' },\n { value: '17:00', label: '05:00 PM' },\n { value: '17:30', label: '05:30 PM' },\n { value: '18:00', label: '06:00 PM' },\n { value: '18:30', label: '06:30 PM' },\n { value: '19:00', label: '07:00 PM' },\n { value: '19:30', label: '07:30 PM' },\n { value: '20:00', label: '08:00 PM' },\n { value: '20:30', label: '08:30 PM' },\n { value: '21:00', label: '09:00 PM' },\n { value: '21:30', label: '09:30 PM' },\n { value: '22:00', label: '10:00 PM' },\n { value: '22:30', label: '10:30 PM' },\n { value: '23:00', label: '11:00 PM' },\n { value: '23:30', label: '11:30 PM' },\n];\n\nexport const DURATION_OPTIONS = [\n { value: '15', label: '15 min' },\n { value: '20', label: '20 min' },\n { value: '25', label: '25 min' },\n { value: '30', label: '30 min' },\n { value: '60', label: '60 min' },\n { value: '90', label: '90 min' },\n { value: '120', label: '120 min' },\n];\n\nexport const CHANNEL_OPTIONS = [\n { value: 'ZOOM', label: 'Zoom', icon: <VideoIcon /> },\n { value: 'PHONE_CALL', label: 'Phone Call', icon: <PhoneIcon /> },\n { value: 'IN_PERSON', label: 'In Person', icon: <MapPinIcon /> },\n { value: 'GOOGLE_MEET', label: 'Google Meet', icon: <VideoIcon /> },\n { value: 'MICROSOFT_TEAMS', label: 'Microsoft Teams', icon: <VideoIcon /> },\n { value: 'WEBEX', label: 'Webex', icon: <VideoIcon /> },\n];\n"]}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+declare const BookMeetingForm: FC;
+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 ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"BookMeetingForm.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/BookMeetingForm.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAUrC,QAAA,MAAM,eAAe,EAAE,EA0TtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,135 @@
+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 { useState } from 'react';
+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';
+const BookMeetingForm = () => {
+    const { theme, apiHost = 'http://localhost:8085/chatbot' } = useConfiguration();
+    const [loading, setLoading] = useState(false);
+    const [formData, setFormData] = useState({
+        startDate: new Date().toISOString().split('T')[0],
+        startTime: '',
+        duration: '',
+        channel: '',
+        host: '',
+    });
+    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) => {
+        const now = new Date();
+        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 {
+            try {
+                const parsedDate = parseTimeToDate(formData.startTime);
+                if (parsedDate < new Date()) {
+                    errors.startTime = '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';
+        }
+        return errors;
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        try {
+            const validationErrors = validateForm();
+            if (Object.keys(validationErrors)?.length) {
+                setErrors(validationErrors);
+                return;
+            }
+            if (formData?.host) {
+                const userContact = await getUserContact(apiHost, {
+                    email: formData?.host,
+                });
+                if (!userContact || !userContact?.id) {
+                    setErrors({
+                        host: 'Host is not found',
+                    });
+                    return;
+                }
+            }
+            setErrors({});
+            const requestData = {
+                ...formData,
+                title: 'Book Meeting',
+            };
+            const res = await createBookMeeting(requestData, apiHost);
+            if (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);
+        }
+    };
+    return (_jsx(motion.div, { className: "w-full mx-auto max-w-[358px] px-4 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: "flex flex-col gap-3 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 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' }), _jsxs("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 }), errors.startTime && (_jsx("p", { className: "text-red-500 text-sm", children: errors.startTime }))] })] }), _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' }), _jsxs("div", { children: [_jsx(SelectBox, { name: "duration", options: 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 }), errors.duration && (_jsx("p", { className: "text-red-500 text-sm", children: errors.duration }))] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]", htmlFor: "channel", children: theme?.bookMeetingForm?.labelChannel || 'Channel' }), _jsxs("div", { className: "flex flex-col gap-3 w-full", children: [_jsx(SelectBoxWithIcon, { name: "channel", options: CHANNEL_OPTIONS, placeholder: theme?.bookMeetingForm?.labelChannel || 'Select Channel', onChange: handleChangeSelect, disabled: disabled }), errors.channel && (_jsx("p", { className: "text-red-500 text-sm", children: errors.channel }))] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "w-1/4 text-[#18181B] font-medium text-[14px] leading-[14px]", htmlFor: "host", children: theme?.bookMeetingForm?.labelHost || 'Host' }), _jsxs("div", { className: "flex flex-col gap-3 w-full", children: [_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] \n                disabled:cursor-not-allowed disabled:!bg-gray-100 disabled:!text-gray-500", placeholder: theme?.bookMeetingForm?.labelHost || 'Email', 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-gray-100 disabled:!text-gray-500 ${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 ADDED Viewed

@@ -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, useState } from 'react';\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';\n\nconst BookMeetingForm: FC = () => {\n const { theme, apiHost = 'http://localhost:8085/chatbot' } =\n 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: '',\n channel: '',\n host: '',\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) => {\n const now = new Date();\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 {\n try {\n const parsedDate = parseTimeToDate(formData.startTime);\n if (parsedDate < new Date()) {\n errors.startTime = '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\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 if (formData?.host) {\n const userContact = await getUserContact(apiHost, {\n email: formData?.host,\n });\n\n if (!userContact || !userContact?.id) {\n setErrors({\n host: 'Host is not found',\n });\n return;\n }\n }\n\n setErrors({});\n const requestData: BookMeetingType = {\n ...formData,\n title: 'Book Meeting',\n };\n\n const res = await createBookMeeting(requestData, apiHost);\n\n if (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 return (\n <motion.div\n className=\"w-full mx-auto max-w-[358px] px-4 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=\"flex flex-col gap-3 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 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 />\n {errors.startTime && (\n <p className=\"text-red-500 text-sm\">{errors.startTime}</p>\n )}\n </div>\n </div>\n\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={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 />\n {errors.duration && (\n <p className=\"text-red-500 text-sm\">{errors.duration}</p>\n )}\n </div>\n </div>\n </div>\n\n {/* Channel */}\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=\"channel\"\n >\n {theme?.bookMeetingForm?.labelChannel || 'Channel'}\n </label>\n\n <div className=\"flex flex-col gap-3 w-full\">\n <SelectBoxWithIcon\n name=\"channel\"\n options={CHANNEL_OPTIONS}\n placeholder={\n theme?.bookMeetingForm?.labelChannel || 'Select Channel'\n }\n onChange={handleChangeSelect}\n disabled={disabled}\n />\n {errors.channel && (\n <p className=\"text-red-500 text-sm\">{errors.channel}</p>\n )}\n </div>\n </div>\n\n {/* Host */}\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=\"host\"\n >\n {theme?.bookMeetingForm?.labelHost || 'Host'}\n </label>\n\n <div className=\"flex flex-col gap-3 w-full\">\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\"\n placeholder={theme?.bookMeetingForm?.labelHost || 'Email'}\n required\n disabled={disabled}\n onChange={handleChange}\n value={formData?.host}\n />\n {errors.host && (\n <p className=\"text-red-500 text-sm\">{errors.host}</p>\n )}\n </div>\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-gray-100 disabled:!text-gray-500 ${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/Chat.d.ts.map CHANGED Viewed

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

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

@@ -2,17 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { PreviewMessage, ThinkingMessage } from './Message';
 import { useChat } from '../../hooks/useChat';
-import { useScrollToBottom } from '../../hooks/useScrollToBottom';
+import { useScrollContainer } from '../../hooks/useScrollContainer';
 import { MultimodalInput } from './MultimodalInput';
 import { Overview } from './Overview';
 import { useConfiguration } from '../../hooks/useConfiguration';
 import { MenuIcon } from './Icons';
 import { DropdownMenu, DropdownMenuItem, DropdownMenuContent, DropdownMenuTrigger, } from './ui/DropdownMenu';
 import { useChatData } from 'hooks/useChatData';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ArrowUp } from 'lucide-react';
 export const Chat = ({ id, agentId, initialMessages = [] }) => {
     const { messages = [], setMessages, handleSubmit, input = '', setInput, isLoading, stop, chatId, append, bot, enableTTS, setEnableTTS, suggestions, } = useChat({ id, initialMessages, agentId });
     const { apiHost } = useConfiguration();
-    const [messagesContainerRef, messagesEndRef] = useScrollToBottom();
+    const [messagesContainerRef, messagesEndRef, , showScrollToTop, scrollToTop] = useScrollContainer();
     const [attachments, setAttachments] = useState([]);
     const [dropdownOpen, setDropdownOpen] = useState(false);
     const { listeners, createNew } = useChatData();
@@ -34,6 +36,10 @@ export const Chat = ({ id, agentId, initialMessages = [] }) => {
         hasMessages &&
         messages[messages.length - 1].role === 'userMessage';
     return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col min-w-0 h-full relative bg-background", children: [_jsx("div", { className: "absolute left-4 top-4 z-10", children: _jsxs(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [_jsx(DropdownMenuTrigger, { className: "outline-none", children: _jsx("div", { className: "w-10 h-[40px] shadow-sm flex items-center justify-center p-1 bg-white rounded-full outline-none", children: _jsx(MenuIcon, { size: 20 }) }) }), _jsx(DropdownMenuContent, { side: "right", children: _jsx(DropdownMenuItem, { children: _jsx("div", { onClick: handleCreateNewChat, children: "New chat" }) }) })] }) }), _jsxs("div", { ref: messagesContainerRef, className: "flex flex-col min-w-0 gap-[16px] flex-1 overflow-y-scroll pt-[16px]", children: [!hasMessages && _jsx(Overview, { bot: bot }), hasMessages &&
-                            messages.map((message, index) => (_jsx(PreviewMessage, { bot: bot, chatId: id, message: message, isLoading: isLoading && (messages || []).length - 1 === index, enableTTS: enableTTS }, message.id))), isThinking && _jsx(ThinkingMessage, { bot: bot }), _jsx("div", { ref: messagesEndRef, className: "shrink-0 min-w-[24px] min-h-[24px]" })] }), _jsx("form", { className: "flex mx-auto px-4 bg-background pb-4 md:pb-6 gap-2 w-full md:max-w-3xl", children: _jsx(MultimodalInput, { input: input, setInput: setInput, chatId: chatId, handleSubmit: handleSubmit, isLoading: isLoading, stop: stop, messages: messages, setMessages: setMessages, append: append, attachments: attachments, setAttachments: setAttachments, bot: bot, apiHost: apiHost, setEnableTTS: setEnableTTS, enableTTS: enableTTS, suggestedActions: suggestions }) })] }) }));
+                            messages.map((message, index) => (_jsx(PreviewMessage, { bot: bot, chatId: id, message: message, isLoading: isLoading && (messages || []).length - 1 === index, enableTTS: enableTTS }, message.id))), isThinking && _jsx(ThinkingMessage, { bot: bot }), _jsx("div", { ref: messagesEndRef, className: "shrink-0 min-w-[24px] min-h-[24px]" })] }), _jsx(AnimatePresence, { children: showScrollToTop && (_jsx(motion.button, { initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            scrollToTop();
+                        }, className: "absolute w-[28px] h-[28px] left-[50%] top-[16px]  z-50  bg-white shadow-lg rounded-full flex items-center justify-center hover:bg-gray-50 transition-colors", "aria-label": "Scroll to top", children: _jsx(ArrowUp, { size: 16, className: "text-zinc-900" }) })) }), _jsx("form", { className: "flex mx-auto px-4 bg-background pb-4 gap-2 w-full md:max-w-3xl", children: _jsx(MultimodalInput, { input: input, setInput: setInput, chatId: chatId, handleSubmit: handleSubmit, isLoading: isLoading, stop: stop, messages: messages, setMessages: setMessages, append: append, attachments: attachments, setAttachments: setAttachments, bot: bot, apiHost: apiHost, setEnableTTS: setEnableTTS, enableTTS: enableTTS, suggestedActions: suggestions }) })] }) }));
 };
 //# sourceMappingURL=Chat.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,~~iBAAiB~~,EAAE,MAAM~~,+BAA+B~~,CAAC;~~AAClE~~,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;~~AAQhD~~,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,eAAe,GAAG,EAAE,EAAE,EAAE,EAAE;IAC3E,MAAM,EACJ,QAAQ,GAAG,EAAE,EACb,WAAW,EACX,YAAY,EACZ,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,EACN,MAAM,EACN,GAAG,EACH,SAAS,EACT,YAAY,EACZ,WAAW,GACZ,GAAG,OAAO,CAAC,EAAE,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,CAAC;IAC9C,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACvC,MAAM,CAAC,oBAAoB,EAAE,cAAc,CAAC,~~GAC1C~~,~~iBAAiB~~,EAAkB,CAAC;~~IACtC~~,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IACvE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC;IAE/C,MAAM,mBAAmB,GAAG,CAAC,CAAmC,EAAE,EAAE;QAClE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,EAAE,GAAW,EAAE,CAAC;QACpB,IAAI,SAAS,EAAE,CAAC;YACd,EAAE,GAAG,SAAS,EAAE,CAAC;QACnB,CAAC;QACD,IAAI,SAAS,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC;YAC/B,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/B,CAAC;QACD,qCAAqC;QACrC,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAChD,MAAM,UAAU,GACd,SAAS;QACT,WAAW;QACX,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC;IAEvD,OAAO,CACL,4BACE,eAAK,SAAS,EAAC,qDAAqD,aAElE,cAAK,SAAS,EAAC,4BAA4B,YACzC,MAAC,YAAY,IAAC,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,eAAe,aAC7D,KAAC,mBAAmB,IAAC,SAAS,EAAC,cAAc,YAC3C,cAAK,SAAS,EAAC,iGAAiG,YAC9G,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,GAClB,GACc,EACtB,KAAC,mBAAmB,IAAC,IAAI,EAAC,OAAO,YAC/B,KAAC,gBAAgB,cACf,cAAK,OAAO,EAAE,mBAAmB,yBAAgB,GAChC,GACC,IACT,GACX,EACN,eACE,GAAG,EAAE,oBAAoB,EACzB,SAAS,EAAC,qEAAqE,aAE9E,CAAC,WAAW,IAAI,KAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,GAAI,EAEtC,WAAW;4BACV,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,KAAC,cAAc,IAEb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,EAC7D,SAAS,EAAE,SAAS,IALf,OAAO,CAAC,EAAE,CAMf,CACH,CAAC,EACH,UAAU,IAAI,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,GAAI,EAE5C,cACE,GAAG,EAAE,cAAc,EACnB,SAAS,EAAC,oCAAoC,GAC9C,IACE,~~EACN~~,eAAM,SAAS,EAAC,~~wEAAwE~~,~~YACtF~~,KAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,WAAW,GAC7B,GACG,IACH,GACL,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC, useState } from 'react';\nimport { ChatMessageType, IFileUpload } from '../../types/flowise.type';\nimport { PreviewMessage, ThinkingMessage } from './Message';\nimport { useChat } from '../../hooks/useChat';\nimport { ~~useScrollToBottom~~ } from '../../hooks/~~useScrollToBottom~~';\nimport { MultimodalInput } from './MultimodalInput';\nimport { Overview } from './Overview';\nimport { useConfiguration } from '../../hooks/useConfiguration';\nimport { MenuIcon } from './Icons';\nimport {\n DropdownMenu,\n DropdownMenuItem,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from './ui/DropdownMenu';\nimport { useChatData } from 'hooks/useChatData';\n\ntype PropsType = {\n id?: string;\n initialMessages?: ChatMessageType[];\n agentId?: string;\n};\n\nexport const Chat: FC<PropsType> = ({ id, agentId, initialMessages = [] }) => {\n const {\n messages = [],\n setMessages,\n handleSubmit,\n input = '',\n setInput,\n isLoading,\n stop,\n chatId,\n append,\n bot,\n enableTTS,\n setEnableTTS,\n suggestions,\n } = useChat({ id, initialMessages, agentId });\n const { apiHost } = useConfiguration();\n const [messagesContainerRef, messagesEndRef] =\n ~~useScrollToBottom~~<HTMLDivElement>();\n const [attachments, setAttachments] = useState<Array<IFileUpload>>([]);\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const { listeners, createNew } = useChatData();\n\n const handleCreateNewChat = (e: React.MouseEvent<HTMLDivElement>) => {\n e.preventDefault();\n e.stopPropagation();\n let id: string = '';\n if (createNew) {\n id = createNew();\n }\n if (listeners?.['ON_NEW_CHAT']) {\n listeners['ON_NEW_CHAT'](id);\n }\n // Đóng dropdown sau khi tạo chat mới\n setDropdownOpen(false);\n };\n\n const hasMessages = (messages?.length \|\| 0) > 0;\n const isThinking =\n isLoading &&\n hasMessages &&\n messages[messages.length - 1].role === 'userMessage';\n\n return (\n <>\n <div className=\"flex flex-col min-w-0 h-full relative bg-background\">\n {/* <Header title={theme?.header?.title} language={language} /> */}\n <div className=\"absolute left-4 top-4 z-10\">\n <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>\n <DropdownMenuTrigger className=\"outline-none\">\n <div className=\"w-10 h-[40px] shadow-sm flex items-center justify-center p-1 bg-white rounded-full outline-none\">\n <MenuIcon size={20} />\n </div>\n </DropdownMenuTrigger>\n <DropdownMenuContent side=\"right\">\n <DropdownMenuItem>\n <div onClick={handleCreateNewChat}>New chat</div>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <div\n ref={messagesContainerRef}\n className=\"flex flex-col min-w-0 gap-[16px] flex-1 overflow-y-scroll pt-[16px]\"\n >\n {!hasMessages && <Overview bot={bot} />}\n\n {hasMessages &&\n messages.map((message, index) => (\n <PreviewMessage\n key={message.id}\n bot={bot}\n chatId={id}\n message={message}\n isLoading={isLoading && (messages \|\| []).length - 1 === index}\n enableTTS={enableTTS}\n />\n ))}\n {isThinking && <ThinkingMessage bot={bot} />}\n\n <div\n ref={messagesEndRef}\n className=\"shrink-0 min-w-[24px] min-h-[24px]\"\n />\n </div>\n <form className=\"flex mx-auto px-4 bg-background pb-4 ~~md:pb-6~~ gap-2 w-full md:max-w-3xl\">\n <MultimodalInput\n input={input}\n setInput={setInput}\n chatId={chatId}\n handleSubmit={handleSubmit}\n isLoading={isLoading}\n stop={stop}\n messages={messages}\n setMessages={setMessages}\n append={append}\n attachments={attachments}\n setAttachments={setAttachments}\n bot={bot}\n apiHost={apiHost}\n setEnableTTS={setEnableTTS}\n enableTTS={enableTTS}\n suggestedActions={suggestions}\n />\n </form>\n </div>\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState } from 'react';\nimport { ChatMessageType, IFileUpload } from '../../types/flowise.type';\nimport { PreviewMessage, ThinkingMessage } from './Message';\nimport { useChat } from '../../hooks/useChat';\nimport { useScrollContainer } from '../../hooks/useScrollContainer';\nimport { MultimodalInput } from './MultimodalInput';\nimport { Overview } from './Overview';\nimport { useConfiguration } from '../../hooks/useConfiguration';\nimport { MenuIcon } from './Icons';\nimport {\n DropdownMenu,\n DropdownMenuItem,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from './ui/DropdownMenu';\nimport { useChatData } from 'hooks/useChatData';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { ArrowUp } from 'lucide-react';\n\ntype PropsType = {\n id?: string;\n initialMessages?: ChatMessageType[];\n agentId?: string;\n};\n\nexport const Chat: FC<PropsType> = ({ id, agentId, initialMessages = [] }) => {\n const {\n messages = [],\n setMessages,\n handleSubmit,\n input = '',\n setInput,\n isLoading,\n stop,\n chatId,\n append,\n bot,\n enableTTS,\n setEnableTTS,\n suggestions,\n } = useChat({ id, initialMessages, agentId });\n const { apiHost } = useConfiguration();\n const [messagesContainerRef, messagesEndRef, , showScrollToTop, scrollToTop] =\n useScrollContainer<HTMLDivElement>();\n const [attachments, setAttachments] = useState<Array<IFileUpload>>([]);\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const { listeners, createNew } = useChatData();\n\n const handleCreateNewChat = (e: React.MouseEvent<HTMLDivElement>) => {\n e.preventDefault();\n e.stopPropagation();\n let id: string = '';\n if (createNew) {\n id = createNew();\n }\n if (listeners?.['ON_NEW_CHAT']) {\n listeners['ON_NEW_CHAT'](id);\n }\n // Đóng dropdown sau khi tạo chat mới\n setDropdownOpen(false);\n };\n\n const hasMessages = (messages?.length \|\| 0) > 0;\n const isThinking =\n isLoading &&\n hasMessages &&\n messages[messages.length - 1].role === 'userMessage';\n\n return (\n <>\n <div className=\"flex flex-col min-w-0 h-full relative bg-background\">\n {/* <Header title={theme?.header?.title} language={language} /> /}\n <div className=\"absolute left-4 top-4 z-10\">\n <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>\n <DropdownMenuTrigger className=\"outline-none\">\n <div className=\"w-10 h-[40px] shadow-sm flex items-center justify-center p-1 bg-white rounded-full outline-none\">\n <MenuIcon size={20} />\n </div>\n </DropdownMenuTrigger>\n <DropdownMenuContent side=\"right\">\n <DropdownMenuItem>\n <div onClick={handleCreateNewChat}>New chat</div>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <div\n ref={messagesContainerRef}\n className=\"flex flex-col min-w-0 gap-[16px] flex-1 overflow-y-scroll pt-[16px]\"\n >\n {!hasMessages && <Overview bot={bot} />}\n\n {hasMessages &&\n messages.map((message, index) => (\n <PreviewMessage\n key={message.id}\n bot={bot}\n chatId={id}\n message={message}\n isLoading={isLoading && (messages \|\| []).length - 1 === index}\n enableTTS={enableTTS}\n />\n ))}\n {isThinking && <ThinkingMessage bot={bot} />}\n\n <div\n ref={messagesEndRef}\n className=\"shrink-0 min-w-[24px] min-h-[24px]\"\n />\n </div>\n\n {/ Scroll to Top Button */}\n <AnimatePresence>\n {showScrollToTop && (\n <motion.button\n initial={{ opacity: 0, scale: 0.8 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.8 }}\n transition={{ duration: 0.2 }}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n scrollToTop();\n }}\n className=\"absolute w-[28px] h-[28px] left-[50%] top-[16px] z-50 bg-white shadow-lg rounded-full flex items-center justify-center hover:bg-gray-50 transition-colors\"\n aria-label=\"Scroll to top\"\n >\n <ArrowUp size={16} className=\"text-zinc-900\" />\n </motion.button>\n )}\n </AnimatePresence>\n\n <form className=\"flex mx-auto px-4 bg-background pb-4 gap-2 w-full md:max-w-3xl\">\n <MultimodalInput\n input={input}\n setInput={setInput}\n chatId={chatId}\n handleSubmit={handleSubmit}\n isLoading={isLoading}\n stop={stop}\n messages={messages}\n setMessages={setMessages}\n append={append}\n attachments={attachments}\n setAttachments={setAttachments}\n bot={bot}\n apiHost={apiHost}\n setEnableTTS={setEnableTTS}\n enableTTS={enableTTS}\n suggestedActions={suggestions}\n />\n </form>\n </div>\n </>\n );\n};\n"]}