@pylonsync/create-pylon 0.3.275 → 0.3.276

package/templates/ai-chat/app/chat-client.tsx

@@ -1,15 +1,14 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
-import { db } from "@pylonsync/react";
+import { db, callFn } from "@pylonsync/react";
 import { siteConfig } from "@/lib/site.config";
 
 // The chat app — a client island, rendered only for a SIGNED-IN user (the page
 // redirects anyone else to /login). Conversations + messages are sync-backed
-// owner-scoped entities (`db.useQuery`), so your history is private to your
-// account and stays in lockstep across your tabs + devices. Sending streams
-// tokens from the built-in `POST /api/ai/stream` (SSE) — your PYLON_AI_API_KEY
-// never reaches the browser.
+// owner-scoped entities (`db.useQuery`), private to your account and in lockstep
+// across your tabs + devices. Sending streams tokens from the built-in
+// `POST /api/ai/stream` (SSE) — your PYLON_AI_API_KEY never reaches the browser.
 //
 // All state lives in <ChatInner> (which owns `currentId`) — the thread is a
 // presentational child. That's deliberate: creating a conversation mid-send
@@ -54,7 +53,6 @@ function ChatInner() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const initialized = useRef(false);
 
-  // On first load, drop into the most recent conversation (if any).
   useEffect(() => {
     if (!initialized.current && conversations.length > 0) {
       initialized.current = true;
@@ -62,7 +60,6 @@ function ChatInner() {
     }
   }, [conversations]);
 
-  // Keep the latest turn in view as content streams in.
   useEffect(() => {
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
   }, [messages.length, streaming]);
@@ -77,6 +74,19 @@ function ChatInner() {
     setStreaming(null);
     setNotice(null);
   }
+  async function renameConversation(id: string, title: string) {
+    const t = title.trim().slice(0, 80);
+    if (!t) return;
+    await db.update("Conversation", id, { title: t });
+  }
+  async function deleteConversation(id: string) {
+    if (currentId === id) setCurrentId(null);
+    try {
+      await callFn("deleteConversation", { conversationId: id });
+    } catch {
+      /* ignore */
+    }
+  }
 
   async function send(text: string) {
     const trimmed = text.trim();
@@ -85,18 +95,12 @@ function ChatInner() {
     setNotice(null);
     setInput("");
 
-    // Snapshot the history BEFORE the async work (messages is for the current
-    // conversation; empty for a brand-new chat).
     const history = messages.map((m) => ({ role: m.role, content: m.content }));
-
-    // Make sure we have a conversation to attach to.
     let convId = currentId;
     if (!convId) {
       convId = await db.insert("Conversation", { title: trimmed.slice(0, 48) });
       setCurrentId(convId);
     }
-
-    // Persist the user's turn (optimistic — paints immediately).
     await db.insert("Message", { conversationId: convId, role: "user", content: trimmed });
 
     const payload = [
@@ -144,6 +148,8 @@ function ChatInner() {
         currentId={currentId}
         onSelect={selectConversation}
         onNew={newChat}
+        onRename={renameConversation}
+        onDelete={deleteConversation}
       />
       <div className="flex flex-1 flex-col bg-white">
         <div ref={scrollRef} className="flex-1 overflow-y-auto">
@@ -153,7 +159,7 @@ function ChatInner() {
             ) : (
               <div className="space-y-5">
                 {messages.map((m) => (
-                  <Bubble key={m.id} role={m.role} content={m.content} />
+                  <Bubble key={m.id} role={m.role} content={m.content} at={m.createdAt} />
                 ))}
                 {streaming !== null ? <Bubble role="assistant" content={streaming || "…"} streaming /> : null}
               </div>
@@ -185,11 +191,15 @@ function Sidebar({
   currentId,
   onSelect,
   onNew,
+  onRename,
+  onDelete,
 }: {
   conversations: ConversationRow[];
   currentId: string | null;
   onSelect: (id: string) => void;
   onNew: () => void;
+  onRename: (id: string, title: string) => void;
+  onDelete: (id: string) => void;
 }) {
   return (
     <aside className="hidden w-64 shrink-0 flex-col border-r border-zinc-200 bg-paper sm:flex">
@@ -208,19 +218,14 @@ function Sidebar({
         ) : (
           <ul className="space-y-0.5">
             {conversations.map((c) => (
-              <li key={c.id}>
-                <button
-                  type="button"
-                  onClick={() => onSelect(c.id)}
-                  className={
-                    "w-full truncate rounded-lg px-2.5 py-2 text-left text-[13.5px] transition-colors " +
-                    (c.id === currentId ? "bg-brand-soft font-medium text-brand" : "text-zinc-600 hover:bg-zinc-100")
-                  }
-                  title={c.title}
-                >
-                  {c.title || "New chat"}
-                </button>
-              </li>
+              <ConversationRow
+                key={c.id}
+                convo={c}
+                active={c.id === currentId}
+                onSelect={() => onSelect(c.id)}
+                onRename={(t) => onRename(c.id, t)}
+                onDelete={() => onDelete(c.id)}
+              />
             ))}
           </ul>
         )}
@@ -229,6 +234,104 @@ function Sidebar({
   );
 }
 
+function ConversationRow({
+  convo,
+  active,
+  onSelect,
+  onRename,
+  onDelete,
+}: {
+  convo: ConversationRow;
+  active: boolean;
+  onSelect: () => void;
+  onRename: (title: string) => void;
+  onDelete: () => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(convo.title);
+  const [confirming, setConfirming] = useState(false);
+
+  function commit() {
+    setEditing(false);
+    if (draft.trim() && draft.trim() !== convo.title) onRename(draft);
+    else setDraft(convo.title);
+  }
+
+  if (editing) {
+    return (
+      <li>
+        <input
+          autoFocus
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commit();
+            if (e.key === "Escape") {
+              setDraft(convo.title);
+              setEditing(false);
+            }
+          }}
+          className="w-full rounded-lg border border-brand bg-white px-2.5 py-2 text-[13.5px] outline-none ring-2 ring-brand/20"
+        />
+      </li>
+    );
+  }
+
+  return (
+    <li className="group relative">
+      <button
+        type="button"
+        onClick={onSelect}
+        className={
+          "flex w-full items-center rounded-lg py-2 pl-2.5 pr-14 text-left text-[13.5px] transition-colors " +
+          (active ? "bg-brand-soft font-medium text-brand" : "text-zinc-600 hover:bg-zinc-100")
+        }
+        title={convo.title}
+      >
+        <span className="truncate">{convo.title || "New chat"}</span>
+      </button>
+      {/* hover actions */}
+      <div className="absolute right-1.5 top-1/2 hidden -translate-y-1/2 items-center gap-0.5 group-hover:flex">
+        {confirming ? (
+          <button
+            type="button"
+            onClick={onDelete}
+            className="rounded px-1.5 py-0.5 text-[11px] font-medium text-red-600 hover:bg-red-50"
+          >
+            Sure?
+          </button>
+        ) : (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                setDraft(convo.title);
+                setEditing(true);
+              }}
+              aria-label="Rename"
+              className="rounded p-1 text-zinc-400 hover:bg-zinc-200 hover:text-zinc-700"
+            >
+              <PencilIcon />
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setConfirming(true);
+                setTimeout(() => setConfirming(false), 2500);
+              }}
+              aria-label="Delete"
+              className="rounded p-1 text-zinc-400 hover:bg-zinc-200 hover:text-red-600"
+            >
+              <TrashIcon />
+            </button>
+          </>
+        )}
+      </div>
+    </li>
+  );
+}
+
 function EmptyState({ onPick }: { onPick: (text: string) => void }) {
   const { chat, brand } = siteConfig;
   return (
@@ -254,11 +357,33 @@ function EmptyState({ onPick }: { onPick: (text: string) => void }) {
   );
 }
 
-function Bubble({ role, content, streaming }: { role: string; content: string; streaming?: boolean }) {
+function Bubble({
+  role,
+  content,
+  streaming,
+  at,
+}: {
+  role: string;
+  content: string;
+  streaming?: boolean;
+  at?: string;
+}) {
   const { brand } = siteConfig;
   const isUser = role === "user";
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard unavailable */
+    }
+  }
+
   return (
-    <div className={"flex gap-3 " + (isUser ? "flex-row-reverse" : "")}>
+    <div className={"group flex gap-3 " + (isUser ? "flex-row-reverse" : "")}>
       <span
         className={
           "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold " +
@@ -267,14 +392,34 @@ function Bubble({ role, content, streaming }: { role: string; content: string; s
       >
         {isUser ? "You" : brand.letter}
       </span>
-      <div
-        className={
-          "max-w-[80%] whitespace-pre-wrap rounded-2xl px-4 py-2.5 text-[14.5px] leading-relaxed " +
-          (isUser ? "bg-zinc-900 text-white" : "bg-zinc-100 text-zinc-800")
-        }
-      >
-        {content}
-        {streaming ? <span className="ml-0.5 inline-block h-4 w-1.5 animate-pulse bg-zinc-400 align-middle" /> : null}
+      <div className={"flex max-w-[80%] flex-col " + (isUser ? "items-end" : "items-start")}>
+        <div
+          className={
+            "rounded-2xl px-4 py-2.5 text-[14.5px] leading-relaxed " +
+            (isUser ? "whitespace-pre-wrap bg-zinc-900 text-white" : "bg-zinc-100 text-zinc-800")
+          }
+        >
+          {isUser || streaming ? (
+            <span className="whitespace-pre-wrap">{content}</span>
+          ) : (
+            <Markdown text={content} />
+          )}
+          {streaming ? <span className="ml-0.5 inline-block h-4 w-1.5 animate-pulse bg-zinc-400 align-middle" /> : null}
+        </div>
+        {!streaming ? (
+          <div className={"mt-1 flex items-center gap-2 px-1 " + (isUser ? "flex-row-reverse" : "")}>
+            {at ? <span className="text-[10.5px] text-zinc-300">{relativeTime(at)}</span> : null}
+            {!isUser ? (
+              <button
+                type="button"
+                onClick={copy}
+                className="text-[10.5px] text-zinc-300 opacity-0 transition-opacity hover:text-zinc-600 group-hover:opacity-100"
+              >
+                {copied ? "Copied" : "Copy"}
+              </button>
+            ) : null}
+          </div>
+        ) : null}
       </div>
     </div>
   );
@@ -348,9 +493,152 @@ function Composer({
   );
 }
 
-// Parse the OpenAI-style SSE stream from POST /api/ai/stream:
-//   data: {"choices":[{"delta":{"content":"…"}}]}   …   data: [DONE]
-// Throws { code } on the 503 (AI not configured) / 429 (rate limited) shims.
+/* --------------------------- markdown rendering --------------------------- */
+// A small, dependency-free, XSS-safe Markdown renderer for assistant replies. It
+// builds React elements directly — raw HTML is never injected into the DOM, so
+// model output can't smuggle scripts. Covers what LLMs emit most: fenced code
+// blocks, inline `code`, **bold**, *italic*, links, bullet + numbered lists,
+// headings, and paragraphs. Swap in `react-markdown` for full CommonMark/GFM.
+function Markdown({ text }: { text: string }) {
+  return <div className="space-y-2">{renderBlocks(text)}</div>;
+}
+
+function renderBlocks(text: string): React.ReactNode[] {
+  const lines = text.replace(/\r\n/g, "\n").split("\n");
+  const out: React.ReactNode[] = [];
+  let i = 0;
+  let key = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line.trimStart().startsWith("```")) {
+      const lang = line.trim().slice(3).trim();
+      const code: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].trimStart().startsWith("```")) code.push(lines[i++]);
+      i++; // closing fence
+      out.push(<CodeBlock key={key++} code={code.join("\n")} lang={lang} />);
+      continue;
+    }
+    const h = line.match(/^(#{1,3})\s+(.*)$/);
+    if (h) {
+      const size = h[1].length === 1 ? "text-[17px]" : h[1].length === 2 ? "text-[15.5px]" : "text-[14.5px]";
+      out.push(
+        <p key={key++} className={`font-semibold text-zinc-900 ${size}`}>
+          {renderInline(h[2])}
+        </p>,
+      );
+      i++;
+      continue;
+    }
+    if (/^\s*[-*]\s+/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^\s*[-*]\s+/.test(lines[i])) items.push(lines[i++].replace(/^\s*[-*]\s+/, ""));
+      out.push(
+        <ul key={key++} className="ml-4 list-disc space-y-1">
+          {items.map((it, j) => (
+            <li key={j}>{renderInline(it)}</li>
+          ))}
+        </ul>,
+      );
+      continue;
+    }
+    if (/^\s*\d+\.\s+/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) items.push(lines[i++].replace(/^\s*\d+\.\s+/, ""));
+      out.push(
+        <ol key={key++} className="ml-4 list-decimal space-y-1">
+          {items.map((it, j) => (
+            <li key={j}>{renderInline(it)}</li>
+          ))}
+        </ol>,
+      );
+      continue;
+    }
+    if (line.trim() === "") {
+      i++;
+      continue;
+    }
+    const para: string[] = [];
+    while (
+      i < lines.length &&
+      lines[i].trim() !== "" &&
+      !lines[i].trimStart().startsWith("```") &&
+      !/^\s*[-*]\s+/.test(lines[i]) &&
+      !/^\s*\d+\.\s+/.test(lines[i]) &&
+      !/^#{1,3}\s+/.test(lines[i])
+    ) {
+      para.push(lines[i++]);
+    }
+    out.push(
+      <p key={key++} className="leading-relaxed">
+        {para.flatMap((ln, j) => (j === 0 ? renderInline(ln) : [<br key={`b${j}`} />, ...renderInline(ln)]))}
+      </p>,
+    );
+  }
+  return out;
+}
+
+function renderInline(text: string): React.ReactNode[] {
+  const nodes: React.ReactNode[] = [];
+  const re = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\))/g;
+  let last = 0;
+  let key = 0;
+  for (const m of text.matchAll(re)) {
+    const idx = m.index ?? 0;
+    if (idx > last) nodes.push(text.slice(last, idx));
+    const tok = m[0];
+    if (tok.startsWith("`")) {
+      nodes.push(
+        <code key={key++} className="rounded bg-zinc-200/70 px-1 py-0.5 font-mono text-[12.5px]">
+          {tok.slice(1, -1)}
+        </code>,
+      );
+    } else if (tok.startsWith("**")) {
+      nodes.push(<strong key={key++}>{tok.slice(2, -2)}</strong>);
+    } else if (tok.startsWith("*")) {
+      nodes.push(<em key={key++}>{tok.slice(1, -1)}</em>);
+    } else {
+      const lm = tok.match(/\[([^\]]+)\]\(([^)]+)\)/);
+      if (lm) {
+        nodes.push(
+          <a key={key++} href={lm[2]} target="_blank" rel="noopener noreferrer" className="text-brand underline">
+            {lm[1]}
+          </a>,
+        );
+      }
+    }
+    last = idx + tok.length;
+  }
+  if (last < text.length) nodes.push(text.slice(last));
+  return nodes;
+}
+
+function CodeBlock({ code, lang }: { code: string; lang?: string }) {
+  const [copied, setCopied] = useState(false);
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* ignore */
+    }
+  }
+  return (
+    <div className="overflow-hidden rounded-lg border border-zinc-200 bg-zinc-950">
+      <div className="flex items-center justify-between border-b border-white/10 px-3 py-1.5">
+        <span className="font-mono text-[10.5px] uppercase tracking-wide text-zinc-400">{lang || "code"}</span>
+        <button type="button" onClick={copy} className="text-[10.5px] text-zinc-400 hover:text-white">
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+      <pre className="overflow-x-auto p-3 text-[12.5px] leading-relaxed text-zinc-100">
+        <code className="font-mono">{code}</code>
+      </pre>
+    </div>
+  );
+}
+
 async function streamCompletion(
   messages: { role: string; content: string }[],
   model: string,
@@ -397,6 +685,18 @@ async function streamCompletion(
   }
 }
 
+function relativeTime(iso: string): string {
+  const t = new Date(iso).getTime();
+  if (Number.isNaN(t)) return "";
+  const s = Math.max(0, Math.floor((Date.now() - t) / 1000));
+  if (s < 45) return "just now";
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  return `${Math.floor(h / 24)}d ago`;
+}
+
 function PlusIcon() {
   return (
     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" aria-hidden>
@@ -411,4 +711,17 @@ function SendIcon() {
     </svg>
   );
 }
-
+function PencilIcon() {
+  return (
+    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+      <path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" />
+    </svg>
+  );
+}
+function TrashIcon() {
+  return (
+    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+      <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
+    </svg>
+  );
+}

package/templates/ai-chat/functions/deleteConversation.ts

@@ -0,0 +1,33 @@
+import { mutation, v } from "@pylonsync/functions";
+
+// deleteConversation — remove a conversation AND all its messages in one
+// transaction. The client could delete the Conversation row itself (it's
+// owner-scoped), but that would orphan the messages; this cascades. Gated to the
+// owner: it verifies the conversation belongs to the caller before deleting.
+export default mutation<{ conversationId: string }, { ok: boolean; deleted: number }>({
+  auth: "user",
+  args: { conversationId: v.id("Conversation") },
+  async handler(ctx, args) {
+    const convo = (await ctx.db.get("Conversation", args.conversationId)) as
+      | { userId: string }
+      | null;
+    if (!convo) return { ok: true, deleted: 0 };
+    if (convo.userId !== ctx.auth.userId) {
+      throw ctx.error("POLICY_DENIED", "You can only delete your own conversations.");
+    }
+
+    const messages = (await ctx.db.unsafe.list("Message")) as unknown as {
+      id: string;
+      conversationId: string;
+    }[];
+    let deleted = 0;
+    for (const m of messages) {
+      if (m.conversationId === args.conversationId) {
+        await ctx.db.unsafe.delete("Message", m.id);
+        deleted++;
+      }
+    }
+    await ctx.db.unsafe.delete("Conversation", args.conversationId);
+    return { ok: true, deleted };
+  },
+});