src/app/chatbot/chatbot.html

<div class="chat-container">
  <div class="chat-box" #chatBox>
    <div class="chat-message" *ngFor="let message of messages; trackBy: trackByIndex">
      <!-- User Message -->
      <div class="user-message" *ngIf="message.user">
        <div class="avatar">
          <img src="/user.png" alt="User" />
        </div>
        <div class="message-content">
          <p>{{ message.user }}</p>
        </div>
      </div>

      <!-- Bot Message -->
      <div class="bot-message" *ngIf="message.bot !== null">
        <div class="message-content">
          <!-- Show typing dots for the latest pair while waiting -->
          <ng-container *ngIf="message.bot === '' && isLast(message) && loading; else botText">
            <div class="typing">
              <span></span><span></span><span></span>
            </div>
          </ng-container>
          <ng-template #botText>
            <markdown [data]="message.bot"></markdown>
          </ng-template>
        </div>
        <div class="avatar">
          <img src="/chatbot.png" alt="Bot" />
        </div>
      </div>
    </div>
  </div>

  <div class="input-box">
    <input type="text"
           [(ngModel)]="question"
           placeholder="Thinking about a stock? Let’s talk."
           (keyup.enter)="askQuestion()" />
    <button (click)="askQuestion()" [disabled]="loading && question.trim() === ''">Send</button>
  </div>
</div>