@botonic/react/lib/cjs/components/message/styles.js

Build Chatbots using React

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FeedbackButton = exports.FeedbackMessageContainer = exports.MessageFooterContainer = exports.TimestampText = exports.TimestampContainer = exports.BlobTick = exports.BlobTickContainer = exports.BlobText = exports.BlobContainer = exports.BotMessageImageContainer = exports.MessageContainer = void 0;
const tslib_1 = require("tslib");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../../constants");
exports.MessageContainer = styled_components_1.default.div `
  display: flex;
  justify-content: ${props => (props.isSentByUser ? 'flex-end' : 'flex-start')};
  position: relative;
  padding: 0px 6px;
`;
exports.BotMessageImageContainer = styled_components_1.default.div `
  width: 28px;
  padding: 12px 4px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
`;
exports.BlobContainer = styled_components_1.default.div `
  position: relative;
  margin: 8px;
  border-radius: 8px;
  background-color: ${props => props.bgcolor};
  color: ${props => props.color};
  max-width: ${props => props.blob
    ? props.blobwidth
        ? props.blobwidth
        : '60%'
    : 'calc(100% - 16px)'};
`;
exports.BlobText = styled_components_1.default.div `
  padding: ${props => (props.blob ? '8px 12px' : '0px')};
  display: flex;
  flex-direction: column;
  white-space: pre-line;
  ${props => props.markdownstyle}
`;
exports.BlobTickContainer = styled_components_1.default.div `
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  padding: 18px 0px 18px 0px;
  display: flex;
  top: 0;
  align-items: center;
`;
exports.BlobTick = styled_components_1.default.div `
  position: relative;
  margin: -${props => props.pointerSize}px 0px;
  border: ${props => props.pointerSize}px solid ${constants_1.COLORS.TRANSPARENT};
`;
exports.TimestampContainer = styled_components_1.default.div `
  display: flex;
  position: relative;
  justify-content: ${props => (props.isSentByUser ? 'flex-end' : 'flex-start')};
  align-items: center;
  gap: 10px;

  box-sizing: border-box;
  width: 100%;

  img {
    max-width: 20px;
  }
`;
exports.TimestampText = styled_components_1.default.div `
  @import url('https://fonts.googleapis.com/css?family=Lato');
  font-family: Lato;
  font-size: 10px;
  color: ${constants_1.COLORS.SOLID_BLACK};
  text-align: ${props => (props.isSentByUser ? 'right' : 'left')};
`;
exports.MessageFooterContainer = styled_components_1.default.div `
  display: flex;
  justify-content: space-between;
  align-items: center;

  box-sizing: border-box;
  padding: 0px 15px 4px 15px;
  padding-top: ${props => (props.isSentByUser ? '0px' : '4px')};
  width: 100%;
`;
exports.FeedbackMessageContainer = styled_components_1.default.div `
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;

  box-sizing: border-box;
`;
exports.FeedbackButton = styled_components_1.default.button `
  display: flex;
  justify-content: center;
  align-items: center;

  background: none;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
  padding: 8px 8px;
  height: 24px;
  width: 24px;

  &:hover {
    cursor: pointer;
    background-color: #f4f3f4;
  }

  &:disabled {
    cursor: default;
    background: none;
    opacity: 0.3;
  }

  &.clicked {
    opacity: 0;
    transition: 1s 1s;
  }
`;
//# sourceMappingURL=styles.js.map