Spaces:
Running
Running
File size: 2,866 Bytes
e40119d 7ecf48d e40119d 7ecf48d e40119d db25410 e40119d db25410 e40119d 741c47b 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 |
<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-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>
<button mat-icon-button (click)="endSession()" matTooltip="End Session">
<mat-icon>close</mat-icon>
</button>
</mat-card-header>
<mat-divider></mat-divider>
<div class="chat-history" #scrollMe>
<div
*ngFor="let msg of messages"
[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>
<span class="bubble">{{ msg.text }}</span>
</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()"
class="send-button">
<mat-icon>send</mat-icon>
</button>
</form>
</mat-card>
</div> |