@athenaintel/react 0.4.5 → 0.4.6

package/dist/index.d.ts

@@ -464,6 +464,9 @@ export declare function useParentAuth(): string | null;
 /** Hook to access thread list state and actions. */
 export declare function useThreadList(): ThreadListState & ThreadListActions;
 
+/** Returns true while a thread switch is loading messages. */
+export declare function useThreadLoading(): boolean;
+
 export declare type ViewMode = 'tabs' | 'tiled';
 
 export declare const WebSearchToolUI: ToolCallMessagePartComponent;

package/dist/index.js

@@ -24140,6 +24140,10 @@ function useThreadListStore() {
   }
   return store;
 }
+const ThreadLoadingContext = createContext(false);
+function useThreadLoading() {
+  return useContext(ThreadLoadingContext);
+}
 function getAuthHeaders(auth) {
   if (auth.token) {
     return { Authorization: `Bearer ${auth.token}` };
@@ -24207,7 +24211,7 @@ async function archiveThread(backendUrl, auth, threadId) {
 }
 function createThreadListStore(config2) {
   const auth = { apiKey: config2.apiKey, token: config2.token };
-  return create((set2, get2) => ({
+  const store = create((set2, get2) => ({
     threads: [],
     activeThreadId: null,
     isLoading: false,
@@ -24250,6 +24254,8 @@ function createThreadListStore(config2) {
       }
     }
   }));
+  store.getState().fetchThreads();
+  return store;
 }
 function AthenaRuntimeInner({
   children,
@@ -24291,103 +24297,6 @@ function AthenaRuntimeInner({
   );
   return /* @__PURE__ */ jsx(AssistantRuntimeProvider, { aui, runtime, children: /* @__PURE__ */ jsx(AthenaContext.Provider, { value: athenaConfig, children: /* @__PURE__ */ jsx(TooltipProvider, { children }) }) });
 }
-function ThreadStateLoader({
-  children,
-  threadId,
-  backendUrl,
-  apiKey,
-  token,
-  ...runtimeProps
-}) {
-  const [loadedMessages, setLoadedMessages] = useState(void 0);
-  const [loadState, setLoadState] = useState(threadId ? "loading" : "done");
-  const [showSpinner, setShowSpinner] = useState(false);
-  useEffect(() => {
-    if (!threadId) {
-      setLoadedMessages(void 0);
-      setLoadState("done");
-      return;
-    }
-    let cancelled = false;
-    setLoadState("loading");
-    setShowSpinner(false);
-    const spinnerTimer = setTimeout(() => {
-      if (!cancelled) setShowSpinner(true);
-    }, 200);
-    getThreadState(backendUrl, { apiKey, token }, threadId).then((state) => {
-      var _a2;
-      if (cancelled) return;
-      if (process.env.NODE_ENV !== "production") {
-        console.log("[AthenaThreads] Loaded thread state", {
-          threadId,
-          messageCount: ((_a2 = state.messages) == null ? void 0 : _a2.length) ?? 0
-        });
-      }
-      setLoadedMessages(state.messages ?? []);
-      setLoadState("done");
-    }).catch((err) => {
-      if (cancelled) return;
-      if (process.env.NODE_ENV !== "production") {
-        console.warn("[AthenaThreads] Failed to load thread state, starting fresh", err);
-      }
-      setLoadedMessages(void 0);
-      setLoadState("done");
-    });
-    return () => {
-      cancelled = true;
-      clearTimeout(spinnerTimer);
-    };
-  }, [threadId, backendUrl, apiKey, token]);
-  if (loadState === "loading") {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100%",
-          width: "100%",
-          background: "var(--background, #fff)",
-          color: "var(--muted-foreground, #888)",
-          gap: 8,
-          opacity: showSpinner ? 1 : 0,
-          transition: "opacity 0.15s ease-in"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                width: 20,
-                height: 20,
-                border: "2px solid var(--border, #e5e5e5)",
-                borderTopColor: "var(--primary, #2563eb)",
-                borderRadius: "50%",
-                animation: "aui-spin 0.6s linear infinite"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { style: { fontSize: 13 }, children: "Loading conversation…" }),
-          /* @__PURE__ */ jsx("style", { children: `@keyframes aui-spin { to { transform: rotate(360deg); } }` })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    AthenaRuntimeInner,
-    {
-      threadId,
-      backendUrl,
-      apiKey,
-      token,
-      initialMessages: loadedMessages,
-      ...runtimeProps,
-      children
-    }
-  );
-}
 function useActiveThreadFromStore(store) {
   return useSyncExternalStore(
     (cb) => {
@@ -24441,19 +24350,51 @@ function AthenaProvider({
   const activeThreadId = useActiveThreadFromStore(
     enableThreadList ? threadListStoreRef.current : null
   );
-  const resolvedThreadId = threadIdProp ?? activeThreadId ?? void 0;
+  const [displayedThreadId, setDisplayedThreadId] = useState(null);
+  const [loadedMessages, setLoadedMessages] = useState(void 0);
+  const [isLoadingThread, setIsLoadingThread] = useState(false);
   useEffect(() => {
-    if (process.env.NODE_ENV !== "production") {
-      console.log("[AthenaThreads] AthenaProvider render", {
-        activeThreadId,
-        resolvedThreadId,
-        enableThreadList,
-        hasStore: !!threadListStoreRef.current
-      });
+    var _a2;
+    if (!enableThreadList) return;
+    if (activeThreadId === displayedThreadId) return;
+    const threads = ((_a2 = threadListStoreRef.current) == null ? void 0 : _a2.getState().threads) ?? [];
+    const isExistingThread = threads.some((t) => t.thread_id === activeThreadId);
+    if (!isExistingThread) {
+      setLoadedMessages(void 0);
+      setDisplayedThreadId(activeThreadId);
+      setIsLoadingThread(false);
+      return;
     }
-  }, [activeThreadId, resolvedThreadId, enableThreadList]);
-  const inner = /* @__PURE__ */ jsx(
-    ThreadStateLoader,
+    let cancelled = false;
+    setIsLoadingThread(true);
+    getThreadState(effectiveBackendUrl, { apiKey, token: effectiveToken }, activeThreadId).then((state) => {
+      var _a3;
+      if (cancelled) return;
+      if (process.env.NODE_ENV !== "production") {
+        console.log("[AthenaThreads] Loaded thread state", {
+          threadId: activeThreadId,
+          messageCount: ((_a3 = state.messages) == null ? void 0 : _a3.length) ?? 0
+        });
+      }
+      setLoadedMessages(state.messages ?? []);
+      setDisplayedThreadId(activeThreadId);
+      setIsLoadingThread(false);
+    }).catch((err) => {
+      if (cancelled) return;
+      if (process.env.NODE_ENV !== "production") {
+        console.warn("[AthenaThreads] Failed to load thread state, starting fresh", err);
+      }
+      setLoadedMessages(void 0);
+      setDisplayedThreadId(activeThreadId);
+      setIsLoadingThread(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeThreadId, displayedThreadId, enableThreadList, effectiveBackendUrl, apiKey, effectiveToken]);
+  const resolvedThreadId = threadIdProp ?? displayedThreadId ?? void 0;
+  const inner = /* @__PURE__ */ jsx(ThreadLoadingContext.Provider, { value: isLoadingThread, children: /* @__PURE__ */ jsx(
+    AthenaRuntimeInner,
     {
       apiUrl,
       backendUrl: effectiveBackendUrl,
@@ -24468,10 +24409,11 @@ function AthenaProvider({
       knowledgeBase,
       systemPrompt,
       threadId: resolvedThreadId,
+      initialMessages: loadedMessages,
       children
     },
     resolvedThreadId ?? "__new__"
-  );
+  ) });
   if (enableThreadList && threadListStoreRef.current) {
     return /* @__PURE__ */ jsx(ThreadListContext.Provider, { value: threadListStoreRef.current, children: inner });
   }
@@ -62357,6 +62299,7 @@ const AthenaChat = ({
   toolUIs,
   mentionTools
 }) => {
+  const isLoadingThread = useThreadLoading();
   const tools = mentionTools ?? EMPTY_MENTION_TOOLS;
   const mergedToolUIs = useMemo(() => ({
     append_markdown_to_athena_document: AppendDocumentToolUI,
@@ -62368,40 +62311,43 @@ const AthenaChat = ({
     () => () => /* @__PURE__ */ jsx(AssistantMessage, { toolUIs: mergedToolUIs }),
     [mergedToolUIs]
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     ThreadPrimitiveRoot,
     {
       className: `aui-root aui-thread-root @container flex h-full flex-col bg-background ${className ?? ""}`,
-      style: { ["--thread-max-width"]: maxWidth },
-      children: /* @__PURE__ */ jsxs(
-        ThreadPrimitiveViewport,
-        {
-          turnAnchor: "top",
-          className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4",
-          children: [
-            /* @__PURE__ */ jsx(AuiIf, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ jsx("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: /* @__PURE__ */ jsx("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-4", children: [
-              /* @__PURE__ */ jsx("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200", children: welcomeMessage }),
-              /* @__PURE__ */ jsx("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground text-xl delay-75 duration-200", children: welcomeSubtext })
-            ] }) }) }) }),
-            /* @__PURE__ */ jsx(
-              ThreadPrimitiveMessages,
-              {
-                components: {
-                  UserMessage,
-                  AssistantMessage: AssistantMessageComponent
+      style: { ["--thread-max-width"]: maxWidth, position: "relative" },
+      children: [
+        isLoadingThread && /* @__PURE__ */ jsx(ThreadLoadingOverlay, {}),
+        /* @__PURE__ */ jsxs(
+          ThreadPrimitiveViewport,
+          {
+            turnAnchor: "top",
+            className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4",
+            children: [
+              /* @__PURE__ */ jsx(AuiIf, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ jsx("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: /* @__PURE__ */ jsx("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-4", children: [
+                /* @__PURE__ */ jsx("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200", children: welcomeMessage }),
+                /* @__PURE__ */ jsx("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground text-xl delay-75 duration-200", children: welcomeSubtext })
+              ] }) }) }) }),
+              /* @__PURE__ */ jsx(
+                ThreadPrimitiveMessages,
+                {
+                  components: {
+                    UserMessage,
+                    AssistantMessage: AssistantMessageComponent
+                  }
                 }
-              }
-            ),
-            /* @__PURE__ */ jsxs(ThreadPrimitiveViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6", children: [
-              /* @__PURE__ */ jsx(ThreadScrollToBottom, {}),
-              /* @__PURE__ */ jsxs(ComposerPrimitiveRoot, { className: "aui-composer-root relative flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20", children: [
-                /* @__PURE__ */ jsx(TiptapComposer, { tools }),
-                /* @__PURE__ */ jsx(ComposerAction, {})
+              ),
+              /* @__PURE__ */ jsxs(ThreadPrimitiveViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6", children: [
+                /* @__PURE__ */ jsx(ThreadScrollToBottom, {}),
+                /* @__PURE__ */ jsxs(ComposerPrimitiveRoot, { className: "aui-composer-root relative flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20", children: [
+                  /* @__PURE__ */ jsx(TiptapComposer, { tools }),
+                  /* @__PURE__ */ jsx(ComposerAction, {})
+                ] })
               ] })
-            ] })
-          ]
-        }
-      )
+            ]
+          }
+        )
+      ]
     }
   );
 };
@@ -62509,6 +62455,57 @@ const AssistantActionBar = () => /* @__PURE__ */ jsxs(
     ]
   }
 );
+const ThreadLoadingOverlay = () => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: "aui-thread-loading-overlay",
+    style: {
+      position: "absolute",
+      inset: 0,
+      zIndex: 50,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 12,
+      background: "color-mix(in srgb, var(--background, #fff) 80%, transparent)",
+      backdropFilter: "blur(4px)",
+      WebkitBackdropFilter: "blur(4px)",
+      animation: "aui-overlay-in 0.2s ease-out"
+    },
+    children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: 28,
+            height: 28,
+            border: "2.5px solid var(--border, #e5e5e5)",
+            borderTopColor: "var(--primary, #2563eb)",
+            borderRadius: "50%",
+            animation: "aui-spin 0.7s linear infinite"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            fontSize: 13,
+            fontWeight: 500,
+            color: "var(--muted-foreground, #888)",
+            letterSpacing: "0.01em"
+          },
+          children: "Loading conversation…"
+        }
+      ),
+      /* @__PURE__ */ jsx("style", { children: `
+      @keyframes aui-spin { to { transform: rotate(360deg); } }
+      @keyframes aui-overlay-in { from { opacity: 0; } to { opacity: 1; } }
+    ` })
+    ]
+  }
+);
 const UserMessage = () => /* @__PURE__ */ jsx(
   MessagePrimitiveRoot,
   {
@@ -62971,6 +62968,7 @@ export {
   useComposerAttachment,
   useMentionSuggestions,
   useParentAuth,
-  useThreadList
+  useThreadList,
+  useThreadLoading
 };
 //# sourceMappingURL=index.js.map