@frankieai/react 0.2.6 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frankieai/react",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Embeddable, themeable chat widget for the Frankie onboarding agent — shadcn/ui components, works with or without Tailwind in the host app.",
   "license": "MIT",
   "type": "module",

package/src/components/chat/AgentContext.tsx

@@ -6,7 +6,7 @@ import { useFrankieChat } from "../../hooks/useFrankieChat.js";
 /** Reports server-confirmed skills for the current turn; never implies drafts are active. */
 export function AgentContext() {
   const { loading, configError } = useFrankie();
-  const { loadedSkills, busy, restoring, error } = useFrankieChat();
+  const { loadedSkills, activeApis, busy, restoring, error } = useFrankieChat();
   const status = configError || error ? "Unavailable" : loading || restoring ? "Connecting" : busy && loadedSkills === null ? "Checking" : loadedSkills?.length ? "Active" : loadedSkills ? "Tools only" : "Ready";
   return <div className="frankie-agent-context-wrap">
     <details className="frankie-agent-context">
@@ -15,6 +15,7 @@ export function AgentContext() {
         <strong>{loadedSkills === null ? "Skills are checked when you send a message" : loadedSkills.length ? `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"} loaded` : "No skills loaded for this turn"}</strong>
         {loadedSkills?.length ? <ul>{loadedSkills.map(skill => <li key={skill.id}><span>{skill.name}</span><small>v{skill.revision}</small></li>)}</ul> : <p>Frankie can use the tools approved for this workspace. Drafts and skills without available tools are not loaded.</p>}
         <p>Published skills and updates are checked on every message. Only approved, available tools can run.</p>
+        {activeApis?.length ? <ul className="frankie-active-apis">{activeApis.map(api => <li key={api.name}><span>{api.name}</span><small>spec {api.specHash} · {api.operationCount} {api.operationCount === 1 ? "operation" : "operations"}</small></li>)}</ul> : null}
       </div>
     </details>
     <span className="frankie-sr-only" role="status">{loadedSkills === null ? status : `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"} loaded. ${status}.`}</span>

package/src/components/chat/ChatPanel.tsx

@@ -52,17 +52,35 @@ export function ChatPanel({
   const theme = useFrankieTheme();
   const { messages, busy, restoring, error, send, stop, reset } = useFrankieChat();
   const scrollRef = useRef<HTMLDivElement>(null);
+  // Tracks whether the reader was at the bottom just before this render, not
+  // where the bottom ends up after it. Measuring post-render (against the
+  // already-grown scrollHeight) breaks as soon as one update — a sent message
+  // plus the reply's opening burst of text, say — adds more than the near-
+  // bottom threshold in a single paint: the check then reads "scrolled away"
+  // even though the reader never touched the scrollbar, and every later
+  // delta stops following. A live scroll listener captures the real, current
+  // position instead of re-deriving a stale one from updated content.
+  const atBottomRef = useRef(true);
 
   const features = config?.features;
   const pickerModels = features?.modelPicker.enabled ? features.modelPicker.models : [];
   const [model, setModel] = useState<string | undefined>(undefined);
 
-  // Follow the stream, but only while the reader is already near the bottom.
   useEffect(() => {
     const node = scrollRef.current;
     if (!node) return;
-    const distanceFromBottom = node.scrollHeight - node.scrollTop - node.clientHeight;
-    if (distanceFromBottom < 160) node.scrollTop = node.scrollHeight;
+    const onScroll = () => {
+      atBottomRef.current = node.scrollHeight - node.scrollTop - node.clientHeight < 160;
+    };
+    node.addEventListener("scroll", onScroll, { passive: true });
+    return () => node.removeEventListener("scroll", onScroll);
+  }, []);
+
+  // Follow the stream, but only while the reader is already near the bottom.
+  useEffect(() => {
+    const node = scrollRef.current;
+    if (!node || !atBottomRef.current) return;
+    node.scrollTop = node.scrollHeight;
   }, [messages]);
 
   const name = config?.branding.name ?? "Assistant";

package/src/hooks/useFrankieChat.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { createContext, useContext, useCallback, useEffect, useRef, useState } from "react";
-import type { ChatAttachment, LoadedSkill } from "@frankieai/core";
+import type { ApiToolInventory, ChatAttachment, LoadedSkill } from "@frankieai/core";
 import { FrankieApiError } from "../lib/client.js";
 import {
   applyEvent,
@@ -20,6 +20,8 @@ export interface SendOptions {
 
 export interface UseFrankieChatResult {
   loadedSkills: LoadedSkill[] | null;
+  /** Which OpenAPI sources are live for this turn, and a content fingerprint of each. */
+  activeApis: ApiToolInventory[] | null;
   restoring: boolean;
   messages: ChatMessage[];
   /** True from the moment a message is sent until the turn ends. */
@@ -50,6 +52,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
   const [error, setError] = useState<string | undefined>(undefined);
   const [restored, setRestored] = useState(false);
   const [loadedSkills, setLoadedSkills] = useState<LoadedSkill[] | null>(null);
+  const [activeApis, setActiveApis] = useState<ApiToolInventory[] | null>(null);
   const abortRef = useRef<AbortController | null>(null);
   const mounted = useRef(true);
   // State updates can be batched while a stream is arriving. Keep the latest
@@ -142,6 +145,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
       const assistantId = nextId("a");
       setError(undefined);
       setLoadedSkills(null);
+      setActiveApis(null);
       setBusy(true);
       const next = [
         ...messagesRef.current,
@@ -171,6 +175,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
           },
           (event) => {
             if (event.type === "skills_loaded") { setLoadedSkills(event.skills); return; }
+            if (event.type === "tools_active") { setActiveApis(event.apis); return; }
             if (event.type === "ping" || event.type === "session") return;
             if (event.type === "text_delta") receivedText = true;
             if (event.type === "tool_start" || event.type === "tool_end") receivedToolActivity = true;
@@ -236,6 +241,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
     setBusy(false);
     setRestored(true);
     setLoadedSkills(null);
+    setActiveApis(null);
     try {
       if (client.persist) window.localStorage.removeItem(`${client.namespace}.messages`);
     } catch {
@@ -243,7 +249,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
     }
   }, [client]);
 
-  return { messages, busy, loadedSkills, restoring: !restored, ...(error ? { error } : {}), send, stop, reset };
+  return { messages, busy, loadedSkills, activeApis, restoring: !restored, ...(error ? { error } : {}), send, stop, reset };
 }
 
 

package/src/widget.test.tsx

@@ -227,6 +227,57 @@ describe("ChatPanel", () => {
     expect(screen.queryByText("1 skill loaded")).toBeNull();
     cleanup();
   });
+  it("keeps following new messages even when one update grows the transcript past the near-bottom threshold", async () => {
+    cleanup();
+    const fetchImpl = vi.fn(async (url: string | URL | Request) =>
+      String(url).endsWith("/v1/session")
+        ? Response.json({ sessionId: "scroll", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } })
+        : new Response(sseStream([{ type: "text_delta", text: "A substantially longer reply than the one before it, to grow the transcript by more than the near-bottom threshold in a single update." }, { type: "turn_end", stopReason: "end_turn" }])),
+    );
+    const { container } = render(<FrankieProvider publishableKey="pk_scroll_fixture" config={config} fetchImpl={fetchImpl} persist={false}><ChatPanel fill /></FrankieProvider>);
+    const scroller = container.querySelector(".frankie-transcript") as HTMLElement;
+    let scrollTop = 0;
+    // jsdom has no layout engine, so scrollHeight/clientHeight are always 0.
+    // Tie scrollHeight to the actual rendered text so it grows the way a real
+    // browser's would as messages stream in, without hand-stepping it.
+    Object.defineProperty(scroller, "clientHeight", { configurable: true, get: () => 400 });
+    Object.defineProperty(scroller, "scrollHeight", { configurable: true, get: () => (scroller.textContent?.length ?? 0) * 50 });
+    Object.defineProperty(scroller, "scrollTop", { configurable: true, get: () => scrollTop, set: (value: number) => { scrollTop = value; } });
+
+    await waitFor(() => expect((screen.getByLabelText("Message") as HTMLTextAreaElement).disabled).toBe(false));
+    fireEvent.change(screen.getByLabelText("Message"), { target: { value: "First question" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await waitFor(() => expect(scrollTop).toBe(scroller.scrollHeight));
+
+    // The reader never touched the scrollbar between turns — they were left
+    // exactly at the bottom by the first turn. A second turn whose reply
+    // alone adds far more than 160px of content in one commit must still be
+    // followed: recomputing "distance from bottom" from the post-update DOM
+    // (the pre-fix approach) misreads that jump as the reader having
+    // scrolled away, and stops following for the rest of the turn.
+    fireEvent.change(screen.getByLabelText("Message"), { target: { value: "Second question" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await screen.findByText(/A substantially longer reply/);
+    await waitFor(() => expect(scrollTop).toBe(scroller.scrollHeight));
+    cleanup();
+  });
+  it("shows the active API spec hash and operation count once tools_active arrives", async () => {
+    cleanup();
+    const fetchImpl = vi.fn(async (url: string | URL | Request) =>
+      String(url).endsWith("/v1/session")
+        ? Response.json({ sessionId: "apis", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } })
+        : new Response(sseStream([{ type: "tools_active", apis: [{ name: "acme", specHash: "abc123def456", operationCount: 4 }] }, { type: "text_delta", text: "Done" }, { type: "turn_end", stopReason: "end_turn" }])),
+    );
+    render(<FrankieProvider publishableKey="pk_apis_fixture" config={config} fetchImpl={fetchImpl} persist={false}><ChatPanel /></FrankieProvider>);
+    await waitFor(() => expect((screen.getByLabelText("Message") as HTMLTextAreaElement).disabled).toBe(false));
+    fireEvent.change(screen.getByLabelText("Message"), { target: { value: "Hi" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await screen.findByText("Done");
+    fireEvent.click(screen.getByLabelText("Agent context"));
+    expect(screen.getByText("acme")).toBeTruthy();
+    expect(screen.getByText("spec abc123def456 · 4 operations")).toBeTruthy();
+  });
+
   it("refreshes the context count and revisions from each server turn", async () => {
     cleanup();
     let turn = 0;