@joel_jsp/vortex-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Joel Schecheleski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the Software), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,49 @@
-# Temporary Holding Version
+# @joel_jsp/vortex-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**VortexUI** — suite de componentes Angular 22+ (Standalone, Signals, zoneless-ready), com DataGrid de alta performance, AI opt-in e temas Fluent / LDS.
+
+Repositório: [JoelSchecheleski/vortex-ui](https://github.com/JoelSchecheleski/vortex-ui)
+
+## Install
+
+```bash
+npm install @joel_jsp/vortex-ui
+```
+
+## Uso
+
+```ts
+import { VxButtonComponent, VxDataGridComponent, VortexThemeService } from '@joel_jsp/vortex-ui';
+import { VortexMockAIIntegration, VortexAIConfig } from '@joel_jsp/vortex-ui/ai';
+```
+
+```css
+@import '@joel_jsp/vortex-ui/styles/vortex-ui.css';
+```
+
+```ts
+inject(VortexThemeService).setTheme('fluent-blue-light');
+// fluent-blue-dark | fluent-saas-light | fluent-saas-dark | lds
+```
+
+## Temas
+
+| ID | Descrição |
+|----|-----------|
+| `fluent-blue-light` | Default (alias `fluent`) |
+| `fluent-blue-dark` | Fluent Blue Dark |
+| `fluent-saas-light` | Fluent SaaS Light |
+| `fluent-saas-dark` | Fluent SaaS Dark |
+| `lds` | LDS (Poppins) |
+
+## Dev (monorepo)
+
+```bash
+npm start                 # Widgets Gallery :4200
+npm run build             # build da lib
+npm run storybook         # Storybook
+```
+
+## License
+
+MIT

package/ai/README.md

@@ -0,0 +1,18 @@
+# vortex-ui/ai
+
+Secondary entry point for VortexUI AI Foundation.
+
+## Usage
+
+```ts
+import {
+  VortexAIIntegration,
+  VortexMockAIIntegration,
+  VxAiAssistantDialogComponent,
+  VxAiPromptEditorComponent,
+} from 'vortex-ui/ai';
+// monorepo alias:
+// import { ... } from '@vortex-ui/ai';
+```
+
+Keep this entry opt-in: apps that never enable AI should import only from `vortex-ui`.

package/ai/ai-assistant-dialog.component.d.ts

@@ -0,0 +1,25 @@
+import { VortexAIMessage, VortexAISuggestion } from './ai.types';
+import * as i0 from "@angular/core";
+export interface VxAIChatMessage extends VortexAIMessage {
+    title?: string;
+}
+export declare class VxAIAssistantDialogComponent {
+    readonly open: import("@angular/core").ModelSignal<boolean>;
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    readonly messages: import("@angular/core").InputSignal<VxAIChatMessage[]>;
+    readonly suggestions: import("@angular/core").InputSignal<VortexAISuggestion[]>;
+    readonly busy: import("@angular/core").InputSignal<boolean>;
+    readonly sendMessage: import("@angular/core").OutputEmitterRef<string>;
+    readonly suggestionSelect: import("@angular/core").OutputEmitterRef<VortexAISuggestion>;
+    readonly clear: import("@angular/core").OutputEmitterRef<void>;
+    readonly closed: import("@angular/core").OutputEmitterRef<void>;
+    draft: string;
+    close(): void;
+    onOverlayClick(_: MouseEvent): void;
+    onEnter(event: Event): void;
+    send(): void;
+    onSuggestion(s: VortexAISuggestion): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VxAIAssistantDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VxAIAssistantDialogComponent, "vx-ai-assistant-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "sendMessage": "sendMessage"; "suggestionSelect": "suggestionSelect"; "clear": "clear"; "closed": "closed"; }, never, never, true, never>;
+}

package/ai/ai-prompt-editor.component.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+export declare class VxAIPromptEditorComponent {
+    readonly open: import("@angular/core").ModelSignal<boolean>;
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    readonly prompt: import("@angular/core").ModelSignal<string>;
+    readonly canApply: import("@angular/core").InputSignal<boolean>;
+    readonly regenerate: import("@angular/core").OutputEmitterRef<string>;
+    readonly apply: import("@angular/core").OutputEmitterRef<string>;
+    readonly closed: import("@angular/core").OutputEmitterRef<void>;
+    close(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VxAIPromptEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VxAIPromptEditorComponent, "vx-ai-prompt-editor", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "prompt": { "alias": "prompt"; "required": false; "isSignal": true; }; "canApply": { "alias": "canApply"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "prompt": "promptChange"; "regenerate": "regenerate"; "apply": "apply"; "closed": "closed"; }, never, never, true, never>;
+}

package/ai/ai.types.d.ts

@@ -0,0 +1,109 @@
+/** Config opt-in por componente (deny by default). */
+export interface VortexAIConfig {
+    enabled?: boolean;
+    assistant?: {
+        enabled?: boolean;
+        title?: string;
+    };
+    /** Campos permitidos no contexto enviado ao modelo (R2). */
+    contextFields?: string[];
+    /** Cap de linhas no contexto (R3). Default: 100. */
+    maxRowsInContext?: number;
+}
+export interface VortexAIMessage {
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+}
+export interface VortexAIContext {
+    schemaVersion: 1;
+    componentType: string;
+    columns?: Array<{
+        field: string;
+        header: string;
+    }>;
+    sort?: {
+        field: string;
+        direction: 'asc' | 'desc';
+    } | null;
+    filter?: VortexAIFilterState | null;
+    /** Linhas já projetadas (só campos allowlist). */
+    rows?: Record<string, unknown>[];
+    totalRows?: number;
+    meta?: Record<string, unknown>;
+}
+export interface VortexAIFilterState {
+    field: string;
+    value: string;
+    operator?: 'contains' | 'equals';
+}
+export interface VortexAIToolDefinition {
+    name: string;
+    description: string;
+    parameters?: Record<string, unknown>;
+}
+export interface VortexAIRequest {
+    feature: 'assistant' | 'ai-column' | 'smart-paste' | 'semantic-search' | 'editor' | string;
+    componentType: string;
+    componentId?: string;
+    messages?: VortexAIMessage[];
+    prompt?: string;
+    context: VortexAIContext;
+    tools?: VortexAIToolDefinition[];
+    signal?: AbortSignal;
+}
+export interface VortexAICommand {
+    type: string;
+    payload?: Record<string, unknown>;
+}
+export interface VortexAIResponse {
+    title?: string;
+    text: string;
+    commands?: VortexAICommand[];
+    /** Resultados estruturados (ex.: AI Column cells). */
+    data?: {
+        cells?: Array<{
+            rowKey: string;
+            value: string;
+        }>;
+    };
+}
+export type VortexAIStreamEvent = {
+    type: 'token';
+    text: string;
+} | {
+    type: 'command';
+    command: VortexAICommand;
+} | {
+    type: 'done';
+    response: VortexAIResponse;
+};
+export interface VortexAISuggestion {
+    id: string;
+    label: string;
+    /** Prompt enviado ao adapter se não houver command direto. */
+    prompt?: string;
+    command?: VortexAICommand;
+}
+export interface VortexAIRequestCreatingEvent {
+    request: VortexAIRequest;
+    cancel: boolean;
+}
+export interface VortexAIPrivacyPolicy {
+    contextFields?: string[];
+    maxRowsInContext?: number;
+}
+export interface VortexAICommandSpec {
+    type: string;
+    description: string;
+}
+export interface VortexAICapability {
+    componentType: string;
+    commands: VortexAICommandSpec[];
+    projectContext(state: unknown, policy: VortexAIPrivacyPolicy): VortexAIContext;
+    execute(command: VortexAICommand): void | Promise<void>;
+    suggest?(state: unknown): VortexAISuggestion[];
+}
+export interface VortexAIIntegration {
+    sendRequest(req: VortexAIRequest): Promise<VortexAIResponse>;
+    stream?(req: VortexAIRequest): AsyncIterable<VortexAIStreamEvent>;
+}

package/ai/ai.utils.d.ts

@@ -0,0 +1,3 @@
+import { VortexAIContext, VortexAIPrivacyPolicy } from './ai.types';
+export declare function projectRowsForAI(rows: Record<string, unknown>[], policy: VortexAIPrivacyPolicy): Record<string, unknown>[];
+export declare function emptyAIContext(componentType: string): VortexAIContext;

package/ai/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Secondary entry: `vortex-ui/ai` (alias monorepo `@vortex-ui/ai`).
+ */
+export * from './ai.types';
+export * from './ai.utils';
+export * from './mock-ai-integration';
+export * from './ai-assistant-dialog.component';
+export * from './ai-prompt-editor.component';

package/ai/mock-ai-integration.d.ts

@@ -0,0 +1,8 @@
+import { VortexAIIntegration, VortexAIRequest, VortexAIResponse } from './ai.types';
+/**
+ * Adapter local sem LLM — interpreta intents simples (PT/EN)
+ * e devolve commands tipados da allowlist do DataGrid.
+ */
+export declare class VortexMockAIIntegration implements VortexAIIntegration {
+    sendRequest(req: VortexAIRequest): Promise<VortexAIResponse>;
+}

package/ai/vortex-ui-ai.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="vortex-ui/ai" />
+export * from './index';

package/esm2022/ai/ai-assistant-dialog.component.js

@@ -0,0 +1,226 @@
+import { Component, ChangeDetectionStrategy, input, model, output, } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class VxAIAssistantDialogComponent {
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    title = input('AI Assistant', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    placeholder = input('Digite uma mensagem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    messages = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    suggestions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    busy = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    sendMessage = output();
+    suggestionSelect = output();
+    clear = output();
+    closed = output();
+    draft = '';
+    close() {
+        this.open.set(false);
+        this.closed.emit();
+    }
+    onOverlayClick(_) {
+        this.close();
+    }
+    onEnter(event) {
+        const ke = event;
+        if (ke.shiftKey)
+            return;
+        ke.preventDefault();
+        this.send();
+    }
+    send() {
+        const text = this.draft.trim();
+        if (!text || this.busy())
+            return;
+        this.sendMessage.emit(text);
+        this.draft = '';
+    }
+    onSuggestion(s) {
+        this.suggestionSelect.emit(s);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.6", ngImport: i0, type: VxAIAssistantDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.6", type: VxAIAssistantDialogComponent, isStandalone: true, selector: "vx-ai-assistant-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", sendMessage: "sendMessage", suggestionSelect: "suggestionSelect", clear: "clear", closed: "closed" }, ngImport: i0, template: `
+    @if (open()) {
+      <div class="vx-ai-overlay" (click)="onOverlayClick($event)" role="presentation">
+        <div
+          class="vx-ai-dialog"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="title()"
+          (click)="$event.stopPropagation()"
+        >
+          <header class="vx-ai-dialog__header">
+            <h2 class="vx-ai-dialog__title">{{ title() }}</h2>
+            <div class="vx-ai-dialog__actions">
+              <button
+                type="button"
+                class="vx-ai-icon-btn"
+                aria-label="Limpar conversa"
+                title="Limpar conversa"
+                (click)="clear.emit()"
+              >
+                ⌫
+              </button>
+              <button
+                type="button"
+                class="vx-ai-icon-btn"
+                aria-label="Fechar"
+                (click)="close()"
+              >
+                ✕
+              </button>
+            </div>
+          </header>
+
+          <div class="vx-ai-dialog__body">
+            @if (messages().length === 0) {
+              <div class="vx-ai-empty">
+                <div class="vx-ai-empty__icon" aria-hidden="true">✦</div>
+                <p class="vx-ai-empty__text">
+                  Chat vazio. O assistente está pronto para responder.
+                </p>
+                @if (suggestions().length) {
+                  <div class="vx-ai-chips">
+                    @for (s of suggestions(); track s.id) {
+                      <button type="button" class="vx-ai-chip" (click)="onSuggestion(s)">
+                        {{ s.label }}
+                      </button>
+                    }
+                  </div>
+                }
+              </div>
+            } @else {
+              <div class="vx-ai-messages">
+                @for (m of messages(); track $index) {
+                  <div class="vx-ai-msg" [class.vx-ai-msg--user]="m.role === 'user'">
+                    @if (m.title) {
+                      <div class="vx-ai-msg__title">{{ m.title }}</div>
+                    }
+                    <div class="vx-ai-msg__text">{{ m.content }}</div>
+                  </div>
+                }
+              </div>
+            }
+          </div>
+
+          <footer class="vx-ai-dialog__footer">
+            <textarea
+              class="vx-ai-input"
+              rows="2"
+              [placeholder]="placeholder()"
+              [(ngModel)]="draft"
+              (keydown.enter)="onEnter($event)"
+              [disabled]="busy()"
+            ></textarea>
+            <button
+              type="button"
+              class="vx-ai-send"
+              [disabled]="busy() || !draft.trim()"
+              aria-label="Enviar"
+              (click)="send()"
+            >
+              ➤
+            </button>
+          </footer>
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".vx-ai-overlay{position:fixed;inset:0;z-index:var(--vx-z-modal);display:flex;justify-content:flex-end;align-items:stretch;padding:var(--vx-space-4);background:#00000040}.vx-ai-dialog{width:min(380px,100%);max-height:calc(100vh - 2rem);display:flex;flex-direction:column;background:var(--vx-color-surface);color:var(--vx-color-text);border:1px solid var(--vx-color-border);border-radius:var(--vx-radius-lg);box-shadow:var(--vx-shadow-xl);font-family:var(--vx-font-sans);overflow:hidden}.vx-ai-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--vx-space-2);padding:var(--vx-space-3) var(--vx-space-4);border-bottom:1px solid var(--vx-color-border);flex-shrink:0}.vx-ai-dialog__title{margin:0;font-size:var(--vx-font-size-md);font-weight:var(--vx-font-weight-semibold)}.vx-ai-dialog__actions{display:flex;gap:var(--vx-space-1)}.vx-ai-icon-btn{border:none;background:transparent;color:var(--vx-color-text-secondary);width:2rem;height:2rem;border-radius:var(--vx-radius-md);cursor:pointer;font-size:1rem}.vx-ai-icon-btn:hover{background:var(--vx-color-bg-hover);color:var(--vx-color-text)}.vx-ai-dialog__body{flex:1;overflow:auto;padding:var(--vx-space-4);min-height:220px}.vx-ai-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--vx-space-3);padding:var(--vx-space-6) var(--vx-space-2)}.vx-ai-empty__icon{width:3rem;height:3rem;border-radius:999px;display:grid;place-items:center;background:var(--vx-color-primary-subtle);color:var(--vx-color-primary);font-size:1.25rem}.vx-ai-empty__text{margin:0;color:var(--vx-color-text-secondary);font-size:var(--vx-font-size-sm);max-width:16rem}.vx-ai-chips{display:flex;flex-wrap:wrap;gap:var(--vx-space-2);justify-content:center}.vx-ai-chip{border:1px solid var(--vx-color-border);background:var(--vx-color-bg-elevated);color:var(--vx-color-text);border-radius:var(--vx-radius-md);padding:.4rem .75rem;font-size:var(--vx-font-size-xs);font-family:inherit;cursor:pointer}.vx-ai-chip:hover{border-color:var(--vx-color-primary);color:var(--vx-color-primary-ink, var(--vx-color-primary))}.vx-ai-messages{display:flex;flex-direction:column;gap:var(--vx-space-3)}.vx-ai-msg{align-self:flex-start;max-width:95%;padding:var(--vx-space-3);border-radius:var(--vx-radius-md);background:var(--vx-color-bg-muted);font-size:var(--vx-font-size-sm)}.vx-ai-msg--user{align-self:flex-end;background:var(--vx-color-primary-subtle);color:var(--vx-color-primary-ink, var(--vx-color-text))}.vx-ai-msg__title{font-weight:var(--vx-font-weight-semibold);margin-bottom:var(--vx-space-1)}.vx-ai-dialog__footer{display:flex;gap:var(--vx-space-2);padding:var(--vx-space-3);border-top:1px solid var(--vx-color-border);flex-shrink:0}.vx-ai-input{flex:1;resize:none;border:1px solid var(--vx-color-border-strong);border-radius:var(--vx-radius-md);padding:var(--vx-space-2) var(--vx-space-3);font-family:inherit;font-size:var(--vx-font-size-sm);background:var(--vx-color-bg-elevated);color:var(--vx-color-text)}.vx-ai-input:focus{outline:none;box-shadow:var(--vx-focus-ring);border-color:var(--vx-color-border-focus)}.vx-ai-send{width:2.5rem;border:none;border-radius:var(--vx-radius-md);background:var(--vx-color-primary);color:var(--vx-color-primary-text);cursor:pointer;font-size:1rem}.vx-ai-send:disabled{opacity:.45;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.6", ngImport: i0, type: VxAIAssistantDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vx-ai-assistant-dialog', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (open()) {
+      <div class="vx-ai-overlay" (click)="onOverlayClick($event)" role="presentation">
+        <div
+          class="vx-ai-dialog"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="title()"
+          (click)="$event.stopPropagation()"
+        >
+          <header class="vx-ai-dialog__header">
+            <h2 class="vx-ai-dialog__title">{{ title() }}</h2>
+            <div class="vx-ai-dialog__actions">
+              <button
+                type="button"
+                class="vx-ai-icon-btn"
+                aria-label="Limpar conversa"
+                title="Limpar conversa"
+                (click)="clear.emit()"
+              >
+                ⌫
+              </button>
+              <button
+                type="button"
+                class="vx-ai-icon-btn"
+                aria-label="Fechar"
+                (click)="close()"
+              >
+                ✕
+              </button>
+            </div>
+          </header>
+
+          <div class="vx-ai-dialog__body">
+            @if (messages().length === 0) {
+              <div class="vx-ai-empty">
+                <div class="vx-ai-empty__icon" aria-hidden="true">✦</div>
+                <p class="vx-ai-empty__text">
+                  Chat vazio. O assistente está pronto para responder.
+                </p>
+                @if (suggestions().length) {
+                  <div class="vx-ai-chips">
+                    @for (s of suggestions(); track s.id) {
+                      <button type="button" class="vx-ai-chip" (click)="onSuggestion(s)">
+                        {{ s.label }}
+                      </button>
+                    }
+                  </div>
+                }
+              </div>
+            } @else {
+              <div class="vx-ai-messages">
+                @for (m of messages(); track $index) {
+                  <div class="vx-ai-msg" [class.vx-ai-msg--user]="m.role === 'user'">
+                    @if (m.title) {
+                      <div class="vx-ai-msg__title">{{ m.title }}</div>
+                    }
+                    <div class="vx-ai-msg__text">{{ m.content }}</div>
+                  </div>
+                }
+              </div>
+            }
+          </div>
+
+          <footer class="vx-ai-dialog__footer">
+            <textarea
+              class="vx-ai-input"
+              rows="2"
+              [placeholder]="placeholder()"
+              [(ngModel)]="draft"
+              (keydown.enter)="onEnter($event)"
+              [disabled]="busy()"
+            ></textarea>
+            <button
+              type="button"
+              class="vx-ai-send"
+              [disabled]="busy() || !draft.trim()"
+              aria-label="Enviar"
+              (click)="send()"
+            >
+              ➤
+            </button>
+          </footer>
+        </div>
+      </div>
+    }
+  `, styles: [".vx-ai-overlay{position:fixed;inset:0;z-index:var(--vx-z-modal);display:flex;justify-content:flex-end;align-items:stretch;padding:var(--vx-space-4);background:#00000040}.vx-ai-dialog{width:min(380px,100%);max-height:calc(100vh - 2rem);display:flex;flex-direction:column;background:var(--vx-color-surface);color:var(--vx-color-text);border:1px solid var(--vx-color-border);border-radius:var(--vx-radius-lg);box-shadow:var(--vx-shadow-xl);font-family:var(--vx-font-sans);overflow:hidden}.vx-ai-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--vx-space-2);padding:var(--vx-space-3) var(--vx-space-4);border-bottom:1px solid var(--vx-color-border);flex-shrink:0}.vx-ai-dialog__title{margin:0;font-size:var(--vx-font-size-md);font-weight:var(--vx-font-weight-semibold)}.vx-ai-dialog__actions{display:flex;gap:var(--vx-space-1)}.vx-ai-icon-btn{border:none;background:transparent;color:var(--vx-color-text-secondary);width:2rem;height:2rem;border-radius:var(--vx-radius-md);cursor:pointer;font-size:1rem}.vx-ai-icon-btn:hover{background:var(--vx-color-bg-hover);color:var(--vx-color-text)}.vx-ai-dialog__body{flex:1;overflow:auto;padding:var(--vx-space-4);min-height:220px}.vx-ai-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--vx-space-3);padding:var(--vx-space-6) var(--vx-space-2)}.vx-ai-empty__icon{width:3rem;height:3rem;border-radius:999px;display:grid;place-items:center;background:var(--vx-color-primary-subtle);color:var(--vx-color-primary);font-size:1.25rem}.vx-ai-empty__text{margin:0;color:var(--vx-color-text-secondary);font-size:var(--vx-font-size-sm);max-width:16rem}.vx-ai-chips{display:flex;flex-wrap:wrap;gap:var(--vx-space-2);justify-content:center}.vx-ai-chip{border:1px solid var(--vx-color-border);background:var(--vx-color-bg-elevated);color:var(--vx-color-text);border-radius:var(--vx-radius-md);padding:.4rem .75rem;font-size:var(--vx-font-size-xs);font-family:inherit;cursor:pointer}.vx-ai-chip:hover{border-color:var(--vx-color-primary);color:var(--vx-color-primary-ink, var(--vx-color-primary))}.vx-ai-messages{display:flex;flex-direction:column;gap:var(--vx-space-3)}.vx-ai-msg{align-self:flex-start;max-width:95%;padding:var(--vx-space-3);border-radius:var(--vx-radius-md);background:var(--vx-color-bg-muted);font-size:var(--vx-font-size-sm)}.vx-ai-msg--user{align-self:flex-end;background:var(--vx-color-primary-subtle);color:var(--vx-color-primary-ink, var(--vx-color-text))}.vx-ai-msg__title{font-weight:var(--vx-font-weight-semibold);margin-bottom:var(--vx-space-1)}.vx-ai-dialog__footer{display:flex;gap:var(--vx-space-2);padding:var(--vx-space-3);border-top:1px solid var(--vx-color-border);flex-shrink:0}.vx-ai-input{flex:1;resize:none;border:1px solid var(--vx-color-border-strong);border-radius:var(--vx-radius-md);padding:var(--vx-space-2) var(--vx-space-3);font-family:inherit;font-size:var(--vx-font-size-sm);background:var(--vx-color-bg-elevated);color:var(--vx-color-text)}.vx-ai-input:focus{outline:none;box-shadow:var(--vx-focus-ring);border-color:var(--vx-color-border-focus)}.vx-ai-send{width:2.5rem;border:none;border-radius:var(--vx-radius-md);background:var(--vx-color-primary);color:var(--vx-color-primary-text);cursor:pointer;font-size:1rem}.vx-ai-send:disabled{opacity:.45;cursor:not-allowed}\n"] }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], sendMessage: [{ type: i0.Output, args: ["sendMessage"] }], suggestionSelect: [{ type: i0.Output, args: ["suggestionSelect"] }], clear: [{ type: i0.Output, args: ["clear"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+//# sourceMappingURL=ai-assistant-dialog.component.js.map

package/esm2022/ai/ai-assistant-dialog.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-assistant-dialog.component.js","sourceRoot":"","sources":["../../../../../libs/vortex-ui/ai/src/ai-assistant-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,uBAAuB,EACvB,KAAK,EACL,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;;;AA+R7C,MAAM,OAAO,4BAA4B;IAC9B,IAAI,GAAG,KAAK,CAAC,KAAK;6EAAC,CAAC;IACpB,KAAK,GAAG,KAAK,CAAC,cAAc;8EAAC,CAAC;IAC9B,WAAW,GAAG,KAAK,CAAC,qBAAqB;oFAAC,CAAC;IAC3C,QAAQ,GAAG,KAAK,CAAoB,EAAE;iFAAC,CAAC;IACxC,WAAW,GAAG,KAAK,CAAuB,EAAE;oFAAC,CAAC;IAC9C,IAAI,GAAG,KAAK,CAAC,KAAK;6EAAC,CAAC;IAEpB,WAAW,GAAG,MAAM,EAAU,CAAC;IAC/B,gBAAgB,GAAG,MAAM,EAAsB,CAAC;IAChD,KAAK,GAAG,MAAM,EAAQ,CAAC;IACvB,MAAM,GAAG,MAAM,EAAQ,CAAC;IAEjC,KAAK,GAAG,EAAE,CAAC;IAEX,KAAK;QACH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED,cAAc,CAAC,CAAa;QAC1B,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,OAAO,CAAC,KAAY;QAClB,MAAM,EAAE,GAAG,KAAsB,CAAC;QAClC,IAAI,EAAE,CAAC,QAAQ;YAAE,OAAO;QACxB,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,IAAI;QACF,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAC/B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;YAAE,OAAO;QACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IAED,YAAY,CAAC,CAAqB;QAChC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;uGAxCU,4BAA4B;2FAA5B,4BAA4B,09BAnR7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFT,g0GAxFS,WAAW;;2FAqRV,4BAA4B;kBAxRxC,SAAS;+BACE,wBAAwB,cACtB,IAAI,WACP,CAAC,WAAW,CAAC,mBACL,uBAAuB,CAAC,MAAM,YACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFT","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { VortexAIMessage, VortexAISuggestion } from './ai.types';\n\nexport interface VxAIChatMessage extends VortexAIMessage {\n  title?: string;\n}\n\n@Component({\n  selector: 'vx-ai-assistant-dialog',\n  standalone: true,\n  imports: [FormsModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    @if (open()) {\n      <div class=\"vx-ai-overlay\" (click)=\"onOverlayClick($event)\" role=\"presentation\">\n        <div\n          class=\"vx-ai-dialog\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          [attr.aria-label]=\"title()\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <header class=\"vx-ai-dialog__header\">\n            <h2 class=\"vx-ai-dialog__title\">{{ title() }}</h2>\n            <div class=\"vx-ai-dialog__actions\">\n              <button\n                type=\"button\"\n                class=\"vx-ai-icon-btn\"\n                aria-label=\"Limpar conversa\"\n                title=\"Limpar conversa\"\n                (click)=\"clear.emit()\"\n              >\n                ⌫\n              </button>\n              <button\n                type=\"button\"\n                class=\"vx-ai-icon-btn\"\n                aria-label=\"Fechar\"\n                (click)=\"close()\"\n              >\n                ✕\n              </button>\n            </div>\n          </header>\n\n          <div class=\"vx-ai-dialog__body\">\n            @if (messages().length === 0) {\n              <div class=\"vx-ai-empty\">\n                <div class=\"vx-ai-empty__icon\" aria-hidden=\"true\">✦</div>\n                <p class=\"vx-ai-empty__text\">\n                  Chat vazio. O assistente está pronto para responder.\n                </p>\n                @if (suggestions().length) {\n                  <div class=\"vx-ai-chips\">\n                    @for (s of suggestions(); track s.id) {\n                      <button type=\"button\" class=\"vx-ai-chip\" (click)=\"onSuggestion(s)\">\n                        {{ s.label }}\n                      </button>\n                    }\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"vx-ai-messages\">\n                @for (m of messages(); track $index) {\n                  <div class=\"vx-ai-msg\" [class.vx-ai-msg--user]=\"m.role === 'user'\">\n                    @if (m.title) {\n                      <div class=\"vx-ai-msg__title\">{{ m.title }}</div>\n                    }\n                    <div class=\"vx-ai-msg__text\">{{ m.content }}</div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n\n          <footer class=\"vx-ai-dialog__footer\">\n            <textarea\n              class=\"vx-ai-input\"\n              rows=\"2\"\n              [placeholder]=\"placeholder()\"\n              [(ngModel)]=\"draft\"\n              (keydown.enter)=\"onEnter($event)\"\n              [disabled]=\"busy()\"\n            ></textarea>\n            <button\n              type=\"button\"\n              class=\"vx-ai-send\"\n              [disabled]=\"busy() || !draft.trim()\"\n              aria-label=\"Enviar\"\n              (click)=\"send()\"\n            >\n              ➤\n            </button>\n          </footer>\n        </div>\n      </div>\n    }\n  `,\n  styles: `\n    .vx-ai-overlay {\n      position: fixed;\n      inset: 0;\n      z-index: var(--vx-z-modal);\n      display: flex;\n      justify-content: flex-end;\n      align-items: stretch;\n      padding: var(--vx-space-4);\n      background: rgb(0 0 0 / 0.25);\n    }\n\n    .vx-ai-dialog {\n      width: min(380px, 100%);\n      max-height: calc(100vh - 2rem);\n      display: flex;\n      flex-direction: column;\n      background: var(--vx-color-surface);\n      color: var(--vx-color-text);\n      border: 1px solid var(--vx-color-border);\n      border-radius: var(--vx-radius-lg);\n      box-shadow: var(--vx-shadow-xl);\n      font-family: var(--vx-font-sans);\n      overflow: hidden;\n    }\n\n    .vx-ai-dialog__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--vx-space-2);\n      padding: var(--vx-space-3) var(--vx-space-4);\n      border-bottom: 1px solid var(--vx-color-border);\n      flex-shrink: 0;\n    }\n\n    .vx-ai-dialog__title {\n      margin: 0;\n      font-size: var(--vx-font-size-md);\n      font-weight: var(--vx-font-weight-semibold);\n    }\n\n    .vx-ai-dialog__actions {\n      display: flex;\n      gap: var(--vx-space-1);\n    }\n\n    .vx-ai-icon-btn {\n      border: none;\n      background: transparent;\n      color: var(--vx-color-text-secondary);\n      width: 2rem;\n      height: 2rem;\n      border-radius: var(--vx-radius-md);\n      cursor: pointer;\n      font-size: 1rem;\n    }\n\n    .vx-ai-icon-btn:hover {\n      background: var(--vx-color-bg-hover);\n      color: var(--vx-color-text);\n    }\n\n    .vx-ai-dialog__body {\n      flex: 1;\n      overflow: auto;\n      padding: var(--vx-space-4);\n      min-height: 220px;\n    }\n\n    .vx-ai-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      text-align: center;\n      gap: var(--vx-space-3);\n      padding: var(--vx-space-6) var(--vx-space-2);\n    }\n\n    .vx-ai-empty__icon {\n      width: 3rem;\n      height: 3rem;\n      border-radius: 999px;\n      display: grid;\n      place-items: center;\n      background: var(--vx-color-primary-subtle);\n      color: var(--vx-color-primary);\n      font-size: 1.25rem;\n    }\n\n    .vx-ai-empty__text {\n      margin: 0;\n      color: var(--vx-color-text-secondary);\n      font-size: var(--vx-font-size-sm);\n      max-width: 16rem;\n    }\n\n    .vx-ai-chips {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--vx-space-2);\n      justify-content: center;\n    }\n\n    .vx-ai-chip {\n      border: 1px solid var(--vx-color-border);\n      background: var(--vx-color-bg-elevated);\n      color: var(--vx-color-text);\n      border-radius: var(--vx-radius-md);\n      padding: 0.4rem 0.75rem;\n      font-size: var(--vx-font-size-xs);\n      font-family: inherit;\n      cursor: pointer;\n    }\n\n    .vx-ai-chip:hover {\n      border-color: var(--vx-color-primary);\n      color: var(--vx-color-primary-ink, var(--vx-color-primary));\n    }\n\n    .vx-ai-messages {\n      display: flex;\n      flex-direction: column;\n      gap: var(--vx-space-3);\n    }\n\n    .vx-ai-msg {\n      align-self: flex-start;\n      max-width: 95%;\n      padding: var(--vx-space-3);\n      border-radius: var(--vx-radius-md);\n      background: var(--vx-color-bg-muted);\n      font-size: var(--vx-font-size-sm);\n    }\n\n    .vx-ai-msg--user {\n      align-self: flex-end;\n      background: var(--vx-color-primary-subtle);\n      color: var(--vx-color-primary-ink, var(--vx-color-text));\n    }\n\n    .vx-ai-msg__title {\n      font-weight: var(--vx-font-weight-semibold);\n      margin-bottom: var(--vx-space-1);\n    }\n\n    .vx-ai-dialog__footer {\n      display: flex;\n      gap: var(--vx-space-2);\n      padding: var(--vx-space-3);\n      border-top: 1px solid var(--vx-color-border);\n      flex-shrink: 0;\n    }\n\n    .vx-ai-input {\n      flex: 1;\n      resize: none;\n      border: 1px solid var(--vx-color-border-strong);\n      border-radius: var(--vx-radius-md);\n      padding: var(--vx-space-2) var(--vx-space-3);\n      font-family: inherit;\n      font-size: var(--vx-font-size-sm);\n      background: var(--vx-color-bg-elevated);\n      color: var(--vx-color-text);\n    }\n\n    .vx-ai-input:focus {\n      outline: none;\n      box-shadow: var(--vx-focus-ring);\n      border-color: var(--vx-color-border-focus);\n    }\n\n    .vx-ai-send {\n      width: 2.5rem;\n      border: none;\n      border-radius: var(--vx-radius-md);\n      background: var(--vx-color-primary);\n      color: var(--vx-color-primary-text);\n      cursor: pointer;\n      font-size: 1rem;\n    }\n\n    .vx-ai-send:disabled {\n      opacity: 0.45;\n      cursor: not-allowed;\n    }\n  `,\n})\nexport class VxAIAssistantDialogComponent {\n  readonly open = model(false);\n  readonly title = input('AI Assistant');\n  readonly placeholder = input('Digite uma mensagem');\n  readonly messages = input<VxAIChatMessage[]>([]);\n  readonly suggestions = input<VortexAISuggestion[]>([]);\n  readonly busy = input(false);\n\n  readonly sendMessage = output<string>();\n  readonly suggestionSelect = output<VortexAISuggestion>();\n  readonly clear = output<void>();\n  readonly closed = output<void>();\n\n  draft = '';\n\n  close(): void {\n    this.open.set(false);\n    this.closed.emit();\n  }\n\n  onOverlayClick(_: MouseEvent): void {\n    this.close();\n  }\n\n  onEnter(event: Event): void {\n    const ke = event as KeyboardEvent;\n    if (ke.shiftKey) return;\n    ke.preventDefault();\n    this.send();\n  }\n\n  send(): void {\n    const text = this.draft.trim();\n    if (!text || this.busy()) return;\n    this.sendMessage.emit(text);\n    this.draft = '';\n  }\n\n  onSuggestion(s: VortexAISuggestion): void {\n    this.suggestionSelect.emit(s);\n  }\n}\n"]}