@antscorp/antsomi-ui 2.0.103 → 2.0.104

package/es/providers/ConfigProvider/ConfigProvider.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import { StyleProvider } from '@ant-design/cssinjs';
-import { ConfigProvider as AntdConfigProvider, App } from 'antd';
+import { ConfigProvider as AntdConfigProvider } from 'antd';
 import dayjs from 'dayjs';
 import localeData from 'dayjs/plugin/localeData';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import weekday from 'dayjs/plugin/weekday';
 import { useEffect, useRef } from 'react';
+import { App } from '../../components';
 /** dayjs plugins for timezone */
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
@@ -15,6 +16,8 @@ import { ANTSOMI_COMPONENT_PREFIX_CLS, THEME } from '@antscorp/antsomi-ui/es/con
 // Style
 import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 import { GlobalStyle } from './GlobalStyle';
+// Initialize languages
+// import '@antscorp/antsomi-ui/es/locales/i18n';
 import 'animate.css';
 import { AppConfigProvider } from '../AppConfigProvider';
 // Hooks

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -24,6 +24,58 @@ export const GlobalStyle = () => (_jsx(Global, { styles: css `
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+      }
+
+      blockquote,
+      dl,
+      dd,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      hr,
+      figure,
+      p,
+      pre {
+        margin: 0;
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-size: inherit;
+        font-weight: inherit;
+      }
+
+      ol,
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      img,
+      svg,
+      video,
+      canvas,
+      audio,
+      iframe,
+      embed,
+      object {
+        vertical-align: middle;
+      }
+
+      img,
+      video {
+        max-width: 100%;
+        height: auto;
       }
 
       hr {
@@ -146,65 +198,120 @@ export const GlobalStyle = () => (_jsx(Global, { styles: css `
         i {
           font-size: 20px;
         }
-      }
-
-      .antsomi-btn-default {
-        &:not(:disabled):hover {
-          border-color: ${THEME.token?.blue3} !important;
-          background-color: ${THEME.token?.blue} !important;
-        }
-        &:not(:disabled).antsomi-btn-default-active {
-          border-color: ${THEME.token?.colorPrimary} !important;
-          background-color: ${THEME.token?.blue1_1} !important;
-        }
-
-        &.antsomi-btn-dangerous {
-          border-color: ${THEME.token?.red2} !important;
 
+        &.antsomi-btn-default {
           &:not(:disabled):hover {
-            border-color: ${THEME.token?.red3} !important;
-            background-color: ${THEME.token?.red} !important;
+            border-color: ${THEME.token?.blue3};
+            background-color: ${THEME.token?.blue};
+          }
+          &:not(:disabled).antsomi-btn-default-active {
+            border-color: ${THEME.token?.colorPrimary};
+            background-color: ${THEME.token?.blue1_1};
           }
-        }
 
-        &.antsomi-btn-icon-only {
-          width: 36px !important;
-          height: 36px !important;
-        }
+          &.antsomi-btn-dangerous {
+            border-color: ${THEME.token?.red2};
 
-        &.antsomi-btn-icon-only.antsomi-btn-sm {
-          /* Important to override the above code before */
-          width: 24px !important;
-          height: 24px !important;
-        }
-      }
+            &:not(:disabled):hover {
+              border-color: ${THEME.token?.red3};
+              background-color: ${THEME.token?.red};
+            }
+          }
 
-      .antsomi-btn-text:disabled,
-      .antsomi-btn-link:disabled {
-        color: ${THEME.token?.bw6} !important;
-      }
+          &.antsomi-btn-icon-only {
+            width: 36px;
+            height: 36px;
+          }
 
-      /* .antsomi-btn-primary:disabled, */
-      .antsomi-btn-default:disabled,
-      .antsomi-btn-dashed:disabled,
-      .antsomi-btn-disabled,
-      .antsomi-btn-default.antsomi-btn-dangerous:disabled,
-      .antsomi-btn-primary.antsomi-btn-dangerous:disabled {
-        border-color: ${THEME.token?.bw4} !important;
-      }
+          &.antsomi-btn-icon-only.antsomi-btn-sm {
+            /* Important to override the above code before */
+            width: 24px;
+            height: 24px;
+          }
+        }
 
-      .antsomi-btn-default:disabled,
-      .antsomi-btn-dashed:disabled,
-      .antsomi-btn-disabled,
-      .antsomi-btn-default.antsomi-btn-dangerous:disabled {
-        color: ${THEME.token?.bw6} !important;
-        background-color: ${THEME.token?.bw2} !important;
-      }
+        &.antsomi-btn-text:disabled,
+        &.antsomi-btn-link:disabled {
+          color: ${THEME.token?.bw6};
+        }
+
+        /* .antsomi-btn-primary:disabled, */
+        &.antsomi-btn-default:disabled,
+        &.antsomi-btn-dashed:disabled,
+        &.antsomi-btn-disabled,
+        &.antsomi-btn-default.antsomi-btn-dangerous:disabled,
+        &.antsomi-btn-primary.antsomi-btn-dangerous:disabled {
+          border-color: ${THEME.token?.bw4};
+        }
+
+        &.antsomi-btn-default:disabled,
+        &.antsomi-btn-dashed:disabled,
+        &.antsomi-btn-disabled,
+        &.antsomi-btn-default.antsomi-btn-dangerous:disabled {
+          color: ${THEME.token?.bw6};
+          background-color: ${THEME.token?.bw2};
+        }
+      }
+
+      /* .antsomi-btn-default { */
+      /*   &:not(:disabled):hover { */
+      /*     border-color: ${THEME.token?.blue3} !important; */
+      /*     background-color: ${THEME.token?.blue} !important; */
+      /*   } */
+      /*   &:not(:disabled).antsomi-btn-default-active { */
+      /*     border-color: ${THEME.token?.colorPrimary} !important; */
+      /*     background-color: ${THEME.token?.blue1_1} !important; */
+      /*   } */
+      /**/
+      /*   &.antsomi-btn-dangerous { */
+      /*     border-color: ${THEME.token?.red2} !important; */
+      /**/
+      /*     &:not(:disabled):hover { */
+      /*       border-color: ${THEME.token?.red3} !important; */
+      /*       background-color: ${THEME.token?.red} !important; */
+      /*     } */
+      /*   } */
+      /**/
+      /*   &.antsomi-btn-icon-only { */
+      /*     width: 36px !important; */
+      /*     height: 36px !important; */
+      /*   } */
+      /**/
+      /*   &.antsomi-btn-icon-only.antsomi-btn-sm { */
+      /*     /* Important to override the above code before */
+      */
+      /*     width: 24px !important; */
+      /*     height: 24px !important; */
+      /*   } */
+      /* } */
+
+      /* .antsomi-btn-text:disabled, */
+      /* .antsomi-btn-link:disabled { */
+      /*   color: ${THEME.token?.bw6} !important; */
+      /* } */
+      /**/
+      /* /* .antsomi-btn-primary:disabled, */ */
+      /* .antsomi-btn-default:disabled, */
+      /* .antsomi-btn-dashed:disabled, */
+      /* .antsomi-btn-disabled, */
+      /* .antsomi-btn-default.antsomi-btn-dangerous:disabled, */
+      /* .antsomi-btn-primary.antsomi-btn-dangerous:disabled { */
+      /*   border-color: ${THEME.token?.bw4} !important; */
+      /* } */
+      /**/
+      /* .antsomi-btn-default:disabled, */
+      /* .antsomi-btn-dashed:disabled, */
+      /* .antsomi-btn-disabled, */
+      /* .antsomi-btn-default.antsomi-btn-dangerous:disabled { */
+      /*   color: ${THEME.token?.bw6} !important; */
+      /*   background-color: ${THEME.token?.bw2} !important; */
+      /* } */
 
       // NOTE: Just hot fix for easy looking
       .antsomi-btn-primary.antsomi-btn-compact-item.antsomi-btn-compact-first-item {
         padding-right: 6px !important;
       }
+
       .antsomi-btn-compact-item.antsomi-btn-primary.antsomi-btn-compact-last-item {
         width: fit-content;
         //padding: 0px !important;

package/es/queries/AI/index.d.ts

@@ -0,0 +1,23 @@
+export declare const AntsomiAIQueries: {
+    readonly useSqlGeneration: (params: {
+        auth: import("../..").Auth;
+        env: import("@antscorp/antsomi-constants").Env;
+    }) => {
+        generateSQL: import("@tanstack/react-query").UseMutateFunction<{
+            key: string;
+            prompt: string;
+            refine_prompt: string;
+            sql_suggestion: string;
+            summary: string;
+        }, unknown, Record<string, unknown>, unknown>;
+        generateSQLAsync: import("@tanstack/react-query").UseMutateAsyncFunction<{
+            key: string;
+            prompt: string;
+            refine_prompt: string;
+            sql_suggestion: string;
+            summary: string;
+        }, unknown, Record<string, unknown>, unknown>;
+        isLoading: boolean;
+        isError: boolean;
+    };
+};

package/es/queries/AI/index.js

@@ -0,0 +1,4 @@
+import { useSqlGeneration } from './useSqlGeneration';
+export const AntsomiAIQueries = {
+    useSqlGeneration,
+};

package/es/queries/AI/useSqlGeneration.d.ts

@@ -0,0 +1,25 @@
+import { Auth } from '../../types';
+import { Env } from '@antscorp/antsomi-constants';
+type UseSqlGenerationParams = {
+    auth: Auth;
+    env: Env;
+};
+export declare const useSqlGeneration: (params: UseSqlGenerationParams) => {
+    generateSQL: import("@tanstack/react-query").UseMutateFunction<{
+        key: string;
+        prompt: string;
+        refine_prompt: string;
+        sql_suggestion: string;
+        summary: string;
+    }, unknown, Record<string, unknown>, unknown>;
+    generateSQLAsync: import("@tanstack/react-query").UseMutateAsyncFunction<{
+        key: string;
+        prompt: string;
+        refine_prompt: string;
+        sql_suggestion: string;
+        summary: string;
+    }, unknown, Record<string, unknown>, unknown>;
+    isLoading: boolean;
+    isError: boolean;
+};
+export {};

package/es/queries/AI/useSqlGeneration.js

@@ -0,0 +1,13 @@
+import { useMutation } from '@tanstack/react-query';
+import { AIServices } from '../../services/AI';
+export const useSqlGeneration = (params) => {
+    const { auth, env } = params;
+    const { mutate: generateSQL, mutateAsync: generateSQLAsync, isLoading, isError, } = useMutation({
+        mutationFn: async (data) => AIServices.generateSQL({
+            auth,
+            data,
+            env,
+        }),
+    });
+    return { generateSQL, generateSQLAsync, isLoading, isError };
+};

package/es/queries/TemplateListing/index.d.ts

@@ -14,7 +14,7 @@ export type TGetSaveAsGalleryPermissionEmails = {
 };
 export type TGetObjectTEmplateList = {
     args: TGetObjectTemplateListArgs;
-    options?: UseInfiniteQueryOptions<any, any, ResponseListing<ObjectTemplate>, (string | number)[]>;
+    options?: UseInfiniteQueryOptions<any, any, any, ResponseListing<ObjectTemplate>, (string | Record<string, any>)[]>;
 };
 export type TGetObjectTemplateDetail = {
     args: TGetObjectTemplateDetailArgs;
@@ -40,7 +40,7 @@ export type TUsePersistTemplate = {
 };
 export declare const useGetTemplateCategoryList: (params: TGetTemplateCategoryList) => import("@tanstack/react-query").UseQueryResult<TemplateCategory[], any>;
 export declare const useGetSaveAsGalleryPermissionEmails: (params: TGetSaveAsGalleryPermissionEmails) => import("@tanstack/react-query").UseQueryResult<string[], any>;
-export declare const useGetObjectTemplateList: (params: TGetObjectTEmplateList) => import("@tanstack/react-query").UseInfiniteQueryResult<ResponseListing<ObjectTemplate>, any>;
+export declare const useGetObjectTemplateList: (params: TGetObjectTEmplateList) => import("@tanstack/react-query").UseInfiniteQueryResult<any, any>;
 export declare const useGetObjectTemplateDetail: (params: TGetObjectTemplateDetail) => import("@tanstack/react-query").UseQueryResult<ObjectTemplate, any>;
 export declare const useValidateTemplateName: (params: TUseValidateTemplateName) => import("@tanstack/react-query").UseMutationResult<ResponseCheckNameExist, any, TValidateObjectTemplateNameArgs, unknown>;
 export declare const useBulkUpdateTemplate: (params: TBulkUpdateTemplate) => import("@tanstack/react-query").UseMutationResult<any, any, TBulkUpdateObjectTemplateArgs, unknown>;

package/es/queries/index.d.ts

@@ -9,3 +9,4 @@ export * from './TemplateListing';
 export * from './Permission';
 export * from './DataTable';
 export * from './User';
+export * from './AI';

package/es/queries/index.js

@@ -9,3 +9,4 @@ export * from './TemplateListing';
 export * from './Permission';
 export * from './DataTable';
 export * from './User';
+export * from './AI';

package/es/services/AI/index.d.ts

@@ -0,0 +1,15 @@
+import { Env } from '@antscorp/antsomi-constants';
+import { Auth } from '../../types';
+export declare const AIServices: {
+    readonly generateSQL: (params: {
+        env: Env;
+        data: Record<string, unknown>;
+        auth: Auth;
+    }) => Promise<{
+        key: string;
+        prompt: string;
+        refine_prompt: string;
+        sql_suggestion: string;
+        summary: string;
+    }>;
+};

package/es/services/AI/index.js

@@ -0,0 +1,15 @@
+import axios from 'axios';
+import { CDP_AI } from '@antscorp/antsomi-constants';
+export const AIServices = {
+    generateSQL: async (params) => {
+        const { data, auth, env } = params;
+        const response = await axios.post(`${CDP_AI[env]}/api/v1/sql_generation/generate`, data, {
+            params: {
+                _token: auth.token,
+                _user_id: auth.userId,
+                _account_id: auth.accountId,
+            },
+        });
+        return response.data.data;
+    },
+};

package/es/types/auth.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Represents an authentication info with associated user and portal information.
+ */
+export interface Auth {
+    /**
+     * The authentication token.
+     */
+    token: string;
+    /**
+     * The ID of the authenticated user.
+     */
+    userId: number;
+    /**
+     * The ID of the portal associated with the authentication token.
+     */
+    portalId?: number;
+    /**
+     * The ID of the account associated with the authentication token.
+     */
+    accountId?: number;
+    /**
+     * The user's preferred language.
+     */
+    language?: string;
+}

package/es/types/auth.js

@@ -0,0 +1 @@
+export {};

package/es/types/index.d.ts

@@ -25,6 +25,7 @@ export * from './actionsButton';
 export * from './condition';
 export * from './api';
 export * from './date';
+export * from './auth';
 export type PayloadInfo = {
     url?: string;
     userId?: string;

package/es/types/index.js

@@ -9,3 +9,4 @@ export * from './actionsButton';
 export * from './condition';
 export * from './api';
 export * from './date';
+export * from './auth';

package/es/utils/common.d.ts

@@ -165,3 +165,4 @@ export declare const convertNumberByDisplayFormat: (value: number | string, grou
 export declare function numberWithCommas(n: number): string;
 export declare const multiPercentageValue: (value?: string) => string;
 export declare const antsomiClsx: (componentName: string) => (className: string) => string;
+export declare function arrayToMapByProperty<T extends object, K extends keyof T>(array: T[], propertyName: K): Map<T[K], T>;

package/es/utils/common.js

@@ -6,7 +6,7 @@ import uniqid from 'uniqid';
 import { MESSAGES, PORTAL_KEYS } from '@antscorp/antsomi-ui/es/services/constants';
 // Utils
 import { handleError } from './handleError';
-import { sortBy } from 'lodash';
+import { keyBy, sortBy } from 'lodash';
 import clsx from 'clsx';
 import { ANTSOMI_COMPONENT_PREFIX_CLS } from '../constants';
 const PATH = 'src/utils/common.ts';
@@ -742,3 +742,18 @@ export const antsomiClsx = (componentName) => (className) => {
     });
     return clsx(classNames);
 };
+export function arrayToMapByProperty(array, propertyName) {
+    // Đảm bảo đầu vào là một mảng và không rỗng
+    if (!Array.isArray(array) || array.length === 0) {
+        // eslint-disable-next-line no-console
+        console.warn('Đầu vào không phải là một mảng hợp lệ hoặc là mảng rỗng. Trả về Map rỗng.');
+        return new Map();
+    }
+    // Sử dụng _.keyBy để nhóm các đối tượng theo propertyName
+    // Lưu ý: _.keyBy trả về một plain object.
+    const keyedObject = keyBy(array, propertyName);
+    // Chuyển đổi plain object thành một Map
+    // Object.entries() tạo ra một mảng các cặp [khóa, giá trị]
+    // new Map() có thể nhận mảng này để khởi tạo Map
+    return new Map(Object.entries(keyedObject));
+}

package/es/utils/web.d.ts

@@ -1,10 +1,23 @@
+/// <reference types="react" />
 /**
  * Function to parse search params string to object
  * @param {string} searchParams - search params
  * @returns {Record<string, unknown>}
  */
 export declare const searchPramsToObject: (searchParams?: string) => Record<string, unknown>;
-export declare const getPreventKeyboardAction: (actions?: Array<'undo' | 'copy' | 'paste'>) => {
-    onKeyDown: (e: React.KeyboardEvent | KeyboardEvent) => false | undefined;
-    onKeyUp: (e: React.KeyboardEvent | KeyboardEvent) => void;
+export declare const getPreventKeyboardAction: <T extends import("react").KeyboardEvent<Element> | KeyboardEvent>(actions?: Array<'undo' | 'copy' | 'paste' | 'cut'>, options?: {
+    onKeydown?: (e: T) => void;
+    onKeyup?: (e: T) => void;
+}) => {
+    onKeyDown: (e: T) => false | undefined;
+    onKeyUp: (e: T) => void;
 };
+export declare const getPlatform: () => "mac" | "window" | "linux" | "unknown";
+export declare const isMacOS: () => boolean;
+export declare const isWindows: () => boolean;
+export declare const isLinux: () => boolean;
+/**
+ * Gets the modifier key based on the platform
+ * @returns Platform-appropriate modifier key
+ */
+export declare const getModifierKey: () => "⌘" | "Ctrl";

package/es/utils/web.js

@@ -1,4 +1,4 @@
-import { VALUE_C, VALUE_CONTROL, VALUE_LEFT_WINDOW, VALUE_V, VALUE_Z, } from '@antscorp/antsomi-ui/es/constants/keyCode';
+import { VALUE_C, VALUE_CONTROL, VALUE_LEFT_WINDOW, VALUE_V, VALUE_X, VALUE_Z, } from '@antscorp/antsomi-ui/es/constants/keyCode';
 /**
  * Function to parse search params string to object
  * @param {string} searchParams - search params
@@ -6,21 +6,54 @@ import { VALUE_C, VALUE_CONTROL, VALUE_LEFT_WINDOW, VALUE_V, VALUE_Z, } from '@a
  */
 export const searchPramsToObject = (searchParams = '') => Object.fromEntries(new URLSearchParams(searchParams));
 let ctrlDown = false;
-export const getPreventKeyboardAction = (actions = []) => ({
+export const getPreventKeyboardAction = (actions = [], options) => ({
     onKeyDown: (e) => {
         if (e.key === VALUE_CONTROL || e.key === VALUE_LEFT_WINDOW) {
             ctrlDown = true;
         }
         if ((actions.includes('undo') && ctrlDown && e.key === VALUE_Z) ||
             (actions.includes('copy') && ctrlDown && e.key === VALUE_V) ||
-            (actions.includes('paste') && ctrlDown && e.key === VALUE_C)) {
+            (actions.includes('paste') && ctrlDown && e.key === VALUE_C) ||
+            (actions.includes('cut') && ctrlDown && e.key === VALUE_X)) {
             e.preventDefault();
             return false;
         }
+        options?.onKeydown?.(e);
     },
     onKeyUp: (e) => {
         if (e.key === VALUE_CONTROL || e.key === VALUE_LEFT_WINDOW) {
             ctrlDown = false;
         }
+        options?.onKeyup?.(e);
     },
 });
+export const getPlatform = () => {
+    // Modern API (userAgentData)
+    const navAny = navigator;
+    if (navAny.userAgentData && typeof navAny.userAgentData.platform === 'string') {
+        const platform = navAny.userAgentData.platform.toLowerCase();
+        if (platform.includes('mac'))
+            return 'mac';
+        if (platform.includes('win'))
+            return 'window';
+        if (platform.includes('linux') || platform.includes('x11'))
+            return 'linux';
+    }
+    // Fallback for older browsers
+    const ua = navigator.userAgent.toLowerCase();
+    if (ua.includes('mac'))
+        return 'mac';
+    if (ua.includes('win'))
+        return 'window';
+    if (ua.includes('linux') || ua.includes('x11'))
+        return 'linux';
+    return 'unknown';
+};
+export const isMacOS = () => getPlatform() === 'mac';
+export const isWindows = () => getPlatform() === 'window';
+export const isLinux = () => getPlatform() === 'linux';
+/**
+ * Gets the modifier key based on the platform
+ * @returns Platform-appropriate modifier key
+ */
+export const getModifierKey = () => (isMacOS() ? '⌘' : 'Ctrl');

package/es/utils/zustand.d.ts

@@ -0,0 +1,10 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+type WithSelectors<S> = S extends {
+    getState: () => infer T;
+} ? S & {
+    use: {
+        [K in keyof T]: () => T[K];
+    };
+} : never;
+export declare const createSelectors: <S extends UseBoundStore<StoreApi<object>>>(_store: S) => WithSelectors<S>;
+export {};

package/es/utils/zustand.js

@@ -0,0 +1,8 @@
+export const createSelectors = (_store) => {
+    const store = _store;
+    store.use = {};
+    for (const k of Object.keys(store.getState())) {
+        store.use[k] = () => store(s => s[k]);
+    }
+    return store;
+};