Chat Search Dialog

Глобальный поиск по чатам (⌘K) — CommandDialog с подсветкой, скелетоном загрузки, состояниями ошибки/пусто и строками результатов.

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  ChatSearchDialog,
  type ChatSearchResult,
} from "@/components/ui/chat-search-dialog";

const ALL: ChatSearchResult[] = [
  { id: "1", title: "Cache Components в Next.js 16", date: "28 июн" },
  { id: "2", title: "Миграция с revalidate на updateTag", date: "27 июн" },
  { id: "3", title: "Base UI — быстрый старт", date: "25 июн" },
  { id: "4", title: "Серверные компоненты React", date: "22 июн" },
];

export default function Particle() {
  const [open, setOpen] = useState(true);
  const [query, setQuery] = useState("cache");

  const q = query.trim().toLowerCase();
  const results = q
    ? ALL.filter((r) =>
        `${r.title} ${r.snippet ?? ""}`.toLowerCase().includes(q),
      )
    : ALL;

  return (
    <div className="flex min-h-120 w-full items-center justify-center">
      <Button onClick={() => setOpen(true)} variant="outline">
        Поиск ⌘K
      </Button>
      <ChatSearchDialog
        emptyLabel={query.trim() ? "Ничего не найдено" : "Нет недавних"}
        highlightQuery={query}
        onOpenChange={setOpen}
        onQueryChange={setQuery}
        onSelect={() => setOpen(false)}
        open={open}
        placeholder="Поиск по чатам…"
        query={query}
        results={results}
      />
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-search-dialog

Использование

import {
  ChatSearchDialog,
  type ChatSearchResult,
} from "@/components/ui/chat-search-dialog";
 
<ChatSearchDialog
  open={open}
  onOpenChange={setOpen}
  query={query}
  onQueryChange={setQuery}
  results={results}        // уже отфильтрованы сервером
  loading={loading}
  error={error}
  highlightQuery={resultsQuery}
  onSelect={(r) => openChat(r.id)}
/>

Презентационный (plain-props): приложение владеет fetch /api/search, дебаунсом, дедупом и форматированием даты — и передаёт готовые results + loading/error + контролируемый query. Клиентская фильтрация выключена (mode="none") — результаты приходят уже отфильтрованными.

API

Prop	Тип	Описание
`open` / `onOpenChange`	`boolean` / `(open) => void`	Состояние диалога.
`query` / `onQueryChange`	`string` / `(q) => void`	Контролируемый ввод.
`results`	`ChatSearchResult[]`	`{ id, title, snippet?, date?, icon? }`.
`loading`	`boolean`	Скелетон вместо списка.
`error`	`boolean`	Состояние ошибки.
`highlightQuery`	`string`	Запрос для подсветки (по умолчанию `query`).
`placeholder` / `emptyLabel` / `errorLabel`	`ReactNode`	Тексты.
`onSelect`	`(result) => void`	Выбор результата.

На этой странице

Установка Использование API