@spaced-out/ui-design-system/lib/components/ChatBubble/ChatBubble.module.css

Sense UI components library

@value (
  spaceNone,
  spaceXXSmall,
  spaceXSmall,
  spaceSmall
) from '../../styles/variables/_space.css';
@value (
  colorBorderPrimary,
  colorBackgroundTertiary,
  colorNeutralLightest,
  colorFillPrimary,
  colorInformation
) from '../../styles/variables/_color.css';
@value (
  borderWidthPrimary,
  borderRadiusSmall,
  borderRadiusCircle
) from '../../styles/variables/_border.css';
@value (
  size2,
  size12,
  size24,
  size42,
  size580
) from '../../styles/variables/_size.css';
@value (
  opacity100, 
  opacity60,
  opacity80
) from '../../styles/variables/_opacity.css';

.chatBubbleWrapper {
  display: flex;
  gap: spaceSmall;
  flex-direction: row;
}

.chatBubbleWrapperRight {
  flex-direction: row-reverse;
}

.chatAnchorWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: size42;
  width: size42;
}

.chatContentWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: spaceXSmall;
  border: borderWidthPrimary solid colorBorderPrimary;
  border-radius: borderRadiusSmall;
  background-color: colorBackgroundTertiary;
  padding: spaceXSmall spaceSmall;
  max-width: size580;
  min-height: size42;
}

.chatBodyWrapper {
  padding: spaceSmall;
  border-radius: borderRadiusSmall;
}

.chatBodyWrapperBgColor {
  background-color: colorNeutralLightest;
  margin-top: spaceXXSmall;
  word-wrap: break-word;
}

.chatBodyWrapperLoading {
  padding: spaceNone;
  background-color: colorBackgroundTertiary;
}

.chatFooterWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: spaceXSmall;
}

.loadingContainer {
  display: flex;
  align-items: flex-start;
}

.loadingText {
  composes: buttonTextMedium from '../../styles/typography.module.css';
  display: inline-flex;
  background: linear-gradient(90deg, colorFillPrimary, colorInformation);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.loader {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: size2; /* Small gap between dots */
  width: size24;
}

.dot {
  width: calc(size12/4);
  height: calc(size12/4);
  background: linear-gradient(90deg, colorFillPrimary, colorInformation);
  border-radius: borderRadiusCircle;
  opacity: opacity80;

  /* Bounce Animation */
  animation: bounce 0.5s infinite ease-in-out alternate;
}

.dot:nth-child(1) {
  animation-delay: 0s;
}

.dot:nth-child(2) {
  animation-delay: 0.1s; /* Slight delay for second dot */
}

.dot:nth-child(3) {
  animation-delay: 0.2s; /* Slight delay for third dot */
}

@keyframes bounce {
  0% {
    transform: translateY(0);
    opacity: opacity60;
  }
  100% {
    transform: translateY(size12); /* Higher bounce */
    opacity: opacity100;
  }
}