This is an automated email from the ASF dual-hosted git repository. gongchao pushed a commit to branch update-ai-with in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
commit cf7efb09f8ff14fd80240e15b3e0db41aec1df6a Author: tomsun28 <[email protected]> AuthorDate: Thu Oct 30 23:52:41 2025 +0800 [webapp] update ui Signed-off-by: tomsun28 <[email protected]> --- .../shared/components/ai-chat/chat.component.html | 26 ++++++++++++---------- .../shared/components/ai-chat/chat.component.less | 9 ++++++++ .../shared/components/ai-chat/chat.component.ts | 18 ++++++++------- 3 files changed, 33 insertions(+), 20 deletions(-) diff --git a/web-app/src/app/shared/components/ai-chat/chat.component.html b/web-app/src/app/shared/components/ai-chat/chat.component.html index 1b75357af..5bd402e1d 100644 --- a/web-app/src/app/shared/components/ai-chat/chat.component.html +++ b/web-app/src/app/shared/components/ai-chat/chat.component.html @@ -22,7 +22,7 @@ <div class="chat-sidebar" [class.collapsed]="sidebarCollapsed"> <div class="sidebar-header"> <h3>{{ 'menu.extras.ai.chat' | i18n }}</h3> - <button nz-button nzType="primary" nzSize="small" (click)="createNewConversation()" [nzLoading]="isLoading"> + <button nz-button nzType="primary" nzSize="small" (click)="createNewConversation()" [disabled]="isSendingMessage"> <i nz-icon nzType="plus"></i> New Chat </button> @@ -69,7 +69,7 @@ <!-- Messages area --> <div class="messages-container" #messagesContainer> <!-- Loading indicator --> - <div *ngIf="isLoading" class="loading-container"> + <div *ngIf="isLoadingConversations" class="loading-container"> <nz-spin nzSimple [nzSize]="'large'"> <ng-template #indicator> <i nz-icon nzType="loading" nzSpin></i> @@ -79,7 +79,7 @@ </div> <!-- Welcome message --> - <div *ngIf="messages.length === 0 && !isLoading" class="welcome-message"> + <div *ngIf="messages.length === 0 && !isLoadingConversations" class="welcome-message"> <div class="welcome-content"> <img [src]="theme === 'dark' ? 'assets/logo_white.svg' : 'assets/logo.svg'" alt="HertzBeat Logo" class="welcome-icon" /> <h3>Welcome to HertzBeat AI!</h3> @@ -108,14 +108,17 @@ <div class="message-header"> <span class="message-role">{{ message.role === 'user' ? 'You' : 'AI Assistant' }}</span> <span class="message-time">{{ formatTime(message.timestamp) }}</span> - <span *ngIf="message.role === 'assistant' && isLoading && i === messages.length - 1" class="streaming-indicator"> - <nz-spin nzSize="small"></nz-spin> + <span + *ngIf="message.role === 'assistant' && isSendingMessage && i === messages.length - 1 && message.content !== ''" + class="streaming-indicator" + > + <i nz-icon nzType="loading" nzSpin style="font-size: 12px"></i> + <span style="font-size: 11px">Typing...</span> </span> </div> <div class="message-text" [innerHTML]="message.content"></div> - <div *ngIf="message.role === 'assistant' && message.content === '' && isLoading" class="typing-indicator"> - <nz-spin nzSize="small"></nz-spin> - <span>Starting to type...</span> + <div *ngIf="message.role === 'assistant' && message.content === '' && isSendingMessage" class="typing-indicator"> + <span>AI is thinking...</span> </div> </div> </div> @@ -129,7 +132,7 @@ nz-input [(ngModel)]="newMessage" (keypress)="onKeyPress($event)" - [disabled]="isLoading" + [disabled]="isSendingMessage" placeholder="Ask me anything about monitoring..." rows="3" style="resize: none" @@ -139,11 +142,10 @@ nz-button nzType="primary" (click)="sendMessage()" - [disabled]="!newMessage.trim() || isLoading" - [nzLoading]="isLoading" + [disabled]="!newMessage.trim() || isSendingMessage" class="send-button" > - <i nz-icon nzType="send"></i> + <i nz-icon [nzType]="isSendingMessage ? 'loading' : 'send'" [nzSpin]="isSendingMessage"></i> </button> </div> <div class="input-hint"> diff --git a/web-app/src/app/shared/components/ai-chat/chat.component.less b/web-app/src/app/shared/components/ai-chat/chat.component.less index 2af24a670..f039d036f 100644 --- a/web-app/src/app/shared/components/ai-chat/chat.component.less +++ b/web-app/src/app/shared/components/ai-chat/chat.component.less @@ -182,6 +182,7 @@ align-items: center; justify-content: center; height: 100%; + opacity: 0.8; p { margin-top: 16px; @@ -314,6 +315,11 @@ gap: 4px; color: @primary-color; font-size: 11px; + opacity: 0.8; + + i { + font-size: 12px; + } } } @@ -377,6 +383,9 @@ gap: 8px; color: @text-color-secondary; font-style: italic; + font-size: 13px; + opacity: 0.7; + padding: 4px 0; } } } diff --git a/web-app/src/app/shared/components/ai-chat/chat.component.ts b/web-app/src/app/shared/components/ai-chat/chat.component.ts index 6c0002b1d..35cfbe9e0 100644 --- a/web-app/src/app/shared/components/ai-chat/chat.component.ts +++ b/web-app/src/app/shared/components/ai-chat/chat.component.ts @@ -40,6 +40,8 @@ export class ChatComponent implements OnInit, OnDestroy { messages: ChatMessage[] = []; newMessage = ''; isLoading = false; + isLoadingConversations = false; + isSendingMessage = false; sidebarCollapsed = false; theme: string = 'default'; private scrollTimeout: any; @@ -170,11 +172,11 @@ export class ChatComponent implements OnInit, OnDestroy { * Load conversation history from the API */ loadConversationHistory(conversationId: string): void { - this.isLoading = true; + this.isLoadingConversations = true; this.aiChatService.getConversation(conversationId).subscribe({ next: response => { - this.isLoading = false; + this.isLoadingConversations = false; if (response.code === 0 && response.data) { this.messages = response.data.messages || []; @@ -189,7 +191,7 @@ export class ChatComponent implements OnInit, OnDestroy { } }, error: error => { - this.isLoading = false; + this.isLoadingConversations = false; console.error('Error loading conversation history:', error); // Fallback to the messages from the conversation list if API fails this.messages = this.currentConversation?.messages || []; @@ -243,7 +245,7 @@ export class ChatComponent implements OnInit, OnDestroy { * Send a message */ sendMessage(): void { - if (!this.newMessage.trim() || this.isLoading) { + if (!this.newMessage.trim() || this.isSendingMessage) { return; } @@ -258,7 +260,7 @@ export class ChatComponent implements OnInit, OnDestroy { const messageContent = this.newMessage.trim(); this.newMessage = ''; - this.isLoading = true; + this.isSendingMessage = true; this.cdr.detectChanges(); this.scrollToBottom(); @@ -272,7 +274,7 @@ export class ChatComponent implements OnInit, OnDestroy { timestamp: new Date() }; this.messages.push(offlineMessage); - this.isLoading = false; + this.isSendingMessage = false; this.cdr.detectChanges(); this.scrollToBottom(); }, 1000); @@ -322,12 +324,12 @@ export class ChatComponent implements OnInit, OnDestroy { timestamp: new Date() }; this.messages.push(errorMessage); - this.isLoading = false; + this.isSendingMessage = false; this.cdr.detectChanges(); this.scrollToBottom(); }, complete: () => { - this.isLoading = false; + this.isSendingMessage = false; this.cdr.detectChanges(); // Refresh current conversation to get updated data (only if not fallback) --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
