@razorpay/blade
Version:
The Design System that powers Razorpay
53 lines (50 loc) • 1.87 kB
JavaScript
import 'react';
import styled from 'styled-components';
import { chatMessageToken } from './token.js';
import { getMessageBubbleBoxShadow } from './utils.js';
import '../Box/BaseBox/index.js';
import { FormHint } from '../Form/FormHint.js';
import '../../utils/index.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import useTheme from '../BladeProvider/useTheme.js';
var StyledSelfMessageBubble = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "SelfMessageBubbleweb__StyledSelfMessageBubble",
componentId: "sc-1twwjir-0"
})(function () {
var _useTheme = useTheme(),
colorScheme = _useTheme.colorScheme;
return getMessageBubbleBoxShadow(colorScheme);
});
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,
isChildText = _ref.isChildText;
var isError = validationState === 'error';
return /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "column",
children: [/*#__PURE__*/jsx(StyledSelfMessageBubble, {
backgroundColor: chatMessageToken.self.backgroundColor["default"],
padding: isChildText ? 'spacing.4' : 'spacing.0',
borderRadius: "large",
width: "fit-content",
height: "auto",
alignSelf: "flex-end",
border: "thin",
borderColor: "surface.border.gray.muted",
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