File size: 4,508 Bytes
e4ab6d0 59fecf2 e4ab6d0 6f70a09 e4ab6d0 6f70a09 e4ab6d0 59fecf2 e4ab6d0 59fecf2 e4ab6d0 59fecf2 e4ab6d0 59fecf2 e4ab6d0 59fecf2 e4ab6d0 59fecf2 e4ab6d0 59fecf2 e4ab6d0 59fecf2 e4ab6d0 59fecf2 e4ab6d0 59fecf2 e4ab6d0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<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>
|