handle comments

Author: Tsche

README.md

@@ -73,8 +73,24 @@ const resource = resourceFromDocument({
 });
 ```
 
+The bundled read-only discussion example can render the feedback site's test
+thread, including labels, canonical reaction counters, minimized comments, and
+replies:
+
+`https://feedback.cpp.social/example/?site=feedback-cpp-social&key=feedback%2Fexample&github=link`
+
 ## Counter cache
 
+The service database is a cache of GitHub discussions. It keeps
+lightweight discussion and comment metadata in `discussions` and `comments`,
+content separately in `content`, main-post reactions in `reactions`, comment
+reactions in `comment_reactions`, and discussion labels through
+`discussion_labels`. Reaction rows retain GitHub account IDs when the API
+returns them; an aggregate remainder row is used for accounts not included in
+the returned user page. The public API is read-only for discussion content and
+counters; discussion creation, voting, starring, and comment moderation are not
+exposed.
+
 `cache_fresh_seconds` is the age at which a requested tracked counter needs an
 authoritative GitHub refresh. The default is five seconds. A batched request
 refreshes only stale resources; recently refreshed resources in the same request

config/sites.example.toml

@@ -22,3 +22,7 @@ category_id = "replace-with-category-node-id"
 # refresh_cooldown_seconds = 5
 # refresh_sweep_seconds = 86400
 # max_batch_size = 100
+features = ["counters", "viewer_reactions", "voting", "discussion", "comments", "labels", "github_link"]
+reaction_counters = ["LAUGH", "HOORAY", "CONFUSED", "HEART", "ROCKET", "EYES"]
+upvote_source = "both" # thumbsup, native, or both
+downvotes = true

config/sites.toml

@@ -16,6 +16,10 @@ repository_id = "R_kgDOUc9png"
 installation_id = 162105624
 category = "General"
 category_id = "DIC_kwDOUc9pns4DFwQt"
+features = ["counters", "viewer_reactions", "voting", "discussion", "comments", "labels", "github_link"]
+reaction_counters = ["LAUGH", "HOORAY", "CONFUSED", "HEART", "ROCKET", "EYES"]
+upvote_source = "both"
+downvotes = true
 
 [sites.cpp-social]
 origins = ["https://cpp.social"]

runtime/pages/example/index.html

@@ -11,9 +11,15 @@
   <body>
     <main>
       <h1>Feedback integration example</h1>
-      <p>This page exercises batched cached counts, targeted refreshes, GitHub authentication, voting, and local stars.</p>
+      <p>This page renders the feedback discussion, canonical reactions, labels, comments, minimized comments, and replies.</p>
       <p>API: <code id="api-origin"></code></p>
-      <div id="cards" class="cards"></div>
+      <div id="authentication-status" class="authentication-status"></div>
+      <section id="thread" class="thread"></section>
+      <form id="comment-form" class="comment-form">
+        <textarea id="comment-body" rows="4" maxlength="16000" placeholder="Add a comment"></textarea>
+        <button type="submit">Sign in and comment</button>
+        <button id="clear-reply" type="button" hidden>Cancel reply</button>
+      </form>
       <p id="status" role="status">Loading…</p>
     </main>
     <script src="{{EXAMPLE_SCRIPT}}"></script>

runtime/pages/example/style.css

@@ -14,30 +14,85 @@ main {
   padding: 2rem;
 }
 
-.cards {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-  margin: 2rem 0;
+.authentication-status {
+  align-items: center;
+  background: #f1f5f8;
+  border: 1px solid #d7dbe0;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+  margin: 1rem 0;
+  padding: 0.75rem;
 }
 
-.card {
+.authentication-status small {
+  color: #555;
+  margin-right: auto;
+}
+
+.thread {
   border: 1px solid #ddd;
   border-radius: 0.5rem;
   padding: 1rem;
 }
 
-.card h2 {
+.thread h2 {
   font-size: 1rem;
   margin: 0;
 }
 
-.controls {
+.reactions {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.75rem;
   margin-top: 1rem;
 }
 
+.poll-option {
+  border: 1px solid #d7dbe0;
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+}
+
+.poll-option.selected,
+.answer {
+  border-color: #5b8c5a;
+  background: #f1f8ef;
+}
+
+.verified-answer {
+  box-shadow: inset 3px 0 #2f6f3e;
+}
+
+.comment {
+  border-left: 3px solid #d7dbe0;
+  margin-top: 1.5rem;
+  padding-left: 1rem;
+}
+
+.comment-form {
+  display: grid;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+textarea {
+  font: inherit;
+  padding: 0.75rem;
+  resize: vertical;
+}
+
+.reply {
+  margin-left: 1.5rem;
+}
+
+.tag {
+  background: #eef2f6;
+  border-radius: 0.25rem;
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+}
+
 button {
   cursor: pointer;
   font: inherit;

runtime/src/api/client.ts

@@ -60,6 +60,17 @@ export interface EnsuredDiscussion {
   number: number;
 }
 
+export interface DiscussionContent {
+  readonly discussion: Record<string, unknown>;
+  readonly comments: readonly Record<string, unknown>[];
+}
+
+export interface AddedComment {
+  readonly id: string;
+  readonly body?: string;
+  readonly url?: string;
+}
+
 export class FeedbackClient {
   readonly #apiOrigin: string;
   readonly #site: string;
@@ -124,7 +135,7 @@ export class FeedbackClient {
     if (normalized.length === 0) throw new TypeError("At least one resource key is required");
     const pending = normalized.filter((key) => this.#viewerNeedsSync(key, token.viewerId));
     if (pending.length > 0) {
-      const url = new URL(`/v1/sites/${encodeURIComponent(this.#site)}/viewer-reactions`, this.#apiOrigin);
+      const url = new URL(`/v1/sites/${encodeURIComponent(this.#site)}/viewer`, this.#apiOrigin);
       url.searchParams.set("keys", pending.join(","));
       const headers = { Accept: "application/json", Authorization: `Bearer ${token.value}` };
       const init: RequestInit = { headers };
@@ -197,6 +208,45 @@ export class FeedbackClient {
     return { id: payload.id, number: payload.number };
   }
 
+  async discussionContent(key: string, signal?: AbortSignal): Promise<DiscussionContent> {
+    validateResourceId(key);
+    const url = new URL(`/v1/sites/${encodeURIComponent(this.#site)}/discussion`, this.#apiOrigin);
+    url.searchParams.set("keys", key);
+    const init: RequestInit = { headers: { Accept: "application/json" } };
+    if (signal) init.signal = signal;
+    const response = await this.#fetch(url, init);
+    if (!response.ok) throw new FeedbackError(response.status, await errorCode(response));
+    const payload: unknown = await response.json();
+    if (!payload || typeof payload !== "object" || (payload as { v?: unknown }).v !== 1) {
+      throw new TypeError("Invalid discussion content response");
+    }
+    const content = (payload as { content?: unknown }).content;
+    if (!content || typeof content !== "object") throw new TypeError("Invalid discussion content response");
+    return { discussion: content as Record<string, unknown>, comments: [] };
+  }
+
+  async addComment(
+    key: string,
+    body: string,
+    token: AccessToken,
+    replyTo?: string,
+    signal?: AbortSignal,
+  ): Promise<AddedComment> {
+    validateResourceId(key);
+    if (!body.trim() || body.length > 16_000) throw new TypeError("Invalid comment body");
+    const payload = await this.#post(
+      "comments",
+      { key, body, ...(replyTo === undefined ? {} : { reply_to: replyTo }) },
+      signal,
+      token.value,
+    );
+    const comment = payload.comment;
+    if (!comment || typeof comment !== "object" || typeof (comment as { id?: unknown }).id !== "string") {
+      throw new TypeError("Invalid comment response");
+    }
+    return comment as AddedComment;
+  }
+
   async vote(
     key: string,
     requested: Vote,

runtime/src/auth/status.ts

@@ -0,0 +1,64 @@
+import type { Authentication } from "./controller.js";
+
+export interface AuthenticationStatusOptions {
+  mount: HTMLElement;
+  authentication: Authentication;
+  signedOutLabel?: string;
+  signedInLabel?: (viewerId?: string) => string;
+  explanation?: string;
+  loginLabel?: string;
+  logoutLabel?: string;
+  onError?: (error: unknown) => void;
+}
+
+export interface AuthenticationStatusController {
+  readonly element: HTMLElement;
+  refresh(): void;
+}
+
+export function createAuthenticationStatus(
+  options: AuthenticationStatusOptions,
+): AuthenticationStatusController {
+  const element = document.createElement("section");
+  element.className = "feedback-authentication-status";
+  const message = document.createElement("span");
+  const action = document.createElement("button");
+  action.type = "button";
+  element.append(message, action);
+  options.mount.replaceChildren(element);
+
+  const refresh = (): void => {
+    const token = options.authentication.token();
+    const signedIn = token !== null;
+    message.textContent = signedIn
+      ? (options.signedInLabel?.(token.viewerId) ?? "Authenticated")
+      : (options.signedOutLabel ?? "Not authenticated");
+    action.textContent = signedIn
+      ? (options.logoutLabel ?? "Log out")
+      : (options.loginLabel ?? "Log in");
+    action.setAttribute("aria-label", action.textContent);
+    action.onclick = () => {
+      if (options.authentication.token() !== null) {
+        options.authentication.clear();
+        refresh();
+        return;
+      }
+      action.disabled = true;
+      void options.authentication.authenticate()
+        .then(refresh)
+        .catch((error: unknown) => {
+          options.onError?.(error);
+          refresh();
+        })
+        .finally(() => { action.disabled = false; });
+    };
+  };
+
+  if (options.explanation) {
+    const explanation = document.createElement("small");
+    explanation.textContent = options.explanation;
+    element.insertBefore(explanation, message);
+  }
+  refresh();
+  return { element, refresh };
+}