@antscorp/antsomi-ui 1.3.5-beta.29 → 1.3.5-beta.30

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.d.ts

@@ -3,6 +3,10 @@ import { RichMenu } from '@antscorp/antsomi-ui/es/types';
 interface RichMenuMobileViewProps extends React.HTMLAttributes<HTMLDivElement> {
     richMenu: RichMenu;
     isPreview?: boolean;
+    messagePreview?: {
+        show?: boolean;
+        text?: string;
+    };
     onChangeRichMenu?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
     onClickCell?: (cellIndex: number) => void;
     size?: 'large' | 'medium';

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.js

@@ -13,14 +13,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useState } from 'react';
 // Assets
 import IphoneTopBar from '@antscorp/antsomi-ui/es/assets/images/iphone-top-bar.png';
+import TailMessage from '@antscorp/antsomi-ui/es/assets/images/tail.png';
+import ProfileMessage from '@antscorp/antsomi-ui/es/assets/images/profile.png';
 // Components
 import { MobileFrame } from '@antscorp/antsomi-ui/es/components/atoms';
 import { RichMenuChatBar } from '../RichMenuChatBar';
 import { RichMenuBlock } from '../RichMenuBlock';
 // Styles
-import { MobileContent, RichMenuWrapper, TopBar } from './styled';
+import { Image, Message, MessageBox, MessageWrapper, Profile, MobileContent, RichMenuWrapper, TopBar, } from './styled';
 export const RichMenuMobileView = props => {
-    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag, size } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell", "reCalculateFlag", "size"]);
+    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag, messagePreview, size } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell", "reCalculateFlag", "messagePreview", "size"]);
     // State
     const [state, setState] = useState({
         showRichMenu: true,
@@ -30,7 +32,24 @@ export const RichMenuMobileView = props => {
     // Variables
     const { showRichMenu, showTypingChat } = state;
     return (React.createElement(MobileFrame, Object.assign({ size: size, className: `ants-mx-auto ${className}` }, restOfProps),
-        isPreview && React.createElement(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }),
+        isPreview && (React.createElement(React.Fragment, null,
+            React.createElement(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }),
+            (messagePreview === null || messagePreview === void 0 ? void 0 : messagePreview.show) && (React.createElement(MessageBox, null,
+                React.createElement(Profile, null,
+                    React.createElement(Image, { src: ProfileMessage, alt: "profile user" })),
+                React.createElement(MessageWrapper, null,
+                    React.createElement("div", { style: {
+                            position: 'absolute',
+                            top: '-5px',
+                            left: '-10px',
+                            width: 20,
+                            height: 20,
+                        } },
+                        React.createElement(Image, { src: TailMessage, alt: "tail decorator", style: { objectFit: 'contain' } })),
+                    React.createElement(Message, null, (messagePreview === null || messagePreview === void 0 ? void 0 : messagePreview.text) ||
+                        `Antsomi CDP 365 helps businesses decode their customer data, understand the
+nuances of their customer lifecycles, and act on them – 24 hours a day, 365 days a
+year.`)))))),
         React.createElement(MobileContent, null,
             React.createElement(RichMenuWrapper, { "$showRichMenu": showRichMenu && !showTypingChat, "$isPreview": !!isPreview }, richMenu && (React.createElement(RichMenuBlock, { richMenu: richMenu, isPreview: isPreview, onChange: onChangeRichMenu, onClickCell: onClickCell, reCalculateFlag: reCalculateFlag }))),
             React.createElement(RichMenuChatBar, { disabled: !isPreview, label: richMenu === null || richMenu === void 0 ? void 0 : richMenu.chatBar.label, size: size, showRichMenu: showRichMenu, showTypingChat: showTypingChat, onToggleRichMenu: showRichMenu => setState(prevState => (Object.assign(Object.assign({}, prevState), { showRichMenu: !!showRichMenu }))), onToggleTypingChat: showTypingChat => setState(prevState => (Object.assign(Object.assign({}, prevState), { showTypingChat: !!showTypingChat }))) }))));

package/es/components/molecules/RichMenu/RichMenuMobileView/styled.d.ts

@@ -4,3 +4,8 @@ export declare const RichMenuWrapper: import("styled-components").StyledComponen
     $isPreview: boolean;
 }, never>;
 export declare const TopBar: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const MessageBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Profile: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const Message: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MessageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/RichMenu/RichMenuMobileView/styled.js

@@ -1,5 +1,8 @@
+var _a;
 // Libraries
 import styled, { css } from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const MobileContent = styled.div `
   position: absolute;
   bottom: 0;
@@ -18,3 +21,31 @@ export const RichMenuWrapper = styled.div `
   `}
 `;
 export const TopBar = styled.img ``;
+export const MessageBox = styled.div `
+  display: flex;
+  gap: 10px;
+  margin: 15px 9px 0px 8px;
+`;
+export const Profile = styled.div `
+  width: 24px;
+  height: 24px;
+`;
+export const Image = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+export const Message = styled.div `
+  color: rgba(37, 37, 37, 1);
+  font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+  line-height: 16px;
+`;
+export const MessageWrapper = styled.div `
+  position: relative;
+  flex: 1;
+  padding: 10px;
+  background-color: rgba(229, 229, 234, 1);
+  border-radius: 15px;
+  color: rgba(229, 229, 234, 1);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.29",
+  "version": "1.3.5-beta.30",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",