🔧 Chat Tool Calling Visualization: create demos

apps/demos/Demos/Chat/ToolCallVisualization/Angular/app/ai/ai.service.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { AzureOpenAI, OpenAI } from 'openai';
+
+export type AIMessage = OpenAI.ChatCompletionMessageParam;
+
+export type AIAnswer = OpenAI.ChatCompletionMessage;
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'demo-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+
+@Injectable()
+export class AiService {
+  chatService: AzureOpenAI;
+
+  constructor() {
+    this.chatService = new AzureOpenAI(AzureOpenAIConfig);
+  }
+
+  async requestModel(
+    messages: AIMessage[],
+    tools: OpenAI.ChatCompletionTool[],
+  ): Promise<AIAnswer> {
+    const params = {
+      messages,
+      model: AzureOpenAIConfig.deployment,
+      tools,
+      tool_choice: 'auto' as const,
+      max_completion_tokens: 1000,
+      temperature: 0.7,
+    };
+
+    const response = await this.chatService.chat.completions.create(params, { maxRetries: 0 });
+
+    return response.choices[0].message;
+  }
+}

apps/demos/Demos/Chat/ToolCallVisualization/Angular/app/app.component.css

@@ -0,0 +1,124 @@
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+::ng-deep .options {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  min-width: 280px;
+  background-color: var(--dx-color-options-panel-bg);
+  gap: 16px;
+  width: 100%;
+  max-width: 900px;
+  box-sizing: border-box;
+}
+
+::ng-deep .option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+::ng-deep .caption {
+  font-size: var(--dx-font-size-sm);
+  font-weight: 500;
+}
+
+::ng-deep .ai-chat-card {
+  position: relative;
+  width: 100%;
+  max-width: 900px;
+}
+
+::ng-deep .ai-chat-card > .dx-toolbar {
+  position: absolute;
+  height: var(--dxds-spacing-480, 48px);
+  padding-inline: var(--dxds-spacing-240, 24px);
+  border-bottom: var(--dx-border-width) solid var(--dx-color-border);
+  background-color: transparent;
+}
+
+::ng-deep .ai-chat-card > .dx-toolbar .dx-toolbar-items-container {
+  height: 100%;
+}
+
+::ng-deep .ai-chat-title .dx-toolbar-item-content {
+  font-size: var(--dxds-font-size-title-md, 20px);
+  font-weight: var(--dxds-font-weight-title-default, 600);
+}
+
+::ng-deep .ai-chat-card > .dx-chat {
+  padding-top: var(--dxds-spacing-480, 48px);
+}
+
+::ng-deep .dx-chat-messagelist-empty-image {
+  display: none;
+}
+
+::ng-deep .dx-chat-messagelist-empty-message {
+  font-size: var(--dx-font-size-heading-5);
+}
+
+::ng-deep .dx-chat-messagebubble-content {
+  display: flex;
+  flex-direction: column;
+}
+
+::ng-deep .dx-chat-messagebubble:has(> .dx-chat-tool-call-view) {
+  min-width: 344px;
+}
+
+::ng-deep .dx-theme-fluent-typography .dx-chat-messagebubble:has(> .dx-chat-tool-call-view),
+::ng-deep .dx-theme-fluent-next-typography .dx-chat-messagebubble:has(> .dx-chat-tool-call-view) {
+  min-width: 320px;
+}
+
+::ng-deep .chat-suggestion-cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 32px;
+  width: 100%;
+}
+
+::ng-deep .chat-suggestion-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 0 1 230px;
+  width: 230px;
+  max-width: 230px;
+  padding: 16px;
+  border: var(--dx-border-width) solid var(--dx-color-border);
+  border-radius: calc(var(--dx-border-radius) * 3);
+  background: color-mix(in srgb, var(--dx-color-text) 4%, var(--dx-component-color-bg));
+  color: var(--dx-color-text);
+  font-family: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+
+::ng-deep .chat-suggestion-card:hover {
+  background: color-mix(in srgb, var(--dx-color-text) 10%, var(--dx-component-color-bg));
+  box-shadow: var(--dxds-box-shadow-md, 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02));
+}
+
+::ng-deep .chat-suggestion-card-title {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+}
+
+::ng-deep .chat-suggestion-card-description {
+  color: color-mix(in srgb, var(--dx-color-text) 70%, var(--dx-component-color-bg));
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}

apps/demos/Demos/Chat/ToolCallVisualization/Angular/app/app.component.html

@@ -0,0 +1,70 @@
+<div class="demo-container">
+  <div class="ai-chat-card">
+    <dx-toolbar>
+      <dxi-toolbar-item
+        location="before"
+        text="AI Assistant"
+        cssClass="ai-chat-title"
+      >
+      </dxi-toolbar-item>
+      <dxi-toolbar-item
+        location="after"
+        widget="dxButton"
+        [options]="clearButtonOptions"
+      >
+      </dxi-toolbar-item>
+    </dx-toolbar>
+    <dx-chat
+      [disabled]="isDisabled"
+      [dataSource]="dataSource"
+      [reloadOnChange]="false"
+      [showAvatar]="true"
+      [showDayHeaders]="false"
+      [user]="user"
+      [height]="710"
+      [typingUsers]="typingUsers$ | async"
+      [alerts]="alerts$ | async"
+      [speechToTextEnabled]="true"
+      emptyViewTemplate="emptyViewTemplate"
+      (onMessageEntered)="onMessageEntered($event)"
+    >
+      <dxo-chat-tool-call-options
+        [expandAll]="expandAll"
+      ></dxo-chat-tool-call-options>
+
+      <div *dxTemplate="let data of 'emptyViewTemplate'">
+        <div class="dx-chat-messagelist-empty-message">{{
+          data.texts.message
+        }}</div>
+        <div class="dx-chat-messagelist-empty-prompt">{{
+          data.texts.prompt
+        }}</div>
+        <div class="chat-suggestion-cards">
+          @for (card of suggestionCards; track card.title) {
+          <button
+            type="button"
+            class="chat-suggestion-card"
+            (click)="onSuggestionClick(card.prompt)"
+          >
+            <div class="chat-suggestion-card-title">{{ card.title }}</div>
+            <div class="chat-suggestion-card-description">{{
+              card.description
+            }}</div>
+          </button>
+          }
+        </div>
+      </div>
+    </dx-chat>
+  </div>
+
+  <div class="options">
+    <div class="caption">Options</div>
+
+    <div class="option">
+      <dx-check-box
+        text="Expand all tool calls"
+        [(value)]="expandAll"
+      ></dx-check-box>
+    </div>
+  </div>
+</div>

apps/demos/Demos/Chat/ToolCallVisualization/Angular/app/app.component.ts

@@ -0,0 +1,119 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import {
+  ChangeDetectorRef, Component, enableProdMode, provideZoneChangeDetection,
+} from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import {
+  DxChatModule, DxButtonModule, DxCheckBoxModule, DxToolbarModule,
+} from 'devextreme-angular';
+import type { DxChatTypes } from 'devextreme-angular/ui/chat';
+import type { DxButtonTypes } from 'devextreme-angular/ui/button';
+import { Observable } from 'rxjs';
+import { loadMessages } from 'devextreme-angular/common/core/localization';
+import { DataSource } from 'devextreme-angular/common/data';
+import { AppService } from './app.service';
+import { AiService } from './ai/ai.service';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
+@Component({
+  selector: 'demo-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  imports: [
+    DxChatModule,
+    DxButtonModule,
+    DxCheckBoxModule,
+    DxToolbarModule,
+    AsyncPipe,
+  ],
+})
+export class AppComponent {
+  dataSource: DataSource;
+
+  user: DxChatTypes.User;
+
+  typingUsers$: Observable<DxChatTypes.User[]>;
+
+  alerts$: Observable<DxChatTypes.Alert[]>;
+
+  suggestionCards: AppService['suggestionCards'];
+
+  expandAll = false;
+
+  isDisabled = false;
+
+  clearButtonOptions: DxButtonTypes.Properties;
+
+  constructor(
+    private readonly appService: AppService,
+    private readonly changeDetectorRef: ChangeDetectorRef,
+  ) {
+    loadMessages(this.appService.getDictionary());
+
+    this.dataSource = this.appService.dataSource;
+    this.user = this.appService.user;
+    this.alerts$ = this.appService.alerts$;
+    this.typingUsers$ = this.appService.typingUsers$;
+    this.suggestionCards = this.appService.suggestionCards;
+    this.clearButtonOptions = {
+      icon: 'clearhistory',
+      stylingMode: 'text',
+      hint: 'Clear chat',
+      onClick: () => this.appService.clearMessages(),
+    };
+  }
+
+  toggleDisabledState(disabled: boolean, event = undefined) {
+    this.isDisabled = disabled;
+    this.clearButtonOptions = { ...this.clearButtonOptions, disabled };
+
+    this.changeDetectorRef.detectChanges();
+
+    if (disabled) {
+      event?.target.blur();
+    } else {
+      event?.target.focus();
+    }
+  }
+
+  async onMessageEntered(e: DxChatTypes.MessageEnteredEvent) {
+    if (this.appService.isProcessing) {
+      return;
+    }
+
+    if (!this.appService.alerts.length) {
+      this.toggleDisabledState(true, e.event);
+    }
+
+    try {
+      await this.appService.onMessageEntered(e);
+    } finally {
+      this.toggleDisabledState(false, e.event);
+    }
+  }
+
+  async onSuggestionClick(prompt: string) {
+    if (this.appService.isProcessing) {
+      return;
+    }
+
+    this.toggleDisabledState(true);
+
+    try {
+      await this.appService.sendSuggestion(prompt);
+    } finally {
+      this.toggleDisabledState(false);
+    }
+  }
+}
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
+    AppService,
+    AiService,
+  ],
+});