# Mote Caixa de mensagem de app de IA que cresce com o texto, aceita arquivos, grava áudio e abre comandos ao digitar barra. > Mote é um componente exclusivo do THM Componentes que entrega a caixa de mensagem completa de um app de IA: campo que cresce com o texto, anexos por arrastar, colar ou escolher, menu de comandos ao digitar barra, microfone com forma de onda e botão Enviar que vira Parar. Serve para chats de atendimento e triagem. - Categoria: Interfaces de IA - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Canvas 2D - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/mote/ ## Como ele é Lembra a caixa de mensagem dos assistentes de IA mais conhecidos: um retângulo branco de cantos bem arredondados e sombra suave, que ganha um contorno anil ao receber foco. O texto cresce até oito linhas antes de rolar. Embaixo ficam os botões de clipe, de comandos e de microfone, e à direita o botão redondo de enviar. Anexos aparecem como chips acima do texto, com miniatura nas imagens. Ao digitar barra, um menu surge colado à palavra; ao gravar, barras em degradê anil e ciano desenham a voz ao lado de um cronômetro. Durante a resposta, a seta vira um quadrado de parar com um anel girando. ## Você pode estar procurando isto se pediu algo assim - “caixa de mensagem igual à do ChatGPT com botão de anexar” - “campo de chat que cresce enquanto a pessoa digita” - “arrastar arquivos para dentro do chat e ver a miniatura” - “menu de comandos que aparece quando digito barra” - “botão de microfone que mostra a onda da voz enquanto grava” - “botão de enviar que vira parar enquanto a IA responde” - “input de prompt pronto para o meu app de IA” ## Também chamado de caixa de prompt, campo de mensagem, composer de chat, prompt input, chat composer, slash commands, message input, prompt box ## Quando usar - Chats de IA para equipes clínicas, triagem e atendimento - Copilotos internos em que a pessoa anexa planilhas, PDFs e imagens - Produtos conversacionais com atalhos de comando por barra - Apps em que falar é mais rápido que digitar, com gravação de áudio ## Quando evitar - Formulários simples de contato, em que um campo de texto comum resolve - Quem espera transcrição pronta: o microfone entrega o áudio gravado, e a conversão em texto fica com o seu backend ## Como pedir para a sua IA ```text Crie uma caixa de prompt para o chat de IA do meu produto: campo que cresce até oito linhas, anexos por arrastar, colar ou escolher com limite de tamanho, comandos ao digitar barra, microfone com forma de onda e botão que vira Parar, tudo acessível por teclado e leitor de tela. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Mote ### O microfone de Mote transcreve a voz? Não. Mote grava o áudio com permissão do navegador, mostra a forma de onda ao vivo e entrega o arquivo de áudio e a duração no evento record-stop, para você enviar a um serviço de transcrição. Sem permissão ou fora de HTTPS, a onda vira uma prévia simulada e um aviso explica o motivo. ### Quais arquivos Mote aceita? Por padrão, Mote aceita imagens, PDF, TXT, CSV, Markdown, Word e Excel, até 8 anexos de no máximo 20 MB cada. Os arquivos podem entrar arrastados, colados ou pelo seletor, e imagens ganham miniatura. Tipos e limites mudam pelas props accept, maxFiles e maxSizeMb, com mensagens de erro em português. ### Mote funciona com teclado e leitor de tela? Sim. Em Mote, Enter envia, Shift+Enter quebra a linha e a barra abre o menu de comandos, que se percorre com as setas e se confirma com Enter ou Tab. O menu segue o padrão de lista de opções, e anexos, erros e envios são anunciados ao leitor de tela. ## Componentes relacionados - [Pingue-pongue](https://vibecode.thmtecnologia.com/componentes/pingue-pongue/): Conversa com a IA em que a resposta chega aos poucos, dá para gerar outra versão, editar a pergunta e avaliar. - [Sopro](https://vibecode.thmtecnologia.com/componentes/sopro/): Uma esfera luminosa que respira em espera e pulsa no ritmo da voz quando o assistente ouve ou fala. - [Prosa](https://vibecode.thmtecnologia.com/componentes/prosa/): A resposta do assistente aparece aos poucos, palavra por palavra, saindo de um leve desfoque, como num chat de IA. - [Malote](https://vibecode.thmtecnologia.com/componentes/malote/): Área para arrastar arquivos ou clicar e escolher, com um cartão que se levanta e a lista dos arquivos escolhidos. - [Trevo](https://vibecode.thmtecnologia.com/componentes/trevo/): Uma janela de busca que abre com Ctrl K ou ⌘K para achar páginas e executar ações sem tirar as mãos do teclado. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.