@epam/ai-dial-conversation-messages 1.2.0-dev.158 → 1.2.0-dev.162
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/MessageBubble/AssistantMessageBubble.d.ts.map +1 -1
- package/components/MessageBubble/UserMessageBubble.d.ts.map +1 -1
- package/components/MessageSelectionReply/MessageSelectionReply.d.ts +55 -0
- package/components/MessageSelectionReply/MessageSelectionReply.d.ts.map +1 -0
- package/index.css +2 -2
- package/index.d.ts +2 -0
- package/index.d.ts.map +1 -1
- package/index.js +251 -197
- package/models/message-bubble.d.ts +3 -1
- package/models/message-bubble.d.ts.map +1 -1
- package/package.json +5 -4
|
@@ -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,
|
|
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 +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,
|
|
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"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { FC, RefObject } from 'react';
|
|
2
|
+
/** Color overrides for the Reply action. */
|
|
3
|
+
export interface MessageSelectionReplyColors {
|
|
4
|
+
/** Button background. Falls back to `--bg-layer-raised`. */
|
|
5
|
+
background?: string;
|
|
6
|
+
/** Hover background. Falls back to `--bg-layer-base`. */
|
|
7
|
+
hoverBackground?: string;
|
|
8
|
+
/** Label and icon color. Falls back to `--text-primary`. */
|
|
9
|
+
text?: string;
|
|
10
|
+
}
|
|
11
|
+
/** Typography overrides for the Reply action. */
|
|
12
|
+
export interface MessageSelectionReplyTypography {
|
|
13
|
+
/** Button label class. Defaults to `'dial-small-text'`. */
|
|
14
|
+
fontClassName?: string;
|
|
15
|
+
}
|
|
16
|
+
/** Appearance overrides for the Reply action. */
|
|
17
|
+
export interface MessageSelectionReplyStyles {
|
|
18
|
+
/** Button colors, applied as CSS custom properties. */
|
|
19
|
+
colors?: MessageSelectionReplyColors;
|
|
20
|
+
/** Button label typography. */
|
|
21
|
+
typography?: MessageSelectionReplyTypography;
|
|
22
|
+
/** Extra classes on the floating root, for example a host stacking level. */
|
|
23
|
+
className?: string;
|
|
24
|
+
/** Extra classes on the button. */
|
|
25
|
+
buttonClassName?: string;
|
|
26
|
+
}
|
|
27
|
+
/** Localized strings rendered by {@link MessageSelectionReply}. */
|
|
28
|
+
export interface MessageSelectionReplyLabels {
|
|
29
|
+
/** Visible and accessible Reply action label. */
|
|
30
|
+
reply: string;
|
|
31
|
+
/** Polite announcement when a selection becomes actionable. */
|
|
32
|
+
selectionAvailable: string;
|
|
33
|
+
/** Polite announcement after the composer accepts a Reply attachment. */
|
|
34
|
+
attachmentAdded: string;
|
|
35
|
+
}
|
|
36
|
+
/** Props accepted by {@link MessageSelectionReply}. */
|
|
37
|
+
export interface MessageSelectionReplyProps {
|
|
38
|
+
/** Visible selection rectangle. Omit to unmount the action. */
|
|
39
|
+
rect: DOMRect | undefined;
|
|
40
|
+
/** Receives the floating action root. */
|
|
41
|
+
actionRef: RefObject<HTMLDivElement | null>;
|
|
42
|
+
/** Creates an attachment from the captured selection. */
|
|
43
|
+
onReply: () => void;
|
|
44
|
+
/** Increments after the composer accepts a Reply attachment. */
|
|
45
|
+
addedRevision: number;
|
|
46
|
+
/** Localized button and announcement strings. */
|
|
47
|
+
labels: MessageSelectionReplyLabels;
|
|
48
|
+
/** Appearance overrides for the floating action. */
|
|
49
|
+
styles?: MessageSelectionReplyStyles;
|
|
50
|
+
/** Same-document portal destination. Defaults to `document.body`; null defers rendering. */
|
|
51
|
+
portalContainer?: HTMLElement | null;
|
|
52
|
+
}
|
|
53
|
+
/** Offers Reply beside a native selection while leaving browser selection controls intact. */
|
|
54
|
+
export declare const MessageSelectionReply: FC<MessageSelectionReplyProps>;
|
|
55
|
+
//# sourceMappingURL=MessageSelectionReply.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MessageSelectionReply.d.ts","sourceRoot":"","sources":["../../../src/components/MessageSelectionReply/MessageSelectionReply.tsx"],"names":[],"mappings":"AAQA,OAAO,EAA6B,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3E,4CAA4C;AAC5C,MAAM,WAAW,2BAA2B;IAC1C,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,iDAAiD;AACjD,MAAM,WAAW,+BAA+B;IAC9C,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iDAAiD;AACjD,MAAM,WAAW,2BAA2B;IAC1C,uDAAuD;IACvD,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC,+BAA+B;IAC/B,UAAU,CAAC,EAAE,+BAA+B,CAAC;IAC7C,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,mEAAmE;AACnE,MAAM,WAAW,2BAA2B;IAC1C,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,kBAAkB,EAAE,MAAM,CAAC;IAC3B,yEAAyE;IACzE,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,uDAAuD;AACvD,MAAM,WAAW,0BAA0B;IACzC,+DAA+D;IAC/D,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,yCAAyC;IACzC,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,yDAAyD;IACzD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gEAAgE;IAChE,aAAa,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,MAAM,EAAE,2BAA2B,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC,4FAA4F;IAC5F,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACtC;AAED,8FAA8F;AAC9F,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAmGhE,CAAC"}
|
package/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
._activeRating_ygoee_1{color:var(--ma-active-rating-text,var(--text-accent,#1d4ed8))}._userBubble_cq829_1{border-color:var(--cm-bubble-user-border,var(--stroke-secondary,#d1dbea));background:var(--cm-bubble-user-bg,var(--bg-layer-sunken,#eef1f7))}._collapsibleText_cq829_6{max-height:var(--cm-bubble-collapsed-height);transition:max-height .2s ease-out}._expandedText_cq829_11{max-height:var(--cm-bubble-expanded-height)}._collapsedText_cq829_15:after{content:"";pointer-events:none;background:linear-gradient(to bottom, var(--cm-bubble-fade-start,var(--shadow-xs-2,#161b2d08)), var(--cm-bubble-user-bg,var(--bg-layer-sunken,#eef1f7)));height:3rem;position:absolute;bottom:0;left:0;right:0}@media (prefers-reduced-motion:reduce){._collapsibleText_cq829_6{transition:none}}._startersDivider_cq829_26{border-color:var(--cm-starters-divider,var(--stroke-secondary,#d1dbea))}._text_cq829_30{color:var(--cm-bubble-text,var(--text-primary,#161b2d))}
|
|
2
|
-
/*$vite$:1*/.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.collapse{visibility:collapse}.static{position:static}.absolute{position:absolute}.relative{position:relative}.start-0{inset-inline-start:0}.top-0{top:0}.-me-1{margin-inline-end:-.25rem}.-ms-1{margin-inline-start:-.25rem}.ms-auto{margin-inline-start:auto}.mt-3{margin-top:.75rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.w-\[calc\(100\%\+8px\)\]{width:calc(100% + 8px)}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[40px\]{min-width:40px}.max-w-\[640px\]{max-width:640px}.max-w-full{max-width:100%}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.overflow-hidden{overflow:hidden}.whitespace-pre-wrap{white-space:pre-wrap}.rounded-ee-2xl{border-end-end-radius:1rem}.rounded-ee-md{border-end-end-radius:.375rem}.rounded-es-2xl{border-end-start-radius:1rem}.rounded-se-2xl{border-start-end-radius:1rem}.rounded-se-md{border-start-end-radius:.375rem}.rounded-ss-2xl{border-start-start-radius:1rem}.border{border-width:1px}.border-t{border-top-width:1px}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-bottom:1rem;padding-top:1rem}.pe-1{padding-inline-end:.25rem}.ps-1{padding-inline-start:.25rem}.pt-5{padding-top:1.25rem}.text-start{text-align:start}.opacity-0{opacity:0}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\[overflow-wrap\:anywhere\]{overflow-wrap:anywhere}.group:hover .group-hover\:opacity-100{opacity:1}.\[\&\>\.cm-bubble-markdown\>div\>\*\:first-child\]\:indent-\[var\(--cm-bubble-first-line-indent\2c 0px\)\]>.cm-bubble-markdown>div>:first-child{text-indent:var(--cm-bubble-first-line-indent,0)}
|
|
1
|
+
._activeRating_ygoee_1{color:var(--ma-active-rating-text,var(--text-accent,#1d4ed8))}._userBubble_cq829_1{border-color:var(--cm-bubble-user-border,var(--stroke-secondary,#d1dbea));background:var(--cm-bubble-user-bg,var(--bg-layer-sunken,#eef1f7))}._collapsibleText_cq829_6{max-height:var(--cm-bubble-collapsed-height);transition:max-height .2s ease-out}._expandedText_cq829_11{max-height:var(--cm-bubble-expanded-height)}._collapsedText_cq829_15:after{content:"";pointer-events:none;background:linear-gradient(to bottom, var(--cm-bubble-fade-start,var(--shadow-xs-2,#161b2d08)), var(--cm-bubble-user-bg,var(--bg-layer-sunken,#eef1f7)));height:3rem;position:absolute;bottom:0;left:0;right:0}@media (prefers-reduced-motion:reduce){._collapsibleText_cq829_6{transition:none}}._startersDivider_cq829_26{border-color:var(--cm-starters-divider,var(--stroke-secondary,#d1dbea))}._text_cq829_30{color:var(--cm-bubble-text,var(--text-primary,#161b2d))}._button_tqo4d_3._button_tqo4d_3{color:var(--cm-reply-text,var(--text-primary,#161b2d));background:var(--cm-reply-background,var(--bg-layer-raised,#fcfcfc))!important}._button_tqo4d_3._button_tqo4d_3:hover{color:var(--cm-reply-text,var(--text-primary,#161b2d));background:var(--cm-reply-hover-background,var(--bg-layer-base,#f5f7fa))!important}
|
|
2
|
+
/*$vite$:1*/.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.start-0{inset-inline-start:0}.top-0{top:0}.z-50{z-index:50}.-me-1{margin-inline-end:-.25rem}.-ms-1{margin-inline-start:-.25rem}.ms-auto{margin-inline-start:auto}.mt-3{margin-top:.75rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.h-8{height:2rem}.min-h-8{min-height:2rem}.w-\[calc\(100\%\+8px\)\]{width:calc(100% + 8px)}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-11{min-width:2.75rem}.min-w-\[40px\]{min-width:40px}.max-w-\[640px\]{max-width:640px}.max-w-\[calc\(100vw-16px\)\]{max-width:calc(100vw - 16px)}.max-w-full{max-width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.overflow-hidden{overflow:hidden}.whitespace-pre-wrap{white-space:pre-wrap}.rounded-ee-2xl{border-end-end-radius:1rem}.rounded-ee-md{border-end-end-radius:.375rem}.rounded-es-2xl{border-end-start-radius:1rem}.rounded-se-2xl{border-start-end-radius:1rem}.rounded-se-md{border-start-end-radius:.375rem}.rounded-ss-2xl{border-start-start-radius:1rem}.border{border-width:1px}.border-t{border-top-width:1px}.px-2{padding-left:.5rem;padding-right:.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-bottom:1rem;padding-top:1rem}.pe-1{padding-inline-end:.25rem}.ps-1{padding-inline-start:.25rem}.pt-5{padding-top:1.25rem}.text-start{text-align:start}.opacity-0{opacity:0}.shadow-lg{--tw-shadow:0 8px 44px 0 var(--shadow-lg,#2764d914);--tw-shadow-colored:0 8px 44px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\[overflow-wrap\:anywhere\]{overflow-wrap:anywhere}.group:hover .group-hover\:opacity-100{opacity:1}@media (max-width:1279px){.mobile\:h-11{height:2.75rem}.mobile\:min-h-11{min-height:2.75rem}}.rtl\:scale-x-\[-1\]:where([dir=rtl],[dir=rtl] *){--tw-scale-x:-1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\[\&\>\.cm-bubble-markdown\>div\>\*\:first-child\]\:indent-\[var\(--cm-bubble-first-line-indent\2c 0px\)\]>.cm-bubble-markdown>div>:first-child{text-indent:var(--cm-bubble-first-line-indent,0)}
|
package/index.d.ts
CHANGED
|
@@ -4,8 +4,10 @@ export { UserMessageBubble } from './components/MessageBubble/UserMessageBubble'
|
|
|
4
4
|
export { AssistantMessageBubble } from './components/MessageBubble/AssistantMessageBubble';
|
|
5
5
|
export { StatusMessageBubble } from './components/MessageBubble/StatusMessageBubble';
|
|
6
6
|
export { MessageActions } from './components/MessageActions/MessageActions';
|
|
7
|
+
export { MessageSelectionReply } from './components/MessageSelectionReply/MessageSelectionReply';
|
|
7
8
|
export { BubblePosition } from './types/bubble-position';
|
|
8
9
|
export type { MessageBubbleProps, UserMessageBubbleProps, AssistantMessageBubbleProps, MessageBubbleStyles, MessageBubbleColors, MessageBubbleTypography, MessageBubbleLabels, AssistantMessageBubbleLabels, } from './models/message-bubble';
|
|
10
|
+
export type { MessageSelectionReplyColors, MessageSelectionReplyLabels, MessageSelectionReplyProps, MessageSelectionReplyStyles, MessageSelectionReplyTypography, } from './components/MessageSelectionReply/MessageSelectionReply';
|
|
9
11
|
export type { StatusMessageBubbleLabels, StatusMessageBubbleProps, } from './components/MessageBubble/StatusMessageBubble';
|
|
10
12
|
export type { MessageActionsProps, MessageActionColors, MessageActionLabels, MessageActionTooltips, MessageActionAriaLabels, } from './models/message-actions';
|
|
11
13
|
export type { MessageSourceProps, MessageSourceLabels, MessageSourceStyles, MessageSourceColors, MessageSourceTypography, } from './models/message-source';
|
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,sBAAsB,EAAE,MAAM,mDAAmD,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,2BAA2B,EAC3B,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,4BAA4B,GAC7B,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,gDAAgD,CAAC;AACxD,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,sBAAsB,EAAE,MAAM,mDAAmD,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,0DAA0D,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,2BAA2B,EAC3B,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,4BAA4B,GAC7B,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,2BAA2B,EAC3B,2BAA2B,EAC3B,0BAA0B,EAC1B,2BAA2B,EAC3B,+BAA+B,GAChC,MAAM,0DAA0D,CAAC;AAClE,YAAY,EACV,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,gDAAgD,CAAC;AACxD,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,yBAAyB,CAAC"}
|
package/index.js
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
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
|
-
import {
|
|
4
|
-
import { useCallback as
|
|
5
|
-
import { IconChevronDown as
|
|
6
|
-
import { Fragment as
|
|
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";
|
|
7
8
|
//#region src/constants/public-class-names.ts
|
|
8
|
-
var
|
|
9
|
+
var B = {
|
|
9
10
|
userBubble: "dial-cm-user-bubble",
|
|
10
11
|
assistantContent: "dial-cm-assistant-content"
|
|
11
|
-
},
|
|
12
|
-
let t =
|
|
13
|
-
return
|
|
12
|
+
}, V = 4, H = (e) => {
|
|
13
|
+
let t = T(null), [n, r] = E(0);
|
|
14
|
+
return x(() => {
|
|
14
15
|
if (!e) return;
|
|
15
16
|
let n = t.current;
|
|
16
17
|
if (n == null) return;
|
|
@@ -21,319 +22,372 @@ var L = {
|
|
|
21
22
|
return i.observe(n), () => i.disconnect();
|
|
22
23
|
}, [e]), {
|
|
23
24
|
slotRef: t,
|
|
24
|
-
firstLineIndent: e ? `calc(${n}px + ${
|
|
25
|
+
firstLineIndent: e ? `calc(${n}px + ${V}px)` : void 0
|
|
25
26
|
};
|
|
26
|
-
},
|
|
27
|
-
let { tooltips:
|
|
28
|
-
u?.(),
|
|
29
|
-
}, [u,
|
|
30
|
-
|
|
31
|
-
}, [
|
|
32
|
-
return
|
|
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", {
|
|
33
34
|
role: "toolbar",
|
|
34
|
-
"aria-label":
|
|
35
|
-
style:
|
|
36
|
-
className: c("flex gap-1", !
|
|
37
|
-
children: [/* @__PURE__ */
|
|
35
|
+
"aria-label": D?.actionsGroup ?? "Message actions",
|
|
36
|
+
style: H,
|
|
37
|
+
className: c("flex gap-1", !v && "opacity-0 group-hover:opacity-100", S),
|
|
38
|
+
children: [/* @__PURE__ */ L("span", {
|
|
38
39
|
role: "status",
|
|
39
40
|
"aria-live": "polite",
|
|
40
41
|
className: "sr-only",
|
|
41
|
-
children:
|
|
42
|
-
}), e === a.User ? /* @__PURE__ */ I
|
|
43
|
-
icon: /* @__PURE__ */
|
|
44
|
-
size:
|
|
42
|
+
children: z
|
|
43
|
+
}), e === a.User ? /* @__PURE__ */ R(I, { children: [n && /* @__PURE__ */ L(y, {
|
|
44
|
+
icon: /* @__PURE__ */ L(ee, {
|
|
45
|
+
size: p.SM,
|
|
45
46
|
"aria-hidden": !0,
|
|
46
|
-
stroke:
|
|
47
|
+
stroke: m
|
|
47
48
|
}),
|
|
48
|
-
size:
|
|
49
|
-
"aria-label":
|
|
50
|
-
tooltipProps: { tooltip:
|
|
49
|
+
size: h.Small,
|
|
50
|
+
"aria-label": D?.editMessage ?? "Edit message",
|
|
51
|
+
tooltipProps: { tooltip: T?.edit ?? "Edit" },
|
|
51
52
|
onClick: n,
|
|
52
53
|
onMouseEnter: r,
|
|
53
54
|
onFocus: r,
|
|
54
55
|
disabled: x
|
|
55
|
-
}), o && /* @__PURE__ */
|
|
56
|
-
icon: /* @__PURE__ */
|
|
57
|
-
size:
|
|
56
|
+
}), o && /* @__PURE__ */ L(y, {
|
|
57
|
+
icon: /* @__PURE__ */ L(te, {
|
|
58
|
+
size: p.SM,
|
|
58
59
|
"aria-hidden": !0,
|
|
59
|
-
stroke:
|
|
60
|
+
stroke: m
|
|
60
61
|
}),
|
|
61
|
-
size:
|
|
62
|
-
"aria-label":
|
|
63
|
-
tooltipProps: { tooltip:
|
|
62
|
+
size: h.Small,
|
|
63
|
+
"aria-label": D?.deleteMessage ?? "Delete message",
|
|
64
|
+
tooltipProps: { tooltip: T?.delete ?? "Delete" },
|
|
64
65
|
onClick: o,
|
|
65
66
|
disabled: x
|
|
66
|
-
})] }) : /* @__PURE__ */ I
|
|
67
|
-
l && /* @__PURE__ */
|
|
68
|
-
icon: /* @__PURE__ */
|
|
69
|
-
size:
|
|
67
|
+
})] }) : /* @__PURE__ */ R(I, { children: [
|
|
68
|
+
l && /* @__PURE__ */ L(y, {
|
|
69
|
+
icon: /* @__PURE__ */ L(j, {
|
|
70
|
+
size: p.SM,
|
|
70
71
|
"aria-hidden": !0,
|
|
71
|
-
stroke:
|
|
72
|
+
stroke: m
|
|
72
73
|
}),
|
|
73
|
-
size:
|
|
74
|
-
"aria-label":
|
|
75
|
-
tooltipProps: { tooltip:
|
|
74
|
+
size: h.Small,
|
|
75
|
+
"aria-label": D?.regenerateResponse ?? "Regenerate response",
|
|
76
|
+
tooltipProps: { tooltip: T?.regenerate ?? "Regenerate" },
|
|
76
77
|
onClick: l,
|
|
77
78
|
disabled: x
|
|
78
79
|
}),
|
|
79
|
-
u && /* @__PURE__ */
|
|
80
|
-
iconSize:
|
|
81
|
-
onClick:
|
|
82
|
-
size:
|
|
83
|
-
isCopied:
|
|
84
|
-
copyLabel:
|
|
85
|
-
copiedLabel:
|
|
86
|
-
ariaLabel:
|
|
80
|
+
u && /* @__PURE__ */ L(t, {
|
|
81
|
+
iconSize: p.SM,
|
|
82
|
+
onClick: G,
|
|
83
|
+
size: h.Small,
|
|
84
|
+
isCopied: O === "copy",
|
|
85
|
+
copyLabel: T?.copy ?? "Copy",
|
|
86
|
+
copiedLabel: T?.copied ?? "Copied!",
|
|
87
|
+
ariaLabel: D?.copyResponse ?? "Copy response",
|
|
87
88
|
isDisabled: x
|
|
88
89
|
}),
|
|
89
|
-
|
|
90
|
-
iconSize:
|
|
91
|
-
onClick:
|
|
92
|
-
size:
|
|
93
|
-
isCopied:
|
|
94
|
-
iconCopy: /* @__PURE__ */
|
|
95
|
-
size:
|
|
90
|
+
d && /* @__PURE__ */ L(t, {
|
|
91
|
+
iconSize: p.SM,
|
|
92
|
+
onClick: K,
|
|
93
|
+
size: h.Small,
|
|
94
|
+
isCopied: O === "markdown",
|
|
95
|
+
iconCopy: /* @__PURE__ */ L(A, {
|
|
96
|
+
size: p.SM,
|
|
96
97
|
"aria-hidden": !0,
|
|
97
|
-
stroke:
|
|
98
|
+
stroke: m
|
|
98
99
|
}),
|
|
99
|
-
copyLabel:
|
|
100
|
-
copiedLabel:
|
|
101
|
-
ariaLabel:
|
|
100
|
+
copyLabel: T?.copyMarkdown ?? "Copy as Markdown",
|
|
101
|
+
copiedLabel: T?.copiedMarkdown ?? "Copied!",
|
|
102
|
+
ariaLabel: D?.copyAsMarkdown ?? "Copy as markdown",
|
|
102
103
|
isDisabled: x
|
|
103
104
|
}),
|
|
104
|
-
|
|
105
|
-
icon:
|
|
106
|
-
className:
|
|
107
|
-
size:
|
|
105
|
+
f && /* @__PURE__ */ L(y, {
|
|
106
|
+
icon: _ === i.Like ? /* @__PURE__ */ L(F, {
|
|
107
|
+
className: U.activeRating,
|
|
108
|
+
size: p.SM,
|
|
108
109
|
"aria-hidden": !0
|
|
109
|
-
}) : /* @__PURE__ */
|
|
110
|
-
size:
|
|
110
|
+
}) : /* @__PURE__ */ L(P, {
|
|
111
|
+
size: p.SM,
|
|
111
112
|
"aria-hidden": !0,
|
|
112
|
-
stroke:
|
|
113
|
+
stroke: m
|
|
113
114
|
}),
|
|
114
|
-
size:
|
|
115
|
-
"aria-label":
|
|
116
|
-
"aria-pressed":
|
|
117
|
-
tooltipProps: { tooltip:
|
|
118
|
-
onClick:
|
|
115
|
+
size: h.Small,
|
|
116
|
+
"aria-label": D?.likeResponse ?? "Like response",
|
|
117
|
+
"aria-pressed": _ === i.Like,
|
|
118
|
+
tooltipProps: { tooltip: T?.like ?? "Like" },
|
|
119
|
+
onClick: f,
|
|
119
120
|
disabled: x
|
|
120
121
|
}),
|
|
121
|
-
g && /* @__PURE__ */
|
|
122
|
-
icon:
|
|
123
|
-
className:
|
|
124
|
-
size:
|
|
122
|
+
g && /* @__PURE__ */ L(y, {
|
|
123
|
+
icon: _ === i.Dislike ? /* @__PURE__ */ L(N, {
|
|
124
|
+
className: U.activeRating,
|
|
125
|
+
size: p.SM,
|
|
125
126
|
"aria-hidden": !0
|
|
126
|
-
}) : /* @__PURE__ */
|
|
127
|
-
size:
|
|
127
|
+
}) : /* @__PURE__ */ L(M, {
|
|
128
|
+
size: p.SM,
|
|
128
129
|
"aria-hidden": !0,
|
|
129
|
-
stroke:
|
|
130
|
+
stroke: m
|
|
130
131
|
}),
|
|
131
|
-
size:
|
|
132
|
-
"aria-label":
|
|
133
|
-
"aria-pressed":
|
|
134
|
-
tooltipProps: { tooltip:
|
|
132
|
+
size: h.Small,
|
|
133
|
+
"aria-label": D?.dislikeResponse ?? "Dislike response",
|
|
134
|
+
"aria-pressed": _ === i.Dislike,
|
|
135
|
+
tooltipProps: { tooltip: T?.dislike ?? "Dislike" },
|
|
135
136
|
onClick: g,
|
|
136
137
|
disabled: x
|
|
137
138
|
})
|
|
138
139
|
] })]
|
|
139
140
|
}) : null;
|
|
140
|
-
},
|
|
141
|
+
}, K = {
|
|
141
142
|
userBubble: "_userBubble_cq829_1",
|
|
142
143
|
collapsibleText: "_collapsibleText_cq829_6",
|
|
143
144
|
expandedText: "_expandedText_cq829_11",
|
|
144
145
|
collapsedText: "_collapsedText_cq829_15",
|
|
145
146
|
startersDivider: "_startersDivider_cq829_26",
|
|
146
147
|
text: "_text_cq829_30"
|
|
147
|
-
},
|
|
148
|
-
let { colors: N, typography: P, className:
|
|
149
|
-
copyLabel:
|
|
150
|
-
copiedLabel:
|
|
151
|
-
downloadCsvLabel:
|
|
152
|
-
openInCanvasLabel:
|
|
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
|
|
153
154
|
}), [
|
|
155
|
+
Y,
|
|
156
|
+
X,
|
|
154
157
|
Z,
|
|
155
|
-
Q
|
|
156
|
-
|
|
157
|
-
ee
|
|
158
|
-
]), oe = f ? (p ?? []).filter((t) => t.type !== e.Audio) : p ?? [], { slotRef: se, firstLineIndent: ce } = z(m != null && !!t), le = s({
|
|
158
|
+
Q
|
|
159
|
+
]), se = p ? (m ?? []).filter((t) => t.type !== e.Audio) : m ?? [], { slotRef: ce, firstLineIndent: le } = H(h != null && !!t), ue = s({
|
|
159
160
|
"--cm-bubble-text": N?.text,
|
|
160
161
|
"--cm-starters-divider": N?.startersDivider,
|
|
161
|
-
"--cm-bubble-first-line-indent":
|
|
162
|
-
}),
|
|
163
|
-
return /* @__PURE__ */
|
|
162
|
+
"--cm-bubble-first-line-indent": le
|
|
163
|
+
}), de = c(K.text, P?.fontClassName), fe = !!(x || S);
|
|
164
|
+
return /* @__PURE__ */ R("div", {
|
|
164
165
|
role: "group",
|
|
165
|
-
"aria-label":
|
|
166
|
-
style:
|
|
167
|
-
className: c("flex w-full items-start gap-3",
|
|
168
|
-
children: [
|
|
169
|
-
src:
|
|
166
|
+
"aria-label": ie,
|
|
167
|
+
style: ue,
|
|
168
|
+
className: c("flex w-full items-start gap-3", F),
|
|
169
|
+
children: [fe && /* @__PURE__ */ L(n, {
|
|
170
|
+
src: x,
|
|
170
171
|
size: 28,
|
|
171
|
-
initialsName: S ||
|
|
172
|
-
labels: { tooltip: S ??
|
|
173
|
-
}), /* @__PURE__ */
|
|
172
|
+
initialsName: S || ae,
|
|
173
|
+
labels: { tooltip: S ?? ae }
|
|
174
|
+
}), /* @__PURE__ */ R("div", {
|
|
174
175
|
className: "flex w-full min-w-0 max-w-full flex-col items-start gap-5",
|
|
175
|
-
children: [/* @__PURE__ */
|
|
176
|
-
className: c("flex w-full min-w-0 max-w-full flex-col items-start gap-4",
|
|
176
|
+
children: [/* @__PURE__ */ R("div", {
|
|
177
|
+
className: c("flex w-full min-w-0 max-w-full flex-col items-start gap-4", te),
|
|
177
178
|
children: [
|
|
178
|
-
|
|
179
|
+
h != null && !t && /* @__PURE__ */ L("div", {
|
|
179
180
|
className: "min-w-0",
|
|
180
|
-
children:
|
|
181
|
+
children: h
|
|
181
182
|
}),
|
|
182
|
-
(t ||
|
|
183
|
+
(t || p) && /* @__PURE__ */ R("div", {
|
|
183
184
|
"aria-live": "polite",
|
|
184
185
|
"aria-atomic": "false",
|
|
185
|
-
className: c(
|
|
186
|
-
children: [
|
|
187
|
-
ref:
|
|
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,
|
|
188
189
|
className: "absolute start-0 top-0",
|
|
189
|
-
children:
|
|
190
|
-
}), /* @__PURE__ */
|
|
190
|
+
children: h
|
|
191
|
+
}), /* @__PURE__ */ L("div", {
|
|
192
|
+
ref: i,
|
|
191
193
|
className: "cm-bubble-markdown min-w-0 max-w-full",
|
|
192
|
-
children: /* @__PURE__ */
|
|
194
|
+
children: /* @__PURE__ */ L(r, {
|
|
193
195
|
content: t ?? "",
|
|
194
|
-
isPlainText:
|
|
195
|
-
isStreaming:
|
|
196
|
-
thinkingLabel:
|
|
196
|
+
isPlainText: g === o.PlainText,
|
|
197
|
+
isStreaming: p,
|
|
198
|
+
thinkingLabel: W,
|
|
197
199
|
components: C,
|
|
198
|
-
classNames:
|
|
199
|
-
urlTransform:
|
|
200
|
-
codeBlockCopyLabel:
|
|
201
|
-
codeBlockCopiedLabel:
|
|
202
|
-
codeBlockTheme:
|
|
203
|
-
tableActionLabels:
|
|
204
|
-
tableDownloadFilename:
|
|
205
|
-
tableOnOpenInCanvas:
|
|
206
|
-
tableScrollRegionAriaLabel:
|
|
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
|
|
207
209
|
})
|
|
208
210
|
})]
|
|
209
211
|
}),
|
|
210
|
-
/* @__PURE__ */
|
|
211
|
-
attachments:
|
|
212
|
-
onAttachmentClick: (e) =>
|
|
213
|
-
onDownloadAll:
|
|
214
|
-
onRetry:
|
|
212
|
+
/* @__PURE__ */ L(u, {
|
|
213
|
+
attachments: se,
|
|
214
|
+
onAttachmentClick: (e) => D?.(m?.find((t) => t.id === e)),
|
|
215
|
+
onDownloadAll: O,
|
|
216
|
+
onRetry: k,
|
|
215
217
|
labels: {
|
|
216
|
-
clickLabel:
|
|
217
|
-
retryLabel:
|
|
218
|
-
openInNewTabLabel:
|
|
218
|
+
clickLabel: I,
|
|
219
|
+
retryLabel: z,
|
|
220
|
+
openInNewTabLabel: V
|
|
219
221
|
},
|
|
220
222
|
selectedAttachmentId: M
|
|
221
223
|
}),
|
|
222
224
|
_,
|
|
223
|
-
/* @__PURE__ */
|
|
224
|
-
...
|
|
225
|
-
isAlwaysVisible:
|
|
225
|
+
/* @__PURE__ */ L(G, {
|
|
226
|
+
...d,
|
|
227
|
+
isAlwaysVisible: f,
|
|
226
228
|
role: a.Assistant
|
|
227
229
|
})
|
|
228
230
|
]
|
|
229
|
-
}),
|
|
231
|
+
}), y && y.length > 0 && b && /* @__PURE__ */ L("div", {
|
|
230
232
|
role: "list",
|
|
231
|
-
"aria-label":
|
|
232
|
-
className: c("flex w-full flex-wrap gap-2 border-t pt-5",
|
|
233
|
-
children:
|
|
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", {
|
|
234
236
|
role: "listitem",
|
|
235
237
|
className: "min-w-[40px]",
|
|
236
|
-
children: /* @__PURE__ */
|
|
238
|
+
children: /* @__PURE__ */ L(v, {
|
|
237
239
|
label: e.title,
|
|
238
240
|
className: "min-w-[40px]",
|
|
239
|
-
onClick: () =>
|
|
241
|
+
onClick: () => b(e)
|
|
240
242
|
})
|
|
241
243
|
}, t))
|
|
242
244
|
})]
|
|
243
245
|
})]
|
|
244
246
|
});
|
|
245
|
-
},
|
|
247
|
+
}, J = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ L("div", {
|
|
246
248
|
role: "status",
|
|
247
249
|
"aria-live": "polite",
|
|
248
|
-
children: /* @__PURE__ */
|
|
250
|
+
children: /* @__PURE__ */ L(g, {
|
|
249
251
|
title: e,
|
|
250
252
|
message: t,
|
|
251
253
|
textClassName: "flex-row flex-wrap gap-1"
|
|
252
254
|
})
|
|
253
|
-
}),
|
|
255
|
+
}), Y = /* @__PURE__ */ function(e) {
|
|
254
256
|
return e.Bottom = "Bottom", e.Top = "Top", e;
|
|
255
|
-
}({}),
|
|
256
|
-
let { colors:
|
|
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({
|
|
257
259
|
text: e ?? "",
|
|
258
260
|
collapsedLineCount: f
|
|
259
|
-
}),
|
|
260
|
-
"--cm-bubble-user-bg":
|
|
261
|
-
"--cm-bubble-user-border":
|
|
262
|
-
"--cm-bubble-fade-start":
|
|
263
|
-
"--cm-bubble-text":
|
|
264
|
-
"--cm-bubble-collapsed-height":
|
|
265
|
-
"--cm-bubble-expanded-height":
|
|
266
|
-
}),
|
|
267
|
-
return /* @__PURE__ */
|
|
261
|
+
}), q = s({
|
|
262
|
+
"--cm-bubble-user-bg": C?.userBackground,
|
|
263
|
+
"--cm-bubble-user-border": C?.userBorder,
|
|
264
|
+
"--cm-bubble-fade-start": C?.fadeStart,
|
|
265
|
+
"--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", {
|
|
268
270
|
role: "group",
|
|
269
|
-
"aria-label":
|
|
270
|
-
style:
|
|
271
|
-
className: c("flex w-full",
|
|
272
|
-
children: /* @__PURE__ */
|
|
271
|
+
"aria-label": F,
|
|
272
|
+
style: q,
|
|
273
|
+
className: c("flex w-full", T),
|
|
274
|
+
children: /* @__PURE__ */ R("div", {
|
|
273
275
|
className: "ms-auto flex w-fit min-w-0 max-w-full flex-col items-end gap-4",
|
|
274
276
|
children: [
|
|
275
|
-
/* @__PURE__ */
|
|
276
|
-
attachments:
|
|
277
|
-
onAttachmentClick: (e) =>
|
|
278
|
-
onDownloadAll:
|
|
279
|
-
onRetry:
|
|
277
|
+
/* @__PURE__ */ L(u, {
|
|
278
|
+
attachments: d ?? [],
|
|
279
|
+
onAttachmentClick: (e) => v?.(d?.find((t) => t.id === e)),
|
|
280
|
+
onDownloadAll: y,
|
|
281
|
+
onRetry: b,
|
|
280
282
|
labels: {
|
|
281
283
|
clickLabel: M,
|
|
282
284
|
retryLabel: N,
|
|
283
|
-
openInNewTabLabel:
|
|
285
|
+
openInNewTabLabel: P
|
|
284
286
|
},
|
|
285
287
|
styles: { className: "max-w-[640px]" },
|
|
286
288
|
selectedAttachmentId: x
|
|
287
289
|
}),
|
|
288
|
-
e && /* @__PURE__ */
|
|
289
|
-
className: c(
|
|
290
|
-
children: /* @__PURE__ */
|
|
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", {
|
|
291
293
|
className: "flex min-w-0 flex-col items-start",
|
|
292
|
-
children: [/* @__PURE__ */
|
|
293
|
-
id:
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
294
|
+
children: [/* @__PURE__ */ L("div", {
|
|
295
|
+
id: oe,
|
|
296
|
+
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]"),
|
|
298
301
|
children: g ?? e
|
|
299
302
|
})
|
|
300
|
-
}),
|
|
301
|
-
label: /* @__PURE__ */
|
|
302
|
-
iconBefore: /* @__PURE__ */
|
|
303
|
-
size:
|
|
303
|
+
}), V && /* @__PURE__ */ L(_, {
|
|
304
|
+
label: /* @__PURE__ */ L(I, { children: re }),
|
|
305
|
+
iconBefore: /* @__PURE__ */ L(ae, {
|
|
306
|
+
size: p.SM,
|
|
304
307
|
"aria-hidden": "true"
|
|
305
308
|
}),
|
|
306
|
-
"aria-label":
|
|
307
|
-
"aria-expanded": !
|
|
308
|
-
"aria-controls":
|
|
309
|
+
"aria-label": ie,
|
|
310
|
+
"aria-expanded": !W,
|
|
311
|
+
"aria-controls": oe,
|
|
309
312
|
className: "mt-3",
|
|
310
|
-
onClick:
|
|
311
|
-
size:
|
|
313
|
+
onClick: ne,
|
|
314
|
+
size: h.Small
|
|
312
315
|
})]
|
|
313
316
|
})
|
|
314
317
|
}),
|
|
315
|
-
/* @__PURE__ */
|
|
316
|
-
...
|
|
317
|
-
isAlwaysVisible:
|
|
318
|
+
/* @__PURE__ */ L(G, {
|
|
319
|
+
...i,
|
|
320
|
+
isAlwaysVisible: o,
|
|
318
321
|
role: a.User
|
|
319
322
|
})
|
|
320
323
|
]
|
|
321
324
|
})
|
|
322
325
|
});
|
|
323
|
-
},
|
|
326
|
+
}, Q = ({ role: e, beforeContent: t, textSegments: n, onAttachmentClick: r, responseFormat: i, markdownComponents: o, markdownUrlTransform: s, ...c }) => e === a.Status ? /* @__PURE__ */ L(J, { labels: {
|
|
324
327
|
titleText: c.labels?.statusTitleText,
|
|
325
328
|
bodyText: c.labels?.statusBodyText ?? ""
|
|
326
|
-
} }) : e === a.User ? /* @__PURE__ */
|
|
329
|
+
} }) : e === a.User ? /* @__PURE__ */ L(Z, {
|
|
327
330
|
...c,
|
|
328
331
|
textSegments: n,
|
|
329
332
|
onAttachmentClick: r
|
|
330
|
-
}) : /* @__PURE__ */
|
|
333
|
+
}) : /* @__PURE__ */ L(q, {
|
|
331
334
|
...c,
|
|
332
335
|
beforeContent: t,
|
|
333
336
|
responseFormat: i,
|
|
334
337
|
markdownComponents: o,
|
|
335
338
|
markdownUrlTransform: s,
|
|
336
339
|
onAttachmentClick: r
|
|
337
|
-
})
|
|
340
|
+
}), $ = { button: "_button_tqo4d_3" }, re = ({ rect: e, actionRef: t, onReply: n, addedRevision: r, labels: i, styles: a, portalContainer: o }) => {
|
|
341
|
+
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
|
+
"--cm-reply-background": l?.background,
|
|
343
|
+
"--cm-reply-hover-background": l?.hoverBackground,
|
|
344
|
+
"--cm-reply-text": l?.text
|
|
345
|
+
}), [b, x] = E({
|
|
346
|
+
x: 0,
|
|
347
|
+
y: 0
|
|
348
|
+
});
|
|
349
|
+
return C(() => {
|
|
350
|
+
if (!e || !t.current) return;
|
|
351
|
+
let n = t.current.getBoundingClientRect(), r = window.visualViewport, i = r?.offsetLeft ?? 0, a = r?.offsetTop ?? 0, o = r?.width ?? document.documentElement.clientWidth, s = r?.height ?? document.documentElement.clientHeight, c = e.top - n.height - 8 >= a + 8 ? e.top - n.height - 8 : e.bottom + 8;
|
|
352
|
+
x({
|
|
353
|
+
x: Math.max(i + 8, Math.min(e.left, i + o - n.width - 8)),
|
|
354
|
+
y: Math.max(a + 8, Math.min(c, a + s - n.height - 8))
|
|
355
|
+
});
|
|
356
|
+
}, [
|
|
357
|
+
e,
|
|
358
|
+
t,
|
|
359
|
+
v,
|
|
360
|
+
p,
|
|
361
|
+
g,
|
|
362
|
+
_,
|
|
363
|
+
i.reply
|
|
364
|
+
]), v ? z(/* @__PURE__ */ R(I, { children: [e && /* @__PURE__ */ L("div", {
|
|
365
|
+
ref: t,
|
|
366
|
+
className: c("fixed left-0 top-0 z-50 max-w-[calc(100vw-16px)]", p),
|
|
367
|
+
style: {
|
|
368
|
+
...y,
|
|
369
|
+
transform: `translate(${b.x}px, ${b.y}px)`
|
|
370
|
+
},
|
|
371
|
+
children: /* @__PURE__ */ L(d, {
|
|
372
|
+
variant: f.Neutral,
|
|
373
|
+
size: h.Small,
|
|
374
|
+
label: i.reply,
|
|
375
|
+
onClick: n,
|
|
376
|
+
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, {
|
|
379
|
+
size: 16,
|
|
380
|
+
stroke: m,
|
|
381
|
+
"aria-hidden": "true",
|
|
382
|
+
className: "rtl:scale-x-[-1]"
|
|
383
|
+
})
|
|
384
|
+
})
|
|
385
|
+
}), /* @__PURE__ */ L("div", {
|
|
386
|
+
role: "status",
|
|
387
|
+
"aria-live": "polite",
|
|
388
|
+
className: "sr-only",
|
|
389
|
+
children: e ? i.selectionAvailable : r > 0 ? /* @__PURE__ */ L("span", { children: i.attachmentAdded }, r) : null
|
|
390
|
+
})] }), v) : null;
|
|
391
|
+
};
|
|
338
392
|
//#endregion
|
|
339
|
-
export {
|
|
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 };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CodeBlockTheme, DisplayAttachment, MarkdownRendererClassNames, MessageRole, ResponseFormat, StarterOption } from '@epam/ai-dial-chat-shared';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
2
|
+
import { ReactNode, Ref } from 'react';
|
|
3
3
|
import { Components } from 'react-markdown';
|
|
4
4
|
import { BubblePosition } from '../types/bubble-position';
|
|
5
5
|
import { MessageActionsProps } from './message-actions';
|
|
@@ -84,6 +84,8 @@ export interface AssistantMessageBubbleLabels extends MessageBubbleLabels {
|
|
|
84
84
|
}
|
|
85
85
|
/** Shared props for user and assistant message bubble components. */
|
|
86
86
|
interface BaseMessageBubbleProps {
|
|
87
|
+
/** Ref to the text body, excluding attachment trays, actions and host slots. */
|
|
88
|
+
contentRef?: Ref<HTMLDivElement>;
|
|
87
89
|
/** Plain-text (or Markdown) content of the message. When absent, the bubble renders for `beforeContent` alone. */
|
|
88
90
|
text?: string;
|
|
89
91
|
/** Color and typography overrides applied as CSS custom properties. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-bubble.d.ts","sourceRoot":"","sources":["../../src/models/message-bubble.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EACjB,0BAA0B,EAC1B,WAAW,EACX,cAAc,EACd,aAAa,EACd,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"message-bubble.d.ts","sourceRoot":"","sources":["../../src/models/message-bubble.ts"],"names":[],"mappings":"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"}
|
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.
|
|
4
|
+
"version": "1.2.0-dev.162",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./index.js",
|
|
@@ -19,12 +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.
|
|
22
|
+
"@epam/ai-dial-attachment-input": "1.2.0-dev.162"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"react": "^19.2.8",
|
|
26
|
-
"
|
|
27
|
-
"@epam/ai-dial-
|
|
26
|
+
"react-dom": "^19.2.8",
|
|
27
|
+
"@epam/ai-dial-chat-shared": "1.2.0-dev.162",
|
|
28
|
+
"@epam/ai-dial-ui-kit": "^0.15.0-dev.20"
|
|
28
29
|
},
|
|
29
30
|
"repository": {
|
|
30
31
|
"type": "git",
|