organify-ui 0.3.39 → 0.3.40

package/dist/{chunk-V3UZIPZA.js → chunk-5VC6DBVW.js}

@@ -1295,14 +1295,13 @@ function MessageInput({
   const [caretPosition, setCaretPosition] = React6.useState(null);
   const detectMention = (text, cursorPos) => {
     const beforeCursor = text.slice(0, cursorPos);
-    const match = beforeCursor.match(/@(\w*)$/);
+    const match = beforeCursor.match(/@([^@\n\r]*)$/);
     if (match) {
       setShowMentions(true);
       setMentionQuery(match[1]);
       setMentionIndex(0);
       onMentionSearch?.(match[1], null);
       if (inputRef.current) {
-        inputRef.current.getBoundingClientRect();
         setCaretPosition({
           top: -200,
           // Above input
@@ -1354,7 +1353,7 @@ function MessageInput({
     const cursorPos = inputRef.current?.selectionStart || 0;
     const beforeCursor = value.slice(0, cursorPos);
     const afterCursor = value.slice(cursorPos);
-    const match = beforeCursor.match(/@(\w*)$/);
+    const match = beforeCursor.match(/@([^@\n\r]*)$/);
     if (match) {
       const mentionStart = beforeCursor.length - match[0].length;
       const newValue = beforeCursor.slice(0, mentionStart) + `@${option.display} ` + afterCursor;
@@ -2547,15 +2546,20 @@ function RoomManagementPanel({
   permissions,
   currentUserId,
   loading,
+  workspaceMembers,
   onClose,
   onUpdateRoom,
   onArchiveRoom,
   onLeaveRoom,
   onRemoveMember,
   onUpdateMemberRole,
+  onAddMember,
   className
 }) {
   const [view, setView] = React6.useState("info");
+  const [addMemberSearch, setAddMemberSearch] = React6.useState("");
+  const [addMemberOpen, setAddMemberOpen] = React6.useState(false);
+  const [addingMember, setAddingMember] = React6.useState(false);
   const [editName, setEditName] = React6.useState(room.name || "");
   const [editDesc, setEditDesc] = React6.useState(room.description || "");
   const [editVisibility, setEditVisibility] = React6.useState(room.visibility);
@@ -2706,65 +2710,129 @@ function RoomManagementPanel({
   ] });
   const renderMembers = () => /* @__PURE__ */ jsxs(Fragment, { children: [
     renderHeader("Membros", true),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-3 space-y-0.5", children: loading ? Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2", children: [
-      /* @__PURE__ */ jsx(Skeleton, { variant: "circular", className: "h-8 w-8" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-2 w-16" })
-      ] })
-    ] }, i)) : members.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-theme-muted text-center py-8", children: "Sem membros" }) : members.map((member) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "flex items-center gap-3 p-2 rounded-xl hover:bg-theme-subtle group transition-colors",
-        children: [
-          /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-xs", children: getInitials4(member.displayName || member.userId.substring(0, 8)) }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-theme truncate", children: member.displayName || member.userId.substring(0, 8) }),
-              String(member.userId) === String(currentUserId) && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-theme-muted", children: "(voc\xEA)" })
+    /* @__PURE__ */ jsxs(ScrollArea, { className: "flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-3 space-y-0.5", children: loading ? Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { variant: "circular", className: "h-8 w-8" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-2 w-16" })
+        ] })
+      ] }, i)) : members.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-theme-muted text-center py-8", children: "Sem membros" }) : members.map((member) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-3 p-2 rounded-xl hover:bg-theme-subtle group transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-xs", children: getInitials4(
+              member.displayName || workspaceMembers?.find((w) => w.id === member.userId)?.displayName || member.userId.substring(0, 8)
+            ) }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-theme truncate", children: member.displayName || workspaceMembers?.find((w) => w.id === member.userId)?.displayName || member.userId.substring(0, 8) }),
+                String(member.userId) === String(currentUserId) && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-theme-muted", children: "(voc\xEA)" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  variant: "default",
+                  className: cn(
+                    "text-[9px] px-1 py-0 h-3.5 border mt-0.5",
+                    roleBadgeColors[member.role]
+                  ),
+                  children: roleLabels[member.role]
+                }
+              )
             ] }),
-            /* @__PURE__ */ jsx(
-              Badge,
-              {
-                variant: "default",
-                className: cn(
-                  "text-[9px] px-1 py-0 h-3.5 border mt-0.5",
-                  roleBadgeColors[member.role]
-                ),
-                children: roleLabels[member.role]
-              }
-            )
-          ] }),
-          permissions.canManageMembers && String(member.userId) !== String(currentUserId) && member.role !== "OWNER" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
-            /* @__PURE__ */ jsxs(
-              Select,
-              {
-                value: member.role,
-                onValueChange: (val) => onUpdateMemberRole(room.id, member.userId, val),
-                children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { className: "h-6 w-20 text-[10px] bg-theme-subtle border-theme-subtle-10", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-                  /* @__PURE__ */ jsxs(SelectContent, { children: [
-                    /* @__PURE__ */ jsx(SelectItem, { value: "ADMIN", children: "Admin" }),
-                    /* @__PURE__ */ jsx(SelectItem, { value: "MEMBER", children: "Membro" })
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                onClick: () => onRemoveMember(room.id, member.userId),
-                className: "h-6 w-6 p-0 text-theme-muted hover:text-rose-400 hover:bg-rose-500/10",
-                children: /* @__PURE__ */ jsx(OrgClose, { className: "w-3 h-3" })
-              }
-            )
-          ] })
-        ]
-      },
-      member.id
-    )) }) })
+            permissions.canManageMembers && String(member.userId) !== String(currentUserId) && member.role !== "OWNER" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: member.role,
+                  onValueChange: (val) => onUpdateMemberRole(room.id, member.userId, val),
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { className: "h-6 w-20 text-[10px] bg-theme-subtle border-theme-subtle-10", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsxs(SelectContent, { children: [
+                      /* @__PURE__ */ jsx(SelectItem, { value: "ADMIN", children: "Admin" }),
+                      /* @__PURE__ */ jsx(SelectItem, { value: "MEMBER", children: "Membro" })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => onRemoveMember(room.id, member.userId),
+                  className: "h-6 w-6 p-0 text-theme-muted hover:text-rose-400 hover:bg-rose-500/10",
+                  children: /* @__PURE__ */ jsx(OrgClose, { className: "w-3 h-3" })
+                }
+              )
+            ] })
+          ]
+        },
+        member.id
+      )) }),
+      permissions.canManageMembers && onAddMember && room.type !== "DIRECT" && /* @__PURE__ */ jsx("div", { className: "px-3 pb-3", children: !addMemberOpen ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setAddMemberOpen(true),
+          className: "flex items-center gap-2 w-full px-3 py-2 rounded-xl text-xs text-primary hover:bg-primary/10 border border-dashed border-primary/30 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: "+" }),
+            "Adicionar membro"
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs("div", { className: "space-y-2 animate-in fade-in-0 duration-[300ms]", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            variant: "flat",
+            placeholder: "Pesquisar membro...",
+            value: addMemberSearch,
+            onChange: (e) => setAddMemberSearch(e.target.value),
+            autoFocus: true,
+            className: "h-8 text-xs"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "max-h-40 overflow-y-auto space-y-0.5", children: [
+          (workspaceMembers ?? []).filter(
+            (w) => !members.some((m) => m.userId === w.id) && (addMemberSearch.trim() === "" || w.displayName.toLowerCase().includes(addMemberSearch.toLowerCase()) || (w.email ?? "").toLowerCase().includes(addMemberSearch.toLowerCase()))
+          ).slice(0, 8).map((w) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              disabled: addingMember,
+              onClick: async () => {
+                setAddingMember(true);
+                await onAddMember(room.id, w.id);
+                setAddingMember(false);
+                setAddMemberOpen(false);
+                setAddMemberSearch("");
+              },
+              className: "flex items-center gap-2 w-full px-2 py-1.5 rounded-lg text-xs text-theme hover:bg-theme-subtle transition-colors text-left",
+              children: [
+                /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "h-6 w-6", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-[9px]", children: getInitials4(w.displayName) }) }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: w.displayName })
+              ]
+            },
+            w.id
+          )),
+          (workspaceMembers ?? []).filter(
+            (w) => !members.some((m) => m.userId === w.id)
+          ).length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-theme-muted text-center py-2", children: "Todos os membros j\xE1 adicionados" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setAddMemberOpen(false);
+              setAddMemberSearch("");
+            },
+            className: "text-[10px] text-theme-muted hover:text-theme transition-colors w-full text-right pr-1",
+            children: "Cancelar"
+          }
+        )
+      ] }) })
+    ] })
   ] });
   const renderEdit = () => /* @__PURE__ */ jsxs(Fragment, { children: [
     renderHeader("Editar canal", true),
@@ -2908,6 +2976,7 @@ function useChat(options = {}) {
   const [myRoomRole, setMyRoomRole] = useState(null);
   const [typingUsers, setTypingUsers] = useState([]);
   const [error, setError] = useState(null);
+  const joinedRoomsRef = React6__default.useRef(/* @__PURE__ */ new Set());
   const isWorkspaceAdmin = workspaceRole === "OWNER" || workspaceRole === "ADMIN";
   const isDemoMode = !!(initialRooms && initialRooms.length > 0);
   const permissions = getRoomPermissions(myRoomRole, isWorkspaceAdmin);
@@ -3095,14 +3164,43 @@ function useChat(options = {}) {
           { roomId }
         );
         const members = data?.room?.members ?? [];
-        setRoomMembers(members);
-        const myMembership = members.find((m) => String(m.userId) === String(userId));
+        const enriched = members.map((m) => {
+          if (!m.displayName) {
+            const cached = userCache.get(m.userId);
+            return { ...m, displayName: cached?.displayName || void 0 };
+          }
+          return m;
+        });
+        setRoomMembers(enriched);
+        const myMembership = enriched.find((m) => String(m.userId) === String(userId));
         setMyRoomRole(myMembership?.role ?? null);
       } catch (err) {
         console.error("[organify-chat] fetchRoomMembers:", err);
       }
     },
-    [gql, userId, isDemoMode]
+    [gql, userId, isDemoMode, userCache]
+  );
+  const joinRoomIfNeeded = useCallback(
+    async (roomId, roomType) => {
+      if (isDemoMode || roomType === "DIRECT") return;
+      if (joinedRoomsRef.current.has(roomId)) return;
+      joinedRoomsRef.current.add(roomId);
+      try {
+        await gql(
+          `mutation($roomId: ID!) { joinRoom(roomId: $roomId) { id userId role joinedAt } }`,
+          { roomId }
+        );
+        fetchRoomMembers(roomId);
+        setRooms(
+          (prev) => prev.map(
+            (r) => r.id === roomId ? { ...r, memberCount: Math.max(r.memberCount, (r.memberCount || 0) + 1) } : r
+          )
+        );
+      } catch {
+        joinedRoomsRef.current.delete(roomId);
+      }
+    },
+    [isDemoMode, gql, fetchRoomMembers]
   );
   const selectRoom = useCallback(
     (roomId) => {
@@ -3126,8 +3224,10 @@ function useChat(options = {}) {
       setMessageCursor(null);
       fetchMessages(roomId);
       fetchRoomMembers(roomId);
+      const room = rooms.find((r) => r.id === roomId);
+      if (room) joinRoomIfNeeded(roomId, room.type);
     },
-    [activeRoomId, workspaceId, fetchMessages, fetchRoomMembers]
+    [activeRoomId, workspaceId, fetchMessages, fetchRoomMembers, rooms, joinRoomIfNeeded]
   );
   const sendMessage = useCallback(
     async (content, replyToId) => {
@@ -3168,9 +3268,7 @@ function useChat(options = {}) {
           { input }
         );
         if (data?.sendMessage) {
-          setMessages(
-            (prev) => prev.map((m) => m.id === tempId ? { ...m, _status: "sent" } : m)
-          );
+          setMessages((prev) => prev.filter((m) => m.id !== tempId));
         } else {
           setMessages(
             (prev) => prev.map((m) => m.id === tempId ? { ...m, _status: "error" } : m)
@@ -3645,16 +3743,6 @@ function useChat(options = {}) {
                   const newMsg = msg.payload.data.messageCreated;
                   setMessages((prev) => {
                     if (prev.some((m) => m.id === newMsg.id)) return prev;
-                    if (String(newMsg.authorId) === String(userId)) {
-                      const ownIdx = prev.findIndex(
-                        (m) => (m._status === "pending" || m._status === "sent") && m.content === newMsg.content && String(m.authorId) === String(newMsg.authorId)
-                      );
-                      if (ownIdx !== -1) {
-                        const next = [...prev];
-                        next[ownIdx] = { ...newMsg, _status: "sent" };
-                        return next;
-                      }
-                    }
                     return [...prev, newMsg];
                   });
                 }
@@ -3777,7 +3865,9 @@ function useChat(options = {}) {
     // Refresh
     fetchRooms,
     fetchRoomMembers,
-    userCache
+    userCache,
+    // Join
+    joinRoom: joinRoomIfNeeded
   };
 }
 var alertVariants = cva(
@@ -3978,12 +4068,14 @@ function OrganifyChat({
               members: chat.roomMembers,
               currentUserId: userId,
               permissions: chat.permissions,
+              workspaceMembers: stableWorkspaceMembers,
               onClose: () => setManagementOpen(false),
               onUpdateRoom: chat.updateRoom,
               onArchiveRoom: chat.archiveRoom,
               onLeaveRoom: chat.leaveRoom,
               onRemoveMember: chat.removeMember,
-              onUpdateMemberRole: chat.updateMemberRole
+              onUpdateMemberRole: chat.updateMemberRole,
+              onAddMember: chat.addMember
             }
           ) })
         ] }),
@@ -4038,12 +4130,14 @@ function OrganifyChat({
                 members: chat.roomMembers,
                 currentUserId: userId,
                 permissions: chat.permissions,
+                workspaceMembers: stableWorkspaceMembers,
                 onClose: handleCloseManagement,
                 onUpdateRoom: chat.updateRoom,
                 onArchiveRoom: chat.archiveRoom,
                 onLeaveRoom: chat.leaveRoom,
                 onRemoveMember: chat.removeMember,
-                onUpdateMemberRole: chat.updateMemberRole
+                onUpdateMemberRole: chat.updateMemberRole,
+                onAddMember: chat.addMember
               }
             ) })
           ] })
@@ -4749,5 +4843,5 @@ function useAiInline({ gatewayUrl, workspaceId, projectId }) {
 }
 
 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-V3UZIPZA.js.map
-//# sourceMappingURL=chunk-V3UZIPZA.js.map
+//# sourceMappingURL=chunk-5VC6DBVW.js.map
+//# sourceMappingURL=chunk-5VC6DBVW.js.map