# ContentGenerator

![Status](https://img.shields.io/badge/status-stable-brightgreen)

Componente de área de texto com geração de conteúdo por inteligência artificial integrada. Permite ao usuário digitar livremente ou solicitar geração de texto via IA através de um diálogo de contexto, com suporte opcional a reconhecimento de voz.

## Quando usar

- Campos de texto longos onde a IA pode auxiliar na redação (descrições, observações, resumos)
- Formulários com campos de conteúdo aberto onde a geração assistida melhora a produtividade
- Campos com contexto específico onde um `prompt` customizado direciona a IA

## Quando não usar

- Campos de texto simples sem necessidade de IA — use [`TextArea`](../text-area/README.md)
- Campos de entrada curtos (nome, código) — use um input simples
- O seletor `s-text-area-ia` está descontinuado (remoção na v20.0.0) — use `s-content-generator`

## Instalação

```typescript
import { ContentGeneratorModule } from '@seniorsistemas/angular-components/content-generator';

@Component({ standalone: true, imports: [ContentGeneratorModule] })
export class MeuComponent {}
```

## Uso básico

```html
<s-content-generator
  formControlName="descricao"
  label="Descrição"
  [rows]="6"
/>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `label` | `string` | — | — | Label exibido acima da área de texto |
| `placeholder` | `string` | `''` | — | Texto de placeholder quando a área está vazia |
| `prompt` | `string` | — | — | Instrução enviada à IA para direcionar o conteúdo gerado |
| `rows` | `number` | `10` | — | Número de linhas visíveis da área de texto |
| `cols` | `number` | `10` | — | Número de colunas da área de texto |
| `readonly` | `boolean` | `false` | — | Torna a área de texto somente leitura |
| `speechRecognition` | `boolean` | `false` | — | Habilita o botão de reconhecimento de voz |
| `keepContext` | `boolean` | `false` | — | Mantém o contexto do diálogo de IA entre aberturas |
| `speechRecognitionPlaceholder` | `string` | `''` | — | Placeholder exibido durante o reconhecimento de voz |
| `maxLength` | `number \| null` | `null` | — | Limite máximo de caracteres (`null` = sem limite) |
| `id` | `string` | `ContentGenerator_{n}` | — | Identificador único do componente no DOM |
| `textAreaStyle` | `Partial<CSSStyleDeclaration>` | `{}` | — | Estilos CSS inline aplicados à área de texto interna |

## Exemplos

### Com prompt customizado

```html
<form [formGroup]="form">
  <s-content-generator
    formControlName="descricao"
    label="Descrição do produto"
    placeholder="Descreva o produto ou use a IA para gerar..."
    [rows]="6"
    prompt="Gere uma descrição focada em benefícios para o cliente, em tom profissional."
  ></s-content-generator>
</form>
```

### Com reconhecimento de voz

```html
<form [formGroup]="form">
  <s-content-generator
    formControlName="observacoes"
    label="Observações"
    placeholder="Digite ou dite suas observações..."
    [rows]="5"
    [speechRecognition]="true"
    speechRecognitionPlaceholder="Ouvindo... fale agora"
  ></s-content-generator>
</form>
```

### Com limite de caracteres

```html
<form [formGroup]="form">
  <s-content-generator
    formControlName="resumo"
    label="Resumo executivo"
    placeholder="Máximo de 500 caracteres..."
    [maxLength]="500"
    [rows]="5"
  ></s-content-generator>
</form>
```

## Acessibilidade

- Implementa `ControlValueAccessor` — compatível com `formControlName`, `formControl` e `ngModel`
- O botão de IA e o botão de voz possuem labels acessíveis
- O diálogo de contexto da IA é navegável por teclado

## Componentes relacionados

- [`TextArea`](../text-area/README.md) — área de texto simples sem IA
- [`SpeechRecognition`](../speech-recognition/README.md) — reconhecimento de voz standalone