@epam/ai-dial-conversation-stages 1.1.0-dev.9 → 1.1.0-dev.91
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/CollapsedGroup/CollapsedGroup.d.ts +1 -7
- package/components/CollapsedGroup/CollapsedGroup.d.ts.map +1 -1
- package/components/StageIcon/StageIcon.d.ts +1 -15
- package/components/StageIcon/StageIcon.d.ts.map +1 -1
- package/components/StageItem/StageItem.d.ts +2 -12
- package/components/StageItem/StageItem.d.ts.map +1 -1
- package/components/StagesPanel/StagesPanel.d.ts +1 -5
- package/components/StagesPanel/StagesPanel.d.ts.map +1 -1
- package/index.css +1 -1
- package/index.js +104 -74
- package/models/collapsed-group.d.ts +14 -17
- package/models/collapsed-group.d.ts.map +1 -1
- package/models/stage-grouping.d.ts +6 -14
- package/models/stage-grouping.d.ts.map +1 -1
- package/models/stages-props.d.ts +35 -27
- package/models/stages-props.d.ts.map +1 -1
- package/package.json +3 -3
- package/utils/stage-grouping.d.ts +1 -7
- package/utils/stage-grouping.d.ts.map +1 -1
- package/utils/stage-name.d.ts +5 -14
- package/utils/stage-name.d.ts.map +1 -1
- package/utils/stage-progress.d.ts +1 -7
- package/utils/stage-progress.d.ts.map +1 -1
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { CollapsedGroupProps } from '../../models/collapsed-group';
|
|
3
|
-
/**
|
|
4
|
-
* Wraps `StagesPanel` with a single summary line whose text and default
|
|
5
|
-
* open/closed state track the run: expanded with a live progress line while
|
|
6
|
-
* streaming, then collapsed to one line — finished or failed — the moment
|
|
7
|
-
* it ends. A lone stage skips the summary line entirely and renders
|
|
8
|
-
* directly; an empty list renders nothing.
|
|
9
|
-
*/
|
|
3
|
+
/** Wraps `StagesPanel` with a collapsible summary line that tracks run state: live progress while streaming, one-line summary once finished. */
|
|
10
4
|
export declare const CollapsedGroup: FC<CollapsedGroupProps>;
|
|
11
5
|
//# sourceMappingURL=CollapsedGroup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollapsedGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CollapsedGroup/CollapsedGroup.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CollapsedGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CollapsedGroup/CollapsedGroup.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAUxE,gJAAgJ;AAChJ,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAoOlD,CAAC"}
|
|
@@ -11,20 +11,6 @@ export interface StageIconProps {
|
|
|
11
11
|
/** Accessible label announced (visually hidden) alongside a failed stage's icon. Defaults to `'Failed'`. */
|
|
12
12
|
failedLabel?: string;
|
|
13
13
|
}
|
|
14
|
-
/**
|
|
15
|
-
* The row's single icon slot, filled by priority: exception (failed, or
|
|
16
|
-
* running via a spinner) always wins; everything else — completed, or a
|
|
17
|
-
* settled-but-unresolved stage from an aborted stream — falls back to one
|
|
18
|
-
* uniform check glyph, the same `IconCheck` glyph and size as the
|
|
19
|
-
* `CollapsedGroup` summary's own "Executed N steps" check, but in a quiet
|
|
20
|
-
* grey ink rather than the summary's success color — the summary is the one
|
|
21
|
-
* place that should read as a vivid confirmation, not every row. There is
|
|
22
|
-
* no separate "pending" glyph: the quiet tier is intentionally a single
|
|
23
|
-
* glyph, not a per-state icon set.
|
|
24
|
-
*
|
|
25
|
-
* The icon itself is `aria-hidden` (decorative) — status is also carried by
|
|
26
|
-
* text: failed stages get a visually-hidden label here, and their row name
|
|
27
|
-
* gets the warning ink color at the call site.
|
|
28
|
-
*/
|
|
14
|
+
/** Renders the icon for a stage, based on its status and whether it's currently executing. */
|
|
29
15
|
export declare const StageIcon: FC<StageIconProps>;
|
|
30
16
|
//# sourceMappingURL=StageIcon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StageIcon.d.ts","sourceRoot":"","sources":["../../../src/components/StageIcon/StageIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,mCAAmC;AACnC,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,kEAAkE;IAClE,MAAM,EAAE,OAAO,CAAC;IAChB,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4GAA4G;IAC5G,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED
|
|
1
|
+
{"version":3,"file":"StageIcon.d.ts","sourceRoot":"","sources":["../../../src/components/StageIcon/StageIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,mCAAmC;AACnC,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,kEAAkE;IAClE,MAAM,EAAE,OAAO,CAAC;IAChB,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4GAA4G;IAC5G,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,8FAA8F;AAC9F,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA8BxC,CAAC"}
|
|
@@ -11,19 +11,9 @@ export interface StageItemProps {
|
|
|
11
11
|
typography?: StageTypography;
|
|
12
12
|
/** User-visible strings. */
|
|
13
13
|
labels?: StagesPanelLabels;
|
|
14
|
-
/**
|
|
15
|
-
* Overrides the displayed name without affecting duration extraction —
|
|
16
|
-
* used to relabel an individual attempt (e.g. `'Attempt 2'`) inside a
|
|
17
|
-
* collapsed `×N` group while still reading that attempt's own duration
|
|
18
|
-
* from its real `stage.name`.
|
|
19
|
-
*/
|
|
14
|
+
/** Overrides the displayed name; used to relabel individual attempts (e.g. `'Attempt 2'`) inside a `×N` group. */
|
|
20
15
|
nameOverride?: string;
|
|
21
16
|
}
|
|
22
|
-
/**
|
|
23
|
-
* A single flat stage row: icon · name · tag? · duration? · chevron? — every
|
|
24
|
-
* element but the icon and name is optional and renders only when the data
|
|
25
|
-
* exists. Plain when the stage has no expandable content or attachments;
|
|
26
|
-
* becomes a disclosure button when it does.
|
|
27
|
-
*/
|
|
17
|
+
/** Renders a single stage row, optionally expandable to show its content. */
|
|
28
18
|
export declare const StageItem: FC<StageItemProps>;
|
|
29
19
|
//# sourceMappingURL=StageItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StageItem.d.ts","sourceRoot":"","sources":["../../../src/components/StageItem/StageItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAIvD,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EAChB,MAAM,2BAA2B,CAAC;AAMnC,mCAAmC;AACnC,MAAM,WAAW,cAAc;IAC7B,gCAAgC;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,kEAAkE;IAClE,MAAM,EAAE,OAAO,CAAC;IAChB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,4BAA4B;IAC5B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B
|
|
1
|
+
{"version":3,"file":"StageItem.d.ts","sourceRoot":"","sources":["../../../src/components/StageItem/StageItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAIvD,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EAChB,MAAM,2BAA2B,CAAC;AAMnC,mCAAmC;AACnC,MAAM,WAAW,cAAc;IAC7B,gCAAgC;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,kEAAkE;IAClE,MAAM,EAAE,OAAO,CAAC;IAChB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,4BAA4B;IAC5B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,kHAAkH;IAClH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,6EAA6E;AAC7E,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAwHxC,CAAC"}
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { StagesPanelProps } from '../../models/stages-props';
|
|
3
|
-
/**
|
|
4
|
-
* Displays an agent's accumulated stages as a flat, inline list of rows — no
|
|
5
|
-
* card, border, or panel around it. Repeated identical stage names collapse
|
|
6
|
-
* into one `×N` row that expands to the individual attempts.
|
|
7
|
-
*/
|
|
3
|
+
/** Flat inline list of agent stages; repeated identical names collapse into a ×N group row. */
|
|
8
4
|
export declare const StagesPanel: FC<StagesPanelProps>;
|
|
9
5
|
//# sourceMappingURL=StagesPanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StagesPanel.d.ts","sourceRoot":"","sources":["../../../src/components/StagesPanel/StagesPanel.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAEV,gBAAgB,EAEjB,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"StagesPanel.d.ts","sourceRoot":"","sources":["../../../src/components/StagesPanel/StagesPanel.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAEV,gBAAgB,EAEjB,MAAM,2BAA2B,CAAC;AAwInC,+FAA+F;AAC/F,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+D5C,CAAC"}
|
package/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.
|
|
1
|
+
._panel_123tj_1{color:var(--cs-text,var(--text-primary,#161b2d))}._row_123tj_5:hover{background:var(--cs-row-hover,var(--bg-layer-sunken,#eef1f7))}._collapseButton_123tj_9{background:var(--cs-button-bg,transparent)}._stageName_123tj_13{color:var(--cs-stage-text,var(--text-secondary,#6b7280))}._stageNameFailed_123tj_17{color:var(--cs-failed-text,var(--text-warning,#7f6300))}._monoName_123tj_21{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}._tag_123tj_25{color:var(--cs-tag-text,var(--text-tertiary,#c7cbd4))}._count_123tj_29{color:var(--cs-count-text,var(--text-tertiary,#c7cbd4));font-variant-numeric:tabular-nums}._duration_123tj_34{color:var(--cs-duration-text,var(--text-tertiary,#c7cbd4));font-variant-numeric:tabular-nums}._iconSecondary_123tj_39{color:var(--cs-icon-secondary,var(--text-secondary,#6b7280));opacity:.7}._iconCompleted_123tj_44{color:var(--cs-icon-completed,var(--text-tertiary,#c7cbd4))}._iconError_123tj_48{color:var(--cs-icon-error,var(--text-warning,#7f6300))}._stageContent_123tj_52{color:var(--cs-stage-text,var(--text-secondary,#6b7280));line-height:150%!important}._codeBlock_123tj_57{background:var(--cs-code-bg,var(--bg-layer-raised,#fcfcfc));border-color:var(--cs-code-border,var(--stroke-secondary,#d1dbea));color:var(--cs-code-text,var(--text-primary,#161b2d))}._codeInline_123tj_63{background:var(--cs-code-bg,var(--bg-layer-raised,#fcfcfc));border:1px solid var(--cs-code-border,var(--stroke-secondary,#d1dbea));color:var(--cs-code-text,var(--text-primary,#161b2d))}._blockquote_123tj_69{border-color:var(--cs-stage-text,var(--text-secondary,#6b7280));color:var(--cs-stage-text,var(--text-secondary,#6b7280))}._tableCell_123tj_74{border-color:var(--cs-border,var(--stroke-secondary,#d1dbea));color:var(--cs-stage-text,var(--text-secondary,#6b7280))}._toggleButton_11lpl_1{color:var(--cs-cg-label,var(--text-secondary,#6b7280));width:100%;justify-content:flex-start!important}._toggleButton_11lpl_1:hover{color:var(--cs-cg-label-hover,var(--text-primary,#161b2d))}._executedLabel_11lpl_10{color:var(--cs-cg-label,var(--text-secondary,#6b7280))}._stepsCount_11lpl_14{color:var(--cs-cg-steps-count,var(--text-tertiary,#c7cbd4));font-variant-numeric:tabular-nums}._doneIcon_11lpl_19{color:var(--cs-cg-done,var(--text-success,#007274))}._failedText_11lpl_23{color:var(--cs-cg-failed,var(--text-warning,#7f6300))}._liveName_11lpl_27{color:var(--cs-cg-label,var(--text-primary,#161b2d))}
|
|
2
2
|
/*$vite$:1*/
|
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { MarkdownRenderer as e, StageStatus as t, buildCssVars as n, copyToClipboard as r, mergeClasses as i } from "@epam/ai-dial-chat-shared";
|
|
2
|
-
import { DIAL_ICON_SIZE as a, DialEllipsisTooltip as o,
|
|
2
|
+
import { DIAL_ICON_SIZE as a, DialEllipsisTooltip as o, DialSpinner as s, ElementSize as c, GhostIconButton as l, LinkButton as u } from "@epam/ai-dial-ui-kit";
|
|
3
3
|
import { IconAlertCircle as d, IconCheck as f, IconChevronDown as p, IconChevronRight as m, IconCopy as h } from "@tabler/icons-react";
|
|
4
4
|
import { memo as g, useCallback as _, useEffect as v, useRef as y, useState as b } from "react";
|
|
5
5
|
import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
|
|
@@ -30,36 +30,34 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
30
30
|
for (; a < e.length && D(e[a].name).name === i;) a += 1;
|
|
31
31
|
let o = e.slice(n, a);
|
|
32
32
|
o.length > 1 ? t.push({
|
|
33
|
-
kind: "group",
|
|
34
33
|
key: r.index,
|
|
35
34
|
name: i,
|
|
36
35
|
attempts: o
|
|
37
36
|
}) : t.push({
|
|
38
|
-
kind: "single",
|
|
39
37
|
key: r.index,
|
|
40
38
|
stage: r
|
|
41
39
|
}), n = a;
|
|
42
40
|
}
|
|
43
41
|
return t;
|
|
44
42
|
}, P = {
|
|
45
|
-
panel: "
|
|
46
|
-
row: "
|
|
47
|
-
collapseButton: "
|
|
48
|
-
stageName: "
|
|
49
|
-
stageNameFailed: "
|
|
50
|
-
monoName: "
|
|
51
|
-
tag: "
|
|
52
|
-
count: "
|
|
53
|
-
duration: "
|
|
54
|
-
iconSecondary: "
|
|
55
|
-
iconCompleted: "
|
|
56
|
-
iconError: "
|
|
57
|
-
stageContent: "
|
|
58
|
-
codeBlock: "
|
|
59
|
-
codeInline: "
|
|
60
|
-
blockquote: "
|
|
61
|
-
tableCell: "
|
|
62
|
-
}, F = ({ status: e, isLive: n, runningLabel: r = "Running", failedLabel: i = "Failed" }) => n ? /* @__PURE__ */ S(
|
|
43
|
+
panel: "_panel_123tj_1",
|
|
44
|
+
row: "_row_123tj_5",
|
|
45
|
+
collapseButton: "_collapseButton_123tj_9",
|
|
46
|
+
stageName: "_stageName_123tj_13",
|
|
47
|
+
stageNameFailed: "_stageNameFailed_123tj_17",
|
|
48
|
+
monoName: "_monoName_123tj_21",
|
|
49
|
+
tag: "_tag_123tj_25",
|
|
50
|
+
count: "_count_123tj_29",
|
|
51
|
+
duration: "_duration_123tj_34",
|
|
52
|
+
iconSecondary: "_iconSecondary_123tj_39",
|
|
53
|
+
iconCompleted: "_iconCompleted_123tj_44",
|
|
54
|
+
iconError: "_iconError_123tj_48",
|
|
55
|
+
stageContent: "_stageContent_123tj_52",
|
|
56
|
+
codeBlock: "_codeBlock_123tj_57",
|
|
57
|
+
codeInline: "_codeInline_123tj_63",
|
|
58
|
+
blockquote: "_blockquote_123tj_69",
|
|
59
|
+
tableCell: "_tableCell_123tj_74"
|
|
60
|
+
}, F = ({ status: e, isLive: n, runningLabel: r = "Running", failedLabel: i = "Failed" }) => n ? /* @__PURE__ */ S(s, {
|
|
63
61
|
size: 16,
|
|
64
62
|
ariaLabel: r
|
|
65
63
|
}) : e === t.Failed ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(d, {
|
|
@@ -74,17 +72,17 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
74
72
|
className: P.iconCompleted,
|
|
75
73
|
"aria-hidden": !0
|
|
76
74
|
}), I = ({ children: e, codeClassName: t, copyAriaLabel: n }) => {
|
|
77
|
-
let [o,
|
|
75
|
+
let [o, s] = b(!1), u = y(null);
|
|
78
76
|
v(() => () => {
|
|
79
|
-
|
|
77
|
+
u.current != null && clearTimeout(u.current);
|
|
80
78
|
}, []);
|
|
81
79
|
let d = _(() => {
|
|
82
|
-
r(typeof e == "string" ? e : String(e ?? "")),
|
|
80
|
+
r(typeof e == "string" ? e : String(e ?? "")), u.current && clearTimeout(u.current), s(!0), u.current = setTimeout(() => s(!1), 2e3);
|
|
83
81
|
}, [e]);
|
|
84
82
|
return /* @__PURE__ */ C("pre", {
|
|
85
|
-
className: i("relative max-h-[300px] overflow-auto rounded border p-3
|
|
86
|
-
children: [/* @__PURE__ */ S(
|
|
87
|
-
size:
|
|
83
|
+
className: i("dial-small-text relative max-h-[300px] overflow-auto rounded border p-3", P.codeBlock),
|
|
84
|
+
children: [/* @__PURE__ */ S(l, {
|
|
85
|
+
size: c.Small,
|
|
88
86
|
icon: S(o ? f : h, {
|
|
89
87
|
size: a.SM,
|
|
90
88
|
className: P.iconSecondary
|
|
@@ -142,7 +140,7 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
142
140
|
children: /* @__PURE__ */ S(o, { text: v || e.status || "" })
|
|
143
141
|
}),
|
|
144
142
|
e.tag && /* @__PURE__ */ S("span", {
|
|
145
|
-
className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", P.tag),
|
|
143
|
+
className: i("flex-none uppercase", r?.countFontClassName ?? "dial-tiny-text", P.tag),
|
|
146
144
|
children: e.tag
|
|
147
145
|
}),
|
|
148
146
|
_ && /* @__PURE__ */ S("span", {
|
|
@@ -188,7 +186,7 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
188
186
|
children: E
|
|
189
187
|
});
|
|
190
188
|
}, z = ({ row: e, isLive: n, typography: r, labels: s }) => {
|
|
191
|
-
let { runningAriaLabel: c, failedAriaLabel: l, attemptLabel: u = (e) => `Attempt ${e}` } = s ?? {}, [d, f] = b(!1), h = e.attempts
|
|
189
|
+
let { runningAriaLabel: c, failedAriaLabel: l, attemptLabel: u = (e) => `Attempt ${e}` } = s ?? {}, [d, f] = b(!1), h = e.attempts?.some((e) => e.status === t.Failed), g = (e.attempts || []).reduce((e, t) => {
|
|
192
190
|
let { durationLabel: n } = D(t.name);
|
|
193
191
|
return e + (A(n) ?? 0);
|
|
194
192
|
}, 0), _ = g > 0 ? k(g) : void 0;
|
|
@@ -196,7 +194,7 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
196
194
|
type: "button",
|
|
197
195
|
onClick: () => f((e) => !e),
|
|
198
196
|
"aria-expanded": d,
|
|
199
|
-
className: i("flex w-full items-center gap-2 px-2 py-1.5 text-start", P.row),
|
|
197
|
+
className: i("flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-start", P.row),
|
|
200
198
|
children: [
|
|
201
199
|
/* @__PURE__ */ S("span", {
|
|
202
200
|
className: "flex flex-none items-center",
|
|
@@ -213,7 +211,7 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
213
211
|
}),
|
|
214
212
|
/* @__PURE__ */ C("span", {
|
|
215
213
|
className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", P.count),
|
|
216
|
-
children: ["×", e.attempts
|
|
214
|
+
children: ["×", e.attempts?.length ?? 0]
|
|
217
215
|
}),
|
|
218
216
|
_ && /* @__PURE__ */ S("span", {
|
|
219
217
|
className: i("flex-none", r?.countFontClassName ?? "dial-tiny-text", P.duration),
|
|
@@ -238,12 +236,12 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
238
236
|
children: /* @__PURE__ */ S("ul", {
|
|
239
237
|
role: "list",
|
|
240
238
|
className: "mt-1 flex flex-col gap-0.5 ps-6",
|
|
241
|
-
children: e.attempts
|
|
239
|
+
children: e.attempts?.map((t, i) => /* @__PURE__ */ S("li", {
|
|
242
240
|
role: "listitem",
|
|
243
241
|
children: /* @__PURE__ */ S(R, {
|
|
244
242
|
stage: t,
|
|
245
243
|
nameOverride: u(i + 1),
|
|
246
|
-
isLive: n && t.index === e.attempts[e.attempts.length - 1]
|
|
244
|
+
isLive: n && t.index === e.attempts?.[e.attempts.length - 1]?.index,
|
|
247
245
|
typography: r,
|
|
248
246
|
labels: s
|
|
249
247
|
})
|
|
@@ -255,8 +253,19 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
255
253
|
let { colors: s, typography: c } = a ?? {}, l = n({
|
|
256
254
|
"--cs-text": s?.text,
|
|
257
255
|
"--cs-row-hover": s?.rowHoverColor,
|
|
256
|
+
"--cs-button-bg": s?.collapsedButtonBg,
|
|
258
257
|
"--cs-stage-text": s?.stageTextColor,
|
|
259
|
-
"--cs-failed-text": s?.failedColor
|
|
258
|
+
"--cs-failed-text": s?.failedColor,
|
|
259
|
+
"--cs-tag-text": s?.tagTextColor,
|
|
260
|
+
"--cs-count-text": s?.countTextColor,
|
|
261
|
+
"--cs-duration-text": s?.durationTextColor,
|
|
262
|
+
"--cs-icon-secondary": s?.iconSecondaryColor,
|
|
263
|
+
"--cs-icon-completed": s?.iconCompletedColor,
|
|
264
|
+
"--cs-icon-error": s?.iconErrorColor,
|
|
265
|
+
"--cs-code-bg": s?.codeBg,
|
|
266
|
+
"--cs-code-border": s?.codeBorderColor,
|
|
267
|
+
"--cs-code-text": s?.codeTextColor,
|
|
268
|
+
"--cs-border": s?.borderColor
|
|
260
269
|
}), u = t ? j(e) : void 0, d = N(e);
|
|
261
270
|
return /* @__PURE__ */ S("div", {
|
|
262
271
|
style: l,
|
|
@@ -264,7 +273,7 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
264
273
|
children: /* @__PURE__ */ S("ul", {
|
|
265
274
|
role: "list",
|
|
266
275
|
className: "flex w-full flex-col gap-0.5 ps-5",
|
|
267
|
-
children: d.map((e) => e.
|
|
276
|
+
children: d.map((e) => e.stage ? /* @__PURE__ */ S("li", {
|
|
268
277
|
role: "listitem",
|
|
269
278
|
children: /* @__PURE__ */ S(R, {
|
|
270
279
|
stage: e.stage,
|
|
@@ -276,7 +285,7 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
276
285
|
role: "listitem",
|
|
277
286
|
children: /* @__PURE__ */ S(z, {
|
|
278
287
|
row: e,
|
|
279
|
-
isLive: u?.index === e.attempts[e.attempts.length - 1].index,
|
|
288
|
+
isLive: u?.index === e.attempts?.[e.attempts.length - 1].index,
|
|
280
289
|
typography: c,
|
|
281
290
|
labels: o
|
|
282
291
|
})
|
|
@@ -284,26 +293,41 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
284
293
|
})
|
|
285
294
|
});
|
|
286
295
|
}, V = {
|
|
287
|
-
toggleButton: "
|
|
288
|
-
executedLabel: "
|
|
289
|
-
stepsCount: "
|
|
290
|
-
doneIcon: "
|
|
291
|
-
failedText: "
|
|
292
|
-
liveName: "
|
|
293
|
-
}, H = ({ stages: e, isStreaming: r, labels: o, className:
|
|
296
|
+
toggleButton: "_toggleButton_11lpl_1",
|
|
297
|
+
executedLabel: "_executedLabel_11lpl_10",
|
|
298
|
+
stepsCount: "_stepsCount_11lpl_14",
|
|
299
|
+
doneIcon: "_doneIcon_11lpl_19",
|
|
300
|
+
failedText: "_failedText_11lpl_23",
|
|
301
|
+
liveName: "_liveName_11lpl_27"
|
|
302
|
+
}, H = ({ stages: e, isStreaming: r, labels: o, className: c, styles: l }) => {
|
|
294
303
|
let { executedLabel: d = "Executed", stepsLabel: h = () => "steps", failedCountLabel: g = (e) => `${e} failed`, runningStepLabel: _ = (e, t) => `Step ${e} of ${t}`, runningAriaLabel: x = "Running", copyAriaLabel: w, failedAriaLabel: T, attemptLabel: E } = o ?? {}, [O, N] = b(r), P = y(r);
|
|
295
304
|
v(() => {
|
|
296
305
|
P.current && !r && N(!1), P.current = r;
|
|
297
306
|
}, [r]);
|
|
298
|
-
let { colors: F } =
|
|
307
|
+
let { colors: F, panel: I } = l ?? {}, L = l?.typography ?? { fontClassName: "dial-small-text" }, R = n({
|
|
299
308
|
"--cs-cg-label": F?.labelColor,
|
|
300
309
|
"--cs-cg-label-hover": F?.labelHoverColor,
|
|
301
310
|
"--cs-cg-steps-count": F?.stepsCountColor,
|
|
302
311
|
"--cs-cg-done": F?.doneColor,
|
|
303
|
-
"--cs-cg-failed": F?.failedColor
|
|
312
|
+
"--cs-cg-failed": F?.failedColor,
|
|
313
|
+
"--cs-text": I?.text,
|
|
314
|
+
"--cs-row-hover": I?.rowHoverColor,
|
|
315
|
+
"--cs-button-bg": I?.collapsedButtonBg,
|
|
316
|
+
"--cs-stage-text": I?.stageTextColor,
|
|
317
|
+
"--cs-failed-text": I?.failedColor,
|
|
318
|
+
"--cs-tag-text": I?.tagTextColor,
|
|
319
|
+
"--cs-count-text": I?.countTextColor,
|
|
320
|
+
"--cs-duration-text": I?.durationTextColor,
|
|
321
|
+
"--cs-icon-secondary": I?.iconSecondaryColor,
|
|
322
|
+
"--cs-icon-completed": I?.iconCompletedColor,
|
|
323
|
+
"--cs-icon-error": I?.iconErrorColor,
|
|
324
|
+
"--cs-code-bg": I?.codeBg,
|
|
325
|
+
"--cs-code-border": I?.codeBorderColor,
|
|
326
|
+
"--cs-code-text": I?.codeTextColor,
|
|
327
|
+
"--cs-border": I?.borderColor
|
|
304
328
|
});
|
|
305
329
|
if (e.length === 0) return null;
|
|
306
|
-
let
|
|
330
|
+
let z = {
|
|
307
331
|
copyAriaLabel: w,
|
|
308
332
|
runningAriaLabel: x,
|
|
309
333
|
failedAriaLabel: T,
|
|
@@ -312,42 +336,45 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
312
336
|
if (e.length === 1) return /* @__PURE__ */ S(B, {
|
|
313
337
|
stages: e,
|
|
314
338
|
isStreaming: r,
|
|
315
|
-
className:
|
|
316
|
-
styles: {
|
|
317
|
-
|
|
339
|
+
className: c,
|
|
340
|
+
styles: {
|
|
341
|
+
colors: I,
|
|
342
|
+
typography: l?.typography
|
|
343
|
+
},
|
|
344
|
+
labels: z
|
|
318
345
|
});
|
|
319
|
-
let
|
|
346
|
+
let H = e.some((e) => e.status === t.Failed), U = e.reduce((e, t) => {
|
|
320
347
|
let { durationLabel: n } = D(t.name);
|
|
321
348
|
return e + (A(n) ?? 0);
|
|
322
|
-
}, 0),
|
|
349
|
+
}, 0), W = U > 0 ? k(U) : void 0, G = r ? j(e) : void 0, K;
|
|
323
350
|
if (r) {
|
|
324
|
-
let t =
|
|
325
|
-
|
|
351
|
+
let t = G ? M(e, G) : e.length, n = G ? D(G.name).name : "";
|
|
352
|
+
K = /* @__PURE__ */ C("span", {
|
|
326
353
|
role: "status",
|
|
327
354
|
"aria-live": "polite",
|
|
328
355
|
className: "inline-flex items-center gap-2",
|
|
329
356
|
children: [
|
|
330
|
-
/* @__PURE__ */ S(
|
|
357
|
+
/* @__PURE__ */ S(s, {
|
|
331
358
|
size: 14,
|
|
332
359
|
ariaLabel: x
|
|
333
360
|
}),
|
|
334
361
|
/* @__PURE__ */ S("span", {
|
|
335
|
-
className: i(
|
|
362
|
+
className: i(L.fontClassName, V.liveName),
|
|
336
363
|
children: _(t, e.length)
|
|
337
364
|
}),
|
|
338
365
|
n && /* @__PURE__ */ S("span", {
|
|
339
|
-
className: i(
|
|
366
|
+
className: i(L.fontClassName, V.executedLabel),
|
|
340
367
|
children: n
|
|
341
368
|
})
|
|
342
369
|
]
|
|
343
370
|
});
|
|
344
|
-
} else if (
|
|
371
|
+
} else if (H) {
|
|
345
372
|
let n = e.filter((e) => e.status === t.Failed).length;
|
|
346
|
-
|
|
373
|
+
K = /* @__PURE__ */ C("span", {
|
|
347
374
|
className: "inline-flex items-center gap-1",
|
|
348
375
|
children: [
|
|
349
376
|
/* @__PURE__ */ C("span", {
|
|
350
|
-
className: i(
|
|
377
|
+
className: i(L.fontClassName, V.executedLabel),
|
|
351
378
|
children: [
|
|
352
379
|
d,
|
|
353
380
|
" ",
|
|
@@ -357,16 +384,16 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
357
384
|
]
|
|
358
385
|
}),
|
|
359
386
|
/* @__PURE__ */ S("span", {
|
|
360
|
-
className: i(
|
|
387
|
+
className: i(L.fontClassName, V.failedText),
|
|
361
388
|
children: g(n)
|
|
362
389
|
}),
|
|
363
|
-
|
|
364
|
-
className: i(
|
|
365
|
-
children:
|
|
390
|
+
W && /* @__PURE__ */ S("span", {
|
|
391
|
+
className: i(L.fontClassName, V.stepsCount),
|
|
392
|
+
children: W
|
|
366
393
|
})
|
|
367
394
|
]
|
|
368
395
|
});
|
|
369
|
-
} else
|
|
396
|
+
} else K = /* @__PURE__ */ C("span", {
|
|
370
397
|
className: "inline-flex items-center gap-1",
|
|
371
398
|
children: [
|
|
372
399
|
/* @__PURE__ */ S(f, {
|
|
@@ -375,7 +402,7 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
375
402
|
"aria-hidden": !0
|
|
376
403
|
}),
|
|
377
404
|
/* @__PURE__ */ C("span", {
|
|
378
|
-
className: i(
|
|
405
|
+
className: i(L.fontClassName, V.executedLabel),
|
|
379
406
|
children: [
|
|
380
407
|
d,
|
|
381
408
|
" ",
|
|
@@ -384,16 +411,16 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
384
411
|
h(e.length)
|
|
385
412
|
]
|
|
386
413
|
}),
|
|
387
|
-
|
|
388
|
-
className: i(
|
|
389
|
-
children:
|
|
414
|
+
W && /* @__PURE__ */ S("span", {
|
|
415
|
+
className: i(L.fontClassName, V.stepsCount),
|
|
416
|
+
children: W
|
|
390
417
|
})
|
|
391
418
|
]
|
|
392
419
|
});
|
|
393
420
|
return /* @__PURE__ */ C("div", {
|
|
394
|
-
style:
|
|
395
|
-
className: i("flex w-full flex-col gap-1",
|
|
396
|
-
children: [/* @__PURE__ */ S(
|
|
421
|
+
style: R,
|
|
422
|
+
className: i("flex w-full flex-col gap-1", c),
|
|
423
|
+
children: [/* @__PURE__ */ S(u, {
|
|
397
424
|
className: V.toggleButton,
|
|
398
425
|
onClick: () => N((e) => !e),
|
|
399
426
|
"aria-expanded": O,
|
|
@@ -405,7 +432,7 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
405
432
|
className: "rtl:scale-x-[-1]",
|
|
406
433
|
"aria-hidden": !0
|
|
407
434
|
}),
|
|
408
|
-
label:
|
|
435
|
+
label: K
|
|
409
436
|
}), /* @__PURE__ */ S("div", {
|
|
410
437
|
className: i("grid transition-[grid-template-rows] duration-300 ease-in-out", O ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
|
|
411
438
|
children: /* @__PURE__ */ S("div", {
|
|
@@ -413,8 +440,11 @@ var w = /[([][^()[\]]*[)\]]/g, T = /(\d+(?:\.\d+)?)\s*s\b/, E = /:\s*$/, D = (e)
|
|
|
413
440
|
children: /* @__PURE__ */ S(B, {
|
|
414
441
|
stages: e,
|
|
415
442
|
isStreaming: r,
|
|
416
|
-
styles: {
|
|
417
|
-
|
|
443
|
+
styles: {
|
|
444
|
+
colors: I,
|
|
445
|
+
typography: l?.typography
|
|
446
|
+
},
|
|
447
|
+
labels: z,
|
|
418
448
|
className: "pt-1"
|
|
419
449
|
})
|
|
420
450
|
})
|
|
@@ -1,40 +1,41 @@
|
|
|
1
1
|
import { Stage } from '@epam/ai-dial-chat-shared';
|
|
2
|
+
import { StagesPanelColors } from './stages-props';
|
|
2
3
|
/** Color overrides for the `CollapsedGroup` component applied as CSS custom properties. */
|
|
3
4
|
export interface CollapsedGroupColors {
|
|
4
|
-
/** Color of the toggle button label and icon.
|
|
5
|
+
/** Color of the toggle button label and icon. */
|
|
5
6
|
labelColor?: string;
|
|
6
|
-
/** Color of the toggle button label and icon on hover.
|
|
7
|
+
/** Color of the toggle button label and icon on hover. */
|
|
7
8
|
labelHoverColor?: string;
|
|
8
|
-
/** Color of the execution time.
|
|
9
|
+
/** Color of the execution time. */
|
|
9
10
|
stepsCountColor?: string;
|
|
10
|
-
/** Color of the leading check icon in the finished-and-successful summary.
|
|
11
|
+
/** Color of the leading check icon in the finished-and-successful summary. */
|
|
11
12
|
doneColor?: string;
|
|
12
|
-
/** Color of the "N failed" text in the failed summary.
|
|
13
|
+
/** Color of the "N failed" text in the failed summary. */
|
|
13
14
|
failedColor?: string;
|
|
14
15
|
}
|
|
15
16
|
/** Typography configuration for the toggle button label text. */
|
|
16
17
|
export interface CollapsedGroupTypography {
|
|
17
|
-
/** CSS utility class applied to the toggle button label.
|
|
18
|
+
/** CSS utility class applied to the toggle button label. */
|
|
18
19
|
fontClassName?: string;
|
|
19
|
-
/** Font family applied to the panel root via CSS custom property. */
|
|
20
|
-
fontFamily?: string;
|
|
21
20
|
}
|
|
22
21
|
/** Combined style overrides (colors and typography) for the `CollapsedGroup` component. */
|
|
23
22
|
export interface CollapsedGroupStyles {
|
|
24
23
|
/** Color overrides applied as CSS custom properties. */
|
|
25
24
|
colors?: CollapsedGroupColors;
|
|
26
|
-
/** Typography for the toggle button label.
|
|
25
|
+
/** Typography for the toggle button label. */
|
|
27
26
|
typography?: CollapsedGroupTypography;
|
|
27
|
+
/** Color overrides forwarded to the inner `StagesPanel`. */
|
|
28
|
+
panel?: StagesPanelColors;
|
|
28
29
|
}
|
|
29
30
|
/** User-visible strings for the `CollapsedGroup` component. */
|
|
30
31
|
export interface CollapsedGroupLabels {
|
|
31
32
|
/** Label shown before the steps count on the toggle button. Defaults to `'Executed'`. */
|
|
32
33
|
executedLabel?: string;
|
|
33
|
-
/** Returns the pluralized
|
|
34
|
+
/** Returns the pluralized steps label. Defaults to `() => 'steps'`. */
|
|
34
35
|
stepsLabel?: (count: number) => string;
|
|
35
|
-
/** Returns the "N failed"
|
|
36
|
+
/** Returns the "N failed" text in the failed summary. Defaults to `(n) => \`${n} failed\``. */
|
|
36
37
|
failedCountLabel?: (failedCount: number) => string;
|
|
37
|
-
/** Returns the "Step X of Y"
|
|
38
|
+
/** Returns the "Step X of Y" text in the running summary. Defaults to `(current, total) => \`Step ${current} of ${total}\``. */
|
|
38
39
|
runningStepLabel?: (current: number, total: number) => string;
|
|
39
40
|
/** Accessible label announced for the running summary's spinner. Defaults to `'Running'`. */
|
|
40
41
|
runningAriaLabel?: string;
|
|
@@ -49,11 +50,7 @@ export interface CollapsedGroupLabels {
|
|
|
49
50
|
export interface CollapsedGroupProps {
|
|
50
51
|
/** Ordered list of stages to display. */
|
|
51
52
|
stages: Stage[];
|
|
52
|
-
/**
|
|
53
|
-
* Whether the run is still streaming. Drives the summary line's state
|
|
54
|
-
* (running vs. finished vs. failed) and its default open/closed state —
|
|
55
|
-
* expanded while running, collapsed once finished.
|
|
56
|
-
*/
|
|
53
|
+
/** When true, expands to a live progress line; collapses to a summary once streaming ends. */
|
|
57
54
|
isStreaming: boolean;
|
|
58
55
|
/** User-visible strings for the toggle button. */
|
|
59
56
|
labels?: CollapsedGroupLabels;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapsed-group.d.ts","sourceRoot":"","sources":["../../src/models/collapsed-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"collapsed-group.d.ts","sourceRoot":"","sources":["../../src/models/collapsed-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,2FAA2F;AAC3F,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,iEAAiE;AACjE,MAAM,WAAW,wBAAwB;IACvC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,2FAA2F;AAC3F,MAAM,WAAW,oBAAoB;IACnC,wDAAwD;IACxD,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,8CAA8C;IAC9C,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAED,+DAA+D;AAC/D,MAAM,WAAW,oBAAoB;IACnC,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uEAAuE;IACvE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,gIAAgI;IAChI,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9D,6FAA6F;IAC7F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0FAA0F;IAC1F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+FAA+F;IAC/F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mHAAmH;IACnH,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,CAAC;CAClD;AAED,wDAAwD;AACxD,MAAM,WAAW,mBAAmB;IAClC,yCAAyC;IACzC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,8FAA8F;IAC9F,WAAW,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B"}
|
|
@@ -1,21 +1,13 @@
|
|
|
1
1
|
import { Stage } from '@epam/ai-dial-chat-shared';
|
|
2
|
-
/** A
|
|
3
|
-
export interface
|
|
4
|
-
kind: 'single';
|
|
5
|
-
/** Stable key for list rendering — the stage's own index. */
|
|
6
|
-
key: number;
|
|
7
|
-
stage: Stage;
|
|
8
|
-
}
|
|
9
|
-
/** A row formed by collapsing consecutive stages that share the same cleaned name into one `×N` row. */
|
|
10
|
-
export interface GroupedStageRow {
|
|
11
|
-
kind: 'group';
|
|
2
|
+
/** A row rendered inside a `StagesPanel` — either one stage or a collapsed `×N` group of identical attempts. */
|
|
3
|
+
export interface StageRow {
|
|
12
4
|
/** Stable key for list rendering — the first attempt's index. */
|
|
13
5
|
key: number;
|
|
14
6
|
/** Shared cleaned display name for the group. */
|
|
15
|
-
name
|
|
7
|
+
name?: string;
|
|
8
|
+
/** The single stage for this row (present only when there is one attempt). */
|
|
9
|
+
stage?: Stage;
|
|
16
10
|
/** Individual attempts in original order. */
|
|
17
|
-
attempts
|
|
11
|
+
attempts?: Stage[];
|
|
18
12
|
}
|
|
19
|
-
/** A row rendered inside a `StagesPanel` — either one stage or a collapsed `×N` group of identical attempts. */
|
|
20
|
-
export type StageRow = SingleStageRow | GroupedStageRow;
|
|
21
13
|
//# sourceMappingURL=stage-grouping.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stage-grouping.d.ts","sourceRoot":"","sources":["../../src/models/stage-grouping.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEvD,
|
|
1
|
+
{"version":3,"file":"stage-grouping.d.ts","sourceRoot":"","sources":["../../src/models/stage-grouping.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEvD,gHAAgH;AAChH,MAAM,WAAW,QAAQ;IACvB,iEAAiE;IACjE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;CACpB"}
|
package/models/stages-props.d.ts
CHANGED
|
@@ -1,49 +1,57 @@
|
|
|
1
1
|
import { Stage } from '@epam/ai-dial-chat-shared';
|
|
2
|
-
/**
|
|
3
|
-
* Typography configuration for a stage row. The name is always the
|
|
4
|
-
* dominant text in the row — bigger than the expanded content — so
|
|
5
|
-
* `fontClassName` (name) and `contentClassName` (expanded markdown content)
|
|
6
|
-
* are deliberately separate fields, not one shared class.
|
|
7
|
-
*/
|
|
2
|
+
/** Typography class overrides for stage name and expanded content elements in `StagesPanel`. */
|
|
8
3
|
export interface StageTypography {
|
|
9
|
-
/** CSS utility class applied to the stage/step name.
|
|
4
|
+
/** CSS utility class applied to the stage/step name. */
|
|
10
5
|
fontClassName?: string;
|
|
11
|
-
/** CSS utility class applied to expanded
|
|
6
|
+
/** CSS utility class applied to expanded content text elements (paragraphs, lists, blockquotes, links, table cells). */
|
|
12
7
|
contentClassName?: string;
|
|
13
|
-
/** CSS utility class applied to `<strong>` (bold markdown) inside expanded content.
|
|
8
|
+
/** CSS utility class applied to `<strong>` (bold markdown) inside expanded content. */
|
|
14
9
|
strongClassName?: string;
|
|
15
|
-
/** CSS utility class applied to every heading level (`h1`–`h6`) inside expanded content.
|
|
10
|
+
/** CSS utility class applied to every heading level (`h1`–`h6`) inside expanded content. */
|
|
16
11
|
headingClassName?: string;
|
|
17
|
-
/** CSS utility class applied to inline code elements.
|
|
12
|
+
/** CSS utility class applied to inline code elements. */
|
|
18
13
|
codeClassName?: string;
|
|
19
|
-
/**
|
|
20
|
-
fontFamily?: string;
|
|
21
|
-
/** CSS utility class applied to count badges (e.g. `×N` collapsed group). Defaults to `'dial-tiny-text'`. */
|
|
14
|
+
/** CSS utility class applied to count badges (e.g. `×N` collapsed group). */
|
|
22
15
|
countFontClassName?: string;
|
|
23
16
|
}
|
|
24
|
-
/**
|
|
25
|
-
* Color overrides for the `StagesPanel` component applied as CSS custom
|
|
26
|
-
* properties. The panel is an inline list (no card/border), so these only
|
|
27
|
-
* cover the row-level surface: per-row hover tint and text tones.
|
|
28
|
-
*/
|
|
17
|
+
/** CSS custom property color overrides for the `StagesPanel` component. */
|
|
29
18
|
export interface StagesPanelColors {
|
|
30
|
-
/** General text color. */
|
|
19
|
+
/** General text color. Defaults to `--text-primary`. */
|
|
31
20
|
text?: string;
|
|
32
21
|
/** Background tint on row hover. Defaults to `--bg-layer-2`. */
|
|
33
22
|
rowHoverColor?: string;
|
|
34
|
-
/**
|
|
35
|
-
* Text color applied to each stage name row.
|
|
36
|
-
* Defaults to the app's `--text-secondary` theme variable (`#9fa6bd`).
|
|
37
|
-
*/
|
|
23
|
+
/** Text color of each stage name. Defaults to `--text-secondary`. */
|
|
38
24
|
stageTextColor?: string;
|
|
39
|
-
/**
|
|
25
|
+
/** Text and icon color for a failed stage. Defaults to `--text-warning`. */
|
|
40
26
|
failedColor?: string;
|
|
27
|
+
/** Background color of the collapse button. Defaults to transparent. */
|
|
28
|
+
collapsedButtonBg?: string;
|
|
29
|
+
/** Text color of stage tag labels. Defaults to `--text-tertiary`. */
|
|
30
|
+
tagTextColor?: string;
|
|
31
|
+
/** Text color of the attempt count badge (e.g. `×N`). Defaults to `--text-tertiary`. */
|
|
32
|
+
countTextColor?: string;
|
|
33
|
+
/** Text color of the total-duration label. Defaults to `--text-tertiary`. */
|
|
34
|
+
durationTextColor?: string;
|
|
35
|
+
/** Color of secondary (non-status) icons. Defaults to `--text-secondary` at 70% opacity. */
|
|
36
|
+
iconSecondaryColor?: string;
|
|
37
|
+
/** Color of the completed-check icon. Defaults to `--text-tertiary`. */
|
|
38
|
+
iconCompletedColor?: string;
|
|
39
|
+
/** Color of the error/exception icon. Defaults to `--text-warning`. */
|
|
40
|
+
iconErrorColor?: string;
|
|
41
|
+
/** Background color of fenced code blocks and inline code. Defaults to `--bg-layer-raised`. */
|
|
42
|
+
codeBg?: string;
|
|
43
|
+
/** Border color of fenced code blocks and inline code. Defaults to `--stroke-secondary`. */
|
|
44
|
+
codeBorderColor?: string;
|
|
45
|
+
/** Text color inside code blocks. Defaults to `--text-primary`. */
|
|
46
|
+
codeTextColor?: string;
|
|
47
|
+
/** Border color used for table cells and blockquotes. Defaults to `--stroke-secondary`. */
|
|
48
|
+
borderColor?: string;
|
|
41
49
|
}
|
|
42
50
|
/** Combined style overrides (colors and typography) for the `StagesPanel` component. */
|
|
43
51
|
export interface StagesPanelStyles {
|
|
44
52
|
/** Color overrides applied as CSS custom properties. */
|
|
45
53
|
colors?: StagesPanelColors;
|
|
46
|
-
/** Typography applied to the stage name and expanded content.
|
|
54
|
+
/** Typography applied to the stage name and expanded content. */
|
|
47
55
|
typography?: StageTypography;
|
|
48
56
|
}
|
|
49
57
|
/** User-visible strings for the `StagesPanel` component. */
|
|
@@ -54,7 +62,7 @@ export interface StagesPanelLabels {
|
|
|
54
62
|
runningAriaLabel?: string;
|
|
55
63
|
/** Visually-hidden label announced alongside a failed stage's icon. Defaults to `'Failed'`. */
|
|
56
64
|
failedAriaLabel?: string;
|
|
57
|
-
/**
|
|
65
|
+
/** Label for a single attempt given its 1-based number. Defaults to `(n) => \`Attempt ${n}\``. */
|
|
58
66
|
attemptLabel?: (attemptNumber: number) => string;
|
|
59
67
|
}
|
|
60
68
|
/** Props accepted by the `StagesPanel` component. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stages-props.d.ts","sourceRoot":"","sources":["../../src/models/stages-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEvD
|
|
1
|
+
{"version":3,"file":"stages-props.d.ts","sourceRoot":"","sources":["../../src/models/stages-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEvD,gGAAgG;AAChG,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wHAAwH;IACxH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uFAAuF;IACvF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,2EAA2E;AAC3E,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wFAAwF;IACxF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4FAA4F;IAC5F,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+FAA+F;IAC/F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4FAA4F;IAC5F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wFAAwF;AACxF,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,iEAAiE;IACjE,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B;AAED,4DAA4D;AAC5D,MAAM,WAAW,iBAAiB;IAChC,0FAA0F;IAC1F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yFAAyF;IACzF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+FAA+F;IAC/F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kGAAkG;IAClG,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,CAAC;CAClD;AAED,qDAAqD;AACrD,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,2EAA2E;IAC3E,WAAW,EAAE,OAAO,CAAC;IACrB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,4BAA4B;IAC5B,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@epam/ai-dial-conversation-stages",
|
|
3
3
|
"description": "Panel for displaying agent processing stages during LLM response streaming",
|
|
4
|
-
"version": "1.1.0-dev.
|
|
4
|
+
"version": "1.1.0-dev.91",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./index.js",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": "^19.0.0",
|
|
21
21
|
"@tabler/icons-react": "^3.0.0",
|
|
22
|
-
"@epam/ai-dial-chat-shared": "1.1.0-dev.
|
|
23
|
-
"@epam/ai-dial-ui-kit": "0.
|
|
22
|
+
"@epam/ai-dial-chat-shared": "1.1.0-dev.91",
|
|
23
|
+
"@epam/ai-dial-ui-kit": "^0.13.0-dev.26"
|
|
24
24
|
},
|
|
25
25
|
"repository": {
|
|
26
26
|
"type": "git",
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import { Stage } from '@epam/ai-dial-chat-shared';
|
|
2
2
|
import { StageRow } from '../models/stage-grouping';
|
|
3
|
-
/**
|
|
4
|
-
* Collapses consecutive stages that share the same cleaned name into a
|
|
5
|
-
* single `×N` group row (expanding to the individual attempts); every other
|
|
6
|
-
* stage renders as its own row. Grouping is by cleaned name, not the raw
|
|
7
|
-
* backend string, so a name differing only by its embedded duration still
|
|
8
|
-
* groups correctly.
|
|
9
|
-
*/
|
|
3
|
+
/** Groups consecutive stages with the same cleaned name into a `×N` group row; all others render as single rows. */
|
|
10
4
|
export declare const groupStagesByName: (stages: Stage[]) => StageRow[];
|
|
11
5
|
//# sourceMappingURL=stage-grouping.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stage-grouping.d.ts","sourceRoot":"","sources":["../../src/utils/stage-grouping.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGpD
|
|
1
|
+
{"version":3,"file":"stage-grouping.d.ts","sourceRoot":"","sources":["../../src/utils/stage-grouping.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGpD,oHAAoH;AACpH,eAAO,MAAM,iBAAiB,GAAI,QAAQ,KAAK,EAAE,KAAG,QAAQ,EA+B3D,CAAC"}
|
package/utils/stage-name.d.ts
CHANGED
|
@@ -1,26 +1,17 @@
|
|
|
1
1
|
/** Result of cleaning a raw backend stage name for display. */
|
|
2
|
-
|
|
3
|
-
/** Display name with any duration/timestamp group and trailing colon removed.
|
|
2
|
+
interface CleanedStageName {
|
|
3
|
+
/** Display name with any duration/timestamp bracket group and trailing colon removed. */
|
|
4
4
|
name: string;
|
|
5
5
|
/** Extracted duration label (e.g. `'3.99s'`), or `undefined` if the raw name carried none. */
|
|
6
6
|
durationLabel?: string;
|
|
7
7
|
}
|
|
8
|
-
/**
|
|
9
|
-
* Cleans a raw backend stage name for display: extracts an embedded
|
|
10
|
-
* duration (discarding any accompanying timestamps, which have no
|
|
11
|
-
* structured home in the UI today) and strips a single trailing colon.
|
|
12
|
-
* Never re-cases or rewrites the remaining text.
|
|
13
|
-
*/
|
|
8
|
+
/** Strips an embedded duration bracket group (e.g. `(7.18s, ...)`) and a trailing colon from a raw backend stage name. */
|
|
14
9
|
export declare const cleanStageName: (rawName: string) => CleanedStageName;
|
|
15
|
-
/**
|
|
16
|
-
* Heuristic for "this cleaned name is a raw identifier, not prose":
|
|
17
|
-
* no whitespace and at least one underscore (e.g. `My_OMDB_Agent__0_0_1_tool`).
|
|
18
|
-
* Prose with an embedded identifier substring (e.g. `Call My_OMDB_Agent_tool`)
|
|
19
|
-
* still contains a space and is left as normal text.
|
|
20
|
-
*/
|
|
10
|
+
/** Returns true if the name looks like a raw identifier: no whitespace and contains an underscore. */
|
|
21
11
|
export declare const isIdentifierLike: (name: string) => boolean;
|
|
22
12
|
/** Formats a total duration in seconds as `'Xm Ys'` when >= 60s, otherwise `'X.Xs'`. */
|
|
23
13
|
export declare const formatTotalDuration: (totalSeconds: number) => string;
|
|
24
14
|
/** Parses a duration label produced by {@link cleanStageName} (e.g. `'3.99s'`) back into seconds. */
|
|
25
15
|
export declare const parseDurationSeconds: (durationLabel: string | undefined) => number | undefined;
|
|
16
|
+
export {};
|
|
26
17
|
//# sourceMappingURL=stage-name.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stage-name.d.ts","sourceRoot":"","sources":["../../src/utils/stage-name.ts"],"names":[],"mappings":"AAeA,+DAA+D;AAC/D,
|
|
1
|
+
{"version":3,"file":"stage-name.d.ts","sourceRoot":"","sources":["../../src/utils/stage-name.ts"],"names":[],"mappings":"AAeA,+DAA+D;AAC/D,UAAU,gBAAgB;IACxB,yFAAyF;IACzF,IAAI,EAAE,MAAM,CAAC;IACb,8FAA8F;IAC9F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,0HAA0H;AAC1H,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,KAAG,gBAkChD,CAAC;AAEF,sGAAsG;AACtG,eAAO,MAAM,gBAAgB,GAAI,MAAM,MAAM,KAAG,OACW,CAAC;AAE5D,wFAAwF;AACxF,eAAO,MAAM,mBAAmB,GAAI,cAAc,MAAM,KAAG,MAO1D,CAAC;AAEF,qGAAqG;AACrG,eAAO,MAAM,oBAAoB,GAC/B,eAAe,MAAM,GAAG,SAAS,KAChC,MAAM,GAAG,SAIX,CAAC"}
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import { Stage } from '@epam/ai-dial-chat-shared';
|
|
2
|
-
/**
|
|
3
|
-
* Finds the currently-executing stage while a run is streaming: the last
|
|
4
|
-
* entry with `status: null`. Returns `undefined` once every stage has
|
|
5
|
-
* settled (or the list is empty), even if the caller still reports
|
|
6
|
-
* `isStreaming: true` — a transitional state between the last stage settling
|
|
7
|
-
* and the stream closing.
|
|
8
|
-
*/
|
|
2
|
+
/** Returns the last stage with `status: null` (the currently executing stage), or `undefined` if none exists. */
|
|
9
3
|
export declare const findLiveStage: (stages: Stage[]) => Stage | undefined;
|
|
10
4
|
/** 1-based position of `stage` within `stages`, by its stable `index` field. */
|
|
11
5
|
export declare const stagePosition: (stages: Stage[], stage: Stage) => number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stage-progress.d.ts","sourceRoot":"","sources":["../../src/utils/stage-progress.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEvD
|
|
1
|
+
{"version":3,"file":"stage-progress.d.ts","sourceRoot":"","sources":["../../src/utils/stage-progress.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEvD,iHAAiH;AACjH,eAAO,MAAM,aAAa,GAAI,QAAQ,KAAK,EAAE,KAAG,KAAK,GAAG,SACK,CAAC;AAE9D,gFAAgF;AAChF,eAAO,MAAM,aAAa,GAAI,QAAQ,KAAK,EAAE,EAAE,OAAO,KAAK,KAAG,MACR,CAAC"}
|