@convai/web-widget 0.1.3 → 0.2.0-beta.0

package/types.d.ts

@@ -0,0 +1,62 @@
+export type ErrorCode = 'config' | 'auth' | 'network' | 'runtime' | 'mic-permission';
+export type Placement = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'inline';
+export type Preload = 'none' | 'hover' | 'idle';
+export interface WidgetConfig {
+    /**
+     * Absent in publication mode and only there. A published integration names
+     * a publication and nothing else — the character id stays server-side,
+     * which is the whole privacy property `publicationId` exists to preserve.
+     * Every other mode requires it, and `readConfig` enforces that.
+     */
+    characterId?: string;
+    /**
+     * Publication mode. When set, the widget resolves its session from the
+     * Character API's chat-publication endpoints instead of from any
+     * credential on this page, and `tokenEndpoint`/`connectEndpoint`/`apiKey`
+     * are neither required nor read.
+     */
+    publicationId?: string;
+    /** Character API origin serving the publication. Defaults to api.convai.com. */
+    publicationApiUrl?: string;
+    /** Core/realtime origin override for the published connect exchange. */
+    coreUrl?: string;
+    tokenEndpoint?: string;
+    connectEndpoint?: string;
+    apiKey?: string;
+    endUserId?: string;
+    endUserMetadata?: Record<string, unknown>;
+    placement: Placement;
+    preload: Preload;
+    startOpen: boolean;
+    startWithAudio: boolean;
+    accent?: string;
+    greeting?: string;
+    launcherLabel?: string;
+    avatarSrc?: string;
+    disabled: boolean;
+    debug: boolean;
+}
+export type ConfigResult = {
+    ok: true;
+    config: WidgetConfig;
+} | {
+    ok: false;
+    message: string;
+};
+/** What runtime.mount() hands back to the loader. */
+export interface RuntimeController {
+    open(): void;
+    close(): void;
+    toggle(): void;
+    sendMessage(text: string): void;
+    destroy(): void;
+    readonly client: unknown;
+}
+export interface MessageDetail {
+    sender: 'user' | 'bot';
+    content: string;
+}
+export interface ErrorDetail {
+    code: ErrorCode;
+    message: string;
+}

package/ui/react/components/ConvaiWidget.d.ts

@@ -0,0 +1,86 @@
+import type { LinkPreviewResolver } from "@convai/web-sdk/core";
+import type { IConvaiClient, PublishedChatConnectOptions } from "@convai/web-sdk/core";
+import type { PublishedChatDescriptor } from "@convai/web-sdk/embed";
+interface ConvaiWidgetProps {
+    /** Convai client instance (required) */
+    convaiClient: IConvaiClient & {
+        activity?: string;
+        isAudioMuted: boolean;
+        isVideoEnabled: boolean;
+        isScreenShareActive: boolean;
+    };
+    /**
+     * Show video toggle button in settings (default: true).
+     * Only works if connection type is "video". If false, hides the video button.
+     */
+    showVideo?: boolean;
+    /**
+     * Show screen share toggle button in settings (default: true).
+     * Only works if connection type is "video". If false, hides the screen share button.
+     */
+    showScreenShare?: boolean;
+    /**
+     * Start in voice mode by default when widget opens (default: true).
+     * When true, the widget will open directly in voice mode with microphone enabled.
+     */
+    defaultVoiceMode?: boolean;
+    /**
+     * Mint a fresh single-use grant when a published-chat session is reopened.
+     * Required when using this widget with connectWithPublicationGrant().
+     */
+    requestPublicationGrant?: () => Promise<string>;
+    /** Core endpoint override used with requestPublicationGrant. */
+    publishedChatConnectOptions?: PublishedChatConnectOptions;
+    /**
+     * Open Graph lookup for plain web links the character sends. Supply a
+     * function that asks your backend for a page's metadata and each such link
+     * gets a site card (favicon, site name, title, description, image) once it
+     * resolves. Omit it and links render as before. See
+     * docs/convai_link_previews.md, "Site cards".
+     */
+    linkPreviewResolver?: LinkPreviewResolver;
+    /** Public descriptor used to label a credential-free published session. */
+    publishedChatDescriptor?: Pick<PublishedChatDescriptor, "display_name" | "image_url">;
+}
+/**
+ * ConvaiWidget - A consolidated chat widget component for real-time conversations
+ *
+ * This component provides a complete UI for interacting with Convai characters.
+ * Connection configuration should be handled via useConvaiClient.connect().
+ *
+ * Features:
+ * - Collapsed circular button with status indicator
+ * - Expandable/collapsible chat interface
+ * - Voice mode support
+ * - Real-time message streaming
+ * - Audio controls (mute/unmute)
+ * - Settings tray with session reset
+ * - Optional video and screen share (when connection type supports it)
+ *
+ * @param {ConvaiWidgetProps} props - Component props
+ * @param {ConvaiClient} props.convaiClient - Convai client instance (required)
+ * @param {boolean} props.showVideo - Show video toggle in settings (default: true)
+ * @param {boolean} props.showScreenShare - Show screen share toggle in settings (default: true)
+ * @param {boolean} props.defaultVoiceMode - Start in voice mode when widget opens (default: true)
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const convaiClient = useConvaiClient({
+ *     apiKey: 'your-api-key',
+ *     characterId: 'your-character-id',
+ *     enableVideo: true,
+ *   });
+ *
+ *   return (
+ *     <ConvaiWidget
+ *       convaiClient={convaiClient}
+ *       showVideo={true}
+ *       showScreenShare={true}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare const ConvaiWidget: React.FC<ConvaiWidgetProps>;
+export {};

package/ui/react/components/index.d.ts

@@ -0,0 +1 @@
+export { ConvaiWidget } from './ConvaiWidget';

package/ui/react/components/rtc-widget/components/AudioSettingsPanel.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { AudioSettings } from "@convai/web-sdk/core";
+interface AudioSettingsPanelProps {
+    currentSettings: AudioSettings;
+    onUpdateSettings: (settings: Partial<AudioSettings>) => Promise<void>;
+    isConnected: boolean;
+}
+export declare const AudioSettingsPanel: React.FC<AudioSettingsPanelProps>;
+export {};

package/ui/react/components/rtc-widget/components/AudioVisualizer.d.ts

@@ -0,0 +1,35 @@
+import { Room } from 'livekit-client';
+interface AudioVisualizerProps {
+    /** LiveKit room instance containing the remote participant's audio track */
+    room: Room | null;
+    /** Canvas size in pixels (width and height) */
+    size?: number;
+    /** CSS color value for the bars */
+    color?: string;
+    /** Base opacity of the bars (0-1), actual opacity varies with audio intensity */
+    opacity?: number;
+    /** Radius of the circular visualization area in pixels */
+    avatarRadius?: number;
+    /** Number of radial bars to display around the circle */
+    barCount?: number;
+    /** Callback function called when speaking state changes */
+    onSpeakingChange?: (isSpeaking: boolean) => void;
+}
+/**
+ * Circular Audio Visualizer Component
+ *
+ * A real-time circular audio visualization component that displays radial bars arranged
+ * in a circle around an avatar. The visualization reacts to the remote participant's
+ * (bot) audio output from a LiveKit room, using logarithmic frequency bands and a
+ * traveling wave animation effect.
+ *
+ * Features:
+ * - Circular radial bar visualization with configurable bar count
+ * - Logarithmic frequency band distribution (low frequencies distributed around the ring)
+ * - Traveling wave animation that propagates around the circle
+ * - Speaking detection with callback support
+ * - Automatic track detection and reconnection
+ * - Canvas-based rendering for smooth animations
+ */
+export declare const AudioVisualizer: React.FC<AudioVisualizerProps>;
+export {};

package/ui/react/components/rtc-widget/components/ConviMessage.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { LinkPreviewResolver } from "@convai/web-sdk/core";
+interface ConviMessageProps {
+    message: string;
+    timestamp?: string;
+    className?: string;
+    showLogo?: boolean;
+    sender?: string;
+    /** Open Graph lookup for plain web links; see MarkdownRenderer. */
+    resolveLinkPreview?: LinkPreviewResolver;
+}
+export declare const ConviMessage: ({ message, timestamp, className, showLogo, sender, resolveLinkPreview, }: ConviMessageProps) => React.JSX.Element;
+export {};

package/ui/react/components/rtc-widget/components/FloatingVideo.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface FloatingVideoProps {
+    isVisible: boolean;
+    onClose: () => void;
+    mirror?: boolean;
+}
+export declare const FloatingVideo: React.FC<FloatingVideoProps>;
+export {};

package/ui/react/components/rtc-widget/components/MarkdownRenderer.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { LinkPreviewResolver } from "@convai/web-sdk/core";
+/**
+ * The widget's bubble renderer. Everything visual comes from
+ * utils/linkPresentation so this file and the vanilla widget cannot drift;
+ * this file only maps tokenizer nodes onto JSX.
+ *
+ * `data-convai-part` mirrors the vanilla widget's `part` names. React renders
+ * in light DOM where `part` means nothing, but the same names let tests and
+ * host CSS target both renderers with one vocabulary.
+ */
+interface MarkdownRendererProps {
+    text: string;
+    /**
+     * Render cards and chips under links. Bot messages want them; the user's
+     * own bubble does not — you already know what you typed, and a preview
+     * there would let a URL a user pasted embed remote media into the
+     * transcript. Links stay clickable either way.
+     */
+    media?: boolean;
+    /** Test seam for mixed-content detection. Defaults to the page's protocol. */
+    pageProtocol?: string;
+    /**
+     * Host-supplied Open Graph lookup. With it, a plain web link in a bot
+     * bubble gets a site card once the lookup settles; without it, nothing
+     * changes. See docs/convai_link_previews.md, "Site cards".
+     */
+    resolveLinkPreview?: LinkPreviewResolver;
+}
+export declare const MarkdownRenderer: React.FC<MarkdownRendererProps>;
+export {};

package/ui/react/components/rtc-widget/components/MessageBubble.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface MessageBubbleProps {
+    children: React.ReactNode;
+    isUser?: boolean;
+    timestamp?: string;
+    className?: string;
+}
+export declare const MessageBubble: ({ children, isUser, timestamp, className, }: MessageBubbleProps) => React.JSX.Element;
+export {};

package/ui/react/components/rtc-widget/components/MessageList.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { LinkPreviewResolver } from "@convai/web-sdk/core";
+import { RTCChatMessage } from "../types";
+type Message = RTCChatMessage;
+interface MessageListProps {
+    messages: Message[];
+    className?: string;
+    isStreaming?: boolean;
+    forceToBottomToken?: string | number | boolean;
+    /** Open Graph lookup for plain web links in bot bubbles. */
+    linkPreviewResolver?: LinkPreviewResolver;
+}
+export declare const MessageList: ({ messages, className, isStreaming, forceToBottomToken, linkPreviewResolver, }: MessageListProps) => React.JSX.Element;
+export {};

package/ui/react/components/rtc-widget/components/SiteCard.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { type LinkPreviewResolver } from "@convai/web-sdk/core";
+/**
+ * Open Graph card under a plain web link. Renders nothing until the host's
+ * resolver settles and nothing at all unless the result has a title or an
+ * image: most links resolve to nothing card-worthy, and a placeholder that
+ * then vanishes reads worse than a card that appears.
+ *
+ * Everything from the resolver lands in text nodes or an `img` src that
+ * `resolveLinkPreviewCached` already restricted to http(s). Never markup.
+ */
+export declare const SiteCard: ({ href, resolver }: {
+    href: string;
+    resolver: LinkPreviewResolver;
+}) => React.JSX.Element | null;

package/ui/react/components/rtc-widget/components/UserMessage.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface UserMessageProps {
+    message: string;
+    timestamp?: string;
+    className?: string;
+    sender?: string;
+}
+export declare const UserMessage: ({ message, timestamp, className, sender, }: UserMessageProps) => React.JSX.Element;
+export {};

package/ui/react/components/rtc-widget/components/conviComponents/ConviButton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface ConviButtonProps {
+    isOpen: boolean;
+}
+export declare const ConviButton: ({ isOpen }: ConviButtonProps) => React.JSX.Element;
+export {};

package/ui/react/components/rtc-widget/components/conviComponents/ConviFooter.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+interface ConviFooterProps {
+    inputMode: "conversation" | "speaker" | "voice" | "verbosity";
+    inputValue: string;
+    liveUserText: string;
+    chatbotMic: boolean;
+    localIsTyping: boolean;
+    convaiIsTyping: boolean;
+    isCreatingSpeaker: boolean;
+    isPressingMic: boolean;
+    isSettingsOpen: boolean;
+    isVoiceMode: boolean;
+    onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyPress: (e: React.KeyboardEvent) => void;
+    onSend: () => void;
+    onMicPress: () => void;
+    onMicRelease: () => void;
+    setIsPressingMic: (value: boolean) => void;
+    onToggleVoiceMode: () => void;
+    verbosityChanged?: boolean;
+    onContinue?: () => void;
+}
+export declare const ConviFooter: ({ inputMode, inputValue, liveUserText, chatbotMic, localIsTyping, convaiIsTyping, isCreatingSpeaker, isPressingMic, isSettingsOpen, isVoiceMode, onInputChange, onKeyPress, onSend, onMicPress, onMicRelease, setIsPressingMic, onToggleVoiceMode, verbosityChanged, onContinue, }: ConviFooterProps) => React.JSX.Element;
+export {};

package/ui/react/components/rtc-widget/components/conviComponents/ConviHeader.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+interface ConviHeaderProps {
+    isOpen: boolean;
+    isSpeakerEditMode: boolean;
+    isVoiceMode: boolean;
+    isVerbosityMode: boolean;
+    isMuted: boolean;
+    characterImage?: string;
+    characterName?: string;
+    onClose: () => void;
+    onSettingsToggle: () => void;
+    onToggleMute: () => void;
+    settingsButtonRef: React.RefObject<HTMLButtonElement>;
+}
+export declare const ConviHeader: ({ isOpen, isSpeakerEditMode, isVoiceMode, isVerbosityMode, isMuted, characterImage, characterName, onClose, onSettingsToggle, onToggleMute, settingsButtonRef, }: ConviHeaderProps) => React.JSX.Element;
+export {};

package/ui/react/components/rtc-widget/components/conviComponents/SettingsTray.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface SettingsTrayProps {
+    isOpen: boolean;
+    isVideoVisible?: boolean;
+    isScreenShareActive?: boolean;
+    onReset?: () => void;
+    onDisconnect?: () => void;
+    onToggleVideo?: () => void;
+    onToggleScreenShare?: () => void;
+}
+export declare const SettingsTray: ({ isOpen, isVideoVisible, isScreenShareActive, onReset, onDisconnect, onToggleVideo, onToggleScreenShare, }: SettingsTrayProps) => React.JSX.Element | null;
+export {};

package/ui/react/components/rtc-widget/components/conviComponents/VoiceModeOverlay.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Room } from "livekit-client";
+interface VoiceModeOverlayProps {
+    isActive: boolean;
+    isTalking: boolean;
+    /** When true (user is speaking, from server), show "Listening..." label */
+    isListening?: boolean;
+    convaiClient?: any;
+    characterImage?: string;
+    characterName?: string;
+    room?: Room | null;
+}
+export declare const VoiceModeOverlay: ({ isActive, isTalking, isListening, convaiClient, characterImage, characterName, room, }: VoiceModeOverlayProps) => React.JSX.Element;
+export {};

package/ui/react/components/rtc-widget/components/conviComponents/index.d.ts

@@ -0,0 +1,5 @@
+export { ConviButton } from "./ConviButton";
+export { ConviHeader } from "./ConviHeader";
+export { ConviFooter } from "./ConviFooter";
+export { SettingsTray } from "./SettingsTray";
+export { VoiceModeOverlay } from "./VoiceModeOverlay";

package/ui/react/components/rtc-widget/components/index.d.ts

@@ -0,0 +1,8 @@
+export { MessageBubble } from "./MessageBubble";
+export { MessageList } from "./MessageList";
+export { UserMessage } from "./UserMessage";
+export { ConviMessage } from "./ConviMessage";
+export { MarkdownRenderer } from "./MarkdownRenderer";
+export { FloatingVideo } from "./FloatingVideo";
+export { AudioVisualizer } from "./AudioVisualizer";
+export { ConviButton, ConviHeader, ConviFooter, SettingsTray, VoiceModeOverlay, } from "./conviComponents";

package/ui/react/components/rtc-widget/index.d.ts

@@ -0,0 +1,5 @@
+export { MessageBubble, MessageList, UserMessage, ConviMessage, FloatingVideo, ConviButton, ConviHeader, ConviFooter, SettingsTray, VoiceModeOverlay, } from "./components";
+export { aeroTheme, glassStyles, iconSizes, variants, iosTransitions, animationVariants, ConvaiLogo, ChevronDown, } from "./styles";
+export { ConvaiContainer, MorphingContainer, ButtonContent, Logo, ChatContent, Header, Title, HeaderLogo, CloseButton, SettingsButton, Content, Footer, InputContainer, Input, ActionButton, } from "./styles";
+export type { RTCChatMessage, CharacterVerbosityConfig, ConviUIProps, } from "./types";
+export type { LogoState } from "./styles";

package/ui/react/components/rtc-widget/styles/framerConfig.d.ts

@@ -0,0 +1,115 @@
+export declare const iosTransitions: {
+    snappy: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+    fadePop: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+    layoutMorph: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+    modalSlide: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+    scale: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+    slide: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+};
+export declare const animationVariants: {
+    fadeIn: {
+        initial: {
+            opacity: number;
+        };
+        animate: {
+            opacity: number;
+        };
+        exit: {
+            opacity: number;
+        };
+    };
+    slideUp: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+        };
+        exit: {
+            y: number;
+            opacity: number;
+        };
+    };
+    slideDown: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+        };
+        exit: {
+            y: number;
+            opacity: number;
+        };
+    };
+    scaleIn: {
+        initial: {
+            scale: number;
+            opacity: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+        };
+        exit: {
+            scale: number;
+            opacity: number;
+        };
+    };
+    slideInFromRight: {
+        initial: {
+            x: string;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+        };
+        exit: {
+            x: string;
+            opacity: number;
+        };
+    };
+    slideInFromLeft: {
+        initial: {
+            x: string;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+        };
+        exit: {
+            x: string;
+            opacity: number;
+        };
+    };
+};

package/ui/react/components/rtc-widget/styles/icons.d.ts

@@ -0,0 +1,27 @@
+import { iconSizes } from "./theme";
+export type LogoState = "idle" | "connecting" | "connected" | "disconnected" | "typing" | "listening" | "processing";
+export declare const AeroIcons: {
+    ChevronDown: ({ size, color, }: {
+        size?: keyof typeof iconSizes;
+        color?: string;
+    }) => import("react").JSX.Element;
+    ConvaiLogo: ({ size, color, animate, state, }: {
+        size?: keyof typeof iconSizes;
+        color?: string;
+        animate?: boolean;
+        state?: LogoState;
+    }) => import("react").JSX.Element;
+};
+export declare const IconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $size?: keyof typeof iconSizes;
+    $variant?: "ghost" | "glass";
+}>> & string;
+export declare const ChevronDown: ({ size, color, }: {
+    size?: keyof typeof iconSizes;
+    color?: string;
+}) => import("react").JSX.Element, ConvaiLogo: ({ size, color, animate, state, }: {
+    size?: keyof typeof iconSizes;
+    color?: string;
+    animate?: boolean;
+    state?: LogoState;
+}) => import("react").JSX.Element;

package/ui/react/components/rtc-widget/styles/index.d.ts

@@ -0,0 +1,5 @@
+export { aeroTheme, glassStyles, iconSizes, variants } from "./theme";
+export { iosTransitions, animationVariants } from "./framerConfig";
+export { ConvaiContainer, MorphingContainer, ButtonContent, Logo, ChatContent, Header, Title, HeaderLogo, CloseButton, SettingsButton, SettingsTray, SettingsOption, Content, Footer, InputContainer, Input, ActionButton, MessageList, Message, MessageBubble, MessageTime, ButtonContainer, ButtonLogo, ConviBubble, ConviMessageContainer, MessageHeader, ConviLabel, LogoWrapper, UserBubble, UserMessageContainer, UserLabel, BubbleContainer, Bubble, Timestamp, MessageListContainer, MessageWrapper, EmptyState, } from "./styledComponents";
+export { ConvaiLogo, ChevronDown, AeroIcons, IconButton } from "./icons";
+export type { LogoState } from "./icons";

package/ui/react/components/rtc-widget/styles/styledComponents.d.ts

@@ -0,0 +1,53 @@
+export declare const ConvaiContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const MorphingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, {
+    $backgroundOpacity?: number;
+}>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const ButtonContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const Logo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const ChatContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const HeaderLogo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"button">, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLButtonElement, import("framer-motion").HTMLMotionProps<"button">>, keyof import("react").Component<any, {}, any>>;
+export declare const SettingsButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"button">, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLButtonElement, import("framer-motion").HTMLMotionProps<"button">>, keyof import("react").Component<any, {}, any>>;
+export declare const SettingsTray: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const SettingsOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"button">, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLButtonElement, import("framer-motion").HTMLMotionProps<"button">>, keyof import("react").Component<any, {}, any>>;
+export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const Footer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("framer-motion").HTMLMotionProps<"button">, "ref"> & import("react").RefAttributes<HTMLButtonElement>, {
+    $active?: boolean;
+}>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLButtonElement, import("framer-motion").HTMLMotionProps<"button">>, keyof import("react").Component<any, {}, any>>;
+export declare const MessageList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Message: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isUser: boolean;
+}>> & string;
+export declare const MessageBubble: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isUser: boolean;
+}>> & string;
+export declare const MessageTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isUser: boolean;
+}>> & string;
+export declare const ButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"button">, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLButtonElement, import("framer-motion").HTMLMotionProps<"button">>, keyof import("react").Component<any, {}, any>>;
+export declare const ButtonLogo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const ConviBubble: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ConviMessageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MessageHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ConviLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const LogoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UserBubble: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UserMessageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UserLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const BubbleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, {
+    $isUser: boolean;
+}>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const Bubble: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, {
+    $isUser: boolean;
+}>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const Timestamp: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $isUser: boolean;
+}>> & string;
+export declare const MessageListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MessageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EmptyState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;