Comments Plugin

import { createBackendStack } from "@btst/stack/api"
import { commentsBackendPlugin } from "@btst/stack/plugins/comments/api"
import { serverAuth } from "./authorization.server"

const { handler, dbSchema } = createBackendStack({
  basePath: "/api/data",
  auth: serverAuth,
  plugins: {
    comments: commentsBackendPlugin({
      autoApprove: false,
      resolveUser: async (authorId) => {
        const user = await db.users.findById(authorId)
        return user
          ? { name: user.displayName, avatarUrl: user.avatarUrl }
          : null
      },
      hooks: {
        onAfterApproveComment: async (comment, ctx) => {
          await sendApprovalEmail(comment.authorId)
        },
      },
    })
  },
  adapter: (db) => createMemoryAdapter(db)({})
})

export { handler, dbSchema }

import { createClientStack } from "@btst/stack/client"
import { commentsClientPlugin } from "@btst/stack/plugins/comments/client"
import { QueryClient } from "@tanstack/react-query"

function getBaseURL(serverOrigin?: string) {
  if (typeof window !== "undefined") return window.location.origin
  return (
    serverOrigin ||
    process.env.BTST_SITE_URL ||
    process.env.BASE_URL ||
    "http://localhost:3000"
  )
}

export const getStackClient = (
  queryClient: QueryClient,
  options?: { headers?: Headers; origin?: string },
) => {
  const baseURL = getBaseURL(options?.origin)
  return createClientStack({
    api: {
      baseURL,
      basePath: "/api/data",
      ...(options?.headers ? { headers: options.headers } : {}),
    },
    site: { baseURL, basePath: "/pages" },
    queryClient,
    plugins: {
      comments: commentsClientPlugin({
        // optional loader lifecycle hooks:
        // hooks: {
        //   beforeLoadModeration: async (ctx) => { ... },
        //   beforeLoadUserComments: async (ctx) => { ... },
        //   onErrorLoad: async (error, ctx) => { ... },
        // },
      }),
    },
  })
}

import { clientAuth } from "@/lib/authorization.client"

<StackProvider
  stack={clientStack}
  router={frameworkRouter}
  auth={clientAuth}
  initialIdentity={initialIdentity}
  overrides={{
    comments: {
      resourceLinks: {
        "blog-post": (slug) => `/pages/blog/${slug}`,
      },
    },
  }}
>
  {children}
</StackProvider>

import { defineAuthorization } from "@btst/stack/authorization"
import { commentsPermissions } from "@btst/stack/plugins/comments/permissions"
import { z } from "zod"

export const authorization = defineAuthorization({
  identity: z.object({
    id: z.string(),
    role: z.enum(["user", "moderator"]),
  }),
  permissions: [commentsPermissions] as const,
  rules: ({ comments }) => [
    comments.thread.read.when(({ identity, facts }) => {
      if (facts.scope === "public") return true
      if (facts.scope === "own")
        return identity?.id === facts.authorId || identity?.role === "moderator"
      return identity?.role === "moderator"
    }),
    comments.thread.createComment.when(({ identity }) => identity !== null),
    comments.comment.edit.when(({ identity, facts }) =>
      identity?.id === facts.authorId || identity?.role === "moderator"
    ),
    comments.comment.delete.when(({ identity, facts }) =>
      identity?.id === facts.authorId || identity?.role === "moderator"
    ),
    comments.comment.react.when(({ identity, facts }) =>
      identity !== null && facts.status === "approved"
    ),
    comments.comment.moderate.when(({ identity, facts }) =>
      identity?.role === "moderator" && facts.currentStatus !== facts.nextStatus
    ),
  ],
})

"use client"

import { createClientAuth } from "@btst/stack/authorization/client"
import { authorization } from "./authorization"

export const clientAuth = createClientAuth({
  authorization,
  getIdentity: () => browserSession?.user ?? null,
  loginPath: "/login",
})

import "server-only"

import { createServerAuth } from "@btst/stack/authorization/server"
import { authorization } from "./authorization"

export const serverAuth = createServerAuth({
  authorization,
  getIdentityFromHeaders: async ({ headers }) => {
    const session = await auth.api.getSession({ headers })
    return session?.user ?? null
  },
})

import { CommentThread } from "@btst/stack/plugins/comments/client/components"

<CommentThread
  resourceId={post.slug}          // Unique identifier for the resource being commented on
  resourceType="blog-post"        // Namespace — avoids ID collisions across resource types
  loginHref={`/sign-in?redirectTo=${encodeURIComponent(`/blog/${post.slug}#comments`)}`}
  components={{
    // Optional: replace the plain textarea with a rich editor
    Input: MarkdownEditor,
    // Optional: replace plain text rendering with markdown
    Renderer: MarkdownContent,
  }}
/>

import { CommentThread } from "@btst/stack/plugins/comments/client/components"

overrides={{
  blog: {
    postBottomSlot: (post) => (
      <CommentThread
        resourceId={post.slug}
        resourceType="blog-post"
      />
    ),
  }
}}

import { CommentThread } from "@btst/stack/plugins/comments/client/components"

overrides={{
  kanban: {
    taskDetailBottomSlot: (task) => (
      <CommentThread
        resourceId={task.id}
        resourceType="kanban-task"
      />
    ),
  }
}}

import { CommentCount } from "@btst/stack/plugins/comments/client/components"

<CommentCount
  resourceId={post.slug}
  resourceType="blog-post"
/>

const comments = app.forRequest(request).operations.comments

await comments.updateComment({
  id: commentId,
  data: { body: "Corrected text" },
})

await app.trusted.comments.createComment({
  resourceId: "release-42",
  resourceType: "release",
  body: "Generated by the release job",
  authorId: "release-bot",
})

import {
  useComments,
  useCommentCount,
  usePostComment,
  useUpdateComment,
  useDeleteComment,
  useToggleLike,
  useUpdateCommentStatus,
} from "@btst/stack/plugins/comments/client/hooks"

// Fetch approved comments for a resource
const { data, isLoading } = useComments({
  resourceId: "my-post",
  resourceType: "blog-post",
  status: "approved",
})

// Post a new comment (includes optimistic update)
const { mutate: postComment } = usePostComment({
  resourceId: "my-post",
  resourceType: "blog-post",
})
postComment({
  body: "Great post!",
})

// Toggle like (one per user; optimistic update)
const { mutate: toggleLike } = useToggleLike({
  resourceId: "my-post",
  resourceType: "blog-post",
  parentId: null,
})
toggleLike({ commentId: "comment-id" })

// Moderate a comment
const { mutate: updateStatus } = useUpdateCommentStatus()
updateStatus({ id: "comment-id", status: "approved" })

<StackProvider
  stack={clientStack}
  auth={clientAuth}
  initialIdentity={initialIdentity}
  overrides={{
    comments: {

      // Map resource types to URLs so comments link back to their resource
      resourceLinks: {
        "blog-post": (slug) => `/pages/blog/${slug}`,
        "kanban-task": (id) => `/pages/kanban?task=${id}`,
      },

    },
  }}
>
  {children}
</StackProvider>