@epam/ai-dial-conversation-stages 1.0.0-dev.513 → 1.0.0-dev.515

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 (4) hide show
  1. package/components/StageItem/StageItem.d.ts +1 -1
  2. package/components/StageItem/StageItem.d.ts.map +1 -1
  3. package/index.js +96 -96
  4. package/package.json +2 -2
package/components/StageItem/StageItem.d.ts CHANGED
@@ -11,7 +11,7 @@ interface Props {
11
11
  /** Accessible label for the copy button inside stage content. */
12
12
  copyAriaLabel?: string;
13
13
  }
14
- /** A single stage row — plain when no content, collapsible when content or attachments are present. */
14
+ /** A single stage row — plain when no content, collapsible when content is present. */
15
15
  export declare const StageItem: FC<Props>;
16
16
  export {};
17
17
  //# sourceMappingURL=StageItem.d.ts.map
package/components/StageItem/StageItem.d.ts.map CHANGED
@@ -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;AAOvD,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAKjE,UAAU,KAAK;IACb,gCAAgC;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,kEAAkE;IAClE,MAAM,EAAE,OAAO,CAAC;IAChB,+DAA+D;IAC/D,UAAU,EAAE,eAAe,CAAC;IAC5B,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,uGAAuG;AACvG,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,KAAK,CA6E/B,CAAC"}
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,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAKjE,UAAU,KAAK;IACb,gCAAgC;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,kEAAkE;IAClE,MAAM,EAAE,OAAO,CAAC;IAChB,+DAA+D;IAC/D,UAAU,EAAE,eAAe,CAAC;IAC5B,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,uFAAuF;AACvF,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,KAAK,CAyE/B,CAAC"}
package/index.js CHANGED
@@ -1,9 +1,9 @@
1
- import { MarkdownRenderer as e, StageStatus as t, buildCssVars as n, copyToClipboard as r, mergeClasses as i, messageAttachmentToDisplayAttachment as a } from "@epam/ai-dial-chat-shared";
2
- import { DIAL_ICON_SIZE as o, DialEllipsisTooltip as s, DialGhostIconButton as c, DialLinkButton as l, DialSpinner as u, ElementSize as d } from "@epam/ai-dial-ui-kit";
3
- import { IconAlertCircle as f, IconCheck as p, IconChevronDown as m, IconChevronRight as h, IconCircleCheck as g, IconCopy as _ } from "@tabler/icons-react";
4
- import { memo as v, useCallback as y, useEffect as b, useRef as x, useState as S } from "react";
5
- import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
6
- var E = {
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, DialGhostIconButton as s, DialLinkButton as c, DialSpinner as l, ElementSize as u } from "@epam/ai-dial-ui-kit";
3
+ import { IconAlertCircle as d, IconCheck as f, IconChevronDown as p, IconChevronRight as m, IconCircleCheck as h, IconCopy as g } from "@tabler/icons-react";
4
+ import { memo as _, useCallback as v, useEffect as y, useRef as b, useState as x } from "react";
5
+ import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
6
+ var T = {
7
7
  panel: "_panel_1e8hb_1",
8
8
  collapseButton: "_collapseButton_1e8hb_7",
9
9
  stageName: "_stageName_1e8hb_11",
@@ -13,86 +13,86 @@ var E = {
13
13
  codeInline: "_codeInline_1e8hb_29",
14
14
  blockquote: "_blockquote_1e8hb_34",
15
15
  tableCell: "_tableCell_1e8hb_39"
16
- }, D = ({ status: e, isLive: n }) => e ? e === t.Completed ? /* @__PURE__ */ w(g, {
17
- size: o.MD,
18
- className: E.iconSecondary
19
- }) : /* @__PURE__ */ w(f, {
20
- size: o.MD,
21
- className: E.iconSecondary
22
- }) : n ? /* @__PURE__ */ w(u, { size: 20 }) : /* @__PURE__ */ w(f, {
23
- size: o.MD,
24
- className: E.iconSecondary
25
- }), O = ({ children: e, codeClassName: t, copyAriaLabel: n }) => {
26
- let [a, s] = S(!1), l = x(null);
27
- b(() => () => {
16
+ }, E = ({ status: e, isLive: n }) => e ? e === t.Completed ? /* @__PURE__ */ C(h, {
17
+ size: a.MD,
18
+ className: T.iconSecondary
19
+ }) : /* @__PURE__ */ C(d, {
20
+ size: a.MD,
21
+ className: T.iconSecondary
22
+ }) : n ? /* @__PURE__ */ C(l, { size: 20 }) : /* @__PURE__ */ C(d, {
23
+ size: a.MD,
24
+ className: T.iconSecondary
25
+ }), D = ({ children: e, codeClassName: t, copyAriaLabel: n }) => {
26
+ let [o, c] = x(!1), l = b(null);
27
+ y(() => () => {
28
28
  l.current != null && clearTimeout(l.current);
29
29
  }, []);
30
- let u = y(() => {
31
- r(typeof e == "string" ? e : String(e ?? "")), l.current && clearTimeout(l.current), s(!0), l.current = setTimeout(() => s(!1), 2e3);
30
+ let d = v(() => {
31
+ r(typeof e == "string" ? e : String(e ?? "")), l.current && clearTimeout(l.current), c(!0), l.current = setTimeout(() => c(!1), 2e3);
32
32
  }, [e]);
33
- return /* @__PURE__ */ T("pre", {
34
- className: i("relative max-h-[300px] overflow-auto rounded border p-3 text-sm", E.codeBlock),
35
- children: [/* @__PURE__ */ w(c, {
36
- size: d.Small,
37
- icon: w(a ? p : _, {
38
- size: o.SM,
39
- className: E.iconSecondary
33
+ return /* @__PURE__ */ w("pre", {
34
+ className: i("relative max-h-[300px] overflow-auto rounded border p-3 text-sm", T.codeBlock),
35
+ children: [/* @__PURE__ */ C(s, {
36
+ size: u.Small,
37
+ icon: C(o ? f : g, {
38
+ size: a.SM,
39
+ className: T.iconSecondary
40
40
  }),
41
41
  "aria-label": n,
42
- onClick: u,
42
+ onClick: d,
43
43
  className: "absolute end-2 top-2"
44
- }), /* @__PURE__ */ w("code", {
44
+ }), /* @__PURE__ */ C("code", {
45
45
  className: i("font-mono", t),
46
46
  children: e
47
47
  })]
48
48
  });
49
- }, k = v(({ content: t, typography: n, copyAriaLabel: r = "Copy" }) => /* @__PURE__ */ w(e, {
49
+ }, O = _(({ content: t, typography: n, copyAriaLabel: r = "Copy" }) => /* @__PURE__ */ C(e, {
50
50
  content: t,
51
51
  classNames: {
52
- p: i(n.fontClassName, E.stageContent),
53
- ul: i(n.fontClassName, E.stageContent),
54
- ol: i(n.fontClassName, E.stageContent),
55
- codeInline: E.codeInline,
56
- blockquote: E.blockquote,
57
- link: E.stageContent,
58
- tableCell: E.tableCell
52
+ p: i(n.fontClassName, T.stageContent),
53
+ ul: i(n.fontClassName, T.stageContent),
54
+ ol: i(n.fontClassName, T.stageContent),
55
+ codeInline: T.codeInline,
56
+ blockquote: T.blockquote,
57
+ link: T.stageContent,
58
+ tableCell: T.tableCell
59
59
  },
60
- components: { code: ({ children: e, className: t }) => t?.includes("language-") ? /* @__PURE__ */ w(O, {
60
+ components: { code: ({ children: e, className: t }) => t?.includes("language-") ? /* @__PURE__ */ C(D, {
61
61
  codeClassName: t,
62
62
  copyAriaLabel: r,
63
63
  children: e
64
- }) : /* @__PURE__ */ w("code", {
65
- className: i("px-1 py-0.5", n.codeClassName ?? "rounded font-mono text-sm", E.codeInline),
64
+ }) : /* @__PURE__ */ C("code", {
65
+ className: i("px-1 py-0.5", n.codeClassName ?? "rounded font-mono text-sm", T.codeInline),
66
66
  children: e
67
67
  }) }
68
- })), A = ({ stage: e, isLive: t, typography: n, copyAriaLabel: r = "Copy stage content" }) => {
69
- let [c, l] = S(!1), u = /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w(D, {
68
+ })), k = ({ stage: e, isLive: t, typography: n, copyAriaLabel: r = "Copy stage content" }) => {
69
+ let [s, c] = x(!1), l = /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(E, {
70
70
  status: e.status,
71
71
  isLive: t
72
- }), /* @__PURE__ */ w("span", {
73
- className: i("min-w-0 flex-1 truncate capitalize", E.stageName),
74
- children: /* @__PURE__ */ w(s, { text: e.name || e.status })
75
- })] }), d = e.attachments?.map((e) => a(e)) ?? [];
76
- return e.content || d.length ? /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("button", {
72
+ }), /* @__PURE__ */ C("span", {
73
+ className: i("min-w-0 flex-1 truncate capitalize", T.stageName),
74
+ children: /* @__PURE__ */ C(o, { text: e.name || e.status })
75
+ })] });
76
+ return e.content ? /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ w("button", {
77
77
  type: "button",
78
- onClick: () => l((e) => !e),
79
- className: i("flex w-full cursor-pointer items-center gap-2 p-0", E.collapseButton),
80
- children: [u, c ? /* @__PURE__ */ w(m, {
81
- size: o.MD,
82
- className: E.iconSecondary
83
- }) : /* @__PURE__ */ w(h, {
84
- size: o.MD,
85
- className: i(E.iconSecondary, "rtl:scale-x-[-1]")
78
+ onClick: () => c((e) => !e),
79
+ className: i("flex w-full cursor-pointer items-center gap-2 p-0", T.collapseButton),
80
+ children: [l, s ? /* @__PURE__ */ C(p, {
81
+ size: a.MD,
82
+ className: T.iconSecondary
83
+ }) : /* @__PURE__ */ C(m, {
84
+ size: a.MD,
85
+ className: i(T.iconSecondary, "rtl:scale-x-[-1]")
86
86
  })]
87
- }), /* @__PURE__ */ w("div", {
88
- className: i("grid overflow-hidden transition-[grid-template-rows] duration-[250ms] ease-in-out", c ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
89
- children: /* @__PURE__ */ w("div", {
87
+ }), /* @__PURE__ */ C("div", {
88
+ className: i("grid overflow-hidden transition-[grid-template-rows] duration-[250ms] ease-in-out", s ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
89
+ children: /* @__PURE__ */ C("div", {
90
90
  className: "overflow-hidden",
91
- children: /* @__PURE__ */ w("div", {
91
+ children: /* @__PURE__ */ C("div", {
92
92
  className: "mt-3 flex flex-col gap-3 ps-7",
93
- children: e.content && /* @__PURE__ */ w("div", {
93
+ children: e.content && /* @__PURE__ */ C("div", {
94
94
  className: "max-h-[300px] overflow-y-auto",
95
- children: /* @__PURE__ */ w(k, {
95
+ children: /* @__PURE__ */ C(O, {
96
96
  content: e.content,
97
97
  typography: n,
98
98
  copyAriaLabel: r
@@ -100,11 +100,11 @@ var E = {
100
100
  })
101
101
  })
102
102
  })
103
- })] }) : /* @__PURE__ */ w("div", {
103
+ })] }) : /* @__PURE__ */ C("div", {
104
104
  className: "flex items-center gap-2",
105
- children: u
105
+ children: l
106
106
  });
107
- }, j = ({ stages: e, isStreaming: t, className: r, styles: a, labels: o }) => {
107
+ }, A = ({ stages: e, isStreaming: t, className: r, styles: a, labels: o }) => {
108
108
  let { colors: s, typography: c = { fontClassName: "dial-small-text" } } = a ?? {}, { copyAriaLabel: l } = o ?? {}, u = n({
109
109
  "--cs-bg": s?.background,
110
110
  "--cs-border": s?.border,
@@ -115,16 +115,16 @@ var E = {
115
115
  "--cs-failed": s?.failedColor,
116
116
  "--cs-button-bg": s?.buttonBackground
117
117
  }), d = t ? e.reduce((e, t, n) => t.status ? e : n, -1) : -1;
118
- return /* @__PURE__ */ w("div", {
118
+ return /* @__PURE__ */ C("div", {
119
119
  style: u,
120
- className: i("w-full", E.panel, r),
121
- children: /* @__PURE__ */ w("ul", {
120
+ className: i("w-full", T.panel, r),
121
+ children: /* @__PURE__ */ C("ul", {
122
122
  role: "list",
123
123
  className: "flex w-full flex-col gap-4",
124
- children: e.map((e, t) => /* @__PURE__ */ w("li", {
124
+ children: e.map((e, t) => /* @__PURE__ */ C("li", {
125
125
  role: "listitem",
126
126
  className: i("w-full", c.fontClassName),
127
- children: /* @__PURE__ */ w(A, {
127
+ children: /* @__PURE__ */ C(k, {
128
128
  stage: e,
129
129
  isLive: d === t,
130
130
  typography: c,
@@ -133,13 +133,13 @@ var E = {
133
133
  }, e.index))
134
134
  })
135
135
  });
136
- }, M = {
136
+ }, j = {
137
137
  toggleButton: "_toggleButton_1rkek_1",
138
138
  stepsCount: "_stepsCount_1rkek_8",
139
139
  contentBox: "_contentBox_1rkek_12"
140
- }, N = ({ stages: e, isStreaming: r, labels: a, collapseThreshold: s = 7, className: c, styles: u }) => {
141
- let { executedLabel: d = "Executed", stepsLabel: f = () => "steps" } = a ?? {}, [g, _] = S(!1);
142
- if (r) return /* @__PURE__ */ w(j, {
140
+ }, M = ({ stages: e, isStreaming: r, labels: o, collapseThreshold: s = 7, className: l, styles: u }) => {
141
+ let { executedLabel: d = "Executed", stepsLabel: h = () => "steps" } = o ?? {}, [g, _] = x(!1);
142
+ if (r) return /* @__PURE__ */ C(A, {
143
143
  stages: e,
144
144
  isStreaming: !0
145
145
  });
@@ -149,54 +149,54 @@ var E = {
149
149
  "--cs-cg-steps-count": v?.stepsCountColor,
150
150
  "--cs-cg-border": v?.contentBorderColor
151
151
  });
152
- if (e.length < s) return /* @__PURE__ */ w("div", {
152
+ if (e.length < s) return /* @__PURE__ */ C("div", {
153
153
  style: b,
154
- className: i("flex w-full flex-col gap-1", c),
155
- children: /* @__PURE__ */ w(j, {
154
+ className: i("flex w-full flex-col gap-1", l),
155
+ children: /* @__PURE__ */ C(A, {
156
156
  stages: e,
157
157
  isStreaming: !1
158
158
  })
159
159
  });
160
- let x = e.filter((e) => e.status === t.Completed), E = e.filter((e) => e.status !== t.Completed);
161
- return /* @__PURE__ */ T("div", {
160
+ let T = e.filter((e) => e.status === t.Completed), E = e.filter((e) => e.status !== t.Completed);
161
+ return /* @__PURE__ */ w("div", {
162
162
  style: b,
163
- className: i("flex w-full flex-col gap-1", c),
164
- children: [x.length > 0 && /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w(l, {
165
- className: M.toggleButton,
163
+ className: i("flex w-full flex-col gap-1", l),
164
+ children: [T.length > 0 && /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(c, {
165
+ className: j.toggleButton,
166
166
  onClick: () => _((e) => !e),
167
- iconBefore: /* @__PURE__ */ w(p, { size: o.SM }),
168
- iconAfter: g ? /* @__PURE__ */ w(m, { size: 12 }) : /* @__PURE__ */ w(h, {
167
+ iconBefore: /* @__PURE__ */ C(f, { size: a.SM }),
168
+ iconAfter: g ? /* @__PURE__ */ C(p, { size: 12 }) : /* @__PURE__ */ C(m, {
169
169
  size: 12,
170
170
  className: "rtl:scale-x-[-1]"
171
171
  }),
172
- label: /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w("span", {
172
+ label: /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("span", {
173
173
  className: i(y.fontClassName, "pe-1"),
174
174
  children: d
175
- }), /* @__PURE__ */ T("span", {
176
- className: i(y.fontClassName, M.stepsCount),
175
+ }), /* @__PURE__ */ w("span", {
176
+ className: i(y.fontClassName, j.stepsCount),
177
177
  children: [
178
- x.length,
178
+ T.length,
179
179
  " ",
180
- f(x.length)
180
+ h(T.length)
181
181
  ]
182
182
  })] })
183
- }), /* @__PURE__ */ w("div", {
183
+ }), /* @__PURE__ */ C("div", {
184
184
  className: i("grid pt-1 transition-[grid-template-rows] duration-300 ease-in-out", g ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
185
- children: /* @__PURE__ */ w("div", {
185
+ children: /* @__PURE__ */ C("div", {
186
186
  className: "overflow-hidden",
187
- children: /* @__PURE__ */ w("div", {
188
- className: i("rounded border px-2 py-3", M.contentBox),
189
- children: /* @__PURE__ */ w(j, {
190
- stages: x,
187
+ children: /* @__PURE__ */ C("div", {
188
+ className: i("rounded border px-2 py-3", j.contentBox),
189
+ children: /* @__PURE__ */ C(A, {
190
+ stages: T,
191
191
  isStreaming: !1
192
192
  })
193
193
  })
194
194
  })
195
- })] }), E.length > 0 && /* @__PURE__ */ w(j, {
195
+ })] }), E.length > 0 && /* @__PURE__ */ C(A, {
196
196
  stages: E,
197
197
  isStreaming: !1
198
198
  })]
199
199
  });
200
200
  };
201
201
  //#endregion
202
- export { N as CollapsedGroup, j as StagesPanel };
202
+ export { M as CollapsedGroup, A as StagesPanel };
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.0.0-dev.513",
4
+ "version": "1.0.0-dev.515",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -19,7 +19,7 @@
19
19
  "peerDependencies": {
20
20
  "react": "^19.0.0",
21
21
  "@tabler/icons-react": "^3.0.0",
22
- "@epam/ai-dial-chat-shared": "1.0.0-dev.513",
22
+ "@epam/ai-dial-chat-shared": "1.0.0-dev.515",
23
23
  "@epam/ai-dial-ui-kit": "0.12.0-dev.28"
24
24
  },
25
25
  "repository": {