@cuekit-ai/react 1.6.4 → 1.6.5

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.
package/dist/cuekit.css CHANGED
@@ -26,31 +26,26 @@
26
26
  --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.05);
27
27
  }
28
28
 
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%;
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
- }
29
+ /* Popup theme is controlled only by .cuekit-dark (and JS when defaultTheme is "system"). No @media (prefers-color-scheme) on :root. */
30
+
31
+ .cuekit-voice-popup:not(.cuekit-dark) {
32
+ --voice-bg: 0 0% 100%;
33
+ --voice-surface: 0 0% 100%;
34
+ --voice-border: 214.3 31.8% 91.4%;
35
+ --voice-text: 222.2 84% 4.9%;
36
+ --voice-text-muted: 215.4 16.3% 46.9%;
37
+ --voice-accent: 200 98% 39%;
38
+ --voice-accent-light: 200 98% 95%;
39
+ --voice-user-bubble: 200 98% 39%;
40
+ --voice-user-text: 0 0% 100%;
41
+ --voice-ai-bubble: 0 0% 100%;
42
+ --voice-ai-text: 222.2 84% 4.9%;
43
+ --indicator-bg: 200 98% 39%;
44
+ --voice-placeholder: 215.4 16.3% 46.9%;
45
+ --gradient-primary: linear-gradient(135deg, hsl(200 98% 39%), hsl(200 98% 50%));
46
+ --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 40% 98%));
47
+ --shadow-soft: 0 4px 20px -2px hsl(200 98% 39% / 0.1);
48
+ --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.05);
54
49
  }
55
50
 
56
51
  .cuekit-voice-popup.cuekit-dark {
@@ -549,7 +544,9 @@ input::placeholder {
549
544
  font-size: 12px;
550
545
  font-weight: 500;
551
546
  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);
547
+ box-shadow:
548
+ 0 4px 16px -4px hsl(0 0% 0% / 0.4),
549
+ 0 2px 8px -2px hsl(0 0% 0% / 0.2);
553
550
  max-width: 400px;
554
551
  min-width: 150px;
555
552
  word-wrap: break-word;
@@ -613,7 +610,9 @@ input::placeholder {
613
610
  background: hsl(var(--voice-surface));
614
611
  border: 1px solid hsl(var(--voice-border));
615
612
  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);
613
+ box-shadow:
614
+ 0 10px 40px -10px hsl(0 0% 0% / 0.1),
615
+ 0 4px 20px -2px hsl(var(--voice-accent) / 0.1);
617
616
  overflow: hidden;
618
617
  animation: languageDropdownEnter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
619
618
  min-width: 200px;
@@ -710,23 +709,7 @@ input::placeholder {
710
709
  flex-shrink: 0;
711
710
  }
712
711
 
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
-
712
+ /* Dark theme for language selector: only when popup has .cuekit-dark (no media query) */
730
713
  .cuekit-voice-popup.cuekit-dark .language-selector-button {
731
714
  background: hsl(var(--voice-surface));
732
715
  border-color: hsl(var(--voice-border));
@@ -758,13 +741,17 @@ input::placeholder {
758
741
  background: hsl(var(--voice-surface));
759
742
  border: 1px solid hsl(var(--voice-border));
760
743
  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);
744
+ box-shadow:
745
+ 0 8px 32px -8px hsl(var(--voice-accent) / 0.1),
746
+ 0 4px 16px -4px hsl(0 0% 0% / 0.1);
762
747
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
763
748
  }
764
749
 
765
750
  .voice-chat-main-button:hover {
766
751
  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);
752
+ box-shadow:
753
+ 0 12px 40px -8px hsl(var(--voice-accent) / 0.15),
754
+ 0 6px 20px -4px hsl(0 0% 0% / 0.15);
768
755
  transform: translateY(-2px);
769
756
  }
770
757
 
@@ -785,7 +772,9 @@ input::placeholder {
785
772
  background: hsl(var(--voice-surface));
786
773
  border: 1px solid hsl(var(--voice-border));
787
774
  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);
775
+ box-shadow:
776
+ 0 20px 60px -12px hsl(0 0% 0% / 0.15),
777
+ 0 8px 32px -8px hsl(var(--voice-accent) / 0.1);
789
778
  backdrop-filter: blur(16px);
790
779
  min-width: 280px;
791
780
  animation: voiceChatLanguageEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -879,19 +868,7 @@ input::placeholder {
879
868
  box-shadow: 0 4px 12px -2px hsl(var(--voice-accent) / 0.3);
880
869
  }
881
870
 
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
-
871
+ /* Dark theme for voice chat button: only when popup has .cuekit-dark (no media query) */
895
872
  .cuekit-voice-popup.cuekit-dark .voice-chat-main-button {
896
873
  background: hsl(var(--voice-surface) / 0.8);
897
874
  border-color: hsl(var(--voice-border) / 0.5);
package/dist/index.js CHANGED
@@ -42105,27 +42105,18 @@ var MicButton = ({
42105
42105
  appId
42106
42106
  });
42107
42107
  (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();
42108
+ if (defaultTheme !== "system") {
42109
+ setCurrentTheme(defaultTheme);
42110
+ return;
42128
42111
  }
42112
+ const media = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
42113
+ const applySystemTheme = () => {
42114
+ const isDark = media?.matches ?? false;
42115
+ setCurrentTheme(isDark ? "dark" : "light");
42116
+ };
42117
+ applySystemTheme();
42118
+ media?.addEventListener("change", applySystemTheme);
42119
+ return () => media?.removeEventListener("change", applySystemTheme);
42129
42120
  }, [defaultTheme]);
42130
42121
  const openChat = (0, import_react20.useCallback)(() => {
42131
42122
  setIsChatOpen(true);
@@ -42402,79 +42393,88 @@ var MicButton = ({
42402
42393
  }
42403
42394
  return baseStyle;
42404
42395
  };
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",
42396
+ return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
42397
+ "div",
42416
42398
  {
42417
- className: "voice-chat-cancel-button",
42418
- onClick: () => setShowLanguageSelector(false)
42399
+ "data-cuekit-ignore": true,
42400
+ className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
42401
+ style: { ...buttonStyles.container, ...getPositionStyle() }
42419
42402
  },
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
- }
42403
+ 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(
42404
+ LanguageSelector,
42405
+ {
42406
+ selectedLanguage,
42407
+ onLanguageChange: handleLanguageChange,
42408
+ availableLanguages: DEFAULT_LANGUAGES,
42409
+ className: "voice-chat-language-selector",
42410
+ screenPosition
42411
+ }
42412
+ ), /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-actions" }, /* @__PURE__ */ import_react20.default.createElement(
42413
+ "button",
42414
+ {
42415
+ className: "voice-chat-cancel-button",
42416
+ onClick: () => setShowLanguageSelector(false)
42417
+ },
42418
+ "Cancel"
42419
+ ), /* @__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(
42420
+ LanguageSelector,
42421
+ {
42422
+ selectedLanguage,
42423
+ onLanguageChange: handleLanguageChange,
42424
+ availableLanguages: DEFAULT_LANGUAGES,
42425
+ className: "voice-chat-language-preview",
42426
+ disabled: isConnected2 || micState !== "idle",
42427
+ tooltip: "Close the conversation to change the language",
42428
+ screenPosition
42429
+ }
42430
+ ), /* @__PURE__ */ import_react20.default.createElement(
42431
+ "button",
42432
+ {
42433
+ "data-testid": "ignore",
42434
+ onClick: handleMicClick,
42435
+ disabled: micState === "thinking" || micState === "replying",
42436
+ style: getDynamicButtonStyle(),
42437
+ onMouseEnter: (e3) => {
42438
+ if (micState === "idle") {
42439
+ e3.currentTarget.style.transform = "scale(1.05)";
42440
+ e3.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(59, 130, 246, 0.4)";
42441
+ }
42442
+ },
42443
+ onMouseLeave: (e3) => {
42444
+ if (micState === "idle") {
42445
+ e3.currentTarget.style.transform = "scale(1)";
42446
+ e3.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(59, 130, 246, 0.3)";
42447
+ }
42448
+ },
42449
+ "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
42444
42450
  },
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)";
42451
+ /* @__PURE__ */ import_react20.default.createElement("div", { style: buttonStyles.iconContainer }, getIcon())
42452
+ )),
42453
+ !showLanguageSelector && hasText && text7 && /* @__PURE__ */ import_react20.default.createElement(
42454
+ "div",
42455
+ {
42456
+ style: {
42457
+ fontSize: "12px",
42458
+ color: "hsl(var(--voice-text-muted))",
42459
+ fontWeight: "500",
42460
+ textAlign: "center",
42461
+ background: "hsl(var(--voice-surface) / 0.9)",
42462
+ padding: "4px 8px",
42463
+ borderRadius: "6px",
42464
+ backdropFilter: "blur(8px)",
42465
+ border: "1px solid hsl(var(--voice-accent) / 0.2)",
42466
+ boxShadow: "var(--shadow-soft)",
42467
+ display: "flex",
42468
+ alignItems: "center",
42469
+ justifyContent: "center",
42470
+ gap: "4px",
42471
+ marginTop: "8px",
42472
+ ...textStyle
42449
42473
  }
42450
42474
  },
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(
42475
+ /* @__PURE__ */ import_react20.default.createElement("span", null, text7)
42476
+ )
42477
+ ), /* @__PURE__ */ import_react20.default.createElement(
42478
42478
  ChatPopup,
42479
42479
  {
42480
42480
  isOpen: isChatOpen,
package/dist/index.mjs CHANGED
@@ -18136,27 +18136,18 @@ var MicButton = ({
18136
18136
  appId
18137
18137
  });
18138
18138
  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();
18139
+ if (defaultTheme !== "system") {
18140
+ setCurrentTheme(defaultTheme);
18141
+ return;
18159
18142
  }
18143
+ const media = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
18144
+ const applySystemTheme = () => {
18145
+ const isDark = media?.matches ?? false;
18146
+ setCurrentTheme(isDark ? "dark" : "light");
18147
+ };
18148
+ applySystemTheme();
18149
+ media?.addEventListener("change", applySystemTheme);
18150
+ return () => media?.removeEventListener("change", applySystemTheme);
18160
18151
  }, [defaultTheme]);
18161
18152
  const openChat = useCallback6(() => {
18162
18153
  setIsChatOpen(true);
@@ -18433,79 +18424,88 @@ var MicButton = ({
18433
18424
  }
18434
18425
  return baseStyle;
18435
18426
  };
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",
18427
+ return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
18428
+ "div",
18447
18429
  {
18448
- className: "voice-chat-cancel-button",
18449
- onClick: () => setShowLanguageSelector(false)
18430
+ "data-cuekit-ignore": true,
18431
+ className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
18432
+ style: { ...buttonStyles.container, ...getPositionStyle() }
18450
18433
  },
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
- }
18434
+ 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(
18435
+ LanguageSelector,
18436
+ {
18437
+ selectedLanguage,
18438
+ onLanguageChange: handleLanguageChange,
18439
+ availableLanguages: DEFAULT_LANGUAGES,
18440
+ className: "voice-chat-language-selector",
18441
+ screenPosition
18442
+ }
18443
+ ), /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-actions" }, /* @__PURE__ */ React15.createElement(
18444
+ "button",
18445
+ {
18446
+ className: "voice-chat-cancel-button",
18447
+ onClick: () => setShowLanguageSelector(false)
18448
+ },
18449
+ "Cancel"
18450
+ ), /* @__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(
18451
+ LanguageSelector,
18452
+ {
18453
+ selectedLanguage,
18454
+ onLanguageChange: handleLanguageChange,
18455
+ availableLanguages: DEFAULT_LANGUAGES,
18456
+ className: "voice-chat-language-preview",
18457
+ disabled: isConnected || micState !== "idle",
18458
+ tooltip: "Close the conversation to change the language",
18459
+ screenPosition
18460
+ }
18461
+ ), /* @__PURE__ */ React15.createElement(
18462
+ "button",
18463
+ {
18464
+ "data-testid": "ignore",
18465
+ onClick: handleMicClick,
18466
+ disabled: micState === "thinking" || micState === "replying",
18467
+ style: getDynamicButtonStyle(),
18468
+ onMouseEnter: (e2) => {
18469
+ if (micState === "idle") {
18470
+ e2.currentTarget.style.transform = "scale(1.05)";
18471
+ e2.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(59, 130, 246, 0.4)";
18472
+ }
18473
+ },
18474
+ onMouseLeave: (e2) => {
18475
+ if (micState === "idle") {
18476
+ e2.currentTarget.style.transform = "scale(1)";
18477
+ e2.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(59, 130, 246, 0.3)";
18478
+ }
18479
+ },
18480
+ "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
18475
18481
  },
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)";
18482
+ /* @__PURE__ */ React15.createElement("div", { style: buttonStyles.iconContainer }, getIcon())
18483
+ )),
18484
+ !showLanguageSelector && hasText && text7 && /* @__PURE__ */ React15.createElement(
18485
+ "div",
18486
+ {
18487
+ style: {
18488
+ fontSize: "12px",
18489
+ color: "hsl(var(--voice-text-muted))",
18490
+ fontWeight: "500",
18491
+ textAlign: "center",
18492
+ background: "hsl(var(--voice-surface) / 0.9)",
18493
+ padding: "4px 8px",
18494
+ borderRadius: "6px",
18495
+ backdropFilter: "blur(8px)",
18496
+ border: "1px solid hsl(var(--voice-accent) / 0.2)",
18497
+ boxShadow: "var(--shadow-soft)",
18498
+ display: "flex",
18499
+ alignItems: "center",
18500
+ justifyContent: "center",
18501
+ gap: "4px",
18502
+ marginTop: "8px",
18503
+ ...textStyle
18480
18504
  }
18481
18505
  },
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(
18506
+ /* @__PURE__ */ React15.createElement("span", null, text7)
18507
+ )
18508
+ ), /* @__PURE__ */ React15.createElement(
18509
18509
  ChatPopup,
18510
18510
  {
18511
18511
  isOpen: isChatOpen,
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.5",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "exports": {