@tribe-nest/forge 1.13.0

package/src/ui/styled/AiAgentWidget.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useRef, useState } from "react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import { useAiAgent } from "../headless/agent/useAiAgent";
+import { Markdown } from "./Markdown";
+
+export interface AiAgentWidgetProps {
+  /** Corner to anchor the floating bubble. Default "bottom-right". */
+  position?: "bottom-right" | "bottom-left";
+  /** Accent color for the bubble + user bubbles. Defaults to the theme primary. */
+  accentColor?: string;
+  /** Header title. Defaults to the agent's configured display name. */
+  title?: string;
+  /** Stacking order for the floating elements. Default 9999. */
+  zIndex?: number;
+}
+
+/**
+ * Drop-in website AI agent. A self-contained floating chat widget: fetches its
+ * own config for the site's profile, renders a fixed-position bubble + panel,
+ * and streams answers grounded in the artist's content + knowledge base. Render
+ * it once (e.g. in __root); it renders nothing when the agent is disabled for
+ * the profile. Appearance-only props let authors restyle it without touching
+ * behavior. For custom UI, use the `useAiAgent()` hook instead.
+ */
+export function AiAgentWidget({ position = "bottom-right", accentColor, title, zIndex = 9999 }: AiAgentWidgetProps) {
+  const theme = useForgeTheme();
+  const { isEnabled, config, messages, sending, error, send } = useAiAgent();
+  const [open, setOpen] = useState(false);
+  const [input, setInput] = useState("");
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const accent = accentColor || theme.colors.primary;
+  const onAccent = readableTextOn(accent);
+  const side = position === "bottom-left" ? { left: 20 } : { right: 20 };
+  const heading = title || config?.displayName || "Assistant";
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
+  }, [messages, sending]);
+
+  if (!isEnabled) return null;
+
+  const submit = () => {
+    if (!input.trim()) return;
+    send(input);
+    setInput("");
+  };
+
+  return (
+    <div style={{ position: "fixed", bottom: 20, zIndex, ...side }}>
+      {open && (
+        <div
+          style={{
+            width: "min(380px, calc(100vw - 40px))",
+            height: "min(560px, calc(100vh - 120px))",
+            marginBottom: 12,
+            display: "flex",
+            flexDirection: "column",
+            background: theme.colors.background,
+            color: theme.colors.text,
+            border: `1px solid ${theme.colors.text}1a`,
+            borderRadius: theme.cornerRadius,
+            overflow: "hidden",
+            boxShadow: "0 12px 40px rgba(0,0,0,0.18)",
+          }}
+        >
+          <div style={{ background: accent, color: onAccent, padding: "12px 16px", fontWeight: 600, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <span>{heading}</span>
+            <button onClick={() => setOpen(false)} style={{ background: "transparent", border: "none", color: onAccent, cursor: "pointer", fontSize: 20, lineHeight: 1 }} aria-label="Close">
+              ×
+            </button>
+          </div>
+
+          <div ref={scrollRef} style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
+            {messages.length === 0 && (
+              <div style={{ opacity: 0.7, fontSize: 14 }}>{config?.greeting || "Hi! Ask me anything."}</div>
+            )}
+            {messages.map((m, i) => (
+              <div
+                key={i}
+                style={{
+                  alignSelf: m.role === "user" ? "flex-end" : "flex-start",
+                  maxWidth: "85%",
+                  padding: "8px 12px",
+                  borderRadius: 14,
+                  fontSize: 14,
+                  whiteSpace: m.role === "user" ? "pre-wrap" : "normal",
+                  background: m.role === "user" ? accent : `${theme.colors.text}12`,
+                  color: m.role === "user" ? onAccent : theme.colors.text,
+                }}
+              >
+                {m.role === "assistant" && m.text ? (
+                  <Markdown>{m.text}</Markdown>
+                ) : (
+                  m.text || (sending && i === messages.length - 1 ? "…" : "")
+                )}
+              </div>
+            ))}
+            {error && <div style={{ color: "#c0392b", fontSize: 13 }}>{error}</div>}
+          </div>
+
+          <div style={{ display: "flex", gap: 8, padding: 12, borderTop: `1px solid ${theme.colors.text}1a` }}>
+            <input
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && submit()}
+              placeholder="Type a message…"
+              disabled={sending}
+              style={{
+                flex: 1,
+                padding: "8px 12px",
+                borderRadius: theme.cornerRadius,
+                border: `1px solid ${theme.colors.text}33`,
+                background: theme.colors.background,
+                color: theme.colors.text,
+                outline: "none",
+                fontSize: 14,
+              }}
+            />
+            <button
+              onClick={submit}
+              disabled={sending || !input.trim()}
+              style={{ background: accent, color: onAccent, border: "none", borderRadius: theme.cornerRadius, padding: "0 16px", cursor: "pointer", fontWeight: 600 }}
+            >
+              Send
+            </button>
+          </div>
+        </div>
+      )}
+
+      <button
+        onClick={() => setOpen((o) => !o)}
+        aria-label="Open chat assistant"
+        style={{
+          width: 56,
+          height: 56,
+          borderRadius: "50%",
+          background: accent,
+          color: onAccent,
+          border: "none",
+          cursor: "pointer",
+          boxShadow: "0 6px 20px rgba(0,0,0,0.25)",
+          fontSize: 24,
+          float: position === "bottom-left" ? "left" : "right",
+        }}
+      >
+        {open ? "×" : "💬"}
+      </button>
+    </div>
+  );
+}

package/src/ui/styled/AudioPlayer.tsx

@@ -0,0 +1,123 @@
+import { SkipBack, SkipForward, Play, Pause, X } from "lucide-react";
+import { useAudioPlayer } from "../../contexts/AudioPlayerContext";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+
+function fmtTime(s: number): string {
+  if (!Number.isFinite(s) || s < 0) return "0:00";
+  const m = Math.floor(s / 60);
+  const sec = Math.floor(s % 60);
+  return `${m}:${sec.toString().padStart(2, "0")}`;
+}
+
+export interface AudioPlayerProps {
+  /** Hide when nothing is loaded (default true). */
+  hideWhenEmpty?: boolean;
+  /**
+   * Pin the player to the bottom of the viewport as a global playback bar
+   * (default true). Set false to render an inline card wherever it's placed.
+   */
+  fixed?: boolean;
+}
+
+/**
+ * Themed "now playing" bar bound to the Forge audio player. Renders as a fixed
+ * global playback bar by default (drop it once in your root layout); pass
+ * `fixed={false}` for an inline card. Includes a close button that stops
+ * playback and dismisses the bar.
+ */
+export function AudioPlayer({ hideWhenEmpty = true, fixed = true }: AudioPlayerProps) {
+  const theme = useForgeTheme();
+  const a = useAudioPlayer();
+
+  if (!a.currentTrack && hideWhenEmpty) return null;
+
+  const ctrlBtn = {
+    background: "transparent",
+    border: "none",
+    cursor: "pointer",
+    color: theme.colors.text,
+    display: "inline-flex",
+    alignItems: "center",
+    padding: 4,
+  } as const;
+
+  const bar = (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: 10,
+        maxWidth: 1040,
+        margin: "0 auto",
+        background: theme.colors.background,
+        border: fixed ? "none" : `1px solid ${theme.colors.primary}20`,
+        borderRadius: fixed ? 0 : theme.cornerRadius,
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      {a.currentTrack?.coverImage && (
+        <img
+          src={a.currentTrack.coverImage}
+          alt=""
+          style={{ width: 44, height: 44, borderRadius: theme.cornerRadius, objectFit: "cover", flexShrink: 0 }}
+        />
+      )}
+      <button onClick={a.playPrevious} style={ctrlBtn} aria-label="Previous">
+        <SkipBack size={18} />
+      </button>
+      <button onClick={() => (a.isPlaying ? a.pause() : a.play())} style={ctrlBtn} aria-label={a.isPlaying ? "Pause" : "Play"}>
+        {a.isPlaying ? <Pause size={20} /> : <Play size={20} />}
+      </button>
+      <button onClick={a.playNext} style={ctrlBtn} aria-label="Next">
+        <SkipForward size={18} />
+      </button>
+
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ fontWeight: 600, fontSize: 14, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+          {a.currentTrack?.title ?? "Nothing playing"}
+          {a.currentTrack?.artist ? ` — ${a.currentTrack.artist}` : ""}
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, opacity: 0.8 }}>
+          <span>{fmtTime(a.currentTime)}</span>
+          <input
+            type="range"
+            min={0}
+            max={a.duration || 0}
+            value={a.currentTime}
+            onChange={(e) => a.seek(Number(e.target.value))}
+            style={{ flex: 1, accentColor: theme.colors.primary }}
+          />
+          <span>{fmtTime(a.duration)}</span>
+        </div>
+      </div>
+
+      <button onClick={a.stop} style={{ ...ctrlBtn, opacity: 0.7 }} aria-label="Close player">
+        <X size={18} />
+      </button>
+    </div>
+  );
+
+  if (!fixed) return bar;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 50,
+        background: `color-mix(in srgb, ${theme.colors.background} 92%, transparent)`,
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)",
+        borderTop: `1px solid ${theme.colors.primary}24`,
+        boxShadow: "0 -8px 30px -20px rgba(0,0,0,0.5)",
+        paddingBottom: "env(safe-area-inset-bottom)",
+      }}
+    >
+      {bar}
+    </div>
+  );
+}

package/src/ui/styled/BlogCategory.tsx

@@ -0,0 +1,79 @@
+import { useBlogCategory, useBlogCategoryPosts } from "../../data/queries/useBlog";
+import type { BlogPost, BlogCategory as BlogCategoryModel } from "../../types/models";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface BlogCategoryProps {
+  /** Category slug. */
+  slug: string;
+  /** Build the href for a blog post detail page from its slug. */
+  blogPostHref?: (slug: string) => string;
+  /** Server-fetched category to seed the query for SSR (no client loading flash). */
+  initialCategory?: BlogCategoryModel | null;
+}
+
+function excerpt(html: string, len: number) {
+  return html.replace(/<[^>]+>/g, "").slice(0, len);
+}
+
+/** Blog category page — grid of posts in a category. Built on `useBlogCategory` + `useBlogCategoryPosts`. */
+export function BlogCategory({ slug, blogPostHref = (s) => `/i/blog/${s}`, initialCategory }: BlogCategoryProps) {
+  const theme = useForgeTheme();
+  const { data: category, isLoading: catLoading } = useBlogCategory(slug, { initialData: initialCategory });
+  const { data: posts, isLoading: postsLoading } = useBlogCategoryPosts(slug, { page: 1, limit: 12 });
+
+  if (catLoading || postsLoading) return <Loading fullPage />;
+  if (!category) return <p>Category not found.</p>;
+
+  const list = posts?.data ?? [];
+
+  return (
+    <div style={{ maxWidth: 960, margin: "0 auto", color: theme.colors.text }}>
+      <header style={{ marginBottom: 32 }}>
+        <h1 style={{ fontSize: 30, fontWeight: 800 }}>{category.title}</h1>
+        {category.description && <p style={{ marginTop: 8, opacity: 0.7 }}>{category.description}</p>}
+      </header>
+
+      {list.length ? (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: 24 }}>
+          {list.map((post: BlogPost) => {
+            const cover = post.media?.find((m) => m.type.startsWith("image"))?.url ?? post.media?.[0]?.url;
+            return (
+              <a
+                key={post.id}
+                href={blogPostHref(post.slug)}
+                style={{
+                  color: theme.colors.text,
+                  textDecoration: "none",
+                  border: `1px solid ${theme.colors.text}1a`,
+                  borderRadius: theme.cornerRadius,
+                  overflow: "hidden",
+                  display: "block",
+                }}
+              >
+                {cover ? (
+                  <img src={cover} alt={post.title} style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover" }} />
+                ) : (
+                  <div style={{ width: "100%", aspectRatio: "1/1", background: `${theme.colors.text}0d` }} />
+                )}
+                <div style={{ padding: 16 }}>
+                  <h3 style={{ fontWeight: 600 }}>{post.title}</h3>
+                  {post.content && (
+                    <p style={{ fontSize: 14, opacity: 0.7, marginTop: 6 }}>{excerpt(post.content, 140)}…</p>
+                  )}
+                  {post.publishedAt && (
+                    <p style={{ fontSize: 12, opacity: 0.5, marginTop: 6 }}>
+                      {new Date(post.publishedAt).toLocaleDateString()}
+                    </p>
+                  )}
+                </div>
+              </a>
+            );
+          })}
+        </div>
+      ) : (
+        <p style={{ opacity: 0.7 }}>No posts yet.</p>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/BlogComments.tsx

@@ -0,0 +1,236 @@
+import { useMemo, useState, type CSSProperties } from "react";
+import { useForge } from "../../provider/ForgeProvider";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import {
+  useBlogComments,
+  useBlogCommentSettings,
+  useSubmitBlogComment,
+  type BlogComment,
+} from "../../data/queries/useBlogComments";
+import { BotProtection, EMPTY_BOT_FIELDS, type BotFields } from "./BotProtection";
+
+export interface BlogCommentsProps {
+  blogPostId: string;
+  /** Comments per page (matches the paginated public API). */
+  pageSize?: number;
+  title?: string;
+  /** Where "Sign in to comment" links when the profile requires sign-in. */
+  signInHref?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+function formatDate(iso: string): string {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? "" : d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
+}
+
+/**
+ * Paginated blog comments + submit form. Shared across every Forge surface
+ * (apps/client, site-starter, AI-code-built sites). Renders nothing when the
+ * profile has comments disabled.
+ */
+export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", signInHref, className, style }: BlogCommentsProps) {
+  const theme = useForgeTheme();
+  const { token } = useForge();
+  const isSignedIn = !!token;
+
+  const { data: settings } = useBlogCommentSettings();
+  const commentsQuery = useBlogComments(blogPostId, pageSize);
+  const submit = useSubmitBlogComment();
+
+  const [content, setContent] = useState("");
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pendingNotice, setPendingNotice] = useState(false);
+  const [botFields, setBotFields] = useState<BotFields>(EMPTY_BOT_FIELDS);
+  const [botResetKey, setBotResetKey] = useState(0);
+
+  const comments = useMemo<BlogComment[]>(
+    () => (commentsQuery.data?.pages ?? []).flatMap((p) => p.data),
+    [commentsQuery.data],
+  );
+  const total = commentsQuery.data?.pages?.[0]?.total ?? 0;
+
+  const muted = theme.colors.muted ?? `${theme.colors.text}99`;
+  const border = theme.colors.border ?? `${theme.colors.primary}33`;
+  const inputStyle: CSSProperties = {
+    width: "100%",
+    padding: 10,
+    border: `1px solid ${border}`,
+    borderRadius: theme.cornerRadius,
+    background: theme.colors.background,
+    color: theme.colors.text,
+    fontFamily: theme.fontFamily,
+  };
+
+  if (settings && !settings.enabled) return null;
+
+  const mustSignIn = settings?.requireSignIn && !isSignedIn;
+
+  const onSubmit = async () => {
+    setError(null);
+    const trimmed = content.trim();
+    if (!trimmed) {
+      setError("Please write a comment.");
+      return;
+    }
+    if (!isSignedIn && (!name.trim() || !email.trim())) {
+      setError("Name and email are required.");
+      return;
+    }
+    try {
+      const result = await submit.mutateAsync({
+        blogPostId,
+        content: trimmed,
+        ...botFields,
+        ...(isSignedIn ? {} : { guestName: name.trim(), guestEmail: email.trim() }),
+      });
+      setContent("");
+      setName("");
+      setEmail("");
+      setPendingNotice(result.pending);
+      // Refresh bot protection — the proof-of-work token is single-use.
+      setBotResetKey((k) => k + 1);
+    } catch (e) {
+      const message =
+        (e as { response?: { data?: { message?: string } } })?.response?.data?.message ?? "Something went wrong. Please try again.";
+      setError(message);
+    }
+  };
+
+  return (
+    <section
+      className={className}
+      // textAlign:left so the section never inherits a centered alignment from
+      // the artist's page/theme (comments read left-aligned like an article).
+      style={{ color: theme.colors.text, fontFamily: theme.fontFamily, textAlign: "left", ...style }}
+    >
+      <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>
+        {title}
+        {total > 0 ? ` (${total})` : ""}
+      </h2>
+
+      {/* Form */}
+      {mustSignIn ? (
+        <p style={{ color: muted, marginBottom: 24 }}>
+          {signInHref ? (
+            <a href={signInHref} style={{ color: theme.colors.primary }}>
+              Sign in
+            </a>
+          ) : (
+            "Sign in"
+          )}{" "}
+          to leave a comment.
+        </p>
+      ) : pendingNotice ? (
+        <div
+          style={{ padding: 12, borderRadius: theme.cornerRadius, background: `${theme.colors.primary}14`, marginBottom: 24 }}
+        >
+          Thanks! Your comment is awaiting moderation.
+          <button
+            onClick={() => setPendingNotice(false)}
+            style={{ marginLeft: 8, background: "none", border: "none", color: theme.colors.primary, cursor: "pointer" }}
+          >
+            Write another
+          </button>
+        </div>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 28 }}>
+          {!isSignedIn && (
+            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
+              <input placeholder="Your name" value={name} onChange={(e) => setName(e.target.value)} style={{ ...inputStyle, flex: 1, minWidth: 160 }} />
+              <input
+                type="email"
+                placeholder="Email (not published)"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                style={{ ...inputStyle, flex: 1, minWidth: 160 }}
+              />
+            </div>
+          )}
+          <textarea
+            placeholder="Add a comment…"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            rows={3}
+            style={{ ...inputStyle, resize: "vertical" }}
+          />
+          <BotProtection key={botResetKey} onChange={setBotFields} />
+          {error && <p style={{ color: "#ef4444", fontSize: 14 }}>{error}</p>}
+          <div>
+            <button
+              onClick={onSubmit}
+              disabled={submit.isPending}
+              style={{
+                background: theme.colors.primary,
+                color: theme.colors.textPrimary ?? readableTextOn(theme.colors.primary),
+                border: "none",
+                borderRadius: theme.cornerRadius,
+                padding: "10px 20px",
+                fontWeight: 600,
+                cursor: submit.isPending ? "default" : "pointer",
+                opacity: submit.isPending ? 0.7 : 1,
+              }}
+            >
+              {submit.isPending ? "Posting…" : "Post comment"}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* List */}
+      {commentsQuery.isLoading ? (
+        <p style={{ color: muted }}>Loading comments…</p>
+      ) : comments.length === 0 ? (
+        <p style={{ color: muted }}>No comments yet. Be the first.</p>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+          {comments.map((c) => (
+            <div key={c.id}>
+              <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
+                <strong>{c.authorName || "Anonymous"}</strong>
+                <span style={{ color: muted, fontSize: 13 }}>{formatDate(c.createdAt)}</span>
+              </div>
+              <p style={{ margin: "4px 0", whiteSpace: "pre-wrap" }}>{c.content}</p>
+              {c.replies?.length > 0 && (
+                <div style={{ marginTop: 10, paddingLeft: 16, borderLeft: `2px solid ${border}`, display: "flex", flexDirection: "column", gap: 12 }}>
+                  {c.replies.map((r) => (
+                    <div key={r.id}>
+                      <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
+                        <strong style={{ color: theme.colors.primary }}>{r.authorName || "Author"}</strong>
+                        <span style={{ color: muted, fontSize: 13 }}>{formatDate(r.createdAt)}</span>
+                      </div>
+                      <p style={{ margin: "4px 0", whiteSpace: "pre-wrap" }}>{r.content}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {commentsQuery.hasNextPage && (
+        <div style={{ marginTop: 20 }}>
+          <button
+            onClick={() => commentsQuery.fetchNextPage()}
+            disabled={commentsQuery.isFetchingNextPage}
+            style={{
+              background: "transparent",
+              color: theme.colors.primary,
+              border: `1px solid ${border}`,
+              borderRadius: theme.cornerRadius,
+              padding: "8px 16px",
+              cursor: "pointer",
+            }}
+          >
+            {commentsQuery.isFetchingNextPage ? "Loading…" : "Load more comments"}
+          </button>
+        </div>
+      )}
+    </section>
+  );
+}