InternalTenantChat

src/layouts/components/internal-tenant-chat/ — 4 sub-componentes: InternalTenantChat (orchestrator), InternalTenantChatContact, InternalTenantChatMessage, InternalTenantChooseInstance

Communication High 2 usos

Sistema de chat de suporte entre agentes e tenants (clientes). Canal agente↔tenant para suporte ao cliente. Suporta modo fullscreen (55vw×55vh), múltiplas instâncias WhatsApp, upload de imagem/documento com caption, gravação de áudio, emoji picker (emoji-mart-vue) e replies. Diferente do InternalChat (agente↔agente).

⚠ ATENÇÃO: Zero usos externos no codebase — ButtonFloating importa o componente mas não o renderiza (import morto). O único uso real ativo é em src/layouts/MainLayout.vue.

Sub-componentes

Componente	Arquivo	Responsabilidade
`InternalTenantChat`	`InternalTenantChat.vue`	Orquestrador. Registra módulos Vuex dinamicamente no `mounted()`. Gerencia estado fullscreen e fluxo entre sub-telas.
`InternalTenantChatContact`	`InternalTenantChatContact.vue`	Lista de tenants. Hero header "Suporte Pedbot". Background com gradiente azul-verde.
`InternalTenantChatMessage`	`InternalTenantChatMessage.vue`	Tela de conversa. Emoji picker, modo fullscreen, reply, upload de imagem/doc com caption, gravação de áudio.
`InternalTenantChooseInstance`	`InternalTenantChooseInstance.vue`	`vs-popup` + `v-select` para seleção da instância WhatsApp antes de abrir o chat.

Seleção de Instância

Primeiro passo ao abrir o sistema. InternalTenantChooseInstance exibe um vs-popup com um v-select para o agente escolher qual instância WhatsApp usar antes de acessar a lista de tenants. Emite setInstance com o instanceId selecionado ou isActiveFalse se cancelado.

<!-- Template interno do InternalTenantChat.vue — o único código real disponível. -->
<!-- ZERO usos externos como tag. ButtonFloating importa mas não renderiza. -->
<InternalTenantChooseInstance
    :isActive="chooseInstanceIsActive"
    @setInstance="(instanceId) => { setInstanceId(instanceId); chooseInstanceIsActive = false; openChat() }"
    @isActiveFalse="chooseInstanceIsActive = false; isActiveLocal = false"
/>

Lista de Tenants

InternalTenantChatContact — painel 340×460px com hero header "Suporte Pedbot" e fundo em gradiente azul-verde (linear-gradient(135deg, #b3d9ff, #b9f3e4)). Cards de tenant com avatar, nome, prévia da última mensagem e badge de não-lidas. Enquanto carrega, exibe spinner conic-gradient.

Suporte Pedbot

Como podemos ajudá-lo(a)?

Farmácias Central Ltda

Oi, preciso de ajuda com o pedido #4521

Drogaria São Paulo

Quando o sistema fica disponível?

<!-- Uso via orchestrator (InternalTenantChat.vue) -->
<InternalTenantChatContact
    :isFullscreen="isFullscreen"
    :isActive="internalTenantChatContactIsActive"
    @isActiveFalse="(contact) => openChat(contact)"
    @isFullscream="(fullscream) => isFullscreen = fullscream"
/>

Conversa Compacta

InternalTenantChatMessage no modo padrão. Toolbar colapsada no botão more_vert à esquerda do campo de texto. Header azul com avatar, nome do tenant, indicador online, botão expandir para fullscreen e botão fechar.

Empresa ABC

online

Oi, precisamos de ajuda com a integração do ERP.

09:14

Claro! Pode me passar mais detalhes?

09:15

Escreva uma mensagem...

<!-- Uso via orchestrator (InternalTenantChat.vue) -->
<InternalTenantChatMessage
    :isFullscreen="isFullscreen"
    :isActive="internalTenantChatMessageIsActive"
    @isActiveFalse="(back) => (back ? openChat() : isActiveLocal = false)"
    @isFullscream="(fullscream) => isFullscreen = fullscream"
/>

Conversa Fullscreen

InternalTenantChatMessage com :isFullscreen="true". Dimensões: 55vw × 55vh. Toolbar de ações completamente visível inline (upload imagem, upload documento, microfone, emoji picker, enviar). Barra de reply exibida acima do campo de texto quando em modo de resposta.

55vw × 55vh

Empresa ABC

online

Olá! Preciso de ajuda com o módulo de estoque — os produtos não estão sincronizando.

10:22

Entendido. Pode verificar se o webhook está ativo nas configurações do ERP?

10:23

Sim, está ativo. Mas os itens novos não aparecem no admin.

10:24

Respondendo a Empresa ABC Sim, está ativo. Mas os itens novos não aparecem...

Escreva uma mensagem...

<!-- Exemplo sintético — zero usos externos no admin. -->
<InternalTenantChat
  :isActive="internalTenantChatIsActive"
  @isActiveFalse="internalTenantChatIsActive = false"
/>

API

Props — InternalTenantChat (orchestrator)

Prop/Evento	Tipo	Default	Descrição
`:isActive`	Boolean	—	Abre o sistema de chat. Aciona primeiro o fluxo de seleção de instância.
`@isActiveFalse`	Event	—	Emitido quando o usuário fecha completamente o chat (qualquer sub-tela).

Nota: O estado isFullscreen é interno ao orchestrator — não há prop pública para fullscreen. Os sub-componentes comunicam a transição via eventos @isFullscream (sic, typo no código original).

Props — InternalTenantChatMessage

Nome	Tipo	Default	Descrição
`isActive`	Boolean	false	Controla visibilidade da tela de conversa.
`isFullscreen`	Boolean	false	Ativa modo fullscreen (55vw×55vh). Exibe toolbar completa inline.

Eventos — InternalTenantChooseInstance

Evento	Payload	Descrição
`@setInstance`	`instanceId: String`	Instância selecionada pelo usuário. O orchestrator chama `setInstanceId()` e abre o chat.
`@isActiveFalse`	—	Popup fechado sem seleção. Orchestrator fecha todo o sistema (`isActiveLocal = false`).

Módulos Vuex (registrados dinamicamente)

Módulo	Registrado em	Descrição
`internalTenant`	`mounted()` do orchestrator	Estado da lista de tenants e contato ativo.
`internalTenantChatMessage`	`mounted()` do orchestrator	Estado das mensagens, uploads, gravação de áudio e replies.
`instance/chosenInstanceIds`	Leitura (existente)	IDs de instâncias WhatsApp já selecionadas pelo usuário.

Dependências

Tipo	Dependência	Uso
Vuesax	`vs-popup`, `$vs.loading`, `$vs.notify`, `vs-input`	Popup de instância, loading global, notificações, campo de busca
Custom	`Upload` — `src/components/upload/Upload.vue`	Upload de imagem e documento com caption
External	`emoji-mart-vue` (Picker)	Emoji picker PT-BR na tela de conversa
External	`vue-select` (v-select)	Dropdown de seleção de instância WhatsApp
Browser API	`MediaRecorder`	Gravação de áudio nativa

Onde é usado

Arquivo	Status	Nota
`src/layouts/MainLayout.vue`	Ativo	Único uso real — renderizado no layout principal
`src/layouts/components/ButtonFloating.vue`	Import morto	Importado mas nunca renderizado no template

Comparação: InternalChat vs InternalTenantChat

Aspecto	InternalChat	InternalTenantChat
Canal	agente ↔ agente	agente ↔ tenant
Branding	—	"Suporte Pedbot" no hero header
Seleção de instância	Não	Sim (`vs-popup` + `v-select`)
Background contatos	`bg-primary`	Gradiente `#b3d9ff` → `#b9f3e4`
Captions em mídia	Não	Sim (imagem e documento)
Emoji picker	Não	Sim (`emoji-mart-vue`)
Mensagens fixadas	Sim	Não
Usos ativos	3 (ativo)	0 externos (1 via MainLayout — import morto em ButtonFloating)