@c8y/ngx-components 1023.43.3 → 1023.47.0

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

@@ -1,15 +1,14 @@
 import { hookWidgetConfig } from '@c8y/ngx-components/context-dashboard';
 import * as i0 from '@angular/core';
-import { inject, Injectable } from '@angular/core';
+import { inject, Injector, 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:   
+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';
@@ -17,13 +16,13 @@ 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); 
+span.branded {
+  color: var(--c8y-brand-primary);
 }
   \`;
 
@@ -61,14 +60,569 @@ span.branded {
 
 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'
 
+## Leaflet Map Integration Guidelines
+
+When building a widget that displays a map, you must use the Leaflet library. Follow the implementation pattern below as your foundation,
+with flexibility to make improvements as needed.
+
+ **IMPORTANT: Remember to not use any Leaflet plugin. You are only allowed to use pure Leaflet.**
+
+### Reference Implementation
+
+Use this complete example as your guide for implementing map functionality:
+
+\`\`\`javascript
+import { LitElement, html, css } from 'lit';
+import { styleImports } from 'styles';
+
+export default class DeviceLocationMapWidget extends LitElement {
+  static styles = css\`
+    :host > div {
+      padding: var(--c8y-root-component-padding);
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .map-container {
+      flex: 1;
+      min-height: 400px;
+      border: 1px solid var(--c8y-root-component-border-color);
+      border-radius: var(--c8y-root-component-border-radius-base);
+      position: relative;
+    }
+
+    .no-position {
+      text-align: center;
+      padding: 40px;
+      color: var(--text-muted);
+    }
+  \`;
+
+  static properties = {
+    error: { type: String },
+    map: { type: Object },
+    c8yContext: { type: Object },
+  };
+
+  constructor() {
+    super();
+    this.error = null;
+    this.map = null;
+  }
+
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.initializeMap();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.map) {
+      this.map.remove();
+      this.map = null;
+    }
+  }
+
+  getStatus(device) {
+    if (!device.c8y_ActiveAlarmsStatus) {
+      return 'text-muted';
+    }
+    if (device.c8y_ActiveAlarmsStatus.critical) {
+      return 'status critical';
+    }
+    if (device.c8y_ActiveAlarmsStatus.major) {
+      return 'status major';
+    }
+    if (device.c8y_ActiveAlarmsStatus.minor) {
+      return 'status minor';
+    }
+    if (device.c8y_ActiveAlarmsStatus.warning) {
+      return 'status warning';
+    }
+    return 'text-muted';
+  }
+
+  initializeMap() {
+    if (!window.L) {
+      console.error('Leaflet (L) is not available');
+      this.error = 'Map library not loaded';
+      return;
+    }
+
+    const mapContainer = this.shadowRoot.querySelector('#map');
+    if (!mapContainer || !this.c8yContext?.c8y_Position) {
+      return;
+    }
+
+    const { lat, lng } = this.c8yContext.c8y_Position;
+
+    try {
+      this.map = window.L.map(mapContainer).setView([lat, lng], 15);
+
+      window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors'
+      }).addTo(this.map);
+
+      const status = this.getStatus(this.c8yContext);
+
+      const deviceIcon = window.L.divIcon({
+        html: '<div class="dlt-c8y-icon-marker icon-3x ' + status + '"></div>',
+        className: 'c8y-map-marker-icon',
+        iconAnchor: [8, 8]
+      });
+
+      const marker = window.L.marker([lat, lng], { icon: deviceIcon }).addTo(this.map);
+
+      const popupContent = '<div style="min-width: 200px;">' +
+          '<h4 style="margin: 0 0 8px 0;">' + (this.c8yContext?.name || '') + '</h4>' +
+          '<p style="margin: 4px 0; font-size: 12px;">' +
+            '<strong>Latitude:</strong> ' + lat.toFixed(6) + '<br>' +
+            '<strong>Longitude:</strong> ' + lng.toFixed(6) +
+            (this.c8yContext.c8y_Position.alt ? '<br><strong>Altitude:</strong> ' + this.c8yContext.c8y_Position.alt + 'm' : '') +
+          '</p>' +
+          '<p style="margin: 4px 0 0 0; font-size: 11px;">' +
+            'Last updated: ' + new Date(this.c8yContext?.lastUpdated || Date.now()).toLocaleString() +
+          '</p>' +
+        '</div>';
+
+      marker.bindPopup(popupContent);
+
+      this.map.setView([lat, lng], 15);
+
+      setTimeout(() => {
+        if (this.map) {
+          this.map.invalidateSize();
+        }
+      }, 100);
+    } catch (error) {
+      console.error('Error initializing map:', error);
+      this.error = 'Failed to initialize map: ' + error.message;
+    }
+  }
+
+  render() {
+    if (this.error) {
+      return html\`
+        <style>\${styleImports}</style>
+        <div>
+          <div class="alert alert-danger" role="alert">
+            <strong>Error:</strong> \${this.error}
+          </div>
+        </div>
+      \`;
+    }
+
+    if (!this.c8yContext?.c8y_Position) {
+      return html\`
+        <style>\${styleImports}</style>
+        <div>
+          <div class="no-position">
+            <h4>No Position Data Available</h4>
+            <p>The device "\${this.c8yContext?.name || 'Unknown'}" does not have position information.</p>
+          </div>
+        </div>
+      \`;
+    }
+
+    return html\`
+      <style>\${styleImports}</style>
+      <div>
+        <div class="map-container">
+          <div id="map" style="width: 100%; height: 100%;"></div>
+        </div>
+      </div>
+    \`;
+  }
+}
+\`\`\`
+
+## ECharts Integration Example
+This example provides a generic implementation pattern for creating ECharts visualizations using Lit elements.
+Use this as a reference for implementing any ECharts chart type (line, bar, pie, scatter, gauge, etc.).
+
+\`\`\`typescript
+import { LitElement, html, css } from 'lit';
+import { styleImports } from 'styles';
+import * as echarts from 'echarts';
+import { fetch } from 'fetch';
+
+export default class EnergyConsumptionPieChart extends LitElement {
+  static styles = css\`
+    :host > div {
+      padding: var(--c8y-root-component-padding);
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .chart-container {
+      flex: 1;
+      min-height: 400px;
+      position: relative;
+    }
+
+    .chart-header {
+      margin-bottom: 16px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid var(--c8y-root-component-separator-color);
+    }
+
+    .chart-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-color);
+      margin: 0 0 4px 0;
+    }
+
+    .chart-subtitle {
+      font-size: 14px;
+      color: var(--text-muted);
+      margin: 0;
+    }
+
+    .loading-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 300px;
+    }
+
+    .error-container {
+      text-align: center;
+      padding: 40px 20px;
+      color: var(--text-muted);
+    }
+
+    .error-icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+      color: var(--c8y-palette-status-warning);
+    }
+
+    .energy-summary {
+      display: flex;
+      justify-content: space-around;
+      margin-top: 16px;
+      padding: 16px;
+      background-color: var(--body-background-color);
+      border-radius: var(--c8y-root-component-border-radius-base);
+      border: 1px solid var(--c8y-root-component-border-color);
+    }
+
+    .energy-item {
+      text-align: center;
+      flex: 1;
+    }
+
+    .energy-value {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    .energy-label {
+      font-size: 12px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .solar { color: #ffa726; }
+    .wind { color: #42a5f5; }
+    .grid { color: #66bb6a; }
+    .battery { color: #ab47bc; }
+  \`;
+
+  static properties = {
+    c8yContext: { type: Object },
+    chartInstance: { type: Object },
+    energyData: { type: Object },
+    loading: { type: Boolean },
+    error: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.chartInstance = null;
+    this.energyData = null;
+    this.loading = false;
+    this.error = null;
+  }
+
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    await this.loadEnergyData();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+    }
+  }
+
+  async loadEnergyData() {
+    if (!this.c8yContext?.id) {
+      this.error = 'No device selected';
+      return;
+    }
+
+    this.loading = true;
+    this.error = null;
+
+    try {
+      // Try to fetch energy measurements from the device
+      const response = await fetch(\`/measurement/measurements?source=\${this.c8yContext.id}&type=c8y_EnergyMeasurement&pageSize=100&revert=true\`);
+      const data = await response.json();
+
+      if (data.measurements && data.measurements.length > 0) {
+        // Process real energy measurements
+        this.processRealEnergyData(data.measurements);
+      } else {
+        // If no energy measurements found, try other energy-related types
+        const alternativeResponse = await fetch(\`/measurement/measurements?source=\${this.c8yContext.id}&pageSize=100&revert=true\`);
+        const alternativeData = await alternativeResponse.json();
+
+        const energyMeasurements = alternativeData.measurements?.filter(m =>
+          m.type.toLowerCase().includes('energy') ||
+          m.type.toLowerCase().includes('power') ||
+          Object.keys(m).some(key => key.toLowerCase().includes('energy') || key.toLowerCase().includes('power'))
+        );
+
+        if (energyMeasurements && energyMeasurements.length > 0) {
+          this.processRealEnergyData(energyMeasurements);
+        }
+      }
+    } catch (error) {
+      console.error('Error loading energy data:', error);
+      this.error = 'Failed to load energy data';
+    } finally {
+      this.loading = false;
+      await this.updateComplete;
+      this.initializeChart();
+    }
+  }
+
+  processRealEnergyData(measurements) {
+    // Process real energy measurements and categorize by source
+    const energyBySource = {
+      solar: 0,
+      wind: 0,
+      grid: 0,
+      battery: 0
+    };
+
+    measurements.forEach(measurement => {
+      // Look for energy values in the measurement
+      Object.keys(measurement).forEach(key => {
+        if (key.startsWith('c8y_') && typeof measurement[key] === 'object') {
+          const fragment = measurement[key];
+          Object.keys(fragment).forEach(subKey => {
+            if (fragment[subKey] && typeof fragment[subKey] === 'object' && fragment[subKey].value !== undefined) {
+              const value = parseFloat(fragment[subKey].value) || 0;
+
+              // Categorize based on measurement type or fragment name
+              if (key.toLowerCase().includes('solar') || subKey.toLowerCase().includes('solar')) {
+                energyBySource.solar += value;
+              } else if (key.toLowerCase().includes('wind') || subKey.toLowerCase().includes('wind')) {
+                energyBySource.wind += value;
+              } else if (key.toLowerCase().includes('battery') || subKey.toLowerCase().includes('battery')) {
+                energyBySource.battery += value;
+              } else {
+                energyBySource.grid += value;
+              }
+            }
+          });
+        }
+      });
+    });
+
+    // If no categorized data found, distribute evenly for demo
+    const totalEnergy = Object.values(energyBySource).reduce((sum, val) => sum + val, 0);
+      this.energyData = energyBySource;
+  }
 
-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.
+  initializeChart() {
+    const chartContainer = this.shadowRoot.querySelector('#energyChart');
+    if (!chartContainer || !this.energyData) return;
 
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+    }
+
+    this.chartInstance = echarts.init(chartContainer);
+
+    const chartData = [
+      { value: this.energyData.solar, name: 'Solar', itemStyle: { color: '#ffa726' } },
+      { value: this.energyData.wind, name: 'Wind', itemStyle: { color: '#42a5f5' } },
+      { value: this.energyData.grid, name: 'Grid', itemStyle: { color: '#66bb6a' } },
+      { value: this.energyData.battery, name: 'Battery', itemStyle: { color: '#ab47bc' } }
+    ];
+
+    const totalConsumption = Object.values(this.energyData).reduce((sum, val) => sum + val, 0);
+
+    const option = {
+      tooltip: {
+        trigger: 'item',
+        formatter: function(params) {
+          const percentage = ((params.value / totalConsumption) * 100).toFixed(1);
+          return \`<strong>\${params.name}</strong><br/>
+                  \${params.value.toFixed(1)} kWh (\${percentage}%)\`;
+        }
+      },
+      legend: {
+        orient: 'horizontal',
+        bottom: '10%',
+        left: 'center',
+        textStyle: {
+          color: getComputedStyle(document.documentElement).getPropertyValue('--text-color') || '#333'
+        }
+      },
+      series: [
+        {
+          name: 'Energy Consumption',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          center: ['50%', '40%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 8,
+            borderColor: getComputedStyle(document.documentElement).getPropertyValue('--body-background-color') || '#fff',
+            borderWidth: 2
+          },
+          label: {
+            show: true,
+            position: 'outside',
+            formatter: function(params) {
+              const percentage = ((params.value / totalConsumption) * 100).toFixed(1);
+              return \`\${params.name}\\n\${percentage}%\`;
+            },
+            color: getComputedStyle(document.documentElement).getPropertyValue('--text-color') || '#333'
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: 14,
+              fontWeight: 'bold'
+            },
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          },
+          data: chartData
+        }
+      ]
+    };
+
+    this.chartInstance.setOption(option);
+
+    // Handle resize
+    const resizeObserver = new ResizeObserver(() => {
+      if (this.chartInstance) {
+        this.chartInstance.resize();
+      }
+    });
+    resizeObserver.observe(chartContainer);
+  }
+
+  render() {
+    if (this.loading) {
+      return html\`
+        <style>\${styleImports}</style>
+        <div>
+          <div class="chart-header">
+            <h3 class="chart-title">Energy Consumption Breakdown</h3>
+            <p class="chart-subtitle">Loading energy data...</p>
+          </div>
+          <div class="loading-container">
+            <div class="spinner">
+              <div class="rect1"></div>
+              <div class="rect2"></div>
+              <div class="rect3"></div>
+              <div class="rect4"></div>
+              <div class="rect5"></div>
+            </div>
+          </div>
+        </div>
+      \`;
+    }
+
+    if (this.error && !this.energyData) {
+      return html\`
+        <style>\${styleImports}</style>
+        <div>
+          <div class="chart-header">
+            <h3 class="chart-title">Energy Consumption Breakdown</h3>
+            <p class="chart-subtitle">Unable to load data</p>
+          </div>
+          <div class="error-container">
+            <div class="error-icon">⚠</div>
+            <h4>No Energy Data Available</h4>
+            <p>The device "\${this.c8yContext?.name || 'Unknown'}" does not have energy consumption measurements.</p>
+            <p class="text-muted">This widget requires energy measurements with types like c8y_EnergyMeasurement.</p>
+          </div>
+        </div>
+      \`;
+    }
+
+    const totalConsumption = this.energyData ? Object.values(this.energyData).reduce((sum, val) => sum + val, 0) : 0;
+    const deviceName = this.c8yContext?.name || 'Unknown Device';
+
+    return html\`
+      <style>\${styleImports}</style>
+      <div>
+        <div class="chart-header">
+          <h3 class="chart-title">Energy Consumption Breakdown</h3>
+          <p class="chart-subtitle">\${deviceName} - Total: \${totalConsumption.toFixed(1)} kWh</p>
+        </div>
+
+        <div class="chart-container">
+          <div id="energyChart" style="width: 100%; height: 100%;"></div>
+        </div>
+
+        \${
+          this.energyData
+            ? html\`
+                <div class="energy-summary">
+                  <div class="energy-item">
+                    <div class="energy-value solar">\${this.energyData.solar.toFixed(1)}</div>
+                    <div class="energy-label">Solar kWh</div>
+                  </div>
+                  <div class="energy-item">
+                    <div class="energy-value wind">\${this.energyData.wind.toFixed(1)}</div>
+                    <div class="energy-label">Wind kWh</div>
+                  </div>
+                  <div class="energy-item">
+                    <div class="energy-value grid">\${this.energyData.grid.toFixed(1)}</div>
+                    <div class="energy-label">Grid kWh</div>
+                  </div>
+                  <div class="energy-item">
+                    <div class="energy-value battery">\${this.energyData.battery.toFixed(1)}</div>
+                    <div class="energy-label">Battery kWh</div>
+                  </div>
+                </div>
+              \`
+            : ''
+        }
+      \</div>
+   \`;
+  }
+}
+\`\`\`
+
+
+Always use the imported fetch function to make API calls authenticated to the Cumulocity instance.
+
+Do not use mocking or fake data. Always use real, actual data whenever possible.
 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:
@@ -122,7 +676,7 @@ Group a series of buttons together with .btn-group. Can be used for toolbars or
 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   
+- Use role="alert" for errors or messages
 requiring immediate attention
 
 \`\`\`html
@@ -179,6 +733,8 @@ Combine badges with icons using .c8y-icon-badge wrapper:
 ## Loading Spinner
 Shows content is being loaded or processed:
 
+When content is loading, show only a visual loading indicator (spinner/progress bar) and suppress any 'Loading...' text messages and show it in the middle of the widget.
+
 \`\`\`html
 <div class="spinner">
   <div class="rect1"></div>
@@ -471,15 +1027,623 @@ Alarms progress through three possible statuses during their lifecycle:
 <!-- 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**
+\`\`\`
+
+## Forms
+
+### Input fields
+Input fields play a crucial role in forms, enabling users to input diverse data types like text, numbers, dates, and more.
+
+\`\`\`html
+        <input class="form-control input-sm" type="text" placeholder="Text input" autocomplete="off" aria-label="Text input">
+        <input class="form-control" type="number" placeholder="Number input" step="5" aria-label="Number input">
+        <input class="form-control input-lg" type="email" placeholder="Email input" aria-label="Email input">
+\`\`\`
+
+
+### Textarea
+The textarea is used for multiline text input, often for extensive descriptions.
+
+Consistent styling with other input fields is achieved by adding the form-control class. This ensures a 100% width and prevents horizontal resizing. You can still customize the rows attribute as necessary.
+
+\`\`\`html
+ <textarea class="form-control" rows="6" placeholder="Add multiline text here…" aria-label="Multiline text input"></textarea>
+\`\`\`\`
+
+### Select
+The Select displays a list of options with a filter field. It enhances user interaction by providing a searchable list of options and supporting multiple selections, making the selection process efficient and user-friendly.
+
+\`\`\`html
+        <div class="c8y-select-wrapper">
+          <select id="selectExample" class="form-control" aria-label="Native select example">
+            <option>Pick one option…</option>
+            <option>Option 1</option>
+            <option>Option 2</option>
+            <option>Option 3</option>
+            <option>Option 4</option>
+            <option>Option 5</option>
+          </select>
+        </div>
+\`\`\`
+
+### Checkboxes and radio buttons
+Checkboxes allow users to select one or multiple options from a list, while radio buttons enable the selection of a single option from several choices.
+
+For consistent styling across different browsers, it is essential to override the default appearance. To achieve this, enclose the input element within a label element and apply the appropriate class: c8y-checkbox for checkboxes or c8y-radio for radio buttons. Then, add an empty span, followed by another span containing the label text. Ensure proper styling by declaring the type attribute of the input element as either checkbox or radio
+
+\`\`\`html
+        <label class="c8y-checkbox" title="Checkbox One" aria-label="Checkbox One">
+          <input type="checkbox" checked="checked" aria-checked="true">
+          <span></span>
+          <span>Checkbox One</span>
+        </label>
+
+        <label class="c8y-checkbox" title="Checkbox Two" aria-label="Checkbox Two">
+          <input type="checkbox" aria-checked="false">
+          <span></span>
+          <span>Checkbox Two</span>
+        </label>
+
+        <label title="Checkbox Three" class="c8y-checkbox" aria-label="Checkbox Three">
+          <input type="checkbox" [indeterminate]="true" aria-checked="mixed">
+          <span></span>
+          <span>Checkbox Three</span>
+        </label>
+
+        <label class="c8y-radio" title="Radio One" aria-label="Radio One">
+          <input type="radio" name="rgroup1" checked="checked" aria-checked="true">
+          <span></span>
+          <span>Radio One</span>
+        </label>
+
+        <label class="c8y-radio" title="Radio Two" aria-label="Radio Two">
+          <input type="radio" name="rgroup1" aria-checked="false">
+          <span></span>
+          <span>Radio Two</span>
+        </label>
+
+        <label title="Radio Three" class="c8y-radio" aria-label="Radio Three">
+          <input type="radio" name="rgroup1" aria-checked="false">
+          <span></span>
+          <span>Radio Three</span>
+        </label>
+\`\`\`
+
+### Toggle switch
+The toggle switch is a UI element that provides a simple and intuitive way to toggle between two states, typically representing "On" and "Off" options
+
+\`\`\`html
+      <label class="c8y-switch" aria-label="Toggle switch label">
+        <input type="checkbox" checked="checked" aria-checked="true">
+        <span></span> Toggle switch label
+      </label>
+
+      <label class="c8y-switch" title="Switch on/off" aria-label="Switch on/off">
+      <input type="checkbox" aria-checked="false">
+      <span></span>
+      </label>
+    <p>
+      Some text with the toggle switch aligned
+      <label class="c8y-switch c8y-switch--inline" aria-label="Toggle switch label inline">
+        <input type="checkbox" aria-checked="false">
+        <span></span> Toggle switch label
+      </label>
+    </p>
+\`\`\`
+
+### Input groups
+Elevate text-based inputs with input groups. Easily add text, icons, or buttons before and/or after input fields for enhanced functionality and design.
+
+Use .input-group with an .input-group-addon or .input-group-btn to prepend or append elements to a single input field. Place one add-on or button on either side of an input. You may also place them on both sides of an input.
+\`\`\`html
+        <div class="input-group">
+          <span class="input-group-addon" id="basic-addon1"> @ </span>
+          <input class="form-control" type="text" placeholder="e.g. johndoe" [attr.aria-describedby]="'basic-addon1'" aria-label="Username input with @ prefix">
+        </div>
+
+        <div class="input-group">
+          <input class="form-control" type="text" placeholder="e.g. www.example" [attr.aria-describedby]="'basic-addon2'" aria-label="Website input">
+          <span class="input-group-addon" id="basic-addon2">.com</span>
+        </div>
+
+        <div class="input-group">
+          <span class="input-group-addon">
+            <i c8yIcon="euro"></i>
+          </span>
+          <input class="form-control" type="text" placeholder="e.g. 1000" aria-label="Amount input">
+          <span class="input-group-addon">.00</span>
+        </div>
+
+        <div class="input-group">
+          <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
+          <input class="form-control" type="text" id="basic-url" [attr.aria-describedby]="'basic-addon3'" placeholder="e.g. johndoe" aria-label="User URL input">
+          <div class="input-group-btn">
+            <button class="btn btn-primary" type="button" aria-label="Submit username">Submit</button>
+          </div>
+        </div>
+\`\`\`
+
+Search input-group
+Search input groups have specific styling, append .input-group-search to the .input-group to place the button inside the input field and add round corners.
+
+\`\`\`html
+      <div class="input-group input-group-search" id="example">
+        <input class="form-control" type="search" placeholder="Search…" aria-label="Search input">
+        <span class="input-group-btn">
+          <button class="btn btn-clean" type="button" title="Search" aria-label="Search">
+            <i class="c8y-icon dlt-c8y-icon-search"></i>
+          </button>
+          <button class="btn btn-clean" type="button" title="Clear search" aria-label="Clear search">
+           <i class="c8y-icon dlt-c8y-icon-times"></i>
+          </button>
+        </span>
+      </div>
+\`\`\`
+
+Input group sizing
+Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
+
+\`\`\`html
+        <!-- Small size -->
+        <div class="input-group input-group-sm">
+          <span class="input-group-addon" id="sizing-addon3"> @ </span>
+          <input class="form-control" type="text" placeholder="Username" aria-label="Small username input">
+        </div>
+
+        <!-- Regular size -->
+        <div class="input-group">
+          <span class="input-group-addon" id="sizing-addon2"> @ </span>
+          <input type="text" class="form-control" placeholder="Username" aria-label="Regular username input">
+        </div>
+
+         <!-- Large size -->
+        <div class="input-group input-group-lg">
+          <span class="input-group-addon" id="sizing-addon1"> @ </span>
+          <input class="form-control" type="text" placeholder="Username" aria-label="Large username input">
+        </div>
+\`\`\`
+
+Button addons
+Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you have to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
+
+\`\`\`html
+
+        <div class="input-group">
+          <span class="input-group-btn">
+            <button class="btn btn-default" type="button" aria-label="Verify username">Verify</button>
+          </span>
+          <input class="form-control" type="text" placeholder="e.g. John" aria-label="Name input">
+        </div>
+
+        <div class="input-group">
+          <input class="form-control" type="email" placeholder="e.g. email@example.com" aria-label="Email input">
+          <span class="input-group-btn">
+            <button class="btn btn-primary" type="button" aria-label="Submit email">Submit</button>
+          </span>
+        </div>
+
+        <div class="input-group">
+          <input class="form-control" type="text" placeholder="e.g. 10" aria-label="Number input">
+          <div class="input-group-btn">
+            <button class="btn-dot btn-dot--danger">
+              <i class="c8y-icon dlt-c8y-icon-minus-circle"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="input-group">
+          <input type="number" class="form-control" placeholder="e.g. 100" aria-label="Number input">
+          <div class="input-group-btn">
+            <button class="btn-dot btn-dot--danger">
+              <i class="c8y-icon dlt-c8y-icon-minus-circle"></i>
+            </button>
+            <button class="btn-dot text-primary">
+              <i class="c8y-icon dlt-c8y-icon-plus-circle"></i>
+            </button>
+          </div>
+        </div>
+\`\`\`
+
+### Card
+The card component is a highly versatile and flexible content container designed to accommodate various types of content.
+
+A card consists of four primary elements: a .card wrapper containing a .card-header, a .card-block, and a .card-footer.
+
+\`\`\`html
+<div class="card" role="region" aria-label="Default card">
+  <div class="card-header separator">
+    <p class="card-title">Card title</p>
+  </div>
+  <div class="card-block">
+    <p>Add <code>.separator</code> to the <code>.card-header</code> to display a border between <code>.card-header</code> and <code>.card-block</code>.</p>
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-primary" aria-label="Button in footer">Button in footer</button>
+  </div>
+</div>
+
+<div class="card" role="region" aria-label="Card with subtitle">
+  <div class="card-header">
+    <span>
+      <p class="card-title">Card title</p>
+      <p class="card-subtitle">Card optional subtitle</p>
+    </span>
+  </div>
+  <div class="card-block">
+    <p>When adding a subtitle don't forget to wrap both <code>.card-title</code> and <code>.card-subtitle</code> in a <code>span</code>.</p><br>
+    <p>Add <code>.separator</code> to the <code>.card-footer</code> to display a border between <code>.card-block</code> and <code>.card-footer</code>.</p>
+  </div>
+  <div class="card-footer separator">
+    <button class="btn btn-primary" aria-label="Button in footer">Button in footer</button>
+  </div>
+</div>
+\`\`\`
+
+Card holding a form
+To integrate forms or form elements within a card, place it inside the .card-block container. If you want the submit button in the footer, either add the .card class to the form or nest the form inside the .card with the .d-contents class containing both .card-block and .card-footer.
+
+\`\`\`html
+
+<form name="wanForm2" class="card" role="region" aria-label="Card form">
+  <div class="card-header separator">
+    <p class="card-title">Card form</p>
+  </div>
+  <div class="card-block">
+    <div class="form-group">
+      <label for="simStatus">SIM status</label>
+      <input id="simStatus" type="text" class="form-control" disabled aria-label="SIM status">
+    </div>
+    <div class="form-group">
+      <label for="apn">APN</label>
+      <input id="apn" type="text" class="form-control" aria-label="APN">
+    </div>
+    <div class="form-group">
+      <label for="user">User</label>
+      <input id="user" type="text" class="form-control" aria-label="User">
+    </div>
+    <div class="form-group">
+      <label for="password">Password</label>
+      <input id="password" type="text" class="form-control" aria-label="Password">
+    </div>
+    <div class="form-group">
+      <label for="authType">Auth type</label>
+      <div class="c8y-select-wrapper">
+        <select id="authType" class="form-control" aria-label="Auth type">
+          <option label="PAP" value="string:pap">PAP</option>
+          <option label="CHAP" value="string:chap" selected="selected">CHAP</option>
+        </select>
+        <span></span>
+      </div>
+    </div>
+  </div>
+  <div class="card-footer separator">
+    <button class="btn btn-primary" aria-label="Save changes">
+      Save changes
+    </button>
+    <button class="btn btn-primary" aria-label="Save changes (SMS)">
+      Save changes (SMS)
+    </button>
+  </div>
+</form>
+
+<div class="card" role="region" aria-label="Card containing form">
+  <div class="card-header separator">
+    <p class="card-title">Containing the form</p>
+  </div>
+  <form name="wanForm" class="d-contents">
+    <div class="card-block">
+      <div class="form-group">
+        <label for="simStatus">SIM status</label>
+        <input id="simStatus" type="text" class="form-control" disabled aria-label="SIM status">
+      </div>
+      <div class="form-group">
+        <label for="apn">APN</label>
+        <input id="apn" type="text" class="form-control" aria-label="APN">
+      </div>
+      <div class="form-group">
+        <label for="user">User</label>
+        <input id="user" type="text" class="form-control" aria-label="User">
+      </div>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input id="password" type="text" class="form-control" aria-label="Password">
+      </div>
+      <div class="form-group">
+        <label for="authType">Auth type</label>
+        <div class="c8y-select-wrapper">
+          <select id="authType" class="form-control" aria-label="Auth type">
+            <option label="PAP" value="string:pap">PAP</option>
+            <option label="CHAP" value="string:chap" selected="selected">CHAP</option>
+          </select>
+          <span></span>
+        </div>
+      </div>
+    </div>
+    <div class="card-footer separator">
+      <button class="btn btn-primary" aria-label="Save changes">
+        Save changes
+      </button>
+      <button class="btn btn-primary" aria-label="Save changes (SMS)">
+        Save changes (SMS)
+      </button>
+    </div>
+  </form>
+</div>
+\`\`\`
+
+Modifier classes
+Use .success, .warning, .danger, .highlight, and .info modifier classes to change the appearance of a card.
+
+\`\`\`html
+<div class="card warning" role="region" aria-label="Warning card">
+  <div class="card-header">
+    <span>
+      <p class="card-title">Warning Card</p>
+      <p class="card-subtitle">Identify pain points</p>
+    </span>
+  </div>
+  <div class="card-block">
+    <p>Far, far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
+    <p>Separated, they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
+  </div>
+  <div class="card-footer separator">
+    <button class="btn btn-default" aria-label="Card Button">Card Button</button>
+  </div>
+</div>
+
+<div class="card info" role="region" aria-label="Info card">
+  <div class="card-header">
+    <span>
+      <p class="card-title">Info Card</p>
+      <p class="card-subtitle">Let's take this offline</p>
+    </span>
+  </div>
+  <div class="card-block">
+    <p>Far, far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated, they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
+  </div>
+</div>
+
+<div class="card card-highlight" role="region" aria-label="Highlight card">
+  <div class="card-header">
+    <p class="card-title">Card highlight</p>
+  </div>
+  <div class="card-block">
+    Adds a thick border around the card.
+  </div>
+</div>
+
+<div class="card danger" role="region" aria-label="Danger card">
+  <div class="card-header separator">
+    <span>
+      <p class="card-title"><i c8yIcon="exclamation-circle"></i> Watch out</p>
+      <p class="card-subtitle">Pay close attention</p>
+    </span>
+  </div>
+  <div class="card-block">
+    <p>Check your self, you aren't looking too good.</p>
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-default" aria-label="Take some time off">Take some time off</button>
+  </div>
+</div>
+<div class="card success" role="region" aria-label="Success card">
+  <div class="card-header separator">
+    <p class="card-title"> <i c8yIcon="check-circle"></i> Well done!</p>
+  </div>
+  <div class="card-block">
+    <p>That's how we do things around here.</p>
+  </div>
+</div>
+\`\`\`
+
+### Card group
+Card groups provide a flexible and accessible way to display multiple records or pieces of information in a grid layout. By wrapping cards in a .card-group, you ensure a consistent appearance and balanced height for all cards in the same row.
+
+
+Card-group without gutter
+To remove the default gutter, use the .card-group-block modifier class instead of .card-group and add the grid classes (for example, .col-sm-4) directly on the .card. This option is typically used in widgets or dashboards. Adding .interact-grid to .card-group-block displays a thick border on hover for every .card with an href or the pointer class.
+
+\`\`\`html
+<div class="card">
+  <div class="card-group-block interact-grid m-b-0" role="list" aria-label="Quick links">
+    <a class="col-sm-4 col-xs-6 card text-center" href="javascript: void(0)" role="listitem" aria-label="Users" target="_blank" rel="noopener noreferrer">
+      <div class="card-block">
+        <div class="h1">
+          <i aria-hidden="true" class="c8y-icon c8y-icon-duocolor c8y-icon-user"></i>
+        </div>
+        <p class="text-muted">Users</p>
+      </div>
+    </a>
+    <a class="col-sm-4 col-xs-6 card text-center" href="javascript: void(0)" role="listitem" aria-label="Roles" target="_blank" rel="noopener noreferrer">
+      <div class="card-block">
+        <div class="h1">
+          <i aria-hidden="true" class="c8y-icon c8y-icon-duocolor c8y-icon-users"></i>
+        </div>
+        <p class="text-muted">Roles</p>
+      </div>
+    </a>
+    <a class="col-sm-4 col-xs-6 card text-center" href="javascript: void(0)" role="listitem" aria-label="Applications" target="_blank" rel="noopener noreferrer">
+      <div class="card-block">
+        <div class="h1">
+          <i aria-hidden="true" class="c8y-icon c8y-icon-duocolor c8y-icon-modules"></i>
+        </div>
+        <p class="text-muted">Applications</p>
+      </div>
+    </a>
+    <a class="col-sm-4 col-xs-6 card text-center" href="javascript: void(0)" role="listitem" aria-label="Event processing" target="_blank" rel="noopener noreferrer">
+      <div class="card-block">
+        <div class="h1">
+          <i aria-hidden="true" class="c8y-icon c8y-icon-duocolor c8y-icon-event-processing"></i>
+        </div>
+        <p class="text-muted">Event processing</p>
+      </div>
+    </a>
+    <a class="col-sm-4 col-xs-6 card text-center" href="javascript: void(0)" role="listitem" aria-label="Application settings" target="_blank" rel="noopener noreferrer">
+      <div class="card-block">
+        <div class="h1">
+         <i aria-hidden="true" class="c8y-icon c8y-icon-duocolor c8y-icon-tools"></i>
+        </div>
+        <p class="text-muted">Application settings</p>
+      </div>
+    </a>
+    <a class="col-sm-4 col-xs-6 card text-center" href="javascript: void(0)" role="listitem" aria-label="Usage statistics" target="_blank" rel="noopener noreferrer">
+      <div class="card-block">
+        <div class="h1">
+         <i aria-hidden="true" class="c8y-icon c8y-icon-duocolor c8y-icon-usage-statistics"></i>
+        </div>
+        <p class="text-muted">Usage statistics</p>
+      </div>
+    </a>
+  </div>
+</div>
+\`\`\`
+
+CUMULOCITY STYLE UTILITIES
+
+The following utility classes are available and encouraged for use in your implementation. These classes provide consistent styling patterns across the platform.
+
+BACKGROUND COLORS
+
+Brand Colors:
+- bg-primary
+- bg-primary-light
+- bg-complementary
+
+Accent Colors:
+- bg-accent
+- bg-accent-light
+- bg-accent-dark
+
+Status Colors:
+- bg-info, bg-info-light, bg-info-dark
+- bg-success, bg-success-light, bg-success-dark
+- bg-warning, bg-warning-light, bg-warning-dark
+- bg-danger, bg-danger-light, bg-danger-dark
+
+Gray Scale:
+- bg-gray-10 through bg-gray-100 (increments of 10)
+- Available values: 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
+
+TYPOGRAPHY
+
+Font Weight:
+- text-normal
+- text-medium
+- text-bold
+
+Font Size:
+- text-10, text-12, text-14, text-16
+
+Line Height:
+- l-h-1
+- l-h-base
+- l-h-inherit
+
+Letter Case:
+- text-lowercase
+- text-uppercase
+- text-capitalize
+
+Text Behavior:
+- text-nowrap (prevents text wrapping)
+- text-pre-wrap (preserves line breaks)
+- text-break-all (breaks words without considering spelling)
+- text-break-word (breaks words considering spelling)
+- text-truncate (single line truncation with ellipsis)
+- text-truncate-wrap (multiline truncation for long words/URLs)
+- text-rtl (right-to-left text direction)
+
+USAGE GUIDELINES:
+- These utility classes are encouraged but not mandatory
+- They provide consistent styling patterns across the Cumulocity platform
+- When using truncation classes, always include a title attribute for accessibility
+- Prefer these utilities over inline styles for maintainability
+- Avoid using brand colors in the HTML widget for the sections or big elements, the brand is used only as an accent.
+- Prefer simple or neutral colors
+
+
+## Cumulocity Design Token Usage Guidelines
+
+## Token Philosophy
+When generating HTML widget code for Cumulocity IoT platform, **strongly prefer** using CSS custom properties (design tokens) over hardcoded color values. This ensures consistency with the platform's theming system and allows widgets to adapt to both light and dark themes automatically.
+
+## Token Usage Priority
+1. **PREFERRED**: Use Cumulocity design tokens (e.g., \`var(--c8y-brand-primary)\`)
+2. **ACCEPTABLE**: Use semantic color names with fallback (e.g., \`var(--brand-primary, #119d11)\`)
+3. **AVOID**: Hardcoded hex/rgb colors unless specifically required
+
+## Available Token Categories
+
+### Brand Colors
+Use for primary UI elements, CTAs, and brand identity:
+- \`var(--c8y-brand-primary)\` - Main brand color (green in light theme, yellow in dark theme)
+- \`var(--c8y-brand-dark)\` - Darker brand variant
+- \`var(--c8y-brand-light)\` - Lighter brand variant
+- Brand shades: \`var(--c8y-brand-10)\` through \`var(--c8y-brand-80)\` for subtle variations
+
+### Status Colors
+Use for alerts, notifications, and state indicators:
+- **Success**: \`var(--c8y-palette-status-success)\`, \`var(--c8y-palette-status-success-light)\`, \`var(--c8y-palette-status-success-dark)\`
+- **Danger**: \`var(--c8y-palette-status-danger)\`, \`var(--c8y-palette-status-danger-light)\`, \`var(--c8y-palette-status-danger-dark)\`
+- **Warning**: \`var(--c8y-palette-status-warning)\`, \`var(--c8y-palette-status-warning-light)\`, \`var(--c8y-palette-status-warning-dark)\`
+- **Info**: \`var(--c8y-palette-status-info)\`, \`var(--c8y-palette-status-info-light)\`, \`var(--c8y-palette-status-info-dark)\`
+
+### Text & Typography
+Use for text content and hierarchy:
+- \`var(--text-color)\` - Primary text color
+- \`var(--text-muted)\` - Secondary/muted text
+- \`var(--link-color)\` - Hyperlink color
+- \`var(--link-hover-color)\` - Hyperlink hover state
+
+### Background Colors
+- \`var(--body-background-color)\` - Main background
+- \`var(--navigator-bg-color)\` - Navigation background
+- \`var(--action-bar-background-default)\` - Action bar background
+
+### Borders & Spacing
+- \`var(--c8y-root-component-border-color)\` - Default border color
+- \`var(--c8y-root-component-separator-color)\` - Separator lines
+- \`var(--c8y-root-component-border-width)\` - Border thickness
+- \`var(--c8y-root-component-border-radius-base)\` - Default border radius
+- \`var(--btn-border-radius-base)\` - Button border radius
+
+### Component-Specific Tokens
+**Navigation**:
+- \`var(--navigator-text-color)\`, \`var(--navigator-active-bg)\`, \`var(--navigator-border-active)\`
+
+**Header**:
+- \`var(--header-color)\`, \`var(--header-text-color)\`, \`var(--header-hover-color)\`
+
+**Action Bar**:
+- \`var(--action-bar-color-actions)\`, \`var(--action-bar-color-actions-hover)\`
+
+## Implementation Examples
+
+### Good Practice ✓
+\`\`\`css
+.my-widget {
+  background-color: var(--body-background-color);
+  color: var(--text-color);
+  border: 1px solid var(--c8y-root-component-border-color);
+  border-radius: var(--c8y-root-component-border-radius-base);
+}
+
+.success-badge {
+  background-color: var(--c8y-palette-status-success-light);
+  color: var(--c8y-palette-status-success-dark);
+  border-left: 3px solid var(--c8y-palette-status-success);
+}
+
+.primary-button {
+  background-color: var(--c8y-brand-primary);
+  color: var(--c8y-palette-fixed-light);
+  border-radius: var(--btn-border-radius-base);
+}
+`;
+var HTML_WIDGET_AGENT = {
+    name: 'c8y-html-widget',
+    agent: {
+        system: `1. **Analyze the user request**
    - Extract specific data requirements
    - Identify visualization needs
    - Note any context dependencies
@@ -498,29 +1662,34 @@ const HTML_WIDGET_AGENT = {
    - Check for mock data usage vs real API integration
    - If inadequate, ask user for specific clarifications needed
 `,
-                maxOutputTokens: 20000
-            },
-            type: 'text',
-            mcp: [
-                {
-                    serverName: 'cumulocity-default',
-                    tools: ['cumulocity-api-request']
-                }
-            ]
+        maxTokens: 20000
+    },
+    type: 'text',
+    mcp: [
+        {
+            serverName: 'cumulocity-default',
+            tools: ['cumulocity-api-request']
         }
     ]
 };
 
+const HTML_WIDGET_AGENT_DEFINITIONS = {
+    snapshot: __MODE__ === 'development',
+    label: gettext('HTML Widget Code assistant'),
+    definition: HTML_WIDGET_AGENT
+};
+
 class AIHtmlWidgetConfigFactory {
     constructor() {
         this.betaPreviewService = inject(PreviewService);
         this.aiService = inject(AIService);
+        this.injector = inject(Injector);
         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,
+                agent: HTML_WIDGET_AGENT_DEFINITIONS,
                 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),
@@ -539,16 +1708,16 @@ class AIHtmlWidgetConfigFactory {
                     }
                 ]
             },
-            priority: 100
+            priority: 100,
+            injector: this.injector
         };
     }
     get() {
         return combineLatest([
-            from(this.aiService.getAgentHealth(HTML_WIDGET_AGENT.definitions[0].name)),
+            from(this.aiService.getAgentHealth()),
             this.betaPreviewService.getState$('ui.html-widget.v2').pipe(first())
-        ]).pipe(map(([aiExists, state]) => {
-            const shouldIncludeAi = aiExists.exists || aiExists.isProviderConfigured;
-            if (state && shouldIncludeAi) {
+        ]).pipe(map(([aiHealthCheck, state]) => {
+            if (state && aiHealthCheck.isProviderConfigured) {
                 return [this.aiWidgetConfigDefinition];
             }
             return [];