@timbal-ai/timbal-react 0.1.0 → 0.2.0

package/README.md

@@ -16,9 +16,9 @@ bun add @timbal-ai/timbal-react
 npm install react react-dom @assistant-ui/react @timbal-ai/timbal-sdk
 ```
 
-## Tailwind setup
+### Required: Tailwind setup
 
-The package ships pre-built class names that Tailwind must scan. Add this line to your CSS entry file:
+The package ships pre-built class names that Tailwind must scan. Add this `@source` line to your CSS entry file — **without it the components will be unstyled**:
 
 ```css
 /* src/index.css */
@@ -29,9 +29,9 @@ The package ships pre-built class names that Tailwind must scan. Add this line t
 
 > Adjust the path if your CSS file lives at a different depth relative to `node_modules`.
 
-## CSS imports
+### Required: CSS imports
 
-Some components require stylesheets from their dependencies. Import these once in your app entry:
+Import these stylesheets once in your app entry:
 
 ```ts
 // src/main.tsx
@@ -43,9 +43,70 @@ import "katex/dist/katex.min.css";
 
 ## Usage
 
-### Drop-in chat
+### One-liner
 
-Wrap `TimbalRuntimeProvider` with a `workforceId` and render `<Thread />` inside it:
+The simplest way to embed a chat UI. `TimbalChat` handles the runtime and the thread in one component:
+
+```tsx
+import { TimbalChat } from "@timbal-ai/timbal-react";
+
+export default function App() {
+  return (
+    <div style={{ height: "100vh" }}>
+      <TimbalChat workforceId="your-workforce-id" />
+    </div>
+  );
+}
+```
+
+#### With welcome screen and suggestions
+
+```tsx
+<TimbalChat
+  workforceId="your-workforce-id"
+  welcome={{
+    heading: "Hi, I'm your assistant",
+    subheading: "Ask me anything about your data.",
+  }}
+  suggestions={[
+    { title: "Summarize this week", description: "Get a quick overview of recent activity" },
+    { title: "What can you help with?" },
+    { title: "Show me the latest report" },
+  ]}
+/>
+```
+
+#### With a custom placeholder and width
+
+```tsx
+<TimbalChat
+  workforceId="your-workforce-id"
+  composerPlaceholder="Type a question..."
+  maxWidth="60rem"
+  className="my-custom-class"
+/>
+```
+
+#### Switching agents dynamically
+
+Use `key` to reset the chat when the workforce changes:
+
+```tsx
+const [workforceId, setWorkforceId] = useState("agent-a");
+
+<select onChange={(e) => setWorkforceId(e.target.value)}>
+  <option value="agent-a">Agent A</option>
+  <option value="agent-b">Agent B</option>
+</select>
+
+<TimbalChat workforceId={workforceId} key={workforceId} />
+```
+
+---
+
+### Compose manually
+
+Use `TimbalRuntimeProvider` + `Thread` separately when you need to place the runtime above the chat UI — for example, to build a custom header that reads or controls chat state:
 
 ```tsx
 import { TimbalRuntimeProvider, Thread } from "@timbal-ai/timbal-react";
@@ -53,14 +114,63 @@ import { TimbalRuntimeProvider, Thread } from "@timbal-ai/timbal-react";
 export default function App() {
   return (
     <TimbalRuntimeProvider workforceId="your-workforce-id">
-      <div style={{ height: "100vh" }}>
-        <Thread />
+      <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
+        <header>My App</header>
+        <Thread
+          composerPlaceholder="Ask anything..."
+          className="flex-1 min-h-0"
+        />
       </div>
     </TimbalRuntimeProvider>
   );
 }
 ```
 
+#### With a custom API base URL
+
+Useful when your API is mounted at a subpath (e.g. behind a reverse proxy):
+
+```tsx
+<TimbalRuntimeProvider workforceId="your-workforce-id" baseUrl="/api">
+  <Thread />
+</TimbalRuntimeProvider>
+```
+
+#### With a custom fetch function
+
+Pass your own `fetch` to add headers, inject tokens, or proxy requests:
+
+```tsx
+import { TimbalRuntimeProvider, Thread } from "@timbal-ai/timbal-react";
+
+const myFetch: typeof fetch = (url, options) => {
+  return fetch(url, {
+    ...options,
+    headers: {
+      ...options?.headers,
+      "X-My-Header": "value",
+    },
+  });
+};
+
+<TimbalRuntimeProvider workforceId="your-workforce-id" fetch={myFetch}>
+  <Thread />
+</TimbalRuntimeProvider>
+```
+
+---
+
+### `TimbalChat` / `Thread` props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `welcome.heading` | `string` | `"How can I help you today?"` | Welcome screen heading |
+| `welcome.subheading` | `string` | `"Send a message to start a conversation."` | Welcome screen subheading |
+| `suggestions` | `{ title: string; description?: string }[]` | — | Suggestion chips on the welcome screen |
+| `composerPlaceholder` | `string` | `"Send a message..."` | Composer input placeholder |
+| `maxWidth` | `string` | `"44rem"` | Max width of the message column |
+| `className` | `string` | — | Extra classes on the root element |
+
 ### `TimbalRuntimeProvider` props
 
 | Prop | Type | Default | Description |
@@ -68,8 +178,6 @@ export default function App() {
 | `workforceId` | `string` | — | ID of the workforce to stream from |
 | `baseUrl` | `string` | `"/api"` | Base URL for API calls. Posts to `{baseUrl}/workforce/{workforceId}/stream` |
 | `fetch` | `(url, options?) => Promise<Response>` | `authFetch` | Custom fetch function. Defaults to the built-in auth-aware fetch (Bearer token + auto-refresh) |
-| `devFakeStream` | `boolean` | `false` | Enable fake streaming for local dev/testing without a backend |
-| `devFakeStreamDelayMs` | `number` | `75` | Token delay in ms for fake streaming |
 
 ---
 
@@ -82,23 +190,33 @@ The package includes a session/auth system backed by localStorage tokens. The AP
 Wrap your app with `SessionProvider` and protect routes with `AuthGuard`:
 
 ```tsx
+// src/App.tsx
 import { SessionProvider, AuthGuard, TooltipProvider } from "@timbal-ai/timbal-react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Home from "./pages/Home";
 
+// Auth is opt-in — only active when VITE_TIMBAL_PROJECT_ID is set
 const isAuthEnabled = !!import.meta.env.VITE_TIMBAL_PROJECT_ID;
 
-function App() {
+export default function App() {
   return (
     <SessionProvider enabled={isAuthEnabled}>
       <TooltipProvider>
-        <AuthGuard requireAuth enabled={isAuthEnabled}>
-          <YourApp />
-        </AuthGuard>
+        <BrowserRouter>
+          <AuthGuard requireAuth enabled={isAuthEnabled}>
+            <Routes>
+              <Route path="/" element={<Home />} />
+            </Routes>
+          </AuthGuard>
+        </BrowserRouter>
       </TooltipProvider>
     </SessionProvider>
   );
 }
 ```
 
+When `enabled` is `false` (no project ID configured), both `SessionProvider` and `AuthGuard` are transparent — no redirects, no API calls.
+
 ### `SessionProvider` props
 
 | Prop | Type | Default | Description |
@@ -114,25 +232,47 @@ function App() {
 
 ### `useSession` hook
 
+Access the current session anywhere inside `SessionProvider`:
+
 ```tsx
 import { useSession } from "@timbal-ai/timbal-react";
 
 function Header() {
   const { user, isAuthenticated, loading, logout } = useSession();
-  // ...
+
+  if (loading) return null;
+
+  return (
+    <header>
+      {isAuthenticated ? (
+        <>
+          <span>{user?.email}</span>
+          <button onClick={logout}>Log out</button>
+        </>
+      ) : (
+        <a href="/login">Log in</a>
+      )}
+    </header>
+  );
 }
 ```
 
 ### `authFetch`
 
-A drop-in replacement for `fetch` that attaches the Bearer token and auto-refreshes on 401:
+A drop-in replacement for `fetch` that attaches the Bearer token from localStorage and auto-refreshes on 401:
 
 ```tsx
 import { authFetch } from "@timbal-ai/timbal-react";
 
+// Fetch a list of workforce agents
 const res = await authFetch("/api/workforce");
+if (res.ok) {
+  const agents = await res.json();
+}
 ```
 
+It's also the default `fetch` used by `TimbalRuntimeProvider` — you only need to import it directly for your own API calls (e.g. loading workforce lists, metadata, etc.).
+
 ---
 
 ## Components
@@ -158,9 +298,74 @@ Re-exported Radix UI wrappers pre-styled to match the Timbal design system:
 
 ---
 
+## Full example
+
+A complete page with agent switching, auth, and a custom header:
+
+```tsx
+// src/pages/Home.tsx
+import { useEffect, useState } from "react";
+import type { WorkforceItem } from "@timbal-ai/timbal-sdk";
+import {
+  TimbalChat,
+  Button,
+  authFetch,
+  useSession,
+} from "@timbal-ai/timbal-react";
+import { LogOut } from "lucide-react";
+
+const isAuthEnabled = !!import.meta.env.VITE_TIMBAL_PROJECT_ID;
+
+export default function Home() {
+  const { logout } = useSession();
+  const [workforces, setWorkforces] = useState<WorkforceItem[]>([]);
+  const [selectedId, setSelectedId] = useState("");
+
+  useEffect(() => {
+    authFetch("/api/workforce")
+      .then((r) => r.json())
+      .then((data: WorkforceItem[]) => {
+        setWorkforces(data);
+        const agent = data.find((w) => w.type === "agent") ?? data[0];
+        if (agent) setSelectedId(agent.id ?? agent.name ?? "");
+      })
+      .catch(() => {});
+  }, []);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
+      <header style={{ display: "flex", justifyContent: "space-between", padding: "0.5rem 1.25rem" }}>
+        <select value={selectedId} onChange={(e) => setSelectedId(e.target.value)}>
+          {workforces.map((w) => (
+            <option key={w.id ?? w.name} value={w.id ?? w.name ?? ""}>
+              {w.name}
+            </option>
+          ))}
+        </select>
+
+        {isAuthEnabled && (
+          <Button variant="ghost" size="icon" onClick={logout}>
+            <LogOut />
+          </Button>
+        )}
+      </header>
+
+      <TimbalChat
+        workforceId={selectedId}
+        key={selectedId}
+        className="flex-1 min-h-0"
+        welcome={{ heading: "How can I help you today?" }}
+      />
+    </div>
+  );
+}
+```
+
+---
+
 ## Local development
 
-The package isn't published yet. Install it via a local path reference:
+Install via a local path reference:
 
 ```json
 // package.json

package/dist/index.cjs

@@ -49,6 +49,7 @@ __export(index_exports, {
   Shimmer: () => Shimmer,
   SyntaxHighlighter: () => syntax_highlighter_default,
   Thread: () => Thread,
+  TimbalChat: () => TimbalChat,
   TimbalRuntimeProvider: () => TimbalRuntimeProvider,
   ToolFallback: () => ToolFallback,
   Tooltip: () => Tooltip,
@@ -155,7 +156,6 @@ var fetchCurrentUser = async () => {
 
 // src/runtime/provider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var parseLine = import_timbal_sdk.parseSSELine;
 var convertMessage = (message) => ({
   role: message.role,
   content: message.content,
@@ -175,65 +175,11 @@ function getTextFromMessage(message) {
   const part = message.content.find((c) => c.type === "text");
   return part?.type === "text" ? part.text : null;
 }
-function waitWithAbort(ms, signal) {
-  if (signal.aborted) throw new DOMException("The operation was aborted.", "AbortError");
-  return new Promise((resolve, reject) => {
-    const timeoutId = setTimeout(() => {
-      signal.removeEventListener("abort", onAbort);
-      resolve();
-    }, ms);
-    const onAbort = () => {
-      clearTimeout(timeoutId);
-      reject(new DOMException("The operation was aborted.", "AbortError"));
-    };
-    signal.addEventListener("abort", onAbort, { once: true });
-  });
-}
-function buildFakeLongResponse(input) {
-  const safeInput = input.trim() || "your request";
-  const base = [
-    `Fake streaming fallback enabled. You asked: "${safeInput}".`,
-    "",
-    "This is a deliberately long response used to test rendering, scrolling, cancellation, and streaming UX behavior.",
-    "",
-    "What this stream is exercising:",
-    "- Frequent tiny token updates",
-    "- Long markdown paragraphs",
-    "- Bullet list rendering",
-    "- UI action bar behavior while running",
-    "- Stop button and abort flow",
-    "",
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae mi at augue pulvinar porta. Praesent ullamcorper felis at nibh tincidunt, id sagittis mauris interdum. Integer nec semper dui. Curabitur sed fermentum libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.",
-    "",
-    "Aliquam luctus purus non bibendum faucibus. Donec at elit eget massa feugiat ultricies. Quisque condimentum, libero in egestas varius, purus justo aliquam sem, vitae feugiat nunc lorem a justo. Sed non tempor est. In hac habitasse platea dictumst.",
-    "",
-    "If you can read this arriving progressively, the fallback is working as intended."
-  ].join("\n");
-  return `${base}
-
----
-
-${base}`;
-}
-async function streamFakeLongResponse(input, delayMs, signal, onDelta) {
-  const fullResponse = buildFakeLongResponse(input);
-  let cursor = 0;
-  while (cursor < fullResponse.length) {
-    if (signal.aborted) throw new DOMException("The operation was aborted.", "AbortError");
-    const chunkSize = Math.min(fullResponse.length - cursor, Math.floor(Math.random() * 12) + 2);
-    const delta = fullResponse.slice(cursor, cursor + chunkSize);
-    cursor += chunkSize;
-    onDelta(delta);
-    await waitWithAbort(delayMs, signal);
-  }
-}
 function TimbalRuntimeProvider({
   workforceId,
   children,
   baseUrl = "/api",
-  fetch: fetchFn,
-  devFakeStream = false,
-  devFakeStreamDelayMs = 75
+  fetch: fetchFn
 }) {
   const [messages, setMessages] = (0, import_react.useState)([]);
   const [isRunning, setIsRunning] = (0, import_react.useState)(false);
@@ -268,20 +214,6 @@ function TimbalRuntimeProvider({
         );
       };
       try {
-        if (devFakeStream) {
-          const fakeId = `call_${crypto.randomUUID().replace(/-/g, "").slice(0, 24)}`;
-          parts.push({ type: "tool-call", toolCallId: fakeId, toolName: "get_datetime", argsText: "{}" });
-          flush();
-          await waitWithAbort(2e3, signal);
-          parts[0].result = `Current datetime (from tool): ${(/* @__PURE__ */ new Date()).toISOString()}`;
-          flush();
-          await waitWithAbort(300, signal);
-          await streamFakeLongResponse(input, devFakeStreamDelayMs, signal, (delta) => {
-            lastTextPart().text += delta;
-            flush();
-          });
-          return;
-        }
         const res = await fetchFnRef.current(`${baseUrl}/workforce/${workforceId}/stream`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -303,7 +235,7 @@ function TimbalRuntimeProvider({
           const lines = buffer.split("\n");
           buffer = lines.pop() ?? "";
           for (const line of lines) {
-            const event = parseLine(line);
+            const event = (0, import_timbal_sdk.parseSSELine)(line);
             if (!event) continue;
             if (!capturedRunId && isTopLevelStart(event)) {
               capturedRunId = event.run_id;
@@ -373,7 +305,7 @@ function TimbalRuntimeProvider({
           }
         }
         if (buffer.trim()) {
-          const event = parseLine(buffer);
+          const event = (0, import_timbal_sdk.parseSSELine)(buffer);
           if (event?.type === "OUTPUT" && parts.length === 0 && event.output) {
             const text = typeof event.output === "string" ? event.output : JSON.stringify(event.output);
             parts.push({ type: "text", text });
@@ -390,7 +322,7 @@ function TimbalRuntimeProvider({
         abortRef.current = null;
       }
     },
-    [workforceId, baseUrl, devFakeStream, devFakeStreamDelayMs]
+    [workforceId, baseUrl]
   );
   const onNew = (0, import_react.useCallback)(
     async (message) => {
@@ -1336,21 +1268,28 @@ ToolFallback.displayName = "ToolFallback";
 var import_react11 = require("@assistant-ui/react");
 var import_lucide_react5 = require("lucide-react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var Thread = () => {
+var Thread = ({
+  className,
+  maxWidth = "44rem",
+  welcome,
+  suggestions,
+  composerPlaceholder = "Send a message..."
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_react11.ThreadPrimitive.Root,
     {
-      className: "aui-root aui-thread-root @container flex h-full flex-col bg-background",
-      style: {
-        ["--thread-max-width"]: "44rem"
-      },
+      className: cn(
+        "aui-root aui-thread-root @container flex h-full flex-col bg-background",
+        className
+      ),
+      style: { ["--thread-max-width"]: maxWidth },
       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         import_react11.ThreadPrimitive.Viewport,
         {
           turnAnchor: "bottom",
           className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4 pt-4",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.AuiIf, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ThreadWelcome, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.AuiIf, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ThreadWelcome, { config: welcome, suggestions }) }),
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               import_react11.ThreadPrimitive.Messages,
               {
@@ -1363,7 +1302,7 @@ var Thread = () => {
             ),
             /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react11.ThreadPrimitive.ViewportFooter, { 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__ */ (0, import_jsx_runtime12.jsx)(ThreadScrollToBottom, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Composer, {})
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Composer, { placeholder: composerPlaceholder })
             ] })
           ]
         }
@@ -1382,7 +1321,7 @@ var ThreadScrollToBottom = () => {
     }
   ) });
 };
-var ThreadWelcome = () => {
+var ThreadWelcome = ({ config, suggestions }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "aui-thread-welcome-message flex size-full flex-col items-center justify-center px-4 text-center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "fade-in animate-in fill-mode-both relative mb-6 flex size-14 items-center justify-center duration-300", children: [
@@ -1403,42 +1342,40 @@ var ThreadWelcome = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.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: "How can I help you today?" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground mt-2 delay-75 duration-200", children: "Send a message to start a conversation." })
+      /* @__PURE__ */ (0, import_jsx_runtime12.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: config?.heading ?? "How can I help you today?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground mt-2 delay-75 duration-200", children: config?.subheading ?? "Send a message to start a conversation." })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ThreadSuggestions, {})
+    suggestions && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ThreadSuggestions, { suggestions })
   ] });
 };
-var ThreadSuggestions = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "aui-thread-welcome-suggestions grid w-full @md:grid-cols-2 gap-2 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react11.ThreadPrimitive.Suggestions,
-    {
-      components: {
-        Suggestion: ThreadSuggestionItem
-      }
-    }
-  ) });
+var ThreadSuggestions = ({ suggestions }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "aui-thread-welcome-suggestions grid w-full @md:grid-cols-2 gap-2 pb-4", children: suggestions.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ThreadSuggestionItem, { title: s.title, description: s.description }, i)) });
 };
-var ThreadSuggestionItem = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 @md:nth-[n+3]:block nth-[n+3]:hidden animate-in fill-mode-both duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.SuggestionPrimitive.Trigger, { send: true, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+var ThreadSuggestionItem = ({ title, description }) => {
+  const runtime = (0, import_react11.useThreadRuntime)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 animate-in fill-mode-both duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     Button,
     {
       variant: "ghost",
       className: "aui-thread-welcome-suggestion h-auto w-full @md:flex-col flex-wrap items-start justify-start gap-1 rounded-2xl border px-4 py-3 text-left text-sm transition-colors hover:bg-muted",
+      onClick: () => runtime.append({
+        role: "user",
+        content: [{ type: "text", text: title }]
+      }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "aui-thread-welcome-suggestion-text-1 font-medium", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.SuggestionPrimitive.Title, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "aui-thread-welcome-suggestion-text-2 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.SuggestionPrimitive.Description, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "aui-thread-welcome-suggestion-text-1 font-medium", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "aui-thread-welcome-suggestion-text-2 text-muted-foreground", children: description })
       ]
     }
-  ) }) });
+  ) });
 };
-var Composer = () => {
+var Composer = ({ placeholder }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ComposerPrimitive.Root, { className: "aui-composer-root relative mt-3 flex w-full flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react11.ComposerPrimitive.AttachmentDropzone, { className: "aui-composer-attachment-dropzone flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50", children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ComposerAttachments, {}),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_react11.ComposerPrimitive.Input,
       {
-        placeholder: "Send a message...",
+        placeholder: placeholder ?? "Send a message...",
         className: "aui-composer-input mb-1 max-h-32 min-h-14 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-0",
         rows: 1,
         autoFocus: true,
@@ -1586,9 +1523,20 @@ var EditComposer = () => {
   ] }) });
 };
 
+// src/components/chat.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function TimbalChat({
+  workforceId,
+  baseUrl,
+  fetch: fetch2,
+  ...threadProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TimbalRuntimeProvider, { workforceId, baseUrl, fetch: fetch2, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Thread, { ...threadProps }) });
+}
+
 // src/auth/provider.tsx
 var import_react12 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var SessionContext = (0, import_react12.createContext)(void 0);
 var useSession = () => {
   const context = (0, import_react12.useContext)(SessionContext);
@@ -1652,7 +1600,7 @@ var SessionProvider = ({
       () => window.location.href = `/api/auth/login?return_to=${returnTo}`
     );
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     SessionContext.Provider,
     {
       value: {
@@ -1668,7 +1616,7 @@ var SessionProvider = ({
 
 // src/auth/guard.tsx
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var AuthGuard = ({
   children,
   requireAuth = false,
@@ -1679,7 +1627,7 @@ var AuthGuard = ({
     return children;
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.Loader2, { className: "w-8 h-8 animate-spin" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.Loader2, { className: "w-8 h-8 animate-spin" }) });
   }
   if (requireAuth && !isAuthenticated) {
     const returnTo = encodeURIComponent(
@@ -1711,6 +1659,7 @@ var AuthGuard = ({
   Shimmer,
   SyntaxHighlighter,
   Thread,
+  TimbalChat,
   TimbalRuntimeProvider,
   ToolFallback,
   Tooltip,

package/dist/index.d.cts

@@ -23,14 +23,33 @@ interface TimbalRuntimeProviderProps {
      * attaches Bearer tokens from localStorage and auto-refreshes on 401.
      */
     fetch?: FetchFn;
-    /** Enable fake streaming for development/testing. Default: false */
-    devFakeStream?: boolean;
-    /** Token delay in ms for fake streaming. Default: 75 */
-    devFakeStreamDelayMs?: number;
 }
-declare function TimbalRuntimeProvider({ workforceId, children, baseUrl, fetch: fetchFn, devFakeStream, devFakeStreamDelayMs, }: TimbalRuntimeProviderProps): react_jsx_runtime.JSX.Element;
+declare function TimbalRuntimeProvider({ workforceId, children, baseUrl, fetch: fetchFn, }: TimbalRuntimeProviderProps): react_jsx_runtime.JSX.Element;
 
-declare const Thread: FC;
+interface ThreadSuggestion {
+    title: string;
+    description?: string;
+}
+interface ThreadWelcomeConfig {
+    heading?: string;
+    subheading?: string;
+}
+interface ThreadProps {
+    className?: string;
+    /** Max width of the message column. Default: "44rem" */
+    maxWidth?: string;
+    /** Welcome screen text */
+    welcome?: ThreadWelcomeConfig;
+    /** Suggestion chips shown on the welcome screen */
+    suggestions?: ThreadSuggestion[];
+    /** Composer input placeholder. Default: "Send a message..." */
+    composerPlaceholder?: string;
+}
+declare const Thread: FC<ThreadProps>;
+
+interface TimbalChatProps extends Omit<TimbalRuntimeProviderProps, "children">, ThreadProps {
+}
+declare function TimbalChat({ workforceId, baseUrl, fetch, ...threadProps }: TimbalChatProps): react_jsx_runtime.JSX.Element;
 
 declare const MarkdownText: React.MemoExoticComponent<() => react_jsx_runtime.JSX.Element>;
 
@@ -117,4 +136,4 @@ declare const Shimmer: React.MemoExoticComponent<({ children, as: Component, cla
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AuthGuard, Avatar, AvatarFallback, AvatarImage, Button, ComposerAddAttachment, ComposerAttachments, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MarkdownText, SessionProvider, Shimmer, ShikiSyntaxHighlighter as SyntaxHighlighter, type TextShimmerProps, Thread, TimbalRuntimeProvider, type TimbalRuntimeProviderProps, ToolFallback, Tooltip, TooltipContent, TooltipIconButton, type TooltipIconButtonProps, TooltipProvider, TooltipTrigger, UserMessageAttachments, authFetch, buttonVariants, clearTokens, cn, fetchCurrentUser, getAccessToken, getRefreshToken, refreshAccessToken, useSession };
+export { AuthGuard, Avatar, AvatarFallback, AvatarImage, Button, ComposerAddAttachment, ComposerAttachments, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MarkdownText, SessionProvider, Shimmer, ShikiSyntaxHighlighter as SyntaxHighlighter, type TextShimmerProps, Thread, type ThreadProps, type ThreadSuggestion, type ThreadWelcomeConfig, TimbalChat, type TimbalChatProps, TimbalRuntimeProvider, type TimbalRuntimeProviderProps, ToolFallback, Tooltip, TooltipContent, TooltipIconButton, type TooltipIconButtonProps, TooltipProvider, TooltipTrigger, UserMessageAttachments, authFetch, buttonVariants, clearTokens, cn, fetchCurrentUser, getAccessToken, getRefreshToken, refreshAccessToken, useSession };

package/dist/index.d.ts

@@ -23,14 +23,33 @@ interface TimbalRuntimeProviderProps {
      * attaches Bearer tokens from localStorage and auto-refreshes on 401.
      */
     fetch?: FetchFn;
-    /** Enable fake streaming for development/testing. Default: false */
-    devFakeStream?: boolean;
-    /** Token delay in ms for fake streaming. Default: 75 */
-    devFakeStreamDelayMs?: number;
 }
-declare function TimbalRuntimeProvider({ workforceId, children, baseUrl, fetch: fetchFn, devFakeStream, devFakeStreamDelayMs, }: TimbalRuntimeProviderProps): react_jsx_runtime.JSX.Element;
+declare function TimbalRuntimeProvider({ workforceId, children, baseUrl, fetch: fetchFn, }: TimbalRuntimeProviderProps): react_jsx_runtime.JSX.Element;
 
-declare const Thread: FC;
+interface ThreadSuggestion {
+    title: string;
+    description?: string;
+}
+interface ThreadWelcomeConfig {
+    heading?: string;
+    subheading?: string;
+}
+interface ThreadProps {
+    className?: string;
+    /** Max width of the message column. Default: "44rem" */
+    maxWidth?: string;
+    /** Welcome screen text */
+    welcome?: ThreadWelcomeConfig;
+    /** Suggestion chips shown on the welcome screen */
+    suggestions?: ThreadSuggestion[];
+    /** Composer input placeholder. Default: "Send a message..." */
+    composerPlaceholder?: string;
+}
+declare const Thread: FC<ThreadProps>;
+
+interface TimbalChatProps extends Omit<TimbalRuntimeProviderProps, "children">, ThreadProps {
+}
+declare function TimbalChat({ workforceId, baseUrl, fetch, ...threadProps }: TimbalChatProps): react_jsx_runtime.JSX.Element;
 
 declare const MarkdownText: React.MemoExoticComponent<() => react_jsx_runtime.JSX.Element>;
 
@@ -117,4 +136,4 @@ declare const Shimmer: React.MemoExoticComponent<({ children, as: Component, cla
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AuthGuard, Avatar, AvatarFallback, AvatarImage, Button, ComposerAddAttachment, ComposerAttachments, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MarkdownText, SessionProvider, Shimmer, ShikiSyntaxHighlighter as SyntaxHighlighter, type TextShimmerProps, Thread, TimbalRuntimeProvider, type TimbalRuntimeProviderProps, ToolFallback, Tooltip, TooltipContent, TooltipIconButton, type TooltipIconButtonProps, TooltipProvider, TooltipTrigger, UserMessageAttachments, authFetch, buttonVariants, clearTokens, cn, fetchCurrentUser, getAccessToken, getRefreshToken, refreshAccessToken, useSession };
+export { AuthGuard, Avatar, AvatarFallback, AvatarImage, Button, ComposerAddAttachment, ComposerAttachments, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MarkdownText, SessionProvider, Shimmer, ShikiSyntaxHighlighter as SyntaxHighlighter, type TextShimmerProps, Thread, type ThreadProps, type ThreadSuggestion, type ThreadWelcomeConfig, TimbalChat, type TimbalChatProps, TimbalRuntimeProvider, type TimbalRuntimeProviderProps, ToolFallback, Tooltip, TooltipContent, TooltipIconButton, type TooltipIconButtonProps, TooltipProvider, TooltipTrigger, UserMessageAttachments, authFetch, buttonVariants, clearTokens, cn, fetchCurrentUser, getAccessToken, getRefreshToken, refreshAccessToken, useSession };

package/dist/index.esm.js

@@ -87,7 +87,6 @@ var fetchCurrentUser = async () => {
 
 // src/runtime/provider.tsx
 import { jsx } from "react/jsx-runtime";
-var parseLine = parseSSELine;
 var convertMessage = (message) => ({
   role: message.role,
   content: message.content,
@@ -107,65 +106,11 @@ function getTextFromMessage(message) {
   const part = message.content.find((c) => c.type === "text");
   return part?.type === "text" ? part.text : null;
 }
-function waitWithAbort(ms, signal) {
-  if (signal.aborted) throw new DOMException("The operation was aborted.", "AbortError");
-  return new Promise((resolve, reject) => {
-    const timeoutId = setTimeout(() => {
-      signal.removeEventListener("abort", onAbort);
-      resolve();
-    }, ms);
-    const onAbort = () => {
-      clearTimeout(timeoutId);
-      reject(new DOMException("The operation was aborted.", "AbortError"));
-    };
-    signal.addEventListener("abort", onAbort, { once: true });
-  });
-}
-function buildFakeLongResponse(input) {
-  const safeInput = input.trim() || "your request";
-  const base = [
-    `Fake streaming fallback enabled. You asked: "${safeInput}".`,
-    "",
-    "This is a deliberately long response used to test rendering, scrolling, cancellation, and streaming UX behavior.",
-    "",
-    "What this stream is exercising:",
-    "- Frequent tiny token updates",
-    "- Long markdown paragraphs",
-    "- Bullet list rendering",
-    "- UI action bar behavior while running",
-    "- Stop button and abort flow",
-    "",
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae mi at augue pulvinar porta. Praesent ullamcorper felis at nibh tincidunt, id sagittis mauris interdum. Integer nec semper dui. Curabitur sed fermentum libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.",
-    "",
-    "Aliquam luctus purus non bibendum faucibus. Donec at elit eget massa feugiat ultricies. Quisque condimentum, libero in egestas varius, purus justo aliquam sem, vitae feugiat nunc lorem a justo. Sed non tempor est. In hac habitasse platea dictumst.",
-    "",
-    "If you can read this arriving progressively, the fallback is working as intended."
-  ].join("\n");
-  return `${base}
-
----
-
-${base}`;
-}
-async function streamFakeLongResponse(input, delayMs, signal, onDelta) {
-  const fullResponse = buildFakeLongResponse(input);
-  let cursor = 0;
-  while (cursor < fullResponse.length) {
-    if (signal.aborted) throw new DOMException("The operation was aborted.", "AbortError");
-    const chunkSize = Math.min(fullResponse.length - cursor, Math.floor(Math.random() * 12) + 2);
-    const delta = fullResponse.slice(cursor, cursor + chunkSize);
-    cursor += chunkSize;
-    onDelta(delta);
-    await waitWithAbort(delayMs, signal);
-  }
-}
 function TimbalRuntimeProvider({
   workforceId,
   children,
   baseUrl = "/api",
-  fetch: fetchFn,
-  devFakeStream = false,
-  devFakeStreamDelayMs = 75
+  fetch: fetchFn
 }) {
   const [messages, setMessages] = useState([]);
   const [isRunning, setIsRunning] = useState(false);
@@ -200,20 +145,6 @@ function TimbalRuntimeProvider({
         );
       };
       try {
-        if (devFakeStream) {
-          const fakeId = `call_${crypto.randomUUID().replace(/-/g, "").slice(0, 24)}`;
-          parts.push({ type: "tool-call", toolCallId: fakeId, toolName: "get_datetime", argsText: "{}" });
-          flush();
-          await waitWithAbort(2e3, signal);
-          parts[0].result = `Current datetime (from tool): ${(/* @__PURE__ */ new Date()).toISOString()}`;
-          flush();
-          await waitWithAbort(300, signal);
-          await streamFakeLongResponse(input, devFakeStreamDelayMs, signal, (delta) => {
-            lastTextPart().text += delta;
-            flush();
-          });
-          return;
-        }
         const res = await fetchFnRef.current(`${baseUrl}/workforce/${workforceId}/stream`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -235,7 +166,7 @@ function TimbalRuntimeProvider({
           const lines = buffer.split("\n");
           buffer = lines.pop() ?? "";
           for (const line of lines) {
-            const event = parseLine(line);
+            const event = parseSSELine(line);
             if (!event) continue;
             if (!capturedRunId && isTopLevelStart(event)) {
               capturedRunId = event.run_id;
@@ -305,7 +236,7 @@ function TimbalRuntimeProvider({
           }
         }
         if (buffer.trim()) {
-          const event = parseLine(buffer);
+          const event = parseSSELine(buffer);
           if (event?.type === "OUTPUT" && parts.length === 0 && event.output) {
             const text = typeof event.output === "string" ? event.output : JSON.stringify(event.output);
             parts.push({ type: "text", text });
@@ -322,7 +253,7 @@ function TimbalRuntimeProvider({
         abortRef.current = null;
       }
     },
-    [workforceId, baseUrl, devFakeStream, devFakeStreamDelayMs]
+    [workforceId, baseUrl]
   );
   const onNew = useCallback(
     async (message) => {
@@ -1285,8 +1216,8 @@ import {
   ComposerPrimitive as ComposerPrimitive2,
   ErrorPrimitive,
   MessagePrimitive as MessagePrimitive2,
-  SuggestionPrimitive,
-  ThreadPrimitive
+  ThreadPrimitive,
+  useThreadRuntime
 } from "@assistant-ui/react";
 import {
   ArrowDownIcon,
@@ -1300,21 +1231,28 @@ import {
   SquareIcon
 } from "lucide-react";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var Thread = () => {
+var Thread = ({
+  className,
+  maxWidth = "44rem",
+  welcome,
+  suggestions,
+  composerPlaceholder = "Send a message..."
+}) => {
   return /* @__PURE__ */ jsx12(
     ThreadPrimitive.Root,
     {
-      className: "aui-root aui-thread-root @container flex h-full flex-col bg-background",
-      style: {
-        ["--thread-max-width"]: "44rem"
-      },
+      className: cn(
+        "aui-root aui-thread-root @container flex h-full flex-col bg-background",
+        className
+      ),
+      style: { ["--thread-max-width"]: maxWidth },
       children: /* @__PURE__ */ jsxs7(
         ThreadPrimitive.Viewport,
         {
           turnAnchor: "bottom",
           className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4 pt-4",
           children: [
-            /* @__PURE__ */ jsx12(AuiIf, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ jsx12(ThreadWelcome, {}) }),
+            /* @__PURE__ */ jsx12(AuiIf, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ jsx12(ThreadWelcome, { config: welcome, suggestions }) }),
             /* @__PURE__ */ jsx12(
               ThreadPrimitive.Messages,
               {
@@ -1327,7 +1265,7 @@ var Thread = () => {
             ),
             /* @__PURE__ */ jsxs7(ThreadPrimitive.ViewportFooter, { 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__ */ jsx12(ThreadScrollToBottom, {}),
-              /* @__PURE__ */ jsx12(Composer, {})
+              /* @__PURE__ */ jsx12(Composer, { placeholder: composerPlaceholder })
             ] })
           ]
         }
@@ -1346,7 +1284,7 @@ var ThreadScrollToBottom = () => {
     }
   ) });
 };
-var ThreadWelcome = () => {
+var ThreadWelcome = ({ config, suggestions }) => {
   return /* @__PURE__ */ jsxs7("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
     /* @__PURE__ */ jsx12("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxs7("div", { className: "aui-thread-welcome-message flex size-full flex-col items-center justify-center px-4 text-center", children: [
       /* @__PURE__ */ jsxs7("div", { className: "fade-in animate-in fill-mode-both relative mb-6 flex size-14 items-center justify-center duration-300", children: [
@@ -1367,42 +1305,40 @@ var ThreadWelcome = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx12("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: "How can I help you today?" }),
-      /* @__PURE__ */ jsx12("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground mt-2 delay-75 duration-200", children: "Send a message to start a conversation." })
+      /* @__PURE__ */ jsx12("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: config?.heading ?? "How can I help you today?" }),
+      /* @__PURE__ */ jsx12("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground mt-2 delay-75 duration-200", children: config?.subheading ?? "Send a message to start a conversation." })
     ] }) }),
-    /* @__PURE__ */ jsx12(ThreadSuggestions, {})
+    suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx12(ThreadSuggestions, { suggestions })
   ] });
 };
-var ThreadSuggestions = () => {
-  return /* @__PURE__ */ jsx12("div", { className: "aui-thread-welcome-suggestions grid w-full @md:grid-cols-2 gap-2 pb-4", children: /* @__PURE__ */ jsx12(
-    ThreadPrimitive.Suggestions,
-    {
-      components: {
-        Suggestion: ThreadSuggestionItem
-      }
-    }
-  ) });
+var ThreadSuggestions = ({ suggestions }) => {
+  return /* @__PURE__ */ jsx12("div", { className: "aui-thread-welcome-suggestions grid w-full @md:grid-cols-2 gap-2 pb-4", children: suggestions.map((s, i) => /* @__PURE__ */ jsx12(ThreadSuggestionItem, { title: s.title, description: s.description }, i)) });
 };
-var ThreadSuggestionItem = () => {
-  return /* @__PURE__ */ jsx12("div", { className: "aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 @md:nth-[n+3]:block nth-[n+3]:hidden animate-in fill-mode-both duration-200", children: /* @__PURE__ */ jsx12(SuggestionPrimitive.Trigger, { send: true, asChild: true, children: /* @__PURE__ */ jsxs7(
+var ThreadSuggestionItem = ({ title, description }) => {
+  const runtime = useThreadRuntime();
+  return /* @__PURE__ */ jsx12("div", { className: "aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 animate-in fill-mode-both duration-200", children: /* @__PURE__ */ jsxs7(
     Button,
     {
       variant: "ghost",
       className: "aui-thread-welcome-suggestion h-auto w-full @md:flex-col flex-wrap items-start justify-start gap-1 rounded-2xl border px-4 py-3 text-left text-sm transition-colors hover:bg-muted",
+      onClick: () => runtime.append({
+        role: "user",
+        content: [{ type: "text", text: title }]
+      }),
       children: [
-        /* @__PURE__ */ jsx12("span", { className: "aui-thread-welcome-suggestion-text-1 font-medium", children: /* @__PURE__ */ jsx12(SuggestionPrimitive.Title, {}) }),
-        /* @__PURE__ */ jsx12("span", { className: "aui-thread-welcome-suggestion-text-2 text-muted-foreground", children: /* @__PURE__ */ jsx12(SuggestionPrimitive.Description, {}) })
+        /* @__PURE__ */ jsx12("span", { className: "aui-thread-welcome-suggestion-text-1 font-medium", children: title }),
+        description && /* @__PURE__ */ jsx12("span", { className: "aui-thread-welcome-suggestion-text-2 text-muted-foreground", children: description })
       ]
     }
-  ) }) });
+  ) });
 };
-var Composer = () => {
+var Composer = ({ placeholder }) => {
   return /* @__PURE__ */ jsx12(ComposerPrimitive2.Root, { className: "aui-composer-root relative mt-3 flex w-full flex-col", children: /* @__PURE__ */ jsxs7(ComposerPrimitive2.AttachmentDropzone, { className: "aui-composer-attachment-dropzone flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50", children: [
     /* @__PURE__ */ jsx12(ComposerAttachments, {}),
     /* @__PURE__ */ jsx12(
       ComposerPrimitive2.Input,
       {
-        placeholder: "Send a message...",
+        placeholder: placeholder ?? "Send a message...",
         className: "aui-composer-input mb-1 max-h-32 min-h-14 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-0",
         rows: 1,
         autoFocus: true,
@@ -1550,6 +1486,17 @@ var EditComposer = () => {
   ] }) });
 };
 
+// src/components/chat.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function TimbalChat({
+  workforceId,
+  baseUrl,
+  fetch: fetch2,
+  ...threadProps
+}) {
+  return /* @__PURE__ */ jsx13(TimbalRuntimeProvider, { workforceId, baseUrl, fetch: fetch2, children: /* @__PURE__ */ jsx13(Thread, { ...threadProps }) });
+}
+
 // src/auth/provider.tsx
 import {
   createContext,
@@ -1558,7 +1505,7 @@ import {
   useEffect as useEffect4,
   useState as useState5
 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var SessionContext = createContext(void 0);
 var useSession = () => {
   const context = useContext(SessionContext);
@@ -1622,7 +1569,7 @@ var SessionProvider = ({
       () => window.location.href = `/api/auth/login?return_to=${returnTo}`
     );
   }, []);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     SessionContext.Provider,
     {
       value: {
@@ -1638,7 +1585,7 @@ var SessionProvider = ({
 
 // src/auth/guard.tsx
 import { Loader2 } from "lucide-react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var AuthGuard = ({
   children,
   requireAuth = false,
@@ -1649,7 +1596,7 @@ var AuthGuard = ({
     return children;
   }
   if (loading) {
-    return /* @__PURE__ */ jsx14("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ jsx14(Loader2, { className: "w-8 h-8 animate-spin" }) });
+    return /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ jsx15(Loader2, { className: "w-8 h-8 animate-spin" }) });
   }
   if (requireAuth && !isAuthenticated) {
     const returnTo = encodeURIComponent(
@@ -1680,6 +1627,7 @@ export {
   Shimmer,
   syntax_highlighter_default as SyntaxHighlighter,
   Thread,
+  TimbalChat,
   TimbalRuntimeProvider,
   ToolFallback,
   Tooltip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timbal-ai/timbal-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React components and runtime for building Timbal chat UIs",
   "type": "module",
   "main": "dist/index.cjs",