@wakastellar/ui 4.0.0 → 4.1.1

package/dist/blocks/chat/widget.es.js

@@ -0,0 +1,236 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../../components/badge/index.es.js";
+import { WakaChat as n } from "./index.es.js";
+import * as r from "react";
+import { MessageCircle as i } from "lucide-react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/blocks/chat/widget.tsx
+var c = "waka-chat-widget-position", l = (e) => {
+	if (typeof window > "u") return null;
+	try {
+		let t = localStorage.getItem(e);
+		if (t) return JSON.parse(t);
+	} catch {}
+	return null;
+}, u = (e, t) => {
+	if (!(typeof window > "u")) try {
+		localStorage.setItem(e, JSON.stringify(t));
+	} catch {}
+};
+function d({ defaultPosition: d, position: f, onPositionChange: p, persistPosition: m = !0, positionStorageKey: h = c, defaultOpen: g = !1, open: _, onOpenChange: v, bubbleSize: y = "md", bubbleColor: b = "primary", bubbleIcon: x, bubbleText: S, showUnreadBadge: C = !0, bubbleAnimation: w = "none", widgetPosition: T = "top-left", widgetSize: E = "md", bubbleClassName: ee, widgetClassName: D, draggable: O = !0, constrainToViewport: k = !0, edgeOffset: A = 16, onWidgetClose: j, onWidgetMinimize: M, zIndex: N = 9999, conversations: P = [], ...F }) {
+	let [I, L] = r.useState(g), [R, z] = r.useState(() => {
+		if (d) return d;
+		if (m) {
+			let e = l(h);
+			if (e) return e;
+		}
+		return {
+			x: typeof window < "u" ? window.innerWidth - 80 : 0,
+			y: typeof window < "u" ? window.innerHeight - 80 : 0
+		};
+	}), [B, V] = r.useState(!1), [H, U] = r.useState({
+		x: 0,
+		y: 0
+	}), W = r.useRef(null), G = _ === void 0 ? I : _, K = f === void 0 ? R : f;
+	r.useEffect(() => {
+		if (!(typeof window > "u") && !f && !d) {
+			let e = m ? l(h) : null;
+			z(e || {
+				x: window.innerWidth - 80,
+				y: window.innerHeight - 80
+			});
+		}
+	}, [
+		f,
+		d,
+		m,
+		h
+	]);
+	let q = (e) => {
+		_ === void 0 && L(e), v?.(e);
+	}, J = (e) => {
+		f === void 0 && z(e), p?.(e), m && u(h, e);
+	}, Y = (e) => {
+		if (!k || typeof window > "u") return e;
+		let t = W.current?.offsetWidth || 60, n = W.current?.offsetHeight || 60;
+		return {
+			x: Math.max(A, Math.min(e.x, window.innerWidth - t - A)),
+			y: Math.max(A, Math.min(e.y, window.innerHeight - n - A))
+		};
+	}, X = (e) => {
+		!O || G || (V(!0), U({
+			x: e.clientX - K.x,
+			y: e.clientY - K.y
+		}));
+	}, Z = (e) => {
+		if (!O || G) return;
+		let t = e.touches[0];
+		V(!0), U({
+			x: t.clientX - K.x,
+			y: t.clientY - K.y
+		});
+	};
+	r.useEffect(() => {
+		if (!B) return;
+		let e = (e) => {
+			let t = Y({
+				x: e.clientX - H.x,
+				y: e.clientY - H.y
+			});
+			J(t);
+		}, t = (e) => {
+			let t = e.touches[0], n = Y({
+				x: t.clientX - H.x,
+				y: t.clientY - H.y
+			});
+			J(n);
+		}, n = () => {
+			V(!1);
+		};
+		return document.addEventListener("mousemove", e), document.addEventListener("mouseup", n), document.addEventListener("touchmove", t), document.addEventListener("touchend", n), () => {
+			document.removeEventListener("mousemove", e), document.removeEventListener("mouseup", n), document.removeEventListener("touchmove", t), document.removeEventListener("touchend", n);
+		};
+	}, [B, H]);
+	let te = () => {
+		B || q(!G);
+	}, Q = P.reduce((e, t) => e + (t.unreadCount || 0), 0), ne = {
+		sm: "h-12 w-12",
+		md: "h-14 w-14",
+		lg: "h-16 w-16"
+	}, re = {
+		sm: "h-5 w-5",
+		md: "h-6 w-6",
+		lg: "h-7 w-7"
+	}, ie = {
+		primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+		secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
+		success: "bg-green-500 text-white hover:bg-green-600",
+		warning: "bg-yellow-500 text-white hover:bg-yellow-600",
+		destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+	}, ae = {
+		none: "",
+		pulse: "animate-pulse",
+		bounce: "animate-bounce"
+	}, $ = {
+		sm: "h-[400px] w-[300px]",
+		md: "h-[500px] w-[380px]",
+		lg: "h-[600px] w-[420px]"
+	};
+	return /* @__PURE__ */ s(a, { children: [
+		/* @__PURE__ */ s("button", {
+			ref: W,
+			onClick: te,
+			onMouseDown: X,
+			onTouchStart: Z,
+			className: e("fixed rounded-full shadow-lg transition-all duration-200", "flex items-center justify-center gap-2", ne[y], ie[b], ae[w], B && "cursor-grabbing scale-110", O && !B && !G && "cursor-grab", G && "opacity-0 pointer-events-none scale-75", S && "px-4 w-auto", ee),
+			style: {
+				left: K.x,
+				top: K.y,
+				zIndex: N,
+				touchAction: "none"
+			},
+			"aria-label": "Ouvrir le chat",
+			children: [
+				x || /* @__PURE__ */ o(i, { className: re[y] }),
+				S && /* @__PURE__ */ o("span", {
+					className: "font-medium text-sm",
+					children: S
+				}),
+				C && Q > 0 && /* @__PURE__ */ o(t, {
+					className: e("absolute -top-1 -right-1 h-5 min-w-[20px] px-1.5", "bg-destructive text-destructive-foreground", "flex items-center justify-center text-xs font-bold"),
+					children: Q > 99 ? "99+" : Q
+				})
+			]
+		}),
+		G && /* @__PURE__ */ o("div", {
+			className: e("fixed rounded-xl shadow-2xl border bg-background overflow-hidden", "animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2", "duration-200", $[E], D),
+			style: (() => {
+				let e = W.current?.offsetWidth || 60, t = W.current?.offsetHeight || 60, n = $[E].match(/h-\[(\d+)px\] w-\[(\d+)px\]/), r = n ? parseInt(n[1]) : 500, i = n ? parseInt(n[2]) : 380, a = K.x, o = K.y;
+				switch (T) {
+					case "top-left":
+						a = K.x - i + e, o = K.y - r - 12;
+						break;
+					case "top-right":
+						o = K.y - r - 12;
+						break;
+					case "bottom-left":
+						a = K.x - i + e, o = K.y + t + 12;
+						break;
+					case "bottom-right":
+						o = K.y + t + 12;
+						break;
+				}
+				return typeof window < "u" && (a = Math.max(A, Math.min(a, window.innerWidth - i - A)), o = Math.max(A, Math.min(o, window.innerHeight - r - A))), {
+					position: "fixed",
+					left: a,
+					top: o,
+					zIndex: N + 1
+				};
+			})(),
+			children: /* @__PURE__ */ o(n, {
+				...F,
+				conversations: P,
+				layout: "widget",
+				onClose: () => {
+					q(!1), j?.();
+				},
+				onMinimize: () => {
+					q(!1), M?.();
+				},
+				showCloseButton: !0,
+				className: "h-full"
+			})
+		}),
+		G && /* @__PURE__ */ o("div", {
+			className: "fixed inset-0 bg-black/20 sm:hidden",
+			style: { zIndex: N - 1 },
+			onClick: () => q(!1)
+		})
+	] });
+}
+function f(e = {}) {
+	let { defaultOpen: t = !1, defaultPosition: n, persistPosition: i = !0, positionStorageKey: a = c } = e, [o, s] = r.useState(t), [d, f] = r.useState(() => {
+		if (n) return n;
+		if (typeof window > "u") return {
+			x: 0,
+			y: 0
+		};
+		if (i) {
+			let e = l(a);
+			if (e) return e;
+		}
+		return {
+			x: window.innerWidth - 80,
+			y: window.innerHeight - 80
+		};
+	}), p = () => s(!0), m = () => s(!1), h = () => s((e) => !e), g = (e) => {
+		f(e), i && u(a, e);
+	};
+	return {
+		isOpen: o,
+		position: d,
+		open: p,
+		close: m,
+		toggle: h,
+		setIsOpen: s,
+		updatePosition: g,
+		resetPosition: () => {
+			if (typeof window > "u") return;
+			let e = n || {
+				x: window.innerWidth - 80,
+				y: window.innerHeight - 80
+			};
+			g(e);
+		},
+		widgetProps: {
+			open: o,
+			onOpenChange: s,
+			position: d,
+			onPositionChange: g
+		}
+	};
+}
+//#endregion
+export { d as WakaChatWidget, d as default, f as useChatWidget };

package/dist/blocks/chat-interface/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js"),n=require("../../components/avatar/index.cjs.js"),r=require("../../components/badge/index.cjs.js"),i=require("../../components/button/index.cjs.js"),a=require("../../components/input/index.cjs.js"),o=require("../../components/scroll-area/index.cjs.js");let s=require("react");s=e.__toESM(s);let c=require("lucide-react"),l=require("react/jsx-runtime");var u={online:`bg-green-500`,offline:`bg-gray-400`,away:`bg-yellow-500`,busy:`bg-red-500`};function d({user:e,size:r=`md`}){return(0,l.jsxs)(`div`,{className:`relative`,children:[(0,l.jsxs)(n.Avatar,{className:{sm:`h-8 w-8`,md:`h-10 w-10`,lg:`h-12 w-12`}[r],children:[(0,l.jsx)(n.AvatarImage,{src:e.avatar,alt:e.name}),(0,l.jsx)(n.AvatarFallback,{children:e.name.slice(0,2).toUpperCase()})]}),e.status&&(0,l.jsx)(`div`,{className:t.cn(`absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-background`,u[e.status])})]})}function f({conversation:e,currentUserId:i,isSelected:a,onClick:o}){let s=e.participants.find(e=>e.id!==i),d=e.isGroup?e.groupName:s?.name,f=e.isGroup?e.groupAvatar:s?.avatar;return(0,l.jsxs)(`button`,{onClick:o,className:t.cn(`w-full flex items-center gap-3 p-3 rounded-lg transition-colors text-left`,a?`bg-primary/10`:`hover:bg-muted/50`),children:[(0,l.jsxs)(`div`,{className:`relative`,children:[(0,l.jsxs)(n.Avatar,{children:[(0,l.jsx)(n.AvatarImage,{src:f}),(0,l.jsx)(n.AvatarFallback,{children:d?.slice(0,2).toUpperCase()})]}),!e.isGroup&&s?.status&&(0,l.jsx)(`div`,{className:t.cn(`absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-background`,u[s.status])})]}),(0,l.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,l.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,l.jsx)(`span`,{className:`font-medium truncate`,children:d}),e.lastMessage&&(0,l.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:typeof e.lastMessage.timestamp==`string`?e.lastMessage.timestamp:h(e.lastMessage.timestamp)})]}),e.lastMessage&&(0,l.jsx)(`p`,{className:`text-sm text-muted-foreground truncate`,children:e.lastMessage.content})]}),e.unreadCount&&e.unreadCount>0&&(0,l.jsx)(r.Badge,{className:`h-5 w-5 p-0 flex items-center justify-center rounded-full`,children:e.unreadCount}),e.isPinned&&(0,l.jsx)(c.Pin,{className:`h-3 w-3 text-muted-foreground`})]})}function p({message:e,isOwn:n,sender:r,showAvatar:i}){let a={sending:(0,l.jsx)(c.Clock,{className:`h-3 w-3`}),sent:(0,l.jsx)(c.Check,{className:`h-3 w-3`}),delivered:(0,l.jsx)(c.CheckCheck,{className:`h-3 w-3`}),read:(0,l.jsx)(c.CheckCheck,{className:`h-3 w-3 text-blue-500`})};return(0,l.jsxs)(`div`,{className:t.cn(`flex gap-2 max-w-[80%]`,n?`ml-auto flex-row-reverse`:``),children:[i&&r&&!n&&(0,l.jsx)(d,{user:r,size:`sm`}),!i&&!n&&(0,l.jsx)(`div`,{className:`w-8`}),(0,l.jsxs)(`div`,{className:`space-y-1`,children:[!n&&i&&r&&(0,l.jsx)(`span`,{className:`text-xs text-muted-foreground ml-1`,children:r.name}),(0,l.jsxs)(`div`,{className:t.cn(`rounded-2xl px-4 py-2`,n?`bg-primary text-primary-foreground rounded-br-md`:`bg-muted rounded-bl-md`),children:[e.replyTo&&(0,l.jsxs)(`div`,{className:t.cn(`text-xs mb-1 pb-1 border-b`,n?`border-primary-foreground/20`:`border-border`),children:[(0,l.jsx)(c.Reply,{className:`h-3 w-3 inline mr-1`}),`Reply to message`]}),(0,l.jsx)(`p`,{className:`text-sm whitespace-pre-wrap`,children:e.content}),e.attachments&&e.attachments.length>0&&(0,l.jsx)(`div`,{className:`mt-2 space-y-2`,children:e.attachments.map(e=>(0,l.jsxs)(`div`,{className:`flex items-center gap-2`,children:[e.type===`image`?(0,l.jsx)(c.Image,{className:`h-4 w-4`}):(0,l.jsx)(c.File,{className:`h-4 w-4`}),(0,l.jsx)(`span`,{className:`text-xs truncate`,children:e.name})]},e.id))})]}),(0,l.jsxs)(`div`,{className:t.cn(`flex items-center gap-1 text-xs text-muted-foreground`,n?`justify-end`:``),children:[(0,l.jsx)(`span`,{children:typeof e.timestamp==`string`?e.timestamp:h(e.timestamp)}),n&&e.status&&a[e.status]]}),e.reactions&&e.reactions.length>0&&(0,l.jsx)(`div`,{className:`flex gap-1 mt-1`,children:Array.from(new Set(e.reactions.map(e=>e.emoji))).map(t=>(0,l.jsxs)(`span`,{className:`text-xs bg-muted rounded-full px-2 py-0.5`,children:[t,` `,e.reactions.filter(e=>e.emoji===t).length]},t))})]})]})}function m({users:e}){if(e.length===0)return null;let t=e.map(e=>e.name).join(`, `);return(0,l.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground`,children:[(0,l.jsxs)(`div`,{className:`flex gap-1`,children:[(0,l.jsx)(c.Circle,{className:`h-2 w-2 animate-bounce`,style:{animationDelay:`0ms`}}),(0,l.jsx)(c.Circle,{className:`h-2 w-2 animate-bounce`,style:{animationDelay:`150ms`}}),(0,l.jsx)(c.Circle,{className:`h-2 w-2 animate-bounce`,style:{animationDelay:`300ms`}})]}),(0,l.jsxs)(`span`,{children:[t,` `,e.length===1?`is`:`are`,` typing...`]})]})}function h(e){return e.toLocaleTimeString([],{hour:`2-digit`,minute:`2-digit`})}function g({currentUser:e,conversations:n=[],selectedConversation:r,messages:u=[],onSendMessage:h,onSelectConversation:g,onTyping:_,typingUsers:v=[],showSidebar:y=!0,className:b}){let[x,S]=s.useState(``),[C,w]=s.useState(``),T=s.useRef(null),E=()=>{T.current?.scrollIntoView({behavior:`smooth`})};s.useEffect(()=>{E()},[u]);let D=()=>{!x.trim()||!h||(h(x.trim()),S(``))},O=e=>{e.key===`Enter`&&!e.shiftKey&&(e.preventDefault(),D())},k=n.filter(t=>{if(!C)return!0;let n=t.participants.find(t=>t.id!==e.id);return(t.isGroup?t.groupName:n?.name)?.toLowerCase().includes(C.toLowerCase())}),A=r?.participants.find(t=>t.id!==e.id),j=r?.isGroup?r.groupName:A?.name,M=u.reduce((e,t,n)=>{let r=u[n-1],i=!r||r.senderId!==t.senderId;return e.push({message:t,showAvatar:i}),e},[]);return(0,l.jsxs)(`div`,{className:t.cn(`flex h-[600px] rounded-lg border overflow-hidden`,b),children:[y&&(0,l.jsxs)(`div`,{className:`w-80 border-r flex flex-col bg-card`,children:[(0,l.jsxs)(`div`,{className:`p-4 border-b`,children:[(0,l.jsxs)(`div`,{className:`flex items-center justify-between mb-4`,children:[(0,l.jsx)(`h2`,{className:`font-semibold text-lg`,children:`Messages`}),(0,l.jsx)(i.Button,{variant:`ghost`,size:`icon`,children:(0,l.jsx)(c.MoreVertical,{className:`h-4 w-4`})})]}),(0,l.jsxs)(`div`,{className:`relative`,children:[(0,l.jsx)(c.Search,{className:`absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground`}),(0,l.jsx)(a.Input,{placeholder:`Search conversations...`,value:C,onChange:e=>w(e.target.value),className:`pl-9`})]})]}),(0,l.jsx)(o.ScrollArea,{className:`flex-1`,children:(0,l.jsx)(`div`,{className:`p-2 space-y-1`,children:k.map(t=>(0,l.jsx)(f,{conversation:t,currentUserId:e.id,isSelected:r?.id===t.id,onClick:()=>g?.(t)},t.id))})})]}),(0,l.jsx)(`div`,{className:`flex-1 flex flex-col`,children:r?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(`div`,{className:`h-16 border-b flex items-center justify-between px-4 bg-card`,children:[(0,l.jsxs)(`div`,{className:`flex items-center gap-3`,children:[A&&(0,l.jsx)(d,{user:A}),(0,l.jsxs)(`div`,{children:[(0,l.jsx)(`h3`,{className:`font-medium`,children:j}),A?.status&&(0,l.jsx)(`p`,{className:`text-xs text-muted-foreground capitalize`,children:A.status===`online`?`Online`:`Last seen ${A.lastSeen||`recently`}`})]})]}),(0,l.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,l.jsx)(i.Button,{variant:`ghost`,size:`icon`,children:(0,l.jsx)(c.Phone,{className:`h-4 w-4`})}),(0,l.jsx)(i.Button,{variant:`ghost`,size:`icon`,children:(0,l.jsx)(c.Video,{className:`h-4 w-4`})}),(0,l.jsx)(i.Button,{variant:`ghost`,size:`icon`,children:(0,l.jsx)(c.MoreVertical,{className:`h-4 w-4`})})]})]}),(0,l.jsxs)(o.ScrollArea,{className:`flex-1 p-4`,children:[(0,l.jsxs)(`div`,{className:`space-y-4`,children:[M.map(({message:t,showAvatar:n})=>(0,l.jsx)(p,{message:t,isOwn:t.senderId===e.id,sender:r.participants.find(e=>e.id===t.senderId),showAvatar:n},t.id)),(0,l.jsx)(`div`,{ref:T})]}),v.length>0&&(0,l.jsx)(`div`,{className:`mt-4`,children:(0,l.jsx)(m,{users:v})})]}),(0,l.jsx)(`div`,{className:`p-4 border-t bg-card`,children:(0,l.jsxs)(`div`,{className:`flex items-end gap-2`,children:[(0,l.jsx)(i.Button,{variant:`ghost`,size:`icon`,children:(0,l.jsx)(c.Paperclip,{className:`h-4 w-4`})}),(0,l.jsx)(`div`,{className:`flex-1`,children:(0,l.jsx)(a.Input,{placeholder:`Type a message...`,value:x,onChange:e=>{S(e.target.value),_?.()},onKeyDown:O,className:`rounded-full`})}),(0,l.jsx)(i.Button,{variant:`ghost`,size:`icon`,children:(0,l.jsx)(c.Smile,{className:`h-4 w-4`})}),(0,l.jsx)(i.Button,{size:`icon`,onClick:D,disabled:!x.trim(),children:(0,l.jsx)(c.Send,{className:`h-4 w-4`})})]})})]}):(0,l.jsx)(`div`,{className:`flex-1 flex items-center justify-center`,children:(0,l.jsxs)(`div`,{className:`text-center`,children:[(0,l.jsx)(`div`,{className:`h-16 w-16 rounded-full bg-muted flex items-center justify-center mx-auto mb-4`,children:(0,l.jsx)(c.Send,{className:`h-8 w-8 text-muted-foreground`})}),(0,l.jsx)(`h3`,{className:`font-medium text-lg`,children:`Your Messages`}),(0,l.jsx)(`p`,{className:`text-muted-foreground text-sm mt-1`,children:`Select a conversation to start chatting`})]})})})]})}var _=[{id:`1`,name:`John Doe`,avatar:``,status:`online`},{id:`2`,name:`Jane Smith`,avatar:``,status:`away`,lastSeen:`2 hours ago`},{id:`3`,name:`Bob Wilson`,avatar:``,status:`offline`,lastSeen:`yesterday`},{id:`4`,name:`Alice Brown`,avatar:``,status:`busy`}],v=[{id:`conv1`,participants:[_[0],_[1]],lastMessage:{id:`m1`,content:`Hey, how's the project going?`,senderId:`2`,timestamp:new Date,status:`read`},unreadCount:2,isPinned:!0},{id:`conv2`,participants:[_[0],_[2]],lastMessage:{id:`m2`,content:`See you tomorrow!`,senderId:`1`,timestamp:new Date(Date.now()-36e5),status:`delivered`}},{id:`conv3`,isGroup:!0,groupName:`Project Team`,participants:[_[0],_[1],_[2],_[3]],lastMessage:{id:`m3`,content:`Meeting at 3pm`,senderId:`4`,timestamp:new Date(Date.now()-72e5),status:`read`},unreadCount:5}],y=[{id:`msg1`,content:`Hey! How are you doing?`,senderId:`2`,timestamp:new Date(Date.now()-36e5),status:`read`},{id:`msg2`,content:`I'm doing great, thanks for asking! Just finished the new feature.`,senderId:`1`,timestamp:new Date(Date.now()-35e5),status:`read`},{id:`msg3`,content:`That's awesome! Can you show me a demo?`,senderId:`2`,timestamp:new Date(Date.now()-34e5),status:`read`},{id:`msg4`,content:`Sure! Let me schedule a call for tomorrow. Does 2pm work for you?`,senderId:`1`,timestamp:new Date(Date.now()-33e5),status:`delivered`},{id:`msg5`,content:`Perfect, 2pm works great!`,senderId:`2`,timestamp:new Date(Date.now()-32e5),status:`read`}];exports.ChatInterface=g,exports.default=g,exports.defaultConversations=v,exports.defaultMessages=y,exports.defaultUsers=_;