@timbal-ai/timbal-react 0.1.0 → 0.1.1

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
@@ -68,8 +68,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 |
 
 ---
 
@@ -160,7 +158,7 @@ Re-exported Radix UI wrappers pre-styled to match the Timbal design system:
 
 ## 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

@@ -155,7 +155,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 +174,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 +213,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 +234,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 +304,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 +321,7 @@ function TimbalRuntimeProvider({
         abortRef.current = null;
       }
     },
-    [workforceId, baseUrl, devFakeStream, devFakeStreamDelayMs]
+    [workforceId, baseUrl]
   );
   const onNew = (0, import_react.useCallback)(
     async (message) => {

package/dist/index.d.cts

@@ -23,12 +23,8 @@ 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;
 

package/dist/index.d.ts

@@ -23,12 +23,8 @@ 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;
 

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) => {

package/package.json

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