File size: 4,647 Bytes
6534ea1 06c5ea6 6534ea1 06c5ea6 6534ea1 06c5ea6 6534ea1 06c5ea6 6534ea1 06c5ea6 6534ea1 06c5ea6 6534ea1 06c5ea6 6534ea1 06c5ea6 6534ea1 06c5ea6 6534ea1 06c5ea6 6534ea1 06c5ea6 6534ea1 06c5ea6 6534ea1 | 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 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<div class="staticchat-container">
<div class="nav-bar">MJ-CHAT</div>
<div class="chat-container">
<div class="chat-window">
<button class="arrow-btn up" title="Prev message" (click)="showPreviousPair()">↑</button>
<!-- MESSAGES -->
<div class="chat-messages" #chatContainer>
<div *ngFor="let pair of pairedMessages; let i = index" class="pair" [attr.data-index]="i">
<!-- If user exists in pair (now shown first/top) -->
<div *ngIf="pair.user" class="message-row user-row">
<div class="message-bubble user-message">
<span style="font-size:1.5vw;">{{ pair.user.text }}</span>
<div class="message-time">
{{ pair.user.timestamp | date:'shortTime' }}
</div>
</div>
<img src="assets/staticchat/student.png" class="avatar" />
</div>
<!-- If bot exists in pair (now shown below user) -->
<div *ngIf="pair.bot" class="message-row bot-row">
<img src="assets/staticchat/teacher.png" class="avatar" />
<div class="message-bubble bot-message">
<span style="font-size:1.5vw;">{{ pair.bot.text }}</span>
<div class="mediaRow" *ngIf="pair.bot.rawData && (pair.bot.rawData?.audio_url || pair.bot.rawData?.video_url)">
<button class="chip" *ngIf="pair.bot.rawData?.audio_url" (click)="playAudio(pair.bot.rawData?.audio_url)">
🔊 Audio
</button>
<button class="chip" *ngIf="pair.bot.rawData?.video_url" (click)="playResponseVideo(pair.bot.rawData?.video_url)">
🎬 Video
</button>
<button class="chip" *ngIf="pair.bot.rawData?.detail_url" (click)="playResponseVideo(pair.bot.rawData?.detail_url)">
💡 Detail
</button>
<button class="chip" *ngIf="pair.bot.rawData?.story_url" (click)="playResponseVideo(pair.bot.rawData?.story_url)">
📖 Story
</button>
<button class="chip" *ngIf="pair.bot.rawData?.example_url" (click)="playResponseVideo(pair.bot.rawData?.example_url)">
🧪 Example
</button>
</div>
<div class="message-time">
{{ pair.bot.timestamp | date:'shortTime' }}
</div>
</div>
</div>
</div>
<!-- Typing indicator -->
<div *ngIf="isTyping" class="typing-indicator">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<button class="arrow-btn down" title="Next message" (click)="showNextPair()">↓</button>
<!-- SUGGESTIONS DROPDOWN -->
<div *ngIf="showSuggestions && suggestedQuestions.length > 0" class="suggestions-box">
<div *ngFor="let question of suggestedQuestions"
class="suggestion-item"
(click)="selectQuestion(question)">
{{ question }}
</div>
</div>
<!-- INPUT BAR -->
<form [formGroup]="chatForm" (ngSubmit)="sendMessage()" class="chat-input">
<!--<input type="text"
formControlName="message"
#messageInput
placeholder="Type your message..."
(focus)="onInputFocus()"
(input)="onInputChange()"
[readonly]="isSpeechProcessing" />-->
<input type="text"
formControlName="message"
#messageInput
[placeholder]="isListening ? '⏺ Listening...' : 'Type your message...'"
(focus)="onInputFocus()"
(input)="onInputChange()"
[readonly]="isSpeechProcessing || isListening" />
<button type="button"
class="micBtn"
[disabled]="!supported || isListening"
(click)="toggleMic()">
🎤
</button>
<div class="actions" *ngIf="showActions">
<button class="reject" (click)="reject()">❌</button>
<button class="accept" (click)="accept()">✅</button>
</div>
<button type="submit" [disabled]="!chatForm.valid">
➤
</button>
</form>
</div>
<div class="video-window">
<video #videoPlayer autoplay muted playsinline></video>
<img class="play-pause-btn"
[src]="(currentVideoType !== 'blink' && isVideoPlaying) ? 'assets/staticchat/pause.png' : 'assets/staticchat/play.png'"
(click)="togglePlayPause()" />
</div>
</div>
</div>
|