@epam/ai-dial-prompts 1.2.0-dev.75 → 1.2.0-dev.78

package/components/PromptParametersPopup/LazyPromptParametersPopup.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PromptParametersPopupProps } from '../../models/prompt-parameters-popup-props';
+/** Compatible root export that loads the parameter UI only when opened. */
+export declare const PromptParametersPopup: FC<PromptParametersPopupProps>;
+//# sourceMappingURL=LazyPromptParametersPopup.d.ts.map

package/components/PromptParametersPopup/LazyPromptParametersPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyPromptParametersPopup.d.ts","sourceRoot":"","sources":["../../../src/components/PromptParametersPopup/LazyPromptParametersPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AAQ7F,2EAA2E;AAC3E,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAShE,CAAC"}

package/entry-points/parameters-popup.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Eager component entry used by the root export dynamic import. Keeping it a
+ * separate build entry preserves the popup/catalog chunk in published packages.
+ * Hosts may use this subpath to manage loading themselves.
+ */
+export { PromptParametersPopup } from '../components/PromptParametersPopup/PromptParametersPopup';
+export type { PromptParametersPopupColors, PromptParametersPopupLabels, PromptParametersPopupProps, } from '../models/prompt-parameters-popup-props';
+//# sourceMappingURL=parameters-popup.d.ts.map

package/entry-points/parameters-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parameters-popup.d.ts","sourceRoot":"","sources":["../../src/entry-points/parameters-popup.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,2DAA2D,CAAC;AAClG,YAAY,EACV,2BAA2B,EAC3B,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,yCAAyC,CAAC"}

package/hooks/usePromptSelectorOverlay/usePromptSelectorOverlay.d.ts

@@ -0,0 +1,9 @@
+import { UsePromptSelectorOverlayOptions, UsePromptSelectorOverlayResult } from '../../models/prompt-selector-overlay';
+/**
+ * Owns the prompt-selection workflow: the favorites overlay, the browse/parameter transitions,
+ * and parameter resolution. The host supplies the merged prompt listing, favorites state,
+ * labels, insertion callback, and its own lazy-loaded browse-modal renderer — this hook never
+ * imports generated API DTOs, parent providers, routing, or i18n.
+ */
+export declare const usePromptSelectorOverlay: ({ isEnabled, prompts, favoriteIds, onToggleFavorite, onInsertText, labels, renderCatalog, }: UsePromptSelectorOverlayOptions) => UsePromptSelectorOverlayResult;
+//# sourceMappingURL=usePromptSelectorOverlay.d.ts.map

package/hooks/usePromptSelectorOverlay/usePromptSelectorOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePromptSelectorOverlay.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePromptSelectorOverlay/usePromptSelectorOverlay.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,+BAA+B,EAC/B,8BAA8B,EAC/B,MAAM,sCAAsC,CAAC;AAE9C;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,GAAI,6FAQtC,+BAA+B,KAAG,8BAkHpC,CAAC"}

package/index.css

@@ -1,2 +1,2 @@
 ._header_1pyx6_3{color:var(--fp-header-text,var(--text-tertiary,#848e9c))}._emptyHint_1pyx6_7{color:var(--fp-empty-hint-text,var(--text-icon-tertiary,#848e9c))}._star_1pyx6_11{color:var(--fp-star-color,var(--text-warning-icon,#eec840))}._footer_1pyx6_15{border-top-color:var(--fp-footer-border,var(--stroke-tertiary,#e0e6f0))}._rowEnter_1pyx6_23{animation:.2s ease-out _rowFadeIn_1pyx6_1}._rowLeaving_1pyx6_27{pointer-events:none;animation:.18s ease-out forwards _rowFadeOut_1pyx6_1}@keyframes _rowFadeIn_1pyx6_1{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes _rowFadeOut_1pyx6_1{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}._listContent_1pyx6_55{transition:max-height .2s}@media (prefers-reduced-motion:reduce){._rowEnter_1pyx6_23,._rowLeaving_1pyx6_27{animation:none}._listContent_1pyx6_55{transition:none}}._card_p8vwa_1{background:var(--pp-card-bg,var(--bg-layer-sunken,#eef1f7));border-color:var(--pp-card-border,var(--stroke-tertiary,#e0e6f0))}
-/*$vite$:1*/.m-0{margin:0}.flex{display:flex}.grid{display:grid}.list-item{display:list-item}.h-\[72px\]{height:72px}.h-auto{height:auto}.min-h-0{min-height:0}.w-full{width:100%}.min-w-\[240px\]{min-width:240px}.max-w-\[550px\]{max-width:550px}.flex-1{flex:1 1 0%}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-t{border-top-width:1px}.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-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}.pb-4{padding-bottom:1rem}.pt-2{padding-top:.5rem}.text-start{text-align:start}.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)}.rtl\:scale-x-\[-1\]:where([dir=rtl],[dir=rtl] *){--tw-scale-x:-1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
+/*$vite$:1*/.m-0{margin:0}.flex{display:flex}.grid{display:grid}.list-item{display:list-item}.h-\[72px\]{height:72px}.h-auto{height:auto}.min-h-0{min-height:0}.w-full{width:100%}.min-w-\[240px\]{min-width:240px}.max-w-\[550px\]{max-width:550px}.flex-1{flex:1 1 0%}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-t{border-top-width:1px}.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-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}.pb-4{padding-bottom:1rem}.pt-2{padding-top:.5rem}.text-start{text-align:start}.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)}.rtl\:scale-x-\[-1\]:where([dir=rtl],[dir=rtl] *){--tw-scale-x:-1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

package/index.d.ts

@@ -1,7 +1,9 @@
+export { PromptParametersPopup } from './components/PromptParametersPopup/LazyPromptParametersPopup';
 export { FavoritePromptsPanel } from './components/FavoritePromptsPanel/FavoritePromptsPanel';
-export { PromptParametersPopup } from './components/PromptParametersPopup/PromptParametersPopup';
+export { usePromptSelectorOverlay } from './hooks/usePromptSelectorOverlay/usePromptSelectorOverlay';
 export type { FavoritePromptItem } from './models/favorite-prompt-item';
 export type { FavoritePromptsPanelColors, FavoritePromptsPanelLabels, FavoritePromptsPanelProps, } from './models/favorite-prompts-panel-props';
 export type { PromptParametersPopupColors, PromptParametersPopupLabels, PromptParametersPopupProps, } from './models/prompt-parameters-popup-props';
+export type { RenderPromptCatalogProps, UsePromptSelectorOverlayLabels, UsePromptSelectorOverlayOptions, UsePromptSelectorOverlayResult, } from './models/prompt-selector-overlay';
 export { PROMPTS_CLASS } from './constants/public-class-names';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wDAAwD,CAAC;AAC9F,OAAO,EAAE,qBAAqB,EAAE,MAAM,0DAA0D,CAAC;AACjG,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,YAAY,EACV,0BAA0B,EAC1B,0BAA0B,EAC1B,yBAAyB,GAC1B,MAAM,uCAAuC,CAAC;AAC/C,YAAY,EACV,2BAA2B,EAC3B,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8DAA8D,CAAC;AACrG,OAAO,EAAE,oBAAoB,EAAE,MAAM,wDAAwD,CAAC;AAC9F,OAAO,EAAE,wBAAwB,EAAE,MAAM,2DAA2D,CAAC;AACrG,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,YAAY,EACV,0BAA0B,EAC1B,0BAA0B,EAC1B,yBAAyB,GAC1B,MAAM,uCAAuC,CAAC;AAC/C,YAAY,EACV,2BAA2B,EAC3B,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,wCAAwC,CAAC;AAChD,YAAY,EACV,wBAAwB,EACxB,8BAA8B,EAC9B,+BAA+B,EAC/B,8BAA8B,GAC/B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC"}

package/index.js

@@ -1,11 +1,13 @@
-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, buildPromptParamDefaults as a, mergeClasses as o } from "@epam/ai-dial-chat-shared";
-import { DIAL_ICON_SIZE as s, DIAL_KIT_ICON_STROKE as c, GhostButton as l, GhostIconButton as u, InteractiveTooltip as d, MenuItem as f, NeutralButton as p, Popup as m, PopupSize as h, PrimaryButton as g, Textarea as _, ToggleIconButton as v } from "@epam/ai-dial-ui-kit";
-import { IconChevronLeft as y, IconStarFilled as b } from "@tabler/icons-react";
-import { useEffect as x, useId as S, useLayoutEffect as C, useRef as w, useState as T } from "react";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { AppIdentity as O, ContentTab as k, DeploymentSize as A } from "@epam/ai-dial-catalog";
-//#region src/constants/public-class-names.ts
-var j = { favoritesPanel: "dial-prompts-favorites-panel" }, M = {
+import { Suspense as e, lazy as t, useCallback as n, useEffect as r, useLayoutEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { DeploymentIcon as u, SELECT_LIST_MAX_HEIGHT_CLASS_NAME as d, SELECT_LIST_MAX_HEIGHT_PX as f, buildCssVars as p, extractPromptParams as m, mergeClasses as h, resolvePromptParams as g } from "@epam/ai-dial-chat-shared";
+import { DIAL_ICON_SIZE as _, GhostButton as v, InteractiveTooltip as y, MenuItem as b, ToggleIconButton as x } from "@epam/ai-dial-ui-kit";
+import { IconStarFilled as S } from "@tabler/icons-react";
+//#region src/components/PromptParametersPopup/LazyPromptParametersPopup.tsx
+var C = t(async () => ({ default: (await import("./parameters-popup.js")).PromptParametersPopup })), w = (t) => t.open ? /* @__PURE__ */ c(e, {
+	fallback: null,
+	children: /* @__PURE__ */ c(C, { ...t })
+}) : null, T = { favoritesPanel: "dial-prompts-favorites-panel" }, E = {
 	header: "_header_1pyx6_3",
 	emptyHint: "_emptyHint_1pyx6_7",
 	star: "_star_1pyx6_11",
@@ -15,75 +17,75 @@ var j = { favoritesPanel: "dial-prompts-favorites-panel" }, M = {
 	rowLeaving: "_rowLeaving_1pyx6_27",
 	rowFadeOut: "_rowFadeOut_1pyx6_1",
 	listContent: "_listContent_1pyx6_55"
-}, N = "px-3 pb-0.5 pt-2", P = 180, F = ({ favorites: e, onSelect: a, onToggleFavorite: c, onBrowse: u, labels: p = {}, colors: m, nameClassName: h = "dial-small-text", headerClassName: g = "dial-tiny-lead-semi-text", emptyHintClassName: _ = "dial-small-text" }) => {
-	let { myCollectionLabel: y = "My Collection", emptyHintLabel: S = "Star a prompt to pin it here", browseLabel: O = "Browse", removeFromFavoritesLabel: k = "Remove from favorites" } = p, A = i({
-		"--fp-header-text": m?.headerText,
-		"--fp-empty-hint-text": m?.emptyHintText,
-		"--fp-star-color": m?.starColor,
-		"--fp-footer-border": m?.footerBorder
-	}), [F, I] = T(/* @__PURE__ */ new Set()), L = w(/* @__PURE__ */ new Map());
-	x(() => {
+}, D = "px-3 pb-0.5 pt-2", O = 180, k = ({ favorites: e, onSelect: t, onToggleFavorite: n, onBrowse: a, labels: m = {}, colors: g, nameClassName: C = "dial-small-text", headerClassName: w = "dial-tiny-lead-semi-text", emptyHintClassName: k = "dial-small-text" }) => {
+	let { myCollectionLabel: A = "My Collection", emptyHintLabel: j = "Star a prompt to pin it here", browseLabel: M = "Browse", removeFromFavoritesLabel: N = "Remove from favorites" } = m, P = p({
+		"--fp-header-text": g?.headerText,
+		"--fp-empty-hint-text": g?.emptyHintText,
+		"--fp-star-color": g?.starColor,
+		"--fp-footer-border": g?.footerBorder
+	}), [F, I] = s(/* @__PURE__ */ new Set()), L = o(/* @__PURE__ */ new Map());
+	r(() => {
 		let e = L.current;
 		return () => {
 			e.forEach((e) => clearTimeout(e)), e.clear();
 		};
 	}, []);
-	let R = w(null), [z, B] = T();
-	C(() => {
-		R.current && B(Math.min(R.current.scrollHeight, r));
+	let R = o(null), [z, B] = s();
+	i(() => {
+		R.current && B(Math.min(R.current.scrollHeight, f));
 	}, [e]);
 	let V = (e) => {
 		I((t) => new Set(t).add(e));
 		let t = setTimeout(() => {
-			c(e), I((t) => {
+			n(e), I((t) => {
 				let n = new Set(t);
 				return n.delete(e), n;
 			}), L.current.delete(e);
-		}, P);
+		}, O);
 		L.current.set(e, t);
 	};
-	return /* @__PURE__ */ D("div", {
-		className: o("flex min-w-[240px] flex-col", j.favoritesPanel),
-		style: A,
+	return /* @__PURE__ */ l("div", {
+		className: h("flex min-w-[240px] flex-col", T.favoritesPanel),
+		style: P,
 		children: [
-			/* @__PURE__ */ E("p", {
-				className: o(g, N, M.header),
-				children: y
+			/* @__PURE__ */ c("p", {
+				className: h(w, D, E.header),
+				children: A
 			}),
-			/* @__PURE__ */ E("div", {
-				className: o(n, "min-h-0 flex-1 overflow-y-auto", M.listContent),
+			/* @__PURE__ */ c("div", {
+				className: h(d, "min-h-0 flex-1 overflow-y-auto", E.listContent),
 				style: { maxHeight: z },
-				children: /* @__PURE__ */ E("div", {
+				children: /* @__PURE__ */ c("div", {
 					ref: R,
-					children: e.length > 0 ? /* @__PURE__ */ E("ul", {
+					children: e.length > 0 ? /* @__PURE__ */ c("ul", {
 						className: "flex flex-col gap-1 px-1 pb-1",
 						children: e.map((e) => {
-							let n = /* @__PURE__ */ E(f, {
+							let n = /* @__PURE__ */ c(b, {
 								className: "h-auto py-1.5",
-								icon: /* @__PURE__ */ E(t, {
-									size: s.MD,
+								icon: /* @__PURE__ */ c(u, {
+									size: _.MD,
 									initialsName: e.name
 								}),
 								label: e.name,
-								labelClassName: h,
-								onClick: () => a(e),
-								rightControl: /* @__PURE__ */ E(v, {
-									icon: /* @__PURE__ */ E(b, {
-										size: s.SM,
-										className: M.star,
+								labelClassName: C,
+								onClick: () => t(e),
+								rightControl: /* @__PURE__ */ c(x, {
+									icon: /* @__PURE__ */ c(S, {
+										size: _.SM,
+										className: E.star,
 										"aria-hidden": !0
 									}),
-									"aria-label": k,
+									"aria-label": N,
 									isSelected: !0,
 									onClick: () => V(e.id)
 								})
 							}), r = e.description != null && e.description !== "";
-							return /* @__PURE__ */ E("li", {
-								className: F.has(e.id) ? M.rowLeaving : M.rowEnter,
-								children: r ? /* @__PURE__ */ E(d, {
+							return /* @__PURE__ */ c("li", {
+								className: F.has(e.id) ? E.rowLeaving : E.rowEnter,
+								children: r ? /* @__PURE__ */ c(y, {
 									asChild: !0,
 									contentClassName: "max-w-[550px]",
-									content: /* @__PURE__ */ E("p", {
+									content: /* @__PURE__ */ c("p", {
 										className: "text-start",
 										children: e.description
 									}),
@@ -91,112 +93,79 @@ var j = { favoritesPanel: "dial-prompts-favorites-panel" }, M = {
 								}) : n
 							}, e.id);
 						})
-					}) : /* @__PURE__ */ E("p", {
-						className: o(_, "px-4 py-4 text-start", M.emptyHint),
-						children: S
+					}) : /* @__PURE__ */ c("p", {
+						className: h(k, "px-4 py-4 text-start", E.emptyHint),
+						children: j
 					})
 				})
 			}),
-			/* @__PURE__ */ E("div", {
-				className: o("border-t px-2 py-3", M.footer),
-				children: /* @__PURE__ */ E(l, {
-					label: O,
+			/* @__PURE__ */ c("div", {
+				className: h("border-t px-2 py-3", E.footer),
+				children: /* @__PURE__ */ c(v, {
+					label: M,
 					className: "w-full justify-center",
-					onClick: u
+					onClick: a
 				})
 			})
 		]
 	});
-}, I = { card: "_card_p8vwa_1" }, L = ({ open: t, promptName: n, content: r, description: s, parameters: l, onBack: d, onClose: f, onSubmit: v, onCancel: b, labels: x = {}, colors: C, titleClassName: w = "dial-h2-text", parametersLabelClassName: j = "dial-h2-text", detailsLabelClassName: M = "dial-h2-text" }) => {
-	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" } = x, H = l.map(({ name: e, defaultValue: t }) => `${e}\u0000${t ?? ""}`).join("
"), [U, W] = T(() => a(l)), [G, K] = T(H);
-	G !== H && (K(H), W(a(l)));
-	let q = S(), J = i({
-		"--pp-card-bg": C?.cardBackground,
-		"--pp-card-border": C?.cardBorder
-	}), Y = l.some(({ name: e }) => !U[e]?.trim());
-	return /* @__PURE__ */ E(m, {
-		open: t,
-		header: /* @__PURE__ */ D("div", {
-			className: "flex items-center gap-2",
-			children: [d != null && /* @__PURE__ */ E(u, {
-				icon: /* @__PURE__ */ E(y, {
-					className: "rtl:scale-x-[-1]",
-					"aria-hidden": !0,
-					stroke: c
-				}),
-				"aria-label": F,
-				onClick: d
-			}), /* @__PURE__ */ E("span", {
-				className: w,
-				children: N
-			})]
-		}),
-		ariaLabel: N,
-		size: h.Lg,
-		closeAriaLabel: P,
-		onClose: f,
-		footer: /* @__PURE__ */ D("div", {
-			className: "flex justify-end gap-2 px-6 py-4",
-			children: [/* @__PURE__ */ E(p, {
-				label: B,
-				onClick: b
-			}), /* @__PURE__ */ E(g, {
-				label: V,
-				disabled: Y,
-				onClick: () => {
-					Y || v(U);
-				}
-			})]
-		}),
-		children: /* @__PURE__ */ D("div", {
-			className: "flex flex-col gap-4 px-6 pb-4 pt-2",
-			children: [/* @__PURE__ */ E("div", {
-				className: o("flex h-[72px] w-full items-center rounded-lg border px-3", I.card),
-				style: J,
-				children: /* @__PURE__ */ E(O, {
-					type: e.Prompt,
-					name: n,
-					size: A.LG,
-					className: "w-full"
-				})
-			}), /* @__PURE__ */ D("div", {
-				className: "grid grid-cols-2 gap-4",
-				children: [/* @__PURE__ */ D("div", {
-					className: "flex flex-col gap-3",
-					children: [/* @__PURE__ */ E("h2", {
-						className: o(j, "m-0"),
-						children: L
-					}), l.map(({ name: e }) => {
-						let t = `${q}-${e}`;
-						return /* @__PURE__ */ E(_, {
-							id: t,
-							"aria-label": e,
-							value: U[e] ?? "",
-							labelProps: {
-								htmlFor: t,
-								label: e,
-								required: !0
-							},
-							placeholder: z,
-							onChange: (t) => W((n) => ({
-								...n,
-								[e]: t
-							}))
-						}, e);
-					})]
-				}), /* @__PURE__ */ D("div", {
-					className: "flex min-h-0 flex-col gap-3",
-					children: [/* @__PURE__ */ E("h2", {
-						className: o(M, "m-0"),
-						children: R
-					}), /* @__PURE__ */ E(k, {
-						content: r,
-						description: s
-					})]
-				})]
-			})]
-		})
+}, A = ({ isEnabled: e, prompts: t, favoriteIds: r, onToggleFavorite: i, onInsertText: o, labels: l, renderCatalog: u }) => {
+	let { panelLabels: d, parametersLabels: f } = l ?? {}, [p, h] = s(!1), [_, v] = s(null), [y, b] = s(!1), x = a(() => t.filter((e) => r.has(e.id)), [t, r]), S = n((e, t) => {
+		if (m(e.content).length === 0) {
+			o(e.content), h(!1);
+			return;
+		}
+		v(e), b(t);
+	}, [o]), C = n((e) => /* @__PURE__ */ c(k, {
+		favorites: x,
+		onSelect: (t) => {
+			S(t, !1), e();
+		},
+		onToggleFavorite: i,
+		onBrowse: () => {
+			e(), h(!0);
+		},
+		labels: d
+	}), [
+		x,
+		S,
+		i,
+		d
+	]), T = u({
+		isOpen: p,
+		onSelect: (e) => S(e, !0),
+		onClose: () => h(!1)
+	}), E = n((e) => {
+		b(!1), v(e);
+	}, []), D = n(() => {
+		v(null);
+	}, []), O = n(() => {
+		v(null), h(!0);
+	}, []), A = n((e) => {
+		_ && o(g(_.content, e)), v(null), h(!1);
+	}, [_, o]), j = a(() => _ == null ? [] : m(_.content), [_]), M = _ != null && /* @__PURE__ */ c(w, {
+		open: !0,
+		promptName: _.name,
+		content: _.content,
+		description: _.description,
+		parameters: j,
+		onBack: y ? O : void 0,
+		onClose: D,
+		onCancel: D,
+		onSubmit: A,
+		labels: f
 	});
+	return e ? {
+		renderOverlay: C,
+		promptCatalogModal: T,
+		parametersPopup: M,
+		openParametersPopup: E
+	} : {
+		renderOverlay: void 0,
+		promptCatalogModal: null,
+		parametersPopup: null,
+		openParametersPopup: () => void 0
+	};
 };
 //#endregion
-export { F as FavoritePromptsPanel, j as PROMPTS_CLASS, L as PromptParametersPopup };
+export { k as FavoritePromptsPanel, T as PROMPTS_CLASS, w as PromptParametersPopup, A as usePromptSelectorOverlay };

package/models/prompt-parameters-popup-props.d.ts

@@ -1,4 +1,4 @@
-import { PromptParameter } from '../../../chat-shared/src/index.ts';
+import { PromptParameter } from '@epam/ai-dial-chat-shared';
 /** Localizable string labels for the prompt-parameters popup component. */
 export interface PromptParametersPopupLabels {
     /** Dialog title. Defaults to `'Prompt parameters'`. */

package/models/prompt-selector-overlay.d.ts

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+import { FavoritePromptItem } from './favorite-prompt-item';
+import { FavoritePromptsPanelLabels } from './favorite-prompts-panel-props';
+import { PromptParametersPopupLabels } from './prompt-parameters-popup-props';
+/** Labels forwarded to the favorites panel and the parameters popup rendered by {@link UsePromptSelectorOverlayResult}. */
+export interface UsePromptSelectorOverlayLabels {
+    /** Forwarded to the favorites panel's `labels`. */
+    panelLabels?: FavoritePromptsPanelLabels;
+    /** Forwarded to the parameters popup's `labels`. */
+    parametersLabels?: PromptParametersPopupLabels;
+}
+/** Props the host's browse-modal renderer receives from {@link usePromptSelectorOverlay}. */
+export interface RenderPromptCatalogProps {
+    /** Whether the browse modal should be open. */
+    isOpen: boolean;
+    /** Called with the selected prompt's structural data. */
+    onSelect: (item: FavoritePromptItem) => void;
+    /** Called when the browse modal is dismissed. */
+    onClose: () => void;
+}
+/** Options accepted by {@link usePromptSelectorOverlay}. */
+export interface UsePromptSelectorOverlayOptions {
+    /** Resolved host policy gating the whole workflow (e.g. an overlay feature flag). */
+    isEnabled: boolean;
+    /** Structural prompt listing the host has already merged from its own sources. */
+    prompts: FavoritePromptItem[];
+    /** Ids of the user's favorited prompts. */
+    favoriteIds: ReadonlySet<string>;
+    /** Called with a prompt's id to remove it from favorites. */
+    onToggleFavorite: (id: string) => void;
+    /** Called with the resolved prompt text (parameters already substituted, if any). */
+    onInsertText: (text: string) => void;
+    /** Labels forwarded to the rendered favorites panel and parameters popup. */
+    labels?: UsePromptSelectorOverlayLabels;
+    /** Renders the host's own lazy-loaded browse-modal content. */
+    renderCatalog: (props: RenderPromptCatalogProps) => ReactNode;
+}
+/** Result returned by {@link usePromptSelectorOverlay}. */
+export interface UsePromptSelectorOverlayResult {
+    /**
+     * Pass as the Add-menu Prompts entry's `renderOverlay`. `undefined` while disabled: the host
+     * omits the entry entirely when this is `undefined`, so a stub renderer would leave the row in
+     * place with nothing behind it.
+     */
+    renderOverlay: ((onClose: () => void) => ReactNode) | undefined;
+    /** Render this element at a stable level outside the Add-menu popover. */
+    promptCatalogModal: ReactNode;
+    /** Render this element at a stable level outside the Add-menu popover. */
+    parametersPopup: ReactNode;
+    /**
+     * Opens the parameters popup directly for a prompt that already came from outside the
+     * Add-menu flow (e.g. a route-level "Use in chat" action). No back action is offered — there
+     * is no browse modal to return to. A no-op while disabled.
+     */
+    openParametersPopup: (prompt: FavoritePromptItem) => void;
+}
+//# sourceMappingURL=prompt-selector-overlay.d.ts.map

package/models/prompt-selector-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt-selector-overlay.d.ts","sourceRoot":"","sources":["../../src/models/prompt-selector-overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAEnF,2HAA2H;AAC3H,MAAM,WAAW,8BAA8B;IAC7C,mDAAmD;IACnD,WAAW,CAAC,EAAE,0BAA0B,CAAC;IACzC,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,2BAA2B,CAAC;CAChD;AAED,6FAA6F;AAC7F,MAAM,WAAW,wBAAwB;IACvC,+CAA+C;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,iDAAiD;IACjD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,4DAA4D;AAC5D,MAAM,WAAW,+BAA+B;IAC9C,qFAAqF;IACrF,SAAS,EAAE,OAAO,CAAC;IACnB,kFAAkF;IAClF,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,2CAA2C;IAC3C,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,6DAA6D;IAC7D,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qFAAqF;IACrF,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,6EAA6E;IAC7E,MAAM,CAAC,EAAE,8BAA8B,CAAC;IACxC,+DAA+D;IAC/D,aAAa,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;CAC/D;AAED,2DAA2D;AAC3D,MAAM,WAAW,8BAA8B;IAC7C;;;;OAIG;IACH,aAAa,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IAChE,0EAA0E;IAC1E,kBAAkB,EAAE,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,eAAe,EAAE,SAAS,CAAC;IAC3B;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC3D"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-prompts",
   "description": "Host-agnostic UI for picking a favorite prompt and resolving its {{parameter}} placeholders before it is inserted into a chat message",
-  "version": "1.2.0-dev.75",
+  "version": "1.2.0-dev.78",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -14,14 +14,19 @@
       "types": "./index.d.ts",
       "import": "./index.js",
       "default": "./index.js"
+    },
+    "./parameters-popup": {
+      "types": "./entry-points/parameters-popup.d.ts",
+      "import": "./parameters-popup.js",
+      "default": "./parameters-popup.js"
     }
   },
   "dependencies": {
     "@tabler/icons-react": "^3.44.0",
-    "@epam/ai-dial-catalog": "1.2.0-dev.75"
+    "@epam/ai-dial-catalog": "1.2.0-dev.78"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.2.0-dev.75",
+    "@epam/ai-dial-chat-shared": "1.2.0-dev.78",
     "@epam/ai-dial-ui-kit": "^0.15.0-dev.9",
     "react": "^19.2.8"
   },

package/parameters-popup.js

@@ -0,0 +1,99 @@
+import { useId as e, useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { CatalogEntityType as i, buildCssVars as a, buildPromptParamDefaults as o, mergeClasses as s } from "@epam/ai-dial-chat-shared";
+import { DIAL_KIT_ICON_STROKE as c, GhostIconButton as l, NeutralButton as u, Popup as d, PopupSize as f, PrimaryButton as p, Textarea as m } from "@epam/ai-dial-ui-kit";
+import { IconChevronLeft as h } from "@tabler/icons-react";
+import { AppIdentity as g, ContentTab as _, DeploymentSize as v } from "@epam/ai-dial-catalog";
+var y = { card: "_card_p8vwa_1" }, b = ({ open: b, promptName: x, content: S, description: C, parameters: w, onBack: T, onClose: E, onSubmit: D, onCancel: O, labels: k = {}, colors: A, titleClassName: j = "dial-h2-text", parametersLabelClassName: M = "dial-h2-text", detailsLabelClassName: N = "dial-h2-text" }) => {
+	let { title: P = "Prompt parameters", closeLabel: F = "Close", backLabel: I = "Back", parametersLabel: L = "Parameters", detailsLabel: R = "Details", enterValuePlaceholder: z = "Enter value", cancelLabel: B = "Cancel", submitLabel: V = "Confirm" } = k, H = w.map(({ name: e, defaultValue: t }) => `${e}\u0000${t ?? ""}`).join("
"), [U, W] = t(() => o(w)), [G, K] = t(H);
+	G !== H && (K(H), W(o(w)));
+	let q = e(), J = a({
+		"--pp-card-bg": A?.cardBackground,
+		"--pp-card-border": A?.cardBorder
+	}), Y = w.some(({ name: e }) => !U[e]?.trim());
+	return /* @__PURE__ */ n(d, {
+		open: b,
+		header: /* @__PURE__ */ r("div", {
+			className: "flex items-center gap-2",
+			children: [T != null && /* @__PURE__ */ n(l, {
+				icon: /* @__PURE__ */ n(h, {
+					className: "rtl:scale-x-[-1]",
+					"aria-hidden": !0,
+					stroke: c
+				}),
+				"aria-label": I,
+				onClick: T
+			}), /* @__PURE__ */ n("span", {
+				className: j,
+				children: P
+			})]
+		}),
+		ariaLabel: P,
+		size: f.Lg,
+		closeAriaLabel: F,
+		onClose: E,
+		footer: /* @__PURE__ */ r("div", {
+			className: "flex justify-end gap-2 px-6 py-4",
+			children: [/* @__PURE__ */ n(u, {
+				label: B,
+				onClick: O
+			}), /* @__PURE__ */ n(p, {
+				label: V,
+				disabled: Y,
+				onClick: () => {
+					Y || D(U);
+				}
+			})]
+		}),
+		children: /* @__PURE__ */ r("div", {
+			className: "flex flex-col gap-4 px-6 pb-4 pt-2",
+			children: [/* @__PURE__ */ n("div", {
+				className: s("flex h-[72px] w-full items-center rounded-lg border px-3", y.card),
+				style: J,
+				children: /* @__PURE__ */ n(g, {
+					type: i.Prompt,
+					name: x,
+					size: v.LG,
+					className: "w-full"
+				})
+			}), /* @__PURE__ */ r("div", {
+				className: "grid grid-cols-2 gap-4",
+				children: [/* @__PURE__ */ r("div", {
+					className: "flex flex-col gap-3",
+					children: [/* @__PURE__ */ n("h2", {
+						className: s(M, "m-0"),
+						children: L
+					}), w.map(({ name: e }) => {
+						let t = `${q}-${e}`;
+						return /* @__PURE__ */ n(m, {
+							id: t,
+							"aria-label": e,
+							value: U[e] ?? "",
+							labelProps: {
+								htmlFor: t,
+								label: e,
+								required: !0
+							},
+							placeholder: z,
+							onChange: (t) => W((n) => ({
+								...n,
+								[e]: t
+							}))
+						}, e);
+					})]
+				}), /* @__PURE__ */ r("div", {
+					className: "flex min-h-0 flex-col gap-3",
+					children: [/* @__PURE__ */ n("h2", {
+						className: s(N, "m-0"),
+						children: R
+					}), /* @__PURE__ */ n(_, {
+						content: S,
+						description: C
+					})]
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { b as PromptParametersPopup };