Обзор
Компоненты
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Auth Surface
- Avatar
- Badge
- Browse Catalog Dialog
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Connector Setup Dialog
- Cookie Banner
- Dialog
- Directory Card
- Directory Detail
- Directory Skeleton
- DrawerНовое
- Token Parts Input
- Empty
- Field
- Fieldset
- File Preview Modal
- File Preview Skeleton
- Form
- Frame
- Group
- Icon
- Input
- Input Group
- Kbd
- Label
- Legal Shell
- Menu
- Mermaid Diagram
- Mind Map Diagram
- Not Found Screen
- Onboarding Frame
- Popover
- PDF Thumbnail
- Personalization Landing
- Preview Card
- Pricing Page
- Progress
- Radio Group
- Ring Spinner
- Scroll Area
- Select
- Separator
- Settings Page
- Settings Skills
- Settings Connectors
- Settings Capabilities
- Settings Usage
- Settings Account
- Settings Billing
- Sheet
- Sidebar
- Skeleton
- Skill Create Dialog
- Slider
- Spinner
- Stat
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Tooltip
AI-компоненты
- Компоненты AI
- Chat Conversation
- Chat Message
- Chat Response
- Chat Suggestion
- Chat Prompt Input
- Slash Highlighted Textarea
- Chat Search Dialog
- Chat Skill Doc
- Chat Connector Detail
- Chat Attachments
- Chat File Card
- Chat Token Chip
- Chat Code Block
- Chat Image
- Chat Inline Citation
- Chat Sources
- Chat Web Search
- Chat Research
- Chat Source
- Chat Actions
- Chat Context
- Chat Loader
- Chat Compaction
- Chat Timeline
- Chat Snippet
- Chat Terminal
- Chat Stack Trace
- Chat Test Results
- Chat File Tree
- Chat Environment Variables
- Chat Audio Player
- Chat Transcription
- Chat Speech Input
- Chat Mic Selector
- Chat Voice Selector
- Chat Agent
- Chat Persona
- Chat Connection
- Chat Connector Suggestion
- Chat Queue
- Chat Checkpoint
- Chat Confirmation
- Chat Artifact
- Chat JSX Preview
- Chat Schema Display
- Chat Package Info
- Chat Commit
- Chat Plan
- Chat Open In Chat
- Chat Sandbox
- Chat Model Selector
- Chat Canvas
- Chat Node
- Chat Edge
Ресурсы
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 | Выбор результата. |
На этой странице