@fluxy-chat/ui-kit 0.1.2 → 0.1.3

package/README.md

@@ -18,7 +18,7 @@ import { FluxyChatWidget } from "@fluxy-chat/ui-kit";
 <FluxyChatWidget
   roomId="general"
   workerUrl={process.env.NEXT_PUBLIC_FLUXYCHAT_WORKER_URL!}
-  token={memberJwt}
+  guest
   theme="brand"
   height={520}
 />
@@ -50,7 +50,7 @@ return <Thread runtime={runtime} />;
 ## CLI
 
 ```bash
-npx create-fluxy-chat my-chat --minimal
+npx @fluxy-chat/create-fluxy-chat@latest my-chat --minimal
 ```
 
 Generates Vite + `FluxyChatWidget` only (no platform modules).

package/dist/fluxy-chat-widget.d.ts

@@ -7,10 +7,13 @@ export interface FluxyChatWidgetProps {
     workerUrl?: string;
     token?: string;
     userId?: string;
+    /** Join a public room with joinPublicRoomAsGuest (no member JWT). */
+    guest?: boolean;
+    displayName?: string;
     theme?: FluxyThemeId;
     className?: string;
     height?: string | number;
     title?: string;
 }
 /** Drop-in chat widget — polished UI out of the box. */
-export declare function FluxyChatWidget({ roomId, client: clientProp, workerUrl, token, userId, theme, className, height, title, }: FluxyChatWidgetProps): import("react/jsx-runtime").JSX.Element;
+export declare function FluxyChatWidget({ roomId, client: clientProp, workerUrl, token, userId, guest, displayName, theme, className, height, title, }: FluxyChatWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/fluxy-chat-widget.js

@@ -1,10 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { FluxyChatClient } from "@fluxy-chat/sdk";
 import { useChat } from "@fluxy-chat/react";
 import { ChatWindow, applyFluxyTheme, fluxyThemeClassName, } from "@fluxy-chat/ui";
-import { useEffect } from "react";
 function WidgetInner({ roomId, title, client, }) {
     const { messages, sendMessage, connectionState, typingUsers, online } = useChat({
         roomId,
@@ -14,8 +13,8 @@ function WidgetInner({ roomId, title, client, }) {
     return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [title && (_jsxs("header", { className: "border-b border-border px-4 py-2 text-sm font-semibold", children: [title, _jsx("span", { className: "ml-2 font-normal text-muted-foreground", children: connectionState.status })] })), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(ChatWindow, { messages: messages, online: online, typingUsers: typingUsers, onSend: (text) => sendMessage(text) }) })] }));
 }
 /** Drop-in chat widget — polished UI out of the box. */
-export function FluxyChatWidget({ roomId, client: clientProp, workerUrl, token, userId = "user-1", theme = "default", className, height = 480, title, }) {
-    const client = useMemo(() => {
+export function FluxyChatWidget({ roomId, client: clientProp, workerUrl, token, userId = "user-1", guest = false, displayName, theme = "default", className, height = 480, title, }) {
+    const tokenClient = useMemo(() => {
         if (clientProp)
             return clientProp;
         if (!workerUrl?.trim() || !token?.trim())
@@ -26,12 +25,49 @@ export function FluxyChatWidget({ roomId, client: clientProp, workerUrl, token,
             token: token.trim(),
         });
     }, [clientProp, workerUrl, token, userId]);
+    const [guestClient, setGuestClient] = useState(null);
+    const [guestError, setGuestError] = useState(null);
     useEffect(() => {
         applyFluxyTheme(theme);
     }, [theme]);
+    useEffect(() => {
+        if (clientProp || token?.trim() || !guest || !workerUrl?.trim()) {
+            setGuestClient(null);
+            setGuestError(null);
+            return;
+        }
+        let cancelled = false;
+        void FluxyChatClient.joinPublicRoomAsGuest(workerUrl.trim(), roomId, { displayName })
+            .then((session) => {
+            if (cancelled)
+                return;
+            setGuestClient(new FluxyChatClient({
+                baseUrl: workerUrl.trim(),
+                userId: session.userId,
+                token: session.token,
+            }));
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            setGuestError(err instanceof Error ? err.message : "Guest join failed");
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [clientProp, token, guest, workerUrl, roomId, displayName]);
+    const client = tokenClient ?? guestClient;
     if (!client) {
-        return (_jsx("div", { className: className, style: { height, padding: 16, border: "1px solid #e4e4e7", borderRadius: 12 }, children: _jsxs("p", { style: { margin: 0, fontSize: 14 }, children: ["Set ", _jsx("code", { children: "workerUrl" }), " and ", _jsx("code", { children: "token" }), ", or pass a ", _jsx("code", { children: "client" }), "."] }) }));
+        return (_jsx("div", { className: className, style: { height, padding: 16, border: "1px solid #e4e4e7", borderRadius: 12 }, children: _jsx("p", { style: { margin: 0, fontSize: 14 }, children: guestError ??
+                    "Set workerUrl plus token, pass guest on a public room, or pass a client." }) }));
     }
     const h = typeof height === "number" ? `${height}px` : height;
-    return (_jsx("div", { className: [fluxyThemeClassName(theme), className].filter(Boolean).join(" "), style: { height: h, display: "flex", flexDirection: "column", overflow: "hidden", borderRadius: 12, border: "1px solid #e4e4e7" }, children: _jsx(WidgetInner, { roomId: roomId, title: title ?? roomId, client: client }) }));
+    return (_jsx("div", { className: [fluxyThemeClassName(theme), className].filter(Boolean).join(" "), style: {
+            height: h,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            borderRadius: 12,
+            border: "1px solid #e4e4e7",
+        }, children: _jsx(WidgetInner, { roomId: roomId, title: title ?? roomId, client: client }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluxy-chat/ui-kit",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Polished drop-in FluxyChat widget and inbox — built on @fluxy-chat/ui with optional assistant-ui runtime",
   "license": "MIT",
   "type": "module",
@@ -19,7 +19,7 @@
   ],
   "peerDependencies": {
     "react": ">=18",
-    "@fluxy-chat/sdk": "^0.6.4",
+    "@fluxy-chat/sdk": "^0.6.5",
     "@fluxy-chat/react": "^0.1.4",
     "@fluxy-chat/ui": "^0.1.4",
     "@assistant-ui/react": ">=0.10.0"
@@ -30,7 +30,7 @@
     }
   },
   "dependencies": {
-    "@fluxy-chat/sdk": "0.6.4",
+    "@fluxy-chat/sdk": "0.6.5",
     "@fluxy-chat/react": "0.1.4",
     "@fluxy-chat/ui": "0.1.4"
   },