@uipath/apollo-react 4.53.1 → 4.54.1

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 (13) hide show
  1. package/dist/canvas/components/BaseNode/NodeLabel.cjs +44 -24
  2. package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map +1 -1
  3. package/dist/canvas/components/BaseNode/NodeLabel.js +44 -24
  4. package/dist/material/components/ap-chat/components/message/chat-message-content.cjs +1 -0
  5. package/dist/material/components/ap-chat/components/message/chat-message-content.d.ts.map +1 -1
  6. package/dist/material/components/ap-chat/components/message/chat-message-content.js +1 -0
  7. package/dist/material/components/ap-tooltip/useTruncationDetection.cjs +19 -1
  8. package/dist/material/components/ap-tooltip/useTruncationDetection.d.ts.map +1 -1
  9. package/dist/material/components/ap-tooltip/useTruncationDetection.js +19 -1
  10. package/dist/material/stories/chat-story-support.cjs +101 -5
  11. package/dist/material/stories/chat-story-support.d.ts.map +1 -1
  12. package/dist/material/stories/chat-story-support.js +102 -6
  13. package/package.json +1 -1
package/dist/canvas/components/BaseNode/NodeLabel.cjs CHANGED
@@ -45,31 +45,41 @@ const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
45
45
  children: children
46
46
  });
47
47
  };
48
- const ConditionalTooltip = ({ content, children })=>{
48
+ const ConditionalTooltip = ({ content, placement = 'top', children })=>{
49
49
  if (!content) return children;
50
50
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
51
51
  delay: true,
52
- placement: "top",
52
+ placement: placement,
53
53
  content: content,
54
54
  smartTooltip: true,
55
55
  children: children
56
56
  });
57
57
  };
58
- const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
58
+ const Header = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ shape, backgroundColor, onDoubleClick, children, className, style, 'data-testid': dataTestId, ...triggerProps }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
59
+ ...triggerProps,
60
+ ref: ref,
59
61
  "data-testid": dataTestId,
60
62
  onDoubleClick: onDoubleClick,
61
- className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3'),
62
- style: backgroundColor ? {
63
- backgroundColor
64
- } : void 0,
63
+ className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3', className),
64
+ style: {
65
+ ...style,
66
+ ...backgroundColor ? {
67
+ backgroundColor
68
+ } : void 0
69
+ },
65
70
  children: children
66
- });
67
- const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
71
+ }));
72
+ Header.displayName = 'Header';
73
+ const SubHeader = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ shape, onDoubleClick, children, className, style, 'data-testid': dataTestId, ...triggerProps }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
74
+ ...triggerProps,
75
+ ref: ref,
68
76
  "data-testid": dataTestId,
69
77
  onDoubleClick: onDoubleClick,
70
- className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
78
+ className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5', className),
79
+ style: style,
71
80
  children: children
72
- });
81
+ }));
82
+ SubHeader.displayName = 'SubHeader';
73
83
  const EditableLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
74
84
  ref: ref,
75
85
  value: value,
@@ -186,6 +196,9 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
186
196
  centerAdornment
187
197
  ]
188
198
  });
199
+ const headerTooltipContent = labelTooltip ?? label;
200
+ const subHeaderTooltipContent = labelTooltip ?? subLabel;
201
+ const tooltipPlacement = 'rectangle' === shape ? 'top' : 'bottom';
189
202
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(BaseTextContainer, {
190
203
  hasBottomHandles: hasBottomHandles,
191
204
  shape: shape,
@@ -218,21 +231,28 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
218
231
  "aria-label": "Edit node description"
219
232
  })
220
233
  ]
221
- }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(ConditionalTooltip, {
222
- content: labelTooltip,
234
+ }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
223
235
  children: [
224
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Header, {
225
- shape: shape,
226
- backgroundColor: labelBackgroundColor,
227
- onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
228
- "data-testid": "node-label",
229
- children: label
236
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ConditionalTooltip, {
237
+ content: headerTooltipContent,
238
+ placement: tooltipPlacement,
239
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Header, {
240
+ shape: shape,
241
+ backgroundColor: labelBackgroundColor,
242
+ onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
243
+ "data-testid": "node-label",
244
+ children: label
245
+ })
230
246
  }),
231
- subLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SubHeader, {
232
- shape: shape,
233
- onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
234
- "data-testid": "node-sublabel",
235
- children: subLabel
247
+ subLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ConditionalTooltip, {
248
+ content: subHeaderTooltipContent,
249
+ placement: tooltipPlacement,
250
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SubHeader, {
251
+ shape: shape,
252
+ onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
253
+ "data-testid": "node-sublabel",
254
+ children: subLabel
255
+ })
236
256
  })
237
257
  ]
238
258
  }),
package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AA+IF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AA+KD,eAAO,MAAM,SAAS,mLAjKnB,cAAc,6CAiK+B,CAAC"}
1
+ {"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AAqKF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AA2LD,eAAO,MAAM,SAAS,mLA7KnB,cAAc,6CA6K+B,CAAC"}
package/dist/canvas/components/BaseNode/NodeLabel.js CHANGED
@@ -16,31 +16,41 @@ const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
16
16
  children: children
17
17
  });
18
18
  };
19
- const ConditionalTooltip = ({ content, children })=>{
19
+ const ConditionalTooltip = ({ content, placement = 'top', children })=>{
20
20
  if (!content) return children;
21
21
  return /*#__PURE__*/ jsx(CanvasTooltip, {
22
22
  delay: true,
23
- placement: "top",
23
+ placement: placement,
24
24
  content: content,
25
25
  smartTooltip: true,
26
26
  children: children
27
27
  });
28
28
  };
29
- const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
29
+ const Header = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, onDoubleClick, children, className, style, 'data-testid': dataTestId, ...triggerProps }, ref)=>/*#__PURE__*/ jsx("div", {
30
+ ...triggerProps,
31
+ ref: ref,
30
32
  "data-testid": dataTestId,
31
33
  onDoubleClick: onDoubleClick,
32
- className: cx('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3'),
33
- style: backgroundColor ? {
34
- backgroundColor
35
- } : void 0,
34
+ className: cx('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3', className),
35
+ style: {
36
+ ...style,
37
+ ...backgroundColor ? {
38
+ backgroundColor
39
+ } : void 0
40
+ },
36
41
  children: children
37
- });
38
- const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
42
+ }));
43
+ Header.displayName = 'Header';
44
+ const SubHeader = /*#__PURE__*/ forwardRef(({ shape, onDoubleClick, children, className, style, 'data-testid': dataTestId, ...triggerProps }, ref)=>/*#__PURE__*/ jsx("div", {
45
+ ...triggerProps,
46
+ ref: ref,
39
47
  "data-testid": dataTestId,
40
48
  onDoubleClick: onDoubleClick,
41
- className: cx('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
49
+ className: cx('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5', className),
50
+ style: style,
42
51
  children: children
43
- });
52
+ }));
53
+ SubHeader.displayName = 'SubHeader';
44
54
  const EditableLabel = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ jsx("textarea", {
45
55
  ref: ref,
46
56
  value: value,
@@ -157,6 +167,9 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
157
167
  centerAdornment
158
168
  ]
159
169
  });
170
+ const headerTooltipContent = labelTooltip ?? label;
171
+ const subHeaderTooltipContent = labelTooltip ?? subLabel;
172
+ const tooltipPlacement = 'rectangle' === shape ? 'top' : 'bottom';
160
173
  return /*#__PURE__*/ jsxs(BaseTextContainer, {
161
174
  hasBottomHandles: hasBottomHandles,
162
175
  shape: shape,
@@ -189,21 +202,28 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
189
202
  "aria-label": "Edit node description"
190
203
  })
191
204
  ]
192
- }) : /*#__PURE__*/ jsxs(ConditionalTooltip, {
193
- content: labelTooltip,
205
+ }) : /*#__PURE__*/ jsxs(Fragment, {
194
206
  children: [
195
- /*#__PURE__*/ jsx(Header, {
196
- shape: shape,
197
- backgroundColor: labelBackgroundColor,
198
- onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
199
- "data-testid": "node-label",
200
- children: label
207
+ /*#__PURE__*/ jsx(ConditionalTooltip, {
208
+ content: headerTooltipContent,
209
+ placement: tooltipPlacement,
210
+ children: /*#__PURE__*/ jsx(Header, {
211
+ shape: shape,
212
+ backgroundColor: labelBackgroundColor,
213
+ onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
214
+ "data-testid": "node-label",
215
+ children: label
216
+ })
201
217
  }),
202
- subLabel && /*#__PURE__*/ jsx(SubHeader, {
203
- shape: shape,
204
- onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
205
- "data-testid": "node-sublabel",
206
- children: subLabel
218
+ subLabel && /*#__PURE__*/ jsx(ConditionalTooltip, {
219
+ content: subHeaderTooltipContent,
220
+ placement: tooltipPlacement,
221
+ children: /*#__PURE__*/ jsx(SubHeader, {
222
+ shape: shape,
223
+ onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
224
+ "data-testid": "node-sublabel",
225
+ children: subLabel
226
+ })
207
227
  })
208
228
  ]
209
229
  }),
package/dist/material/components/ap-chat/components/message/chat-message-content.cjs CHANGED
@@ -69,6 +69,7 @@ const getApolloMessageRenderers = (locale)=>[
69
69
  isError: message.meta.isError,
70
70
  startTime: message.meta.startTime,
71
71
  endTime: message.meta.endTime,
72
+ displayMode: message.meta.displayMode,
72
73
  locale: locale
73
74
  });
74
75
  }
package/dist/material/components/ap-chat/components/message/chat-message-content.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"chat-message-content.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/message/chat-message-content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAKL,KAAK,oBAAoB,EAQ1B,MAAM,eAAe,CAAC;AAuKvB,iBAAS,oCAAoC,CAAC,EAC5C,OAAO,EACP,aAAoB,EACpB,cAAsB,EACtB,YAAY,GACb,EAAE;IACD,OAAO,EAAE,oBAAoB,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;CACrC,kDAkDA;AAED,eAAO,MAAM,2BAA2B,wEAAmD,CAAC"}
1
+ {"version":3,"file":"chat-message-content.d.ts","sourceRoot":"","sources":["../../../../../../src/material/components/ap-chat/components/message/chat-message-content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAKL,KAAK,oBAAoB,EAQ1B,MAAM,eAAe,CAAC;AAwKvB,iBAAS,oCAAoC,CAAC,EAC5C,OAAO,EACP,aAAoB,EACpB,cAAsB,EACtB,YAAY,GACb,EAAE;IACD,OAAO,EAAE,oBAAoB,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;CACrC,kDAkDA;AAED,eAAO,MAAM,2BAA2B,wEAAmD,CAAC"}
package/dist/material/components/ap-chat/components/message/chat-message-content.js CHANGED
@@ -30,6 +30,7 @@ const getApolloMessageRenderers = (locale)=>[
30
30
  isError: message.meta.isError,
31
31
  startTime: message.meta.startTime,
32
32
  endTime: message.meta.endTime,
33
+ displayMode: message.meta.displayMode,
33
34
  locale: locale
34
35
  });
35
36
  }
package/dist/material/components/ap-tooltip/useTruncationDetection.cjs CHANGED
@@ -28,6 +28,22 @@ __webpack_require__.d(__webpack_exports__, {
28
28
  });
29
29
  const external_react_namespaceObject = require("react");
30
30
  const TOOLTIP_TARGET_ELEMENT = 'tooltip-target-element';
31
+ function getLineClamp(computedStyle) {
32
+ return computedStyle.getPropertyValue('-webkit-line-clamp') || computedStyle.WebkitLineClamp;
33
+ }
34
+ function hasLineClamp(computedStyle) {
35
+ const lineClamp = getLineClamp(computedStyle);
36
+ return Boolean(lineClamp && 'none' !== lineClamp);
37
+ }
38
+ function isTruncationStyleCandidate(element) {
39
+ const computedStyle = window.getComputedStyle(element);
40
+ return 'ellipsis' === computedStyle.textOverflow || hasLineClamp(computedStyle);
41
+ }
42
+ function findTruncationStyleCandidate(element) {
43
+ if (!(element instanceof HTMLElement)) return;
44
+ if (isTruncationStyleCandidate(element)) return element;
45
+ return Array.from(element.children).find((child)=>child instanceof HTMLElement && isTruncationStyleCandidate(child));
46
+ }
31
47
  function useTruncationDetection(elementRef) {
32
48
  const [isTruncated, setIsTruncated] = (0, external_react_namespaceObject.useState)(false);
33
49
  const hasCheckedRef = (0, external_react_namespaceObject.useRef)(false);
@@ -49,15 +65,17 @@ function useTruncationDetection(elementRef) {
49
65
  const rootNode = element.getRootNode();
50
66
  if (rootNode instanceof ShadowRoot) {
51
67
  const hostElement = rootNode.host;
52
- const slottedElement = hostElement.querySelector('div[data-slot-name="children"]') || Array.from(hostElement.children).find((child)=>child instanceof HTMLElement && 'ellipsis' === window.getComputedStyle(child).textOverflow);
68
+ const slottedElement = findTruncationStyleCandidate(hostElement.querySelector('div[data-slot-name="children"]')) || Array.from(hostElement.children).map((child)=>findTruncationStyleCandidate(child)).find(Boolean);
53
69
  if (slottedElement instanceof HTMLElement) targetElement = slottedElement;
54
70
  }
55
71
  }
56
72
  }
57
73
  const computedStyle = window.getComputedStyle(targetElement);
74
+ const isLineClamped = hasLineClamp(computedStyle);
58
75
  const hasEllipsis = 'ellipsis' === computedStyle.textOverflow;
59
76
  const hasOverflowHidden = 'hidden' === computedStyle.overflow || 'hidden' === computedStyle.overflowX;
60
77
  const hasWhiteSpaceNowrap = 'nowrap' === computedStyle.whiteSpace;
78
+ if (isLineClamped) return void setIsTruncated(targetElement.scrollHeight > targetElement.clientHeight);
61
79
  if (!hasEllipsis || !hasOverflowHidden || !hasWhiteSpaceNowrap) return void setIsTruncated(false);
62
80
  const isElementTruncated = targetElement.scrollWidth > targetElement.clientWidth;
63
81
  setIsTruncated(isElementTruncated);
package/dist/material/components/ap-tooltip/useTruncationDetection.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useTruncationDetection.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-tooltip/useTruncationDetection.ts"],"names":[],"mappings":"AAIA,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG;IACvF,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAgGA"}
1
+ {"version":3,"file":"useTruncationDetection.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-tooltip/useTruncationDetection.ts"],"names":[],"mappings":"AAoCA,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG;IACvF,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAuGA"}
package/dist/material/components/ap-tooltip/useTruncationDetection.js CHANGED
@@ -1,5 +1,21 @@
1
1
  import { useCallback, useEffect, useRef, useState } from "react";
2
2
  const TOOLTIP_TARGET_ELEMENT = 'tooltip-target-element';
3
+ function getLineClamp(computedStyle) {
4
+ return computedStyle.getPropertyValue('-webkit-line-clamp') || computedStyle.WebkitLineClamp;
5
+ }
6
+ function hasLineClamp(computedStyle) {
7
+ const lineClamp = getLineClamp(computedStyle);
8
+ return Boolean(lineClamp && 'none' !== lineClamp);
9
+ }
10
+ function isTruncationStyleCandidate(element) {
11
+ const computedStyle = window.getComputedStyle(element);
12
+ return 'ellipsis' === computedStyle.textOverflow || hasLineClamp(computedStyle);
13
+ }
14
+ function findTruncationStyleCandidate(element) {
15
+ if (!(element instanceof HTMLElement)) return;
16
+ if (isTruncationStyleCandidate(element)) return element;
17
+ return Array.from(element.children).find((child)=>child instanceof HTMLElement && isTruncationStyleCandidate(child));
18
+ }
3
19
  function useTruncationDetection(elementRef) {
4
20
  const [isTruncated, setIsTruncated] = useState(false);
5
21
  const hasCheckedRef = useRef(false);
@@ -21,15 +37,17 @@ function useTruncationDetection(elementRef) {
21
37
  const rootNode = element.getRootNode();
22
38
  if (rootNode instanceof ShadowRoot) {
23
39
  const hostElement = rootNode.host;
24
- const slottedElement = hostElement.querySelector('div[data-slot-name="children"]') || Array.from(hostElement.children).find((child)=>child instanceof HTMLElement && 'ellipsis' === window.getComputedStyle(child).textOverflow);
40
+ const slottedElement = findTruncationStyleCandidate(hostElement.querySelector('div[data-slot-name="children"]')) || Array.from(hostElement.children).map((child)=>findTruncationStyleCandidate(child)).find(Boolean);
25
41
  if (slottedElement instanceof HTMLElement) targetElement = slottedElement;
26
42
  }
27
43
  }
28
44
  }
29
45
  const computedStyle = window.getComputedStyle(targetElement);
46
+ const isLineClamped = hasLineClamp(computedStyle);
30
47
  const hasEllipsis = 'ellipsis' === computedStyle.textOverflow;
31
48
  const hasOverflowHidden = 'hidden' === computedStyle.overflow || 'hidden' === computedStyle.overflowX;
32
49
  const hasWhiteSpaceNowrap = 'nowrap' === computedStyle.whiteSpace;
50
+ if (isLineClamped) return void setIsTruncated(targetElement.scrollHeight > targetElement.clientHeight);
33
51
  if (!hasEllipsis || !hasOverflowHidden || !hasWhiteSpaceNowrap) return void setIsTruncated(false);
34
52
  const isElementTruncated = targetElement.scrollWidth > targetElement.clientWidth;
35
53
  setIsTruncated(isElementTruncated);
package/dist/material/stories/chat-story-support.cjs CHANGED
@@ -1203,11 +1203,99 @@ console.log(processUserData(exampleUser, { source: 'web', ipAddress: '192.168.1.
1203
1203
  }
1204
1204
  ], true);
1205
1205
  };
1206
- const sendToolCall = ()=>{
1206
+ const sendToolCall = (displayMode)=>{
1207
+ const now = new Date().toISOString();
1208
+ const start = new Date(Date.now() - 2500).toISOString();
1209
+ if (displayMode === external_components_index_cjs_namespaceObject.ConversationalDisplayModeTypes.FullTrace) return void chatService?.sendResponse({
1210
+ content: 'Tool call response',
1211
+ widget: 'apollo-agents-tool-call',
1212
+ meta: {
1213
+ displayMode,
1214
+ span: {
1215
+ key: 'multi-web-search',
1216
+ name: 'Tool call - Multi_Web_Search',
1217
+ data: {
1218
+ id: 'root-span',
1219
+ name: 'Tool call - Multi_Web_Search',
1220
+ startTime: new Date(Date.now() - 25000).toISOString(),
1221
+ endTime: now,
1222
+ status: 'ok',
1223
+ type: 'toolCall',
1224
+ attributes: {
1225
+ toolName: 'Multi_Web_Search',
1226
+ toolType: 'Agent',
1227
+ arguments: {
1228
+ query: 'what are trending right now'
1229
+ },
1230
+ result: {
1231
+ result: 'Multi web search completed successfully.'
1232
+ }
1233
+ }
1234
+ },
1235
+ children: [
1236
+ {
1237
+ key: 'autonomous-web-search',
1238
+ name: 'Autonomous Web Search',
1239
+ data: {
1240
+ id: 'agentTool-1',
1241
+ name: 'Autonomous Web Search',
1242
+ startTime: new Date(Date.now() - 25000).toISOString(),
1243
+ endTime: now,
1244
+ status: 'ok',
1245
+ type: 'agentTool'
1246
+ },
1247
+ children: [
1248
+ {
1249
+ key: 'agent-run-1',
1250
+ name: 'Agent run - Autonomous Web Search',
1251
+ data: {
1252
+ id: 'agentRun-1',
1253
+ name: 'Agent run - Autonomous Web Search',
1254
+ startTime: new Date(Date.now() - 23000).toISOString(),
1255
+ endTime: now,
1256
+ status: 'ok',
1257
+ type: 'agentRun'
1258
+ },
1259
+ children: [
1260
+ {
1261
+ key: 'tool-call-web-search-1',
1262
+ name: 'Tool call - Web_Search',
1263
+ data: {
1264
+ id: 'ws1',
1265
+ name: 'Tool call - Web_Search',
1266
+ type: 'toolCall',
1267
+ status: 'ok',
1268
+ startTime: new Date(Date.now() - 21000).toISOString(),
1269
+ endTime: new Date(Date.now() - 17000).toISOString()
1270
+ },
1271
+ children: []
1272
+ },
1273
+ {
1274
+ key: 'tool-call-web-search-2',
1275
+ name: 'Tool call - Web_Search',
1276
+ data: {
1277
+ id: 'ws2',
1278
+ name: 'Tool call - Web_Search',
1279
+ type: 'toolCall',
1280
+ status: 'ok',
1281
+ startTime: new Date(Date.now() - 16000).toISOString(),
1282
+ endTime: new Date(Date.now() - 10000).toISOString()
1283
+ },
1284
+ children: []
1285
+ }
1286
+ ]
1287
+ }
1288
+ ]
1289
+ }
1290
+ ]
1291
+ }
1292
+ }
1293
+ });
1207
1294
  chatService?.sendResponse({
1208
1295
  content: 'Tool call response',
1209
1296
  widget: 'apollo-agents-tool-call',
1210
1297
  meta: {
1298
+ displayMode,
1211
1299
  input: {
1212
1300
  provider: 'GoogleCustomSearch',
1213
1301
  query: 'most interesting scientific fact discovered recently 2025',
@@ -1223,8 +1311,8 @@ console.log(processUserData(exampleUser, { source: 'web', ipAddress: '192.168.1.
1223
1311
  ]
1224
1312
  },
1225
1313
  isError: false,
1226
- startTime: new Date().toISOString(),
1227
- endTime: new Date().toISOString(),
1314
+ startTime: start,
1315
+ endTime: now,
1228
1316
  toolName: 'Web_Search'
1229
1317
  }
1230
1318
  });
@@ -2065,8 +2153,16 @@ console.log(processUserData(exampleUser, { source: 'web', ipAddress: '192.168.1.
2065
2153
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(ButtonGroup, {
2066
2154
  children: [
2067
2155
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DemoButton, {
2068
- onClick: sendToolCall,
2069
- children: "Send Tool Call"
2156
+ onClick: ()=>sendToolCall(external_components_index_cjs_namespaceObject.ConversationalDisplayModeTypes.ToolNameOnly),
2157
+ children: "Tool Call: Name Only"
2158
+ }),
2159
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DemoButton, {
2160
+ onClick: ()=>sendToolCall(external_components_index_cjs_namespaceObject.ConversationalDisplayModeTypes.InputsAndOutputs),
2161
+ children: "Tool Call: I/O"
2162
+ }),
2163
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DemoButton, {
2164
+ onClick: ()=>sendToolCall(external_components_index_cjs_namespaceObject.ConversationalDisplayModeTypes.FullTrace),
2165
+ children: "Tool Call: Full Trace"
2070
2166
  }),
2071
2167
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DemoButton, {
2072
2168
  onClick: sendResponseDisabledActions,
package/dist/material/stories/chat-story-support.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"chat-story-support.d.ts","sourceRoot":"","sources":["../../../src/material/stories/chat-story-support.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,KAAK,WAAW,EAGhB,iBAAiB,EAKjB,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAmCvB,wBAAgB,eAAe,CAAC,YAAY,EAAE,OAAO,GAAG,eAAe,CAItE;AAED,wBAAgB,cAAc,CAAC,WAAW,EAAE,OAAO,GAAG,WAAW,CAiBhE;AAsID,MAAM,WAAW,qBAAqB;IAEpC,KAAK,EAAE,WAAW,CAAC;IAMnB,YAAY,EAAE,MAAM,CAAC;IAErB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAEhC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EACZ,WAA0C,EAC1C,MAAa,GACd,EAAE,qBAAqB,2CAuhEvB"}
1
+ {"version":3,"file":"chat-story-support.d.ts","sourceRoot":"","sources":["../../../src/material/stories/chat-story-support.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,KAAK,WAAW,EAGhB,iBAAiB,EAMjB,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAmCvB,wBAAgB,eAAe,CAAC,YAAY,EAAE,OAAO,GAAG,eAAe,CAItE;AAED,wBAAgB,cAAc,CAAC,WAAW,EAAE,OAAO,GAAG,WAAW,CAiBhE;AAsID,MAAM,WAAW,qBAAqB;IAEpC,KAAK,EAAE,WAAW,CAAC;IAMnB,YAAY,EAAE,MAAM,CAAC;IAErB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAEhC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EACZ,WAA0C,EAC1C,MAAa,GACd,EAAE,qBAAqB,2CA2nEvB"}
package/dist/material/stories/chat-story-support.js CHANGED
@@ -8,7 +8,7 @@ import TextField from "@mui/material/TextField";
8
8
  import Typography from "@mui/material/Typography";
9
9
  import { useCallback, useEffect, useRef, useState } from "react";
10
10
  import { FontVariantToken } from "../../core/index.js";
11
- import { ApChat, ApTypography, AutopilotChatEvent, AutopilotChatMode, AutopilotChatRole, AutopilotChatService } from "../components/index.js";
11
+ import { ApChat, ApTypography, AutopilotChatEvent, AutopilotChatMode, AutopilotChatRole, AutopilotChatService, ConversationalDisplayModeTypes } from "../components/index.js";
12
12
  const CHAT_LOCALES = [
13
13
  'en',
14
14
  'de',
@@ -1157,11 +1157,99 @@ console.log(processUserData(exampleUser, { source: 'web', ipAddress: '192.168.1.
1157
1157
  }
1158
1158
  ], true);
1159
1159
  };
1160
- const sendToolCall = ()=>{
1160
+ const sendToolCall = (displayMode)=>{
1161
+ const now = new Date().toISOString();
1162
+ const start = new Date(Date.now() - 2500).toISOString();
1163
+ if (displayMode === ConversationalDisplayModeTypes.FullTrace) return void chatService?.sendResponse({
1164
+ content: 'Tool call response',
1165
+ widget: 'apollo-agents-tool-call',
1166
+ meta: {
1167
+ displayMode,
1168
+ span: {
1169
+ key: 'multi-web-search',
1170
+ name: 'Tool call - Multi_Web_Search',
1171
+ data: {
1172
+ id: 'root-span',
1173
+ name: 'Tool call - Multi_Web_Search',
1174
+ startTime: new Date(Date.now() - 25000).toISOString(),
1175
+ endTime: now,
1176
+ status: 'ok',
1177
+ type: 'toolCall',
1178
+ attributes: {
1179
+ toolName: 'Multi_Web_Search',
1180
+ toolType: 'Agent',
1181
+ arguments: {
1182
+ query: 'what are trending right now'
1183
+ },
1184
+ result: {
1185
+ result: 'Multi web search completed successfully.'
1186
+ }
1187
+ }
1188
+ },
1189
+ children: [
1190
+ {
1191
+ key: 'autonomous-web-search',
1192
+ name: 'Autonomous Web Search',
1193
+ data: {
1194
+ id: 'agentTool-1',
1195
+ name: 'Autonomous Web Search',
1196
+ startTime: new Date(Date.now() - 25000).toISOString(),
1197
+ endTime: now,
1198
+ status: 'ok',
1199
+ type: 'agentTool'
1200
+ },
1201
+ children: [
1202
+ {
1203
+ key: 'agent-run-1',
1204
+ name: 'Agent run - Autonomous Web Search',
1205
+ data: {
1206
+ id: 'agentRun-1',
1207
+ name: 'Agent run - Autonomous Web Search',
1208
+ startTime: new Date(Date.now() - 23000).toISOString(),
1209
+ endTime: now,
1210
+ status: 'ok',
1211
+ type: 'agentRun'
1212
+ },
1213
+ children: [
1214
+ {
1215
+ key: 'tool-call-web-search-1',
1216
+ name: 'Tool call - Web_Search',
1217
+ data: {
1218
+ id: 'ws1',
1219
+ name: 'Tool call - Web_Search',
1220
+ type: 'toolCall',
1221
+ status: 'ok',
1222
+ startTime: new Date(Date.now() - 21000).toISOString(),
1223
+ endTime: new Date(Date.now() - 17000).toISOString()
1224
+ },
1225
+ children: []
1226
+ },
1227
+ {
1228
+ key: 'tool-call-web-search-2',
1229
+ name: 'Tool call - Web_Search',
1230
+ data: {
1231
+ id: 'ws2',
1232
+ name: 'Tool call - Web_Search',
1233
+ type: 'toolCall',
1234
+ status: 'ok',
1235
+ startTime: new Date(Date.now() - 16000).toISOString(),
1236
+ endTime: new Date(Date.now() - 10000).toISOString()
1237
+ },
1238
+ children: []
1239
+ }
1240
+ ]
1241
+ }
1242
+ ]
1243
+ }
1244
+ ]
1245
+ }
1246
+ }
1247
+ });
1161
1248
  chatService?.sendResponse({
1162
1249
  content: 'Tool call response',
1163
1250
  widget: 'apollo-agents-tool-call',
1164
1251
  meta: {
1252
+ displayMode,
1165
1253
  input: {
1166
1254
  provider: 'GoogleCustomSearch',
1167
1255
  query: 'most interesting scientific fact discovered recently 2025',
@@ -1177,8 +1265,8 @@ console.log(processUserData(exampleUser, { source: 'web', ipAddress: '192.168.1.
1177
1265
  ]
1178
1266
  },
1179
1267
  isError: false,
1180
- startTime: new Date().toISOString(),
1181
- endTime: new Date().toISOString(),
1268
+ startTime: start,
1269
+ endTime: now,
1182
1270
  toolName: 'Web_Search'
1183
1271
  }
1184
1272
  });
@@ -2019,8 +2107,16 @@ console.log(processUserData(exampleUser, { source: 'web', ipAddress: '192.168.1.
2019
2107
  /*#__PURE__*/ jsxs(ButtonGroup, {
2020
2108
  children: [
2021
2109
  /*#__PURE__*/ jsx(DemoButton, {
2022
- onClick: sendToolCall,
2023
- children: "Send Tool Call"
2110
+ onClick: ()=>sendToolCall(ConversationalDisplayModeTypes.ToolNameOnly),
2111
+ children: "Tool Call: Name Only"
2112
+ }),
2113
+ /*#__PURE__*/ jsx(DemoButton, {
2114
+ onClick: ()=>sendToolCall(ConversationalDisplayModeTypes.InputsAndOutputs),
2115
+ children: "Tool Call: I/O"
2116
+ }),
2117
+ /*#__PURE__*/ jsx(DemoButton, {
2118
+ onClick: ()=>sendToolCall(ConversationalDisplayModeTypes.FullTrace),
2119
+ children: "Tool Call: Full Trace"
2024
2120
  }),
2025
2121
  /*#__PURE__*/ jsx(DemoButton, {
2026
2122
  onClick: sendResponseDisabledActions,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "4.53.1",
3
+ "version": "4.54.1",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",