Function StreamHtml

src/streamhtml.tsx:323–512

({
  children = "",
  reasoning: reasoningProp = "",
  isStreaming = false,
  caret,
  repair = true,
  sanitize = true,
  memoizeBlocks = true,
  caretHtml = DEFAULT_CARET,
  sanitizeConfig,
  className,
  fallback = null,
  thinkingLabel = "Thinking",
  thinkingOpen,
  reasoningPendingLabel = "Composing reply…",
  ...rest
}: StreamHtmlProps)

ThinkingBlock.displayName = "ThinkingBlock";

export function StreamHtml({
  children = "",
  reasoning: reasoningProp = "",
  isStreaming = false,
  caret,
  repair = true,
  sanitize = true,
  memoizeBlocks = true,
  caretHtml = DEFAULT_CARET,
  sanitizeConfig,
  className,
  fallback = null,
  thinkingLabel = "Thinking",
  thinkingOpen,
  reasoningPendingLabel = "Composing reply…",
  ...rest
}: StreamHtmlProps): ReactElement {
  const { content: streamContent, reasoning: streamReasoning } = useMemo(() => {
    if (reasoningProp || !children.includes('"kind":"')) {
      return { content: children, reasoning: reasoningProp };
    }
    const split = splitStoredStreamText(children);
    return {
      content: split.content,
      reasoning: reasoningProp || split.reasoning,
    };
  }, [children, reasoningProp]);

  const reasoning = streamReasoning;
  const htmlContent = streamContent;

  const showCaret = caret ?? isStreaming;
  const stableRef = useRef<string[]>([]);
  const hasReasoning = reasoning.length > 0;
  const hasContent = htmlContent.length > 0;
  const reasoningExpanded =
    thinkingOpen ?? (isStreaming && hasReasoning && !hasContent);

  const { sanitizedStable, sanitizedLive, trackLive } = useMemo(() => {
    const source = htmlContent ?? "";

    if (!repair) {
      const html = sanitize ? sanitizeHtml(source, sanitizeConfig) : source;
      return {
        sanitizedStable: [] as string[],
        sanitizedLive: html,
        trackLive: html,
      };
    }

    const repaired = rehtml(source, {
      splitBlocks: !isStreaming,
      closeTags: !isStreaming,
    });

    const sanitizeBlock = (block: string) =>
      sanitize ? sanitizeHtml(block, sanitizeConfig) : block;