Update flare-ui/src/app/components/chat/chat.component.html

flare-ui/src/app/components/chat/chat.component.html

@@ -1,61 +1,92 @@
-<div *ngIf="!sessionId" class="start-wrapper">
-  <mat-form-field appearance="outline" class="project-select">
-    <mat-label>Project</mat-label>
-    <mat-select [(ngModel)]="selectedProject" required>
-      <mat-option *ngFor="let p of projects" [value]="p">{{ p }}</mat-option>
-    </mat-select>
-  </mat-form-field>
+<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>
 
-  <button
-    mat-raised-button
-    color="primary"
-    (click)="startChat()"
-    [disabled]="!selectedProject"
-  >
-    <mat-icon>chat</mat-icon>
-    Start Chat
-  </button>
-</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>
 
-<!-- Oturum yoksa sadece Start Chat düğmesi -->
-<div *ngIf="!sessionId" class="start-wrapper">
-  <button mat-raised-button color="primary" (click)="startChat()">
-    <mat-icon>chat</mat-icon>
-    Start Chat
-  </button>
-</div>
+    <mat-divider></mat-divider>
 
-<!-- Oturum başladığında sohbet paneli -->
-<mat-card *ngIf="sessionId" class="chat-card">
-  <div class="chat-history" #scrollMe>
-    <div
-      *ngFor="let msg of messages"
-      [ngClass]="{
-        'msg-row': true,
-        me: msg.author === 'user',
-        bot: msg.author === 'assistant'
-      }"
-    >
-      <span class="bubble">{{ msg.text }}</span>
+    <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>
-  </div>
 
-  <form (ngSubmit)="send()" class="input-row">
-    <mat-form-field appearance="outline" class="flex-1">
-      <input
-        matInput
-        placeholder="Type your message…"
-        [formControl]="input"
-        autocomplete="off"/>
-    </mat-form-field>
-  
-    <button
-      mat-icon-button
-      color="primary"
-      type="submit"
-      [disabled]="input.invalid">
-      <mat-icon>send</mat-icon>
-    </button>
-  </form>
+    <mat-divider></mat-divider>
 
-</mat-card>
+    <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
+          #autosize="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>