From 447203b7540121db5ee0d761fd71ab9d61c0e46e Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Thu, 7 Sep 2023 15:45:17 +0200
Subject: [PATCH] Better error handling.

---
 .../shared/forms/chat-dialog.component.html   | 23 +++++++++---
 .../shared/forms/chat-dialog.component.ts     | 35 +++++++++++++------
 2 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/features/content/shared/forms/chat-dialog.component.html b/frontend/src/app/features/content/shared/forms/chat-dialog.component.html
index 0caa1f403..2ae291f69 100644
--- a/frontend/src/app/features/content/shared/forms/chat-dialog.component.html
+++ b/frontend/src/app/features/content/shared/forms/chat-dialog.component.html
@@ -20,10 +20,10 @@
         </div>
 
         <div class="item" *ngFor="let item of snapshot.chatTalk">
-            <div class="row mt-3" *ngIf="item.isUser">
+            <div class="row mt-3" *ngIf="item.type === 'user'">
                 <div class="col">
                     <div class="bubble bubble-left">
-                        {{item.prompt}}
+                        {{item.text}}
                     </div>
                 </div>
                 <div class="col-auto">
@@ -31,7 +31,20 @@
                 </div>
             </div>
 
-            <div class="row mt-3" *ngIf="!item.isUser">
+            <div class="row mt-3" *ngIf="item.type === 'system'">
+                <div class="col-auto">
+                    <div class="squid squid-sm d-flex align-items-center justify-content-center">
+                        <img src="./images/squid.svg">
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="bubble bubble-right">
+                        {{ item.text | sqxTranslate}}
+                    </div>
+                </div>
+            </div>
+
+            <div class="row mt-3" *ngIf="item.type === 'bot'">
                 <div class="col-auto">
                     <div class="squid squid-sm d-flex align-items-center justify-content-center">
                         <img src="./images/squid.svg">
@@ -43,10 +56,10 @@
                             {{ 'chat.answer' | sqxTranslate}}
                         </div>
 
-                        <textarea class="form-control" readonly [ngModel]="item.prompt"></textarea>
+                        <textarea class="form-control" readonly [ngModel]="item.text"></textarea>
 
                         <div class="mt-2">
-                            <button type="button" class="btn btn-primary" (click)="select.emit(item.prompt)">
+                            <button type="button" class="btn btn-primary" (click)="select.emit(item.text)">
                                 {{ 'chat.use' | sqxTranslate }}
                             </button>
                         </div>
diff --git a/frontend/src/app/features/content/shared/forms/chat-dialog.component.ts b/frontend/src/app/features/content/shared/forms/chat-dialog.component.ts
index 40c1d6511..6806afbda 100644
--- a/frontend/src/app/features/content/shared/forms/chat-dialog.component.ts
+++ b/frontend/src/app/features/content/shared/forms/chat-dialog.component.ts
@@ -6,6 +6,7 @@
  */
 
 import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+import { delay } from 'rxjs/operators';
 import { AppsState, AuthService, StatefulComponent, TranslationsService } from '@app/shared';
 
 interface State {
@@ -16,7 +17,7 @@ interface State {
     chatQuestion: string;
 
     // The answers.
-    chatTalk: ReadonlyArray<{ prompt: string; isUser?: boolean }>;
+    chatTalk: ReadonlyArray<{ text: string; type: 'user' | 'bot' | 'system' }>;
 }
 
 @Component({
@@ -64,22 +65,34 @@ export class ChatDialogComponent extends StatefulComponent<State> {
             chatQuestion: '',
             chatTalk: [
                 ...s.chatTalk,
-                { prompt, isUser: true },
+                { text: prompt, type: 'user' },
             ],
             isRunning: true,
         }));
 
-        this.translator.ask(this.appsState.appName, { prompt })
+        this.translator.ask(this.appsState.appName, { prompt }).pipe(delay(500))
             .subscribe({
                 next: chatAnswers => {
-                    this.next(s => ({
-                        ...s,
-                        chatTalk: [
-                            ...s.chatTalk,
-                            ...chatAnswers.map(answer => ({ prompt: answer })),
-                        ],
-                        isRunning: false,
-                    }));
+                    if (chatAnswers.length === 0) {
+                        this.next(s => ({
+                            ...s,
+                            chatQuestion: '',
+                            chatTalk: [
+                                ...s.chatTalk,
+                                { text: 'i18n:chat.answersEmpty', type: 'system' },
+                            ],
+                            isRunning: true,
+                        }));
+                    } else {
+                        this.next(s => ({
+                            ...s,
+                            chatTalk: [
+                                ...s.chatTalk,
+                                ...chatAnswers.map(text => ({ text, type: 'bot' } as any)),
+                            ],
+                            isRunning: false,
+                        }));
+                    }
 
                     setTimeout(() => {
                         this.input.nativeElement.focus();