Spaces:
Running
Running
File size: 3,935 Bytes
e40119d 0ceb246 e40119d 7ecf48d e40119d 0ceb246 e40119d 7ecf48d e40119d db25410 0ceb246 e40119d 0ceb246 e40119d 0ceb246 e40119d db25410 e40119d 741c47b e40119d 0ceb246 e40119d 0ceb246 e40119d |
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 |
<div class="chat-container">
<!-- Project Selection and Start Chat -->
<div *ngIf="!sessionId" class="start-wrapper">
<mat-card>
<mat-card-header>
<mat-icon mat-card-avatar>chat_bubble_outline</mat-icon>
<mat-card-title>Start a Chat Session</mat-card-title>
<mat-card-subtitle>Select a project to begin testing</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<mat-form-field appearance="outline" class="project-select">
<mat-label>Select Project</mat-label>
<mat-select [(ngModel)]="selectedProject" required>
<mat-option *ngFor="let p of projects" [value]="p">{{ p }}</mat-option>
</mat-select>
<mat-hint>Choose an enabled project with published version</mat-hint>
</mat-form-field>
<mat-checkbox
[(ngModel)]="useTTS"
[disabled]="!ttsAvailable"
class="tts-checkbox">
Use TTS
</mat-checkbox>
<div *ngIf="!ttsAvailable" class="tts-hint">
TTS is not configured. Please configure a TTS engine in Environment settings.
</div>
</mat-card-content>
<mat-card-actions align="end">
<button
mat-raised-button
color="primary"
(click)="startChat()"
[disabled]="!selectedProject"
>
<mat-icon>chat</mat-icon>
Start Chat
</button>
</mat-card-actions>
</mat-card>
</div>
<!-- Chat Panel -->
<mat-card *ngIf="sessionId" class="chat-card">
<mat-card-header>
<mat-icon mat-card-avatar>smart_toy</mat-icon>
<mat-card-title>{{ selectedProject }}</mat-card-title>
<mat-card-subtitle>Session: {{ sessionId.substring(0, 8) }}...</mat-card-subtitle>
<div class="spacer"></div>
<mat-icon *ngIf="useTTS" matTooltip="TTS Enabled" class="tts-indicator">record_voice_over</mat-icon>
<button mat-icon-button (click)="endSession()" matTooltip="End Session">
<mat-icon>close</mat-icon>
</button>
</mat-card-header>
<mat-divider></mat-divider>
<!-- Audio Waveform Visualization -->
<div *ngIf="playingAudio" class="waveform-container">
<canvas #waveformCanvas width="800" height="100"></canvas>
</div>
<div class="chat-history" #scrollMe>
<div
*ngFor="let msg of messages; let i = index"
[ngClass]="{
'msg-row': true,
'me': msg.author === 'user',
'bot': msg.author === 'assistant'
}"
>
<mat-icon class="msg-icon">
{{ msg.author === 'user' ? 'person' : 'smart_toy' }}
</mat-icon>
<div class="msg-content">
<span class="bubble">{{ msg.text }}</span>
<button
*ngIf="msg.audioUrl && msg.author === 'assistant'"
mat-icon-button
(click)="playAudio(msg.audioUrl)"
class="play-button"
matTooltip="Play audio">
<mat-icon>play_arrow</mat-icon>
</button>
</div>
</div>
</div>
<mat-divider></mat-divider>
<form (ngSubmit)="send()" class="input-row">
<mat-form-field appearance="outline" class="flex-1">
<mat-label>Type your message</mat-label>
<input
matInput
placeholder="Ask something..."
[formControl]="input"
autocomplete="off"
cdkTextareaAutosize
cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="3"/>
<mat-hint>Press Enter to send</mat-hint>
</mat-form-field>
<button
mat-fab
color="primary"
type="submit"
[disabled]="input.invalid || !input.value?.trim() || loading"
class="send-button">
<mat-icon>send</mat-icon>
</button>
</form>
</mat-card>
<!-- Hidden audio player -->
<audio #audioPlayer style="display: none;"></audio>
</div> |