@epam/ai-dial-conversation-messages 1.2.0-dev.208 → 1.2.0-dev.209

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 (6) hide show
  1. package/components/MessageBubble/AssistantMessageBubble.d.ts.map +1 -1
  2. package/components/MessageBubble/UserMessageBubble.d.ts.map +1 -1
  3. package/index.js +219 -162
  4. package/package.json +4 -4
  5. package/utils/clipboard.d.ts +11 -0
  6. package/utils/clipboard.d.ts.map +1 -0
package/components/MessageBubble/AssistantMessageBubble.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AssistantMessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble/AssistantMessageBubble.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAY/E,gHAAgH;AAChH,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAsNlE,CAAC"}
1
+ {"version":3,"file":"AssistantMessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble/AssistantMessageBubble.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAa/E,gHAAgH;AAChH,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAuNlE,CAAC"}
package/components/MessageBubble/UserMessageBubble.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UserMessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble/UserMessageBubble.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,EAAE,EAAS,MAAM,OAAO,CAAC;AAElC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAO1E,kGAAkG;AAClG,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA+JxD,CAAC"}
1
+ {"version":3,"file":"UserMessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble/UserMessageBubble.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,EAAE,EAAS,MAAM,OAAO,CAAC;AAElC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAQ1E,kGAAkG;AAClG,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAgKxD,CAAC"}
package/index.js CHANGED
@@ -1,16 +1,16 @@
1
1
  import { AttachmentType as e, CopyIconButton as t, DeploymentIcon as n, MDMessageViewer as r, MessageRating as i, MessageRole as a, ResponseFormat as o, buildCssVars as s, mergeClasses as c, useCollapsedText as l } from "@epam/ai-dial-chat-shared";
2
2
  import { AttachmentGroup as u } from "@epam/ai-dial-attachment-input";
3
3
  import { Button as d, ButtonVariant as f, DIAL_ICON_SIZE as p, DIAL_KIT_ICON_STROKE as m, ElementSize as h, InfoMessageNotification as g, LinkButton as _, NeutralButton as v, ToggleIconButton as y } from "@epam/ai-dial-ui-kit";
4
- import { useCallback as b, useEffect as x, useId as S, useLayoutEffect as C, useMemo as w, useRef as T, useState as E } from "react";
5
- import { IconArrowBackUp as D, IconChevronDown as O, IconChevronUp as k, IconMarkdown as A, IconPencilMinus as ee, IconRefresh as j, IconThumbDown as M, IconThumbDownFilled as N, IconThumbUp as P, IconThumbUpFilled as F, IconTrashX as te } from "@tabler/icons-react";
6
- import { Fragment as I, jsx as L, jsxs as R } from "react/jsx-runtime";
7
- import { createPortal as z } from "react-dom";
4
+ import { useCallback as b, useEffect as x, useId as S, useLayoutEffect as C, useMemo as ee, useRef as w, useState as T } from "react";
5
+ import { IconArrowBackUp as E, IconChevronDown as D, IconChevronUp as O, IconMarkdown as k, IconPencilMinus as te, IconRefresh as ne, IconThumbDown as A, IconThumbDownFilled as j, IconThumbUp as M, IconThumbUpFilled as N, IconTrashX as P } from "@tabler/icons-react";
6
+ import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";
7
+ import { createPortal as R } from "react-dom";
8
8
  //#region src/constants/public-class-names.ts
9
- var B = {
9
+ var z = {
10
10
  userBubble: "dial-cm-user-bubble",
11
11
  assistantContent: "dial-cm-assistant-content"
12
- }, V = 4, H = (e) => {
13
- let t = T(null), [n, r] = E(0);
12
+ }, B = 4, V = (e) => {
13
+ let t = w(null), [n, r] = T(0);
14
14
  return x(() => {
15
15
  if (!e) return;
16
16
  let n = t.current;
@@ -22,220 +22,276 @@ var B = {
22
22
  return i.observe(n), () => i.disconnect();
23
23
  }, [e]), {
24
24
  slotRef: t,
25
- firstLineIndent: e ? `calc(${n}px + ${V}px)` : void 0
25
+ firstLineIndent: e ? `calc(${n}px + ${B}px)` : void 0
26
26
  };
27
- }, U = { activeRating: "_activeRating_ygoee_1" }, W = 2e3, G = ({ role: e = a.User, onEdit: n, onEditHover: r, onDelete: o, onRegenerate: l, onCopy: u, onCopyMarkdown: d, onLike: f, onDislike: g, activeRating: _, isAlwaysVisible: v, isDisabled: x = !1, className: S, labels: C, colors: w }) => {
28
- let { tooltips: T, ariaLabels: D } = C ?? {}, [O, k] = E(null), [z, B] = E(""), V = n != null || o != null || l != null || u != null || d != null || f != null || g != null, H = s({ "--ma-active-rating-text": w?.activeRatingText }), G = b(() => {
29
- u?.(), k("copy"), B(D?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => k(null), W);
30
- }, [u, D?.copiedStatus]), K = b(() => {
31
- d?.(), k("markdown"), B(D?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => k(null), W);
32
- }, [d, D?.copiedMarkdownStatus]);
33
- return V ? /* @__PURE__ */ R("div", {
27
+ }, H = [
28
+ "href",
29
+ "src",
30
+ "alt",
31
+ "colspan",
32
+ "rowspan",
33
+ "start"
34
+ ], U = new Set([
35
+ "pre",
36
+ "pre-wrap",
37
+ "pre-line",
38
+ "break-spaces"
39
+ ]), W = (e) => {
40
+ let t = document.createElement(e.tagName.toLowerCase());
41
+ H.forEach((n) => {
42
+ let r = e.getAttribute(n);
43
+ r !== null && t.setAttribute(n, r);
44
+ });
45
+ let { whiteSpace: n } = window.getComputedStyle(e);
46
+ return U.has(n) && (t.style.whiteSpace = "pre-wrap"), t;
47
+ }, re = (e) => e instanceof SVGElement || window.getComputedStyle(e).display === "none", G = (e, t) => {
48
+ if (!t.intersectsNode(e)) return null;
49
+ if (e.nodeType === Node.TEXT_NODE) {
50
+ let n = e.data, r = e === t.startContainer ? t.startOffset : 0, i = e === t.endContainer ? t.endOffset : n.length;
51
+ return document.createTextNode(n.slice(r, i));
52
+ }
53
+ if (!(e instanceof Element) || re(e)) return null;
54
+ let n = W(e);
55
+ return e.childNodes.forEach((e) => {
56
+ let r = G(e, t);
57
+ r && n.appendChild(r);
58
+ }), n;
59
+ }, K = (e, t, n) => {
60
+ let r = e, i = t;
61
+ for (; i && i !== n && n.contains(i);) {
62
+ let e = W(i);
63
+ e.appendChild(r), r = e, i = i.parentElement;
64
+ }
65
+ return r;
66
+ }, q = (e, t) => {
67
+ let n = e.commonAncestorContainer, r = n instanceof Element ? n : n.parentElement;
68
+ if (!r) return null;
69
+ let i = G(r, e);
70
+ return i ? K(i, r.parentElement, t) : null;
71
+ }, ie = (e) => {
72
+ let t = window.getSelection();
73
+ if (!t || t.isCollapsed || t.rangeCount === 0 || !e.clipboardData) return;
74
+ let n = t.toString();
75
+ if (!n) return;
76
+ let r = document.createElement("div");
77
+ for (let n = 0; n < t.rangeCount; n++) {
78
+ let i = q(t.getRangeAt(n), e.currentTarget);
79
+ i && r.appendChild(i);
80
+ }
81
+ e.clipboardData.setData("text/html", r.innerHTML), e.clipboardData.setData("text/plain", n), e.preventDefault();
82
+ }, J = { activeRating: "_activeRating_ygoee_1" }, Y = 2e3, ae = ({ role: e = a.User, onEdit: n, onEditHover: r, onDelete: o, onRegenerate: l, onCopy: u, onCopyMarkdown: d, onLike: f, onDislike: g, activeRating: _, isAlwaysVisible: v, isDisabled: x = !1, className: S, labels: C, colors: ee }) => {
83
+ let { tooltips: w, ariaLabels: E } = C ?? {}, [D, O] = T(null), [R, z] = T(""), B = n != null || o != null || l != null || u != null || d != null || f != null || g != null, V = s({ "--ma-active-rating-text": ee?.activeRatingText }), H = b(() => {
84
+ u?.(), O("copy"), z(E?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => O(null), Y);
85
+ }, [u, E?.copiedStatus]), U = b(() => {
86
+ d?.(), O("markdown"), z(E?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => O(null), Y);
87
+ }, [d, E?.copiedMarkdownStatus]);
88
+ return B ? /* @__PURE__ */ L("div", {
34
89
  role: "toolbar",
35
- "aria-label": D?.actionsGroup ?? "Message actions",
36
- style: H,
90
+ "aria-label": E?.actionsGroup ?? "Message actions",
91
+ style: V,
37
92
  className: c("flex gap-1", !v && "opacity-0 group-hover:opacity-100", S),
38
- children: [/* @__PURE__ */ L("span", {
93
+ children: [/* @__PURE__ */ I("span", {
39
94
  role: "status",
40
95
  "aria-live": "polite",
41
96
  className: "sr-only",
42
- children: z
43
- }), e === a.User ? /* @__PURE__ */ R(I, { children: [n && /* @__PURE__ */ L(y, {
44
- icon: /* @__PURE__ */ L(ee, {
97
+ children: R
98
+ }), e === a.User ? /* @__PURE__ */ L(F, { children: [n && /* @__PURE__ */ I(y, {
99
+ icon: /* @__PURE__ */ I(te, {
45
100
  size: p.SM,
46
101
  "aria-hidden": !0,
47
102
  stroke: m
48
103
  }),
49
104
  size: h.Small,
50
- "aria-label": D?.editMessage ?? "Edit message",
51
- tooltipProps: { tooltip: T?.edit ?? "Edit" },
105
+ "aria-label": E?.editMessage ?? "Edit message",
106
+ tooltipProps: { tooltip: w?.edit ?? "Edit" },
52
107
  onClick: n,
53
108
  onMouseEnter: r,
54
109
  onFocus: r,
55
110
  disabled: x
56
- }), o && /* @__PURE__ */ L(y, {
57
- icon: /* @__PURE__ */ L(te, {
111
+ }), o && /* @__PURE__ */ I(y, {
112
+ icon: /* @__PURE__ */ I(P, {
58
113
  size: p.SM,
59
114
  "aria-hidden": !0,
60
115
  stroke: m
61
116
  }),
62
117
  size: h.Small,
63
- "aria-label": D?.deleteMessage ?? "Delete message",
64
- tooltipProps: { tooltip: T?.delete ?? "Delete" },
118
+ "aria-label": E?.deleteMessage ?? "Delete message",
119
+ tooltipProps: { tooltip: w?.delete ?? "Delete" },
65
120
  onClick: o,
66
121
  disabled: x
67
- })] }) : /* @__PURE__ */ R(I, { children: [
68
- l && /* @__PURE__ */ L(y, {
69
- icon: /* @__PURE__ */ L(j, {
122
+ })] }) : /* @__PURE__ */ L(F, { children: [
123
+ l && /* @__PURE__ */ I(y, {
124
+ icon: /* @__PURE__ */ I(ne, {
70
125
  size: p.SM,
71
126
  "aria-hidden": !0,
72
127
  stroke: m
73
128
  }),
74
129
  size: h.Small,
75
- "aria-label": D?.regenerateResponse ?? "Regenerate response",
76
- tooltipProps: { tooltip: T?.regenerate ?? "Regenerate" },
130
+ "aria-label": E?.regenerateResponse ?? "Regenerate response",
131
+ tooltipProps: { tooltip: w?.regenerate ?? "Regenerate" },
77
132
  onClick: l,
78
133
  disabled: x
79
134
  }),
80
- u && /* @__PURE__ */ L(t, {
135
+ u && /* @__PURE__ */ I(t, {
81
136
  iconSize: p.SM,
82
- onClick: G,
137
+ onClick: H,
83
138
  size: h.Small,
84
- isCopied: O === "copy",
85
- copyLabel: T?.copy ?? "Copy",
86
- copiedLabel: T?.copied ?? "Copied!",
87
- ariaLabel: D?.copyResponse ?? "Copy response",
139
+ isCopied: D === "copy",
140
+ copyLabel: w?.copy ?? "Copy",
141
+ copiedLabel: w?.copied ?? "Copied!",
142
+ ariaLabel: E?.copyResponse ?? "Copy response",
88
143
  isDisabled: x
89
144
  }),
90
- d && /* @__PURE__ */ L(t, {
145
+ d && /* @__PURE__ */ I(t, {
91
146
  iconSize: p.SM,
92
- onClick: K,
147
+ onClick: U,
93
148
  size: h.Small,
94
- isCopied: O === "markdown",
95
- iconCopy: /* @__PURE__ */ L(A, {
149
+ isCopied: D === "markdown",
150
+ iconCopy: /* @__PURE__ */ I(k, {
96
151
  size: p.SM,
97
152
  "aria-hidden": !0,
98
153
  stroke: m
99
154
  }),
100
- copyLabel: T?.copyMarkdown ?? "Copy as Markdown",
101
- copiedLabel: T?.copiedMarkdown ?? "Copied!",
102
- ariaLabel: D?.copyAsMarkdown ?? "Copy as markdown",
155
+ copyLabel: w?.copyMarkdown ?? "Copy as Markdown",
156
+ copiedLabel: w?.copiedMarkdown ?? "Copied!",
157
+ ariaLabel: E?.copyAsMarkdown ?? "Copy as markdown",
103
158
  isDisabled: x
104
159
  }),
105
- f && /* @__PURE__ */ L(y, {
106
- icon: _ === i.Like ? /* @__PURE__ */ L(F, {
107
- className: U.activeRating,
160
+ f && /* @__PURE__ */ I(y, {
161
+ icon: _ === i.Like ? /* @__PURE__ */ I(N, {
162
+ className: J.activeRating,
108
163
  size: p.SM,
109
164
  "aria-hidden": !0
110
- }) : /* @__PURE__ */ L(P, {
165
+ }) : /* @__PURE__ */ I(M, {
111
166
  size: p.SM,
112
167
  "aria-hidden": !0,
113
168
  stroke: m
114
169
  }),
115
170
  size: h.Small,
116
- "aria-label": D?.likeResponse ?? "Like response",
171
+ "aria-label": E?.likeResponse ?? "Like response",
117
172
  "aria-pressed": _ === i.Like,
118
- tooltipProps: { tooltip: T?.like ?? "Like" },
173
+ tooltipProps: { tooltip: w?.like ?? "Like" },
119
174
  onClick: f,
120
175
  disabled: x
121
176
  }),
122
- g && /* @__PURE__ */ L(y, {
123
- icon: _ === i.Dislike ? /* @__PURE__ */ L(N, {
124
- className: U.activeRating,
177
+ g && /* @__PURE__ */ I(y, {
178
+ icon: _ === i.Dislike ? /* @__PURE__ */ I(j, {
179
+ className: J.activeRating,
125
180
  size: p.SM,
126
181
  "aria-hidden": !0
127
- }) : /* @__PURE__ */ L(M, {
182
+ }) : /* @__PURE__ */ I(A, {
128
183
  size: p.SM,
129
184
  "aria-hidden": !0,
130
185
  stroke: m
131
186
  }),
132
187
  size: h.Small,
133
- "aria-label": D?.dislikeResponse ?? "Dislike response",
188
+ "aria-label": E?.dislikeResponse ?? "Dislike response",
134
189
  "aria-pressed": _ === i.Dislike,
135
- tooltipProps: { tooltip: T?.dislike ?? "Dislike" },
190
+ tooltipProps: { tooltip: w?.dislike ?? "Dislike" },
136
191
  onClick: g,
137
192
  disabled: x
138
193
  })
139
194
  ] })]
140
195
  }) : null;
141
- }, K = {
196
+ }, X = {
142
197
  userBubble: "_userBubble_cq829_1",
143
198
  collapsibleText: "_collapsibleText_cq829_6",
144
199
  expandedText: "_expandedText_cq829_11",
145
200
  collapsedText: "_collapsedText_cq829_15",
146
201
  startersDivider: "_startersDivider_cq829_26",
147
202
  text: "_text_cq829_30"
148
- }, ne = "[&>.cm-bubble-markdown>div>*:first-child]:indent-[var(--cm-bubble-first-line-indent,0px)]", q = ({ text: t, contentRef: i, styles: l, actions: d, hasAlwaysVisibleActions: f, isStreaming: p, attachments: m, beforeContent: h, responseFormat: g, afterContent: _, starters: y, onSelectStarter: b, deploymentIconUrl: x, deploymentDisplayName: S, markdownComponents: C, markdownClassNames: T, markdownUrlTransform: E, onAttachmentClick: D, onDownloadAll: O, onAttachmentRetry: k, codeBlockTheme: A, tableOnOpenInCanvas: ee, labels: j, selectedAttachmentId: M }) => {
149
- let { colors: N, typography: P, className: F, bubbleClassName: te } = l ?? {}, { attachmentClickLabel: I, attachmentRetryLabel: z, attachmentOpenInNewTabLabel: V, startersAriaLabel: U = "Quick reply buttons", thinkingLabel: W, codeBlockCopyLabel: q, codeBlockCopiedLabel: J, tableCopyLabel: Y, tableCopiedLabel: X, tableDownloadCsvLabel: Z, tableOpenInCanvasLabel: Q, tableDownloadFilename: $, tableScrollRegionAriaLabel: re, assistantMessageAriaLabel: ie = "Assistant message", deploymentIconFallbackLabel: ae = "AI" } = j ?? {}, oe = w(() => ({
150
- copyLabel: Y,
151
- copiedLabel: X,
152
- downloadCsvLabel: Z,
153
- openInCanvasLabel: Q
203
+ }, oe = "[&>.cm-bubble-markdown>div>*:first-child]:indent-[var(--cm-bubble-first-line-indent,0px)]", Z = ({ text: t, contentRef: i, styles: l, actions: d, hasAlwaysVisibleActions: f, isStreaming: p, attachments: m, beforeContent: h, responseFormat: g, afterContent: _, starters: y, onSelectStarter: b, deploymentIconUrl: x, deploymentDisplayName: S, markdownComponents: C, markdownClassNames: w, markdownUrlTransform: T, onAttachmentClick: E, onDownloadAll: D, onAttachmentRetry: O, codeBlockTheme: k, tableOnOpenInCanvas: te, labels: ne, selectedAttachmentId: A }) => {
204
+ let { colors: j, typography: M, className: N, bubbleClassName: P } = l ?? {}, { attachmentClickLabel: F, attachmentRetryLabel: R, attachmentOpenInNewTabLabel: B, startersAriaLabel: H = "Quick reply buttons", thinkingLabel: U, codeBlockCopyLabel: W, codeBlockCopiedLabel: re, tableCopyLabel: G, tableCopiedLabel: K, tableDownloadCsvLabel: q, tableOpenInCanvasLabel: J, tableDownloadFilename: Y, tableScrollRegionAriaLabel: Z, assistantMessageAriaLabel: Q = "Assistant message", deploymentIconFallbackLabel: $ = "AI" } = ne ?? {}, se = ee(() => ({
205
+ copyLabel: G,
206
+ copiedLabel: K,
207
+ downloadCsvLabel: q,
208
+ openInCanvasLabel: J
154
209
  }), [
155
- Y,
156
- X,
157
- Z,
158
- Q
159
- ]), se = p ? (m ?? []).filter((t) => t.type !== e.Audio) : m ?? [], { slotRef: ce, firstLineIndent: le } = H(h != null && !!t), ue = s({
160
- "--cm-bubble-text": N?.text,
161
- "--cm-starters-divider": N?.startersDivider,
162
- "--cm-bubble-first-line-indent": le
163
- }), de = c(K.text, P?.fontClassName), fe = !!(x || S);
164
- return /* @__PURE__ */ R("div", {
210
+ G,
211
+ K,
212
+ q,
213
+ J
214
+ ]), ce = p ? (m ?? []).filter((t) => t.type !== e.Audio) : m ?? [], { slotRef: le, firstLineIndent: ue } = V(h != null && !!t), de = s({
215
+ "--cm-bubble-text": j?.text,
216
+ "--cm-starters-divider": j?.startersDivider,
217
+ "--cm-bubble-first-line-indent": ue
218
+ }), fe = c(X.text, M?.fontClassName), pe = !!(x || S);
219
+ return /* @__PURE__ */ L("div", {
165
220
  role: "group",
166
- "aria-label": ie,
167
- style: ue,
168
- className: c("flex w-full items-start gap-3", F),
169
- children: [fe && /* @__PURE__ */ L(n, {
221
+ "aria-label": Q,
222
+ style: de,
223
+ onCopy: ie,
224
+ className: c("flex w-full items-start gap-3", N),
225
+ children: [pe && /* @__PURE__ */ I(n, {
170
226
  src: x,
171
227
  size: 28,
172
- initialsName: S || ae,
173
- labels: { tooltip: S ?? ae }
174
- }), /* @__PURE__ */ R("div", {
228
+ initialsName: S || $,
229
+ labels: { tooltip: S ?? $ }
230
+ }), /* @__PURE__ */ L("div", {
175
231
  className: "flex w-full min-w-0 max-w-full flex-col items-start gap-5",
176
- children: [/* @__PURE__ */ R("div", {
177
- className: c("flex w-full min-w-0 max-w-full flex-col items-start gap-4", te),
232
+ children: [/* @__PURE__ */ L("div", {
233
+ className: c("flex w-full min-w-0 max-w-full flex-col items-start gap-4", P),
178
234
  children: [
179
- h != null && !t && /* @__PURE__ */ L("div", {
235
+ h != null && !t && /* @__PURE__ */ I("div", {
180
236
  className: "min-w-0",
181
237
  children: h
182
238
  }),
183
- (t || p) && /* @__PURE__ */ R("div", {
239
+ (t || p) && /* @__PURE__ */ L("div", {
184
240
  "aria-live": "polite",
185
241
  "aria-atomic": "false",
186
- className: c(de, "relative min-w-0 max-w-full text-start", h != null && t && ne, B.assistantContent),
187
- children: [h != null && t && /* @__PURE__ */ L("div", {
188
- ref: ce,
242
+ className: c(fe, "relative min-w-0 max-w-full text-start", h != null && t && oe, z.assistantContent),
243
+ children: [h != null && t && /* @__PURE__ */ I("div", {
244
+ ref: le,
189
245
  className: "absolute start-0 top-0",
190
246
  children: h
191
- }), /* @__PURE__ */ L("div", {
247
+ }), /* @__PURE__ */ I("div", {
192
248
  ref: i,
193
249
  className: "cm-bubble-markdown min-w-0 max-w-full",
194
- children: /* @__PURE__ */ L(r, {
250
+ children: /* @__PURE__ */ I(r, {
195
251
  content: t ?? "",
196
252
  isPlainText: g === o.PlainText,
197
253
  isStreaming: p,
198
- thinkingLabel: W,
254
+ thinkingLabel: U,
199
255
  components: C,
200
- classNames: T,
201
- urlTransform: E,
202
- codeBlockCopyLabel: q,
203
- codeBlockCopiedLabel: J,
204
- codeBlockTheme: A,
205
- tableActionLabels: oe,
206
- tableDownloadFilename: $,
207
- tableOnOpenInCanvas: ee,
208
- tableScrollRegionAriaLabel: re
256
+ classNames: w,
257
+ urlTransform: T,
258
+ codeBlockCopyLabel: W,
259
+ codeBlockCopiedLabel: re,
260
+ codeBlockTheme: k,
261
+ tableActionLabels: se,
262
+ tableDownloadFilename: Y,
263
+ tableOnOpenInCanvas: te,
264
+ tableScrollRegionAriaLabel: Z
209
265
  })
210
266
  })]
211
267
  }),
212
- /* @__PURE__ */ L(u, {
213
- attachments: se,
214
- onAttachmentClick: (e) => D?.(m?.find((t) => t.id === e)),
215
- onDownloadAll: O,
216
- onRetry: k,
268
+ /* @__PURE__ */ I(u, {
269
+ attachments: ce,
270
+ onAttachmentClick: (e) => E?.(m?.find((t) => t.id === e)),
271
+ onDownloadAll: D,
272
+ onRetry: O,
217
273
  labels: {
218
- clickLabel: I,
219
- retryLabel: z,
220
- openInNewTabLabel: V
274
+ clickLabel: F,
275
+ retryLabel: R,
276
+ openInNewTabLabel: B
221
277
  },
222
- selectedAttachmentId: M
278
+ selectedAttachmentId: A
223
279
  }),
224
280
  _,
225
- /* @__PURE__ */ L(G, {
281
+ /* @__PURE__ */ I(ae, {
226
282
  ...d,
227
283
  isAlwaysVisible: f,
228
284
  role: a.Assistant
229
285
  })
230
286
  ]
231
- }), y && y.length > 0 && b && /* @__PURE__ */ L("div", {
287
+ }), y && y.length > 0 && b && /* @__PURE__ */ I("div", {
232
288
  role: "list",
233
- "aria-label": U,
234
- className: c("flex w-full flex-wrap gap-2 border-t pt-5", K.startersDivider),
235
- children: y.map((e, t) => /* @__PURE__ */ L("div", {
289
+ "aria-label": H,
290
+ className: c("flex w-full flex-wrap gap-2 border-t pt-5", X.startersDivider),
291
+ children: y.map((e, t) => /* @__PURE__ */ I("div", {
236
292
  role: "listitem",
237
293
  className: "min-w-[40px]",
238
- children: /* @__PURE__ */ L(v, {
294
+ children: /* @__PURE__ */ I(v, {
239
295
  label: e.title,
240
296
  className: "min-w-[40px]",
241
297
  onClick: () => b(e)
@@ -244,78 +300,79 @@ var B = {
244
300
  })]
245
301
  })]
246
302
  });
247
- }, J = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ L("div", {
303
+ }, Q = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ I("div", {
248
304
  role: "status",
249
305
  "aria-live": "polite",
250
- children: /* @__PURE__ */ L(g, {
306
+ children: /* @__PURE__ */ I(g, {
251
307
  title: e,
252
308
  message: t,
253
309
  textClassName: "flex-row flex-wrap gap-1"
254
310
  })
255
- }), Y = /* @__PURE__ */ function(e) {
311
+ }), $ = /* @__PURE__ */ function(e) {
256
312
  return e.Bottom = "Bottom", e.Top = "Top", e;
257
- }({}), X = 10, Z = ({ text: e, contentRef: t, position: n = Y.Bottom, styles: r, actions: i, hasAlwaysVisibleActions: o, attachments: d, collapsedLineCount: f = X, labels: m, textSegments: g, onAttachmentClick: v, onDownloadAll: y, onAttachmentRetry: b, selectedAttachmentId: x }) => {
258
- let { colors: C, typography: w, className: T, bubbleClassName: E } = r ?? {}, { showMoreLabel: D = "Show more", showLessLabel: A = "Show less", showMoreAriaLabel: ee, showLessAriaLabel: j, attachmentClickLabel: M, attachmentRetryLabel: N, attachmentOpenInNewTabLabel: P, userMessageAriaLabel: F = "User message" } = m ?? {}, { textRef: te, isTextCollapsed: z, isOverflowing: V, collapsedMaxHeight: H, expandedMaxHeight: U, isCollapsed: W, toggleCollapsed: ne } = l({
313
+ }({}), se = 10, ce = ({ text: e, contentRef: t, position: n = $.Bottom, styles: r, actions: i, hasAlwaysVisibleActions: o, attachments: d, collapsedLineCount: f = se, labels: m, textSegments: g, onAttachmentClick: v, onDownloadAll: y, onAttachmentRetry: b, selectedAttachmentId: x }) => {
314
+ let { colors: C, typography: ee, className: w, bubbleClassName: T } = r ?? {}, { showMoreLabel: E = "Show more", showLessLabel: k = "Show less", showMoreAriaLabel: te, showLessAriaLabel: ne, attachmentClickLabel: A, attachmentRetryLabel: j, attachmentOpenInNewTabLabel: M, userMessageAriaLabel: N = "User message" } = m ?? {}, { textRef: P, isTextCollapsed: R, isOverflowing: B, collapsedMaxHeight: V, expandedMaxHeight: H, isCollapsed: U, toggleCollapsed: W } = l({
259
315
  text: e ?? "",
260
316
  collapsedLineCount: f
261
- }), q = s({
317
+ }), re = s({
262
318
  "--cm-bubble-user-bg": C?.userBackground,
263
319
  "--cm-bubble-user-border": C?.userBorder,
264
320
  "--cm-bubble-fade-start": C?.fadeStart,
265
321
  "--cm-bubble-text": C?.text,
266
- "--cm-bubble-collapsed-height": V ? `${H}px` : void 0,
267
- "--cm-bubble-expanded-height": V ? `${U}px` : void 0
268
- }), J = n === Y.Top ? "rounded-ee-md rounded-se-2xl" : "rounded-se-md rounded-ee-2xl", Z = c(K.text, w?.fontClassName), Q = ee ?? D, $ = j ?? A, re = W ? D : A, ie = W ? Q : $, ae = W ? O : k, oe = S();
269
- return /* @__PURE__ */ L("div", {
322
+ "--cm-bubble-collapsed-height": B ? `${V}px` : void 0,
323
+ "--cm-bubble-expanded-height": B ? `${H}px` : void 0
324
+ }), G = n === $.Top ? "rounded-ee-md rounded-se-2xl" : "rounded-se-md rounded-ee-2xl", K = c(X.text, ee?.fontClassName), q = te ?? E, J = ne ?? k, Y = U ? E : k, oe = U ? q : J, Z = U ? D : O, Q = S();
325
+ return /* @__PURE__ */ I("div", {
270
326
  role: "group",
271
- "aria-label": F,
272
- style: q,
273
- className: c("flex w-full", T),
274
- children: /* @__PURE__ */ R("div", {
327
+ "aria-label": N,
328
+ style: re,
329
+ onCopy: ie,
330
+ className: c("flex w-full", w),
331
+ children: /* @__PURE__ */ L("div", {
275
332
  className: "ms-auto flex w-fit min-w-0 max-w-full flex-col items-end gap-4",
276
333
  children: [
277
- /* @__PURE__ */ L(u, {
334
+ /* @__PURE__ */ I(u, {
278
335
  attachments: d ?? [],
279
336
  onAttachmentClick: (e) => v?.(d?.find((t) => t.id === e)),
280
337
  onDownloadAll: y,
281
338
  onRetry: b,
282
339
  labels: {
283
- clickLabel: M,
284
- retryLabel: N,
285
- openInNewTabLabel: P
340
+ clickLabel: A,
341
+ retryLabel: j,
342
+ openInNewTabLabel: M
286
343
  },
287
344
  styles: { className: "max-w-[640px]" },
288
345
  selectedAttachmentId: x
289
346
  }),
290
- e && /* @__PURE__ */ L("div", {
291
- className: c(K.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", J, E, B.userBubble),
292
- children: /* @__PURE__ */ R("div", {
347
+ e && /* @__PURE__ */ I("div", {
348
+ className: c(X.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", G, T, z.userBubble),
349
+ children: /* @__PURE__ */ L("div", {
293
350
  className: "flex min-w-0 flex-col items-start",
294
- children: [/* @__PURE__ */ L("div", {
295
- id: oe,
351
+ children: [/* @__PURE__ */ I("div", {
352
+ id: Q,
296
353
  ref: t,
297
- className: c("relative -me-1 -ms-1 w-[calc(100%+8px)] overflow-hidden pe-1 ps-1", V && K.collapsibleText, V && !W && K.expandedText, z && K.collapsedText),
298
- children: /* @__PURE__ */ L("p", {
299
- ref: te,
300
- className: c(Z, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
354
+ className: c("relative -me-1 -ms-1 w-[calc(100%+8px)] overflow-hidden pe-1 ps-1", B && X.collapsibleText, B && !U && X.expandedText, R && X.collapsedText),
355
+ children: /* @__PURE__ */ I("p", {
356
+ ref: P,
357
+ className: c(K, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
301
358
  children: g ?? e
302
359
  })
303
- }), V && /* @__PURE__ */ L(_, {
304
- label: /* @__PURE__ */ L(I, { children: re }),
305
- iconBefore: /* @__PURE__ */ L(ae, {
360
+ }), B && /* @__PURE__ */ I(_, {
361
+ label: /* @__PURE__ */ I(F, { children: Y }),
362
+ iconBefore: /* @__PURE__ */ I(Z, {
306
363
  size: p.SM,
307
364
  "aria-hidden": "true"
308
365
  }),
309
- "aria-label": ie,
310
- "aria-expanded": !W,
311
- "aria-controls": oe,
366
+ "aria-label": oe,
367
+ "aria-expanded": !U,
368
+ "aria-controls": Q,
312
369
  className: "mt-3",
313
- onClick: ne,
370
+ onClick: W,
314
371
  size: h.Small
315
372
  })]
316
373
  })
317
374
  }),
318
- /* @__PURE__ */ L(G, {
375
+ /* @__PURE__ */ I(ae, {
319
376
  ...i,
320
377
  isAlwaysVisible: o,
321
378
  role: a.User
@@ -323,26 +380,26 @@ var B = {
323
380
  ]
324
381
  })
325
382
  });
326
- }, Q = ({ role: e, beforeContent: t, textSegments: n, onAttachmentClick: r, responseFormat: i, markdownComponents: o, markdownUrlTransform: s, ...c }) => e === a.Status ? /* @__PURE__ */ L(J, { labels: {
383
+ }, le = ({ role: e, beforeContent: t, textSegments: n, onAttachmentClick: r, responseFormat: i, markdownComponents: o, markdownUrlTransform: s, ...c }) => e === a.Status ? /* @__PURE__ */ I(Q, { labels: {
327
384
  titleText: c.labels?.statusTitleText,
328
385
  bodyText: c.labels?.statusBodyText ?? ""
329
- } }) : e === a.User ? /* @__PURE__ */ L(Z, {
386
+ } }) : e === a.User ? /* @__PURE__ */ I(ce, {
330
387
  ...c,
331
388
  textSegments: n,
332
389
  onAttachmentClick: r
333
- }) : /* @__PURE__ */ L(q, {
390
+ }) : /* @__PURE__ */ I(Z, {
334
391
  ...c,
335
392
  beforeContent: t,
336
393
  responseFormat: i,
337
394
  markdownComponents: o,
338
395
  markdownUrlTransform: s,
339
396
  onAttachmentClick: r
340
- }), $ = { button: "_button_tqo4d_3" }, re = ({ rect: e, actionRef: t, onReply: n, addedRevision: r, labels: i, styles: a, portalContainer: o }) => {
397
+ }), ue = { button: "_button_tqo4d_3" }, de = ({ rect: e, actionRef: t, onReply: n, addedRevision: r, labels: i, styles: a, portalContainer: o }) => {
341
398
  let { colors: l, typography: u, className: p, buttonClassName: g } = a ?? {}, _ = u?.fontClassName ?? "dial-small-text", v = o === void 0 ? typeof document > "u" ? null : document.body : o, y = s({
342
399
  "--cm-reply-background": l?.background,
343
400
  "--cm-reply-hover-background": l?.hoverBackground,
344
401
  "--cm-reply-text": l?.text
345
- }), [b, x] = E({
402
+ }), [b, x] = T({
346
403
  x: 0,
347
404
  y: 0
348
405
  });
@@ -361,33 +418,33 @@ var B = {
361
418
  g,
362
419
  _,
363
420
  i.reply
364
- ]), v ? z(/* @__PURE__ */ R(I, { children: [e && /* @__PURE__ */ L("div", {
421
+ ]), v ? R(/* @__PURE__ */ L(F, { children: [e && /* @__PURE__ */ I("div", {
365
422
  ref: t,
366
423
  className: c("fixed left-0 top-0 z-50 max-w-[calc(100vw-16px)]", p),
367
424
  style: {
368
425
  ...y,
369
426
  transform: `translate(${b.x}px, ${b.y}px)`
370
427
  },
371
- children: /* @__PURE__ */ L(d, {
428
+ children: /* @__PURE__ */ I(d, {
372
429
  variant: f.Neutral,
373
430
  size: h.Small,
374
431
  label: i.reply,
375
432
  onClick: n,
376
433
  textClassName: _,
377
- className: c($.button, "h-8 min-h-8 min-w-11 px-2 shadow-lg mobile:h-11 mobile:min-h-11", g),
378
- iconAfter: /* @__PURE__ */ L(D, {
434
+ className: c(ue.button, "h-8 min-h-8 min-w-11 px-2 shadow-lg mobile:h-11 mobile:min-h-11", g),
435
+ iconAfter: /* @__PURE__ */ I(E, {
379
436
  size: 16,
380
437
  stroke: m,
381
438
  "aria-hidden": "true",
382
439
  className: "rtl:scale-x-[-1]"
383
440
  })
384
441
  })
385
- }), /* @__PURE__ */ L("div", {
442
+ }), /* @__PURE__ */ I("div", {
386
443
  role: "status",
387
444
  "aria-live": "polite",
388
445
  className: "sr-only",
389
- children: e ? i.selectionAvailable : r > 0 ? /* @__PURE__ */ L("span", { children: i.attachmentAdded }, r) : null
446
+ children: e ? i.selectionAvailable : r > 0 ? /* @__PURE__ */ I("span", { children: i.attachmentAdded }, r) : null
390
447
  })] }), v) : null;
391
448
  };
392
449
  //#endregion
393
- export { q as AssistantMessageBubble, Y as BubblePosition, B as CONVERSATION_MESSAGES_CLASS, G as MessageActions, Q as MessageBubble, re as MessageSelectionReply, J as StatusMessageBubble, Z as UserMessageBubble };
450
+ export { Z as AssistantMessageBubble, $ as BubblePosition, z as CONVERSATION_MESSAGES_CLASS, ae as MessageActions, le as MessageBubble, de as MessageSelectionReply, Q as StatusMessageBubble, ce as UserMessageBubble };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-conversation-messages",
3
3
  "description": "Message bubble components for rendering conversation history with actions and source citations",
4
- "version": "1.2.0-dev.208",
4
+ "version": "1.2.0-dev.209",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -19,13 +19,13 @@
19
19
  "dependencies": {
20
20
  "@tabler/icons-react": "^3.44.0",
21
21
  "react-markdown": "^10.1.0",
22
- "@epam/ai-dial-attachment-input": "1.2.0-dev.208"
22
+ "@epam/ai-dial-attachment-input": "1.2.0-dev.209"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "react": "^19.2.8",
26
26
  "react-dom": "^19.2.8",
27
- "@epam/ai-dial-chat-shared": "1.2.0-dev.208",
28
- "@epam/ai-dial-ui-kit": "^0.15.0-dev.23"
27
+ "@epam/ai-dial-chat-shared": "1.2.0-dev.209",
28
+ "@epam/ai-dial-ui-kit": "^0.15.0-dev.27"
29
29
  },
30
30
  "repository": {
31
31
  "type": "git",
package/utils/clipboard.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { ClipboardEvent } from 'react';
2
+ /**
3
+ * `onCopy` handler that writes the current selection to the clipboard without
4
+ * the app's colors and fonts. Left to itself, the browser inlines every
5
+ * computed style of the selected markup into `text/html`, so pasting into a
6
+ * rich-text target (Teams, Outlook, Word) brings along the message's
7
+ * background band. This keeps the structure (paragraphs, lists, tables, code,
8
+ * links, line breaks) and lets the target document style it.
9
+ */
10
+ export declare const copySelectionWithoutStyles: (event: ClipboardEvent<HTMLElement>) => void;
11
+ //# sourceMappingURL=clipboard.d.ts.map
package/utils/clipboard.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"clipboard.d.ts","sourceRoot":"","sources":["../../src/utils/clipboard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAwG5C;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,GACrC,OAAO,cAAc,CAAC,WAAW,CAAC,KACjC,IA0BF,CAAC"}