# Insights

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

Componente de painel lateral de insights com IA. Exibe uma lista de itens de insights em um sidebar, com carregamento assíncrono via `Observable`, feedback de like/dislike, cópia e recarregamento. Suporta templates customizáveis para introdução, estado vazio e sem permissão.

> **Nota:** O seletor `s-ia-insight` e o pacote `ia-insight` estão descontinuados. Use `s-insights` e o pacote `insights` em novos projetos. O seletor antigo será removido na versão 20.0.0.

## Quando usar

- Dashboards que precisam exibir análises geradas por IA em um painel lateral
- Telas de gestão de RH, financeiro ou operacional com insights contextuais
- Qualquer interface que precise de análises assíncronas com feedback do usuário

## Quando não usar

- Quando os insights são estáticos e não precisam de carregamento assíncrono — use cards simples
- Quando não há controle de permissão ou o conteúdo é sempre acessível — simplifique o componente

## Instalação

```typescript
import { InsightsModule } from '@seniorsistemas/angular-components/insights';

@NgModule({
    imports: [InsightsModule],
})
export class MeuModule {}
```

## Uso básico

```html
<s-insights
    #insightsRef
    [insights]="listaInsights"
    (openInsights)="onAbrir()"
    (closedInsights)="onFechar()"
></s-insights>

<s-button label="Abrir Insights" (clicked)="insightsRef.open()"></s-button>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `insights` | `InsightsItem[]` | `[]` | Não | Lista de itens de insight a serem exibidos no painel. |
| `hasPermission` | `boolean` | `true` | Não | Indica se o usuário tem permissão para ver os insights. Quando `false`, exibe o template de sem permissão. |
| `introText` | `string` | `undefined` | Não | Texto de introdução exibido no topo do painel (quando sem template customizado). |
| `emptyText` | `string` | `undefined` | Não | Texto exibido quando não há insights disponíveis. |
| `noPermissionText` | `string` | `undefined` | Não | Texto exibido quando o usuário não tem permissão. |

### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `openInsights` | `OutputEmitterRef<void>` | Emitido quando o painel de insights é aberto. |
| `closedInsights` | `OutputEmitterRef<void>` | Emitido quando o painel de insights é fechado. |

### Tipos

```typescript
interface InsightsItem {
    title: string;                          // Título do insight (obrigatório)
    request$: Observable<string>;           // Observable que retorna o texto do insight (obrigatório)
    onLikeSelected?: VoidFunction;          // Callback ao clicar em "gostei"
    onDislikeSelected?: VoidFunction;       // Callback ao clicar em "não gostei"
    onCopy?: (content: string) => void;     // Callback ao copiar o conteúdo
    onReload?: VoidFunction;                // Callback ao recarregar o insight
    onOpenSidebar?: VoidFunction;           // Callback ao abrir o sidebar
    onCloseSideBar?: VoidFunction;          // Callback ao fechar o sidebar
    onContentLoaded?: VoidFunction;         // Callback quando o conteúdo é carregado
}
```

## Exemplos

### Insights com múltiplos itens

```typescript
import { timer } from 'rxjs';
import { first, switchMap } from 'rxjs/operators';
import { of } from 'rxjs';
import { InsightsItem } from '@seniorsistemas/angular-components/insights';

insights: InsightsItem[] = [
    {
        title: 'Turnover mensal',
        request$: timer(1000).pipe(first(), switchMap(() =>
            of('O índice de turnover foi de 4,2%, acima da média do setor (2,8%).')
        )),
        onLikeSelected: () => console.log('Gostei'),
        onCopy: (content) => navigator.clipboard.writeText(content),
    },
];
```

```html
<s-insights
    #insightsRef
    [insights]="insights"
    [hasPermission]="true"
    introText="Análises geradas por IA com base nos dados do sistema."
    (openInsights)="onAbrir()"
    (closedInsights)="onFechar()"
></s-insights>

<s-button label="Abrir Insights" priority="primary" (clicked)="insightsRef.open()"></s-button>
```

### Sem permissão

```html
<s-insights
    #insightsRef
    [insights]="insights"
    [hasPermission]="false"
    noPermissionText="Você não tem permissão para visualizar os insights."
></s-insights>
<s-button label="Abrir" (clicked)="insightsRef.open()"></s-button>
```

### Com template customizado de introdução

```html
<s-insights #insightsRef [insights]="insights" [hasPermission]="true">
    <ng-template sTemplate="intro">
        <div style="padding: 12px; background: #eff6ff; border-radius: 6px;">
            <p style="font-weight: 600; color: #1d4ed8;">Análises com IA</p>
            <p>Insights gerados automaticamente com base nos dados do último trimestre.</p>
        </div>
    </ng-template>
</s-insights>
<s-button label="Abrir" (clicked)="insightsRef.open()"></s-button>
```

### Templates customizáveis

Use `sTemplate` para customizar seções do painel:

| Valor | Descrição |
|-------|-----------|
| `sTemplate="intro"` | Conteúdo de introdução no topo do painel |
| `sTemplate="empty"` | Exibido quando não há insights disponíveis |
| `sTemplate="no-permission"` | Exibido quando `hasPermission` é `false` |

## Acessibilidade

- O painel é aberto/fechado via métodos `open()` e `close()` na referência do componente (`#ref`)
- Enquanto o `Observable` não emite, exibe um estado de carregamento animado
- As ações de like, dislike, cópia e recarregamento estão acessíveis por clique

## Componentes relacionados

- [`LoadingState`](../loading-state/README.md) — indicador de carregamento utilizado internamente
- [`SlideInBar`](../slide-in-bar/README.md) — painel lateral genérico para outros casos de uso