@melony/react 0.1.54 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # @melony/react
 
-React UI + providers/hooks for building chat experiences on top of **Melony’s event stream**, including automatic rendering for **Server‑Driven UI (SDUI)** (`event.ui`).
+React UI + providers/hooks for building chat experiences on top of **Melony’s event stream**.
 
 ## Installation
 
@@ -11,27 +11,22 @@ npm install @melony/react melony react
 ## Quick start
 
 ```tsx
-import React from "react";
 import { MelonyClient } from "melony/client";
-import { MelonyClientProvider, Thread } from "@melony/react";
+import { MelonyProvider } from "@melony/react";
 
-const client = new MelonyClient({
-  url: "/api/chat",
-});
+const client = new MelonyClient({ url: "/api/chat" });
 
 export default function App() {
   return (
-    <MelonyClientProvider client={client}>
-      <Thread />
-    </MelonyClientProvider>
+    <MelonyProvider client={client}>
+      {/* Your components */}
+    </MelonyProvider>
   );
 }
 ```
 
 ### Send a message from UI
 
-`Thread` already wires this up, but if you want manual control:
-
 ```tsx
 import { useMelony } from "@melony/react";
 
@@ -41,7 +36,7 @@ function Controls() {
     <button
       disabled={isLoading}
       onClick={() =>
-        sendEvent({ type: "text", role: "user", data: { content: "Hello!" } })
+        sendEvent({ type: "text", data: { content: "Hello!" } })
       }
     >
       Send
@@ -50,46 +45,30 @@ function Controls() {
 }
 ```
 
-## Components
-
-- **`Thread`**: a full chat thread (composer + message list + streaming).
-- **`ChatSidebar`**: a sidebar-style chat UI container.
-- **`ChatFull` / `ChatPopup`**: ready-to-embed layouts (see exports).
-- **`UIRenderer`**: renders SDUI `UINode` trees from `melony`.
-
 ## Providers & hooks
 
-- **`MelonyClientProvider`** + **`useMelony()`**
-  - wraps a `MelonyClient` from `melony/client`
-  - exposes `events`, `messages`, `isLoading`, `error`, and `sendEvent()`
-
-- **`ThreadProvider`** + **`useThreads()`** (optional)
-  - adds “thread list / active thread” state
-  - you bring a `ThreadService` (load threads, load events, delete thread, etc.)
-
-- **`AuthProvider`** + **`useAuth()`** (optional)
-  - plug in an `AuthService` (login/logout/me/token) for authenticated apps
+- **`MelonyProvider`** + **`useMelony()`**
+  - Connects to a Melony runtime endpoint.
+  - Exposes `events`, `isLoading`, `error`, and `sendEvent()`.
 
-## SDUI (Server‑Driven UI)
+## Event Stream & UI
 
-If the backend yields events with `event.ui`, Melony React renders them automatically inside assistant messages.
+Melony React provides the foundation for building interactive agent UIs. You can listen to the event stream via `useMelony()` and render your own components based on the event types.
 
-Backend example:
-
-```ts
-import { ui } from "melony";
-
-yield {
-  type: "ui",
-  ui: ui.card({
-    title: "Weather",
-    children: [ui.text("72°F and sunny")],
-  }),
-};
+```tsx
+const { events } = useMelony();
+
+return (
+  <div>
+    {events.map(event => {
+      if (event.type === "text") return <Text key={event.id} content={event.data.content} />;
+      if (event.type === "custom-ui") return <MyCustomUI key={event.id} {...event.data} />;
+      return null;
+    })}
+  </div>
+);
 ```
 
-Frontend: no extra work — it shows up in the message stream.
-
 ## Development
 
 ```bash