Bot de IA - Novo modal de pergunta

:information_source: Resumo AI Bot - Novo Modal de Perguntas
:hammer_and_wrench: Repositório GitHub - VaperinaDEV/aibot-new-question-modal
:question: Guia de Instalação Como instalar um tema ou componente de tema
:open_book: Novo em Temas do Discourse? Guia para iniciantes no uso de Temas do Discourse

Instalar este componente de tema

Olá :wave:

Discourse AI - AI Bot é necessário para usar isto.

Este componente de tema é, na verdade, uma versão modal das funções da página inicial do ask.discourse.com. Assim, você pode criar uma nova conversa com o AI Bot destinatário.

Este modal é em tela cheia, o que dá a impressão de que você está em outra página. Ou algo assim teria sido o objetivo.

As partes principais:

Avatar: O avatar do aibot tem um spinner que está sempre girando no avatar do modal, mas também indica quando ele está escrevendo.

aibot-spinner


Mensagem de IA: Você também pode usar HTML aqui.
Screenshot 2024-10-20 at 16.27.18


Links rápidos: Adicione quantas perguntas desejar.
A exibição de links rápidos é limitada pelas configurações e é embaralhada quando você abre o modal novamente.

max quick links desktop padrão: 5
max quick links mobile padrão: 3


Conversas Recentes: Este botão redireciona para a página /search com os parâmetros in:messages, @aibot-username
Screenshot 2024-10-20 at 16.33.38


É tudo sobre o modal. Você pode alterar e personalizar tudo nas configurações do tema. :slight_smile:

O botão de abertura do modal AI Bot pode ser colocado na barra lateral em 3 pontos.

  1. sidebar-footer-actions

  2. before-sidebar-sections

  3. after-sidebar-sections

Nas configurações do tema, você pode alterar o estilo do botão.


Vamos ver as configurações do tema

Configurações do Tema
  • quick_links: Aqui você pode configurar as perguntas dos botões rápidos.
  • max quick links desktop: Número máximo de links rápidos exibidos no desktop
  • max quick links mobile: Número máximo de links rápidos exibidos no mobile
  • show_for_groups: Configuração Obrigatória. Adicione o nome do grupo para exibir o botão da barra lateral.
  • aibot_id: Configuração Obrigatória. Adicione o ID do AI Bot que você deseja usar para isso.
  • aibot_username: Configuração Obrigatória. Adicione o nome de usuário do AI Bot que você deseja usar para isso.
  • aibot_avatar: Configuração Obrigatória. Carregue uma imagem para o AI Bot que aparece no modal.
  • sibebar aibot button postition: Selecione a posição do botão da barra lateral.
    • sidebar-footer-actions (padrão)
    • before-sidebar-sections (topo da barra lateral)
    • after-sidebar-sections (fundo da barra lateral)
  • sibebar aibot button style: Selecione o estilo do botão da barra lateral.
    • btn-primary (padrão)
    • btn-default
  • sidebar aibot button border-radius: Altere o arredondamento do botão da barra lateral.
  • sidebar aibot button before icon: Altere o ícone do botão da barra lateral.
  • aibot recent messages icon: Altere o ícone do botão de conversas recentes.
  • modal background: Altere o fundo do modal.
  • modal content wrapper background: Altere o fundo do contêiner de conteúdo do modal.
  • modal content wrapper border radius: Altere o arredondamento do contêiner de conteúdo do modal.
  • quick buttons style: Selecione o estilo dos botões rápidos.
    • btn-primary (padrão)
    • btn-default
  • quick buttons border radius: Altere o arredondamento dos botões rápidos.
  • mobile quick buttons wrapper border radius: Altere o arredondamento do contêiner dos botões rápidos mobile.
  • aibot avatar spinner primary color: Altere a cor primária do spinner do avatar var(--tertiary) por padrão.
  • aibot avatar spinner secondary color: Altere a cor secundária do spinner do avatar #ffffff por padrão.
  • aibot message border color: Esta borda fica no lado direito da mensagem. var(--tertiary) por padrão.
  • textarea border-radius: Altere o arredondamento da área de texto.
  • send button border radius: Altere o arredondamento do botão de envio.
  • recent messages button border radius: Altere o arredondamento do botão de mensagens recentes.
  • recent messages button color: Altere a cor do botão de mensagens recentes. Isso também altera a cor do ícone.
  • recent messages button hover color: Altere a cor de hover do botão de mensagens recentes.
  • recent messages button hover background: Altere o fundo de hover do botão de mensagens recentes.
  • recent messages button border: Altere a borda do botão de mensagens recentes.
  • spinner loader border: Altere a borda do carregador spinner do modal. Ele aparece quando você envia a mensagem.
  • spinner loader border right color: Altere a cor do lado direito do carregador spinner.

Existem também algumas traduções de temas…

Traduções do Tema
  • aibot_modal_title: Este é o título do modal.
  • aibot_message: Esta é a mensagem do AI Bot no modal.
  • input_placeholder: Este é o placeholder na área de texto.
  • input_submit: Este é o título do botão de envio.
  • input_length: Esta mensagem aparece quando o texto é muito curto.
  • disclaimer: Este texto aparece abaixo da área de texto no modal.
  • new_question: Este é o texto do botão da barra lateral.
  • recent_messages: Este é o texto do botão de mensagens recentes do modal.

Este componente de tema oculta o botão de compartilhamento das mensagens pessoais do AI Bot. O texto discourse_ai.ai_bot.default_pm_prefix é o título padrão do pm de IA, ele mudará automaticamente dependendo do assunto da conversa. Você pode alterá-lo em /admin/customize/site_texts


Crédito: Discourse Ask Theme

14 curtidas