req-080: Integração de Modelos de Sessão e Assistente IA no Live Editor

Esta requisição visa portar essas duas funcionalidades cruciais para a barra flutuante (editbar) do Live Editor, removendo qualquer dependência do Fomantic-UI e garantindo que…

Descrição do Problema / Contexto

No editor clássico administrativo (admin-paginas), os usuários dispõem de funcionalidades para importar modelos de sessões prontas e usar o assistente por IA para gerar/modificar conteúdos. O Live Editor (editbar flutuante #html-editor-floating-toolbar) carece dessas opções integradas, limitando a edição in-place a modificações manuais de texto/HTML.

Esta requisição visa portar essas duas funcionalidades cruciais para a barra flutuante (editbar) do Live Editor, removendo qualquer dependência do Fomantic-UI e garantindo que rodem de forma 100% autônoma e segura na página hospedeira pública.

Modelos de Sessões Prontas (HTML/CSS Templates):
- Problema: O controle clássico html-editor-modelos.html permite buscar e importar blocos HTML/CSS estruturados (Templates). Precisamos disponibilizar essa listagem e seleção de modelos diretamente na barra de edição flutuante do Live Editor.
- Comportamento Esperado:
  - Adicionar um botão "Modelos" (com ícone SVG de layout/grid) na barra flutuante #html-editor-floating-toolbar.
  - Ao clicar, abrir um painel/modal customizado (vanilla, sem Fomantic-UI) contendo o campo de busca #modelos-search-input e a lista de modelos #modelos-cards (carregados via AJAX html-editor-templates-load em lotes de paginação).
  - O painel deve permitir escolher a relação de inserção ao redor do elemento selecionado ("Substituir selecionado", "Inserir antes", "Inserir depois").
  - Ao selecionar, o HTML do modelo deve ser inserido na posição correta do DOM vivo da página e o seu respectivo CSS deve ser injetado para visualização instantânea.
Assistente por IA (AI Assistant):
- Problema: O assistente por IA clássico (ia-prompt) permite que os usuários façam perguntas ou deem instruções para gerar/modificar o código do elemento selecionado.
- Comportamento Esperado:
  - Adicionar um botão "Assistente IA" (com ícone SVG de robô ou faísca) na barra flutuante #html-editor-floating-toolbar.
  - Ao clicar, exibir um painel/modal contendo as abas "Prompt", "Modo" e "Configuração", com os selects de prompts, modos, conexões e modelos de IA estruturados na biblioteca de IA (ia.php).
  - As requisições AJAX de listagem e processamento devem ser roteadas para html-editor-ia-requests e ia-prompts / ia-modos no backend.
  - Ao receber a resposta da IA, o HTML/CSS gerado deve ser aplicado imediatamente ao elemento ativo no DOM vivo, e o preview deve ser atualizado instantaneamente.
Blindagem e Isolação Estética (Sem Fomantic-UI):
- Problema: Os templates e o assistente clássicos utilizam classes CSS e marcadores visuais do Fomantic-UI (ui cards, ui segment, ui tabular menu, etc.) que não estão presentes ou causam conflito com o CSS do site do cliente.
- Solução: Reescrever/adaptar as marcações de templates e da IA para utilizarem elementos HTML puros estilizados com CSS isolado e blindado (!important contra heranças do site, no mesmo padrão de design estrito do floating toolbar). Todos os ícones de fontes de ícone devem ser substituídos por SVGs inline.
Selecionador de Imagem de Fundo (Background Image Picker):
- Problema: No Tailwind styler do Live Editor, o botão de escolher imagem de fundo .he-bgimage-pick cai em um window.prompt básico pedindo a URL da imagem (já que html_editor.imagepick não está presente no live editor).
- Comportamento Esperado: Integrar o mesmo selecionador de imagens autônomo (openLiveImagePicker) ao clicar no botão .he-bgimage-pick do styler. Ao selecionar um arquivo no gerenciador de arquivos (admin-arquivos), o caminho da imagem deve ser aplicado automaticamente como background-image do elemento selecionado (applyBackgroundImage). O botão .he-bgimage-clear deve continuar limpando a imagem de fundo do elemento normalmente (clearBackgroundImage).

Proposta de Alterações Detalhada

1. Inclusão dos Botões na Barra Flutuante

Modificação em html-editor.js (createToolbar):
- Adicionar dois novos botões na barra flutuante #html-editor-floating-toolbar:
  1. Botão para abrir o painel de Modelos: .he-tb-templates (ícone SVG de grid/layout).
  2. Botão para abrir o painel do Assistente IA: .he-tb-ai (ícone SVG de robô ou faísca mágica).
- Expor métodos públicos no editor ou eventos para que dashboard.toolbar.js (ou o próprio html-editor.js) capturem os cliques e exibam os painéis correspondentes.

2. Painel de Modelos (Sections/Templates)

Estrutura UI:
- Criar um painel ou modal vanilla (ex: #html-editor-templates-panel) injetado no body da página hospedeira.
- O painel deve conter o input de busca #modelos-search-input, a área de carregamento dinâmico #modelos-cards e opções de inserção (Substituir / Inserir Antes / Inserir Depois).
- A listagem inicial, busca por digitação (com debounce) e paginação ("Carregar Mais") devem ser orquestradas via JS consumindo a rota AJAX html-editor-templates-load (mesmo comportamento do editor clássico).
Inserção no DOM vivo:
- Quando um modelo for selecionado, ler o HTML e o CSS do registro.
- Inserir o HTML no DOM vivo na posição correspondente em relação ao elemento selecionado (substituir o elemento selecionado, ou inserir como irmão anterior/posterior).
- Injetar/concatenar a string CSS do modelo em uma tag <style id="c2f-templates-css"> no head da página (ou anexada ao layout root), garantindo que os estilos do template se apliquem de imediato no navegador.

3. Painel do Assistente por IA

Estrutura UI:
- Criar um painel ou modal vanilla (ex: #html-editor-ai-panel) para exibir a interface do assistente.
- Portar a lógica de abas ("Prompt", "Modo", "Configuração") usando menus e abas vanilla estilizadas localmente.
- Os textareas devem ser inicializados com instâncias locais do CodeMirror (se carregado) ou campos de texto estilizados de forma limpa.
Interações AJAX:
- Preencher as opções do menu de IA chamando ia-prompts e ia-modos no backend.
- Ao submeter a instrução do usuário, enviar a chamada para html-editor-ia-requests com os dados do elemento selecionado (HTML e CSS).
- No sucesso da requisição, injetar o HTML retornado no elemento ativo do DOM vivo e aplicar o respectivo CSS.

4. Selecionador de Imagem de Fundo

Modificação em html-editor.js (requestBackgroundImage / bindLiveImagePicker):
- Ao clicar no botão .he-bgimage-pick do styler, definir o estado this._imagePickerTarget = 'background' e chamar this.openLiveImagePicker().
- Ajustar a função de callback de mensagem do selecionador (bindLiveImagePicker) para verificar se o target de seleção ativo é 'background'.
- Se for 'background', chamar this.applyBackgroundImage(url) com o caminho retornado e fechar o picker. Caso contrário, continuar aplicando ao input #element-src do modal.
- Certificar-se de que o botão .he-bgimage-clear executa this.clearBackgroundImage(), removendo o estilo de background-image e atualizando o preview de forma robusta.

5. Backend (`html-editor.php` e `ia.php`)

Assegurar que as bibliotecas html-editor.php e ia.php incluam suporte para processar essas requisições quando originadas da rota AJAX do dashboard toolbar (dashboard.php).
Caso necessário, exportar funções auxiliares para que dashboard.php possa encaminhar as requisições de modelos e IA sem violar o isolamento do painel clássico.

Validação e Testes

Validação de Sintaxe e Suíte:
- Executar php -l nos arquivos PHP e node --check nos scripts JS modificados.
- Garantir que composer test e npm run test continuem 100% verdes.
Testes Unitários / Integrados:
- Adaptar os testes do Vitest para verificar que a barra flutuante cria os botões adicionais e que estes disparam corretamente os painéis correspondentes.
Validação Visual e Funcional:
- Selecionar um elemento na página viva, clicar no botão de Modelos e conferir a listagem de templates cadastrados.
- Realizar uma busca por texto e confirmar que o filtro funciona em tempo real.
- Selecionar um template com a opção "Inserir Depois" e verificar que a nova seção é injetada no DOM vivo com todos os seus estilos aplicados perfeitamente.
- Clicar no botão do Assistente IA, preencher uma instrução rápida (ex: "Mude o texto do título para 'Conn2flow AI'"), enviar e verificar se o elemento na tela é modificado na hora com o retorno da IA.
- No Tailwind styler, na seção de imagens de fundo, clicar no botão de selecionar imagem de fundo (.he-bgimage-pick), escolher um arquivo no gerenciador de arquivos e confirmar que o elemento selecionado recebe o estilo de background-image correspondente.
- Clicar no botão de limpar imagem de fundo (.he-bgimage-clear) no styler e verificar se a imagem de fundo do elemento é removida imediatamente do DOM.

# req-080: Integração de Modelos de Sessão e Assistente IA no Live Editor
## Descrição do Problema / Contexto
No editor clássico administrativo (`admin-paginas`), os usuários dispõem de funcionalidades para importar modelos de sessões prontas e usar o assistente por IA para gerar/modificar conteúdos. O Live Editor (editbar flutuante `#html-editor-floating-toolbar`) carece dessas opções integradas, limitando a edição in-place a modificações manuais de texto/HTML.
Esta requisição visa portar essas duas funcionalidades cruciais para a barra flutuante (editbar) do Live Editor, removendo qualquer dependência do Fomantic-UI e garantindo que rodem de forma 100% autônoma e segura na página hospedeira pública.
1. **Modelos de Sessões Prontas (HTML/CSS Templates)**:
   * *Problema*: O controle clássico `html-editor-modelos.html` permite buscar e importar blocos HTML/CSS estruturados (Templates). Precisamos disponibilizar essa listagem e seleção de modelos diretamente na barra de edição flutuante do Live Editor.
   * *Comportamento Esperado*:
     * Adicionar um botão "Modelos" (com ícone SVG de layout/grid) na barra flutuante `#html-editor-floating-toolbar`.
     * Ao clicar, abrir um painel/modal customizado (vanilla, sem Fomantic-UI) contendo o campo de busca `#modelos-search-input` e a lista de modelos `#modelos-cards` (carregados via AJAX `html-editor-templates-load` em lotes de paginação).
     * O painel deve permitir escolher a relação de inserção ao redor do elemento selecionado ("Substituir selecionado", "Inserir antes", "Inserir depois").
     * Ao selecionar, o HTML do modelo deve ser inserido na posição correta do DOM vivo da página e o seu respectivo CSS deve ser injetado para visualização instantânea.
2. **Assistente por IA (AI Assistant)**:
   * *Problema*: O assistente por IA clássico (`ia-prompt`) permite que os usuários façam perguntas ou deem instruções para gerar/modificar o código do elemento selecionado.
   * *Comportamento Esperado*:
     * Adicionar um botão "Assistente IA" (com ícone SVG de robô ou faísca) na barra flutuante `#html-editor-floating-toolbar`.
     * Ao clicar, exibir um painel/modal contendo as abas "Prompt", "Modo" e "Configuração", com os selects de prompts, modos, conexões e modelos de IA estruturados na biblioteca de IA (`ia.php`).
     * As requisições AJAX de listagem e processamento devem ser roteadas para `html-editor-ia-requests` e `ia-prompts` / `ia-modos` no backend.
     * Ao receber a resposta da IA, o HTML/CSS gerado deve ser aplicado imediatamente ao elemento ativo no DOM vivo, e o preview deve ser atualizado instantaneamente.
3. **Blindagem e Isolação Estética (Sem Fomantic-UI)**:
   * *Problema*: Os templates e o assistente clássicos utilizam classes CSS e marcadores visuais do Fomantic-UI (`ui cards`, `ui segment`, `ui tabular menu`, etc.) que não estão presentes ou causam conflito com o CSS do site do cliente.
   * *Solução*: Reescrever/adaptar as marcações de templates e da IA para utilizarem elementos HTML puros estilizados com CSS isolado e blindado (`!important` contra heranças do site, no mesmo padrão de design estrito do floating toolbar). Todos os ícones de fontes de ícone devem ser substituídos por SVGs inline.
4. **Selecionador de Imagem de Fundo (Background Image Picker)**:
   * *Problema*: No Tailwind styler do Live Editor, o botão de escolher imagem de fundo `.he-bgimage-pick` cai em um `window.prompt` básico pedindo a URL da imagem (já que `html_editor.imagepick` não está presente no live editor).
   * *Comportamento Esperado*: Integrar o mesmo selecionador de imagens autônomo (`openLiveImagePicker`) ao clicar no botão `.he-bgimage-pick` do styler. Ao selecionar um arquivo no gerenciador de arquivos (`admin-arquivos`), o caminho da imagem deve ser aplicado automaticamente como `background-image` do elemento selecionado (`applyBackgroundImage`). O botão `.he-bgimage-clear` deve continuar limpando a imagem de fundo do elemento normalmente (`clearBackgroundImage`).
---
## Proposta de Alterações Detalhada
### 1. Inclusão dos Botões na Barra Flutuante
* **Modificação em `html-editor.js` (`createToolbar`)**:
  * Adicionar dois novos botões na barra flutuante `#html-editor-floating-toolbar`:
    1. Botão para abrir o painel de Modelos: `.he-tb-templates` (ícone SVG de grid/layout).
    2. Botão para abrir o painel do Assistente IA: `.he-tb-ai` (ícone SVG de robô ou faísca mágica).
  * Expor métodos públicos no editor ou eventos para que `dashboard.toolbar.js` (ou o próprio `html-editor.js`) capturem os cliques e exibam os painéis correspondentes.
### 2. Painel de Modelos (Sections/Templates)
* **Estrutura UI**:
  * Criar um painel ou modal vanilla (ex: `#html-editor-templates-panel`) injetado no body da página hospedeira.
  * O painel deve conter o input de busca `#modelos-search-input`, a área de carregamento dinâmico `#modelos-cards` e opções de inserção (Substituir / Inserir Antes / Inserir Depois).
  * A listagem inicial, busca por digitação (com debounce) e paginação ("Carregar Mais") devem ser orquestradas via JS consumindo a rota AJAX `html-editor-templates-load` (mesmo comportamento do editor clássico).
* **Inserção no DOM vivo**:
  * Quando um modelo for selecionado, ler o HTML e o CSS do registro.
  * Inserir o HTML no DOM vivo na posição correspondente em relação ao elemento selecionado (substituir o elemento selecionado, ou inserir como irmão anterior/posterior).
  * Injetar/concatenar a string CSS do modelo em uma tag `<style id="c2f-templates-css">` no head da página (ou anexada ao layout root), garantindo que os estilos do template se apliquem de imediato no navegador.
### 3. Painel do Assistente por IA
* **Estrutura UI**:
  * Criar um painel ou modal vanilla (ex: `#html-editor-ai-panel`) para exibir a interface do assistente.
  * Portar a lógica de abas ("Prompt", "Modo", "Configuração") usando menus e abas vanilla estilizadas localmente.
  * Os textareas devem ser inicializados com instâncias locais do CodeMirror (se carregado) ou campos de texto estilizados de forma limpa.
* **Interações AJAX**:
  * Preencher as opções do menu de IA chamando `ia-prompts` e `ia-modos` no backend.
  * Ao submeter a instrução do usuário, enviar a chamada para `html-editor-ia-requests` com os dados do elemento selecionado (HTML e CSS).
  * No sucesso da requisição, injetar o HTML retornado no elemento ativo do DOM vivo e aplicar o respectivo CSS.
### 4. Selecionador de Imagem de Fundo
* **Modificação em `html-editor.js` (`requestBackgroundImage` / `bindLiveImagePicker`)**:
  * Ao clicar no botão `.he-bgimage-pick` do styler, definir o estado `this._imagePickerTarget = 'background'` e chamar `this.openLiveImagePicker()`.
  * Ajustar a função de callback de mensagem do selecionador (`bindLiveImagePicker`) para verificar se o target de seleção ativo é `'background'`.
  * Se for `'background'`, chamar `this.applyBackgroundImage(url)` com o caminho retornado e fechar o picker. Caso contrário, continuar aplicando ao input `#element-src` do modal.
  * Certificar-se de que o botão `.he-bgimage-clear` executa `this.clearBackgroundImage()`, removendo o estilo de `background-image` e atualizando o preview de forma robusta.
### 5. Backend (`html-editor.php` e `ia.php`)
* Assegurar que as bibliotecas `html-editor.php` e `ia.php` incluam suporte para processar essas requisições quando originadas da rota AJAX do dashboard toolbar (`dashboard.php`).
* Caso necessário, exportar funções auxiliares para que `dashboard.php` possa encaminhar as requisições de modelos e IA sem violar o isolamento do painel clássico.
---
## Validação e Testes
1. **Validação de Sintaxe e Suíte**:
   * Executar `php -l` nos arquivos PHP e `node --check` nos scripts JS modificados.
   * Garantir que `composer test` e `npm run test` continuem 100% verdes.
2. **Testes Unitários / Integrados**:
   * Adaptar os testes do Vitest para verificar que a barra flutuante cria os botões adicionais e que estes disparam corretamente os painéis correspondentes.
3. **Validação Visual e Funcional**:
   * Selecionar um elemento na página viva, clicar no botão de Modelos e conferir a listagem de templates cadastrados.
   * Realizar uma busca por texto e confirmar que o filtro funciona em tempo real.
   * Selecionar um template com a opção "Inserir Depois" e verificar que a nova seção é injetada no DOM vivo com todos os seus estilos aplicados perfeitamente.
   * Clicar no botão do Assistente IA, preencher uma instrução rápida (ex: "Mude o texto do título para 'Conn2flow AI'"), enviar e verificar se o elemento na tela é modificado na hora com o retorno da IA.
   * No Tailwind styler, na seção de imagens de fundo, clicar no botão de selecionar imagem de fundo (`.he-bgimage-pick`), escolher um arquivo no gerenciador de arquivos e confirmar que o elemento selecionado recebe o estilo de `background-image` correspondente.
   * Clicar no botão de limpar imagem de fundo (`.he-bgimage-clear`) no styler e verificar se a imagem de fundo do elemento é removida imediatamente do DOM.