react-ai-highlight-parser/dist/index.d.mts

Parse and render AI streaming responses with semantic highlighting. Supports multiple modes (highlights, underline, both) and color palettes.

import React from 'react';

/**
 * Type definitions for react-ai-highlight-parser
 */
/** Highlight mode options */
type HighlightMode = 'highlights' | 'underline' | 'both' | 'none';
/** Available color palettes */
type PaletteName = 'vibrant' | 'natural';
/**
 * Highlight codes used in AI responses
 * Y=Yellow, B=Blue, O=Orange, G=Green, R=Red, P=Pink, L=Light blue, GR=Gray, H=Purple, BR=Brown
 */
type HighlightCode = 'Y' | 'B' | 'O' | 'G' | 'R' | 'P' | 'L' | 'GR' | 'H' | 'BR';
/** Color palette structure */
interface ColorPalette {
    background: Record<HighlightCode, string>;
    underline: Record<HighlightCode, string>;
}
/** Parser options */
interface ParseOptions {
    mode?: HighlightMode;
    palette?: PaletteName;
}
/** Props for HighlightRenderer component */
interface HighlightRendererProps {
    /** The AI response text containing highlight codes */
    content: string;
    /** Display mode: highlights, underline, both, or none */
    mode?: HighlightMode;
    /** Color palette to use */
    palette?: PaletteName;
    /** Additional CSS class */
    className?: string;
}
/** Semantic meanings for each highlight code */
declare const HIGHLIGHT_MEANINGS: Record<HighlightCode, string>;

/**
 * AI Highlight Parser
 *
 * Parses AI responses containing highlight codes like [Y]text[/Y]
 * and converts them to styled HTML.
 */

/**
 * Clean and preprocess AI response
 * - Protects code blocks from being processed
 * - Removes invalid/invented codes
 * - Cleans orphaned tags
 */
declare function processResponse(text: string): string;
/**
 * Remove all highlight codes from text, keeping only the content
 */
declare function removeHighlightCodes(text: string): string;
/**
 * Parse highlight codes and apply styles
 * Uses a token-based approach to handle nested tags correctly
 */
declare function parseHighlights(text: string, mode?: HighlightMode, palette?: PaletteName): string;
/**
 * Check if text contains any highlight codes
 */
declare function hasHighlights(text: string): boolean;
/**
 * Extract all highlight codes used in text
 */
declare function extractHighlightCodes(text: string): HighlightCode[];

/**
 * Color Palettes for Highlight System
 */

/**
 * Vibrant palette - Bright, saturated colors
 */
declare const VIBRANT: ColorPalette;
/**
 * Natural palette - Earth tones, muted colors
 */
declare const NATURAL: ColorPalette;
/** All available palettes */
declare const PALETTES: Record<PaletteName, ColorPalette>;
/** Get a palette by name */
declare function getPalette(name?: PaletteName): ColorPalette;
/** Get background color for a highlight code */
declare function getBackgroundColor(palette: PaletteName, code: HighlightCode): string;
/** Get underline color for a highlight code */
declare function getUnderlineColor(palette: PaletteName, code: HighlightCode): string;

/**
 * HighlightRenderer Component
 *
 * React component that renders AI responses with semantic highlighting
 */

/**
 * Renders AI response text with semantic highlighting
 *
 * @example
 * ```tsx
 * <HighlightRenderer
 *   content="This is [Y]important[/Y] and this is [B]a concept[/B]"
 *   mode="both"
 *   palette="vibrant"
 * />
 * ```
 */
declare function HighlightRenderer({ content, mode, palette, className }: HighlightRendererProps): React.ReactElement;
/**
 * Inline version that renders as a span instead of div
 */
declare function HighlightSpan({ content, mode, palette, className }: HighlightRendererProps): React.ReactElement;

export { type ColorPalette, HIGHLIGHT_MEANINGS, type HighlightCode, type HighlightMode, HighlightRenderer, type HighlightRendererProps, HighlightSpan, NATURAL, PALETTES, type PaletteName, type ParseOptions, VIBRANT, HighlightRenderer as default, extractHighlightCodes, getBackgroundColor, getPalette, getUnderlineColor, hasHighlights, parseHighlights, processResponse, removeHighlightCodes };