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

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, ReactiveFormsModule, Validators, FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -7,6 +7,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatCardModule } from '@angular/material/card';
 import { MatSelectModule } from '@angular/material/select';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatDividerModule } from '@angular/material/divider';
 import { Subscription } from 'rxjs';
 
 import { ApiService } from '../../services/api.service';
@@ -14,6 +16,7 @@ import { ApiService } from '../../services/api.service';
 interface ChatMessage {
   author: 'user' | 'assistant';
   text: string;
+  timestamp?: Date;
 }
 
 @Component({
@@ -28,65 +31,399 @@ interface ChatMessage {
     MatFormFieldModule,
     MatInputModule,
     MatCardModule,
-    MatSelectModule
+    MatSelectModule,
+    MatProgressSpinnerModule,
+    MatDividerModule
   ],
-  templateUrl: './chat.component.html',
-  styleUrls: ['./chat.component.scss']
+  template: `
+    <div class="chat-container">
+      <mat-card>
+        <mat-card-header>
+          <mat-icon mat-card-avatar>chat_bubble_outline</mat-icon>
+          <mat-card-title>Chat Test</mat-card-title>
+          <mat-card-subtitle>Test your project's chat functionality</mat-card-subtitle>
+        </mat-card-header>
+        
+        <mat-card-content>
+          <!-- Project Selection -->
+          <div class="project-selector" *ngIf="!sessionId">
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Select Project</mat-label>
+              <mat-select [(ngModel)]="selectedProject" [ngModelOptions]="{standalone: true}">
+                <mat-option *ngFor="let project of projects" [value]="project">
+                  {{ project }}
+                </mat-option>
+              </mat-select>
+              <mat-hint>Choose a project to start chatting</mat-hint>
+            </mat-form-field>
+            
+            <button mat-raised-button 
+                    color="primary" 
+                    (click)="startChat()"
+                    [disabled]="!selectedProject || loading"
+                    class="start-button">
+              <mat-icon>play_arrow</mat-icon>
+              Start Chat
+            </button>
+          </div>
+
+          <!-- Chat Interface -->
+          <div class="chat-interface" *ngIf="sessionId">
+            <div class="chat-header">
+              <span class="project-name">{{ selectedProject }}</span>
+              <button mat-icon-button (click)="endChat()" matTooltip="End Chat">
+                <mat-icon>close</mat-icon>
+              </button>
+            </div>
+            
+            <mat-divider></mat-divider>
+            
+            <div class="messages-container" #messagesContainer>
+              <div *ngFor="let message of messages" 
+                   class="message"
+                   [class.user-message]="message.author === 'user'"
+                   [class.assistant-message]="message.author === 'assistant'">
+                <div class="message-bubble">
+                  <mat-icon class="author-icon">
+                    {{ message.author === 'user' ? 'person' : 'smart_toy' }}
+                  </mat-icon>
+                  <div class="message-content">
+                    <div class="message-text">{{ message.text }}</div>
+                    <div class="message-time" *ngIf="message.timestamp">
+                      {{ message.timestamp | date:'short' }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="typing-indicator" *ngIf="loading">
+                <mat-spinner diameter="20"></mat-spinner>
+                <span>Assistant is typing...</span>
+              </div>
+            </div>
+            
+            <mat-divider></mat-divider>
+            
+            <div class="input-container">
+              <form [formGroup]="messageForm" (ngSubmit)="sendMessage()" class="message-form">
+                <mat-form-field appearance="outline" class="message-input">
+                  <mat-label>Type your message</mat-label>
+                  <textarea matInput 
+                            formControlName="message"
+                            rows="2"
+                            (keydown.enter)="$event.shiftKey || (sendMessage(), $event.preventDefault())"
+                            placeholder="Press Enter to send, Shift+Enter for new line">
+                  </textarea>
+                  <mat-hint>Session ID: {{ sessionId }}</mat-hint>
+                </mat-form-field>
+                
+                <button mat-fab 
+                        color="primary" 
+                        type="submit"
+                        [disabled]="!messageForm.valid || loading"
+                        class="send-button">
+                  <mat-icon>send</mat-icon>
+                </button>
+              </form>
+            </div>
+          </div>
+
+          <!-- Error Display -->
+          <div class="error-message" *ngIf="error">
+            <mat-icon>error</mat-icon>
+            <span>{{ error }}</span>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  `,
+  styles: [`
+    .chat-container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+
+    .full-width {
+      width: 100%;
+    }
+
+    .project-selector {
+      display: flex;
+      gap: 16px;
+      align-items: flex-start;
+      margin-bottom: 20px;
+    }
+
+    .project-selector mat-form-field {
+      flex: 1;
+    }
+
+    .start-button {
+      margin-top: 8px;
+    }
+
+    .chat-interface {
+      display: flex;
+      flex-direction: column;
+      height: 600px;
+    }
+
+    .chat-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 0;
+    }
+
+    .project-name {
+      font-weight: 500;
+      font-size: 16px;
+    }
+
+    .messages-container {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px 0;
+      background-color: #f5f5f5;
+      border-radius: 8px;
+      margin: 16px 0;
+    }
+
+    .message {
+      margin-bottom: 16px;
+      padding: 0 16px;
+    }
+
+    .message-bubble {
+      display: flex;
+      gap: 12px;
+      max-width: 70%;
+    }
+
+    .user-message .message-bubble {
+      margin-left: auto;
+      flex-direction: row-reverse;
+    }
+
+    .author-icon {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .user-message .author-icon {
+      background-color: #3f51b5;
+      color: white;
+    }
+
+    .assistant-message .author-icon {
+      background-color: #e0e0e0;
+      color: #666;
+    }
+
+    .message-content {
+      background-color: white;
+      border-radius: 12px;
+      padding: 12px 16px;
+      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    }
+
+    .user-message .message-content {
+      background-color: #3f51b5;
+      color: white;
+    }
+
+    .message-text {
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .message-time {
+      font-size: 11px;
+      opacity: 0.7;
+      margin-top: 4px;
+    }
+
+    .typing-indicator {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 0 16px;
+      color: #666;
+    }
+
+    .input-container {
+      padding-top: 16px;
+    }
+
+    .message-form {
+      display: flex;
+      gap: 12px;
+      align-items: flex-start;
+    }
+
+    .message-input {
+      flex: 1;
+    }
+
+    .send-button {
+      margin-top: 8px;
+    }
+
+    .error-message {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: #f44336;
+      margin-top: 16px;
+      padding: 12px;
+      background-color: #ffebee;
+      border-radius: 4px;
+    }
+
+    ::ng-deep {
+      .mat-mdc-form-field-subscript-wrapper {
+        margin-top: 0.2em;
+      }
+      
+      .mat-mdc-text-field-wrapper {
+        background-color: white;
+      }
+    }
+  `]
 })
 export class ChatComponent implements OnInit, OnDestroy {
-  projects: string[] = [];
-  selectedProject!: string | null;
+  @ViewChild('messagesContainer') private messagesContainer!: ElementRef;
 
+  projects: string[] = [];
+  selectedProject: string | null = null;
   sessionId: string | null = null;
   messages: ChatMessage[] = [];
-  input = this.fb.control('', Validators.required);
+  loading = false;
+  error = '';
+  
+  messageForm = this.fb.group({
+    message: ['', Validators.required]
+  });
+  
   private subs = new Subscription();
 
-  constructor(private fb: FormBuilder, private api: ApiService) {}
+  constructor(
+    private fb: FormBuilder,
+    private apiService: ApiService
+  ) {}
 
-  ngOnInit(): void {
-    /* Proje isimlerini çek → comboya doldur */
-    const sub = this.api.getChatProjects().subscribe({
-      next: p => (this.projects = p),
-      error: () => alert('Projeler yüklenemedi')
-    });
-    this.subs.add(sub);
+  ngOnInit() {
+    this.loadProjects();
   }
 
-  /** Start Chat → /start_session */
-  startChat(): void {
+  ngOnDestroy() {
+    this.subs.unsubscribe();
+  }
+
+  loadProjects() {
+    this.loading = true;
+    this.subs.add(
+      this.apiService.getChatProjects().subscribe({
+        next: (projects) => {
+          this.projects = projects;
+          this.loading = false;
+        },
+        error: (err) => {
+          this.error = 'Failed to load projects';
+          this.loading = false;
+        }
+      })
+    );
+  }
+
+  startChat() {
     if (!this.selectedProject) return;
-    const sub = this.api.startChat(this.selectedProject).subscribe({
-      next: res => {
-        this.sessionId = res.session_id;
-        this.messages = [{ author: 'assistant', text: res.answer }];
-      },
-      error: () => alert('Oturum açılamadı')
-    });
-    this.subs.add(sub);
+    
+    this.loading = true;
+    this.error = '';
+    
+    this.subs.add(
+      this.apiService.startChat(this.selectedProject).subscribe({
+        next: (response) => {
+          this.sessionId = response.session_id;
+          this.messages = [];
+          
+          if (response.answer) {
+            this.messages.push({
+              author: 'assistant',
+              text: response.answer,
+              timestamp: new Date()
+            });
+          }
+          
+          this.loading = false;
+          this.messageForm.reset();
+          this.scrollToBottom();
+        },
+        error: (err) => {
+          this.error = err.error?.detail || 'Failed to start chat';
+          this.loading = false;
+        }
+      })
+    );
   }
 
-  /** Send → /chat */
-  send(): void {
-    if (!this.sessionId || this.input.invalid) return;
-    const text = this.input.value!.trim();
-    if (!text) return;
-
-    this.messages.push({ author: 'user', text });
-    this.input.reset();
-
-    const sub = this.api.chat(this.sessionId, text).subscribe({
-      next: res => this.messages.push({ author: 'assistant', text: res.answer }),
-      error: () =>
-        this.messages.push({
-          author: 'assistant',
-          text: '⚠️ Mesaj iletilemedi, tekrar deneyin.'
-        })
+  sendMessage() {
+    if (!this.messageForm.valid || !this.sessionId || this.loading) return;
+    
+    const messageText = this.messageForm.value.message!.trim();
+    if (!messageText) return;
+    
+    // Add user message
+    this.messages.push({
+      author: 'user',
+      text: messageText,
+      timestamp: new Date()
     });
-    this.subs.add(sub);
+    
+    this.loading = true;
+    this.messageForm.reset();
+    this.scrollToBottom();
+    
+    this.subs.add(
+      this.apiService.chat(this.sessionId, messageText).subscribe({
+        next: (response) => {
+          this.messages.push({
+            author: 'assistant',
+            text: response.answer,
+            timestamp: new Date()
+          });
+          
+          this.loading = false;
+          this.scrollToBottom();
+        },
+        error: (err) => {
+          this.error = err.error?.detail || 'Failed to send message';
+          this.loading = false;
+        }
+      })
+    );
   }
 
-  ngOnDestroy(): void {
-    this.subs.unsubscribe();
+  endChat() {
+    this.sessionId = null;
+    this.messages = [];
+    this.messageForm.reset();
+    this.error = '';
   }
-}
+
+  private scrollToBottom(): void {
+    setTimeout(() => {
+      if (this.messagesContainer) {
+        const element = this.messagesContainer.nativeElement;
+        element.scrollTop = element.scrollHeight;
+      }
+    }, 100);
+  }
+}