Chat Web Search

"use client";

import {
  ChatWebSearch,
  type ChatWebSearchResult,
} from "@/components/ui/chat-web-search";

const results: ChatWebSearchResult[] = [
  {
    url: "https://nextjs.org/docs/app/getting-started/cache-components",
    title: "Cache Components — документация Next.js",
    domain: "nextjs.org",
  },
  {
    url: "https://react.dev/reference/rsc/server-components",
    title: "Серверные компоненты — React",
    domain: "react.dev",
    publishedDate: "Март 2026",
  },
  {
    url: "https://base-ui.com/react/overview/quick-start",
    title: "Быстрый старт — Base UI",
    domain: "base-ui.com",
  },
  {
    url: "https://vercel.com/blog/whats-new-in-nextjs-16",
    title: "Что нового в Next.js 16",
    domain: "vercel.com",
    snippet:
      "Cache Components, стабильный Turbopack и более быстрый сервер разработки.",
  },
  {
    url: "https://web.dev/articles/rendering-on-the-web",
    title: "Рендеринг в вебе",
    domain: "web.dev",
  },
];

export default function Particle() {
  return (
    <ChatWebSearch
      cached
      query="cache components в Next.js 16"
      results={results}
      status="complete"
    />
  );
}

"use client";

import { ChatWebSearch } from "@/components/ui/chat-web-search";

export default function Particle() {
  return (
    <div className="flex w-full flex-col gap-3">
      <ChatWebSearch query="серверные компоненты react 2026" status="working" />
      <ChatWebSearch
        error="Сервис поиска временно недоступен. Пожалуйста, попробуйте ещё раз."
        query="серверные компоненты react 2026"
        status="error"
      />
      <ChatWebSearch
        query="редкий запрос без совпадений"
        results={[]}
        status="complete"
      />
    </div>
  );
}

"use client";

import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";
import {
  ChatWebFetch,
  ChatWebSearch,
  type ChatWebSearchResult,
} from "@/components/ui/chat-web-search";

const results: ChatWebSearchResult[] = [
  {
    url: "https://nextjs.org/docs/app/api-reference/directives/use-cache",
    title: "Директива use cache – Next.js",
    domain: "nextjs.org",
  },
  {
    url: "https://react.dev/reference/rsc/server-components",
    title: "Серверные компоненты – React",
    domain: "react.dev",
  },
  {
    url: "https://base-ui.com/react/overview/quick-start",
    title: "Быстрый старт – Base UI",
    domain: "base-ui.com",
  },
];

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="J" />
        <ChatMessageContent>
          <p>Давайте я это уточню.</p>
          <ChatWebSearch
            query="кэширование компонентов в Next.js"
            results={results}
            status="complete"
            variant="timeline"
          />
          <ChatWebFetch
            publishedDate="Май 2026"
            siteName="Next.js"
            status="complete"
            title="Cache Components — кэширование и ревалидация в Next.js 16"
            url="https://nextjs.org/docs/app/getting-started/cache-components"
            variant="timeline"
          />
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

"use client";

import {
  ChatWebFetch,
  ChatWebFetchGroup,
  type ChatWebFetchPage,
} from "@/components/ui/chat-web-search";

const pages: ChatWebFetchPage[] = [
  {
    url: "https://nextjs.org/blog/next-16",
    title: "Next.js 16",
    domain: "nextjs.org",
  },
  {
    url: "https://react.dev/blog/2026/02/14/react-labs",
    title: "React Labs: февраль 2026",
    domain: "react.dev",
  },
  {
    url: "https://paywalled.example.com/premium-article",
    title: "Премиум-аналитика (заблокировано)",
    domain: "paywalled.example.com",
    error: true,
  },
];

export default function Particle() {
  return (
    <div className="flex w-full flex-col gap-3">
      <ChatWebFetch
        publishedDate="Апр 2026"
        siteName="Vercel"
        status="complete"
        title="Состояние фронтенда 2026 — что изменилось и почему это важно"
        truncated
        url="https://vercel.com/blog/state-of-frontend-2026"
      />
      <ChatWebFetchGroup pages={pages} />
      <ChatWebFetch
        domain="archive.example.org"
        error="Доступ запрещён — похоже, сайт блокирует автоматические запросы."
        errorCode="HTTP 403"
        status="error"
        url="https://archive.example.org/locked"
      />
    </div>
  );
}