@akropolys/kiku 1.7.11 → 1.7.13
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/index.js +525 -503
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +525 -503
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +77 -7
- package/dist/styles.css.map +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -332,14 +332,45 @@ function renderMarkdown(content, streaming = false) {
|
|
|
332
332
|
return /* @__PURE__ */ jsx2(Fragment2, { children: elements });
|
|
333
333
|
}
|
|
334
334
|
|
|
335
|
+
// src/utils/icons.tsx
|
|
336
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
337
|
+
var ArrowUpIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
338
|
+
/* @__PURE__ */ jsx3("path", { d: "m5 12 7-7 7 7" }),
|
|
339
|
+
/* @__PURE__ */ jsx3("path", { d: "M12 19V5" })
|
|
340
|
+
] });
|
|
341
|
+
|
|
342
|
+
// src/utils/theme.ts
|
|
343
|
+
function resolveTheme(theme) {
|
|
344
|
+
if (typeof theme === "string") {
|
|
345
|
+
return { themeAttr: theme, vars: void 0 };
|
|
346
|
+
}
|
|
347
|
+
if (!theme) {
|
|
348
|
+
return { themeAttr: void 0, vars: void 0 };
|
|
349
|
+
}
|
|
350
|
+
const vars = {};
|
|
351
|
+
if (theme.primaryColor) vars["--hsk-primary"] = theme.primaryColor;
|
|
352
|
+
if (theme.backgroundColor) {
|
|
353
|
+
vars["--hsk-bg"] = theme.backgroundColor;
|
|
354
|
+
vars["--hsk-chat-bg"] = theme.backgroundColor;
|
|
355
|
+
}
|
|
356
|
+
if (theme.textColor) {
|
|
357
|
+
vars["--hsk-text"] = theme.textColor;
|
|
358
|
+
vars["--hsk-chat-text"] = theme.textColor;
|
|
359
|
+
}
|
|
360
|
+
if (theme.fontFamily) vars["--hsk-font"] = theme.fontFamily;
|
|
361
|
+
if (theme.fontSize) vars["--hsk-font-size"] = theme.fontSize;
|
|
362
|
+
if (theme.borderRadius) vars["--hsk-border-radius"] = theme.borderRadius;
|
|
363
|
+
return { themeAttr: void 0, vars };
|
|
364
|
+
}
|
|
365
|
+
|
|
335
366
|
// src/components/VoiceButton.tsx
|
|
336
367
|
import { useState as useState2, useRef as useRef2, useCallback } from "react";
|
|
337
|
-
import { jsx as
|
|
338
|
-
var MicIcon = ({ active }) => /* @__PURE__ */
|
|
339
|
-
/* @__PURE__ */
|
|
340
|
-
/* @__PURE__ */
|
|
341
|
-
/* @__PURE__ */
|
|
342
|
-
/* @__PURE__ */
|
|
368
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
369
|
+
var MicIcon = ({ active }) => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
370
|
+
/* @__PURE__ */ jsx4("rect", { x: "9", y: "2", width: "6", height: "11", rx: "3", fill: active ? "currentColor" : "none" }),
|
|
371
|
+
/* @__PURE__ */ jsx4("path", { d: "M5 10a7 7 0 0 0 14 0" }),
|
|
372
|
+
/* @__PURE__ */ jsx4("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
|
|
373
|
+
/* @__PURE__ */ jsx4("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
|
|
343
374
|
] });
|
|
344
375
|
function VoiceButton({
|
|
345
376
|
onTranscript,
|
|
@@ -380,7 +411,7 @@ function VoiceButton({
|
|
|
380
411
|
setListening(false);
|
|
381
412
|
}, []);
|
|
382
413
|
if (!isSupported) return null;
|
|
383
|
-
return /* @__PURE__ */
|
|
414
|
+
return /* @__PURE__ */ jsxs3(
|
|
384
415
|
"button",
|
|
385
416
|
{
|
|
386
417
|
type: "button",
|
|
@@ -390,8 +421,8 @@ function VoiceButton({
|
|
|
390
421
|
title: listening ? "Stop listening" : "Speak your search",
|
|
391
422
|
"aria-label": listening ? "Stop voice input" : "Start voice input",
|
|
392
423
|
children: [
|
|
393
|
-
/* @__PURE__ */
|
|
394
|
-
listening && /* @__PURE__ */
|
|
424
|
+
/* @__PURE__ */ jsx4(MicIcon, { active: listening }),
|
|
425
|
+
listening && /* @__PURE__ */ jsx4("span", { className: "kiku-voice-ripple", "aria-hidden": "true" })
|
|
395
426
|
]
|
|
396
427
|
}
|
|
397
428
|
);
|
|
@@ -400,12 +431,12 @@ function VoiceButton({
|
|
|
400
431
|
// src/components/VisualSearch.tsx
|
|
401
432
|
import { useRef as useRef3, useState as useState3 } from "react";
|
|
402
433
|
import { useAkropolysContext as useAkropolysContext2 } from "@akropolys/sdk";
|
|
403
|
-
import { jsx as
|
|
404
|
-
var CameraIcon = () => /* @__PURE__ */
|
|
405
|
-
/* @__PURE__ */
|
|
406
|
-
/* @__PURE__ */
|
|
434
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
435
|
+
var CameraIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
436
|
+
/* @__PURE__ */ jsx5("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
|
|
437
|
+
/* @__PURE__ */ jsx5("circle", { cx: "12", cy: "13", r: "4" })
|
|
407
438
|
] });
|
|
408
|
-
var SpinnerIcon = () => /* @__PURE__ */
|
|
439
|
+
var SpinnerIcon = () => /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "kiku-vs-spin", children: /* @__PURE__ */ jsx5("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
|
|
409
440
|
function fileToBase64(file) {
|
|
410
441
|
return new Promise((resolve, reject) => {
|
|
411
442
|
const reader = new FileReader();
|
|
@@ -438,7 +469,7 @@ function VisualSearch({
|
|
|
438
469
|
if (inputRef.current) inputRef.current.value = "";
|
|
439
470
|
}
|
|
440
471
|
};
|
|
441
|
-
return /* @__PURE__ */
|
|
472
|
+
return /* @__PURE__ */ jsxs4(
|
|
442
473
|
"label",
|
|
443
474
|
{
|
|
444
475
|
className: `kiku-vs-btn${loading ? " kiku-vs-btn--loading" : ""} ${className}`,
|
|
@@ -446,7 +477,7 @@ function VisualSearch({
|
|
|
446
477
|
"aria-label": "Search by uploading a photo",
|
|
447
478
|
style: { cursor: disabled || loading ? "not-allowed" : "pointer" },
|
|
448
479
|
children: [
|
|
449
|
-
/* @__PURE__ */
|
|
480
|
+
/* @__PURE__ */ jsx5(
|
|
450
481
|
"input",
|
|
451
482
|
{
|
|
452
483
|
ref: inputRef,
|
|
@@ -458,36 +489,32 @@ function VisualSearch({
|
|
|
458
489
|
hidden: true
|
|
459
490
|
}
|
|
460
491
|
),
|
|
461
|
-
loading ? /* @__PURE__ */
|
|
492
|
+
loading ? /* @__PURE__ */ jsx5(SpinnerIcon, {}) : /* @__PURE__ */ jsx5(CameraIcon, {})
|
|
462
493
|
]
|
|
463
494
|
}
|
|
464
495
|
);
|
|
465
496
|
}
|
|
466
497
|
|
|
467
498
|
// src/components/ChatWidget.tsx
|
|
468
|
-
import { jsx as
|
|
469
|
-
var SparkleIcon = () => /* @__PURE__ */
|
|
470
|
-
var ArrowUpIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
471
|
-
/* @__PURE__ */ jsx5("path", { d: "m5 12 7-7 7 7" }),
|
|
472
|
-
/* @__PURE__ */ jsx5("path", { d: "M12 19V5" })
|
|
473
|
-
] });
|
|
499
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
500
|
+
var SparkleIcon = () => /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
|
|
474
501
|
function SourceCard({
|
|
475
502
|
source,
|
|
476
503
|
defaultCurrency,
|
|
477
504
|
onSelect,
|
|
478
505
|
isReferenced
|
|
479
506
|
}) {
|
|
480
|
-
return /* @__PURE__ */
|
|
507
|
+
return /* @__PURE__ */ jsxs5(
|
|
481
508
|
"div",
|
|
482
509
|
{
|
|
483
510
|
className: cn("hsk-source-card", isReferenced && "hsk-source-card--referenced"),
|
|
484
511
|
onClick: () => onSelect?.(source),
|
|
485
512
|
children: [
|
|
486
|
-
source.image && /* @__PURE__ */
|
|
487
|
-
/* @__PURE__ */
|
|
488
|
-
isReferenced && /* @__PURE__ */
|
|
489
|
-
/* @__PURE__ */
|
|
490
|
-
source.price && /* @__PURE__ */
|
|
513
|
+
source.image && /* @__PURE__ */ jsx6("img", { src: source.image, alt: source.name, className: "hsk-source-img" }),
|
|
514
|
+
/* @__PURE__ */ jsxs5("div", { style: { flex: 1, minWidth: 0, position: "relative" }, children: [
|
|
515
|
+
isReferenced && /* @__PURE__ */ jsx6("div", { className: "hsk-cb-source-ref-badge", title: "Featured in response", style: { top: "0", right: "0" }, children: /* @__PURE__ */ jsx6(SparkleIcon, {}) }),
|
|
516
|
+
/* @__PURE__ */ jsx6("div", { className: "hsk-source-name", style: { paddingRight: isReferenced ? "20px" : void 0 }, children: source.name }),
|
|
517
|
+
source.price && /* @__PURE__ */ jsxs5("div", { className: "hsk-source-price", children: [
|
|
491
518
|
source.currency ?? defaultCurrency,
|
|
492
519
|
" ",
|
|
493
520
|
source.price
|
|
@@ -624,42 +651,49 @@ I couldn't find any matching products in the store.`;
|
|
|
624
651
|
};
|
|
625
652
|
setChatHistory((prev) => [...prev, userMsg, assistantMsg]);
|
|
626
653
|
};
|
|
627
|
-
const customStyles =
|
|
628
|
-
|
|
629
|
-
...theme?.backgroundColor && { "--hsk-bg": theme.backgroundColor },
|
|
630
|
-
...theme?.textColor && { "--hsk-text": theme.textColor },
|
|
631
|
-
...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
|
|
632
|
-
...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
|
|
633
|
-
};
|
|
634
|
-
return /* @__PURE__ */ jsxs4(
|
|
654
|
+
const { vars: customStyles } = resolveTheme(theme);
|
|
655
|
+
return /* @__PURE__ */ jsxs5(
|
|
635
656
|
"div",
|
|
636
657
|
{
|
|
637
658
|
className: cn("hsk-chat-widget", classNames.root, className),
|
|
638
659
|
style: customStyles,
|
|
639
660
|
children: [
|
|
640
|
-
/* @__PURE__ */
|
|
641
|
-
/* @__PURE__ */
|
|
642
|
-
/* @__PURE__ */
|
|
643
|
-
/* @__PURE__ */
|
|
644
|
-
chatHistory.length > 0 && /* @__PURE__ */
|
|
661
|
+
/* @__PURE__ */ jsxs5("div", { className: cn("hsk-chat-header", classNames.header), children: [
|
|
662
|
+
/* @__PURE__ */ jsx6("span", { className: "hsk-chat-header-icon", children: /* @__PURE__ */ jsx6(SparkleIcon, {}) }),
|
|
663
|
+
/* @__PURE__ */ jsx6("span", { className: "hsk-chat-title", children: title }),
|
|
664
|
+
/* @__PURE__ */ jsx6("span", { className: "hsk-chat-badge", children: "AI" }),
|
|
665
|
+
chatHistory.length > 0 && /* @__PURE__ */ jsx6("button", { className: "hsk-chat-reset", onClick: reset, style: { marginLeft: "auto" }, children: "Clear" })
|
|
645
666
|
] }),
|
|
646
|
-
/* @__PURE__ */
|
|
647
|
-
chatHistory.length === 0 ? /* @__PURE__ */
|
|
648
|
-
/* @__PURE__ */
|
|
649
|
-
/* @__PURE__ */
|
|
650
|
-
/* @__PURE__ */
|
|
651
|
-
] }) : chatHistory.map((msg, idx) => /* @__PURE__ */
|
|
652
|
-
/* @__PURE__ */
|
|
653
|
-
/* @__PURE__ */
|
|
654
|
-
/* @__PURE__ */
|
|
655
|
-
msg.imagePreview && /* @__PURE__ */
|
|
667
|
+
/* @__PURE__ */ jsxs5("div", { className: "hsk-chat-messages", children: [
|
|
668
|
+
chatHistory.length === 0 ? /* @__PURE__ */ jsxs5("div", { className: "hsk-chat-empty", children: [
|
|
669
|
+
/* @__PURE__ */ jsx6("div", { className: "hsk-chat-empty-icon", children: /* @__PURE__ */ jsx6(SparkleIcon, {}) }),
|
|
670
|
+
/* @__PURE__ */ jsx6("div", { children: emptyStateText }),
|
|
671
|
+
/* @__PURE__ */ jsx6("div", { className: "hsk-chat-empty-suggestions", children: emptyStateSuggestions })
|
|
672
|
+
] }) : chatHistory.map((msg, idx) => /* @__PURE__ */ jsxs5("div", { children: [
|
|
673
|
+
/* @__PURE__ */ jsxs5("div", { className: `hsk-msg-row ${msg.role}`, children: [
|
|
674
|
+
/* @__PURE__ */ jsx6("div", { className: cn("hsk-msg-avatar", msg.role === "assistant" ? "ai" : "user"), children: msg.role === "assistant" ? /* @__PURE__ */ jsx6(SparkleIcon, {}) : "U" }),
|
|
675
|
+
/* @__PURE__ */ jsxs5("div", { className: cn("hsk-msg-bubble", msg.role, classNames.messageBubble), children: [
|
|
676
|
+
msg.imagePreview && /* @__PURE__ */ jsx6("div", { className: "kiku-vs-preview-bubble", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx6("img", { src: msg.imagePreview, alt: "Uploaded Preview", className: "kiku-vs-preview-bubble-img", style: { maxWidth: "200px", borderRadius: "8px" } }) }),
|
|
677
|
+
msg.thinking && /* @__PURE__ */ jsxs5("details", { className: "hsk-thinking-details", open: streaming && idx === chatHistory.length - 1 && !msg.content, children: [
|
|
678
|
+
/* @__PURE__ */ jsxs5("summary", { className: "hsk-thinking-summary", children: [
|
|
679
|
+
"Thought for ",
|
|
680
|
+
msg.thoughtForSeconds ?? 1,
|
|
681
|
+
"s"
|
|
682
|
+
] }),
|
|
683
|
+
/* @__PURE__ */ jsx6("div", { className: "hsk-thinking-text", children: msg.thinking })
|
|
684
|
+
] }),
|
|
685
|
+
msg.statusMessage && idx === chatHistory.length - 1 && !msg.content && /* @__PURE__ */ jsxs5("div", { className: "hsk-status-live", children: [
|
|
686
|
+
/* @__PURE__ */ jsx6("span", { className: "hsk-status-dot" }),
|
|
687
|
+
/* @__PURE__ */ jsx6("span", { children: msg.statusMessage })
|
|
688
|
+
] }),
|
|
656
689
|
renderMarkdown(msg.content),
|
|
657
|
-
msg.
|
|
658
|
-
|
|
659
|
-
/* @__PURE__ */
|
|
660
|
-
|
|
661
|
-
/* @__PURE__ */
|
|
662
|
-
|
|
690
|
+
streaming && idx === chatHistory.length - 1 && msg.role === "assistant" && /* @__PURE__ */ jsx6("span", { className: "hsk-streaming-cursor" }),
|
|
691
|
+
msg.styleDNA && /* @__PURE__ */ jsxs5("div", { className: "kiku-vs-preview-banner", style: { marginTop: "10px" }, children: [
|
|
692
|
+
chatHistory[idx - 1]?.imagePreview && /* @__PURE__ */ jsx6("img", { src: chatHistory[idx - 1].imagePreview, alt: "Visual Search Input", className: "kiku-vs-preview-img" }),
|
|
693
|
+
/* @__PURE__ */ jsxs5("div", { className: "kiku-vs-preview-info", children: [
|
|
694
|
+
/* @__PURE__ */ jsx6("div", { className: "kiku-vs-preview-label", children: "Visual Match Palette" }),
|
|
695
|
+
/* @__PURE__ */ jsx6("div", { className: "kiku-vs-preview-palette", children: msg.styleDNA.color_palette || "Detected Style DNA" }),
|
|
696
|
+
msg.styleDNA.style_tags && msg.styleDNA.style_tags.length > 0 && /* @__PURE__ */ jsx6("div", { className: "kiku-style-tags", children: msg.styleDNA.style_tags.map((tag, ti) => /* @__PURE__ */ jsxs5("span", { className: "kiku-style-tag", children: [
|
|
663
697
|
"#",
|
|
664
698
|
tag
|
|
665
699
|
] }, ti)) })
|
|
@@ -667,13 +701,13 @@ I couldn't find any matching products in the store.`;
|
|
|
667
701
|
] })
|
|
668
702
|
] })
|
|
669
703
|
] }),
|
|
670
|
-
msg.role === "assistant" && msg.visualSources && msg.visualSources.length > 0 && /* @__PURE__ */
|
|
704
|
+
msg.role === "assistant" && msg.visualSources && msg.visualSources.length > 0 && /* @__PURE__ */ jsx6("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx6("div", { className: "hsk-sources", children: msg.visualSources.map((src, si) => /* @__PURE__ */ jsx6(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) }),
|
|
671
705
|
msg.role === "assistant" && idx === chatHistory.length - 1 && !msg.visualSources && sources.length > 0 && (() => {
|
|
672
706
|
const isStreamingActive = chatLoading || streaming;
|
|
673
707
|
if (isStreamingActive) {
|
|
674
|
-
return /* @__PURE__ */
|
|
708
|
+
return /* @__PURE__ */ jsx6("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx6("div", { className: "hsk-sources", children: sources.map((src, si) => {
|
|
675
709
|
const isReferenced = !!(src.id && referencedIds.includes(src.id));
|
|
676
|
-
return /* @__PURE__ */
|
|
710
|
+
return /* @__PURE__ */ jsx6(
|
|
677
711
|
SourceCard,
|
|
678
712
|
{
|
|
679
713
|
source: src,
|
|
@@ -687,10 +721,10 @@ I couldn't find any matching products in the store.`;
|
|
|
687
721
|
}
|
|
688
722
|
const featured = sources.filter((src) => src.id && referencedIds.includes(src.id));
|
|
689
723
|
const general = referencedIds.length > 0 ? [] : sources.filter((src) => !src.id || !referencedIds.includes(src.id));
|
|
690
|
-
return /* @__PURE__ */
|
|
691
|
-
featured.length > 0 && /* @__PURE__ */
|
|
692
|
-
/* @__PURE__ */
|
|
693
|
-
/* @__PURE__ */
|
|
724
|
+
return /* @__PURE__ */ jsxs5("div", { className: "hsk-sources-container", children: [
|
|
725
|
+
featured.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "hsk-sources-group", style: { marginBottom: "10px" }, children: [
|
|
726
|
+
/* @__PURE__ */ jsx6("div", { className: "hsk-sources-group-title", children: "\u2B50 Featured in response" }),
|
|
727
|
+
/* @__PURE__ */ jsx6("div", { className: "hsk-sources", children: featured.map((src, si) => /* @__PURE__ */ jsx6(
|
|
694
728
|
SourceCard,
|
|
695
729
|
{
|
|
696
730
|
source: src,
|
|
@@ -701,9 +735,9 @@ I couldn't find any matching products in the store.`;
|
|
|
701
735
|
`feat-${si}`
|
|
702
736
|
)) })
|
|
703
737
|
] }),
|
|
704
|
-
general.length > 0 && /* @__PURE__ */
|
|
705
|
-
featured.length > 0 && /* @__PURE__ */
|
|
706
|
-
/* @__PURE__ */
|
|
738
|
+
general.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "hsk-sources-group", children: [
|
|
739
|
+
featured.length > 0 && /* @__PURE__ */ jsx6("div", { className: "hsk-sources-group-title", children: "All matches" }),
|
|
740
|
+
/* @__PURE__ */ jsx6("div", { className: "hsk-sources", children: general.map((src, si) => /* @__PURE__ */ jsx6(
|
|
707
741
|
SourceCard,
|
|
708
742
|
{
|
|
709
743
|
source: src,
|
|
@@ -717,21 +751,21 @@ I couldn't find any matching products in the store.`;
|
|
|
717
751
|
] });
|
|
718
752
|
})()
|
|
719
753
|
] }, idx)),
|
|
720
|
-
loading && /* @__PURE__ */
|
|
721
|
-
/* @__PURE__ */
|
|
722
|
-
/* @__PURE__ */
|
|
723
|
-
/* @__PURE__ */
|
|
724
|
-
/* @__PURE__ */
|
|
725
|
-
/* @__PURE__ */
|
|
754
|
+
loading && /* @__PURE__ */ jsxs5("div", { className: "hsk-msg-row", children: [
|
|
755
|
+
/* @__PURE__ */ jsx6("div", { className: "hsk-msg-avatar ai", children: /* @__PURE__ */ jsx6(SparkleIcon, {}) }),
|
|
756
|
+
/* @__PURE__ */ jsxs5("div", { className: "hsk-pending", role: "status", "aria-live": "polite", children: [
|
|
757
|
+
/* @__PURE__ */ jsxs5("div", { className: "hsk-pending-glyph", children: [
|
|
758
|
+
/* @__PURE__ */ jsx6("span", { className: "hsk-pending-ring" }),
|
|
759
|
+
/* @__PURE__ */ jsx6("span", { className: "hsk-pending-dot" })
|
|
726
760
|
] }),
|
|
727
|
-
/* @__PURE__ */
|
|
728
|
-
/* @__PURE__ */
|
|
729
|
-
/* @__PURE__ */
|
|
730
|
-
/* @__PURE__ */
|
|
761
|
+
/* @__PURE__ */ jsxs5("div", { className: "hsk-pending-text", children: [
|
|
762
|
+
/* @__PURE__ */ jsx6("span", { className: "hsk-pending-step step-1", children: "Searching catalog" }),
|
|
763
|
+
/* @__PURE__ */ jsx6("span", { className: "hsk-pending-step step-2", children: "Reasoning" }),
|
|
764
|
+
/* @__PURE__ */ jsx6("span", { className: "hsk-pending-step step-3", children: "Composing" })
|
|
731
765
|
] })
|
|
732
766
|
] })
|
|
733
767
|
] }),
|
|
734
|
-
error && /* @__PURE__ */
|
|
768
|
+
error && /* @__PURE__ */ jsx6("div", { className: "hsk-chat-error", children: (() => {
|
|
735
769
|
try {
|
|
736
770
|
const parsed = JSON.parse(error);
|
|
737
771
|
return parsed.error || parsed.message || error;
|
|
@@ -739,10 +773,10 @@ I couldn't find any matching products in the store.`;
|
|
|
739
773
|
return error;
|
|
740
774
|
}
|
|
741
775
|
})() }),
|
|
742
|
-
/* @__PURE__ */
|
|
776
|
+
/* @__PURE__ */ jsx6("div", { ref: bottomRef })
|
|
743
777
|
] }),
|
|
744
|
-
/* @__PURE__ */
|
|
745
|
-
enableVision && /* @__PURE__ */
|
|
778
|
+
/* @__PURE__ */ jsxs5("div", { className: "hsk-chat-input-area", style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
|
|
779
|
+
enableVision && /* @__PURE__ */ jsx6(
|
|
746
780
|
VisualSearch,
|
|
747
781
|
{
|
|
748
782
|
onResults: handleVisualResults,
|
|
@@ -751,7 +785,7 @@ I couldn't find any matching products in the store.`;
|
|
|
751
785
|
disabled: loading
|
|
752
786
|
}
|
|
753
787
|
),
|
|
754
|
-
/* @__PURE__ */
|
|
788
|
+
/* @__PURE__ */ jsx6(
|
|
755
789
|
"textarea",
|
|
756
790
|
{
|
|
757
791
|
ref: textareaRef,
|
|
@@ -765,7 +799,7 @@ I couldn't find any matching products in the store.`;
|
|
|
765
799
|
style: { flex: 1 }
|
|
766
800
|
}
|
|
767
801
|
),
|
|
768
|
-
enableVoice && /* @__PURE__ */
|
|
802
|
+
enableVoice && /* @__PURE__ */ jsx6(
|
|
769
803
|
VoiceButton,
|
|
770
804
|
{
|
|
771
805
|
onTranscript: (text) => {
|
|
@@ -777,14 +811,14 @@ I couldn't find any matching products in the store.`;
|
|
|
777
811
|
disabled: loading
|
|
778
812
|
}
|
|
779
813
|
),
|
|
780
|
-
/* @__PURE__ */
|
|
814
|
+
/* @__PURE__ */ jsx6(
|
|
781
815
|
"button",
|
|
782
816
|
{
|
|
783
817
|
className: "hsk-chat-send",
|
|
784
818
|
onClick: handleSend,
|
|
785
819
|
disabled: !input.trim() || loading,
|
|
786
820
|
"aria-label": "Send message",
|
|
787
|
-
children: /* @__PURE__ */
|
|
821
|
+
children: /* @__PURE__ */ jsx6(ArrowUpIcon, {})
|
|
788
822
|
}
|
|
789
823
|
)
|
|
790
824
|
] })
|
|
@@ -801,7 +835,7 @@ import { useAkropolysContext as useAkropolysContext3 } from "@akropolys/sdk";
|
|
|
801
835
|
|
|
802
836
|
// src/components/ComparisonMatrix.tsx
|
|
803
837
|
import { resolveDisplayFields } from "@akropolys/sdk";
|
|
804
|
-
import { jsx as
|
|
838
|
+
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
805
839
|
function normalizeKey(key) {
|
|
806
840
|
let s = key.replace(/[_-]+/g, " ");
|
|
807
841
|
s = s.replace(/([a-z])([A-Z])/g, "$1 $2");
|
|
@@ -963,9 +997,9 @@ function buildRows(products, displayConfig, defaultCurrency = "KES") {
|
|
|
963
997
|
}
|
|
964
998
|
function ImageCell({ value, name }) {
|
|
965
999
|
if (!value) {
|
|
966
|
-
return /* @__PURE__ */
|
|
1000
|
+
return /* @__PURE__ */ jsx7("div", { style: { fontSize: 28, textAlign: "center" }, children: "\u{1F4E6}" });
|
|
967
1001
|
}
|
|
968
|
-
return /* @__PURE__ */
|
|
1002
|
+
return /* @__PURE__ */ jsx7(
|
|
969
1003
|
"img",
|
|
970
1004
|
{
|
|
971
1005
|
src: value,
|
|
@@ -982,10 +1016,10 @@ function ImageCell({ value, name }) {
|
|
|
982
1016
|
);
|
|
983
1017
|
}
|
|
984
1018
|
function AvailabilityCell({ value }) {
|
|
985
|
-
if (!value) return /* @__PURE__ */
|
|
1019
|
+
if (!value) return /* @__PURE__ */ jsx7("span", { style: { color: "#9ca3af" }, children: "\u2014" });
|
|
986
1020
|
const inStock = /in.?stock/i.test(value);
|
|
987
|
-
return /* @__PURE__ */
|
|
988
|
-
/* @__PURE__ */
|
|
1021
|
+
return /* @__PURE__ */ jsxs6("span", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "var(--hsk-text, #111827)" }, children: [
|
|
1022
|
+
/* @__PURE__ */ jsx7("span", { style: {
|
|
989
1023
|
width: 8,
|
|
990
1024
|
height: 8,
|
|
991
1025
|
borderRadius: "50%",
|
|
@@ -1024,7 +1058,7 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES", displayConfig }) {
|
|
|
1024
1058
|
display: "flex",
|
|
1025
1059
|
alignItems: "center"
|
|
1026
1060
|
};
|
|
1027
|
-
return /* @__PURE__ */
|
|
1061
|
+
return /* @__PURE__ */ jsxs6(
|
|
1028
1062
|
"div",
|
|
1029
1063
|
{
|
|
1030
1064
|
className: "hsk-compare-matrix",
|
|
@@ -1037,11 +1071,11 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES", displayConfig }) {
|
|
|
1037
1071
|
fontSize: 13
|
|
1038
1072
|
},
|
|
1039
1073
|
children: [
|
|
1040
|
-
/* @__PURE__ */
|
|
1041
|
-
/* @__PURE__ */
|
|
1074
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "grid", gridTemplateColumns: colTemplate, background: "var(--hsk-surface2, #f9fafb)", borderBottom: "2px solid var(--hsk-border, rgba(0,0,0,0.09))" }, children: [
|
|
1075
|
+
/* @__PURE__ */ jsx7("div", { style: { ...labelStyle, borderBottom: "none", color: "var(--hsk-text, #111)", fontSize: 12 }, children: "Feature" }),
|
|
1042
1076
|
products.map((p, i) => {
|
|
1043
1077
|
const { title } = resolveDisplayFields(p.fields || p, displayConfig);
|
|
1044
|
-
return /* @__PURE__ */
|
|
1078
|
+
return /* @__PURE__ */ jsx7(
|
|
1045
1079
|
"a",
|
|
1046
1080
|
{
|
|
1047
1081
|
href: p.url || "#",
|
|
@@ -1064,7 +1098,7 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES", displayConfig }) {
|
|
|
1064
1098
|
);
|
|
1065
1099
|
})
|
|
1066
1100
|
] }),
|
|
1067
|
-
rows.map((row, rowIdx) => /* @__PURE__ */
|
|
1101
|
+
rows.map((row, rowIdx) => /* @__PURE__ */ jsxs6(
|
|
1068
1102
|
"div",
|
|
1069
1103
|
{
|
|
1070
1104
|
style: {
|
|
@@ -1073,18 +1107,18 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES", displayConfig }) {
|
|
|
1073
1107
|
background: rowIdx % 2 === 1 ? "var(--hsk-surface2, rgba(0,0,0,0.015))" : "transparent"
|
|
1074
1108
|
},
|
|
1075
1109
|
children: [
|
|
1076
|
-
/* @__PURE__ */
|
|
1110
|
+
/* @__PURE__ */ jsx7("div", { style: labelStyle, children: row.label }),
|
|
1077
1111
|
products.map((p, i) => {
|
|
1078
1112
|
const val = row.values[i];
|
|
1079
1113
|
const isBest = row.bestIdx === i && row.values.filter(Boolean).length > 1;
|
|
1080
1114
|
const { title } = resolveDisplayFields(p.fields || p, displayConfig);
|
|
1081
1115
|
if (row.type === "image") {
|
|
1082
|
-
return /* @__PURE__ */
|
|
1116
|
+
return /* @__PURE__ */ jsx7("div", { style: { ...cellBase, justifyContent: "center", padding: "12px", borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ jsx7(ImageCell, { value: val, name: title }) }, i);
|
|
1083
1117
|
}
|
|
1084
1118
|
if (row.type === "availability") {
|
|
1085
|
-
return /* @__PURE__ */
|
|
1119
|
+
return /* @__PURE__ */ jsx7("div", { style: { ...cellBase, borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ jsx7(AvailabilityCell, { value: val }) }, i);
|
|
1086
1120
|
}
|
|
1087
|
-
return /* @__PURE__ */
|
|
1121
|
+
return /* @__PURE__ */ jsx7(
|
|
1088
1122
|
"div",
|
|
1089
1123
|
{
|
|
1090
1124
|
style: {
|
|
@@ -1093,7 +1127,7 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES", displayConfig }) {
|
|
|
1093
1127
|
color: isBest ? "var(--hsk-primary, #ea580c)" : row.type === "price" ? "var(--hsk-text, #374151)" : "var(--hsk-text, #111827)",
|
|
1094
1128
|
borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none"
|
|
1095
1129
|
},
|
|
1096
|
-
children: val ?? /* @__PURE__ */
|
|
1130
|
+
children: val ?? /* @__PURE__ */ jsx7("span", { style: { color: "#9ca3af" }, children: "\u2014" })
|
|
1097
1131
|
},
|
|
1098
1132
|
i
|
|
1099
1133
|
);
|
|
@@ -1109,7 +1143,7 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES", displayConfig }) {
|
|
|
1109
1143
|
|
|
1110
1144
|
// src/components/MarkupEditor.tsx
|
|
1111
1145
|
import { useEffect as useEffect3, useRef as useRef5, useState as useState5 } from "react";
|
|
1112
|
-
import { jsx as
|
|
1146
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1113
1147
|
var COLORS = ["#111111", "#ff5a5a", "#ffb300", "#22c55e", "#06b6d4", "#d946ef", "#9ca3af"];
|
|
1114
1148
|
var MAX_EXPORT_DIM = 1280;
|
|
1115
1149
|
function MarkupEditor({ src, onCancel, onSend }) {
|
|
@@ -1232,13 +1266,13 @@ function MarkupEditor({ src, onCancel, onSend }) {
|
|
|
1232
1266
|
}
|
|
1233
1267
|
};
|
|
1234
1268
|
const hasMarks = actions.length > 0;
|
|
1235
|
-
return /* @__PURE__ */
|
|
1236
|
-
/* @__PURE__ */
|
|
1237
|
-
/* @__PURE__ */
|
|
1238
|
-
/* @__PURE__ */
|
|
1269
|
+
return /* @__PURE__ */ jsxs7("div", { className: "hsk-markup", role: "dialog", "aria-label": "Mark up image", children: [
|
|
1270
|
+
/* @__PURE__ */ jsxs7("div", { className: "hsk-markup-head", children: [
|
|
1271
|
+
/* @__PURE__ */ jsx8("span", { className: "hsk-markup-title", children: "Mark where you want the change" }),
|
|
1272
|
+
/* @__PURE__ */ jsx8("button", { className: "hsk-markup-cancel", onClick: onCancel, children: "Cancel" })
|
|
1239
1273
|
] }),
|
|
1240
|
-
/* @__PURE__ */
|
|
1241
|
-
/* @__PURE__ */
|
|
1274
|
+
/* @__PURE__ */ jsx8("div", { className: "hsk-markup-stage", children: loadError ? /* @__PURE__ */ jsx8("div", { className: "hsk-markup-error", children: "This image can't be edited here." }) : !img ? /* @__PURE__ */ jsx8("div", { className: "hsk-markup-loading", children: "Loading image\u2026" }) : /* @__PURE__ */ jsxs7("div", { className: "hsk-markup-canvas-wrap", children: [
|
|
1275
|
+
/* @__PURE__ */ jsx8(
|
|
1242
1276
|
"canvas",
|
|
1243
1277
|
{
|
|
1244
1278
|
ref: canvasRef,
|
|
@@ -1251,7 +1285,7 @@ function MarkupEditor({ src, onCancel, onSend }) {
|
|
|
1251
1285
|
onPointerLeave: onPointerUp
|
|
1252
1286
|
}
|
|
1253
1287
|
),
|
|
1254
|
-
pendingText && canvasRef.current && /* @__PURE__ */
|
|
1288
|
+
pendingText && canvasRef.current && /* @__PURE__ */ jsx8(
|
|
1255
1289
|
"input",
|
|
1256
1290
|
{
|
|
1257
1291
|
ref: textInputRef,
|
|
@@ -1275,8 +1309,8 @@ function MarkupEditor({ src, onCancel, onSend }) {
|
|
|
1275
1309
|
}
|
|
1276
1310
|
)
|
|
1277
1311
|
] }) }),
|
|
1278
|
-
/* @__PURE__ */
|
|
1279
|
-
/* @__PURE__ */
|
|
1312
|
+
/* @__PURE__ */ jsxs7("div", { className: "hsk-markup-tools", children: [
|
|
1313
|
+
/* @__PURE__ */ jsx8("div", { className: "hsk-markup-colors", children: COLORS.map((c) => /* @__PURE__ */ jsx8(
|
|
1280
1314
|
"button",
|
|
1281
1315
|
{
|
|
1282
1316
|
className: `hsk-markup-color${color === c ? " hsk-markup-color--on" : ""}`,
|
|
@@ -1289,16 +1323,16 @@ function MarkupEditor({ src, onCancel, onSend }) {
|
|
|
1289
1323
|
},
|
|
1290
1324
|
c
|
|
1291
1325
|
)) }),
|
|
1292
|
-
/* @__PURE__ */
|
|
1293
|
-
/* @__PURE__ */
|
|
1294
|
-
/* @__PURE__ */
|
|
1295
|
-
/* @__PURE__ */
|
|
1296
|
-
/* @__PURE__ */
|
|
1297
|
-
/* @__PURE__ */
|
|
1326
|
+
/* @__PURE__ */ jsxs7("div", { className: "hsk-markup-actions", children: [
|
|
1327
|
+
/* @__PURE__ */ jsx8("button", { className: `hsk-markup-tool${tool === "pen" ? " hsk-markup-tool--on" : ""}`, onClick: () => setTool("pen"), children: "Sketch" }),
|
|
1328
|
+
/* @__PURE__ */ jsx8("button", { className: `hsk-markup-tool${tool === "text" ? " hsk-markup-tool--on" : ""}`, onClick: () => setTool("text"), children: "Text" }),
|
|
1329
|
+
/* @__PURE__ */ jsx8("button", { className: `hsk-markup-tool${tool === "eraser" ? " hsk-markup-tool--on" : ""}`, onClick: () => setTool("eraser"), children: "Eraser" }),
|
|
1330
|
+
/* @__PURE__ */ jsx8("button", { className: "hsk-markup-tool", onClick: () => setActions((prev) => prev.slice(0, -1)), disabled: !hasMarks, children: "Undo" }),
|
|
1331
|
+
/* @__PURE__ */ jsx8("button", { className: "hsk-markup-tool", onClick: () => setActions([]), disabled: !hasMarks, children: "Clear" })
|
|
1298
1332
|
] })
|
|
1299
1333
|
] }),
|
|
1300
|
-
/* @__PURE__ */
|
|
1301
|
-
/* @__PURE__ */
|
|
1334
|
+
/* @__PURE__ */ jsxs7("div", { className: "hsk-markup-send", children: [
|
|
1335
|
+
/* @__PURE__ */ jsx8(
|
|
1302
1336
|
"input",
|
|
1303
1337
|
{
|
|
1304
1338
|
className: "hsk-markup-instruction",
|
|
@@ -1310,7 +1344,7 @@ function MarkupEditor({ src, onCancel, onSend }) {
|
|
|
1310
1344
|
}
|
|
1311
1345
|
}
|
|
1312
1346
|
),
|
|
1313
|
-
/* @__PURE__ */
|
|
1347
|
+
/* @__PURE__ */ jsx8(
|
|
1314
1348
|
"button",
|
|
1315
1349
|
{
|
|
1316
1350
|
className: "hsk-markup-go",
|
|
@@ -1320,13 +1354,13 @@ function MarkupEditor({ src, onCancel, onSend }) {
|
|
|
1320
1354
|
}
|
|
1321
1355
|
)
|
|
1322
1356
|
] }),
|
|
1323
|
-
exportError && /* @__PURE__ */
|
|
1357
|
+
exportError && /* @__PURE__ */ jsx8("div", { className: "hsk-markup-error", children: "Couldn't process this image \u2014 try a newer visualization." })
|
|
1324
1358
|
] });
|
|
1325
1359
|
}
|
|
1326
1360
|
|
|
1327
1361
|
// src/components/KikuButton.tsx
|
|
1328
|
-
import { Fragment as Fragment3, jsx as
|
|
1329
|
-
var KikuIcon = ({ className, size = 18 }) => /* @__PURE__ */
|
|
1362
|
+
import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1363
|
+
var KikuIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsx9(
|
|
1330
1364
|
"svg",
|
|
1331
1365
|
{
|
|
1332
1366
|
className: cn("hsk-brand-mark", className),
|
|
@@ -1335,52 +1369,48 @@ var KikuIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsx8(
|
|
|
1335
1369
|
viewBox: "0 0 100 100",
|
|
1336
1370
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1337
1371
|
"aria-label": "kiku",
|
|
1338
|
-
children: /* @__PURE__ */
|
|
1339
|
-
/* @__PURE__ */
|
|
1340
|
-
/* @__PURE__ */
|
|
1372
|
+
children: /* @__PURE__ */ jsxs8("g", { transform: "translate(22.7 19) scale(0.62)", fill: "currentColor", fillRule: "evenodd", children: [
|
|
1373
|
+
/* @__PURE__ */ jsx9("path", { d: "M39.4 10.4 Q44 0 48.6 10.4 L86.1 95.8 Q88 100 83.4 100 L4.6 100 Q0 100 1.9 95.8 Z M24 100 L24 65 Q24 60 27.4 56.3 Q44 38 60.6 56.3 Q64 60 64 65 L64 100 Z" }),
|
|
1374
|
+
/* @__PURE__ */ jsx9("circle", { cx: "55", cy: "82", r: "3.4" })
|
|
1341
1375
|
] })
|
|
1342
1376
|
}
|
|
1343
1377
|
);
|
|
1344
1378
|
var SparkleIcon2 = KikuIcon;
|
|
1345
|
-
var
|
|
1346
|
-
|
|
1347
|
-
/* @__PURE__ */
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
var ExternalIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1351
|
-
/* @__PURE__ */ jsx8("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
|
|
1352
|
-
/* @__PURE__ */ jsx8("polyline", { points: "15 3 21 3 21 9" }),
|
|
1353
|
-
/* @__PURE__ */ jsx8("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
|
|
1379
|
+
var StopIcon = () => /* @__PURE__ */ jsx9("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx9("rect", { x: "5", y: "5", width: "14", height: "14", rx: "2" }) });
|
|
1380
|
+
var ExternalIcon = () => /* @__PURE__ */ jsxs8("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1381
|
+
/* @__PURE__ */ jsx9("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
|
|
1382
|
+
/* @__PURE__ */ jsx9("polyline", { points: "15 3 21 3 21 9" }),
|
|
1383
|
+
/* @__PURE__ */ jsx9("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
|
|
1354
1384
|
] });
|
|
1355
|
-
var ContinueIcon = () => /* @__PURE__ */
|
|
1356
|
-
var CloseIcon = () => /* @__PURE__ */
|
|
1357
|
-
/* @__PURE__ */
|
|
1358
|
-
/* @__PURE__ */
|
|
1385
|
+
var ContinueIcon = () => /* @__PURE__ */ jsx9("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx9("path", { d: "M8 5v14l11-7z" }) });
|
|
1386
|
+
var CloseIcon = () => /* @__PURE__ */ jsxs8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1387
|
+
/* @__PURE__ */ jsx9("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
1388
|
+
/* @__PURE__ */ jsx9("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
1359
1389
|
] });
|
|
1360
|
-
var ChevronRightIcon = () => /* @__PURE__ */
|
|
1361
|
-
var HistoryIcon = () => /* @__PURE__ */
|
|
1362
|
-
/* @__PURE__ */
|
|
1363
|
-
/* @__PURE__ */
|
|
1364
|
-
/* @__PURE__ */
|
|
1390
|
+
var ChevronRightIcon = () => /* @__PURE__ */ jsx9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx9("path", { d: "m9 18 6-6-6-6" }) });
|
|
1391
|
+
var HistoryIcon = () => /* @__PURE__ */ jsxs8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1392
|
+
/* @__PURE__ */ jsx9("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
|
|
1393
|
+
/* @__PURE__ */ jsx9("path", { d: "M3 3v5h5" }),
|
|
1394
|
+
/* @__PURE__ */ jsx9("path", { d: "M12 7v5l4 2" })
|
|
1365
1395
|
] });
|
|
1366
|
-
var BookmarkIcon = () => /* @__PURE__ */
|
|
1367
|
-
var TrashIcon = () => /* @__PURE__ */
|
|
1368
|
-
/* @__PURE__ */
|
|
1369
|
-
/* @__PURE__ */
|
|
1396
|
+
var BookmarkIcon = () => /* @__PURE__ */ jsx9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx9("path", { d: "M19 21 12 16l-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" }) });
|
|
1397
|
+
var TrashIcon = () => /* @__PURE__ */ jsxs8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1398
|
+
/* @__PURE__ */ jsx9("path", { d: "M3 6h18" }),
|
|
1399
|
+
/* @__PURE__ */ jsx9("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
|
|
1370
1400
|
] });
|
|
1371
|
-
var PaperclipIcon = () => /* @__PURE__ */
|
|
1372
|
-
var MicIcon2 = () => /* @__PURE__ */
|
|
1373
|
-
/* @__PURE__ */
|
|
1374
|
-
/* @__PURE__ */
|
|
1375
|
-
/* @__PURE__ */
|
|
1401
|
+
var PaperclipIcon = () => /* @__PURE__ */ jsx9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx9("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
|
|
1402
|
+
var MicIcon2 = () => /* @__PURE__ */ jsxs8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1403
|
+
/* @__PURE__ */ jsx9("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" }),
|
|
1404
|
+
/* @__PURE__ */ jsx9("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
|
|
1405
|
+
/* @__PURE__ */ jsx9("line", { x1: "12", y1: "19", x2: "12", y2: "22" })
|
|
1376
1406
|
] });
|
|
1377
|
-
var MicOffIcon = () => /* @__PURE__ */
|
|
1378
|
-
/* @__PURE__ */
|
|
1379
|
-
/* @__PURE__ */
|
|
1380
|
-
/* @__PURE__ */
|
|
1381
|
-
/* @__PURE__ */
|
|
1382
|
-
/* @__PURE__ */
|
|
1383
|
-
/* @__PURE__ */
|
|
1407
|
+
var MicOffIcon = () => /* @__PURE__ */ jsxs8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1408
|
+
/* @__PURE__ */ jsx9("line", { x1: "2", y1: "2", x2: "22", y2: "22" }),
|
|
1409
|
+
/* @__PURE__ */ jsx9("path", { d: "M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" }),
|
|
1410
|
+
/* @__PURE__ */ jsx9("path", { d: "M5 10v2a7 7 0 0 0 12 5" }),
|
|
1411
|
+
/* @__PURE__ */ jsx9("path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33" }),
|
|
1412
|
+
/* @__PURE__ */ jsx9("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
|
|
1413
|
+
/* @__PURE__ */ jsx9("line", { x1: "12", y1: "19", x2: "12", y2: "22" })
|
|
1384
1414
|
] });
|
|
1385
1415
|
var DEFAULT_CHIPS = [];
|
|
1386
1416
|
function extractName(raw) {
|
|
@@ -1430,7 +1460,7 @@ function KikuPickerMenu({
|
|
|
1430
1460
|
onDismiss
|
|
1431
1461
|
}) {
|
|
1432
1462
|
const discussed = sources.filter((s) => s.id && referencedIds.includes(s.id));
|
|
1433
|
-
return /* @__PURE__ */
|
|
1463
|
+
return /* @__PURE__ */ jsxs8(
|
|
1434
1464
|
"div",
|
|
1435
1465
|
{
|
|
1436
1466
|
className: "hsk-kiku-picker",
|
|
@@ -1438,7 +1468,7 @@ function KikuPickerMenu({
|
|
|
1438
1468
|
"aria-label": "@kiku commands",
|
|
1439
1469
|
onMouseDown: (e) => e.preventDefault(),
|
|
1440
1470
|
children: [
|
|
1441
|
-
discussed.map((src, i) => /* @__PURE__ */
|
|
1471
|
+
discussed.map((src, i) => /* @__PURE__ */ jsxs8(
|
|
1442
1472
|
"button",
|
|
1443
1473
|
{
|
|
1444
1474
|
className: "hsk-kiku-picker-item",
|
|
@@ -1448,9 +1478,9 @@ function KikuPickerMenu({
|
|
|
1448
1478
|
onDismiss();
|
|
1449
1479
|
},
|
|
1450
1480
|
children: [
|
|
1451
|
-
/* @__PURE__ */
|
|
1452
|
-
/* @__PURE__ */
|
|
1453
|
-
src.price && /* @__PURE__ */
|
|
1481
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-kiku-picker-icon", children: src.image ? /* @__PURE__ */ jsx9("img", { src: src.image, alt: "" }) : /* @__PURE__ */ jsx9(BookmarkIcon, {}) }),
|
|
1482
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-kiku-picker-item-name", children: src.name }),
|
|
1483
|
+
src.price && /* @__PURE__ */ jsxs8("span", { className: "hsk-kiku-picker-item-price", children: [
|
|
1454
1484
|
src.currency ?? defaultCurrency,
|
|
1455
1485
|
" ",
|
|
1456
1486
|
parseFloat(String(src.price).replace(/[^0-9.]/g, "") || "0").toLocaleString()
|
|
@@ -1459,7 +1489,7 @@ function KikuPickerMenu({
|
|
|
1459
1489
|
},
|
|
1460
1490
|
src.id ?? i
|
|
1461
1491
|
)),
|
|
1462
|
-
discussed.length > 1 && /* @__PURE__ */
|
|
1492
|
+
discussed.length > 1 && /* @__PURE__ */ jsxs8(
|
|
1463
1493
|
"button",
|
|
1464
1494
|
{
|
|
1465
1495
|
className: "hsk-kiku-picker-item",
|
|
@@ -1469,8 +1499,8 @@ function KikuPickerMenu({
|
|
|
1469
1499
|
onDismiss();
|
|
1470
1500
|
},
|
|
1471
1501
|
children: [
|
|
1472
|
-
/* @__PURE__ */
|
|
1473
|
-
/* @__PURE__ */
|
|
1502
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-kiku-picker-icon", children: /* @__PURE__ */ jsx9(BookmarkIcon, {}) }),
|
|
1503
|
+
/* @__PURE__ */ jsxs8("span", { className: "hsk-kiku-picker-item-name", children: [
|
|
1474
1504
|
"Capture all (",
|
|
1475
1505
|
discussed.length,
|
|
1476
1506
|
")"
|
|
@@ -1478,7 +1508,7 @@ function KikuPickerMenu({
|
|
|
1478
1508
|
]
|
|
1479
1509
|
}
|
|
1480
1510
|
),
|
|
1481
|
-
discussed.length === 0 && /* @__PURE__ */
|
|
1511
|
+
discussed.length === 0 && /* @__PURE__ */ jsxs8(
|
|
1482
1512
|
"button",
|
|
1483
1513
|
{
|
|
1484
1514
|
className: "hsk-kiku-picker-item",
|
|
@@ -1488,12 +1518,12 @@ function KikuPickerMenu({
|
|
|
1488
1518
|
onDismiss();
|
|
1489
1519
|
},
|
|
1490
1520
|
children: [
|
|
1491
|
-
/* @__PURE__ */
|
|
1492
|
-
/* @__PURE__ */
|
|
1521
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-kiku-picker-icon", children: /* @__PURE__ */ jsx9(BookmarkIcon, {}) }),
|
|
1522
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-kiku-picker-item-name", children: "Capture current page" })
|
|
1493
1523
|
]
|
|
1494
1524
|
}
|
|
1495
1525
|
),
|
|
1496
|
-
/* @__PURE__ */
|
|
1526
|
+
/* @__PURE__ */ jsxs8(
|
|
1497
1527
|
"button",
|
|
1498
1528
|
{
|
|
1499
1529
|
className: "hsk-kiku-picker-item",
|
|
@@ -1503,12 +1533,12 @@ function KikuPickerMenu({
|
|
|
1503
1533
|
onDismiss();
|
|
1504
1534
|
},
|
|
1505
1535
|
children: [
|
|
1506
|
-
/* @__PURE__ */
|
|
1507
|
-
/* @__PURE__ */
|
|
1536
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-kiku-picker-icon", children: /* @__PURE__ */ jsx9(HistoryIcon, {}) }),
|
|
1537
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-kiku-picker-item-name", children: "What have you saved?" })
|
|
1508
1538
|
]
|
|
1509
1539
|
}
|
|
1510
1540
|
),
|
|
1511
|
-
/* @__PURE__ */
|
|
1541
|
+
/* @__PURE__ */ jsxs8(
|
|
1512
1542
|
"button",
|
|
1513
1543
|
{
|
|
1514
1544
|
className: "hsk-kiku-picker-item",
|
|
@@ -1518,8 +1548,8 @@ function KikuPickerMenu({
|
|
|
1518
1548
|
onDismiss();
|
|
1519
1549
|
},
|
|
1520
1550
|
children: [
|
|
1521
|
-
/* @__PURE__ */
|
|
1522
|
-
/* @__PURE__ */
|
|
1551
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-kiku-picker-icon", children: /* @__PURE__ */ jsx9(TrashIcon, {}) }),
|
|
1552
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-kiku-picker-item-name", children: "Delete this" })
|
|
1523
1553
|
]
|
|
1524
1554
|
}
|
|
1525
1555
|
)
|
|
@@ -1528,22 +1558,22 @@ function KikuPickerMenu({
|
|
|
1528
1558
|
);
|
|
1529
1559
|
}
|
|
1530
1560
|
function AtPickerMenu({ onSelect, onDismiss }) {
|
|
1531
|
-
return /* @__PURE__ */
|
|
1561
|
+
return /* @__PURE__ */ jsx9(
|
|
1532
1562
|
"div",
|
|
1533
1563
|
{
|
|
1534
1564
|
className: "hsk-kiku-picker",
|
|
1535
1565
|
role: "menu",
|
|
1536
1566
|
"aria-label": "Extensions",
|
|
1537
1567
|
onMouseDown: (e) => e.preventDefault(),
|
|
1538
|
-
children: /* @__PURE__ */
|
|
1568
|
+
children: /* @__PURE__ */ jsxs8(
|
|
1539
1569
|
"button",
|
|
1540
1570
|
{
|
|
1541
1571
|
className: "hsk-kiku-picker-item",
|
|
1542
1572
|
role: "menuitem",
|
|
1543
1573
|
onClick: () => onSelect("@kiku"),
|
|
1544
1574
|
children: [
|
|
1545
|
-
/* @__PURE__ */
|
|
1546
|
-
/* @__PURE__ */
|
|
1575
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-kiku-picker-icon hsk-kiku-picker-icon--accent", children: /* @__PURE__ */ jsx9(SparkleIcon2, {}) }),
|
|
1576
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-kiku-picker-item-name", children: "kiku \u2014 capture & remember" })
|
|
1547
1577
|
]
|
|
1548
1578
|
}
|
|
1549
1579
|
)
|
|
@@ -1553,9 +1583,9 @@ function AtPickerMenu({ onSelect, onDismiss }) {
|
|
|
1553
1583
|
function SourceImg({ src, alt, onImageClick }) {
|
|
1554
1584
|
const [failed, setFailed] = useState6(false);
|
|
1555
1585
|
if (failed) {
|
|
1556
|
-
return /* @__PURE__ */
|
|
1586
|
+
return /* @__PURE__ */ jsx9("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--hsk-chat-source-bg, rgba(0,0,0,.04))", color: "var(--hsk-chat-muted, #888)" }, children: /* @__PURE__ */ jsx9(SparkleIcon2, {}) });
|
|
1557
1587
|
}
|
|
1558
|
-
return /* @__PURE__ */
|
|
1588
|
+
return /* @__PURE__ */ jsx9(
|
|
1559
1589
|
"img",
|
|
1560
1590
|
{
|
|
1561
1591
|
src,
|
|
@@ -1596,20 +1626,20 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource, onImageClic
|
|
|
1596
1626
|
};
|
|
1597
1627
|
const display = sources.filter((s) => s.id && referencedIds.includes(s.id));
|
|
1598
1628
|
if (display.length === 0) return null;
|
|
1599
|
-
return /* @__PURE__ */
|
|
1600
|
-
/* @__PURE__ */
|
|
1629
|
+
return /* @__PURE__ */ jsxs8("div", { className: cn("hsk-cb-sources-wrap", compact && "hsk-cb-sources-wrap--compact"), children: [
|
|
1630
|
+
/* @__PURE__ */ jsx9("div", { className: "hsk-cb-sources", ref: railRef, children: display.map((src, si) => {
|
|
1601
1631
|
const isReferenced = !!(src.id && referencedIds.includes(src.id));
|
|
1602
|
-
return /* @__PURE__ */
|
|
1632
|
+
return /* @__PURE__ */ jsxs8(
|
|
1603
1633
|
"div",
|
|
1604
1634
|
{
|
|
1605
1635
|
className: cn("hsk-cb-source", isReferenced && "hsk-cb-source--referenced"),
|
|
1606
1636
|
style: { animationDelay: `${si * 50}ms` },
|
|
1607
1637
|
onClick: () => onSelectSource?.(src),
|
|
1608
1638
|
children: [
|
|
1609
|
-
src.image ? /* @__PURE__ */
|
|
1610
|
-
/* @__PURE__ */
|
|
1611
|
-
isReferenced && /* @__PURE__ */
|
|
1612
|
-
isProperty && /* @__PURE__ */
|
|
1639
|
+
src.image ? /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-src-imgwrap", style: { position: "relative" }, children: [
|
|
1640
|
+
/* @__PURE__ */ jsx9(SourceImg, { src: src.image, alt: src.name, onImageClick }),
|
|
1641
|
+
isReferenced && /* @__PURE__ */ jsx9("div", { className: "hsk-cb-source-ref-badge", title: "Featured in response", children: /* @__PURE__ */ jsx9(SparkleIcon2, { size: 10 }) }),
|
|
1642
|
+
isProperty && /* @__PURE__ */ jsx9("div", { style: {
|
|
1613
1643
|
position: "absolute",
|
|
1614
1644
|
top: "6px",
|
|
1615
1645
|
right: "6px",
|
|
@@ -1624,14 +1654,14 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource, onImageClic
|
|
|
1624
1654
|
color: "#fbbf24",
|
|
1625
1655
|
// Gold sparkle badge
|
|
1626
1656
|
boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
|
|
1627
|
-
}, children: /* @__PURE__ */
|
|
1628
|
-
] }) : /* @__PURE__ */
|
|
1629
|
-
/* @__PURE__ */
|
|
1630
|
-
isReferenced && /* @__PURE__ */
|
|
1657
|
+
}, children: /* @__PURE__ */ jsx9(SparkleIcon2, { size: 12 }) })
|
|
1658
|
+
] }) : /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-src-imgwrap-empty", style: { position: "relative" }, children: [
|
|
1659
|
+
/* @__PURE__ */ jsx9(SparkleIcon2, {}),
|
|
1660
|
+
isReferenced && /* @__PURE__ */ jsx9("div", { className: "hsk-cb-source-ref-badge", title: "Featured in response", children: /* @__PURE__ */ jsx9(SparkleIcon2, { size: 10 }) })
|
|
1631
1661
|
] }),
|
|
1632
|
-
/* @__PURE__ */
|
|
1633
|
-
/* @__PURE__ */
|
|
1634
|
-
src.price && /* @__PURE__ */
|
|
1662
|
+
/* @__PURE__ */ jsxs8("div", { className: "hsk-cb-src-info", children: [
|
|
1663
|
+
/* @__PURE__ */ jsx9("div", { className: "hsk-cb-src-name", children: src.name }),
|
|
1664
|
+
src.price && /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-src-price", children: [
|
|
1635
1665
|
src.currency ?? defaultCurrency,
|
|
1636
1666
|
" ",
|
|
1637
1667
|
parseFloat(String(src.price).replace(/[^0-9.]/g, "") || "0").toLocaleString()
|
|
@@ -1642,15 +1672,15 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource, onImageClic
|
|
|
1642
1672
|
src.id ?? si
|
|
1643
1673
|
);
|
|
1644
1674
|
}) }),
|
|
1645
|
-
showNext && /* @__PURE__ */
|
|
1646
|
-
/* @__PURE__ */
|
|
1675
|
+
showNext && /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
1676
|
+
/* @__PURE__ */ jsx9(
|
|
1647
1677
|
"div",
|
|
1648
1678
|
{
|
|
1649
1679
|
className: "hsk-cb-sources-fade",
|
|
1650
1680
|
style: { background: "linear-gradient(to right, transparent, var(--hsk-fade-bg, #0e0e0f))" }
|
|
1651
1681
|
}
|
|
1652
1682
|
),
|
|
1653
|
-
/* @__PURE__ */
|
|
1683
|
+
/* @__PURE__ */ jsx9("button", { className: "hsk-cb-sources-next", onClick: scrollNext, "aria-label": "See more", children: /* @__PURE__ */ jsx9(ChevronRightIcon, {}) })
|
|
1654
1684
|
] })
|
|
1655
1685
|
] });
|
|
1656
1686
|
}
|
|
@@ -1727,14 +1757,14 @@ function SmartContextPills({
|
|
|
1727
1757
|
pills.push({ emoji: "\u{1F4A1}", label: "Recommend something", query: "What do you recommend for me?" });
|
|
1728
1758
|
}
|
|
1729
1759
|
if (pills.length === 0) return null;
|
|
1730
|
-
return /* @__PURE__ */
|
|
1760
|
+
return /* @__PURE__ */ jsx9("div", { className: "hsk-action-pills", children: pills.map((pill) => /* @__PURE__ */ jsxs8(
|
|
1731
1761
|
"button",
|
|
1732
1762
|
{
|
|
1733
1763
|
className: "hsk-action-pill",
|
|
1734
1764
|
onClick: () => onSend(pill.query),
|
|
1735
1765
|
disabled: loading,
|
|
1736
1766
|
children: [
|
|
1737
|
-
/* @__PURE__ */
|
|
1767
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-pill-emoji", children: pill.emoji }),
|
|
1738
1768
|
pill.label
|
|
1739
1769
|
]
|
|
1740
1770
|
},
|
|
@@ -1815,8 +1845,8 @@ function ThinkingBlock({ text, isComplete, seconds: fixedSeconds }) {
|
|
|
1815
1845
|
const finalSeconds = fixedSeconds ?? seconds;
|
|
1816
1846
|
const label = isComplete ? finalSeconds !== null && finalSeconds !== void 0 ? `Thought for ${finalSeconds}s` : "Thought process" : `Thinking${seconds ? ` \xB7 ${seconds}s` : "\u2026"}`;
|
|
1817
1847
|
const expandable = !!text;
|
|
1818
|
-
return /* @__PURE__ */
|
|
1819
|
-
/* @__PURE__ */
|
|
1848
|
+
return /* @__PURE__ */ jsxs8("div", { className: cn("hsk-cb-think", !isComplete && "hsk-cb-think--live"), children: [
|
|
1849
|
+
/* @__PURE__ */ jsxs8(
|
|
1820
1850
|
"button",
|
|
1821
1851
|
{
|
|
1822
1852
|
type: "button",
|
|
@@ -1824,16 +1854,16 @@ function ThinkingBlock({ text, isComplete, seconds: fixedSeconds }) {
|
|
|
1824
1854
|
onClick: expandable ? () => setIsOpen((o) => !o) : void 0,
|
|
1825
1855
|
"aria-expanded": expandable ? isOpen : void 0,
|
|
1826
1856
|
children: [
|
|
1827
|
-
/* @__PURE__ */
|
|
1828
|
-
/* @__PURE__ */
|
|
1829
|
-
/* @__PURE__ */
|
|
1857
|
+
/* @__PURE__ */ jsxs8("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: !isComplete ? "hsk-cb-think-spin" : void 0, children: [
|
|
1858
|
+
/* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "10" }),
|
|
1859
|
+
/* @__PURE__ */ jsx9("path", { d: "M12 6v6l4 2" })
|
|
1830
1860
|
] }),
|
|
1831
|
-
/* @__PURE__ */
|
|
1832
|
-
expandable && /* @__PURE__ */
|
|
1861
|
+
/* @__PURE__ */ jsx9("span", { children: label }),
|
|
1862
|
+
expandable && /* @__PURE__ */ jsx9("span", { className: cn("hsk-cb-think-chevron", isOpen && "hsk-cb-think-chevron--open"), children: "\u25B6" })
|
|
1833
1863
|
]
|
|
1834
1864
|
}
|
|
1835
1865
|
),
|
|
1836
|
-
expandable && isOpen && /* @__PURE__ */
|
|
1866
|
+
expandable && isOpen && /* @__PURE__ */ jsx9("div", { className: "hsk-cb-think-body", children: text })
|
|
1837
1867
|
] });
|
|
1838
1868
|
}
|
|
1839
1869
|
function ChatModal({
|
|
@@ -1979,15 +2009,7 @@ function ChatModal({
|
|
|
1979
2009
|
}, 1e3);
|
|
1980
2010
|
return () => clearInterval(t);
|
|
1981
2011
|
}, [mintedKey]);
|
|
1982
|
-
const
|
|
1983
|
-
const hskThemeAttr = isStringTheme ? theme : void 0;
|
|
1984
|
-
const customStyles = !isStringTheme && theme ? {
|
|
1985
|
-
...theme?.primaryColor && { "--hsk-primary": theme.primaryColor },
|
|
1986
|
-
...theme?.backgroundColor && { "--hsk-bg": theme.backgroundColor },
|
|
1987
|
-
...theme?.textColor && { "--hsk-text": theme.textColor },
|
|
1988
|
-
...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
|
|
1989
|
-
...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
|
|
1990
|
-
} : void 0;
|
|
2012
|
+
const { themeAttr: hskThemeAttr, vars: customStyles } = resolveTheme(theme);
|
|
1991
2013
|
const retryLastMessage = async () => {
|
|
1992
2014
|
const lastUserMsg = [...messages].reverse().find((m) => m.role === "user");
|
|
1993
2015
|
if (lastUserMsg) await handleSend(lastUserMsg.content);
|
|
@@ -2183,7 +2205,7 @@ function ChatModal({
|
|
|
2183
2205
|
}, [voiceState]);
|
|
2184
2206
|
const blurVal = typeof backdropBlur === "number" ? `${backdropBlur}px` : backdropBlur ?? "20px";
|
|
2185
2207
|
const displayMessages = messages;
|
|
2186
|
-
return /* @__PURE__ */
|
|
2208
|
+
return /* @__PURE__ */ jsx9(
|
|
2187
2209
|
"div",
|
|
2188
2210
|
{
|
|
2189
2211
|
className: cn("hsk-cb-overlay", classNames.overlay),
|
|
@@ -2195,7 +2217,7 @@ function ChatModal({
|
|
|
2195
2217
|
...backdropColor ? { background: backdropColor } : {},
|
|
2196
2218
|
...customStyles
|
|
2197
2219
|
},
|
|
2198
|
-
children: /* @__PURE__ */
|
|
2220
|
+
children: /* @__PURE__ */ jsxs8(
|
|
2199
2221
|
"div",
|
|
2200
2222
|
{
|
|
2201
2223
|
className: cn("hsk-cb-panel", classNames.panel),
|
|
@@ -2208,11 +2230,11 @@ function ChatModal({
|
|
|
2208
2230
|
}
|
|
2209
2231
|
},
|
|
2210
2232
|
children: [
|
|
2211
|
-
lightboxSrc && /* @__PURE__ */
|
|
2212
|
-
/* @__PURE__ */
|
|
2213
|
-
/* @__PURE__ */
|
|
2233
|
+
lightboxSrc && /* @__PURE__ */ jsxs8("div", { className: "hsk-lightbox", onClick: () => setLightboxSrc(null), children: [
|
|
2234
|
+
/* @__PURE__ */ jsx9("button", { className: "hsk-lightbox-close", onClick: () => setLightboxSrc(null), "aria-label": "Close image", children: /* @__PURE__ */ jsx9(CloseIcon, {}) }),
|
|
2235
|
+
/* @__PURE__ */ jsx9("img", { src: lightboxSrc, alt: "", className: "hsk-lightbox-img", onClick: (e) => e.stopPropagation() })
|
|
2214
2236
|
] }),
|
|
2215
|
-
markupSrc && /* @__PURE__ */
|
|
2237
|
+
markupSrc && /* @__PURE__ */ jsx9("div", { className: "hsk-markup-overlay", children: /* @__PURE__ */ jsx9(
|
|
2216
2238
|
MarkupEditor,
|
|
2217
2239
|
{
|
|
2218
2240
|
src: markupSrc,
|
|
@@ -2226,44 +2248,44 @@ function ChatModal({
|
|
|
2226
2248
|
}
|
|
2227
2249
|
}
|
|
2228
2250
|
) }),
|
|
2229
|
-
/* @__PURE__ */
|
|
2230
|
-
/* @__PURE__ */
|
|
2231
|
-
/* @__PURE__ */
|
|
2232
|
-
/* @__PURE__ */
|
|
2233
|
-
/* @__PURE__ */
|
|
2251
|
+
/* @__PURE__ */ jsxs8("div", { className: "hsk-cb-main", children: [
|
|
2252
|
+
/* @__PURE__ */ jsxs8("div", { className: "hsk-cb-topbar", children: [
|
|
2253
|
+
/* @__PURE__ */ jsxs8("div", { className: "hsk-cb-topbar-left", children: [
|
|
2254
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-cb-topbar-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx9(SparkleIcon2, {}) }),
|
|
2255
|
+
/* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9("div", { className: "hsk-cb-topbar-title", children: activeTitle }) })
|
|
2234
2256
|
] }),
|
|
2235
|
-
/* @__PURE__ */
|
|
2236
|
-
messages.length > 0 && /* @__PURE__ */
|
|
2237
|
-
/* @__PURE__ */
|
|
2257
|
+
/* @__PURE__ */ jsxs8("div", { className: "hsk-cb-topbar-actions", children: [
|
|
2258
|
+
messages.length > 0 && /* @__PURE__ */ jsx9("button", { className: "hsk-cb-topbar-btn", onClick: handleReset, children: "Clear chat" }),
|
|
2259
|
+
/* @__PURE__ */ jsx9("button", { className: "hsk-cb-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx9(CloseIcon, {}) })
|
|
2238
2260
|
] })
|
|
2239
2261
|
] }),
|
|
2240
|
-
/* @__PURE__ */
|
|
2241
|
-
displayMessages.length === 0 ? /* @__PURE__ */
|
|
2242
|
-
awaitingName ? /* @__PURE__ */
|
|
2243
|
-
/* @__PURE__ */
|
|
2262
|
+
/* @__PURE__ */ jsxs8("div", { className: "hsk-cb-msgs", ref: msgsContainerRef, children: [
|
|
2263
|
+
displayMessages.length === 0 ? /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-empty", children: [
|
|
2264
|
+
awaitingName ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
2265
|
+
/* @__PURE__ */ jsxs8("h2", { className: "hsk-cb-hello", children: [
|
|
2244
2266
|
"Hi, I'm ",
|
|
2245
|
-
/* @__PURE__ */
|
|
2267
|
+
/* @__PURE__ */ jsx9("b", { children: "kiku" }),
|
|
2246
2268
|
"."
|
|
2247
2269
|
] }),
|
|
2248
|
-
/* @__PURE__ */
|
|
2249
|
-
/* @__PURE__ */
|
|
2250
|
-
/* @__PURE__ */
|
|
2251
|
-
] }) : shopperName ? /* @__PURE__ */
|
|
2252
|
-
/* @__PURE__ */
|
|
2270
|
+
/* @__PURE__ */ jsx9("p", { className: "hsk-cb-hello-lead", children: "I can search, visualize, or capture anything for you \u2014 on this site or any other." }),
|
|
2271
|
+
/* @__PURE__ */ jsx9("p", { className: "hsk-cb-hello-ask", children: "What should I call you?" }),
|
|
2272
|
+
/* @__PURE__ */ jsx9("button", { className: "hsk-cb-hello-skip", onClick: () => setNameSkipped(true), children: "Skip for now" })
|
|
2273
|
+
] }) : shopperName ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
2274
|
+
/* @__PURE__ */ jsxs8("h2", { className: "hsk-cb-hello", children: [
|
|
2253
2275
|
"Hi, ",
|
|
2254
2276
|
shopperName,
|
|
2255
2277
|
"."
|
|
2256
2278
|
] }),
|
|
2257
|
-
/* @__PURE__ */
|
|
2258
|
-
] }) : /* @__PURE__ */
|
|
2259
|
-
/* @__PURE__ */
|
|
2279
|
+
/* @__PURE__ */ jsx9("p", { className: "hsk-cb-hello-lead", children: "What can I find for you today?" })
|
|
2280
|
+
] }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
2281
|
+
/* @__PURE__ */ jsxs8("h2", { className: "hsk-cb-hello", children: [
|
|
2260
2282
|
"Hi, I'm ",
|
|
2261
|
-
/* @__PURE__ */
|
|
2283
|
+
/* @__PURE__ */ jsx9("b", { children: "kiku" }),
|
|
2262
2284
|
"."
|
|
2263
2285
|
] }),
|
|
2264
|
-
/* @__PURE__ */
|
|
2286
|
+
/* @__PURE__ */ jsx9("p", { className: "hsk-cb-hello-lead", children: "Ask me to search, visualize, or capture anything \u2014 I look across the whole site in real time." })
|
|
2265
2287
|
] }),
|
|
2266
|
-
!awaitingName && activeChips.length > 0 && /* @__PURE__ */
|
|
2288
|
+
!awaitingName && activeChips.length > 0 && /* @__PURE__ */ jsx9("div", { className: "hsk-cb-chips", children: activeChips.map((chip) => /* @__PURE__ */ jsx9(
|
|
2267
2289
|
"button",
|
|
2268
2290
|
{
|
|
2269
2291
|
className: "hsk-cb-chip",
|
|
@@ -2279,37 +2301,49 @@ function ChatModal({
|
|
|
2279
2301
|
const compareSources = sources.filter((s) => s.id && referencedIds.includes(s.id));
|
|
2280
2302
|
const showMatrix = isLast && lastIntent === "compare" && compareSources.length >= 2;
|
|
2281
2303
|
const displayContent = !isUser && showMatrix ? stripMarkdownTables(msg.content) : msg.content;
|
|
2282
|
-
return /* @__PURE__ */
|
|
2304
|
+
return /* @__PURE__ */ jsx9("div", { className: "hsk-cb-msg-group", ref: (el) => {
|
|
2283
2305
|
messageRefs.current[idx] = el;
|
|
2284
|
-
}, children: isUser ? /* @__PURE__ */
|
|
2285
|
-
msg.images && msg.images.length > 0 && /* @__PURE__ */
|
|
2286
|
-
msg.content && /* @__PURE__ */
|
|
2287
|
-
/* @__PURE__ */
|
|
2306
|
+
}, children: isUser ? /* @__PURE__ */ jsxs8("div", { className: `hsk-cb-user-msg${isLastUser ? " hsk-sent" : ""}`, children: [
|
|
2307
|
+
msg.images && msg.images.length > 0 && /* @__PURE__ */ jsx9("div", { className: "hsk-cb-user-imgs", children: msg.images.map((img, i) => /* @__PURE__ */ jsx9("img", { src: img, alt: `attachment ${i + 1}`, className: "hsk-cb-user-img-thumb" }, i)) }),
|
|
2308
|
+
msg.content && /* @__PURE__ */ jsx9("div", { className: "hsk-cb-user-bubble", children: /^@kiku\b/i.test(msg.content) ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
2309
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-kiku-badge", children: "@kiku" }),
|
|
2288
2310
|
msg.content.replace(/^@kiku\s*/i, "")
|
|
2289
2311
|
] }) : msg.content })
|
|
2290
|
-
] }) : /* @__PURE__ */
|
|
2291
|
-
/* @__PURE__ */
|
|
2292
|
-
/* @__PURE__ */
|
|
2312
|
+
] }) : /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-ai-msg", children: [
|
|
2313
|
+
/* @__PURE__ */ jsx9("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx9(SparkleIcon2, {}) }),
|
|
2314
|
+
/* @__PURE__ */ jsxs8("div", { className: "hsk-cb-ai-body", children: [
|
|
2293
2315
|
(() => {
|
|
2294
2316
|
const parsed = parseThinking(displayContent);
|
|
2295
2317
|
const thinking = msg.thinking || parsed.thinking;
|
|
2296
2318
|
const content = parsed.content;
|
|
2297
2319
|
const isComplete = msg.thinking ? content.length > 0 || !(isLast && streaming) : parsed.isComplete;
|
|
2298
|
-
return /* @__PURE__ */
|
|
2299
|
-
(thinking || msg.thoughtForSeconds != null) && /* @__PURE__ */
|
|
2300
|
-
content && /* @__PURE__ */
|
|
2320
|
+
return /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
2321
|
+
(thinking || msg.thoughtForSeconds != null) && /* @__PURE__ */ jsx9(ThinkingBlock, { text: thinking, isComplete, seconds: msg.thoughtForSeconds }),
|
|
2322
|
+
content && /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-ai-text", children: [
|
|
2301
2323
|
renderMarkdown(content, isLast && streaming),
|
|
2302
|
-
isLast && streaming && /* @__PURE__ */
|
|
2324
|
+
isLast && streaming && /* @__PURE__ */ jsx9("span", { style: { display: "inline-block", width: "0.5em", height: "1.05em", marginLeft: "2px", verticalAlign: "text-bottom", background: "currentColor", opacity: 0.55, borderRadius: "1px" } })
|
|
2303
2325
|
] })
|
|
2304
2326
|
] });
|
|
2305
2327
|
})(),
|
|
2306
|
-
msg.visualizing && /* @__PURE__ */
|
|
2307
|
-
/* @__PURE__ */
|
|
2308
|
-
/* @__PURE__ */
|
|
2328
|
+
msg.visualizing && /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-viz hsk-cb-viz--loading", children: [
|
|
2329
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-cb-viz-spinner" }),
|
|
2330
|
+
/* @__PURE__ */ jsx9("span", { children: msg.visualizingText || "Visualizing\u2026" })
|
|
2309
2331
|
] }),
|
|
2310
|
-
msg.visualization && /* @__PURE__ */
|
|
2311
|
-
/* @__PURE__ */
|
|
2312
|
-
/* @__PURE__ */
|
|
2332
|
+
msg.visualization && /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-viz", children: [
|
|
2333
|
+
/* @__PURE__ */ jsxs8("div", { className: "hsk-cb-viz-imgwrap", children: [
|
|
2334
|
+
msg.visualizationType === "video" || msg.visualization.includes("/videos/") ? /* @__PURE__ */ jsx9(
|
|
2335
|
+
"video",
|
|
2336
|
+
{
|
|
2337
|
+
src: msg.visualization,
|
|
2338
|
+
controls: true,
|
|
2339
|
+
autoPlay: true,
|
|
2340
|
+
loop: true,
|
|
2341
|
+
muted: true,
|
|
2342
|
+
playsInline: true,
|
|
2343
|
+
className: "hsk-markdown-video",
|
|
2344
|
+
style: { display: "block", maxHeight: "400px", objectFit: "contain", width: "100%" }
|
|
2345
|
+
}
|
|
2346
|
+
) : /* @__PURE__ */ jsx9(
|
|
2313
2347
|
"img",
|
|
2314
2348
|
{
|
|
2315
2349
|
src: msg.visualization,
|
|
@@ -2320,18 +2354,18 @@ function ChatModal({
|
|
|
2320
2354
|
}
|
|
2321
2355
|
}
|
|
2322
2356
|
),
|
|
2323
|
-
isLast && !streaming && /* @__PURE__ */
|
|
2324
|
-
/* @__PURE__ */
|
|
2325
|
-
/* @__PURE__ */
|
|
2326
|
-
/* @__PURE__ */
|
|
2357
|
+
isLast && !streaming && (msg.visualizationType !== "video" && !msg.visualization.includes("/videos/")) && /* @__PURE__ */ jsxs8("button", { className: "hsk-cb-viz-mark", onClick: () => setMarkupSrc(msg.visualization), children: [
|
|
2358
|
+
/* @__PURE__ */ jsxs8("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
|
|
2359
|
+
/* @__PURE__ */ jsx9("path", { d: "M12 20h9" }),
|
|
2360
|
+
/* @__PURE__ */ jsx9("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" })
|
|
2327
2361
|
] }),
|
|
2328
2362
|
"Mark & edit"
|
|
2329
2363
|
] })
|
|
2330
2364
|
] }),
|
|
2331
|
-
/* @__PURE__ */
|
|
2365
|
+
/* @__PURE__ */ jsx9("div", { className: "hsk-cb-viz-disclaimer", children: msg.visualizationType === "video" || msg.visualization.includes("/videos/") ? "AI-generated video makeover \u2014 colors, size and movement may differ from the real product." : "AI-generated preview \u2014 colours, size and placement may differ from the real product." })
|
|
2332
2366
|
] }),
|
|
2333
|
-
!isUser && (msg.knowledgeImages?.length ?? 0) > 0 && /* @__PURE__ */
|
|
2334
|
-
/* @__PURE__ */
|
|
2367
|
+
!isUser && (msg.knowledgeImages?.length ?? 0) > 0 && /* @__PURE__ */ jsx9("div", { className: "hsk-cb-kimgs", children: msg.knowledgeImages.map((ref) => /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-kimg-group", children: [
|
|
2368
|
+
/* @__PURE__ */ jsx9("div", { className: "hsk-cb-kimg-grid", children: ref.images.map((img, i) => /* @__PURE__ */ jsx9(
|
|
2335
2369
|
"img",
|
|
2336
2370
|
{
|
|
2337
2371
|
src: img.url,
|
|
@@ -2345,16 +2379,16 @@ function ChatModal({
|
|
|
2345
2379
|
},
|
|
2346
2380
|
i
|
|
2347
2381
|
)) }),
|
|
2348
|
-
(ref.title || ref.images[0]?.note) && /* @__PURE__ */
|
|
2382
|
+
(ref.title || ref.images[0]?.note) && /* @__PURE__ */ jsx9("div", { className: "hsk-cb-kimg-caption", children: ref.title || ref.images[0]?.note })
|
|
2349
2383
|
] }, ref.entryId)) }),
|
|
2350
|
-
showMatrix && /* @__PURE__ */
|
|
2384
|
+
showMatrix && /* @__PURE__ */ jsx9(ComparisonMatrix, { sources: compareSources, defaultCurrency }),
|
|
2351
2385
|
(() => {
|
|
2352
2386
|
const msgReferencedIds = isLast ? referencedIds : msg.referencedIds ?? [];
|
|
2353
2387
|
const msgSources = isLast ? sources : msg.sources ?? [];
|
|
2354
2388
|
const msgIntent = isLast ? lastIntent : msg.intent;
|
|
2355
2389
|
const hiddenIntent = msgIntent === "compare" || msgIntent === "capture" || msgIntent === "capture_all" || msgIntent === "delete" || msgIntent === "view_history";
|
|
2356
2390
|
const showCarousel = msgReferencedIds.length > 0 && !hiddenIntent && (!isLast || lastAction?.type !== "request_kiku_key");
|
|
2357
|
-
return showCarousel && /* @__PURE__ */
|
|
2391
|
+
return showCarousel && /* @__PURE__ */ jsx9(
|
|
2358
2392
|
SourcesCarousel,
|
|
2359
2393
|
{
|
|
2360
2394
|
sources: msgSources,
|
|
@@ -2366,11 +2400,11 @@ function ChatModal({
|
|
|
2366
2400
|
}
|
|
2367
2401
|
);
|
|
2368
2402
|
})(),
|
|
2369
|
-
isLast && !loading && lastAction?.url && /* @__PURE__ */
|
|
2403
|
+
isLast && !loading && lastAction?.url && /* @__PURE__ */ jsx9("div", { className: "hsk-action-pills", children: /* @__PURE__ */ jsxs8("a", { className: "hsk-action-pill", href: lastAction.url, children: [
|
|
2370
2404
|
String(lastAction.type || "continue").replace(/_/g, " "),
|
|
2371
2405
|
" \u2192"
|
|
2372
2406
|
] }) }),
|
|
2373
|
-
isLast && !loading && /* @__PURE__ */
|
|
2407
|
+
isLast && !loading && /* @__PURE__ */ jsx9(
|
|
2374
2408
|
SmartContextPills,
|
|
2375
2409
|
{
|
|
2376
2410
|
intent: lastIntent,
|
|
@@ -2382,16 +2416,16 @@ function ChatModal({
|
|
|
2382
2416
|
] })
|
|
2383
2417
|
] }) }, idx);
|
|
2384
2418
|
}),
|
|
2385
|
-
selectedProduct && loading && /* @__PURE__ */
|
|
2419
|
+
selectedProduct && loading && /* @__PURE__ */ jsxs8(
|
|
2386
2420
|
"div",
|
|
2387
2421
|
{
|
|
2388
2422
|
className: "hsk-cb-selected-product",
|
|
2389
2423
|
onClick: () => selectedProduct.url && window.open(selectedProduct.url, "_blank"),
|
|
2390
2424
|
children: [
|
|
2391
|
-
selectedProduct.image && /* @__PURE__ */
|
|
2392
|
-
/* @__PURE__ */
|
|
2393
|
-
/* @__PURE__ */
|
|
2394
|
-
selectedProduct.price && /* @__PURE__ */
|
|
2425
|
+
selectedProduct.image && /* @__PURE__ */ jsx9("img", { className: "hsk-cb-selected-img", src: selectedProduct.image, alt: selectedProduct.name }),
|
|
2426
|
+
/* @__PURE__ */ jsxs8("div", { className: "hsk-cb-selected-info", children: [
|
|
2427
|
+
/* @__PURE__ */ jsx9("div", { className: "hsk-cb-selected-name", children: selectedProduct.name }),
|
|
2428
|
+
selectedProduct.price && /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-selected-price", children: [
|
|
2395
2429
|
selectedProduct.currency ?? defaultCurrency,
|
|
2396
2430
|
" ",
|
|
2397
2431
|
parseFloat(String(selectedProduct.price ?? "").replace(/[^0-9.]/g, "") || "0").toLocaleString()
|
|
@@ -2400,22 +2434,22 @@ function ChatModal({
|
|
|
2400
2434
|
]
|
|
2401
2435
|
}
|
|
2402
2436
|
),
|
|
2403
|
-
loading && !streaming && /* @__PURE__ */
|
|
2404
|
-
/* @__PURE__ */
|
|
2405
|
-
/* @__PURE__ */
|
|
2406
|
-
/* @__PURE__ */
|
|
2407
|
-
/* @__PURE__ */
|
|
2408
|
-
/* @__PURE__ */
|
|
2409
|
-
/* @__PURE__ */
|
|
2410
|
-
/* @__PURE__ */
|
|
2411
|
-
/* @__PURE__ */
|
|
2412
|
-
/* @__PURE__ */
|
|
2437
|
+
loading && !streaming && /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-typing-row", style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
|
|
2438
|
+
/* @__PURE__ */ jsxs8("div", { className: "hsk-cb-thinking-icon", children: [
|
|
2439
|
+
/* @__PURE__ */ jsx9("svg", { className: "hsk-brand-mark", viewBox: "0 0 100 100", "aria-hidden": "true", children: /* @__PURE__ */ jsx9("path", { d: "M39.4 10.4 Q44 0 48.6 10.4 L86.1 95.8 Q88 100 83.4 100 L4.6 100 Q0 100 1.9 95.8 Z M24 100 L24 65 Q24 60 27.4 56.3 Q44 38 60.6 56.3 Q64 60 64 65 L64 100 Z", transform: "translate(22.7 19) scale(0.62)", fillRule: "evenodd" }) }),
|
|
2440
|
+
/* @__PURE__ */ jsx9("svg", { className: "hsk-brand-mark hsk-brand-mark--sheen", viewBox: "0 0 100 100", "aria-hidden": "true", children: /* @__PURE__ */ jsx9("path", { d: "M39.4 10.4 Q44 0 48.6 10.4 L86.1 95.8 Q88 100 83.4 100 L4.6 100 Q0 100 1.9 95.8 Z M24 100 L24 65 Q24 60 27.4 56.3 Q44 38 60.6 56.3 Q64 60 64 65 L64 100 Z", transform: "translate(22.7 19) scale(0.62)", fillRule: "evenodd" }) }),
|
|
2441
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-handle-orbit", children: /* @__PURE__ */ jsxs8("span", { className: "hsk-handle-ring", children: [
|
|
2442
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-handle-ball" }),
|
|
2443
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-handle-ball" }),
|
|
2444
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-handle-ball" }),
|
|
2445
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-handle-ball" }),
|
|
2446
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-handle-ball" })
|
|
2413
2447
|
] }) }),
|
|
2414
|
-
/* @__PURE__ */
|
|
2448
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-handle-rest" })
|
|
2415
2449
|
] }),
|
|
2416
|
-
/* @__PURE__ */
|
|
2450
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-cb-thinking-text", children: "Thinking\u2026" })
|
|
2417
2451
|
] }),
|
|
2418
|
-
lastAction?.type === "open_memory" && lastAction.url && !loading && !streaming && /* @__PURE__ */
|
|
2452
|
+
lastAction?.type === "open_memory" && lastAction.url && !loading && !streaming && /* @__PURE__ */ jsxs8(
|
|
2419
2453
|
"a",
|
|
2420
2454
|
{
|
|
2421
2455
|
className: "hsk-cb-memory-pill",
|
|
@@ -2424,23 +2458,23 @@ function ChatModal({
|
|
|
2424
2458
|
rel: "noopener noreferrer",
|
|
2425
2459
|
children: [
|
|
2426
2460
|
"Open my memory on mimi",
|
|
2427
|
-
/* @__PURE__ */
|
|
2461
|
+
/* @__PURE__ */ jsx9(ExternalIcon, {})
|
|
2428
2462
|
]
|
|
2429
2463
|
}
|
|
2430
2464
|
),
|
|
2431
|
-
(stopped || interrupted) && !loading && !streaming && messages.length > 0 && /* @__PURE__ */
|
|
2432
|
-
/* @__PURE__ */
|
|
2433
|
-
/* @__PURE__ */
|
|
2434
|
-
/* @__PURE__ */
|
|
2465
|
+
(stopped || interrupted) && !loading && !streaming && messages.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-stopped", children: [
|
|
2466
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-cb-stopped-label", children: stopped ? "You stopped this response." : "This response was interrupted." }),
|
|
2467
|
+
/* @__PURE__ */ jsxs8("button", { className: "hsk-cb-continue", onClick: continueGenerating, children: [
|
|
2468
|
+
/* @__PURE__ */ jsx9(ContinueIcon, {}),
|
|
2435
2469
|
messages[messages.length - 1]?.role === "assistant" ? "Continue generating" : "Generate response"
|
|
2436
2470
|
] })
|
|
2437
2471
|
] }),
|
|
2438
|
-
error && /* @__PURE__ */
|
|
2439
|
-
keyPhase === "prompt_key" && /* @__PURE__ */
|
|
2440
|
-
/* @__PURE__ */
|
|
2441
|
-
/* @__PURE__ */
|
|
2442
|
-
/* @__PURE__ */
|
|
2443
|
-
/* @__PURE__ */
|
|
2472
|
+
error && /* @__PURE__ */ jsx9("div", { className: "hsk-cb-error", children: getFriendlyError(error) }),
|
|
2473
|
+
keyPhase === "prompt_key" && /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-ai-msg", children: [
|
|
2474
|
+
/* @__PURE__ */ jsx9("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx9(SparkleIcon2, {}) }),
|
|
2475
|
+
/* @__PURE__ */ jsx9("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ jsx9("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-phone-form", children: [
|
|
2476
|
+
/* @__PURE__ */ jsx9("label", { className: "hsk-cb-phone-label", children: "Paste your public id \u2014 or create one" }),
|
|
2477
|
+
/* @__PURE__ */ jsx9(
|
|
2444
2478
|
"input",
|
|
2445
2479
|
{
|
|
2446
2480
|
type: "text",
|
|
@@ -2452,49 +2486,49 @@ function ChatModal({
|
|
|
2452
2486
|
autoFocus: true
|
|
2453
2487
|
}
|
|
2454
2488
|
),
|
|
2455
|
-
/* @__PURE__ */
|
|
2456
|
-
/* @__PURE__ */
|
|
2457
|
-
/* @__PURE__ */
|
|
2489
|
+
/* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: 8 }, children: [
|
|
2490
|
+
/* @__PURE__ */ jsx9("button", { className: "hsk-cb-phone-submit", onClick: handleUseExistingKey, disabled: !keyInput.trim(), children: "Use my id" }),
|
|
2491
|
+
/* @__PURE__ */ jsx9("button", { className: "hsk-cb-phone-submit", onClick: handleCreateKey, disabled: minting, children: minting ? "Creating\u2026" : "I'm new \u2014 create one" })
|
|
2458
2492
|
] })
|
|
2459
2493
|
] }) }) })
|
|
2460
2494
|
] }),
|
|
2461
|
-
mintedKey && /* @__PURE__ */
|
|
2462
|
-
/* @__PURE__ */
|
|
2463
|
-
/* @__PURE__ */
|
|
2464
|
-
/* @__PURE__ */
|
|
2465
|
-
/* @__PURE__ */
|
|
2466
|
-
/* @__PURE__ */
|
|
2467
|
-
/* @__PURE__ */
|
|
2468
|
-
/* @__PURE__ */
|
|
2469
|
-
/* @__PURE__ */
|
|
2495
|
+
mintedKey && /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-ai-msg", children: [
|
|
2496
|
+
/* @__PURE__ */ jsx9("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx9(SparkleIcon2, {}) }),
|
|
2497
|
+
/* @__PURE__ */ jsx9("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ jsx9("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ jsxs8("div", { style: { padding: "12px 14px", border: "1px solid var(--hsk-border, #e5e5e5)", borderRadius: "var(--hsk-border-radius, 0px)", display: "flex", flexDirection: "column", gap: 12 }, children: [
|
|
2498
|
+
/* @__PURE__ */ jsxs8("div", { children: [
|
|
2499
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Your secret \u2014 shown only once" }),
|
|
2500
|
+
/* @__PURE__ */ jsx9("code", { style: { display: "block", fontSize: 14, fontWeight: 700, marginBottom: 6, wordBreak: "break-all" }, children: mintedKey }),
|
|
2501
|
+
/* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
|
|
2502
|
+
/* @__PURE__ */ jsx9("button", { className: "hsk-cb-phone-submit", style: { padding: "4px 10px" }, onClick: () => copyValue(mintedKey, "secret"), children: copied === "secret" ? "Copied" : "Copy secret" }),
|
|
2503
|
+
/* @__PURE__ */ jsx9("span", { style: { fontSize: 11, opacity: 0.7 }, children: "Keep it private \u2014 use it to unlock your memory at mimi.akropolys.cloud. If lost, the memory is lost with it." })
|
|
2470
2504
|
] })
|
|
2471
2505
|
] }),
|
|
2472
|
-
mintedPub && /* @__PURE__ */
|
|
2473
|
-
/* @__PURE__ */
|
|
2474
|
-
/* @__PURE__ */
|
|
2475
|
-
/* @__PURE__ */
|
|
2476
|
-
/* @__PURE__ */
|
|
2477
|
-
/* @__PURE__ */
|
|
2506
|
+
mintedPub && /* @__PURE__ */ jsxs8("div", { children: [
|
|
2507
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Your public id" }),
|
|
2508
|
+
/* @__PURE__ */ jsx9("code", { style: { display: "block", fontSize: 13, fontWeight: 600, marginBottom: 6, wordBreak: "break-all", opacity: 0.85 }, children: mintedPub }),
|
|
2509
|
+
/* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
|
|
2510
|
+
/* @__PURE__ */ jsx9("button", { className: "hsk-cb-phone-submit", style: { padding: "4px 10px" }, onClick: () => copyValue(mintedPub, "pub"), children: copied === "pub" ? "Copied" : "Copy id" }),
|
|
2511
|
+
/* @__PURE__ */ jsx9("span", { style: { fontSize: 11, opacity: 0.7 }, children: "Paste this on any site to keep saving to the same memory." })
|
|
2478
2512
|
] })
|
|
2479
2513
|
] }),
|
|
2480
|
-
/* @__PURE__ */
|
|
2514
|
+
/* @__PURE__ */ jsxs8("div", { style: { fontSize: 11, opacity: 0.6 }, children: [
|
|
2481
2515
|
"Hidden in ",
|
|
2482
2516
|
keyCountdown,
|
|
2483
2517
|
"s."
|
|
2484
2518
|
] })
|
|
2485
2519
|
] }) }) })
|
|
2486
2520
|
] }),
|
|
2487
|
-
/* @__PURE__ */
|
|
2521
|
+
/* @__PURE__ */ jsx9("div", { ref: bottomRef, style: { height: 1 } })
|
|
2488
2522
|
] }),
|
|
2489
|
-
/* @__PURE__ */
|
|
2490
|
-
showAtPicker && /* @__PURE__ */
|
|
2523
|
+
/* @__PURE__ */ jsxs8("div", { className: "hsk-cb-input-wrap", children: [
|
|
2524
|
+
showAtPicker && /* @__PURE__ */ jsx9(
|
|
2491
2525
|
AtPickerMenu,
|
|
2492
2526
|
{
|
|
2493
2527
|
onSelect: handleSelectExtension,
|
|
2494
2528
|
onDismiss: () => setShowAtPicker(false)
|
|
2495
2529
|
}
|
|
2496
2530
|
),
|
|
2497
|
-
showKikuPicker && /* @__PURE__ */
|
|
2531
|
+
showKikuPicker && /* @__PURE__ */ jsx9(
|
|
2498
2532
|
KikuPickerMenu,
|
|
2499
2533
|
{
|
|
2500
2534
|
sources,
|
|
@@ -2507,9 +2541,9 @@ function ChatModal({
|
|
|
2507
2541
|
onDismiss: () => setShowKikuPicker(false)
|
|
2508
2542
|
}
|
|
2509
2543
|
),
|
|
2510
|
-
attachments.length > 0 && /* @__PURE__ */
|
|
2511
|
-
/* @__PURE__ */
|
|
2512
|
-
/* @__PURE__ */
|
|
2544
|
+
attachments.length > 0 && /* @__PURE__ */ jsx9("div", { className: "hsk-cb-img-strip", children: attachments.map((att, i) => /* @__PURE__ */ jsxs8("div", { className: "hsk-cb-img-thumb-wrap", children: [
|
|
2545
|
+
/* @__PURE__ */ jsx9("img", { src: att.data, alt: `attachment ${i + 1}`, className: "hsk-cb-img-thumb" }),
|
|
2546
|
+
/* @__PURE__ */ jsx9(
|
|
2513
2547
|
"button",
|
|
2514
2548
|
{
|
|
2515
2549
|
className: "hsk-cb-img-thumb-remove",
|
|
@@ -2519,8 +2553,8 @@ function ChatModal({
|
|
|
2519
2553
|
}
|
|
2520
2554
|
)
|
|
2521
2555
|
] }, i)) }),
|
|
2522
|
-
/* @__PURE__ */
|
|
2523
|
-
/* @__PURE__ */
|
|
2556
|
+
/* @__PURE__ */ jsxs8("div", { className: "hsk-cb-input-box", children: [
|
|
2557
|
+
/* @__PURE__ */ jsx9(
|
|
2524
2558
|
"input",
|
|
2525
2559
|
{
|
|
2526
2560
|
ref: imageInputRef,
|
|
@@ -2531,7 +2565,7 @@ function ChatModal({
|
|
|
2531
2565
|
onChange: (e) => handleImageFiles(e.target.files)
|
|
2532
2566
|
}
|
|
2533
2567
|
),
|
|
2534
|
-
enableVision && /* @__PURE__ */
|
|
2568
|
+
enableVision && /* @__PURE__ */ jsx9(
|
|
2535
2569
|
"button",
|
|
2536
2570
|
{
|
|
2537
2571
|
className: "hsk-cb-attach-btn",
|
|
@@ -2539,10 +2573,10 @@ function ChatModal({
|
|
|
2539
2573
|
disabled: loading,
|
|
2540
2574
|
"aria-label": "Attach image",
|
|
2541
2575
|
title: "Attach image",
|
|
2542
|
-
children: /* @__PURE__ */
|
|
2576
|
+
children: /* @__PURE__ */ jsx9(PaperclipIcon, {})
|
|
2543
2577
|
}
|
|
2544
2578
|
),
|
|
2545
|
-
/* @__PURE__ */
|
|
2579
|
+
/* @__PURE__ */ jsx9(
|
|
2546
2580
|
"textarea",
|
|
2547
2581
|
{
|
|
2548
2582
|
ref: textareaRef,
|
|
@@ -2556,7 +2590,7 @@ function ChatModal({
|
|
|
2556
2590
|
autoFocus: true
|
|
2557
2591
|
}
|
|
2558
2592
|
),
|
|
2559
|
-
hasSpeechAPI && enableVoice && /* @__PURE__ */
|
|
2593
|
+
hasSpeechAPI && enableVoice && /* @__PURE__ */ jsxs8(
|
|
2560
2594
|
"button",
|
|
2561
2595
|
{
|
|
2562
2596
|
className: cn(
|
|
@@ -2569,32 +2603,32 @@ function ChatModal({
|
|
|
2569
2603
|
"aria-label": voiceState === "idle" ? "Start voice input" : "Stop recording",
|
|
2570
2604
|
title: voiceState === "idle" ? "Voice input" : "Stop",
|
|
2571
2605
|
children: [
|
|
2572
|
-
voiceState === "listening" ? /* @__PURE__ */
|
|
2573
|
-
voiceState === "listening" && /* @__PURE__ */
|
|
2606
|
+
voiceState === "listening" ? /* @__PURE__ */ jsx9(MicOffIcon, {}) : /* @__PURE__ */ jsx9(MicIcon2, {}),
|
|
2607
|
+
voiceState === "listening" && /* @__PURE__ */ jsx9("span", { className: "hsk-cb-mic-pulse" })
|
|
2574
2608
|
]
|
|
2575
2609
|
}
|
|
2576
2610
|
),
|
|
2577
|
-
loading || streaming ? /* @__PURE__ */
|
|
2611
|
+
loading || streaming ? /* @__PURE__ */ jsx9(
|
|
2578
2612
|
"button",
|
|
2579
2613
|
{
|
|
2580
2614
|
className: cn("hsk-cb-send", "hsk-cb-send--stop", classNames.sendButton),
|
|
2581
2615
|
onClick: stop,
|
|
2582
2616
|
"aria-label": "Stop generating",
|
|
2583
2617
|
title: "Stop generating",
|
|
2584
|
-
children: /* @__PURE__ */
|
|
2618
|
+
children: /* @__PURE__ */ jsx9(StopIcon, {})
|
|
2585
2619
|
}
|
|
2586
|
-
) : /* @__PURE__ */
|
|
2620
|
+
) : /* @__PURE__ */ jsx9(
|
|
2587
2621
|
"button",
|
|
2588
2622
|
{
|
|
2589
2623
|
className: cn("hsk-cb-send", classNames.sendButton),
|
|
2590
2624
|
onClick: () => handleSend(),
|
|
2591
2625
|
disabled: !input.trim() && attachments.length === 0,
|
|
2592
2626
|
"aria-label": "Send message",
|
|
2593
|
-
children: /* @__PURE__ */
|
|
2627
|
+
children: /* @__PURE__ */ jsx9(ArrowUpIcon, {})
|
|
2594
2628
|
}
|
|
2595
2629
|
)
|
|
2596
2630
|
] }),
|
|
2597
|
-
/* @__PURE__ */
|
|
2631
|
+
/* @__PURE__ */ jsx9("div", { className: "hsk-cb-hint", children: "kiku \xB7 searches the whole catalogue in real time" })
|
|
2598
2632
|
] })
|
|
2599
2633
|
] })
|
|
2600
2634
|
]
|
|
@@ -2647,17 +2681,9 @@ function KikuButton({
|
|
|
2647
2681
|
window.removeEventListener("akropolys:navigation", handleNavigation);
|
|
2648
2682
|
};
|
|
2649
2683
|
}, []);
|
|
2650
|
-
const
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
...theme?.primaryColor && { "--hsk-primary": theme.primaryColor },
|
|
2654
|
-
...theme?.backgroundColor && { "--hsk-bg": theme.backgroundColor },
|
|
2655
|
-
...theme?.textColor && { "--hsk-text": theme.textColor },
|
|
2656
|
-
...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
|
|
2657
|
-
...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
|
|
2658
|
-
} : void 0;
|
|
2659
|
-
return /* @__PURE__ */ jsxs7(Fragment3, { children: [
|
|
2660
|
-
/* @__PURE__ */ jsxs7(
|
|
2684
|
+
const { themeAttr: hskThemeAttr, vars: customStyles } = resolveTheme(theme);
|
|
2685
|
+
return /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
2686
|
+
/* @__PURE__ */ jsxs8(
|
|
2661
2687
|
"button",
|
|
2662
2688
|
{
|
|
2663
2689
|
className: cn("hsk-cb-btn", classNames.button, className),
|
|
@@ -2666,13 +2692,13 @@ function KikuButton({
|
|
|
2666
2692
|
"data-hsk-theme": hskThemeAttr,
|
|
2667
2693
|
"aria-label": "Open AI chat",
|
|
2668
2694
|
children: [
|
|
2669
|
-
/* @__PURE__ */
|
|
2695
|
+
/* @__PURE__ */ jsx9("span", { className: "hsk-cb-btn-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx9(SparkleIcon2, {}) }),
|
|
2670
2696
|
label !== void 0 ? label : null
|
|
2671
2697
|
]
|
|
2672
2698
|
}
|
|
2673
2699
|
),
|
|
2674
2700
|
open && mounted && createPortal(
|
|
2675
|
-
/* @__PURE__ */
|
|
2701
|
+
/* @__PURE__ */ jsx9(
|
|
2676
2702
|
ChatModal,
|
|
2677
2703
|
{
|
|
2678
2704
|
title,
|
|
@@ -2700,8 +2726,8 @@ function KikuButton({
|
|
|
2700
2726
|
import { useState as useState7, useEffect as useEffect5, useRef as useRef7 } from "react";
|
|
2701
2727
|
import { createPortal as createPortal2 } from "react-dom";
|
|
2702
2728
|
import { useSearch as useSearch2, useKiku as useKiku3, useAkropolysContext as useAkropolysContext4 } from "@akropolys/sdk";
|
|
2703
|
-
import { Fragment as Fragment4, jsx as
|
|
2704
|
-
var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */
|
|
2729
|
+
import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
2730
|
+
var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsx10(
|
|
2705
2731
|
"svg",
|
|
2706
2732
|
{
|
|
2707
2733
|
className: cn("hsk-brand-mark", className),
|
|
@@ -2710,19 +2736,15 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsx9(
|
|
|
2710
2736
|
viewBox: "0 0 100 100",
|
|
2711
2737
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2712
2738
|
"aria-label": "kiku",
|
|
2713
|
-
children: /* @__PURE__ */
|
|
2714
|
-
/* @__PURE__ */
|
|
2715
|
-
/* @__PURE__ */
|
|
2739
|
+
children: /* @__PURE__ */ jsxs9("g", { transform: "translate(22.7 19) scale(0.62)", fill: "currentColor", fillRule: "evenodd", children: [
|
|
2740
|
+
/* @__PURE__ */ jsx10("path", { d: "M39.4 10.4 Q44 0 48.6 10.4 L86.1 95.8 Q88 100 83.4 100 L4.6 100 Q0 100 1.9 95.8 Z M24 100 L24 65 Q24 60 27.4 56.3 Q44 38 60.6 56.3 Q64 60 64 65 L64 100 Z" }),
|
|
2741
|
+
/* @__PURE__ */ jsx10("circle", { cx: "55", cy: "82", r: "3.4" })
|
|
2716
2742
|
] })
|
|
2717
2743
|
}
|
|
2718
2744
|
);
|
|
2719
|
-
var CloseIcon2 = () => /* @__PURE__ */
|
|
2720
|
-
/* @__PURE__ */
|
|
2721
|
-
/* @__PURE__ */
|
|
2722
|
-
] });
|
|
2723
|
-
var ArrowUpIcon3 = () => /* @__PURE__ */ jsxs8("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
2724
|
-
/* @__PURE__ */ jsx9("path", { d: "m5 12 7-7 7 7" }),
|
|
2725
|
-
/* @__PURE__ */ jsx9("path", { d: "M12 19V5" })
|
|
2745
|
+
var CloseIcon2 = () => /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
2746
|
+
/* @__PURE__ */ jsx10("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
2747
|
+
/* @__PURE__ */ jsx10("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
2726
2748
|
] });
|
|
2727
2749
|
var getFriendlyError2 = (err) => {
|
|
2728
2750
|
let str = "";
|
|
@@ -2848,7 +2870,7 @@ Question: ${q}`;
|
|
|
2848
2870
|
}
|
|
2849
2871
|
] : messages;
|
|
2850
2872
|
if (isMobile) {
|
|
2851
|
-
return /* @__PURE__ */
|
|
2873
|
+
return /* @__PURE__ */ jsx10(
|
|
2852
2874
|
"div",
|
|
2853
2875
|
{
|
|
2854
2876
|
className: cn("hsk-sp-backdrop hsk-sp-mobile-view", classNames.backdrop),
|
|
@@ -2859,13 +2881,13 @@ Question: ${q}`;
|
|
|
2859
2881
|
background: bg ?? void 0,
|
|
2860
2882
|
...customStyles
|
|
2861
2883
|
},
|
|
2862
|
-
children: /* @__PURE__ */
|
|
2863
|
-
/* @__PURE__ */
|
|
2864
|
-
/* @__PURE__ */
|
|
2865
|
-
/* @__PURE__ */
|
|
2866
|
-
/* @__PURE__ */
|
|
2867
|
-
/* @__PURE__ */
|
|
2868
|
-
displayProduct && /* @__PURE__ */
|
|
2884
|
+
children: /* @__PURE__ */ jsxs9("div", { className: cn("hsk-sp-card hsk-sp-fullscreen hsk-sp-mobile-card", classNames.card), onClick: (e) => e.stopPropagation(), children: [
|
|
2885
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-header", children: [
|
|
2886
|
+
/* @__PURE__ */ jsx10("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx10(SparkleIcon3, {}) }),
|
|
2887
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-header-body", children: [
|
|
2888
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-header-title-row", children: [
|
|
2889
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-header-title", children: displayProduct?.name || productName }),
|
|
2890
|
+
displayProduct && /* @__PURE__ */ jsx10(
|
|
2869
2891
|
"button",
|
|
2870
2892
|
{
|
|
2871
2893
|
type: "button",
|
|
@@ -2875,32 +2897,32 @@ Question: ${q}`;
|
|
|
2875
2897
|
}
|
|
2876
2898
|
)
|
|
2877
2899
|
] }),
|
|
2878
|
-
/* @__PURE__ */
|
|
2900
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-header-sub", children: "kiku" })
|
|
2879
2901
|
] }),
|
|
2880
|
-
/* @__PURE__ */
|
|
2902
|
+
/* @__PURE__ */ jsx10("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx10(CloseIcon2, {}) })
|
|
2881
2903
|
] }),
|
|
2882
|
-
searchLoading && /* @__PURE__ */
|
|
2883
|
-
/* @__PURE__ */
|
|
2884
|
-
/* @__PURE__ */
|
|
2904
|
+
searchLoading && /* @__PURE__ */ jsx10("div", { className: "hsk-sp-bar" }),
|
|
2905
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-chat-container", children: [
|
|
2906
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-cb-msgs", children: [
|
|
2885
2907
|
displayMessages.map((msg, idx) => {
|
|
2886
2908
|
const isUser = msg.role === "user";
|
|
2887
|
-
return /* @__PURE__ */
|
|
2888
|
-
/* @__PURE__ */
|
|
2889
|
-
/* @__PURE__ */
|
|
2890
|
-
/* @__PURE__ */
|
|
2891
|
-
idx === 0 && displayProduct && /* @__PURE__ */
|
|
2892
|
-
/* @__PURE__ */
|
|
2893
|
-
/* @__PURE__ */
|
|
2894
|
-
/* @__PURE__ */
|
|
2895
|
-
/* @__PURE__ */
|
|
2896
|
-
/* @__PURE__ */
|
|
2897
|
-
/* @__PURE__ */
|
|
2909
|
+
return /* @__PURE__ */ jsx10("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsx10("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ jsx10("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ jsxs9("div", { className: "hsk-cb-ai-msg", children: [
|
|
2910
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx10(SparkleIcon3, {}) }),
|
|
2911
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-cb-ai-body", children: [
|
|
2912
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }),
|
|
2913
|
+
idx === 0 && displayProduct && /* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-attachment-deck", children: [
|
|
2914
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-main-card", children: [
|
|
2915
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-mobile-main-card-img", children: displayProduct.images?.[0] ? /* @__PURE__ */ jsx10("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ jsx10("span", { children: "\xF0\u0178\u203A\x8D" }) }),
|
|
2916
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-main-card-info", children: [
|
|
2917
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-mobile-main-card-brand", children: displayProduct.brand || displayProduct.category || "Product" }),
|
|
2918
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-mobile-main-card-name", children: displayProduct.name }),
|
|
2919
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-main-card-price", children: [
|
|
2898
2920
|
displayProduct.currency ?? "KES",
|
|
2899
2921
|
" ",
|
|
2900
2922
|
parseFloat(displayProduct.price?.replace(/[^0-9.]/g, "") || "0").toLocaleString()
|
|
2901
2923
|
] })
|
|
2902
2924
|
] }),
|
|
2903
|
-
(displayProduct.specs && Object.keys(displayProduct.specs).length > 0 || displayProduct.description) && /* @__PURE__ */
|
|
2925
|
+
(displayProduct.specs && Object.keys(displayProduct.specs).length > 0 || displayProduct.description) && /* @__PURE__ */ jsx10(
|
|
2904
2926
|
"button",
|
|
2905
2927
|
{
|
|
2906
2928
|
type: "button",
|
|
@@ -2919,21 +2941,21 @@ Question: ${q}`;
|
|
|
2919
2941
|
}
|
|
2920
2942
|
);
|
|
2921
2943
|
if (similarProducts.length === 0) return null;
|
|
2922
|
-
return /* @__PURE__ */
|
|
2923
|
-
/* @__PURE__ */
|
|
2924
|
-
/* @__PURE__ */
|
|
2944
|
+
return /* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-similar-carousel-inline", children: [
|
|
2945
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-mobile-similar-carousel-title", children: "Similar Products" }),
|
|
2946
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-mobile-similar-carousel-list", children: similarProducts.map((r) => {
|
|
2925
2947
|
const price = parseFloat(r.entity.price?.replace(/[^0-9.]/g, "") || "0");
|
|
2926
2948
|
const currency = r.entity.currency ?? "KES";
|
|
2927
|
-
return /* @__PURE__ */
|
|
2949
|
+
return /* @__PURE__ */ jsxs9(
|
|
2928
2950
|
"div",
|
|
2929
2951
|
{
|
|
2930
2952
|
className: "hsk-sp-mobile-similar-carousel-item",
|
|
2931
2953
|
onClick: () => handleNav(r),
|
|
2932
2954
|
children: [
|
|
2933
|
-
/* @__PURE__ */
|
|
2934
|
-
/* @__PURE__ */
|
|
2935
|
-
/* @__PURE__ */
|
|
2936
|
-
/* @__PURE__ */
|
|
2955
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-mobile-similar-carousel-img", children: r.entity.images?.[0] ? /* @__PURE__ */ jsx10("img", { src: r.entity.images[0], alt: r.entity.name }) : /* @__PURE__ */ jsx10("span", { children: "\xF0\u0178\u203A\x8D" }) }),
|
|
2956
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-similar-carousel-meta", children: [
|
|
2957
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-mobile-similar-carousel-name", title: r.entity.name, children: r.entity.name }),
|
|
2958
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-similar-carousel-price", children: [
|
|
2937
2959
|
currency,
|
|
2938
2960
|
" ",
|
|
2939
2961
|
price.toLocaleString()
|
|
@@ -2950,19 +2972,19 @@ Question: ${q}`;
|
|
|
2950
2972
|
] })
|
|
2951
2973
|
] }) }, idx);
|
|
2952
2974
|
}),
|
|
2953
|
-
chatLoading && /* @__PURE__ */
|
|
2954
|
-
/* @__PURE__ */
|
|
2955
|
-
/* @__PURE__ */
|
|
2956
|
-
/* @__PURE__ */
|
|
2957
|
-
/* @__PURE__ */
|
|
2958
|
-
/* @__PURE__ */
|
|
2975
|
+
chatLoading && /* @__PURE__ */ jsxs9("div", { className: "hsk-cb-typing-row", children: [
|
|
2976
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx10(SparkleIcon3, {}) }),
|
|
2977
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-cb-typing", children: [
|
|
2978
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-dot" }),
|
|
2979
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-dot" }),
|
|
2980
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-dot" })
|
|
2959
2981
|
] })
|
|
2960
2982
|
] }),
|
|
2961
|
-
chatError && /* @__PURE__ */
|
|
2962
|
-
/* @__PURE__ */
|
|
2983
|
+
chatError && /* @__PURE__ */ jsx10("div", { className: "hsk-cb-error", children: getFriendlyError2(chatError) }),
|
|
2984
|
+
/* @__PURE__ */ jsx10("div", { ref: chatBottomRef, style: { height: 1 } })
|
|
2963
2985
|
] }),
|
|
2964
|
-
/* @__PURE__ */
|
|
2965
|
-
/* @__PURE__ */
|
|
2986
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-input-wrap", children: /* @__PURE__ */ jsxs9("div", { className: "hsk-cb-input-box", children: [
|
|
2987
|
+
/* @__PURE__ */ jsx10(
|
|
2966
2988
|
"textarea",
|
|
2967
2989
|
{
|
|
2968
2990
|
ref: chatTextareaRef,
|
|
@@ -2975,34 +2997,34 @@ Question: ${q}`;
|
|
|
2975
2997
|
disabled: chatLoading
|
|
2976
2998
|
}
|
|
2977
2999
|
),
|
|
2978
|
-
/* @__PURE__ */
|
|
3000
|
+
/* @__PURE__ */ jsx10(
|
|
2979
3001
|
"button",
|
|
2980
3002
|
{
|
|
2981
3003
|
className: "hsk-cb-send",
|
|
2982
3004
|
onClick: () => handleSend(),
|
|
2983
3005
|
disabled: !chatInput.trim() || chatLoading,
|
|
2984
3006
|
"aria-label": "Send message",
|
|
2985
|
-
children: /* @__PURE__ */
|
|
3007
|
+
children: /* @__PURE__ */ jsx10(ArrowUpIcon, {})
|
|
2986
3008
|
}
|
|
2987
3009
|
)
|
|
2988
3010
|
] }) })
|
|
2989
3011
|
] }),
|
|
2990
|
-
showSpecs && displayProduct && /* @__PURE__ */
|
|
2991
|
-
/* @__PURE__ */
|
|
2992
|
-
/* @__PURE__ */
|
|
2993
|
-
/* @__PURE__ */
|
|
3012
|
+
showSpecs && displayProduct && /* @__PURE__ */ jsx10("div", { className: "hsk-sp-mobile-specs-overlay", onClick: () => setShowSpecs(false), children: /* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-specs-drawer", onClick: (e) => e.stopPropagation(), children: [
|
|
3013
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-specs-header", children: [
|
|
3014
|
+
/* @__PURE__ */ jsx10("h3", { children: "Specifications" }),
|
|
3015
|
+
/* @__PURE__ */ jsx10("button", { type: "button", onClick: () => setShowSpecs(false), children: "Close" })
|
|
2994
3016
|
] }),
|
|
2995
|
-
/* @__PURE__ */
|
|
2996
|
-
/* @__PURE__ */
|
|
2997
|
-
displayProduct.description && /* @__PURE__ */
|
|
2998
|
-
/* @__PURE__ */
|
|
2999
|
-
/* @__PURE__ */
|
|
3017
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-specs-body", children: [
|
|
3018
|
+
/* @__PURE__ */ jsx10("h4", { className: "hsk-sp-mobile-specs-title", children: displayProduct.name }),
|
|
3019
|
+
displayProduct.description && /* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-specs-desc", children: [
|
|
3020
|
+
/* @__PURE__ */ jsx10("h5", { children: "Description" }),
|
|
3021
|
+
/* @__PURE__ */ jsx10("p", { children: displayProduct.description })
|
|
3000
3022
|
] }),
|
|
3001
|
-
displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */
|
|
3002
|
-
/* @__PURE__ */
|
|
3003
|
-
Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */
|
|
3004
|
-
/* @__PURE__ */
|
|
3005
|
-
/* @__PURE__ */
|
|
3023
|
+
displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-specs-list", children: [
|
|
3024
|
+
/* @__PURE__ */ jsx10("h5", { children: "Details" }),
|
|
3025
|
+
Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ jsxs9("div", { className: "hsk-sp-mobile-spec-row", children: [
|
|
3026
|
+
/* @__PURE__ */ jsx10("span", { className: "hsk-sp-mobile-spec-label", children: key }),
|
|
3027
|
+
/* @__PURE__ */ jsx10("span", { className: "hsk-sp-mobile-spec-value", children: val })
|
|
3006
3028
|
] }, key))
|
|
3007
3029
|
] })
|
|
3008
3030
|
] })
|
|
@@ -3011,7 +3033,7 @@ Question: ${q}`;
|
|
|
3011
3033
|
}
|
|
3012
3034
|
);
|
|
3013
3035
|
}
|
|
3014
|
-
return /* @__PURE__ */
|
|
3036
|
+
return /* @__PURE__ */ jsx10(
|
|
3015
3037
|
"div",
|
|
3016
3038
|
{
|
|
3017
3039
|
className: cn("hsk-sp-backdrop", classNames.backdrop),
|
|
@@ -3022,65 +3044,65 @@ Question: ${q}`;
|
|
|
3022
3044
|
background: bg ?? void 0,
|
|
3023
3045
|
...customStyles
|
|
3024
3046
|
},
|
|
3025
|
-
children: /* @__PURE__ */
|
|
3026
|
-
/* @__PURE__ */
|
|
3027
|
-
/* @__PURE__ */
|
|
3028
|
-
/* @__PURE__ */
|
|
3029
|
-
/* @__PURE__ */
|
|
3030
|
-
/* @__PURE__ */
|
|
3047
|
+
children: /* @__PURE__ */ jsxs9("div", { className: cn("hsk-sp-card hsk-sp-fullscreen", classNames.card), onClick: (e) => e.stopPropagation(), children: [
|
|
3048
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-header", children: [
|
|
3049
|
+
/* @__PURE__ */ jsx10("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx10(SparkleIcon3, {}) }),
|
|
3050
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-header-body", children: [
|
|
3051
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-header-title", children: displayProduct?.name || productName }),
|
|
3052
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-header-sub", children: "Ask questions, compare specs, or check similar products" })
|
|
3031
3053
|
] }),
|
|
3032
|
-
/* @__PURE__ */
|
|
3054
|
+
/* @__PURE__ */ jsx10("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx10(CloseIcon2, {}) })
|
|
3033
3055
|
] }),
|
|
3034
|
-
searchLoading && /* @__PURE__ */
|
|
3035
|
-
/* @__PURE__ */
|
|
3036
|
-
/* @__PURE__ */
|
|
3037
|
-
displayProduct && /* @__PURE__ */
|
|
3038
|
-
/* @__PURE__ */
|
|
3039
|
-
/* @__PURE__ */
|
|
3040
|
-
/* @__PURE__ */
|
|
3041
|
-
displayProduct.brand && /* @__PURE__ */
|
|
3042
|
-
displayProduct.category && /* @__PURE__ */
|
|
3043
|
-
/* @__PURE__ */
|
|
3044
|
-
/* @__PURE__ */
|
|
3045
|
-
/* @__PURE__ */
|
|
3046
|
-
/* @__PURE__ */
|
|
3047
|
-
displayProduct.originalPrice && /* @__PURE__ */
|
|
3048
|
-
displayProduct.discount && /* @__PURE__ */
|
|
3056
|
+
searchLoading && /* @__PURE__ */ jsx10("div", { className: "hsk-sp-bar" }),
|
|
3057
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-body", children: [
|
|
3058
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-details-pane", children: [
|
|
3059
|
+
displayProduct && /* @__PURE__ */ jsxs9("div", { className: "hsk-sp-product-profile-container", children: [
|
|
3060
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-product-profile", children: [
|
|
3061
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-details-imgwrap", children: displayProduct.images?.[0] ? /* @__PURE__ */ jsx10("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ jsx10("span", { className: "hsk-sp-img-placeholder", children: "\xF0\u0178\u203A\x8D" }) }),
|
|
3062
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-details-meta", children: [
|
|
3063
|
+
displayProduct.brand && /* @__PURE__ */ jsx10("span", { className: "hsk-sp-item-brand", children: displayProduct.brand }),
|
|
3064
|
+
displayProduct.category && /* @__PURE__ */ jsx10("span", { className: "hsk-sp-item-cat", children: displayProduct.category }),
|
|
3065
|
+
/* @__PURE__ */ jsx10("h2", { className: "hsk-sp-details-name", children: displayProduct.name }),
|
|
3066
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-item-price-row", children: [
|
|
3067
|
+
/* @__PURE__ */ jsx10("span", { className: "hsk-sp-item-currency", children: displayProduct.currency ?? "KES" }),
|
|
3068
|
+
/* @__PURE__ */ jsx10("span", { className: "hsk-sp-item-price", children: parseFloat(displayProduct.price?.replace(/[^0-9.]/g, "") || "0").toLocaleString() }),
|
|
3069
|
+
displayProduct.originalPrice && /* @__PURE__ */ jsx10("span", { className: "hsk-sp-item-original-price", children: parseFloat(displayProduct.originalPrice.replace(/[^0-9.]/g, "") || "0").toLocaleString() }),
|
|
3070
|
+
displayProduct.discount && /* @__PURE__ */ jsxs9("span", { className: "hsk-sp-item-discount", children: [
|
|
3049
3071
|
"(",
|
|
3050
3072
|
displayProduct.discount,
|
|
3051
3073
|
")"
|
|
3052
3074
|
] })
|
|
3053
3075
|
] }),
|
|
3054
|
-
/* @__PURE__ */
|
|
3055
|
-
displayProduct.rating && /* @__PURE__ */
|
|
3076
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-item-meta-badges", children: [
|
|
3077
|
+
displayProduct.rating && /* @__PURE__ */ jsxs9("span", { className: "hsk-sp-meta-badge hsk-sp-meta-badge-rating", children: [
|
|
3056
3078
|
"\xE2\u02DC\u2026 ",
|
|
3057
3079
|
parseFloat(displayProduct.rating.toString()).toFixed(1),
|
|
3058
3080
|
" ",
|
|
3059
3081
|
displayProduct.reviewCount ? `(${displayProduct.reviewCount})` : ""
|
|
3060
3082
|
] }),
|
|
3061
|
-
displayProduct.availability && /* @__PURE__ */
|
|
3062
|
-
displayProduct.stock && !displayProduct.availability && /* @__PURE__ */
|
|
3083
|
+
displayProduct.availability && /* @__PURE__ */ jsx10("span", { className: `hsk-sp-meta-badge hsk-sp-meta-badge-avail ${displayProduct.availability.toLowerCase().includes("in") ? "in-stock" : "out-stock"}`, children: displayProduct.availability }),
|
|
3084
|
+
displayProduct.stock && !displayProduct.availability && /* @__PURE__ */ jsxs9("span", { className: "hsk-sp-meta-badge hsk-sp-meta-badge-stock", children: [
|
|
3063
3085
|
"Stock: ",
|
|
3064
3086
|
displayProduct.stock
|
|
3065
3087
|
] })
|
|
3066
3088
|
] })
|
|
3067
3089
|
] })
|
|
3068
3090
|
] }),
|
|
3069
|
-
displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */
|
|
3070
|
-
/* @__PURE__ */
|
|
3091
|
+
displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ jsx10("div", { className: "hsk-sp-specs-horizontal", children: Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ jsxs9("div", { className: "hsk-sp-spec-item-horizontal", children: [
|
|
3092
|
+
/* @__PURE__ */ jsxs9("span", { className: "hsk-sp-spec-label-horizontal", children: [
|
|
3071
3093
|
key,
|
|
3072
3094
|
":"
|
|
3073
3095
|
] }),
|
|
3074
|
-
/* @__PURE__ */
|
|
3096
|
+
/* @__PURE__ */ jsx10("span", { className: "hsk-sp-spec-value-horizontal", title: val, children: val })
|
|
3075
3097
|
] }, key)) }),
|
|
3076
|
-
displayProduct.description && /* @__PURE__ */
|
|
3077
|
-
/* @__PURE__ */
|
|
3078
|
-
/* @__PURE__ */
|
|
3098
|
+
displayProduct.description && /* @__PURE__ */ jsxs9("div", { className: "hsk-sp-details-desc", children: [
|
|
3099
|
+
/* @__PURE__ */ jsx10("h4", { children: "Description" }),
|
|
3100
|
+
/* @__PURE__ */ jsx10("p", { children: displayProduct.description })
|
|
3079
3101
|
] })
|
|
3080
3102
|
] }),
|
|
3081
|
-
/* @__PURE__ */
|
|
3082
|
-
/* @__PURE__ */
|
|
3083
|
-
/* @__PURE__ */
|
|
3103
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-similar-section", children: [
|
|
3104
|
+
/* @__PURE__ */ jsx10("h3", { children: "Similar Products" }),
|
|
3105
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-results", children: (() => {
|
|
3084
3106
|
const similarProducts = results.filter(
|
|
3085
3107
|
(r) => {
|
|
3086
3108
|
const isSameName = !!(r.entity.name && displayProduct?.name && r.entity.name.toLowerCase() === displayProduct.name.toLowerCase());
|
|
@@ -3089,29 +3111,29 @@ Question: ${q}`;
|
|
|
3089
3111
|
}
|
|
3090
3112
|
);
|
|
3091
3113
|
if (!searchLoading && similarProducts.length === 0) {
|
|
3092
|
-
return /* @__PURE__ */
|
|
3114
|
+
return /* @__PURE__ */ jsx10("div", { className: "hsk-sp-empty", children: "No similar products found." });
|
|
3093
3115
|
}
|
|
3094
3116
|
return similarProducts.map((r, i) => {
|
|
3095
3117
|
const price = parseFloat(r.entity.price?.replace(/[^0-9.]/g, "") || "0");
|
|
3096
3118
|
const currency = r.entity.currency ?? "KES";
|
|
3097
|
-
return /* @__PURE__ */
|
|
3119
|
+
return /* @__PURE__ */ jsxs9(
|
|
3098
3120
|
"div",
|
|
3099
3121
|
{
|
|
3100
3122
|
className: cn("hsk-sp-item", classNames.item),
|
|
3101
3123
|
style: { animationDelay: `${i * 55}ms`, cursor: "pointer" },
|
|
3102
3124
|
onClick: () => handleNav(r),
|
|
3103
3125
|
children: [
|
|
3104
|
-
/* @__PURE__ */
|
|
3105
|
-
/* @__PURE__ */
|
|
3106
|
-
/* @__PURE__ */
|
|
3107
|
-
r.entity.category && /* @__PURE__ */
|
|
3108
|
-
/* @__PURE__ */
|
|
3126
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-img-wrap", children: r.entity.images?.[0] ? /* @__PURE__ */ jsx10("img", { src: r.entity.images[0], alt: r.entity.name }) : /* @__PURE__ */ jsx10("span", { className: "hsk-sp-img-placeholder", children: "\xF0\u0178\u203A\x8D" }) }),
|
|
3127
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-item-body", children: [
|
|
3128
|
+
/* @__PURE__ */ jsxs9("div", { children: [
|
|
3129
|
+
r.entity.category && /* @__PURE__ */ jsx10("div", { className: "hsk-sp-item-cat", children: r.entity.category }),
|
|
3130
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-item-name", title: r.entity.name, children: r.entity.name })
|
|
3109
3131
|
] }),
|
|
3110
|
-
/* @__PURE__ */
|
|
3111
|
-
/* @__PURE__ */
|
|
3112
|
-
/* @__PURE__ */
|
|
3132
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-item-price-row", children: [
|
|
3133
|
+
/* @__PURE__ */ jsx10("span", { className: "hsk-sp-item-currency", children: currency }),
|
|
3134
|
+
/* @__PURE__ */ jsx10("span", { className: "hsk-sp-item-price", children: price.toLocaleString() })
|
|
3113
3135
|
] }),
|
|
3114
|
-
/* @__PURE__ */
|
|
3136
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-actions", children: /* @__PURE__ */ jsx10(
|
|
3115
3137
|
"button",
|
|
3116
3138
|
{
|
|
3117
3139
|
className: "hsk-sp-action hsk-sp-action-primary",
|
|
@@ -3131,29 +3153,29 @@ Question: ${q}`;
|
|
|
3131
3153
|
})() })
|
|
3132
3154
|
] })
|
|
3133
3155
|
] }),
|
|
3134
|
-
/* @__PURE__ */
|
|
3135
|
-
/* @__PURE__ */
|
|
3156
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-sp-chat-pane", children: [
|
|
3157
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-cb-msgs", children: [
|
|
3136
3158
|
displayMessages.map((msg, idx) => {
|
|
3137
3159
|
const isUser = msg.role === "user";
|
|
3138
|
-
return /* @__PURE__ */
|
|
3139
|
-
/* @__PURE__ */
|
|
3140
|
-
/* @__PURE__ */
|
|
3160
|
+
return /* @__PURE__ */ jsx10("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsx10("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ jsx10("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ jsxs9("div", { className: "hsk-cb-ai-msg", children: [
|
|
3161
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx10(SparkleIcon3, {}) }),
|
|
3162
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ jsx10("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }) })
|
|
3141
3163
|
] }) }, idx);
|
|
3142
3164
|
}),
|
|
3143
|
-
chatLoading && /* @__PURE__ */
|
|
3144
|
-
/* @__PURE__ */
|
|
3145
|
-
/* @__PURE__ */
|
|
3146
|
-
/* @__PURE__ */
|
|
3147
|
-
/* @__PURE__ */
|
|
3148
|
-
/* @__PURE__ */
|
|
3165
|
+
chatLoading && /* @__PURE__ */ jsxs9("div", { className: "hsk-cb-typing-row", children: [
|
|
3166
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx10(SparkleIcon3, {}) }),
|
|
3167
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-cb-typing", children: [
|
|
3168
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-dot" }),
|
|
3169
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-dot" }),
|
|
3170
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-dot" })
|
|
3149
3171
|
] })
|
|
3150
3172
|
] }),
|
|
3151
|
-
chatError && /* @__PURE__ */
|
|
3152
|
-
/* @__PURE__ */
|
|
3173
|
+
chatError && /* @__PURE__ */ jsx10("div", { className: "hsk-cb-error", children: getFriendlyError2(chatError) }),
|
|
3174
|
+
/* @__PURE__ */ jsx10("div", { ref: chatBottomRef, style: { height: 1 } })
|
|
3153
3175
|
] }),
|
|
3154
|
-
/* @__PURE__ */
|
|
3155
|
-
/* @__PURE__ */
|
|
3156
|
-
/* @__PURE__ */
|
|
3176
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-cb-input-wrap", children: [
|
|
3177
|
+
/* @__PURE__ */ jsxs9("div", { className: "hsk-cb-input-box", children: [
|
|
3178
|
+
/* @__PURE__ */ jsx10(
|
|
3157
3179
|
"textarea",
|
|
3158
3180
|
{
|
|
3159
3181
|
ref: chatTextareaRef,
|
|
@@ -3166,22 +3188,22 @@ Question: ${q}`;
|
|
|
3166
3188
|
disabled: chatLoading
|
|
3167
3189
|
}
|
|
3168
3190
|
),
|
|
3169
|
-
/* @__PURE__ */
|
|
3191
|
+
/* @__PURE__ */ jsx10(
|
|
3170
3192
|
"button",
|
|
3171
3193
|
{
|
|
3172
3194
|
className: "hsk-cb-send",
|
|
3173
3195
|
onClick: () => handleSend(),
|
|
3174
3196
|
disabled: !chatInput.trim() || chatLoading,
|
|
3175
3197
|
"aria-label": "Send message",
|
|
3176
|
-
children: /* @__PURE__ */
|
|
3198
|
+
children: /* @__PURE__ */ jsx10(ArrowUpIcon, {})
|
|
3177
3199
|
}
|
|
3178
3200
|
)
|
|
3179
3201
|
] }),
|
|
3180
|
-
/* @__PURE__ */
|
|
3202
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-cb-hint", children: "Akropolys \xB7 instant product knowledge" })
|
|
3181
3203
|
] })
|
|
3182
3204
|
] })
|
|
3183
3205
|
] }),
|
|
3184
|
-
/* @__PURE__ */
|
|
3206
|
+
/* @__PURE__ */ jsx10("div", { className: "hsk-sp-footer", children: /* @__PURE__ */ jsx10("span", { className: "hsk-sp-esc", children: "Esc to close" }) })
|
|
3185
3207
|
] })
|
|
3186
3208
|
}
|
|
3187
3209
|
);
|
|
@@ -3211,8 +3233,8 @@ function Sparkle({
|
|
|
3211
3233
|
...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
|
|
3212
3234
|
...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
|
|
3213
3235
|
};
|
|
3214
|
-
return /* @__PURE__ */
|
|
3215
|
-
/* @__PURE__ */
|
|
3236
|
+
return /* @__PURE__ */ jsxs9(Fragment4, { children: [
|
|
3237
|
+
/* @__PURE__ */ jsx10(
|
|
3216
3238
|
"button",
|
|
3217
3239
|
{
|
|
3218
3240
|
className: cn("hsk-sp-btn", classNames.button, className),
|
|
@@ -3220,11 +3242,11 @@ function Sparkle({
|
|
|
3220
3242
|
style: customStyles,
|
|
3221
3243
|
title: "Find similar products",
|
|
3222
3244
|
"aria-label": "Find similar products",
|
|
3223
|
-
children: children || /* @__PURE__ */
|
|
3245
|
+
children: children || /* @__PURE__ */ jsx10(SparkleIcon3, {})
|
|
3224
3246
|
}
|
|
3225
3247
|
),
|
|
3226
3248
|
open && mounted && createPortal2(
|
|
3227
|
-
/* @__PURE__ */
|
|
3249
|
+
/* @__PURE__ */ jsx10(
|
|
3228
3250
|
SparkleModal,
|
|
3229
3251
|
{
|
|
3230
3252
|
productName,
|