spb/polyllm

1"use client";2import * as React from "react";3import { highlightSegments } from "@/lib/search/query";4import { cn } from "@/lib/utils";56/** Renders `text` with `<mark>` around every occurrence of `terms` (case-insensitive). */7export function Highlight({ text, terms, className, markClassName }: { text: string; terms: string[]; className?: string; markClassName?: string }) {8  const segments = React.useMemo(() => highlightSegments(text, terms), [text, terms]);9  return (10    <span className={className}>11      {segments.map((s, i) =>12        s.hit ? (13          <mark key={i} className={cn("rounded-[3px] bg-accent-soft px-0.5 text-fg [.dark_&]:bg-accent/30", markClassName)}>14            {s.text}15          </mark>16        ) : (17          <React.Fragment key={i}>{s.text}</React.Fragment>18        ),19      )}20    </span>21  );22}23