@fluxy-chat/create-fluxy-chat 0.5.4 → 0.5.6

package/templates/full/src/App.tsx

@@ -1,220 +1,251 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { FluxyRealtimeProvider, useChat } from "@fluxy-chat/react";
-
-const workerUrl = import.meta.env.VITE_FLUXYCHAT_WORKER_URL?.trim() ?? "";
-const memberJwt = import.meta.env.VITE_FLUXYCHAT_MEMBER_JWT?.trim() ?? "";
-const roomId = import.meta.env.VITE_FLUXYCHAT_ROOM_ID?.trim() || "general";
-const agentId = import.meta.env.VITE_FLUXYCHAT_AGENT_ID?.trim() || "";
-const agentHandle = import.meta.env.VITE_FLUXYCHAT_AGENT_HANDLE?.trim() || "@assistant";
-const projectId = import.meta.env.VITE_FLUXYCHAT_PROJECT_ID?.trim() || "";
+import { ChatWindow } from "@fluxy-chat/ui";
+import { loadCliSession, type CliSession } from "./session";
+
+const envWorkerUrl = import.meta.env.VITE_FLUXYCHAT_WORKER_URL?.trim() ?? "";
+const envJwt = import.meta.env.VITE_FLUXYCHAT_MEMBER_JWT?.trim() ?? "";
+const envRoomId = import.meta.env.VITE_FLUXYCHAT_ROOM_ID?.trim() ?? "";
+const envAgentId = import.meta.env.VITE_FLUXYCHAT_AGENT_ID?.trim() ?? "";
+const envAgentHandle = import.meta.env.VITE_FLUXYCHAT_AGENT_HANDLE?.trim() || "@assistant";
+const envProjectId = import.meta.env.VITE_FLUXYCHAT_PROJECT_ID?.trim() ?? "";
+const envUserId = import.meta.env.VITE_FLUXYCHAT_USER_ID?.trim() ?? "";
 const consoleUrl = import.meta.env.VITE_FLUXYCHAT_CONSOLE_URL?.trim() || "https://fluxychat.com";
-const memberUserId = import.meta.env.VITE_FLUXYCHAT_USER_ID?.trim() || "demo-user";
 
-function ChatRoom() {
-  const { messages, sendMessage, invokeAgent, connectionState, agentTyping } = useChat({
-    roomId,
-    agentId: agentId || undefined,
-    markReadLatest: true,
-  });
+const SUGGESTED_PROMPTS = [
+  "Tell me about FluxyChat features",
+  "What can this assistant do?",
+];
+
+function consoleOrigin(): string {
+  return consoleUrl.replace(/\/$/, "");
+}
+
+function clerkAuthHref(): string {
+  const returnTo = typeof window !== "undefined" ? window.location.origin : "http://localhost:5173";
+  return `${consoleOrigin()}/cli-auth?redirect_uri=${encodeURIComponent(returnTo)}`;
+}
+
+function dashboardHref(): string {
+  return `${consoleOrigin()}/dashboard`;
+}
+
+function sessionFromEnv(): CliSession | null {
+  if (!envWorkerUrl || !envJwt || !envRoomId) return null;
+  return {
+    workerUrl: envWorkerUrl,
+    memberJwt: envJwt,
+    roomId: envRoomId,
+    agentId: envAgentId,
+    agentHandle: envAgentHandle,
+    projectId: envProjectId,
+    userId: envUserId || "demo-user",
+  };
+}
+
+function Brand() {
+  return (
+    <div className="brand">
+      <img src={`${consoleOrigin()}/fluxychat-icon.svg`} alt="" width={28} height={28} />
+      <span>FluxyChat</span>
+    </div>
+  );
+}
+
+const TOUR_STEPS = [
+  {
+    title: "You already have an app",
+    body: "This folder is a real Vite chat app. After a short sign-in we create your project and a private room. No public playground.",
+  },
+  {
+    title: "Realtime is the point",
+    body: "After you are in, open this same URL in a second tab. Send a message in one window and watch it land in the other.",
+  },
+  {
+    title: "Then the console",
+    body: "Sign in is required: that is what creates (or reuses) your project and assistant room. After that the two-tab demo works. The dashboard is a separate button once you are in chat.",
+  },
+] as const;
+
+function LocalOnboarding() {
+  const [step, setStep] = useState(0);
+  const last = step === TOUR_STEPS.length - 1;
+  const current = TOUR_STEPS[step];
+
+  return (
+    <main className="app-shell">
+      <header className="topbar">
+        <Brand />
+        <span className="meta">
+          {step + 1} / {TOUR_STEPS.length}
+        </span>
+      </header>
+      <div className="onboard">
+        <div className="dots" aria-hidden>
+          {TOUR_STEPS.map((_, i) => (
+            <span key={i} className={`dot-step ${i === step ? "active" : ""}`} />
+          ))}
+        </div>
+        <p className="eyebrow">Quick start</p>
+        <h1>{current.title}</h1>
+        <p>{current.body}</p>
+        <div className="onboard-actions">
+          {step > 0 ? (
+            <button type="button" className="btn-ghost" onClick={() => setStep((s) => s - 1)}>
+              Back
+            </button>
+          ) : null}
+          {last ? (
+            <a className="btn-primary" href={clerkAuthHref()}>
+              Sign in or create account
+            </a>
+          ) : (
+            <button type="button" className="btn-primary" onClick={() => setStep((s) => s + 1)}>
+              Continue
+            </button>
+          )}
+        </div>
+        {last ? (
+          <p className="fine-print">
+            Clerk on fluxychat.com, then back here with your room ready.
+          </p>
+        ) : null}
+      </div>
+    </main>
+  );
+}
+
+function ChatRoom({ session }: { session: CliSession }) {
+  const { messages, sendMessage, invokeAgent, connectionState, agentTyping, typingUsers, online } =
+    useChat({
+      roomId: session.roomId,
+      agentId: session.agentId || undefined,
+      markReadLatest: true,
+    });
 
-  const [draft, setDraft] = useState("");
   const [error, setError] = useState<string | null>(null);
-  const isConnected = connectionState.status === "connected";
+  const connected = connectionState.status === "connected";
 
-  async function handleSend(text: string) {
-    if (!text.trim()) return;
+  async function onSend(content: string) {
     setError(null);
+    const mentionsAgent = content
+      .toLowerCase()
+      .includes((session.agentHandle || "@assistant").replace(/^@/, "").toLowerCase());
     try {
-      await sendMessage(text);
+      if (mentionsAgent && session.agentId) {
+        await invokeAgent(content, { agentId: session.agentId });
+      } else {
+        await sendMessage(content);
+      }
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to send");
     }
   }
 
-  async function handleAskAgent(text: string) {
-    if (!agentId) {
-      setError("No agent configured. Run pnpm setup again.");
-      return;
-    }
-    setError(null);
-    try {
-      await invokeAgent(text, { agentId });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Agent invoke failed");
-    }
-  }
-
-  function submit(e: React.FormEvent) {
-    e.preventDefault();
-    const text = draft.trim();
-    if (!text) return;
-    setDraft("");
-    void handleSend(text);
-  }
-
   return (
-    <div className="chat-panel">
-      <div className="chat-header">
-        <span className="room-name"># {roomId}</span>
-        <span className={`status-badge ${isConnected ? "connected" : "disconnected"}`}>
-          {isConnected ? "live" : connectionState.status}
+    <div className="chat-column">
+      <div className="status-row">
+        <span className="inline-flex items-center gap-2">
+          <span className={`status-dot ${connected ? "on" : "off"}`} />
+          <span className="font-medium text-foreground">
+            {connected ? "Connected" : connectionState.status}
+          </span>
+          <span className="text-muted-foreground"> · {session.roomId}</span>
         </span>
       </div>
 
-      <div className="messages-list">
-        {messages.length === 0 && (
-          <div className="empty-state">
-            Send a message or ask the agent something below.
-          </div>
-        )}
-        {messages.map((m) => {
-          const isSelf = m.userId === memberUserId;
-          const isAgent = String(m.userId ?? "").includes("agent") || m.userId === "assistant";
-          return (
-            <div
-              key={m.id ?? `${m.createdAt}-${m.userId}`}
-              className={`message ${isSelf ? "self" : ""} ${isAgent ? "agent" : ""}`.trim()}
-            >
-              <span className="msg-author">{m.userId}</span>
-              <p className="msg-body">{m.content}</p>
-            </div>
-          );
-        })}
-        {agentTyping && (
-          <div className="message agent typing-indicator">
-            <span className="msg-author">{agentHandle}</span>
-            <p className="msg-body">
-              <span className="dot" />
-              <span className="dot" />
-              <span className="dot" />
-            </p>
-          </div>
-        )}
-      </div>
-
-      {error && <p className="chat-error">{error}</p>}
-
-      <form className="composer" onSubmit={submit}>
-        <input
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          placeholder={`Message #${roomId}…`}
-          aria-label="Message"
-          autoFocus
-        />
-        <button type="submit" disabled={!draft.trim()}>
-          Send
-        </button>
-        <button
-          type="button"
-          className="btn-agent"
-          disabled={!draft.trim()}
-          onClick={() => {
-            const text = draft.trim();
-            if (!text) return;
-            setDraft("");
-            void handleAskAgent(text.startsWith("@") ? text : `${agentHandle} ${text}`);
+      <div className="chat-frame">
+        <ChatWindow
+          messages={messages}
+          online={online ?? 0}
+          typingUsers={typingUsers ?? {}}
+          onSend={(content) => {
+            void onSend(content);
           }}
-        >
-          Ask agent
-        </button>
-      </form>
-    </div>
-  );
-}
+          agentTyping={Boolean(agentTyping)}
+          agentTypingLabel={session.agentHandle || "@assistant"}
+          mentionSuggestions={[
+            {
+              handle: (session.agentHandle || "@assistant").replace(/^@/, ""),
+              label: session.agentHandle || "@assistant",
+              agentId: session.agentId,
+            },
+          ]}
+        />
+      </div>
 
-function SetupRequired() {
-  return (
-    <main className="shell">
-      <div className="setup-card">
-        <div className="logo">
-          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-            <rect width="32" height="32" rx="8" fill="#6366f1" />
-            <path d="M8 10h16M8 16h10M8 22h13" stroke="white" strokeWidth="2" strokeLinecap="round" />
-          </svg>
-          <span>FluxyChat</span>
-        </div>
-        <h1>Setup required</h1>
-        <p>Run the setup script to provision your credentials, then start the app.</p>
-        <pre><code>{`pnpm setup:hosted   # hosted demo (no local worker)
-# — or —
-pnpm setup          # local worker (pnpm dev in monorepo first)
-
-pnpm dev`}</code></pre>
-        <p className="hint">
-          Or copy <code>.env.example</code> to <code>.env</code> and fill in your credentials
-          from{" "}
-          <a href={`${consoleUrl}/onboarding`} target="_blank" rel="noreferrer">
-            the console
-          </a>
-          .
-        </p>
+      <div className="prompts">
+        {SUGGESTED_PROMPTS.map((prompt) => (
+          <button
+            key={prompt}
+            type="button"
+            onClick={() => {
+              const handle = session.agentHandle || "@assistant";
+              void onSend(`${handle} ${prompt}`);
+            }}
+          >
+            {prompt}
+          </button>
+        ))}
       </div>
-    </main>
+      {error ? <p className="chat-error">{error}</p> : null}
+    </div>
   );
 }
 
 export function App() {
-  if (!workerUrl || !memberJwt) return <SetupRequired />;
+  const session = useMemo(() => loadCliSession() ?? sessionFromEnv(), []);
+
+  if (!session) return <LocalOnboarding />;
 
   return (
-    <main className="shell">
-      <header className="app-header">
-        <div className="app-logo">
-          <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
-            <rect width="32" height="32" rx="8" fill="#6366f1" />
-            <path d="M8 10h16M8 16h10M8 22h13" stroke="white" strokeWidth="2" strokeLinecap="round" />
-          </svg>
-          <span>FluxyChat</span>
-        </div>
-        <nav className="app-nav">
-          <span className="nav-item">Project: {projectId || "demo"}</span>
-          <a
-            href={`${consoleUrl.replace(/\/$/, "")}/onboarding?from=cli`}
-            target="_blank"
-            rel="noreferrer"
-            className="nav-link"
-          >
-            Open console
+    <main className="app-shell">
+      <header className="topbar">
+        <Brand />
+        <nav className="top-links">
+          <span className="meta">{session.projectName || session.projectId || "your room"}</span>
+          <a href={dashboardHref()} target="_blank" rel="noreferrer">
+            Open dashboard
           </a>
         </nav>
       </header>
-
-      <div className="layout">
+      <div className="page">
         <FluxyRealtimeProvider
-          workerUrl={workerUrl}
-          authTokenProvider={memberJwt}
-          userId={memberUserId}
+          workerUrl={session.workerUrl}
+          authTokenProvider={session.memberJwt}
+          userId={session.userId}
         >
-          <ChatRoom />
+          <ChatRoom session={session} />
         </FluxyRealtimeProvider>
-
-        <aside className="sidebar">
-          <div className="sidebar-card">
-            <h3>Project</h3>
-            <dl>
-              <div><dt>ID</dt><dd>{projectId || "hosted-demo"}</dd></div>
-              <div><dt>Room</dt><dd>{roomId}</dd></div>
-              <div><dt>Agent</dt><dd>{agentHandle}</dd></div>
-              <div><dt>Worker</dt><dd>{workerUrl}</dd></div>
-            </dl>
-          </div>
-          <div className="sidebar-card">
-            <h3>Try it</h3>
+        <aside className="side">
+          <section>
+            <h2>Try this</h2>
             <ul>
-              <li>Open a second tab to see realtime sync</li>
-              <li>Ask the agent about FluxyChat</li>
-              <li>
-                <a
-                  href={`${consoleUrl.replace(/\/$/, "")}/onboarding?from=cli`}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Keep this project in the console
-                </a>
-              </li>
+              <li>Open a second tab on this same URL</li>
+              <li>Send a message in one tab. It should appear in the other.</li>
+              <li>Mention the agent to get a reply</li>
             </ul>
-          </div>
+          </section>
+          <section>
+            <h2>Project</h2>
+            <dl>
+              <div>
+                <dt>Room</dt>
+                <dd>{session.roomId}</dd>
+              </div>
+              <div>
+                <dt>Agent</dt>
+                <dd>{session.agentHandle}</dd>
+              </div>
+            </dl>
+          </section>
+          <section>
+            <h2>Console</h2>
+            <p className="side-copy">Rooms, agents, and settings live in the dashboard.</p>
+            <a className="btn-primary side-btn" href={dashboardHref()} target="_blank" rel="noreferrer">
+              Open dashboard
+            </a>
+          </section>
         </aside>
       </div>
     </main>