@cuekit-ai/react 1.6.7 → 1.6.9

package/dist/cuekit.css

@@ -22,19 +22,23 @@
   --voice-border: 252 31% 91%;
   --voice-text: 222.2 84% 4.9%;
   --voice-text-muted: 252 16% 47%;
-  --voice-accent: 252 81% 60%;
+  --voice-accent: 252 78% 60%; /* #6257d9 */
+  --voice-accent-vibrant: 245 84% 77%; /* #9a92f6 */
+  --voice-accent-dark: 246 57% 54%; /* #5447cd */
   --voice-accent-light: 252 100% 96%;
-  --voice-user-bubble: 252 81% 60%;
+  --voice-user-bubble: 252 78% 60%;
   --voice-user-text: 0 0% 100%;
   --voice-ai-bubble: 0 0% 100%;
   --voice-ai-text: 222.2 84% 4.9%;
-  --indicator-bg: 252 81% 60%;
+  --indicator-bg: 252 78% 60%;
+  --voice-status-bg: 252 100% 96%;
+  --voice-status-text: 252 78% 60%;
   --voice-placeholder: 252 16% 47%;
 
   /* Gradients Light - Purple */
-  --gradient-primary: linear-gradient(135deg, hsl(252 81% 60%), hsl(252 88% 70%));
-  --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(252 40% 98%));
-  --gradient-mic-button: radial-gradient(circle at 50% 0%, hsl(252 88% 77%), hsl(252 66% 59%));
+  --gradient-primary: linear-gradient(135deg, #8177ed, #9a92f6);
+  --gradient-surface: linear-gradient(180deg, #ffffff, #f6f5ff);
+  --gradient-mic-button: radial-gradient(circle at 50% 0%, #9a92f6, #6257d9);
 
   /* Shadows Light */
   --shadow-soft: 0 4px 20px -2px hsl(252 81% 60% / 0.1);
@@ -49,18 +53,20 @@
   --voice-border: 252 31% 91%;
   --voice-text: 222.2 84% 4.9%;
   --voice-text-muted: 252 16% 47%;
-  --voice-accent: 252 81% 60%;
+  --voice-accent: 252 78% 60%;
+  --voice-accent-vibrant: 245 84% 77%;
+  --voice-accent-dark: 246 57% 54%;
   --voice-accent-light: 252 100% 96%;
-  --voice-user-bubble: 252 81% 60%;
+  --voice-user-bubble: 252 78% 60%;
   --voice-user-text: 0 0% 100%;
   --voice-ai-bubble: 0 0% 100%;
   --voice-ai-text: 222.2 84% 4.9%;
-  --indicator-bg: 252 81% 60%;
+  --indicator-bg: 252 78% 60%;
   --voice-placeholder: 252 16% 47%;
-  --gradient-primary: linear-gradient(135deg, hsl(252 81% 60%), hsl(252 88% 70%));
-  --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(252 40% 98%));
-  --gradient-mic-button: radial-gradient(circle at 50% 0%, hsl(252 88% 77%), hsl(252 66% 59%));
-  --shadow-soft: 0 4px 20px -2px hsl(252 81% 60% / 0.1);
+  --gradient-primary: linear-gradient(135deg, #8177ed, #9a92f6);
+  --gradient-surface: linear-gradient(180deg, #ffffff, #f6f5ff);
+  --gradient-mic-button: radial-gradient(circle at 50% 0%, #9a92f6, #6257d9);
+  --shadow-soft: 0 4px 20px -2px rgba(129, 119, 237, 0.1);
   --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.05);
 }
 
@@ -71,22 +77,26 @@
   --voice-border: 248 32% 22%;
   --voice-text: 252 40% 98%;
   --voice-text-muted: 252 20% 65%;
-  --voice-accent: 252 88% 70%;
+  --voice-accent: 245 84% 77%; /* #9a92f6 */
+  --voice-accent-vibrant: 252 88% 77%;
+  --voice-accent-dark: 246 57% 54%;
   --voice-accent-light: 252 47% 25%;
-  --voice-user-bubble: 252 88% 70%;
+  --voice-user-bubble: 245 84% 77%;
   --voice-user-text: 0 0% 100%;
   --voice-ai-bubble: 252 32% 21%;
   --voice-ai-text: 0 0% 100%;
-  --indicator-bg: 252 88% 70%;
+  --indicator-bg: 245 84% 77%;
+  --voice-status-bg: 252 47% 25%;
+  --voice-status-text: 245 84% 77%;
   --voice-placeholder: 252 20% 65%;
 
   /* Gradients Dark - Purple */
-  --gradient-primary: linear-gradient(135deg, hsl(252 88% 70%), hsl(252 88% 77%));
-  --gradient-surface: linear-gradient(180deg, hsl(248 32% 17.5%), hsl(248 35% 11%));
-  --gradient-mic-button: radial-gradient(circle at 50% 0%, hsl(252 88% 77%), hsl(252 59% 54%));
+  --gradient-primary: linear-gradient(135deg, #8177ed, #9a92f6);
+  --gradient-surface: linear-gradient(180deg, #2b2640, #1a1625);
+  --gradient-mic-button: radial-gradient(circle at 50% 0%, #9a92f6, #5447cd);
 
   /* Shadows Dark */
-  --shadow-soft: 0 4px 20px -2px hsl(252 88% 70% / 0.2);
+  --shadow-soft: 0 4px 20px -2px rgba(129, 119, 237, 0.2);
   --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.3);
 }
 
@@ -171,7 +181,7 @@
 
 /* Placeholder styles */
 input::placeholder {
-  color: hsl(var(--voice-placeholder));
+  color: hsl(var(--voice-text) / 0.9);
 }
 
 /* Theme toggle animations */
@@ -554,8 +564,8 @@ input::placeholder {
 }
 
 .language-tooltip-content {
-  background: oklch(0.23 0.08 252.75);
-  color: hsl(0 0% 98%);
+  background: hsl(var(--voice-accent));
+  color: #fff;
   padding: 8px 12px;
   border-radius: 8px;
   font-size: 12px;
@@ -579,7 +589,7 @@ input::placeholder {
   width: 0;
   height: 0;
   border: 4px solid transparent;
-  border-top-color: oklch(0.23 0.08 252.75);
+  border-top-color: hsl(var(--voice-accent));
 }
 
 .language-selector-content {
@@ -755,7 +765,7 @@ input::placeholder {
   align-items: center;
   gap: 12px;
   padding: 8px;
-  background: hsl(var(--voice-surface));
+  background: white; /* Force white as per user request */
   border: 1px solid hsl(var(--voice-border));
   border-radius: 32px;
   box-shadow:
@@ -786,13 +796,12 @@ input::placeholder {
   align-items: center;
   gap: 16px;
   padding: 20px;
-  background: hsl(var(--voice-surface));
+  background: white; /* Force white as per user request */
   border: 1px solid hsl(var(--voice-border));
   border-radius: 16px;
   box-shadow:
     0 20px 60px -12px hsl(0 0% 0% / 0.15),
     0 8px 32px -8px hsl(var(--voice-accent) / 0.1);
-  backdrop-filter: blur(16px);
   min-width: 280px;
   animation: voiceChatLanguageEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -887,11 +896,11 @@ input::placeholder {
 
 /* Dark theme for voice chat button: only when popup has .cuekit-dark (no media query) */
 .cuekit-voice-popup.cuekit-dark .voice-chat-main-button {
-  background: hsl(var(--voice-surface) / 0.8);
+  background: white; /* Force white in dark mode as per user request */
   border-color: hsl(var(--voice-border) / 0.5);
 }
 
 .cuekit-voice-popup.cuekit-dark .voice-chat-language-selection {
-  background: hsl(var(--voice-surface));
+  background: white; /* Force white in dark mode as per user request */
   border-color: hsl(var(--voice-border));
 }

package/dist/index.d.mts

@@ -3,6 +3,34 @@ import React__default, { ReactNode } from 'react';
 import * as livekit_client from 'livekit-client';
 import { ConnectionState, Room } from 'livekit-client';
 
+type InteractiveElement = {
+    [btnId: string]: string[];
+};
+interface DOMStructurePayload {
+    components: InteractiveElement;
+}
+interface ThemeColors {
+    primary: string;
+    primaryVibrant?: string;
+    primaryDark?: string;
+    indicator?: string;
+    statusBg?: string;
+    statusText?: string;
+    background?: string;
+    text?: string;
+    surface?: string;
+    border?: string;
+    textMuted?: string;
+    userBubble?: string;
+    userText?: string;
+    aiBubble?: string;
+    aiText?: string;
+}
+interface ThemeConfig {
+    light?: Partial<ThemeColors>;
+    dark?: Partial<ThemeColors>;
+}
+
 declare global {
     interface AnsyrGlobalStore {
         intent: string | null;
@@ -22,6 +50,8 @@ type AnsyrCtx = {
     showLogo: boolean;
     showAIIcon: boolean;
     showUserIcon: boolean;
+    theme?: ThemeConfig;
+    emptyStateMessage?: string;
 };
 declare const useAnsyrContext: () => AnsyrCtx;
 interface Props {
@@ -37,6 +67,8 @@ interface Props {
     showLogo?: boolean;
     showAIIcon?: boolean;
     showUserIcon?: boolean;
+    theme?: ThemeConfig;
+    emptyStateMessage?: string;
 }
 declare const AnsyrProvider: React__default.FC<Props>;
 
@@ -183,7 +215,7 @@ declare const useCuekit: (options?: {
     sendScreenStatus: typeof sendScreenStatus;
     sendUserCommand: typeof sendUserCommand;
     sendStaticData: typeof sendStaticData;
-    audioContainerRef: React.RefObject<HTMLDivElement>;
+    audioContainerRef: React.RefObject<HTMLDivElement | null>;
 };
 
 interface Position {
@@ -246,6 +278,8 @@ interface ChatPopupProps {
     persistPosition?: boolean;
     persistSize?: boolean;
     storageKey?: string;
+    theme?: ThemeConfig;
+    emptyStateMessage?: string;
 }
 declare const ChatPopup: React__default.FC<ChatPopupProps>;
 
@@ -332,7 +366,7 @@ declare const useWebRTC: (options?: {
     sendScreenStatus: typeof sendScreenStatus;
     sendUserCommand: typeof sendUserCommand;
     sendStaticData: typeof sendStaticData;
-    audioContainerRef: React.RefObject<HTMLDivElement>;
+    audioContainerRef: React.RefObject<HTMLDivElement | null>;
 };
 
 interface WebRTCServerConfig {
@@ -364,13 +398,6 @@ declare const initWebRTCWithDeployedBackend: (apiKey: string, customConfig?: Par
  */
 declare const initWebRTC: (apiKey: string) => WebRTCServerConfig;
 
-type InteractiveElement = {
-    [btnId: string]: string[];
-};
-interface DOMStructurePayload {
-    components: InteractiveElement;
-}
-
 interface ElementAction {
     action_type: 'click' | 'navigate' | 'input' | 'focus' | 'toggle';
     target_element?: string;
@@ -419,4 +446,4 @@ declare function getCurrentPathParams(): Record<string, string>;
  */
 declare function resolveRoutePath(routePath: string, params: Record<string, string>): string;
 
-export { AnsyrProvider, BorderGlow, type Bounds, ChatPopup, type ChatPopupProps, type Props as CuekitProviderProps, type DOMStructurePayload, DraggableResizableContainer, type DraggableResizableContainerProps, type ElementAction, InitCuekit, type InteractiveElement, type Language, LanguageSelector, type LanguageSelectorProps, MicButton, type MicButtonProps, type MicState$1 as MicState, type MuteState, type NavigationCommand, type Position, type ResizeDirection, ResizeHandle, type ResizeHandleProps, ResizeHandles, type ResizeHandlesProps, type ServerConfig, type Size, type TokenRequest, type TokenResponse, VoiceIntensityVisualizer, type WebRTCServerConfig, captureAllInteractiveElements, clearElementCache, configureWebRTCServer, executeAction, generateDynamicId, getCurrentPathParams, getWebRTCServerConfig, initWebRTC, initWebRTCWithDeployedBackend, resolveRoutePath, useAnsyrContext, useCuekit, useDraggableResizableContainer, useWebRTC, validateDynamicElements };
+export { AnsyrProvider, BorderGlow, type Bounds, ChatPopup, type ChatPopupProps, type Props as CuekitProviderProps, type DOMStructurePayload, DraggableResizableContainer, type DraggableResizableContainerProps, type ElementAction, InitCuekit, type InteractiveElement, type Language, LanguageSelector, type LanguageSelectorProps, MicButton, type MicButtonProps, type MicState$1 as MicState, type MuteState, type NavigationCommand, type Position, type ResizeDirection, ResizeHandle, type ResizeHandleProps, ResizeHandles, type ResizeHandlesProps, type ServerConfig, type Size, type ThemeColors, type ThemeConfig, type TokenRequest, type TokenResponse, VoiceIntensityVisualizer, type WebRTCServerConfig, captureAllInteractiveElements, clearElementCache, configureWebRTCServer, executeAction, generateDynamicId, getCurrentPathParams, getWebRTCServerConfig, initWebRTC, initWebRTCWithDeployedBackend, resolveRoutePath, useAnsyrContext, useCuekit, useDraggableResizableContainer, useWebRTC, validateDynamicElements };

package/dist/index.d.ts

@@ -3,6 +3,34 @@ import React__default, { ReactNode } from 'react';
 import * as livekit_client from 'livekit-client';
 import { ConnectionState, Room } from 'livekit-client';
 
+type InteractiveElement = {
+    [btnId: string]: string[];
+};
+interface DOMStructurePayload {
+    components: InteractiveElement;
+}
+interface ThemeColors {
+    primary: string;
+    primaryVibrant?: string;
+    primaryDark?: string;
+    indicator?: string;
+    statusBg?: string;
+    statusText?: string;
+    background?: string;
+    text?: string;
+    surface?: string;
+    border?: string;
+    textMuted?: string;
+    userBubble?: string;
+    userText?: string;
+    aiBubble?: string;
+    aiText?: string;
+}
+interface ThemeConfig {
+    light?: Partial<ThemeColors>;
+    dark?: Partial<ThemeColors>;
+}
+
 declare global {
     interface AnsyrGlobalStore {
         intent: string | null;
@@ -22,6 +50,8 @@ type AnsyrCtx = {
     showLogo: boolean;
     showAIIcon: boolean;
     showUserIcon: boolean;
+    theme?: ThemeConfig;
+    emptyStateMessage?: string;
 };
 declare const useAnsyrContext: () => AnsyrCtx;
 interface Props {
@@ -37,6 +67,8 @@ interface Props {
     showLogo?: boolean;
     showAIIcon?: boolean;
     showUserIcon?: boolean;
+    theme?: ThemeConfig;
+    emptyStateMessage?: string;
 }
 declare const AnsyrProvider: React__default.FC<Props>;
 
@@ -183,7 +215,7 @@ declare const useCuekit: (options?: {
     sendScreenStatus: typeof sendScreenStatus;
     sendUserCommand: typeof sendUserCommand;
     sendStaticData: typeof sendStaticData;
-    audioContainerRef: React.RefObject<HTMLDivElement>;
+    audioContainerRef: React.RefObject<HTMLDivElement | null>;
 };
 
 interface Position {
@@ -246,6 +278,8 @@ interface ChatPopupProps {
     persistPosition?: boolean;
     persistSize?: boolean;
     storageKey?: string;
+    theme?: ThemeConfig;
+    emptyStateMessage?: string;
 }
 declare const ChatPopup: React__default.FC<ChatPopupProps>;
 
@@ -332,7 +366,7 @@ declare const useWebRTC: (options?: {
     sendScreenStatus: typeof sendScreenStatus;
     sendUserCommand: typeof sendUserCommand;
     sendStaticData: typeof sendStaticData;
-    audioContainerRef: React.RefObject<HTMLDivElement>;
+    audioContainerRef: React.RefObject<HTMLDivElement | null>;
 };
 
 interface WebRTCServerConfig {
@@ -364,13 +398,6 @@ declare const initWebRTCWithDeployedBackend: (apiKey: string, customConfig?: Par
  */
 declare const initWebRTC: (apiKey: string) => WebRTCServerConfig;
 
-type InteractiveElement = {
-    [btnId: string]: string[];
-};
-interface DOMStructurePayload {
-    components: InteractiveElement;
-}
-
 interface ElementAction {
     action_type: 'click' | 'navigate' | 'input' | 'focus' | 'toggle';
     target_element?: string;
@@ -419,4 +446,4 @@ declare function getCurrentPathParams(): Record<string, string>;
  */
 declare function resolveRoutePath(routePath: string, params: Record<string, string>): string;
 
-export { AnsyrProvider, BorderGlow, type Bounds, ChatPopup, type ChatPopupProps, type Props as CuekitProviderProps, type DOMStructurePayload, DraggableResizableContainer, type DraggableResizableContainerProps, type ElementAction, InitCuekit, type InteractiveElement, type Language, LanguageSelector, type LanguageSelectorProps, MicButton, type MicButtonProps, type MicState$1 as MicState, type MuteState, type NavigationCommand, type Position, type ResizeDirection, ResizeHandle, type ResizeHandleProps, ResizeHandles, type ResizeHandlesProps, type ServerConfig, type Size, type TokenRequest, type TokenResponse, VoiceIntensityVisualizer, type WebRTCServerConfig, captureAllInteractiveElements, clearElementCache, configureWebRTCServer, executeAction, generateDynamicId, getCurrentPathParams, getWebRTCServerConfig, initWebRTC, initWebRTCWithDeployedBackend, resolveRoutePath, useAnsyrContext, useCuekit, useDraggableResizableContainer, useWebRTC, validateDynamicElements };
+export { AnsyrProvider, BorderGlow, type Bounds, ChatPopup, type ChatPopupProps, type Props as CuekitProviderProps, type DOMStructurePayload, DraggableResizableContainer, type DraggableResizableContainerProps, type ElementAction, InitCuekit, type InteractiveElement, type Language, LanguageSelector, type LanguageSelectorProps, MicButton, type MicButtonProps, type MicState$1 as MicState, type MuteState, type NavigationCommand, type Position, type ResizeDirection, ResizeHandle, type ResizeHandleProps, ResizeHandles, type ResizeHandlesProps, type ServerConfig, type Size, type ThemeColors, type ThemeConfig, type TokenRequest, type TokenResponse, VoiceIntensityVisualizer, type WebRTCServerConfig, captureAllInteractiveElements, clearElementCache, configureWebRTCServer, executeAction, generateDynamicId, getCurrentPathParams, getWebRTCServerConfig, initWebRTC, initWebRTCWithDeployedBackend, resolveRoutePath, useAnsyrContext, useCuekit, useDraggableResizableContainer, useWebRTC, validateDynamicElements };