@cuekit-ai/react 1.6.4 → 1.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/{chunk-WBAYQSGF.mjs → chunk-JVYSFKMO.mjs} +10 -2
  2. package/dist/cuekit.css +81 -87
  3. package/dist/index.d.mts +1 -0
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.js +126 -112
  6. package/dist/index.mjs +118 -112
  7. package/dist/{webrtc-service-CJ34OHJN.mjs → webrtc-service-KN5SEJKS.mjs} +1 -1
  8. package/package.json +1 -1
package/dist/{chunk-WBAYQSGF.mjs → chunk-JVYSFKMO.mjs} RENAMED
@@ -23658,6 +23658,14 @@ function findDOMElementById(elementId) {
23658
23658
  }
23659
23659
 
23660
23660
  // src/utils/webrtc-service.ts
23661
+ function normalizeToNavigationCommand(message) {
23662
+ if (!message || typeof message !== "object") return message;
23663
+ if (message.type === "ai_intent" && message.data != null) return message;
23664
+ if ("actionType" in message && typeof message.actionType === "string") {
23665
+ return { type: "ai_intent", data: message };
23666
+ }
23667
+ return message;
23668
+ }
23661
23669
  var room = null;
23662
23670
  var reconnectTimeout = null;
23663
23671
  var serverUrl = WEBRTC_BACKEND_SERVER_URL || "https://api-webrtc.ansyr.ai";
@@ -23787,7 +23795,7 @@ function setupEventListeners() {
23787
23795
  try {
23788
23796
  const message = JSON.parse(jsonPart);
23789
23797
  console.log("\u{1F4E1} WebRTC Parsed JSON message:", message);
23790
- callbacks.onNavigationCommand?.(message);
23798
+ callbacks.onNavigationCommand?.(normalizeToNavigationCommand(message));
23791
23799
  } catch (error) {
23792
23800
  console.log("\u{1F4E1} WebRTC JSON parse error for JSON part:", error, "JSON part:", jsonPart);
23793
23801
  }
@@ -23796,7 +23804,7 @@ function setupEventListeners() {
23796
23804
  try {
23797
23805
  const message = JSON.parse(decodedPayload);
23798
23806
  console.log("\u{1F4E1} WebRTC Parsed message:", message);
23799
- callbacks.onNavigationCommand?.(message);
23807
+ callbacks.onNavigationCommand?.(normalizeToNavigationCommand(message));
23800
23808
  } catch (error) {
23801
23809
  console.log("\u{1F4E1} WebRTC JSON parse error:", error, "Raw payload:", decodedPayload);
23802
23810
  const message = decodedPayload;
package/dist/cuekit.css CHANGED
@@ -2,79 +2,91 @@
2
2
 
3
3
  /* Global CSS Variables for CueKit */
4
4
  :root {
5
- /* Light theme (default) */
5
+ /* Custom Color Palette - Purple */
6
+ --color-primary-25: #fafaff;
7
+ --color-primary-50: #f6f5ff;
8
+ --color-primary-100: #ecebff;
9
+ --color-primary-200: #dad7fe;
10
+ --color-primary-300: #c0bbfb;
11
+ --color-primary-400: #9a92f6;
12
+ --color-primary-500: #8177ed;
13
+ --color-primary-600: #6257d9;
14
+ --color-primary-700: #5447cd;
15
+ --color-primary-800: #42389e;
16
+ --color-primary-900: #38307d;
17
+ --color-primary-950: #241c5f;
18
+
19
+ /* Light theme (default) - Purple */
6
20
  --voice-bg: 0 0% 100%;
7
21
  --voice-surface: 0 0% 100%;
8
- --voice-border: 214.3 31.8% 91.4%;
22
+ --voice-border: 252 31% 91%;
9
23
  --voice-text: 222.2 84% 4.9%;
10
- --voice-text-muted: 215.4 16.3% 46.9%;
11
- --voice-accent: 200 98% 39%;
12
- --voice-accent-light: 200 98% 95%;
13
- --voice-user-bubble: 200 98% 39%;
24
+ --voice-text-muted: 252 16% 47%;
25
+ --voice-accent: 252 81% 60%;
26
+ --voice-accent-light: 252 100% 96%;
27
+ --voice-user-bubble: 252 81% 60%;
14
28
  --voice-user-text: 0 0% 100%;
15
29
  --voice-ai-bubble: 0 0% 100%;
16
30
  --voice-ai-text: 222.2 84% 4.9%;
17
- --indicator-bg: 200 98% 39%;
18
- --voice-placeholder: 215.4 16.3% 46.9%;
31
+ --indicator-bg: 252 81% 60%;
32
+ --voice-placeholder: 252 16% 47%;
19
33
 
20
- /* Gradients Light */
21
- --gradient-primary: linear-gradient(135deg, hsl(200 98% 39%), hsl(200 98% 50%));
22
- --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 40% 98%));
34
+ /* Gradients Light - Purple */
35
+ --gradient-primary: linear-gradient(135deg, hsl(252 81% 60%), hsl(252 88% 70%));
36
+ --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(252 40% 98%));
37
+ --gradient-mic-button: radial-gradient(circle at 50% 0%, hsl(252 88% 77%), hsl(252 66% 59%));
23
38
 
24
39
  /* Shadows Light */
25
- --shadow-soft: 0 4px 20px -2px hsl(200 98% 39% / 0.1);
40
+ --shadow-soft: 0 4px 20px -2px hsl(252 81% 60% / 0.1);
26
41
  --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.05);
27
42
  }
28
43
 
29
- /* Dark theme variables */
30
- @media (prefers-color-scheme: dark) {
31
- :root {
32
- --voice-bg: 211 32% 11%;
33
- --voice-surface: 217.2 32.6% 17.5%;
34
- --voice-border: 217.2 32.6% 17.5%;
35
- --voice-text: 210 40% 98%;
36
- --voice-text-muted: 215 20.2% 65.1%;
37
- --voice-accent: 200 98% 60%;
38
- --voice-accent-light: 200 98% 20%;
39
- --voice-user-bubble: 200.12 80.39% 60%;
40
- --voice-user-text: 0 0% 100%;
41
- --voice-ai-bubble: 200.57 32.71% 20.98%;
42
- --voice-ai-text: 0 0% 100%;
43
- --indicator-bg: 200.12 80.39% 60%;
44
- --voice-placeholder: 215 20.2% 65.1%;
44
+ /* Popup theme is controlled only by .cuekit-dark (and JS when defaultTheme is "system"). No @media (prefers-color-scheme) on :root. */
45
45
 
46
- /* Gradients Dark */
47
- --gradient-primary: linear-gradient(135deg, hsl(200 98% 60%), hsl(200 98% 70%));
48
- --gradient-surface: linear-gradient(180deg, hsl(217.2 32.6% 17.5%), hsl(211 32% 11%));
49
-
50
- /* Shadows Dark */
51
- --shadow-soft: 0 4px 20px -2px hsl(200 98% 60% / 0.2);
52
- --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.3);
53
- }
46
+ .cuekit-voice-popup:not(.cuekit-dark) {
47
+ --voice-bg: 0 0% 100%;
48
+ --voice-surface: 0 0% 100%;
49
+ --voice-border: 252 31% 91%;
50
+ --voice-text: 222.2 84% 4.9%;
51
+ --voice-text-muted: 252 16% 47%;
52
+ --voice-accent: 252 81% 60%;
53
+ --voice-accent-light: 252 100% 96%;
54
+ --voice-user-bubble: 252 81% 60%;
55
+ --voice-user-text: 0 0% 100%;
56
+ --voice-ai-bubble: 0 0% 100%;
57
+ --voice-ai-text: 222.2 84% 4.9%;
58
+ --indicator-bg: 252 81% 60%;
59
+ --voice-placeholder: 252 16% 47%;
60
+ --gradient-primary: linear-gradient(135deg, hsl(252 81% 60%), hsl(252 88% 70%));
61
+ --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(252 40% 98%));
62
+ --gradient-mic-button: radial-gradient(circle at 50% 0%, hsl(252 88% 77%), hsl(252 66% 59%));
63
+ --shadow-soft: 0 4px 20px -2px hsl(252 81% 60% / 0.1);
64
+ --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.05);
54
65
  }
55
66
 
56
67
  .cuekit-voice-popup.cuekit-dark {
57
- /* Dark theme */
58
- --voice-bg: 211 32% 11%;
59
- --voice-surface: 217.2 32.6% 17.5%;
60
- --voice-border: 217.2 32.6% 17.5%;
61
- --voice-text: 210 40% 98%;
62
- --voice-text-muted: 215 20.2% 65.1%;
63
- --voice-accent: 200 98% 60%;
64
- --voice-accent-light: 200 98% 20%;
65
- --voice-user-bubble: 200.12 80.39% 60%;
68
+ /* Dark theme - Purple */
69
+ --voice-bg: 248 35% 11%;
70
+ --voice-surface: 248 32% 17.5%;
71
+ --voice-border: 248 32% 22%;
72
+ --voice-text: 252 40% 98%;
73
+ --voice-text-muted: 252 20% 65%;
74
+ --voice-accent: 252 88% 70%;
75
+ --voice-accent-light: 252 47% 25%;
76
+ --voice-user-bubble: 252 88% 70%;
66
77
  --voice-user-text: 0 0% 100%;
67
- --voice-ai-bubble: 200.57 32.71% 20.98%;
78
+ --voice-ai-bubble: 252 32% 21%;
68
79
  --voice-ai-text: 0 0% 100%;
69
- --indicator-bg: 200.12 80.39% 60%;
70
- --voice-placeholder: 215 20.2% 65.1%;
80
+ --indicator-bg: 252 88% 70%;
81
+ --voice-placeholder: 252 20% 65%;
71
82
 
72
- /* Gradients Dark */
73
- --gradient-primary: linear-gradient(135deg, hsl(200 98% 60%), hsl(200 98% 70%));
74
- --gradient-surface: linear-gradient(180deg, hsl(217.2 32.6% 17.5%), hsl(211 32% 11%));
83
+ /* Gradients Dark - Purple */
84
+ --gradient-primary: linear-gradient(135deg, hsl(252 88% 70%), hsl(252 88% 77%));
85
+ --gradient-surface: linear-gradient(180deg, hsl(248 32% 17.5%), hsl(248 35% 11%));
86
+ --gradient-mic-button: radial-gradient(circle at 50% 0%, hsl(252 88% 77%), hsl(252 59% 54%));
75
87
 
76
88
  /* Shadows Dark */
77
- --shadow-soft: 0 4px 20px -2px hsl(200 98% 60% / 0.2);
89
+ --shadow-soft: 0 4px 20px -2px hsl(252 88% 70% / 0.2);
78
90
  --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.3);
79
91
  }
80
92
 
@@ -549,7 +561,9 @@ input::placeholder {
549
561
  font-size: 12px;
550
562
  font-weight: 500;
551
563
  white-space: normal;
552
- box-shadow: 0 4px 16px -4px hsl(0 0% 0% / 0.4), 0 2px 8px -2px hsl(0 0% 0% / 0.2);
564
+ box-shadow:
565
+ 0 4px 16px -4px hsl(0 0% 0% / 0.4),
566
+ 0 2px 8px -2px hsl(0 0% 0% / 0.2);
553
567
  max-width: 400px;
554
568
  min-width: 150px;
555
569
  word-wrap: break-word;
@@ -613,7 +627,9 @@ input::placeholder {
613
627
  background: hsl(var(--voice-surface));
614
628
  border: 1px solid hsl(var(--voice-border));
615
629
  border-radius: 12px;
616
- box-shadow: 0 10px 40px -10px hsl(0 0% 0% / 0.1), 0 4px 20px -2px hsl(var(--voice-accent) / 0.1);
630
+ box-shadow:
631
+ 0 10px 40px -10px hsl(0 0% 0% / 0.1),
632
+ 0 4px 20px -2px hsl(var(--voice-accent) / 0.1);
617
633
  overflow: hidden;
618
634
  animation: languageDropdownEnter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
619
635
  min-width: 200px;
@@ -710,23 +726,7 @@ input::placeholder {
710
726
  flex-shrink: 0;
711
727
  }
712
728
 
713
- /* Dark theme adjustments for language selector */
714
- @media (prefers-color-scheme: dark) {
715
- .language-selector-button {
716
- background: hsl(var(--voice-surface));
717
- border-color: hsl(var(--voice-border));
718
- }
719
-
720
- .language-selector-button:hover:not(.disabled) {
721
- background: hsl(var(--voice-accent-light));
722
- }
723
-
724
- .language-dropdown {
725
- background: hsl(var(--voice-surface));
726
- border-color: hsl(var(--voice-border));
727
- }
728
- }
729
-
729
+ /* Dark theme for language selector: only when popup has .cuekit-dark (no media query) */
730
730
  .cuekit-voice-popup.cuekit-dark .language-selector-button {
731
731
  background: hsl(var(--voice-surface));
732
732
  border-color: hsl(var(--voice-border));
@@ -758,13 +758,17 @@ input::placeholder {
758
758
  background: hsl(var(--voice-surface));
759
759
  border: 1px solid hsl(var(--voice-border));
760
760
  border-radius: 32px;
761
- box-shadow: 0 8px 32px -8px hsl(var(--voice-accent) / 0.1), 0 4px 16px -4px hsl(0 0% 0% / 0.1);
761
+ box-shadow:
762
+ 0 8px 32px -8px hsl(var(--voice-accent) / 0.1),
763
+ 0 4px 16px -4px hsl(0 0% 0% / 0.1);
762
764
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
763
765
  }
764
766
 
765
767
  .voice-chat-main-button:hover {
766
768
  border-color: hsl(var(--voice-border));
767
- box-shadow: 0 12px 40px -8px hsl(var(--voice-accent) / 0.15), 0 6px 20px -4px hsl(0 0% 0% / 0.15);
769
+ box-shadow:
770
+ 0 12px 40px -8px hsl(var(--voice-accent) / 0.15),
771
+ 0 6px 20px -4px hsl(0 0% 0% / 0.15);
768
772
  transform: translateY(-2px);
769
773
  }
770
774
 
@@ -785,7 +789,9 @@ input::placeholder {
785
789
  background: hsl(var(--voice-surface));
786
790
  border: 1px solid hsl(var(--voice-border));
787
791
  border-radius: 16px;
788
- box-shadow: 0 20px 60px -12px hsl(0 0% 0% / 0.15), 0 8px 32px -8px hsl(var(--voice-accent) / 0.1);
792
+ box-shadow:
793
+ 0 20px 60px -12px hsl(0 0% 0% / 0.15),
794
+ 0 8px 32px -8px hsl(var(--voice-accent) / 0.1);
789
795
  backdrop-filter: blur(16px);
790
796
  min-width: 280px;
791
797
  animation: voiceChatLanguageEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -879,19 +885,7 @@ input::placeholder {
879
885
  box-shadow: 0 4px 12px -2px hsl(var(--voice-accent) / 0.3);
880
886
  }
881
887
 
882
- /* Dark theme adjustments for voice chat button */
883
- @media (prefers-color-scheme: dark) {
884
- .voice-chat-main-button {
885
- background: hsl(var(--voice-surface) / 0.8);
886
- border-color: hsl(var(--voice-border) / 0.5);
887
- }
888
-
889
- .voice-chat-language-selection {
890
- background: hsl(var(--voice-surface));
891
- border-color: hsl(var(--voice-border));
892
- }
893
- }
894
-
888
+ /* Dark theme for voice chat button: only when popup has .cuekit-dark (no media query) */
895
889
  .cuekit-voice-popup.cuekit-dark .voice-chat-main-button {
896
890
  background: hsl(var(--voice-surface) / 0.8);
897
891
  border-color: hsl(var(--voice-border) / 0.5);
package/dist/index.d.mts CHANGED
@@ -85,6 +85,7 @@ type MicButtonProps = {
85
85
  language?: Language;
86
86
  defaultLanguage?: Language;
87
87
  onLanguageChange?: (language: Language) => void;
88
+ showLanguageDropdown?: boolean;
88
89
  };
89
90
 
90
91
  declare const MicButton: React__default.FC<MicButtonProps>;
package/dist/index.d.ts CHANGED
@@ -85,6 +85,7 @@ type MicButtonProps = {
85
85
  language?: Language;
86
86
  defaultLanguage?: Language;
87
87
  onLanguageChange?: (language: Language) => void;
88
+ showLanguageDropdown?: boolean;
88
89
  };
89
90
 
90
91
  declare const MicButton: React__default.FC<MicButtonProps>;
package/dist/index.js CHANGED
@@ -23682,6 +23682,14 @@ __export(webrtc_service_exports, {
23682
23682
  setServerUrl: () => setServerUrl,
23683
23683
  setWebRTCCallbacks: () => setWebRTCCallbacks
23684
23684
  });
23685
+ function normalizeToNavigationCommand(message) {
23686
+ if (!message || typeof message !== "object") return message;
23687
+ if (message.type === "ai_intent" && message.data != null) return message;
23688
+ if ("actionType" in message && typeof message.actionType === "string") {
23689
+ return { type: "ai_intent", data: message };
23690
+ }
23691
+ return message;
23692
+ }
23685
23693
  function setServerUrl(url) {
23686
23694
  serverUrl = url;
23687
23695
  }
@@ -23803,7 +23811,7 @@ function setupEventListeners() {
23803
23811
  try {
23804
23812
  const message = JSON.parse(jsonPart);
23805
23813
  console.log("\u{1F4E1} WebRTC Parsed JSON message:", message);
23806
- callbacks.onNavigationCommand?.(message);
23814
+ callbacks.onNavigationCommand?.(normalizeToNavigationCommand(message));
23807
23815
  } catch (error) {
23808
23816
  console.log("\u{1F4E1} WebRTC JSON parse error for JSON part:", error, "JSON part:", jsonPart);
23809
23817
  }
@@ -23812,7 +23820,7 @@ function setupEventListeners() {
23812
23820
  try {
23813
23821
  const message = JSON.parse(decodedPayload);
23814
23822
  console.log("\u{1F4E1} WebRTC Parsed message:", message);
23815
- callbacks.onNavigationCommand?.(message);
23823
+ callbacks.onNavigationCommand?.(normalizeToNavigationCommand(message));
23816
23824
  } catch (error) {
23817
23825
  console.log("\u{1F4E1} WebRTC JSON parse error:", error, "Raw payload:", decodedPayload);
23818
23826
  const message = decodedPayload;
@@ -25250,12 +25258,14 @@ var AnsyrProvider = ({
25250
25258
  Promise.resolve().then(() => (init_webrtc_service(), webrtc_service_exports)).then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
25251
25259
  setWebRTCCallbacks2({
25252
25260
  onNavigationCommand: (command) => {
25253
- if (command.data.actionType === "navigate" && command.data.routeName) {
25261
+ const data = command.data ?? command;
25262
+ if (!data?.actionType) return;
25263
+ if (data.actionType === "navigate" && data.routeName) {
25254
25264
  if (navigationHandler2) {
25255
- navigationHandler2(command.data.routeName);
25265
+ navigationHandler2(data.routeName);
25256
25266
  }
25257
- } else if (command.data.actionType === "click" && command.data.elementId) {
25258
- console.log("AI intent: Click element", command.data.elementId);
25267
+ } else if (data.actionType === "click" && data.elementId) {
25268
+ console.log("AI intent: Click element", data.elementId);
25259
25269
  }
25260
25270
  },
25261
25271
  onConnectionStateChange: (state) => {
@@ -39849,7 +39859,7 @@ var BorderGlow = ({ isActive }) => {
39849
39859
  right: 0,
39850
39860
  bottom: 0,
39851
39861
  width: "4px",
39852
- background: "linear-gradient(to bottom, #06b6d4, #3b82f6, #2563eb)",
39862
+ background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
39853
39863
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
39854
39864
  opacity: 0.8
39855
39865
  },
@@ -39859,7 +39869,7 @@ var BorderGlow = ({ isActive }) => {
39859
39869
  right: 0,
39860
39870
  bottom: 0,
39861
39871
  width: "8px",
39862
- background: "linear-gradient(to bottom, #22d3ee, #3b82f6, #3b82f6)",
39872
+ background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
39863
39873
  filter: "blur(4px)",
39864
39874
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
39865
39875
  opacity: 0.6
@@ -39870,7 +39880,7 @@ var BorderGlow = ({ isActive }) => {
39870
39880
  right: 0,
39871
39881
  bottom: 0,
39872
39882
  width: "16px",
39873
- background: "linear-gradient(to bottom, #67e8f9, #3b82f6, #60a5fa)",
39883
+ background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
39874
39884
  filter: "blur(12px)",
39875
39885
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
39876
39886
  opacity: 0.4
@@ -39881,7 +39891,7 @@ var BorderGlow = ({ isActive }) => {
39881
39891
  left: 0,
39882
39892
  bottom: 0,
39883
39893
  width: "4px",
39884
- background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #2563eb)",
39894
+ background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
39885
39895
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
39886
39896
  opacity: 0.8
39887
39897
  },
@@ -39891,7 +39901,7 @@ var BorderGlow = ({ isActive }) => {
39891
39901
  left: 0,
39892
39902
  bottom: 0,
39893
39903
  width: "8px",
39894
- background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #3b82f6)",
39904
+ background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
39895
39905
  filter: "blur(4px)",
39896
39906
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
39897
39907
  opacity: 0.6
@@ -39902,7 +39912,7 @@ var BorderGlow = ({ isActive }) => {
39902
39912
  left: 0,
39903
39913
  bottom: 0,
39904
39914
  width: "16px",
39905
- background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #60a5fa)",
39915
+ background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
39906
39916
  filter: "blur(12px)",
39907
39917
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
39908
39918
  opacity: 0.4
@@ -39913,7 +39923,7 @@ var BorderGlow = ({ isActive }) => {
39913
39923
  left: 0,
39914
39924
  width: "32px",
39915
39925
  height: "32px",
39916
- background: "#f59e0b",
39926
+ background: "#9a92f6",
39917
39927
  borderBottomRightRadius: "50%",
39918
39928
  filter: "blur(16px)",
39919
39929
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -39925,7 +39935,7 @@ var BorderGlow = ({ isActive }) => {
39925
39935
  right: 0,
39926
39936
  width: "32px",
39927
39937
  height: "32px",
39928
- background: "#06b6d4",
39938
+ background: "#A39EEC",
39929
39939
  borderBottomLeftRadius: "50%",
39930
39940
  filter: "blur(16px)",
39931
39941
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -39937,7 +39947,7 @@ var BorderGlow = ({ isActive }) => {
39937
39947
  right: 0,
39938
39948
  width: "32px",
39939
39949
  height: "32px",
39940
- background: "#3b82f6",
39950
+ background: "#8177ed",
39941
39951
  borderTopLeftRadius: "50%",
39942
39952
  filter: "blur(16px)",
39943
39953
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -39949,7 +39959,7 @@ var BorderGlow = ({ isActive }) => {
39949
39959
  left: 0,
39950
39960
  width: "32px",
39951
39961
  height: "32px",
39952
- background: "#2563eb",
39962
+ background: "#6257d9",
39953
39963
  borderTopRightRadius: "50%",
39954
39964
  filter: "blur(16px)",
39955
39965
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -42055,7 +42065,8 @@ var MicButton = ({
42055
42065
  showBorderGlow = false,
42056
42066
  language,
42057
42067
  defaultLanguage,
42058
- onLanguageChange
42068
+ onLanguageChange,
42069
+ showLanguageDropdown = true
42059
42070
  }) => {
42060
42071
  const { apiKey, appId } = useAnsyrContext();
42061
42072
  const [showBodyGlow, setShowBodyGlow] = (0, import_react20.useState)(false);
@@ -42105,27 +42116,18 @@ var MicButton = ({
42105
42116
  appId
42106
42117
  });
42107
42118
  (0, import_react20.useEffect)(() => {
42108
- const checkTheme = () => {
42109
- if (typeof document !== "undefined") {
42110
- let newTheme;
42111
- if (defaultTheme === "system") {
42112
- const isDark = document.documentElement.classList.contains("dark");
42113
- newTheme = isDark ? "dark" : "light";
42114
- } else {
42115
- newTheme = defaultTheme;
42116
- }
42117
- setCurrentTheme(newTheme);
42118
- }
42119
- };
42120
- checkTheme();
42121
- if (defaultTheme === "system") {
42122
- const observer = new MutationObserver(checkTheme);
42123
- observer.observe(document.documentElement, {
42124
- attributes: true,
42125
- attributeFilter: ["class"]
42126
- });
42127
- return () => observer.disconnect();
42119
+ if (defaultTheme !== "system") {
42120
+ setCurrentTheme(defaultTheme);
42121
+ return;
42128
42122
  }
42123
+ const media = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
42124
+ const applySystemTheme = () => {
42125
+ const isDark = media?.matches ?? false;
42126
+ setCurrentTheme(isDark ? "dark" : "light");
42127
+ };
42128
+ applySystemTheme();
42129
+ media?.addEventListener("change", applySystemTheme);
42130
+ return () => media?.removeEventListener("change", applySystemTheme);
42129
42131
  }, [defaultTheme]);
42130
42132
  const openChat = (0, import_react20.useCallback)(() => {
42131
42133
  setIsChatOpen(true);
@@ -42223,6 +42225,7 @@ var MicButton = ({
42223
42225
  );
42224
42226
  const handleLanguageConfirm = (0, import_react20.useCallback)(() => {
42225
42227
  setShowLanguageSelector(false);
42228
+ openChat();
42226
42229
  voiceConnect(`user_${Date.now()}`, apiKey, appId, selectedLanguage).then(() => {
42227
42230
  if (showBorderGlow) setShowBodyGlow(true);
42228
42231
  openChat();
@@ -42239,10 +42242,11 @@ var MicButton = ({
42239
42242
  }).catch((error) => {
42240
42243
  });
42241
42244
  } else {
42242
- if (!language && !defaultLanguage && !selectedLanguage) {
42245
+ if (showLanguageDropdown && !language && !defaultLanguage && !selectedLanguage) {
42243
42246
  setShowLanguageSelector(true);
42244
42247
  return;
42245
42248
  }
42249
+ openChat();
42246
42250
  voiceConnect(`user_${Date.now()}`, apiKey, appId, selectedLanguage).then(() => {
42247
42251
  if (showBorderGlow) setShowBodyGlow(true);
42248
42252
  openChat();
@@ -42261,6 +42265,7 @@ var MicButton = ({
42261
42265
  appId,
42262
42266
  language,
42263
42267
  selectedLanguage,
42268
+ showLanguageDropdown,
42264
42269
  openChat,
42265
42270
  showBorderGlow,
42266
42271
  sendChatMessage,
@@ -42367,7 +42372,7 @@ var MicButton = ({
42367
42372
  width: `${buttonSize}px`,
42368
42373
  height: `${buttonSize}px`,
42369
42374
  borderRadius: "50%",
42370
- background: "oklch(0.23 0.08 252.75)",
42375
+ background: "var(--gradient-mic-button)",
42371
42376
  transition: "all 0.5s",
42372
42377
  border: "none",
42373
42378
  boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
@@ -42386,95 +42391,104 @@ var MicButton = ({
42386
42391
  switch (micState) {
42387
42392
  case "listening":
42388
42393
  baseStyle.transform = "scale(1.05)";
42389
- baseStyle.boxShadow = "0 25px 50px -12px rgba(59, 130, 246, 0.6)";
42394
+ baseStyle.boxShadow = "0 25px 50px -12px rgba(129, 119, 237, 0.6)";
42390
42395
  break;
42391
42396
  case "thinking":
42392
42397
  baseStyle.transform = "scale(1.02)";
42393
- baseStyle.boxShadow = "0 20px 25px -5px rgba(196, 132, 252, 0.4)";
42398
+ baseStyle.boxShadow = "0 20px 25px -5px rgba(154, 146, 246, 0.4)";
42394
42399
  break;
42395
42400
  case "replying":
42396
42401
  baseStyle.transform = "scale(1.02)";
42397
- baseStyle.boxShadow = "0 20px 25px -5px rgba(34, 211, 238, 0.4)";
42402
+ baseStyle.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
42398
42403
  break;
42399
42404
  default:
42400
- baseStyle.boxShadow = "0 10px 15px -3px rgba(59, 130, 246, 0.3)";
42405
+ baseStyle.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
42401
42406
  break;
42402
42407
  }
42403
42408
  return baseStyle;
42404
42409
  };
42405
- return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("div", { "data-cuekit-ignore": true, style: { ...buttonStyles.container, ...getPositionStyle() } }, showLanguageSelector ? /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-selection" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-header" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-icon" }, /* @__PURE__ */ import_react20.default.createElement(mic_default, { width: 20, height: 20 })), /* @__PURE__ */ import_react20.default.createElement("span", { className: "voice-chat-language-title" }, "Select Language")), /* @__PURE__ */ import_react20.default.createElement(
42406
- LanguageSelector,
42407
- {
42408
- selectedLanguage,
42409
- onLanguageChange: handleLanguageChange,
42410
- availableLanguages: DEFAULT_LANGUAGES,
42411
- className: "voice-chat-language-selector",
42412
- screenPosition
42413
- }
42414
- ), /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-actions" }, /* @__PURE__ */ import_react20.default.createElement(
42415
- "button",
42410
+ return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
42411
+ "div",
42416
42412
  {
42417
- className: "voice-chat-cancel-button",
42418
- onClick: () => setShowLanguageSelector(false)
42413
+ "data-cuekit-ignore": true,
42414
+ className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
42415
+ style: { ...buttonStyles.container, ...getPositionStyle() }
42419
42416
  },
42420
- "Cancel"
42421
- ), /* @__PURE__ */ import_react20.default.createElement("button", { className: "voice-chat-confirm-button", onClick: handleLanguageConfirm }, "Start Voice Chat"))) : /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-main-button" }, /* @__PURE__ */ import_react20.default.createElement(
42422
- LanguageSelector,
42423
- {
42424
- selectedLanguage,
42425
- onLanguageChange: handleLanguageChange,
42426
- availableLanguages: DEFAULT_LANGUAGES,
42427
- className: "voice-chat-language-preview",
42428
- disabled: isConnected2 || micState !== "idle",
42429
- tooltip: "Close the conversation to change the language",
42430
- screenPosition
42431
- }
42432
- ), /* @__PURE__ */ import_react20.default.createElement(
42433
- "button",
42434
- {
42435
- "data-testid": "ignore",
42436
- onClick: handleMicClick,
42437
- disabled: micState === "thinking" || micState === "replying",
42438
- style: getDynamicButtonStyle(),
42439
- onMouseEnter: (e3) => {
42440
- if (micState === "idle") {
42441
- e3.currentTarget.style.transform = "scale(1.05)";
42442
- e3.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(59, 130, 246, 0.4)";
42443
- }
42417
+ showLanguageSelector && showLanguageDropdown ? /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-selection" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-header" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-icon" }, /* @__PURE__ */ import_react20.default.createElement(mic_default, { width: 20, height: 20 })), /* @__PURE__ */ import_react20.default.createElement("span", { className: "voice-chat-language-title" }, "Select Language")), /* @__PURE__ */ import_react20.default.createElement(
42418
+ LanguageSelector,
42419
+ {
42420
+ selectedLanguage,
42421
+ onLanguageChange: handleLanguageChange,
42422
+ availableLanguages: DEFAULT_LANGUAGES,
42423
+ className: "voice-chat-language-selector",
42424
+ screenPosition
42425
+ }
42426
+ ), /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-actions" }, /* @__PURE__ */ import_react20.default.createElement(
42427
+ "button",
42428
+ {
42429
+ className: "voice-chat-cancel-button",
42430
+ onClick: () => setShowLanguageSelector(false)
42444
42431
  },
42445
- onMouseLeave: (e3) => {
42446
- if (micState === "idle") {
42447
- e3.currentTarget.style.transform = "scale(1)";
42448
- e3.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(59, 130, 246, 0.3)";
42432
+ "Cancel"
42433
+ ), /* @__PURE__ */ import_react20.default.createElement("button", { className: "voice-chat-confirm-button", onClick: handleLanguageConfirm }, "Start Voice Chat"))) : /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-main-button" }, showLanguageDropdown && /* @__PURE__ */ import_react20.default.createElement(
42434
+ LanguageSelector,
42435
+ {
42436
+ selectedLanguage,
42437
+ onLanguageChange: handleLanguageChange,
42438
+ availableLanguages: DEFAULT_LANGUAGES,
42439
+ className: "voice-chat-language-preview",
42440
+ disabled: isConnected2 || micState !== "idle",
42441
+ tooltip: "Close the conversation to change the language",
42442
+ screenPosition
42443
+ }
42444
+ ), /* @__PURE__ */ import_react20.default.createElement(
42445
+ "button",
42446
+ {
42447
+ "data-testid": "ignore",
42448
+ onClick: handleMicClick,
42449
+ disabled: micState === "thinking" || micState === "replying" || isConnecting,
42450
+ style: getDynamicButtonStyle(),
42451
+ onMouseEnter: (e3) => {
42452
+ if (micState === "idle") {
42453
+ e3.currentTarget.style.transform = "scale(1.05)";
42454
+ e3.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
42455
+ }
42456
+ },
42457
+ onMouseLeave: (e3) => {
42458
+ if (micState === "idle") {
42459
+ e3.currentTarget.style.transform = "scale(1)";
42460
+ e3.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
42461
+ }
42462
+ },
42463
+ "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
42464
+ },
42465
+ /* @__PURE__ */ import_react20.default.createElement("div", { style: buttonStyles.iconContainer }, getIcon())
42466
+ )),
42467
+ !showLanguageSelector && hasText && text7 && /* @__PURE__ */ import_react20.default.createElement(
42468
+ "div",
42469
+ {
42470
+ style: {
42471
+ fontSize: "12px",
42472
+ color: "hsl(var(--voice-text-muted))",
42473
+ fontWeight: "500",
42474
+ textAlign: "center",
42475
+ background: "hsl(var(--voice-surface) / 0.9)",
42476
+ padding: "4px 8px",
42477
+ borderRadius: "6px",
42478
+ backdropFilter: "blur(8px)",
42479
+ border: "1px solid hsl(var(--voice-accent) / 0.2)",
42480
+ boxShadow: "var(--shadow-soft)",
42481
+ display: "flex",
42482
+ alignItems: "center",
42483
+ justifyContent: "center",
42484
+ gap: "4px",
42485
+ marginTop: "8px",
42486
+ ...textStyle
42449
42487
  }
42450
42488
  },
42451
- "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
42452
- },
42453
- /* @__PURE__ */ import_react20.default.createElement("div", { style: buttonStyles.iconContainer }, getIcon())
42454
- )), !showLanguageSelector && hasText && text7 && /* @__PURE__ */ import_react20.default.createElement(
42455
- "div",
42456
- {
42457
- style: {
42458
- fontSize: "12px",
42459
- color: "hsl(var(--voice-text-muted))",
42460
- fontWeight: "500",
42461
- textAlign: "center",
42462
- background: "hsl(var(--voice-surface) / 0.9)",
42463
- padding: "4px 8px",
42464
- borderRadius: "6px",
42465
- backdropFilter: "blur(8px)",
42466
- border: "1px solid hsl(var(--voice-accent) / 0.2)",
42467
- boxShadow: "var(--shadow-soft)",
42468
- display: "flex",
42469
- alignItems: "center",
42470
- justifyContent: "center",
42471
- gap: "4px",
42472
- marginTop: "8px",
42473
- ...textStyle
42474
- }
42475
- },
42476
- /* @__PURE__ */ import_react20.default.createElement("span", null, text7)
42477
- )), /* @__PURE__ */ import_react20.default.createElement(
42489
+ /* @__PURE__ */ import_react20.default.createElement("span", null, text7)
42490
+ )
42491
+ ), /* @__PURE__ */ import_react20.default.createElement(
42478
42492
  ChatPopup,
42479
42493
  {
42480
42494
  isOpen: isChatOpen,
@@ -42510,7 +42524,7 @@ var MicButton = ({
42510
42524
  onClick: restoreChat,
42511
42525
  style: {
42512
42526
  position: "fixed",
42513
- zIndex: 5e5,
42527
+ zIndex: 999,
42514
42528
  bottom: bottomSpace + buttonSize + 30,
42515
42529
  right: screenPosition === "bottom-right" ? 20 : void 0,
42516
42530
  left: screenPosition === "bottom-left" ? 20 : screenPosition === "bottom-center" ? "50%" : void 0,
package/dist/index.mjs CHANGED
@@ -37,7 +37,7 @@ import {
37
37
  setWebRTCCallbacks,
38
38
  setWebRTCConfig,
39
39
  validateDynamicElements
40
- } from "./chunk-WBAYQSGF.mjs";
40
+ } from "./chunk-JVYSFKMO.mjs";
41
41
 
42
42
  // node_modules/inline-style-parser/index.js
43
43
  var require_inline_style_parser = __commonJS({
@@ -1293,15 +1293,17 @@ var AnsyrProvider = ({
1293
1293
  };
1294
1294
  }, [navigationHandler]);
1295
1295
  useEffect(() => {
1296
- import("./webrtc-service-CJ34OHJN.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
1296
+ import("./webrtc-service-KN5SEJKS.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
1297
1297
  setWebRTCCallbacks2({
1298
1298
  onNavigationCommand: (command) => {
1299
- if (command.data.actionType === "navigate" && command.data.routeName) {
1299
+ const data = command.data ?? command;
1300
+ if (!data?.actionType) return;
1301
+ if (data.actionType === "navigate" && data.routeName) {
1300
1302
  if (navigationHandler) {
1301
- navigationHandler(command.data.routeName);
1303
+ navigationHandler(data.routeName);
1302
1304
  }
1303
- } else if (command.data.actionType === "click" && command.data.elementId) {
1304
- console.log("AI intent: Click element", command.data.elementId);
1305
+ } else if (data.actionType === "click" && data.elementId) {
1306
+ console.log("AI intent: Click element", data.elementId);
1305
1307
  }
1306
1308
  },
1307
1309
  onConnectionStateChange: (state) => {
@@ -15889,7 +15891,7 @@ var BorderGlow = ({ isActive }) => {
15889
15891
  right: 0,
15890
15892
  bottom: 0,
15891
15893
  width: "4px",
15892
- background: "linear-gradient(to bottom, #06b6d4, #3b82f6, #2563eb)",
15894
+ background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
15893
15895
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
15894
15896
  opacity: 0.8
15895
15897
  },
@@ -15899,7 +15901,7 @@ var BorderGlow = ({ isActive }) => {
15899
15901
  right: 0,
15900
15902
  bottom: 0,
15901
15903
  width: "8px",
15902
- background: "linear-gradient(to bottom, #22d3ee, #3b82f6, #3b82f6)",
15904
+ background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
15903
15905
  filter: "blur(4px)",
15904
15906
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
15905
15907
  opacity: 0.6
@@ -15910,7 +15912,7 @@ var BorderGlow = ({ isActive }) => {
15910
15912
  right: 0,
15911
15913
  bottom: 0,
15912
15914
  width: "16px",
15913
- background: "linear-gradient(to bottom, #67e8f9, #3b82f6, #60a5fa)",
15915
+ background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
15914
15916
  filter: "blur(12px)",
15915
15917
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
15916
15918
  opacity: 0.4
@@ -15921,7 +15923,7 @@ var BorderGlow = ({ isActive }) => {
15921
15923
  left: 0,
15922
15924
  bottom: 0,
15923
15925
  width: "4px",
15924
- background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #2563eb)",
15926
+ background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
15925
15927
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
15926
15928
  opacity: 0.8
15927
15929
  },
@@ -15931,7 +15933,7 @@ var BorderGlow = ({ isActive }) => {
15931
15933
  left: 0,
15932
15934
  bottom: 0,
15933
15935
  width: "8px",
15934
- background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #3b82f6)",
15936
+ background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
15935
15937
  filter: "blur(4px)",
15936
15938
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
15937
15939
  opacity: 0.6
@@ -15942,7 +15944,7 @@ var BorderGlow = ({ isActive }) => {
15942
15944
  left: 0,
15943
15945
  bottom: 0,
15944
15946
  width: "16px",
15945
- background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #60a5fa)",
15947
+ background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
15946
15948
  filter: "blur(12px)",
15947
15949
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
15948
15950
  opacity: 0.4
@@ -15953,7 +15955,7 @@ var BorderGlow = ({ isActive }) => {
15953
15955
  left: 0,
15954
15956
  width: "32px",
15955
15957
  height: "32px",
15956
- background: "#f59e0b",
15958
+ background: "#9a92f6",
15957
15959
  borderBottomRightRadius: "50%",
15958
15960
  filter: "blur(16px)",
15959
15961
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -15965,7 +15967,7 @@ var BorderGlow = ({ isActive }) => {
15965
15967
  right: 0,
15966
15968
  width: "32px",
15967
15969
  height: "32px",
15968
- background: "#06b6d4",
15970
+ background: "#A39EEC",
15969
15971
  borderBottomLeftRadius: "50%",
15970
15972
  filter: "blur(16px)",
15971
15973
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -15977,7 +15979,7 @@ var BorderGlow = ({ isActive }) => {
15977
15979
  right: 0,
15978
15980
  width: "32px",
15979
15981
  height: "32px",
15980
- background: "#3b82f6",
15982
+ background: "#8177ed",
15981
15983
  borderTopLeftRadius: "50%",
15982
15984
  filter: "blur(16px)",
15983
15985
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -15989,7 +15991,7 @@ var BorderGlow = ({ isActive }) => {
15989
15991
  left: 0,
15990
15992
  width: "32px",
15991
15993
  height: "32px",
15992
- background: "#2563eb",
15994
+ background: "#6257d9",
15993
15995
  borderTopRightRadius: "50%",
15994
15996
  filter: "blur(16px)",
15995
15997
  animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -18086,7 +18088,8 @@ var MicButton = ({
18086
18088
  showBorderGlow = false,
18087
18089
  language,
18088
18090
  defaultLanguage,
18089
- onLanguageChange
18091
+ onLanguageChange,
18092
+ showLanguageDropdown = true
18090
18093
  }) => {
18091
18094
  const { apiKey, appId } = useAnsyrContext();
18092
18095
  const [showBodyGlow, setShowBodyGlow] = useState12(false);
@@ -18136,27 +18139,18 @@ var MicButton = ({
18136
18139
  appId
18137
18140
  });
18138
18141
  useEffect12(() => {
18139
- const checkTheme = () => {
18140
- if (typeof document !== "undefined") {
18141
- let newTheme;
18142
- if (defaultTheme === "system") {
18143
- const isDark = document.documentElement.classList.contains("dark");
18144
- newTheme = isDark ? "dark" : "light";
18145
- } else {
18146
- newTheme = defaultTheme;
18147
- }
18148
- setCurrentTheme(newTheme);
18149
- }
18150
- };
18151
- checkTheme();
18152
- if (defaultTheme === "system") {
18153
- const observer = new MutationObserver(checkTheme);
18154
- observer.observe(document.documentElement, {
18155
- attributes: true,
18156
- attributeFilter: ["class"]
18157
- });
18158
- return () => observer.disconnect();
18142
+ if (defaultTheme !== "system") {
18143
+ setCurrentTheme(defaultTheme);
18144
+ return;
18159
18145
  }
18146
+ const media = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
18147
+ const applySystemTheme = () => {
18148
+ const isDark = media?.matches ?? false;
18149
+ setCurrentTheme(isDark ? "dark" : "light");
18150
+ };
18151
+ applySystemTheme();
18152
+ media?.addEventListener("change", applySystemTheme);
18153
+ return () => media?.removeEventListener("change", applySystemTheme);
18160
18154
  }, [defaultTheme]);
18161
18155
  const openChat = useCallback6(() => {
18162
18156
  setIsChatOpen(true);
@@ -18254,6 +18248,7 @@ var MicButton = ({
18254
18248
  );
18255
18249
  const handleLanguageConfirm = useCallback6(() => {
18256
18250
  setShowLanguageSelector(false);
18251
+ openChat();
18257
18252
  voiceConnect(`user_${Date.now()}`, apiKey, appId, selectedLanguage).then(() => {
18258
18253
  if (showBorderGlow) setShowBodyGlow(true);
18259
18254
  openChat();
@@ -18270,10 +18265,11 @@ var MicButton = ({
18270
18265
  }).catch((error) => {
18271
18266
  });
18272
18267
  } else {
18273
- if (!language && !defaultLanguage && !selectedLanguage) {
18268
+ if (showLanguageDropdown && !language && !defaultLanguage && !selectedLanguage) {
18274
18269
  setShowLanguageSelector(true);
18275
18270
  return;
18276
18271
  }
18272
+ openChat();
18277
18273
  voiceConnect(`user_${Date.now()}`, apiKey, appId, selectedLanguage).then(() => {
18278
18274
  if (showBorderGlow) setShowBodyGlow(true);
18279
18275
  openChat();
@@ -18292,6 +18288,7 @@ var MicButton = ({
18292
18288
  appId,
18293
18289
  language,
18294
18290
  selectedLanguage,
18291
+ showLanguageDropdown,
18295
18292
  openChat,
18296
18293
  showBorderGlow,
18297
18294
  sendChatMessage,
@@ -18398,7 +18395,7 @@ var MicButton = ({
18398
18395
  width: `${buttonSize}px`,
18399
18396
  height: `${buttonSize}px`,
18400
18397
  borderRadius: "50%",
18401
- background: "oklch(0.23 0.08 252.75)",
18398
+ background: "var(--gradient-mic-button)",
18402
18399
  transition: "all 0.5s",
18403
18400
  border: "none",
18404
18401
  boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
@@ -18417,95 +18414,104 @@ var MicButton = ({
18417
18414
  switch (micState) {
18418
18415
  case "listening":
18419
18416
  baseStyle.transform = "scale(1.05)";
18420
- baseStyle.boxShadow = "0 25px 50px -12px rgba(59, 130, 246, 0.6)";
18417
+ baseStyle.boxShadow = "0 25px 50px -12px rgba(129, 119, 237, 0.6)";
18421
18418
  break;
18422
18419
  case "thinking":
18423
18420
  baseStyle.transform = "scale(1.02)";
18424
- baseStyle.boxShadow = "0 20px 25px -5px rgba(196, 132, 252, 0.4)";
18421
+ baseStyle.boxShadow = "0 20px 25px -5px rgba(154, 146, 246, 0.4)";
18425
18422
  break;
18426
18423
  case "replying":
18427
18424
  baseStyle.transform = "scale(1.02)";
18428
- baseStyle.boxShadow = "0 20px 25px -5px rgba(34, 211, 238, 0.4)";
18425
+ baseStyle.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
18429
18426
  break;
18430
18427
  default:
18431
- baseStyle.boxShadow = "0 10px 15px -3px rgba(59, 130, 246, 0.3)";
18428
+ baseStyle.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
18432
18429
  break;
18433
18430
  }
18434
18431
  return baseStyle;
18435
18432
  };
18436
- return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("div", { "data-cuekit-ignore": true, style: { ...buttonStyles.container, ...getPositionStyle() } }, showLanguageSelector ? /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-selection" }, /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-header" }, /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-icon" }, /* @__PURE__ */ React15.createElement(mic_default, { width: 20, height: 20 })), /* @__PURE__ */ React15.createElement("span", { className: "voice-chat-language-title" }, "Select Language")), /* @__PURE__ */ React15.createElement(
18437
- LanguageSelector,
18438
- {
18439
- selectedLanguage,
18440
- onLanguageChange: handleLanguageChange,
18441
- availableLanguages: DEFAULT_LANGUAGES,
18442
- className: "voice-chat-language-selector",
18443
- screenPosition
18444
- }
18445
- ), /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-actions" }, /* @__PURE__ */ React15.createElement(
18446
- "button",
18433
+ return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
18434
+ "div",
18447
18435
  {
18448
- className: "voice-chat-cancel-button",
18449
- onClick: () => setShowLanguageSelector(false)
18436
+ "data-cuekit-ignore": true,
18437
+ className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
18438
+ style: { ...buttonStyles.container, ...getPositionStyle() }
18450
18439
  },
18451
- "Cancel"
18452
- ), /* @__PURE__ */ React15.createElement("button", { className: "voice-chat-confirm-button", onClick: handleLanguageConfirm }, "Start Voice Chat"))) : /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-main-button" }, /* @__PURE__ */ React15.createElement(
18453
- LanguageSelector,
18454
- {
18455
- selectedLanguage,
18456
- onLanguageChange: handleLanguageChange,
18457
- availableLanguages: DEFAULT_LANGUAGES,
18458
- className: "voice-chat-language-preview",
18459
- disabled: isConnected || micState !== "idle",
18460
- tooltip: "Close the conversation to change the language",
18461
- screenPosition
18462
- }
18463
- ), /* @__PURE__ */ React15.createElement(
18464
- "button",
18465
- {
18466
- "data-testid": "ignore",
18467
- onClick: handleMicClick,
18468
- disabled: micState === "thinking" || micState === "replying",
18469
- style: getDynamicButtonStyle(),
18470
- onMouseEnter: (e2) => {
18471
- if (micState === "idle") {
18472
- e2.currentTarget.style.transform = "scale(1.05)";
18473
- e2.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(59, 130, 246, 0.4)";
18474
- }
18440
+ showLanguageSelector && showLanguageDropdown ? /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-selection" }, /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-header" }, /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-icon" }, /* @__PURE__ */ React15.createElement(mic_default, { width: 20, height: 20 })), /* @__PURE__ */ React15.createElement("span", { className: "voice-chat-language-title" }, "Select Language")), /* @__PURE__ */ React15.createElement(
18441
+ LanguageSelector,
18442
+ {
18443
+ selectedLanguage,
18444
+ onLanguageChange: handleLanguageChange,
18445
+ availableLanguages: DEFAULT_LANGUAGES,
18446
+ className: "voice-chat-language-selector",
18447
+ screenPosition
18448
+ }
18449
+ ), /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-actions" }, /* @__PURE__ */ React15.createElement(
18450
+ "button",
18451
+ {
18452
+ className: "voice-chat-cancel-button",
18453
+ onClick: () => setShowLanguageSelector(false)
18454
+ },
18455
+ "Cancel"
18456
+ ), /* @__PURE__ */ React15.createElement("button", { className: "voice-chat-confirm-button", onClick: handleLanguageConfirm }, "Start Voice Chat"))) : /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-main-button" }, showLanguageDropdown && /* @__PURE__ */ React15.createElement(
18457
+ LanguageSelector,
18458
+ {
18459
+ selectedLanguage,
18460
+ onLanguageChange: handleLanguageChange,
18461
+ availableLanguages: DEFAULT_LANGUAGES,
18462
+ className: "voice-chat-language-preview",
18463
+ disabled: isConnected || micState !== "idle",
18464
+ tooltip: "Close the conversation to change the language",
18465
+ screenPosition
18466
+ }
18467
+ ), /* @__PURE__ */ React15.createElement(
18468
+ "button",
18469
+ {
18470
+ "data-testid": "ignore",
18471
+ onClick: handleMicClick,
18472
+ disabled: micState === "thinking" || micState === "replying" || isConnecting,
18473
+ style: getDynamicButtonStyle(),
18474
+ onMouseEnter: (e2) => {
18475
+ if (micState === "idle") {
18476
+ e2.currentTarget.style.transform = "scale(1.05)";
18477
+ e2.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
18478
+ }
18479
+ },
18480
+ onMouseLeave: (e2) => {
18481
+ if (micState === "idle") {
18482
+ e2.currentTarget.style.transform = "scale(1)";
18483
+ e2.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
18484
+ }
18485
+ },
18486
+ "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
18475
18487
  },
18476
- onMouseLeave: (e2) => {
18477
- if (micState === "idle") {
18478
- e2.currentTarget.style.transform = "scale(1)";
18479
- e2.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(59, 130, 246, 0.3)";
18488
+ /* @__PURE__ */ React15.createElement("div", { style: buttonStyles.iconContainer }, getIcon())
18489
+ )),
18490
+ !showLanguageSelector && hasText && text7 && /* @__PURE__ */ React15.createElement(
18491
+ "div",
18492
+ {
18493
+ style: {
18494
+ fontSize: "12px",
18495
+ color: "hsl(var(--voice-text-muted))",
18496
+ fontWeight: "500",
18497
+ textAlign: "center",
18498
+ background: "hsl(var(--voice-surface) / 0.9)",
18499
+ padding: "4px 8px",
18500
+ borderRadius: "6px",
18501
+ backdropFilter: "blur(8px)",
18502
+ border: "1px solid hsl(var(--voice-accent) / 0.2)",
18503
+ boxShadow: "var(--shadow-soft)",
18504
+ display: "flex",
18505
+ alignItems: "center",
18506
+ justifyContent: "center",
18507
+ gap: "4px",
18508
+ marginTop: "8px",
18509
+ ...textStyle
18480
18510
  }
18481
18511
  },
18482
- "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
18483
- },
18484
- /* @__PURE__ */ React15.createElement("div", { style: buttonStyles.iconContainer }, getIcon())
18485
- )), !showLanguageSelector && hasText && text7 && /* @__PURE__ */ React15.createElement(
18486
- "div",
18487
- {
18488
- style: {
18489
- fontSize: "12px",
18490
- color: "hsl(var(--voice-text-muted))",
18491
- fontWeight: "500",
18492
- textAlign: "center",
18493
- background: "hsl(var(--voice-surface) / 0.9)",
18494
- padding: "4px 8px",
18495
- borderRadius: "6px",
18496
- backdropFilter: "blur(8px)",
18497
- border: "1px solid hsl(var(--voice-accent) / 0.2)",
18498
- boxShadow: "var(--shadow-soft)",
18499
- display: "flex",
18500
- alignItems: "center",
18501
- justifyContent: "center",
18502
- gap: "4px",
18503
- marginTop: "8px",
18504
- ...textStyle
18505
- }
18506
- },
18507
- /* @__PURE__ */ React15.createElement("span", null, text7)
18508
- )), /* @__PURE__ */ React15.createElement(
18512
+ /* @__PURE__ */ React15.createElement("span", null, text7)
18513
+ )
18514
+ ), /* @__PURE__ */ React15.createElement(
18509
18515
  ChatPopup,
18510
18516
  {
18511
18517
  isOpen: isChatOpen,
@@ -18541,7 +18547,7 @@ var MicButton = ({
18541
18547
  onClick: restoreChat,
18542
18548
  style: {
18543
18549
  position: "fixed",
18544
- zIndex: 5e5,
18550
+ zIndex: 999,
18545
18551
  bottom: bottomSpace + buttonSize + 30,
18546
18552
  right: screenPosition === "bottom-right" ? 20 : void 0,
18547
18553
  left: screenPosition === "bottom-left" ? 20 : screenPosition === "bottom-center" ? "50%" : void 0,
package/dist/{webrtc-service-CJ34OHJN.mjs → webrtc-service-KN5SEJKS.mjs} RENAMED
@@ -15,7 +15,7 @@ import {
15
15
  setAudioContainer,
16
16
  setServerUrl,
17
17
  setWebRTCCallbacks
18
- } from "./chunk-WBAYQSGF.mjs";
18
+ } from "./chunk-JVYSFKMO.mjs";
19
19
  export {
20
20
  authenticate,
21
21
  connectToRoom,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cuekit-ai/react",
3
- "version": "1.6.4",
3
+ "version": "1.6.6",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "exports": {