organify-ui 0.3.23 → 0.3.26

package/dist/{chunk-SNGMKLFD.js → chunk-AV6TZPXE.js}

@@ -1,7 +1,7 @@
-import { cn, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, ScrollArea, Skeleton, Avatar, AvatarFallback, Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, Badge, useOrganifyApi, useOrganifyUser, useOrganifyWorkspace, useOrganifyGql } from './chunk-276ZWKXB.js';
+import { cn, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, ScrollArea, Skeleton, useOrganifyApi, useOrganify, Avatar, AvatarImage, AvatarFallback, Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, Badge, useOrganifyUser, useOrganifyWorkspace, useOrganifyGql } from './chunk-276ZWKXB.js';
 import { OrgPlus, OrgSearch, OrgComment, OrgClose, OrgEdit, OrgTeam, OrgGlobe, OrgLock, OrgCheckCircle, OrgError, OrgWarning, OrgInfo, OrgChevronDown, OrgChevronRight, OrgDoor, OrgTrash, OrgCheck, OrgFolder, OrgChevronLeft } from './chunk-MZKEDV5W.js';
 import * as React6 from 'react';
-import React6__default, { useState, useCallback, useEffect } from 'react';
+import React6__default, { useState, useEffect, useCallback } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -176,9 +176,9 @@ var buttonVariants = cva(
       variant: {
         default: "bg-primary !text-white hover:bg-primary/90",
         destructive: "!bg-destructive !text-white hover:bg-destructive/90 focus-visible:ring-destructive/20",
-        outline: "border bg-background border-input !text-white hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:text-white dark:hover:bg-input/50",
-        secondary: "bg-secondary !text-white hover:bg-secondary/80 !dark:text-white",
-        ghost: "!text-white hover:bg-accent hover:text-accent-foreground !dark:text-white dark:hover:bg-accent/50",
+        outline: "border border-theme-strong bg-transparent text-theme hover:bg-theme-subtle",
+        secondary: "bg-theme-elevated text-theme hover:bg-theme-subtle",
+        ghost: "text-theme hover:bg-theme-subtle",
         link: "!text-primary underline-offset-4 hover:underline"
       },
       size: {
@@ -221,7 +221,7 @@ function Button({
   );
 }
 var inputVariants = cva(
-  "flex w-full bg-theme-subtle backdrop-blur-md border border-theme-subtle rounded-xl px-4 py-3 text-sm font-light text-theme transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-theme-muted focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  "flex w-full bg-theme-void backdrop-blur-md border border-theme-subtle rounded-xl px-4 py-3 text-sm font-light text-theme transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-theme-muted focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -399,6 +399,236 @@ function ChatSidebar({
     ] }) }) })
   ] });
 }
+var _cache = /* @__PURE__ */ new Map();
+var _inflight = /* @__PURE__ */ new Map();
+var _pendingBatch = /* @__PURE__ */ new Set();
+var _batchTimer = null;
+var _batchResolvers = /* @__PURE__ */ new Map();
+function _flushBatch(gatewayUrl) {
+  const ids = Array.from(_pendingBatch);
+  _pendingBatch.clear();
+  _batchTimer = null;
+  if (ids.length === 0) return;
+  const p = fetch(`${gatewayUrl}/api/users/profiles/batch`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify({ ids })
+  }).then((r) => r.ok ? r.json() : null).catch(() => null).then((body) => {
+    const results = !body ? [] : Array.isArray(body) ? body : Array.isArray(body.data) ? body.data : [];
+    const byId = /* @__PURE__ */ new Map();
+    for (const u of results) {
+      byId.set(String(u.id), u);
+    }
+    for (const id of ids) {
+      const user = byId.get(id) ?? null;
+      _cache.set(id, user);
+      _inflight.delete(id);
+      const resolvers = _batchResolvers.get(id) ?? [];
+      _batchResolvers.delete(id);
+      for (const resolve of resolvers) resolve(user);
+    }
+  });
+  for (const id of ids) {
+    if (!_batchResolvers.has(id)) _batchResolvers.set(id, []);
+    _inflight.set(id, p.then(() => _cache.get(id) ?? null));
+  }
+}
+function resolveUser(userId, gatewayUrl) {
+  if (_cache.has(userId)) {
+    return Promise.resolve(_cache.get(userId));
+  }
+  if (_inflight.has(userId)) {
+    return _inflight.get(userId);
+  }
+  _pendingBatch.add(userId);
+  if (!_batchResolvers.has(userId)) _batchResolvers.set(userId, []);
+  if (!_batchTimer) {
+    _batchTimer = setTimeout(() => _flushBatch(gatewayUrl), 0);
+  }
+  const p = new Promise((resolve) => {
+    _batchResolvers.get(userId).push(resolve);
+  });
+  _inflight.set(userId, p);
+  return p;
+}
+function invalidateUserCache(userId) {
+  _cache.delete(userId);
+  _inflight.delete(userId);
+}
+function seedUserCache(users) {
+  for (const u of users) {
+    _cache.set(String(u.id), u);
+  }
+}
+function useResolvedUser(userId) {
+  const api = useOrganifyApi();
+  const { user: currentUser } = useOrganify();
+  const key = userId != null ? String(userId) : void 0;
+  if (currentUser?.id != null) {
+    const ck = String(currentUser.id);
+    if (!_cache.has(ck)) {
+      _cache.set(ck, {
+        id: currentUser.id,
+        name: currentUser.name ?? "",
+        avatarUrl: currentUser.avatarUrl ?? void 0
+      });
+    }
+  }
+  const [user, setUser] = useState(() => {
+    if (!key) return void 0;
+    return _cache.has(key) ? _cache.get(key) : void 0;
+  });
+  useEffect(() => {
+    if (!key || !api.gatewayUrl) return;
+    let cancelled = false;
+    if (_cache.has(key)) {
+      setUser(_cache.get(key) ?? null);
+      return;
+    }
+    resolveUser(key, api.gatewayUrl).then((u) => {
+      if (!cancelled) setUser(u);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [key, api.gatewayUrl]);
+  useEffect(() => {
+    if (!key || !currentUser?.id) return;
+    if (String(currentUser.id) === key) {
+      setUser(_cache.get(key) ?? null);
+    }
+  }, [key, currentUser]);
+  return user;
+}
+function getInitials(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
+}
+function nameToGradient(name) {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const gradients = [
+    "from-violet-500 to-purple-600",
+    "from-blue-500 to-cyan-500",
+    "from-emerald-500 to-teal-500",
+    "from-orange-500 to-amber-500",
+    "from-rose-500 to-pink-500",
+    "from-indigo-500 to-blue-600",
+    "from-fuchsia-500 to-purple-500",
+    "from-teal-500 to-green-500"
+  ];
+  return gradients[Math.abs(hash) % gradients.length];
+}
+function UserAvatar({
+  userId,
+  name: nameProp,
+  src: srcProp,
+  email,
+  role,
+  showHoverInfo = true,
+  fallback,
+  extraInfo,
+  onClick,
+  className,
+  size = "default",
+  shape = "circle",
+  status,
+  ...props
+}) {
+  const resolved = useResolvedUser(!nameProp && userId != null ? userId : null);
+  const name = nameProp ?? resolved?.name ?? "\u2026";
+  const src = srcProp ?? resolved?.avatarUrl ?? void 0;
+  const isLoading = !nameProp && userId != null && resolved === void 0;
+  const initials = getInitials(name);
+  const gradient = nameToGradient(name || "unknown");
+  const avatarElement = /* @__PURE__ */ jsxs(
+    Avatar,
+    {
+      size,
+      shape,
+      status,
+      gradient,
+      className: cn(
+        onClick && "cursor-pointer",
+        isLoading && "animate-pulse opacity-60",
+        className
+      ),
+      onClick,
+      ...props,
+      children: [
+        src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt: name }) : null,
+        /* @__PURE__ */ jsx(
+          AvatarFallback,
+          {
+            className: cn(
+              "bg-gradient-to-br text-white font-semibold",
+              gradient,
+              size === "sm" && "text-xs",
+              size === "default" && "text-sm",
+              size === "lg" && "text-lg",
+              size === "xl" && "text-xl"
+            ),
+            children: fallback ?? initials
+          }
+        )
+      ]
+    }
+  );
+  if (!showHoverInfo) return avatarElement;
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: avatarElement }),
+    /* @__PURE__ */ jsxs(
+      TooltipContent,
+      {
+        side: "top",
+        className: cn(
+          "flex items-center gap-3 rounded-xl border border-theme-subtle",
+          "bg-card-surface/95 px-4 py-3 shadow-glass-xl backdrop-blur-2xl",
+          "max-w-xs"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(Avatar, { size: "sm", shape, gradient, children: [
+            src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt: name }) : null,
+            /* @__PURE__ */ jsx(AvatarFallback, { className: cn("bg-gradient-to-br text-white text-xs font-semibold", gradient), children: initials })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white truncate", children: name }),
+            email && /* @__PURE__ */ jsx("span", { className: "text-xs text-theme-muted truncate", children: email }),
+            role && /* @__PURE__ */ jsx("span", { className: "text-xs text-primary-light/80 capitalize", children: role.toLowerCase() }),
+            extraInfo?.map((info) => /* @__PURE__ */ jsxs("span", { className: "text-xs text-theme-muted", children: [
+              info.label,
+              ": ",
+              info.value
+            ] }, info.label))
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+UserAvatar.displayName = "UserAvatar";
+function UserDisplayName({
+  userId,
+  name: nameProp,
+  loadingFallback = "\u2026",
+  className,
+  style
+}) {
+  const resolved = useResolvedUser(!nameProp && userId != null ? userId : null);
+  const isLoading = !nameProp && userId != null && resolved === void 0;
+  const displayName = nameProp ?? resolved?.name ?? (isLoading ? loadingFallback : "?");
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(isLoading && "animate-pulse opacity-60", className),
+      style,
+      title: displayName,
+      children: displayName
+    }
+  );
+}
 var actionBarVariants = {
   hidden: {
     opacity: 0,
@@ -455,10 +685,6 @@ function formatTime(iso) {
     minute: "2-digit"
   });
 }
-function getInitials(name) {
-  if (!name) return "??";
-  return name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
-}
 function groupReactions(reactions) {
   const map = /* @__PURE__ */ new Map();
   reactions.forEach((r) => {
@@ -796,7 +1022,17 @@ function MessageBubble({
         showActions && "bg-theme-subtle"
       ),
       children: [
-        /* @__PURE__ */ jsx(motion.div, { whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, children: /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "mt-0.5 shrink-0", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-xs font-semibold", children: getInitials(message.authorName || message.authorId) }) }) }),
+        /* @__PURE__ */ jsx(motion.div, { whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, children: /* @__PURE__ */ jsx(
+          UserAvatar,
+          {
+            userId: message.authorId,
+            name: message.authorName,
+            src: message.authorAvatarUrl,
+            size: "sm",
+            showHoverInfo: false,
+            className: "mt-0.5 shrink-0"
+          }
+        ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 relative", children: [
           /* @__PURE__ */ jsx(
             ActionBar,
@@ -837,7 +1073,7 @@ function MessageBubble({
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 mb-0.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-theme", children: message.authorName || message.authorId.substring(0, 8) }),
+            /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-theme", children: /* @__PURE__ */ jsx(UserDisplayName, { userId: message.authorId, name: message.authorName }) }),
             /* @__PURE__ */ jsx("span", { className: "text-[11px] text-theme-muted", children: formatTime(message.createdAt) }),
             message.edited && /* @__PURE__ */ jsx(
               motion.span,
@@ -2713,7 +2949,6 @@ function useChat(options = {}) {
   }, [userId, user, options.workspaceMembers]);
   const fetchRooms = useCallback(async () => {
     if (initialRooms && initialRooms.length > 0) return;
-    if (!workspaceId || workspaceId.startsWith("temp-")) return;
     if (!userId) return;
     setLoadingRooms(true);
     setError(null);
@@ -2739,6 +2974,40 @@ function useChat(options = {}) {
       setLoadingRooms(false);
     }
   }, [workspaceId, userId, gql, initialRooms]);
+  const resolveUnknownUsers = useCallback(async (msgs) => {
+    const unknownIds = [...new Set(msgs.map((m) => m.authorId).filter((id) => !userCache.has(id)))];
+    if (unknownIds.length === 0 || !workspaceId || workspaceId.startsWith("temp-")) return;
+    try {
+      const data = await centralGql(
+        "workspaces",
+        `query($slug: String!) {
+          workspace(slug: $slug) {
+            members {
+              userId
+              user { id name email avatar }
+            }
+          }
+        }`,
+        { slug: workspaceId }
+        // Hack: Assuming workspaceId is the slug for this query, ideally we'd query users directly if there was an endpoint, but this refreshes workspace members
+      );
+      const newMembers = data?.workspace?.members || [];
+      setUserCache((prev) => {
+        const next = new Map(prev);
+        for (const member of newMembers) {
+          if (member.user?.id && !next.has(member.user.id)) {
+            next.set(member.user.id, {
+              displayName: member.user.name || member.user.email || `User`,
+              avatarUrl: member.user.avatar ?? void 0
+            });
+          }
+        }
+        return next;
+      });
+    } catch (e) {
+      console.warn("[organify-chat] resolveUnknownUsers failed:", e);
+    }
+  }, [userCache, workspaceId, centralGql]);
   const MESSAGE_FIELDS = `
     id roomId authorId parentId
     content edited editedAt createdAt
@@ -2767,9 +3036,11 @@ function useChat(options = {}) {
           }`,
           { roomId, filter: { limit: 50 } }
         );
-        setMessages(data.messages?.items ?? []);
+        const fetchedMessages = data.messages?.items ?? [];
+        setMessages(fetchedMessages);
         setHasMoreMessages(data.messages?.hasMore ?? false);
         setMessageCursor(data.messages?.nextCursor ?? null);
+        resolveUnknownUsers(fetchedMessages);
       } catch (err) {
         console.error("[organify-chat] fetchMessages:", err);
         setError("Erro ao carregar mensagens.");
@@ -2797,6 +3068,7 @@ function useChat(options = {}) {
         setMessages((prev) => [...olderMessages, ...prev]);
         setHasMoreMessages(data.messages?.hasMore ?? false);
         setMessageCursor(data.messages?.nextCursor ?? null);
+        resolveUnknownUsers(olderMessages);
       } catch (err) {
         console.error("[organify-chat] loadMore:", err);
       } finally {
@@ -4471,6 +4743,6 @@ function useAiInline({ gatewayUrl, workspaceId, projectId }) {
   return { loading, suggestion, requestSuggestion, dismiss };
 }
 
-export { AiChatSidebar, Alert, Button, ChatMessages, ChatSidebar, CommandBar, CreateRoomDialog, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, InlineAiButton, Input, Label, MOCK_PROJECTS, MOCK_USERS, MentionPopover, MessageBubble, MessageInput, OrgLoader, OrgLoaderInline, OrganifyChat, ResponsiveDialog, RoomManagementPanel, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TypingIndicatorMock, alertVariants, buttonVariants, generateAutoReplies, getMockMentionOptions, getRoomPermissions, inputVariants, orgLoaderVariants, typingIndicator, useAiInline, useChat };
-//# sourceMappingURL=chunk-SNGMKLFD.js.map
-//# sourceMappingURL=chunk-SNGMKLFD.js.map
+export { AiChatSidebar, Alert, Button, ChatMessages, ChatSidebar, CommandBar, CreateRoomDialog, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, InlineAiButton, Input, Label, MOCK_PROJECTS, MOCK_USERS, MentionPopover, MessageBubble, MessageInput, OrgLoader, OrgLoaderInline, OrganifyChat, ResponsiveDialog, RoomManagementPanel, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TypingIndicatorMock, UserAvatar, UserDisplayName, alertVariants, buttonVariants, generateAutoReplies, getMockMentionOptions, getRoomPermissions, inputVariants, invalidateUserCache, orgLoaderVariants, resolveUser, seedUserCache, typingIndicator, useAiInline, useChat, useResolvedUser };
+//# sourceMappingURL=chunk-AV6TZPXE.js.map
+//# sourceMappingURL=chunk-AV6TZPXE.js.map