@antscorp/antsomi-ui 1.3.4 → 1.3.5-alpha.10

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

@@ -1,11 +1,12 @@
-var _a;
+var _a, _b, _c;
 // Libraries
 import styled from 'styled-components';
 // Constantsim
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const ChatBoxWrapper = styled.div `
   box-sizing: border-box;
-  width: ${props => (props.withoutBox ? '100%' : '450px')};
+  min-width: 300px;
+  width: ${props => (props.withoutBox ? '100%' : '300px')};
   min-height: ${props => (props.withoutBox ? '100%' : '300px')};
   max-height: ${props => (props.withoutBox ? 'unset' : 'calc(100vh - 57px)')};
   position: ${props => (props.withoutBox ? 'static' : 'fixed')};
@@ -17,7 +18,7 @@ export const ChatBoxWrapper = styled.div `
   flex-direction: column;
 
   font-family: Roboto, san-serif;
-  border: 1px solid #e5e5e5;
+  /* border: 1px solid #e5e5e5; */
 `;
 export const ChatBoxHeader = styled.div `
   flex: 0 0 50px;
@@ -47,7 +48,7 @@ export const ChatBoxBody = styled.div `
   flex-direction: column;
   gap: 5px;
 
-  padding: 11px 0;
+  padding: 10px;
 
   ::-webkit-scrollbar {
     height: 1rem;
@@ -87,9 +88,9 @@ export const ChatBoxFooter = styled.div `
   background: #fff;
 `;
 export const MessageItemWrapper = styled.div `
-  margin: 0 11px;
-  padding: 10px;
-  border-radius: 3px;
+  /* margin: 0 11px; */
+  /* padding: 10px; */
+  border-radius: 10px;
   background: transparent;
 
   display: flex;
@@ -101,6 +102,25 @@ export const MessageItemWrapper = styled.div `
     background: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw2};
   }
 
+  &.bot {
+    padding: 10px;
+    .answer {
+      background: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent};
+    }
+  }
+  &.sender {
+    padding: 0 10px;
+    justify-content: flex-end;
+    .answer {
+      background: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue};
+    }
+  }
+
+  .answer {
+    padding: 10px;
+    border-radius: 10px;
+  }
+
   .icon {
     min-width: 30px;
     min-height: 30px;
@@ -122,7 +142,7 @@ export const MessageItemWrapper = styled.div `
   }
   .reactMarkDown * {
     font-size: 12px;
-    line-height: 1.5;
+    line-height: 14px;
   }
   .reactMarkDown > *:first-child {
     margin-top: 0 !important;
@@ -151,7 +171,9 @@ export const MessageItemWrapper = styled.div `
     white-space: nowrap; /* Keeps the content on a single line */
     margin: 0 auto; /* Gives that scrolling effect as the typing happens */
     letter-spacing: 0.15em; /* Adjust as needed */
-    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+    animation:
+      typing 3.5s steps(40, end),
+      blink-caret 0.75s step-end infinite;
   }
 
   @keyframes cursor-blink {
@@ -215,36 +237,49 @@ export const MessageItemWrapper = styled.div `
   }
 `;
 export const WarningWrapper = styled.div `
-  padding: 10px;
   display: flex;
-  align-item: flex-start;
+  align-items: center;
   gap: 10px;
-  border: 1px solid #fec9c9;
-  background: #fec9c9;
-  margin: 0 10px;
+
+  padding: 10px;
+  margin: 10px 20px;
+
+  border-radius: 10px;
+  background: #ffd8db;
 
   .icon {
     min-width: 18px;
   }
 `;
 export const InputWrapper = styled.div `
-  min-height: 44px;
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 0 15px 0 10px;
-  margin: 10px;
 
-  border: 1px solid #e5e5e5;
-  background: #fff;
+  min-height: 50px;
+  max-height: 250px;
+  padding: 0px 15px;
+  margin: 10px 20px;
+
+  /* border: 1px solid #e5e5e5; */
+  background: #eef5fc;
+  border-radius: 25px;
 
   .input {
     border: none;
     font-size: 12px;
+    line-height: 14px;
+
+    /* padding: 10px 0px; */
+    min-height: 30px !important;
+    max-height: 230px !important;
+    background: #eef5fc;
+    margin: 10px 0;
 
     &:focus {
       outline: none !important;
       box-shadow: none !important;
+      background: #eef5fc;
     }
   }
   .submit-btn {
@@ -255,12 +290,16 @@ export const InputWrapper = styled.div `
     // border: 1px solid;
     position: relative;
     left: -3px;
+    background: #eef5fc;
+    color: #666666;
 
     &:focus {
       outline: none !important;
     }
     &.disabled {
       opacity: 0.65;
+      background-color: #f0f0f0;
+      color: #bebebe;
     }
   }
   .icon {
@@ -268,6 +307,14 @@ export const InputWrapper = styled.div `
     position: relative;
     left: 3px;
   }
+
+  .textarea {
+    &::placeholder {
+      color: #a2a2a2;
+      font-size: 12px;
+      font-weight: 400;
+    }
+  }
 `;
 export const TypingCursor = styled.div `
   width: 3px;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const Collapse: import("react").ForwardRefExoticComponent<import("antd").CollapseProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Panel: import("react").ForwardRefExoticComponent<import("antd").CollapsePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+import React from 'react';
+export declare const Collapse: React.ForwardRefExoticComponent<import("antd").CollapseProps & React.RefAttributes<HTMLDivElement>> & {
+    Panel: React.ForwardRefExoticComponent<import("antd").CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
 };

package/es/components/molecules/Collapse/Collapse.js

@@ -1,2 +1,11 @@
+// Libraries
+import React from 'react';
 import { Collapse as AntdCollapse } from 'antd';
+// Icons
+import { Icon } from '../../atoms';
 export const Collapse = AntdCollapse;
+Collapse.defaultProps = {
+    expandIcon({ isActive }) {
+        return (React.createElement(Icon, { type: "icon-ants-expand-more", size: 24, style: { transform: `rotate(${isActive ? -180 : 0}deg)`, color: '#666' } }));
+    },
+};

package/es/components/molecules/ColorPicker/ChromePicker/index.d.ts

@@ -1 +1 @@
-export declare const ChromePicker: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const ChromePicker: import("styled-components").StyledComponent<any, any, any, any>;

package/es/components/molecules/ColorPicker/ChromePicker/styled.d.ts

@@ -1 +1 @@
-export declare const StyledChromePicker: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const StyledChromePicker: import("styled-components").StyledComponent<any, any, any, any>;

package/es/components/molecules/ColorPicker/CustomPicker/index.js

@@ -16,10 +16,8 @@ import { CustomPicker as CustomPickerHOC } from 'react-color';
 import { Saturation, Hue, Alpha, EditableInput } from 'react-color/lib/components/common';
 // Atoms
 import { Button, Divider, Icon, Text } from '@antscorp/antsomi-ui/es/components/atoms';
-// Molecules
-import { InputNumber } from '../../InputNumber';
 // Styled
-import { CustomPickerWrapper, HuePointer, PreviewColorPoint, SaturationPointer, EditableInputWrapper, } from './styled';
+import { CustomPickerWrapper, HuePointer, PreviewColorPoint, SaturationPointer, EditableInputWrapper, InputNumberWrapper, } from './styled';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/ColorPicker/CustomPicker/index.tsx';
@@ -41,20 +39,21 @@ const rgbaInputStyling = {
 const wrapperStyling = {
     display: 'flex',
     alignItems: 'center',
-    margin: '15px 8px 0',
+    // margin: '15px 8px 0',
+    marginTop: '15px',
     width: '100%',
 };
 const styleContainAlpha = {
     display: 'flex',
     flexDirection: 'column',
     marginLeft: 10,
-    marginRight: 10,
+    // marginRight: 10,
     width: '100%',
 };
 const CustomPicker = props => {
     var _a, _b, _c, _d;
     // Props
-    const { className, style, children, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "onChange", "onChangeComplete", "presetColors"]);
+    const { className, style, children, isHideAlpha, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "isHideAlpha", "onChange", "onChangeComplete", "presetColors"]);
     // State
     const [isShowRgbaInput, setShowRgbaInput] = useState(true);
     const onChangeRgbaColor = (key, value) => {
@@ -79,15 +78,7 @@ const CustomPicker = props => {
             } },
             React.createElement(Saturation, Object.assign({}, restOf, { pointer: SaturationPointer, onChange: onChange }))),
         React.createElement("div", { style: wrapperStyling },
-            React.createElement(PreviewColorPoint, null,
-                React.createElement("div", { style: {
-                        backgroundColor: props.color,
-                        position: 'absolute',
-                        top: '0px',
-                        right: '0px',
-                        bottom: '0px',
-                        left: '0px',
-                    } })),
+            React.createElement(PreviewColorPoint, { "$color": props.color }),
             React.createElement("div", { style: styleContainAlpha },
                 React.createElement("div", { style: { position: 'relative', width: '100%', height: 12 } },
                     React.createElement(Hue, Object.assign({}, restOf, { pointer: HuePointer, onChange: onChange }))),
@@ -102,17 +93,17 @@ const CustomPicker = props => {
             React.createElement(Icon, { type: "icon-ants-unfold-more", style: { cursor: 'pointer', fontSize: '20px' }, onClick: () => setShowRgbaInput(!isShowRgbaInput) }),
             isShowRgbaInput ? (React.createElement("div", { style: rgbaInputStyling },
                 React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumber, { value: (_a = props.rgb) === null || _a === void 0 ? void 0 : _a.r, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('r', value) }),
+                    React.createElement(InputNumberWrapper, { value: (_a = props.rgb) === null || _a === void 0 ? void 0 : _a.r, controls: false, onChange: value => onChangeRgbaColor('r', value) }),
                     React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "R")),
                 React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumber, { value: (_b = props.rgb) === null || _b === void 0 ? void 0 : _b.g, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('g', value) }),
+                    React.createElement(InputNumberWrapper, { value: (_b = props.rgb) === null || _b === void 0 ? void 0 : _b.g, controls: false, onChange: value => onChangeRgbaColor('g', value) }),
                     React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "G")),
                 React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumber, { value: (_c = props.rgb) === null || _c === void 0 ? void 0 : _c.b, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('b', value) }),
+                    React.createElement(InputNumberWrapper, { value: (_c = props.rgb) === null || _c === void 0 ? void 0 : _c.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }),
                     React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "B")),
-                React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumber, { value: (_d = props.rgb) === null || _d === void 0 ? void 0 : _d.a, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('a', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A")))) : (React.createElement(EditableInputWrapper, null,
+                !isHideAlpha && (React.createElement("div", { style: rgbaStyling },
+                    React.createElement(InputNumberWrapper, { value: (_d = props.rgb) === null || _d === void 0 ? void 0 : _d.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }),
+                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A"))))) : (React.createElement(EditableInputWrapper, null,
                 React.createElement(EditableInput, { value: props.color, onChange: onChange }),
                 React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "HEX"))),
             React.createElement(Button, { onClick: () => {

package/es/components/molecules/ColorPicker/CustomPicker/styled.d.ts

@@ -1,5 +1,9 @@
+/// <reference types="react" />
 export declare const CustomPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SaturationPointer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HuePointer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PreviewColorPoint: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PreviewColorPoint: import("styled-components").StyledComponent<"div", any, {
+    $color?: string | undefined;
+}, never>;
 export declare const EditableInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputNumberWrapper: import("styled-components").StyledComponent<import("react").FC<import("../../InputNumber").InputNumberProps>, any, {}, never>;

package/es/components/molecules/ColorPicker/CustomPicker/styled.js

@@ -1,6 +1,8 @@
 var _a, _b, _c, _d, _e, _f;
 // Libraries
 import styled from 'styled-components';
+// Components
+import { InputNumber } from '../../InputNumber';
 // Svg
 import TransparentSvg from '@antscorp/antsomi-ui/es/assets/svg/transparent.svg';
 // Constants
@@ -30,12 +32,10 @@ export const HuePointer = styled.div `
   box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px;
 `;
 export const PreviewColorPoint = styled.div `
-  position: relative;
   width: 36px;
   height: 36px;
-  background: url(${TransparentSvg}) repeat;
+  background: ${({ $color }) => `linear-gradient(${$color ? `${$color}, ${$color}` : '#fff, #fff'}), url(${TransparentSvg}) repeat`};
   border-radius: 9999px;
-  overflow: hidden;
   flex-shrink: 0;
 `;
 export const EditableInputWrapper = styled.div `
@@ -91,3 +91,14 @@ export const EditableInputWrapper = styled.div `
     }
   }
 `;
+export const InputNumberWrapper = styled(InputNumber) `
+  & > div {
+    width: unset !important;
+    padding: 0;
+  }
+
+  input {
+    padding: 0 6px !important;
+    text-align: center !important;
+  }
+`;

package/es/components/molecules/ColorPicker/SketchPicker/styled.d.ts

@@ -1 +1 @@
-export declare const SketchPickerWrapper: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const SketchPickerWrapper: import("styled-components").StyledComponent<any, any, any, any>;

package/es/components/molecules/ColorPicker/index.d.ts

@@ -3,6 +3,7 @@ export interface ColorPickerProps {
     className?: string;
     color?: string;
     presetColors?: any[] | ReactNode;
+    isHideAlpha?: boolean;
     defaultColor?: string;
     icon?: React.ReactNode | string;
     onChange?: (color: string) => void;

package/es/components/molecules/ColorPicker/index.js

@@ -21,7 +21,7 @@ const styleBtnColor = {
 };
 export const ColorPicker = props => {
     // Props
-    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, } = props;
+    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, isHideAlpha, } = props;
     const { onChange = () => { } } = props;
     // States
     const [color, setColor] = useState(defaultColor);
@@ -72,10 +72,10 @@ export const ColorPicker = props => {
     const onPopoverVisibleChange = visible => {
         setPopoverVisible(visible);
     };
-    return (React.createElement(ColorPickerWrapper, { className: className, style: style },
+    return (React.createElement(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style },
         showInput && positionInput === 'left' && (React.createElement(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput })),
-        React.createElement(Popover, { arrowPointAtCenter: true, content: React.createElement(CustomPicker, { color: color, presetColors: presetColors, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", visible: popoverVisible, getPopupContainer: triggerNode => triggerNode, onVisibleChange: onPopoverVisibleChange },
-            React.createElement("button", { style: styleBtnColor }, iconNode || (React.createElement("span", { style: {
+        React.createElement(Popover, { arrow: true, content: React.createElement(CustomPicker, { color: color, presetColors: presetColors, isHideAlpha: isHideAlpha, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange },
+            React.createElement("div", { className: "antsomi-popover-button", style: styleBtnColor }, iconNode || (React.createElement("span", { style: {
                     backgroundColor: color,
                     display: 'block',
                     width: 20,
@@ -88,6 +88,7 @@ ColorPicker.defaultProps = {
     className: '',
     color: '#000000',
     defaultColor: '#000000',
+    isHideAlpha: false,
     onChange: () => { },
     showInput: true,
     positionInput: 'left',

package/es/components/molecules/ColorSetting/index.js

@@ -73,7 +73,7 @@ export const ColorSetting = props => {
             });
         }
     };
-    const presetColors = (React.createElement("div", null,
+    const presetColors = customColors ? (React.createElement("div", null,
         React.createElement("div", { style: stylingCenter },
             React.createElement(Text, null, "Color Profile"),
             !isHideBtnEdit && (React.createElement(Button, { type: "primary", onClick: onClickEdit }, "Edit"))),
@@ -83,14 +83,14 @@ export const ColorSetting = props => {
             customColors && customColors.length
                 ? customColors.map((customColor, idx) => (React.createElement(PresetColor, { key: idx, color: customColor, onClick: () => onClickPresetColor(customColor) },
                     React.createElement("div", { className: "__color", style: { backgroundColor: customColor } }))))
-                : null)));
+                : null))) : null;
     return (React.createElement(SettingWrapper, { label: label, className: className, labelClassName: labelClassName, labelStyle: labelStyling, vertical: vertical },
         React.createElement(ColorPicker, Object.assign({}, restOf, { color: color, presetColors: presetColors, onChange: onChange }))));
 };
 ColorSetting.defaultProps = {
     label: '',
     labelClassName: '',
-    customColors: [],
+    // customColors: [],
     isHideBtnEdit: true,
     callback: () => { },
     onChange: () => { },

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const ColorSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PresetColor: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonPreset: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+export declare const ButtonPreset: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;
 export declare const PresetWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/DatePicker/DatePicker.js

@@ -1,8 +1,14 @@
 // Libraries
+import React from 'react';
 import { DatePicker as AntdDatePicker } from 'antd';
 // Components
 import { AdvancedPicker } from './components/AdvancedPicker';
 import { AdvancedRangePicker } from './components/AdvancedRangePicker';
+import { EventIcon } from '../../icons';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const DatePicker = AntdDatePicker;
+DatePicker.defaultProps = {
+    suffixIcon: React.createElement(EventIcon, { width: 20, height: 20, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }),
+};
 DatePicker.AdvancedPicker = AdvancedPicker;
 DatePicker.AdvancedRangePicker = AdvancedRangePicker;

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.d.ts

@@ -1,28 +1,69 @@
 import React from 'react';
-import { TAdvancedType, TCalculationType, TOperatorKey, TOption, TShowCalculationTypeCondition } from './types';
+import type { Dayjs } from 'dayjs';
+import { TAdvancedType, TCalculationType, TOperatorKey, TOption, TShowCalculationTypeCondition, ValueTypes } from './types';
 export interface AdvancedPickerProps {
     label?: string;
+    valueType?: ValueTypes;
     disabled?: boolean;
     dateTypeKeysShow?: string[];
     showCalculationTypeCondition?: TShowCalculationTypeCondition;
     calculationTypeKeysShow?: TCalculationType[];
     defaultDateTypeKey?: string;
-    valueType?: string;
     option?: TOption;
     operatorKey?: TOperatorKey;
     type?: TAdvancedType;
+    /**
+     * This is uncontrolled value (default value) and will not update if change outside
+     * only update when re-render component
+     * use ref.forceUpdate() to control value inside
+     */
     date?: string;
     format?: string;
     formatInputDisplay?: string;
     inputStyle?: React.CSSProperties;
+    popupStyle?: React.CSSProperties;
     disableAfterDate?: string;
     disableBeforeDate?: string;
     errorMessage?: string;
     showTime?: boolean;
-    onUpdatedNewDate?: (newDate: any) => void;
+    timezone?: string;
+    isViewMode?: boolean;
+    /**
+     *
+     * @example const disabledTime = (date?: Dayjs) => {
+        if (date?.get('date') !== 31)
+          return {
+            disabledHours: () => [],
+            disabledMinutes: () => [],
+            disabledSeconds: () => [],
+          };
+  
+        return {
+          disabledHours: () => range(0, 24).splice(4, 20),
+          disabledMinutes: () => range(30, 60),
+          disabledSeconds: () => [55, 56],
+        };
+      };
+     */
+    disabledTime?: (date?: Dayjs) => {
+        disabledHours: () => number[];
+        disabledMinutes: () => number[];
+        disabledSeconds: () => number[];
+    };
+    /**
+     * Only show fixed calendar (hide dynamic and )
+     */
+    onlyShowFixed?: boolean;
+    onUpdatedNewDate?: ({ date, option }: {
+        date: string;
+        option: TOption;
+    }) => void;
     onApply?: ({ date, option }: {
         date: string;
         option: TOption;
     }) => void;
 }
-export declare const AdvancedPicker: React.FC<AdvancedPickerProps>;
+export interface AdvancedPickerHandle {
+    forceUpdate: (date: string) => void;
+}
+export declare const AdvancedPicker: React.ForwardRefExoticComponent<AdvancedPickerProps & React.RefAttributes<AdvancedPickerHandle>>;