@anakin824/prdg-chat-ui 0.1.0 → 0.2.1

package/dist/index.d.mts

@@ -134,10 +134,16 @@ type ChatProviderProps = {
     apiUrl: string;
     /** Current bearer token (HDS JWT in integrated mode, prdg-chat JWT in standalone). */
     token: string;
-    /** prdg-chat user UUID — identifies the current user for own-message display, mentions, etc. */
-    userId: string;
-    /** Internal prdg-chat tenant UUID (JWT / API). */
-    tenantId: string;
+    /**
+     * prdg-chat user UUID — identifies the current user for own-message display, mentions, etc.
+     * When omitted, ChatProvider calls GET /me with the supplied token to resolve it automatically.
+     */
+    userId?: string;
+    /**
+     * Internal prdg-chat tenant UUID (JWT / API).
+     * When omitted, resolved automatically via GET /me.
+     */
+    tenantId?: string;
     /**
      * Conduitly `tenant_id` for NATS (`chat.{conduitly_tenant_id}.user.*`). Set via `conduitly_tenant_id` in dev.json or `NEXT_PUBLIC_CONDUITLY_TENANT_ID`; do not rely on internal prdg-chat tenant UUID.
      */
@@ -163,9 +169,14 @@ type ChatProviderProps = {
     natsWsUrl?: string;
     /** Optional NATS auth token (when the server uses token authentication). */
     natsToken?: string;
+    /**
+     * When true, logs `[prdg-chat]` diagnostics (identity resolution, message `sender_id` vs context `userId`).
+     * If omitted, set env `NEXT_PUBLIC_PRDG_CHAT_DEBUG=true` in the host app instead.
+     */
+    debug?: boolean;
     children: ReactNode;
 };
-declare function ChatProvider({ apiUrl, token, userId, tenantId, conduitlyTenantId, theme, pollIntervalMs, onUnreadChange: _onUnreadChange, onTokenRefresh, callEnabled, natsWsUrl, natsToken, children, }: ChatProviderProps): react.JSX.Element;
+declare function ChatProvider({ apiUrl, token, userId: userIdProp, tenantId: tenantIdProp, conduitlyTenantId: conduitlyTenantIdProp, theme, pollIntervalMs, onUnreadChange: _onUnreadChange, onTokenRefresh, callEnabled, natsWsUrl, natsToken, debug: debugProp, children, }: ChatProviderProps): react.JSX.Element | null;
 
 type ListConversationsRes = {
     items: Conversation[];
@@ -210,6 +221,9 @@ declare class ChatAPI {
     onAuthError?: (() => Promise<string | null>) | undefined);
     private headers;
     private json;
+    getMe(): Promise<AppUser & {
+        conduitly_tenant_id?: string;
+    }>;
     listConversations(cursor?: string, limit?: number): Promise<ListConversationsRes>;
     listMessages(conversationId: string, cursor?: string, limit?: number): Promise<ListMessagesRes>;
     findOrCreateDirect(peerUserId: string): Promise<Conversation>;
@@ -265,6 +279,8 @@ type ChatContextValue = {
      * Key: conversationId. Value: array of user IDs (never includes the current user).
      */
     typingByConversation: Record<string, string[]>;
+    /** When true, logs identity + message ownership diagnostics to the console. */
+    debug: boolean;
 };
 declare function useChat(): ChatContextValue;
 

package/dist/index.d.ts

@@ -134,10 +134,16 @@ type ChatProviderProps = {
     apiUrl: string;
     /** Current bearer token (HDS JWT in integrated mode, prdg-chat JWT in standalone). */
     token: string;
-    /** prdg-chat user UUID — identifies the current user for own-message display, mentions, etc. */
-    userId: string;
-    /** Internal prdg-chat tenant UUID (JWT / API). */
-    tenantId: string;
+    /**
+     * prdg-chat user UUID — identifies the current user for own-message display, mentions, etc.
+     * When omitted, ChatProvider calls GET /me with the supplied token to resolve it automatically.
+     */
+    userId?: string;
+    /**
+     * Internal prdg-chat tenant UUID (JWT / API).
+     * When omitted, resolved automatically via GET /me.
+     */
+    tenantId?: string;
     /**
      * Conduitly `tenant_id` for NATS (`chat.{conduitly_tenant_id}.user.*`). Set via `conduitly_tenant_id` in dev.json or `NEXT_PUBLIC_CONDUITLY_TENANT_ID`; do not rely on internal prdg-chat tenant UUID.
      */
@@ -163,9 +169,14 @@ type ChatProviderProps = {
     natsWsUrl?: string;
     /** Optional NATS auth token (when the server uses token authentication). */
     natsToken?: string;
+    /**
+     * When true, logs `[prdg-chat]` diagnostics (identity resolution, message `sender_id` vs context `userId`).
+     * If omitted, set env `NEXT_PUBLIC_PRDG_CHAT_DEBUG=true` in the host app instead.
+     */
+    debug?: boolean;
     children: ReactNode;
 };
-declare function ChatProvider({ apiUrl, token, userId, tenantId, conduitlyTenantId, theme, pollIntervalMs, onUnreadChange: _onUnreadChange, onTokenRefresh, callEnabled, natsWsUrl, natsToken, children, }: ChatProviderProps): react.JSX.Element;
+declare function ChatProvider({ apiUrl, token, userId: userIdProp, tenantId: tenantIdProp, conduitlyTenantId: conduitlyTenantIdProp, theme, pollIntervalMs, onUnreadChange: _onUnreadChange, onTokenRefresh, callEnabled, natsWsUrl, natsToken, debug: debugProp, children, }: ChatProviderProps): react.JSX.Element | null;
 
 type ListConversationsRes = {
     items: Conversation[];
@@ -210,6 +221,9 @@ declare class ChatAPI {
     onAuthError?: (() => Promise<string | null>) | undefined);
     private headers;
     private json;
+    getMe(): Promise<AppUser & {
+        conduitly_tenant_id?: string;
+    }>;
     listConversations(cursor?: string, limit?: number): Promise<ListConversationsRes>;
     listMessages(conversationId: string, cursor?: string, limit?: number): Promise<ListMessagesRes>;
     findOrCreateDirect(peerUserId: string): Promise<Conversation>;
@@ -265,6 +279,8 @@ type ChatContextValue = {
      * Key: conversationId. Value: array of user IDs (never includes the current user).
      */
     typingByConversation: Record<string, string[]>;
+    /** When true, logs identity + message ownership diagnostics to the console. */
+    debug: boolean;
 };
 declare function useChat(): ChatContextValue;
 

package/dist/index.js

@@ -51,6 +51,9 @@ var ChatAPI = class {
     }
     return res.json();
   }
+  getMe() {
+    return this.json("/me");
+  }
   listConversations(cursor, limit = 50) {
     const q = new URLSearchParams();
     if (cursor) q.set("cursor", cursor);
@@ -115,6 +118,25 @@ var ChatAPI = class {
   }
 };
 
+// src/chat/lib/chatDebugLog.ts
+function resolveChatDebug(debugProp) {
+  if (debugProp === true) return true;
+  if (debugProp === false) return false;
+  try {
+    return typeof process !== "undefined" && process.env?.NEXT_PUBLIC_PRDG_CHAT_DEBUG === "true";
+  } catch {
+    return false;
+  }
+}
+function chatDebugLog(debug, ...args) {
+  if (!debug) return;
+  console.log("[prdg-chat]", ...args);
+}
+function chatDebugWarn(debug, ...args) {
+  if (!debug) return;
+  console.warn("[prdg-chat]", ...args);
+}
+
 // src/chat/lib/queryKeys.ts
 var chatKeys = {
   all: ["chat"],
@@ -324,9 +346,9 @@ var defaultTheme = {
 function ChatProvider({
   apiUrl,
   token,
-  userId,
-  tenantId,
-  conduitlyTenantId,
+  userId: userIdProp,
+  tenantId: tenantIdProp,
+  conduitlyTenantId: conduitlyTenantIdProp,
   theme,
   pollIntervalMs = 3e4,
   onUnreadChange: _onUnreadChange,
@@ -334,8 +356,10 @@ function ChatProvider({
   callEnabled = false,
   natsWsUrl,
   natsToken,
+  debug: debugProp,
   children
 }) {
+  const debug = resolveChatDebug(debugProp);
   const queryClient = react.useMemo(
     () => new reactQuery.QueryClient({
       defaultOptions: {
@@ -358,6 +382,62 @@ function ChatProvider({
     () => new ChatAPI(apiUrl.replace(/\/$/, ""), () => tokenRef.current, handleAuthError),
     [apiUrl, handleAuthError]
   );
+  const [resolvedUserId, setResolvedUserId] = react.useState(userIdProp ?? null);
+  const [resolvedTenantId, setResolvedTenantId] = react.useState(tenantIdProp ?? null);
+  const [resolvedConduitlyTenantId, setResolvedConduitlyTenantId] = react.useState(
+    conduitlyTenantIdProp
+  );
+  const [meError, setMeError] = react.useState(null);
+  react.useEffect(() => {
+    chatDebugLog(debug, "ChatProvider: session inputs", {
+      apiUrl: apiUrl.replace(/\/$/, ""),
+      hasToken: Boolean(token?.trim?.()),
+      userIdProp: userIdProp ?? null,
+      tenantIdProp: tenantIdProp ?? null,
+      conduitlyTenantIdProp: conduitlyTenantIdProp ?? null
+    });
+  }, [debug, apiUrl, token, userIdProp, tenantIdProp, conduitlyTenantIdProp]);
+  react.useEffect(() => {
+    setMeError(null);
+    if (userIdProp) setResolvedUserId(userIdProp);
+    if (tenantIdProp) setResolvedTenantId(tenantIdProp);
+    if (conduitlyTenantIdProp) setResolvedConduitlyTenantId(conduitlyTenantIdProp);
+    if (userIdProp && tenantIdProp) {
+      chatDebugLog(debug, "identity: using userId + tenantId props (skipping GET /me)", {
+        userId: userIdProp,
+        tenantId: tenantIdProp
+      });
+      return;
+    }
+    chatDebugLog(debug, "identity: fetching GET /me \u2026", {
+      missingUserId: !userIdProp,
+      missingTenantId: !tenantIdProp
+    });
+    let cancelled = false;
+    api.getMe().then((me) => {
+      if (cancelled) return;
+      chatDebugLog(debug, "identity: GET /me ok", {
+        id: me.id,
+        tenant_id: me.tenant_id,
+        display_name: me.display_name,
+        ext_user_id: me.ext_user_id ?? null,
+        conduitly_tenant_id: me.conduitly_tenant_id ?? null
+      });
+      if (!userIdProp) setResolvedUserId(me.id);
+      if (!tenantIdProp) setResolvedTenantId(me.tenant_id);
+      if (!conduitlyTenantIdProp && me.conduitly_tenant_id) {
+        setResolvedConduitlyTenantId(me.conduitly_tenant_id);
+      }
+    }).catch((err) => {
+      if (!cancelled) setMeError(err instanceof Error ? err.message : String(err));
+      chatDebugWarn(debug, "identity: GET /me failed", err);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [api, token, userIdProp, tenantIdProp, conduitlyTenantIdProp, debug]);
+  const userId = resolvedUserId ?? "";
+  const tenantId = resolvedTenantId ?? "";
   const mergedTheme = react.useMemo(() => ({ ...defaultTheme, ...theme }), [theme]);
   const styleTag = react.useMemo(() => {
     const t = mergedTheme;
@@ -379,7 +459,7 @@ function ChatProvider({
   const natsUrl = natsWsUrl?.trim() ?? "";
   const wsConnected = Boolean(natsUrl) && natsConnected;
   const natsTenantId = react.useMemo(() => {
-    const c = conduitlyTenantId?.trim();
+    const c = resolvedConduitlyTenantId?.trim();
     if (c) return c;
     if (process.env.NODE_ENV === "development" && natsUrl) {
       console.warn(
@@ -387,7 +467,7 @@ function ChatProvider({
       );
     }
     return tenantId.trim();
-  }, [conduitlyTenantId, tenantId, natsUrl]);
+  }, [resolvedConduitlyTenantId, tenantId, natsUrl]);
   const typingByConversation = react.useMemo(() => ({}), []);
   const sendTyping = react.useCallback((_conversationId) => {
   }, []);
@@ -419,7 +499,8 @@ function ChatProvider({
       sendTyping,
       sendTypingStop,
       sendRead,
-      typingByConversation
+      typingByConversation,
+      debug
     }),
     [
       api,
@@ -433,9 +514,18 @@ function ChatProvider({
       sendTyping,
       sendTypingStop,
       sendRead,
-      typingByConversation
+      typingByConversation,
+      debug
     ]
   );
+  react.useEffect(() => {
+    if (!resolvedUserId || !resolvedTenantId) return;
+    chatDebugLog(debug, "ChatProvider: context ready", {
+      userId: resolvedUserId,
+      tenantId: resolvedTenantId,
+      natsTenantId
+    });
+  }, [debug, resolvedUserId, resolvedTenantId, natsTenantId]);
   const layoutStyle = {
     flex: 1,
     minHeight: 0,
@@ -443,6 +533,12 @@ function ChatProvider({
     flexDirection: "column",
     boxSizing: "border-box"
   };
+  if (!resolvedUserId || !resolvedTenantId) {
+    if (meError) {
+      return /* @__PURE__ */ React.createElement("div", { style: { padding: 16, fontFamily: "system-ui, sans-serif", color: "#b91c1c", fontSize: 13 } }, "Chat failed to load: ", meError);
+    }
+    return null;
+  }
   return /* @__PURE__ */ React.createElement(reactQuery.QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(ChatContext.Provider, { value }, /* @__PURE__ */ React.createElement("div", { style: layoutStyle }, natsUrl ? /* @__PURE__ */ React.createElement(ChatNatsBridge, { natsWsUrl: natsUrl, natsToken, onConnectedChange: setNatsConnected }) : null, /* @__PURE__ */ React.createElement("style", { dangerouslySetInnerHTML: { __html: styleTag } }), /* @__PURE__ */ React.createElement("div", { "data-chat-root": true, style: { ...layoutStyle, flex: 1 } }, children))));
 }
 function useChatActions() {
@@ -777,7 +873,7 @@ function escapeReg(s) {
   return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 function MessageInput({ conversationId }) {
-  const { api, sendTyping, sendTypingStop, userId } = useChat();
+  const { api, sendTyping, sendTypingStop, userId, debug } = useChat();
   const qc = reactQuery.useQueryClient();
   const { uploadFile } = useUpload();
   const { recording, start, stop } = useVoiceRecorder();
@@ -917,6 +1013,17 @@ function MessageInput({ conversationId }) {
       });
     },
     onSuccess: (confirmedMessage, _payload, context) => {
+      if (debug && confirmedMessage.sender_id !== userId) {
+        chatDebugWarn(
+          debug,
+          "MessageInput: confirmed sender_id !== context userId (own-bubble alignment will be wrong)",
+          {
+            contextUserId: userId,
+            serverSenderId: confirmedMessage.sender_id,
+            messageId: confirmedMessage.id
+          }
+        );
+      }
       qc.setQueryData(chatKeys.messages(conversationId), (old) => {
         if (!old) return old;
         const optimisticIdx = old.items.findIndex((m) => m.id === context?.optimisticId);
@@ -1259,10 +1366,30 @@ function MessageThread({
   isFetchingOlder,
   hasMoreMessages
 }) {
+  const { userId, debug } = useChat();
   const scrollRef = react.useRef(null);
   const bottomRef = react.useRef(null);
   const sentinelRef = react.useRef(null);
   const ordered = [...messages].reverse();
+  react.useEffect(() => {
+    if (!debug || messages.length === 0) return;
+    const senders = new Set(messages.map((m) => m.sender_id));
+    const ownCount = messages.filter((m) => m.sender_id === userId).length;
+    const mismatchSample = messages.find((m) => m.sender_id !== userId);
+    chatDebugLog(debug, "MessageThread: sender snapshot", {
+      messageCount: messages.length,
+      contextUserId: userId,
+      uniqueSenderIds: [...senders],
+      ownMessageCount: ownCount,
+      contextMatchesAnySender: userId ? senders.has(userId) : false
+    });
+    if (userId && ownCount === 0 && messages.length > 0) {
+      chatDebugWarn(debug, "MessageThread: no messages match context userId (all bubbles show as \u201Cother\u201D)", {
+        contextUserId: userId,
+        sampleSenderId: mismatchSample?.sender_id ?? null
+      });
+    }
+  }, [debug, messages, userId]);
   const seenIdsRef = react.useRef(/* @__PURE__ */ new Set());
   const initializedRef = react.useRef(false);
   const prevCountRef = react.useRef(0);