@antscorp/antsomi-ui 2.0.88 → 2.0.90

package/es/components/icons/LazyIcon/LazyIcon.d.ts

@@ -2,10 +2,10 @@
 export declare const LazyIcon: {
     AccountCircleIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountCircleOutlineIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    Accounts30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountSharing30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountSharingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountTreeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    Accounts30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AddChartIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AddFolderIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AddIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -54,6 +54,7 @@ export declare const LazyIcon: {
     ChatConversationCommentAddCommentIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ChatMentionIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ChatUnreadIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    CheckSlimIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CheckboxChecked5RadiusIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CheckboxCheckedIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CheckboxIndeterminate5RadiusIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -61,7 +62,6 @@ export declare const LazyIcon: {
     CheckboxUnchecked5RadiusIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CheckboxUncheckedIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ChecklistRtlIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    CheckSlimIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CircleAddElementIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CircleInfoIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CircleNotificationsIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -97,15 +97,15 @@ export declare const LazyIcon: {
     DataDestinationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataEncryption30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataEncryptionIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    Dataflows30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataRefreshIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataSchema30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataSource30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    DatasourceIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    DatasourceSegment30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataView30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataViewIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    Dataflows30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    DatasourceIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    DatasourceSegment30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DecreaseDecimalIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DeleteRemoveTrashIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DeliveryLogIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -182,13 +182,13 @@ export declare const LazyIcon: {
     ForwardIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     FreeDrawIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     FullReviewIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    GPTIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GalleryTemplateIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GeneralSettingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GeneralSettings30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GenerateAutoWizardIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Geofence30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GetInsightIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    GPTIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GridViewIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GroupIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GroupLayerIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -251,8 +251,8 @@ export declare const LazyIcon: {
     MuteIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     NodeViewIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     NotificationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    NotificationsActiveIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     NotificationSettingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    NotificationsActiveIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     OpenNewTabIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     OpenUrlIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     OrchestrationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -304,6 +304,7 @@ export declare const LazyIcon: {
     ResumeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     RightExpandIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Role30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    SQLWorkspace30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SaveAsIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SaveIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ScheduleEmailDeliveryIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -327,9 +328,9 @@ export declare const LazyIcon: {
     SlideGroupIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Sort1Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SortIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    SQLWorkspace30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SqlWorkspaceIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     StatisticIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    StatusInfoIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     StickerIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     StopRecordIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     StoreIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -377,9 +378,9 @@ export declare const LazyIcon: {
     VisitorInformationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WarningIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WebAssetIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    WebhookIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WebIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WebPersonalizationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    WebhookIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WidgetIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WritingAIAssitantIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
 };

package/es/components/icons/LazyIcon/LazyIcon.js

@@ -2,10 +2,10 @@ import { lazy } from 'react';
 export const LazyIcon = {
     AccountCircleIcon: lazy(() => import('../AccountCircleIcon').then(m => ({ default: m.AccountCircleIcon }))),
     AccountCircleOutlineIcon: lazy(() => import('../AccountCircleOutlineIcon').then(m => ({ default: m.AccountCircleOutlineIcon }))),
-    Accounts30Icon: lazy(() => import('../Accounts30Icon').then(m => ({ default: m.Accounts30Icon }))),
     AccountSharing30Icon: lazy(() => import('../AccountSharing30Icon').then(m => ({ default: m.AccountSharing30Icon }))),
     AccountSharingIcon: lazy(() => import('../AccountSharingIcon').then(m => ({ default: m.AccountSharingIcon }))),
     AccountTreeIcon: lazy(() => import('../AccountTreeIcon').then(m => ({ default: m.AccountTreeIcon }))),
+    Accounts30Icon: lazy(() => import('../Accounts30Icon').then(m => ({ default: m.Accounts30Icon }))),
     AddChartIcon: lazy(() => import('../AddChartIcon').then(m => ({ default: m.AddChartIcon }))),
     AddFolderIcon: lazy(() => import('../AddFolderIcon').then(m => ({ default: m.AddFolderIcon }))),
     AddIcon: lazy(() => import('../AddIcon').then(m => ({ default: m.AddIcon }))),
@@ -56,6 +56,7 @@ export const LazyIcon = {
     }))),
     ChatMentionIcon: lazy(() => import('../ChatMentionIcon').then(m => ({ default: m.ChatMentionIcon }))),
     ChatUnreadIcon: lazy(() => import('../ChatUnreadIcon').then(m => ({ default: m.ChatUnreadIcon }))),
+    CheckSlimIcon: lazy(() => import('../CheckSlimIcon').then(m => ({ default: m.CheckSlimIcon }))),
     CheckboxChecked5RadiusIcon: lazy(() => import('../CheckboxChecked5RadiusIcon').then(m => ({ default: m.CheckboxChecked5RadiusIcon }))),
     CheckboxCheckedIcon: lazy(() => import('../CheckboxCheckedIcon').then(m => ({ default: m.CheckboxCheckedIcon }))),
     CheckboxIndeterminate5RadiusIcon: lazy(() => import('../CheckboxIndeterminate5RadiusIcon').then(m => ({
@@ -67,7 +68,6 @@ export const LazyIcon = {
     }))),
     CheckboxUncheckedIcon: lazy(() => import('../CheckboxUncheckedIcon').then(m => ({ default: m.CheckboxUncheckedIcon }))),
     ChecklistRtlIcon: lazy(() => import('../ChecklistRtlIcon').then(m => ({ default: m.ChecklistRtlIcon }))),
-    CheckSlimIcon: lazy(() => import('../CheckSlimIcon').then(m => ({ default: m.CheckSlimIcon }))),
     CircleAddElementIcon: lazy(() => import('../CircleAddElementIcon').then(m => ({ default: m.CircleAddElementIcon }))),
     CircleInfoIcon: lazy(() => import('../CircleInfoIcon').then(m => ({ default: m.CircleInfoIcon }))),
     CircleNotificationsIcon: lazy(() => import('../CircleNotificationsIcon').then(m => ({ default: m.CircleNotificationsIcon }))),
@@ -103,15 +103,15 @@ export const LazyIcon = {
     DataDestinationIcon: lazy(() => import('../DataDestinationIcon').then(m => ({ default: m.DataDestinationIcon }))),
     DataEncryption30Icon: lazy(() => import('../DataEncryption30Icon').then(m => ({ default: m.DataEncryption30Icon }))),
     DataEncryptionIcon: lazy(() => import('../DataEncryptionIcon').then(m => ({ default: m.DataEncryptionIcon }))),
-    Dataflows30Icon: lazy(() => import('../Dataflows30Icon').then(m => ({ default: m.Dataflows30Icon }))),
     DataIcon: lazy(() => import('../DataIcon').then(m => ({ default: m.DataIcon }))),
     DataRefreshIcon: lazy(() => import('../DataRefreshIcon').then(m => ({ default: m.DataRefreshIcon }))),
     DataSchema30Icon: lazy(() => import('../DataSchema30Icon').then(m => ({ default: m.DataSchema30Icon }))),
     DataSource30Icon: lazy(() => import('../DataSource30Icon').then(m => ({ default: m.DataSource30Icon }))),
-    DatasourceIcon: lazy(() => import('../DatasourceIcon').then(m => ({ default: m.DatasourceIcon }))),
-    DatasourceSegment30Icon: lazy(() => import('../DatasourceSegment30Icon').then(m => ({ default: m.DatasourceSegment30Icon }))),
     DataView30Icon: lazy(() => import('../DataView30Icon').then(m => ({ default: m.DataView30Icon }))),
     DataViewIcon: lazy(() => import('../DataViewIcon').then(m => ({ default: m.DataViewIcon }))),
+    Dataflows30Icon: lazy(() => import('../Dataflows30Icon').then(m => ({ default: m.Dataflows30Icon }))),
+    DatasourceIcon: lazy(() => import('../DatasourceIcon').then(m => ({ default: m.DatasourceIcon }))),
+    DatasourceSegment30Icon: lazy(() => import('../DatasourceSegment30Icon').then(m => ({ default: m.DatasourceSegment30Icon }))),
     DecreaseDecimalIcon: lazy(() => import('../DecreaseDecimalIcon').then(m => ({ default: m.DecreaseDecimalIcon }))),
     DeleteRemoveTrashIcon: lazy(() => import('../DeleteRemoveTrashIcon').then(m => ({ default: m.DeleteRemoveTrashIcon }))),
     DeliveryLogIcon: lazy(() => import('../DeliveryLogIcon').then(m => ({ default: m.DeliveryLogIcon }))),
@@ -188,13 +188,13 @@ export const LazyIcon = {
     ForwardIcon: lazy(() => import('../ForwardIcon').then(m => ({ default: m.ForwardIcon }))),
     FreeDrawIcon: lazy(() => import('../FreeDrawIcon').then(m => ({ default: m.FreeDrawIcon }))),
     FullReviewIcon: lazy(() => import('../FullReviewIcon').then(m => ({ default: m.FullReviewIcon }))),
+    GPTIcon: lazy(() => import('../GPTIcon').then(m => ({ default: m.GPTIcon }))),
     GalleryTemplateIcon: lazy(() => import('../GalleryTemplateIcon').then(m => ({ default: m.GalleryTemplateIcon }))),
     GeneralSettingIcon: lazy(() => import('../GeneralSettingIcon').then(m => ({ default: m.GeneralSettingIcon }))),
     GeneralSettings30Icon: lazy(() => import('../GeneralSettings30Icon').then(m => ({ default: m.GeneralSettings30Icon }))),
     GenerateAutoWizardIcon: lazy(() => import('../GenerateAutoWizardIcon').then(m => ({ default: m.GenerateAutoWizardIcon }))),
     Geofence30Icon: lazy(() => import('../Geofence30Icon').then(m => ({ default: m.Geofence30Icon }))),
     GetInsightIcon: lazy(() => import('../GetInsightIcon').then(m => ({ default: m.GetInsightIcon }))),
-    GPTIcon: lazy(() => import('../GPTIcon').then(m => ({ default: m.GPTIcon }))),
     GridViewIcon: lazy(() => import('../GridViewIcon').then(m => ({ default: m.GridViewIcon }))),
     GroupIcon: lazy(() => import('../GroupIcon').then(m => ({ default: m.GroupIcon }))),
     GroupLayerIcon: lazy(() => import('../GroupLayerIcon').then(m => ({ default: m.GroupLayerIcon }))),
@@ -255,8 +255,8 @@ export const LazyIcon = {
     MuteIcon: lazy(() => import('../MuteIcon').then(m => ({ default: m.MuteIcon }))),
     NodeViewIcon: lazy(() => import('../NodeViewIcon').then(m => ({ default: m.NodeViewIcon }))),
     NotificationIcon: lazy(() => import('../NotificationIcon').then(m => ({ default: m.NotificationIcon }))),
-    NotificationsActiveIcon: lazy(() => import('../NotificationsActiveIcon').then(m => ({ default: m.NotificationsActiveIcon }))),
     NotificationSettingIcon: lazy(() => import('../NotificationSettingIcon').then(m => ({ default: m.NotificationSettingIcon }))),
+    NotificationsActiveIcon: lazy(() => import('../NotificationsActiveIcon').then(m => ({ default: m.NotificationsActiveIcon }))),
     OpenNewTabIcon: lazy(() => import('../OpenNewTabIcon').then(m => ({ default: m.OpenNewTabIcon }))),
     OpenUrlIcon: lazy(() => import('../OpenUrlIcon').then(m => ({ default: m.OpenUrlIcon }))),
     OrchestrationIcon: lazy(() => import('../OrchestrationIcon').then(m => ({ default: m.OrchestrationIcon }))),
@@ -310,6 +310,7 @@ export const LazyIcon = {
     ResumeIcon: lazy(() => import('../ResumeIcon').then(m => ({ default: m.ResumeIcon }))),
     RightExpandIcon: lazy(() => import('../RightExpandIcon').then(m => ({ default: m.RightExpandIcon }))),
     Role30Icon: lazy(() => import('../Role30Icon').then(m => ({ default: m.Role30Icon }))),
+    SQLWorkspace30Icon: lazy(() => import('../SQLWorkspace30Icon').then(m => ({ default: m.SQLWorkspace30Icon }))),
     SaveAsIcon: lazy(() => import('../SaveAsIcon').then(m => ({ default: m.SaveAsIcon }))),
     SaveIcon: lazy(() => import('../SaveIcon').then(m => ({ default: m.SaveIcon }))),
     ScheduleEmailDeliveryIcon: lazy(() => import('../ScheduleEmailDeliveryIcon').then(m => ({ default: m.ScheduleEmailDeliveryIcon }))),
@@ -333,9 +334,9 @@ export const LazyIcon = {
     SlideGroupIcon: lazy(() => import('../SlideGroupIcon').then(m => ({ default: m.SlideGroupIcon }))),
     Sort1Icon: lazy(() => import('../Sort1Icon').then(m => ({ default: m.Sort1Icon }))),
     SortIcon: lazy(() => import('../SortIcon').then(m => ({ default: m.SortIcon }))),
-    SQLWorkspace30Icon: lazy(() => import('../SQLWorkspace30Icon').then(m => ({ default: m.SQLWorkspace30Icon }))),
     SqlWorkspaceIcon: lazy(() => import('../SqlWorkspaceIcon').then(m => ({ default: m.SqlWorkspaceIcon }))),
     StatisticIcon: lazy(() => import('../StatisticIcon').then(m => ({ default: m.StatisticIcon }))),
+    StatusInfoIcon: lazy(() => import('../StatusInfoIcon').then(m => ({ default: m.StatusInfoIcon }))),
     StickerIcon: lazy(() => import('../StickerIcon').then(m => ({ default: m.StickerIcon }))),
     StopRecordIcon: lazy(() => import('../StopRecordIcon').then(m => ({ default: m.StopRecordIcon }))),
     StoreIcon: lazy(() => import('../StoreIcon').then(m => ({ default: m.StoreIcon }))),
@@ -383,9 +384,9 @@ export const LazyIcon = {
     VisitorInformationIcon: lazy(() => import('../VisitorInformationIcon').then(m => ({ default: m.VisitorInformationIcon }))),
     WarningIcon: lazy(() => import('../WarningIcon').then(m => ({ default: m.WarningIcon }))),
     WebAssetIcon: lazy(() => import('../WebAssetIcon').then(m => ({ default: m.WebAssetIcon }))),
-    WebhookIcon: lazy(() => import('../WebhookIcon').then(m => ({ default: m.WebhookIcon }))),
     WebIcon: lazy(() => import('../WebIcon').then(m => ({ default: m.WebIcon }))),
     WebPersonalizationIcon: lazy(() => import('../WebPersonalizationIcon').then(m => ({ default: m.WebPersonalizationIcon }))),
+    WebhookIcon: lazy(() => import('../WebhookIcon').then(m => ({ default: m.WebhookIcon }))),
     WidgetIcon: lazy(() => import('../WidgetIcon').then(m => ({ default: m.WidgetIcon }))),
     WritingAIAssitantIcon: lazy(() => import('../WritingAIAssitantIcon').then(m => ({ default: m.WritingAIAssitantIcon }))),
 };

package/es/components/icons/StatusInfoIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const StatusInfoIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/StatusInfoIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const StatusInfoIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M7.99536 16.8003C6.41311 16.8003 4.8664 16.3311 3.5508 15.4521C2.23521 14.573 1.20983 13.3235 0.604329 11.8617C-0.00117234 10.3999 -0.159599 8.7913 0.149083 7.23945C0.457764 5.68761 1.21969 4.26229 2.33851 3.14347C3.45733 2.02465 4.88279 1.26242 6.43464 0.953741C7.98649 0.64506 9.59502 0.803598 11.0568 1.4091C12.5186 2.0146 13.7681 3.03993 14.6471 4.35553C15.5262 5.67112 15.9954 7.21803 15.9954 8.80028C15.9929 10.9213 15.1493 12.9545 13.6495 14.4543C12.1498 15.9541 10.1164 16.7979 7.99536 16.8003ZM5.58736 6.75675C5.46208 6.75675 5.3419 6.80666 5.25321 6.89515C5.16451 6.98363 5.11452 7.10356 5.11422 7.22885V8.0687C5.11452 8.19398 5.16451 8.31392 5.25321 8.4024C5.3419 8.49089 5.46208 8.54079 5.58736 8.54079H6.77594V14.4482H9.06165V6.75675H5.58736ZM7.73251 3.09995C7.4477 3.09972 7.16923 3.18353 6.93229 3.34158C6.69536 3.49962 6.51061 3.72474 6.40142 3.98778C6.29222 4.25082 6.26347 4.53988 6.31881 4.81925C6.37415 5.09863 6.5111 5.35543 6.71232 5.55698C6.91355 5.75852 7.17002 5.89628 7.44931 5.95207C7.7286 6.00785 8.01816 5.97937 8.28137 5.87059C8.54458 5.76181 8.76963 5.57714 8.92804 5.34046C9.08646 5.10378 9.17114 4.8256 9.17136 4.54079C9.17197 4.15847 9.02075 3.79158 8.75095 3.52071C8.48114 3.24983 8.11483 3.09695 7.73251 3.09604V3.09995Z", fill: "currentColor" }) }));
+});

package/es/components/icons/index.d.ts

@@ -1,9 +1,9 @@
 export { AccountCircleIcon } from './AccountCircleIcon';
 export { AccountCircleOutlineIcon } from './AccountCircleOutlineIcon';
-export { Accounts30Icon } from './Accounts30Icon';
 export { AccountSharing30Icon } from './AccountSharing30Icon';
 export { AccountSharingIcon } from './AccountSharingIcon';
 export { AccountTreeIcon } from './AccountTreeIcon';
+export { Accounts30Icon } from './Accounts30Icon';
 export { AddChartIcon } from './AddChartIcon';
 export { AddFolderIcon } from './AddFolderIcon';
 export { AddIcon } from './AddIcon';
@@ -52,6 +52,7 @@ export { ChatBubbleOutlineIcon } from './ChatBubbleOutlineIcon';
 export { ChatConversationCommentAddCommentIcon } from './ChatConversationCommentAddCommentIcon';
 export { ChatMentionIcon } from './ChatMentionIcon';
 export { ChatUnreadIcon } from './ChatUnreadIcon';
+export { CheckSlimIcon } from './CheckSlimIcon';
 export { CheckboxChecked5RadiusIcon } from './CheckboxChecked5RadiusIcon';
 export { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
 export { CheckboxIndeterminate5RadiusIcon } from './CheckboxIndeterminate5RadiusIcon';
@@ -59,7 +60,6 @@ export { CheckboxIndeterminateIcon } from './CheckboxIndeterminateIcon';
 export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
 export { ChecklistRtlIcon } from './ChecklistRtlIcon';
-export { CheckSlimIcon } from './CheckSlimIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleInfoIcon } from './CircleInfoIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
@@ -95,15 +95,15 @@ export { DataDestination30Icon } from './DataDestination30Icon';
 export { DataDestinationIcon } from './DataDestinationIcon';
 export { DataEncryption30Icon } from './DataEncryption30Icon';
 export { DataEncryptionIcon } from './DataEncryptionIcon';
-export { Dataflows30Icon } from './Dataflows30Icon';
 export { DataIcon } from './DataIcon';
 export { DataRefreshIcon } from './DataRefreshIcon';
 export { DataSchema30Icon } from './DataSchema30Icon';
 export { DataSource30Icon } from './DataSource30Icon';
-export { DatasourceIcon } from './DatasourceIcon';
-export { DatasourceSegment30Icon } from './DatasourceSegment30Icon';
 export { DataView30Icon } from './DataView30Icon';
 export { DataViewIcon } from './DataViewIcon';
+export { Dataflows30Icon } from './Dataflows30Icon';
+export { DatasourceIcon } from './DatasourceIcon';
+export { DatasourceSegment30Icon } from './DatasourceSegment30Icon';
 export { DecreaseDecimalIcon } from './DecreaseDecimalIcon';
 export { DeleteRemoveTrashIcon } from './DeleteRemoveTrashIcon';
 export { DeliveryLogIcon } from './DeliveryLogIcon';
@@ -180,13 +180,13 @@ export { Form30Icon } from './Form30Icon';
 export { ForwardIcon } from './ForwardIcon';
 export { FreeDrawIcon } from './FreeDrawIcon';
 export { FullReviewIcon } from './FullReviewIcon';
+export { GPTIcon } from './GPTIcon';
 export { GalleryTemplateIcon } from './GalleryTemplateIcon';
 export { GeneralSettingIcon } from './GeneralSettingIcon';
 export { GeneralSettings30Icon } from './GeneralSettings30Icon';
 export { GenerateAutoWizardIcon } from './GenerateAutoWizardIcon';
 export { Geofence30Icon } from './Geofence30Icon';
 export { GetInsightIcon } from './GetInsightIcon';
-export { GPTIcon } from './GPTIcon';
 export { GridViewIcon } from './GridViewIcon';
 export { GroupIcon } from './GroupIcon';
 export { GroupLayerIcon } from './GroupLayerIcon';
@@ -247,8 +247,8 @@ export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NotificationIcon } from './NotificationIcon';
-export { NotificationsActiveIcon } from './NotificationsActiveIcon';
 export { NotificationSettingIcon } from './NotificationSettingIcon';
+export { NotificationsActiveIcon } from './NotificationsActiveIcon';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OpenUrlIcon } from './OpenUrlIcon';
 export { OrchestrationIcon } from './OrchestrationIcon';
@@ -300,6 +300,7 @@ export { RestoreDefaultIcon } from './RestoreDefaultIcon';
 export { ResumeIcon } from './ResumeIcon';
 export { RightExpandIcon } from './RightExpandIcon';
 export { Role30Icon } from './Role30Icon';
+export { SQLWorkspace30Icon } from './SQLWorkspace30Icon';
 export { SaveAsIcon } from './SaveAsIcon';
 export { SaveIcon } from './SaveIcon';
 export { ScheduleEmailDeliveryIcon } from './ScheduleEmailDeliveryIcon';
@@ -323,9 +324,9 @@ export { SignatureIcon } from './SignatureIcon';
 export { SlideGroupIcon } from './SlideGroupIcon';
 export { Sort1Icon } from './Sort1Icon';
 export { SortIcon } from './SortIcon';
-export { SQLWorkspace30Icon } from './SQLWorkspace30Icon';
 export { SqlWorkspaceIcon } from './SqlWorkspaceIcon';
 export { StatisticIcon } from './StatisticIcon';
+export { StatusInfoIcon } from './StatusInfoIcon';
 export { StickerIcon } from './StickerIcon';
 export { StopRecordIcon } from './StopRecordIcon';
 export { StoreIcon } from './StoreIcon';
@@ -373,8 +374,8 @@ export { VisitorIcon } from './VisitorIcon';
 export { VisitorInformationIcon } from './VisitorInformationIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
-export { WebhookIcon } from './WebhookIcon';
 export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
+export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

package/es/components/icons/index.js

@@ -1,9 +1,9 @@
 export { AccountCircleIcon } from './AccountCircleIcon';
 export { AccountCircleOutlineIcon } from './AccountCircleOutlineIcon';
-export { Accounts30Icon } from './Accounts30Icon';
 export { AccountSharing30Icon } from './AccountSharing30Icon';
 export { AccountSharingIcon } from './AccountSharingIcon';
 export { AccountTreeIcon } from './AccountTreeIcon';
+export { Accounts30Icon } from './Accounts30Icon';
 export { AddChartIcon } from './AddChartIcon';
 export { AddFolderIcon } from './AddFolderIcon';
 export { AddIcon } from './AddIcon';
@@ -52,6 +52,7 @@ export { ChatBubbleOutlineIcon } from './ChatBubbleOutlineIcon';
 export { ChatConversationCommentAddCommentIcon } from './ChatConversationCommentAddCommentIcon';
 export { ChatMentionIcon } from './ChatMentionIcon';
 export { ChatUnreadIcon } from './ChatUnreadIcon';
+export { CheckSlimIcon } from './CheckSlimIcon';
 export { CheckboxChecked5RadiusIcon } from './CheckboxChecked5RadiusIcon';
 export { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
 export { CheckboxIndeterminate5RadiusIcon } from './CheckboxIndeterminate5RadiusIcon';
@@ -59,7 +60,6 @@ export { CheckboxIndeterminateIcon } from './CheckboxIndeterminateIcon';
 export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
 export { ChecklistRtlIcon } from './ChecklistRtlIcon';
-export { CheckSlimIcon } from './CheckSlimIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleInfoIcon } from './CircleInfoIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
@@ -95,15 +95,15 @@ export { DataDestination30Icon } from './DataDestination30Icon';
 export { DataDestinationIcon } from './DataDestinationIcon';
 export { DataEncryption30Icon } from './DataEncryption30Icon';
 export { DataEncryptionIcon } from './DataEncryptionIcon';
-export { Dataflows30Icon } from './Dataflows30Icon';
 export { DataIcon } from './DataIcon';
 export { DataRefreshIcon } from './DataRefreshIcon';
 export { DataSchema30Icon } from './DataSchema30Icon';
 export { DataSource30Icon } from './DataSource30Icon';
-export { DatasourceIcon } from './DatasourceIcon';
-export { DatasourceSegment30Icon } from './DatasourceSegment30Icon';
 export { DataView30Icon } from './DataView30Icon';
 export { DataViewIcon } from './DataViewIcon';
+export { Dataflows30Icon } from './Dataflows30Icon';
+export { DatasourceIcon } from './DatasourceIcon';
+export { DatasourceSegment30Icon } from './DatasourceSegment30Icon';
 export { DecreaseDecimalIcon } from './DecreaseDecimalIcon';
 export { DeleteRemoveTrashIcon } from './DeleteRemoveTrashIcon';
 export { DeliveryLogIcon } from './DeliveryLogIcon';
@@ -180,13 +180,13 @@ export { Form30Icon } from './Form30Icon';
 export { ForwardIcon } from './ForwardIcon';
 export { FreeDrawIcon } from './FreeDrawIcon';
 export { FullReviewIcon } from './FullReviewIcon';
+export { GPTIcon } from './GPTIcon';
 export { GalleryTemplateIcon } from './GalleryTemplateIcon';
 export { GeneralSettingIcon } from './GeneralSettingIcon';
 export { GeneralSettings30Icon } from './GeneralSettings30Icon';
 export { GenerateAutoWizardIcon } from './GenerateAutoWizardIcon';
 export { Geofence30Icon } from './Geofence30Icon';
 export { GetInsightIcon } from './GetInsightIcon';
-export { GPTIcon } from './GPTIcon';
 export { GridViewIcon } from './GridViewIcon';
 export { GroupIcon } from './GroupIcon';
 export { GroupLayerIcon } from './GroupLayerIcon';
@@ -247,8 +247,8 @@ export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NotificationIcon } from './NotificationIcon';
-export { NotificationsActiveIcon } from './NotificationsActiveIcon';
 export { NotificationSettingIcon } from './NotificationSettingIcon';
+export { NotificationsActiveIcon } from './NotificationsActiveIcon';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OpenUrlIcon } from './OpenUrlIcon';
 export { OrchestrationIcon } from './OrchestrationIcon';
@@ -300,6 +300,7 @@ export { RestoreDefaultIcon } from './RestoreDefaultIcon';
 export { ResumeIcon } from './ResumeIcon';
 export { RightExpandIcon } from './RightExpandIcon';
 export { Role30Icon } from './Role30Icon';
+export { SQLWorkspace30Icon } from './SQLWorkspace30Icon';
 export { SaveAsIcon } from './SaveAsIcon';
 export { SaveIcon } from './SaveIcon';
 export { ScheduleEmailDeliveryIcon } from './ScheduleEmailDeliveryIcon';
@@ -323,9 +324,9 @@ export { SignatureIcon } from './SignatureIcon';
 export { SlideGroupIcon } from './SlideGroupIcon';
 export { Sort1Icon } from './Sort1Icon';
 export { SortIcon } from './SortIcon';
-export { SQLWorkspace30Icon } from './SQLWorkspace30Icon';
 export { SqlWorkspaceIcon } from './SqlWorkspaceIcon';
 export { StatisticIcon } from './StatisticIcon';
+export { StatusInfoIcon } from './StatusInfoIcon';
 export { StickerIcon } from './StickerIcon';
 export { StopRecordIcon } from './StopRecordIcon';
 export { StoreIcon } from './StoreIcon';
@@ -373,8 +374,8 @@ export { VisitorIcon } from './VisitorIcon';
 export { VisitorInformationIcon } from './VisitorInformationIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
-export { WebhookIcon } from './WebhookIcon';
 export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
+export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

package/es/components/molecules/QuillEditor/EditorToolbar.js

@@ -69,6 +69,7 @@ export const formats = [
     'image',
     'color',
     'code-block',
+    'imageBlot',
 ];
 const ToolBarWrapper = styled.div `
   border: 1px solid ${props => props.borderColor} !important;

package/es/components/molecules/QuillEditor/QuillEditor.d.ts

@@ -1,7 +1,12 @@
 import 'quill/dist/quill.snow.css';
+export declare enum TCallBack {
+    LOADING_UPLOAD = "LOADING_UPLOAD",
+    ERROR = "error"
+}
 type TEditorProps = {
     value: string;
     onChange: (value: string) => void;
+    callback?: (type: TCallBack, value: string | boolean) => void;
     placeholder: string;
     uploadService?: Function;
     height?: string | number;
@@ -9,5 +14,5 @@ type TEditorProps = {
     borderColor?: string;
     isRoundCorner?: boolean;
 };
-export declare const QuillEditor: ({ value, onChange, placeholder, uploadService, height, maxImgHeight, borderColor, isRoundCorner, }: TEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QuillEditor: ({ value, onChange, placeholder, uploadService, height, maxImgHeight, borderColor, isRoundCorner, callback, }: TEditorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/es/components/molecules/QuillEditor/QuillEditor.js

@@ -1,48 +1,29 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
 import Quill from 'quill';
-import { ImageHandler } from 'quill-upload';
+import { isFunction } from 'lodash';
+import QuillImageDropAndPaste from 'quill-image-drop-and-paste';
 // Hooks
 import debounce from 'lodash/debounce';
 // Components
 import EditorToolbar, { modules, formats } from './EditorToolbar';
 // Styles
 import 'quill/dist/quill.snow.css';
-import styled from 'styled-components';
-Quill.register('modules/imageHandler', ImageHandler);
+import { EditorWrapper, LoadingOverlay, QuillWrapper } from './styled';
+import { Spin } from '../../atoms';
 const Block = Quill.import('blots/block');
 Block.tagName = 'DIV';
 Quill.register(Block, true);
-// const toolbarOptions = [
-//   ['bold', 'italic', 'underline', 'strike'],
-//   ['blockquote', 'code-block'],
-//   ['link', 'image', 'video', 'formula'],
-//   [{ header: 1 }, { header: 2 }],
-//   [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
-//   [{ script: 'sub' }, { script: 'super' }],
-//   [{ indent: '-1' }, { indent: '+1' }],
-//   [{ direction: 'rtl' }],
-//   [{ size: ['small', false, 'large', 'huge'] }],
-//   [{ header: [1, 2, 3, 4, 5, 6, false] }],
-//   [{ color: [] }, { background: [] }],
-//   [{ font: [] }],
-//   [{ align: [] }],
-//   ['clean'],
-// ];
-const EditorWrapper = styled.div `
-  border: 1px solid ${props => props.borderColor} !important;
-
-  .ql-editor.ql-blank::before {
-    font-style: normal !important;
-  }
-
-  .ql-editor a {
-    color: #06c !important;
-  }
-`;
-export const QuillEditor = ({ value, onChange, placeholder = '', uploadService, height = 'auto', maxImgHeight = '300px', borderColor = '#d4d4d4', isRoundCorner, }) => {
+Quill.register('modules/imageDropAndPaste', QuillImageDropAndPaste);
+export var TCallBack;
+(function (TCallBack) {
+    TCallBack["LOADING_UPLOAD"] = "LOADING_UPLOAD";
+    TCallBack["ERROR"] = "error";
+})(TCallBack || (TCallBack = {}));
+export const QuillEditor = ({ value, onChange, placeholder = '', uploadService, height = 'auto', maxImgHeight = '300px', borderColor = '#d4d4d4', isRoundCorner, callback = () => { }, }) => {
     const editor = useRef(null);
     const rand = useRef(String(Math.random()).replace(/\./g, ''));
+    const [isUploading, setIsUploading] = useState(false);
     const processText = () => {
         editor.current?.root.querySelectorAll('li').forEach(li => {
             let max = 0;
@@ -56,22 +37,76 @@ export const QuillEditor = ({ value, onChange, placeholder = '', uploadService,
     const debounceQuickProcess = debounce(processText, 100);
     const debounceChange = debounce(onChange, 500);
     // Upload handler function
-    const _onUpload = async (file, resolve) => {
+    const _onUpload = async (file) => {
         try {
+            setIsUploading(true);
+            callback(TCallBack.LOADING_UPLOAD, true);
             const result = await uploadService({ files: [file], mode: 'file' });
             if (result?.data?.length) {
-                resolve(result.data[0].url);
-                editor.current.root.querySelectorAll('img.quill-upload-progress').forEach(el => {
-                    el.classList.remove('quill-upload-progress');
-                    el.style.maxHeight = maxImgHeight;
-                });
+                return result.data[0].url;
+            }
+            return '';
+        }
+        finally {
+            setIsUploading(false);
+            isFunction(callback) && callback(TCallBack.LOADING_UPLOAD, false);
+        }
+    };
+    const handlerDropImage = async (_imageDataUrl, _type, imageData) => {
+        callback(TCallBack.ERROR, 'RESET');
+        const file = imageData.toFile();
+        if (!editor.current)
+            return;
+        if (file.size > 10 * 1024 * 1024) {
+            callback(TCallBack.ERROR, 'FILE_TOO_LARGE');
+            return;
+        }
+        const range = editor.current?.getSelection();
+        if (!range)
+            return;
+        // Insert loading placeholder
+        try {
+            const fileUrl = await _onUpload(file);
+            if (fileUrl) {
+                const currentRange = editor.current?.getSelection();
+                editor.current?.insertEmbed(currentRange?.index || range.index, 'image', fileUrl, Quill.sources.USER);
             }
-            resolve('');
         }
         catch (error) {
-            resolve('');
+            callback(TCallBack.ERROR, 'UPLOAD_FAILED');
         }
     };
+    const imageHandler = useCallback(() => {
+        callback(TCallBack.ERROR, 'RESET');
+        const input = document.createElement('input');
+        input.setAttribute('type', 'file');
+        input.setAttribute('accept', 'image/*');
+        input.click();
+        input.onchange = async () => {
+            if (input !== null && input.files !== null) {
+                if (!editor.current)
+                    return;
+                const file = input.files[0];
+                if (file.size > 10 * 1024 * 1024) {
+                    callback(TCallBack.ERROR, 'FILE_TOO_LARGE');
+                    return;
+                }
+                const range = editor.current?.getSelection();
+                if (!range)
+                    return;
+                try {
+                    const fileUrl = await _onUpload(file);
+                    if (fileUrl) {
+                        const currentRange = editor.current?.getSelection();
+                        editor.current?.insertEmbed(currentRange?.index || range.index, 'image', fileUrl, Quill.sources.USER);
+                    }
+                }
+                catch (error) {
+                    callback(TCallBack.ERROR, 'UPLOAD_FAILED');
+                }
+            }
+        };
+    }, []);
     useEffect(() => {
         if (!value && editor.current) {
             editor.current.setText('');
@@ -80,22 +115,21 @@ export const QuillEditor = ({ value, onChange, placeholder = '', uploadService,
     useEffect(() => {
         if (editor.current)
             return;
+        const configModule = modules(`toolbar-${rand.current}`);
         editor.current = new Quill(`#editor-${rand.current}`, {
             theme: 'snow',
             modules: {
-                ...modules(`toolbar-${rand.current}`),
-                imageHandler: uploadService
-                    ? {
-                        imageClass: 'custom-image-class',
-                        upload: file => new Promise(resolve => {
-                            if (file.size > 10 * 1024 * 1024) {
-                                resolve('');
-                                return;
-                            }
-                            _onUpload(file, resolve);
-                        }),
-                    }
-                    : undefined,
+                ...configModule,
+                toolbar: {
+                    ...configModule.toolbar,
+                    handlers: {
+                        ...configModule.toolbar.handlers,
+                        image: imageHandler,
+                    },
+                },
+                imageDropAndPaste: {
+                    handler: handlerDropImage,
+                },
             },
             formats,
             placeholder,
@@ -111,8 +145,9 @@ export const QuillEditor = ({ value, onChange, placeholder = '', uploadService,
                 else {
                     debounceChange(editor.current?.root.innerHTML || '');
                 }
+                callback(TCallBack.ERROR, 'RESET');
             }
         });
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(EditorToolbar, { id: `toolbar-${rand.current}`, isRoundCorner: isRoundCorner, borderColor: borderColor }), _jsx(EditorWrapper, { id: `editor-${rand.current}`, style: { height, color: '#000000' }, borderColor: borderColor })] }));
+    return (_jsxs(QuillWrapper, { children: [_jsx(EditorToolbar, { id: `toolbar-${rand.current}`, isRoundCorner: isRoundCorner, borderColor: borderColor }), _jsx(EditorWrapper, { id: `editor-${rand.current}`, style: { height, color: '#000000' }, borderColor: borderColor, children: isUploading && (_jsx(LoadingOverlay, { children: _jsx(Spin, { spinning: isUploading }) })) })] }));
 };

package/es/components/molecules/QuillEditor/styled.d.ts

@@ -0,0 +1,5 @@
+export declare const QuillWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EditorWrapper: import("styled-components").StyledComponent<"div", any, {
+    borderColor: string;
+}, never>;
+export declare const LoadingOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/QuillEditor/styled.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+export const QuillWrapper = styled.div `
+  position: relative;
+`;
+export const EditorWrapper = styled.div `
+  position: relative;
+  border: 1px solid ${props => props.borderColor} !important;
+
+  .ql-editor.ql-blank::before {
+    font-style: normal !important;
+  }
+
+  .ql-editor a {
+    color: #06c !important;
+  }
+`;
+export const LoadingOverlay = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(2px);
+`;

package/es/components/organism/Help/Help.js

@@ -30,6 +30,7 @@ import { BugIcon, CameraIcon, OpenUrlIcon, RequestIcon, ScreenshotMonitorIcon, }
 import { base64ToFile, convertBlobToFile, generateUniqueId, mergeAudioStreams, } from '@antscorp/antsomi-ui/es/components/molecules/CaptureScreen/utils';
 import { expendDefault, formatParams, postCustomEvent } from './utils';
 import { useGetListUser } from './queries';
+import { TCallBack } from '../../molecules/QuillEditor/QuillEditor';
 const antIcon = _jsx(LoadingOutlined, { style: { fontSize: 40 }, spin: true });
 const Loading = ({ isLoading, height, width }) => isLoading && (_jsx(WrapperLoading, { className: "loader-container", height: height, width: width, children: _jsx(Spin, { indicator: antIcon }) }));
 const Help = props => {
@@ -93,6 +94,7 @@ const Help = props => {
     const streamTracks = useRef();
     const allAppOptionsRef = useRef([]);
     const [fileInputKey, setFileInputKey] = useState(0);
+    const [isLoadingUpload, setIsLoadingUpload] = useState(false);
     // const showModal = (captureKey: CaptureTypeProps) => {
     //   setOpen(true);
     //   setCaptureType(captureKey);
@@ -250,12 +252,17 @@ const Help = props => {
         }
     }, [allAppOptions, config, domainTicket, token, userId]);
     const handleOnchangeFile = e => {
-        const limitSize = 50 * 1024 * 1024;
-        const sizeFile = e.target?.files[0]?.size;
+        const file = e.target?.files[0];
+        if (!file)
+            return;
+        const sizeFile = file.size;
+        const fileType = file.type;
+        const isImage = fileType.startsWith('image/');
+        const limitSize = isImage ? 10 * 1024 * 1024 : 50 * 1024 * 1024;
         if (sizeFile >= limitSize) {
             setErrFile({
                 isError: true,
-                message: '*Maximum upload file size: 50MB',
+                message: `Maximum file size is reached (10MB for image & 50MB for other types).`,
             });
         }
         else {
@@ -265,6 +272,7 @@ const Help = props => {
             });
             handleUploadFile(e.target.files[0]);
         }
+        setFileInputKey(fileInputKey + 1);
     };
     const handleRemoveFile = token => {
         let newListFile = valueInput.files;
@@ -837,10 +845,13 @@ const Help = props => {
                                                 domain: domainUpload,
                                                 token,
                                                 userId,
-                                            }), onChange: content => setValueInput(prevVal => ({
-                                                ...prevVal,
-                                                message: content,
-                                            })), placeholder: "Enter your comment...", borderColor: "#e6e6e6", isRoundCorner: false, height: 159 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkFiles, { children: valueInput.files?.map((file, index) => (_jsxs(WrapperLinkItemFiles, { children: [_jsxs("span", { style: {
+                                            }), onChange: content => {
+                                                setValueInput(prevVal => ({
+                                                    ...prevVal,
+                                                    message: content,
+                                                }));
+                                                setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
+                                            }, callback: callbackEditor, placeholder: "Enter your comment...", borderColor: "#e6e6e6", isRoundCorner: false, height: 159 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkFiles, { children: valueInput.files?.map((file, index) => (_jsxs(WrapperLinkItemFiles, { children: [_jsxs("span", { style: {
                                                                     display: 'flex',
                                                                     alignItems: 'center',
                                                                     gap: '10px',
@@ -877,9 +888,35 @@ const Help = props => {
             }
         }
     };
-    const isDisableButtonSend = useMemo(() => {
-        return !valueInput?.title || !valueInput?.message;
-    }, [valueInput]);
+    const isDisableButtonSend = useMemo(() => !valueInput?.title || !valueInput?.message || isLoadingUpload, [valueInput, isLoadingUpload]);
+    const callbackEditor = (type, value) => {
+        switch (type) {
+            case TCallBack.LOADING_UPLOAD:
+                setIsLoadingUpload(value);
+                break;
+            case TCallBack.ERROR: {
+                switch (value) {
+                    case 'FILE_TOO_LARGE':
+                        setErrFile({
+                            isError: true,
+                            message: '*Maximum upload file size: 10MB',
+                        });
+                        break;
+                    case 'RESET':
+                        setErrFile({
+                            isError: false,
+                            message: '',
+                        });
+                        break;
+                    default:
+                        break;
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    };
     const renderPopupLayout = (type) => (_jsxs(_Fragment, { children: [_jsx(Loading, { isLoading: isMainLoading || isFetchingUsers, width: "100%", height: "100%" }), _jsx(WrapperHeader, { className: "cursor", children: _jsx(Header, { children: title }) }), _jsx(WrapperBody, { className: "popup-content", style: {
                     padding: type === REPORT_TYPES.CHAT ||
                         type === REPORT_TYPES.HELP ||

package/es/components/organism/TicketEditor/Content.js

@@ -11,6 +11,8 @@ import Service from './Service';
 import { MESSAGE_TYPE, TICKET_CUSTOM_MESSAGE_KEY } from './constant';
 import { WrapperContent, WrapperContentInput, WrapperEditor, WrapperIconEditor, WrapperInputFile, WrapperLable, WrapperLeftContent, WrapperLinkItemFiles, WrapperMessageContent, WrapperRightContent, WrapperTextEdit, WrapperTextInput, DrawerHeader, } from './styled';
 import { formatAccountId, formatDatarender, formatParams, handleValidateContent, postCustomEvent, } from './util';
+import { TCallBack } from '../../molecules/QuillEditor/QuillEditor';
+import { isBoolean } from 'lodash';
 const initValueInput = {
     originTitle: 'Create new ticket',
     title: '',
@@ -50,23 +52,6 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
     const isUpdate = action === 'edit' && ticketId;
     const valueInputRef = useRef(valueInput);
     valueInputRef.current = valueInput;
-    // const isRulesEdit = useMemo(() => {
-    //   const { title, feature, ticketType, priority, category, ownerId, followers, message, files, referenceUrl } = valueInput
-    //   if (
-    //     !title?.length && referenceUrl === window.location.href
-    //     && Object.keys(feature)?.length <= 2
-    //     && Object.keys(ticketType)?.length <= 2 && (!Object.keys(priority)?.length || Object.values(priority)[0] === '-')
-    //     && Object.keys(category)?.length <= 2 && ((!ownerId?.length && accountEdit === 4 && isAllAccount) || (ownerId[0]?.userId === Number(initOwnerId || userId)))
-    //     && followers?.length === accountManage?.length
-    //     && !message?.length && !files.length && !isUpdate
-    //   ) {
-    //     return false
-    //   }else if(isUpdate && compareArrays(valueInput.followers, ticketDetails.followers)
-    //     && !valueInput?.message?.length && !valueInput?.files?.length) {
-    //     return false
-    //   }
-    //   return true
-    // }, [valueInput])
     const updateValueInput = value => {
         setValueInput(prev => ({
             ...prev,
@@ -248,7 +233,7 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
     const handleEditorChange = content => {
         setTextValue(content);
         updateValueInput({ message: content });
-        setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
+        // setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
     };
     const handleUpdateFollowers = arrFolowers => {
         const params = {
@@ -331,12 +316,17 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
         };
     }, [isOpenToast]);
     const handleOnchangeFile = e => {
-        const limitSize = 50 * 1024 * 1024;
-        const sizeFile = e.target?.files[0]?.size;
+        const file = e.target?.files[0];
+        if (!file)
+            return;
+        const sizeFile = file.size;
+        const fileType = file.type;
+        const isImage = fileType.startsWith('image/');
+        const limitSize = isImage ? 10 * 1024 * 1024 : 50 * 1024 * 1024;
         if (sizeFile >= limitSize) {
             setErrFile({
                 isError: true,
-                message: '*Maximum upload file size: 50MB',
+                message: `Maximum file size is reached (10MB for image & 50MB for other types).`,
             });
         }
         else {
@@ -363,34 +353,58 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
         });
         setFileInputKey(prev => prev + 1);
     };
+    const callbackEditor = (type, value) => {
+        switch (type) {
+            case TCallBack.LOADING_UPLOAD:
+                if (isBoolean(value)) {
+                    setIsLoadingUpload(value);
+                }
+                break;
+            case TCallBack.ERROR: {
+                switch (value) {
+                    case 'FILE_TOO_LARGE':
+                        setErrFile({
+                            isError: true,
+                            message: '*Maximum upload file size: 10MB',
+                        });
+                        break;
+                    case 'RESET':
+                        setErrFile({
+                            isError: false,
+                            message: '',
+                        });
+                        break;
+                    default:
+                        break;
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    };
     return (_jsxs("div", { style: { height: '100%' }, children: [_jsxs(Helmet, { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("title", { children: browserTitle })] }), _jsxs(Spin, { style: { height: '100vh' }, spinning: isLoading ||
                     isLoadingDetails ||
                     isLoadingDataSouce ||
                     isLoadingFollower ||
                     isLoadingSelectedAccount, children: [_jsxs(DrawerHeader, { children: [_jsx(EditableName, { value: valueInput.title, onChange: handleOnchangeTitle, readonly: isUpdate, error: isEmptyField && (!valueInput.title || !valueInput.title.trim())
                                     ? "Title can't be empty"
-                                    : '' }), _jsx("div", { id: "header-journey-right", className: "right-content", children: !isUpdate && (_jsx(Button, { type: "primary", onClick: handleSubmit, children: "Save" })) })] }), _jsxs(WrapperContent, { style: { height: '100%' }, children: [_jsxs(WrapperLeftContent, { children: [_jsxs(WrapperContentInput, { style: { alignItems: 'flex-start' }, children: [_jsxs(WrapperLable, { children: ["Owner", _jsx("span", { style: { color: '#ff0000' }, children: "*" })] }), _jsxs("div", { children: [_jsx(SelectAccount, { type: "default", initData: (valueInput?.ownerId || []).map((item) => item.userId), nameKey: "userName", userIdKey: "userId", users: listUsers, isViewMode: isUpdate || !isAllAccount || accountEdit !== 4, onChange: (_, users) => updateValueInput({ ownerId: users }), onlyOne: true }), isEmptyField && !valueInput?.ownerId?.length && (_jsx("div", { className: "error-message", children: "*This field can't be empty" }))] })] }), _jsxs(WrapperContentInput, { style: { marginTop: '15px', alignItems: 'flex-start' }, children: [_jsx(WrapperLable, { children: "Follower(s)" }), _jsx(SelectAccount, { type: "default", initData: [
+                                    : '' }), _jsx("div", { id: "header-journey-right", className: "right-content", children: !isUpdate && (_jsx(Button, { disabled: isLoadingUpload, type: "primary", onClick: handleSubmit, children: "Save" })) })] }), _jsxs(WrapperContent, { style: { height: '100%' }, children: [_jsxs(WrapperLeftContent, { children: [_jsxs(WrapperContentInput, { style: { alignItems: 'flex-start' }, children: [_jsxs(WrapperLable, { children: ["Owner", _jsx("span", { style: { color: '#ff0000' }, children: "*" })] }), _jsxs("div", { children: [_jsx(SelectAccount, { type: "default", initData: (valueInput?.ownerId || []).map((item) => item.userId), nameKey: "userName", userIdKey: "userId", users: listUsers, isViewMode: isUpdate || !isAllAccount || accountEdit !== 4, onChange: (_, users) => updateValueInput({ ownerId: users }), onlyOne: true }), isEmptyField && !valueInput?.ownerId?.length && (_jsx("div", { className: "error-message", children: "*This field can't be empty" }))] })] }), _jsxs(WrapperContentInput, { style: { marginTop: '15px', alignItems: 'flex-start' }, children: [_jsx(WrapperLable, { children: "Follower(s)" }), _jsx(SelectAccount, { type: "default", initData: [
                                                     ...accountManage,
                                                     ...(valueInput?.followers || []).map((item) => item.userId),
-                                                ], nameKey: "userName", userIdKey: "userId", users: listUsers, disabledAccount: accountManage, onChange: (_, followers) => updateValueInput({ followers }) })] }), dataSelects?.map((data) => (
-                                    // eslint-disable-next-line react/jsx-key
-                                    _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { children: data.title }), _jsx("div", { style: { flex: 1 }, children: isUpdate ? (_jsx(WrapperTextEdit, { children: !valueInput[data?.value]?.name?.length
+                                                ], nameKey: "userName", userIdKey: "userId", users: listUsers, disabledAccount: accountManage, onChange: (_, followers) => updateValueInput({ followers }) })] }), dataSelects?.map((data) => (_jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { children: data.title }), _jsx("div", { style: { flex: 1 }, children: isUpdate ? (_jsx(WrapperTextEdit, { children: !valueInput[data?.value]?.name?.length
                                                         ? '--'
-                                                        : valueInput[data?.value]?.name })) : (_jsx(DropdownComponent, { data: data.field_options, setValueInput: updateValueInput, valueInput: valueInput, type: data.value, isUpdate: isUpdate, title: data.title })) })] }, data.id))), _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { htmlFor: "referenceUrl", children: "Reference URL" }), isUpdate ? (valueInput.referenceUrl ? (_jsx(Tooltip, { title: valueInput.referenceUrl, placement: "top", children: _jsx(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank", children: valueInput.referenceUrl }) })) : (_jsx(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank", children: valueInput.referenceUrl }))) : (_jsx(WrapperTextInput, { placeholder: "Reference URL", id: "referenceUrl", 
-                                                // width="300px"
-                                                onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs("div", { children: [_jsx(QuillEditor, { value: textValue, uploadService: Service.tickets.callApi.uploadImg({
+                                                        : valueInput[data?.value]?.name })) : (_jsx(DropdownComponent, { data: data.field_options, setValueInput: updateValueInput, valueInput: valueInput, type: data.value, isUpdate: isUpdate, title: data.title })) })] }, data.id))), _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { htmlFor: "referenceUrl", children: "Reference URL" }), isUpdate ? (valueInput.referenceUrl ? (_jsx(Tooltip, { title: valueInput.referenceUrl, placement: "top", children: _jsx(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank", children: valueInput.referenceUrl }) })) : (_jsx(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank", children: valueInput.referenceUrl }))) : (_jsx(WrapperTextInput, { placeholder: "Reference URL", id: "referenceUrl", onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs("div", { children: [_jsx(QuillEditor, { value: textValue, uploadService: Service.tickets.callApi.uploadImg({
                                                             domain: domainUpload,
                                                             token,
                                                             userId,
-                                                        }), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file, index) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () => {
+                                                        }), onChange: handleEditorChange, callback: callbackEditor, placeholder: "Enter your comment...", height: 195 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file, index) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () => {
                                                                                 handleRemoveFileV2(index);
                                                                             }, className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.file_name))) })), _jsxs(WrapperIconEditor, { borderTop: !!valueInput.files?.length, children: [_jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: `fileImage-${fileInputKey}`, className: "upload-wrapper-label", children: _jsx(Icon, { type: "icon-ants-attachment", className: "upload-icon" }) }), _jsx("input", { type: "file", style: { position: 'absolute', top: 0, right: 0, display: 'none' }, name: `fileImage-${fileInputKey}`, id: `fileImage-${fileInputKey}`, onChange: handleOnchangeFile }, fileInputKey)] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
                                                                             background: `${!handleValidateContent(textValue) || isLoadingUpload
                                                                                 ? '#ccc'
                                                                                 : '#1f5fac'}`,
-                                                                        }, onClick: handleUpdateComment, loading: isLoadingUpload, children: "Reply" }))] })] })] }), errFile.isError ? (_jsx("div", { className: "error-message", children: errFile.message })) : (isEmptyField &&
-                                                !valueInput?.message && (_jsx("div", { className: "error-message", children: "*This field can't be empty" })))] }), isUpdate && (_jsx(Spin, { spinning: isLoadingComment, children: _jsx(WrapperMessageContent, { children: listComment?.map(comment => (_jsx(MessageComponent, { toUser: comment?.toUser, fromUser: comment?.fromUser, followers: comment?.followers, 
-                                                // mailFollower={comment?.mailFollower}
-                                                message: comment?.message, date: comment?.createdDate, attachments: comment?.attachments, timeZone: timeZone, submitterEmail: comment?.submitterEmail }, comment?.id))) }) }))] })] })] })] }));
+                                                                        }, onClick: handleUpdateComment, children: "Reply" }))] })] })] }), errFile.isError ? (_jsx("div", { className: "error-message", children: errFile.message })) : (isEmptyField &&
+                                                !valueInput?.message && (_jsx("div", { className: "error-message", children: "*This field can't be empty" })))] }), isUpdate && (_jsx(Spin, { spinning: isLoadingComment, children: _jsx(WrapperMessageContent, { children: listComment?.map(comment => (_jsx(MessageComponent, { toUser: comment?.toUser, fromUser: comment?.fromUser, followers: comment?.followers, message: comment?.message, date: comment?.createdDate, attachments: comment?.attachments, timeZone: timeZone, submitterEmail: comment?.submitterEmail }, comment?.id))) }) }))] })] })] })] }));
 };
 export default Content;

package/es/components/organism/TicketEditor/components/MessageComponent.js

@@ -19,6 +19,7 @@ const MessageComponent = ({ toUser, fromUser, followers, attachments, message, d
         if (refMesage.current) {
             refMesage.current.querySelectorAll('img')?.forEach(img => {
                 img.style.cursor = 'pointer';
+                img.style.width = '100%';
                 img.addEventListener('click', () => {
                     setModalImg({
                         ...modalImg,

package/es/components/organism/TicketEditor/styled.js

@@ -424,6 +424,7 @@ export const WrapperLinkItemFiles = styled.div `
       display: flex;
       align-items: center;
       gap: 10px;
+      overflow: hidden;
     }
     .file-icon {
       font-size: 20.5px;

package/es/components/organism/TicketEditorV2/Content.js

@@ -10,6 +10,7 @@ import Service from './Service';
 import { WrapperContent, WrapperContentInput, WrapperEditor, WrapperIconEditor, WrapperInputFile, WrapperLable, WrapperLeftContent, WrapperLinkItemFiles, WrapperMessageContent, WrapperRightContent, WrapperTextEdit, WrapperTextInput, } from './styled';
 import { formatDatarender, handleValidateContent } from './util';
 import { get, keyBy } from 'lodash';
+import { TCallBack } from '../../molecules/QuillEditor/QuillEditor';
 const initValueInput = {
     originTitle: 'Create new ticket',
     title: '',
@@ -137,7 +138,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
     const handleEditorChange = content => {
         setTextValue(content);
         updateValueInput({ message: content });
-        setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
+        // setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
     };
     const handleUpdateFollowers = arrFolowers => {
         const params = {
@@ -221,12 +222,17 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
         };
     }, [isOpenToast]);
     const handleOnchangeFile = e => {
-        const limitSize = 50 * 1024 * 1024;
-        const sizeFile = e.target?.files[0]?.size;
+        const file = e.target?.files[0];
+        if (!file)
+            return;
+        const sizeFile = file.size;
+        const fileType = file.type;
+        const isImage = fileType.startsWith('image/');
+        const limitSize = isImage ? 10 * 1024 * 1024 : 50 * 1024 * 1024;
         if (sizeFile >= limitSize) {
             setErrFile({
                 isError: true,
-                message: '*Maximum upload file size: 50MB',
+                message: `Maximum file size is reached (10MB for image & 50MB for other types).`,
             });
         }
         else {
@@ -267,15 +273,43 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
                             ? '--'
                             : dataSelectOptions[ticketDetails[info?.value]]?.name }) })] }, info.id));
     };
+    const callbackEditor = (type, value) => {
+        switch (type) {
+            case TCallBack.LOADING_UPLOAD:
+                setIsLoadingUpload(value);
+                break;
+            case TCallBack.ERROR: {
+                switch (value) {
+                    case 'FILE_TOO_LARGE':
+                        setErrFile({
+                            isError: true,
+                            message: '*Maximum upload file size: 10MB',
+                        });
+                        break;
+                    case 'RESET':
+                        setErrFile({
+                            isError: false,
+                            message: '',
+                        });
+                        break;
+                    default:
+                        break;
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    };
     return (_jsxs("div", { style: { height: '100%' }, children: [_jsxs(Helmet, { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("title", { children: browserTitle })] }), _jsx(Spin, { style: { height: '100vh' }, spinning: isLoading || isLoadingDetails || isLoadingDataSouce || isLoadingFollower, children: _jsxs(WrapperContent, { style: { height: '100%' }, children: [_jsxs(WrapperLeftContent, { children: [_jsxs(WrapperContentInput, { style: { alignItems: 'flex-start' }, children: [_jsxs(WrapperLable, { children: ["Owner", _jsx("span", { style: { color: '#ff0000' }, children: "*" })] }), _jsx("div", { children: ownerEmail })] }), _jsxs(WrapperContentInput, { style: { marginTop: '15px', alignItems: 'flex-start' }, children: [_jsx(WrapperLable, { children: "Follower(s)" }), _jsx(SelectAccount, { type: "default", initData: ticketDetails?.followers || [], nameKey: "userName", userIdKey: "userId", users: listUsers, onChange: (_, followers) => onChangeFollowers(followers) })] }), dataSelects?.map((data) => _jsx(_Fragment, { children: renderOptions(data) })), _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { htmlFor: "referenceUrl", children: "Reference URL" }), isUpdate ? (ticketDetails.referenceUrl ? (_jsx(Tooltip, { title: ticketDetails.referenceUrl, placement: "top", children: _jsx(WrapperTextEdit, { color: "#005fb8", href: ticketDetails.referenceUrl, target: "_blank", children: ticketDetails.referenceUrl }) })) : (_jsx(WrapperTextEdit, { color: "#005fb8", href: ticketDetails.referenceUrl, target: "_blank", children: ticketDetails.referenceUrl }))) : (_jsx(WrapperTextInput, { placeholder: "Reference URL", id: "referenceUrl", 
                                             // width="300px"
-                                            onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs("div", { children: [_jsx(QuillEditor, { value: textValue, uploadService: Service.tickets.callApi.uploadFile({
+                                            onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs(_Fragment, { children: [_jsx(QuillEditor, { value: textValue, uploadService: Service.tickets.callApi.uploadFile({
                                                         domain: domainUpload,
-                                                    }), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file, index) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () => handleRemoveFileV2(index), className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.token))) })), _jsxs(WrapperIconEditor, { borderTop: !!valueInput.files?.length, children: [_jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: `fileImage-${fileInputKey}`, className: "upload-wrapper-label", children: _jsx(Icon, { type: "icon-ants-attachment", className: "upload-icon" }) }), _jsx("input", { type: "file", style: { position: 'absolute', top: 0, right: 0, display: 'none' }, name: `fileImage-${fileInputKey}`, id: `fileImage-${fileInputKey}`, onChange: handleOnchangeFile }, fileInputKey)] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
+                                                    }), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195, callback: callbackEditor }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file, index) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () => handleRemoveFileV2(index), className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.token))) })), _jsxs(WrapperIconEditor, { borderTop: !!valueInput.files?.length, children: [_jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: `fileImage-${fileInputKey}`, className: "upload-wrapper-label", children: _jsx(Icon, { type: "icon-ants-attachment", className: "upload-icon" }) }), _jsx("input", { type: "file", style: { position: 'absolute', top: 0, right: 0, display: 'none' }, name: `fileImage-${fileInputKey}`, id: `fileImage-${fileInputKey}`, onChange: handleOnchangeFile }, fileInputKey)] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
                                                                         background: `${!handleValidateContent(textValue) || isLoadingUpload
                                                                             ? '#ccc'
                                                                             : '#1f5fac'}`,
-                                                                    }, onClick: handleUpdateComment, loading: isLoadingUpload, children: "Reply" }))] })] })] }), errFile.isError ? (_jsx("div", { className: "error-message", children: errFile.message })) : (isEmptyField &&
+                                                                    }, onClick: handleUpdateComment, children: "Reply" }))] })] })] }), errFile.isError ? (_jsx("div", { className: "error-message", children: errFile.message })) : (isEmptyField &&
                                             !valueInput?.message && (_jsx("div", { className: "error-message", children: "* This field can't be empty" })))] }), isUpdate && (_jsx(Spin, { spinning: isLoadingComment, children: _jsx(WrapperMessageContent, { children: listComment?.map(comment => (_jsx(MessageComponent, { toUser: comment?.toUser, fromUser: comment?.fromUser, followers: comment?.followers, 
                                             // mailFollower={comment?.mailFollower}
                                             message: comment?.message, date: comment?.createdDate, attachments: comment?.attachments, timeZone: timeZone, submitterEmail: comment?.submitterEmail }, comment?.id))) }) }))] })] }) })] }));

package/es/components/organism/TicketEditorV2/components/MessageComponent.js

@@ -18,6 +18,7 @@ const MessageComponent = ({ toUser, fromUser, followers, attachments, message, d
         if (refMesage.current) {
             refMesage.current.querySelectorAll('img')?.forEach(img => {
                 img.style.cursor = 'pointer';
+                img.style.width = '100%';
                 img.addEventListener('click', () => {
                     setModalImg({
                         ...modalImg,

package/es/components/organism/TicketEditorV2/styled.js

@@ -34,7 +34,7 @@ export const WrapperLeftContent = styled.div `
 `;
 export const WrapperRightContent = styled.div `
   flex: 2;
-  width: 100%;
+  max-width: 66.67%;
   ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -423,6 +423,7 @@ export const WrapperLinkItemFiles = styled.div `
       display: flex;
       align-items: center;
       gap: 10px;
+      overflow: hidden;
     }
     .file-icon {
       font-size: 20.5px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.88",
+  "version": "2.0.90",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -113,6 +113,7 @@
     "qs": "6.10.3",
     "quill": "2.0.3",
     "quill-upload": "0.0.13",
+    "quill-image-drop-and-paste": "^2.0.1",
     "react-ace": "9.5.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-color": "2.19.3",