@openwarelabs/ui 0.10.1 → 0.11.0
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/components/Container/Container.d.cts +7 -0
- package/dist/components/Container/Container.d.ts +7 -0
- package/dist/components/Container/Container.types.d.cts +12 -0
- package/dist/components/Container/Container.types.d.ts +12 -0
- package/dist/components/Section/Section.d.cts +7 -0
- package/dist/components/Section/Section.d.ts +7 -0
- package/dist/components/Section/Section.types.d.cts +16 -0
- package/dist/components/Section/Section.types.d.ts +16 -0
- package/dist/components.css +67 -0
- package/dist/index.cjs +299 -285
- package/dist/index.cjs.map +4 -4
- package/dist/index.d.cts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +217 -203
- package/dist/index.js.map +4 -4
- package/dist/openware-ui.iife.js +6 -6
- package/dist/styles.css +70 -0
- package/dist/tokens.css +3 -0
- package/dist/tokens.json +15 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -56,6 +56,7 @@ __export(index_exports, {
|
|
|
56
56
|
Combobox: () => Combobox,
|
|
57
57
|
CommandPalette: () => CommandPalette,
|
|
58
58
|
ConfirmDialog: () => ConfirmDialog,
|
|
59
|
+
Container: () => Container,
|
|
59
60
|
CopyButton: () => CopyButton,
|
|
60
61
|
DateField: () => DateField,
|
|
61
62
|
DatePicker: () => DatePicker,
|
|
@@ -97,6 +98,7 @@ __export(index_exports, {
|
|
|
97
98
|
RangeCalendar: () => RangeCalendar,
|
|
98
99
|
ScrollShadow: () => ScrollShadow,
|
|
99
100
|
SearchField: () => SearchField,
|
|
101
|
+
Section: () => Section,
|
|
100
102
|
SectionHeading: () => SectionHeading,
|
|
101
103
|
SegmentedControl: () => SegmentedControl,
|
|
102
104
|
Select: () => Select,
|
|
@@ -6430,11 +6432,23 @@ function VisuallyHidden({ className, ...props }) {
|
|
|
6430
6432
|
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: cx("ow-visually-hidden", className), ...props });
|
|
6431
6433
|
}
|
|
6432
6434
|
|
|
6435
|
+
// src/components/Container/Container.tsx
|
|
6436
|
+
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
6437
|
+
function Container({ size: size2 = "page", as: Element2 = "div", className, ...props }) {
|
|
6438
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Element2, { className: cx("ow-container", `ow-container--${size2}`, className), ...props });
|
|
6439
|
+
}
|
|
6440
|
+
|
|
6441
|
+
// src/components/Section/Section.tsx
|
|
6442
|
+
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
6443
|
+
function Section({ tone = "paper", spacing = "md", size: size2 = "page", as: Element2 = "section", className, children, ...props }) {
|
|
6444
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Element2, { className: cx("ow-section", `ow-section--${tone}`, `ow-section--space-${spacing}`, className), ...props, children: size2 === false ? children : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Container, { size: size2, children }) });
|
|
6445
|
+
}
|
|
6446
|
+
|
|
6433
6447
|
// src/components/Marketing/Marketing.tsx
|
|
6434
6448
|
var import_react56 = require("react");
|
|
6435
|
-
var
|
|
6449
|
+
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
6436
6450
|
function Chip({ className, ...props }) {
|
|
6437
|
-
return /* @__PURE__ */ (0,
|
|
6451
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: cx("ow-chip", className), ...props });
|
|
6438
6452
|
}
|
|
6439
6453
|
function SectionHeading({
|
|
6440
6454
|
eyebrow,
|
|
@@ -6444,17 +6458,17 @@ function SectionHeading({
|
|
|
6444
6458
|
as: Heading = "h2",
|
|
6445
6459
|
className
|
|
6446
6460
|
}) {
|
|
6447
|
-
return /* @__PURE__ */ (0,
|
|
6448
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
6449
|
-
/* @__PURE__ */ (0,
|
|
6450
|
-
intro ? /* @__PURE__ */ (0,
|
|
6461
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cx("ow-section-heading", align === "center" && "ow-section-heading--center", className), children: [
|
|
6462
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Chip, { children: eyebrow }) : null,
|
|
6463
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Heading, { className: "ow-section-heading__title", children: title }),
|
|
6464
|
+
intro ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "ow-section-heading__intro", children: intro }) : null
|
|
6451
6465
|
] });
|
|
6452
6466
|
}
|
|
6453
6467
|
function SiteHeader({ brand, nav, actions, className }) {
|
|
6454
|
-
return /* @__PURE__ */ (0,
|
|
6455
|
-
/* @__PURE__ */ (0,
|
|
6456
|
-
nav ? /* @__PURE__ */ (0,
|
|
6457
|
-
actions ? /* @__PURE__ */ (0,
|
|
6468
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("header", { className: cx("ow-site-header", className), children: [
|
|
6469
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ow-site-header__brand", children: brand }),
|
|
6470
|
+
nav ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("nav", { className: "ow-site-header__nav", children: nav }) : null,
|
|
6471
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ow-site-header__actions", children: actions }) : null
|
|
6458
6472
|
] });
|
|
6459
6473
|
}
|
|
6460
6474
|
function DotGrid({ fade = false, interactive = false, className, children, onPointerMove, ...props }) {
|
|
@@ -6467,7 +6481,7 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
6467
6481
|
element.style.setProperty("--ow-pointer-x", `${event.clientX - rect.left}px`);
|
|
6468
6482
|
element.style.setProperty("--ow-pointer-y", `${event.clientY - rect.top}px`);
|
|
6469
6483
|
}
|
|
6470
|
-
return /* @__PURE__ */ (0,
|
|
6484
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
6471
6485
|
"div",
|
|
6472
6486
|
{
|
|
6473
6487
|
ref,
|
|
@@ -6475,9 +6489,9 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
6475
6489
|
onPointerMove: track,
|
|
6476
6490
|
...props,
|
|
6477
6491
|
children: [
|
|
6478
|
-
/* @__PURE__ */ (0,
|
|
6479
|
-
interactive ? /* @__PURE__ */ (0,
|
|
6480
|
-
/* @__PURE__ */ (0,
|
|
6492
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
|
|
6493
|
+
interactive ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
|
|
6494
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ow-dot-grid__content", children })
|
|
6481
6495
|
]
|
|
6482
6496
|
}
|
|
6483
6497
|
);
|
|
@@ -6485,7 +6499,7 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
6485
6499
|
|
|
6486
6500
|
// src/components/Prose/Prose.tsx
|
|
6487
6501
|
var import_react57 = require("react");
|
|
6488
|
-
var
|
|
6502
|
+
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
6489
6503
|
var Prose = /* @__PURE__ */ (0, import_react57.forwardRef)(function Prose2({ size: size2 = "md", fullWidth = false, as = "div", className, children, ...props }, ref) {
|
|
6490
6504
|
const Element2 = as;
|
|
6491
6505
|
const root = (0, import_react57.useRef)(null);
|
|
@@ -6501,7 +6515,7 @@ var Prose = /* @__PURE__ */ (0, import_react57.forwardRef)(function Prose2({ siz
|
|
|
6501
6515
|
if (text) box.setAttribute("aria-label", text);
|
|
6502
6516
|
}
|
|
6503
6517
|
});
|
|
6504
|
-
return /* @__PURE__ */ (0,
|
|
6518
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
6505
6519
|
Element2,
|
|
6506
6520
|
{
|
|
6507
6521
|
ref: (node) => {
|
|
@@ -6517,10 +6531,10 @@ var Prose = /* @__PURE__ */ (0, import_react57.forwardRef)(function Prose2({ siz
|
|
|
6517
6531
|
});
|
|
6518
6532
|
|
|
6519
6533
|
// src/components/TextShimmer/TextShimmer.tsx
|
|
6520
|
-
var
|
|
6534
|
+
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
6521
6535
|
function TextShimmer({ children, as = "span", duration = 2, active = true, className }) {
|
|
6522
6536
|
const Element2 = as;
|
|
6523
|
-
return /* @__PURE__ */ (0,
|
|
6537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
6524
6538
|
Element2,
|
|
6525
6539
|
{
|
|
6526
6540
|
className: cx("ow-shimmer", active && "ow-shimmer--active", className),
|
|
@@ -6532,12 +6546,12 @@ function TextShimmer({ children, as = "span", duration = 2, active = true, class
|
|
|
6532
6546
|
|
|
6533
6547
|
// src/components/PromptInput/PromptInput.tsx
|
|
6534
6548
|
var import_react58 = require("react");
|
|
6535
|
-
var
|
|
6549
|
+
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
6536
6550
|
var noAttachments = [];
|
|
6537
6551
|
var counterFrom = 0.8;
|
|
6538
6552
|
var announceDelay = 1e3;
|
|
6539
6553
|
function Glyph({ children }) {
|
|
6540
|
-
return /* @__PURE__ */ (0,
|
|
6554
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
6541
6555
|
"svg",
|
|
6542
6556
|
{
|
|
6543
6557
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -6557,29 +6571,29 @@ function Glyph({ children }) {
|
|
|
6557
6571
|
}
|
|
6558
6572
|
var sheet = "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z";
|
|
6559
6573
|
var fold = "M14 2v5a1 1 0 0 0 1 1h5";
|
|
6560
|
-
var PaperclipIcon = () => /* @__PURE__ */ (0,
|
|
6561
|
-
var StopIcon = () => /* @__PURE__ */ (0,
|
|
6574
|
+
var PaperclipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Glyph, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }) });
|
|
6575
|
+
var StopIcon = () => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Glyph, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", fill: "currentColor", stroke: "none" }) });
|
|
6562
6576
|
var fileIcons = {
|
|
6563
|
-
image: /* @__PURE__ */ (0,
|
|
6564
|
-
/* @__PURE__ */ (0,
|
|
6565
|
-
/* @__PURE__ */ (0,
|
|
6566
|
-
/* @__PURE__ */ (0,
|
|
6567
|
-
/* @__PURE__ */ (0,
|
|
6577
|
+
image: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Glyph, { children: [
|
|
6578
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: sheet }),
|
|
6579
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: fold }),
|
|
6580
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("circle", { cx: "10", cy: "12", r: "2" }),
|
|
6581
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" })
|
|
6568
6582
|
] }),
|
|
6569
|
-
code: /* @__PURE__ */ (0,
|
|
6570
|
-
/* @__PURE__ */ (0,
|
|
6571
|
-
/* @__PURE__ */ (0,
|
|
6572
|
-
/* @__PURE__ */ (0,
|
|
6573
|
-
/* @__PURE__ */ (0,
|
|
6583
|
+
code: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Glyph, { children: [
|
|
6584
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: sheet }),
|
|
6585
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: fold }),
|
|
6586
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "M10 12.5 8 15l2 2.5" }),
|
|
6587
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "m14 12.5 2 2.5-2 2.5" })
|
|
6574
6588
|
] }),
|
|
6575
|
-
text: /* @__PURE__ */ (0,
|
|
6576
|
-
/* @__PURE__ */ (0,
|
|
6577
|
-
/* @__PURE__ */ (0,
|
|
6578
|
-
/* @__PURE__ */ (0,
|
|
6579
|
-
/* @__PURE__ */ (0,
|
|
6580
|
-
/* @__PURE__ */ (0,
|
|
6589
|
+
text: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Glyph, { children: [
|
|
6590
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: sheet }),
|
|
6591
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: fold }),
|
|
6592
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "M10 9H8" }),
|
|
6593
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "M16 13H8" }),
|
|
6594
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "M16 17H8" })
|
|
6581
6595
|
] }),
|
|
6582
|
-
file: /* @__PURE__ */ (0,
|
|
6596
|
+
file: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FileIcon, { size: 16 })
|
|
6583
6597
|
};
|
|
6584
6598
|
function kindOf({ name, type = "" }) {
|
|
6585
6599
|
const lower = name.toLowerCase();
|
|
@@ -6772,7 +6786,7 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
|
|
|
6772
6786
|
event.preventDefault();
|
|
6773
6787
|
textAreaRef.current?.focus();
|
|
6774
6788
|
}
|
|
6775
|
-
const attachButton = onAttach ? /* @__PURE__ */ (0,
|
|
6789
|
+
const attachButton = onAttach ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Tooltip, { label: "Attach files", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
6776
6790
|
Button,
|
|
6777
6791
|
{
|
|
6778
6792
|
className: "ow-prompt-input__attach",
|
|
@@ -6782,11 +6796,11 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
|
|
|
6782
6796
|
"aria-label": multiple ? "Attach files" : "Attach a file",
|
|
6783
6797
|
disabled,
|
|
6784
6798
|
onClick: () => pickerRef.current?.click(),
|
|
6785
|
-
children: /* @__PURE__ */ (0,
|
|
6799
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(PaperclipIcon, {})
|
|
6786
6800
|
}
|
|
6787
6801
|
) }) : null;
|
|
6788
6802
|
const actionLabel = isStreaming ? "Stop" : "Send";
|
|
6789
|
-
const actionButton = /* @__PURE__ */ (0,
|
|
6803
|
+
const actionButton = /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Tooltip, { label: actionLabel, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
6790
6804
|
Button,
|
|
6791
6805
|
{
|
|
6792
6806
|
ref: actionRef,
|
|
@@ -6801,10 +6815,10 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
|
|
|
6801
6815
|
else submit();
|
|
6802
6816
|
textAreaRef.current?.focus();
|
|
6803
6817
|
},
|
|
6804
|
-
children: isStreaming ? /* @__PURE__ */ (0,
|
|
6818
|
+
children: isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(StopIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ArrowUpIcon, { size: 16 })
|
|
6805
6819
|
}
|
|
6806
6820
|
) });
|
|
6807
|
-
return /* @__PURE__ */ (0,
|
|
6821
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
6808
6822
|
"div",
|
|
6809
6823
|
{
|
|
6810
6824
|
className: cx(
|
|
@@ -6818,7 +6832,7 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
|
|
|
6818
6832
|
),
|
|
6819
6833
|
style: { "--ow-prompt-min-rows": rows, "--ow-prompt-max-rows": maxRowCount },
|
|
6820
6834
|
children: [
|
|
6821
|
-
/* @__PURE__ */ (0,
|
|
6835
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
6822
6836
|
"fieldset",
|
|
6823
6837
|
{
|
|
6824
6838
|
role: "presentation",
|
|
@@ -6848,12 +6862,12 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
|
|
|
6848
6862
|
take(Array.from(event.dataTransfer.files));
|
|
6849
6863
|
},
|
|
6850
6864
|
children: [
|
|
6851
|
-
attachments.length ? /* @__PURE__ */ (0,
|
|
6865
|
+
attachments.length ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("ul", { ref: listRef, className: "ow-prompt-input__attachments", "aria-label": "Attachments", children: attachments.map((attachment, index) => {
|
|
6852
6866
|
const [base, extension] = splitName(attachment.name);
|
|
6853
|
-
return /* @__PURE__ */ (0,
|
|
6854
|
-
/* @__PURE__ */ (0,
|
|
6867
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("li", { className: "ow-prompt-input__attachment", children: [
|
|
6868
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "ow-prompt-input__thumb", "aria-hidden": "true", children: [
|
|
6855
6869
|
fileIcons[kindOf(attachment)],
|
|
6856
|
-
attachment.previewUrl ? /* @__PURE__ */ (0,
|
|
6870
|
+
attachment.previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
6857
6871
|
"img",
|
|
6858
6872
|
{
|
|
6859
6873
|
src: attachment.previewUrl,
|
|
@@ -6864,26 +6878,26 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
|
|
|
6864
6878
|
}
|
|
6865
6879
|
) : null
|
|
6866
6880
|
] }),
|
|
6867
|
-
/* @__PURE__ */ (0,
|
|
6868
|
-
/* @__PURE__ */ (0,
|
|
6869
|
-
/* @__PURE__ */ (0,
|
|
6881
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "ow-prompt-input__file", children: [
|
|
6882
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "ow-prompt-input__file-name", title: attachment.name, children: [
|
|
6883
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "ow-prompt-input__file-base", children: base }),
|
|
6870
6884
|
extension
|
|
6871
6885
|
] }),
|
|
6872
|
-
attachment.size !== void 0 ? /* @__PURE__ */ (0,
|
|
6886
|
+
attachment.size !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "ow-prompt-input__file-size", children: formatBytes(attachment.size, locale) }) : null
|
|
6873
6887
|
] }),
|
|
6874
|
-
onRemoveAttachment ? /* @__PURE__ */ (0,
|
|
6888
|
+
onRemoveAttachment ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
6875
6889
|
"button",
|
|
6876
6890
|
{
|
|
6877
6891
|
type: "button",
|
|
6878
6892
|
className: "ow-prompt-input__remove",
|
|
6879
6893
|
"aria-label": `Remove ${attachment.name}`,
|
|
6880
6894
|
onClick: () => remove(attachment, index),
|
|
6881
|
-
children: /* @__PURE__ */ (0,
|
|
6895
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(XIcon, { size: 14 })
|
|
6882
6896
|
}
|
|
6883
6897
|
) : null
|
|
6884
6898
|
] }, attachment.id);
|
|
6885
6899
|
}) }) : null,
|
|
6886
|
-
/* @__PURE__ */ (0,
|
|
6900
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
6887
6901
|
Textarea,
|
|
6888
6902
|
{
|
|
6889
6903
|
ref: setTextAreaRef,
|
|
@@ -6914,13 +6928,13 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
|
|
|
6914
6928
|
}
|
|
6915
6929
|
}
|
|
6916
6930
|
),
|
|
6917
|
-
/* @__PURE__ */ (0,
|
|
6918
|
-
toolbarStart ? /* @__PURE__ */ (0,
|
|
6931
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "ow-prompt-input__toolbar", "data-prompt-blank": "", children: [
|
|
6932
|
+
toolbarStart ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "ow-prompt-input__start", "data-prompt-blank": "", children: [
|
|
6919
6933
|
attachButton,
|
|
6920
6934
|
startActions
|
|
6921
6935
|
] }) : null,
|
|
6922
|
-
/* @__PURE__ */ (0,
|
|
6923
|
-
showCounter ? /* @__PURE__ */ (0,
|
|
6936
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "ow-prompt-input__end", "data-prompt-blank": "", children: [
|
|
6937
|
+
showCounter ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: cx("ow-prompt-input__counter", remaining === 0 && "ow-prompt-input__counter--full"), "aria-hidden": "true", children: [
|
|
6924
6938
|
number(text.length),
|
|
6925
6939
|
" / ",
|
|
6926
6940
|
number(maxLength)
|
|
@@ -6929,7 +6943,7 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
|
|
|
6929
6943
|
actionButton
|
|
6930
6944
|
] })
|
|
6931
6945
|
] }),
|
|
6932
|
-
onAttach ? /* @__PURE__ */ (0,
|
|
6946
|
+
onAttach ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
6933
6947
|
"input",
|
|
6934
6948
|
{
|
|
6935
6949
|
ref: pickerRef,
|
|
@@ -6945,14 +6959,14 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
|
|
|
6945
6959
|
}
|
|
6946
6960
|
}
|
|
6947
6961
|
) : null,
|
|
6948
|
-
isDragging ? /* @__PURE__ */ (0,
|
|
6949
|
-
/* @__PURE__ */ (0,
|
|
6962
|
+
isDragging ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "ow-prompt-input__drop", "aria-hidden": "true", children: [
|
|
6963
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(UploadIcon, { size: 16 }),
|
|
6950
6964
|
"Drop to attach"
|
|
6951
6965
|
] }) : null
|
|
6952
6966
|
]
|
|
6953
6967
|
}
|
|
6954
6968
|
),
|
|
6955
|
-
shownHint ? /* @__PURE__ */ (0,
|
|
6969
|
+
shownHint ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
6956
6970
|
"div",
|
|
6957
6971
|
{
|
|
6958
6972
|
className: cx("ow-prompt-input__hint", notice && "ow-prompt-input__hint--notice"),
|
|
@@ -6961,7 +6975,7 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
|
|
|
6961
6975
|
children: shownHint
|
|
6962
6976
|
}
|
|
6963
6977
|
) : null,
|
|
6964
|
-
/* @__PURE__ */ (0,
|
|
6978
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "ow-visually-hidden", role: "status", children: announcement })
|
|
6965
6979
|
]
|
|
6966
6980
|
}
|
|
6967
6981
|
);
|
|
@@ -6969,18 +6983,18 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
|
|
|
6969
6983
|
|
|
6970
6984
|
// src/components/PromptInput/PromptSuggestion.tsx
|
|
6971
6985
|
var import_react59 = require("react");
|
|
6972
|
-
var
|
|
6986
|
+
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
6973
6987
|
var PromptSuggestion = /* @__PURE__ */ (0, import_react59.forwardRef)(function PromptSuggestion2({ children, icon: icon2, description, variant = description ? "card" : "pill", type = "button", className, ...buttonProps }, ref) {
|
|
6974
6988
|
if (variant === "card") {
|
|
6975
|
-
return /* @__PURE__ */ (0,
|
|
6976
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
6977
|
-
/* @__PURE__ */ (0,
|
|
6978
|
-
/* @__PURE__ */ (0,
|
|
6979
|
-
description ? /* @__PURE__ */ (0,
|
|
6989
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("button", { ref, type, className: cx("ow-prompt-suggestion", "ow-prompt-suggestion--card", className), ...buttonProps, children: [
|
|
6990
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
|
|
6991
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { className: "ow-prompt-suggestion__text", children: [
|
|
6992
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-prompt-suggestion__title", children }),
|
|
6993
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-prompt-suggestion__description", children: description }) : null
|
|
6980
6994
|
] })
|
|
6981
6995
|
] });
|
|
6982
6996
|
}
|
|
6983
|
-
return /* @__PURE__ */ (0,
|
|
6997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
|
|
6984
6998
|
"button",
|
|
6985
6999
|
{
|
|
6986
7000
|
ref,
|
|
@@ -6993,8 +7007,8 @@ var PromptSuggestion = /* @__PURE__ */ (0, import_react59.forwardRef)(function P
|
|
|
6993
7007
|
),
|
|
6994
7008
|
...buttonProps,
|
|
6995
7009
|
children: [
|
|
6996
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
6997
|
-
/* @__PURE__ */ (0,
|
|
7010
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
|
|
7011
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-prompt-suggestion__label", children })
|
|
6998
7012
|
]
|
|
6999
7013
|
}
|
|
7000
7014
|
);
|
|
@@ -7009,7 +7023,7 @@ function PromptSuggestions({
|
|
|
7009
7023
|
style,
|
|
7010
7024
|
...props
|
|
7011
7025
|
}) {
|
|
7012
|
-
return /* @__PURE__ */ (0,
|
|
7026
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
7013
7027
|
"div",
|
|
7014
7028
|
{
|
|
7015
7029
|
role: "group",
|
|
@@ -7024,7 +7038,7 @@ function PromptSuggestions({
|
|
|
7024
7038
|
|
|
7025
7039
|
// src/components/Chat/ChatConversation.tsx
|
|
7026
7040
|
var import_react60 = require("react");
|
|
7027
|
-
var
|
|
7041
|
+
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
7028
7042
|
var ChatConversationContext = /* @__PURE__ */ (0, import_react60.createContext)(null);
|
|
7029
7043
|
var stickyDistance = 32;
|
|
7030
7044
|
var defaultCount = (count) => `${count} new`;
|
|
@@ -7119,9 +7133,9 @@ var ChatConversation = /* @__PURE__ */ (0, import_react60.forwardRef)(function C
|
|
|
7119
7133
|
);
|
|
7120
7134
|
const showJump = !isFollowing && !isEmpty;
|
|
7121
7135
|
const jump = usePresence(showJump);
|
|
7122
|
-
return /* @__PURE__ */ (0,
|
|
7123
|
-
/* @__PURE__ */ (0,
|
|
7124
|
-
/* @__PURE__ */ (0,
|
|
7136
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cx("ow-chat-conversation", width === "full" && "ow-chat-conversation--full", className), ...props, children: [
|
|
7137
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "ow-chat-conversation__viewport", children: [
|
|
7138
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
7125
7139
|
"div",
|
|
7126
7140
|
{
|
|
7127
7141
|
ref: scrollerRef,
|
|
@@ -7133,17 +7147,17 @@ var ChatConversation = /* @__PURE__ */ (0, import_react60.forwardRef)(function C
|
|
|
7133
7147
|
"aria-labelledby": ariaLabelledBy,
|
|
7134
7148
|
tabIndex: isEmpty ? void 0 : 0,
|
|
7135
7149
|
onScroll,
|
|
7136
|
-
children: /* @__PURE__ */ (0,
|
|
7150
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ref: contentRef, className: "ow-chat-conversation__content", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChatConversationContext.Provider, { value: context, children }) })
|
|
7137
7151
|
}
|
|
7138
7152
|
),
|
|
7139
|
-
isEmpty && empty ? /* @__PURE__ */ (0,
|
|
7140
|
-
jump.mounted ? /* @__PURE__ */ (0,
|
|
7153
|
+
isEmpty && empty ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-conversation__empty", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-conversation__empty-inner", children: empty }) }) : null,
|
|
7154
|
+
jump.mounted ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-conversation__jump", "data-state": jump.state, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
|
|
7141
7155
|
Button,
|
|
7142
7156
|
{
|
|
7143
7157
|
ref: jumpRef,
|
|
7144
7158
|
size: "sm",
|
|
7145
7159
|
shape: "pill",
|
|
7146
|
-
startIcon: /* @__PURE__ */ (0,
|
|
7160
|
+
startIcon: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ArrowDownIcon, { size: 16 }),
|
|
7147
7161
|
"aria-label": newCount > 0 ? `${jumpLabel}, ${formatNewCount(newCount)}` : jumpLabel,
|
|
7148
7162
|
tabIndex: showJump ? void 0 : -1,
|
|
7149
7163
|
onClick: () => {
|
|
@@ -7152,21 +7166,21 @@ var ChatConversation = /* @__PURE__ */ (0, import_react60.forwardRef)(function C
|
|
|
7152
7166
|
},
|
|
7153
7167
|
children: [
|
|
7154
7168
|
jumpLabel,
|
|
7155
|
-
newCount > 0 ? /* @__PURE__ */ (0,
|
|
7169
|
+
newCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ow-chat-conversation__count", children: formatNewCount(newCount) }) : null
|
|
7156
7170
|
]
|
|
7157
7171
|
}
|
|
7158
7172
|
) }) : null
|
|
7159
7173
|
] }),
|
|
7160
|
-
footer != null && footer !== false ? /* @__PURE__ */ (0,
|
|
7174
|
+
footer != null && footer !== false ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-conversation__footer", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-conversation__footer-inner", children: footer }) }) : null
|
|
7161
7175
|
] });
|
|
7162
7176
|
});
|
|
7163
7177
|
|
|
7164
7178
|
// src/components/Chat/ChatMessage.tsx
|
|
7165
7179
|
var import_react61 = require("react");
|
|
7166
|
-
var
|
|
7180
|
+
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
7167
7181
|
function lucide(paths) {
|
|
7168
7182
|
return function Icon({ size: size2 = 16, strokeWidth = 2, ...props }) {
|
|
7169
|
-
return /* @__PURE__ */ (0,
|
|
7183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
7170
7184
|
"svg",
|
|
7171
7185
|
{
|
|
7172
7186
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -7187,49 +7201,49 @@ function lucide(paths) {
|
|
|
7187
7201
|
};
|
|
7188
7202
|
}
|
|
7189
7203
|
var BotIcon = /* @__PURE__ */ lucide(
|
|
7190
|
-
/* @__PURE__ */ (0,
|
|
7191
|
-
/* @__PURE__ */ (0,
|
|
7192
|
-
/* @__PURE__ */ (0,
|
|
7193
|
-
/* @__PURE__ */ (0,
|
|
7194
|
-
/* @__PURE__ */ (0,
|
|
7195
|
-
/* @__PURE__ */ (0,
|
|
7196
|
-
/* @__PURE__ */ (0,
|
|
7204
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
7205
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M12 8V4H8" }),
|
|
7206
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
|
|
7207
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M2 14h2" }),
|
|
7208
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M20 14h2" }),
|
|
7209
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M15 13v2" }),
|
|
7210
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M9 13v2" })
|
|
7197
7211
|
] })
|
|
7198
7212
|
);
|
|
7199
7213
|
var RotateCcwIcon = /* @__PURE__ */ lucide(
|
|
7200
|
-
/* @__PURE__ */ (0,
|
|
7201
|
-
/* @__PURE__ */ (0,
|
|
7202
|
-
/* @__PURE__ */ (0,
|
|
7214
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
7215
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
|
|
7216
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M3 3v5h5" })
|
|
7203
7217
|
] })
|
|
7204
7218
|
);
|
|
7205
7219
|
var ThumbsUpIcon = /* @__PURE__ */ lucide(
|
|
7206
|
-
/* @__PURE__ */ (0,
|
|
7207
|
-
/* @__PURE__ */ (0,
|
|
7208
|
-
/* @__PURE__ */ (0,
|
|
7220
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
7221
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" }),
|
|
7222
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M7 10v12" })
|
|
7209
7223
|
] })
|
|
7210
7224
|
);
|
|
7211
7225
|
var ThumbsDownIcon = /* @__PURE__ */ lucide(
|
|
7212
|
-
/* @__PURE__ */ (0,
|
|
7213
|
-
/* @__PURE__ */ (0,
|
|
7214
|
-
/* @__PURE__ */ (0,
|
|
7226
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
7227
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" }),
|
|
7228
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M17 14V2" })
|
|
7215
7229
|
] })
|
|
7216
7230
|
);
|
|
7217
7231
|
var PencilIcon = /* @__PURE__ */ lucide(
|
|
7218
|
-
/* @__PURE__ */ (0,
|
|
7219
|
-
/* @__PURE__ */ (0,
|
|
7220
|
-
/* @__PURE__ */ (0,
|
|
7232
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
7233
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }),
|
|
7234
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "m15 5 4 4" })
|
|
7221
7235
|
] })
|
|
7222
7236
|
);
|
|
7223
7237
|
var botSizes = { sm: 14, md: 16, lg: 18 };
|
|
7224
7238
|
function ChatAgentAvatar({ size: size2 = "md", label, className }) {
|
|
7225
|
-
return /* @__PURE__ */ (0,
|
|
7239
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
7226
7240
|
"span",
|
|
7227
7241
|
{
|
|
7228
7242
|
className: cx("ow-chat-avatar", size2 !== "md" && `ow-chat-avatar--${size2}`, className),
|
|
7229
7243
|
role: label ? "img" : void 0,
|
|
7230
7244
|
"aria-label": label,
|
|
7231
7245
|
"aria-hidden": label ? void 0 : true,
|
|
7232
|
-
children: /* @__PURE__ */ (0,
|
|
7246
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(BotIcon, { size: botSizes[size2] })
|
|
7233
7247
|
}
|
|
7234
7248
|
);
|
|
7235
7249
|
}
|
|
@@ -7254,10 +7268,10 @@ function formattersFor(locale) {
|
|
|
7254
7268
|
function MessageTime({ time, locale }) {
|
|
7255
7269
|
const date = typeof time === "string" ? new Date(time) : time;
|
|
7256
7270
|
if (Number.isNaN(date.getTime())) {
|
|
7257
|
-
return /* @__PURE__ */ (0,
|
|
7271
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("time", { className: "ow-chat-message__time", children: String(time) });
|
|
7258
7272
|
}
|
|
7259
7273
|
const { short, full } = formattersFor(locale);
|
|
7260
|
-
return /* @__PURE__ */ (0,
|
|
7274
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("time", { className: "ow-chat-message__time", dateTime: date.toISOString(), title: full.format(date), children: short.format(date) });
|
|
7261
7275
|
}
|
|
7262
7276
|
var skipCaret = '[aria-hidden="true"], .ow-visually-hidden';
|
|
7263
7277
|
function useStreamingCaret(bodyRef, contentRef, caretRef, active) {
|
|
@@ -7317,27 +7331,27 @@ var ChatMessage = /* @__PURE__ */ (0, import_react61.forwardRef)(function ChatMe
|
|
|
7317
7331
|
(0, import_react61.useEffect)(() => conversation?.register(id), [conversation, id]);
|
|
7318
7332
|
useStreamingCaret(bodyRef, contentRef, caretRef, streaming && from !== "system");
|
|
7319
7333
|
if (from === "system") {
|
|
7320
|
-
return /* @__PURE__ */ (0,
|
|
7334
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
7321
7335
|
"div",
|
|
7322
7336
|
{
|
|
7323
7337
|
ref,
|
|
7324
7338
|
className: cx("ow-chat-message", "ow-chat-message--system", entering && "ow-chat-message--enter", className),
|
|
7325
7339
|
...props,
|
|
7326
|
-
children: /* @__PURE__ */ (0,
|
|
7340
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "ow-chat-message__system-text", children: [
|
|
7327
7341
|
children,
|
|
7328
|
-
time !== void 0 ? /* @__PURE__ */ (0,
|
|
7329
|
-
/* @__PURE__ */ (0,
|
|
7330
|
-
/* @__PURE__ */ (0,
|
|
7342
|
+
time !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
7343
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { "aria-hidden": "true", children: " \xB7 " }),
|
|
7344
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(MessageTime, { time, locale })
|
|
7331
7345
|
] }) : null
|
|
7332
7346
|
] })
|
|
7333
7347
|
}
|
|
7334
7348
|
);
|
|
7335
7349
|
}
|
|
7336
7350
|
const isUser = from === "user";
|
|
7337
|
-
const avatarNode = avatar !== void 0 ? avatar : isUser ? null : /* @__PURE__ */ (0,
|
|
7351
|
+
const avatarNode = avatar !== void 0 ? avatar : isUser ? null : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChatAgentAvatar, {});
|
|
7338
7352
|
const hasHeader = name != null || time !== void 0;
|
|
7339
7353
|
const errorText = error ?? (isUser ? "Couldn't send this message." : "The answer didn't finish.");
|
|
7340
|
-
return /* @__PURE__ */ (0,
|
|
7354
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
7341
7355
|
"article",
|
|
7342
7356
|
{
|
|
7343
7357
|
ref,
|
|
@@ -7353,22 +7367,22 @@ var ChatMessage = /* @__PURE__ */ (0, import_react61.forwardRef)(function ChatMe
|
|
|
7353
7367
|
"aria-busy": streaming || void 0,
|
|
7354
7368
|
...props,
|
|
7355
7369
|
children: [
|
|
7356
|
-
avatarNode != null && avatarNode !== false ? /* @__PURE__ */ (0,
|
|
7357
|
-
/* @__PURE__ */ (0,
|
|
7358
|
-
hasHeader ? /* @__PURE__ */ (0,
|
|
7359
|
-
name != null ? /* @__PURE__ */ (0,
|
|
7360
|
-
time !== void 0 ? /* @__PURE__ */ (0,
|
|
7361
|
-
] }) : /* @__PURE__ */ (0,
|
|
7362
|
-
/* @__PURE__ */ (0,
|
|
7363
|
-
/* @__PURE__ */ (0,
|
|
7364
|
-
streaming ? /* @__PURE__ */ (0,
|
|
7370
|
+
avatarNode != null && avatarNode !== false ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
|
|
7371
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ow-chat-message__main", children: [
|
|
7372
|
+
hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ow-chat-message__header", children: [
|
|
7373
|
+
name != null ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-message__name", children: name }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
|
|
7374
|
+
time !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(MessageTime, { time, locale }) : null
|
|
7375
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
|
|
7376
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { ref: bodyRef, className: "ow-chat-message__body", children: [
|
|
7377
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ref: contentRef, className: "ow-chat-message__content", children }),
|
|
7378
|
+
streaming ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { ref: caretRef, className: "ow-chat-message__caret", "aria-hidden": "true" }) : null
|
|
7365
7379
|
] }),
|
|
7366
|
-
status === "error" ? /* @__PURE__ */ (0,
|
|
7367
|
-
/* @__PURE__ */ (0,
|
|
7368
|
-
/* @__PURE__ */ (0,
|
|
7369
|
-
onRetry ? /* @__PURE__ */ (0,
|
|
7380
|
+
status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cx("ow-chat-message__error", onRetry && "ow-chat-message__error--retry"), children: [
|
|
7381
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CircleAlertIcon, { size: 16, className: "ow-chat-message__error-icon" }),
|
|
7382
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-message__error-text", children: errorText }),
|
|
7383
|
+
onRetry ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { size: "sm", startIcon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RotateCcwIcon, { size: 16 }), onClick: onRetry, children: retryLabel }) : null
|
|
7370
7384
|
] }) : null,
|
|
7371
|
-
actions && !streaming ? /* @__PURE__ */ (0,
|
|
7385
|
+
actions && !streaming ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ow-chat-message__actions", children: actions }) : null
|
|
7372
7386
|
] })
|
|
7373
7387
|
]
|
|
7374
7388
|
}
|
|
@@ -7380,8 +7394,8 @@ function CopyAction({ text, label, copiedLabel }) {
|
|
|
7380
7394
|
const timer = (0, import_react61.useRef)(0);
|
|
7381
7395
|
(0, import_react61.useEffect)(() => () => window.clearTimeout(timer.current), []);
|
|
7382
7396
|
const current = copied ? copiedLabel : label;
|
|
7383
|
-
return /* @__PURE__ */ (0,
|
|
7384
|
-
/* @__PURE__ */ (0,
|
|
7397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
7398
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Tooltip, { label: current, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
7385
7399
|
Button,
|
|
7386
7400
|
{
|
|
7387
7401
|
variant: "ghost",
|
|
@@ -7396,13 +7410,13 @@ function CopyAction({ text, label, copiedLabel }) {
|
|
|
7396
7410
|
timer.current = window.setTimeout(() => setCopied(false), 2e3);
|
|
7397
7411
|
}
|
|
7398
7412
|
},
|
|
7399
|
-
children: /* @__PURE__ */ (0,
|
|
7400
|
-
/* @__PURE__ */ (0,
|
|
7401
|
-
/* @__PURE__ */ (0,
|
|
7413
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "ow-chat-actions__copy-icon", children: [
|
|
7414
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CopyIcon, { size: 16 }),
|
|
7415
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CheckIcon, { size: 16 })
|
|
7402
7416
|
] })
|
|
7403
7417
|
}
|
|
7404
7418
|
) }),
|
|
7405
|
-
/* @__PURE__ */ (0,
|
|
7419
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
|
|
7406
7420
|
] });
|
|
7407
7421
|
}
|
|
7408
7422
|
function ChatMessageActions({
|
|
@@ -7421,7 +7435,7 @@ function ChatMessageActions({
|
|
|
7421
7435
|
const [current, setCurrent] = useControllableState(rating, defaultRating, onRate);
|
|
7422
7436
|
const rate = (value, label, Icon) => {
|
|
7423
7437
|
const pressed = current === value;
|
|
7424
|
-
return /* @__PURE__ */ (0,
|
|
7438
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Tooltip, { label, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
7425
7439
|
ToggleButton,
|
|
7426
7440
|
{
|
|
7427
7441
|
variant: "ghost",
|
|
@@ -7431,15 +7445,15 @@ function ChatMessageActions({
|
|
|
7431
7445
|
pressed,
|
|
7432
7446
|
className: "ow-chat-actions__rate",
|
|
7433
7447
|
onPressedChange: () => setCurrent(pressed ? null : value),
|
|
7434
|
-
children: /* @__PURE__ */ (0,
|
|
7448
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { size: 16 })
|
|
7435
7449
|
}
|
|
7436
7450
|
) });
|
|
7437
7451
|
};
|
|
7438
|
-
return /* @__PURE__ */ (0,
|
|
7439
|
-
text !== void 0 ? /* @__PURE__ */ (0,
|
|
7440
|
-
onEdit ? /* @__PURE__ */ (0,
|
|
7441
|
-
onRetry ? /* @__PURE__ */ (0,
|
|
7442
|
-
onRate ? /* @__PURE__ */ (0,
|
|
7452
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Toolbar, { variant: "plain", size: "sm", "aria-label": ariaLabel, className: cx("ow-chat-actions", className), children: [
|
|
7453
|
+
text !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CopyAction, { text, label: words.copy, copiedLabel: words.copied }) : null,
|
|
7454
|
+
onEdit ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Tooltip, { label: words.edit, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.edit, onClick: onEdit, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PencilIcon, { size: 16 }) }) }) : null,
|
|
7455
|
+
onRetry ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Tooltip, { label: words.retry, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.retry, onClick: onRetry, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RotateCcwIcon, { size: 16 }) }) }) : null,
|
|
7456
|
+
onRate ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
7443
7457
|
rate("up", words.good, ThumbsUpIcon),
|
|
7444
7458
|
rate("down", words.bad, ThumbsDownIcon)
|
|
7445
7459
|
] }) : null,
|
|
@@ -7448,31 +7462,31 @@ function ChatMessageActions({
|
|
|
7448
7462
|
}
|
|
7449
7463
|
|
|
7450
7464
|
// src/components/Chat/ChatLoader.tsx
|
|
7451
|
-
var
|
|
7465
|
+
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
7452
7466
|
function ChatLoader({ label, inline = false, name, avatar, srLabel = "Working\u2026", className }) {
|
|
7453
7467
|
const entering = useChatEntrance();
|
|
7454
|
-
const indicator = label != null ? /* @__PURE__ */ (0,
|
|
7455
|
-
/* @__PURE__ */ (0,
|
|
7456
|
-
/* @__PURE__ */ (0,
|
|
7457
|
-
/* @__PURE__ */ (0,
|
|
7458
|
-
/* @__PURE__ */ (0,
|
|
7468
|
+
const indicator = label != null ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TextShimmer, { className: "ow-chat-loader__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "ow-chat-loader__dots", children: [
|
|
7469
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
|
|
7470
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
|
|
7471
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
|
|
7472
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-visually-hidden", children: srLabel })
|
|
7459
7473
|
] });
|
|
7460
7474
|
if (inline) {
|
|
7461
|
-
return /* @__PURE__ */ (0,
|
|
7475
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { role: "status", className: cx("ow-chat-loader", "ow-chat-loader--inline", className), children: indicator });
|
|
7462
7476
|
}
|
|
7463
|
-
const avatarNode = avatar === void 0 ? /* @__PURE__ */ (0,
|
|
7464
|
-
return /* @__PURE__ */ (0,
|
|
7465
|
-
avatarNode != null && avatarNode !== false ? /* @__PURE__ */ (0,
|
|
7466
|
-
/* @__PURE__ */ (0,
|
|
7467
|
-
name != null ? /* @__PURE__ */ (0,
|
|
7468
|
-
/* @__PURE__ */ (0,
|
|
7477
|
+
const avatarNode = avatar === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ChatAgentAvatar, {}) : avatar;
|
|
7478
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { role: "status", className: cx("ow-chat-message", "ow-chat-message--assistant", "ow-chat-loader", entering && "ow-chat-loader--enter", className), children: [
|
|
7479
|
+
avatarNode != null && avatarNode !== false ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
|
|
7480
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "ow-chat-message__main", children: [
|
|
7481
|
+
name != null ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ow-chat-message__header", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-chat-message__name", children: name }) }) : null,
|
|
7482
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ow-chat-loader__line", children: indicator })
|
|
7469
7483
|
] })
|
|
7470
7484
|
] });
|
|
7471
7485
|
}
|
|
7472
7486
|
|
|
7473
7487
|
// src/components/ChatTool/ChatTool.tsx
|
|
7474
7488
|
var import_react62 = require("react");
|
|
7475
|
-
var
|
|
7489
|
+
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
7476
7490
|
var statusWords = {
|
|
7477
7491
|
pending: "Not started",
|
|
7478
7492
|
running: "Running",
|
|
@@ -7482,7 +7496,7 @@ var statusWords = {
|
|
|
7482
7496
|
cancelled: "Cancelled"
|
|
7483
7497
|
};
|
|
7484
7498
|
function SlashIcon() {
|
|
7485
|
-
return /* @__PURE__ */ (0,
|
|
7499
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
7486
7500
|
"svg",
|
|
7487
7501
|
{
|
|
7488
7502
|
width: 12,
|
|
@@ -7494,12 +7508,12 @@ function SlashIcon() {
|
|
|
7494
7508
|
strokeLinecap: "round",
|
|
7495
7509
|
"aria-hidden": "true",
|
|
7496
7510
|
focusable: "false",
|
|
7497
|
-
children: /* @__PURE__ */ (0,
|
|
7511
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M7 17 17 7" })
|
|
7498
7512
|
}
|
|
7499
7513
|
);
|
|
7500
7514
|
}
|
|
7501
7515
|
function ExclamationIcon() {
|
|
7502
|
-
return /* @__PURE__ */ (0,
|
|
7516
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
7503
7517
|
"svg",
|
|
7504
7518
|
{
|
|
7505
7519
|
width: 12,
|
|
@@ -7512,18 +7526,18 @@ function ExclamationIcon() {
|
|
|
7512
7526
|
"aria-hidden": "true",
|
|
7513
7527
|
focusable: "false",
|
|
7514
7528
|
children: [
|
|
7515
|
-
/* @__PURE__ */ (0,
|
|
7516
|
-
/* @__PURE__ */ (0,
|
|
7529
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M12 5v9" }),
|
|
7530
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M12 19h.01" })
|
|
7517
7531
|
]
|
|
7518
7532
|
}
|
|
7519
7533
|
);
|
|
7520
7534
|
}
|
|
7521
7535
|
function ChatStatusMarker({ status, icon: icon2 }) {
|
|
7522
7536
|
const showsIcon = Boolean(icon2) && (status === "success" || status === "pending");
|
|
7523
|
-
const glyph = status === "running" ? /* @__PURE__ */ (0,
|
|
7524
|
-
return /* @__PURE__ */ (0,
|
|
7525
|
-
/* @__PURE__ */ (0,
|
|
7526
|
-
/* @__PURE__ */ (0,
|
|
7537
|
+
const glyph = status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Spinner, { size: "sm", label: "" }) : status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(XIcon, { size: 12, strokeWidth: 3 }) : status === "approval" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ExclamationIcon, {}) : status === "cancelled" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SlashIcon, {}) : showsIcon ? icon2 : status === "success" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CheckIcon, { size: 12, strokeWidth: 3 }) : null;
|
|
7538
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: cx("ow-chat-status", `ow-chat-status--${status}`, showsIcon && "ow-chat-status--icon"), children: [
|
|
7539
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-status__glyph", "aria-hidden": "true", children: glyph }),
|
|
7540
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ow-visually-hidden", children: [
|
|
7527
7541
|
statusWords[status],
|
|
7528
7542
|
": "
|
|
7529
7543
|
] })
|
|
@@ -7546,7 +7560,7 @@ function formatDuration(ms, locale) {
|
|
|
7546
7560
|
return rest ? `${number(hours)} h ${number(rest)} min` : `${number(hours)} h`;
|
|
7547
7561
|
}
|
|
7548
7562
|
function ChatDuration({ ms, locale, className }) {
|
|
7549
|
-
return /* @__PURE__ */ (0,
|
|
7563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("time", { dateTime: `PT${Math.max(0, Math.round(ms)) / 1e3}S`, className, children: formatDuration(ms, locale) });
|
|
7550
7564
|
}
|
|
7551
7565
|
function useStatusExpansion({
|
|
7552
7566
|
expanded,
|
|
@@ -7589,7 +7603,7 @@ function ChatCollapse({
|
|
|
7589
7603
|
(0, import_react62.useEffect)(() => {
|
|
7590
7604
|
if (ref.current) ref.current.inert = !open;
|
|
7591
7605
|
}, [open]);
|
|
7592
|
-
return /* @__PURE__ */ (0,
|
|
7606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { ref, id, className: cx("ow-chat-collapse", bleed && "ow-chat-collapse--bleed"), "data-open": open, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ow-chat-collapse__clip", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className, children }) }) });
|
|
7593
7607
|
}
|
|
7594
7608
|
var codeMaxHeight = 280;
|
|
7595
7609
|
function formatInput(input) {
|
|
@@ -7658,23 +7672,23 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
|
|
|
7658
7672
|
if (!active || active === document.body) (triggerRef.current ?? rootRef.current)?.focus();
|
|
7659
7673
|
}, [needsApproval]);
|
|
7660
7674
|
const running = status === "running";
|
|
7661
|
-
const header = /* @__PURE__ */ (0,
|
|
7662
|
-
/* @__PURE__ */ (0,
|
|
7663
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
7664
|
-
/* @__PURE__ */ (0,
|
|
7665
|
-
/* @__PURE__ */ (0,
|
|
7666
|
-
/* @__PURE__ */ (0,
|
|
7667
|
-
name ? /* @__PURE__ */ (0,
|
|
7675
|
+
const header = /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
7676
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChatStatusMarker, { status }),
|
|
7677
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__icon", "aria-hidden": "true", children: icon2 }) : null,
|
|
7678
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ow-chat-tool__main", children: [
|
|
7679
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ow-chat-tool__heading", children: [
|
|
7680
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__title", children: running ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TextShimmer, { children: title }) : title }),
|
|
7681
|
+
name ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Code, { className: "ow-chat-tool__name", children: name }) : null
|
|
7668
7682
|
] }),
|
|
7669
|
-
hasMeta ? /* @__PURE__ */ (0,
|
|
7670
|
-
summary ? /* @__PURE__ */ (0,
|
|
7671
|
-
summary && duration !== void 0 ? /* @__PURE__ */ (0,
|
|
7672
|
-
duration !== void 0 ? /* @__PURE__ */ (0,
|
|
7683
|
+
hasMeta ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ow-chat-tool__meta", children: [
|
|
7684
|
+
summary ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__summary", children: summary }) : null,
|
|
7685
|
+
summary && duration !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__dot", "aria-hidden": "true", children: "\xB7" }) : null,
|
|
7686
|
+
duration !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChatDuration, { ms: duration, locale, className: "ow-chat-tool__duration" }) : null
|
|
7673
7687
|
] }) : null
|
|
7674
7688
|
] }),
|
|
7675
|
-
hasDetails ? /* @__PURE__ */ (0,
|
|
7689
|
+
hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronRightIcon, { size: 14 }) }) : null
|
|
7676
7690
|
] });
|
|
7677
|
-
return /* @__PURE__ */ (0,
|
|
7691
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
7678
7692
|
"div",
|
|
7679
7693
|
{
|
|
7680
7694
|
ref: (element) => {
|
|
@@ -7689,7 +7703,7 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
|
|
|
7689
7703
|
tabIndex: hasDetails ? void 0 : -1,
|
|
7690
7704
|
...props,
|
|
7691
7705
|
children: [
|
|
7692
|
-
hasDetails ? /* @__PURE__ */ (0,
|
|
7706
|
+
hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
7693
7707
|
"button",
|
|
7694
7708
|
{
|
|
7695
7709
|
ref: triggerRef,
|
|
@@ -7701,28 +7715,28 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
|
|
|
7701
7715
|
onClick: toggle,
|
|
7702
7716
|
children: header
|
|
7703
7717
|
}
|
|
7704
|
-
) : /* @__PURE__ */ (0,
|
|
7705
|
-
hasDetails ? /* @__PURE__ */ (0,
|
|
7706
|
-
hasInput ? /* @__PURE__ */ (0,
|
|
7707
|
-
/* @__PURE__ */ (0,
|
|
7708
|
-
typeof input === "string" && !input.includes("\n") ? /* @__PURE__ */ (0,
|
|
7718
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ow-chat-tool__header", children: header }),
|
|
7719
|
+
hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ChatCollapse, { id: `${id}-details`, open: isOpen, className: "ow-chat-tool__details", children: [
|
|
7720
|
+
hasInput ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ow-chat-tool__section", children: [
|
|
7721
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__label", children: "Input" }),
|
|
7722
|
+
typeof input === "string" && !input.includes("\n") ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Snippet, { value: input, prompt: null }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CodeBlock, { code: formatInput(input), language: typeof input === "string" ? void 0 : "json", maxHeight: codeMaxHeight })
|
|
7709
7723
|
] }) : null,
|
|
7710
|
-
hasOutput ? /* @__PURE__ */ (0,
|
|
7711
|
-
/* @__PURE__ */ (0,
|
|
7712
|
-
typeof output === "string" ? /* @__PURE__ */ (0,
|
|
7724
|
+
hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ow-chat-tool__section", children: [
|
|
7725
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__label", children: "Output" }),
|
|
7726
|
+
typeof output === "string" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CodeBlock, { code: output, maxHeight: codeMaxHeight }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ow-chat-tool__output", children: output })
|
|
7713
7727
|
] }) : null,
|
|
7714
|
-
hasError ? /* @__PURE__ */ (0,
|
|
7715
|
-
/* @__PURE__ */ (0,
|
|
7716
|
-
/* @__PURE__ */ (0,
|
|
7728
|
+
hasError ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ow-chat-tool__section", children: [
|
|
7729
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__label", children: "Error" }),
|
|
7730
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ow-chat-tool__error", children: error })
|
|
7717
7731
|
] }) : null
|
|
7718
7732
|
] }) : null,
|
|
7719
|
-
needsApproval ? /* @__PURE__ */ (0,
|
|
7720
|
-
/* @__PURE__ */ (0,
|
|
7733
|
+
needsApproval ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ow-chat-tool__approval", role: "group", "aria-labelledby": `${id}-request`, children: [
|
|
7734
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { ref: messageRef, id: `${id}-request`, className: "ow-chat-tool__request", children: approvalMessage ?? (name ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
7721
7735
|
"Wants to run ",
|
|
7722
|
-
/* @__PURE__ */ (0,
|
|
7736
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Code, { children: name })
|
|
7723
7737
|
] }) : "Wants to go ahead") }),
|
|
7724
|
-
/* @__PURE__ */ (0,
|
|
7725
|
-
/* @__PURE__ */ (0,
|
|
7738
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ow-chat-tool__actions", children: [
|
|
7739
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
7726
7740
|
Button,
|
|
7727
7741
|
{
|
|
7728
7742
|
variant: "primary",
|
|
@@ -7734,7 +7748,7 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
|
|
|
7734
7748
|
children: approveLabel
|
|
7735
7749
|
}
|
|
7736
7750
|
),
|
|
7737
|
-
/* @__PURE__ */ (0,
|
|
7751
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
7738
7752
|
Button,
|
|
7739
7753
|
{
|
|
7740
7754
|
size: "sm",
|
|
@@ -7747,7 +7761,7 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
|
|
|
7747
7761
|
)
|
|
7748
7762
|
] })
|
|
7749
7763
|
] }) : null,
|
|
7750
|
-
/* @__PURE__ */ (0,
|
|
7764
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: announcement })
|
|
7751
7765
|
]
|
|
7752
7766
|
}
|
|
7753
7767
|
);
|
|
@@ -7755,7 +7769,7 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
|
|
|
7755
7769
|
|
|
7756
7770
|
// src/components/ChainOfThought/ChainOfThought.tsx
|
|
7757
7771
|
var import_react63 = require("react");
|
|
7758
|
-
var
|
|
7772
|
+
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
7759
7773
|
var plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
|
|
7760
7774
|
var ChainOfThought = /* @__PURE__ */ (0, import_react63.forwardRef)(function ChainOfThought2({
|
|
7761
7775
|
steps = [],
|
|
@@ -7787,30 +7801,30 @@ var ChainOfThought = /* @__PURE__ */ (0, import_react63.forwardRef)(function Cha
|
|
|
7787
7801
|
const failed = steps.filter((step) => step.status === "error").length;
|
|
7788
7802
|
const heading = label ?? (running ? "Thinking\u2026" : duration !== void 0 ? `Thought for ${formatDuration(duration, locale)}` : "Reasoning");
|
|
7789
7803
|
const count = steps.length > 0 ? running ? `${finished} of ${plural(steps.length, "step")}` : plural(steps.length, "step") : null;
|
|
7790
|
-
const headerText = /* @__PURE__ */ (0,
|
|
7791
|
-
/* @__PURE__ */ (0,
|
|
7792
|
-
count ? /* @__PURE__ */ (0,
|
|
7793
|
-
/* @__PURE__ */ (0,
|
|
7804
|
+
const headerText = /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { className: "ow-chat-toggle__text", children: [
|
|
7805
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "ow-chain-of-thought__label", children: running ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TextShimmer, { children: heading }) : heading }),
|
|
7806
|
+
count ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { className: "ow-chat-toggle__meta", children: [
|
|
7807
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { "aria-hidden": "true", children: "\xB7 " }),
|
|
7794
7808
|
count,
|
|
7795
|
-
failed > 0 ? /* @__PURE__ */ (0,
|
|
7809
|
+
failed > 0 ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { className: "ow-chain-of-thought__failed", children: [
|
|
7796
7810
|
", ",
|
|
7797
7811
|
failed,
|
|
7798
7812
|
" failed"
|
|
7799
7813
|
] }) : null
|
|
7800
7814
|
] }) : null
|
|
7801
7815
|
] });
|
|
7802
|
-
return /* @__PURE__ */ (0,
|
|
7803
|
-
hasBody ? /* @__PURE__ */ (0,
|
|
7804
|
-
/* @__PURE__ */ (0,
|
|
7816
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { ref, className: cx("ow-chain-of-thought", className), "data-status": status, "aria-busy": running || void 0, ...props, children: [
|
|
7817
|
+
hasBody ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-body`, onClick: toggle, children: [
|
|
7818
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ChevronRightIcon, { size: 14 }) }),
|
|
7805
7819
|
headerText
|
|
7806
|
-
] }) : /* @__PURE__ */ (0,
|
|
7807
|
-
hasBody ? /* @__PURE__ */ (0,
|
|
7808
|
-
hasReasoning ? /* @__PURE__ */ (0,
|
|
7809
|
-
steps.length > 0 ? /* @__PURE__ */ (0,
|
|
7810
|
-
/* @__PURE__ */ (0,
|
|
7811
|
-
/* @__PURE__ */ (0,
|
|
7812
|
-
/* @__PURE__ */ (0,
|
|
7813
|
-
step.detail !== void 0 && step.detail !== null ? /* @__PURE__ */ (0,
|
|
7820
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "ow-chat-toggle ow-chain-of-thought__static", children: headerText }),
|
|
7821
|
+
hasBody ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(ChatCollapse, { id: `${id}-body`, open: isOpen, bleed: true, className: "ow-chain-of-thought__body", children: [
|
|
7822
|
+
hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "ow-chain-of-thought__reasoning", children }) : null,
|
|
7823
|
+
steps.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("ol", { className: "ow-chain-of-thought__steps", children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("li", { className: "ow-chain-of-thought__step", "data-status": step.status, children: [
|
|
7824
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ChatStatusMarker, { status: step.status, icon: step.icon }),
|
|
7825
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "ow-chain-of-thought__step-body", children: [
|
|
7826
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "ow-chain-of-thought__step-title", children: step.status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TextShimmer, { children: step.title }) : step.title }),
|
|
7827
|
+
step.detail !== void 0 && step.detail !== null ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "ow-chain-of-thought__detail", children: step.detail }) : null
|
|
7814
7828
|
] })
|
|
7815
7829
|
] }, step.id)) }) : null
|
|
7816
7830
|
] }) : null
|
|
@@ -7819,7 +7833,7 @@ var ChainOfThought = /* @__PURE__ */ (0, import_react63.forwardRef)(function Cha
|
|
|
7819
7833
|
|
|
7820
7834
|
// src/components/ChatSource/ChatSource.tsx
|
|
7821
7835
|
var import_react64 = require("react");
|
|
7822
|
-
var
|
|
7836
|
+
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
7823
7837
|
var openDelay = 250;
|
|
7824
7838
|
var closeDelay = 150;
|
|
7825
7839
|
var ChatSource = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSource2({
|
|
@@ -7888,8 +7902,8 @@ var ChatSource = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSou
|
|
|
7888
7902
|
onClick?.(event);
|
|
7889
7903
|
}
|
|
7890
7904
|
};
|
|
7891
|
-
const chipText = /* @__PURE__ */ (0,
|
|
7892
|
-
return /* @__PURE__ */ (0,
|
|
7905
|
+
const chipText = /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-source__chip-text", children: index ?? label });
|
|
7906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
7893
7907
|
"span",
|
|
7894
7908
|
{
|
|
7895
7909
|
ref: wrapperRef,
|
|
@@ -7901,19 +7915,19 @@ var ChatSource = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSou
|
|
|
7901
7915
|
if (event.pointerType === "mouse") schedule(false, closeDelay);
|
|
7902
7916
|
},
|
|
7903
7917
|
children: [
|
|
7904
|
-
href ? /* @__PURE__ */ (0,
|
|
7905
|
-
/* @__PURE__ */ (0,
|
|
7906
|
-
/* @__PURE__ */ (0,
|
|
7907
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
7908
|
-
/* @__PURE__ */ (0,
|
|
7918
|
+
href ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("a", { href, ...externalProps, ...chipProps, children: chipText }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", ...chipProps, children: chipText }),
|
|
7919
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { ref: cardRef, ...manualPopover, hidden: !mounted, "data-state": state, className: "ow-chat-source-card ow-floating", style, children: [
|
|
7920
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ow-chat-source-card__header", children: [
|
|
7921
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-source-card__icon", "aria-hidden": "true", children: icon2 }) : null,
|
|
7922
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { id: `${id}-title`, className: "ow-chat-source-card__title", children: title })
|
|
7909
7923
|
] }),
|
|
7910
|
-
source ? /* @__PURE__ */ (0,
|
|
7911
|
-
snippet ? /* @__PURE__ */ (0,
|
|
7924
|
+
source ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { id: `${id}-source`, className: "ow-chat-source-card__source", children: source }) : null,
|
|
7925
|
+
snippet ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { id: `${id}-snippet`, className: cx("ow-chat-source-card__snippet", `ow-chat-source-card__snippet--${snippetFormat}`), children: snippet }) : null,
|
|
7912
7926
|
href ? (
|
|
7913
7927
|
// The chip is the same link, so this one stays out of the tab order.
|
|
7914
|
-
/* @__PURE__ */ (0,
|
|
7928
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("a", { href, ...externalProps, tabIndex: -1, className: cx(linkClassName({ variant: "standalone" }), "ow-chat-source-card__open"), children: [
|
|
7915
7929
|
openLabel,
|
|
7916
|
-
/* @__PURE__ */ (0,
|
|
7930
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ArrowUpRightIcon, { size: 13 })
|
|
7917
7931
|
] })
|
|
7918
7932
|
) : null
|
|
7919
7933
|
] })
|
|
@@ -7925,30 +7939,30 @@ var ChatSources = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSo
|
|
|
7925
7939
|
const id = (0, import_react64.useId)();
|
|
7926
7940
|
const [isOpen, setOpen] = useControllableState(expanded, defaultExpanded, onExpandedChange);
|
|
7927
7941
|
if (sources.length === 0) return null;
|
|
7928
|
-
return /* @__PURE__ */ (0,
|
|
7929
|
-
/* @__PURE__ */ (0,
|
|
7930
|
-
/* @__PURE__ */ (0,
|
|
7931
|
-
/* @__PURE__ */ (0,
|
|
7942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { ref, className: cx("ow-chat-sources", className), ...props, children: [
|
|
7943
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-list`, onClick: () => setOpen(!isOpen), children: [
|
|
7944
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronRightIcon, { size: 14 }) }),
|
|
7945
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-toggle__text", children: label ?? `${sources.length} ${sources.length === 1 ? "source" : "sources"}` })
|
|
7932
7946
|
] }),
|
|
7933
|
-
/* @__PURE__ */ (0,
|
|
7934
|
-
const content = /* @__PURE__ */ (0,
|
|
7935
|
-
/* @__PURE__ */ (0,
|
|
7936
|
-
item.index !== void 0 ? /* @__PURE__ */ (0,
|
|
7937
|
-
/* @__PURE__ */ (0,
|
|
7947
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChatCollapse, { id: `${id}-list`, open: isOpen, bleed: true, className: "ow-chat-sources__body", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("ul", { className: "ow-chat-sources__list", children: sources.map((item, position) => {
|
|
7948
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
7949
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ow-chat-sources__lead", children: [
|
|
7950
|
+
item.index !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ow-chat-sources__index", children: [
|
|
7951
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-visually-hidden", children: "Source " }),
|
|
7938
7952
|
item.index
|
|
7939
7953
|
] }) : null,
|
|
7940
|
-
item.icon || item.index === void 0 ? /* @__PURE__ */ (0,
|
|
7954
|
+
item.icon || item.index === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-sources__icon", "aria-hidden": "true", children: item.icon ?? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(FileIcon, { size: 15 }) }) : null
|
|
7941
7955
|
] }),
|
|
7942
|
-
/* @__PURE__ */ (0,
|
|
7943
|
-
/* @__PURE__ */ (0,
|
|
7944
|
-
item.source ? /* @__PURE__ */ (0,
|
|
7956
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ow-chat-sources__text", children: [
|
|
7957
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-sources__title", children: item.title }),
|
|
7958
|
+
item.source ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-sources__source", children: item.source }) : null
|
|
7945
7959
|
] }),
|
|
7946
|
-
item.href && item.external ? /* @__PURE__ */ (0,
|
|
7947
|
-
/* @__PURE__ */ (0,
|
|
7948
|
-
/* @__PURE__ */ (0,
|
|
7960
|
+
item.href && item.external ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
7961
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-sources__external", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ArrowUpRightIcon, { size: 14 }) }),
|
|
7962
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
|
|
7949
7963
|
] }) : null
|
|
7950
7964
|
] });
|
|
7951
|
-
return /* @__PURE__ */ (0,
|
|
7965
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("li", { children: item.href ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
7952
7966
|
"a",
|
|
7953
7967
|
{
|
|
7954
7968
|
href: item.href,
|
|
@@ -7956,7 +7970,7 @@ var ChatSources = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSo
|
|
|
7956
7970
|
...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
|
|
7957
7971
|
children: content
|
|
7958
7972
|
}
|
|
7959
|
-
) : /* @__PURE__ */ (0,
|
|
7973
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "ow-chat-sources__card", children: content }) }, item.id ?? item.index ?? position);
|
|
7960
7974
|
}) }) })
|
|
7961
7975
|
] });
|
|
7962
7976
|
});
|
|
@@ -7964,7 +7978,7 @@ var ChatSources = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSo
|
|
|
7964
7978
|
// src/components/ColorPicker/ColorPicker.tsx
|
|
7965
7979
|
var import_react65 = require("react");
|
|
7966
7980
|
var import_react_colorful = require("react-colorful");
|
|
7967
|
-
var
|
|
7981
|
+
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
7968
7982
|
var swatchColor = (swatch) => typeof swatch === "string" ? swatch : swatch.color;
|
|
7969
7983
|
var swatchName = (swatch) => typeof swatch === "string" ? swatch : swatch.name;
|
|
7970
7984
|
var same = (a, b) => a.toLowerCase().replace(/^#/, "") === b.toLowerCase().replace(/^#/, "");
|
|
@@ -7999,13 +8013,13 @@ function ColorPicker({
|
|
|
7999
8013
|
} catch {
|
|
8000
8014
|
}
|
|
8001
8015
|
}
|
|
8002
|
-
return /* @__PURE__ */ (0,
|
|
8003
|
-
/* @__PURE__ */ (0,
|
|
8004
|
-
showInput || eyeDropper && canPick ? /* @__PURE__ */ (0,
|
|
8005
|
-
eyeDropper && canPick ? /* @__PURE__ */ (0,
|
|
8006
|
-
showInput ? /* @__PURE__ */ (0,
|
|
8007
|
-
/* @__PURE__ */ (0,
|
|
8008
|
-
/* @__PURE__ */ (0,
|
|
8016
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
|
|
8017
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Picker, { color, onChange: change }),
|
|
8018
|
+
showInput || eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "ow-color-picker__row", children: [
|
|
8019
|
+
eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(PipetteIcon, { size: 15 }) }) : null,
|
|
8020
|
+
showInput ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
|
|
8021
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
|
|
8022
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
8009
8023
|
import_react_colorful.HexColorInput,
|
|
8010
8024
|
{
|
|
8011
8025
|
className: "ow-input-group__input",
|
|
@@ -8017,11 +8031,11 @@ function ColorPicker({
|
|
|
8017
8031
|
}
|
|
8018
8032
|
)
|
|
8019
8033
|
] }) : null,
|
|
8020
|
-
/* @__PURE__ */ (0,
|
|
8034
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
|
|
8021
8035
|
] }) : null,
|
|
8022
|
-
swatches?.length ? /* @__PURE__ */ (0,
|
|
8036
|
+
swatches?.length ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
|
|
8023
8037
|
const swatchValue = swatchColor(swatch);
|
|
8024
|
-
return /* @__PURE__ */ (0,
|
|
8038
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
8025
8039
|
"button",
|
|
8026
8040
|
{
|
|
8027
8041
|
type: "button",
|
|
@@ -8073,8 +8087,8 @@ var ColorField = /* @__PURE__ */ (0, import_react65.forwardRef)(function ColorFi
|
|
|
8073
8087
|
const frame = requestAnimationFrame(() => panelRef.current?.querySelector(".react-colorful__interactive")?.focus());
|
|
8074
8088
|
return () => cancelAnimationFrame(frame);
|
|
8075
8089
|
}, [isOpen]);
|
|
8076
|
-
return /* @__PURE__ */ (0,
|
|
8077
|
-
/* @__PURE__ */ (0,
|
|
8090
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
|
|
8091
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
8078
8092
|
"button",
|
|
8079
8093
|
{
|
|
8080
8094
|
ref: (element) => {
|
|
@@ -8106,13 +8120,13 @@ var ColorField = /* @__PURE__ */ (0, import_react65.forwardRef)(function ColorFi
|
|
|
8106
8120
|
}
|
|
8107
8121
|
},
|
|
8108
8122
|
children: [
|
|
8109
|
-
/* @__PURE__ */ (0,
|
|
8110
|
-
/* @__PURE__ */ (0,
|
|
8111
|
-
/* @__PURE__ */ (0,
|
|
8123
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
|
|
8124
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
|
|
8125
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ChevronDownIcon, { size: size2 === "sm" ? 14 : 16, className: "ow-select__chevron" })
|
|
8112
8126
|
]
|
|
8113
8127
|
}
|
|
8114
8128
|
),
|
|
8115
|
-
mounted ? /* @__PURE__ */ (0,
|
|
8129
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
8116
8130
|
"div",
|
|
8117
8131
|
{
|
|
8118
8132
|
ref: panelRef,
|
|
@@ -8126,7 +8140,7 @@ var ColorField = /* @__PURE__ */ (0, import_react65.forwardRef)(function ColorFi
|
|
|
8126
8140
|
onKeyDown: (event) => {
|
|
8127
8141
|
if (event.key === "Enter" && event.target.closest(".react-colorful")) close();
|
|
8128
8142
|
},
|
|
8129
|
-
children: /* @__PURE__ */ (0,
|
|
8143
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
|
|
8130
8144
|
}
|
|
8131
8145
|
) : null
|
|
8132
8146
|
] });
|
|
@@ -8317,7 +8331,7 @@ var hueHex = (h) => toHex(hsvToRgb({ h, s: 100, v: 100, a: 1 }));
|
|
|
8317
8331
|
var hueStops = "#ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%";
|
|
8318
8332
|
|
|
8319
8333
|
// src/components/ColorPicker/ColorArea.tsx
|
|
8320
|
-
var
|
|
8334
|
+
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
8321
8335
|
var size = (length) => typeof length === "number" ? `${length}px` : length;
|
|
8322
8336
|
function assignRef8(ref, value) {
|
|
8323
8337
|
if (typeof ref === "function") ref(value);
|
|
@@ -8398,7 +8412,7 @@ var ColorArea = /* @__PURE__ */ (0, import_react67.forwardRef)(function ColorAre
|
|
|
8398
8412
|
const saturation = `Saturation ${percent.format(hsv.s / 100)}`;
|
|
8399
8413
|
const brightness = `brightness ${percent.format(hsv.v / 100)}`;
|
|
8400
8414
|
const colorName = describeColor(rgba);
|
|
8401
|
-
const input = (which) => /* @__PURE__ */ (0,
|
|
8415
|
+
const input = (which) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
8402
8416
|
"input",
|
|
8403
8417
|
{
|
|
8404
8418
|
ref: (element) => {
|
|
@@ -8425,7 +8439,7 @@ var ColorArea = /* @__PURE__ */ (0, import_react67.forwardRef)(function ColorAre
|
|
|
8425
8439
|
onKeyUp
|
|
8426
8440
|
}
|
|
8427
8441
|
);
|
|
8428
|
-
return /* @__PURE__ */ (0,
|
|
8442
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
|
|
8429
8443
|
"div",
|
|
8430
8444
|
{
|
|
8431
8445
|
ref: rootRef,
|
|
@@ -8446,7 +8460,7 @@ var ColorArea = /* @__PURE__ */ (0, import_react67.forwardRef)(function ColorAre
|
|
|
8446
8460
|
},
|
|
8447
8461
|
...drag.handlers,
|
|
8448
8462
|
children: [
|
|
8449
|
-
/* @__PURE__ */ (0,
|
|
8463
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
|
|
8450
8464
|
"div",
|
|
8451
8465
|
{
|
|
8452
8466
|
className: "ow-color-area__thumb",
|
|
@@ -8457,7 +8471,7 @@ var ColorArea = /* @__PURE__ */ (0, import_react67.forwardRef)(function ColorAre
|
|
|
8457
8471
|
]
|
|
8458
8472
|
}
|
|
8459
8473
|
),
|
|
8460
|
-
name ? /* @__PURE__ */ (0,
|
|
8474
|
+
name ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("input", { type: "hidden", name, value: hex }) : null
|
|
8461
8475
|
]
|
|
8462
8476
|
}
|
|
8463
8477
|
);
|
|
@@ -8465,7 +8479,7 @@ var ColorArea = /* @__PURE__ */ (0, import_react67.forwardRef)(function ColorAre
|
|
|
8465
8479
|
|
|
8466
8480
|
// src/components/ColorPicker/ColorSlider.tsx
|
|
8467
8481
|
var import_react68 = require("react");
|
|
8468
|
-
var
|
|
8482
|
+
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
8469
8483
|
var channels = {
|
|
8470
8484
|
hue: { name: "Hue", max: 360, unit: "degree" },
|
|
8471
8485
|
saturation: { name: "Saturation", max: 100, unit: "percent" },
|
|
@@ -8580,7 +8594,7 @@ var ColorSlider = /* @__PURE__ */ (0, import_react68.forwardRef)(function ColorS
|
|
|
8580
8594
|
const shown = format.format(spec.unit === "percent" ? current / 100 : current);
|
|
8581
8595
|
const named = channel === "hue" ? describeColor(parseHex(hueHex(color.value.h))) : describeColor({ ...rgba, a: 1 });
|
|
8582
8596
|
const fill = channel === "hue" ? hueHex(color.value.h) : toHex(rgba, channel === "alpha");
|
|
8583
|
-
return /* @__PURE__ */ (0,
|
|
8597
|
+
return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
|
|
8584
8598
|
"div",
|
|
8585
8599
|
{
|
|
8586
8600
|
className: cx(
|
|
@@ -8595,11 +8609,11 @@ var ColorSlider = /* @__PURE__ */ (0, import_react68.forwardRef)(function ColorS
|
|
|
8595
8609
|
className
|
|
8596
8610
|
),
|
|
8597
8611
|
children: [
|
|
8598
|
-
label || showValue ? /* @__PURE__ */ (0,
|
|
8599
|
-
label ? /* @__PURE__ */ (0,
|
|
8600
|
-
showValue ? /* @__PURE__ */ (0,
|
|
8612
|
+
label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "ow-color-slider__header", children: [
|
|
8613
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { id: labelId, className: "ow-color-slider__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", {}),
|
|
8614
|
+
showValue ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("output", { className: "ow-color-slider__value", "aria-hidden": "true", children: shown }) : null
|
|
8601
8615
|
] }) : null,
|
|
8602
|
-
/* @__PURE__ */ (0,
|
|
8616
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
8603
8617
|
"div",
|
|
8604
8618
|
{
|
|
8605
8619
|
ref: trackRef,
|
|
@@ -8608,12 +8622,12 @@ var ColorSlider = /* @__PURE__ */ (0, import_react68.forwardRef)(function ColorS
|
|
|
8608
8622
|
"--ow-color-slider-gradient": `linear-gradient(var(--ow-color-slider-direction), ${gradient(channel, color.value, rgba)})`
|
|
8609
8623
|
},
|
|
8610
8624
|
...drag.handlers,
|
|
8611
|
-
children: /* @__PURE__ */ (0,
|
|
8625
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
8612
8626
|
"div",
|
|
8613
8627
|
{
|
|
8614
8628
|
className: "ow-color-slider__thumb",
|
|
8615
8629
|
style: { "--ow-color-slider-position": `${current / spec.max * 100}%`, "--ow-color-slider-thumb": fill },
|
|
8616
|
-
children: /* @__PURE__ */ (0,
|
|
8630
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
8617
8631
|
"input",
|
|
8618
8632
|
{
|
|
8619
8633
|
ref: (element) => {
|
|
@@ -8645,7 +8659,7 @@ var ColorSlider = /* @__PURE__ */ (0, import_react68.forwardRef)(function ColorS
|
|
|
8645
8659
|
)
|
|
8646
8660
|
}
|
|
8647
8661
|
),
|
|
8648
|
-
name ? /* @__PURE__ */ (0,
|
|
8662
|
+
name ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("input", { type: "hidden", name, value: color.hex }) : null
|
|
8649
8663
|
]
|
|
8650
8664
|
}
|
|
8651
8665
|
);
|
|
@@ -8653,7 +8667,7 @@ var ColorSlider = /* @__PURE__ */ (0, import_react68.forwardRef)(function ColorS
|
|
|
8653
8667
|
|
|
8654
8668
|
// src/components/ColorPicker/ColorSwatchPicker.tsx
|
|
8655
8669
|
var import_react69 = require("react");
|
|
8656
|
-
var
|
|
8670
|
+
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
8657
8671
|
var ColorSwatchPicker = /* @__PURE__ */ (0, import_react69.forwardRef)(function ColorSwatchPicker2({ options, value, defaultValue, onChange, size: size2 = "md", shape = "square", disabled = false, name, className, ...aria }, ref) {
|
|
8658
8672
|
const [current, setCurrent] = useControllableState(value, defaultValue ?? "", onChange);
|
|
8659
8673
|
const refs = (0, import_react69.useRef)([]);
|
|
@@ -8690,7 +8704,7 @@ var ColorSwatchPicker = /* @__PURE__ */ (0, import_react69.forwardRef)(function
|
|
|
8690
8704
|
refs.current[target]?.focus();
|
|
8691
8705
|
choose(target);
|
|
8692
8706
|
}
|
|
8693
|
-
return /* @__PURE__ */ (0,
|
|
8707
|
+
return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
|
|
8694
8708
|
"div",
|
|
8695
8709
|
{
|
|
8696
8710
|
ref,
|
|
@@ -8707,7 +8721,7 @@ var ColorSwatchPicker = /* @__PURE__ */ (0, import_react69.forwardRef)(function
|
|
|
8707
8721
|
items2.map((item, index) => {
|
|
8708
8722
|
const isSelected = index === selectedIndex;
|
|
8709
8723
|
const isDisabled = disabled || Boolean(item.disabled);
|
|
8710
|
-
return /* @__PURE__ */ (0,
|
|
8724
|
+
return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
|
|
8711
8725
|
"div",
|
|
8712
8726
|
{
|
|
8713
8727
|
ref: (element) => {
|
|
@@ -8724,12 +8738,12 @@ var ColorSwatchPicker = /* @__PURE__ */ (0, import_react69.forwardRef)(function
|
|
|
8724
8738
|
style: { "--ow-color-swatch-picker-value": item.value },
|
|
8725
8739
|
onClick: () => choose(index),
|
|
8726
8740
|
onKeyDown: (event) => onKeyDown(event, index),
|
|
8727
|
-
children: /* @__PURE__ */ (0,
|
|
8741
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(CheckIcon, { size: size2 === "sm" ? 14 : 16, strokeWidth: 2.5, className: "ow-color-swatch-picker__check", "aria-hidden": "true" })
|
|
8728
8742
|
},
|
|
8729
8743
|
`${item.value}-${index}`
|
|
8730
8744
|
);
|
|
8731
8745
|
}),
|
|
8732
|
-
name ? /* @__PURE__ */ (0,
|
|
8746
|
+
name ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("input", { type: "hidden", name, value: selectedIndex >= 0 ? items2[selectedIndex].value : "" }) : null
|
|
8733
8747
|
]
|
|
8734
8748
|
}
|
|
8735
8749
|
);
|