@luzmo/analytics-components-kit 1.0.1-alpha.140 → 1.0.1-alpha.142

package/README.md

@@ -63,11 +63,12 @@ npm install @luzmo/analytics-components-kit
 
 ### Panel Components (Recommended)
 
-| Component                   | Import                                                        | Description                                                         |
-| --------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------- |
-| Draggable Data Fields Panel | `@luzmo/analytics-components-kit/draggable-data-fields-panel` | Panel displaying draggable data fields from datasets                |
-| Item Data Drop Panel        | `@luzmo/analytics-components-kit/item-data-drop-panel`        | Drop panel for chart slot configuration                             |
-| Item Data Picker Panel      | `@luzmo/analytics-components-kit/item-data-picker-panel`      | Dropdown-based panel for chart slot configuration (mobile-friendly) |
+| Component                   | Import                                                        | Description                                                           |
+| --------------------------- | ------------------------------------------------------------- | --------------------------------------------------------------------- |
+| Draggable Data Fields Panel | `@luzmo/analytics-components-kit/draggable-data-fields-panel` | Panel displaying draggable data fields from datasets                  |
+| Item Data Drop Panel        | `@luzmo/analytics-components-kit/item-data-drop-panel`        | Drop panel for chart slot configuration                               |
+| Item Data Picker Panel      | `@luzmo/analytics-components-kit/item-data-picker-panel`      | Dropdown-based panel for chart slot configuration (mobile-friendly)   |
+| AI Chat                     | `@luzmo/analytics-components-kit/ai-chat`                     | AI chart prompting UI with internal or external request orchestration |
 
 > **Note**: Use `Draggable Data Fields Panel` together with `Item Data Drop Panel` for a complete drag & drop experience. Use `Item Data Picker Panel` as a mobile-friendly alternative; swap between them with media queries.
 >
@@ -151,6 +152,17 @@ import type {
 import type { SlotConfig } from '@luzmo/dashboard-contents-types';
 ```
 
+Import AI chat types from the ai-chat component:
+
+```typescript
+import type {
+  AiMessageRequestBody,
+  LuzmoPromptSubmittedEventDetail,
+  BuildAiMessageRequestOptions
+} from '@luzmo/analytics-components-kit/ai-chat';
+import { buildAiMessageRequest } from '@luzmo/analytics-components-kit/ai-chat';
+```
+
 Runtime values are exported from the main package (or via `@luzmo/analytics-components-kit/utils`):
 
 ```typescript

package/angular/components/ai-interaction-textarea.component.ts

@@ -18,6 +18,7 @@ import type { Dataset } from '../types';
         [attr.hide-dataset-button]="hideDatasetButton"
         [attr.is-generating]="isGenerating"
         [attr.value]="value"
+        [attr.retain-on-submit]="retainOnSubmit"
         (prompt-submitted)="promptSubmitted.emit($event)">
   <ng-content></ng-content>
 </luzmo-ai-interaction-textarea>`
@@ -35,5 +36,6 @@ export class AiInteractionTextareaComponent {
   @Input() hideDatasetButton?: boolean;
   @Input() isGenerating?: boolean;
   @Input() value?: string;
+  @Input() retainOnSubmit?: boolean;
   @Output() promptSubmitted = new EventEmitter<CustomEvent>();
 }

package/angular/components/grid.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
-import type { Placement, InputActionGroup, GridItemData, GridItemRenderer } from '../types';
+import type { Placement, InputActionGroup, ThemeConfig, GridItemData, GridItemRenderer } from '../types';
 
 @Component({
   selector: 'luzmo-grid',
@@ -40,7 +40,7 @@ export class GridComponent {
   @Input() viewMode?: boolean;
   @Input() placementItemActionsMenu?: Placement;
   @Input() defaultItemActionsMenu?: InputActionGroup[];
-  @Input() theme?: any;
+  @Input() theme?: ThemeConfig;
   @Input() items?: GridItemData[];
   @Input() renderers?: Record<string, GridItemRenderer>;
   @Output() luzmoGridItemAction = new EventEmitter<CustomEvent>();

package/angular/esm/components/ai-interaction-textarea.component.d.ts

@@ -14,7 +14,8 @@ export declare class AiInteractionTextareaComponent {
     hideDatasetButton?: boolean;
     isGenerating?: boolean;
     value?: string;
+    retainOnSubmit?: boolean;
     promptSubmitted: EventEmitter<CustomEvent<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AiInteractionTextareaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AiInteractionTextareaComponent, "luzmo-ai-interaction-textarea", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "selectedDatasets": { "alias": "selectedDatasets"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "flagOpendata": { "alias": "flagOpendata"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "singleLine": { "alias": "singleLine"; "required": false; }; "hideDatasetButton": { "alias": "hideDatasetButton"; "required": false; }; "isGenerating": { "alias": "isGenerating"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "promptSubmitted": "promptSubmitted"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AiInteractionTextareaComponent, "luzmo-ai-interaction-textarea", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "selectedDatasets": { "alias": "selectedDatasets"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "flagOpendata": { "alias": "flagOpendata"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "singleLine": { "alias": "singleLine"; "required": false; }; "hideDatasetButton": { "alias": "hideDatasetButton"; "required": false; }; "isGenerating": { "alias": "isGenerating"; "required": false; }; "value": { "alias": "value"; "required": false; }; "retainOnSubmit": { "alias": "retainOnSubmit"; "required": false; }; }, { "promptSubmitted": "promptSubmitted"; }, never, ["*"], true, never>;
 }

package/angular/esm/components/ai-interaction-textarea.component.js

@@ -13,9 +13,10 @@ export class AiInteractionTextareaComponent {
     hideDatasetButton;
     isGenerating;
     value;
+    retainOnSubmit;
     promptSubmitted = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AiInteractionTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: AiInteractionTextareaComponent, isStandalone: true, selector: "luzmo-ai-interaction-textarea", inputs: { placeholder: "placeholder", selectedDatasets: "selectedDatasets", authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", flagOpendata: "flagOpendata", disabled: "disabled", singleLine: "singleLine", hideDatasetButton: "hideDatasetButton", isGenerating: "isGenerating", value: "value" }, outputs: { promptSubmitted: "promptSubmitted" }, ngImport: i0, template: `<luzmo-ai-interaction-textarea
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: AiInteractionTextareaComponent, isStandalone: true, selector: "luzmo-ai-interaction-textarea", inputs: { placeholder: "placeholder", selectedDatasets: "selectedDatasets", authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", flagOpendata: "flagOpendata", disabled: "disabled", singleLine: "singleLine", hideDatasetButton: "hideDatasetButton", isGenerating: "isGenerating", value: "value", retainOnSubmit: "retainOnSubmit" }, outputs: { promptSubmitted: "promptSubmitted" }, ngImport: i0, template: `<luzmo-ai-interaction-textarea
         [attr.placeholder]="placeholder"
         [attr.selectedDatasets]="selectedDatasets"
         [attr.auth-key]="authKey"
@@ -28,9 +29,10 @@ export class AiInteractionTextareaComponent {
         [attr.hide-dataset-button]="hideDatasetButton"
         [attr.is-generating]="isGenerating"
         [attr.value]="value"
+        [attr.retain-on-submit]="retainOnSubmit"
         (prompt-submitted)="promptSubmitted.emit($event)">
   <ng-content></ng-content>
-</luzmo-ai-interaction-textarea>`, isInline: true, dependencies: [{ kind: "component", type: AiInteractionTextareaComponent, selector: "luzmo-ai-interaction-textarea", inputs: ["placeholder", "selectedDatasets", "authKey", "authToken", "apiUrl", "appServer", "flagOpendata", "disabled", "singleLine", "hideDatasetButton", "isGenerating", "value"], outputs: ["promptSubmitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+</luzmo-ai-interaction-textarea>`, isInline: true, dependencies: [{ kind: "component", type: AiInteractionTextareaComponent, selector: "luzmo-ai-interaction-textarea", inputs: ["placeholder", "selectedDatasets", "authKey", "authToken", "apiUrl", "appServer", "flagOpendata", "disabled", "singleLine", "hideDatasetButton", "isGenerating", "value", "retainOnSubmit"], outputs: ["promptSubmitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AiInteractionTextareaComponent, decorators: [{
             type: Component,
@@ -51,6 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
         [attr.hide-dataset-button]="hideDatasetButton"
         [attr.is-generating]="isGenerating"
         [attr.value]="value"
+        [attr.retain-on-submit]="retainOnSubmit"
         (prompt-submitted)="promptSubmitted.emit($event)">
   <ng-content></ng-content>
 </luzmo-ai-interaction-textarea>`
@@ -79,6 +82,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Input
             }], value: [{
                 type: Input
+            }], retainOnSubmit: [{
+                type: Input
             }], promptSubmitted: [{
                 type: Output
             }] } });

package/angular/esm/components/grid.component.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '@angular/core';
-import type { Placement, InputActionGroup, GridItemData, GridItemRenderer } from '../types';
+import type { Placement, InputActionGroup, ThemeConfig, GridItemData, GridItemRenderer } from '../types';
 import * as i0 from "@angular/core";
 export declare class GridComponent {
     appServer?: string;
@@ -14,7 +14,7 @@ export declare class GridComponent {
     viewMode?: boolean;
     placementItemActionsMenu?: Placement;
     defaultItemActionsMenu?: InputActionGroup[];
-    theme?: any;
+    theme?: ThemeConfig;
     items?: GridItemData[];
     renderers?: Record<string, GridItemRenderer>;
     luzmoGridItemAction: EventEmitter<CustomEvent<any>>;

package/angular/esm/types/ai-chat.types.d.ts

@@ -40,4 +40,5 @@ export interface AISampleChart {
     feedback: unknown;
     conversationId?: string;
     message?: string;
+    clarificationQuestion?: string;
 }

package/angular/types/ai-chat.types.ts

@@ -40,4 +40,5 @@ export interface AISampleChart {
   feedback: unknown;
   conversationId?: string;
   message?: string;
+  clarificationQuestion?: string;
 }

package/components/ai-chat/ai-chat.d.ts

@@ -7,6 +7,7 @@ import '../ai-interaction-textarea';
  * @name luzmo-ai-chat
  * @summary A complete AI chat interface combining messages display and input
  * @fires luzmo-message-sent - Fired when a user sends a message
+ * @fires luzmo-prompt-submitted - Fired when request-mode is set to external so the host can execute the API request lifecycle.
  * @fires luzmo-response-received - Fired when an AI text response is received. For chart responses, this event is only fired if the response includes a `message` field. For error responses, this event is always fired with the error explanation.
  * @fires luzmo-chart-generated - Fired when the AI generates a chart (includes generatedChart in response)
  */
@@ -64,6 +65,16 @@ export declare class LuzmoAiChat extends LuzmoElement {
      * @default 'performance'
      */
     modelPreference: 'performance' | 'quality';
+    /**
+     * Controls if API calls are handled internally or by the host application.
+     * @default 'internal'
+     */
+    requestMode: 'internal' | 'external';
+    /**
+     * Used only in external request mode to reflect request lifecycle in the UI.
+     * @default false
+     */
+    isGenerating: boolean;
     /**
      * Conversation ID
      * @default null
@@ -74,9 +85,15 @@ export declare class LuzmoAiChat extends LuzmoElement {
      * @default null
      */
     chart: LuzmoChart | null;
-    private _isGenerating;
+    /**
+     * API version
+     * @default '0.1.0'
+     */
+    apiVersion: string;
+    private _isGeneratingInternal;
     private _textareaValue;
     private _generateMessageId;
+    private _buildRequestBody;
     private _sendMessage;
     private _addUserMessage;
     private _prepareForAIResponse;
@@ -85,6 +102,9 @@ export declare class LuzmoAiChat extends LuzmoElement {
     private _processAIResponse;
     private _handleAPIError;
     private _finalizeAIResponse;
+    private _handleDatasetSelected;
+    private _handleDatasetRemoved;
+    private _emitDatasetsChanged;
     private _handlePromptSubmitted;
     private _scrollToBottom;
     /**

package/components/ai-chat/index.cjs

@@ -17,4 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../base-C_azywlB.cjs`),require(`../focus-visible-3ACCHno4.cjs`),require(`../set-locale-CKjJZRH6.cjs`),require(`../localized-mixin-DTvVLuXW.cjs`);const e=require(`../ai-chat-CbqvVZDp.cjs`);require(`../dataset-icon-BbNgugDA.cjs`),require(`../data-broker-BUIUM5hr.cjs`),require(`../dataset-selector-list-BdeJlo0u.cjs`),require(`../dataset-selector-row-CAlRVIk_.cjs`),require(`../ai-interaction-textarea-DDVKMfTQ.cjs`),exports.LuzmoAiChat=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../base-C_azywlB.cjs`),require(`../focus-visible-3ACCHno4.cjs`),require(`../set-locale-CKjJZRH6.cjs`),require(`../localized-mixin-DTvVLuXW.cjs`);const e=require(`../ai-chat-rok8ar11.cjs`);require(`../dataset-icon-BbNgugDA.cjs`),require(`../data-broker-BUIUM5hr.cjs`),require(`../dataset-selector-list-BdeJlo0u.cjs`),require(`../dataset-selector-row-CAlRVIk_.cjs`),require(`../ai-interaction-textarea-BGnQbDpJ.cjs`),exports.LuzmoAiChat=e.t,exports.buildAiMessageRequest=e.n;

package/components/ai-chat/index.d.ts

@@ -5,3 +5,4 @@ declare global {
     }
 }
 export { LuzmoAiChat } from './ai-chat';
+export * from './request-contract';

package/components/ai-chat/index.js

@@ -27,10 +27,10 @@ import "../base-rg2x95aL.js";
 import "../focus-visible-D1pJhWEh.js";
 import "../set-locale-Uv6F4uSq.js";
 import "../localized-mixin-cLT0UbaF.js";
-import { t as LuzmoAiChat } from "../ai-chat-Dg2dvhDq.js";
+import { n as buildAiMessageRequest, t as LuzmoAiChat } from "../ai-chat-DlUYd_Cf.js";
 import "../dataset-icon-x6Q8nhYc.js";
 import "../data-broker-cLR-t5LM.js";
 import "../dataset-selector-list-DO_ExOrO.js";
 import "../dataset-selector-row-VsvdrVDf.js";
-import "../ai-interaction-textarea-ZDQPVgXC.js";
-export { LuzmoAiChat };
+import "../ai-interaction-textarea-EdWcPK0w.js";
+export { LuzmoAiChat, buildAiMessageRequest };

package/components/ai-chat/request-contract.d.ts

@@ -0,0 +1,38 @@
+import type { Dataset, LuzmoChart } from '../../types';
+export interface AiMessageRequestBody {
+    key: string;
+    token: string;
+    action: 'create';
+    version: string;
+    properties: {
+        content: {
+            role: 'user';
+            content: string;
+        };
+        conversation_id?: string;
+    };
+    options: {
+        available_datasets: string[];
+        dataset_id?: string;
+        chart?: Record<string, unknown>;
+        model_preference: 'performance' | 'quality';
+    };
+}
+export interface BuildAiMessageRequestOptions {
+    prompt: string;
+    datasetIds: string[];
+    authKey: string;
+    authToken: string;
+    conversationId: string | null;
+    chart: LuzmoChart | null;
+    modelPreference: 'performance' | 'quality';
+    apiVersion?: string;
+}
+export interface LuzmoPromptSubmittedEventDetail {
+    prompt: string;
+    selectedDatasets: Dataset[];
+    datasetIds: string[];
+    request: AiMessageRequestBody;
+    url: string;
+}
+export declare function buildAiMessageRequest(options: BuildAiMessageRequestOptions): AiMessageRequestBody;