@funhub-ugc/comment-sdk

Funhub UGC discussion comment SDK for React / Next.js projects and Funhub low-code material integration.

What It Provides

• DiscussionCommentWidget: a ready-to-use discussion comment widget for detail pages
• detailDiscussionMaterial: a low-code material definition for Funhub platform editors
• Built-in comment list, composer, reply flow, like flow, and login redirect handling
• Route-based ugcId auto resolution for pages like /video/{id}

Install

pnpm add @funhub-ugc/comment-sdk

Required peer dependencies:

• react >= 18
• react-dom >= 18
• next >= 13.4
• next-intl >= 4.7.0
• @tanstack/query-core >= 5
• @tanstack/react-query >= 5

Exports

import { DiscussionCommentWidget } from "@funhub-ugc/comment-sdk/components";
import { detailDiscussionMaterial } from "@funhub-ugc/comment-sdk/materials";

Component Usage

"use client";

import { DiscussionCommentWidget } from "@funhub-ugc/comment-sdk/components";

export function VideoComments() {
  return <DiscussionCommentWidget />;
}

You can also pass an explicit ugcId during preview or custom runtime rendering:

<DiscussionCommentWidget ugcId="866fb23655eafcfa" />

ugcId Resolution Rules

The widget resolves ugcId in this order:

1. Explicit ugcId prop
2. Current route /video/{id} match
3. Locally stored preview ugcId

This means ugcId is optional for real published detail pages as long as the route contains a valid video id.

Runtime Environment

The SDK reads these environment variables at runtime:

• NEXT_PUBLIC_COMMENT_SDK_UGC_API_BASE_URL: browser-side UGC API base URL
• COMMENT_SDK_UGC_API_BASE_URL: server-side or proxy target UGC API base URL
• NEXT_PUBLIC_COMMENT_SDK_LOGIN_URL: login page URL used when auth is required

Recommended production pattern:

• Browser requests go through your app's same-origin proxy
• Your app proxy forwards to the actual UGC backend

Example Next.js route proxy:

// app/api/ugc/[...path]/route.ts

Then point the browser-side SDK base URL to /api/ugc.

Low-Code Material Usage

The package also exposes a Funhub low-code material:

• Material type: detail-discussion
• Material name: 详情页-讨论区

In editor mode:

• ugcId is only used for drag-and-drop preview
• Published pages should rely on route matching instead of requiring manual ugcId input

Styling Notes

The widget uses utility classes generated in the published package output. If your host app uses Tailwind CSS tree-shaking, make sure its content config scans the installed SDK package files as well.

Example:

// tailwind.config.ts
import { createRequire } from "node:module";
import { dirname, join } from "node:path";

const require = createRequire(import.meta.url);
const commentSdkRoot = dirname(
  require.resolve("@funhub-ugc/comment-sdk/package.json")
);

export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    join(commentSdkRoot, "dist/**/*.{js,mjs}")
  ]
};

Local Development

The package contains a local playground:

pnpm --filter @funhub-ugc/comment-sdk playground:dev

Default local preview port:

• 3301

Changelog

See CHANGELOG.md.