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

package/components/SkillArchiveUploadDialog/SkillArchiveUploadDialog.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { SkillArchiveUploadDialogProps } from '../../models/skill-archive-upload-dialog-props';
+/**
+ * Dialog presenting the drop area and supported formats for a skill-archive upload, so the host
+ * can start the flow before the native file picker appears. Presentation only — the host wires
+ * selection/rejection/close to its own import controller.
+ */
+export declare const SkillArchiveUploadDialog: FC<SkillArchiveUploadDialogProps>;
+//# sourceMappingURL=SkillArchiveUploadDialog.d.ts.map

package/components/SkillArchiveUploadDialog/SkillArchiveUploadDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillArchiveUploadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SkillArchiveUploadDialog/SkillArchiveUploadDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,gDAAgD,CAAC;AAIpG;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CA4CtE,CAAC"}

package/index.css

@@ -1,2 +1,2 @@
 ._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}}
-/*$vite$:1*/.visible{visibility:visible}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.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}.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}.flex-1{flex:1 1 0%}.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;text-overflow:ellipsis;white-space:nowrap}.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)}.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}.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)}@media (min-width:1280px){.desktop\:w-\[280px\]{width:280px}}
+/*$vite$:1*/.visible{visibility:visible}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.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}.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}.flex-1{flex:1 1 0%}.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;text-overflow:ellipsis;white-space:nowrap}.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)}.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)}@media (min-width:1280px){.desktop\:inline{display:inline}.desktop\:hidden{display:none}.desktop\:w-\[280px\]{width:280px}}

package/index.d.ts

@@ -1,5 +1,6 @@
 export { ChatSkill } from './components/ChatSkill/ChatSkill';
 export { FavoriteSkillsPanel } from './components/FavoriteSkillsPanel/FavoriteSkillsPanel';
+export { SkillArchiveUploadDialog } from './components/SkillArchiveUploadDialog/SkillArchiveUploadDialog';
 export { SkillCatalogModal } from './components/SkillCatalogModal/SkillCatalogModal';
 export { SkillDetailsSidePanel } from './components/SkillDetailsSidePanel/SkillDetailsSidePanel';
 export { SkillInfoTooltipContent } from './components/SkillInfoTooltipContent/SkillInfoTooltipContent';
@@ -8,6 +9,7 @@ export { buildFavoriteSkillItem } from './models/favorite-skill-item';
 export type { ChatSkillLabels, ChatSkillProps, } from './models/chat-skill-props';
 export type { FavoriteSkillItem, SkillListingEntry, } from './models/favorite-skill-item';
 export type { FavoriteSkillsPanelColors, FavoriteSkillsPanelLabels, FavoriteSkillsPanelProps, } from './models/favorite-skills-panel-props';
+export type { SkillArchiveUploadDialogLabels, SkillArchiveUploadDialogProps, } from './models/skill-archive-upload-dialog-props';
 export type { SkillCatalogModalProps } from './models/skill-catalog-modal-props';
 export type { SkillDetailsSidePanelProps } from './models/skill-details-side-panel-props';
 export type { SkillInfoTooltipContentProps } from './models/skill-info-tooltip-content-props';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,qBAAqB,EAAE,MAAM,0DAA0D,CAAC;AACjG,OAAO,EAAE,uBAAuB,EAAE,MAAM,8DAA8D,CAAC;AACvG,OAAO,EAAE,uBAAuB,EAAE,MAAM,yDAAyD,CAAC;AAClG,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,YAAY,EACV,eAAe,EACf,cAAc,GACf,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sCAAsC,CAAC;AAC9C,YAAY,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACjF,YAAY,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAC1F,YAAY,EAAE,4BAA4B,EAAE,MAAM,2CAA2C,CAAC;AAC9F,YAAY,EACV,+BAA+B,EAC/B,0BAA0B,EAC1B,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,wBAAwB,EAAE,MAAM,gEAAgE,CAAC;AAC1G,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,qBAAqB,EAAE,MAAM,0DAA0D,CAAC;AACjG,OAAO,EAAE,uBAAuB,EAAE,MAAM,8DAA8D,CAAC;AACvG,OAAO,EAAE,uBAAuB,EAAE,MAAM,yDAAyD,CAAC;AAClG,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,YAAY,EACV,eAAe,EACf,cAAc,GACf,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sCAAsC,CAAC;AAC9C,YAAY,EACV,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,4CAA4C,CAAC;AACpD,YAAY,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACjF,YAAY,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAC1F,YAAY,EAAE,4BAA4B,EAAE,MAAM,2CAA2C,CAAC;AAC9F,YAAY,EACV,+BAA+B,EAC/B,0BAA0B,EAC1B,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC"}

package/index.js

@@ -1,56 +1,56 @@
 import { DeploymentIcon as e, buildCssVars as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
-import { BASE_ICON_SIZE as r, Button as i, ButtonAppearance as a, ButtonVariant as o, DIAL_ICON_SIZE as s, DIAL_KIT_ICON_STROKE as c, GhostButton as l, Highlight as u, InteractiveTooltip as d, Popup as f, PopupSize as p, ToggleIconButton as m, TooltipPlacement as h } from "@epam/ai-dial-ui-kit";
-import { Suspense as g, useCallback as _, useEffect as v, useLayoutEffect as y, useMemo as b, useRef as x, useState as S } from "react";
-import { IconBlocks as C, IconEye as w, IconStarFilled as T } from "@tabler/icons-react";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { DetailsPanel as O } from "@epam/ai-dial-catalog";
+import { BASE_ICON_SIZE as r, Button as i, ButtonAppearance as a, ButtonVariant as o, DIAL_ICON_SIZE as s, DIAL_KIT_ICON_STROKE as c, FileDropzone as l, GhostButton as u, Highlight as d, InteractiveTooltip as f, Popup as p, PopupSize as m, ToggleIconButton as h, TooltipPlacement as g } from "@epam/ai-dial-ui-kit";
+import { Suspense as _, useCallback as v, useEffect as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as C } from "react";
+import { IconBlocks as w, IconEye as T, IconStarFilled as E } from "@tabler/icons-react";
+import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+import { DetailsPanel as A } from "@epam/ai-dial-catalog";
 //#region src/constants/public-class-names.ts
-var k = {
+var j = {
 	favoritesPanel: "dial-skills-favorites-panel",
 	chip: "dial-skills-chip"
-}, A = ({ description: e, unsupportedMessage: t, viewDetailsLabel: n = "View details", onViewDetails: r }) => t == null ? /* @__PURE__ */ D("div", {
+}, M = ({ description: e, unsupportedMessage: t, viewDetailsLabel: n = "View details", onViewDetails: r }) => t == null ? /* @__PURE__ */ k("div", {
 	className: "flex flex-col gap-3",
-	children: [e != null && e !== "" && /* @__PURE__ */ E("p", {
+	children: [e != null && e !== "" && /* @__PURE__ */ O("p", {
 		className: "text-start",
 		children: e
-	}), /* @__PURE__ */ E(i, {
+	}), /* @__PURE__ */ O(i, {
 		variant: o.Primary,
 		appearance: a.Link,
 		className: "h-[24px] self-start",
 		label: n,
-		iconBefore: /* @__PURE__ */ E(w, {
+		iconBefore: /* @__PURE__ */ O(T, {
 			size: s.SM,
 			stroke: c,
 			"aria-hidden": !0
 		}),
 		onClick: r
 	})]
-}) : /* @__PURE__ */ E("p", {
+}) : /* @__PURE__ */ O("p", {
 	className: "text-start",
 	children: t
-}), j = ({ name: e, path: t, description: r, isUnsupported: i = !1, labelClassName: a = "dial-body-paragraph-text", unsupportedLabelClassName: o = "text-error", unsupportedClassName: s = "bg-error", onViewDetails: c, labels: u = {} }) => {
-	let { viewDetailsLabel: f = "View details", unsupportedTooltipLabel: p = "Selected model does not support skills. Remove the skill or select different model to proceed." } = u, [m, g] = S(0);
-	return /* @__PURE__ */ E(d, {
+}), N = ({ name: e, path: t, description: r, isUnsupported: i = !1, labelClassName: a = "dial-body-paragraph-text", unsupportedLabelClassName: o = "text-error", unsupportedClassName: s = "bg-error", onViewDetails: c, labels: l = {} }) => {
+	let { viewDetailsLabel: d = "View details", unsupportedTooltipLabel: p = "Selected model does not support skills. Remove the skill or select different model to proceed." } = l, [m, h] = C(0);
+	return /* @__PURE__ */ O(f, {
 		asChild: !0,
-		placement: h.Top,
+		placement: g.Top,
 		contentClassName: "max-w-[550px]",
-		content: i ? /* @__PURE__ */ E(A, { unsupportedMessage: p }) : /* @__PURE__ */ E(A, {
+		content: i ? /* @__PURE__ */ O(M, { unsupportedMessage: p }) : /* @__PURE__ */ O(M, {
 			description: r,
-			viewDetailsLabel: f,
+			viewDetailsLabel: d,
 			onViewDetails: () => {
-				g((e) => e + 1), c(t);
+				h((e) => e + 1), c(t);
 			}
 		}),
-		children: /* @__PURE__ */ E("span", {
+		children: /* @__PURE__ */ O("span", {
 			className: "inline-flex items-center",
-			children: /* @__PURE__ */ E(l, {
+			children: /* @__PURE__ */ O(u, {
 				label: `/${e}`,
 				textClassName: i ? n(a, o) : a,
-				className: n("h-auto px-2 py-0", i && s, k.chip)
+				className: n("h-auto px-2 py-0", i && s, j.chip)
 			})
 		})
 	}, m);
-}, M = {
+}, P = {
 	row: "_row_1ovug_1",
 	header: "_header_1ovug_5",
 	emptyHint: "_emptyHint_1ovug_9",
@@ -61,24 +61,24 @@ var k = {
 	rowLeaving: "_rowLeaving_1ovug_29",
 	rowFadeOut: "_rowFadeOut_1ovug_1",
 	listContent: "_listContent_1ovug_57"
-}, N = "px-3 pb-0.5 pt-2", P = 180, F = 288, I = ({ favorites: r, onSelect: i, onToggleFavorite: a, onBrowse: o, onViewDetails: c, searchQuery: f, labels: p = {}, colors: h, nameClassName: g = "dial-small-text", headerClassName: _ = "dial-tiny-lead-semi-text", emptyHintClassName: b = "dial-small-text" }) => {
-	let { myCollectionLabel: C = "My Collection", emptyHintLabel: w = "Star a skill to pin it here", browseLabel: O = "Browse", removeFromFavoritesLabel: j = "Remove from favorites", viewDetailsLabel: I = "View details", noMatchingSkillsLabel: L = "No matching skills" } = p, R = t({
-		"--fs-row-hover-bg": h?.rowHoverBackground,
-		"--fs-header-text": h?.headerText,
-		"--fs-empty-hint-text": h?.emptyHintText,
-		"--fs-star-color": h?.starColor,
-		"--fs-footer-border": h?.footerBorder
-	}), [z, B] = S(/* @__PURE__ */ new Set()), V = x(/* @__PURE__ */ new Map());
-	v(() => {
+}, F = "px-3 pb-0.5 pt-2", I = 180, L = 288, R = ({ favorites: r, onSelect: i, onToggleFavorite: a, onBrowse: o, onViewDetails: c, searchQuery: l, labels: p = {}, colors: m, nameClassName: g = "dial-small-text", headerClassName: _ = "dial-tiny-lead-semi-text", emptyHintClassName: v = "dial-small-text" }) => {
+	let { myCollectionLabel: x = "My Collection", emptyHintLabel: w = "Star a skill to pin it here", browseLabel: T = "Browse", removeFromFavoritesLabel: D = "Remove from favorites", viewDetailsLabel: A = "View details", noMatchingSkillsLabel: N = "No matching skills" } = p, R = t({
+		"--fs-row-hover-bg": m?.rowHoverBackground,
+		"--fs-header-text": m?.headerText,
+		"--fs-empty-hint-text": m?.emptyHintText,
+		"--fs-star-color": m?.starColor,
+		"--fs-footer-border": m?.footerBorder
+	}), [z, B] = C(/* @__PURE__ */ new Set()), V = S(/* @__PURE__ */ new Map());
+	y(() => {
 		let e = V.current;
 		return () => {
 			e.forEach((e) => clearTimeout(e)), e.clear();
 		};
 	}, []);
-	let H = f != null, U = f?.toLowerCase() ?? "", W = H ? r.filter((e) => e.name.toLowerCase().includes(U)) : r, G = x(null), [K, q] = S();
-	y(() => {
-		G.current && q(Math.min(G.current.scrollHeight, F));
-	}, [r, f]);
+	let H = l != null, U = l?.toLowerCase() ?? "", W = H ? r.filter((e) => e.name.toLowerCase().includes(U)) : r, G = S(null), [K, q] = C();
+	b(() => {
+		G.current && q(Math.min(G.current.scrollHeight, L));
+	}, [r, l]);
 	let J = (e, t) => {
 		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), i(t));
 	}, Y = (e) => {
@@ -88,52 +88,52 @@ var k = {
 				let n = new Set(t);
 				return n.delete(e), n;
 			}), V.current.delete(e);
-		}, P);
+		}, I);
 		V.current.set(e, t);
 	};
-	return /* @__PURE__ */ D("div", {
-		className: n("flex w-full flex-col desktop:w-[280px]", k.favoritesPanel),
+	return /* @__PURE__ */ k("div", {
+		className: n("flex w-full flex-col desktop:w-[280px]", j.favoritesPanel),
 		style: R,
 		children: [
-			/* @__PURE__ */ E("p", {
-				className: n(_, N, M.header),
-				children: C
+			/* @__PURE__ */ O("p", {
+				className: n(_, F, P.header),
+				children: x
 			}),
-			/* @__PURE__ */ E("div", {
-				className: n("max-h-72 min-h-0 flex-1 overflow-y-auto", M.listContent),
+			/* @__PURE__ */ O("div", {
+				className: n("max-h-72 min-h-0 flex-1 overflow-y-auto", P.listContent),
 				style: { maxHeight: K },
-				children: /* @__PURE__ */ E("div", {
+				children: /* @__PURE__ */ O("div", {
 					ref: G,
-					children: W.length > 0 ? /* @__PURE__ */ E("ul", {
+					children: W.length > 0 ? /* @__PURE__ */ O("ul", {
 						className: "flex flex-col gap-1 px-1 pb-1",
 						children: W.map((t) => {
-							let r = /* @__PURE__ */ D("div", {
+							let r = /* @__PURE__ */ k("div", {
 								role: "button",
 								tabIndex: 0,
-								className: n("flex cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 transition-colors", M.row),
+								className: n("flex cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 transition-colors", P.row),
 								onClick: () => i(t),
 								onKeyDown: (e) => J(e, t),
 								children: [
-									/* @__PURE__ */ E(e, {
+									/* @__PURE__ */ O(e, {
 										size: s.MD,
 										initialsName: t.name
 									}),
-									f == null ? /* @__PURE__ */ E("span", {
+									l == null ? /* @__PURE__ */ O("span", {
 										className: n(g, "min-w-0 flex-1 truncate text-start"),
 										children: t.name
-									}) : /* @__PURE__ */ E(u, {
+									}) : /* @__PURE__ */ O(d, {
 										text: t.name,
-										query: f,
+										query: l,
 										maxLines: 1,
 										className: n(g, "min-w-0 flex-1 text-start")
 									}),
-									/* @__PURE__ */ E(m, {
-										icon: /* @__PURE__ */ E(T, {
+									/* @__PURE__ */ O(h, {
+										icon: /* @__PURE__ */ O(E, {
 											size: s.SM,
-											className: M.star,
+											className: P.star,
 											"aria-hidden": !0
 										}),
-										"aria-label": j,
+										"aria-label": D,
 										isSelected: !0,
 										onClick: (e) => {
 											e.stopPropagation(), Y(t.id);
@@ -141,63 +141,90 @@ var k = {
 									})
 								]
 							});
-							return /* @__PURE__ */ E("li", {
-								className: z.has(t.id) ? M.rowLeaving : M.rowEnter,
-								children: /* @__PURE__ */ E(d, {
+							return /* @__PURE__ */ O("li", {
+								className: z.has(t.id) ? P.rowLeaving : P.rowEnter,
+								children: /* @__PURE__ */ O(f, {
 									asChild: !0,
 									contentClassName: "max-w-[550px]",
-									content: /* @__PURE__ */ E(A, {
+									content: /* @__PURE__ */ O(M, {
 										description: t.description,
-										viewDetailsLabel: I,
+										viewDetailsLabel: A,
 										onViewDetails: () => c(t)
 									}),
 									children: r
 								})
 							}, t.id);
 						})
-					}) : H && U !== "" ? /* @__PURE__ */ E("p", {
+					}) : H && U !== "" ? /* @__PURE__ */ O("p", {
 						role: "status",
 						"aria-live": "polite",
-						className: n(b, "px-4 py-4 text-start", M.emptyHint),
-						children: L
-					}) : /* @__PURE__ */ E("p", {
-						className: n(b, "px-4 py-4 text-start", M.emptyHint),
+						className: n(v, "px-4 py-4 text-start", P.emptyHint),
+						children: N
+					}) : /* @__PURE__ */ O("p", {
+						className: n(v, "px-4 py-4 text-start", P.emptyHint),
 						children: w
 					})
 				})
 			}),
-			/* @__PURE__ */ E("div", {
-				className: n("border-t px-2 py-3", M.footer),
-				children: /* @__PURE__ */ E(l, {
-					label: O,
+			/* @__PURE__ */ O("div", {
+				className: n("border-t px-2 py-3", P.footer),
+				children: /* @__PURE__ */ O(u, {
+					label: T,
 					className: "w-full justify-center",
 					onClick: o
 				})
 			})
 		]
 	});
-}, L = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ E(f, {
+}, z = ".zip,.md", B = ({ isOpen: e, errorText: t, accept: n = z, labels: r, onClose: i, onFilesSelected: a, onFilesRejected: o }) => {
+	let { dialogTitle: s = "Upload skill", dropZoneLabel: c = "Drag and drop it or click here to upload", dropZoneMobileLabel: u = "Click here to upload", formatsLabel: d = "File formats .zip and SKILL.md", fileInputAriaLabel: f = "Upload a skill ZIP archive or a SKILL.md file", closeAriaLabel: h = "Close" } = r ?? {};
+	return /* @__PURE__ */ O(p, {
+		open: e,
+		size: m.Sm,
+		header: s,
+		closeAriaLabel: h,
+		onClose: i,
+		children: /* @__PURE__ */ O("div", {
+			className: "px-6 py-4",
+			children: /* @__PURE__ */ O(l, {
+				label: /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O("span", {
+					className: "desktop:hidden",
+					children: u
+				}), /* @__PURE__ */ O("span", {
+					className: "hidden desktop:inline",
+					children: c
+				})] }),
+				description: d,
+				ariaLabel: f,
+				accept: n,
+				errorText: t,
+				onChange: a,
+				onReject: o
+			})
+		})
+	});
+}, V = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ O(p, {
 	open: e,
 	header: r,
-	size: p.Lg,
+	size: m.Lg,
 	className: "h-[min(90vh,860px)] !max-w-[min(95vw,1200px)] overflow-hidden",
 	onClose: t,
-	children: /* @__PURE__ */ E("div", {
+	children: /* @__PURE__ */ O("div", {
 		className: "h-[min(80vh,840px)] overflow-auto",
-		children: /* @__PURE__ */ E(g, {
+		children: /* @__PURE__ */ O(_, {
 			fallback: null,
 			children: e && i(n, t)
 		})
 	})
-}), R = (e) => /* @__PURE__ */ E(O, { ...e }), z = (e) => ({
+}), H = (e) => /* @__PURE__ */ O(A, { ...e }), U = (e) => ({
 	id: e.url,
 	name: e.name,
 	description: e.description
-}), B = (e) => {
+}), W = (e) => {
 	let t = e.split("/").filter((e) => e.length > 0);
 	return t[t.length - 1] ?? e;
-}, V = ({ isEnabled: e, isSkillsSupported: t, skills: n, sharedWithMe: i, publicSkills: a, favoriteIds: o, onToggleFavorite: s, labels: l, historyChipLabelClassName: u, renderCatalogContent: d, detailsPanelComponent: f }) => {
-	let { addMenuLabel: p = "Skills", backLabel: m = "Back", catalogModalTitleLabel: h = "Use skill", emptyQueryHintLabel: v = "Type to filter", unsupportedTooltipLabel: y = "Selected model does not support skills. Remove the skill or select different model to proceed.", panelLabels: x } = l ?? {}, w = e && t, [T, D] = S(!1), [O, k] = S(null), [A, M] = S(null), N = b(() => [
+}, G = ({ isEnabled: e, isSkillsSupported: t, skills: n, sharedWithMe: i, publicSkills: a, favoriteIds: o, onToggleFavorite: s, labels: l, historyChipLabelClassName: u, renderCatalogContent: d, detailsPanelComponent: f }) => {
+	let { addMenuLabel: p = "Skills", backLabel: m = "Back", catalogModalTitleLabel: h = "Use skill", emptyQueryHintLabel: g = "Type to filter", unsupportedTooltipLabel: y = "Selected model does not support skills. Remove the skill or select different model to proceed.", panelLabels: b } = l ?? {}, S = e && t, [T, E] = C(!1), [D, k] = C(null), [A, j] = C(null), M = x(() => [
 		...n,
 		...i ?? [],
 		...a ?? []
@@ -205,61 +232,61 @@ var k = {
 		n,
 		i,
 		a
-	]), P = b(() => new Map(N.map((e) => [e.url, e])), [N]), F = b(() => N.filter((e) => o.has(e.url)).map((e) => z(e)), [N, o]), R = b(() => A == null ? null : P.get(A) ?? null, [P, A]), V = R != null && !t, H = _((e) => {
-		M(e);
-	}, []), U = _(() => {
-		M(null);
-	}, []), W = A, G = b(() => A == null ? void 0 : [{ url: A }], [A]), K = b(() => R == null ? null : /* @__PURE__ */ E(j, {
-		name: R.name,
-		path: R.url,
-		description: R.description,
-		isUnsupported: V,
+	]), P = x(() => new Map(M.map((e) => [e.url, e])), [M]), F = x(() => M.filter((e) => o.has(e.url)).map((e) => U(e)), [M, o]), I = x(() => A == null ? null : P.get(A) ?? null, [P, A]), L = I != null && !t, z = v((e) => {
+		j(e);
+	}, []), B = v(() => {
+		j(null);
+	}, []), H = A, G = x(() => A == null ? void 0 : [{ url: A }], [A]), K = x(() => I == null ? null : /* @__PURE__ */ O(N, {
+		name: I.name,
+		path: I.url,
+		description: I.description,
+		isUnsupported: L,
 		onViewDetails: k,
 		labels: {
-			viewDetailsLabel: x?.viewDetailsLabel,
+			viewDetailsLabel: b?.viewDetailsLabel,
 			unsupportedTooltipLabel: y
 		}
 	}), [
-		R,
-		V,
-		x,
+		I,
+		L,
+		b,
 		y
-	]), q = _((e) => e == null || e.length === 0 ? null : e.map((e) => {
+	]), q = v((e) => e == null || e.length === 0 ? null : e.map((e) => {
 		let t = P.get(e.url);
-		return /* @__PURE__ */ E(j, {
-			name: t?.name ?? B(e.url),
+		return /* @__PURE__ */ O(N, {
+			name: t?.name ?? W(e.url),
 			path: e.url,
 			labelClassName: u,
 			description: t?.description,
 			onViewDetails: k,
-			labels: { viewDetailsLabel: x?.viewDetailsLabel }
+			labels: { viewDetailsLabel: b?.viewDetailsLabel }
 		}, e.url);
 	}), [
 		P,
 		u,
-		x
-	]), J = _((e) => /* @__PURE__ */ E(I, {
+		b
+	]), J = v((e) => /* @__PURE__ */ O(R, {
 		favorites: F,
 		onSelect: (t) => {
-			H(t.id), e();
+			z(t.id), e();
 		},
 		onToggleFavorite: s,
 		onBrowse: () => {
-			e(), D(!0);
+			e(), E(!0);
 		},
 		onViewDetails: (t) => {
 			e(), k(t.id);
 		},
-		labels: x
+		labels: b
 	}), [
 		F,
-		H,
+		z,
 		s,
-		x
-	]), Y = b(() => w ? {
+		b
+	]), Y = x(() => S ? {
 		key: "skills",
 		title: p,
-		icon: /* @__PURE__ */ E(C, {
+		icon: /* @__PURE__ */ O(w, {
 			size: r,
 			"aria-hidden": !0,
 			stroke: c
@@ -267,63 +294,63 @@ var k = {
 		renderOverlay: J,
 		backLabel: m
 	} : void 0, [
-		w,
+		S,
 		p,
 		m,
 		J
-	]), X = b(() => w ? {
+	]), X = x(() => S ? {
 		triggerPrefix: "/",
 		menuLabel: p,
-		emptyQueryHint: v,
-		renderMenu: ({ query: e, close: t }) => /* @__PURE__ */ E(I, {
+		emptyQueryHint: g,
+		renderMenu: ({ query: e, close: t }) => /* @__PURE__ */ O(R, {
 			favorites: F,
 			searchQuery: e,
 			onSelect: (e) => {
-				t({ consumeQuery: !0 }), H(e.id);
+				t({ consumeQuery: !0 }), z(e.id);
 			},
 			onToggleFavorite: s,
 			onBrowse: () => {
-				t({ consumeQuery: !0 }), D(!0);
+				t({ consumeQuery: !0 }), E(!0);
 			},
 			onViewDetails: (e) => {
 				t({ consumeQuery: !0 }), k(e.id);
 			},
-			labels: x
+			labels: b
 		})
 	} : void 0, [
-		w,
+		S,
 		p,
-		v,
+		g,
 		F,
-		H,
+		z,
 		s,
-		x
+		b
 	]);
 	return e ? {
 		skillMenuOverlay: Y,
 		commandMenu: X,
-		skillCatalogModal: /* @__PURE__ */ E(L, {
+		skillCatalogModal: /* @__PURE__ */ O(V, {
 			isOpen: T,
-			onClose: () => D(!1),
+			onClose: () => E(!1),
 			onSelect: (e) => {
-				H(e), D(!1);
+				z(e), E(!1);
 			},
 			title: h,
 			renderContent: d
 		}),
-		skillDetailsPanel: /* @__PURE__ */ E(g, {
+		skillDetailsPanel: /* @__PURE__ */ O(_, {
 			fallback: null,
-			children: /* @__PURE__ */ E(f, {
-				skillId: O,
+			children: /* @__PURE__ */ O(f, {
+				skillId: D,
 				onClose: () => k(null)
 			})
 		}),
 		selectedSkillElement: K,
-		selectedSkillPath: W,
+		selectedSkillPath: H,
 		selectedSkills: G,
-		isSkillUnsupported: V,
-		selectSkill: H,
-		removeSelectedSkill: U,
+		isSkillUnsupported: L,
+		selectSkill: z,
+		removeSelectedSkill: B,
 		renderHistorySkills: q
 	} : {
 		skillMenuOverlay: void 0,
@@ -340,4 +367,4 @@ var k = {
 	};
 };
 //#endregion
-export { j as ChatSkill, I as FavoriteSkillsPanel, k as SKILLS_CLASS, L as SkillCatalogModal, R as SkillDetailsSidePanel, A as SkillInfoTooltipContent, z as buildFavoriteSkillItem, V as useSkillSelectorOverlay };
+export { N as ChatSkill, R as FavoriteSkillsPanel, j as SKILLS_CLASS, B as SkillArchiveUploadDialog, V as SkillCatalogModal, H as SkillDetailsSidePanel, M as SkillInfoTooltipContent, U as buildFavoriteSkillItem, G as useSkillSelectorOverlay };

package/models/skill-archive-upload-dialog-props.d.ts

@@ -0,0 +1,33 @@
+/** Labels for {@link SkillArchiveUploadDialogProps}; each has an English default. */
+export interface SkillArchiveUploadDialogLabels {
+    /** Dialog header. Defaults to `'Upload skill'`. */
+    dialogTitle?: string;
+    /** Drop-zone label shown on desktop widths. Defaults to `'Drag and drop it or click here to upload'`. */
+    dropZoneLabel?: string;
+    /** Drop-zone label shown on mobile widths. Defaults to `'Click here to upload'`. */
+    dropZoneMobileLabel?: string;
+    /** Sentence describing accepted formats, shown under the drop zone. Defaults to `'File formats .zip and SKILL.md'`. */
+    formatsLabel?: string;
+    /** Accessible name for the native file input. Defaults to `'Upload a skill ZIP archive or a SKILL.md file'`. */
+    fileInputAriaLabel?: string;
+    /** Accessible name for the dialog's close button. Defaults to `'Close'`. */
+    closeAriaLabel?: string;
+}
+/** Props for {@link SkillArchiveUploadDialog}. */
+export interface SkillArchiveUploadDialogProps {
+    /** Whether the dialog is open. */
+    isOpen: boolean;
+    /** Rejection message rendered under the drop area; omit when nothing was rejected. */
+    errorText?: string;
+    /** `accept` value forwarded to the drop zone/native file input. Defaults to `'.zip,.md'`. */
+    accept?: string;
+    /** Labels rendered by the dialog; each falls back to an English default. */
+    labels?: SkillArchiveUploadDialogLabels;
+    /** Called on Escape, the close button, or an outside click. */
+    onClose: () => void;
+    /** Called with the picked or dropped files that `accept` allowed through. */
+    onFilesSelected: (files: File[]) => void;
+    /** Called when a drop carried files that `accept` excluded. */
+    onFilesRejected: () => void;
+}
+//# sourceMappingURL=skill-archive-upload-dialog-props.d.ts.map

package/models/skill-archive-upload-dialog-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-archive-upload-dialog-props.d.ts","sourceRoot":"","sources":["../../src/models/skill-archive-upload-dialog-props.ts"],"names":[],"mappings":"AAAA,qFAAqF;AACrF,MAAM,WAAW,8BAA8B;IAC7C,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yGAAyG;IACzG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oFAAoF;IACpF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uHAAuH;IACvH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gHAAgH;IAChH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,kDAAkD;AAClD,MAAM,WAAW,6BAA6B;IAC5C,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,sFAAsF;IACtF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6FAA6F;IAC7F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,8BAA8B,CAAC;IACxC,+DAA+D;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6EAA6E;IAC7E,eAAe,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACzC,+DAA+D;IAC/D,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B"}

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

@@ -1,4 +1,4 @@
-import { RequestSkill } from '../../../chat-shared/src/index.ts';
+import { RequestSkill } from '@epam/ai-dial-chat-shared';
 import { CommandMenuConfig, MenuOverlayConfig } from '@epam/ai-dial-conversation-input';
 import { ComponentType, ReactNode } from 'react';
 import { SkillListingEntry } from './favorite-skill-item';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-skills",
   "description": "Host-agnostic UI for picking a favorite skill to attach to a chat input",
-  "version": "1.2.0-dev.75",
+  "version": "1.2.0-dev.78",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -18,11 +18,11 @@
   },
   "dependencies": {
     "@tabler/icons-react": "^3.44.0",
-    "@epam/ai-dial-catalog": "1.2.0-dev.75",
-    "@epam/ai-dial-conversation-input": "1.2.0-dev.75"
+    "@epam/ai-dial-catalog": "1.2.0-dev.78",
+    "@epam/ai-dial-conversation-input": "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"
   },