Implementation:Langgenius Dify UseModerate

Knowledge Sources	Langgenius_Dify
Domains	Frontend, React_Hooks
Last Updated	2026-02-12 07:00 GMT

Overview

A React hook that applies content moderation to streaming text by splitting it into chunks and asynchronously checking each chunk against a moderation service.

Description

useModerate is a custom React hook designed for real-time content moderation of text that arrives incrementally (such as from a streaming LLM response). It splits the incoming content string into fixed-length chunks (controlled by separateLength, defaulting to 50 characters) using the internal splitStringByLength helper. Each chunk is submitted to the provided moderationService callback exactly once, tracked via a moderatingIndex ref that records which chunk indices are currently being moderated. A moderatedContentMap ref stores the replacement text for any chunk flagged by the moderation service. The hook skips moderating the last chunk until the stop flag is set to true, ensuring incomplete streaming chunks are not prematurely moderated. The final output is the full content string with any flagged chunks replaced by their moderated equivalents.

Usage

Use this hook in chat or conversation components where LLM-generated output needs real-time content moderation. It is intended for streaming scenarios where text arrives progressively and each segment must be checked for policy violations before display.

Code Reference

Source Location

Repository: Langgenius_Dify
File: web/hooks/use-moderate.ts
Lines: 1-49

Signature

export const useModerate = (
  content: string,
  stop: boolean,
  moderationService: (text: string) => ReturnType<ModerationService>,
  separateLength?: number,
) => string

Import

import { useModerate } from '@/hooks/use-moderate'

I/O Contract

Inputs

Name	Type	Required	Description
content	string	Yes	The raw text content to be moderated, typically accumulating from a streaming source
stop	boolean	Yes	Whether the stream has stopped; when true, the final chunk is also moderated
moderationService	(text: string) => Promise<{ flagged: boolean; text: string }>	Yes	The async moderation function that checks a text chunk and returns whether it was flagged along with replacement text
separateLength	number	No (default: 50)	The character length at which to split the content into chunks for moderation

Outputs

Name	Type	Description
moderatedContent	string	The full content string with flagged chunks replaced by moderation service results

Usage Examples

Moderating a Streaming Chat Response

import { useModerate } from '@/hooks/use-moderate'

function ChatMessage({
  streamingText,
  isComplete,
  moderationService,
}: {
  streamingText: string
  isComplete: boolean
  moderationService: (text: string) => Promise<{ flagged: boolean; text: string }>
}) {
  const displayText = useModerate(
    streamingText,
    isComplete,
    moderationService,
    50,
  )

  return <div className="message">{displayText}</div>
}

With Custom Chunk Length

import { useModerate } from '@/hooks/use-moderate'

function LongFormOutput({
  content,
  isDone,
  checkContent,
}: {
  content: string
  isDone: boolean
  checkContent: (text: string) => Promise<{ flagged: boolean; text: string }>
}) {
  // Use larger chunks for long-form content to reduce API calls
  const safeContent = useModerate(content, isDone, checkContent, 200)

  return <article>{safeContent}</article>
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment