@razorpay/blade
Version:
The Design System that powers Razorpay
43 lines (40 loc) • 1.74 kB
JavaScript
import 'react';
import { chatMessageToken } from './token.js';
import '../Box/BaseBox/index.js';
import { FormHint } from '../Form/FormHint.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
var SelfMessageBubble = function SelfMessageBubble(_ref) {
var children = _ref.children,
validationState = _ref.validationState,
_ref$errorText = _ref.errorText,
errorText = _ref$errorText === void 0 ? 'Message not sent. Tap to retry.' : _ref$errorText,
messageType = _ref.messageType,
isChildText = _ref.isChildText;
var isError = validationState === 'error';
return /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "column",
children: [/*#__PURE__*/jsx(BaseBox, {
backgroundColor: isError ? chatMessageToken.self.backgroundColor.error : chatMessageToken.self.backgroundColor["default"],
padding: isChildText ? 'spacing.4' : 'spacing.0',
borderTopLeftRadius: chatMessageToken.self.borderTopLeftRadius,
borderTopRightRadius: chatMessageToken.self.borderTopRightRadius,
borderBottomLeftRadius: chatMessageToken.self.borderBottomLeftRadius,
borderBottomRightRadius: messageType === 'last' ? chatMessageToken.self.borderBottomRightRadiusForLastMessage : chatMessageToken.self.borderBottomRightRadius,
width: "fit-content",
height: "auto",
alignSelf: "flex-end",
children: children
}), /*#__PURE__*/jsx(BaseBox, {
alignSelf: "flex-end",
children: isError && /*#__PURE__*/jsx(FormHint, {
type: "error",
errorText: errorText,
size: "small"
})
})]
});
};
export { SelfMessageBubble };
//# sourceMappingURL=SelfMessageBubble.web.js.map