botpress-chat.tsx

"use client"
import { useState } from 'react';

import {
  Webchat,
  WebchatProvider,
  Fab,
  getClient,
  Configuration,
} from '@botpress/webchat';

const clientId = "04e447e2-68a2-42ba-82c3-b7be49ecce10";

const configuration: Configuration = {
  color: '#000',
  // Ensure external links open in new tabs
  linkTarget: '_blank',
  // Additional styling for better link visibility
  stylesheet: `
    .bpw-message-text a {
      color: #0066cc !important;
      text-decoration: underline !important;
      cursor: pointer !important;
    }
    .bpw-message-text a:hover {
      color: #0052a3 !important;
      text-decoration: underline !important;
    }
  `,
};

export default function BotpressChat() {
  const client = getClient({
    clientId,
  });

  const [isWebchatOpen, setIsWebchatOpen] = useState(false);

  const toggleWebchat = () => {
    setIsWebchatOpen((prevState) => !prevState);
  };

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <WebchatProvider client={client} configuration={configuration}>
        <Fab onClick={toggleWebchat} />
        <div
          style={{
            display: isWebchatOpen ? 'block' : 'none',
          }}
        >
          <Webchat />
        </div>
      </WebchatProvider>
    </div>
  );
}