# @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

```bash
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

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

## Component Usage

```tsx
"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:

```tsx
<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:

```ts
// 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:

```ts
// 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, "src/**/*.{ts,tsx}"),
    join(commentSdkRoot, "dist/**/*.{js,mjs}")
  ]
};
```

## Local Development

The package contains a local playground:

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

Default local preview port:

- `3301`

## Changelog

See [CHANGELOG.md](./CHANGELOG.md).