@epam/ai-dial-prompts 1.1.0-dev.431 → 1.1.0-dev.433

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 (3) hide show
  1. package/components/FavoritePromptsPanel/FavoritePromptsPanel.d.ts.map +1 -1
  2. package/index.js +63 -40
  3. package/package.json +3 -3
package/components/FavoritePromptsPanel/FavoritePromptsPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FavoritePromptsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/FavoritePromptsPanel/FavoritePromptsPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAgD,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAQ3F;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAkL9D,CAAC"}
1
+ {"version":3,"file":"FavoritePromptsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/FavoritePromptsPanel/FavoritePromptsPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAgD,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAgB3F;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA+O9D,CAAC"}
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { CatalogEntityType as e, DeploymentIcon as t, SELECT_LIST_MAX_HEIGHT_CLASS_NAME as n, SELECT_LIST_MAX_HEIGHT_PX as r, buildCssVars as i, mergeClasses as a } from "@epam/ai-dial-chat-shared";
2
- import { DIAL_ICON_SIZE as o, DIAL_KIT_ICON_STROKE as s, GhostButton as c, GhostIconButton as l, MenuItem as u, NeutralButton as d, Popup as f, PopupSize as p, PrimaryButton as m, Textarea as h, ToggleIconButton as g, Tooltip as _ } from "@epam/ai-dial-ui-kit";
2
+ import { DIAL_ICON_SIZE as o, DIAL_KIT_ICON_STROKE as s, GhostButton as c, GhostIconButton as l, InteractiveTooltip as u, MenuItem as d, NeutralButton as f, Popup as p, PopupSize as m, PrimaryButton as h, Textarea as g, ToggleIconButton as _ } from "@epam/ai-dial-ui-kit";
3
3
  import { IconChevronLeft as v, IconStarFilled as y } from "@tabler/icons-react";
4
4
  import { useEffect as b, useId as x, useLayoutEffect as S, useMemo as C, useRef as w, useState as T } from "react";
5
5
  import { jsx as E, jsxs as D } from "react/jsx-runtime";
@@ -14,59 +14,71 @@ var j = {
14
14
  rowLeaving: "_rowLeaving_1pyx6_27",
15
15
  rowFadeOut: "_rowFadeOut_1pyx6_1",
16
16
  listContent: "_listContent_1pyx6_55"
17
- }, M = "px-3 pb-0.5 pt-2", N = 180, P = ({ favorites: e, onSelect: s, onToggleFavorite: l, onBrowse: d, labels: f = {}, colors: p, nameClassName: m = "dial-small-text", headerClassName: h = "dial-tiny-lead-semi-text", emptyHintClassName: v = "dial-small-text" }) => {
18
- let { myCollectionLabel: x = "My Collection", emptyHintLabel: C = "Star a prompt to pin it here", browseLabel: O = "Browse", removeFromFavoritesLabel: k = "Remove from favorites" } = f, A = i({
19
- "--fp-header-text": p?.headerText,
20
- "--fp-empty-hint-text": p?.emptyHintText,
21
- "--fp-star-color": p?.starColor,
22
- "--fp-footer-border": p?.footerBorder
23
- }), [P, F] = T(/* @__PURE__ */ new Set()), I = w(/* @__PURE__ */ new Map());
17
+ }, M = "px-3 pb-0.5 pt-2", N = 180, P = 300, F = ({ favorites: e, onSelect: s, onToggleFavorite: l, onBrowse: f, labels: p = {}, colors: m, nameClassName: h = "dial-small-text", headerClassName: g = "dial-tiny-lead-semi-text", emptyHintClassName: v = "dial-small-text" }) => {
18
+ let { myCollectionLabel: x = "My Collection", emptyHintLabel: C = "Star a prompt to pin it here", browseLabel: O = "Browse", removeFromFavoritesLabel: k = "Remove from favorites" } = p, A = i({
19
+ "--fp-header-text": m?.headerText,
20
+ "--fp-empty-hint-text": m?.emptyHintText,
21
+ "--fp-star-color": m?.starColor,
22
+ "--fp-footer-border": m?.footerBorder
23
+ }), [F, I] = T(/* @__PURE__ */ new Set()), L = w(/* @__PURE__ */ new Map()), [R, z] = T(null), B = w(void 0), V = () => {
24
+ clearTimeout(B.current), B.current = void 0;
25
+ }, H = (e) => {
26
+ V(), z(e);
27
+ }, U = () => {
28
+ V(), B.current = setTimeout(() => {
29
+ z(null), B.current = void 0;
30
+ }, P);
31
+ };
24
32
  b(() => {
25
- let e = I.current;
33
+ let e = L.current;
26
34
  return () => {
27
- e.forEach((e) => clearTimeout(e)), e.clear();
35
+ e.forEach((e) => clearTimeout(e)), e.clear(), clearTimeout(B.current);
28
36
  };
29
37
  }, []);
30
- let L = w(null), [R, z] = T();
38
+ let W = w(null), [G, K] = T();
31
39
  S(() => {
32
- L.current && z(Math.min(L.current.scrollHeight, r));
40
+ W.current && K(Math.min(W.current.scrollHeight, r));
33
41
  }, [e]);
34
- let B = (e) => {
35
- F((t) => new Set(t).add(e));
42
+ let q = (e) => {
43
+ I((t) => new Set(t).add(e));
36
44
  let t = setTimeout(() => {
37
- l(e), F((t) => {
45
+ l(e), I((t) => {
38
46
  let n = new Set(t);
39
47
  return n.delete(e), n;
40
- }), I.current.delete(e);
48
+ }), L.current.delete(e);
41
49
  }, N);
42
- I.current.set(e, t);
50
+ L.current.set(e, t);
43
51
  };
44
52
  return /* @__PURE__ */ D("div", {
45
53
  className: "flex min-w-[240px] flex-col",
46
54
  style: A,
47
55
  children: [
48
56
  /* @__PURE__ */ E("p", {
49
- className: a(h, M, j.header),
57
+ className: a(g, M, j.header),
50
58
  children: x
51
59
  }),
52
60
  /* @__PURE__ */ E("div", {
53
61
  className: a(n, "min-h-0 flex-1 overflow-y-auto", j.listContent),
54
- style: { maxHeight: R },
62
+ style: { maxHeight: G },
55
63
  children: /* @__PURE__ */ E("div", {
56
- ref: L,
64
+ ref: W,
57
65
  children: e.length > 0 ? /* @__PURE__ */ E("ul", {
58
66
  className: "flex flex-col gap-1 px-1 pb-1",
59
67
  children: e.map((e) => {
60
- let n = /* @__PURE__ */ E(u, {
68
+ let n = /* @__PURE__ */ E(d, {
61
69
  className: "h-auto py-1.5",
62
70
  icon: /* @__PURE__ */ E(t, {
63
71
  size: o.MD,
64
72
  initialsName: e.name
65
73
  }),
66
74
  label: e.name,
67
- labelClassName: m,
75
+ labelClassName: h,
68
76
  onClick: () => s(e),
69
- rightControl: /* @__PURE__ */ E(g, {
77
+ onMouseEnter: () => H(e.id),
78
+ onMouseLeave: U,
79
+ onFocus: () => H(e.id),
80
+ onBlur: U,
81
+ rightControl: /* @__PURE__ */ E(_, {
70
82
  icon: /* @__PURE__ */ E(y, {
71
83
  size: o.SM,
72
84
  className: j.star,
@@ -74,14 +86,25 @@ var j = {
74
86
  }),
75
87
  "aria-label": k,
76
88
  isSelected: !0,
77
- onClick: () => B(e.id)
89
+ onClick: () => q(e.id)
78
90
  })
79
91
  }), r = e.description != null && e.description !== "";
80
92
  return /* @__PURE__ */ E("li", {
81
- className: P.has(e.id) ? j.rowLeaving : j.rowEnter,
82
- children: r ? /* @__PURE__ */ E(_, {
83
- tooltip: e.description,
84
- triggerClassName: "block",
93
+ className: F.has(e.id) ? j.rowLeaving : j.rowEnter,
94
+ children: r ? /* @__PURE__ */ E(u, {
95
+ asChild: !0,
96
+ open: R === e.id,
97
+ contentClassName: "max-w-[550px]",
98
+ content: /* @__PURE__ */ E("div", {
99
+ onMouseEnter: V,
100
+ onMouseLeave: U,
101
+ onFocus: V,
102
+ onBlur: U,
103
+ children: /* @__PURE__ */ E("p", {
104
+ className: "text-start",
105
+ children: e.description
106
+ })
107
+ }),
85
108
  children: n
86
109
  }) : n
87
110
  }, e.id);
@@ -97,17 +120,17 @@ var j = {
97
120
  children: /* @__PURE__ */ E(c, {
98
121
  label: O,
99
122
  className: "w-full justify-center",
100
- onClick: d
123
+ onClick: f
101
124
  })
102
125
  })
103
126
  ]
104
127
  });
105
- }, F = { card: "_card_p8vwa_1" }, I = ({ open: t, promptName: n, content: r, description: o, parameters: c, onBack: u, onClose: g, onSubmit: _, onCancel: y, labels: b = {}, colors: S, titleClassName: w = "dial-h2-text", parametersLabelClassName: j = "dial-h2-text", detailsLabelClassName: M = "dial-h2-text" }) => {
106
- let { title: N = "Prompt parameters", closeLabel: P = "Close", backLabel: I = "Back", parametersLabel: L = "Parameters", detailsLabel: R = "Details", enterValuePlaceholder: z = "Enter value", cancelLabel: B = "Cancel", submitLabel: V = "Confirm" } = b, [H, U] = T({}), W = x(), G = i({
128
+ }, I = { card: "_card_p8vwa_1" }, L = ({ open: t, promptName: n, content: r, description: o, parameters: c, onBack: u, onClose: d, onSubmit: _, onCancel: y, labels: b = {}, colors: S, titleClassName: w = "dial-h2-text", parametersLabelClassName: j = "dial-h2-text", detailsLabelClassName: M = "dial-h2-text" }) => {
129
+ let { title: N = "Prompt parameters", closeLabel: P = "Close", backLabel: F = "Back", parametersLabel: L = "Parameters", detailsLabel: R = "Details", enterValuePlaceholder: z = "Enter value", cancelLabel: B = "Cancel", submitLabel: V = "Confirm" } = b, [H, U] = T({}), W = x(), G = i({
107
130
  "--pp-card-bg": S?.cardBackground,
108
131
  "--pp-card-border": S?.cardBorder
109
132
  }), K = C(() => c.some((e) => !H[e]?.trim()), [c, H]);
110
- return /* @__PURE__ */ E(f, {
133
+ return /* @__PURE__ */ E(p, {
111
134
  open: t,
112
135
  header: /* @__PURE__ */ D("div", {
113
136
  className: "flex items-center gap-2",
@@ -117,7 +140,7 @@ var j = {
117
140
  "aria-hidden": !0,
118
141
  stroke: s
119
142
  }),
120
- "aria-label": I,
143
+ "aria-label": F,
121
144
  onClick: u
122
145
  }), /* @__PURE__ */ E("span", {
123
146
  className: w,
@@ -125,15 +148,15 @@ var j = {
125
148
  })]
126
149
  }),
127
150
  ariaLabel: N,
128
- size: p.Lg,
151
+ size: m.Lg,
129
152
  closeAriaLabel: P,
130
- onClose: g,
153
+ onClose: d,
131
154
  footer: /* @__PURE__ */ D("div", {
132
155
  className: "flex justify-end gap-2 px-6 py-4",
133
- children: [/* @__PURE__ */ E(d, {
156
+ children: [/* @__PURE__ */ E(f, {
134
157
  label: B,
135
158
  onClick: y
136
- }), /* @__PURE__ */ E(m, {
159
+ }), /* @__PURE__ */ E(h, {
137
160
  label: V,
138
161
  disabled: K,
139
162
  onClick: () => {
@@ -144,7 +167,7 @@ var j = {
144
167
  children: /* @__PURE__ */ D("div", {
145
168
  className: "flex flex-col gap-4 px-6 pb-4 pt-2",
146
169
  children: [/* @__PURE__ */ E("div", {
147
- className: a("flex h-[72px] w-full items-center rounded-lg border px-3", F.card),
170
+ className: a("flex h-[72px] w-full items-center rounded-lg border px-3", I.card),
148
171
  style: G,
149
172
  children: /* @__PURE__ */ E(O, {
150
173
  type: e.Prompt,
@@ -161,7 +184,7 @@ var j = {
161
184
  children: L
162
185
  }), c.map((e) => {
163
186
  let t = `${W}-${e}`;
164
- return /* @__PURE__ */ E(h, {
187
+ return /* @__PURE__ */ E(g, {
165
188
  id: t,
166
189
  "aria-label": e,
167
190
  value: H[e] ?? "",
@@ -192,4 +215,4 @@ var j = {
192
215
  });
193
216
  };
194
217
  //#endregion
195
- export { P as FavoritePromptsPanel, I as PromptParametersPopup };
218
+ export { F as FavoritePromptsPanel, L as PromptParametersPopup };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-prompts",
3
3
  "description": "Host-agnostic UI for picking a favorite prompt and resolving its {{parameter}} placeholders before it is inserted into a chat message",
4
- "version": "1.1.0-dev.431",
4
+ "version": "1.1.0-dev.433",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -16,8 +16,8 @@
16
16
  }
17
17
  },
18
18
  "peerDependencies": {
19
- "@epam/ai-dial-catalog": "1.1.0-dev.431",
20
- "@epam/ai-dial-chat-shared": "1.1.0-dev.431",
19
+ "@epam/ai-dial-catalog": "1.1.0-dev.433",
20
+ "@epam/ai-dial-chat-shared": "1.1.0-dev.433",
21
21
  "@epam/ai-dial-ui-kit": "*",
22
22
  "@tabler/icons-react": "^3.0.0",
23
23
  "react": "^19.0.0"