@c8y/tutorial 1023.68.7 → 1023.70.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1023.68.7",
+  "version": "1023.70.0",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1023.68.7",
-    "@c8y/ngx-components": "1023.68.7",
-    "@c8y/client": "1023.68.7",
-    "@c8y/bootstrap": "1023.68.7",
+    "@c8y/style": "1023.70.0",
+    "@c8y/ngx-components": "1023.70.0",
+    "@c8y/client": "1023.70.0",
+    "@c8y/bootstrap": "1023.70.0",
     "@angular/cdk": "^20.2.14",
     "monaco-editor": "~0.53.0",
     "ngx-bootstrap": "20.0.2",
@@ -14,8 +14,8 @@
     "rxjs": "7.8.2"
   },
   "devDependencies": {
-    "@c8y/options": "1023.68.7",
-    "@c8y/devkit": "1023.68.7"
+    "@c8y/options": "1023.70.0",
+    "@c8y/devkit": "1023.70.0"
   },
   "peerDependencies": {
     "@angular/common": ">=20 <21"

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

@@ -1,15 +1,15 @@
 <c8y-title>Chat component example</c8y-title>
-<div class="row d-flex-sm">
-  <div class="col-md-4 p-0">
+<div class="row d-flex-md">
+  <div class="col-md-4 col-xs-12 p-0">
     <div class="d-col p-16 form-group-sm bg-level-1">
-      <p class="text-medium p-b-16">Config options</p>
+      <p class="text-medium p-b-16">ChatConfig options</p>
 
-      <label>title</label>
+      <label>headline</label>
       <div class="input-group input-group-sm m-b-8">
         <input
           class="form-control"
           type="text"
-          [(ngModel)]="config.title"
+          [(ngModel)]="config.headline"
         />
         <div class="input-group-btn">
           <button
@@ -21,12 +21,12 @@
         </div>
       </div>
 
-      <label>headline</label>
+      <label>title</label>
       <div class="input-group input-group-sm m-b-8">
         <input
           class="form-control"
           type="text"
-          [(ngModel)]="config.headline"
+          [(ngModel)]="config.title"
         />
         <div class="input-group-btn">
           <button
@@ -55,6 +55,86 @@
         </div>
       </div>
 
+      <label>welcomePosition</label>
+      <div class="input-group input-group-sm form-group-sm m-b-8">
+        <div class="c8y-select-wrapper">
+          <select
+            class="form-control"
+            [(ngModel)]="config.welcomePosition"
+          >
+            <option value="top">Top</option>
+            <option value="center">Center</option>
+            <option value="bottom">Bottom</option>
+          </select>
+        </div>
+        <div class="input-group-btn">
+          <button
+            class="btn btn-default"
+            (click)="reloadComponent()"
+          >
+            {{ 'Apply' | translate }}
+          </button>
+        </div>
+      </div>
+
+      <label>suggestionsLayout</label>
+      <div class="input-group input-group-sm m-b-8">
+        <div class="c8y-select-wrapper">
+          <select
+            class="form-control"
+            [(ngModel)]="config.suggestionsLayout"
+          >
+            <option value="vertical">Vertical</option>
+            <option value="horizontal">Horizontal</option>
+          </select>
+        </div>
+        <div class="input-group-btn">
+          <button
+            class="btn btn-default"
+            (click)="reloadComponent()"
+          >
+            {{ 'Apply' | translate }}
+          </button>
+        </div>
+      </div>
+
+      <label>scrollbarOnlyOnHover</label>
+      <div class="m-b-8">
+        <label
+          class="c8y-switch"
+          title="scrollbarOnlyOnHover"
+        >
+          <input
+            type="checkbox"
+            [(ngModel)]="config.scrollbarOnlyOnHover"
+            (ngModelChange)="reloadComponent()"
+          />
+          <span></span>
+          <span>scrollbarOnlyOnHover</span>
+        </label>
+      </div>
+
+      <label>appearance</label>
+      <div class="input-group input-group-sm m-b-8">
+        <div class="c8y-select-wrapper">
+          <select
+            class="form-control"
+            [(ngModel)]="config.appearance"
+          >
+            <option value="framed">framed</option>
+            <option value="flat">flat</option>
+          </select>
+        </div>
+        <div class="input-group-btn">
+          <button
+            class="btn btn-default"
+            (click)="reloadComponent()"
+          >
+            {{ 'Apply' | translate }}
+          </button>
+        </div>
+      </div>
+
       <label>placeholder</label>
       <div class="input-group input-group-sm m-b-8">
         <input
@@ -72,12 +152,12 @@
         </div>
       </div>
 
-      <label>sendButtonText (displayed as a tooltip)</label>
+      <label>disclaimerText</label>
       <div class="input-group input-group-sm m-b-8">
         <input
           class="form-control"
           type="text"
-          [(ngModel)]="config.sendButtonText"
+          [(ngModel)]="config.disclaimerText"
         />
         <div class="input-group-btn">
           <button
@@ -89,12 +169,12 @@
         </div>
       </div>
 
-      <label>cancelButtonText (displayed as a tooltip)</label>
+      <label>sendButtonText (displayed as a tooltip)</label>
       <div class="input-group input-group-sm m-b-8">
         <input
           class="form-control"
           type="text"
-          [(ngModel)]="config.cancelButtonText"
+          [(ngModel)]="config.sendButtonText"
         />
         <div class="input-group-btn">
           <button
@@ -106,12 +186,12 @@
         </div>
       </div>
 
-      <label>disclaimerText</label>
+      <label>cancelButtonText (displayed as a tooltip)</label>
       <div class="input-group input-group-sm m-b-8">
         <input
           class="form-control"
           type="text"
-          [(ngModel)]="config.disclaimerText"
+          [(ngModel)]="config.cancelButtonText"
         />
         <div class="input-group-btn">
           <button
@@ -126,7 +206,7 @@
       <pre class="m-t-16 inner-scroll small">{{ config | json }}</pre>
     </div>
   </div>
-  <div class="col-md-8">
+  <div class="col-md-8 col-xs-12">
     @if (showComponent) {
       <label
         class="c8y-switch m-t-8"
@@ -143,12 +223,13 @@
       </label>
       <div
         class="card m-t-16"
-        style="height: 530px"
+        style="height: 730px"
       >
         <c8y-ai-chat
           [config]="config"
           (onMessage)="sendMessage($event)"
           [isLoading]="isLoading"
+          [suggestionsTemplate]="suggestionsRef"
         >
           @if (showInitialMessage) {
             <c8y-ai-chat-message>
@@ -163,8 +244,24 @@
               ></c8y-ai-chat-message-action>
             </c8y-ai-chat-message>
           }
-          @for (message of displayMessages; track message) {
+          @for (message of displayMessages; track message; let i = $index) {
             <c8y-ai-chat-message [message]="message">
+              @if (message.role === 'user') {
+                <div [innerHTML]="message.content | markdownToHtml | async"></div>
+              } @else {
+                <ng-container
+                  [ngComponentOutlet]="AiChatAssistantMessageComponent"
+                  [ngComponentOutletInputs]="{
+                    assistantMessageContext: {
+                      message: message,
+                      config: assistantMessageDisplayConfig,
+                      isMessageLoading: isLoading && i === messages.length - 1,
+                      messageDisplayIndex: messages.length - 1 - i
+                    }
+                  }"
+                ></ng-container>
+              }
+
               @if (message.role === 'assistant') {
                 <c8y-ai-chat-message-action
                   icon="thumbs-up"
@@ -183,7 +280,7 @@
                 <c8y-ai-chat-message-action
                   icon="undo"
                   tooltip="Revert"
-                  (click)="revertMessage(message)"
+                  (actionClicked)="revertMessage(message)"
                 ></c8y-ai-chat-message-action>
               }
 
@@ -208,6 +305,21 @@
             </c8y-ai-chat-message>
           }
 
+          <div slot="welcome">
+            You can also project custom content into the welcome area of the chat component.
+          </div>
+          @if (showInitialMessage) {
+            <div slot="before-messages">
+              You can also project custom content before all messages.
+            </div>
+          }
+          @if (showInitialMessage) {
+            <div slot="after-messages">You can also project custom content after all messages.</div>
+          }
+          @if (showInitialMessage) {
+            <div>This is content that is projected by default and always shown.</div>
+          }
+
           <c8y-ai-chat-suggestion
             [label]="'Create device '"
             [prompt]="'AHOI, create a new device'"
@@ -221,6 +333,17 @@
             [prompt]="'Create a device with a measurement and an event'"
             (suggestionClicked)="sendMessage($event)"
           ></c8y-ai-chat-suggestion>
+
+          <!-- For cases where dynamic behaviour is needed, use `<ng-template>` -->
+          <ng-template #suggestionsRef>
+            <c8y-ai-chat-suggestion
+              [icon]="'c8y-bulb'"
+              [useAiButtons]="true"
+              [label]="'Dynamic suggestion from AI'"
+              [prompt]="'Dynamic suggestion from AI'"
+              (suggestionClicked)="sendMessage($event)"
+            ></c8y-ai-chat-suggestion>
+          </ng-template>
         </c8y-ai-chat>
       </div>
     }

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

@@ -1,14 +1,16 @@
-import { JsonPipe } from '@angular/common';
+import { JsonPipe, NgComponentOutlet } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { CoreModule, LoadingComponent } from '@c8y/ngx-components';
-import { AIMessage } from '@c8y/ngx-components/ai';
+import { AIMessage, AssistantMessageDisplayConfig, ChatConfig } from '@c8y/ngx-components/ai';
 import {
+  AiChatAssistantMessageComponent,
   AiChatComponent,
   AiChatMessageActionComponent,
   AiChatMessageComponent,
   AiChatSuggestionComponent
 } from '@c8y/ngx-components/ai/ai-chat';
+import { gettext } from '@c8y/ngx-components/gettext';
 
 @Component({
   selector: 'c8y-ai-chat-example',
@@ -20,12 +22,15 @@ import {
     AiChatMessageActionComponent,
     AiChatSuggestionComponent,
     LoadingComponent,
+    NgComponentOutlet,
     CoreModule,
     FormsModule,
     JsonPipe
   ]
 })
 export class ChatExampleComponent {
+  AiChatAssistantMessageComponent = AiChatAssistantMessageComponent;
+
   private _showTimestamps = false;
   showInitialMessage = false;
 
@@ -38,16 +43,27 @@ export class ChatExampleComponent {
     this.updateDisplayMessages();
   }
 
-  config = {
+  config: ChatConfig = {
     headline: 'Welcome!',
     welcomeText: 'Type a message below to get started.',
+    welcomePosition: 'top',
     title: 'What can I help you with?',
     placeholder: 'Type your message here...',
     sendButtonText: 'Send',
     cancelButtonText: 'Cancel',
     disclaimerText: 'AI-generated responses can contain errors. Verify the details before use.',
+    suggestionsLayout: 'horizontal',
+    appearance: 'framed',
     userInterfaceIcons: { send: 'arrow-circle-up', cancel: 'stop-circle' }
   };
+  assistantMessageDisplayConfig: AssistantMessageDisplayConfig = {
+    toolCallConfig: {
+      'c8y-read-documentation': {
+        executingLabel: gettext('Reading Cumulocity documentation'),
+        completedLabel: gettext('Read Cumulocity documentation')
+      }
+    }
+  };
 
   messages: AIMessage[] = [];
   displayMessages: AIMessage[] = [];
@@ -62,7 +78,43 @@ export class ChatExampleComponent {
     setTimeout(() => {
       // Simulate a delay for the response
       this.messages.push({
-        content: 'Thank you for your message!',
+        content: "I've finished implementing your **amazing idea**.",
+        steps: [
+          {
+            type: 'text',
+            text: '**Great idea**, I can definitely help you with that!\n\nFirst let me use some tools to gather the information I need.',
+            reasoning:
+              "The user asked me a question but I need more information. I see, I have some tools available that can help! \n\nNow I'll initiate a call to help solve this problem.",
+            toolResults: [
+              {
+                toolName: 'c8y-read-documentation',
+                toolCallId: 'call1',
+                type: 'tool-result',
+                input: { query: 'Example query' },
+                output: '<html>\n<h1>\n    C8Y doc sample\n</h1>\n</html>'
+              },
+              {
+                toolName: 'c8y-tool-with-json-output',
+                toolCallId: 'call3',
+                type: 'tool-result',
+                input: {},
+                output: { 'Key 1': 123, 'Key 2': 'Value 2' }
+              },
+              {
+                toolName: 'c8y-tool-with-error',
+                toolCallId: 'call4',
+                type: 'tool-result',
+                input: { url: 'something invalid' },
+                output: 'This is an error message\nSomething bad happened',
+                error: true
+              }
+            ]
+          },
+          {
+            type: 'text',
+            text: 'Your **excellent idea** has now been implemented!\n\nWhat would you like me to help with next?'
+          }
+        ],
         role: 'assistant',
         timestamp: new Date().toISOString()
       });