@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 +37 -60
- package/dist/index.js +88 -88
- package/dist/index.mjs +88 -88
- package/package.json +1 -1
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
|
-
/*
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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:
|
|
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:
|
|
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
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
|
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
|
-
|
|
42109
|
-
|
|
42110
|
-
|
|
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(
|
|
42406
|
-
|
|
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
|
-
|
|
42418
|
-
|
|
42399
|
+
"data-cuekit-ignore": true,
|
|
42400
|
+
className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
|
|
42401
|
+
style: { ...buttonStyles.container, ...getPositionStyle() }
|
|
42419
42402
|
},
|
|
42420
|
-
"
|
|
42421
|
-
|
|
42422
|
-
|
|
42423
|
-
|
|
42424
|
-
|
|
42425
|
-
|
|
42426
|
-
|
|
42427
|
-
|
|
42428
|
-
|
|
42429
|
-
|
|
42430
|
-
|
|
42431
|
-
|
|
42432
|
-
|
|
42433
|
-
|
|
42434
|
-
|
|
42435
|
-
"
|
|
42436
|
-
|
|
42437
|
-
|
|
42438
|
-
|
|
42439
|
-
|
|
42440
|
-
|
|
42441
|
-
|
|
42442
|
-
|
|
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
|
-
|
|
42446
|
-
|
|
42447
|
-
|
|
42448
|
-
|
|
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
|
-
|
|
42452
|
-
|
|
42453
|
-
|
|
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
|
-
|
|
18140
|
-
|
|
18141
|
-
|
|
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(
|
|
18437
|
-
|
|
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
|
-
|
|
18449
|
-
|
|
18430
|
+
"data-cuekit-ignore": true,
|
|
18431
|
+
className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
|
|
18432
|
+
style: { ...buttonStyles.container, ...getPositionStyle() }
|
|
18450
18433
|
},
|
|
18451
|
-
"
|
|
18452
|
-
|
|
18453
|
-
|
|
18454
|
-
|
|
18455
|
-
|
|
18456
|
-
|
|
18457
|
-
|
|
18458
|
-
|
|
18459
|
-
|
|
18460
|
-
|
|
18461
|
-
|
|
18462
|
-
|
|
18463
|
-
|
|
18464
|
-
|
|
18465
|
-
|
|
18466
|
-
"
|
|
18467
|
-
|
|
18468
|
-
|
|
18469
|
-
|
|
18470
|
-
|
|
18471
|
-
|
|
18472
|
-
|
|
18473
|
-
|
|
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
|
-
|
|
18477
|
-
|
|
18478
|
-
|
|
18479
|
-
|
|
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
|
-
|
|
18483
|
-
|
|
18484
|
-
|
|
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,
|