@epam/ai-dial-conversation-panel 0.0.0-dev.0

package/index.js

@@ -0,0 +1,871 @@
+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 { ButtonAppearance as c, DIAL_ICON_SIZE as l, DialButton as u, DialDropdown as d, DialEllipsisTooltip as f, DialIconButton as p, DialSkeleton as m, DialSkeletonVariant as h, DialTag as g, ElementSize as _ } from "@epam/ai-dial-ui-kit";
+import { createElement as v, memo as y, useCallback as b, useEffect as x, useImperativeHandle as S, useLayoutEffect as C, useMemo as w, useRef as T, useState as E } from "react";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { IconCaretDownFilled as k, IconCaretRightFilled as A, IconDotsVertical as j, IconPlus as M } from "@tabler/icons-react";
+//#region ../../node_modules/react-window/dist/react-window.js
+var N = typeof window < "u" ? C : x;
+function P(e) {
+	if (e !== void 0) switch (typeof e) {
+		case "number": return e;
+		case "string":
+			if (e.endsWith("px")) return parseFloat(e);
+			break;
+	}
+}
+function F({ box: e, defaultHeight: t, defaultWidth: n, disabled: r, element: i, mode: a, style: o }) {
+	let { styleHeight: s, styleWidth: c } = w(() => ({
+		styleHeight: P(o?.height),
+		styleWidth: P(o?.width)
+	}), [o?.height, o?.width]), [l, u] = E({
+		height: t,
+		width: n
+	}), d = r || a === "only-height" && s !== void 0 || a === "only-width" && c !== void 0 || s !== void 0 && c !== void 0;
+	return N(() => {
+		if (i === null || d) return;
+		let t = new ResizeObserver((e) => {
+			for (let t of e) {
+				let { contentRect: e, target: n } = t;
+				i === n && u((t) => t.height === e.height && t.width === e.width ? t : {
+					height: e.height,
+					width: e.width
+				});
+			}
+		});
+		return t.observe(i, { box: e }), () => {
+			t?.unobserve(i);
+		};
+	}, [
+		e,
+		d,
+		i,
+		s,
+		c
+	]), w(() => ({
+		height: s ?? l.height,
+		width: c ?? l.width
+	}), [
+		l,
+		s,
+		c
+	]);
+}
+function ee(e) {
+	let t = T(() => {
+		throw Error("Cannot call during render.");
+	});
+	return N(() => {
+		t.current = e;
+	}, [e]), b((e) => t.current?.(e), [t]);
+}
+var I = null;
+function te(e = !1) {
+	if (I === null || e) {
+		let e = document.createElement("div"), t = e.style;
+		t.width = "50px", t.height = "50px", t.overflow = "scroll", t.direction = "rtl";
+		let n = document.createElement("div"), r = n.style;
+		return r.width = "100px", r.height = "100px", e.appendChild(n), document.body.appendChild(e), e.scrollLeft > 0 ? I = "positive-descending" : (e.scrollLeft = 1, I = e.scrollLeft === 0 ? "negative" : "positive-ascending"), document.body.removeChild(e), I;
+	}
+	return I;
+}
+function L({ containerElement: e, direction: t, isRtl: n, scrollOffset: r }) {
+	if (t === "horizontal" && n) switch (te()) {
+		case "negative": return -r;
+		case "positive-descending":
+			if (e) {
+				let { clientWidth: t, scrollLeft: n, scrollWidth: r } = e;
+				return r - t - n;
+			}
+			break;
+	}
+	return r;
+}
+function R(e, t = "Assertion error") {
+	if (!e) throw console.error(t), Error(t);
+}
+function z(e, t) {
+	if (e === t) return !0;
+	if (!!e != !!t || (R(e !== void 0), R(t !== void 0), Object.keys(e).length !== Object.keys(t).length)) return !1;
+	for (let n in e) if (!Object.is(t[n], e[n])) return !1;
+	return !0;
+}
+function B({ cachedBounds: e, itemCount: t, itemSize: n }) {
+	if (t === 0) return 0;
+	if (typeof n == "number") return t * n;
+	{
+		let n = e.get(e.size === 0 ? 0 : e.size - 1);
+		return R(n !== void 0, "Unexpected bounds cache miss"), t * ((n.scrollOffset + n.size) / e.size);
+	}
+}
+function ne({ align: e, cachedBounds: t, index: n, itemCount: r, itemSize: i, containerScrollOffset: a, containerSize: o }) {
+	if (n < 0 || n >= r) throw RangeError(`Invalid index specified: ${n}`, { cause: `Index ${n} is not within the range of 0 - ${r - 1}` });
+	let s = B({
+		cachedBounds: t,
+		itemCount: r,
+		itemSize: i
+	}), c = t.get(n), l = Math.max(0, Math.min(s - o, c.scrollOffset)), u = Math.max(0, c.scrollOffset - o + c.size);
+	switch (e === "smart" && (e = a >= u && a <= l ? "auto" : "center"), e) {
+		case "start": return l;
+		case "end": return u;
+		case "center": return c.scrollOffset <= o / 2 ? 0 : c.scrollOffset + c.size / 2 >= s - o / 2 ? s - o : c.scrollOffset + c.size / 2 - o / 2;
+		default: return a >= u && a <= l ? a : a < u ? u : l;
+	}
+}
+function V({ cachedBounds: e, containerScrollOffset: t, containerSize: n, itemCount: r, overscanCount: i }) {
+	let a = r - 1, o = 0, s = -1, c = 0, l = -1, u = 0;
+	for (; u < a;) {
+		let n = e.get(u);
+		if (n.scrollOffset + n.size > t) break;
+		u++;
+	}
+	for (o = u, c = Math.max(0, o - i); u < a;) {
+		let r = e.get(u);
+		if (r.scrollOffset + r.size >= t + n) break;
+		u++;
+	}
+	return s = Math.min(a, u), l = Math.min(r - 1, s + i), o < 0 && (o = 0, s = -1, c = 0, l = -1), {
+		startIndexVisible: o,
+		stopIndexVisible: s,
+		startIndexOverscan: c,
+		stopIndexOverscan: l
+	};
+}
+function H({ itemCount: e, itemProps: t, itemSize: n }) {
+	let r = /* @__PURE__ */ new Map();
+	return {
+		get(i) {
+			for (R(i < e, `Invalid index ${i}`); r.size - 1 < i;) {
+				let e = r.size, a;
+				switch (typeof n) {
+					case "function":
+						a = n(e, t);
+						break;
+					case "number":
+						a = n;
+						break;
+				}
+				if (e === 0) r.set(e, {
+					size: a,
+					scrollOffset: 0
+				});
+				else {
+					let t = r.get(e - 1);
+					R(t !== void 0, `Unexpected bounds cache miss for index ${i}`), r.set(e, {
+						scrollOffset: t.scrollOffset + t.size,
+						size: a
+					});
+				}
+			}
+			let a = r.get(i);
+			return R(a !== void 0, `Unexpected bounds cache miss for index ${i}`), a;
+		},
+		set(e, t) {
+			r.set(e, t);
+		},
+		get size() {
+			return r.size;
+		}
+	};
+}
+function U({ itemCount: e, itemProps: t, itemSize: n }) {
+	return w(() => H({
+		itemCount: e,
+		itemProps: t,
+		itemSize: n
+	}), [
+		e,
+		t,
+		n
+	]);
+}
+function re({ containerSize: e, itemSize: t }) {
+	let n;
+	switch (typeof t) {
+		case "string":
+			R(t.endsWith("%"), `Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`), R(e !== void 0, "Container size must be defined if a percentage item size is specified"), n = e * parseInt(t) / 100;
+			break;
+		default:
+			n = t;
+			break;
+	}
+	return n;
+}
+function W({ containerElement: e, containerStyle: t, defaultContainerSize: n = 0, direction: r, isRtl: i = !1, itemCount: a, itemProps: o, itemSize: s, onResize: c, overscanCount: l }) {
+	let { height: u = n, width: d = n } = F({
+		defaultHeight: r === "vertical" ? n : void 0,
+		defaultWidth: r === "horizontal" ? n : void 0,
+		element: e,
+		mode: r === "vertical" ? "only-height" : "only-width",
+		style: t
+	}), f = T({
+		height: 0,
+		width: 0
+	}), p = r === "vertical" ? u : d, m = re({
+		containerSize: p,
+		itemSize: s
+	});
+	C(() => {
+		if (typeof c == "function") {
+			let e = f.current;
+			(e.height !== u || e.width !== d) && (c({
+				height: u,
+				width: d
+			}, { ...e }), e.height = u, e.width = d);
+		}
+	}, [
+		u,
+		c,
+		d
+	]);
+	let h = U({
+		itemCount: a,
+		itemProps: o,
+		itemSize: m
+	}), g = b((e) => h.get(e), [h]), [_, v] = E(() => V({
+		cachedBounds: h,
+		containerScrollOffset: 0,
+		containerSize: p,
+		itemCount: a,
+		overscanCount: l
+	})), { startIndexVisible: y, startIndexOverscan: x, stopIndexVisible: S, stopIndexOverscan: w } = {
+		startIndexVisible: Math.min(a - 1, _.startIndexVisible),
+		startIndexOverscan: Math.min(a - 1, _.startIndexOverscan),
+		stopIndexVisible: Math.min(a - 1, _.stopIndexVisible),
+		stopIndexOverscan: Math.min(a - 1, _.stopIndexOverscan)
+	}, D = b(() => B({
+		cachedBounds: h,
+		itemCount: a,
+		itemSize: m
+	}), [
+		h,
+		a,
+		m
+	]), O = b((t) => V({
+		cachedBounds: h,
+		containerScrollOffset: L({
+			containerElement: e,
+			direction: r,
+			isRtl: i,
+			scrollOffset: t
+		}),
+		containerSize: p,
+		itemCount: a,
+		overscanCount: l
+	}), [
+		h,
+		e,
+		p,
+		r,
+		i,
+		a,
+		l
+	]);
+	return N(() => {
+		v(O((r === "vertical" ? e?.scrollTop : e?.scrollLeft) ?? 0));
+	}, [
+		e,
+		r,
+		O
+	]), N(() => {
+		if (!e) return;
+		let t = () => {
+			v((t) => {
+				let { scrollLeft: n, scrollTop: o } = e, s = V({
+					cachedBounds: h,
+					containerScrollOffset: L({
+						containerElement: e,
+						direction: r,
+						isRtl: i,
+						scrollOffset: r === "vertical" ? o : n
+					}),
+					containerSize: p,
+					itemCount: a,
+					overscanCount: l
+				});
+				return z(s, t) ? t : s;
+			});
+		};
+		return e.addEventListener("scroll", t), () => {
+			e.removeEventListener("scroll", t);
+		};
+	}, [
+		h,
+		e,
+		p,
+		r,
+		a,
+		l
+	]), {
+		getCellBounds: g,
+		getEstimatedSize: D,
+		scrollToIndex: ee(({ align: t = "auto", containerScrollOffset: n, index: o }) => {
+			let s = ne({
+				align: t,
+				cachedBounds: h,
+				containerScrollOffset: n,
+				containerSize: p,
+				index: o,
+				itemCount: a,
+				itemSize: m
+			});
+			if (e) {
+				if (s = L({
+					containerElement: e,
+					direction: r,
+					isRtl: i,
+					scrollOffset: s
+				}), typeof e.scrollTo != "function") {
+					let e = O(s);
+					z(_, e) || v(e);
+				}
+				return s;
+			}
+		}),
+		startIndexOverscan: x,
+		startIndexVisible: y,
+		stopIndexOverscan: w,
+		stopIndexVisible: S
+	};
+}
+function ie(e) {
+	return w(() => e, Object.values(e));
+}
+function G(e, t) {
+	let { ariaAttributes: n, style: r, ...i } = e, { ariaAttributes: a, style: o, ...s } = t;
+	return z(n, a) && z(r, o) && z(i, s);
+}
+function ae(e) {
+	return typeof e == "object" && !!e && "getAverageRowHeight" in e && typeof e.getAverageRowHeight == "function";
+}
+var oe = "data-react-window-index";
+function se({ children: e, className: t, defaultHeight: n = 0, listRef: r, onResize: i, onRowsRendered: a, overscanCount: o = 3, rowComponent: s, rowCount: c, rowHeight: l, rowProps: u, tagName: d = "div", style: f, ...p }) {
+	let m = ie(u), h = w(() => y(s, G), [s]), [g, _] = E(null), b = ae(l), { getCellBounds: C, getEstimatedSize: T, scrollToIndex: O, startIndexOverscan: k, startIndexVisible: A, stopIndexOverscan: j, stopIndexVisible: M } = W({
+		containerElement: g,
+		containerStyle: f,
+		defaultContainerSize: n,
+		direction: "vertical",
+		itemCount: c,
+		itemProps: m,
+		itemSize: w(() => b ? (e) => l.getRowHeight(e) ?? l.getAverageRowHeight() : l, [b, l]),
+		onResize: i,
+		overscanCount: o
+	});
+	S(r, () => ({
+		get element() {
+			return g;
+		},
+		scrollToRow({ align: e = "auto", behavior: t = "auto", index: n }) {
+			let r = O({
+				align: e,
+				containerScrollOffset: g?.scrollTop ?? 0,
+				index: n
+			});
+			typeof g?.scrollTo == "function" && g.scrollTo({
+				behavior: t,
+				top: r
+			});
+		}
+	}), [g, O]), N(() => {
+		if (!g) return;
+		let e = Array.from(g.children).filter((e, t) => {
+			if (e.hasAttribute("aria-hidden")) return !1;
+			let n = `${k + t}`;
+			return e.setAttribute(oe, n), !0;
+		});
+		if (b) return l.observeRowElements(e);
+	}, [
+		g,
+		b,
+		l,
+		k,
+		j
+	]), x(() => {
+		k >= 0 && j >= 0 && a && a({
+			startIndex: A,
+			stopIndex: M
+		}, {
+			startIndex: k,
+			stopIndex: j
+		});
+	}, [
+		a,
+		k,
+		A,
+		j,
+		M
+	]);
+	let P = w(() => {
+		let e = [];
+		if (c > 0) for (let t = k; t <= j; t++) {
+			let n = C(t);
+			e.push(/* @__PURE__ */ v(h, {
+				...m,
+				ariaAttributes: {
+					"aria-posinset": t + 1,
+					"aria-setsize": c,
+					role: "listitem"
+				},
+				key: t,
+				index: t,
+				style: {
+					position: "absolute",
+					left: 0,
+					transform: `translateY(${n.scrollOffset}px)`,
+					height: b ? void 0 : n.size,
+					width: "100%"
+				}
+			}));
+		}
+		return e;
+	}, [
+		h,
+		C,
+		b,
+		c,
+		m,
+		k,
+		j
+	]), F = /* @__PURE__ */ D("div", {
+		"aria-hidden": !0,
+		style: {
+			height: T(),
+			width: "100%",
+			zIndex: -1
+		}
+	});
+	return v(d, {
+		role: "list",
+		...p,
+		className: t,
+		ref: _,
+		style: {
+			position: "relative",
+			maxHeight: "100%",
+			flexGrow: 1,
+			overflowY: "auto",
+			...f
+		}
+	}, P, e, F);
+}
+//#endregion
+//#region src/types/virtual-row.ts
+var K = /* @__PURE__ */ function(e) {
+	return e.Header = "header", e.Item = "item", e;
+}({}), q = /* @__PURE__ */ function(e) {
+	return e.Pinned = "pinned", e.MyChats = "myChats", e.Shared = "shared", e.Organization = "organization", e;
+}({}), J = /* @__PURE__ */ function(e) {
+	return e.MyChats = "my-chats", e.Shared = "shared", e.Organization = "organization", e;
+}({}), Y = /* @__PURE__ */ function(e) {
+	return e.All = "all", e.MyChats = "my-chats", e.Shared = "shared", e.Organization = "organization", e;
+}({}), ce = (e) => `${60 + e * 23 % 35}%`, le = (e, t) => e ? t ? "pe-9" : "pe-2 group-hover/conversation:pe-9" : "pe-3", ue = (e, t) => t.rows[e].kind === K.Item ? 36 : e === 0 ? 24 : 56, de = (e) => {
+	switch (e) {
+		case J.Shared: return q.Shared;
+		case J.Organization: return q.Organization;
+		default: return q.MyChats;
+	}
+}, fe = (e, t) => {
+	let n = null;
+	for (let r of e) if (r.kind === K.Header) n = r.groupKey;
+	else if (r.item.id === t) return n;
+	return null;
+}, pe = (e, t, n) => {
+	let r = /* @__PURE__ */ new Set();
+	if (t != null && r.add(t), t === q.Pinned) {
+		let t = n.find((t) => t.id === e);
+		t && r.add(de(t.source));
+	} else r.add(q.Pinned);
+	return r;
+}, me = (e, t, n, r) => {
+	let i = e.currentTarget.getBoundingClientRect();
+	if (e.clientY >= i.top + i.height / 2) return t;
+	let a = null, o = !1;
+	for (let e of n) if (e.kind === K.Header) o = e.groupKey === r;
+	else if (o) {
+		if (e.item.id === t) return a;
+		a = e.item.id;
+	}
+	return null;
+}, X = {
+	filterTabs: "_filterTabs_3jujg_1",
+	tab: "_tab_3jujg_4",
+	tabActive: "_tabActive_3jujg_16"
+}, he = [
+	{
+		value: Y.All,
+		labelKey: "all"
+	},
+	{
+		value: Y.MyChats,
+		labelKey: "myChats"
+	},
+	{
+		value: Y.Shared,
+		labelKey: "shared"
+	},
+	{
+		value: Y.Organization,
+		labelKey: "organization"
+	}
+], ge = y(({ activeTab: e, labels: t, onChange: r, tabClassName: i = "dial-tiny-semi-text" }) => /* @__PURE__ */ D("div", {
+	className: n("mx-3 my-2 flex flex-nowrap gap-1", X.filterTabs),
+	children: he.map(({ value: a, labelKey: o }) => /* @__PURE__ */ D(g, {
+		label: t[o],
+		selected: e === a,
+		onClick: () => r(a),
+		className: n("box-border h-auto flex-1 justify-center rounded-full p-2 text-center", i, X.tab, e === a && X.tabActive)
+	}, a))
+})), _e = { button: "_button_1blz1_1" }, ve = y(({ label: e, onClick: t, labelClassName: r = "dial-small-semi-text" }) => /* @__PURE__ */ D("div", {
+	className: "px-3 py-2",
+	children: /* @__PURE__ */ O("button", {
+		onClick: t,
+		type: "button",
+		className: n("flex h-[36px] w-full cursor-pointer items-center justify-center gap-2 px-3 py-1", _e.button),
+		children: [/* @__PURE__ */ D(M, {
+			size: 18,
+			stroke: 2,
+			className: "shrink-0"
+		}), /* @__PURE__ */ D("span", {
+			className: r,
+			children: e
+		})]
+	})
+})), Z = {
+	header: "_header_1o9mn_1",
+	item: "_item_1o9mn_5",
+	itemActive: "_itemActive_1o9mn_11",
+	groupHeader: "_groupHeader_1o9mn_16",
+	trigger: "_trigger_1o9mn_21",
+	triggerActive: "_triggerActive_1o9mn_21",
+	triggerIcon: "_triggerIcon_1o9mn_24"
+}, ye = ({ item: t, isActive: r, onSelectConversation: i, getActions: a, actionsLabel: o = "More actions", itemTitleClassName: s = "dial-small-text", itemIconBadgeClassName: g, rowGroupKey: v, rows: y, draggingId: x, dragOverId: S, allowedDropGroups: C, onDragStart: w, onDragEnd: T, onDragOver: k, onDragLeave: A, onDrop: M }) => {
+	let [N, P] = E(!1), F = a?.(t) ?? [], ee = F.length > 0, I = t.isIconLoading ? /* @__PURE__ */ D(m, {
+		variant: h.Circular,
+		width: l.LG,
+		height: l.LG,
+		color: "var(--bg-layer-4)",
+		"aria-hidden": !0
+	}) : /* @__PURE__ */ D(e, {
+		src: t.iconUrl,
+		size: l.LG,
+		initialsName: t.iconTooltip ?? "",
+		tooltip: t.iconTooltip,
+		badgeClassName: g
+	}), te = le(ee, N), L = v != null, R = b((e) => {
+		e.currentTarget.contains(e.relatedTarget) || A?.();
+	}, [A]), z = b((e) => {
+		if (!v || !y || !M) return;
+		e.preventDefault();
+		let n = me(e, t.id, y, v);
+		M(t.id, v, n);
+	}, [
+		t.id,
+		y,
+		v,
+		M
+	]), B = t.id === x, ne = t.id === S, V = v != null && (C?.has(v) ?? !1);
+	return /* @__PURE__ */ O("li", {
+		className: n("group/conversation relative", B && "cursor-grabbing opacity-50", ne && V && "ring-accent-secondary rounded ring-1 ring-inset", x != null && !B && !V && "cursor-not-allowed"),
+		draggable: L || void 0,
+		onDragStart: L ? () => w?.(t.id) : void 0,
+		onDragEnd: L ? T : void 0,
+		onDragOver: L ? (e) => {
+			e.preventDefault(), k?.(t.id);
+		} : void 0,
+		onDragLeave: L ? R : void 0,
+		onDrop: L ? z : void 0,
+		children: [/* @__PURE__ */ D("a", {
+			href: t.href,
+			className: "contents",
+			onClick: (e) => e.preventDefault(),
+			children: /* @__PURE__ */ D(u, {
+				iconBefore: I,
+				label: /* @__PURE__ */ D(f, {
+					text: t.title,
+					className: s
+				}),
+				textClassName: "min-w-0",
+				"aria-current": r ? "page" : void 0,
+				onClick: () => i(t.id),
+				tabIndex: t.href ? -1 : void 0,
+				className: n("flex h-8 w-full items-center justify-start gap-2 rounded-xl py-2 ps-3", te, Z.item, r && Z.itemActive, N && Z.itemActive)
+			})
+		}), ee && /* @__PURE__ */ D("div", {
+			className: n("absolute inset-y-0 end-1 flex items-center", N ? "opacity-100" : "opacity-0 group-hover/conversation:opacity-100"),
+			children: /* @__PURE__ */ D(d, {
+				items: F,
+				onOpenChange: P,
+				matchReferenceWidth: !1,
+				listClassName: "w-[140px] cp-dropdown-overlay",
+				children: /* @__PURE__ */ D(p, {
+					icon: /* @__PURE__ */ D(j, {
+						size: l.SM,
+						className: Z.triggerIcon
+					}),
+					appearance: c.Ghost,
+					size: _.Small,
+					"aria-label": o,
+					className: n("flex items-center justify-center rounded", Z.trigger, N && Z.triggerActive)
+				})
+			})
+		})]
+	});
+}, be = ({ label: e, isExpanded: t, onToggle: r, className: i = "dial-tiny-semi-text uppercase", dropZoneGroupKey: a, isDragOver: o, onDragOver: s, onDragLeave: c, onDrop: l }) => {
+	let u = a != null;
+	return /* @__PURE__ */ O("button", {
+		type: "button",
+		"aria-expanded": t,
+		onClick: r,
+		onDragOver: u ? (e) => {
+			u && (e.preventDefault(), s?.(a));
+		} : void 0,
+		onDragLeave: u ? (e) => {
+			u && (e.currentTarget.contains(e.relatedTarget) || c?.());
+		} : void 0,
+		onDrop: u ? (e) => {
+			u && (e.preventDefault(), l?.(a, a, null));
+		} : void 0,
+		className: n("flex h-6 w-full items-center gap-1 rounded py-1 pe-3 text-start", i, Z.groupHeader, o && "ring-accent-secondary ring-1 ring-inset"),
+		children: [D(t ? k : A, {
+			stroke: .5,
+			size: 12,
+			className: "shrink-0"
+		}), /* @__PURE__ */ D(f, { text: e })]
+	});
+}, xe = ({ index: e, style: t, rows: n, expandedGroups: r, onToggleGroup: i, activeConversationId: a, onSelectConversation: o, getActions: s, actionsLabel: c, groupHeaderClassName: l, itemTitleClassName: u, itemIconBadgeClassName: d, draggingId: f, dragOverId: p, allowedDropGroups: m, onDragStart: h, onDragEnd: g, onDragOver: _, onDragLeave: v, onDrop: y }) => {
+	let b = n[e];
+	if (b.kind === K.Header) {
+		let n = b.groupKey === q.Pinned;
+		return /* @__PURE__ */ D("div", {
+			style: t,
+			className: e === 0 ? "pt-0" : "pt-8",
+			children: /* @__PURE__ */ D(be, {
+				label: b.label,
+				isExpanded: r.has(b.groupKey),
+				onToggle: () => i(b.groupKey),
+				className: l,
+				dropZoneGroupKey: n ? q.Pinned : void 0,
+				isDragOver: n && p === q.Pinned,
+				onDragOver: n ? _ : void 0,
+				onDragLeave: n ? v : void 0,
+				onDrop: n ? y : void 0
+			})
+		});
+	}
+	return /* @__PURE__ */ D("div", {
+		style: t,
+		className: "pt-1",
+		children: /* @__PURE__ */ D(ye, {
+			item: b.item,
+			isActive: b.item.id === a,
+			onSelectConversation: o,
+			getActions: s,
+			actionsLabel: c,
+			itemTitleClassName: u,
+			itemIconBadgeClassName: d,
+			rowGroupKey: b.groupKey,
+			rows: n,
+			draggingId: f,
+			dragOverId: p,
+			allowedDropGroups: m,
+			onDragStart: h,
+			onDragEnd: g,
+			onDragOver: _,
+			onDragLeave: v,
+			onDrop: y
+		})
+	});
+}, Se = (e, t) => t === Y.All ? !0 : e.source === t, Ce = (e, t) => t ? e.title.toLowerCase().includes(t.toLowerCase()) : !0, we = new Set(Object.values(q)), Te = y(({ conversations: e, isLoading: c, isOpen: l, onSelectConversation: u, activeConversationId: d, title: f, emptyLabel: p, noResultsLabel: h, onNewChat: g, newChatLabel: _, searchPlaceholder: v, searchClearLabel: y, filterLabels: S, groupLabels: C, styles: k, className: A, getActions: j, actionsLabel: M, onToggle: N, closeAriaLabel: P, resizable: F, defaultPanelWidth: ee = 325, minPanelWidth: I = 312, maxPanelWidth: te = 600, onPanelResizeStop: L, headerActions: R, onMoveConversation: z, activeFilter: B, onActiveFilterChange: ne }) => {
+	let { colors: V, typography: H } = k ?? {}, [U, re] = E(""), [W, ie] = E(Y.All);
+	x(() => {
+		B != null && (ie(B), ne?.(B));
+	}, [B]);
+	let [G, ae] = E(() => we), [oe, le] = E(5), [de, me] = E(null), [X, he] = E(null), [_e, Z] = E(null), ye = T(null), be = T(null), Te = b(({ height: e }) => {
+		le(Math.ceil(e / 36 * 2));
+	}, []), Ee = b((e) => {
+		ae((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, []), De = b(() => {
+		ye.current = null, be.current = null, me(null), he(null), Z(null);
+	}, []), Oe = b((t, n) => {
+		let r = pe(t, fe(n, t), e);
+		ye.current = t, be.current = r, me(t), Z(r);
+	}, [e]), ke = b(() => {
+		De();
+	}, [De]), Ae = b((e) => {
+		he(e);
+	}, []), je = b(() => {
+		he(null);
+	}, []), Me = b((e, t, n) => {
+		let r = ye.current, i = be.current;
+		De(), r != null && r !== e && i?.has(t) && z?.({
+			draggedId: r,
+			targetGroupKey: t,
+			afterId: n
+		});
+	}, [De, z]), Ne = t({
+		"--cp-bg": V?.background,
+		"--sb-border": V?.border,
+		"--cp-item-hover": V?.itemHover,
+		"--cp-item-active": V?.itemActive,
+		"--cp-text": V?.text,
+		"--cp-text-secondary": V?.textSecondary,
+		"--cp-new-chat-hover": V?.newChatHoverBackground,
+		"--cp-new-chat-active": V?.newChatActiveBackground,
+		"--cp-new-chat-bg": V?.newChatBackground
+	}), Q = w(() => e.filter((e) => Se(e, W) && Ce(e, U)), [
+		e,
+		W,
+		U
+	]), Pe = w(() => Q.filter((e) => e.isPinned), [Q]), Fe = w(() => Q.filter((e) => !e.isPinned && e.source !== J.Shared && e.source !== J.Organization), [Q]), Ie = w(() => Q.filter((e) => !e.isPinned && e.source === J.Shared), [Q]), Le = w(() => Q.filter((e) => !e.isPinned && e.source === J.Organization), [Q]), Re = w(() => [
+		{
+			key: q.Pinned,
+			label: C?.pinned ?? "Pinned",
+			items: Pe
+		},
+		{
+			key: q.MyChats,
+			label: C?.myChats ?? "My chats",
+			items: Fe
+		},
+		{
+			key: q.Shared,
+			label: C?.shared ?? "Shared",
+			items: Ie
+		},
+		{
+			key: q.Organization,
+			label: C?.organization ?? "Organization",
+			items: Le
+		}
+	], [
+		C,
+		Pe,
+		Fe,
+		Ie,
+		Le
+	]), $ = w(() => {
+		let e = [];
+		for (let t of Re) if (t.items.length !== 0 && (e.push({
+			kind: K.Header,
+			groupKey: t.key,
+			label: t.label
+		}), G.has(t.key))) for (let n of t.items) e.push({
+			kind: K.Item,
+			item: n,
+			groupKey: t.key
+		});
+		return e;
+	}, [Re, G]), ze = w(() => ({
+		rows: $,
+		expandedGroups: G,
+		onToggleGroup: Ee,
+		activeConversationId: d,
+		onSelectConversation: u,
+		getActions: j,
+		actionsLabel: M,
+		groupHeaderClassName: H?.groupHeaderClassName,
+		itemTitleClassName: H?.itemTitleClassName,
+		itemIconBadgeClassName: H?.itemIconBadgeClassName,
+		draggingId: de,
+		dragOverId: X,
+		allowedDropGroups: _e,
+		onDragStart: (e) => Oe(e, $),
+		onDragEnd: ke,
+		onDragOver: Ae,
+		onDragLeave: je,
+		onDrop: Me
+	}), [
+		$,
+		G,
+		Ee,
+		d,
+		u,
+		j,
+		M,
+		H?.groupHeaderClassName,
+		H?.itemTitleClassName,
+		H?.itemIconBadgeClassName,
+		de,
+		X,
+		_e,
+		Oe,
+		ke,
+		Ae,
+		je,
+		Me
+	]), Be = e.length === 0, Ve = e.length > 0 && Q.length === 0;
+	return /* @__PURE__ */ O(s, {
+		isOpen: l,
+		orientation: o.Left,
+		title: f,
+		ariaLabel: f,
+		onClose: N,
+		closeLabel: P,
+		headerClassName: "h-[64px]",
+		styles: {
+			colors: {
+				background: V?.background,
+				border: V?.border
+			},
+			typography: { fontClassName: H?.fontClassName },
+			bodyClassName: "flex flex-col overflow-hidden p-0 gap-3",
+			cssVars: Ne,
+			titleClassName: H?.fontClassName
+		},
+		className: n(l ? F ? "border-l border-r mobile:w-full" : "w-[325px] border-l border-r mobile:w-full" : "w-0", A),
+		resizable: F,
+		defaultWidth: ee,
+		minWidth: I,
+		maxWidth: te,
+		onResizeStop: L,
+		rightActions: R,
+		children: [
+			/* @__PURE__ */ D(ve, {
+				label: _,
+				onClick: g,
+				labelClassName: H?.newChatLabelClassName
+			}),
+			/* @__PURE__ */ D(a, {
+				placeholder: v,
+				value: U,
+				onChange: re,
+				clearLabel: y
+			}),
+			/* @__PURE__ */ D(ge, {
+				activeTab: W,
+				labels: S,
+				onChange: (e) => {
+					ie(e), ne?.(e);
+				},
+				tabClassName: H?.tabClassName
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "flex-1 overflow-hidden px-2 py-1",
+				children: c ? /* @__PURE__ */ D("div", {
+					className: "flex flex-col gap-3 px-2 py-3",
+					children: Array.from({ length: 15 }, (e, t) => /* @__PURE__ */ D(m, {
+						avatar: { size: 24 },
+						showTitle: { width: ce(t) },
+						paragraph: !1,
+						active: !0,
+						color: "var(--bg-layer-4)"
+					}, t))
+				}) : Be ? /* @__PURE__ */ D(r, { label: p }) : Ve ? /* @__PURE__ */ D(i, { label: h }) : /* @__PURE__ */ D(se, {
+					role: "list",
+					style: { height: "100%" },
+					rowComponent: xe,
+					rowCount: $.length,
+					rowHeight: ue,
+					overscanCount: oe,
+					onResize: Te,
+					rowProps: ze
+				})
+			})
+		]
+	});
+});
+//#endregion
+export { q as ConversationGroupKey, Te as ConversationPanel, J as ConversationSource, Y as FilterTab };