docs/plugins/docuservix/widgets/chat/Status.tsx

import block from 'bem-css-modules';
import React, { ReactNode } from 'react';

import { useChatStatus } from '@docuservix/hooks/useChatStatus';
import { ChatStatus } from '@docuservix/models/chat';

import styles from './Status.module.css';

const b = block(styles, 'Status');

function getLabel(status: ChatStatus): string {
    switch (status.kind) {
        case 'connecting':
            return 'Подключение…';
        case 'offline':
            return 'Offline';
        case 'server':
            return status.label;
    }
}

export function Status(): ReactNode {
    const { status, apiUrl, recheck } = useChatStatus();
    const label = getLabel(status);

    return (
        <button
            type="button"
            className={b({ kind: status.kind })}
            onClick={recheck}
            title={apiUrl}
            aria-label={`Статус: ${label}. Нажмите для проверки`}
        >
            <span className={b('dot')} />
            <span className={b('label')}>{label}</span>
        </button>
    );
}