@c8y/ngx-components 1023.0.2 → 1023.4.1

package/fesm2022/c8y-ngx-components-widgets-definitions-html-widget-ai-config.mjs

@@ -0,0 +1,574 @@
+import { hookWidgetConfig } from '@c8y/ngx-components/context-dashboard';
+import * as i0 from '@angular/core';
+import { inject, Injectable } from '@angular/core';
+import { PreviewService } from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
+import { AIService } from '@c8y/ngx-components/ai';
+import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
+import { combineLatest, from, first, map } from 'rxjs';
+
+// This file contains the definitions for the various AI agents used in the application.
+const EXTRACT_TAG_NAME = 'c8y-code-extract';
+const WIDGET_CODE_INSTRUCTIONS = `You are responsible for creating a Web component that is rendered on the Dashboard of the Cumulocity IoT Platform. It is written as a lit-element. The following is a very basic example:   
+
+<${EXTRACT_TAG_NAME}>
+import { LitElement, html, css} from 'lit';
+import { styleImports } from 'styles';
+
+export default class DefaultWebComponent extends LitElement {
+  static styles = css\`
+    
+:host > div {
+  padding-left: var(--c8y-root-component-padding);
+  padding-right: var(--c8y-root-component-padding);
+}
+span.branded { 
+  color: var(--c8y-brand-primary); 
+}
+  \`;
+
+  static properties = {
+    // The managed object this widget is assigned to. Can be null.
+    c8yContext: { type: Object },
+  };
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    return html\`
+      <style>
+        \${styleImports}
+      </style>
+      <div>
+  <h1>Hello from HTML widget</h1>
+  <p>
+  You can use HTML and Javascript template literals here:
+  \${this.c8yContext ? this.c8yContext.name : 'No device selected'}
+  </p>
+
+  <a class="btn btn-primary" href="#/group">Go to groups</a>
+
+  <p>
+    Use the CSS editor to add CSS. You can use <span class="branded">any design-token CSS variable</span> in there.
+  </p>
+</div>
+    \`;
+  }
+}
+</${EXTRACT_TAG_NAME}>
+
+You are allowed to use the following ESM imports and libs:
+
+javascript
+import { L } from 'leaflet';
+import * as echarts from 'echarts'
+import { fetch } from 'fetch'
+
+
+Remember to not use any leflet plugin. You are only allowed to use pure leaftlet. Always use the imported fetch function to make API calls authenticated to the Cumulocity instance.
+
+Do not include any emoji characters or Unicode symbols in the output - replace any decorative icons with plain text descriptions.
+
+Among the UI elements that you are allowed to build on your own using HTML and CSS, here are components that you are encouraged to use in your answer:
+
+## Buttons
+You can apply button classes to any <a>, <input>, or <button> element to style them as buttons. When using a button inside a <form> without a defined type, it defaults to type="submit". To prevent accidental form submissions, always explicitly define the button's type as type="button".
+
+Available button variants:
+- .btn-default (standard button)
+- .btn-primary (primary action)
+- .btn-success (positive action)
+- .btn-warning (caution action)
+- .btn-danger (destructive action)
+- .btn-link (text-only button)
+
+Button sizes:
+- .btn-lg (large)
+- .btn-sm (small)
+- .btn-xs (extra small)
+
+\`\`\`html
+<button class="btn btn-primary" type="button">Primary Button</button>
+<button class="btn btn-default" type="button">Default Button</button>
+<button class="btn btn-success" type="button">Success Button</button>
+<button class="btn btn-warning" type="button">Warning Button</button>
+<button class="btn btn-danger" type="button">Danger Button</button>
+<a class="btn btn-link" href="javascript:void(0);">Link Button</a>
+\`\`\`
+
+### Pending/Loading Buttons
+Add .btn-pending to display an active process. The pointer-events are set to none, making the button unclickable.
+
+\`\`\`html
+<button type="button" aria-busy="true" class="btn btn-primary btn-pending">
+  Processing...
+</button>
+\`\`\`
+
+### Button Groups
+Group a series of buttons together with .btn-group. Can be used for toolbars or action groups.
+
+\`\`\`html
+<div class="btn-group" role="group">
+  <button type="button" class="btn btn-default">Left</button>
+  <button type="button" class="btn btn-default">Middle</button>
+  <button type="button" class="btn btn-default">Right</button>
+</div>
+\`\`\`
+
+## Alerts
+Wrap your message in a <div> with .alert class and a modifier class. Always add appropriate ARIA roles:
+
+- Use role="status" for informational messages
+- Use role="alert" for errors or messages   
+requiring immediate attention
+
+\`\`\`html
+<div class="alert alert-success" role="status">
+  <strong>Success!</strong> Operation completed successfully.
+</div>
+<div class="alert alert-warning" role="alert">
+  <strong>Warning!</strong> Please review your settings.
+</div>
+<div class="alert alert-danger" role="alert">
+  <strong>Error!</strong> Failed to save data.
+</div>
+<div class="alert alert-info" role="status">
+  <strong>Info:</strong> New updates available.
+</div>
+<div class="alert alert-system" role="alert">
+  <strong>System:</strong> Maintenance scheduled.
+</div>
+\`\`\`
+
+### Dismissible Alerts
+For dismissible alerts, add a close button with proper accessibility:
+
+\`\`\`html
+<div class="alert alert-danger alert-dismissible" role="alert">
+  <button class="close" type="button" @click="\${() => this.dismissAlert()}" aria-label="Close alert">
+    <span aria-hidden="true">&times;</span>
+  </button>
+  <strong>Error:</strong> Invalid credentials provided.
+</div>
+\`\`\`
+
+## Badges
+Badges indicate states with specific color schemes. Add .badge with a modifier class:
+
+\`\`\`html
+<span class="badge badge-default">3</span>
+<span class="badge badge-success">Active</span>
+<span class="badge badge-warning">Pending</span>
+<span class="badge badge-danger">Critical</span>
+<span class="badge badge-system">System</span>
+<span class="badge badge-info">72</span>
+\`\`\`
+### Icon Badges
+Combine badges with icons using .c8y-icon-badge wrapper:
+
+\`\`\`html
+<span class="c8y-icon-badge" title="14 Critical alarms">
+  <i class="dlt-c8y-icon-exclamation-circle status critical"></i>
+  <span class="badge badge-danger" aria-live="assertive">14</span>
+</span>
+\`\`\`
+
+## Loading Spinner
+Shows content is being loaded or processed:
+
+\`\`\`html
+<div class="spinner">
+  <div class="rect1"></div>
+  <div class="rect2"></div>
+  <div class="rect3"></div>
+  <div class="rect4"></div>
+  <div class="rect5"></div>
+</div>
+\`\`\`
+
+## Tag
+Tags highlight small pieces of information inline. They are commonly used to display categories, filters, or selected options in a visually appealing and compact manner.
+
+Add the .tag class to any <span> or <div> together with any of the modifier classes mentioned below to change the appearance of an inline label. Add the .font-size-inherit class to inherit the font size.
+
+\`\`\`html
+<h1>heading 1
+<span class="tag tag--default">Default</span>
+</h1>
+<br>
+<h2>heading 2
+<span class="tag tag--primary">Primary</span>
+</h2>
+<br>
+<h3>heading 3
+<span class="tag tag--danger">Danger</span>
+</h3>
+<br>
+<h4>heading 4
+<span class="tag tag--success font-size-inherit">Success</span>
+</h4>
+<br>
+<h5>heading 5
+<span class="tag tag--warning">Warning</span>
+</h5>
+<br>
+<h6>heading 6
+<span class="tag tag--info">Info</span>
+</h6>
+\`\`\`
+
+## Table
+Tables help you see and process great amounts of data in a tabular form. Designed for simplicity and clarity, they are an efficient way to organize and present information.
+
+
+### Default table
+
+For basic styling—light padding and only horizontal dividers—add the base class .table to any table tag. It may seem redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we have opted to isolate our custom table styles.
+
+\`\`\`html
+<div class="container-fluid">
+  <table class="table" role="table" aria-label="Basic data table">
+    <caption>Optional table caption.</caption>
+    <colgroup>
+      <col width="20px">
+      <col width="33%">
+      <col width="33%">
+      <col width="33%">
+    </colgroup>
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First Name</th>
+        <th scope="col">Last Name</th>
+        <th scope="col">Username</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mark</td>
+        <td>Field</td>
+        <td>mod22755</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Jacob</td>
+        <td>Diom</td>
+        <td>2weet22</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>Larry</td>
+        <td>the Clam</td>
+        <td>art36552</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+\`\`\`
+
+### Striped rows
+Use .table-striped to add zebra-striping to any table row within the tbody tag.
+
+\`\`\`html
+<div class="container-fluid">
+  <table class="table table-striped" role="table" aria-label="Striped data table">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First Name</th>
+        <th scope="col">Last Name</th>
+        <th scope="col">Username</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mark</td>
+        <td>Field</td>
+        <td>mod22755</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Jacob</td>
+        <td>Diom</td>
+        <td>2weet22</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>Larry</td>
+        <td>the Clam</td>
+        <td>art36552</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+\`\`\`
+
+### Bordered tables
+Add .table-bordered for borders on all sides of the table and cells.
+
+\`\`\`html
+<div class="container-fluid">
+  <table class="table table-bordered" role="table" aria-label="Bordered data table">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First Name</th>
+        <th scope="col">Last Name</th>
+        <th scope="col">Username</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mark</td>
+        <td>Field</td>
+        <td>mod22755</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Jacob</td>
+        <td>Diom</td>
+        <td>2weet22</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>Larry</td>
+        <td>the Clam</td>
+        <td>art36552</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+\`\`\`
+
+
+### Hover rows
+Add .table-hover to enable a hover state on table rows within a tbody tag.
+
+\`\`\`html
+<div class="container-fluid">
+  <table class="table table-hover" role="table" aria-label="Hoverable data table">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First Name</th>
+        <th scope="col">Last Name</th>
+        <th scope="col">Username</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mark</td>
+        <td>Field</td>
+        <td>mod22755</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Jacob</td>
+        <td>Diom</td>
+        <td>2weet22</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>Larry</td>
+        <td>the Clam</td>
+        <td>art36552</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+\`\`\`
+
+
+### Condensed tables
+When in need of showing tables in a more compact way, add .table-condensed to reduce font size and cut cell padding in half.
+
+\`\`\`html
+<div class="container-fluid">
+  <table class="table table-condensed" role="table" aria-label="Condensed data table">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First Name</th>
+        <th scope="col">Last Name</th>
+        <th scope="col">Username</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mark</td>
+        <td>Field</td>
+        <td>mod22755</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Jacob</td>
+        <td>Diom</td>
+        <td>2weet22</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td colspan="2">Larry the Clam</td>
+        <td>art36552</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+\`\`\`
+
+## Alarms
+Alarms indicate device or system issues with varying levels of severity. Each alarm has both a severity level and a status to track its lifecycle.
+
+### Alarm Severities
+
+Alarms are classified into four severity levels, each with its own icon and use case:
+
+- **CRITICAL**: Device is out of service and requires immediate attention
+- **MAJOR**: Device has a significant problem that should be fixed
+- **MINOR**: Device has a problem that may need attention
+- **WARNING**: Informational warning that should be noted
+
+\`\`\`html
+<!-- Critical Alarm -->
+<i class="status stroked-icon c8y-icon dlt-c8y-icon-exclamation-circle critical"></i>
+<span>Critical: System failure detected</span>
+
+<!-- Major Alarm -->
+<i class="status stroked-icon c8y-icon dlt-c8y-icon-warning major"></i>
+<span>Major: Service degradation</span>
+
+<!-- Minor Alarm -->
+<i class="status stroked-icon c8y-icon dlt-c8y-icon-high-priority minor"></i>
+<span>Minor: Performance threshold exceeded</span>
+
+<!-- Warning Alarm -->
+<i class="status stroked-icon c8y-icon dlt-c8y-icon-circle warning"></i>
+<span>Warning: Maintenance required soon</span>
+
+### Alarm Statuses
+Alarms progress through three possible statuses during their lifecycle:
+
+- Active: Alarm has been raised and no one is currently addressing it
+- Acknowledged: Someone has acknowledged the alarm and is working on resolution
+- Cleared: The issue has been resolved (either manually cleared or auto-resolved by the device)
+
+\`\`\`html
+<!-- Active Status -->
+<i class="c8y-icon dlt-c8y-icon-bell"></i>
+<span>Active alarm</span>
+
+<!-- Acknowledged Status -->
+<i class="c8y-icon dlt-c8y-icon-bell-slash"></i>
+<span>Acknowledged by technician</span>
+
+<!-- Cleared Status -->
+<i class="c8y-icon c8y-icon-alert-idle"></i>
+<span>Alarm cleared</span>
+\`\`\`\``;
+const HTML_WIDGET_AGENT = {
+    snapshot: __MODE__ !== 'production',
+    label: gettext('HTML Widget Code assistant'),
+    definitions: [
+        {
+            name: 'c8y-html-widget',
+            agent: {
+                system: `1. **Analyze the user request**
+   - Extract specific data requirements
+   - Identify visualization needs
+   - Note any context dependencies
+
+2. **API Verification**
+   - Use the "cumulocity-api-request" tool to verify needed APIs
+   - Document the exact API endpoints, parameters, and expected responses
+
+3. **Coding**
+   - Put out one code block with only the code, wrap it in a <${EXTRACT_TAG_NAME}> block
+   - IMPORTANT: And no other text or markdown formatting inside the <${EXTRACT_TAG_NAME}> block
+   - build the widget code using the following rules: ${WIDGET_CODE_INSTRUCTIONS}
+
+4. **Quality Validation**
+   - Analyze if the widget fulfills the user request
+   - Check for mock data usage vs real API integration
+   - If inadequate, ask user for specific clarifications needed
+`,
+                maxTokens: 20000
+            },
+            type: 'text',
+            mcp: [
+                {
+                    serverName: 'cumulocity-default',
+                    tools: ['cumulocity-api-request']
+                }
+            ]
+        }
+    ]
+};
+
+class AIHtmlWidgetConfigFactory {
+    constructor() {
+        this.betaPreviewService = inject(PreviewService);
+        this.aiService = inject(AIService);
+        this.aiWidgetConfigDefinition = {
+            widgetId: defaultWidgetIds.HTML,
+            label: gettext('AI Code Assistant'),
+            loadComponent: () => import('@c8y/ngx-components/ai/agent-chat').then(m => m.WidgetAiChatSectionComponent),
+            initialState: {
+                agent: HTML_WIDGET_AGENT,
+                title: gettext('I’m your AI Code Assistant, here to help you build powerful widgets for your dashboard.'),
+                welcomeText: gettext('Describe the widget you want or select one of the options below to get started.'),
+                loadRenderStepComponent: () => import('@c8y/ngx-components/widgets/implementations/html-widget').then(m => m.HtmlAiChatFeedbackComponent),
+                suggestions: [
+                    {
+                        label: gettext('Measurement widget'),
+                        prompt: gettext('Create a widget that shows the current measurement of this device.')
+                    },
+                    {
+                        label: gettext('Device status widget'),
+                        prompt: gettext('Create a widget that shows the status of my devices.')
+                    },
+                    {
+                        label: gettext('Critical alarm widget'),
+                        prompt: gettext('Create a widget that shows all critical alarms.')
+                    }
+                ]
+            },
+            priority: 100
+        };
+    }
+    get() {
+        return combineLatest([
+            from(this.aiService.getAgentHealth(HTML_WIDGET_AGENT.definitions[0].name)),
+            this.betaPreviewService.getState$('ui.html-widget.v2').pipe(first())
+        ]).pipe(map(([aiExists, state]) => {
+            const shouldIncludeAi = aiExists.exists || aiExists.isProviderConfigured;
+            if (state && shouldIncludeAi) {
+                return [this.aiWidgetConfigDefinition];
+            }
+            return [];
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AIHtmlWidgetConfigFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AIHtmlWidgetConfigFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AIHtmlWidgetConfigFactory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+const htmlWidgetAIChatProviders = [hookWidgetConfig(AIHtmlWidgetConfigFactory)];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { htmlWidgetAIChatProviders };
+//# sourceMappingURL=c8y-ngx-components-widgets-definitions-html-widget-ai-config.mjs.map

package/fesm2022/c8y-ngx-components-widgets-definitions-html-widget-ai-config.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"c8y-ngx-components-widgets-definitions-html-widget-ai-config.mjs","sources":["../../widgets/definitions/html-widget-ai-config/html-widget.agent.ts","../../widgets/definitions/html-widget-ai-config/ai-html-widget-config.factory.ts","../../widgets/definitions/html-widget-ai-config/index.ts","../../widgets/definitions/html-widget-ai-config/c8y-ngx-components-widgets-definitions-html-widget-ai-config.ts"],"sourcesContent":["// This file contains the definitions for the various AI agents used in the application.\n\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport type { ClientAgentDefinition } from '@c8y/ngx-components/ai';\n\ndeclare const __MODE__: string;\n\nexport const EXTRACT_TAG_NAME = 'c8y-code-extract';\n\nconst WIDGET_CODE_INSTRUCTIONS = `You are responsible for creating a Web component that is rendered on the Dashboard of the Cumulocity IoT Platform. It is written as a lit-element. The following is a very basic example:   \n\n<${EXTRACT_TAG_NAME}>\nimport { LitElement, html, css} from 'lit';\nimport { styleImports } from 'styles';\n\nexport default class DefaultWebComponent extends LitElement {\n  static styles = css\\`\n    \n:host > div {\n  padding-left: var(--c8y-root-component-padding);\n  padding-right: var(--c8y-root-component-padding);\n}\nspan.branded { \n  color: var(--c8y-brand-primary); \n}\n  \\`;\n\n  static properties = {\n    // The managed object this widget is assigned to. Can be null.\n    c8yContext: { type: Object },\n  };\n\n  constructor() {\n    super();\n  }\n\n  render() {\n    return html\\`\n      <style>\n        \\${styleImports}\n      </style>\n      <div>\n  <h1>Hello from HTML widget</h1>\n  <p>\n  You can use HTML and Javascript template literals here:\n  \\${this.c8yContext ? this.c8yContext.name : 'No device selected'}\n  </p>\n\n  <a class=\"btn btn-primary\" href=\"#/group\">Go to groups</a>\n\n  <p>\n    Use the CSS editor to add CSS. You can use <span class=\"branded\">any design-token CSS variable</span> in there.\n  </p>\n</div>\n    \\`;\n  }\n}\n</${EXTRACT_TAG_NAME}>\n\nYou are allowed to use the following ESM imports and libs:\n\njavascript\nimport { L } from 'leaflet';\nimport * as echarts from 'echarts'\nimport { fetch } from 'fetch'\n\n\nRemember to not use any leflet plugin. You are only allowed to use pure leaftlet. Always use the imported fetch function to make API calls authenticated to the Cumulocity instance.\n\nDo not include any emoji characters or Unicode symbols in the output - replace any decorative icons with plain text descriptions.\n\nAmong the UI elements that you are allowed to build on your own using HTML and CSS, here are components that you are encouraged to use in your answer:\n\n## Buttons\nYou can apply button classes to any <a>, <input>, or <button> element to style them as buttons. When using a button inside a <form> without a defined type, it defaults to type=\"submit\". To prevent accidental form submissions, always explicitly define the button's type as type=\"button\".\n\nAvailable button variants:\n- .btn-default (standard button)\n- .btn-primary (primary action)\n- .btn-success (positive action)\n- .btn-warning (caution action)\n- .btn-danger (destructive action)\n- .btn-link (text-only button)\n\nButton sizes:\n- .btn-lg (large)\n- .btn-sm (small)\n- .btn-xs (extra small)\n\n\\`\\`\\`html\n<button class=\"btn btn-primary\" type=\"button\">Primary Button</button>\n<button class=\"btn btn-default\" type=\"button\">Default Button</button>\n<button class=\"btn btn-success\" type=\"button\">Success Button</button>\n<button class=\"btn btn-warning\" type=\"button\">Warning Button</button>\n<button class=\"btn btn-danger\" type=\"button\">Danger Button</button>\n<a class=\"btn btn-link\" href=\"javascript:void(0);\">Link Button</a>\n\\`\\`\\`\n\n### Pending/Loading Buttons\nAdd .btn-pending to display an active process. The pointer-events are set to none, making the button unclickable.\n\n\\`\\`\\`html\n<button type=\"button\" aria-busy=\"true\" class=\"btn btn-primary btn-pending\">\n  Processing...\n</button>\n\\`\\`\\`\n\n### Button Groups\nGroup a series of buttons together with .btn-group. Can be used for toolbars or action groups.\n\n\\`\\`\\`html\n<div class=\"btn-group\" role=\"group\">\n  <button type=\"button\" class=\"btn btn-default\">Left</button>\n  <button type=\"button\" class=\"btn btn-default\">Middle</button>\n  <button type=\"button\" class=\"btn btn-default\">Right</button>\n</div>\n\\`\\`\\`\n\n## Alerts\nWrap your message in a <div> with .alert class and a modifier class. Always add appropriate ARIA roles:\n\n- Use role=\"status\" for informational messages\n- Use role=\"alert\" for errors or messages   \nrequiring immediate attention\n\n\\`\\`\\`html\n<div class=\"alert alert-success\" role=\"status\">\n  <strong>Success!</strong> Operation completed successfully.\n</div>\n<div class=\"alert alert-warning\" role=\"alert\">\n  <strong>Warning!</strong> Please review your settings.\n</div>\n<div class=\"alert alert-danger\" role=\"alert\">\n  <strong>Error!</strong> Failed to save data.\n</div>\n<div class=\"alert alert-info\" role=\"status\">\n  <strong>Info:</strong> New updates available.\n</div>\n<div class=\"alert alert-system\" role=\"alert\">\n  <strong>System:</strong> Maintenance scheduled.\n</div>\n\\`\\`\\`\n\n### Dismissible Alerts\nFor dismissible alerts, add a close button with proper accessibility:\n\n\\`\\`\\`html\n<div class=\"alert alert-danger alert-dismissible\" role=\"alert\">\n  <button class=\"close\" type=\"button\" @click=\"\\${() => this.dismissAlert()}\" aria-label=\"Close alert\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n  <strong>Error:</strong> Invalid credentials provided.\n</div>\n\\`\\`\\`\n\n## Badges\nBadges indicate states with specific color schemes. Add .badge with a modifier class:\n\n\\`\\`\\`html\n<span class=\"badge badge-default\">3</span>\n<span class=\"badge badge-success\">Active</span>\n<span class=\"badge badge-warning\">Pending</span>\n<span class=\"badge badge-danger\">Critical</span>\n<span class=\"badge badge-system\">System</span>\n<span class=\"badge badge-info\">72</span>\n\\`\\`\\`\n### Icon Badges\nCombine badges with icons using .c8y-icon-badge wrapper:\n\n\\`\\`\\`html\n<span class=\"c8y-icon-badge\" title=\"14 Critical alarms\">\n  <i class=\"dlt-c8y-icon-exclamation-circle status critical\"></i>\n  <span class=\"badge badge-danger\" aria-live=\"assertive\">14</span>\n</span>\n\\`\\`\\`\n\n## Loading Spinner\nShows content is being loaded or processed:\n\n\\`\\`\\`html\n<div class=\"spinner\">\n  <div class=\"rect1\"></div>\n  <div class=\"rect2\"></div>\n  <div class=\"rect3\"></div>\n  <div class=\"rect4\"></div>\n  <div class=\"rect5\"></div>\n</div>\n\\`\\`\\`\n\n## Tag\nTags highlight small pieces of information inline. They are commonly used to display categories, filters, or selected options in a visually appealing and compact manner.\n\nAdd the .tag class to any <span> or <div> together with any of the modifier classes mentioned below to change the appearance of an inline label. Add the .font-size-inherit class to inherit the font size.\n\n\\`\\`\\`html\n<h1>heading 1\n<span class=\"tag tag--default\">Default</span>\n</h1>\n<br>\n<h2>heading 2\n<span class=\"tag tag--primary\">Primary</span>\n</h2>\n<br>\n<h3>heading 3\n<span class=\"tag tag--danger\">Danger</span>\n</h3>\n<br>\n<h4>heading 4\n<span class=\"tag tag--success font-size-inherit\">Success</span>\n</h4>\n<br>\n<h5>heading 5\n<span class=\"tag tag--warning\">Warning</span>\n</h5>\n<br>\n<h6>heading 6\n<span class=\"tag tag--info\">Info</span>\n</h6>\n\\`\\`\\`\n\n## Table\nTables help you see and process great amounts of data in a tabular form. Designed for simplicity and clarity, they are an efficient way to organize and present information.\n\n\n### Default table\n\nFor basic styling—light padding and only horizontal dividers—add the base class .table to any table tag. It may seem redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we have opted to isolate our custom table styles.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table\" role=\"table\" aria-label=\"Basic data table\">\n    <caption>Optional table caption.</caption>\n    <colgroup>\n      <col width=\"20px\">\n      <col width=\"33%\">\n      <col width=\"33%\">\n      <col width=\"33%\">\n    </colgroup>\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td>Larry</td>\n        <td>the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n### Striped rows\nUse .table-striped to add zebra-striping to any table row within the tbody tag.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table table-striped\" role=\"table\" aria-label=\"Striped data table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td>Larry</td>\n        <td>the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n### Bordered tables\nAdd .table-bordered for borders on all sides of the table and cells.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table table-bordered\" role=\"table\" aria-label=\"Bordered data table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td>Larry</td>\n        <td>the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n\n### Hover rows\nAdd .table-hover to enable a hover state on table rows within a tbody tag.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table table-hover\" role=\"table\" aria-label=\"Hoverable data table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td>Larry</td>\n        <td>the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n\n### Condensed tables\nWhen in need of showing tables in a more compact way, add .table-condensed to reduce font size and cut cell padding in half.\n\n\\`\\`\\`html\n<div class=\"container-fluid\">\n  <table class=\"table table-condensed\" role=\"table\" aria-label=\"Condensed data table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">#</th>\n        <th scope=\"col\">First Name</th>\n        <th scope=\"col\">Last Name</th>\n        <th scope=\"col\">Username</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <th scope=\"row\">1</th>\n        <td>Mark</td>\n        <td>Field</td>\n        <td>mod22755</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">2</th>\n        <td>Jacob</td>\n        <td>Diom</td>\n        <td>2weet22</td>\n      </tr>\n      <tr>\n        <th scope=\"row\">3</th>\n        <td colspan=\"2\">Larry the Clam</td>\n        <td>art36552</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\\`\\`\\`\n\n## Alarms\nAlarms indicate device or system issues with varying levels of severity. Each alarm has both a severity level and a status to track its lifecycle.\n\n### Alarm Severities\n\nAlarms are classified into four severity levels, each with its own icon and use case:\n\n- **CRITICAL**: Device is out of service and requires immediate attention\n- **MAJOR**: Device has a significant problem that should be fixed\n- **MINOR**: Device has a problem that may need attention\n- **WARNING**: Informational warning that should be noted\n\n\\`\\`\\`html\n<!-- Critical Alarm -->\n<i class=\"status stroked-icon c8y-icon dlt-c8y-icon-exclamation-circle critical\"></i>\n<span>Critical: System failure detected</span>\n\n<!-- Major Alarm -->\n<i class=\"status stroked-icon c8y-icon dlt-c8y-icon-warning major\"></i>\n<span>Major: Service degradation</span>\n\n<!-- Minor Alarm -->\n<i class=\"status stroked-icon c8y-icon dlt-c8y-icon-high-priority minor\"></i>\n<span>Minor: Performance threshold exceeded</span>\n\n<!-- Warning Alarm -->\n<i class=\"status stroked-icon c8y-icon dlt-c8y-icon-circle warning\"></i>\n<span>Warning: Maintenance required soon</span>\n\n### Alarm Statuses\nAlarms progress through three possible statuses during their lifecycle:\n\n- Active: Alarm has been raised and no one is currently addressing it\n- Acknowledged: Someone has acknowledged the alarm and is working on resolution\n- Cleared: The issue has been resolved (either manually cleared or auto-resolved by the device)\n\n\\`\\`\\`html\n<!-- Active Status -->\n<i class=\"c8y-icon dlt-c8y-icon-bell\"></i>\n<span>Active alarm</span>\n\n<!-- Acknowledged Status -->\n<i class=\"c8y-icon dlt-c8y-icon-bell-slash\"></i>\n<span>Acknowledged by technician</span>\n\n<!-- Cleared Status -->\n<i class=\"c8y-icon c8y-icon-alert-idle\"></i>\n<span>Alarm cleared</span>\n\\`\\`\\`\\``;\n\nexport const HTML_WIDGET_AGENT: ClientAgentDefinition = {\n  snapshot: __MODE__ !== 'production',\n  label: gettext('HTML Widget Code assistant'),\n  definitions: [\n    {\n      name: 'c8y-html-widget',\n      agent: {\n        system: `1. **Analyze the user request**\n   - Extract specific data requirements\n   - Identify visualization needs\n   - Note any context dependencies\n\n2. **API Verification**\n   - Use the \"cumulocity-api-request\" tool to verify needed APIs\n   - Document the exact API endpoints, parameters, and expected responses\n\n3. **Coding**\n   - Put out one code block with only the code, wrap it in a <${EXTRACT_TAG_NAME}> block\n   - IMPORTANT: And no other text or markdown formatting inside the <${EXTRACT_TAG_NAME}> block\n   - build the widget code using the following rules: ${WIDGET_CODE_INSTRUCTIONS}\n\n4. **Quality Validation**\n   - Analyze if the widget fulfills the user request\n   - Check for mock data usage vs real API integration\n   - If inadequate, ask user for specific clarifications needed\n`,\n        maxTokens: 20000\n      },\n      type: 'text',\n      mcp: [\n        {\n          serverName: 'cumulocity-default',\n          tools: ['cumulocity-api-request']\n        }\n      ]\n    }\n  ]\n};\n","import { inject, Injectable } from '@angular/core';\nimport { ExtensionFactory, PreviewService } from '@c8y/ngx-components';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { AIService } from '@c8y/ngx-components/ai';\nimport type { WidgetAiChatSectionComponent } from '@c8y/ngx-components/ai/agent-chat';\nimport type { WidgetConfigSectionDefinition } from '@c8y/ngx-components/context-dashboard';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\nimport { combineLatest, first, from, map, Observable } from 'rxjs';\nimport { HTML_WIDGET_AGENT } from './html-widget.agent';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class AIHtmlWidgetConfigFactory implements ExtensionFactory<WidgetConfigSectionDefinition> {\n  private readonly betaPreviewService = inject(PreviewService);\n  private readonly aiService = inject(AIService);\n  private readonly aiWidgetConfigDefinition: WidgetConfigSectionDefinition<WidgetAiChatSectionComponent> =\n    {\n      widgetId: defaultWidgetIds.HTML,\n      label: gettext('AI Code Assistant'),\n      loadComponent: () =>\n        import('@c8y/ngx-components/ai/agent-chat').then(m => m.WidgetAiChatSectionComponent),\n      initialState: {\n        agent: HTML_WIDGET_AGENT,\n        title: gettext(\n          'I’m your AI Code Assistant, here to help you build powerful widgets for your dashboard.'\n        ),\n        welcomeText: gettext(\n          'Describe the widget you want or select one of the options below to get started.'\n        ),\n\n        loadRenderStepComponent: () =>\n          import('@c8y/ngx-components/widgets/implementations/html-widget').then(\n            m => m.HtmlAiChatFeedbackComponent\n          ),\n\n        suggestions: [\n          {\n            label: gettext('Measurement widget'),\n            prompt: gettext('Create a widget that shows the current measurement of this device.')\n          },\n          {\n            label: gettext('Device status widget'),\n            prompt: gettext('Create a widget that shows the status of my devices.')\n          },\n          {\n            label: gettext('Critical alarm widget'),\n            prompt: gettext('Create a widget that shows all critical alarms.')\n          }\n        ]\n      },\n      priority: 100\n    };\n\n  get(): Observable<WidgetConfigSectionDefinition[]> {\n    return combineLatest([\n      from(this.aiService.getAgentHealth(HTML_WIDGET_AGENT.definitions[0].name)),\n      this.betaPreviewService.getState$('ui.html-widget.v2').pipe(first())\n    ]).pipe(\n      map(([aiExists, state]) => {\n        const shouldIncludeAi = aiExists.exists || aiExists.isProviderConfigured;\n        if (state && shouldIncludeAi) {\n          return [this.aiWidgetConfigDefinition];\n        }\n        return [];\n      })\n    );\n  }\n}\n","import { hookWidgetConfig } from '@c8y/ngx-components/context-dashboard';\nimport { AIHtmlWidgetConfigFactory } from './ai-html-widget-config.factory';\n\nexport const htmlWidgetAIChatProviders = [hookWidgetConfig(AIHtmlWidgetConfigFactory)];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/c8y-ngx-components-widgets-exports.mjs

@@ -159,10 +159,17 @@ const assetNotesWidgetExport = {
     description: 'Asset notes widget',
     scope: 'self'
 };
+const htmlWidgetAIChat = {
+    name: 'Widgets: HTML Widget AI Code Assistant',
+    module: 'htmlWidgetAIChatProviders',
+    path: '@c8y/ngx-components/widgets/definitions/html-widget-ai-config',
+    description: 'Adds AI Code Assistant capabilities to the HTML Widget',
+    scope: 'self'
+};
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { alarmListWidgetExport, applicationsWidgetExport, assetNotesWidgetExport, cockpitWelcomeWidgetExport, criticalAlarmsWidgetExport, dataPointsTableWidgetExport, datapointGraphWidgetExport, deviceControlMessageWidgetExport, deviceManagementWelcomeWidgetExport, helpAndServiceWidgetExport, htmlWidgetExport, imageWidgetExport, infoGaugeWidgetExport, kpiWidgetExport, legacyCockpitWelcomeWidgetExport, linearGaugeWidgetExport, mapWidgetExport, markdownWidgetExport, quickLinksWidgetExport, radialGaugeWidgetExport, recentAlarmsWidgetExport, siloWidgetExport, threeDRotationWidgetExport };
+export { alarmListWidgetExport, applicationsWidgetExport, assetNotesWidgetExport, cockpitWelcomeWidgetExport, criticalAlarmsWidgetExport, dataPointsTableWidgetExport, datapointGraphWidgetExport, deviceControlMessageWidgetExport, deviceManagementWelcomeWidgetExport, helpAndServiceWidgetExport, htmlWidgetAIChat, htmlWidgetExport, imageWidgetExport, infoGaugeWidgetExport, kpiWidgetExport, legacyCockpitWelcomeWidgetExport, linearGaugeWidgetExport, mapWidgetExport, markdownWidgetExport, quickLinksWidgetExport, radialGaugeWidgetExport, recentAlarmsWidgetExport, siloWidgetExport, threeDRotationWidgetExport };
 //# sourceMappingURL=c8y-ngx-components-widgets-exports.mjs.map