@fluxy-chat/ui-kit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fluxychat contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,56 @@
+# @fluxy-chat/ui-kit
+
+Drop-in **polished chat widget** and **inbox panel** for FluxyChat — closes the "headless only" gap vs hosted SDKs.
+
+Built on `@fluxy-chat/ui` + `@fluxy-chat/react`. Optional bridge to [`assistant-ui`](https://assistant-ui.com) via `useFluxyAssistantRuntime`.
+
+## Install
+
+```bash
+pnpm add @fluxy-chat/ui-kit @fluxy-chat/ui @fluxy-chat/react @fluxy-chat/sdk
+```
+
+## FluxyChatWidget (3 lines)
+
+```tsx
+import { FluxyChatWidget } from "@fluxy-chat/ui-kit";
+
+<FluxyChatWidget
+  roomId="general"
+  workerUrl={process.env.NEXT_PUBLIC_FLUXYCHAT_WORKER_URL!}
+  token={memberJwt}
+  theme="brand"
+  height={520}
+/>
+```
+
+## Inbox
+
+```tsx
+import { FluxyInboxPanel } from "@fluxy-chat/ui-kit";
+
+<FluxyInboxPanel workerUrl={url} token={jwt} onSelectItem={(item) => openRoom(item.roomId)} />
+```
+
+## assistant-ui (optional)
+
+```bash
+pnpm add @assistant-ui/react
+```
+
+```tsx
+import { useExternalStoreRuntime, Thread } from "@assistant-ui/react";
+import { useFluxyAssistantRuntime } from "@fluxy-chat/ui-kit";
+
+const { externalStoreProps } = useFluxyAssistantRuntime({ roomId, client });
+const runtime = useExternalStoreRuntime(externalStoreProps);
+return <Thread runtime={runtime} />;
+```
+
+## CLI
+
+```bash
+npx create-fluxy-chat my-chat --minimal
+```
+
+Generates Vite + `FluxyChatWidget` only (no platform modules).

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

@@ -0,0 +1,16 @@
+import { FluxyChatClient } from "@fluxy-chat/sdk";
+import type { FluxyThemeId } from "@fluxy-chat/ui";
+export interface FluxyChatWidgetProps {
+    roomId: string;
+    /** Pre-built client — preferred when sharing with inbox */
+    client?: FluxyChatClient;
+    workerUrl?: string;
+    token?: string;
+    userId?: 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;

package/dist/fluxy-chat-widget.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } 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,
+        client,
+        markReadLatest: true,
+    });
+    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(() => {
+        if (clientProp)
+            return clientProp;
+        if (!workerUrl?.trim() || !token?.trim())
+            return null;
+        return new FluxyChatClient({
+            baseUrl: workerUrl.trim(),
+            userId,
+            token: token.trim(),
+        });
+    }, [clientProp, workerUrl, token, userId]);
+    useEffect(() => {
+        applyFluxyTheme(theme);
+    }, [theme]);
+    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" }), "."] }) }));
+    }
+    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 }) }));
+}

package/dist/fluxy-inbox-panel.d.ts

@@ -0,0 +1,13 @@
+import { FluxyChatClient } from "@fluxy-chat/sdk";
+import type { FluxyInboxItem } from "@fluxy-chat/react";
+export interface FluxyInboxPanelProps {
+    client?: FluxyChatClient;
+    workerUrl?: string;
+    token?: string;
+    userId?: string;
+    onSelectItem?: (item: FluxyInboxItem) => void;
+    className?: string;
+    height?: string | number;
+}
+/** Unified inbox panel with unseen badge and mark-read. */
+export declare function FluxyInboxPanel({ client: clientProp, workerUrl, token, userId, onSelectItem, className, height, }: FluxyInboxPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/fluxy-inbox-panel.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { FluxyChatClient } from "@fluxy-chat/sdk";
+import { useInbox } from "@fluxy-chat/react";
+function InboxList({ onSelectItem, client, }) {
+    const { items, unseen } = useInbox({
+        client,
+        onItem: (item) => onSelectItem?.(item),
+    });
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("header", { className: "flex items-center justify-between border-b px-4 py-2 text-sm font-semibold", children: [_jsx("span", { children: "Inbox" }), unseen > 0 && (_jsx("span", { className: "rounded-full bg-orange-500 px-2 py-0.5 text-xs text-white", children: unseen }))] }), _jsxs("ul", { className: "flex-1 overflow-y-auto p-2", children: [items.length === 0 && (_jsx("li", { className: "p-4 text-center text-sm text-muted-foreground", children: "No items yet" })), items.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "mb-1 w-full rounded-lg border border-transparent px-3 py-2 text-left text-sm hover:bg-muted", onClick: () => onSelectItem?.(item), children: [_jsx("div", { className: "font-medium", children: item.roomName ?? item.kind }), _jsx("div", { className: "text-xs text-muted-foreground", children: item.roomId })] }) }, item.id)))] })] }));
+}
+/** Unified inbox panel with unseen badge and mark-read. */
+export function FluxyInboxPanel({ client: clientProp, workerUrl, token, userId = "user-1", onSelectItem, className, height = 360, }) {
+    const client = useMemo(() => {
+        if (clientProp)
+            return clientProp;
+        if (!workerUrl?.trim() || !token?.trim())
+            return null;
+        return new FluxyChatClient({
+            baseUrl: workerUrl.trim(),
+            userId,
+            token: token.trim(),
+        });
+    }, [clientProp, workerUrl, token, userId]);
+    if (!client)
+        return null;
+    const h = typeof height === "number" ? `${height}px` : height;
+    return (_jsx("div", { className: className, style: { height: h, borderRadius: 12, border: "1px solid #e4e4e7", overflow: "hidden" }, children: _jsx(InboxList, { onSelectItem: onSelectItem, client: client }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { FluxyChatWidget } from "./fluxy-chat-widget";
+export type { FluxyChatWidgetProps } from "./fluxy-chat-widget";
+export { FluxyInboxPanel } from "./fluxy-inbox-panel";
+export type { FluxyInboxPanelProps } from "./fluxy-inbox-panel";
+export { useFluxyAssistantRuntime } from "./use-fluxy-assistant-runtime";
+export type { UseFluxyAssistantRuntimeOptions, FluxyAssistantMessage, } from "./use-fluxy-assistant-runtime";

package/dist/index.js

@@ -0,0 +1,3 @@
+export { FluxyChatWidget } from "./fluxy-chat-widget";
+export { FluxyInboxPanel } from "./fluxy-inbox-panel";
+export { useFluxyAssistantRuntime } from "./use-fluxy-assistant-runtime";

package/dist/use-fluxy-assistant-runtime.d.ts

@@ -0,0 +1,39 @@
+import type { FluxyChatClient } from "@fluxy-chat/sdk";
+export interface UseFluxyAssistantRuntimeOptions {
+    roomId: string;
+    client: FluxyChatClient;
+}
+/** Message shape for assistant-ui ExternalStoreRuntime (minimal subset). */
+export interface FluxyAssistantMessage {
+    id: string;
+    role: "user" | "assistant";
+    content: {
+        type: "text";
+        text: string;
+    }[];
+}
+/**
+ * Hook that exposes Fluxy messages in assistant-ui-compatible shape.
+ * Wire with `useExternalStoreRuntime` from `@assistant-ui/react` when installed.
+ */
+export declare function useFluxyAssistantRuntime({ roomId, client }: UseFluxyAssistantRuntimeOptions): {
+    messages: FluxyAssistantMessage[];
+    isRunning: boolean;
+    onNew: (message: {
+        content: {
+            type: string;
+            text?: string;
+        }[];
+    }) => Promise<void>;
+    /** Pass to useExternalStoreRuntime({ messages, isRunning, onNew, ... }) */
+    externalStoreProps: {
+        messages: FluxyAssistantMessage[];
+        isRunning: boolean;
+        onNew: (message: {
+            content: {
+                type: string;
+                text?: string;
+            }[];
+        }) => Promise<void>;
+    };
+};

package/dist/use-fluxy-assistant-runtime.js

@@ -0,0 +1,51 @@
+"use client";
+/**
+ * Optional assistant-ui bridge — install `@assistant-ui/react` to use.
+ * Maps FluxyChat WS timeline → assistant-ui ExternalStoreRuntime.
+ */
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useChat } from "@fluxy-chat/react";
+function toAssistantMessage(m) {
+    const role = m.userId?.startsWith("agent") || m.userId === "assistant" ? "assistant" : "user";
+    return {
+        id: String(m.id),
+        role,
+        content: [{ type: "text", text: m.content ?? "" }],
+    };
+}
+/**
+ * Hook that exposes Fluxy messages in assistant-ui-compatible shape.
+ * Wire with `useExternalStoreRuntime` from `@assistant-ui/react` when installed.
+ */
+export function useFluxyAssistantRuntime({ roomId, client }) {
+    const { messages, sendMessage, connectionState, agentTyping } = useChat({
+        roomId,
+        client,
+    });
+    const assistantMessages = useMemo(() => messages.map(toAssistantMessage), [messages]);
+    const [isRunning, setIsRunning] = useState(false);
+    useEffect(() => {
+        setIsRunning(agentTyping || connectionState.status === "connecting");
+    }, [agentTyping, connectionState.status]);
+    const onNew = useCallback(async (message) => {
+        const text = message.content
+            .filter((p) => p.type === "text")
+            .map((p) => p.text ?? "")
+            .join("\n")
+            .trim();
+        if (!text)
+            return;
+        await sendMessage(text);
+    }, [sendMessage]);
+    return {
+        messages: assistantMessages,
+        isRunning,
+        onNew,
+        /** Pass to useExternalStoreRuntime({ messages, isRunning, onNew, ... }) */
+        externalStoreProps: {
+            messages: assistantMessages,
+            isRunning,
+            onNew,
+        },
+    };
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@fluxy-chat/ui-kit",
+  "version": "0.1.0",
+  "description": "Polished drop-in FluxyChat widget and inbox — built on @fluxy-chat/ui with optional assistant-ui runtime",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "@fluxy-chat/sdk": "^0.6.0",
+    "@fluxy-chat/react": "^0.1.1",
+    "@fluxy-chat/ui": "^0.1.2",
+    "@assistant-ui/react": ">=0.10.0"
+  },
+  "peerDependenciesMeta": {
+    "@assistant-ui/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@fluxy-chat/sdk": "0.6.0",
+    "@fluxy-chat/react": "0.1.1",
+    "@fluxy-chat/ui": "0.1.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "react": "^19.2.0",
+    "typescript": "^5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm exec tsc -p tsconfig.json",
+    "dev": "pnpm exec tsc -w -p tsconfig.json"
+  }
+}