@frankieai/react 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frankieai/react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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",
@@ -31,7 +31,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.460.0",
     "tailwind-merge": "^2.5.0",
-    "@frankieai/core": "0.2.0"
+    "@frankieai/core": "0.2.1"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.0.0",

package/src/components/chat/AgentContext.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { ArrowUpRight, Sparkles } from "lucide-react";
+import { useFrankie } from "../../hooks/FrankieProvider.jsx";
+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 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">
+      <summary aria-label="Agent context"><Sparkles size={17} aria-hidden="true" /><span>Agent context</span><span className="frankie-context-count">{loadedSkills === null ? "Not checked" : `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"}`}</span><span className="frankie-context-status" data-active={status === "Active"}><i aria-hidden="true" />{status}</span><ArrowUpRight size={15} aria-hidden="true" /></summary>
+      <div className="frankie-context-detail">
+        <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>
+      </div>
+    </details>
+    <span className="frankie-sr-only" role="status">{loadedSkills === null ? status : `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"} loaded. ${status}.`}</span>
+  </div>;
+}

package/src/components/chat/ChatPanel.tsx

@@ -11,6 +11,7 @@ import { Avatar } from "../ui/avatar.js";
 import { Button } from "../ui/button.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card.js";
 import { ScrollArea } from "../ui/scroll-area.js";
+import { AgentContext } from "./AgentContext.js";
 import { Composer } from "./Composer.js";
 import { MessageBubble } from "./MessageBubble.js";
 import { SuggestedPrompts } from "./SuggestedPrompts.js";
@@ -49,7 +50,7 @@ export function ChatPanel({
 }: ChatPanelProps) {
   const { config, configError, loading } = useFrankie();
   const theme = useFrankieTheme();
-  const { messages, busy, restoring, loadedSkills, error, send, stop, reset } = useFrankieChat();
+  const { messages, busy, restoring, error, send, stop, reset } = useFrankieChat();
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const features = config?.features;
@@ -70,7 +71,8 @@ export function ChatPanel({
   return (
     <Card
       className={cn(
-        "frankie-root",
+        "frankie-root frankie-chat-panel",
+        fill && "frankie-chat-panel-fill",
         fill ? "h-full w-full rounded-none border-0 shadow-none" : "h-[32rem] w-[22rem] max-w-[calc(100vw-2rem)]",
         mode === "dark" && "dark",
         className,
@@ -98,8 +100,9 @@ export function ChatPanel({
         </CardHeader>
       )}
 
-      <CardContent>
-        <ScrollArea ref={scrollRef} className="flex h-full flex-col gap-4 p-4" aria-live="polite">
+      <AgentContext />
+      <CardContent className="frankie-conversation-content">
+        <ScrollArea ref={scrollRef} className="frankie-transcript flex h-full flex-col gap-4 p-4" aria-live="polite">
           {configError ? (
             <div className="frankie-config-error" role="alert">
               <strong>Frankie couldn’t start</strong>
@@ -116,7 +119,7 @@ export function ChatPanel({
               </div>
             ))
           ) : (
-            <div className="flex flex-col gap-4">
+            <div className="frankie-message-list flex flex-col gap-4">
               {messages.map((message) =>
                 renderMessage ? (
                   <div key={message.id}>{renderMessage(message)}</div>
@@ -136,8 +139,7 @@ export function ChatPanel({
         </ScrollArea>
       </CardContent>
 
-      <CardFooter className="flex flex-col gap-2">
-        {loadedSkills !== null ? <details className="frankie-loaded-skills"><summary role="status">{loadedSkills.length ? `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"} loaded` : "No skills loaded for this turn"}</summary>{loadedSkills.length ? <ul>{loadedSkills.map(skill => <li key={skill.id}>{skill.name}<small>v{skill.revision}</small></li>)}</ul> : <p>Your assistant can still answer using its available tools.</p>}</details> : null}
+      <CardFooter className="frankie-composer-footer flex flex-col gap-2">
         {error ? <p className="w-full text-xs text-red-600 dark:text-red-400">{error}</p> : null}
         <div className="w-full">
           <Composer

package/src/components/chat/Composer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowUp, Paperclip, Square, X } from "lucide-react";
+import { ArrowUp, Paperclip, Plus, Square, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type KeyboardEvent } from "react";
 import type { ChatAttachment } from "@frankieai/core";
 import { Button } from "../ui/button.js";
@@ -107,7 +107,7 @@ export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocu
   }, [busy, disabled, files, modelPicker?.value, onSend, value]);
 
   const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === "Enter" && !event.shiftKey) {
+    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
       event.preventDefault();
       submit();
     }
@@ -117,7 +117,7 @@ export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocu
 
   return (
     <form
-      className="flex flex-col gap-2"
+      className="frankie-composer flex flex-col gap-2"
       onSubmit={(event) => {
         event.preventDefault();
         submit();
@@ -147,7 +147,7 @@ export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocu
 
       {fileError ? <p className="text-xs text-red-600 dark:text-red-400">{fileError}</p> : null}
 
-      <div className="flex items-end gap-2">
+      <div className="frankie-composer-controls flex items-end gap-2">
         {canAttach ? (
           <>
             <input
@@ -170,7 +170,7 @@ export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocu
               aria-label="Attach files"
               title="Attach files"
             >
-              <Paperclip />
+              <Plus />
             </Button>
           </>
         ) : null}
@@ -236,3 +236,4 @@ function readAsBase64(file: File): Promise<string> {
     reader.readAsDataURL(file);
   });
 }
+

package/src/components/chat/FrankieChatPage.tsx

@@ -33,7 +33,7 @@ function PageEmptyState() {
 
 function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...panel }: Pick<FrankieChatPageProps, "header" | "footer" | "emptyState" | "renderMessage" | "renderTool" | "placeholder" | "autoFocus" | "navigation"> & { showHistory: boolean; currentId: string; onSelect: (id: string) => void; onNew: () => void }) {
   const { client, config } = useFrankie();
-  const { busy } = useFrankieChat();
+  const { busy, messages } = useFrankieChat();
   const theme = useFrankieTheme();
   const [conversations, setConversations] = useState<ChatConversation[]>([]);
   const [historyError, setHistoryError] = useState("");
@@ -43,7 +43,6 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
   const dialog = useRef<HTMLDialogElement>(null);
   const menu = useRef<HTMLButtonElement>(null);
   const requestVersion = useRef(0);
-  const name = config?.branding.name ?? "Frankie";
   const refresh = useCallback(async () => {
     if (!showHistory || !config || config.allowAnonymous) { setHistoryError(""); return; }
     const version = ++requestVersion.current;
@@ -71,7 +70,7 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
   return <div className={"frankie-page-shell" + (resolveMode(theme?.mode) === "dark" ? " dark" : "")} style={themeToCssVars(theme)}>
     {showHistory ? <aside className="frankie-history-desktop">{history}</aside> : null}
     <div className="frankie-page-main">
-      <header className="frankie-page-header"><div>{showHistory ? <button type="button" className="frankie-mobile-only" ref={menu} aria-label="Open conversations" aria-haspopup="dialog" aria-expanded={drawerOpen} onClick={() => setDrawerOpen(true)}><Menu size={20} /></button> : null}<strong>{name}</strong><span className="frankie-header-caption">Product assistant</span></div><div>
+      <header className="frankie-page-header"><div>{showHistory ? <button type="button" className="frankie-mobile-only" ref={menu} aria-label="Open conversations" aria-haspopup="dialog" aria-expanded={drawerOpen} onClick={() => setDrawerOpen(true)}><Menu size={20} /></button> : null}<strong className="frankie-thread-title">{conversations.find(item => item.id === currentId)?.title ?? messages.find(message => message.role === "user")?.text ?? "New chat"}</strong></div><div>
         <button type="button" disabled={busy} onClick={onNew} aria-label="Start a new conversation"><Plus size={16} /><span>New chat</span></button>
         <details className="frankie-chat-settings"><summary aria-label="Chat settings"><Settings size={19} /></summary><div><strong>Chat settings</strong><p>History syncs automatically for signed-in users.</p><button type="button" onClick={() => void refresh()} disabled={historyLoading || !showHistory}><History size={16} />Refresh history</button><small>Skills are checked at the start of each message.</small></div></details>
       </div></header>

package/src/components/chat/MessageBubble.tsx

@@ -26,7 +26,7 @@ export function MessageBubble({
 }: MessageBubbleProps) {
   if (message.role === "user") {
     return (
-      <div className="flex flex-col items-end gap-1">
+      <div className="frankie-user-message flex flex-col items-end gap-1">
         {message.attachments?.length ? (
           <div className="flex max-w-[85%] flex-wrap justify-end gap-1">
             {message.attachments.map((file, index) => (
@@ -42,7 +42,7 @@ export function MessageBubble({
         ) : null}
         {message.text ? (
           <div className="flex max-w-[85%] items-end gap-1">
-            <div className="rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground">{message.text}</div>
+            <div className="frankie-user-bubble rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground">{message.text}</div>
             <MessageCopyButton text={message.text} />
           </div>
         ) : null}
@@ -53,12 +53,12 @@ export function MessageBubble({
   const empty = message.text.length === 0 && message.tools.length === 0;
 
   return (
-    <div className="flex gap-2">
+    <div className="frankie-assistant-message flex gap-2">
       <div className="frankie-assistant-actions mt-0.5 flex shrink-0 flex-col items-center gap-1">
         <Avatar {...(avatarUrl ? { src: avatarUrl } : {})} name={assistantName} />
         {message.text ? <MessageCopyButton text={message.text} /> : null}
       </div>
-      <div className="min-w-0 max-w-[85%]">
+      <div className="frankie-assistant-content min-w-0 max-w-[85%]">
         {message.status === "error" ? (
           <p className="rounded-[var(--frankie-radius)] bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400">
             {message.error}
@@ -90,7 +90,8 @@ function MessageCopyButton({ text }: { text: string }) {
 
 export function TypingDots() {
   return (
-    <span className="inline-flex items-center gap-1 py-2" role="status" aria-label="Thinking">
+    <span className="frankie-thinking inline-flex items-center gap-1 py-2" role="status" aria-label="Thinking">
+      <span className="frankie-thinking-label">Thinking</span>
       {[0, 1, 2].map((index) => (
         <span
           key={index}
@@ -101,3 +102,4 @@ export function TypingDots() {
     </span>
   );
 }
+

package/src/styles/frankie.css

@@ -346,3 +346,64 @@
     .frankie-page-canvas .frankie-root > .border-t { padding: .65rem .75rem calc(.65rem + env(safe-area-inset-bottom)); }
   }
 }
+
+/* Shared conversation surface: SDK pages, embedded panels and Frankie's app. */
+.frankie-root.frankie-chat-panel { min-height:0; position:relative; }
+.frankie-root .frankie-agent-context-wrap { flex:none; display:flex; justify-content:center; padding:12px 10px; }
+.frankie-root .frankie-agent-context { position:relative; max-width:100%; color:var(--frankie-foreground); font-size:13px; }
+.frankie-root .frankie-agent-context > summary { display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:7px 13px; border:1px solid var(--frankie-border); border-radius:999px; background:var(--frankie-background); box-shadow:0 1px 3px #0000000d; cursor:pointer; list-style:none; white-space:nowrap; }
+.frankie-root .frankie-agent-context > summary::-webkit-details-marker { display:none; }
+.frankie-root .frankie-agent-context > summary > svg { flex:none; color:var(--frankie-muted-foreground); }
+.frankie-root .frankie-context-count { padding:2px 10px; border-radius:999px; background:var(--frankie-muted); font-size:12px; color:var(--frankie-muted-foreground); }
+.frankie-root .frankie-context-status { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--frankie-muted-foreground); }
+.frankie-root .frankie-context-status i { width:7px; height:7px; border-radius:50%; background:currentColor; }
+.frankie-root .frankie-context-status[data-active="true"] { color:#00976b; }
+.frankie-root .frankie-context-detail { position:absolute; z-index:10; top:calc(100% + 10px); left:50%; transform:translateX(-50%); width:340px; max-width:calc(100vw - 32px); padding:18px; border:1px solid var(--frankie-border); border-radius:16px; background:var(--frankie-background); box-shadow:0 12px 32px #00000016; }
+.frankie-root .frankie-context-detail p { margin:10px 0 0; font-size:12px; line-height:1.6; color:var(--frankie-muted-foreground); }
+.frankie-root .frankie-context-detail ul { list-style:none; margin:12px 0; padding:0; max-height:220px; overflow:auto; }
+.frankie-root .frankie-context-detail li { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--frankie-border); overflow-wrap:anywhere; }
+.frankie-root .frankie-context-detail small { flex:none; color:var(--frankie-muted-foreground); }
+.frankie-root .frankie-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
+.frankie-root.frankie-chat-panel-fill { --frankie-canvas:color-mix(in srgb,var(--frankie-background) 60%,var(--frankie-muted)); background:var(--frankie-canvas); }
+.frankie-root.frankie-chat-panel-fill .frankie-agent-context-wrap { padding:44px 16px 26px; }
+.frankie-root.frankie-chat-panel-fill .frankie-transcript { padding:14px max(24px,calc((100% - 960px)/2)) 24px; }
+.frankie-root.frankie-chat-panel-fill .frankie-message-list { gap:38px; }
+.frankie-root.frankie-chat-panel-fill .frankie-user-bubble { border-radius:24px; padding:12px 20px; background:var(--frankie-muted); color:var(--frankie-foreground); font-size:15px; white-space:pre-wrap; overflow-wrap:anywhere; }
+.frankie-root.frankie-chat-panel-fill .frankie-assistant-content { max-width:100%; flex:1; font-size:15px; line-height:1.7; }
+.frankie-root.frankie-chat-panel-fill .frankie-assistant-message { gap:14px; }
+.frankie-root .frankie-thinking { color:var(--frankie-muted-foreground); gap:5px; }
+.frankie-root .frankie-thinking-label { margin-right:6px; font-size:14px; }
+.frankie-root.frankie-chat-panel-fill .frankie-composer-footer { border:0; padding:16px max(24px,calc((100% - 1000px)/2)) 24px; background:transparent; flex:none; }
+.frankie-root.frankie-chat-panel-fill .frankie-composer { padding:14px; border:1px solid var(--frankie-border); border-radius:28px; background:var(--frankie-background); box-shadow:0 2px 4px #0000000a; }
+.frankie-root.frankie-chat-panel-fill .frankie-composer:focus-within { border-color:color-mix(in srgb,var(--frankie-foreground) 32%,var(--frankie-border)); box-shadow:0 0 0 2px color-mix(in srgb,var(--frankie-primary) 8%,transparent); }
+.frankie-root.frankie-chat-panel-fill .frankie-composer-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
+.frankie-root.frankie-chat-panel-fill .frankie-composer textarea { order:-1; flex:0 0 100%; width:100%; min-height:32px; max-height:140px; margin-bottom:4px; padding:2px 6px; border:0; border-radius:0; resize:none; background:transparent; color:var(--frankie-foreground); font-size:16px; box-shadow:none; outline:none; }
+.frankie-root.frankie-chat-panel-fill .frankie-composer button[aria-label="Send"],.frankie-root.frankie-chat-panel-fill .frankie-composer button[aria-label="Stop"] { margin-left:auto; width:42px; height:42px; border-radius:50%; background:var(--frankie-primary); color:var(--frankie-primary-foreground); border:0; }
+.frankie-root.frankie-chat-panel-fill .frankie-composer button[aria-label="Attach files"] { width:42px; height:42px; border-radius:50%; }
+.frankie-root .frankie-history-desktop { width:290px; background:var(--frankie-background); padding:20px 12px; }
+.frankie-root .frankie-new-chat { justify-content:flex-start; border:0; background:transparent; padding:8px 12px; font-size:15px; }
+.frankie-root .frankie-history-heading { font-size:12px; font-weight:400; color:var(--frankie-muted-foreground); padding:0 12px; }
+.frankie-root .frankie-history-list button { min-height:44px; padding:10px 12px; }
+.frankie-root .frankie-history-list button span { font-size:14px; }
+.frankie-root .frankie-history-list button[aria-current],.frankie-root .frankie-history-list button:hover { border-color:transparent; background:var(--frankie-muted); }
+.frankie-root .frankie-history-list small { display:none; }
+.frankie-root .frankie-page-header { min-height:56px; height:56px; background:var(--frankie-background); }
+.frankie-root .frankie-page-header > div { min-width:0; }
+.frankie-root .frankie-thread-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:55vw; font-weight:500; }
+.frankie-root .frankie-page-header button { border-color:transparent; background:transparent; }
+.frankie-root .frankie-page-canvas > .frankie-inline { max-width:none; }
+@media(max-width:760px) {
+  .frankie-root.frankie-chat-panel-fill .frankie-agent-context-wrap { padding:20px 8px 14px; }
+  .frankie-root.frankie-chat-panel-fill .frankie-transcript { padding:12px 16px 16px; }
+  .frankie-root.frankie-chat-panel-fill .frankie-composer-footer { padding:10px 12px calc(12px + env(safe-area-inset-bottom)); }
+  .frankie-root .frankie-agent-context > summary { gap:6px; padding:7px 9px; font-size:12px; }
+  .frankie-root .frankie-context-count { padding:2px 7px; font-size:11px; }
+  .frankie-root .frankie-context-status { font-size:11px; gap:4px; }
+  .frankie-root .frankie-agent-context > summary > svg { width:14px; }
+  .frankie-root .frankie-thread-title { max-width:42vw; }
+}
+.frankie-root .frankie-agent-context > summary > svg:first-child { box-sizing:content-box; padding:4px; border-radius:50%; background:var(--frankie-muted); }
+.frankie-root.frankie-chat-panel-fill .frankie-agent-context > summary { font-size:14px; }
+
+.frankie-root .frankie-agent-context > summary > span:first-of-type { border-right:1px solid var(--frankie-border); padding-right:10px; }
+@media(max-width:760px) { .frankie-root .frankie-page-header button > span { display:none; } }

package/src/widget.test.tsx

@@ -226,6 +226,35 @@ describe("ChatPanel", () => {
     expect(screen.queryByText("1 skill loaded")).toBeNull();
     cleanup();
   });
+  it("refreshes the context count and revisions from each server turn", async () => {
+    cleanup();
+    let turn = 0;
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => {
+      if (String(url).endsWith("/v1/session")) return Response.json({ sessionId: "context", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } });
+      turn++;
+      const skills = turn === 1 ? [{ id: "one", name: "Reservations", revision: 2 }, { id: "two", name: "Locations", revision: 1 }, { id: "three", name: "Service", revision: 3 }] : [];
+      return new Response(sseStream([{ type: "skills_loaded", skills }, { type: "text_delta", text: `Response ${turn}` }, { type: "turn_end", stopReason: "end_turn" }]));
+    });
+    render(<FrankieProvider publishableKey="pk_context_fixture" config={config} fetchImpl={fetchImpl} persist={false}><ChatPanel fill /></FrankieProvider>);
+    expect(screen.getByText("Not checked")).toBeTruthy();
+    await waitFor(() => expect((screen.getByLabelText("Message") as HTMLTextAreaElement).disabled).toBe(false));
+    fireEvent.change(screen.getByLabelText("Message"), { target: { value: "Review service" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await screen.findByText("Response 1");
+    expect(screen.getByText("3 skills")).toBeTruthy();
+    expect(screen.getByText("Active")).toBeTruthy();
+    fireEvent.click(screen.getByLabelText("Agent context"));
+    expect(screen.getByText("Reservations")).toBeTruthy();
+    expect(screen.getByText("v3")).toBeTruthy();
+    await waitFor(() => expect(screen.getByRole("button", { name: "Send" })).toBeTruthy());
+    fireEvent.change(screen.getByLabelText("Message"), { target: { value: "Try again" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await screen.findByText("Response 2");
+    expect(screen.getByText("0 skills")).toBeTruthy();
+    expect(screen.queryByText("Active")).toBeNull();
+    expect(screen.queryByText("Reservations")).toBeNull();
+    cleanup();
+  });
   it("shows the greeting and suggested prompts before the first message", async () => {
     render(
       <FrankieProvider baseUrl="https://agent.acme.com" publishableKey="pk_1" config={config}>