src/app/chat/chat.component.html

<div class="chat-container">
  <header class="header-container">
    <div class="logo">
      <a (click)="goToHome()" routerLink="/home" class="brand-link">
        <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
      </a>
      <span class="product-name">Py-Learn</span>
    </div>
    <div class="header-title">
      <h1>Grammar Chat</h1>
    </div>
    <div class="home-btn">
      <a (click)="goToHome()" routerLink="/home">
        <img src="assets/images/home.png" alt="Home" class="home-icon" />
      </a>
    </div>
  </header>

  <main class="chat-box" #chatBox>
    <img src="assets/images/chat/chatbg.png" alt="Chat Background" class="chat-bg" />
    <ng-container *ngFor="let message of messages">
      <div *ngIf="message.from === 'user'" class="message-wrapper user">
        <div class="profile-pic">
          <img src="assets/images/chat/rabbit.png" alt="User Profile Picture" />
        </div>
        <div class="message">
          {{ message.text }}
          <div class="message-timestamp">{{ message.timestamp }}</div>
        </div>
      </div>
      <div *ngIf="message.from === 'ai'" class="message-wrapper ai">
        <div class="profile-pic">
          <img src="assets/images/chat/lion.png" alt="AI Profile Picture" />
        </div>
        <div class="message structured-response">
          <div [innerHTML]="formatStructuredResponse(message.text)"></div>
          <div class="message-timestamp">{{ message.timestamp }}</div>
        </div>
      </div>
    </ng-container>
    <div *ngIf="isTyping" class="typing-indicator" role="status" aria-live="polite">
      AI is typing
      <span></span>
      <span></span>
      <span></span>
    </div>
  </main>

  <section class="input-container">
    <div class="input-box">
      <textarea [(ngModel)]="userInput"
                (focus)="showHardcodedQuestions()"
                (blur)="hideHardcodedQuestions()"
                (input)="adjustTextareaHeight($event); getSuggestions()"
                (keydown)="handleEnterPress($event)"
                placeholder="Type your message here..."
                [disabled]="isSpeaking"
                aria-label="Message input"></textarea>
      <button (click)="isSpeaking ? stopSpeaking() : handleButtonClick()"
              [disabled]="isSubmitting"
              aria-label="Send or voice">
        <img [src]="isSpeaking ? 'assets/images/chat/stop.png' : getButtonIcon()"
             alt="Action"
             class="button-icon" />
      </button>
    </div>
    <div class="hardcoded-questions-container" *ngIf="showQuestions">
      <div class="hardcoded-question" (click)="selectHardcodedQuestion('What is grammar?')">What is grammar?</div>
      <div class="hardcoded-question" (click)="selectHardcodedQuestion('What are the rules to be followed in grammar?')">What are the rules to be followed in grammar?</div>
      <div class="hardcoded-question" (click)="selectHardcodedQuestion('What are the types of tenses?')">What are the types of tenses?</div>
      <div class="hardcoded-question" (click)="selectHardcodedQuestion('Why do we need to follow grammar rules while writing and speaking?')">Why do we need to follow grammar rules while writing and speaking?</div>
      <div class="hardcoded-question" (click)="selectHardcodedQuestion('How do you identify a subject and a predicate in a sentence?')">How do you identify a subject and a predicate in a sentence?</div>
    </div>
  </section>

  <div class="listening-box" *ngIf="isListening" role="dialog" aria-modal="true">
    <div class="listening-content">
      <img src="assets/images/chat/microphone-icon.png" alt="Microphone" class="microphone-image" />
      <p *ngIf="!errorMessage">Listening...</p>
      <div class="listening-actions">
        <button class="mute-btn" (click)="muteMicrophone()">
          <img src="assets/images/chat/mic.png" alt="Mute" />
        </button>
        <button class="close-btn" (click)="stopListening()">
          <img src="assets/images/chat/cross.png" alt="Close" />
        </button>
      </div>
      <p *ngIf="errorMessage" class="error-text" (click)="openMicrophoneSettings()">{{ errorMessage }}</p>
    </div>
  </div>

  <div class="popup-overlay" *ngIf="showMicPopup">
    <div class="popup-box">
      <h3>Microphone access required</h3>
      <p>To use voice mode, you'll need to enable your microphone and try again.</p>
      <button class="popup-button" (click)="closeMicrophonePopup()">OK</button>
    </div>
  </div>
</div>