@airsurfer09/web-handsfree/dist/components/rtc-widget/styles/styledComponents.js

A React package for integrating Convai's AI-powered voice assistants with LiveKit for real-time audio/video conversations

import styled from "styled-components";
import { motion } from "framer-motion";
import { aeroTheme } from "./theme";
// Styled Components matching the original webChat exactly
export const ConvaiContainer = styled(motion.div) `
  position: fixed !important;
  bottom: 2rem !important;
  right: 2rem !important;
  z-index: 1000 !important;
  isolation: isolate;
  contain: layout style paint;

  /* Override any inherited text styles */
  * {
    font-family: ${aeroTheme.typography.fontFamily.body} !important;
    color-scheme: light !important;
    font-synthesis: none !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    -webkit-text-size-adjust: 100% !important;
  }
`;
export const MorphingContainer = styled(motion.div) `
  position: relative !important;
  background: ${(props) => {
    const opacity = props.$backgroundOpacity ?? 0.95;
    // Extract RGB from the theme backdrop color and apply custom opacity
    return `rgba(255, 255, 255, ${opacity})`;
}} !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const ButtonContent = styled(motion.div) `
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const Logo = styled(motion.div) `
  width: 2rem !important;
  height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: ${aeroTheme.colors.primary[500]} !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const ChatContent = styled(motion.div) `
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: visible !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const Header = styled(motion.div) `
  padding: ${aeroTheme.spacing.md} !important;
  border-bottom: ${aeroTheme.colors.glass.borderLight} !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: ${aeroTheme.colors.glass.light} !important;
  backdrop-filter: ${aeroTheme.colors.glass.backdropLight} !important;
  position: relative !important;
  z-index: 10 !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const Title = styled.h3 `
  margin: 0 !important;
  font-size: ${aeroTheme.typography.fontSize.lg} !important;
  font-weight: ${aeroTheme.typography.fontWeight.semibold} !important;
  font-family: ${aeroTheme.typography.fontFamily.body} !important;
  color: ${aeroTheme.colors.text.primary} !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  flex: 1 !important;
  font-synthesis: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-size-adjust: 100% !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const HeaderLogo = styled.div `
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const CloseButton = styled(motion.button) `
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  color: ${aeroTheme.colors.text.primary} !important;
  transition: ${aeroTheme.transitions.normal};
  z-index: 1;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  outline: none !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;

  &:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: ${aeroTheme.colors.text.primary} !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    border-color: rgba(255, 255, 255, 0.3) !important;
  }

  &:focus {
    outline: none !important;
  }

  &:focus-visible {
    outline: none !important;
  }
`;
export const SettingsButton = styled(motion.button) `
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  color: ${aeroTheme.colors.text.primary} !important;
  transition: ${aeroTheme.transitions.normal};
  z-index: 1;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  outline: none !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;

  &:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: ${aeroTheme.colors.text.primary} !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    border-color: rgba(255, 255, 255, 0.3) !important;
  }

  &:focus {
    outline: none !important;
  }

  &:focus-visible {
    outline: none !important;
  }
`;
export const SettingsTray = styled(motion.div) `
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: ${aeroTheme.borderRadius.lg} !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  padding: 0 !important;
  min-width: 0 !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const SettingsOption = styled(motion.button) `
  padding: ${aeroTheme.spacing.sm} ${aeroTheme.spacing.md};
  background: transparent;
  border: none !important;
  border-radius: ${aeroTheme.borderRadius.md} !important;
  color: ${aeroTheme.colors.text.primary};
  font-family: ${aeroTheme.typography.fontFamily.body} !important;
  font-size: ${aeroTheme.typography.sizes.sm} !important;
  font-weight: inherit !important;
  cursor: pointer !important;
  transition: ${aeroTheme.transitions.normal};
  display: flex;
  align-items: center;
  justify-content: center;
  gap: ${aeroTheme.spacing.sm};
  outline: none !important;
  flex: 1;
  min-width: 2.5rem;

  &:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: transparent !important;
  }

  &:active {
    background: rgba(0, 0, 0, 0.1);
  }

  &:focus {
    outline: none !important;
  }

  &:focus-visible {
    outline: none !important;
  }
`;
export const Content = styled(motion.div) `
  flex: 1 !important;
  padding: ${aeroTheme.spacing.md} !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const Footer = styled(motion.div) `
  padding: ${aeroTheme.spacing.md} !important;
  border-top: ${aeroTheme.colors.glass.borderLight} !important;
  background: ${aeroTheme.colors.glass.light} !important;
  backdrop-filter: ${aeroTheme.colors.glass.backdropLight} !important;
  position: relative !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const InputContainer = styled(motion.div) `
  display: flex !important;
  align-items: center !important;
  gap: ${aeroTheme.spacing.sm} !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: ${aeroTheme.borderRadius.full} !important;
  min-height: 3rem !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const Input = styled.input `
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: ${aeroTheme.colors.text.primary} !important;
  font-size: ${aeroTheme.typography.fontSize.sm} !important;
  font-family: ${aeroTheme.typography.fontFamily.body} !important;
  border-radius: ${aeroTheme.borderRadius.full} !important;
  padding: 0.5rem 0.75rem !important;
  line-height: 1.5 !important;
  min-height: 2.25rem !important;
  font-synthesis: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-size-adjust: 100% !important;
  isolation: isolate;
  contain: layout style paint;

  &::placeholder {
    color: ${aeroTheme.colors.text.tertiary} !important;
    font-family: ${aeroTheme.typography.fontFamily.body} !important;
    font-size: ${aeroTheme.typography.fontSize.sm} !important;
  }

  &:focus {
    outline: none !important;
    border: none !important;
  }
`;
export const ActionButton = styled(motion.button) `
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: ${(props) => props.$active
    ? aeroTheme.colors.convai.light
    : aeroTheme.colors.text.primary};
  color: ${(props) => props.$active ? aeroTheme.colors.text.inverse : "white"};
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: ${aeroTheme.transitions.normal} !important;
  outline: none !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  isolation: isolate;
  contain: layout style paint;

  &:hover {
    transform: scale(1.05);
    background: ${aeroTheme.colors.neutral[800]} !important;
    border-color: transparent !important;
  }

  &:active {
    transform: scale(0.95);
  }

  &:focus {
    outline: none !important;
  }

  &:focus-visible {
    outline: none !important;
  }
`;
export const MessageList = styled.div `
  flex: 1 !important;
  overflow-y: auto !important;
  padding: ${aeroTheme.spacing.md} !important;
  display: flex !important;
  flex-direction: column !important;
  gap: ${aeroTheme.spacing.sm} !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const Message = styled.div `
  display: flex !important;
  flex-direction: ${(props) => props.isUser ? "row-reverse" : "row"} !important;
  align-items: flex-start !important;
  gap: ${aeroTheme.spacing.sm} !important;
  margin-bottom: ${aeroTheme.spacing.sm} !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const MessageBubble = styled.div `
  max-width: 70% !important;
  padding: ${aeroTheme.spacing.sm} ${aeroTheme.spacing.md} !important;
  background: ${(props) => props.isUser
    ? aeroTheme.colors.primary[500]
    : "rgba(255, 255, 255, 0.9)"} !important;
  color: ${(props) => props.isUser ? "white" : aeroTheme.colors.text.primary} !important;
  border-radius: ${aeroTheme.borderRadius.lg} !important;
  font-size: ${aeroTheme.typography.fontSize.sm} !important;
  font-family: ${aeroTheme.typography.fontFamily.body} !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  font-synthesis: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-size-adjust: 100% !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const MessageTime = styled.div `
  font-size: ${aeroTheme.typography.fontSize.xs} !important;
  font-family: ${aeroTheme.typography.fontFamily.body} !important;
  color: ${aeroTheme.colors.text.secondary} !important;
  margin-top: ${aeroTheme.spacing.xs} !important;
  text-align: ${(props) => (props.isUser ? "right" : "left")} !important;
  font-synthesis: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-size-adjust: 100% !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const ButtonContainer = styled(motion.button) `
  position: fixed !important;
  bottom: 2rem !important;
  right: 2rem !important;
  width: 4rem !important;
  height: 4rem !important;
  border: none !important;
  border-radius: 50% !important;
  background: ${aeroTheme.colors.glass.backdrop} !important;
  backdrop-filter: ${aeroTheme.glass.backdrop} !important;
  border: ${aeroTheme.glass.border} !important;
  box-shadow: ${aeroTheme.shadows.glass} !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important;
  isolation: isolate;
  contain: layout style paint;

  &:hover {
    transform: scale(1.05) !important;
    box-shadow: ${aeroTheme.shadows.xl} !important;
  }
`;
export const ButtonLogo = styled(motion.div) `
  width: 2rem !important;
  height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: ${aeroTheme.colors.primary[500]} !important;
  isolation: isolate;
  contain: layout style paint;
`;
// Message Components
export const ConviBubble = styled.div `
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px 12px 12px 4px !important;
  padding: 12px !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;
  color: ${aeroTheme.colors.text.primary} !important;
  font-family: ${aeroTheme.typography.fontFamily.body} !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  
  /* Markdown styling */
  strong {
    font-weight: 600 !important;
    color: ${aeroTheme.colors.text.primary} !important;
  }
  
  em {
    font-style: italic !important;
  }
  word-wrap: break-word !important;
  max-width: 100% !important;
  font-synthesis: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-size-adjust: 100% !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const ConviMessageContainer = styled.div `
  display: flex !important;
  flex-direction: column !important;
  max-width: 70% !important;
  margin-right: auto !important;
  width: 100% !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const MessageHeader = styled.div `
  display: flex !important;
  align-items: center !important;
  gap: ${aeroTheme.spacing.xs} !important;
  margin-bottom: ${aeroTheme.spacing.xs} !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const ConviLabel = styled.span `
  font-size: ${aeroTheme.typography.sizes.caption} !important;
  color: #10b981 !important;
  font-weight: 500 !important;
  font-family: ${aeroTheme.typography.fontFamily.body} !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const LogoWrapper = styled.div `
  width: 1rem !important;
  height: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const UserBubble = styled.div `
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px 12px 4px 12px !important;
  padding: 12px !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;
  color: ${aeroTheme.colors.text.primary} !important;
  font-family: ${aeroTheme.typography.fontFamily.body} !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  
  /* Markdown styling */
  strong {
    font-weight: 600 !important;
    color: ${aeroTheme.colors.text.primary} !important;
  }
  
  em {
    font-style: italic !important;
  }
  word-wrap: break-word !important;
  max-width: 100% !important;
  font-synthesis: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-size-adjust: 100% !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const UserMessageContainer = styled.div `
  display: flex !important;
  flex-direction: column !important;
  max-width: 70% !important;
  margin-left: auto !important;
  width: 100% !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const UserLabel = styled.span `
  font-size: ${aeroTheme.typography.sizes.caption} !important;
  color: ${aeroTheme.colors.convai.dark} !important;
  font-weight: 500 !important;
  font-family: ${aeroTheme.typography.fontFamily.body} !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const BubbleContainer = styled(motion.div) `
  display: flex !important;
  flex-direction: column !important;
  max-width: 70% !important;
  margin: ${aeroTheme.spacing.sm} 0 !important;
  align-self: ${(props) => props.$isUser ? "flex-end" : "flex-start"} !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const Bubble = styled(motion.div) `
  background: ${(props) => props.$isUser
    ? "rgba(255, 255, 255, 0.95)"
    : "rgba(248, 250, 252, 0.95)"} !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid
    ${(props) => props.$isUser
    ? "rgba(255, 255, 255, 0.3)"
    : "rgba(248, 250, 252, 0.3)"} !important;
  border-radius: ${(props) => props.$isUser
    ? `${aeroTheme.borderRadius.lg} ${aeroTheme.borderRadius.lg} ${aeroTheme.borderRadius.sm} ${aeroTheme.borderRadius.lg}`
    : `${aeroTheme.borderRadius.lg} ${aeroTheme.borderRadius.lg} ${aeroTheme.borderRadius.lg} ${aeroTheme.borderRadius.sm}`} !important;
  padding: ${aeroTheme.spacing.md} !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;
  color: ${aeroTheme.colors.text.primary} !important;
  font-family: ${aeroTheme.typography.fontFamily.body} !important;
  font-size: ${aeroTheme.typography.sizes.body} !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  position: relative !important;
  font-synthesis: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-text-size-adjust: 100% !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const Timestamp = styled.span `
  font-size: ${aeroTheme.typography.sizes.caption} !important;
  color: ${aeroTheme.colors.text.secondary} !important;
  margin-top: ${aeroTheme.spacing.xs} !important;
  align-self: ${(props) => props.$isUser ? "flex-end" : "flex-start"} !important;
  font-family: ${aeroTheme.typography.fontFamily.body} !important;
  isolation: isolate;
  contain: layout style paint;
`;
export const MessageListContainer = styled.div `
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
  scroll-behavior: smooth !important;
  isolation: isolate;
  contain: layout style paint;

  /* Custom scrollbar */
  &::-webkit-scrollbar {
    width: 4px !important;
  }

  &::-webkit-scrollbar-track {
    background: transparent !important;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 2px !important;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2) !important;
  }
`;
export const MessageWrapper = styled.div `
  margin-bottom: 16px !important;
  width: 100% !important;
  isolation: isolate;
  contain: layout style paint;

  &:last-child {
    margin-bottom: 0 !important;
  }
`;
export const EmptyState = styled.div `
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: ${aeroTheme.colors.text.secondary};
  font-family: ${aeroTheme.typography.fontFamily.body};
  font-size: ${aeroTheme.typography.sizes.body};
  text-align: center;
  padding: 32px;
`;
//# sourceMappingURL=styledComponents.js.map