Chat Connection

Статус MCP / tool-сервера с цветным индикатором и латенцией.

filesystem42ms

githubПодключение…

postgresECONNREFUSED

notionОтключено

import { IconRefresh } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";
import {
  ChatConnection,
  ChatConnectionActions,
  ChatConnectionIndicator,
  ChatConnectionLatency,
  ChatConnectionName,
  ChatConnectionStatusLabel,
} from "@/components/ui/chat-connection";

export default function Particle() {
  return (
    <div className="flex w-full max-w-md flex-col gap-2 p-4">
      <ChatConnection status="connected">
        <ChatConnectionIndicator />
        <ChatConnectionName>filesystem</ChatConnectionName>
        <ChatConnectionLatency ms={42} />
      </ChatConnection>

      <ChatConnection status="connecting">
        <ChatConnectionIndicator />
        <ChatConnectionName>github</ChatConnectionName>
        <ChatConnectionStatusLabel />
      </ChatConnection>

      <ChatConnection status="error">
        <ChatConnectionIndicator />
        <ChatConnectionName>postgres</ChatConnectionName>
        <ChatConnectionStatusLabel label="ECONNREFUSED" />
        <ChatConnectionActions>
          <Button aria-label="Переподключиться" size="icon-sm" variant="ghost">
            <IconRefresh aria-hidden="true" stroke={1.5} />
          </Button>
        </ChatConnectionActions>
      </ChatConnection>

      <ChatConnection status="disconnected">
        <ChatConnectionIndicator />
        <ChatConnectionName>notion</ChatConnectionName>
        <ChatConnectionStatusLabel />
      </ChatConnection>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-connection

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

import {
  ChatConnection,
  ChatConnectionActions,
  ChatConnectionIndicator,
  ChatConnectionLatency,
  ChatConnectionName,
  ChatConnectionStatusLabel,
} from "@/components/ui/chat-connection";
 
<ChatConnection status="connected">
  <ChatConnectionIndicator />
  <ChatConnectionName>filesystem</ChatConnectionName>
  <ChatConnectionStatusLabel />
  <ChatConnectionLatency ms={42} />
  <ChatConnectionActions>
    <Button aria-label="Reconnect" size="icon-sm" variant="ghost">
      <RotateCwIcon />
    </Button>
  </ChatConnectionActions>
</ChatConnection>

Статусы

`status`	Цвет точки	Подпись по умолчанию
`connected`	emerald	Connected
`connecting`	amber (pulse)	Connecting…
`disconnected`	muted	Disconnected
`error`	destructive	Error

data-status атрибут на корне — можно стилить любые состояния снаружи.

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

Установка Использование Статусы