Chat Connector Suggestion

Инлайн-карточка «Коннекторы, которые могут помочь» с состояниями «Подключить» / «Подключено».

Коннекторы, которые могут помочь

Notion

Поиск и чтение страниц рабочего пространства

Linear

Задачи, проекты и статусы команды

GitHub

Подключено

Ищете что-то другое?

import { ChatConnectorSuggestion } from "@/components/ui/chat-connector-suggestion";

const suggestions = [
  {
    description: "Поиск и чтение страниц рабочего пространства",
    docsUrl: "https://notion.so",
    id: "notion",
    name: "Notion",
  },
  {
    description: "Задачи, проекты и статусы команды",
    docsUrl: "https://linear.app",
    id: "linear",
    name: "Linear",
  },
  {
    description: "Репозитории, issue и pull request'ы",
    docsUrl: "https://github.com",
    id: "github",
    name: "GitHub",
  },
];

export default function Particle() {
  return (
    <div className="w-full max-w-xl p-4">
      <ChatConnectorSuggestion
        connectedIds={new Set(["github"])}
        suggestions={suggestions}
      />
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-connector-suggestion

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

import { ChatConnectorSuggestion } from "@/components/ui/chat-connector-suggestion";
 
<ChatConnectorSuggestion
  suggestions={[
    { id: "notion", name: "Notion", description: "Поиск по рабочему пространству", docsUrl: "https://notion.so" },
    { id: "github", name: "GitHub", description: "Репозитории и issue", docsUrl: "https://github.com" },
  ]}
  connectedIds={new Set(["github"])}
  onConnect={(id) => console.log("connect", id)}
  onBrowseAll={() => {}}
  onDismiss={() => {}}
/>

API

ChatConnectorSuggestion — презентационный (plain-props): данные и колбэки приходят снаружи, бренд-иконки резолвятся через getIconUrl (по умолчанию favicon-сервис).

Prop	Тип	Описание
`suggestions`	`ChatConnectorSuggestion[]`	Список коннекторов (`id`, `name`, `description?`, `iconUrl?`, `docsUrl?`).
`connectedIds`	`ReadonlySet<string>`	Живой набор подключённых id — переключает строку в состояние «Подключено».
`title`	`ReactNode`	Заголовок карточки.
`onConnect`	`(id: string) => void \| Promise<void>`	Клик «Подключить» / «Переподключить» (показывает спиннер до завершения).
`onBrowseAll`	`() => void`	Ссылка «Все коннекторы».
`onDismiss`	`() => void`	«Ничего из этого» — скрывает карточку.
`getIconUrl`	`(s) => string \| undefined`	Резолвер бренд-иконки.

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

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