lightnode-sdk 0.10.4 → 0.10.5

package/dist/add.js

@@ -739,126 +739,159 @@ process.exit(0);
 // formats every prior turn into the next prompt so the model has context.
 // ---------------------------------------------------------------------------
 const NEXTJS_CHAT_PAGE = `// app/chat/page.tsx
-// Generated by 'lightnode add chat'.
+// Generated by 'lightnode add chat'. Server-paid: your funded PRIVATE_KEY (in
+// .env) pays each turn; the streaming /api/inference route runs the inference.
 "use client";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { Streamdown } from "streamdown";
+import { LcaiMark } from "@/components/lcai-mark";
 
-type Turn = { role: "user" | "assistant"; text: string; txs?: Record<string, string> };
+type Turn = { role: "user" | "assistant"; text: string; streaming?: boolean; jobCompleted?: string };
 
 export default function Chat() {
   const [turns, setTurns] = useState<Turn[]>([]);
   const [draft, setDraft] = useState("");
   const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: busy ? "auto" : "smooth", block: "nearest" });
+  }, [turns, busy]);
 
   async function send() {
-    if (!draft.trim()) return;
-    const next: Turn[] = [...turns, { role: "user", text: draft.trim() }];
-    setTurns(next);
-    setDraft("");
+    const next = draft.trim();
+    if (!next || busy) return;
     setBusy(true);
-    // Reserve the assistant bubble immediately so tokens can stream into it.
-    setTurns([...next, { role: "assistant", text: "" }]);
+    setErr(null);
+    const history: Turn[] = [...turns, { role: "user", text: next }];
+    setTurns([...history, { role: "assistant", text: "", streaming: true }]);
+    setDraft("");
+    const patch = (p: Partial<Turn>) =>
+      setTurns((prev) => prev.map((t, i) => (i === prev.length - 1 ? { ...t, ...p } : t)));
     try {
-      const prompt =
-        next.map((t) => (t.role === "user" ? \`User: \${t.text}\` : \`Assistant: \${t.text}\`)).join("\\n") +
-        "\\nAssistant:";
+      const prompt = history.map((t) => (t.role === "user" ? "User: " : "Assistant: ") + t.text).join("\\n") + "\\nAssistant:";
       const r = await fetch("/api/inference", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ prompt, stream: true }),
       });
       if (!r.ok || !r.body) {
-        const err = await r.text().catch(() => "");
-        throw new Error(\`route returned \${r.status}: \${err.slice(0, 200)}\`);
+        const raw = await r.text().catch(() => "");
+        if (/PRIVATE_KEY/i.test(raw)) throw new Error("No PRIVATE_KEY yet. Put a funded mainnet key in .env, then restart 'npm run dev'.");
+        throw new Error("route returned " + r.status + (raw ? ": " + raw.slice(0, 160) : ""));
       }
       const reader = r.body.getReader();
       const decoder = new TextDecoder();
       let assembled = "";
-      let txs: Record<string, string> | undefined;
-      while (true) {
+      let jobCompleted: string | undefined;
+      for (;;) {
         const { done, value } = await reader.read();
         if (done) break;
         const text = decoder.decode(value, { stream: true });
-        // The route ends the stream with one line of JSON on a new \\u0000
-        // delimiter (a NUL byte we put between the streamed prose and the
-        // metadata). Anything before is body; anything after is metadata.
+        // The route appends one JSON line of metadata after a NUL delimiter.
         const nulIdx = text.indexOf("\\u0000");
         if (nulIdx === -1) {
           assembled += text;
-          setTurns((prev) => prev.map((t, i) => i === prev.length - 1 ? { ...t, text: assembled } : t));
+          patch({ text: assembled });
         } else {
           assembled += text.slice(0, nulIdx);
-          try { txs = JSON.parse(text.slice(nulIdx + 1)) as Record<string, string>; } catch { /* ignore */ }
-          setTurns((prev) => prev.map((t, i) => i === prev.length - 1 ? { ...t, text: assembled, txs } : t));
+          try { jobCompleted = (JSON.parse(text.slice(nulIdx + 1)) as { jobCompleted?: string }).jobCompleted; } catch { /* ignore */ }
+          patch({ text: assembled, jobCompleted });
         }
       }
+      patch({ streaming: false, jobCompleted });
     } catch (e) {
-      // Replace the empty assistant bubble with the error.
-      setTurns((prev) => prev.map((t, i) =>
-        i === prev.length - 1 ? { ...t, text: \`(error: \${(e as Error).message})\` } : t
-      ));
+      setTurns(history); // drop the empty assistant bubble; show the error below
+      setDraft(next);
+      setErr((e as Error).message);
     } finally {
       setBusy(false);
     }
   }
 
   return (
-    <main style={{ maxWidth: 760, margin: "30px auto", padding: 20, fontFamily: "system-ui, sans-serif" }}>
-      <h1>LightChain AI - chat</h1>
-      <p style={{ color: "#666", fontSize: 13 }}>
-        Each turn pays ~0.02 LCAI on mainnet (free on testnet). Conversation history is sent with each turn so the
-        model has context.
-      </p>
-      <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 10 }}>
-        {turns.map((t, i) => (
-          <div
-            key={i}
-            style={{
-              padding: 14,
-              borderRadius: 12,
-              background: t.role === "user" ? "#e8f0ff" : "#f4f4f4",
-              alignSelf: t.role === "user" ? "flex-end" : "flex-start",
-              maxWidth: "85%",
-              whiteSpace: "pre-wrap",
-              lineHeight: 1.5,
-            }}
-          >
-            <div style={{ fontSize: 11, color: "#888", marginBottom: 4, textTransform: "uppercase", letterSpacing: 0.5 }}>
-              {t.role}
-            </div>
-            {t.text}
-            {t.txs && (
-              <div style={{ marginTop: 8, fontSize: 11, color: "#888", fontFamily: "monospace" }}>
-                jobCompleted: {t.txs.jobCompleted?.slice(0, 18)}…
-              </div>
-            )}
-          </div>
-        ))}
-        {busy && (
-          <div style={{ padding: 14, color: "#888", fontStyle: "italic" }}>
-            running encrypted inference…
+    <main className="mx-auto flex min-h-screen w-full max-w-2xl flex-col px-4 py-6">
+      <header className="border-b border-border pb-4">
+        <h1 className="font-semibold text-foreground">Chat</h1>
+        <p className="text-xs text-muted-foreground">Server-paid - your funded wallet covers each turn (~0.02 LCAI on mainnet, free on testnet).</p>
+      </header>
+
+      <div className="flex flex-1 flex-col gap-6 overflow-y-auto py-6">
+        {turns.length === 0 ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-4 text-center">
+            <LcaiMark className="size-12" />
+            <h2 className="text-3xl font-medium tracking-tight text-foreground">
+              Start talking with <span className="text-gradient">AI Chat</span>
+            </h2>
+            <p className="max-w-sm text-sm text-muted-foreground">
+              Your server signs each turn with the PRIVATE_KEY in .env, so visitors never need a wallet.
+            </p>
           </div>
+        ) : (
+          turns.map((t, i) =>
+            t.role === "user" ? (
+              <div key={i} className="flex justify-end">
+                <div className="w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl bg-surface-base-faint px-4 py-2.5 text-sm text-foreground">
+                  {t.text}
+                </div>
+              </div>
+            ) : (
+              <div key={i} className="flex gap-3">
+                <LcaiMark className="mt-0.5 size-7 shrink-0" />
+                <div className="flex min-w-0 flex-1 flex-col gap-2">
+                  {t.text ? (
+                    t.streaming ? (
+                      <div className="whitespace-pre-wrap break-words text-sm leading-relaxed text-foreground">{t.text}</div>
+                    ) : (
+                      <div className="max-w-none text-sm leading-relaxed text-foreground [&_*:first-child]:mt-0 [&_*:last-child]:mb-0">
+                        <Streamdown>{t.text}</Streamdown>
+                      </div>
+                    )
+                  ) : (
+                    <div className="animate-pulse-dot pt-1 text-sm text-muted-foreground">Thinking...</div>
+                  )}
+                  {t.jobCompleted ? (
+                    <div className="text-[11px] text-muted-foreground">committed on-chain · <code className="font-mono">{t.jobCompleted.slice(0, 12)}…</code></div>
+                  ) : null}
+                </div>
+              </div>
+            )
+          )
         )}
+        <div ref={endRef} />
       </div>
-      <div style={{ marginTop: 20, display: "flex", gap: 8 }}>
-        <input
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && !busy && send()}
-          placeholder="Type a message…"
-          style={{ flex: 1, padding: 12, fontSize: 14, borderRadius: 8, border: "1px solid #ccc" }}
-        />
-        <button
-          onClick={send}
-          disabled={busy || !draft.trim()}
-          style={{ padding: "10px 20px", fontSize: 14, borderRadius: 8 }}
-        >
-          Send
-        </button>
+
+      {err ? (
+        <p className="mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">{err}</p>
+      ) : null}
+
+      <div className="rounded-2xl border border-border bg-card p-3">
+        <div className="flex items-start gap-2">
+          <LcaiMark className="mt-2 size-5 shrink-0" />
+          <textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
+            rows={1}
+            placeholder="Send a message..."
+            className="max-h-40 min-h-[44px] w-full resize-none bg-transparent px-2 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground"
+          />
+        </div>
+        <div className="mt-1 flex justify-end">
+          <button
+            type="button"
+            onClick={() => send()}
+            disabled={busy || !draft.trim()}
+            className="flex size-9 items-center justify-center rounded-full bg-gradient-primary text-white transition hover:brightness-110 disabled:cursor-not-allowed disabled:bg-none disabled:bg-muted disabled:text-muted-foreground"
+            aria-label="Send"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
+          </button>
+        </div>
       </div>
-      <p style={{ marginTop: 16, fontSize: 12, color: "#888" }}>
-        Your server signs every call with the PRIVATE_KEY in <code>.env</code>. Cost per turn is paid from that wallet.
-        See <code>LIGHTNODE-HOSTING.md</code> for picking a host that handles 60-90s function calls.
+      <p className="mt-3 text-[11px] text-muted-foreground">
+        Each call is signed server-side with the PRIVATE_KEY in <code className="font-mono">.env</code>. See <code className="font-mono">LIGHTNODE-HOSTING.md</code> for a host that handles 60-90s calls.
       </p>
     </main>
   );
@@ -2000,6 +2033,7 @@ export function addChat(opts = {}) {
         // can run the whole stack locally (or anywhere Docker runs) with one
         // command. No external host signup, no function-timeout fights.
         written.push(writeFile(path.join(cwd, "app/chat/page.tsx"), NEXTJS_CHAT_PAGE, force));
+        written.push(writeFile(path.join(cwd, "components/lcai-mark.tsx"), LCAI_MARK_FILE, force));
         written.push(writeFile(path.join(cwd, "app/api/inference/route.ts"), NEXTJS_INFERENCE_STREAM_ROUTE, force));
         written.push(writeFile(path.join(cwd, "LIGHTNODE-HOSTING.md"), HOSTING_GUIDE, force));
         written.push(writeFile(path.join(cwd, "Dockerfile"), NEXTJS_DOCKERFILE, force));
@@ -2010,7 +2044,9 @@ export function addChat(opts = {}) {
         written.push(writeFile(path.join(cwd, "chat-repl.ts"), NODE_CHAT_REPL, force));
     }
     written.push(writeFile(path.join(cwd, ".env.example"), ENV_EXAMPLE(network), force));
-    return { written, install: installLine(template), template, network };
+    // The nextjs chat page renders markdown with streamdown; the node REPL doesn't.
+    const install = template === "nextjs-api" ? installLine(template) + " streamdown" : installLine(template);
+    return { written, install, template, network };
 }
 /**
  * `lightnode add chat-web3` - the user-pays counterpart to addChat.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightnode-sdk",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "Read-only TypeScript client for LightChain AI: workers, jobs, models, on-chain registration, and per-model network analytics. Independent, community-built (not an official LightChain package).",
   "type": "module",
   "main": "./dist/index.js",