nexus/ui/src/components/ChatSearchDialog.tsx

import { useState } from "react";
import { Search } from "lucide-react";
import { useChatSearch } from "../hooks/useChatSearch";
import {
  CommandDialog,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { Command } from "cmdk";

interface ChatSearchDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  companyId: string | null;
  onNavigate: (conversationId: string, messageId: string) => void;
}

function stripMarkdown(text: string): string {
  return text
    .replace(/```[\s\S]*?```/g, "")
    .replace(/`[^`]+`/g, "")
    .replace(/\*\*([^*]+)\*\*/g, "$1")
    .replace(/\*([^*]+)\*/g, "$1")
    .replace(/#{1,6}\s/g, "")
    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
    .replace(/>\s/g, "")
    .trim();
}

/** Split text into segments, marking portions that match the query terms */
function splitWithHighlight(text: string, query: string): Array<{ text: string; highlight: boolean }> {
  if (!query.trim()) return [{ text, highlight: false }];
  const terms = query.trim().split(/\s+/).filter(Boolean);
  const pattern = terms.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
  const re = new RegExp(`(${pattern})`, "gi");
  const parts = text.split(re);
  return parts.map((part) => ({
    text: part,
    highlight: re.test(part),
  }));
}

function HighlightedText({ text, query }: { text: string; query: string }) {
  const segments = splitWithHighlight(text, query);
  return (
    <>
      {segments.map((seg, i) =>
        seg.highlight ? (
          <mark key={i} className="bg-yellow-200 dark:bg-yellow-800 rounded-sm">
            {seg.text}
          </mark>
        ) : (
          <span key={i}>{seg.text}</span>
        ),
      )}
    </>
  );
}

function formatRelativeTime(dateStr: string): string {
  const date = new Date(dateStr);
  const now = new Date();
  const diffMs = now.getTime() - date.getTime();
  const diffMin = Math.floor(diffMs / 60000);
  if (diffMin < 1) return "just now";
  if (diffMin < 60) return `${diffMin}m ago`;
  const diffHr = Math.floor(diffMin / 60);
  if (diffHr < 24) return `${diffHr}h ago`;
  const diffDays = Math.floor(diffHr / 24);
  if (diffDays < 30) return `${diffDays}d ago`;
  return date.toLocaleDateString();
}

export function ChatSearchDialog({ open, onOpenChange, companyId, onNavigate }: ChatSearchDialogProps) {
  const [query, setQuery] = useState("");
  const { data } = useChatSearch(companyId, query);
  const results = data?.items ?? [];

  function handleSelect(conversationId: string, messageId: string) {
    onNavigate(conversationId, messageId);
    onOpenChange(false);
    setQuery("");
  }

  return (
    <CommandDialog
      open={open}
      onOpenChange={(v) => {
        onOpenChange(v);
        if (!v) setQuery("");
      }}
      title="Search messages"
      description="Search all messages across conversations"
    >
      <Command shouldFilter={false}>
        <CommandInput
          placeholder="Search all messages..."
          value={query}
          onValueChange={setQuery}
        />
        <CommandList>
          {query.trim().length >= 2 && results.length === 0 && (
            <CommandEmpty>No results found.</CommandEmpty>
          )}
          {results.map((result) => {
            const snippet = stripMarkdown(result.content).slice(0, 120);
            return (
              <CommandItem
                key={result.messageId}
                value={result.messageId}
                onSelect={() => handleSelect(result.conversationId, result.messageId)}
                className="flex flex-col items-start gap-0.5 py-2"
              >
                <div className="flex w-full items-center gap-2">
                  <Search className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                  <span className="text-xs text-muted-foreground truncate flex-1">
                    {result.conversationTitle ?? "Untitled conversation"}
                  </span>
                  <span className="text-xs text-muted-foreground shrink-0 capitalize">
                    {result.role}
                  </span>
                  <span className="text-xs text-muted-foreground shrink-0">
                    {formatRelativeTime(result.createdAt)}
                  </span>
                </div>
                <p className="pl-5 text-sm text-foreground line-clamp-2">
                  <HighlightedText text={snippet} query={query} />
                </p>
              </CommandItem>
            );
          })}
        </CommandList>
      </Command>
    </CommandDialog>
  );
}