besser-agentic-framework-ui 0.1.0 → 0.2.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.
Files changed (7) hide show
  1. package/LICENSE +21 -21
  2. package/dist/besser-agentic-framework-ui.js +1431 -497
  3. package/dist/components/GUIRenderer.d.ts +13 -1
  4. package/dist/style.css +1 -1
  5. package/dist/types/agent.d.ts +1 -0
  6. package/dist/types/payload.d.ts +3 -1
  7. package/package.json +6 -3
package/dist/besser-agentic-framework-ui.js CHANGED
@@ -1,10 +1,10 @@
1
- import { useCallback as e, useEffect as t, useId as n, useMemo as r, useRef as i, useState as a } from "react";
2
- import o from "react-markdown";
3
- import s from "remark-gfm";
4
- import c from "dompurify";
5
- import { jsx as l, jsxs as u } from "react/jsx-runtime";
1
+ import { createContext as e, useCallback as t, useContext as n, useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
2
+ import c from "react-markdown";
3
+ import l from "remark-gfm";
4
+ import u from "dompurify";
5
+ import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
6
6
  //#region src/types/payload.ts
7
- var d = {
7
+ var m = {
8
8
  USER_MESSAGE: "user_message",
9
9
  USER_VOICE: "user_voice",
10
10
  USER_FILE: "user_file",
@@ -23,10 +23,12 @@ var d = {
23
23
  AGENT_REPLY_REASONING_STEP: "agent_reply_reasoning_step",
24
24
  AGENT_REPLY_TASK_LIST_UPDATE: "agent_reply_task_list_update",
25
25
  AGENT_REPLY_AUDIO: "agent_reply_audio",
26
- AGENT_REPLY_UI: "agent_reply_ui",
26
+ AGENT_REPLY_GUI: "agent_reply_gui",
27
+ AGENT_REPLY_GUI_UPDATE: "agent_reply_gui_update",
27
28
  USER_UPDATE_UI: "user_update_ui",
29
+ USER_GUI_EVENT: "user_gui_event",
28
30
  FETCH_USER_MESSAGES: "fetch_user_messages"
29
- }, f = {
31
+ }, h = {
30
32
  REASONING_STARTED: "reasoning_started",
31
33
  REASONING_FINISHED: "reasoning_finished",
32
34
  LLM_TEXT: "llm_text",
@@ -37,27 +39,27 @@ var d = {
37
39
  TASK_SKIPPED: "task_skipped",
38
40
  PUSHBACK: "pushback",
39
41
  MAX_STEPS: "max_steps"
40
- }, p = {
42
+ }, g = {
41
43
  PENDING: "pending",
42
44
  IN_PROGRESS: "in_progress",
43
45
  COMPLETED: "completed",
44
46
  SKIPPED: "skipped"
45
- }, m = "reasoning_trace";
46
- function h(e) {
47
- return e.kind === f.REASONING_STARTED;
47
+ }, _ = "reasoning_trace";
48
+ function v(e) {
49
+ return e.kind === h.REASONING_STARTED;
48
50
  }
49
- function g(e) {
50
- return e.kind === f.REASONING_FINISHED;
51
+ function y(e) {
52
+ return e.kind === h.REASONING_FINISHED;
51
53
  }
52
- function _(e) {
53
- return e.steps.filter((e) => !h(e) && !g(e));
54
+ function b(e) {
55
+ return e.steps.filter((e) => !v(e) && !y(e));
54
56
  }
55
- function v(e) {
56
- return _(e).length === 0;
57
+ function x(e) {
58
+ return b(e).length === 0;
57
59
  }
58
60
  //#endregion
59
61
  //#region src/utils/contentDetect.ts
60
- var y = [
62
+ var S = [
61
63
  /^#{1,6}\s+\S/m,
62
64
  /^\s*[-*+]\s+\S/m,
63
65
  /^\s*\d+\.\s+\S/m,
@@ -70,10 +72,10 @@ var y = [
70
72
  /^\|[^\n]+\|\s*$/m,
71
73
  /^---+\s*$/m
72
74
  ];
73
- function b(e) {
74
- return !e || e.length < 2 ? !1 : y.some((t) => t.test(e));
75
+ function C(e) {
76
+ return !e || e.length < 2 ? !1 : S.some((t) => t.test(e));
75
77
  }
76
- var x = RegExp("^\\s*(" + [
78
+ var w = RegExp("^\\s*(" + [
77
79
  "function\\s",
78
80
  "def\\s",
79
81
  "class\\s",
@@ -95,20 +97,24 @@ var x = RegExp("^\\s*(" + [
95
97
  "<\\?php\\b",
96
98
  "<!DOCTYPE\\s"
97
99
  ].join("|") + ")", "m");
98
- function S(e) {
100
+ function T(e) {
99
101
  if (!e || e.length < 8) return !1;
100
102
  let t = e.split("\n");
101
- return t.length < 2 ? !1 : !!(x.test(e) || (e.match(/[{}();=]/g) ?? []).length / e.length > .05 && t.length >= 3);
103
+ return t.length < 2 ? !1 : !!(w.test(e) || (e.match(/[{}();=]/g) ?? []).length / e.length > .05 && t.length >= 3);
102
104
  }
103
- function C(e) {
104
- return b(e) ? "markdown" : S(e) ? "code" : "plain";
105
+ function E(e) {
106
+ return C(e) ? "markdown" : T(e) ? "code" : "plain";
105
107
  }
106
108
  //#endregion
107
109
  //#region src/components/GUIRenderer.tsx
108
- function w(e) {
110
+ var D = e(null);
111
+ function O(e) {
109
112
  return e.replace(/_([a-z])/g, (e, t) => t.toUpperCase());
110
113
  }
111
- var T = new Set(["unit_size", "icon_size"]), E = new Set([
114
+ function k(e) {
115
+ return e.replace(/\s*!important\s*$/, "");
116
+ }
117
+ var A = new Set(["unit_size", "icon_size"]), j = new Set([
112
118
  "color_palette",
113
119
  "primary_color",
114
120
  "line_color",
@@ -117,36 +123,59 @@ var T = new Set(["unit_size", "icon_size"]), E = new Set([
117
123
  "bar_color",
118
124
  "label_color",
119
125
  "fill_color"
120
- ]), D = {
126
+ ]), M = {
121
127
  background_color: "background",
122
128
  text_color: "color"
123
- }, O = new Set(["layout_type"]), k = new Set(["p_type", "alignment"]);
124
- function A(e) {
129
+ }, N = new Set(["layout_type", "alignment"]), P = new Set(["p_type"]);
130
+ function F(e) {
125
131
  if (!e) return {};
126
132
  let t = {};
127
- if (e.size) for (let [n, r] of Object.entries(e.size)) !r || T.has(n) || (t[w(n)] = r);
128
- if (e.position) for (let [n, r] of Object.entries(e.position)) !r || k.has(n) || (n === "display" ? r === "table" || r === "table-row" ? (t.display = "flex", t.flexWrap = "wrap", t.alignItems = "stretch") : r === "table-cell" ? (t.display = "flex", t.flex = "1", t.flexDirection = "column", t.height = "auto") : t.display = r : t[w(n)] = r);
129
- if (e.color) for (let [n, r] of Object.entries(e.color)) !r || E.has(n) || (t[D[n] ?? w(n)] = r);
133
+ if (e.size) for (let [n, r] of Object.entries(e.size)) !r || A.has(n) || (t[O(n)] = typeof r == "string" ? k(r) : r);
134
+ if (e.position) for (let [n, r] of Object.entries(e.position)) !r || P.has(n) || (n === "alignment" ? t.textAlign = typeof r == "string" ? k(r) : r : n === "display" ? r === "table" || r === "table-row" ? (t.display = "flex", t.flexWrap = "wrap", t.alignItems = "stretch") : r === "table-cell" ? (t.display = "flex", t.flex = "1", t.flexDirection = "column", t.height = "auto") : t.display = typeof r == "string" ? k(r) : r : t[O(n)] = typeof r == "string" ? k(r) : r);
135
+ if (e.color) for (let [n, r] of Object.entries(e.color)) !r || j.has(n) || (t[M[n] ?? O(n)] = typeof r == "string" ? k(r) : r);
130
136
  if (e.layout) {
131
137
  let n = e.layout.layout_type;
132
138
  n === "flex" ? t.display = "flex" : n === "grid" && (t.display = "grid");
133
- for (let [n, r] of Object.entries(e.layout)) !r || O.has(n) || (t[w(n)] = r);
139
+ for (let [n, r] of Object.entries(e.layout)) !r || N.has(n) || (t[O(n)] = typeof r == "string" ? k(r) : r);
134
140
  }
135
141
  return t;
136
142
  }
137
- function j(e, t) {
143
+ function ee(e) {
144
+ let t = e.trim().toLowerCase();
145
+ if (t.includes("gradient")) return !1;
146
+ if (t === "transparent" || t === "none" || t === "initial" || t === "" || t === "white" || t === "#fff" || t === "#ffffff") return !0;
147
+ let n = t.match(/^#([0-9a-f]{6})$/);
148
+ if (n) {
149
+ let e = parseInt(n[1], 16), t = e >> 16 & 255, r = e >> 8 & 255, i = e & 255;
150
+ return (t + r + i) / 3 > 200;
151
+ }
152
+ let r = t.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/);
153
+ if (r) {
154
+ let e = parseInt(r[1] + r[1], 16), t = parseInt(r[2] + r[2], 16), n = parseInt(r[3] + r[3], 16);
155
+ return (e + t + n) / 3 > 200;
156
+ }
157
+ return !1;
158
+ }
159
+ function I(e) {
160
+ let t = {
161
+ fontFamily: "inherit",
162
+ ...e
163
+ }, n = typeof t.background == "string" ? t.background : typeof t.backgroundColor == "string" ? t.backgroundColor : null;
164
+ return (n === null || ee(n)) && (delete t.background, delete t.backgroundColor, delete t.color), t;
165
+ }
166
+ function te(e, t, n = !1) {
138
167
  if (!Array.isArray(e)) return "";
139
- let n = "";
140
- for (let r of e) {
141
- if (!r.selectors?.length || !r.style) continue;
142
- let e = { ...r.style }, i = e.display;
143
- i === "table" || i === "table-row" ? (e.display = "flex", e["flex-wrap"] = "wrap") : i === "table-cell" && (e.display = "flex", e["flex-direction"] = "column", e.flex = "1", delete e.height, delete e.width);
144
- let a = Object.entries(e).map(([e, t]) => ` ${e}: ${t};`).join("\n"), o = (e) => `${e} {\n${a}\n}`, s = r.selectors.map((e) => `.${t} ${e}`).join(", ");
145
- r.atRuleType === "media" && r.mediaText ? n += `@media ${r.mediaText} {\n${o(s)}\n}\n` : n += o(s) + "\n";
168
+ let r = "";
169
+ for (let i of e) {
170
+ if (!i.selectors?.length || !i.style) continue;
171
+ let e = { ...i.style }, a = e.display;
172
+ a === "table" || a === "table-row" ? (e.display = "flex", e["flex-wrap"] = "wrap") : a === "table-cell" && (e.display = "flex", e["flex-direction"] = "column", e.flex = "1", delete e.height, delete e.width), n && (delete e.background, delete e["background-color"], delete e.color);
173
+ let o = Object.entries(e).map(([e, t]) => ` ${e}: ${t};`).join("\n"), s = (e) => `${e} {\n${o}\n}`, c = i.selectors.map((e) => `.${t} ${e}`).join(", ");
174
+ i.atRuleType === "media" && i.mediaText ? r += `@media ${i.mediaText} {\n${s(c)}\n}\n` : r += s(c) + "\n";
146
175
  }
147
- return n;
176
+ return r;
148
177
  }
149
- function M(e) {
178
+ function ne(e) {
150
179
  let t = [], n = e.custom_attributes?.series;
151
180
  if (typeof n == "string") try {
152
181
  t = JSON.parse(n);
@@ -286,36 +315,940 @@ function M(e) {
286
315
  };
287
316
  }
288
317
  }
289
- function N({ el: e }) {
290
- let n = i(null);
291
- t(() => {
292
- let t = n.current;
293
- if (!t) return;
294
- let r = !0, { traces: i, layout: a } = M(e);
295
- return import("plotly.js-dist-min").then((e) => {
296
- !r || !t || e.newPlot(t, i, a, {
318
+ var L = null, R = null;
319
+ function re() {
320
+ return L ? Promise.resolve(L) : (R ||= import("plotly.js-dist-min").then((e) => (L = e, e)), R);
321
+ }
322
+ function ie({ el: e }) {
323
+ let t = o(null);
324
+ r(() => {
325
+ let n = t.current;
326
+ if (!n) return;
327
+ let r = !0, { traces: i, layout: a } = ne(e);
328
+ return re().then((e) => {
329
+ !r || !n || e.newPlot(n, i, a, {
297
330
  responsive: !0,
298
331
  displayModeBar: !1
299
332
  });
300
333
  }), () => {
301
- r = !1, import("plotly.js-dist-min").then((e) => {
302
- t && e.purge(t);
334
+ r = !1, L && n ? L.purge(n) : R && R.then((e) => {
335
+ n && e.purge(n);
303
336
  });
304
337
  };
305
338
  }, [e.name, e.type]);
306
- let r = A(e.styling);
307
- return /* @__PURE__ */ l("div", {
339
+ let n = F(e.styling);
340
+ return /* @__PURE__ */ f("div", {
308
341
  id: e.component_id ?? void 0,
309
342
  className: (e.css_classes ?? []).join(" ") || void 0,
310
343
  style: {
311
344
  minHeight: "300px",
345
+ ...n
346
+ },
347
+ ref: t
348
+ });
349
+ }
350
+ var z = {
351
+ info: {
352
+ bg: "#eff6ff",
353
+ border: "#bfdbfe",
354
+ text: "#1e40af",
355
+ icon: "ℹ"
356
+ },
357
+ success: {
358
+ bg: "#f0fdf4",
359
+ border: "#bbf7d0",
360
+ text: "#166534",
361
+ icon: "✓"
362
+ },
363
+ warning: {
364
+ bg: "#fffbeb",
365
+ border: "#fde68a",
366
+ text: "#92400e",
367
+ icon: "⚠"
368
+ },
369
+ error: {
370
+ bg: "#fef2f2",
371
+ border: "#fecaca",
372
+ text: "#991b1b",
373
+ icon: "✕"
374
+ }
375
+ };
376
+ function ae({ el: e, id: t, className: n, style: r }) {
377
+ let [i, a] = s(!1);
378
+ if (i) return null;
379
+ let o = z[e.severity ?? "info"] ?? z.info;
380
+ return /* @__PURE__ */ p("div", {
381
+ id: t,
382
+ className: n,
383
+ role: "alert",
384
+ style: {
385
+ display: "flex",
386
+ alignItems: "flex-start",
387
+ gap: "10px",
388
+ padding: "10px 14px",
389
+ borderRadius: "6px",
390
+ border: `1px solid ${o.border}`,
391
+ background: o.bg,
392
+ color: o.text,
393
+ fontSize: "0.88em",
312
394
  ...r
313
395
  },
314
- ref: n
396
+ children: [
397
+ /* @__PURE__ */ f("span", {
398
+ style: {
399
+ fontWeight: 700,
400
+ flexShrink: 0
401
+ },
402
+ children: o.icon
403
+ }),
404
+ /* @__PURE__ */ p("div", {
405
+ style: { flex: 1 },
406
+ children: [e.title && /* @__PURE__ */ f("div", {
407
+ style: {
408
+ fontWeight: 600,
409
+ marginBottom: 2
410
+ },
411
+ children: e.title
412
+ }), /* @__PURE__ */ f("div", { children: e.content })]
413
+ }),
414
+ e.dismissible && /* @__PURE__ */ f("button", {
415
+ onClick: () => a(!0),
416
+ style: {
417
+ background: "none",
418
+ border: "none",
419
+ cursor: "pointer",
420
+ color: o.text,
421
+ padding: 0,
422
+ lineHeight: 1
423
+ },
424
+ "aria-label": "Dismiss",
425
+ children: "×"
426
+ })
427
+ ]
428
+ });
429
+ }
430
+ function oe({ el: e, id: t, onInteract: n }) {
431
+ let [r, i] = s(!!e.default_value);
432
+ return /* @__PURE__ */ f("div", {
433
+ style: { marginBottom: "4px" },
434
+ children: /* @__PURE__ */ p("label", {
435
+ style: {
436
+ display: "inline-flex",
437
+ alignItems: "center",
438
+ gap: "8px",
439
+ cursor: e.disabled ? "default" : "pointer",
440
+ userSelect: "none"
441
+ },
442
+ children: [e.label && /* @__PURE__ */ f("span", {
443
+ style: {
444
+ fontSize: "0.875em",
445
+ fontWeight: 500,
446
+ color: "#374151"
447
+ },
448
+ children: e.label
449
+ }), /* @__PURE__ */ p("span", {
450
+ style: {
451
+ position: "relative",
452
+ display: "inline-block",
453
+ width: "44px",
454
+ height: "24px",
455
+ flexShrink: 0
456
+ },
457
+ children: [
458
+ /* @__PURE__ */ f("input", {
459
+ type: "checkbox",
460
+ id: t,
461
+ name: e.name,
462
+ checked: r,
463
+ disabled: e.disabled,
464
+ style: {
465
+ opacity: 0,
466
+ width: 0,
467
+ height: 0,
468
+ position: "absolute"
469
+ },
470
+ onChange: (r) => {
471
+ i(r.target.checked), n?.(JSON.stringify({
472
+ elementId: t ?? e.name,
473
+ name: e.name,
474
+ fieldType: e.field_type,
475
+ label: e.label || void 0,
476
+ action: "onChange",
477
+ value: r.target.checked
478
+ }));
479
+ }
480
+ }),
481
+ /* @__PURE__ */ f("span", { style: {
482
+ position: "absolute",
483
+ inset: 0,
484
+ background: r ? "#2563eb" : "#cbd5e1",
485
+ borderRadius: "24px",
486
+ transition: "background 0.2s",
487
+ pointerEvents: "none"
488
+ } }),
489
+ /* @__PURE__ */ f("span", { style: {
490
+ position: "absolute",
491
+ top: "3px",
492
+ left: r ? "23px" : "3px",
493
+ width: "18px",
494
+ height: "18px",
495
+ borderRadius: "50%",
496
+ background: "#fff",
497
+ transition: "left 0.2s",
498
+ boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
499
+ pointerEvents: "none"
500
+ } })
501
+ ]
502
+ })]
503
+ })
504
+ });
505
+ }
506
+ function se({ el: e, id: t, onInteract: n }) {
507
+ let [r, i] = s(typeof e.default_value == "number" ? e.default_value : e.min_value ?? 0);
508
+ return /* @__PURE__ */ p("div", {
509
+ style: {
510
+ display: "flex",
511
+ alignItems: "center",
512
+ gap: "10px"
513
+ },
514
+ children: [/* @__PURE__ */ f("input", {
515
+ type: "range",
516
+ id: t,
517
+ name: e.name,
518
+ min: e.min_value ?? 0,
519
+ max: e.max_value ?? 100,
520
+ step: e.step ?? 1,
521
+ value: r,
522
+ disabled: e.disabled,
523
+ style: { flex: 1 },
524
+ onChange: (r) => {
525
+ let a = Number(r.target.value);
526
+ i(a), n?.(JSON.stringify({
527
+ elementId: t ?? e.name,
528
+ name: e.name,
529
+ fieldType: e.field_type,
530
+ label: e.label || void 0,
531
+ action: "onChange",
532
+ value: a
533
+ }));
534
+ }
535
+ }), /* @__PURE__ */ f("span", {
536
+ style: {
537
+ minWidth: "2.5em",
538
+ textAlign: "right",
539
+ fontSize: "0.875em",
540
+ color: "#374151"
541
+ },
542
+ children: r
543
+ })]
544
+ });
545
+ }
546
+ function ce({ el: e, id: t, className: n, onInteract: r }) {
547
+ let [i, a] = s(typeof e.default_value == "number" ? e.default_value : 0), [o, c] = s(0), l = e.max_value ?? 5;
548
+ return /* @__PURE__ */ f("div", {
549
+ id: t,
550
+ className: n,
551
+ style: {
552
+ display: "flex",
553
+ gap: "2px"
554
+ },
555
+ children: Array.from({ length: l }, (e, t) => t + 1).map((n) => /* @__PURE__ */ f("button", {
556
+ type: "button",
557
+ "aria-label": `${n} star${n === 1 ? "" : "s"}`,
558
+ style: {
559
+ background: "none",
560
+ border: "none",
561
+ padding: "0 2px",
562
+ cursor: e.disabled ? "default" : "pointer",
563
+ fontSize: "1.5em",
564
+ color: n <= (o || i) ? "#f59e0b" : "#d1d5db",
565
+ transition: "color 0.1s"
566
+ },
567
+ disabled: e.disabled,
568
+ onClick: () => {
569
+ let o = n === i ? 0 : n;
570
+ a(o), r?.(JSON.stringify({
571
+ elementId: t ?? e.name,
572
+ name: e.name,
573
+ fieldType: e.field_type,
574
+ label: e.label || void 0,
575
+ action: "onChange",
576
+ value: o
577
+ }));
578
+ },
579
+ onMouseEnter: () => !e.disabled && c(n),
580
+ onMouseLeave: () => c(0),
581
+ children: "★"
582
+ }, n))
583
+ });
584
+ }
585
+ function le({ el: e, id: t, className: n, onInteract: r }) {
586
+ let [i, a] = s([]), [o, c] = s(""), l = (n) => {
587
+ let o = n.trim();
588
+ if (o && !i.includes(o)) {
589
+ let n = [...i, o];
590
+ a(n), r?.(JSON.stringify({
591
+ elementId: t ?? e.name,
592
+ name: e.name,
593
+ fieldType: e.field_type,
594
+ label: e.label || void 0,
595
+ action: "onChange",
596
+ value: n
597
+ }));
598
+ }
599
+ c("");
600
+ }, u = (n) => {
601
+ let o = i.filter((e) => e !== n);
602
+ a(o), r?.(JSON.stringify({
603
+ elementId: t ?? e.name,
604
+ name: e.name,
605
+ fieldType: e.field_type,
606
+ label: e.label || void 0,
607
+ action: "onChange",
608
+ value: o
609
+ }));
610
+ };
611
+ return /* @__PURE__ */ p("div", {
612
+ id: t,
613
+ className: [n, "gui-tags-container"].filter(Boolean).join(" "),
614
+ style: {
615
+ display: "flex",
616
+ flexWrap: "wrap",
617
+ alignItems: "center",
618
+ gap: "4px",
619
+ padding: "4px 8px",
620
+ border: "1px solid #cbd5e1",
621
+ borderRadius: "4px",
622
+ minHeight: "38px"
623
+ },
624
+ children: [i.map((e) => /* @__PURE__ */ p("span", {
625
+ className: "gui-chip",
626
+ style: {
627
+ display: "inline-flex",
628
+ alignItems: "center",
629
+ gap: "4px",
630
+ padding: "2px 8px",
631
+ background: "#eff6ff",
632
+ color: "#1d4ed8",
633
+ borderRadius: "12px",
634
+ fontSize: "0.82em"
635
+ },
636
+ children: [e, /* @__PURE__ */ f("button", {
637
+ type: "button",
638
+ onClick: () => u(e),
639
+ style: {
640
+ background: "none",
641
+ border: "none",
642
+ cursor: "pointer",
643
+ color: "inherit",
644
+ padding: 0,
645
+ lineHeight: 1
646
+ },
647
+ children: "×"
648
+ })]
649
+ }, e)), /* @__PURE__ */ f("input", {
650
+ type: "text",
651
+ value: o,
652
+ placeholder: i.length === 0 ? e.placeholder ?? e.description ?? "Add tags…" : void 0,
653
+ disabled: e.disabled,
654
+ style: {
655
+ border: "none",
656
+ outline: "none",
657
+ fontFamily: "inherit",
658
+ fontSize: "inherit",
659
+ flex: "1 1 80px",
660
+ minWidth: "80px",
661
+ padding: "2px 0"
662
+ },
663
+ onChange: (e) => c(e.target.value),
664
+ onKeyDown: (e) => {
665
+ (e.key === "Enter" || e.key === ",") && (e.preventDefault(), l(o)), e.key === "Backspace" && !o && i.length && u(i[i.length - 1]);
666
+ },
667
+ onBlur: () => {
668
+ o && l(o);
669
+ }
670
+ })]
671
+ });
672
+ }
673
+ function ue({ el: e, id: t, className: n, onInteract: r }) {
674
+ let i = Math.max(2, Math.min(8, e.max_value ?? 6)), [a, c] = s(() => Array(i).fill("")), l = o(Array(i).fill(null)), u = (n, o) => {
675
+ let s = o.replace(/\D/g, "").slice(-1), u = [...a];
676
+ u[n] = s, c(u), r?.(JSON.stringify({
677
+ elementId: t ?? e.name,
678
+ name: e.name,
679
+ fieldType: e.field_type,
680
+ label: e.label || void 0,
681
+ action: "onChange",
682
+ value: u.join("")
683
+ })), s && n < i - 1 && l.current[n + 1]?.focus();
684
+ }, d = (e, t) => {
685
+ t.key === "Backspace" && !a[e] && e > 0 && l.current[e - 1]?.focus();
686
+ };
687
+ return /* @__PURE__ */ f("div", {
688
+ id: t,
689
+ className: n,
690
+ style: {
691
+ display: "flex",
692
+ gap: "8px"
693
+ },
694
+ children: a.map((t, n) => /* @__PURE__ */ f("input", {
695
+ ref: (e) => {
696
+ l.current[n] = e;
697
+ },
698
+ type: "text",
699
+ inputMode: "numeric",
700
+ maxLength: 1,
701
+ value: t,
702
+ disabled: e.disabled,
703
+ onChange: (e) => u(n, e.target.value),
704
+ onKeyDown: (e) => d(n, e),
705
+ style: {
706
+ width: "40px",
707
+ height: "44px",
708
+ textAlign: "center",
709
+ border: "1px solid #cbd5e1",
710
+ borderRadius: "6px",
711
+ fontSize: "1.25em",
712
+ fontFamily: "inherit"
713
+ }
714
+ }, n))
715
+ });
716
+ }
717
+ function B({ el: e, id: t, className: n, onInteract: r }) {
718
+ let [i, a] = s(""), [o, c] = s(""), l = {
719
+ padding: "6px 10px",
720
+ border: "1px solid #cbd5e1",
721
+ borderRadius: "4px",
722
+ fontFamily: "inherit"
723
+ }, u = (n, i) => r?.(JSON.stringify({
724
+ elementId: t ?? e.name,
725
+ name: e.name,
726
+ fieldType: e.field_type,
727
+ label: e.label || void 0,
728
+ action: "onChange",
729
+ value: {
730
+ from: n,
731
+ to: i
732
+ }
733
+ }));
734
+ return /* @__PURE__ */ p("div", {
735
+ id: t,
736
+ className: n,
737
+ style: {
738
+ display: "flex",
739
+ alignItems: "center",
740
+ gap: "8px",
741
+ flexWrap: "wrap"
742
+ },
743
+ children: [
744
+ /* @__PURE__ */ f("input", {
745
+ type: "date",
746
+ value: i,
747
+ max: o || void 0,
748
+ disabled: e.disabled,
749
+ style: l,
750
+ onChange: (e) => {
751
+ a(e.target.value), u(e.target.value, o);
752
+ }
753
+ }),
754
+ /* @__PURE__ */ f("span", {
755
+ style: {
756
+ color: "#94a3b8",
757
+ fontSize: "0.9em"
758
+ },
759
+ children: "to"
760
+ }),
761
+ /* @__PURE__ */ f("input", {
762
+ type: "date",
763
+ value: o,
764
+ min: i || void 0,
765
+ disabled: e.disabled,
766
+ style: l,
767
+ onChange: (e) => {
768
+ c(e.target.value), u(i, e.target.value);
769
+ }
770
+ })
771
+ ]
772
+ });
773
+ }
774
+ function V({ el: e, id: t, className: n, onInteract: r }) {
775
+ let i = e.options ?? [], [a, o] = s(() => typeof e.default_value == "string" && e.default_value ? e.default_value.split(",").map((e) => e.trim()).filter(Boolean) : []), c = (n) => {
776
+ let i = a.includes(n) ? a.filter((e) => e !== n) : [...a, n];
777
+ o(i), r?.(JSON.stringify({
778
+ elementId: t ?? e.name,
779
+ name: e.name,
780
+ fieldType: e.field_type,
781
+ label: e.label || void 0,
782
+ action: "onChange",
783
+ value: i
784
+ }));
785
+ };
786
+ return /* @__PURE__ */ p("div", {
787
+ id: t,
788
+ className: n,
789
+ style: {
790
+ display: "flex",
791
+ flexDirection: "column",
792
+ gap: "6px"
793
+ },
794
+ children: [a.length > 0 && /* @__PURE__ */ f("div", {
795
+ style: {
796
+ display: "flex",
797
+ flexWrap: "wrap",
798
+ gap: "4px"
799
+ },
800
+ children: a.map((t) => /* @__PURE__ */ p("span", {
801
+ className: "gui-chip",
802
+ style: {
803
+ display: "inline-flex",
804
+ alignItems: "center",
805
+ gap: "4px",
806
+ padding: "2px 8px",
807
+ background: "#eff6ff",
808
+ color: "#1d4ed8",
809
+ borderRadius: "12px",
810
+ fontSize: "0.82em"
811
+ },
812
+ children: [i.find((e) => e.value === t)?.label ?? t, /* @__PURE__ */ f("button", {
813
+ type: "button",
814
+ onClick: () => c(t),
815
+ disabled: e.disabled,
816
+ style: {
817
+ background: "none",
818
+ border: "none",
819
+ cursor: "pointer",
820
+ color: "inherit",
821
+ padding: 0,
822
+ lineHeight: 1
823
+ },
824
+ children: "×"
825
+ })]
826
+ }, t))
827
+ }), /* @__PURE__ */ f("div", {
828
+ className: "gui-ms-list",
829
+ style: {
830
+ border: "1px solid #cbd5e1",
831
+ borderRadius: "4px",
832
+ overflow: "hidden"
833
+ },
834
+ children: i.map((t, n) => {
835
+ let r = a.includes(t.value);
836
+ return /* @__PURE__ */ p("div", {
837
+ className: `gui-ms-item${r ? " gui-ms-item--selected" : ""}`,
838
+ onClick: () => !e.disabled && c(t.value),
839
+ style: {
840
+ padding: "6px 10px",
841
+ cursor: e.disabled ? "default" : "pointer",
842
+ background: r ? "#dbeafe" : n % 2 == 0 ? "#fff" : "#f8fafc",
843
+ color: r ? "#1d4ed8" : "#374151",
844
+ fontWeight: r ? 500 : 400,
845
+ borderBottom: n < i.length - 1 ? "1px solid #e2e8f0" : "none",
846
+ userSelect: "none",
847
+ display: "flex",
848
+ justifyContent: "space-between",
849
+ alignItems: "center"
850
+ },
851
+ children: [/* @__PURE__ */ f("span", { children: t.label }), r && /* @__PURE__ */ f("span", {
852
+ style: {
853
+ color: "#2563eb",
854
+ fontWeight: 700
855
+ },
856
+ children: "✓"
857
+ })]
858
+ }, n);
859
+ })
860
+ })]
861
+ });
862
+ }
863
+ var H = {
864
+ Text: "text",
865
+ Password: "password",
866
+ Email: "email",
867
+ Number: "number",
868
+ Date: "date",
869
+ Time: "time",
870
+ Color: "color",
871
+ File: "file",
872
+ Search: "search",
873
+ URL: "url",
874
+ Tel: "tel",
875
+ Hidden: "hidden",
876
+ Range: "range",
877
+ Checkbox: "checkbox"
878
+ };
879
+ function de({ el: e, onInteract: t }) {
880
+ let n = e.custom_attributes ?? {}, r = e.label ?? n["data-label"] ?? void 0, i = e.placeholder ?? n["data-placeholder"] ?? e.description ?? e.name, a = e.required ?? n["data-required"] === "true", o = e.min_value ?? (n["data-min"] == null ? void 0 : Number(n["data-min"])), s = e.max_value ?? (n["data-max"] == null ? void 0 : Number(n["data-max"])), c = e.step ?? (n["data-step"] == null ? void 0 : Number(n["data-step"])), l = e.default_value;
881
+ l == null && n["data-default-checked"] != null && (l = String(n["data-default-checked"]).toLowerCase() === "true");
882
+ let u = e.options ?? [];
883
+ u.length === 0 && n["data-options"] && (u = String(n["data-options"]).split(",").map((e) => e.trim()).filter(Boolean).map((e) => ({
884
+ label: e,
885
+ value: e
886
+ })));
887
+ let m = {
888
+ ...e,
889
+ label: r,
890
+ placeholder: i,
891
+ required: a,
892
+ min_value: o,
893
+ max_value: s,
894
+ step: c,
895
+ default_value: l,
896
+ options: u
897
+ }, h = F(e.styling), g = e.component_id ?? void 0, _ = (e.css_classes ?? []).join(" ") || void 0, v = e.field_type ?? "Text", y = i, b = e.disabled ?? !1, x = e.readonly ?? !1, S = {
898
+ padding: "6px 10px",
899
+ border: "1px solid #cbd5e1",
900
+ borderRadius: "4px",
901
+ fontFamily: "inherit",
902
+ width: "100%",
903
+ boxSizing: "border-box",
904
+ ...h
905
+ }, C = (n) => t?.(JSON.stringify({
906
+ elementId: g ?? e.name,
907
+ name: e.name,
908
+ fieldType: v,
909
+ label: r || void 0,
910
+ action: "onChange",
911
+ value: n
912
+ })), w = (e) => r ? /* @__PURE__ */ p("div", {
913
+ style: {
914
+ display: "flex",
915
+ flexDirection: "column",
916
+ gap: "4px"
917
+ },
918
+ children: [/* @__PURE__ */ p("label", {
919
+ htmlFor: g,
920
+ style: {
921
+ fontSize: "0.875em",
922
+ fontWeight: 500,
923
+ color: "#374151"
924
+ },
925
+ children: [r, a && /* @__PURE__ */ f("span", {
926
+ style: {
927
+ color: "#ef4444",
928
+ marginLeft: 2
929
+ },
930
+ children: "*"
931
+ })]
932
+ }), e]
933
+ }) : /* @__PURE__ */ f(d, { children: e });
934
+ switch (v) {
935
+ case "TextArea":
936
+ case "RichText": return w(/* @__PURE__ */ f("textarea", {
937
+ id: g,
938
+ name: e.name,
939
+ className: _,
940
+ style: {
941
+ ...S,
942
+ minHeight: "80px",
943
+ resize: "vertical"
944
+ },
945
+ placeholder: y,
946
+ required: a,
947
+ disabled: b,
948
+ readOnly: x,
949
+ defaultValue: l,
950
+ onBlur: (e) => C(e.target.value)
951
+ }));
952
+ case "Dropdown": return w(/* @__PURE__ */ p("select", {
953
+ id: g,
954
+ name: e.name,
955
+ className: _,
956
+ style: S,
957
+ required: a,
958
+ disabled: b,
959
+ defaultValue: l,
960
+ onChange: (e) => C(e.target.value),
961
+ children: [/* @__PURE__ */ f("option", {
962
+ value: "",
963
+ children: "— Select —"
964
+ }), u.map((e, t) => /* @__PURE__ */ f("option", {
965
+ value: e.value,
966
+ children: e.label
967
+ }, t))]
968
+ }));
969
+ case "MultiSelect": return w(/* @__PURE__ */ f(V, {
970
+ el: m,
971
+ id: g,
972
+ className: _,
973
+ onInteract: t
974
+ }));
975
+ case "RadioGroup": return w(/* @__PURE__ */ f("div", {
976
+ role: "radiogroup",
977
+ style: {
978
+ display: "flex",
979
+ flexDirection: "column",
980
+ gap: "6px"
981
+ },
982
+ children: u.map((t, n) => /* @__PURE__ */ p("label", {
983
+ style: {
984
+ display: "flex",
985
+ alignItems: "center",
986
+ gap: "6px",
987
+ cursor: b ? "default" : "pointer"
988
+ },
989
+ children: [/* @__PURE__ */ f("input", {
990
+ type: "radio",
991
+ name: e.name,
992
+ value: t.value,
993
+ required: a,
994
+ disabled: b,
995
+ onChange: () => C(t.value)
996
+ }), t.label]
997
+ }, n))
998
+ }));
999
+ case "CheckboxGroup": return w(/* @__PURE__ */ f("div", {
1000
+ style: {
1001
+ display: "flex",
1002
+ flexDirection: "column",
1003
+ gap: "6px"
1004
+ },
1005
+ children: u.map((t, n) => /* @__PURE__ */ p("label", {
1006
+ style: {
1007
+ display: "flex",
1008
+ alignItems: "center",
1009
+ gap: "6px",
1010
+ cursor: b ? "default" : "pointer"
1011
+ },
1012
+ children: [/* @__PURE__ */ f("input", {
1013
+ type: "checkbox",
1014
+ name: `${e.name}[]`,
1015
+ value: t.value,
1016
+ disabled: b,
1017
+ onChange: (e) => C({
1018
+ option: t.value,
1019
+ checked: e.target.checked
1020
+ })
1021
+ }), t.label]
1022
+ }, n))
1023
+ }));
1024
+ case "Toggle": return /* @__PURE__ */ f(oe, {
1025
+ el: m,
1026
+ id: g,
1027
+ onInteract: t
1028
+ });
1029
+ case "Slider": return w(/* @__PURE__ */ f(se, {
1030
+ el: m,
1031
+ id: g,
1032
+ onInteract: t
1033
+ }));
1034
+ case "Spinner": return w(/* @__PURE__ */ f("input", {
1035
+ type: "number",
1036
+ id: g,
1037
+ name: e.name,
1038
+ className: _,
1039
+ style: S,
1040
+ placeholder: y,
1041
+ required: a,
1042
+ disabled: b,
1043
+ readOnly: x,
1044
+ min: o,
1045
+ max: s,
1046
+ step: c ?? 1,
1047
+ defaultValue: l,
1048
+ onBlur: (e) => C(Number(e.target.value))
1049
+ }));
1050
+ case "Rating": return w(/* @__PURE__ */ f(ce, {
1051
+ el: m,
1052
+ id: g,
1053
+ className: _,
1054
+ onInteract: t
1055
+ }));
1056
+ case "Tags": return w(/* @__PURE__ */ f(le, {
1057
+ el: m,
1058
+ id: g,
1059
+ className: _,
1060
+ onInteract: t
1061
+ }));
1062
+ case "OTP": return w(/* @__PURE__ */ f(ue, {
1063
+ el: m,
1064
+ id: g,
1065
+ className: _,
1066
+ onInteract: t
1067
+ }));
1068
+ case "DateRange": return w(/* @__PURE__ */ f(B, {
1069
+ el: m,
1070
+ id: g,
1071
+ className: _,
1072
+ onInteract: t
1073
+ }));
1074
+ case "DateTime": return w(/* @__PURE__ */ f("input", {
1075
+ type: "datetime-local",
1076
+ id: g,
1077
+ name: e.name,
1078
+ className: _,
1079
+ style: S,
1080
+ required: a,
1081
+ disabled: b,
1082
+ readOnly: x,
1083
+ defaultValue: l,
1084
+ onBlur: (e) => C(e.target.value)
1085
+ }));
1086
+ case "Color": return w(/* @__PURE__ */ f("input", {
1087
+ type: "color",
1088
+ id: g,
1089
+ name: e.name,
1090
+ className: _,
1091
+ style: {
1092
+ width: "48px",
1093
+ height: "36px",
1094
+ padding: "2px",
1095
+ border: "1px solid #cbd5e1",
1096
+ borderRadius: "4px",
1097
+ cursor: b ? "default" : "pointer"
1098
+ },
1099
+ disabled: b,
1100
+ defaultValue: l || "#000000",
1101
+ onChange: (e) => C(e.target.value)
1102
+ }));
1103
+ case "Checkbox": return /* @__PURE__ */ f("div", {
1104
+ style: h,
1105
+ children: /* @__PURE__ */ p("label", {
1106
+ htmlFor: g,
1107
+ style: {
1108
+ display: "inline-flex",
1109
+ alignItems: "center",
1110
+ gap: "6px",
1111
+ cursor: b ? "default" : "pointer",
1112
+ userSelect: "none",
1113
+ fontSize: "0.875em",
1114
+ fontWeight: 500,
1115
+ color: "#374151"
1116
+ },
1117
+ children: [/* @__PURE__ */ f("input", {
1118
+ type: "checkbox",
1119
+ id: g,
1120
+ name: e.name,
1121
+ className: _,
1122
+ required: a,
1123
+ disabled: b,
1124
+ defaultChecked: !!l,
1125
+ onChange: (e) => C(e.target.checked)
1126
+ }), r && /* @__PURE__ */ p("span", { children: [r, a && /* @__PURE__ */ f("span", {
1127
+ style: {
1128
+ color: "#ef4444",
1129
+ marginLeft: 2
1130
+ },
1131
+ children: "*"
1132
+ })] })]
1133
+ })
1134
+ });
1135
+ case "File": {
1136
+ let t = n["data-accept"] || void 0, r = e.multiple === !0 || n["data-multiple"] === "true";
1137
+ return w(/* @__PURE__ */ f("input", {
1138
+ type: "file",
1139
+ id: g,
1140
+ name: e.name,
1141
+ className: _,
1142
+ style: S,
1143
+ required: a,
1144
+ disabled: b,
1145
+ accept: t,
1146
+ multiple: r,
1147
+ onChange: (e) => {
1148
+ let t = e.target.files;
1149
+ if (!t || t.length === 0) {
1150
+ C(null);
1151
+ return;
1152
+ }
1153
+ let n = Array.from(t).map((e) => e.name);
1154
+ C(r ? n : n[0]);
1155
+ }
1156
+ }));
1157
+ }
1158
+ case "ImageUpload": return w(/* @__PURE__ */ f("input", {
1159
+ type: "file",
1160
+ id: g,
1161
+ name: e.name,
1162
+ className: _,
1163
+ style: S,
1164
+ required: a,
1165
+ disabled: b,
1166
+ accept: "image/*",
1167
+ onChange: (e) => C(e.target.files?.[0]?.name)
1168
+ }));
1169
+ default: return w(/* @__PURE__ */ f("input", {
1170
+ type: H[v] ?? v.toLowerCase(),
1171
+ id: g,
1172
+ name: e.name,
1173
+ className: _,
1174
+ style: S,
1175
+ placeholder: y,
1176
+ required: a,
1177
+ disabled: b,
1178
+ readOnly: x,
1179
+ min: o,
1180
+ max: s,
1181
+ step: c,
1182
+ defaultValue: l,
1183
+ onBlur: (e) => C(e.target.value)
1184
+ }));
1185
+ }
1186
+ }
1187
+ function fe({ el: e, id: t, className: r, style: i }) {
1188
+ let a = n(D);
1189
+ return a ? /* @__PURE__ */ p("div", {
1190
+ id: t,
1191
+ className: ["gui-agent-widget", r].filter(Boolean).join(" "),
1192
+ style: {
1193
+ display: "flex",
1194
+ flexDirection: "column",
1195
+ border: "1px solid #e2e8f0",
1196
+ borderRadius: 8,
1197
+ overflow: "hidden",
1198
+ background: "#fff",
1199
+ ...i
1200
+ },
1201
+ children: [/* @__PURE__ */ p("div", {
1202
+ style: {
1203
+ padding: "10px 14px",
1204
+ background: "#f8fafc",
1205
+ borderBottom: "1px solid #e2e8f0",
1206
+ fontWeight: 600,
1207
+ fontSize: "0.9em",
1208
+ display: "flex",
1209
+ alignItems: "center",
1210
+ gap: 8,
1211
+ flexShrink: 0
1212
+ },
1213
+ children: [
1214
+ /* @__PURE__ */ f("span", {
1215
+ style: { fontSize: "1.1em" },
1216
+ children: "🤖"
1217
+ }),
1218
+ e.agent_title ?? e.agent_name ?? "Agent",
1219
+ /* @__PURE__ */ f("span", { style: {
1220
+ marginLeft: "auto",
1221
+ width: 8,
1222
+ height: 8,
1223
+ borderRadius: "50%",
1224
+ background: a.status === "connected" ? "#22c55e" : "#f59e0b",
1225
+ flexShrink: 0
1226
+ } })
1227
+ ]
1228
+ }), /* @__PURE__ */ f($, {
1229
+ messages: a.messages,
1230
+ setMessages: a.setMessages,
1231
+ status: a.status,
1232
+ send: a.send
1233
+ })]
1234
+ }) : /* @__PURE__ */ f("div", {
1235
+ id: t,
1236
+ className: r,
1237
+ style: {
1238
+ display: "flex",
1239
+ alignItems: "center",
1240
+ justifyContent: "center",
1241
+ padding: 24,
1242
+ color: "#94a3b8",
1243
+ border: "1px solid #e2e8f0",
1244
+ borderRadius: 8,
1245
+ ...i
1246
+ },
1247
+ children: "Chat widget not connected"
315
1248
  });
316
1249
  }
317
- function P(e, t, n) {
318
- let r = A(e.styling), i = e.component_id ?? void 0, a = (e.css_classes ?? []).join(" ") || void 0;
1250
+ function U(e, t, n, r = !1) {
1251
+ let i = F(e.styling), a = e.component_id ?? void 0, o = (e.css_classes ?? []).join(" ") || void 0;
319
1252
  switch (e.type) {
320
1253
  case "Text": {
321
1254
  let t = new Set([
@@ -332,102 +1265,102 @@ function P(e, t, n) {
332
1265
  "li",
333
1266
  "td",
334
1267
  "th"
335
- ]);
336
- return /* @__PURE__ */ l(e.tag_name && t.has(e.tag_name) ? e.tag_name : "p", {
337
- id: i,
338
- className: a,
339
- style: r,
1268
+ ]), n = e.tag_name && t.has(e.tag_name) ? e.tag_name : "p";
1269
+ return n === "p" && (i.display === "flex" || i.display === "grid") && (n = "div"), /* @__PURE__ */ f(n, {
1270
+ id: a,
1271
+ className: o,
1272
+ style: r ? I(i) : i,
340
1273
  children: e.content
341
1274
  }, e.name);
342
1275
  }
343
- case "Link": return /* @__PURE__ */ l("a", {
344
- id: i,
345
- className: a,
346
- style: r,
1276
+ case "Link": return /* @__PURE__ */ f("a", {
1277
+ id: a,
1278
+ className: o,
1279
+ style: r ? I(i) : {
1280
+ fontFamily: "inherit",
1281
+ ...i
1282
+ },
347
1283
  href: e.url ?? "#",
348
1284
  target: e.target ?? "_self",
349
1285
  rel: e.rel ?? (e.target === "_blank" ? "noopener noreferrer" : void 0),
350
1286
  onClick: (r) => {
351
1287
  e.url && n?.(e.url) ? r.preventDefault() : t?.(JSON.stringify({
352
- elementId: i ?? e.name,
1288
+ elementId: a ?? e.name,
1289
+ name: e.name,
1290
+ label: e.label || void 0,
353
1291
  action: "onClick",
354
1292
  value: e.url
355
1293
  }));
356
1294
  },
357
1295
  children: e.label
358
1296
  }, e.name);
359
- case "Button": return /* @__PURE__ */ l("button", {
360
- id: i,
361
- className: a,
362
- style: r,
1297
+ case "Button": return /* @__PURE__ */ f("button", {
1298
+ id: a,
1299
+ className: o,
1300
+ style: {
1301
+ appearance: "none",
1302
+ fontFamily: "inherit",
1303
+ lineHeight: "inherit",
1304
+ ...i
1305
+ },
363
1306
  type: "button",
364
1307
  onClick: () => {
365
- e.actionType === "navigate" && e.url && n?.(e.url) || t?.(JSON.stringify({
366
- elementId: i ?? e.name,
1308
+ e.actionType?.toLowerCase() === "navigate" && e.url && n?.(e.url) || t?.(JSON.stringify({
1309
+ elementId: a ?? e.name,
1310
+ name: e.name,
1311
+ label: e.label || void 0,
1312
+ actionType: e.actionType || void 0,
367
1313
  action: "onClick"
368
1314
  }));
369
1315
  },
370
1316
  children: e.label
371
1317
  }, e.name);
372
- case "Image": return /* @__PURE__ */ l("img", {
373
- id: i,
374
- className: a,
375
- style: r,
1318
+ case "Image": return /* @__PURE__ */ f("img", {
1319
+ id: a,
1320
+ className: o,
1321
+ style: i,
376
1322
  src: e.source ?? "",
377
1323
  alt: e.name,
378
1324
  onError: (e) => {
379
1325
  e.target.style.display = "none";
380
1326
  }
381
1327
  }, e.name);
382
- case "InputField": return /* @__PURE__ */ l("input", {
383
- id: i,
384
- name: e.name,
385
- className: a,
386
- style: {
387
- padding: "6px 10px",
388
- border: "1px solid #cbd5e1",
389
- borderRadius: "4px",
390
- ...r
391
- },
392
- type: (e.field_type ?? "text").toLowerCase(),
393
- placeholder: e.description || e.name,
394
- onBlur: (n) => t?.(JSON.stringify({
395
- elementId: i ?? e.name,
396
- action: "onChange",
397
- value: n.target.value
398
- }))
1328
+ case "InputField": return /* @__PURE__ */ f(de, {
1329
+ el: e,
1330
+ onInteract: t
399
1331
  }, e.name);
400
- case "Form": return /* @__PURE__ */ l("form", {
401
- id: i,
402
- className: a,
1332
+ case "Form": return /* @__PURE__ */ f("form", {
1333
+ id: a,
1334
+ className: o,
403
1335
  style: {
404
1336
  display: "flex",
405
1337
  flexDirection: "column",
406
1338
  gap: "8px",
407
- ...r
1339
+ ...r ? I(i) : i
408
1340
  },
409
1341
  onSubmit: (n) => {
410
1342
  n.preventDefault();
411
1343
  let r = Object.fromEntries(new FormData(n.currentTarget));
412
1344
  t?.(JSON.stringify({
413
- elementId: i ?? e.name,
1345
+ elementId: a ?? e.name,
1346
+ name: e.name,
414
1347
  action: "onSubmit",
415
1348
  value: r
416
1349
  }));
417
1350
  },
418
- children: (e.inputFields ?? []).map((e) => P(e, t, n))
1351
+ children: (e.inputFields ?? []).map((e) => U(e, t, n, r))
419
1352
  }, e.name);
420
- case "Menu": return /* @__PURE__ */ l(e.tag_name && e.tag_name === "nav" ? "nav" : "div", {
421
- id: i,
422
- className: a,
423
- style: r,
424
- children: /* @__PURE__ */ l("ul", {
1353
+ case "Menu": return /* @__PURE__ */ f(e.tag_name && e.tag_name === "nav" ? "nav" : "div", {
1354
+ id: a,
1355
+ className: o,
1356
+ style: r ? I(i) : i,
1357
+ children: /* @__PURE__ */ f("ul", {
425
1358
  style: {
426
1359
  listStyle: "none",
427
1360
  padding: 0,
428
1361
  margin: 0
429
1362
  },
430
- children: (e.menuItems ?? []).map((r, i) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l("a", {
1363
+ children: (e.menuItems ?? []).map((r, i) => /* @__PURE__ */ f("li", { children: /* @__PURE__ */ f("a", {
431
1364
  href: r.url ?? "#",
432
1365
  target: r.target,
433
1366
  rel: r.target === "_blank" ? "noopener noreferrer" : void 0,
@@ -435,6 +1368,8 @@ function P(e, t, n) {
435
1368
  onClick: (i) => {
436
1369
  r.url && n?.(r.url) ? i.preventDefault() : t?.(JSON.stringify({
437
1370
  elementId: e.component_id ?? e.name,
1371
+ name: e.name,
1372
+ label: r.label,
438
1373
  action: "onClick",
439
1374
  value: r.url
440
1375
  }));
@@ -443,14 +1378,14 @@ function P(e, t, n) {
443
1378
  }) }, i))
444
1379
  })
445
1380
  }, e.name);
446
- case "DataList": return /* @__PURE__ */ l("ul", {
447
- id: i,
448
- className: a,
1381
+ case "DataList": return /* @__PURE__ */ f("ul", {
1382
+ id: a,
1383
+ className: o,
449
1384
  style: {
450
1385
  padding: 0,
451
- ...r
1386
+ ...r ? I(i) : i
452
1387
  },
453
- children: (e.list_sources ?? []).map((e, t) => /* @__PURE__ */ u("li", {
1388
+ children: (e.list_sources ?? []).map((e, t) => /* @__PURE__ */ p("li", {
454
1389
  style: {
455
1390
  padding: "4px 0",
456
1391
  color: "#94a3b8",
@@ -463,36 +1398,42 @@ function P(e, t, n) {
463
1398
  ]
464
1399
  }, t))
465
1400
  }, e.name);
1401
+ case "Alert": return /* @__PURE__ */ f(ae, {
1402
+ el: e,
1403
+ id: a,
1404
+ className: o,
1405
+ style: i
1406
+ }, e.name);
466
1407
  case "EmbeddedContent": {
467
1408
  let t = e.source ?? e.extra_props?.src ?? "";
468
- return t ? /* @__PURE__ */ l("iframe", {
469
- id: i,
470
- className: a,
1409
+ return t ? /* @__PURE__ */ f("iframe", {
1410
+ id: a,
1411
+ className: o,
471
1412
  style: {
472
1413
  width: "100%",
473
1414
  height: "300px",
474
1415
  border: "none",
475
- ...r
1416
+ ...i
476
1417
  },
477
1418
  src: t,
478
1419
  title: e.name,
479
1420
  loading: "lazy",
480
1421
  sandbox: "allow-scripts allow-same-origin"
481
- }, e.name) : /* @__PURE__ */ l("div", {
482
- id: i,
483
- className: a,
484
- style: r,
1422
+ }, e.name) : /* @__PURE__ */ f("div", {
1423
+ id: a,
1424
+ className: o,
1425
+ style: i,
485
1426
  children: "[Embedded Content]"
486
1427
  }, e.name);
487
1428
  }
488
1429
  case "ViewContainer": {
489
- let o = { ...r };
1430
+ let s = { ...i };
490
1431
  if (e.layout) {
491
1432
  let t = e.layout.layout_type;
492
- t === "flex" ? o.display = "flex" : t === "grid" && (o.display = "grid");
493
- for (let [t, n] of Object.entries(e.layout)) !n || t === "layout_type" || (o[w(t)] = n);
1433
+ t === "flex" ? s.display = "flex" : t === "grid" && (s.display = "grid");
1434
+ for (let [t, n] of Object.entries(e.layout)) !n || t === "layout_type" || t === "alignment" || (s[O(t)] = typeof n == "string" ? k(n) : n);
494
1435
  }
495
- let s = new Set([
1436
+ let c = r ? I(s) : s, l = new Set([
496
1437
  "div",
497
1438
  "section",
498
1439
  "article",
@@ -504,39 +1445,39 @@ function P(e, t, n) {
504
1445
  "ul",
505
1446
  "ol"
506
1447
  ]);
507
- return /* @__PURE__ */ l(e.tag_name && s.has(e.tag_name) ? e.tag_name : "div", {
508
- id: i,
509
- className: a,
510
- style: o,
511
- children: (e.view_elements ?? []).map((e) => P(e, t, n))
1448
+ return /* @__PURE__ */ f(e.tag_name && l.has(e.tag_name) ? e.tag_name : "div", {
1449
+ id: a,
1450
+ className: o,
1451
+ style: c,
1452
+ children: (e.view_elements ?? []).map((e) => U(e, t, n, r))
512
1453
  }, e.name);
513
1454
  }
514
1455
  case "LineChart":
515
1456
  case "BarChart":
516
1457
  case "PieChart":
517
1458
  case "RadarChart":
518
- case "RadialBarChart": return /* @__PURE__ */ l(N, { el: e }, e.name);
519
- case "Table": return /* @__PURE__ */ u("div", {
520
- id: i,
521
- className: a,
1459
+ case "RadialBarChart": return /* @__PURE__ */ f(ie, { el: e }, e.name);
1460
+ case "Table": return /* @__PURE__ */ p("div", {
1461
+ id: a,
1462
+ className: o,
522
1463
  style: {
523
1464
  overflowX: "auto",
524
- ...r
1465
+ ...r ? I(i) : i
525
1466
  },
526
- children: [e.title && /* @__PURE__ */ l("div", {
1467
+ children: [e.title && /* @__PURE__ */ f("div", {
527
1468
  style: {
528
1469
  fontWeight: 600,
529
1470
  marginBottom: 8,
530
1471
  fontSize: "0.95em"
531
1472
  },
532
1473
  children: e.title
533
- }), /* @__PURE__ */ u("table", {
1474
+ }), /* @__PURE__ */ p("table", {
534
1475
  style: {
535
1476
  borderCollapse: "collapse",
536
1477
  width: "100%",
537
1478
  fontSize: "0.88em"
538
1479
  },
539
- children: [e.show_header !== !1 && (e.columns ?? []).length > 0 && /* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: (e.columns ?? []).map((e, t) => /* @__PURE__ */ l("th", {
1480
+ children: [e.show_header !== !1 && (e.columns ?? []).length > 0 && /* @__PURE__ */ f("thead", { children: /* @__PURE__ */ f("tr", { children: (e.columns ?? []).map((e, t) => /* @__PURE__ */ f("th", {
540
1481
  style: {
541
1482
  padding: "6px 10px",
542
1483
  borderBottom: "2px solid #e2e8f0",
@@ -544,7 +1485,7 @@ function P(e, t, n) {
544
1485
  fontWeight: 600
545
1486
  },
546
1487
  children: e.label
547
- }, t)) }) }), /* @__PURE__ */ l("tbody", { children: /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", {
1488
+ }, t)) }) }), /* @__PURE__ */ f("tbody", { children: /* @__PURE__ */ f("tr", { children: /* @__PURE__ */ f("td", {
548
1489
  colSpan: (e.columns ?? []).length || 1,
549
1490
  style: {
550
1491
  padding: "8px 10px",
@@ -555,216 +1496,210 @@ function P(e, t, n) {
555
1496
  }) }) })]
556
1497
  })]
557
1498
  }, e.name);
558
- case "MetricCard": return /* @__PURE__ */ u("div", {
559
- id: i,
560
- className: ["gui-metric-card", a].filter(Boolean).join(" "),
561
- style: r,
1499
+ case "MetricCard": return /* @__PURE__ */ p("div", {
1500
+ id: a,
1501
+ className: ["gui-metric-card", o].filter(Boolean).join(" "),
1502
+ style: r ? I(i) : i,
562
1503
  children: [
563
- /* @__PURE__ */ l("div", {
1504
+ /* @__PURE__ */ f("div", {
564
1505
  className: "gui-metric-card__title",
565
1506
  children: e.metric_title ?? e.name
566
1507
  }),
567
- /* @__PURE__ */ l("div", {
1508
+ /* @__PURE__ */ f("div", {
568
1509
  className: "gui-metric-card__value",
569
1510
  style: { color: e.value_color ?? "#2c3e50" },
570
1511
  children: "—"
571
1512
  }),
572
- /* @__PURE__ */ l("div", {
1513
+ /* @__PURE__ */ f("div", {
573
1514
  className: "gui-metric-card__format",
574
1515
  children: e.format
575
1516
  })
576
1517
  ]
577
1518
  }, e.name);
578
- case "AgentComponent": return /* @__PURE__ */ u("div", {
579
- id: i,
580
- className: ["gui-agent-component", a].filter(Boolean).join(" "),
581
- style: r,
582
- children: [/* @__PURE__ */ l("span", { children: "🤖" }), /* @__PURE__ */ u("span", { children: [e.agent_title ?? e.agent_name ?? "Agent", " Widget"] })]
1519
+ case "AgentComponent": return /* @__PURE__ */ f(fe, {
1520
+ el: e,
1521
+ id: a,
1522
+ className: o,
1523
+ style: i
583
1524
  }, e.name);
584
1525
  default: return null;
585
1526
  }
586
1527
  }
587
- function F({ content: i, onInteract: o }) {
588
- let s = "gui-s" + n().replace(/[^a-zA-Z0-9]/g, ""), c = r(() => {
1528
+ function W({ content: e, onInteract: n, chatProps: o, chatMode: c = !1 }) {
1529
+ let l = "gui-s" + i().replace(/[^a-zA-Z0-9]/g, ""), u = a(() => {
589
1530
  try {
590
- let e = typeof i == "string" ? i : JSON.stringify(i);
591
- return JSON.parse(e);
1531
+ let t = typeof e == "string" ? e : JSON.stringify(e);
1532
+ return JSON.parse(t);
592
1533
  } catch {
593
1534
  return null;
594
1535
  }
595
- }, [i]), d = r(() => (c?.modules ?? []).flatMap((e) => e.screens), [c]), [f, p] = a(0), m = e((e) => {
1536
+ }, [e]), d = a(() => (u?.modules ?? []).flatMap((e) => e.screens), [u]), [m, h] = s(0), g = t((e) => {
596
1537
  let t = d.findIndex((t) => t.name === e);
597
- if (t >= 0) return p(t), !0;
1538
+ if (t >= 0) return h(t), !0;
598
1539
  let n = d.findIndex((t) => t.route_path === e);
599
- if (n >= 0) return p(n), !0;
1540
+ if (n >= 0) return h(n), !0;
600
1541
  if (e === "/" || e === "") {
601
1542
  let e = d.findIndex((e) => e.is_main_page);
602
- return p(e >= 0 ? e : 0), !0;
1543
+ return h(e >= 0 ? e : 0), !0;
603
1544
  }
604
1545
  return !1;
605
1546
  }, [d]);
606
- t(() => {
1547
+ r(() => {
607
1548
  let e = d.findIndex((e) => e.is_main_page);
608
- p(e >= 0 ? e : 0);
1549
+ h(e >= 0 ? e : 0);
609
1550
  }, [d]);
610
- let h = r(() => c?.style_entries ? j(c.style_entries, s) : "", [c, s]);
611
- if (t(() => {
612
- if (!h) return;
1551
+ let _ = a(() => u?.style_entries ? te(u.style_entries, l, c) : "", [
1552
+ u,
1553
+ l,
1554
+ c
1555
+ ]);
1556
+ if (r(() => {
1557
+ if (!_) return;
613
1558
  let e = document.createElement("style");
614
- return e.setAttribute("data-gui-scope", s), e.textContent = h, document.head.appendChild(e), () => {
1559
+ return e.setAttribute("data-gui-scope", l), e.textContent = _, document.head.appendChild(e), () => {
615
1560
  document.head.removeChild(e);
616
1561
  };
617
- }, [h, s]), !c) return /* @__PURE__ */ l("p", {
1562
+ }, [_, l]), !u) return /* @__PURE__ */ f("p", {
618
1563
  className: "msg-text--muted",
619
1564
  children: "[Invalid UI definition]"
620
1565
  });
621
- let g = d[f];
622
- if (!g) return /* @__PURE__ */ l("p", {
1566
+ let v = d[m];
1567
+ if (!v) return /* @__PURE__ */ f("p", {
623
1568
  className: "msg-text--muted",
624
1569
  children: "[No screens defined]"
625
1570
  });
626
- let _ = c.modules.length > 1, v = d.length > 1;
627
- return /* @__PURE__ */ u("div", {
628
- className: "gui-renderer",
629
- children: [
630
- /* @__PURE__ */ u("div", {
631
- className: "gui-renderer__header",
632
- children: [/* @__PURE__ */ l("span", {
633
- className: "gui-renderer__title",
634
- children: c.name
635
- }), c.description && /* @__PURE__ */ l("span", {
636
- className: "gui-renderer__description",
637
- children: c.description
638
- })]
639
- }),
640
- (_ || v) && /* @__PURE__ */ l("div", {
1571
+ let y = u.modules.length > 1, b = d.length > 1;
1572
+ return /* @__PURE__ */ f(D.Provider, {
1573
+ value: o ?? null,
1574
+ children: /* @__PURE__ */ p("div", {
1575
+ className: `gui-renderer${c ? " gui-renderer--chat" : ""}`,
1576
+ children: [(y || b) && /* @__PURE__ */ f("div", {
641
1577
  className: "gui-renderer__tabs",
642
1578
  role: "tablist",
643
- children: d.map((e, t) => /* @__PURE__ */ u("button", {
1579
+ children: d.map((e, t) => /* @__PURE__ */ p("button", {
644
1580
  role: "tab",
645
- "aria-selected": t === f,
646
- className: `gui-renderer__tab${t === f ? " gui-renderer__tab--active" : ""}`,
647
- onClick: () => p(t),
648
- children: [e.name, e.is_main_page && /* @__PURE__ */ l("span", {
1581
+ "aria-selected": t === m,
1582
+ className: `gui-renderer__tab${t === m ? " gui-renderer__tab--active" : ""}`,
1583
+ onClick: () => h(t),
1584
+ children: [e.name, e.is_main_page && /* @__PURE__ */ f("span", {
649
1585
  className: "gui-renderer__tab-badge",
650
1586
  children: "home"
651
1587
  })]
652
1588
  }, t))
653
- }),
654
- /* @__PURE__ */ l("div", {
655
- className: `gui-renderer__screen ${s}`,
656
- children: (g.view_elements ?? []).map((e) => P(e, o, m))
657
- })
658
- ]
1589
+ }), /* @__PURE__ */ f("div", {
1590
+ className: `gui-renderer__screen ${l}`,
1591
+ children: (v.view_elements ?? []).map((e) => U(e, n, g, c))
1592
+ })]
1593
+ })
659
1594
  });
660
1595
  }
661
1596
  //#endregion
662
1597
  //#region src/components/ReasoningTrace.tsx
663
- var I = new Set([
664
- f.TASK_ADDED,
665
- f.TASK_COMPLETED,
666
- f.TASK_SKIPPED
667
- ]), L = new Set([
1598
+ var pe = new Set([
1599
+ h.TASK_ADDED,
1600
+ h.TASK_COMPLETED,
1601
+ h.TASK_SKIPPED
1602
+ ]), me = new Set([
668
1603
  "add_tasks",
669
1604
  "complete_task",
670
1605
  "skip_task"
671
1606
  ]);
672
- function R(e) {
673
- if (e.kind !== f.LLM_TOOL_CALLS) return !1;
1607
+ function he(e) {
1608
+ if (e.kind !== h.LLM_TOOL_CALLS) return !1;
674
1609
  let t = e.details?.tool_calls ?? [];
675
- return t.length === 0 ? !1 : t.every((e) => e.name !== void 0 && L.has(e.name));
1610
+ return t.length === 0 ? !1 : t.every((e) => e.name !== void 0 && me.has(e.name));
676
1611
  }
677
- function z({ trace: e }) {
678
- let [n, r] = a(e.inProgress);
679
- t(() => {
680
- e.inProgress || r(!1);
1612
+ function G({ trace: e }) {
1613
+ let [t, n] = s(e.inProgress);
1614
+ r(() => {
1615
+ e.inProgress || n(!1);
681
1616
  }, [e.inProgress]);
682
- let i = e.inProgress || n, o = e.steps.filter((e) => !(e.kind === f.REASONING_STARTED || e.kind === f.REASONING_FINISHED || I.has(e.kind) || R(e))), s = new Set(o.map((e) => e.step)).size;
683
- return /* @__PURE__ */ u("div", {
1617
+ let i = e.inProgress || t, a = e.steps.filter((e) => !(e.kind === h.REASONING_STARTED || e.kind === h.REASONING_FINISHED || pe.has(e.kind) || he(e))), o = new Set(a.map((e) => e.step)).size;
1618
+ return /* @__PURE__ */ p("div", {
684
1619
  className: `reasoning-trace${e.inProgress ? " reasoning-trace--live" : ""}`,
685
- children: [/* @__PURE__ */ u("button", {
1620
+ children: [/* @__PURE__ */ p("button", {
686
1621
  type: "button",
687
1622
  className: `reasoning-trace__summary${i ? " reasoning-trace__summary--open" : ""}`,
688
- onClick: () => !e.inProgress && r((e) => !e),
1623
+ onClick: () => !e.inProgress && n((e) => !e),
689
1624
  disabled: e.inProgress,
690
1625
  "aria-expanded": i,
691
1626
  children: [
692
- /* @__PURE__ */ l("span", {
1627
+ /* @__PURE__ */ f("span", {
693
1628
  className: "reasoning-trace__icon",
694
1629
  "aria-hidden": !0,
695
1630
  children: e.inProgress ? "🧠" : "✨"
696
1631
  }),
697
- /* @__PURE__ */ l("span", {
1632
+ /* @__PURE__ */ f("span", {
698
1633
  className: "reasoning-trace__label",
699
- children: e.inProgress ? `Reasoning… (${s} step${s === 1 ? "" : "s"})` : `Reasoned across ${s} step${s === 1 ? "" : "s"}`
1634
+ children: e.inProgress ? `Reasoning… (${o} step${o === 1 ? "" : "s"})` : `Reasoned across ${o} step${o === 1 ? "" : "s"}`
700
1635
  }),
701
- !e.inProgress && /* @__PURE__ */ l("span", {
1636
+ !e.inProgress && /* @__PURE__ */ f("span", {
702
1637
  className: "reasoning-trace__chevron",
703
1638
  "aria-hidden": !0,
704
1639
  children: "▶"
705
1640
  })
706
1641
  ]
707
- }), /* @__PURE__ */ l("div", {
1642
+ }), /* @__PURE__ */ f("div", {
708
1643
  className: `reasoning-trace__body-wrapper${i ? " reasoning-trace__body-wrapper--open" : ""}`,
709
- children: /* @__PURE__ */ u("div", {
1644
+ children: /* @__PURE__ */ p("div", {
710
1645
  className: "reasoning-trace__body-inner",
711
- children: [/* @__PURE__ */ l(ne, { steps: o }), e.tasks.length > 0 && /* @__PURE__ */ l(ee, { tasks: e.tasks })]
1646
+ children: [/* @__PURE__ */ f(ve, { steps: a }), e.tasks.length > 0 && /* @__PURE__ */ f(ge, { tasks: e.tasks })]
712
1647
  })
713
1648
  })]
714
1649
  });
715
1650
  }
716
- var B = {
717
- [p.PENDING]: "pending",
718
- [p.IN_PROGRESS]: "in progress",
719
- [p.COMPLETED]: "completed",
720
- [p.SKIPPED]: "skipped"
1651
+ var K = {
1652
+ [g.PENDING]: "pending",
1653
+ [g.IN_PROGRESS]: "in progress",
1654
+ [g.COMPLETED]: "completed",
1655
+ [g.SKIPPED]: "skipped"
721
1656
  };
722
- function ee({ tasks: e }) {
723
- let t = e.reduce((e, t) => (e[t.status] = (e[t.status] ?? 0) + 1, e), {}), n = t[p.COMPLETED] ?? 0, r = t[p.SKIPPED] ?? 0, i = (t[p.PENDING] ?? 0) + (t[p.IN_PROGRESS] ?? 0);
724
- return /* @__PURE__ */ u("div", {
1657
+ function ge({ tasks: e }) {
1658
+ let t = e.reduce((e, t) => (e[t.status] = (e[t.status] ?? 0) + 1, e), {}), n = t[g.COMPLETED] ?? 0, r = t[g.SKIPPED] ?? 0, i = (t[g.PENDING] ?? 0) + (t[g.IN_PROGRESS] ?? 0);
1659
+ return /* @__PURE__ */ p("div", {
725
1660
  className: "task-panel",
726
- children: [/* @__PURE__ */ u("div", {
1661
+ children: [/* @__PURE__ */ p("div", {
727
1662
  className: "task-panel__header",
728
- children: [/* @__PURE__ */ l("span", {
1663
+ children: [/* @__PURE__ */ f("span", {
729
1664
  className: "task-panel__title",
730
1665
  children: "Tasks"
731
- }), /* @__PURE__ */ u("span", {
1666
+ }), /* @__PURE__ */ p("span", {
732
1667
  className: "task-panel__counts",
733
1668
  children: [
734
- n > 0 && /* @__PURE__ */ u("span", {
1669
+ n > 0 && /* @__PURE__ */ p("span", {
735
1670
  className: "task-panel__count task-panel__count--completed",
736
1671
  children: [n, " ✓"]
737
1672
  }),
738
- r > 0 && /* @__PURE__ */ u("span", {
1673
+ r > 0 && /* @__PURE__ */ p("span", {
739
1674
  className: "task-panel__count task-panel__count--skipped",
740
1675
  children: [r, " ⊘"]
741
1676
  }),
742
- i > 0 && /* @__PURE__ */ u("span", {
1677
+ i > 0 && /* @__PURE__ */ p("span", {
743
1678
  className: "task-panel__count task-panel__count--pending",
744
1679
  children: [i, " pending"]
745
1680
  })
746
1681
  ]
747
1682
  })]
748
- }), /* @__PURE__ */ l("ul", {
1683
+ }), /* @__PURE__ */ f("ul", {
749
1684
  className: "task-panel__list",
750
- children: e.map((e) => /* @__PURE__ */ u("li", {
1685
+ children: e.map((e) => /* @__PURE__ */ p("li", {
751
1686
  className: `task-panel__item task-panel__item--${e.status}`,
752
- children: [/* @__PURE__ */ l("span", {
1687
+ children: [/* @__PURE__ */ f("span", {
753
1688
  className: `task-panel__box task-panel__box--${e.status}`,
754
- title: B[e.status] ?? e.status,
755
- "aria-label": B[e.status] ?? e.status
756
- }), /* @__PURE__ */ u("span", {
1689
+ title: K[e.status] ?? e.status,
1690
+ "aria-label": K[e.status] ?? e.status
1691
+ }), /* @__PURE__ */ p("span", {
757
1692
  className: "task-panel__text",
758
1693
  children: [
759
- /* @__PURE__ */ u("span", {
1694
+ /* @__PURE__ */ p("span", {
760
1695
  className: "task-panel__id",
761
1696
  children: ["#", e.id]
762
1697
  }),
763
- /* @__PURE__ */ l("span", {
1698
+ /* @__PURE__ */ f("span", {
764
1699
  className: "task-panel__description",
765
1700
  children: e.description
766
1701
  }),
767
- e.result && /* @__PURE__ */ u("span", {
1702
+ e.result && /* @__PURE__ */ p("span", {
768
1703
  className: "task-panel__result",
769
1704
  title: e.result,
770
1705
  children: ["→ ", e.result]
@@ -775,11 +1710,11 @@ function ee({ tasks: e }) {
775
1710
  })]
776
1711
  });
777
1712
  }
778
- function te(e) {
1713
+ function _e(e) {
779
1714
  let t = [], n = 0;
780
- for (; n < e.length;) if (e[n].kind === f.TOOL_RESULT) {
1715
+ for (; n < e.length;) if (e[n].kind === h.TOOL_RESULT) {
781
1716
  let r = n;
782
- for (; r < e.length && e[r].kind === f.TOOL_RESULT;) r++;
1717
+ for (; r < e.length && e[r].kind === h.TOOL_RESULT;) r++;
783
1718
  let i = e.slice(n, r);
784
1719
  if (i.length > 2) t.push({
785
1720
  type: "tool_result_group",
@@ -796,7 +1731,7 @@ function te(e) {
796
1731
  }), n++;
797
1732
  return t;
798
1733
  }
799
- function ne({ steps: e }) {
1734
+ function ve({ steps: e }) {
800
1735
  let t = [];
801
1736
  for (let n of e) {
802
1737
  let e = t[t.length - 1];
@@ -805,47 +1740,47 @@ function ne({ steps: e }) {
805
1740
  events: [n]
806
1741
  });
807
1742
  }
808
- return t.length === 0 ? null : /* @__PURE__ */ l("div", {
1743
+ return t.length === 0 ? null : /* @__PURE__ */ f("div", {
809
1744
  className: "reasoning-trace__steps",
810
- children: t.map((e, t) => /* @__PURE__ */ u("div", {
1745
+ children: t.map((e, t) => /* @__PURE__ */ p("div", {
811
1746
  className: "reasoning-trace__step-group",
812
- children: [/* @__PURE__ */ u("div", {
1747
+ children: [/* @__PURE__ */ p("div", {
813
1748
  className: "reasoning-trace__step-header",
814
1749
  title: `actual reasoning iteration #${e.step}`,
815
1750
  children: ["STEP ", t]
816
- }), /* @__PURE__ */ l("ol", {
1751
+ }), /* @__PURE__ */ f("ol", {
817
1752
  className: "reasoning-trace__step-list",
818
- children: te(e.events).map((e, t) => e.type === "tool_result_group" ? /* @__PURE__ */ l(H, { steps: e.steps }, t) : /* @__PURE__ */ l(U, { step: e.step }, t))
1753
+ children: _e(e.events).map((e, t) => e.type === "tool_result_group" ? /* @__PURE__ */ f(ye, { steps: e.steps }, t) : /* @__PURE__ */ f(J, { step: e.step }, t))
819
1754
  })]
820
1755
  }, t))
821
1756
  });
822
1757
  }
823
- var V = {
824
- [f.LLM_TEXT]: "💬",
825
- [f.LLM_TOOL_CALLS]: "🛠️",
826
- [f.TOOL_RESULT]: "📥",
827
- [f.TASK_ADDED]: "📝",
828
- [f.TASK_COMPLETED]: "✅",
829
- [f.TASK_SKIPPED]: "⏭️",
830
- [f.PUSHBACK]: "↩️",
831
- [f.MAX_STEPS]: "⏱️"
1758
+ var q = {
1759
+ [h.LLM_TEXT]: "💬",
1760
+ [h.LLM_TOOL_CALLS]: "🛠️",
1761
+ [h.TOOL_RESULT]: "📥",
1762
+ [h.TASK_ADDED]: "📝",
1763
+ [h.TASK_COMPLETED]: "✅",
1764
+ [h.TASK_SKIPPED]: "⏭️",
1765
+ [h.PUSHBACK]: "↩️",
1766
+ [h.MAX_STEPS]: "⏱️"
832
1767
  };
833
- function H({ steps: e }) {
834
- let [t, n] = a(!1);
835
- return /* @__PURE__ */ u("li", {
1768
+ function ye({ steps: e }) {
1769
+ let [t, n] = s(!1);
1770
+ return /* @__PURE__ */ p("li", {
836
1771
  className: "reasoning-trace__step",
837
- children: [/* @__PURE__ */ u("button", {
1772
+ children: [/* @__PURE__ */ p("button", {
838
1773
  type: "button",
839
1774
  className: "reasoning-trace__step-line",
840
1775
  onClick: () => n((e) => !e),
841
1776
  title: "Click to expand tool results",
842
1777
  children: [
843
- /* @__PURE__ */ l("span", {
1778
+ /* @__PURE__ */ f("span", {
844
1779
  className: "reasoning-trace__step-icon",
845
1780
  "aria-hidden": !0,
846
1781
  children: "📥"
847
1782
  }),
848
- /* @__PURE__ */ u("span", {
1783
+ /* @__PURE__ */ p("span", {
849
1784
  className: "reasoning-trace__step-summary",
850
1785
  children: [
851
1786
  "Completed ",
@@ -853,7 +1788,7 @@ function H({ steps: e }) {
853
1788
  " tool calls"
854
1789
  ]
855
1790
  }),
856
- /* @__PURE__ */ l("span", {
1791
+ /* @__PURE__ */ f("span", {
857
1792
  className: "reasoning-trace__step-chevron",
858
1793
  "aria-hidden": !0,
859
1794
  style: {
@@ -864,31 +1799,31 @@ function H({ steps: e }) {
864
1799
  children: "▶"
865
1800
  })
866
1801
  ]
867
- }), t && /* @__PURE__ */ l("ol", {
1802
+ }), t && /* @__PURE__ */ f("ol", {
868
1803
  className: "reasoning-trace__step-list reasoning-trace__step-list--nested",
869
- children: e.map((e, t) => /* @__PURE__ */ l(U, { step: e }, t))
1804
+ children: e.map((e, t) => /* @__PURE__ */ f(J, { step: e }, t))
870
1805
  })]
871
1806
  });
872
1807
  }
873
- function U({ step: e }) {
874
- let [t, n] = a(!1), r = V[e.kind] ?? "🔹", i = e.details && Object.keys(e.details).length > 0;
875
- return /* @__PURE__ */ u("li", {
1808
+ function J({ step: e }) {
1809
+ let [t, n] = s(!1), r = q[e.kind] ?? "🔹", i = e.details && Object.keys(e.details).length > 0;
1810
+ return /* @__PURE__ */ p("li", {
876
1811
  className: "reasoning-trace__step",
877
- children: [/* @__PURE__ */ u("button", {
1812
+ children: [/* @__PURE__ */ p("button", {
878
1813
  type: "button",
879
1814
  className: "reasoning-trace__step-line",
880
1815
  onClick: () => i && n((e) => !e),
881
1816
  disabled: !i,
882
1817
  title: i ? "Click to toggle details" : void 0,
883
- children: [/* @__PURE__ */ l("span", {
1818
+ children: [/* @__PURE__ */ f("span", {
884
1819
  className: "reasoning-trace__step-icon",
885
1820
  "aria-hidden": !0,
886
1821
  children: r
887
- }), /* @__PURE__ */ l("span", {
1822
+ }), /* @__PURE__ */ f("span", {
888
1823
  className: "reasoning-trace__step-summary",
889
1824
  children: e.summary
890
1825
  })]
891
- }), i && t && /* @__PURE__ */ l("pre", {
1826
+ }), i && t && /* @__PURE__ */ f("pre", {
892
1827
  className: "reasoning-trace__step-details",
893
1828
  children: JSON.stringify(e.details, null, 2)
894
1829
  })]
@@ -896,106 +1831,106 @@ function U({ step: e }) {
896
1831
  }
897
1832
  //#endregion
898
1833
  //#region src/components/MessageBubble.tsx
899
- function W({ message: e, onOptionSelect: t, onUIInteract: n }) {
1834
+ function Y({ message: e, onOptionSelect: t, onUIInteract: n }) {
900
1835
  let { action: r, message: i, isUser: a, timestamp: o } = e, s = o ?? null;
901
1836
  if (!a && r === "reasoning_trace") {
902
1837
  let e = i;
903
- return v(e) ? null : /* @__PURE__ */ u("div", {
1838
+ return x(e) ? null : /* @__PURE__ */ p("div", {
904
1839
  className: "message message--agent message--reasoning",
905
- children: [s && /* @__PURE__ */ l("span", {
1840
+ children: [s && /* @__PURE__ */ f("span", {
906
1841
  className: "message__timestamp",
907
1842
  children: s
908
- }), /* @__PURE__ */ l("div", {
1843
+ }), /* @__PURE__ */ f("div", {
909
1844
  className: "message__body",
910
- children: /* @__PURE__ */ l(z, { trace: e })
1845
+ children: /* @__PURE__ */ f(G, { trace: e })
911
1846
  })]
912
1847
  });
913
1848
  }
914
1849
  if (a) {
915
- if (r === d.USER_VOICE) {
1850
+ if (r === m.USER_VOICE) {
916
1851
  let e = typeof i == "string" ? i : i.data;
917
- return /* @__PURE__ */ u("div", {
1852
+ return /* @__PURE__ */ p("div", {
918
1853
  className: "message message--user",
919
- children: [s && /* @__PURE__ */ l("span", {
1854
+ children: [s && /* @__PURE__ */ f("span", {
920
1855
  className: "message__timestamp message__timestamp--user",
921
1856
  children: s
922
- }), /* @__PURE__ */ l("div", {
1857
+ }), /* @__PURE__ */ f("div", {
923
1858
  className: "message__body",
924
- children: /* @__PURE__ */ l("div", {
1859
+ children: /* @__PURE__ */ f("div", {
925
1860
  className: "message__bubble message__bubble--user message__bubble--media",
926
- children: /* @__PURE__ */ l(Q, { data: e })
1861
+ children: /* @__PURE__ */ f(Z, { data: e })
927
1862
  })
928
1863
  })]
929
1864
  });
930
1865
  }
931
- return r === d.USER_FILE ? /* @__PURE__ */ u("div", {
1866
+ return r === m.USER_FILE ? /* @__PURE__ */ p("div", {
932
1867
  className: "message message--user",
933
- children: [s && /* @__PURE__ */ l("span", {
1868
+ children: [s && /* @__PURE__ */ f("span", {
934
1869
  className: "message__timestamp message__timestamp--user",
935
1870
  children: s
936
- }), /* @__PURE__ */ l("div", {
1871
+ }), /* @__PURE__ */ f("div", {
937
1872
  className: "message__body",
938
- children: /* @__PURE__ */ l("div", {
1873
+ children: /* @__PURE__ */ f("div", {
939
1874
  className: "message__bubble message__bubble--user message__bubble--media",
940
- children: /* @__PURE__ */ l(K, { content: i })
1875
+ children: /* @__PURE__ */ f(X, { content: i })
941
1876
  })
942
1877
  })]
943
- }) : /* @__PURE__ */ u("div", {
1878
+ }) : /* @__PURE__ */ p("div", {
944
1879
  className: "message message--user",
945
- children: [s && /* @__PURE__ */ l("span", {
1880
+ children: [s && /* @__PURE__ */ f("span", {
946
1881
  className: "message__timestamp message__timestamp--user",
947
1882
  children: s
948
- }), /* @__PURE__ */ l("div", {
1883
+ }), /* @__PURE__ */ f("div", {
949
1884
  className: "message__body",
950
- children: /* @__PURE__ */ l("div", {
1885
+ children: /* @__PURE__ */ f("div", {
951
1886
  className: "message__bubble message__bubble--user",
952
1887
  children: typeof i == "string" ? i : JSON.stringify(i)
953
1888
  })
954
1889
  })]
955
1890
  });
956
1891
  }
957
- return /* @__PURE__ */ u("div", {
1892
+ return /* @__PURE__ */ p("div", {
958
1893
  className: "message message--agent",
959
- children: [s && /* @__PURE__ */ l("span", {
1894
+ children: [s && /* @__PURE__ */ f("span", {
960
1895
  className: "message__timestamp",
961
1896
  children: s
962
- }), /* @__PURE__ */ l("div", {
1897
+ }), /* @__PURE__ */ f("div", {
963
1898
  className: "message__body",
964
- children: /* @__PURE__ */ l("div", {
1899
+ children: /* @__PURE__ */ f("div", {
965
1900
  className: "message__bubble message__bubble--agent",
966
- children: G(r, i, t, n)
1901
+ children: be(r, i, t, n)
967
1902
  })
968
1903
  })]
969
1904
  });
970
1905
  }
971
- function G(e, t, n, r) {
1906
+ function be(e, t, n, r) {
972
1907
  switch (e) {
973
- case d.AGENT_REPLY_STR: {
974
- let e = String(t), n = C(e);
975
- return n === "markdown" ? /* @__PURE__ */ l("div", {
1908
+ case m.AGENT_REPLY_STR: {
1909
+ let e = String(t), n = E(e);
1910
+ return n === "markdown" ? /* @__PURE__ */ f("div", {
976
1911
  className: "msg-markdown",
977
- children: /* @__PURE__ */ l(o, {
978
- remarkPlugins: [s],
1912
+ children: /* @__PURE__ */ f(c, {
1913
+ remarkPlugins: [l],
979
1914
  children: e
980
1915
  })
981
- }) : n === "code" ? /* @__PURE__ */ l("pre", {
1916
+ }) : n === "code" ? /* @__PURE__ */ f("pre", {
982
1917
  className: "msg-code",
983
- children: /* @__PURE__ */ l("code", { children: e })
984
- }) : /* @__PURE__ */ l("p", {
1918
+ children: /* @__PURE__ */ f("code", { children: e })
1919
+ }) : /* @__PURE__ */ f("p", {
985
1920
  className: "msg-text",
986
1921
  children: e
987
1922
  });
988
1923
  }
989
- case d.AGENT_REPLY_MARKDOWN: return /* @__PURE__ */ l("div", {
1924
+ case m.AGENT_REPLY_MARKDOWN: return /* @__PURE__ */ f("div", {
990
1925
  className: "msg-markdown",
991
- children: /* @__PURE__ */ l(o, {
992
- remarkPlugins: [s],
1926
+ children: /* @__PURE__ */ f(c, {
1927
+ remarkPlugins: [l],
993
1928
  children: String(t)
994
1929
  })
995
1930
  });
996
- case d.AGENT_REPLY_HTML: return /* @__PURE__ */ l("div", {
1931
+ case m.AGENT_REPLY_HTML: return /* @__PURE__ */ f("div", {
997
1932
  className: "msg-html",
998
- dangerouslySetInnerHTML: { __html: c.sanitize(String(t), {
1933
+ dangerouslySetInnerHTML: { __html: u.sanitize(String(t), {
999
1934
  ALLOWED_TAGS: /* @__PURE__ */ "p.br.b.i.em.strong.a.ul.ol.li.code.pre.h1.h2.h3.h4.h5.h6.blockquote.table.thead.tbody.tr.th.td.div.span.hr".split("."),
1000
1935
  ALLOWED_ATTR: [
1001
1936
  "href",
@@ -1015,22 +1950,23 @@ function G(e, t, n, r) {
1015
1950
  FORCE_BODY: !0
1016
1951
  }) }
1017
1952
  });
1018
- case d.AGENT_REPLY_FILE: return /* @__PURE__ */ l(K, { content: t });
1019
- case d.AGENT_REPLY_IMAGE: return /* @__PURE__ */ l(q, { content: t });
1020
- case d.AGENT_REPLY_DF: return /* @__PURE__ */ l(J, { content: t });
1021
- case d.AGENT_REPLY_PLOTLY: return /* @__PURE__ */ l(Y, { content: t });
1022
- case d.AGENT_REPLY_OPTIONS: return /* @__PURE__ */ l(X, {
1953
+ case m.AGENT_REPLY_FILE: return /* @__PURE__ */ f(X, { content: t });
1954
+ case m.AGENT_REPLY_IMAGE: return /* @__PURE__ */ f(xe, { content: t });
1955
+ case m.AGENT_REPLY_DF: return /* @__PURE__ */ f(Se, { content: t });
1956
+ case m.AGENT_REPLY_PLOTLY: return /* @__PURE__ */ f(Ce, { content: t });
1957
+ case m.AGENT_REPLY_OPTIONS: return /* @__PURE__ */ f(we, {
1023
1958
  content: t,
1024
1959
  onSelect: n
1025
1960
  });
1026
- case d.AGENT_REPLY_LOCATION: return /* @__PURE__ */ l(Z, { content: t });
1027
- case d.AGENT_REPLY_RAG: return /* @__PURE__ */ l(re, { content: t });
1028
- case d.AGENT_REPLY_AUDIO: return /* @__PURE__ */ l(ie, { content: t });
1029
- case d.AGENT_REPLY_UI: return /* @__PURE__ */ l(F, {
1961
+ case m.AGENT_REPLY_LOCATION: return /* @__PURE__ */ f(Te, { content: t });
1962
+ case m.AGENT_REPLY_RAG: return /* @__PURE__ */ f(Ee, { content: t });
1963
+ case m.AGENT_REPLY_AUDIO: return /* @__PURE__ */ f(De, { content: t });
1964
+ case m.AGENT_REPLY_GUI: return /* @__PURE__ */ f(W, {
1030
1965
  content: t,
1031
- onInteract: r
1966
+ onInteract: r,
1967
+ chatMode: !0
1032
1968
  });
1033
- default: return /* @__PURE__ */ u("p", {
1969
+ default: return /* @__PURE__ */ p("p", {
1034
1970
  className: "msg-text msg-text--muted",
1035
1971
  children: [
1036
1972
  "[Unsupported message type: ",
@@ -1040,7 +1976,7 @@ function G(e, t, n, r) {
1040
1976
  });
1041
1977
  }
1042
1978
  }
1043
- function K({ content: e }) {
1979
+ function X({ content: e }) {
1044
1980
  let t = e, n = t.data ?? t.base64 ?? "";
1045
1981
  function r() {
1046
1982
  try {
@@ -1052,82 +1988,82 @@ function K({ content: e }) {
1052
1988
  console.error("Failed to decode file data");
1053
1989
  }
1054
1990
  }
1055
- return /* @__PURE__ */ u("button", {
1991
+ return /* @__PURE__ */ p("button", {
1056
1992
  className: "msg-file-btn",
1057
1993
  onClick: r,
1058
1994
  children: ["📄 ", t.name ?? "Download file"]
1059
1995
  });
1060
1996
  }
1061
- function q({ content: e }) {
1997
+ function xe({ content: e }) {
1062
1998
  let t, n;
1063
1999
  if (typeof e == "string") t = e, n = "image/png";
1064
2000
  else {
1065
2001
  let r = e;
1066
2002
  t = r.data ?? r.base64 ?? "", n = r.type ?? (r.format ? `image/${r.format.toLowerCase()}` : "image/png");
1067
2003
  }
1068
- return t ? /* @__PURE__ */ l("div", {
2004
+ return t ? /* @__PURE__ */ f("div", {
1069
2005
  className: "msg-image",
1070
- children: /* @__PURE__ */ l("img", {
2006
+ children: /* @__PURE__ */ f("img", {
1071
2007
  src: `data:${n};base64,${t}`,
1072
2008
  alt: typeof e == "object" && e ? e.name ?? "Image" : "Image",
1073
2009
  onError: (e) => {
1074
2010
  e.target.style.display = "none";
1075
2011
  }
1076
2012
  })
1077
- }) : /* @__PURE__ */ l("span", {
2013
+ }) : /* @__PURE__ */ f("span", {
1078
2014
  className: "msg-text--muted",
1079
2015
  children: "Image unavailable"
1080
2016
  });
1081
2017
  }
1082
- function J({ content: e }) {
1083
- let [t, n] = a(null), [r, i] = a(!0), o = [], s = [];
1084
- if (Array.isArray(e) && e.length > 0) o = Object.keys(e[0]), s = e.map((e) => o.map((t) => e[t]));
2018
+ function Se({ content: e }) {
2019
+ let [t, n] = s(null), [r, i] = s(!0), a = [], o = [];
2020
+ if (Array.isArray(e) && e.length > 0) a = Object.keys(e[0]), o = e.map((e) => a.map((t) => e[t]));
1085
2021
  else if (typeof e == "object" && e) {
1086
2022
  let t = e;
1087
- if (Array.isArray(t.data) && Array.isArray(t.columns)) o = t.columns, s = t.data;
2023
+ if (Array.isArray(t.data) && Array.isArray(t.columns)) a = t.columns, o = t.data;
1088
2024
  else {
1089
2025
  let e = Object.keys(t), n = t[e[0]];
1090
2026
  if (e.length > 0 && typeof n == "object" && n && !Array.isArray(n)) {
1091
- o = e;
2027
+ a = e;
1092
2028
  let n = t;
1093
- s = Object.keys(n[o[0]]).map((e) => o.map((t) => n[t][e]));
2029
+ o = Object.keys(n[a[0]]).map((e) => a.map((t) => n[t][e]));
1094
2030
  }
1095
2031
  }
1096
2032
  }
1097
- if (o.length === 0) return /* @__PURE__ */ l("pre", {
2033
+ if (a.length === 0) return /* @__PURE__ */ f("pre", {
1098
2034
  className: "msg-code",
1099
2035
  children: JSON.stringify(e, null, 2)
1100
2036
  });
1101
2037
  function c(e) {
1102
2038
  t === e ? i((e) => !e) : (n(e), i(!0));
1103
2039
  }
1104
- let d = t === null ? s : [...s].sort((e, n) => {
2040
+ let l = t === null ? o : [...o].sort((e, n) => {
1105
2041
  let i = e[t], a = n[t];
1106
2042
  return i == null && a == null ? 0 : i == null ? r ? 1 : -1 : a == null ? r ? -1 : 1 : typeof i == "number" && typeof a == "number" ? r ? i - a : a - i : r ? String(i).localeCompare(String(a)) : String(a).localeCompare(String(i));
1107
2043
  });
1108
- return /* @__PURE__ */ l("div", {
2044
+ return /* @__PURE__ */ f("div", {
1109
2045
  className: "msg-table-wrapper",
1110
- children: /* @__PURE__ */ u("table", {
2046
+ children: /* @__PURE__ */ p("table", {
1111
2047
  className: "msg-table",
1112
- children: [/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: o.map((e, n) => /* @__PURE__ */ u("th", {
2048
+ children: [/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ f("tr", { children: a.map((e, n) => /* @__PURE__ */ p("th", {
1113
2049
  className: `msg-table__th${t === n ? " msg-table__th--sorted" : ""}`,
1114
2050
  onClick: () => c(n),
1115
- children: [e, /* @__PURE__ */ l("span", {
2051
+ children: [e, /* @__PURE__ */ f("span", {
1116
2052
  className: "msg-table__sort-icon",
1117
2053
  children: t === n ? r ? "↑" : "↓" : "↕"
1118
2054
  })]
1119
- }, e)) }) }), /* @__PURE__ */ l("tbody", { children: d.map((e, t) => /* @__PURE__ */ l("tr", { children: e.map((e, t) => /* @__PURE__ */ l("td", { children: String(e ?? "") }, t)) }, t)) })]
2055
+ }, e)) }) }), /* @__PURE__ */ f("tbody", { children: l.map((e, t) => /* @__PURE__ */ f("tr", { children: e.map((e, t) => /* @__PURE__ */ f("td", { children: String(e ?? "") }, t)) }, t)) })]
1120
2056
  })
1121
2057
  });
1122
2058
  }
1123
- function Y({ content: e }) {
1124
- let n = i(null);
1125
- return t(() => {
1126
- let t = n.current;
1127
- if (!t) return;
2059
+ function Ce({ content: e }) {
2060
+ let t = o(null);
2061
+ return r(() => {
2062
+ let n = t.current;
2063
+ if (!n) return;
1128
2064
  let r = !0, i = e;
1129
2065
  return import("plotly.js-dist-min").then((e) => {
1130
- !r || !t || e.newPlot(t, i.data ?? [], {
2066
+ !r || !n || e.newPlot(n, i.data ?? [], {
1131
2067
  margin: {
1132
2068
  t: 24,
1133
2069
  r: 10,
@@ -1142,36 +2078,36 @@ function Y({ content: e }) {
1142
2078
  });
1143
2079
  }), () => {
1144
2080
  r = !1, import("plotly.js-dist-min").then((e) => {
1145
- t && e.purge(t);
2081
+ n && e.purge(n);
1146
2082
  });
1147
2083
  };
1148
- }, [e]), /* @__PURE__ */ l("div", {
1149
- ref: n,
2084
+ }, [e]), /* @__PURE__ */ f("div", {
2085
+ ref: t,
1150
2086
  className: "msg-plotly"
1151
2087
  });
1152
2088
  }
1153
- function X({ content: e, onSelect: t }) {
2089
+ function we({ content: e, onSelect: t }) {
1154
2090
  let n;
1155
- return n = Array.isArray(e) ? e.map(String) : typeof e == "object" && e ? Object.values(e).map(String) : [], /* @__PURE__ */ l("div", {
2091
+ return n = Array.isArray(e) ? e.map(String) : typeof e == "object" && e ? Object.values(e).map(String) : [], /* @__PURE__ */ f("div", {
1156
2092
  className: "msg-options",
1157
- children: n.map((e, n) => /* @__PURE__ */ l("button", {
2093
+ children: n.map((e, n) => /* @__PURE__ */ f("button", {
1158
2094
  className: "msg-option-btn",
1159
2095
  onClick: () => t?.(e),
1160
2096
  children: e
1161
2097
  }, n))
1162
2098
  });
1163
2099
  }
1164
- function Z({ content: e }) {
2100
+ function Te({ content: e }) {
1165
2101
  let { latitude: t, longitude: n, zoom: r = 15 } = e, i = 360 / 2 ** (r + 1), a = `https://www.openstreetmap.org/export/embed.html?bbox=${`${n - i},${t - i},${n + i},${t + i}`}&layer=mapnik&marker=${t},${n}`, o = `https://www.openstreetmap.org/?mlat=${t}&mlon=${n}#map=${r}/${t}/${n}`;
1166
- return /* @__PURE__ */ u("div", {
2102
+ return /* @__PURE__ */ p("div", {
1167
2103
  className: "msg-location",
1168
- children: [/* @__PURE__ */ l("iframe", {
2104
+ children: [/* @__PURE__ */ f("iframe", {
1169
2105
  src: a,
1170
2106
  className: "msg-location__map",
1171
2107
  title: "Location map",
1172
2108
  loading: "lazy",
1173
2109
  referrerPolicy: "no-referrer"
1174
- }), /* @__PURE__ */ u("a", {
2110
+ }), /* @__PURE__ */ p("a", {
1175
2111
  className: "msg-location__link",
1176
2112
  href: o,
1177
2113
  target: "_blank",
@@ -1186,45 +2122,45 @@ function Z({ content: e }) {
1186
2122
  })]
1187
2123
  });
1188
2124
  }
1189
- function re({ content: e }) {
1190
- let [t, n] = a(!1), r = e, i = r.docs ?? r.documents ?? [];
1191
- return /* @__PURE__ */ u("div", {
2125
+ function Ee({ content: e }) {
2126
+ let [t, n] = s(!1), r = e, i = r.docs ?? r.documents ?? [];
2127
+ return /* @__PURE__ */ p("div", {
1192
2128
  className: "msg-rag",
1193
- children: [/* @__PURE__ */ l("p", {
2129
+ children: [/* @__PURE__ */ f("p", {
1194
2130
  className: "msg-rag__answer",
1195
2131
  children: r.answer
1196
- }), i.length > 0 && /* @__PURE__ */ u("div", {
2132
+ }), i.length > 0 && /* @__PURE__ */ p("div", {
1197
2133
  className: "msg-rag__details",
1198
- children: [/* @__PURE__ */ u("button", {
2134
+ children: [/* @__PURE__ */ p("button", {
1199
2135
  type: "button",
1200
2136
  className: `msg-rag__summary${t ? " msg-rag__summary--open" : ""}`,
1201
2137
  onClick: () => n((e) => !e),
1202
- children: [/* @__PURE__ */ l("span", {
2138
+ children: [/* @__PURE__ */ f("span", {
1203
2139
  className: "msg-rag__summary-arrow",
1204
2140
  children: "▶"
1205
2141
  }), "Details"]
1206
- }), /* @__PURE__ */ l("div", {
2142
+ }), /* @__PURE__ */ f("div", {
1207
2143
  className: `msg-rag__body-wrapper${t ? " msg-rag__body-wrapper--open" : ""}`,
1208
- children: /* @__PURE__ */ l("div", {
2144
+ children: /* @__PURE__ */ f("div", {
1209
2145
  className: "msg-rag__body-inner",
1210
- children: /* @__PURE__ */ u("div", {
2146
+ children: /* @__PURE__ */ p("div", {
1211
2147
  className: "msg-rag__details-body",
1212
2148
  children: [
1213
- /* @__PURE__ */ l("div", {
2149
+ /* @__PURE__ */ f("div", {
1214
2150
  className: "msg-rag__rag-answer-label",
1215
2151
  children: "RAG Answer"
1216
2152
  }),
1217
- r.llm_name && /* @__PURE__ */ u("div", {
2153
+ r.llm_name && /* @__PURE__ */ p("div", {
1218
2154
  className: "msg-rag__llm-row",
1219
- children: [/* @__PURE__ */ l("span", {
2155
+ children: [/* @__PURE__ */ f("span", {
1220
2156
  className: "msg-rag__llm-label",
1221
2157
  children: "Model"
1222
- }), /* @__PURE__ */ l("code", {
2158
+ }), /* @__PURE__ */ f("code", {
1223
2159
  className: "msg-rag__llm-badge",
1224
2160
  children: r.llm_name
1225
2161
  })]
1226
2162
  }),
1227
- /* @__PURE__ */ u("div", {
2163
+ /* @__PURE__ */ p("div", {
1228
2164
  className: "msg-rag__context-label",
1229
2165
  children: [
1230
2166
  "Context (",
@@ -1232,14 +2168,14 @@ function re({ content: e }) {
1232
2168
  " Documents)"
1233
2169
  ]
1234
2170
  }),
1235
- /* @__PURE__ */ l("div", {
2171
+ /* @__PURE__ */ f("div", {
1236
2172
  className: "msg-rag__docs",
1237
2173
  children: i.map((e, t) => {
1238
2174
  let n = e.metadata?.source, r = e.metadata?.page;
1239
- return /* @__PURE__ */ u("div", {
2175
+ return /* @__PURE__ */ p("div", {
1240
2176
  className: "msg-rag__doc-card",
1241
2177
  children: [
1242
- /* @__PURE__ */ u("div", {
2178
+ /* @__PURE__ */ p("div", {
1243
2179
  className: "msg-rag__doc-header",
1244
2180
  children: [
1245
2181
  "Document ",
@@ -1248,32 +2184,32 @@ function re({ content: e }) {
1248
2184
  i.length
1249
2185
  ]
1250
2186
  }),
1251
- n && /* @__PURE__ */ u("div", {
2187
+ n && /* @__PURE__ */ p("div", {
1252
2188
  className: "msg-rag__doc-row",
1253
- children: [/* @__PURE__ */ l("span", {
2189
+ children: [/* @__PURE__ */ f("span", {
1254
2190
  className: "msg-rag__doc-key",
1255
2191
  children: "Source"
1256
- }), /* @__PURE__ */ l("span", {
2192
+ }), /* @__PURE__ */ f("span", {
1257
2193
  className: "msg-rag__doc-value",
1258
2194
  children: n
1259
2195
  })]
1260
2196
  }),
1261
- r != null && /* @__PURE__ */ u("div", {
2197
+ r != null && /* @__PURE__ */ p("div", {
1262
2198
  className: "msg-rag__doc-row",
1263
- children: [/* @__PURE__ */ l("span", {
2199
+ children: [/* @__PURE__ */ f("span", {
1264
2200
  className: "msg-rag__doc-key",
1265
2201
  children: "Page"
1266
- }), /* @__PURE__ */ l("span", {
2202
+ }), /* @__PURE__ */ f("span", {
1267
2203
  className: "msg-rag__doc-value",
1268
2204
  children: String(r)
1269
2205
  })]
1270
2206
  }),
1271
- /* @__PURE__ */ u("div", {
2207
+ /* @__PURE__ */ p("div", {
1272
2208
  className: "msg-rag__doc-row msg-rag__doc-row--content",
1273
- children: [/* @__PURE__ */ l("span", {
2209
+ children: [/* @__PURE__ */ f("span", {
1274
2210
  className: "msg-rag__doc-key",
1275
2211
  children: "Content"
1276
- }), /* @__PURE__ */ l("span", {
2212
+ }), /* @__PURE__ */ f("span", {
1277
2213
  className: "msg-rag__doc-value msg-rag__doc-content",
1278
2214
  children: e.content
1279
2215
  })]
@@ -1289,38 +2225,38 @@ function re({ content: e }) {
1289
2225
  })]
1290
2226
  });
1291
2227
  }
1292
- function Q({ data: e, mimeType: n = "audio/wav" }) {
1293
- let [r, i] = a(null);
1294
- return t(() => {
1295
- let t = null;
2228
+ function Z({ data: e, mimeType: t = "audio/wav" }) {
2229
+ let [n, i] = s(null);
2230
+ return r(() => {
2231
+ let n = null;
1296
2232
  try {
1297
2233
  let r = atob(e), a = new Uint8Array(r.length);
1298
2234
  for (let e = 0; e < r.length; e++) a[e] = r.charCodeAt(e);
1299
- let o = new Blob([a], { type: n });
1300
- t = URL.createObjectURL(o), i(t);
2235
+ let o = new Blob([a], { type: t });
2236
+ n = URL.createObjectURL(o), i(n);
1301
2237
  } catch {
1302
2238
  i(null);
1303
2239
  }
1304
2240
  return () => {
1305
- t && URL.revokeObjectURL(t);
2241
+ n && URL.revokeObjectURL(n);
1306
2242
  };
1307
- }, [e, n]), r ? /* @__PURE__ */ l("audio", {
2243
+ }, [e, t]), n ? /* @__PURE__ */ f("audio", {
1308
2244
  controls: !0,
1309
- src: r,
2245
+ src: n,
1310
2246
  className: "msg-audio__player"
1311
- }) : /* @__PURE__ */ l("span", {
2247
+ }) : /* @__PURE__ */ f("span", {
1312
2248
  className: "msg-text--muted",
1313
2249
  children: "Audio unavailable"
1314
2250
  });
1315
2251
  }
1316
- function ie({ content: e }) {
2252
+ function De({ content: e }) {
1317
2253
  let t = typeof e == "string" ? { data: e } : e;
1318
- return /* @__PURE__ */ u("div", {
2254
+ return /* @__PURE__ */ p("div", {
1319
2255
  className: "msg-audio",
1320
- children: [/* @__PURE__ */ l(Q, {
2256
+ children: [/* @__PURE__ */ f(Z, {
1321
2257
  data: t.data,
1322
2258
  mimeType: t.type ?? "audio/wav"
1323
- }), t.sample_rate != null && /* @__PURE__ */ u("span", {
2259
+ }), t.sample_rate != null && /* @__PURE__ */ p("span", {
1324
2260
  className: "msg-audio__meta",
1325
2261
  children: [
1326
2262
  t.sample_rate,
@@ -1332,15 +2268,16 @@ function ie({ content: e }) {
1332
2268
  }
1333
2269
  //#endregion
1334
2270
  //#region src/components/ChatArea.tsx
1335
- function $() {
2271
+ function Q() {
1336
2272
  let e = /* @__PURE__ */ new Date(), t = (e) => String(e).padStart(2, "0");
1337
2273
  return `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())} ${t(e.getHours())}:${t(e.getMinutes())}:${t(e.getSeconds())}`;
1338
2274
  }
1339
- function ae({ messages: n, setMessages: r, status: o, send: s }) {
1340
- let [c, f] = a(""), [p, m] = a([]), [h, g] = a(!1), [_, v] = a(!1), y = i(null), b = i(null), x = i(null), S = i(null), C = i(null), w = i([]);
1341
- t(() => {
1342
- y.current?.scrollIntoView({ behavior: "smooth" });
1343
- }, [n]), t(() => {
2275
+ function $({ messages: e, setMessages: n, status: i, send: a }) {
2276
+ let [c, l] = s(""), [u, d] = s([]), [h, g] = s(!1), [_, v] = s(!1), y = o(null), b = o(null), x = o(null), S = o(null), C = o(null), w = o([]);
2277
+ r(() => {
2278
+ let e = y.current;
2279
+ e && (e.scrollTop = e.scrollHeight);
2280
+ }, [e]), r(() => {
1344
2281
  if (!h) return;
1345
2282
  function e(e) {
1346
2283
  S.current && !S.current.contains(e.target) && g(!1);
@@ -1353,24 +2290,24 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
1353
2290
  }
1354
2291
  async function E() {
1355
2292
  try {
1356
- let e = await navigator.mediaDevices.getUserMedia({ audio: !0 }), t = MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/ogg", n = new MediaRecorder(e, { mimeType: t });
1357
- w.current = [], n.ondataavailable = (e) => {
2293
+ let e = await navigator.mediaDevices.getUserMedia({ audio: !0 }), t = MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/ogg", r = new MediaRecorder(e, { mimeType: t });
2294
+ w.current = [], r.ondataavailable = (e) => {
1358
2295
  e.data.size > 0 && w.current.push(e.data);
1359
- }, n.onstop = () => {
1360
- let n = new Blob(w.current, { type: t });
2296
+ }, r.onstop = () => {
2297
+ let r = new Blob(w.current, { type: t });
1361
2298
  e.getTracks().forEach((e) => e.stop());
1362
2299
  let i = new FileReader();
1363
2300
  i.onload = () => {
1364
2301
  let e = i.result.split(",")[1] ?? "";
1365
- r((t) => [...t, {
2302
+ n((t) => [...t, {
1366
2303
  id: crypto.randomUUID(),
1367
- action: d.USER_VOICE,
2304
+ action: m.USER_VOICE,
1368
2305
  message: e,
1369
2306
  isUser: !0,
1370
- timestamp: $()
1371
- }]), s(d.USER_VOICE, e);
1372
- }, i.readAsDataURL(n), v(!1);
1373
- }, n.start(), C.current = n, v(!0);
2307
+ timestamp: Q()
2308
+ }]), a(m.USER_VOICE, e);
2309
+ }, i.readAsDataURL(r), v(!1);
2310
+ }, r.start(), C.current = r, v(!0);
1374
2311
  } catch {
1375
2312
  console.error("Microphone access denied or unavailable");
1376
2313
  }
@@ -1378,53 +2315,53 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
1378
2315
  function D() {
1379
2316
  _ ? (C.current?.stop(), C.current = null) : E();
1380
2317
  }
1381
- let O = e(() => {
1382
- let e = c.trim(), t = p.length > 0;
1383
- if (!(!e && !t || o !== "connected")) {
1384
- for (let e of p) r((t) => [...t, {
2318
+ let O = t(() => {
2319
+ let e = c.trim(), t = u.length > 0;
2320
+ if (!(!e && !t || i !== "connected")) {
2321
+ for (let e of u) n((t) => [...t, {
1385
2322
  id: crypto.randomUUID(),
1386
- action: d.USER_FILE,
2323
+ action: m.USER_FILE,
1387
2324
  message: {
1388
2325
  name: e.name,
1389
2326
  type: e.mimeType,
1390
2327
  base64: e.base64
1391
2328
  },
1392
2329
  isUser: !0,
1393
- timestamp: $()
1394
- }]), s(d.USER_FILE, JSON.stringify({
2330
+ timestamp: Q()
2331
+ }]), a(m.USER_FILE, JSON.stringify({
1395
2332
  name: e.name,
1396
2333
  type: e.mimeType,
1397
2334
  base64: e.base64
1398
2335
  }));
1399
- m([]), e && (r((t) => [...t, {
2336
+ d([]), e && (n((t) => [...t, {
1400
2337
  id: crypto.randomUUID(),
1401
- action: d.USER_MESSAGE,
2338
+ action: m.USER_MESSAGE,
1402
2339
  message: e,
1403
2340
  isUser: !0,
1404
- timestamp: $()
1405
- }]), s(d.USER_MESSAGE, e), f(""), b.current && (b.current.style.height = "auto"));
2341
+ timestamp: Q()
2342
+ }]), a(m.USER_MESSAGE, e), l(""), b.current && (b.current.style.height = "auto"));
1406
2343
  }
1407
2344
  }, [
1408
2345
  c,
1409
- p,
1410
- o,
1411
- s,
1412
- r
2346
+ u,
2347
+ i,
2348
+ a,
2349
+ n
1413
2350
  ]);
1414
2351
  function k(e) {
1415
2352
  e.key === "Enter" && !e.shiftKey && (e.preventDefault(), O());
1416
2353
  }
1417
2354
  function A(e) {
1418
- r((t) => [...t, {
2355
+ n((t) => [...t, {
1419
2356
  id: crypto.randomUUID(),
1420
- action: d.USER_MESSAGE,
2357
+ action: m.USER_MESSAGE,
1421
2358
  message: e,
1422
2359
  isUser: !0,
1423
- timestamp: $()
1424
- }]), s(d.USER_MESSAGE, e);
2360
+ timestamp: Q()
2361
+ }]), a(m.USER_MESSAGE, e);
1425
2362
  }
1426
2363
  function j(e) {
1427
- s(d.USER_UPDATE_UI, e);
2364
+ a(m.USER_UPDATE_UI, e);
1428
2365
  }
1429
2366
  function M(e) {
1430
2367
  let t = Array.from(e.target.files ?? []);
@@ -1432,7 +2369,7 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
1432
2369
  let t = new FileReader();
1433
2370
  t.onload = () => {
1434
2371
  let n = t.result.split(",")[1] ?? "";
1435
- m((t) => [...t, {
2372
+ d((t) => [...t, {
1436
2373
  id: crypto.randomUUID(),
1437
2374
  name: e.name,
1438
2375
  base64: n,
@@ -1442,51 +2379,48 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
1442
2379
  }), e.target.value = "", g(!1));
1443
2380
  }
1444
2381
  function N(e) {
1445
- m((t) => t.filter((t) => t.id !== e));
2382
+ d((t) => t.filter((t) => t.id !== e));
1446
2383
  }
1447
- let P = o === "connected" ? "Type a message… (Enter to send, Shift+Enter for new line)" : o === "connecting" ? "Connecting…" : "Not connected", F = o === "connected" && (c.trim().length > 0 || p.length > 0);
1448
- return /* @__PURE__ */ u("div", {
2384
+ let P = i === "connected" ? "Type a message… (Enter to send, Shift+Enter for new line)" : i === "connecting" ? "Connecting…" : "Not connected", F = i === "connected" && (c.trim().length > 0 || u.length > 0);
2385
+ return /* @__PURE__ */ p("div", {
1449
2386
  className: "chat-area",
1450
- children: [/* @__PURE__ */ u("div", {
2387
+ children: [/* @__PURE__ */ p("div", {
1451
2388
  className: "chat-area__messages",
1452
- children: [
1453
- n.length === 0 && /* @__PURE__ */ l("div", {
1454
- className: "chat-area__empty",
1455
- children: o === "connecting" ? "Connecting to agent…" : o === "connected" ? "Send a message to start the conversation" : o === "error" ? "Connection error — check the agent URL" : "Disconnected"
1456
- }),
1457
- n.map((e) => /* @__PURE__ */ l(W, {
1458
- message: e,
1459
- onOptionSelect: A,
1460
- onUIInteract: j
1461
- }, e.id)),
1462
- /* @__PURE__ */ l("div", { ref: y })
1463
- ]
1464
- }), /* @__PURE__ */ u("div", {
2389
+ ref: y,
2390
+ children: [e.length === 0 && /* @__PURE__ */ f("div", {
2391
+ className: "chat-area__empty",
2392
+ children: i === "connecting" ? "Connecting to agent…" : i === "connected" ? "Send a message to start the conversation" : i === "error" ? "Connection error — check the agent URL" : "Disconnected"
2393
+ }), e.map((e) => /* @__PURE__ */ f(Y, {
2394
+ message: e,
2395
+ onOptionSelect: A,
2396
+ onUIInteract: j
2397
+ }, e.id))]
2398
+ }), /* @__PURE__ */ p("div", {
1465
2399
  className: "chat-area__input-row",
1466
2400
  children: [
1467
- /* @__PURE__ */ l("input", {
2401
+ /* @__PURE__ */ f("input", {
1468
2402
  ref: x,
1469
2403
  type: "file",
1470
2404
  multiple: !0,
1471
2405
  style: { display: "none" },
1472
2406
  onChange: M
1473
2407
  }),
1474
- /* @__PURE__ */ u("div", {
2408
+ /* @__PURE__ */ p("div", {
1475
2409
  className: "chat-area__composer",
1476
- children: [p.length > 0 && /* @__PURE__ */ l("div", {
2410
+ children: [u.length > 0 && /* @__PURE__ */ f("div", {
1477
2411
  className: "chat-area__attachments",
1478
- children: p.map((e) => /* @__PURE__ */ u("div", {
2412
+ children: u.map((e) => /* @__PURE__ */ p("div", {
1479
2413
  className: "attachment-chip",
1480
2414
  children: [
1481
- /* @__PURE__ */ l("span", {
2415
+ /* @__PURE__ */ f("span", {
1482
2416
  className: "attachment-chip__icon",
1483
2417
  children: "📄"
1484
2418
  }),
1485
- /* @__PURE__ */ l("span", {
2419
+ /* @__PURE__ */ f("span", {
1486
2420
  className: "attachment-chip__name",
1487
2421
  children: e.name
1488
2422
  }),
1489
- /* @__PURE__ */ l("button", {
2423
+ /* @__PURE__ */ f("button", {
1490
2424
  className: "attachment-chip__remove",
1491
2425
  onClick: () => N(e.id),
1492
2426
  title: "Remove file",
@@ -1494,79 +2428,79 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
1494
2428
  })
1495
2429
  ]
1496
2430
  }, e.id))
1497
- }), /* @__PURE__ */ l("div", {
2431
+ }), /* @__PURE__ */ f("div", {
1498
2432
  className: "chat-area__input-line",
1499
- children: /* @__PURE__ */ l("textarea", {
2433
+ children: /* @__PURE__ */ f("textarea", {
1500
2434
  ref: b,
1501
2435
  className: "chat-area__textarea",
1502
2436
  value: c,
1503
2437
  rows: 1,
1504
2438
  placeholder: P,
1505
- disabled: o !== "connected",
2439
+ disabled: i !== "connected",
1506
2440
  onChange: (e) => {
1507
- f(e.target.value), T();
2441
+ l(e.target.value), T();
1508
2442
  },
1509
2443
  onKeyDown: k
1510
2444
  })
1511
2445
  })]
1512
2446
  }),
1513
- /* @__PURE__ */ u("div", {
2447
+ /* @__PURE__ */ p("div", {
1514
2448
  className: "attach-menu-anchor",
1515
2449
  ref: S,
1516
- children: [/* @__PURE__ */ l("button", {
2450
+ children: [/* @__PURE__ */ f("button", {
1517
2451
  className: "btn chat-area__icon-btn",
1518
2452
  title: "Attach",
1519
- disabled: o !== "connected",
2453
+ disabled: i !== "connected",
1520
2454
  onClick: () => g((e) => !e),
1521
2455
  children: "+"
1522
- }), h && /* @__PURE__ */ l("div", {
2456
+ }), h && /* @__PURE__ */ f("div", {
1523
2457
  className: "attach-menu",
1524
- children: /* @__PURE__ */ l("button", {
2458
+ children: /* @__PURE__ */ f("button", {
1525
2459
  className: "attach-menu__item",
1526
2460
  onClick: () => x.current?.click(),
1527
2461
  children: "Add Files"
1528
2462
  })
1529
2463
  })]
1530
2464
  }),
1531
- /* @__PURE__ */ l("button", {
2465
+ /* @__PURE__ */ f("button", {
1532
2466
  type: "button",
1533
2467
  className: `btn chat-area__icon-btn chat-area__mic-btn${_ ? " chat-area__mic-btn--recording" : ""}`,
1534
2468
  title: _ ? "Stop recording" : "Record voice message",
1535
- disabled: o !== "connected",
2469
+ disabled: i !== "connected",
1536
2470
  onClick: D,
1537
- children: _ ? /* @__PURE__ */ l("svg", {
2471
+ children: _ ? /* @__PURE__ */ f("svg", {
1538
2472
  width: "14",
1539
2473
  height: "14",
1540
2474
  viewBox: "0 0 14 14",
1541
2475
  fill: "currentColor",
1542
- children: /* @__PURE__ */ l("rect", {
2476
+ children: /* @__PURE__ */ f("rect", {
1543
2477
  x: "1",
1544
2478
  y: "1",
1545
2479
  width: "12",
1546
2480
  height: "12",
1547
2481
  rx: "2"
1548
2482
  })
1549
- }) : /* @__PURE__ */ u("svg", {
2483
+ }) : /* @__PURE__ */ p("svg", {
1550
2484
  width: "16",
1551
2485
  height: "16",
1552
2486
  viewBox: "0 0 16 16",
1553
2487
  fill: "currentColor",
1554
2488
  children: [
1555
- /* @__PURE__ */ l("rect", {
2489
+ /* @__PURE__ */ f("rect", {
1556
2490
  x: "5",
1557
2491
  y: "1",
1558
2492
  width: "6",
1559
2493
  height: "9",
1560
2494
  rx: "3"
1561
2495
  }),
1562
- /* @__PURE__ */ l("path", {
2496
+ /* @__PURE__ */ f("path", {
1563
2497
  d: "M3 7a5 5 0 0 0 10 0",
1564
2498
  stroke: "currentColor",
1565
2499
  strokeWidth: "1.5",
1566
2500
  fill: "none",
1567
2501
  strokeLinecap: "round"
1568
2502
  }),
1569
- /* @__PURE__ */ l("line", {
2503
+ /* @__PURE__ */ f("line", {
1570
2504
  x1: "8",
1571
2505
  y1: "12",
1572
2506
  x2: "8",
@@ -1575,7 +2509,7 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
1575
2509
  strokeWidth: "1.5",
1576
2510
  strokeLinecap: "round"
1577
2511
  }),
1578
- /* @__PURE__ */ l("line", {
2512
+ /* @__PURE__ */ f("line", {
1579
2513
  x1: "5.5",
1580
2514
  y1: "15",
1581
2515
  x2: "10.5",
@@ -1587,7 +2521,7 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
1587
2521
  ]
1588
2522
  })
1589
2523
  }),
1590
- /* @__PURE__ */ l("button", {
2524
+ /* @__PURE__ */ f("button", {
1591
2525
  className: "btn btn--primary chat-area__send-btn",
1592
2526
  onClick: O,
1593
2527
  disabled: !F,
@@ -1600,18 +2534,18 @@ function ae({ messages: n, setMessages: r, status: o, send: s }) {
1600
2534
  }
1601
2535
  //#endregion
1602
2536
  //#region src/hooks/useWebSocket.ts
1603
- function oe(n, r) {
1604
- let [o, s] = a("disconnected"), c = i(null), l = i(r);
1605
- return l.current = r, t(() => {
1606
- if (!n) {
1607
- s("disconnected");
2537
+ function Oe(e, n) {
2538
+ let [i, a] = s("disconnected"), c = o(null), l = o(n);
2539
+ return l.current = n, r(() => {
2540
+ if (!e) {
2541
+ a("disconnected");
1608
2542
  return;
1609
2543
  }
1610
- s("connecting");
1611
- let e = new WebSocket(n);
1612
- return c.current = e, e.onopen = () => {
1613
- s("connected"), l.current.onOpen?.();
1614
- }, e.onclose = () => s("disconnected"), e.onerror = () => s("error"), e.onmessage = (e) => {
2544
+ a("connecting");
2545
+ let t = new WebSocket(e);
2546
+ return c.current = t, t.onopen = () => {
2547
+ a("connected"), l.current.onOpen?.();
2548
+ }, t.onclose = () => a("disconnected"), t.onerror = () => a("error"), t.onmessage = (e) => {
1615
2549
  try {
1616
2550
  let t = JSON.parse(e.data);
1617
2551
  if (typeof t.message == "string") try {
@@ -1626,20 +2560,20 @@ function oe(n, r) {
1626
2560
  console.error("Failed to parse WS message:", e.data);
1627
2561
  }
1628
2562
  }, () => {
1629
- e.close(), c.current = null;
2563
+ t.close(), c.current = null;
1630
2564
  };
1631
- }, [n]), {
1632
- status: o,
1633
- send: e((e, t) => {
2565
+ }, [e]), {
2566
+ status: i,
2567
+ send: t((e, t) => {
1634
2568
  c.current?.readyState === WebSocket.OPEN && c.current.send(JSON.stringify({
1635
2569
  action: e,
1636
2570
  message: t
1637
2571
  }));
1638
2572
  }, []),
1639
- disconnect: e(() => {
2573
+ disconnect: t(() => {
1640
2574
  c.current?.close(), c.current = null;
1641
2575
  }, [])
1642
2576
  };
1643
2577
  }
1644
2578
  //#endregion
1645
- export { ae as ChatArea, F as GUIRenderer, W as MessageBubble, d as PayloadAction, m as REASONING_TRACE_ACTION, f as ReasoningStepKind, z as ReasoningTrace, p as TaskStatus, C as detectContentKind, v as isEmptyTrace, g as isReasoningEnd, h as isReasoningStart, S as looksLikeCode, b as looksLikeMarkdown, oe as useWebSocket, _ as visibleSteps };
2579
+ export { $ as ChatArea, W as GUIRenderer, Y as MessageBubble, m as PayloadAction, _ as REASONING_TRACE_ACTION, h as ReasoningStepKind, G as ReasoningTrace, g as TaskStatus, E as detectContentKind, x as isEmptyTrace, y as isReasoningEnd, v as isReasoningStart, T as looksLikeCode, C as looksLikeMarkdown, Oe as useWebSocket, b as visibleSteps };