@anakin824/prdg-chat-ui 0.2.1 → 0.3.0

package/dist/index.mjs

@@ -324,18 +324,51 @@ function ChatNatsBridge({ natsWsUrl, natsToken, onConnectedChange }) {
 
 // src/chat/provider/ChatProvider.tsx
 var defaultTheme = {
-  primary: "#0a84ff",
-  bubbleSent: "#0a84ff",
-  bubbleReceived: "#2c2c2e",
+  primary: "#7c3aed",
+  bubbleSent: "#7c3aed",
+  bubbleReceived: "#e5e7eb",
   textOnSent: "#ffffff",
-  textOnReceived: "#f5f5f7",
-  radius: "18px",
+  textOnReceived: "#111827",
+  radius: "12px",
   fontFamily: "system-ui, -apple-system, sans-serif",
-  surface: "#1c1c1e",
-  border: "#3a3a3c",
-  mutedFill: "rgba(0, 0, 0, 0.2)",
-  composerShadow: "0 2px 16px rgba(0, 0, 0, 0.38)"
+  surface: "#ffffff",
+  border: "#e5e7eb",
+  mutedFill: "rgba(17, 24, 39, 0.06)",
+  composerShadow: "0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.06)"
 };
+var THEME_TO_CSS_VAR = {
+  primary: "--chat-primary",
+  bubbleSent: "--chat-bubble-sent",
+  bubbleReceived: "--chat-bubble-received",
+  textOnSent: "--chat-text-on-sent",
+  textOnReceived: "--chat-text-on-received",
+  surface: "--chat-surface",
+  border: "--chat-border",
+  mutedFill: "--chat-muted-fill",
+  composerShadow: "--chat-composer-shadow"
+};
+function buildThemeColorOverrideCss(themeOverride) {
+  if (!themeOverride) return "";
+  const parts = [];
+  Object.keys(THEME_TO_CSS_VAR).forEach((k) => {
+    const v = themeOverride[k];
+    const cssName = THEME_TO_CSS_VAR[k];
+    if (cssName && typeof v === "string" && v.trim() !== "") {
+      parts.push(`${cssName}: ${v};`);
+    }
+  });
+  if (parts.length === 0) return "";
+  const body = parts.join(" ");
+  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,
@@ -350,9 +383,12 @@ function ChatProvider({
   natsWsUrl,
   natsToken,
   debug: debugProp,
+  userIdentityMode = "external",
+  appearance = "auto",
   children
 }) {
   const debug = resolveChatDebug(debugProp);
+  const externalIdentity = userIdentityMode === "external";
   const queryClient = useMemo(
     () => new QueryClient({
       defaultOptions: {
@@ -375,7 +411,9 @@ function ChatProvider({
     () => new ChatAPI(apiUrl.replace(/\/$/, ""), () => tokenRef.current, handleAuthError),
     [apiUrl, handleAuthError]
   );
-  const [resolvedUserId, setResolvedUserId] = useState(userIdProp ?? null);
+  const [resolvedUserId, setResolvedUserId] = useState(
+    () => externalIdentity ? null : userIdProp ?? null
+  );
   const [resolvedTenantId, setResolvedTenantId] = useState(tenantIdProp ?? null);
   const [resolvedConduitlyTenantId, setResolvedConduitlyTenantId] = useState(
     conduitlyTenantIdProp
@@ -385,17 +423,23 @@ function ChatProvider({
     chatDebugLog(debug, "ChatProvider: session inputs", {
       apiUrl: apiUrl.replace(/\/$/, ""),
       hasToken: Boolean(token?.trim?.()),
+      userIdentityMode,
       userIdProp: userIdProp ?? null,
       tenantIdProp: tenantIdProp ?? null,
       conduitlyTenantIdProp: conduitlyTenantIdProp ?? null
     });
-  }, [debug, apiUrl, token, userIdProp, tenantIdProp, conduitlyTenantIdProp]);
+  }, [debug, apiUrl, token, userIdentityMode, userIdProp, tenantIdProp, conduitlyTenantIdProp]);
   useEffect(() => {
     setMeError(null);
-    if (userIdProp) setResolvedUserId(userIdProp);
-    if (tenantIdProp) setResolvedTenantId(tenantIdProp);
     if (conduitlyTenantIdProp) setResolvedConduitlyTenantId(conduitlyTenantIdProp);
-    if (userIdProp && tenantIdProp) {
+    if (!externalIdentity) {
+      if (userIdProp) setResolvedUserId(userIdProp);
+      if (tenantIdProp) setResolvedTenantId(tenantIdProp);
+    } else {
+      if (tenantIdProp) setResolvedTenantId(tenantIdProp);
+    }
+    const skipMe = !externalIdentity && Boolean(userIdProp && tenantIdProp);
+    if (skipMe) {
       chatDebugLog(debug, "identity: using userId + tenantId props (skipping GET /me)", {
         userId: userIdProp,
         tenantId: tenantIdProp
@@ -403,6 +447,8 @@ function ChatProvider({
       return;
     }
     chatDebugLog(debug, "identity: fetching GET /me \u2026", {
+      userIdentityMode,
+      externalIdentity,
       missingUserId: !userIdProp,
       missingTenantId: !tenantIdProp
     });
@@ -416,8 +462,22 @@ function ChatProvider({
         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 (externalIdentity) {
+        setResolvedUserId(me.id);
+        if (!tenantIdProp) setResolvedTenantId(me.tenant_id);
+        const ext = me.ext_user_id?.trim();
+        const passed = userIdProp?.trim();
+        if (passed && ext && passed.toLowerCase() !== ext.toLowerCase()) {
+          chatDebugWarn(
+            debug,
+            "userIdentityMode=external: `userId` prop does not match GET /me ext_user_id (using JWT user from /me)",
+            { userIdProp: passed, me_ext_user_id: ext, internal_id: me.id }
+          );
+        }
+      } else {
+        if (!userIdProp) setResolvedUserId(me.id);
+        if (!tenantIdProp) setResolvedTenantId(me.tenant_id);
+      }
       if (!conduitlyTenantIdProp && me.conduitly_tenant_id) {
         setResolvedConduitlyTenantId(me.conduitly_tenant_id);
       }
@@ -428,26 +488,19 @@ function ChatProvider({
     return () => {
       cancelled = true;
     };
-  }, [api, token, userIdProp, tenantIdProp, conduitlyTenantIdProp, debug]);
+  }, [api, token, userIdProp, tenantIdProp, conduitlyTenantIdProp, debug, externalIdentity, userIdentityMode]);
   const userId = resolvedUserId ?? "";
   const tenantId = resolvedTenantId ?? "";
   const mergedTheme = useMemo(() => ({ ...defaultTheme, ...theme }), [theme]);
   const styleTag = useMemo(() => {
     const t = mergedTheme;
-    return `[data-chat-root] {
-      --chat-primary: ${t.primary};
-      --chat-bubble-sent: ${t.bubbleSent};
-      --chat-bubble-received: ${t.bubbleReceived};
-      --chat-text-on-sent: ${t.textOnSent};
-      --chat-text-on-received: ${t.textOnReceived};
+    let css = `[data-chat-root] {
       --chat-radius: ${t.radius};
       --chat-font-family: ${t.fontFamily};
-      --chat-surface: ${t.surface};
-      --chat-border: ${t.border};
-      --chat-muted-fill: ${t.mutedFill};
-      ${t.composerShadow ? `--chat-composer-shadow: ${t.composerShadow};` : ""}
     }`;
-  }, [mergedTheme]);
+    css += buildThemeColorOverrideCss(theme);
+    return css;
+  }, [mergedTheme, theme]);
   const [natsConnected, setNatsConnected] = useState(false);
   const natsUrl = natsWsUrl?.trim() ?? "";
   const wsConnected = Boolean(natsUrl) && natsConnected;
@@ -532,7 +585,15 @@ function ChatProvider({
     }
     return null;
   }
-  return /* @__PURE__ */ React.createElement(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))));
+  return /* @__PURE__ */ React.createElement(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,
+      "data-chat-appearance": appearance === "auto" ? void 0 : appearance,
+      style: { ...layoutStyle, flex: 1 }
+    },
+    children
+  ))));
 }
 function useChatActions() {
   const { api } = useChat();