Imagine que o seu site é uma Base Militar Cyberpunk e você precisa de um "Drone" de comunicação que fique flutuando no canto da tela, pronto para responder às perguntas dos visitantes.

Esse Drone é o IBM Watson Assistant. Ele é um robô de Inteligência Artificial criado pela IBM.

Nossa missão hoje é instalar esse robô no nosso projeto React. O desafio é que o Watson não foi feito com peças normais de React, ele é um código de fora. Então, precisaremos "hackear" nosso site amigavelmente para permitir que o robô entre.

O TypeScript é como o segurança da porta da nossa base. Se tentarmos colocar o robô da IBM lá dentro sem avisar, o segurança vai bloquear o código dizendo: "Ei, eu não conheço esse tal de Watson!".

Precisamos criar um "Crachá VIP" avisando que o Watson tem permissão para usar o objeto global do navegador, que chamamos de window.

Crie um arquivo chamado WatsonChat.tsx na sua pasta src/components e comece com o código abaixo:

// 1. Chamamos a ferramenta useEffect do React (nosso gatilho de ações)
import { useEffect } from 'react';

// 2. O 'declare global' é o nosso Mega-Fones. 
// Estamos gritando para o TypeScript: "Preste atenção nas regras globais do jogo!"
declare global {
  
  // 3. 'interface Window' é o mapa do navegador. 
  // Estamos dizendo que dentro desse mapa, existe um espaço reservado para o Watson.
  interface Window {
    // 4. 'any' significa que não vamos ser rigorosos com o formato dos dados agora.
    watsonAssistantChatOptions: any; 
  }
}

Agora que o segurança deixou o robô entrar, vamos construir a Antena que chama o robô da nuvem da IBM para o nosso computador.

Continue no mesmo arquivo WatsonChat.tsx e cole a segunda parte do código:

// 1. Criamos a função do nosso componente. 
export default function WatsonChat() {
  
  // 2. O useEffect é a regra: "Faça isso assim que a tela ligar".
  useEffect(() => {
    
    // 3. Aqui estamos configurando o "Cérebro" do robô com as chaves secretas da IBM.
    // DICA: Você vai trocar esses IDs falsos pelos verdadeiros que a IBM te der!
    window.watsonAssistantChatOptions = {
      integrationID: "COLE_O_SEU_ID_AQUI", // O código de barras do seu robô
      region: "us-south",                  // O país onde o servidor dele mora
      serviceInstanceID: "COLE_A_SUA_INSTANCIA_AQUI", // A senha do servidor
      
      // 4. onLoad é a ordem: "Quando você terminar de baixar, ligue e apareça (render)!"
      onLoad: async (instance: any) => {
        await instance.render();
      }
    };

    // 5. O setTimeout é um truque ninja. Ele diz: 
    // "Espere o site principal carregar primeiro, para não deixar o site lento, e só depois chame o robô."
    const chamarRobo = setTimeout(() => {
      
      // a) Criamos um elemento de script (é como criar um cabo USB virtual)
      const script = document.createElement('script');
      
      // b) Conectamos esse cabo no servidor da IBM onde o código do Watson está
      script.src = "https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + 
                   (window.watsonAssistantChatOptions.clientVersion || 'latest') + 
                   "/WatsonAssistantChatEntry.js";
                   
      // c) Plugamos o cabo na "cabeça" (head) do nosso site!
      document.head.appendChild(script);
      
    }, 0);

    // 6. A regra de limpeza. Se o jogador sair da tela muito rápido, cancelamos a chamada do robô.
    return () => clearTimeout(chamarRobo);
    
  }, []); // A lista vazia [] significa: "Só chame o robô UMA vez na vida".

  // 7. Esse componente retorna 'null' (vazio), 
  // porque o robô da IBM se desenha sozinho na tela. Nós não precisamos usar HTML aqui!
  return null; 
}

Se a gente colocar o WatsonChat dentro da tela de "Produtos", quando o usuário for para a tela de "Contato", o robô vai explodir e sumir. Nós queremos que o robô seja como uma mochila, que vai com o usuário para todas as salas!

Para fazer isso, temos que colocar ele no App.tsx (a nossa base principal), fora da televisão que muda de canal (o nosso <Outlet />).

Abra o arquivo src/App.tsx e monte assim:

// 1. Importamos as ferramentas do roteador
import { Outlet, Link } from 'react-router';

// 2. Importamos a antena do robô que acabamos de construir
import WatsonChat from './components/WatsonChat';

export default function App() {
  return (
    // Fragmento <> (a caixa invisível do React)
    <>
      <header style={{ padding: '20px', borderBottom: '2px solid #39ff14' }}>
        <nav>
          <Link to="/" style={{ color: '#00ffff' }}>Início</Link> | 
          <Link to="/produtos" style={{ color: '#00ffff' }}>Produtos</Link>
        </nav>
      </header>

      {/* 3. O OUTLET: É a tela da TV. Aqui as páginas ficam trocando... */}
      <Outlet />

      {/* 4. O WATSON: Fica do lado de fora da TV! 
          Assim, não importa qual página carregue no Outlet, o robô continua vivo flutuando no canto! */}
      <WatsonChat />
    </>
  );
}

Pronto! Ao ligar o projeto com npm run dev, você verá o botão flutuante de chat azul no canto inferior direito da sua tela verde e preta. A antena está ligada e o Drone está operante!