@pylonsync/create-pylon 0.19.0 → 0.20.0

package/templates/ai-chat/components/chat/icons.tsx

@@ -0,0 +1,198 @@
+import React from "react";
+
+// Line icons drawn at 1.5px on a 24px grid. Size with `size`, color with
+// `currentColor`.
+
+type IconProps = { size?: number; className?: string };
+
+function Svg({ size = 18, className, children }: IconProps & { children: React.ReactNode }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export function BrandMark({ size = 28, className }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true" className={className}>
+      <rect width="32" height="32" rx="9" fill="var(--brand)" />
+      <circle cx="16" cy="16" r="8.5" fill="none" stroke="#fff" strokeOpacity="0.35" strokeWidth="1.5" />
+      <circle cx="13.5" cy="13.5" r="4" fill="#fff" />
+    </svg>
+  );
+}
+
+export function PlusIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="M12 5v14M5 12h14" />
+    </Svg>
+  );
+}
+
+export function ComposeIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="M11 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5" />
+      <path d="M17.5 3.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z" />
+    </Svg>
+  );
+}
+
+export function ArrowUpIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="M12 19V5M5.5 11.5 12 5l6.5 6.5" />
+    </Svg>
+  );
+}
+
+export function StopIcon({ size = 12, className }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 12 12" aria-hidden="true" className={className}>
+      <rect x="1" y="1" width="10" height="10" rx="2" fill="currentColor" />
+    </svg>
+  );
+}
+
+export function CopyIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <rect x="8.5" y="8.5" width="11" height="11" rx="2.5" />
+      <path d="M15.5 8.5V6.5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2" />
+    </Svg>
+  );
+}
+
+export function CheckIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="m5 12.5 4.5 4.5L19 7.5" />
+    </Svg>
+  );
+}
+
+export function RefreshIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="M20 11a8 8 0 0 0-14.3-4.9L4 8" />
+      <path d="M4 4v4h4" />
+      <path d="M4 13a8 8 0 0 0 14.3 4.9L20 16" />
+      <path d="M20 20v-4h-4" />
+    </Svg>
+  );
+}
+
+export function PencilIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4z" />
+    </Svg>
+  );
+}
+
+export function TrashIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="M4 7h16M9.5 7V4.5h5V7M6.5 7l.9 12.1a1.5 1.5 0 0 0 1.5 1.4h6.2a1.5 1.5 0 0 0 1.5-1.4L17.5 7" />
+    </Svg>
+  );
+}
+
+export function MenuIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="M4 7h16M4 12h10M4 17h16" />
+    </Svg>
+  );
+}
+
+export function CloseIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="M6 6l12 12M18 6 6 18" />
+    </Svg>
+  );
+}
+
+export function ChevronDownIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="m6.5 9.5 5.5 5.5 5.5-5.5" />
+    </Svg>
+  );
+}
+
+export function ArrowDownIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="M12 5v14M5.5 12.5 12 19l6.5-6.5" />
+    </Svg>
+  );
+}
+
+export function SearchIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <circle cx="11" cy="11" r="6.5" />
+      <path d="m20 20-4.2-4.2" />
+    </Svg>
+  );
+}
+
+export function KeyIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <circle cx="8" cy="15" r="4" />
+      <path d="m10.8 12.2 8.7-8.7M16.5 6.5l2.5 2.5M14 9l2 2" />
+    </Svg>
+  );
+}
+
+export function AlertIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M12 7.5v5.5M12 16.5v.01" />
+    </Svg>
+  );
+}
+
+export function BookIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="M5 4.5h9.5a3 3 0 0 1 3 3V20H8a3 3 0 0 1-3-3z" />
+      <path d="M5 17a3 3 0 0 1 3-3h9.5" />
+    </Svg>
+  );
+}
+
+export function SignOutIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <path d="M14 4.5H7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h7" />
+      <path d="M11 12h9M17 8.5l3.5 3.5-3.5 3.5" />
+    </Svg>
+  );
+}
+
+export function SidebarIcon(p: IconProps) {
+  return (
+    <Svg {...p}>
+      <rect x="3.5" y="4.5" width="17" height="15" rx="3" />
+      <path d="M9.5 4.5v15" />
+    </Svg>
+  );
+}

package/templates/ai-chat/components/chat/markdown.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { parseMarkdown, type Block, type Inline, type ListItem } from "@/lib/markdown";
+import { highlight } from "@/lib/highlight";
+import { CheckIcon, CopyIcon } from "./icons";
+
+// Renders a reply's Markdown as React elements. Text is always set as text
+// content, so model output cannot inject HTML or scripts; links are limited
+// to http(s), mailto, and same-site paths by lib/markdown.ts.
+export function Markdown({ text }: { text: string }) {
+  const blocks = useMemo(() => parseMarkdown(text), [text]);
+  return <div className="prose-reply">{blocks.map((b, i) => renderBlock(b, i))}</div>;
+}
+
+function renderBlock(b: Block, key: number): React.ReactNode {
+  switch (b.type) {
+    case "heading": {
+      const Tag = (["h2", "h2", "h3", "h4"] as const)[b.level - 1];
+      return <Tag key={key}>{renderInline(b.children)}</Tag>;
+    }
+    case "paragraph":
+      return <p key={key}>{renderInline(b.children)}</p>;
+    case "code":
+      return <CodeBlock key={key} code={b.code} lang={b.lang} />;
+    case "list":
+      return renderList(b.ordered, b.start, b.items, key);
+    case "quote":
+      return <blockquote key={key}>{b.children.map((c, i) => renderBlock(c, i))}</blockquote>;
+    case "hr":
+      return <hr key={key} />;
+    case "table":
+      return (
+        <div key={key} className="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                {b.head.map((cell, i) => (
+                  <th key={i} style={{ textAlign: b.align[i] ?? undefined }}>
+                    {renderInline(cell)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {b.rows.map((row, r) => (
+                <tr key={r}>
+                  {row.map((cell, i) => (
+                    <td key={i} style={{ textAlign: b.align[i] ?? undefined }}>
+                      {renderInline(cell)}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      );
+  }
+}
+
+function renderList(ordered: boolean, start: number, items: ListItem[], key: number): React.ReactNode {
+  const children = items.map((item, i) => (
+    <li key={i}>
+      {renderInline(item.children)}
+      {item.sublist ? renderList(item.sublist.ordered, item.sublist.start, item.sublist.items, 0) : null}
+    </li>
+  ));
+  return ordered ? (
+    <ol key={key} start={start !== 1 ? start : undefined}>
+      {children}
+    </ol>
+  ) : (
+    <ul key={key}>{children}</ul>
+  );
+}
+
+function renderInline(nodes: Inline[]): React.ReactNode[] {
+  return nodes.map((n, i) => {
+    switch (n.type) {
+      case "text":
+        return n.text.includes("\n")
+          ? n.text.split("\n").flatMap((part, j) => (j === 0 ? [part] : [<br key={`${i}-${j}`} />, part]))
+          : n.text;
+      case "code":
+        return <code key={i}>{n.text}</code>;
+      case "strong":
+        return <strong key={i}>{renderInline(n.children)}</strong>;
+      case "em":
+        return <em key={i}>{renderInline(n.children)}</em>;
+      case "del":
+        return <del key={i}>{renderInline(n.children)}</del>;
+      case "link":
+        return (
+          <a key={i} href={n.href} target="_blank" rel="noopener noreferrer nofollow">
+            {renderInline(n.children)}
+          </a>
+        );
+    }
+  });
+}
+
+const LANG_LABELS: Record<string, string> = {
+  ts: "TypeScript",
+  tsx: "TSX",
+  typescript: "TypeScript",
+  js: "JavaScript",
+  jsx: "JSX",
+  javascript: "JavaScript",
+  py: "Python",
+  python: "Python",
+  sql: "SQL",
+  sh: "Shell",
+  bash: "Bash",
+  zsh: "Shell",
+  json: "JSON",
+  rs: "Rust",
+  rust: "Rust",
+  go: "Go",
+  html: "HTML",
+  css: "CSS",
+  yaml: "YAML",
+  yml: "YAML",
+  md: "Markdown",
+  env: ".env",
+};
+
+export function CodeBlock({ code, lang }: { code: string; lang: string }) {
+  const [copied, setCopied] = useState(false);
+  const tokens = useMemo(() => highlight(code, lang), [code, lang]);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    } catch {
+      /* clipboard blocked; the code stays selectable */
+    }
+  }
+
+  return (
+    <div className="code-block">
+      <div className="code-block-bar">
+        <span>{LANG_LABELS[lang.toLowerCase()] ?? (lang || "Code")}</span>
+        <button type="button" onClick={copy} aria-label={copied ? "Copied" : "Copy code"}>
+          {copied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}
+          <span>{copied ? "Copied" : "Copy"}</span>
+        </button>
+      </div>
+      <pre>
+        <code>
+          {tokens.map((t, i) =>
+            t.kind === "plain" ? t.text : (
+              <span key={i} className={`tok-${t.kind}`}>
+                {t.text}
+              </span>
+            ),
+          )}
+        </code>
+      </pre>
+    </div>
+  );
+}

package/templates/ai-chat/components/chat/message.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import React, { useState } from "react";
+import { describeError, modelLabel } from "@/lib/chat";
+import { Markdown } from "./markdown";
+import { ProviderSetup } from "./setup";
+import { AlertIcon, BrandMark, CheckIcon, CopyIcon, RefreshIcon } from "./icons";
+
+export function UserMessage({ content, pending }: { content: string; pending?: boolean }) {
+  return (
+    <div className="msg-in flex justify-end">
+      <div
+        className={
+          "max-w-[min(85%,36rem)] whitespace-pre-wrap break-words rounded-[20px] rounded-br-md bg-bubble px-4 py-2.5 text-[15px] leading-relaxed text-ink " +
+          (pending ? "opacity-70" : "")
+        }
+      >
+        {content}
+      </div>
+    </div>
+  );
+}
+
+export interface AssistantMessageProps {
+  content: string;
+  // "streaming" | "done" | "stopped" | "error" | "interrupted"
+  status: string;
+  errorCode?: string | null;
+  model?: string | null;
+  // Regenerate and Retry are offered on the newest reply only.
+  canRegenerate: boolean;
+  onRegenerate?: () => void;
+  providerConfigured?: boolean;
+}
+
+export function AssistantMessage({
+  content,
+  status,
+  errorCode,
+  model,
+  canRegenerate,
+  onRegenerate,
+  providerConfigured,
+}: AssistantMessageProps) {
+  const streaming = status === "streaming";
+  const failed = status === "error";
+
+  return (
+    <div className="msg-in group/msg flex gap-3.5 sm:gap-4">
+      <div className="hidden pt-0.5 sm:block">
+        <BrandMark size={26} />
+      </div>
+      <div className="min-w-0 flex-1">
+        {content ? (
+          <div className={streaming ? "streaming-caret" : undefined}>
+            <Markdown text={content} />
+          </div>
+        ) : streaming ? (
+          <ThinkingDots />
+        ) : null}
+
+        {failed ? (
+          errorCode === "LLM_NOT_CONFIGURED" && !providerConfigured ? (
+            <div className="mt-1">
+              <ProviderSetup compact />
+            </div>
+          ) : (
+            <ErrorNote code={errorCode} />
+          )
+        ) : null}
+
+        {status === "interrupted" ? (
+          <p className="mt-2 text-[13px] text-ink-3">This reply was interrupted before it finished.</p>
+        ) : null}
+
+        {!streaming ? (
+          <MessageActions
+            content={content}
+            status={status}
+            model={model}
+            canRegenerate={canRegenerate}
+            onRegenerate={onRegenerate}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function ThinkingDots() {
+  return (
+    <div className="flex h-7 items-center gap-1.5" role="status" aria-label="Writing a reply">
+      <span className="thinking-dot" />
+      <span className="thinking-dot [animation-delay:160ms]" />
+      <span className="thinking-dot [animation-delay:320ms]" />
+    </div>
+  );
+}
+
+function ErrorNote({ code }: { code?: string | null }) {
+  const copy = describeError(code);
+  return (
+    <div className="mt-2 flex gap-3 rounded-2xl border border-warn/20 bg-warn-soft px-4 py-3">
+      <AlertIcon size={18} className="mt-0.5 shrink-0 text-warn" />
+      <div>
+        <p className="text-[14px] font-medium text-ink">{copy.title}</p>
+        <p className="mt-0.5 text-[13.5px] leading-relaxed text-ink-2">{copy.body}</p>
+      </div>
+    </div>
+  );
+}
+
+function MessageActions({
+  content,
+  status,
+  model,
+  canRegenerate,
+  onRegenerate,
+}: {
+  content: string;
+  status: string;
+  model?: string | null;
+  canRegenerate: boolean;
+  onRegenerate?: () => void;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    } catch {
+      /* clipboard blocked */
+    }
+  }
+
+  const retry = status === "error" || status === "interrupted";
+
+  return (
+    <div className="mt-2 flex h-8 items-center gap-0.5 text-ink-3">
+      {content ? (
+        <ActionButton label={copied ? "Copied" : "Copy"} onClick={copy}>
+          {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+        </ActionButton>
+      ) : null}
+      {canRegenerate && onRegenerate ? (
+        <ActionButton label={retry ? "Retry" : "Regenerate"} onClick={onRegenerate}>
+          <RefreshIcon size={16} />
+          {retry ? <span className="pr-1 text-[13px]">Retry</span> : null}
+        </ActionButton>
+      ) : null}
+      {status === "stopped" ? <span className="ml-2 text-[12.5px]">Stopped</span> : null}
+      {model && status !== "error" ? (
+        <span className="ml-2 text-[12.5px] opacity-0 transition-opacity duration-300 group-hover/msg:opacity-100">
+          {modelLabel(model)}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function ActionButton({
+  label,
+  onClick,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      title={label}
+      className="press inline-flex h-8 min-w-8 items-center justify-center gap-1 rounded-lg px-1.5 transition-colors duration-200 hover:bg-hover hover:text-ink"
+    >
+      {children}
+    </button>
+  );
+}

package/templates/ai-chat/components/chat/setup.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import React from "react";
+import { CodeBlock } from "./markdown";
+import { KeyIcon } from "./icons";
+
+const ENV_SNIPPET = `PYLON_LLM_PROVIDER=anthropic
+ANTHROPIC_API_KEY=sk-ant-...`;
+
+// Setup steps shown while the server has no model provider key. `compact`
+// is the inline version inside a failed reply.
+export function ProviderSetup({ compact = false }: { compact?: boolean }) {
+  return (
+    <div className="bezel">
+      <div className={"bezel-core " + (compact ? "p-4" : "p-5 sm:p-6")}>
+        <div className="flex items-start gap-3.5">
+          <span className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-warn-soft text-warn">
+            <KeyIcon size={18} />
+          </span>
+          <div className="min-w-0 flex-1">
+            <h2 className="text-[15px] font-semibold tracking-[-0.01em] text-ink">
+              Add a model provider key
+            </h2>
+            <p className="mt-1 text-[13.5px] leading-relaxed text-ink-2">
+              The server has no API key, so replies are turned off. Messages you send are still saved.
+            </p>
+          </div>
+        </div>
+
+        <ol className="mt-4 space-y-3 text-[13.5px] leading-relaxed text-ink-2">
+          <li className="flex gap-3">
+            <Step n={1} />
+            <div className="min-w-0 flex-1">
+              <p>
+                Add these lines to <code className="inline-code">.env</code> in the project root.
+              </p>
+              <div className="mt-2 [&_.code-block]:!mt-0">
+                <CodeBlock code={ENV_SNIPPET} lang="env" />
+              </div>
+            </div>
+          </li>
+          <li className="flex gap-3">
+            <Step n={2} />
+            <p className="flex-1">
+              Restart <code className="inline-code">pylon dev</code>. The key stays on the server and never
+              reaches the browser.
+            </p>
+          </li>
+          {!compact ? (
+            <li className="flex gap-3">
+              <Step n={3} />
+              <p className="flex-1">
+                For OpenAI, set <code className="inline-code">PYLON_LLM_PROVIDER=openai</code> and{" "}
+                <code className="inline-code">OPENAI_API_KEY</code>, then list OpenAI model ids in{" "}
+                <code className="inline-code">lib/site.config.ts</code>.
+              </p>
+            </li>
+          ) : null}
+        </ol>
+      </div>
+    </div>
+  );
+}
+
+function Step({ n }: { n: number }) {
+  return (
+    <span className="mt-px flex size-5 shrink-0 items-center justify-center rounded-full bg-hover text-[11px] font-medium tabular-nums text-ink-2">
+      {n}
+    </span>
+  );
+}