@fluxy-chat/create-fluxy-chat 0.3.0 → 0.5.0

package/templates/react/src/App.tsx

@@ -1,10 +1,82 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { FluxyChatClient } from "@fluxy-chat/sdk";
 import { FluxyRealtimeProvider, useChat } from "@fluxy-chat/react";
 
-const workerUrl = import.meta.env.VITE_FLUXYCHAT_WORKER_URL;
-const memberJwt = import.meta.env.VITE_FLUXYCHAT_MEMBER_JWT;
-const defaultRoomId = import.meta.env.VITE_FLUXYCHAT_ROOM_ID || "demo";
+const workerUrl = import.meta.env.VITE_FLUXYCHAT_WORKER_URL?.trim();
+const memberJwt = import.meta.env.VITE_FLUXYCHAT_MEMBER_JWT?.trim();
+const publicRoomId = import.meta.env.VITE_FLUXYCHAT_PUBLIC_ROOM_ID?.trim();
+const configuredRoomId = import.meta.env.VITE_FLUXYCHAT_ROOM_ID?.trim() || "demo";
+
+interface FluxySession {
+  client: FluxyChatClient;
+  roomId: string;
+  mode: "member" | "guest";
+}
+
+function useFluxySession(): {
+  session: FluxySession | null;
+  loading: boolean;
+  error: string | null;
+} {
+  const [session, setSession] = useState<FluxySession | null>(null);
+  const [loading, setLoading] = useState(Boolean(workerUrl));
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!workerUrl) {
+      setLoading(false);
+      return;
+    }
+
+    if (memberJwt) {
+      setSession({
+        client: new FluxyChatClient({
+          baseUrl: workerUrl,
+          userId: "demo-user",
+          token: memberJwt,
+        }),
+        roomId: configuredRoomId,
+        mode: "member",
+      });
+      setLoading(false);
+      return;
+    }
+
+    if (publicRoomId) {
+      let cancelled = false;
+      void FluxyChatClient.joinPublicRoomAsGuest(workerUrl, publicRoomId, {
+        displayName: "Guest",
+      })
+        .then((guest) => {
+          if (cancelled) return;
+          setSession({
+            client: new FluxyChatClient({
+              baseUrl: workerUrl,
+              userId: guest.userId,
+              token: guest.token,
+            }),
+            roomId: guest.roomId,
+            mode: "guest",
+          });
+        })
+        .catch((err) => {
+          if (!cancelled) {
+            setError(err instanceof Error ? err.message : "Guest session failed");
+          }
+        })
+        .finally(() => {
+          if (!cancelled) setLoading(false);
+        });
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    setLoading(false);
+  }, []);
+
+  return { session, loading, error };
+}
 
 function ChatPanel({ roomId }: { roomId: string }) {
   const { messages, sendMessage, connectionState } = useChat({
@@ -50,31 +122,49 @@ function ChatPanel({ roomId }: { roomId: string }) {
 }
 
 export function App() {
-  const [roomId, setRoomId] = useState(defaultRoomId);
-
-  const client = useMemo(() => {
-    if (!workerUrl?.trim() || !memberJwt?.trim()) return null;
-    return new FluxyChatClient({
-      baseUrl: workerUrl.trim(),
-      userId: "demo-user",
-      token: memberJwt.trim(),
-    });
-  }, []);
+  const { session, loading, error } = useFluxySession();
+  const [roomId, setRoomId] = useState(configuredRoomId);
+
+  const activeRoomId = useMemo(() => {
+    if (session?.mode === "guest") return session.roomId;
+    return roomId.trim() || configuredRoomId;
+  }, [session, roomId]);
 
-  if (!client) {
+  if (!workerUrl) {
     return (
       <main className="shell">
         <h1>FluxyChat — chat-only starter</h1>
         <p>
           Copy <code>.env.example</code> to <code>.env</code> and set{" "}
-          <code>VITE_FLUXYCHAT_WORKER_URL</code> and <code>VITE_FLUXYCHAT_MEMBER_JWT</code>.
+          <code>VITE_FLUXYCHAT_WORKER_URL</code>.
+        </p>
+        <p>
+          Then either <code>VITE_FLUXYCHAT_MEMBER_JWT</code> (member) or{" "}
+          <code>VITE_FLUXYCHAT_PUBLIC_ROOM_ID</code> (guest, ~60s to first message).
         </p>
+      </main>
+    );
+  }
+
+  if (loading) {
+    return (
+      <main className="shell">
+        <p>Connecting…</p>
+      </main>
+    );
+  }
+
+  if (error || !session) {
+    return (
+      <main className="shell">
+        <h1>FluxyChat</h1>
+        <p className="error">{error ?? "Set JWT or public room ID in .env"}</p>
         <p>
           Get credentials from{" "}
           <a href="https://fluxychat.com/onboarding" target="_blank" rel="noreferrer">
             onboarding
           </a>{" "}
-          or <code>pnpm run first-message</code> in the monorepo.
+          or use a public room ID for guest mode.
         </p>
       </main>
     );
@@ -83,12 +173,15 @@ export function App() {
   return (
     <main className="shell">
       <h1>FluxyChat</h1>
-      <label className="room-picker">
-        Room
-        <input value={roomId} onChange={(e) => setRoomId(e.target.value)} />
-      </label>
-      <FluxyRealtimeProvider client={client}>
-        <ChatPanel roomId={roomId.trim() || defaultRoomId} />
+      <p className="mode-badge">{session.mode === "guest" ? "Guest session" : "Member JWT"}</p>
+      {session.mode === "member" ? (
+        <label className="room-picker">
+          Room
+          <input value={roomId} onChange={(e) => setRoomId(e.target.value)} />
+        </label>
+      ) : null}
+      <FluxyRealtimeProvider client={session.client}>
+        <ChatPanel roomId={activeRoomId} />
       </FluxyRealtimeProvider>
     </main>
   );

package/templates/react/src/index.css

@@ -91,6 +91,16 @@ body {
   cursor: pointer;
 }
 
+.mode-badge {
+  font-size: 0.75rem;
+  color: #64748b;
+  margin: 0 0 0.75rem;
+}
+
+.error {
+  color: #b91c1c;
+}
+
 .room-picker {
   display: flex;
   flex-direction: column;

package/templates/react/src/vite-env.d.ts

@@ -2,8 +2,9 @@
 
 interface ImportMetaEnv {
   readonly VITE_FLUXYCHAT_WORKER_URL: string;
-  readonly VITE_FLUXYCHAT_MEMBER_JWT: string;
-  readonly VITE_FLUXYCHAT_ROOM_ID: string;
+  readonly VITE_FLUXYCHAT_MEMBER_JWT?: string;
+  readonly VITE_FLUXYCHAT_ROOM_ID?: string;
+  readonly VITE_FLUXYCHAT_PUBLIC_ROOM_ID?: string;
 }
 
 interface ImportMeta {