@luzmo/analytics-components-kit 1.0.4-beta.2 → 1.0.4-beta.4

package/custom-elements.json

@@ -408,7 +408,7 @@
               "static": true,
               "readonly": true,
               "default": "'assistant-message-actions'",
-              "description": "Light-DOM slot name for optional actions below the latest assistant message."
+              "description": "Light-DOM slot for optional custom actions below the latest assistant message."
             },
             {
               "kind": "field",
@@ -417,7 +417,7 @@
                 "text": "ChatMessage[]"
               },
               "default": "[]",
-              "description": "Live transcript is AiChatSession.state.messages. This prop optionally seeds the session on first connect.",
+              "description": "Live transcript is AiChatSessionState.messages. This prop optionally seeds the session on first connect.",
               "attribute": "messages"
             },
             {
@@ -1217,7 +1217,7 @@
               "type": {
                 "text": "CustomEvent<void>"
               },
-              "description": "Fired when an in-flight prompt is stopped"
+              "description": "Fired when an in-flight prompt is stopped Custom actions beyond built-in `ChatMessage.actions` buttons can be projected via the `assistant-message-actions` light-DOM slot on the latest assistant message."
             },
             {
               "name": "luzmo-conversation-id-changed",
@@ -1225,6 +1225,13 @@
                 "text": "CustomEvent<AiChatConversationIdChangedEventDetail>"
               },
               "description": "Fired when the conversation ID is updated from the API"
+            },
+            {
+              "name": "luzmo-assistant-message-action",
+              "type": {
+                "text": "CustomEvent<AssistantMessageActionEventDetail>"
+              },
+              "description": "Fired when a built-in assistant message action is activated (after confirmation when `confirm` is set)"
             }
           ],
           "attributes": [
@@ -1234,7 +1241,7 @@
                 "text": "ChatMessage[]"
               },
               "default": "[]",
-              "description": "Live transcript is AiChatSession.state.messages. This prop optionally seeds the session on first connect.",
+              "description": "Live transcript is AiChatSessionState.messages. This prop optionally seeds the session on first connect.",
               "fieldName": "messages"
             },
             {
@@ -10911,6 +10918,493 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/interactive-viz-item/interactive-viz-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LuzmoInteractiveVizItem",
+          "cssParts": [
+            {
+              "description": "The viz item container.",
+              "name": "container"
+            },
+            {
+              "description": "The embedded chart wrapper.",
+              "name": "chart-container"
+            },
+            {
+              "description": "The expandable configuration panel.",
+              "name": "config-panel"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Host-injected actions rendered at the end of the inline actions bar (e.g. copy-to-dashboard).",
+              "name": "chart-actions-extra"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>"
+              },
+              "description": "Fired when the inline actions (ranking, sort, display mode) change the chart options.",
+              "name": "luzmo-chart-options-changed"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<InteractiveVizItemChartChangedEventDetail>"
+              },
+              "description": "Fired when the config panel changes slots, filters, or options (full chart).",
+              "name": "luzmo-chart-changed"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>"
+              },
+              "description": "Fired when the user changes the thumbs up/down rating.",
+              "name": "luzmo-feedback-changed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "chart",
+              "type": {
+                "text": "FlexChartConfig | null"
+              },
+              "default": "null",
+              "description": "Loose chart config (type, options, slots, filters); slots may use the keyed-object form.",
+              "fieldName": "chart"
+            },
+            {
+              "name": "feedback",
+              "type": {
+                "text": "ChartFeedback | null"
+              },
+              "default": "null",
+              "description": "Current feedback (drives the thumbs up/down selection).",
+              "fieldName": "feedback"
+            },
+            {
+              "name": "message-id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Message id from the backend. Feedback is only shown when set.",
+              "fieldName": "messageId"
+            },
+            {
+              "name": "auth-key",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Auth key for the embedded chart and config panels.",
+              "fieldName": "authKey"
+            },
+            {
+              "name": "auth-token",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Auth token for the embedded chart and config panels.",
+              "fieldName": "authToken"
+            },
+            {
+              "name": "api-url",
+              "type": {
+                "text": "string"
+              },
+              "default": "'https://api.luzmo.com'",
+              "description": "API URL for the embedded chart and config panels.",
+              "fieldName": "apiUrl"
+            },
+            {
+              "name": "app-server",
+              "type": {
+                "text": "string"
+              },
+              "default": "'https://app.luzmo.com'",
+              "description": "App server URL for the embedded chart (assets, thumbnails).",
+              "fieldName": "appServer"
+            },
+            {
+              "name": "content-language",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Content language for chart data and dataset metadata. Defaults to the UI `language`.",
+              "fieldName": "contentLanguage"
+            },
+            {
+              "name": "hide-actions",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When present, hides the inline chart actions (ranking, display mode).",
+              "fieldName": "hideActions"
+            },
+            {
+              "name": "hide-feedback",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When present, hides the feedback bar.",
+              "fieldName": "hideFeedback"
+            },
+            {
+              "name": "hide-config-panel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When present, hides the config-panel toggle and the panel itself.",
+              "fieldName": "hideConfigPanel"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'s' | 'm' | 'l' | 'xl'"
+              },
+              "default": "m",
+              "description": "The size of the element",
+              "fieldName": "size"
+            },
+            {
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "description": "The language for UI labels.\nSupported values: 'en', 'nl', 'fr', 'de', 'es'",
+              "fieldName": "language",
+              "inheritedFrom": {
+                "name": "LocalizedMixin",
+                "module": "src/utils/base/localized-mixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "LocalizedMixin",
+              "module": "/src/utils/base"
+            }
+          ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
+          "tagName": "luzmo-interactive-viz-item",
+          "customElement": true,
+          "members": [
+            {
+              "kind": "field",
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "description": "The language for UI labels.\nSupported values: 'en', 'nl', 'fr', 'de', 'es'",
+              "attribute": "language",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LocalizedMixin",
+                "module": "src/utils/base/localized-mixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncLocale",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "LocalizedMixin",
+                "module": "src/utils/base/localized-mixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shadowRoot",
+              "type": {
+                "text": "ShadowRoot"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "LuzmoMixin",
+                "module": "src/utils/base/base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_dirParent",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "LuzmoMixin",
+                "module": "src/utils/base/base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl'"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "LuzmoMixin",
+                "module": "src/utils/base/base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isLTR",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "LuzmoMixin",
+                "module": "src/utils/base/base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hasVisibleFocusInTree",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "LuzmoMixin",
+                "module": "src/utils/base/base.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LuzmoInteractiveVizItem",
+          "declaration": {
+            "name": "LuzmoInteractiveVizItem",
+            "module": "src/components/interactive-viz-item/interactive-viz-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/interactive-viz-item/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DEFAULT_RANKING_NUMBER",
+          "type": {
+            "text": "number"
+          },
+          "default": "5"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DEFAULT_RANKING_NUMBER",
+          "declaration": {
+            "name": "DEFAULT_RANKING_NUMBER",
+            "module": "src/components/interactive-viz-item/types.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/interactive-viz-item/helpers/chart-helpers.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "convertSlotsToArray",
+          "return": {
+            "type": {
+              "text": "SlotConfig[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "slots",
+              "type": {
+                "text": "SlotConfig[] | Record<string, unknown>"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "getChartDatasetIds",
+          "return": {
+            "type": {
+              "text": "string[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "slots",
+              "type": {
+                "text": "SlotConfig[]"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "normalizeChartConfig",
+          "return": {
+            "type": {
+              "text": "NormalizedChartConfig"
+            }
+          },
+          "parameters": [
+            {
+              "name": "chart",
+              "type": {
+                "text": "FlexChartConfig"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "mergeThemeIntoChart",
+          "return": {
+            "type": {
+              "text": "NormalizedChartConfig"
+            }
+          },
+          "parameters": [
+            {
+              "name": "chart",
+              "type": {
+                "text": "NormalizedChartConfig"
+              }
+            },
+            {
+              "name": "theme",
+              "type": {
+                "text": "Record<string, unknown>"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "calculateChartActions",
+          "return": {
+            "type": {
+              "text": "ChartActionDescriptor[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "chart",
+              "type": {
+                "text": "NormalizedChartConfig"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "applyChartMutation",
+          "return": {
+            "type": {
+              "text": "NormalizedChartConfig"
+            }
+          },
+          "parameters": [
+            {
+              "name": "chart",
+              "type": {
+                "text": "NormalizedChartConfig"
+              }
+            },
+            {
+              "name": "mutation",
+              "type": {
+                "text": "ChartMutationRequest"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "convertSlotsToArray",
+          "declaration": {
+            "name": "convertSlotsToArray",
+            "module": "src/components/interactive-viz-item/helpers/chart-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getChartDatasetIds",
+          "declaration": {
+            "name": "getChartDatasetIds",
+            "module": "src/components/interactive-viz-item/helpers/chart-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "normalizeChartConfig",
+          "declaration": {
+            "name": "normalizeChartConfig",
+            "module": "src/components/interactive-viz-item/helpers/chart-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "mergeThemeIntoChart",
+          "declaration": {
+            "name": "mergeThemeIntoChart",
+            "module": "src/components/interactive-viz-item/helpers/chart-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "calculateChartActions",
+          "declaration": {
+            "name": "calculateChartActions",
+            "module": "src/components/interactive-viz-item/helpers/chart-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "applyChartMutation",
+          "declaration": {
+            "name": "applyChartMutation",
+            "module": "src/components/interactive-viz-item/helpers/chart-helpers.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/item-grid/actions.ts",

package/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components/ai-chat';
+export * from './components/interactive-viz-item';
 export * from './components/ai-interaction-textarea';
 export * from './components/dataset-icon';
 export * from './components/dataset-selector-list';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/analytics-components-kit",
-  "version": "1.0.4-beta.2",
+  "version": "1.0.4-beta.4",
   "type": "module",
   "main": "./components/index.js",
   "module": "./components/index.js",
@@ -141,6 +141,11 @@
       "import": "./components/formula-field/index.js",
       "require": "./components/formula-field/index.cjs"
     },
+    "./interactive-viz-item": {
+      "types": "./components/interactive-viz-item/index.d.ts",
+      "import": "./components/interactive-viz-item/index.js",
+      "require": "./components/interactive-viz-item/index.cjs"
+    },
     "./item-grid": {
       "types": "./components/item-grid/index.d.ts",
       "import": "./components/item-grid/index.js",
@@ -323,6 +328,7 @@
     "@lit/localize": "^0.12.2",
     "@lit/react": "^1.0.6",
     "@lit/task": "^1.0.1",
+    "@luzmo/embed": "^6.13.0",
     "@luzmo/icons": "^1.0.1-alpha.41",
     "@luzmo/lucero": "^1.0.3-alpha.5",
     "colorjs.io": "^0.5.2",
@@ -347,7 +353,6 @@
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.43.1",
     "@luzmo/dashboard-contents-types": "1.0.31",
-    "@luzmo/embed": "^6.13.0",
     "@tanstack/query-core": "^5.90.5",
     "dompurify": "^3.3.0",
     "gridstack": "^12.3.3",

package/react/README.md

@@ -55,6 +55,7 @@ function App() {
 - `LuzmoFormula` → `<luzmo-formula>`
 - `LuzmoFormulaEditor` → `<luzmo-formula-editor>`
 - `LuzmoFormulaField` → `<luzmo-formula-field>`
+- `LuzmoInteractiveVizItem` → `<luzmo-interactive-viz-item>`
 - `LuzmoItemGrid` → `<luzmo-item-grid>`
 - `LuzmoItemOption` → `<luzmo-item-option>`
 - `LuzmoItemOptionActionButtonGroup` → `<luzmo-item-option-action-button-group>`

package/react/components/ai-chat.component.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoAiChat as LuzmoAiChatClass, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatMessageSentEventDetail, AiChatStepEvent } from '@luzmo/analytics-components-kit/ai-chat';
+import { LuzmoAiChat as LuzmoAiChatClass, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatMessageSentEventDetail, AiChatStepEvent, AssistantMessageActionEventDetail } from '@luzmo/analytics-components-kit/ai-chat';
 
 const LuzmoAiChatComponent = createComponent({
   tagName: 'luzmo-ai-chat',
@@ -12,7 +12,8 @@ const LuzmoAiChatComponent = createComponent({
     onLuzmoStep: 'luzmo-step' as EventName<CustomEvent<AiChatStepEvent>>,
     onLuzmoComplete: 'luzmo-complete' as EventName<CustomEvent<AiChatCompleteEvent>>,
     onLuzmoStop: 'luzmo-stop' as EventName<CustomEvent<void>>,
-    onLuzmoConversationIdChanged: 'luzmo-conversation-id-changed' as EventName<CustomEvent<AiChatConversationIdChangedEventDetail>>
+    onLuzmoConversationIdChanged: 'luzmo-conversation-id-changed' as EventName<CustomEvent<AiChatConversationIdChangedEventDetail>>,
+    onLuzmoAssistantMessageAction: 'luzmo-assistant-message-action' as EventName<CustomEvent<AssistantMessageActionEventDetail>>
   }
 });
 
@@ -23,8 +24,9 @@ const LuzmoAiChatComponent = createComponent({
  * @event onLuzmoDatasetsChanged - Fired when the selected datasets change
  * @event onLuzmoStep - Fired for every incremental, kit-assembled event during a streamed response (decision, text, progress, dashboard-title/layout/item, chart, interrupt, plus forward-by-default unrecognized chunks). Use `isRecognizedStep` to narrow.
  * @event onLuzmoComplete - Fired exactly once per response with the authoritative final result (dashboard/chart/name) or an `error`.
- * @event onLuzmoStop - Fired when an in-flight prompt is stopped
+ * @event onLuzmoStop - Fired when an in-flight prompt is stopped Custom actions beyond built-in `ChatMessage.actions` buttons can be projected via the `assistant-message-actions` light-DOM slot on the latest assistant message.
  * @event onLuzmoConversationIdChanged - Fired when the conversation ID is updated from the API
+ * @event onLuzmoAssistantMessageAction - Fired when a built-in assistant message action is activated (after confirmation when `confirm` is set)
  */
 export const LuzmoAiChat = LuzmoAiChatComponent as ReactWebComponent<
   LuzmoAiChatClass,
@@ -35,6 +37,7 @@ export const LuzmoAiChat = LuzmoAiChatComponent as ReactWebComponent<
     onLuzmoComplete: EventName<CustomEvent<AiChatCompleteEvent>>;
     onLuzmoStop: EventName<CustomEvent<void>>;
     onLuzmoConversationIdChanged: EventName<CustomEvent<AiChatConversationIdChangedEventDetail>>;
+    onLuzmoAssistantMessageAction: EventName<CustomEvent<AssistantMessageActionEventDetail>>;
   }
 >;
 

package/react/components/interactive-viz-item/index.ts

@@ -0,0 +1 @@
+export * from './types';