feat: improve chat rendering

Author: sinedied

packages/agent-webapp/src/components/chat.ts

@@ -146,19 +146,21 @@ export class ChatComponent extends LitElement {
         },
       };
       for await (const chunk of chunks) {
+        this.isStreaming = true;
+
         if (chunk.delta.content) {
-          this.isStreaming = true;
           message.content += chunk.delta.content;
-          this.messages = [...messages, message];
-        }
-
-        if (chunk.delta.context?.['intermediateSteps']) {
+        } else if (chunk.delta.context?.['intermediateSteps']) {
+          // Only add intermediate steps when there is no content,
+          // otherwise they will be duplicated
           message.context!['intermediateSteps'] = [
-            ...(message.context?.['intermediateSteps'] ?? []),
-            ...(chunk.delta.context?.['intermediateSteps'] ?? []),
+            ...message.context!['intermediateSteps'],
+            ...chunk.delta.context?.['intermediateSteps']
           ];
         }
 
+        this.messages = [...messages, message];
+
         const sessionId = (chunk.context as any)?.sessionId;
         if (!this.sessionId && sessionId) {
           this.sessionId = sessionId;
@@ -254,6 +256,7 @@ export class ChatComponent extends LitElement {
         ${message.role === 'assistant'
           ? html`<azc-debug .message=${message}></azc-debug>`
           : nothing}
+        ${!message.content ? html`<slot name="loader"><div class="loader-animation"></div></slot>` : nothing}
         <div class="content">${message.html}</div>
       </div>
       <div class="message-role">
@@ -545,17 +548,21 @@ export class ChatComponent extends LitElement {
       }
       img {
         max-width: 100%;
+        max-height: 300px;
         border-radius: calc(var(--border-radius) / 2);
       }
       table {
         width: 100%;
         border-collapse: collapse;
         margin-bottom: var(--space-md);
+        table-layout: fixed;
         th,
         td {
           border: 1px solid var(--border-color);
           padding: var(--space-xs);
           text-align: left;
+          text-overflow: ellipsis;
+          overflow: hidden;
         }
         th {
           background: color-mix(in srgb, var(--bot-message-bg), #000 5%);

packages/agent-webapp/src/components/debug.ts

@@ -93,9 +93,6 @@ export class DebugComponent extends LitElement {
             </div>
             <div class="step-summary">
               <span class="step-title">${summary}</span>
-              ${step.action?.toolInput && Object.keys(step.action.toolInput).length > 0
-                ? html`<span class="step-subtitle">with inputs</span>`
-                : nothing}
             </div>
             <div class="step-toggle ${isExpanded ? 'expanded' : ''}">▼</div>
           </button>
@@ -130,7 +127,7 @@ export class DebugComponent extends LitElement {
         <span class="toggle-icon">
           ${unsafeSVG(aiSvg)}
         </span>
-        ${this.isExpanded ? 'Hide thinking steps' : 'Show thinking steps'}
+        ${this.isExpanded ? 'Hide intermediate steps' : 'Show intermediate steps'} (${intermediateSteps.length})
       </button>
 
       ${this.isExpanded ? html`
@@ -307,11 +304,6 @@ export class DebugComponent extends LitElement {
       color: var(--text-color);
     }
 
-    .step-subtitle {
-      font-size: 0.8rem;
-      color: color-mix(in srgb, var(--text-color), transparent 40%);
-    }
-
     .step-toggle {
       transition: transform 0.2s ease;
       opacity: 0.6;

packages/agent-webapp/src/message-parser.ts

@@ -5,6 +5,7 @@ import DOMPurify from 'dompurify';
 import { type AIChatMessage } from '@microsoft/ai-chat-protocol';
 
 export type ParsedMessage = {
+  content: string;
   html: HTMLTemplateResult;
   followupQuestions: string[];
   role: string;
@@ -14,6 +15,7 @@ export type ParsedMessage = {
 export function parseMessageIntoHtml(message: AIChatMessage, enableMarkdown = true): ParsedMessage {
   if (message.role === 'user') {
     return {
+      content: message.content,
       html: html`${message.content}`,
       followupQuestions: [],
       role: message.role,
@@ -43,6 +45,7 @@ export function parseMessageIntoHtml(message: AIChatMessage, enableMarkdown = tr
   }
 
   return {
+    content: text,
     html: result,
     followupQuestions,
     role: message.role,