@frankieai/react 0.1.4 → 0.2.0

package/src/styles/frankie.css

@@ -45,6 +45,27 @@
 }
 
 @layer components {
+  .frankie-page-shell { display:flex; flex:1; min-height:0; height:100%; background:var(--frankie-background); color:var(--frankie-foreground); }
+  .frankie-page-main { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column; }
+  .frankie-history-desktop { width:260px; flex-shrink:0; display:flex; flex-direction:column; gap:16px; padding:20px 14px; border-right:1px solid var(--frankie-border); background:var(--frankie-secondary); overflow:auto; }
+  .frankie-history-heading { display:flex; align-items:center; justify-content:space-between; font-size:14px; }
+  .frankie-new-chat { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--frankie-border); border-radius:10px; background:var(--frankie-background); min-height:44px; font-weight:600; cursor:pointer; }
+  .frankie-history-search > span { display:block; font-size:12px; color:var(--frankie-muted-foreground); margin-bottom:6px; }
+  .frankie-history-search input { width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--frankie-border); border-radius:8px; background:var(--frankie-background); }
+  .frankie-history-list { display:flex; flex-direction:column; gap:4px; flex:1; }
+  .frankie-history-list button { display:flex; flex-direction:column; align-items:flex-start; gap:5px; border:1px solid transparent; border-radius:8px; padding:10px; min-height:54px; background:transparent; text-align:left; cursor:pointer; }
+  .frankie-history-list button span { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
+  .frankie-history-list small { font-size:11px; color:var(--frankie-muted-foreground); }.frankie-history-list button:hover,.frankie-history-list button[aria-current] { background:var(--frankie-background); border-color:var(--frankie-border); }
+  .frankie-history-desktop > p,.frankie-history-dialog p { font-size:13px; color:var(--frankie-muted-foreground); }
+  .frankie-header-caption { color:var(--frankie-muted-foreground); font-size:12px; }.frankie-page-header button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:40px; min-height:40px; cursor:pointer; }
+  .frankie-chat-settings { position:relative; }.frankie-chat-settings summary { list-style:none; display:grid; place-items:center; width:40px; height:40px; cursor:pointer; border-radius:8px; }.frankie-chat-settings summary::-webkit-details-marker { display:none; }
+  .frankie-chat-settings > div { position:absolute; top:46px; right:0; z-index:5; width:min(280px,80vw); display:grid; gap:12px; padding:16px; border:1px solid var(--frankie-border); border-radius:12px; background:var(--frankie-background); box-shadow:0 10px 30px #0002; font-size:13px; }.frankie-chat-settings p { margin:0; color:var(--frankie-muted-foreground); }
+  .frankie-loaded-skills { width:100%; max-width:760px; font-size:12px; color:var(--frankie-muted-foreground); }.frankie-loaded-skills summary { cursor:pointer; padding:6px 0; }.frankie-loaded-skills ul { list-style:none; padding:4px 0; margin:0; }.frankie-loaded-skills li { display:flex; gap:8px; padding:4px 0; }.frankie-loaded-skills small { opacity:.7; }
+  .frankie-history-dialog { padding:0; border:0; margin:0; max-height:none; height:100dvh; max-width:none; width:min(320px,86vw); background:var(--frankie-secondary); color:var(--frankie-foreground); }.frankie-history-dialog::backdrop { background:#0008; }.frankie-history-dialog > aside { display:flex; flex-direction:column; gap:16px; height:100%; padding:calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); overflow:auto; }
+  .frankie-mobile-only { display:none!important; }.frankie-widget-panel { max-height:calc(100dvh - 100px); }
+  .frankie-root button:focus-visible,.frankie-root summary:focus-visible,.frankie-root input:focus-visible { outline:2px solid var(--frankie-primary); outline-offset:3px; }
+  .frankie-root button:disabled { opacity:.5; cursor:not-allowed; }
+  @media(max-width:760px) { .frankie-history-desktop { display:none; }.frankie-mobile-only { display:inline-flex!important; }.frankie-header-caption { display:none; }.frankie-page-header { padding:6px 10px; }.frankie-history-heading button { border:0; background:transparent; min-width:44px; min-height:44px; align-items:center; justify-content:center; }.frankie-page-prompts { gap:8px; }.frankie-widget-panel { width:calc(100vw - 32px); } }
   .frankie-root {
     --frankie-background: #ffffff;
     --frankie-foreground: #0a0a0a;
@@ -164,3 +185,164 @@
     padding: 0;
   }
 }
+
+
+@layer components {
+  .frankie-chat-page {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    overflow: hidden;
+    background:
+      radial-gradient(60rem 24rem at 50% -12rem, color-mix(in srgb, var(--frankie-primary) 8%, transparent), transparent 65%),
+      var(--frankie-background);
+    color: var(--frankie-foreground);
+  }
+
+  .frankie-page-header {
+    display: flex;
+    min-height: 56px;
+    flex: 0 0 56px;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 0 24px;
+    border-bottom: 1px solid var(--frankie-border);
+    background: color-mix(in srgb, var(--frankie-background) 92%, transparent);
+    backdrop-filter: blur(18px);
+  }
+
+  .frankie-page-header > div {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .frankie-page-header strong { font-size: 0.925rem; font-weight: 650; }
+
+  .frankie-page-status {
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+    background: var(--frankie-primary);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--frankie-primary) 16%, transparent);
+  }
+
+  .frankie-page-header button {
+    min-height: 36px;
+    padding: 0 13px;
+    border: 1px solid var(--frankie-border);
+    border-radius: calc(var(--frankie-radius) * .9);
+    background: var(--frankie-secondary);
+    cursor: pointer;
+  }
+
+  .frankie-page-header button:hover { border-color: var(--frankie-primary); }
+
+  .frankie-page-canvas {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+  }
+
+  .frankie-page-canvas > .frankie-inline {
+    width: 100%;
+    max-width: 56rem;
+    margin: 0 auto;
+  }
+
+  .frankie-page-canvas .frankie-scroll { padding: 2rem clamp(1rem, 4vw, 4rem) 1.25rem; }
+  .frankie-page-canvas .frankie-root > .border-t {
+    padding: .75rem clamp(1rem, 4vw, 4rem) 1.5rem;
+    border-top: 0;
+    background: linear-gradient(180deg, transparent, var(--frankie-background) 30%);
+  }
+
+  .frankie-page-empty {
+    display: flex;
+    width: min(100%, 38rem);
+    min-height: 100%;
+    margin: auto;
+    padding: clamp(2rem, 7vh, 4.5rem) 1rem 2rem;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    text-align: center;
+  }
+
+  .frankie-page-avatar {
+    display: grid;
+    width: 48px;
+    height: 48px;
+    place-items: center;
+    border-radius: calc(var(--frankie-radius) * 1.4);
+    background: var(--frankie-primary);
+    color: var(--frankie-primary-foreground);
+    font-weight: 750;
+  }
+
+  .frankie-page-kicker {
+    margin: 0 0 .4rem;
+    color: var(--frankie-primary);
+    font-size: .7rem;
+    font-weight: 750;
+    letter-spacing: .1em;
+    text-transform: uppercase;
+  }
+
+  .frankie-page-empty h1 {
+    margin: 0;
+    font-size: clamp(1.65rem, 4vw, 2.15rem);
+    line-height: 1.08;
+    letter-spacing: -.045em;
+  }
+
+  .frankie-page-empty h1 + p {
+    margin: .6rem auto 0;
+    max-width: 30rem;
+    color: var(--frankie-muted-foreground);
+  }
+
+  .frankie-page-prompts {
+    display: grid;
+    width: 100%;
+    gap: .55rem;
+    margin-top: .4rem;
+  }
+
+  .frankie-page-prompts button {
+    display: grid;
+    min-height: 60px;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: .65rem;
+    padding: .75rem .9rem;
+    border: 1px solid var(--frankie-border);
+    border-radius: calc(var(--frankie-radius) * 1.25);
+    background: var(--frankie-secondary);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .frankie-page-prompts button:hover {
+    border-color: color-mix(in srgb, var(--frankie-primary) 58%, var(--frankie-border));
+    transform: translateY(-1px);
+  }
+
+  .frankie-page-prompts button > span {
+    color: var(--frankie-muted-foreground);
+    font-size: .68rem;
+    font-weight: 700;
+  }
+
+  .frankie-page-prompts button > strong { font-size: .875rem; }
+  .frankie-page-prompts button > b { color: var(--frankie-primary); font-size: 1rem; }
+
+  @media (max-width: 640px) {
+    .frankie-page-header { min-height: 52px; flex-basis: 52px; padding: 0 12px; }
+    .frankie-page-canvas .frankie-scroll { padding: 1.25rem .75rem .5rem; }
+    .frankie-page-canvas .frankie-root > .border-t { padding: .65rem .75rem calc(.65rem + env(safe-area-inset-bottom)); }
+  }
+}

package/src/widget.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { FrankieServerEvent, PublicWidgetConfig } from "@frankieai/core";
 import { FrankieProvider } from "./hooks/FrankieProvider.jsx";
@@ -7,6 +7,7 @@ import { Markdown } from "./components/chat/Markdown.js";
 import { FrankieClient, readEventStream } from "./lib/client.js";
 import { applyEvent, newAssistantMessage } from "./lib/messages.js";
 import { themeToCssVars } from "./lib/theme.js";
+import { useFrankieChat } from "./hooks/useFrankieChat.js";
 
 const config: PublicWidgetConfig = {
   tenantId: "acme",
@@ -97,6 +98,24 @@ describe("readEventStream", () => {
 });
 
 describe("FrankieClient", () => {
+  it("does not request signed-in history for an anonymous conversation", async () => {
+    const fetchImpl = vi.fn();
+    const client = new FrankieClient({ publishableKey: "pk_anonymous_fixture", conversationId: "new", fetchImpl, persist: false });
+    expect(await client.resumeConversation()).toBeUndefined();
+    expect(fetchImpl).not.toHaveBeenCalled();
+  });
+  it("keeps authenticated tokens out of storage and rejects a cached session after sign-out", async () => {
+    let token: string | undefined = "fixture-user-token";
+    const fetchImpl = vi.fn(async () => Response.json({ sessionId: "one", sessionToken: "fixture-bearer", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: false } }));
+    const client = new FrankieClient({ publishableKey: "pk_auth_fixture", getUserToken: () => token, fetchImpl });
+    await client.ensureSession();
+    expect(client.persist).toBe(false);
+    expect(window.localStorage.getItem("frankie.pk_auth_fixture.session")).toBeNull();
+    token = undefined;
+    await expect(client.ensureSession()).rejects.toThrow("sign in again");
+    expect(client.sessionId).toBeUndefined();
+    expect(fetchImpl).toHaveBeenCalledTimes(1);
+  });
   // The client persists its session to localStorage; isolate tests that reuse
   // the same publishable-key namespace.
   beforeEach(() => {
@@ -192,6 +211,21 @@ describe("themeToCssVars", () => {
 });
 
 describe("ChatPanel", () => {
+  it("shares prompt controls, transcript and loaded skills across provider consumers", async () => {
+    cleanup();
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => String(url).endsWith("/v1/session") ? Response.json({ sessionId: "shared", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } }) : new Response(sseStream([{ type: "skills_loaded", skills: [{ id: "review", name: "Review items", revision: 2 }] }, { type: "text_delta", text: "Shared response" }, { type: "turn_end", stopReason: "end_turn" }])));
+    function Prompt() { const chat = useFrankieChat(); return <button disabled={chat.restoring} onClick={() => void chat.send("Shared prompt")}>External prompt</button>; }
+    render(<FrankieProvider publishableKey="pk_shared_fixture" config={config} fetchImpl={fetchImpl} persist={false}><Prompt /><ChatPanel /></FrankieProvider>);
+    await waitFor(() => expect((screen.getByRole("button", { name: "External prompt" }) as HTMLButtonElement).disabled).toBe(false));
+    fireEvent.click(screen.getByRole("button", { name: "External prompt" }));
+    expect(await screen.findByText("Shared response")).toBeTruthy();
+    expect(screen.getByText("1 skill loaded")).toBeTruthy();
+    expect(fetchImpl.mock.calls.filter(([url]) => String(url).endsWith("/v1/chat"))).toHaveLength(1);
+    fireEvent.click(screen.getByRole("button", { name: "Start a new conversation" }));
+    await waitFor(() => expect(screen.queryByText("Shared response")).toBeNull());
+    expect(screen.queryByText("1 skill loaded")).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}>