@epam/ai-dial-skills 1.2.0-dev.120 → 1.2.0-dev.125

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 (10) hide show
  1. package/components/FavoriteSkillsPanel/FavoriteSkillsPanel.d.ts.map +1 -1
  2. package/components/SkillInfoTooltipContent/SkillInfoTooltipContent.d.ts.map +1 -1
  3. package/hooks/useSkillSelectorOverlay/useSkillSelectorOverlay.d.ts.map +1 -1
  4. package/index.css +1 -1
  5. package/index.js +240 -224
  6. package/models/favorite-skills-panel-props.d.ts +24 -1
  7. package/models/favorite-skills-panel-props.d.ts.map +1 -1
  8. package/models/skill-info-tooltip-content-props.d.ts +6 -0
  9. package/models/skill-info-tooltip-content-props.d.ts.map +1 -1
  10. package/package.json +5 -5
package/components/FavoriteSkillsPanel/FavoriteSkillsPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FavoriteSkillsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/FavoriteSkillsPanel/FavoriteSkillsPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAKL,KAAK,EAAE,EAER,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AAYzF,sHAAsH;AACtH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA4Q5D,CAAC"}
1
+ {"version":3,"file":"FavoriteSkillsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/FavoriteSkillsPanel/FavoriteSkillsPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAML,KAAK,EAAE,EAER,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AAYzF,sHAAsH;AACtH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAqT5D,CAAC"}
package/components/SkillInfoTooltipContent/SkillInfoTooltipContent.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SkillInfoTooltipContent.d.ts","sourceRoot":"","sources":["../../../src/components/SkillInfoTooltipContent/SkillInfoTooltipContent.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,+CAA+C,CAAC;AAElG,kJAAkJ;AAClJ,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA8CpE,CAAC"}
1
+ {"version":3,"file":"SkillInfoTooltipContent.d.ts","sourceRoot":"","sources":["../../../src/components/SkillInfoTooltipContent/SkillInfoTooltipContent.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,+CAA+C,CAAC;AAElG,kJAAkJ;AAClJ,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAgDpE,CAAC"}
package/hooks/useSkillSelectorOverlay/useSkillSelectorOverlay.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useSkillSelectorOverlay.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSkillSelectorOverlay/useSkillSelectorOverlay.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EACV,8BAA8B,EAC9B,6BAA6B,EAC9B,MAAM,qCAAqC,CAAC;AAG7C;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAAI,6MAYrC,8BAA8B,KAAG,6BA0TnC,CAAC"}
1
+ {"version":3,"file":"useSkillSelectorOverlay.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSkillSelectorOverlay/useSkillSelectorOverlay.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EACV,8BAA8B,EAC9B,6BAA6B,EAC9B,MAAM,qCAAqC,CAAC;AAG7C;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAAI,6MAYrC,8BAA8B,KAAG,6BA8TnC,CAAC"}
package/index.css CHANGED
@@ -1,2 +1,2 @@
1
- ._row_1ovug_1:hover,._row_1ovug_1:focus-visible{background:var(--fs-row-hover-bg,var(--bg-layer-sunken,#eef1f7))}._header_1ovug_5{color:var(--fs-header-text,var(--text-tertiary,#848e9c))}._emptyHint_1ovug_9{color:var(--fs-empty-hint-text,var(--text-icon-tertiary,#848e9c))}._star_1ovug_13{color:var(--fs-star-color,var(--text-warning-icon,#eec840))}._footer_1ovug_17{border-top-color:var(--fs-footer-border,var(--stroke-tertiary,#e0e6f0))}._rowEnter_1ovug_25{animation:.2s ease-out _rowFadeIn_1ovug_1}._rowLeaving_1ovug_29{pointer-events:none;animation:.18s ease-out forwards _rowFadeOut_1ovug_1}@keyframes _rowFadeIn_1ovug_1{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes _rowFadeOut_1ovug_1{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}._listContent_1ovug_57{transition:max-height .2s}@media (prefers-reduced-motion:reduce){._rowEnter_1ovug_25,._rowLeaving_1ovug_29{animation:none}._listContent_1ovug_57{transition:none}}._background_14zdf_1{background:var(--ssf-bg)}._border_14zdf_5{border-color:var(--ssf-border)}._value_14zdf_9{color:var(--ssf-text)}._clear_14zdf_13{margin-block:-.5rem}._invalid_14zdf_17{color:var(--ssf-error,var(--text-error,#9c2222));border-color:var(--ssf-error,var(--text-error,#9c2222))}._invalid_14zdf_17 input{color:var(--ssf-error,var(--text-error,#9c2222))}
1
+ ._row_1v431_1:hover,._row_1v431_1:focus-visible,._row_1v431_1[aria-selected=true]{background:var(--fs-row-hover-bg,var(--bg-layer-sunken,#eef1f7))}._header_1v431_8{color:var(--fs-header-text,var(--text-tertiary,#848e9c))}._emptyHint_1v431_12{color:var(--fs-empty-hint-text,var(--text-icon-tertiary,#848e9c))}._star_1v431_16{color:var(--fs-star-color,var(--text-warning-icon,#eec840))}._footer_1v431_20{border-top-color:var(--fs-footer-border,var(--stroke-tertiary,#e0e6f0))}._rowEnter_1v431_28{animation:.2s ease-out _rowFadeIn_1v431_1}._rowLeaving_1v431_32{pointer-events:none;animation:.18s ease-out forwards _rowFadeOut_1v431_1}@keyframes _rowFadeIn_1v431_1{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes _rowFadeOut_1v431_1{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}._listContent_1v431_60{transition:max-height .2s}@media (prefers-reduced-motion:reduce){._rowEnter_1v431_28,._rowLeaving_1v431_32{animation:none}._listContent_1v431_60{transition:none}}._background_14zdf_1{background:var(--ssf-bg)}._border_14zdf_5{border-color:var(--ssf-border)}._value_14zdf_9{color:var(--ssf-text)}._clear_14zdf_13{margin-block:-.5rem}._invalid_14zdf_17{color:var(--ssf-error,var(--text-error,#9c2222));border-color:var(--ssf-error,var(--text-error,#9c2222))}._invalid_14zdf_17 input{color:var(--ssf-error,var(--text-error,#9c2222))}
2
2
  /*$vite$:1*/.visible{visibility:visible}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.size-11{height:2.75rem;width:2.75rem}.h-\[24px\]{height:24px}.h-\[40px\]{height:40px}.h-\[min\(80vh\2c 840px\)\]{height:min(80vh,840px)}.h-\[min\(90vh\2c 860px\)\]{height:min(90vh,860px)}.h-auto{height:auto}.max-h-72{max-height:18rem}.min-h-0{min-height:0}.min-h-11{min-height:2.75rem}.w-\[min\(var\(--reference-width\)\2c calc\(100vw-2rem\)\)\]{width:min(var(--reference-width),calc(100vw - 2rem))}.w-full{width:100%}.min-w-0{min-width:0}.\!max-w-\[min\(95vw\2c 1200px\)\]{max-width:min(95vw,1200px)!important}.max-w-\[550px\]{max-width:550px}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.rotate-180{--tw-rotate:180deg;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))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.self-start{align-self:flex-start}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.text-ellipsis,.truncate{text-overflow:ellipsis}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-t{border-top-width:1px}.border-transparent{border-color:transparent}.bg-error{background-color:var(--bg-error,#f3d6d8)}.p-2{padding:.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-bottom:0;padding-top:0}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.pb-0{padding-bottom:0}.pb-0\.5{padding-bottom:.125rem}.pb-1{padding-bottom:.25rem}.pt-2{padding-top:.5rem}.text-start{text-align:start}.text-error{color:var(--text-error,#ae2f2f)}.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)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:1280px){.desktop\:inline{display:inline}.desktop\:hidden{display:none}.desktop\:w-\[280px\]{width:280px}.desktop\:w-full{width:100%}}
package/index.js CHANGED
@@ -1,198 +1,211 @@
1
1
  import { DeploymentIcon as e, buildCssVars as t, isSkillSelectionUnsupported as n, mergeClasses as r } from "@epam/ai-dial-chat-shared";
2
2
  import { BASE_ICON_SIZE as i, Button as a, ButtonAppearance as o, ButtonVariant as s, DIAL_ICON_SIZE as c, DIAL_KIT_ICON_STROKE as l, Dropdown as u, FileDropzone as d, GhostButton as f, Highlight as p, Input as m, InteractiveTooltip as h, Popup as g, PopupSize as _, Search as v, ToggleIconButton as y, TooltipPlacement as b } from "@epam/ai-dial-ui-kit";
3
- import { Suspense as x, useCallback as S, useEffect as C, useId as w, useLayoutEffect as T, useMemo as E, useRef as D, useState as O } from "react";
4
- import { IconBlocks as k, IconChevronDown as A, IconEye as j, IconStarFilled as M, IconX as N } from "@tabler/icons-react";
5
- import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
6
- import { DetailsPanel as L } from "@epam/ai-dial-catalog";
3
+ import { Suspense as x, useCallback as S, useEffect as ee, useId as C, useLayoutEffect as w, useMemo as T, useRef as E, useState as D } from "react";
4
+ import { IconBlocks as O, IconChevronDown as k, IconEye as A, IconStarFilled as j, IconX as M } from "@tabler/icons-react";
5
+ import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
6
+ import { DetailsPanel as I } from "@epam/ai-dial-catalog";
7
7
  //#region src/constants/public-class-names.ts
8
- var R = {
8
+ var L = {
9
9
  selectorField: "dial-skills-selector-field",
10
10
  favoritesPanel: "dial-skills-favorites-panel",
11
11
  chip: "dial-skills-chip"
12
- }, z = ({ description: e, unsupportedMessage: t, viewDetailsLabel: n = "View details", onViewDetails: r }) => t == null ? /* @__PURE__ */ I("div", {
12
+ }, R = ({ description: e, unsupportedMessage: t, viewDetailsLabel: n = "View details", onViewDetails: r, viewDetailsTabIndex: i }) => t == null ? /* @__PURE__ */ F("div", {
13
13
  className: "flex flex-col gap-3",
14
- children: [e != null && e !== "" && /* @__PURE__ */ F("p", {
14
+ children: [e != null && e !== "" && /* @__PURE__ */ P("p", {
15
15
  className: "text-start",
16
16
  children: e
17
- }), /* @__PURE__ */ F(a, {
17
+ }), /* @__PURE__ */ P(a, {
18
18
  variant: s.Primary,
19
19
  appearance: o.Link,
20
20
  className: "h-[24px] self-start",
21
21
  label: n,
22
- iconBefore: /* @__PURE__ */ F(j, {
22
+ iconBefore: /* @__PURE__ */ P(A, {
23
23
  size: c.SM,
24
24
  stroke: l,
25
25
  "aria-hidden": !0
26
26
  }),
27
- onClick: r
27
+ onClick: r,
28
+ tabIndex: i
28
29
  })]
29
- }) : /* @__PURE__ */ F("p", {
30
+ }) : /* @__PURE__ */ P("p", {
30
31
  className: "text-start",
31
32
  children: t
32
- }), B = ({ name: e, path: t, description: n, isUnsupported: i = !1, labelClassName: a = "dial-body-paragraph-text", unsupportedLabelClassName: o = "text-error", unsupportedClassName: s = "bg-error", onViewDetails: c, labels: l = {} }) => {
33
- let { viewDetailsLabel: u = "View details", unsupportedTooltipLabel: d = "Selected model does not support skills. Remove the skill or select different model to proceed." } = l, [p, m] = O(0);
34
- return /* @__PURE__ */ F(h, {
33
+ }), z = ({ name: e, path: t, description: n, isUnsupported: i = !1, labelClassName: a = "dial-body-paragraph-text", unsupportedLabelClassName: o = "text-error", unsupportedClassName: s = "bg-error", onViewDetails: c, labels: l = {} }) => {
34
+ let { viewDetailsLabel: u = "View details", unsupportedTooltipLabel: d = "Selected model does not support skills. Remove the skill or select different model to proceed." } = l, [p, m] = D(0);
35
+ return /* @__PURE__ */ P(h, {
35
36
  asChild: !0,
36
37
  placement: b.Top,
37
38
  contentClassName: "max-w-[550px]",
38
- content: i ? /* @__PURE__ */ F(z, { unsupportedMessage: d }) : /* @__PURE__ */ F(z, {
39
+ content: i ? /* @__PURE__ */ P(R, { unsupportedMessage: d }) : /* @__PURE__ */ P(R, {
39
40
  description: n,
40
41
  viewDetailsLabel: u,
41
42
  onViewDetails: () => {
42
43
  m((e) => e + 1), c(t);
43
44
  }
44
45
  }),
45
- children: /* @__PURE__ */ F("span", {
46
+ children: /* @__PURE__ */ P("span", {
46
47
  className: "inline-flex items-center",
47
- children: /* @__PURE__ */ F(f, {
48
+ children: /* @__PURE__ */ P(f, {
48
49
  label: `/${e}`,
49
50
  textClassName: i ? r(a, o) : a,
50
- className: r("h-auto px-2 py-0", i && s, R.chip)
51
+ className: r("h-auto px-2 py-0", i && s, L.chip)
51
52
  })
52
53
  })
53
54
  }, p);
54
- }, V = {
55
- row: "_row_1ovug_1",
56
- header: "_header_1ovug_5",
57
- emptyHint: "_emptyHint_1ovug_9",
58
- star: "_star_1ovug_13",
59
- footer: "_footer_1ovug_17",
60
- rowEnter: "_rowEnter_1ovug_25",
61
- rowFadeIn: "_rowFadeIn_1ovug_1",
62
- rowLeaving: "_rowLeaving_1ovug_29",
63
- rowFadeOut: "_rowFadeOut_1ovug_1",
64
- listContent: "_listContent_1ovug_57"
65
- }, H = "px-3 pb-0.5 pt-2", U = 180, W = 288, G = ({ favorites: n, onSelect: i, onToggleFavorite: a, onBrowse: o, onViewDetails: s, className: l, rowClassName: u, searchQuery: d, labels: m = {}, colors: g, nameClassName: _ = "dial-small-text", headerClassName: v = "dial-tiny-lead-semi-text", emptyHintClassName: b = "dial-small-text" }) => {
66
- let { myCollectionLabel: x = "My Collection", emptyHintLabel: S = "Star a skill to pin it here", browseLabel: w = "Browse", removeFromFavoritesLabel: E = "Remove from favorites", viewDetailsLabel: k = "View details", noMatchingSkillsLabel: A = "No matching skills" } = m, j = t({
67
- "--fs-row-hover-bg": g?.rowHoverBackground,
68
- "--fs-header-text": g?.headerText,
69
- "--fs-empty-hint-text": g?.emptyHintText,
70
- "--fs-star-color": g?.starColor,
71
- "--fs-footer-border": g?.footerBorder
72
- }), [N, P] = O(/* @__PURE__ */ new Set()), L = D(/* @__PURE__ */ new Map());
73
- C(() => {
74
- let e = L.current;
55
+ }, B = {
56
+ row: "_row_1v431_1",
57
+ header: "_header_1v431_8",
58
+ emptyHint: "_emptyHint_1v431_12",
59
+ star: "_star_1v431_16",
60
+ footer: "_footer_1v431_20",
61
+ rowEnter: "_rowEnter_1v431_28",
62
+ rowFadeIn: "_rowFadeIn_1v431_1",
63
+ rowLeaving: "_rowLeaving_1v431_32",
64
+ rowFadeOut: "_rowFadeOut_1v431_1",
65
+ listContent: "_listContent_1v431_60"
66
+ }, V = "px-3 pb-0.5 pt-2", te = 180, H = 288, U = ({ favorites: n, onSelect: i, onToggleFavorite: a, onBrowse: o, onViewDetails: s, className: l, rowClassName: u, searchQuery: d, listboxId: m, activeOptionId: g, isMenu: _ = !1, labels: v = {}, colors: b, nameClassName: x = "dial-small-text", headerClassName: S = "dial-tiny-lead-semi-text", emptyHintClassName: T = "dial-small-text" }) => {
67
+ let { myCollectionLabel: O = "My Collection", emptyHintLabel: k = "Star a skill to pin it here", browseLabel: A = "Browse", removeFromFavoritesLabel: M = "Remove from favorites", viewDetailsLabel: N = "View details", noMatchingSkillsLabel: I = "No matching skills" } = v, z = t({
68
+ "--fs-row-hover-bg": b?.rowHoverBackground,
69
+ "--fs-header-text": b?.headerText,
70
+ "--fs-empty-hint-text": b?.emptyHintText,
71
+ "--fs-star-color": b?.starColor,
72
+ "--fs-footer-border": b?.footerBorder
73
+ }), [U, W] = D(/* @__PURE__ */ new Set()), G = E(/* @__PURE__ */ new Map());
74
+ ee(() => {
75
+ let e = G.current;
75
76
  return () => {
76
77
  e.forEach((e) => clearTimeout(e)), e.clear();
77
78
  };
78
79
  }, []);
79
- let B = d != null, G = d?.toLowerCase() ?? "", K = B ? n.filter((e) => e.name.toLowerCase().includes(G)) : n, q = D(null), [J, Y] = O();
80
- T(() => {
81
- q.current && Y(Math.min(q.current.scrollHeight, W));
80
+ let K = m != null, q = _ && !K, J = K || q ? "none" : void 0, Y = "button";
81
+ K ? Y = "option" : q && (Y = "menuitem");
82
+ let X = C(), Z = d != null, ne = d?.toLowerCase() ?? "", Q = Z ? n.filter((e) => e.name.toLowerCase().includes(ne)) : n, $ = E(null), [re, ie] = D();
83
+ w(() => {
84
+ $.current && ie(Math.min($.current.scrollHeight, H));
82
85
  }, [n, d]);
83
- let X = (e, t) => {
86
+ let ae = (e, t) => {
84
87
  e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), i(t));
85
- }, Z = (e) => {
86
- P((t) => new Set(t).add(e));
88
+ }, oe = (e) => {
89
+ W((t) => new Set(t).add(e));
87
90
  let t = setTimeout(() => {
88
- a?.(e), P((t) => {
91
+ a?.(e), W((t) => {
89
92
  let n = new Set(t);
90
93
  return n.delete(e), n;
91
- }), L.current.delete(e);
92
- }, U);
93
- L.current.set(e, t);
94
+ }), G.current.delete(e);
95
+ }, te);
96
+ G.current.set(e, t);
94
97
  };
95
- return /* @__PURE__ */ I("div", {
96
- className: r("flex w-full flex-col desktop:w-[280px]", l, R.favoritesPanel),
97
- style: j,
98
+ return /* @__PURE__ */ F("div", {
99
+ className: r("flex w-full flex-col desktop:w-[280px]", l, L.favoritesPanel),
100
+ style: z,
98
101
  children: [
99
- /* @__PURE__ */ F("p", {
100
- className: r(v, H, V.header),
101
- children: x
102
+ /* @__PURE__ */ P("p", {
103
+ id: X,
104
+ className: r(S, V, B.header),
105
+ children: O
102
106
  }),
103
- /* @__PURE__ */ F("div", {
104
- className: r("max-h-72 min-h-0 flex-1 overflow-y-auto", V.listContent),
105
- style: { maxHeight: J },
106
- children: /* @__PURE__ */ F("div", {
107
- ref: q,
108
- children: K.length > 0 ? /* @__PURE__ */ F("ul", {
107
+ /* @__PURE__ */ P("div", {
108
+ className: r("max-h-72 min-h-0 flex-1 overflow-y-auto", B.listContent),
109
+ style: { maxHeight: re },
110
+ children: /* @__PURE__ */ P("div", {
111
+ ref: $,
112
+ children: Q.length > 0 ? /* @__PURE__ */ P("ul", {
113
+ id: m,
114
+ role: K ? "listbox" : J,
115
+ "aria-labelledby": K ? X : void 0,
109
116
  className: "flex flex-col gap-1 px-1 pb-1",
110
- children: K.map((t) => {
111
- let n = /* @__PURE__ */ I("div", {
112
- role: "button",
117
+ children: Q.map((t) => {
118
+ let n = K ? `${m}-${encodeURIComponent(t.id)}` : void 0, o = K ? -1 : void 0, l = /* @__PURE__ */ F("div", {
119
+ role: Y,
120
+ id: n,
121
+ "aria-selected": K ? n === g : void 0,
113
122
  "aria-label": t.name,
114
123
  tabIndex: 0,
115
- className: r("flex cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 transition-colors", V.row, u),
124
+ className: r("flex cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 transition-colors", B.row, u),
116
125
  onClick: () => i(t),
117
- onKeyDown: (e) => X(e, t),
126
+ onKeyDown: (e) => ae(e, t),
118
127
  children: [
119
- /* @__PURE__ */ F(e, {
128
+ /* @__PURE__ */ P(e, {
120
129
  size: c.MD,
121
130
  initialsName: t.name
122
131
  }),
123
- d == null ? /* @__PURE__ */ F("span", {
124
- className: r(_, "min-w-0 flex-1 truncate text-start"),
132
+ d == null ? /* @__PURE__ */ P("span", {
133
+ className: r(x, "min-w-0 flex-1 truncate text-start"),
125
134
  children: t.name
126
- }) : /* @__PURE__ */ F(p, {
135
+ }) : /* @__PURE__ */ P(p, {
127
136
  text: t.name,
128
137
  query: d,
129
138
  maxLines: 1,
130
- className: r(_, "min-w-0 flex-1 text-start")
139
+ className: r(x, "min-w-0 flex-1 text-start")
131
140
  }),
132
- a && /* @__PURE__ */ F(y, {
133
- icon: /* @__PURE__ */ F(M, {
141
+ a && /* @__PURE__ */ P(y, {
142
+ icon: /* @__PURE__ */ P(j, {
134
143
  size: c.SM,
135
- className: V.star,
144
+ className: B.star,
136
145
  "aria-hidden": !0
137
146
  }),
138
- "aria-label": E,
147
+ "aria-label": M,
139
148
  isSelected: !0,
149
+ tabIndex: o,
140
150
  onClick: (e) => {
141
- e.stopPropagation(), Z(t.id);
151
+ e.stopPropagation(), oe(t.id);
142
152
  }
143
153
  })
144
154
  ]
145
155
  });
146
- return /* @__PURE__ */ F("li", {
147
- className: N.has(t.id) ? V.rowLeaving : V.rowEnter,
148
- children: s ? /* @__PURE__ */ F(h, {
156
+ return /* @__PURE__ */ P("li", {
157
+ role: J,
158
+ className: U.has(t.id) ? B.rowLeaving : B.rowEnter,
159
+ children: s ? /* @__PURE__ */ P(h, {
149
160
  asChild: !0,
150
161
  contentClassName: "max-w-[550px]",
151
- content: /* @__PURE__ */ F(z, {
162
+ content: /* @__PURE__ */ P(R, {
152
163
  description: t.description,
153
- viewDetailsLabel: k,
154
- onViewDetails: () => s(t)
164
+ viewDetailsLabel: N,
165
+ onViewDetails: () => s(t),
166
+ viewDetailsTabIndex: o
155
167
  }),
156
- children: n
157
- }) : n
168
+ children: l
169
+ }) : l
158
170
  }, t.id);
159
171
  })
160
- }) : B && G !== "" ? /* @__PURE__ */ F("p", {
172
+ }) : Z && ne !== "" ? /* @__PURE__ */ P("p", {
161
173
  role: "status",
162
174
  "aria-live": "polite",
163
- className: r(b, "px-4 py-4 text-start", V.emptyHint),
164
- children: A
165
- }) : /* @__PURE__ */ F("p", {
166
- className: r(b, "px-4 py-4 text-start", V.emptyHint),
167
- children: S
175
+ className: r(T, "px-4 py-4 text-start", B.emptyHint),
176
+ children: I
177
+ }) : /* @__PURE__ */ P("p", {
178
+ className: r(T, "px-4 py-4 text-start", B.emptyHint),
179
+ children: k
168
180
  })
169
181
  })
170
182
  }),
171
- /* @__PURE__ */ F("div", {
172
- className: r("border-t px-2 py-3", V.footer),
173
- children: /* @__PURE__ */ F(f, {
174
- label: w,
183
+ /* @__PURE__ */ P("div", {
184
+ className: r("border-t px-2 py-3", B.footer),
185
+ children: /* @__PURE__ */ P(f, {
186
+ role: q ? "menuitem" : void 0,
187
+ label: A,
175
188
  className: "w-full justify-center",
176
189
  onClick: o
177
190
  })
178
191
  })
179
192
  ]
180
193
  });
181
- }, K = ".zip,.md", q = ({ isOpen: e, errorText: t, accept: n = K, labels: r, onClose: i, onFilesSelected: a, onFilesRejected: o }) => {
194
+ }, W = ".zip,.md", G = ({ isOpen: e, errorText: t, accept: n = W, labels: r, onClose: i, onFilesSelected: a, onFilesRejected: o }) => {
182
195
  let { dialogTitle: s = "Upload skill", dropZoneLabel: c = "Drag and drop it or click here to upload", dropZoneMobileLabel: l = "Click here to upload", formatsLabel: u = "File formats .zip and SKILL.md", fileInputAriaLabel: f = "Upload a skill ZIP archive or a SKILL.md file", closeAriaLabel: p = "Close" } = r ?? {};
183
- return /* @__PURE__ */ F(g, {
196
+ return /* @__PURE__ */ P(g, {
184
197
  open: e,
185
198
  size: _.Sm,
186
199
  header: s,
187
200
  closeAriaLabel: p,
188
201
  onClose: i,
189
- children: /* @__PURE__ */ F("div", {
202
+ children: /* @__PURE__ */ P("div", {
190
203
  className: "px-6 py-4",
191
- children: /* @__PURE__ */ F(d, {
192
- label: /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F("span", {
204
+ children: /* @__PURE__ */ P(d, {
205
+ label: /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P("span", {
193
206
  className: "desktop:hidden",
194
207
  children: l
195
- }), /* @__PURE__ */ F("span", {
208
+ }), /* @__PURE__ */ P("span", {
196
209
  className: "hidden desktop:inline",
197
210
  children: c
198
211
  })] }),
@@ -205,28 +218,28 @@ var R = {
205
218
  })
206
219
  })
207
220
  });
208
- }, J = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ F(g, {
221
+ }, K = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ P(g, {
209
222
  open: e,
210
223
  header: r,
211
224
  size: _.Lg,
212
225
  className: "h-[min(90vh,860px)] !max-w-[min(95vw,1200px)] overflow-hidden",
213
226
  onClose: t,
214
- children: /* @__PURE__ */ F("div", {
227
+ children: /* @__PURE__ */ P("div", {
215
228
  className: "h-[min(80vh,840px)] overflow-auto",
216
- children: /* @__PURE__ */ F(x, {
229
+ children: /* @__PURE__ */ P(x, {
217
230
  fallback: null,
218
231
  children: e && i(n, t)
219
232
  })
220
233
  })
221
- }), Y = (e) => /* @__PURE__ */ F(L, { ...e }), X = (e) => ({
234
+ }), q = (e) => /* @__PURE__ */ P(I, { ...e }), J = (e) => ({
222
235
  id: e.url,
223
236
  name: e.name,
224
237
  description: e.description
225
- }), Z = (e) => {
238
+ }), Y = (e) => {
226
239
  let t = e.split("/").filter((e) => e.length > 0);
227
240
  return t[t.length - 1] ?? e;
228
- }, ee = ({ isEnabled: e, isSkillsSupported: t, skills: r, sharedWithMe: a, publicSkills: o, favoriteIds: s, onToggleFavorite: c, labels: u, historyChipLabelClassName: d, renderCatalogContent: f, detailsPanelComponent: p }) => {
229
- let { addMenuLabel: m = "Skills", backLabel: h = "Back", catalogModalTitleLabel: g = "Use skill", emptyQueryHintLabel: _ = "Type to filter", unsupportedTooltipLabel: v = "Selected model does not support skills. Remove the skill or select different model to proceed.", panelLabels: y } = u ?? {}, b = e && t, [C, w] = O(!1), [T, D] = O(null), [A, j] = O(null), M = E(() => [
241
+ }, X = ({ isEnabled: e, isSkillsSupported: t, skills: r, sharedWithMe: a, publicSkills: o, favoriteIds: s, onToggleFavorite: c, labels: u, historyChipLabelClassName: d, renderCatalogContent: f, detailsPanelComponent: p }) => {
242
+ let { addMenuLabel: m = "Skills", backLabel: h = "Back", catalogModalTitleLabel: g = "Use skill", emptyQueryHintLabel: _ = "Type to filter", unsupportedTooltipLabel: v = "Selected model does not support skills. Remove the skill or select different model to proceed.", panelLabels: y } = u ?? {}, b = e && t, [ee, C] = D(!1), [w, E] = D(null), [k, A] = D(null), j = T(() => [
230
243
  ...r,
231
244
  ...a ?? [],
232
245
  ...o ?? []
@@ -234,91 +247,94 @@ var R = {
234
247
  r,
235
248
  a,
236
249
  o
237
- ]), N = E(() => new Map(M.map((e) => [e.url, e])), [M]), P = E(() => M.filter((e) => s.has(e.url)).map((e) => X(e)), [M, s]), I = E(() => A == null ? null : N.get(A) ?? {
238
- url: A,
239
- name: A
240
- }, [N, A]), L = n(A, t), R = S((e) => {
241
- j(e);
242
- }, []), z = S(() => {
243
- j(null);
244
- }, []), V = A, H = E(() => A == null ? void 0 : [{ url: A }], [A]), U = E(() => I == null ? null : /* @__PURE__ */ F(B, {
245
- name: I.name,
246
- path: I.url,
247
- description: I.description,
248
- isUnsupported: L,
249
- onViewDetails: D,
250
+ ]), M = T(() => new Map(j.map((e) => [e.url, e])), [j]), N = T(() => j.filter((e) => s.has(e.url)).map((e) => J(e)), [j, s]), F = T(() => k == null ? null : M.get(k) ?? {
251
+ url: k,
252
+ name: k
253
+ }, [M, k]), I = n(k, t), L = S((e) => {
254
+ A(e);
255
+ }, []), R = S(() => {
256
+ A(null);
257
+ }, []), B = k, V = T(() => k == null ? void 0 : [{ url: k }], [k]), te = T(() => F == null ? null : /* @__PURE__ */ P(z, {
258
+ name: F.name,
259
+ path: F.url,
260
+ description: F.description,
261
+ isUnsupported: I,
262
+ onViewDetails: E,
250
263
  labels: {
251
264
  viewDetailsLabel: y?.viewDetailsLabel,
252
265
  unsupportedTooltipLabel: v
253
266
  }
254
267
  }), [
268
+ F,
255
269
  I,
256
- L,
257
270
  y,
258
271
  v
259
- ]), W = S((e) => e == null || e.length === 0 ? null : e.map((e) => {
260
- let t = N.get(e.url);
261
- return /* @__PURE__ */ F(B, {
262
- name: t?.name ?? Z(e.url),
272
+ ]), H = S((e) => e == null || e.length === 0 ? null : e.map((e) => {
273
+ let t = M.get(e.url);
274
+ return /* @__PURE__ */ P(z, {
275
+ name: t?.name ?? Y(e.url),
263
276
  path: e.url,
264
277
  labelClassName: d,
265
278
  description: t?.description,
266
- onViewDetails: D,
279
+ onViewDetails: E,
267
280
  labels: { viewDetailsLabel: y?.viewDetailsLabel }
268
281
  }, e.url);
269
282
  }), [
270
- N,
283
+ M,
271
284
  d,
272
285
  y
273
- ]), K = S((e) => /* @__PURE__ */ F(G, {
274
- favorites: P,
286
+ ]), W = S((e) => /* @__PURE__ */ P(U, {
287
+ favorites: N,
288
+ isMenu: !0,
275
289
  onSelect: (t) => {
276
- R(t.id), e();
290
+ L(t.id), e();
277
291
  },
278
292
  onToggleFavorite: c,
279
293
  onBrowse: () => {
280
- e(), w(!0);
294
+ e(), C(!0);
281
295
  },
282
296
  onViewDetails: (t) => {
283
- e(), D(t.id);
297
+ e(), E(t.id);
284
298
  },
285
299
  labels: y
286
300
  }), [
287
- P,
288
- R,
301
+ N,
302
+ L,
289
303
  c,
290
304
  y
291
- ]), q = E(() => b ? {
305
+ ]), G = T(() => b ? {
292
306
  key: "skills",
293
307
  title: m,
294
- icon: /* @__PURE__ */ F(k, {
308
+ icon: /* @__PURE__ */ P(O, {
295
309
  size: i,
296
310
  "aria-hidden": !0,
297
311
  stroke: l
298
312
  }),
299
- renderOverlay: K,
313
+ renderOverlay: W,
300
314
  backLabel: h
301
315
  } : void 0, [
302
316
  b,
303
317
  m,
304
318
  h,
305
- K
306
- ]), Y = E(() => b ? {
319
+ W
320
+ ]), q = T(() => b ? {
307
321
  triggerPrefix: "/",
308
322
  menuLabel: m,
309
323
  emptyQueryHint: _,
310
- renderMenu: ({ query: e, close: t }) => /* @__PURE__ */ F(G, {
311
- favorites: P,
324
+ renderMenu: ({ query: e, close: t, listboxId: n, activeOptionId: r }) => /* @__PURE__ */ P(U, {
325
+ favorites: N,
312
326
  searchQuery: e,
327
+ listboxId: n,
328
+ activeOptionId: r,
313
329
  onSelect: (e) => {
314
- t({ consumeQuery: !0 }), R(e.id);
330
+ t({ consumeQuery: !0 }), L(e.id);
315
331
  },
316
332
  onToggleFavorite: c,
317
333
  onBrowse: () => {
318
- t({ consumeQuery: !0 }), w(!0);
334
+ t({ consumeQuery: !0 }), C(!0);
319
335
  },
320
336
  onViewDetails: (e) => {
321
- t({ consumeQuery: !0 }), D(e.id);
337
+ t({ consumeQuery: !0 }), E(e.id);
322
338
  },
323
339
  labels: y
324
340
  })
@@ -326,37 +342,37 @@ var R = {
326
342
  b,
327
343
  m,
328
344
  _,
329
- P,
330
- R,
345
+ N,
346
+ L,
331
347
  c,
332
348
  y
333
349
  ]);
334
350
  return e ? {
335
- skillMenuOverlay: q,
336
- commandMenu: Y,
337
- skillCatalogModal: /* @__PURE__ */ F(J, {
338
- isOpen: C,
339
- onClose: () => w(!1),
351
+ skillMenuOverlay: G,
352
+ commandMenu: q,
353
+ skillCatalogModal: /* @__PURE__ */ P(K, {
354
+ isOpen: ee,
355
+ onClose: () => C(!1),
340
356
  onSelect: (e) => {
341
- R(e), w(!1);
357
+ L(e), C(!1);
342
358
  },
343
359
  title: g,
344
360
  renderContent: f
345
361
  }),
346
- skillDetailsPanel: /* @__PURE__ */ F(x, {
362
+ skillDetailsPanel: /* @__PURE__ */ P(x, {
347
363
  fallback: null,
348
- children: /* @__PURE__ */ F(p, {
349
- skillId: T,
350
- onClose: () => D(null)
364
+ children: /* @__PURE__ */ P(p, {
365
+ skillId: w,
366
+ onClose: () => E(null)
351
367
  })
352
368
  }),
353
- selectedSkillElement: U,
354
- selectedSkillPath: V,
355
- selectedSkills: H,
356
- isSkillUnsupported: L,
357
- selectSkill: R,
358
- removeSelectedSkill: z,
359
- renderHistorySkills: W
369
+ selectedSkillElement: te,
370
+ selectedSkillPath: B,
371
+ selectedSkills: V,
372
+ isSkillUnsupported: I,
373
+ selectSkill: L,
374
+ removeSelectedSkill: R,
375
+ renderHistorySkills: H
360
376
  } : {
361
377
  skillMenuOverlay: void 0,
362
378
  commandMenu: void 0,
@@ -370,139 +386,139 @@ var R = {
370
386
  removeSelectedSkill: () => void 0,
371
387
  renderHistorySkills: () => null
372
388
  };
373
- }, Q = {
389
+ }, Z = {
374
390
  background: "_background_14zdf_1",
375
391
  border: "_border_14zdf_5",
376
392
  value: "_value_14zdf_9",
377
393
  clear: "_clear_14zdf_13",
378
394
  invalid: "_invalid_14zdf_17"
379
- }, te = [], $ = ({ value: e, onChange: i, displayName: a, favorites: o = te, onToggleFavorite: s, onViewDetails: c, renderOverlay: d, isSkillsSupported: p, isDisabled: h = !1, isInvalid: g = !1, labelledById: _, describedById: y, labels: b, renderCatalogContent: x, className: S, styles: T }) => {
380
- let [E, k] = O(!1), [j, M] = O(!1), [L, z] = O(""), B = D(null), V = w(), H = D(null), U = D(!1), W = n(e, p), K = p && !h, q = E && K, Y = j && K, X = () => {
381
- H.current && !H.current.disabled ? H.current.focus() : B.current?.querySelector("button:not(:disabled)")?.focus();
395
+ }, ne = [], Q = ({ value: e, onChange: i, displayName: a, favorites: o = ne, onToggleFavorite: s, onViewDetails: c, renderOverlay: d, isSkillsSupported: p, isDisabled: h = !1, isInvalid: g = !1, labelledById: _, describedById: y, labels: b, renderCatalogContent: x, className: S, styles: w }) => {
396
+ let [T, O] = D(!1), [A, j] = D(!1), [I, R] = D(""), z = E(null), B = C(), V = E(null), te = E(!1), H = n(e, p), W = p && !h, G = T && W, q = A && W, J = () => {
397
+ V.current && !V.current.disabled ? V.current.focus() : z.current?.querySelector("button:not(:disabled)")?.focus();
382
398
  };
383
- C(() => {
384
- U.current && !q && !Y && ((document.activeElement === document.body || B.current?.contains(document.activeElement)) && X(), k(!1), M(!1)), U.current = q || Y;
385
- }, [q, Y]);
386
- let Z = (e) => {
387
- e && !K || (z(""), k(e));
388
- }, ee = (e) => {
389
- K && i(e), k(!1), M(!1);
390
- }, $ = {
399
+ ee(() => {
400
+ te.current && !G && !q && ((document.activeElement === document.body || z.current?.contains(document.activeElement)) && J(), O(!1), j(!1)), te.current = G || q;
401
+ }, [G, q]);
402
+ let Y = (e) => {
403
+ e && !W || (R(""), O(e));
404
+ }, X = (e) => {
405
+ W && i(e), O(!1), j(!1);
406
+ }, Q = {
391
407
  ...t({
392
- "--ssf-text": T?.colors?.text,
393
- "--ssf-bg": T?.colors?.background,
394
- "--ssf-border": T?.colors?.border,
395
- "--ssf-error": T?.colors?.error
408
+ "--ssf-text": w?.colors?.text,
409
+ "--ssf-bg": w?.colors?.background,
410
+ "--ssf-border": w?.colors?.border,
411
+ "--ssf-error": w?.colors?.error
396
412
  }),
397
- ...T?.cssVars
398
- }, ne = /* @__PURE__ */ I("div", {
399
- id: V,
413
+ ...w?.cssVars
414
+ }, $ = /* @__PURE__ */ F("div", {
415
+ id: B,
400
416
  className: "w-full min-w-0",
401
- children: [/* @__PURE__ */ F("div", {
417
+ children: [/* @__PURE__ */ P("div", {
402
418
  className: "p-2",
403
- children: /* @__PURE__ */ F(v, {
404
- value: L,
405
- onChange: (e) => z(e ?? ""),
419
+ children: /* @__PURE__ */ P(v, {
420
+ value: I,
421
+ onChange: (e) => R(e ?? ""),
406
422
  placeholder: b.searchPlaceholder ?? "Search skills",
407
423
  "aria-label": b.searchPlaceholder ?? "Search skills",
408
424
  clearLabel: b.clearSearchLabel ?? "Clear search"
409
425
  })
410
- }), /* @__PURE__ */ F(G, {
426
+ }), /* @__PURE__ */ P(U, {
411
427
  className: "min-w-0 desktop:w-full",
412
428
  rowClassName: "min-h-11",
413
429
  favorites: o,
414
- searchQuery: L,
430
+ searchQuery: I,
415
431
  labels: b.panelLabels,
416
- onSelect: (e) => ee(e.id),
432
+ onSelect: (e) => X(e.id),
417
433
  onToggleFavorite: s,
418
434
  onViewDetails: c ? (e) => {
419
- k(!1), c(e);
435
+ O(!1), c(e);
420
436
  } : void 0,
421
437
  onBrowse: () => {
422
- k(!1), M(!0);
438
+ O(!1), j(!0);
423
439
  }
424
440
  })]
425
- }), re = /* @__PURE__ */ F(m, {
426
- inputRef: H,
441
+ }), re = /* @__PURE__ */ P(m, {
442
+ inputRef: V,
427
443
  readOnly: !0,
428
444
  role: "combobox",
429
445
  "aria-haspopup": "dialog",
430
- "aria-expanded": q,
431
- "aria-controls": q ? V : void 0,
446
+ "aria-expanded": G,
447
+ "aria-controls": G ? B : void 0,
432
448
  "aria-labelledby": _,
433
449
  "aria-describedby": y,
434
- "aria-invalid": g || W,
435
- disabled: !K,
436
- invalid: g || W,
450
+ "aria-invalid": g || H,
451
+ disabled: !W,
452
+ invalid: g || H,
437
453
  value: e ? a || e : "",
438
454
  placeholder: b.placeholder,
439
455
  title: p ? e ? a || e : void 0 : b.unsupportedTooltipLabel,
440
456
  containerClassName: "w-full min-w-0",
441
- wrapperClassName: r("cursor-pointer", "--ssf-bg" in $ && Q.background, "--ssf-border" in $ && Q.border, (g || W) && Q.invalid, T?.triggerClassName),
442
- className: r("min-w-0 cursor-pointer text-ellipsis", "--ssf-text" in $ && Q.value, T?.typography?.fontClassName ?? "dial-small-text"),
457
+ wrapperClassName: r("cursor-pointer", "--ssf-bg" in Q && Z.background, "--ssf-border" in Q && Z.border, (g || H) && Z.invalid, w?.triggerClassName),
458
+ className: r("min-w-0 cursor-pointer text-ellipsis", "--ssf-text" in Q && Z.value, w?.typography?.fontClassName ?? "dial-small-text"),
443
459
  onKeyDown: (e) => {
444
460
  [
445
461
  "Enter",
446
462
  " ",
447
463
  "ArrowDown"
448
- ].includes(e.key) ? (e.preventDefault(), e.stopPropagation(), Z(e.key === "ArrowDown" || !q)) : e.key === "Escape" && Z(!1);
464
+ ].includes(e.key) ? (e.preventDefault(), e.stopPropagation(), Y(e.key === "ArrowDown" || !G)) : e.key === "Escape" && Y(!1);
449
465
  },
450
- iconAfter: /* @__PURE__ */ I("span", {
466
+ iconAfter: /* @__PURE__ */ F("span", {
451
467
  className: "flex shrink-0 items-center",
452
- children: [e && /* @__PURE__ */ F(f, {
468
+ children: [e && /* @__PURE__ */ P(f, {
453
469
  type: "button",
454
- className: r("size-11 shrink-0", Q.clear),
470
+ className: r("size-11 shrink-0", Z.clear),
455
471
  disabled: h,
456
472
  "aria-label": b.removeSkillLabel,
457
473
  onKeyDown: (e) => e.stopPropagation(),
458
474
  onClick: (e) => {
459
- e.stopPropagation(), i(void 0), k(!1), K ? H.current?.focus() : B.current?.focus();
475
+ e.stopPropagation(), i(void 0), O(!1), W ? V.current?.focus() : z.current?.focus();
460
476
  },
461
- iconBefore: /* @__PURE__ */ F(N, {
477
+ iconBefore: /* @__PURE__ */ P(M, {
462
478
  "aria-hidden": !0,
463
479
  size: 18,
464
480
  stroke: l
465
481
  })
466
- }), /* @__PURE__ */ F(A, {
482
+ }), /* @__PURE__ */ P(k, {
467
483
  "aria-hidden": !0,
468
484
  size: 20,
469
485
  stroke: l,
470
- className: r("transition-transform", q && "rotate-180")
486
+ className: r("transition-transform", G && "rotate-180")
471
487
  })]
472
488
  })
473
489
  });
474
- return /* @__PURE__ */ I("div", {
475
- ref: B,
490
+ return /* @__PURE__ */ F("div", {
491
+ ref: z,
476
492
  role: "group",
477
493
  "aria-labelledby": _,
478
494
  tabIndex: -1,
479
- className: r("min-w-0", S, R.selectorField),
480
- style: $,
481
- children: [d ? /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F("div", {
495
+ className: r("min-w-0", S, L.selectorField),
496
+ style: Q,
497
+ children: [d ? /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P("div", {
482
498
  className: "w-full min-w-0",
483
- onClick: () => Z(!q),
499
+ onClick: () => Y(!G),
484
500
  children: re
485
- }), d(ne, q, () => Z(!1))] }) : /* @__PURE__ */ F(u, {
486
- open: q,
487
- onOpenChange: Z,
488
- disabled: !K,
501
+ }), d($, G, () => Y(!1))] }) : /* @__PURE__ */ P(u, {
502
+ open: G,
503
+ onOpenChange: Y,
504
+ disabled: !W,
489
505
  className: "w-full min-w-0",
490
506
  listClassName: "w-[min(var(--reference-width),calc(100vw-2rem))] max-w-full",
491
- renderOverlay: () => /* @__PURE__ */ F("div", {
507
+ renderOverlay: () => /* @__PURE__ */ P("div", {
492
508
  role: "dialog",
493
509
  "aria-labelledby": _,
494
- children: ne
510
+ children: $
495
511
  }),
496
512
  initialFocus: 0,
497
513
  children: re
498
- }), Y && /* @__PURE__ */ F(J, {
514
+ }), q && /* @__PURE__ */ P(K, {
499
515
  isOpen: !0,
500
- onClose: () => M(!1),
516
+ onClose: () => j(!1),
501
517
  title: b.modalTitle,
502
- onSelect: ee,
518
+ onSelect: X,
503
519
  renderContent: x
504
520
  })]
505
521
  });
506
522
  };
507
523
  //#endregion
508
- export { B as ChatSkill, G as FavoriteSkillsPanel, R as SKILLS_CLASS, q as SkillArchiveUploadDialog, J as SkillCatalogModal, Y as SkillDetailsSidePanel, z as SkillInfoTooltipContent, $ as SkillSelectorField, X as buildFavoriteSkillItem, ee as useSkillSelectorOverlay };
524
+ export { z as ChatSkill, U as FavoriteSkillsPanel, L as SKILLS_CLASS, G as SkillArchiveUploadDialog, K as SkillCatalogModal, q as SkillDetailsSidePanel, R as SkillInfoTooltipContent, Q as SkillSelectorField, J as buildFavoriteSkillItem, X as useSkillSelectorOverlay };
package/models/favorite-skills-panel-props.d.ts CHANGED
@@ -31,7 +31,7 @@ export interface FavoriteSkillsPanelColors {
31
31
  export interface FavoriteSkillsPanelProps {
32
32
  /** The user's favorited skills, already resolved by the host. */
33
33
  favorites: FavoriteSkillItem[];
34
- /** Called when a row is activated (click, Enter, or Space). */
34
+ /** Called when a row is activated (click, Enter, or Space — or, in listbox mode, Enter in the owning text field while the row is active). */
35
35
  onSelect: (item: FavoriteSkillItem) => void;
36
36
  /** Removes a favorite by id; omitted hides the star action. */
37
37
  onToggleFavorite?: (id: string) => void;
@@ -50,6 +50,29 @@ export interface FavoriteSkillsPanelProps {
50
50
  * favorites unfiltered.
51
51
  */
52
52
  searchQuery?: string;
53
+ /**
54
+ * When provided, the list renders as a `role="listbox"` with this `id` and
55
+ * each row as a `role="option"` — the shape a list autocomplete (e.g. the
56
+ * conversation input's `commandMenu`) drives from its text field. In this
57
+ * mode Tab moves from row to row: a row's star and its tooltip's "View
58
+ * details" stay clickable but leave the Tab sequence. Omit for the plain
59
+ * list of button rows.
60
+ */
61
+ listboxId?: string;
62
+ /**
63
+ * Renders the rows and the "Browse" action as `role="menuitem"` for a host
64
+ * that mounts the panel inside a `role="menu"` container (e.g. a submenu
65
+ * whose arrow keys move between menu items). Ignored with `listboxId`.
66
+ * Defaults to `false`: rows are `role="button"`.
67
+ */
68
+ isMenu?: boolean;
69
+ /**
70
+ * `id` of the row the owning text field has active, rendered with
71
+ * `aria-selected="true"` and the row highlight — pass through the id the
72
+ * text field reports; row ids are derived from `listboxId` and each item's
73
+ * id. Used only with `listboxId`.
74
+ */
75
+ activeOptionId?: string | null;
53
76
  /** Localizable string overrides. */
54
77
  labels?: FavoriteSkillsPanelLabels;
55
78
  /** Color overrides applied as CSS custom properties. */
package/models/favorite-skills-panel-props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"favorite-skills-panel-props.d.ts","sourceRoot":"","sources":["../../src/models/favorite-skills-panel-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,kFAAkF;AAClF,MAAM,WAAW,yBAAyB;IACxC,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2FAA2F;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6GAA6G;IAC7G,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oGAAoG;IACpG,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,6DAA6D;AAC7D,MAAM,WAAW,yBAAyB;IACxC,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kFAAkF;IAClF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,+CAA+C;AAC/C,MAAM,WAAW,wBAAwB;IACvC,iEAAiE;IACjE,SAAS,EAAE,iBAAiB,EAAE,CAAC;IAC/B,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kDAAkD;IAClD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,wDAAwD;IACxD,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oIAAoI;IACpI,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}
1
+ {"version":3,"file":"favorite-skills-panel-props.d.ts","sourceRoot":"","sources":["../../src/models/favorite-skills-panel-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,kFAAkF;AAClF,MAAM,WAAW,yBAAyB;IACxC,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2FAA2F;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6GAA6G;IAC7G,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oGAAoG;IACpG,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,6DAA6D;AAC7D,MAAM,WAAW,yBAAyB;IACxC,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kFAAkF;IAClF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,+CAA+C;AAC/C,MAAM,WAAW,wBAAwB;IACvC,iEAAiE;IACjE,SAAS,EAAE,iBAAiB,EAAE,CAAC;IAC/B,6IAA6I;IAC7I,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kDAAkD;IAClD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,oCAAoC;IACpC,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,wDAAwD;IACxD,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oIAAoI;IACpI,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}
package/models/skill-info-tooltip-content-props.d.ts CHANGED
@@ -11,5 +11,11 @@ export interface SkillInfoTooltipContentProps {
11
11
  viewDetailsLabel?: string;
12
12
  /** Called when the "View details" button is clicked. Unused while `unsupportedMessage` is set. */
13
13
  onViewDetails?: () => void;
14
+ /**
15
+ * `tabIndex` of the "View details" button. Pass `-1` to keep it out of the
16
+ * Tab sequence (still clickable) where the tooltip hangs off a list row and
17
+ * Tab should move from row to row. Unset keeps the button's default.
18
+ */
19
+ viewDetailsTabIndex?: number;
14
20
  }
15
21
  //# sourceMappingURL=skill-info-tooltip-content-props.d.ts.map
package/models/skill-info-tooltip-content-props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"skill-info-tooltip-content-props.d.ts","sourceRoot":"","sources":["../../src/models/skill-info-tooltip-content-props.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,MAAM,WAAW,4BAA4B;IAC3C,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kGAAkG;IAClG,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B"}
1
+ {"version":3,"file":"skill-info-tooltip-content-props.d.ts","sourceRoot":"","sources":["../../src/models/skill-info-tooltip-content-props.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,MAAM,WAAW,4BAA4B;IAC3C,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kGAAkG;IAClG,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-skills",
3
3
  "description": "Host-agnostic UI for picking a favorite skill to attach to a chat input",
4
- "version": "1.2.0-dev.120",
4
+ "version": "1.2.0-dev.125",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -18,12 +18,12 @@
18
18
  },
19
19
  "dependencies": {
20
20
  "@tabler/icons-react": "^3.44.0",
21
- "@epam/ai-dial-catalog": "1.2.0-dev.120",
22
- "@epam/ai-dial-conversation-input": "1.2.0-dev.120"
21
+ "@epam/ai-dial-catalog": "1.2.0-dev.125",
22
+ "@epam/ai-dial-conversation-input": "1.2.0-dev.125"
23
23
  },
24
24
  "peerDependencies": {
25
- "@epam/ai-dial-chat-shared": "1.2.0-dev.120",
26
- "@epam/ai-dial-ui-kit": "^0.15.0-dev.15",
25
+ "@epam/ai-dial-chat-shared": "1.2.0-dev.125",
26
+ "@epam/ai-dial-ui-kit": "^0.15.0-dev.18",
27
27
  "react": "^19.2.8"
28
28
  },
29
29
  "repository": {