O cliente de chat

Este capítulo é para quem usa um agente, não para quem opera um. Ele percorre o chat web — crab-exoskeleton-webapp, o serviço do compose chamado chat-webapp — da entrada na conta até a leitura de um arquivo que o agente escreveu, e dá nome a cada parte da tela para que o resto do livro possa se referir a elas.

Entrando na conta

Não há senhas. Você digita seu endereço de e-mail, o gateway te manda uma mensagem, e você conclui a entrada com um código de seis dígitos: a tela diz “Confira you@company.com para receber um link, abra-o e digite o código de 6 dígitos que aparecer.” Os dois passos vivem na URL em vez de na memória da página, então recarregar no formulário do código mantém você no formulário do código.

Depois disso o navegador guarda um cookie de sessão e nada mais — sem token, sem identidade, sem endereço do upstream. Toda requisição vai do navegador para a camada de servidor do próprio app, dali para o gateway, e só então para o orquestrador.

Se a tela de entrada disser que não consegue falar com o gateway, a stack por trás do app web não está respondendo. Isso é um problema de deploy, não de conta — veja Solução de problemas.

Escolhendo um workspace

Sua conta pode alcançar mais de um agente. Até você escolher um, o centro da tela é o seletor: uma grade intitulada “Escolha um workspace”, agrupada por tenant e por subscription, com um cartão por agente. Um tenant é a organização à qual você pertence; uma subscription é uma conta dentro desse tenant, e um agente pertence a uma delas. Um agente que você só pode ler é marcado com “acesso somente leitura”; o acesso de escrita é a norma e não é rotulado.

Clicar em um agente abre uma conversa nova com ele. Em qual agente você está fica guardado no fragmento da URL, então identificadores de workspace nunca chegam ao servidor.

O formato da tela

Uma vez escolhido um workspace há três colunas, e só a do meio está sempre presente.

• A barra lateral, à esquerda: o cabeçalho da marca, Nova conversa, a lista de lugares para onde você pode ir, sua lista de conversas e um rodapé de conta.
• O centro, que segura o que você está lendo — uma conversa, a tela inicial ou a tela de projetos — com uma trilha de navegação no topo.
• O painel, à direita, que abre ao lado da conversa em vez de por cima dela. Ele é irmão da coluna central no layout, então a transcrição se reacomoda no que sobra em vez de ficar coberta.

No celular a barra lateral e o painel são gavetas de altura total, e o único botão no canto superior esquerdo alterna a barra lateral.

A barra lateral, e a faixa em que ela se recolhe

A barra lateral pode ser arrastada para mais larga ou mais estreita pela sua borda direita, e recolhida com a seta circulada no cabeçalho. Tanto a largura quanto o estado recolhido são lembrados no seu navegador entre uma visita e outra.

Recolhida, ela vira uma faixa de 48 pixels de ícones em três grupos separados por fios finos, na mesma ordem em que a barra lateral aberta é lida: Nova conversa, depois os destinos, depois Conversas. Dois comportamentos valem ser conhecidos porque não são os de sempre:

• Passar o ponteiro sobre o ícone Conversas desliza a lista de conversas por cima da tela como uma prévia, e você pode mover o ponteiro para dentro dela e clicar em uma conversa. É a única entrada que faz isso; passar o ponteiro sobre qualquer outro ícone fecha a prévia.
• Passar o ponteiro sobre qualquer outro ícone mostra uma dica pequena de duas linhas — o nome, e uma linha dizendo o que ele abre — e escolhe qual painel o painel lateral mostraria, sem expandir a barra lateral. A seta circulada acima dos ícones é o único controle que a expande.

Os destinos

Seis linhas, e elas não são todas o mesmo tipo de coisa. Projetos substitui o que está no centro da tela; as outras cinco abrem o painel ao lado dele, e clicar na que já está aberta fecha o painel de novo.

Memória e grafo de conhecimento são duas coisas diferentes com dois nomes diferentes, e Skills e memória cuida das duas. Tarefas agendadas têm um capítulo próprio, Tarefas agendadas. Se o seu agente roda em um orquestrador mais antigo que os projetos, a linha Projetos não é renderizada, em vez de ser renderizada e morta.

A trilha de navegação

Uma barra no topo da coluna central diz onde você está: o workspace, a subscription, o projeto se você estiver em um, e a conversa. Cada segmento é um caminho de volta para cima — de uma conversa, “para cima” é a tela do próprio projeto. O chevron no fim abre as ações da conversa.

Conversas e histórico

A lista de conversas fica abaixo dos destinos. Ela tem duas visões, alternadas pelo controle Lista / Árvore: a lista conhecida por recência e uma árvore que desenha como o trabalho se desenrolou ao longo do tempo.

Acima da lista há um filtro. Ele aceita texto simples e aceita quatro prefixos que são sintaxe de busca e são iguais em todos os idiomas: tag:, alias:, text: e date:.

Cada linha carrega as ações que valem para uma conversa — renomeá-la, dar a ela um alias e etiquetas coloridas, ou excluí-la. O alias é como você chamou a conversa; o título é o que a primeira mensagem fez dela, e o alias vence sempre que existe um. A exclusão é descrita com todas as letras: o chat sai da sua lista e não dá para desfazer.

O título acima da lista muda conforme onde você está: “Conversas gerais” para as conversas que não pertencem a nenhum projeto, e “Conversas deste projeto” dentro de um.

Nova conversa não cria nada. Ele leva você à tela inicial — um compositor com as conversas do escopo listadas abaixo dele — e a conversa nasce da primeira mensagem que você envia.

O compositor

A caixa no rodapé diz “Escreva para o seu agente… (Shift+Enter para nova linha)”. Enter envia; Shift+Enter quebra a linha.

Três coisas podem acontecer enquanto você digita. Uma / no começo abre o menu de comandos de barra (/rename define o alias da conversa, /tag aplica uma etiqueta). Um @ abre um menu com os arquivos do seu workspace, para você apontar o agente para um deles pelo nome. Todo o resto é uma mensagem comum. Há também um editor markdown avançado atrás de um botão próprio, com prévia ao vivo e as ferramentas de formatação de sempre, para qualquer coisa longa demais para uma caixa de uma linha.

Acima do campo há um espaço de contexto. Ele mostra o que a próxima mensagem vai levar além do seu texto: uma mensagem que você escolheu responder, que viaja como citação; uma entidade do grafo de conhecimento; ou uma tarefa agendada, ou uma das execuções dela, escolhida no painel à direita.

Enquanto o agente responde, o botão de enviar vira Parar a geração. Ele não é decorativo — o turno é mesmo abortado lá em cima e retirado do transcript, e o que você tinha digitado volta para a caixa.

Anexar um arquivo

Três gestos, e todos produzem o mesmo anexo:

• o botão de clipe, que abre o seletor de arquivos do seu sistema operacional;
• colar um arquivo no compositor, que é como entra uma captura de tela (as imagens coladas são renomeadas na chegada, então uma segunda colagem não sobrescreve a primeira);
• arrastar arquivos de fora do navegador, o que mostra sobre a conversa o aviso “Solte para anexar a esta mensagem”.

Os arquivos anexados aparecem como quadrados acima do campo, mostrando a própria imagem quando é uma imagem, para você ver que escolheu a captura certa antes de enviar.

Arrastar arquivos para o painel Arquivos em vez de para a conversa é outro ato: aquele painel é arquivamento, não escrita, e o aviso diz “Solte para adicionar a este workspace”. O que acontece com um arquivo depois que ele chega — e como o agente devolve um para você — está em Arquivos e entrega.

O painel de prévia

Clicar num arquivo, seja no transcript ou no painel Arquivos, oferece sempre Baixar e Visualizar quando o formato é um dos que o app sabe desenhar. As imagens pulam o menu e abrem direto na prévia.

Alguns formatos ganham um leitor próprio: imagens, Markdown, HTML, PDF, código-fonte e as famílias de escritório .docx/.odt/.odp e .xlsx/.ods. Qualquer outra coisa que seja texto — inclusive um arquivo sem extensão nenhuma, como LICENSE, e um arquivo oculto como .gitignore — é mostrada como texto puro. O que fica só para download é o que realmente não dá para ler aqui: arquivos compactados, áudio e vídeo, executáveis, fontes, os binários de escritório anteriores a 2007 e qualquer arquivo cujos primeiros bytes se revelem binários. Até a leitura em texto puro é segura por construção — o texto é escapado dentro de um <pre>, e o orquestrador serve todo arquivo de mídia como um anexo que o seu navegador não vai renderizar, então os seus arquivos nunca viram uma página nesta origem.

O que o painel sabe fazer, uma vez que tem o arquivo:

• Markdown e HTML têm duas leituras, e o controle “Como ler este arquivo” alterna entre Renderizado e Código-fonte.
• Os PDFs são desenhados pelo próprio app, página a página, com anterior/próxima, zoom e ajuste à largura. Se o navegador não der conta, o painel avisa e oferece o download.
• As visões parciais assumem isso. Uma planilha mostra “Mostrando as primeiras n linhas”, uma apresentação diz que o texto dela foi extraído e que os slides estão no arquivo, e um arquivo grande demais para a prévia pede que você o baixe.
• Um arquivo que se revela não ser texto avisa isso assim que os bytes chegam, em vez de pintar uma tela de caracteres de substituição.

Os scripts dentro de uma prévia de HTML ficam desligados por padrão. Ligá-los abre um diálogo que declara as duas metades com honestidade: com os scripts ligados, a página pode mandar o que o documento contém para qualquer endereço da internet, mas a sua sessão, os seus cookies e o resto do app ficam fora do alcance dela. A permissão vale até você fechar o navegador e cobre todo arquivo HTML que você abrir nesse tempo.

Enquanto o agente trabalha

A faixa do assistente mostra o que o turno está fazendo — “Pensando…”, “Usando ferramenta”, uma sequência recolhida de passos de narração que diz quantos são, e o raciocínio do próprio modelo atrás de uma dobra. Se o fluxo é cortado, o app diz que a conexão caiu e que o agente continua trabalhando, que é uma mensagem diferente da que ele mostra quando o seu aparelho fica sem rede.

Sair de uma conversa no meio de um turno não interrompe nada. Uma barra no rodapé lista as conversas rodando em segundo plano, cada uma com o seu estado — trabalhando, reconectando, resposta pronta — e clicar numa delas leva você de volta.

Um aviso acima do painel central aparece quando mudou algo que o seu agente só vai perceber depois de reiniciar: um segredo que você salvou, um modelo ou uma skill compartilhada que um administrador mudou, ou um reinício que um administrador pediu. Ele nomeia o motivo e dá o botão a você, para que você escolha a hora e nenhum turno em andamento seja cortado.

O resto da moldura

O rodapé da barra lateral traz o seu endereço de e-mail, o seletor de idioma e Sair. Acima dele ficam o link para o console de administração — mostrado só se você puder chegar até ele — e Instalar app, porque o app web é instalável como PWA. No iPhone e no iPad o app explica o caminho Compartilhar → Adicionar à Tela de Início do Safari, porque o Safari não tem um botão de instalar próprio.

Para onde ir agora

Trabalhando com projetos explica o único destino que este capítulo deixou de lado de propósito, e Tarefas agendadas, o único painel cujo comportamento depende de qual harness o seu agente usa. Para o que o painel de memória e o grafo de conhecimento guardam de fato, leia Skills e memória; para envios e entregas, Arquivos e entrega.