hexabot/widget/src/components/ConnectionLost.tsx

/*
 * Copyright © 2024 Hexastack. All rights reserved.
 *
 * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
 * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
 * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
 * 3. SaaS Restriction: This software, or any derivative of it, may not be used to offer a competing product or service (SaaS) without prior written consent from Hexastack. Offering the software as a service or using it in a commercial cloud environment without express permission is strictly prohibited.
 */

import React from 'react';

import ConnectionIcon from './icons/ConnectionIcon';
import LoadingIcon from './icons/LoadingIcon';
import { useTranslation } from '../hooks/useTranslation';
import { useChat } from '../providers/ChatProvider';
import { useColors } from '../providers/ColorProvider';
import './ConnectionLost.scss';

const ConnectionLost: React.FC = () => {
  const { t } = useTranslation();
  const { connectionState, setConnectionState } = useChat();
  const { colors } = useColors();
  const handleClick = () => {
    if (connectionState === 0) {
      setConnectionState(1);
    }
  };
  const loading = connectionState > 0;

  return (
    <div
      className="sc-chat--disconnected-icon-wrapper"
      style={{ backgroundColor: colors.messageList.bg }}
    >
      {loading ? (
        <LoadingIcon className="loading-image" />
      ) : (
        <div className="sc-chat--disconnected-icon">
          <ConnectionIcon />
          <h3
            className="sc-chat--disconnected-text"
            style={{ color: colors.button.text }}
          >
            {t('settings.connection_lost')}
          </h3>
          <button
            className="sc-chat--disconnected-button"
            style={{
              color: colors.button.text,
              backgroundColor: colors.button.bg,
              borderColor: colors.button.border,
            }}
            onClick={handleClick}
          >
            Refresh
          </button>
        </div>
      )}
    </div>
  );
};

export default ConnectionLost;