@memori.ai/memori-react 8.44.0 → 8.45.0

package/src/helpers/nats/useNatsSession.ts

@@ -11,7 +11,13 @@
 // The cleanup (`consumerMessages.stop()` + `nc.close()`) is essential: without
 // it, every `sessionId` change would leave orphan connections / iterators.
 import { useEffect, useRef, useState, type MutableRefObject } from 'react';
-import { wsconnect, NatsConnection } from '@nats-io/nats-core';
+import {
+  wsconnect,
+  jwtAuthenticator,
+  AuthorizationError,
+  NatsConnection,
+  UserAuthenticationExpiredError,
+} from '@nats-io/nats-core';
 import {
   jetstream,
   DeliverPolicy,
@@ -66,6 +72,24 @@ export type NatsSessionEvent =
 
 type JetStreamConsumeMode = 'live' | 'catch-up';
 
+export interface NatsSessionLifecycle {
+  /** Called after the live subscription is installed. */
+  onConnected?: () => void;
+  /** Called once when this connection is rejected because its JWT expired. */
+  onAuthError?: (error: Error) => void;
+}
+
+export function isNatsAuthError(error: unknown): error is Error {
+  return (
+    error instanceof AuthorizationError ||
+    error instanceof UserAuthenticationExpiredError ||
+    (error instanceof Error &&
+      /authorization violation|authentication expired|user authentication expired/i.test(
+        error.message
+      ))
+  );
+}
+
 function readString(
   raw: Record<string, unknown>,
   camelKey: string,
@@ -107,7 +131,9 @@ function unwrapDialogState(value: unknown): unknown {
 /**
  * Normalizes raw NATS payloads (snake_case or camelCase) into typed events.
  */
-export function normalizeNatsEvent(raw: Record<string, unknown>): NatsSessionEvent {
+export function normalizeNatsEvent(
+  raw: Record<string, unknown>
+): NatsSessionEvent {
   const eventType = (readString(raw, 'eventType', 'event_type') ??
     'unknown') as NatsSessionEvent['eventType'];
 
@@ -130,8 +156,7 @@ export function normalizeNatsEvent(raw: Record<string, unknown>): NatsSessionEve
   if (eventType === 'dialog_text_entered_response') {
     return {
       eventType: 'dialog_text_entered_response',
-      requestID:
-        typeof raw.requestID === 'string' ? raw.requestID : undefined,
+      requestID: typeof raw.requestID === 'string' ? raw.requestID : undefined,
       resultCode:
         typeof raw.resultCode === 'number' ? raw.resultCode : undefined,
       resultMessage:
@@ -144,7 +169,10 @@ export function normalizeNatsEvent(raw: Record<string, unknown>): NatsSessionEve
   if (eventType === 'error') {
     return {
       eventType: 'error',
-      errorCode: (raw.errorCode ?? raw.error_code) as string | number | undefined,
+      errorCode: (raw.errorCode ?? raw.error_code) as
+        | string
+        | number
+        | undefined,
       errorMessage: readString(raw, 'errorMessage', 'error_message'),
       backtrace: typeof raw.backtrace === 'string' ? raw.backtrace : undefined,
       correlationID,
@@ -174,10 +202,12 @@ function decodeMessage(
 async function consumeCoreSubscription(
   nc: NatsConnection,
   subject: string,
-  onMessage: (event: NatsSessionEvent) => void
+  onMessage: (event: NatsSessionEvent) => void,
+  onReady: () => void
 ) {
   const sub = nc.subscribe(subject);
   console.info('[NATS] subscribed to subject', subject);
+  onReady();
   let received = 0;
   for await (const msg of sub) {
     received += 1;
@@ -203,7 +233,8 @@ async function consumeJetStream(
   subject: string,
   mode: JetStreamConsumeMode,
   onMessage: (event: NatsSessionEvent) => void,
-  setConsumerMessages: (messages: ConsumerMessages) => void
+  setConsumerMessages: (messages: ConsumerMessages) => void,
+  onReady: () => void
 ) {
   const js = jetstream(nc);
   const consumer = config.consumer
@@ -225,6 +256,7 @@ async function consumeJetStream(
 
   const messages = await consumer.consume();
   setConsumerMessages(messages);
+  onReady();
   let received = 0;
   for await (const msg of messages) {
     received += 1;
@@ -258,17 +290,19 @@ function closeNatsSession(
  * change.
  *
  * @param sessionId Current session UUID (subscription is skipped when falsy).
- * @param config Connection config from `/api/nats` (url + token required).
+ * @param config Connection config from `/api/nats` (url + per-session JWT).
  * @param onMessage Callback invoked for each decoded event.
  */
 export function useNatsSession(
   sessionId: string | undefined,
   config: NatsConfig | undefined,
-  onMessage: (event: NatsSessionEvent) => void
+  onMessage: (event: NatsSessionEvent) => void,
+  lifecycle: NatsSessionLifecycle = {}
 ) {
   const connRef = useRef<NatsConnection | null>(null);
   const consumerMessagesRef = useRef<ConsumerMessages | null>(null);
   const onMessageRef = useRef(onMessage);
+  const lifecycleRef = useRef(lifecycle);
   const wasHiddenRef = useRef(false);
   const [resumeGeneration, setResumeGeneration] = useState(0);
 
@@ -277,6 +311,10 @@ export function useNatsSession(
     onMessageRef.current = onMessage;
   }, [onMessage]);
 
+  useEffect(() => {
+    lifecycleRef.current = lifecycle;
+  }, [lifecycle]);
+
   // Reconnect when the tab returns from background or the network comes back.
   useEffect(() => {
     if (!sessionId || !config?.stream) {
@@ -348,7 +386,7 @@ export function useNatsSession(
       );
       const nc = await wsconnect({
         servers: [config.url],
-        token: config.token,
+        authenticator: jwtAuthenticator(config.token),
       });
       if (closed) {
         console.debug(
@@ -363,6 +401,28 @@ export function useNatsSession(
       const dispatch = (event: NatsSessionEvent) => {
         onMessageRef.current(event);
       };
+      const ready = () => lifecycleRef.current.onConnected?.();
+      let authRefreshRequested = false;
+      const requestAuthRefresh = (error: Error) => {
+        if (closed || authRefreshRequested) return;
+        authRefreshRequested = true;
+        lifecycleRef.current.onAuthError?.(error);
+      };
+
+      void (async () => {
+        for await (const status of nc.status()) {
+          if (status.type === 'error' && isNatsAuthError(status.error)) {
+            requestAuthRefresh(status.error);
+            return;
+          }
+        }
+      })();
+
+      void nc.closed().then(error => {
+        if (error && isNatsAuthError(error)) {
+          requestAuthRefresh(error);
+        }
+      });
 
       if (useJetStream) {
         await consumeJetStream(
@@ -373,12 +433,18 @@ export function useNatsSession(
           dispatch,
           messages => {
             consumerMessagesRef.current = messages;
-          }
+          },
+          ready
         );
       } else {
-        await consumeCoreSubscription(nc, subject, dispatch);
+        await consumeCoreSubscription(nc, subject, dispatch, ready);
+      }
+    })().catch(err => {
+      console.error('[NATS] connection error', err);
+      if (!closed && isNatsAuthError(err)) {
+        lifecycleRef.current.onAuthError?.(err);
       }
-    })().catch(err => console.error('[NATS] connection error', err));
+    });
 
     return () => {
       console.info('[NATS] cleanup: closing connection for subject', subject);

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '8.44.0';
+export const version = '8.45.0';

package/dist/components/ChatHistoryDrawer/ChatResumeDrawer.css

@@ -1,372 +0,0 @@
-.memori-chat-resume-drawer {
-    position: fixed;
-    z-index: 1200;
-    inset: 0;
-    pointer-events: none;
-}
-
-.memori-chat-resume-drawer--backdrop {
-    position: absolute;
-    border: 0;
-    background: rgba(0, 0, 0, 0);
-    cursor: default;
-    inset: 0;
-    opacity: 0;
-    transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1);
-}
-
-.memori-chat-resume-drawer--panel {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    width: min(100%, 430px);
-    height: 100%;
-    flex-direction: column;
-    /* background: var(--memori-main-background); */
-    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.16);
-    transform: translateX(100%);
-    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
-}
-
-.memori-chat-resume-drawer--embedded-shell {
-    display: flex;
-    height: 100%;
-    min-height: 0;
-    flex: 1;
-}
-
-.memori-chat-resume-drawer--panel-embedded {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    box-shadow: none;
-    transform: none;
-}
-
-.memori-chat-resume-drawer--open {
-    pointer-events: auto;
-}
-
-.memori-chat-resume-drawer--open .memori-chat-resume-drawer--backdrop {
-    opacity: 0.4;
-}
-
-.memori-chat-resume-drawer--open .memori-chat-resume-drawer--panel {
-    transform: translateX(0);
-}
-
-.memori-chat-resume-drawer--header {
-    display: flex;
-    align-items: center;
-    padding: 14px 16px 12px;
-    gap: 8px;
-}
-
-@media (max-width: 768px) {
-    .memori-chat-resume-drawer--header {
-        border-bottom: 0.5px solid var(--color-border-tertiary, var(--memori-border-color, #e5e7eb));
-    }
-}
-
-.memori-chat-resume-drawer--header-icon-button {
-    display: inline-flex;
-    width: 28px;
-    min-width: 28px;
-    height: 28px;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: none;
-    border-radius: 999px;
-    background: transparent;
-    color: var(--color-text-primary, var(--memori-text-color));
-    cursor: pointer;
-}
-
-.memori-chat-resume-drawer--header-main {
-    min-width: 0;
-    flex: 1;
-}
-
-.memori-chat-resume-drawer--title {
-    overflow: hidden;
-    margin: 0;
-    color: var(--color-text-primary, var(--memori-text-color));
-    font-size: 15px;
-    font-weight: 500;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori-chat-resume-drawer--subtitle {
-    overflow: hidden;
-    margin: 2px 0 0;
-    color: color-mix(in oklch, var(--memori-text-color) 66%, transparent);
-    font-size: 12px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori-chat-resume-drawer--summary-banner {
-    display: flex;
-    align-items: flex-start;
-    padding: 10px 12px;
-    border: 1px solid var(--color-border-tertiary, var(--memori-border-color, #e5e7eb));
-    border-radius: 8px;
-    margin: 12px 16px 0;
-    background: var(--color-background-secondary, var(--memori-secondary-background));
-    gap: 8px;
-}
-
-.memori-chat-resume-drawer--summary-icon {
-    margin-top: 1px;
-    color: color-mix(in oklch, var(--memori-text-color) 68%, transparent);
-}
-
-.memori-chat-resume-drawer--summary-title {
-    margin: 0 0 2px;
-    color: var(--color-text-primary, var(--memori-text-color));
-    font-size: 14px;
-    font-weight: 600;
-}
-
-.memori-chat-resume-drawer--summary-text {
-    margin: 0;
-    color: color-mix(in oklch, var(--memori-text-color) 72%, transparent);
-    font-size: 14px;
-    line-height: 1.35;
-}
-
-.memori-chat-resume-drawer--thread {
-    display: flex;
-    overflow: hidden;
-    min-height: 0;
-    flex: 1;
-    flex-direction: column;
-    padding: var(--memori-spacing-lg);
-}
-
-.memori-chat-resume-drawer--embedded-chat {
-    min-height: 0;
-    flex: 1;
-}
-
-.memori-chat-resume-drawer--embedded-chat .memori-chat--wrapper {
-    height: 100%;
-}
-
-.memori-chat-resume-drawer--embedded-chat .memori-chat--history {
-    height: 100%;
-    border-radius: 0;
-    margin: 0;
-    background: transparent;
-}
-
-.memori-chat-resume-drawer--embedded-chat .memori-chat--content {
-    padding: 0;
-}
-
-.memori-chat-resume-drawer--embedded-chat .memori-chat--cover {
-    display: none;
-}
-
-.memori-chat-resume-drawer--embedded-chat .memori-chat--bubble-container {
-    padding-right: var(--memori-spacing-md);
-    padding-left: 0;
-}
-
-.memori-chat-resume-drawer--embedded-chat .memori-chat--bubble-message-row {
-    align-items: flex-start;
-}
-
-/* .memori-chat-resume-drawer--embedded-chat .memori-chat--bubble-container,
-.memori-chat-resume-drawer--embedded-chat .memori-chat--timestamp,
-.memori-chat-resume-drawer--embedded-chat .memori-media-widget,
-.memori-chat-resume-drawer--embedded-chat .memori-chat--bubble-shell {
-    padding-right: 0;
-    padding-left: 0;
-    /* margin-top: var(--memori-spacing-sm); 
-} */
-
-.memori-chat-resume-drawer--message-group {
-    display: flex;
-    width: 100%;
-    gap: 8px;
-}
-
-.memori-chat-resume-drawer--message-group-assistant {
-    justify-content: flex-start;
-}
-
-.memori-chat-resume-drawer--message-group-user {
-    justify-content: flex-end;
-}
-
-.memori-chat-resume-drawer--avatar {
-    display: inline-flex;
-    width: 28px;
-    min-width: 28px;
-    height: 28px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 999px;
-    background: linear-gradient(135deg, #b5a2ff 0%, #8b72ff 100%);
-    color: #fff;
-    font-size: 11px;
-    font-weight: 600;
-}
-
-.memori-chat-resume-drawer--message-content {
-    display: flex;
-    max-width: 82%;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.memori-chat-resume-drawer--message-group-user .memori-chat-resume-drawer--message-content {
-    align-items: flex-end;
-}
-
-.memori-chat-resume-drawer--timestamp {
-    color: color-mix(in oklch, var(--memori-text-color) 64%, transparent);
-    font-size: 12px;
-    line-height: 1;
-}
-
-.memori-chat-resume-drawer--attachment-pill {
-    display: flex;
-    align-items: center;
-    padding: 8px 10px;
-    border: 1px solid var(--color-border-tertiary, var(--memori-border-color, #e5e7eb));
-    border-radius: 8px;
-    background: var(--color-background-secondary, var(--memori-secondary-background));
-    gap: 8px;
-}
-
-.memori-chat-resume-drawer--attachment-ext {
-    display: inline-flex;
-    min-width: 34px;
-    align-items: center;
-    justify-content: center;
-    padding: 4px 8px;
-    border-radius: 6px;
-    background: #d9e8ff;
-    color: #2f5fa8;
-    font-size: 11px;
-    font-weight: 600;
-}
-
-.memori-chat-resume-drawer--attachment-meta {
-    display: flex;
-    min-width: 0;
-    flex-direction: column;
-}
-
-.memori-chat-resume-drawer--attachment-name {
-    overflow: hidden;
-    color: var(--color-text-primary, var(--memori-text-color));
-    font-size: 13px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori-chat-resume-drawer--attachment-info {
-    color: color-mix(in oklch, var(--memori-text-color) 70%, transparent);
-    font-size: 12px;
-}
-
-.memori-chat-resume-drawer--bubble {
-    padding: 10px 12px;
-    color: var(--color-text-primary, var(--memori-text-color));
-    font-size: 14px;
-    line-height: 1.4;
-    white-space: pre-wrap;
-}
-
-.memori-chat-resume-drawer--bubble-assistant {
-    border: 0.5px solid var(--color-border-tertiary, var(--memori-border-color, #e5e7eb));
-    border-radius: 4px 12px 12px 12px;
-    background: var(--color-background-secondary, var(--memori-secondary-background));
-}
-
-.memori-chat-resume-drawer--bubble-user {
-    border-radius: 12px 4px 12px 12px;
-    background: var(--memori-primary);
-    color: #fff;
-}
-
-.memori-chat-resume-drawer--interrupted {
-    display: inline-flex;
-    align-items: center;
-    color: color-mix(in oklch, var(--memori-text-color) 72%, transparent);
-    font-size: 14px;
-    gap: 6px;
-}
-
-.memori-chat-resume-drawer--actions {
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    padding: 16px 24px;
-    margin-bottom: 1rem;
-    /* border-top: 0.5px solid var(--color-border-tertiary, var(--memori-border-color, #e5e7eb)); */
-    /* background: var(--memori-main-background); */
-    gap: 12px;
-}
-
-.memori-chat-history-drawer--header-download-button {
-    display: flex;
-    align-self: baseline;
-}
-
-.memori-chat-resume-drawer--chips-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.memori-chat-resume-drawer--chip {
-    min-height: 32px;
-    padding: 0 14px;
-    border: 0.5px solid color-mix(in oklch, var(--memori-text-color) 20%, transparent);
-    border-radius: 20px;
-    background: transparent;
-    color: color-mix(in oklch, var(--memori-text-color) 85%, transparent);
-    cursor: pointer;
-    font-size: 12px;
-    font-weight: 500;
-}
-
-.memori-chat-resume-drawer--resume-cta {
-    width: 100%;
-    min-height: 44px;
-    border-radius: 10px;
-    font-size: 14px;
-    font-weight: 500;
-}
-
-.memori-chat-resume-drawer--skeletons {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.memori-chat-resume-drawer--skeleton-bubble {
-    width: 72%;
-    height: 54px;
-    border-radius: 12px;
-    animation: memori-chat-resume-shimmer 1.2s infinite;
-    background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 100%);
-    background-size: 200% 100%;
-}
-
-@keyframes memori-chat-resume-shimmer {
-    from {
-        background-position: 200% 0;
-    }
-
-    to {
-        background-position: -200% 0;
-    }
-}

package/dist/components/DrawerFooter/DrawerFooter.css

@@ -1,62 +0,0 @@
-.memori-drawer-footer {
-  flex-shrink: 0;
-  padding: var(--memori-spacing-md);
-  border-top: 1px solid var(--memori-border-color, #e5e7eb);
-  box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.06), 0 -2px 8px -2px rgba(0, 0, 0, 0.03);
-}
-
-.memori-drawer-footer__inner {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--memori-spacing-lg);
-}
-
-.memori-drawer-footer__start {
-  display: flex;
-  align-items: center;
-  gap: var(--memori-spacing-md);
-}
-
-.memori-drawer-footer__end {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-left: auto;
-  gap: var(--memori-spacing-md);
-}
-
-.memori-drawer-footer__end .memori-button {
-  min-height: 44px;
-  padding: 10px var(--memori-spacing-lg);
-  border-radius: 10px;
-  font-weight: 500;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
-}
-
-.memori-drawer-footer__end .memori-button:hover:not([disabled]) {
-  transform: translateY(-1px);
-}
-
-.memori-drawer-footer__inner--centered {
-  justify-content: center;
-}
-
-@media (max-width: 768px) {
-  .memori-drawer-footer {
-    padding: var(--memori-spacing-md) var(--memori-spacing-lg);
-  }
-
-  .memori-drawer-footer__inner {
-    flex-direction: column;
-    align-items: stretch;
-    gap: var(--memori-spacing-md);
-  }
-
-  .memori-drawer-footer__end {
-    justify-content: flex-end;
-    margin-left: 0;
-  }
-}