@anakin824/prdg-chat-ui 0.3.2 → 0.3.4

package/dist/index.mjs

@@ -178,10 +178,15 @@ function chatDebugWarn(debug, ...args) {
 }
 
 // src/chat/lib/queryKeys.ts
+function normalizeConversationCacheId(conversationId) {
+  if (conversationId == null) return null;
+  const t = conversationId.trim();
+  return t ? t.toLowerCase() : null;
+}
 var chatKeys = {
   all: ["chat"],
   conversations: () => [...chatKeys.all, "conversations"],
-  messages: (conversationId) => [...chatKeys.all, "messages", conversationId],
+  messages: (conversationId) => [...chatKeys.all, "messages", normalizeConversationCacheId(conversationId)],
   members: (conversationId) => [...chatKeys.all, "members", conversationId],
   contacts: (q) => [...chatKeys.all, "contacts", q]
 };
@@ -248,7 +253,10 @@ function getMessagePageSummary(queryClient, conversationId) {
 function pushMessageToCache(queryClient, msg) {
   let result = "missing-cache";
   queryClient.setQueryData(chatKeys.messages(msg.conversation_id), (prev) => {
-    if (!prev) return void 0;
+    if (!prev) {
+      result = "seeded";
+      return { items: [msg], next_cursor: "" };
+    }
     if (prev.items.some((m) => m.id === msg.id)) {
       result = "duplicate";
       return prev;
@@ -426,11 +434,12 @@ function ChatNatsBridge({ natsWsUrl, natsToken, onConnectedChange }) {
   const connRef = useRef(null);
   useEffect(() => {
     if (servers.length === 0) return;
+    const entityConvIds = entityKey ? entityKey.split(",").filter(Boolean) : [];
     chatDebugLog(debug, "ChatNatsBridge: starting subscriptions", {
       userId,
       natsTenantId,
       servers,
-      entityConversationIds
+      entityConversationIds: entityConvIds
     });
     let cancelled = false;
     void (async () => {
@@ -523,7 +532,7 @@ function ChatNatsBridge({ natsWsUrl, natsToken, onConnectedChange }) {
             handleMsg(m.data, m.subject);
           }
         })();
-        for (const convId of entityConversationIds) {
+        for (const convId of entityConvIds) {
           const subj = entityConversationSubject(natsTenantId, convId);
           chatDebugLog(debug, "ChatNatsBridge: subscribing entity conversation", {
             conversationId: convId,
@@ -540,7 +549,7 @@ function ChatNatsBridge({ natsWsUrl, natsToken, onConnectedChange }) {
         if (process.env.NODE_ENV === "development") {
           const subjectList = [
             inbox,
-            ...entityConversationIds.map((id) => entityConversationSubject(natsTenantId, id))
+            ...entityConvIds.map((id) => entityConversationSubject(natsTenantId, id))
           ];
           console.info("[NATS] WebSocket connected \u2014 servers:", servers, "subjects:", subjectList);
           void (async () => {
@@ -571,7 +580,7 @@ function ChatNatsBridge({ natsWsUrl, natsToken, onConnectedChange }) {
       connRef.current = null;
       void c?.drain();
     };
-  }, [servers, natsToken, natsTenantId, userId, entityKey, queryClient, entityConversationIds, debug]);
+  }, [servers, natsToken, natsTenantId, userId, entityKey, queryClient, debug]);
   return null;
 }
 
@@ -622,6 +631,28 @@ function buildThemeColorOverrideCss(themeOverride) {
     ${body}
   }`;
 }
+function buildAppShellThemeCss(themeOverride) {
+  const p = themeOverride?.primary?.trim();
+  if (!p) return "";
+  const icon = themeOverride?.secondary?.trim() || p;
+  const body = `
+    --chat-app-accent: ${p};
+    --chat-app-tab-active: ${p};
+    --chat-app-icon: ${icon};
+    --chat-app-fab: ${p};
+    --chat-app-row-active-bg: color-mix(in srgb, ${p} 14%, transparent);
+    --chat-app-row-active-ring: color-mix(in srgb, ${p} 30%, transparent);
+  `;
+  return `
+  html:not(.dark) [data-chat-root]:not([data-chat-appearance="dark"]),
+  [data-chat-root][data-chat-appearance="light"] {
+    ${body}
+  }
+  html.dark [data-chat-root]:not([data-chat-appearance="light"]),
+  [data-chat-root][data-chat-appearance="dark"] {
+    ${body}
+  }`;
+}
 function ChatProvider({
   apiUrl,
   token,
@@ -748,10 +779,11 @@ function ChatProvider({
   const styleTag = useMemo(() => {
     const t = mergedTheme;
     let css = `[data-chat-root] {
-      --chat-radius: ${t.radius};
-      --chat-font-family: ${t.fontFamily};
+      --chat-radius: ${t.radius ?? "12px"};
+      --chat-font-family: ${t.fontFamily ?? "system-ui, -apple-system, sans-serif"};
     }`;
     css += buildThemeColorOverrideCss(theme);
+    css += buildAppShellThemeCss(theme);
     return css;
   }, [mergedTheme, theme]);
   const [natsConnected, setNatsConnected] = useState(false);
@@ -1044,8 +1076,10 @@ function useChatPanelController({
     [onConversationChange]
   );
   const refreshFromServer = useCallback(() => {
-    void queryClient.invalidateQueries({ queryKey: chatKeys.conversations() });
-    if (selectedId) void queryClient.invalidateQueries({ queryKey: chatKeys.messages(selectedId) });
+    void queryClient.refetchQueries({ queryKey: chatKeys.conversations() });
+    if (selectedId) {
+      void queryClient.refetchQueries({ queryKey: chatKeys.messages(selectedId) });
+    }
   }, [queryClient, selectedId]);
   useEffect(() => {
     if (!peerUserId) return;
@@ -2163,7 +2197,7 @@ function initials2(name) {
 }
 
 // scss-module:./standalone-chat.module.css#scss-module
-var standalone_chat_module_default = { "root": "standalone-chat__root", "shell": "standalone-chat__shell", "sidebar": "standalone-chat__sidebar", "sidebarHeader": "standalone-chat__sidebarHeader", "sidebarTitle": "standalone-chat__sidebarTitle", "iconSquare": "standalone-chat__iconSquare", "searchWrap": "standalone-chat__searchWrap", "searchInput": "standalone-chat__searchInput", "searchIcon": "standalone-chat__searchIcon", "tabs": "standalone-chat__tabs", "tab": "standalone-chat__tab", "tabActive": "standalone-chat__tabActive", "listScroll": "standalone-chat__listScroll", "sectionLabel": "standalone-chat__sectionLabel", "convRow": "standalone-chat__convRow", "convRowActive": "standalone-chat__convRowActive", "avatar": "standalone-chat__avatar", "avatarInitials": "standalone-chat__avatarInitials", "avatarDot": "standalone-chat__avatarDot", "convBody": "standalone-chat__convBody", "convTopLine": "standalone-chat__convTopLine", "convName": "standalone-chat__convName", "convPreview": "standalone-chat__convPreview", "convTime": "standalone-chat__convTime", "fab": "standalone-chat__fab", "sidebarFooter": "standalone-chat__sidebarFooter", "main": "standalone-chat__main", "mainHeader": "standalone-chat__mainHeader", "mainHeaderLeft": "standalone-chat__mainHeaderLeft", "mainAvatar": "standalone-chat__mainAvatar", "mainTitle": "standalone-chat__mainTitle", "mainStatus": "standalone-chat__mainStatus", "mainActions": "standalone-chat__mainActions", "actionBtn": "standalone-chat__actionBtn", "threadArea": "standalone-chat__threadArea", "emptyMain": "standalone-chat__emptyMain", "inputArea": "standalone-chat__inputArea", "callsEmpty": "standalone-chat__callsEmpty" };
+var standalone_chat_module_default = { "root": "standalone-chat__root", "shell": "standalone-chat__shell", "sidebar": "standalone-chat__sidebar", "sidebarHeader": "standalone-chat__sidebarHeader", "sidebarTitle": "standalone-chat__sidebarTitle", "iconSquare": "standalone-chat__iconSquare", "searchWrap": "standalone-chat__searchWrap", "searchInput": "standalone-chat__searchInput", "searchIcon": "standalone-chat__searchIcon", "tabs": "standalone-chat__tabs", "tab": "standalone-chat__tab", "tabActive": "standalone-chat__tabActive", "listScroll": "standalone-chat__listScroll", "sectionLabel": "standalone-chat__sectionLabel", "convRow": "standalone-chat__convRow", "convRowActive": "standalone-chat__convRowActive", "avatar": "standalone-chat__avatar", "avatarInitials": "standalone-chat__avatarInitials", "avatarDot": "standalone-chat__avatarDot", "convBody": "standalone-chat__convBody", "convTopLine": "standalone-chat__convTopLine", "convName": "standalone-chat__convName", "convPreview": "standalone-chat__convPreview", "convTime": "standalone-chat__convTime", "fab": "standalone-chat__fab", "sidebarFooter": "standalone-chat__sidebarFooter", "main": "standalone-chat__main", "mainHeader": "standalone-chat__mainHeader", "mainHeaderLeft": "standalone-chat__mainHeaderLeft", "mainTitle": "standalone-chat__mainTitle", "mainStatus": "standalone-chat__mainStatus", "mainActions": "standalone-chat__mainActions", "actionBtn": "standalone-chat__actionBtn", "threadArea": "standalone-chat__threadArea", "emptyMain": "standalone-chat__emptyMain", "inputArea": "standalone-chat__inputArea", "callsEmpty": "standalone-chat__callsEmpty" };
 
 // src/chat/components/ChatInboxSidebar.tsx
 function ChatInboxSidebar({
@@ -2198,7 +2232,7 @@ function ChatInboxSidebar({
       /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.convBody }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.convTopLine }, /* @__PURE__ */ React.createElement("span", { className: standalone_chat_module_default.convName }, name), /* @__PURE__ */ React.createElement("span", { className: standalone_chat_module_default.convTime }, timeStr)), preview ? /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.convPreview }, preview) : null)
     );
   };
-  return /* @__PURE__ */ React.createElement("aside", { className: standalone_chat_module_default.sidebar }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.sidebarHeader }, /* @__PURE__ */ React.createElement("h1", { className: standalone_chat_module_default.sidebarTitle }, "Messages"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("aside", { className: standalone_chat_module_default.sidebar }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.sidebarHeader }, /* @__PURE__ */ React.createElement("h1", { className: standalone_chat_module_default.sidebarTitle }, "Messages"), /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",
@@ -2208,7 +2242,7 @@ function ChatInboxSidebar({
       onClick: () => onRefresh()
     },
     "\u21BB"
-  ), /* @__PURE__ */ React.createElement("button", { type: "button", className: standalone_chat_module_default.iconSquare, "aria-label": "Settings", title: "Settings" }, "\u2699"))), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.searchWrap }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.searchWrap }, /* @__PURE__ */ React.createElement(
     "input",
     {
       type: "search",
@@ -2218,7 +2252,15 @@ function ChatInboxSidebar({
       onChange: (e) => setQ(e.target.value),
       "aria-label": "Search conversations"
     }
-  ), /* @__PURE__ */ React.createElement("span", { className: standalone_chat_module_default.searchIcon }, "\u2315")), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.tabs, role: "tablist" }, tabDefs.map(([id, label]) => /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement("span", { className: standalone_chat_module_default.searchIcon, "aria-hidden": true }, /* @__PURE__ */ React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true }, /* @__PURE__ */ React.createElement("circle", { cx: "11", cy: "11", r: "7", stroke: "currentColor", strokeWidth: "2" }), /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M20 20l-3.5-3.5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    }
+  )))), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.tabs, role: "tablist" }, tabDefs.map(([id, label]) => /* @__PURE__ */ React.createElement(
     "button",
     {
       key: id,
@@ -2236,6 +2278,7 @@ function ChatInboxSidebar({
 function ChatMainColumn({
   selectedId,
   headerTitle,
+  headerInitials,
   headerStatus,
   messages,
   loadMsg,
@@ -2251,7 +2294,7 @@ function ChatMainColumn({
   if (!selectedId) {
     return /* @__PURE__ */ React.createElement("main", { className: standalone_chat_module_default.main }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.emptyMain }, emptyMessage));
   }
-  return /* @__PURE__ */ React.createElement("main", { className: standalone_chat_module_default.main }, /* @__PURE__ */ React.createElement("header", { className: standalone_chat_module_default.mainHeader }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainHeaderLeft }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainAvatar, "aria-hidden": true }), /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0 } }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainTitle }, headerTitle), headerStatus ? /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainStatus }, headerStatus) : null)), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainActions }, callEnabled ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("button", { type: "button", className: standalone_chat_module_default.actionBtn, "aria-label": "Voice call", title: "Voice call" }, "\u{1F4DE}"), /* @__PURE__ */ React.createElement("button", { type: "button", className: standalone_chat_module_default.actionBtn, "aria-label": "Video call", title: "Video call" }, "\u{1F4F9}")) : null, /* @__PURE__ */ React.createElement("button", { type: "button", className: standalone_chat_module_default.actionBtn, "aria-label": "More", title: "More" }, "\u22EE"))), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.threadArea }, loadMsg ? /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.emptyMain }, "Loading\u2026") : /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("main", { className: standalone_chat_module_default.main }, /* @__PURE__ */ React.createElement("header", { className: standalone_chat_module_default.mainHeader }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainHeaderLeft }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.avatar, "aria-hidden": true }, /* @__PURE__ */ React.createElement("span", { className: standalone_chat_module_default.avatarInitials }, headerInitials?.trim() || "?"), /* @__PURE__ */ React.createElement("span", { className: standalone_chat_module_default.avatarDot })), /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0 } }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainTitle }, headerTitle), headerStatus ? /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainStatus }, headerStatus) : null)), callEnabled ? /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainActions }, /* @__PURE__ */ React.createElement("button", { type: "button", className: standalone_chat_module_default.actionBtn, "aria-label": "Voice call", title: "Voice call" }, "\u{1F4DE}"), /* @__PURE__ */ React.createElement("button", { type: "button", className: standalone_chat_module_default.actionBtn, "aria-label": "Video call", title: "Video call" }, "\u{1F4F9}")) : null), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.threadArea }, loadMsg ? /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.emptyMain }, "Loading\u2026") : /* @__PURE__ */ React.createElement(
     MessageThread,
     {
       messages,
@@ -2314,6 +2357,7 @@ function StandaloneChatPage(props) {
   const otherMembers = membersForSelected.filter((m) => m.id !== config.userId);
   const headerTitle = selectedConv ? selectedConv.kind === "direct" ? selectedConv.peer_display_name ?? otherMembers[0]?.display_name ?? convLabel(selectedConv) : convLabel(selectedConv) : "";
   const headerStatus = typingNames.length > 0 ? `${typingNames.join(", ")} typing\u2026` : selectedId ? "online" : "";
+  const headerInitials = headerTitle.trim() ? initials2(headerTitle) : "?";
   return /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.root }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.shell }, /* @__PURE__ */ React.createElement(
     ChatInboxSidebar,
     {
@@ -2336,6 +2380,7 @@ function StandaloneChatPage(props) {
     {
       selectedId: selectedId && selectedConv ? selectedId : null,
       headerTitle,
+      headerInitials,
       headerStatus,
       messages,
       loadMsg,
@@ -2393,6 +2438,6 @@ function ChatConversationView({
   ), showTyping ? /* @__PURE__ */ React.createElement(TypingIndicator, { names: typingNames }) : null), /* @__PURE__ */ React.createElement("div", { className: inputAreaClassName }, /* @__PURE__ */ React.createElement(MessageInput, { conversationId })));
 }
 
-export { ChatAPI, MessageInput as ChatComposer, ChatConversationView, ChatInboxSidebar, ChatMainColumn, ChatPanel, ChatProvider, ChatWidget, ConversationList, INITIAL_MESSAGE_PAGE_SIZE, MessageBubble, MessageInput, MessageThread, NewChatModal, StandaloneChatPage, TypingIndicator, chatKeys, convDisplayName, convLabel, formatConvTime, initials2 as initials, mergeMessagePages, useChat, useChatActions, useChatPanelController, useConversationMembers, useConversations, useMessages, usePresignedUrl, useUpload, useVoiceRecorder };
+export { ChatAPI, MessageInput as ChatComposer, ChatConversationView, ChatInboxSidebar, ChatMainColumn, ChatPanel, ChatProvider, ChatWidget, ConversationList, INITIAL_MESSAGE_PAGE_SIZE, MessageBubble, MessageInput, MessageThread, NewChatModal, StandaloneChatPage, TypingIndicator, chatKeys, convDisplayName, convLabel, formatConvTime, initials2 as initials, mergeMessagePages, normalizeConversationCacheId, useChat, useChatActions, useChatPanelController, useConversationMembers, useConversations, useMessages, usePresignedUrl, useUpload, useVoiceRecorder };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map