@epam/ai-dial-conversation-panel 1.1.0-dev.127 → 1.1.0-dev.129

package/index.js

@@ -1,6 +1,6 @@
 import { DeploymentIcon as e, buildCssVars as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
 import { PanelEmpty as r, PanelNoResults as i, SearchInput as a, SidebarOrientation as o, SidebarPanel as s } from "@epam/ai-dial-sidebar";
-import { Button as c, DIAL_ICON_SIZE as l, DialDropdown as u, DialEllipsisTooltip as d, DialSkeleton as f, DialSkeletonVariant as p, DialTag as m, ElementSize as h, GhostIconButton as g, Highlight as _, mergeClasses as v } from "@epam/ai-dial-ui-kit";
+import { Button as c, DIAL_ICON_SIZE as l, DialEllipsisTooltip as u, DialTag as d, Dropdown as f, ElementSize as p, GhostIconButton as m, Highlight as h, Skeleton as g, SkeletonVariant as _, mergeClasses as v } from "@epam/ai-dial-ui-kit";
 import { createElement as y, memo as b, useCallback as x, useEffect as S, useId as C, useImperativeHandle as w, useLayoutEffect as T, useMemo as E, useRef as D, useState as O } from "react";
 import { Fragment as ee, jsx as k, jsxs as A } from "react/jsx-runtime";
 import { IconCaretDownFilled as j, IconCaretRightFilled as M, IconClock as N, IconDotsVertical as te, IconPlus as ne } from "@tabler/icons-react";
@@ -501,7 +501,7 @@ var Y = /* @__PURE__ */ function(e) {
 				role: "tab",
 				"aria-selected": t,
 				className: "contents",
-				children: /* @__PURE__ */ k(m, {
+				children: /* @__PURE__ */ k(d, {
 					label: e.label,
 					selected: t,
 					onClick: () => i(e.id),
@@ -568,7 +568,7 @@ var Y = /* @__PURE__ */ function(e) {
 	triggerActive: "_triggerActive_1qyc3_27",
 	triggerIcon: "_triggerIcon_1qyc3_30",
 	unreadDot: "_unreadDot_1qyc3_38"
-}, Se = ({ label: e, isExpanded: t, onToggle: r, listId: i, className: a = "dial-tiny-semi-text uppercase", dropZoneGroupKey: o, isDragOver: s, onDragOver: c, onDragLeave: l, onDrop: u }) => {
+}, Se = ({ label: e, isExpanded: t, onToggle: r, listId: i, className: a = "dial-tiny-lead-text", dropZoneGroupKey: o, isDragOver: s, onDragOver: c, onDragLeave: l, onDrop: d }) => {
 	let f = o != null;
 	return /* @__PURE__ */ A("button", {
 		type: "button",
@@ -582,7 +582,7 @@ var Y = /* @__PURE__ */ function(e) {
 			f && (e.currentTarget.contains(e.relatedTarget) || l?.());
 		} : void 0,
 		onDrop: f ? (e) => {
-			f && (e.preventDefault(), u?.(o, o, null));
+			f && (e.preventDefault(), d?.(o, o, null));
 		} : void 0,
 		className: n("flex h-6 w-full items-center gap-1 rounded py-1 pe-3 text-start", a, Z.groupHeader, s && Z.dropZoneActive),
 		children: [t ? /* @__PURE__ */ k(j, {
@@ -595,13 +595,13 @@ var Y = /* @__PURE__ */ function(e) {
 			size: 12,
 			className: "shrink-0 rtl:scale-x-[-1]",
 			"aria-hidden": !0
-		}), /* @__PURE__ */ k(d, { text: e })]
+		}), /* @__PURE__ */ k(u, { text: e })]
 	});
-}, Ce = ({ item: t, isActive: r, onSelectConversation: i, searchQuery: a = "", getActions: o, onActionMenuOpen: s, actionsLabel: d = "More actions", itemTitleClassName: m = "dial-small-text", itemIconBadgeClassName: v, taskBadgeClassName: y = "dial-caption-semi-text uppercase tracking-[0.6px]", unreadIndicatorLabel: b = "Unread", rowGroupKey: S, rows: C, draggingId: w, dragOverId: T, allowedDropGroups: E, onDragStart: j, onDragEnd: M, onDragOver: ne, onDragLeave: P, onDrop: F }) => {
+}, Ce = ({ item: t, isActive: r, onSelectConversation: i, searchQuery: a = "", getActions: o, onActionMenuOpen: s, actionsLabel: u = "More actions", itemTitleClassName: d = "dial-small-text", itemIconBadgeClassName: v, taskBadgeClassName: y = "dial-caption-semi-text uppercase tracking-[0.6px]", unreadIndicatorLabel: b = "Unread", rowGroupKey: S, rows: C, draggingId: w, dragOverId: T, allowedDropGroups: E, onDragStart: j, onDragEnd: M, onDragOver: ne, onDragLeave: P, onDrop: F }) => {
 	let [I, re] = O(!1), L = D(null), ie = x((e) => {
 		re(e), e && L.current && s?.(t, L.current);
-	}, [t, s]), R = o?.(t) ?? [], z = R.length > 0, B = t.isIconLoading ? /* @__PURE__ */ k(f, {
-		variant: p.Circular,
+	}, [t, s]), R = o?.(t) ?? [], z = R.length > 0, B = t.isIconLoading ? /* @__PURE__ */ k(g, {
+		variant: _.Circular,
 		width: l.LG,
 		height: l.LG,
 		color: Z.skeletonColor,
@@ -661,10 +661,10 @@ var Y = /* @__PURE__ */ function(e) {
 			},
 			children: /* @__PURE__ */ k(c, {
 				iconBefore: ae,
-				label: /* @__PURE__ */ k(_, {
+				label: /* @__PURE__ */ k(h, {
 					text: t.title,
 					query: a,
-					className: m,
+					className: d,
 					maxLines: 1
 				}),
 				iconAfter: H,
@@ -676,20 +676,20 @@ var Y = /* @__PURE__ */ function(e) {
 			})
 		}), z && /* @__PURE__ */ k("div", {
 			className: n("absolute inset-y-0 end-1 flex items-center", I ? "opacity-100" : "opacity-0 group-focus-within/conversation:opacity-100 group-hover/conversation:opacity-100"),
-			children: /* @__PURE__ */ k(u, {
+			children: /* @__PURE__ */ k(f, {
 				items: R,
 				onOpenChange: ie,
 				matchReferenceWidth: !1,
-				listClassName: "w-[140px] cp-dropdown-overlay",
-				children: /* @__PURE__ */ k(g, {
+				listClassName: "w-[140px]",
+				children: /* @__PURE__ */ k(m, {
 					ref: L,
 					icon: /* @__PURE__ */ k(te, {
 						size: l.SM,
 						className: Z.triggerIcon,
 						"aria-hidden": !0
 					}),
-					size: h.Small,
-					"aria-label": d,
+					size: p.Small,
+					"aria-label": u,
 					className: n(I && Z.triggerActive)
 				})
 			})
@@ -750,8 +750,8 @@ var Y = /* @__PURE__ */ function(e) {
 	X.MyChats,
 	X.Shared,
 	X.Organization
-]), Oe = b(({ conversations: e, isLoading: c, isOpen: l, onSelectConversation: u, activeConversationId: d, labels: p, onNewChat: m, styles: h, className: g, getActions: _, onActionMenuOpen: v, onToggle: y, headerActions: b, onMoveConversation: w, activeFilter: T, onActiveFilterChange: ee }) => {
-	let { colors: j, typography: M, newChatButton: N } = h ?? {}, { title: te, emptyLabel: ne, noResultsLabel: P, loadingLabel: F = "Loading conversations", newChatLabel: I, searchPlaceholder: re, searchClearLabel: L, filterLabels: ie, groupLabels: R, actionsLabel: z, unreadIndicatorLabel: B, closeAriaLabel: ae } = p, [V, H] = O(""), [U, W] = O(X.All);
+]), Oe = b(({ conversations: e, isLoading: c, isOpen: l, onSelectConversation: u, activeConversationId: d, labels: f, onNewChat: p, styles: m, className: h, getActions: _, onActionMenuOpen: v, onToggle: y, headerActions: b, onMoveConversation: w, activeFilter: T, onActiveFilterChange: ee }) => {
+	let { colors: j, typography: M, newChatButton: N } = m ?? {}, { title: te, emptyLabel: ne, noResultsLabel: P, loadingLabel: F = "Loading conversations", newChatLabel: I, searchPlaceholder: re, searchClearLabel: L, filterLabels: ie, groupLabels: R, actionsLabel: z, unreadIndicatorLabel: B, closeAriaLabel: ae } = f, [V, H] = O(""), [U, W] = O(X.All);
 	S(() => {
 		T != null && W(T);
 	}, [T]);
@@ -870,8 +870,8 @@ var Y = /* @__PURE__ */ function(e) {
 		styles: {
 			groupHeaderClassName: M?.groupHeaderClassName,
 			itemTitleClassName: M?.itemTitleClassName,
-			itemIconBadgeClassName: h?.itemIconBadgeClassName,
-			taskBadgeClassName: h?.taskBadgeClassName
+			itemIconBadgeClassName: m?.itemIconBadgeClassName,
+			taskBadgeClassName: m?.taskBadgeClassName
 		},
 		draggingId: fe,
 		dragOverId: ge,
@@ -895,8 +895,8 @@ var Y = /* @__PURE__ */ function(e) {
 		B,
 		M?.groupHeaderClassName,
 		M?.itemTitleClassName,
-		h?.itemIconBadgeClassName,
-		h?.taskBadgeClassName,
+		m?.itemIconBadgeClassName,
+		m?.taskBadgeClassName,
 		fe,
 		ge,
 		ve,
@@ -925,13 +925,13 @@ var Y = /* @__PURE__ */ function(e) {
 			cssVars: Ie,
 			titleClassName: M?.fontClassName,
 			headerClassName: "h-[64px]",
-			className: n(l ? "w-[324px] mobile:w-full" : "w-0", g)
+			className: n(l ? "w-[324px] mobile:w-full" : "w-0", h)
 		},
 		rightActions: b,
 		children: [
 			/* @__PURE__ */ k(xe, {
 				label: I,
-				onClick: m,
+				onClick: p,
 				labelClassName: M?.newChatLabelClassName,
 				colors: N
 			}),
@@ -961,7 +961,7 @@ var Y = /* @__PURE__ */ function(e) {
 				className: "flex-1 overflow-hidden px-2 py-1",
 				children: c ? /* @__PURE__ */ k("div", {
 					className: "flex flex-col gap-3 px-2 py-3",
-					children: Array.from({ length: 15 }, (e, t) => /* @__PURE__ */ k(f, {
+					children: Array.from({ length: 15 }, (e, t) => /* @__PURE__ */ k(g, {
 						avatar: { size: 24 },
 						showTitle: { width: le(t) },
 						paragraph: !1,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-conversation-panel",
   "description": "Virtualized sidebar panel for browsing conversation history with grouping, tabs, and search",
-  "version": "1.1.0-dev.127",
+  "version": "1.1.0-dev.129",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -18,14 +18,14 @@
   },
   "dependencies": {
     "react-window": "^2.2.7",
-    "@epam/ai-dial-kit": "1.1.0-dev.127",
+    "@epam/ai-dial-kit": "1.1.0-dev.129",
     "@epam/ai-dial-ui-kit": "^0.13.0-dev.26"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "@tabler/icons-react": "^3.0.0",
-    "@epam/ai-dial-chat-shared": "1.1.0-dev.127",
-    "@epam/ai-dial-sidebar": "1.1.0-dev.127"
+    "@epam/ai-dial-chat-shared": "1.1.0-dev.129",
+    "@epam/ai-dial-sidebar": "1.1.0-dev.129"
   },
   "repository": {
     "type": "git",