@c8y/tutorial 1024.15.16 → 1024.16.5

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1024.15.16",
+  "version": "1024.16.5",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
     "@angular/animations": "^21.2.0",
     "@angular/cdk": "^21.2.0",
-    "@c8y/bootstrap": "1024.15.16",
-    "@c8y/client": "1024.15.16",
-    "@c8y/ngx-components": "1024.15.16",
-    "@c8y/style": "1024.15.16",
+    "@c8y/bootstrap": "1024.16.5",
+    "@c8y/client": "1024.16.5",
+    "@c8y/ngx-components": "1024.16.5",
+    "@c8y/style": "1024.16.5",
     "gridstack": "^12.4.2",
     "leaflet": "1.9.4",
     "monaco-editor": "~0.53.0",
@@ -17,8 +17,8 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@c8y/devkit": "1024.15.16",
-    "@c8y/options": "1024.15.16"
+    "@c8y/devkit": "1024.16.5",
+    "@c8y/options": "1024.16.5"
   },
   "peerDependencies": {
     "@angular/common": ">=21 <22"

package/src/ai/ai-chat-example.component.html

@@ -320,6 +320,38 @@
             <div>This is content that is projected by default and always shown.</div>
           }
 
+          <!-- Action bar below the input box. Project any control and place it left, right or in the
+           overflow (more) dropdown. -->
+          <c8y-ai-chat-action placement="left">
+            <button
+              class="btn btn-link btn-sm"
+              type="button"
+              (click)="clearMessages()"
+            >
+              <i c8yIcon="delete-bin"></i> {{ 'Clear chat' | translate }}
+            </button>
+          </c8y-ai-chat-action>
+
+          <c8y-ai-chat-action placement="right">
+            <button
+              class="btn btn-link btn-sm"
+              type="button"
+              (click)="reloadComponent()"
+            >
+              {{ 'Reset example' | translate }}
+            </button>
+          </c8y-ai-chat-action>
+
+          <c8y-ai-chat-action placement="more">
+            <button
+              class="dropdown-item"
+              type="button"
+              (click)="clearMessages()"
+            >
+              <i c8yIcon="delete-bin"></i> {{ 'Clear chat' | translate }}
+            </button>
+          </c8y-ai-chat-action>
+
           <c8y-ai-chat-suggestion
             [label]="'Create device '"
             [prompt]="'AHOI, create a new device'"

package/src/ai/ai-chat-example.component.ts

@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { CoreModule, LoadingComponent } from '@c8y/ngx-components';
 import { AIMessage, AssistantMessageDisplayConfig, ChatConfig } from '@c8y/ngx-components/ai';
 import {
+  AiChatActionComponent,
   AiChatAssistantMessageComponent,
   AiChatComponent,
   AiChatMessageActionComponent,
@@ -21,6 +22,7 @@ import { gettext } from '@c8y/ngx-components/gettext';
     AiChatMessageComponent,
     AiChatMessageActionComponent,
     AiChatSuggestionComponent,
+    AiChatActionComponent,
     LoadingComponent,
     NgComponentOutlet,
     CoreModule,
@@ -127,6 +129,11 @@ export class ChatExampleComponent {
     this.updateDisplayMessages();
   }
 
+  clearMessages() {
+    this.messages = [];
+    this.updateDisplayMessages();
+  }
+
   reloadComponent() {
     // Reload the component by toggling the flag
     this.showComponent = false;