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, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, ReactiveFormsModule, Validators, FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -7,8 +7,9 @@ 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 { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Subscription } from 'rxjs';
 
 import { ApiService } from '../../services/api.service';
@@ -32,398 +33,152 @@ interface ChatMessage {
     MatInputModule,
     MatCardModule,
     MatSelectModule,
-    MatProgressSpinnerModule,
-    MatDividerModule
+    MatDividerModule,
+    MatTooltipModule,
+    MatProgressSpinnerModule
   ],
-  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;
-      }
-    }
-  `]
+  templateUrl: './chat.component.html',
+  styleUrls: ['./chat.component.scss']
 })
-export class ChatComponent implements OnInit, OnDestroy {
-  @ViewChild('messagesContainer') private messagesContainer!: ElementRef;
+export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
+  @ViewChild('scrollMe') private myScrollContainer!: ElementRef;
 
   projects: string[] = [];
-  selectedProject: string | null = null;
+  selectedProject: string | null = null;  // Düzeltildi: ! kaldırıldı, null değer atandı
+
   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();
+  private shouldScroll = false;
 
   constructor(
-    private fb: FormBuilder,
-    private apiService: ApiService
+    private fb: FormBuilder, 
+    private api: ApiService
   ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.loadProjects();
   }
 
-  ngOnDestroy() {
+  ngAfterViewChecked() {
+    if (this.shouldScroll) {
+      this.scrollToBottom();
+      this.shouldScroll = false;
+    }
+  }
+
+  ngOnDestroy(): void {
     this.subs.unsubscribe();
   }
 
-  loadProjects() {
+  loadProjects(): void {
     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;
+    const sub = this.api.getChatProjects().subscribe({
+      next: projects => {
+        this.projects = projects;
+        this.loading = false;
+        if (projects.length === 0) {
+          this.error = 'No enabled projects found. Please enable a project with published version.';
         }
-      })
-    );
+      },
+      error: (err) => {
+        this.error = 'Failed to load projects';
+        this.loading = false;
+        console.error('Load projects error:', err);
+      }
+    });
+    this.subs.add(sub);
   }
 
-  startChat() {
+  startChat(): void {
     if (!this.selectedProject) return;
     
     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;
-        }
-      })
-    );
+    const sub = this.api.startChat(this.selectedProject).subscribe({
+      next: res => {
+        this.sessionId = res.session_id;
+        this.messages = [{ 
+          author: 'assistant', 
+          text: res.answer,
+          timestamp: new Date()
+        }];
+        this.loading = false;
+        this.shouldScroll = true;
+      },
+      error: (err) => {
+        this.error = err.error?.detail || 'Failed to start session';
+        this.loading = false;
+        console.error('Start chat error:', err);
+      }
+    });
+    this.subs.add(sub);
   }
 
-  sendMessage() {
-    if (!this.messageForm.valid || !this.sessionId || this.loading) return;
-    
-    const messageText = this.messageForm.value.message!.trim();
-    if (!messageText) return;
+  send(): void {
+    if (!this.sessionId || this.input.invalid) return;
     
+    const text = this.input.value!.trim();
+    if (!text) return;
+
     // Add user message
-    this.messages.push({
-      author: 'user',
-      text: messageText,
+    this.messages.push({ 
+      author: 'user', 
+      text,
       timestamp: new Date()
     });
     
+    this.input.reset();
     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;
-        }
-      })
-    );
+    this.shouldScroll = true;
+
+    // Send to backend
+    const sub = this.api.chat(this.sessionId, text).subscribe({
+      next: res => {
+        this.messages.push({ 
+          author: 'assistant', 
+          text: res.answer,
+          timestamp: new Date()
+        });
+        this.loading = false;
+        this.shouldScroll = true;
+      },
+      error: (err) => {
+        this.messages.push({
+          author: 'assistant',
+          text: '⚠️ ' + (err.error?.detail || 'Failed to send message. Please try again.'),
+          timestamp: new Date()
+        });
+        this.loading = false;
+        this.shouldScroll = true;
+        console.error('Chat error:', err);
+      }
+    });
+    this.subs.add(sub);
   }
 
-  endChat() {
+  endSession(): void {
     this.sessionId = null;
     this.messages = [];
-    this.messageForm.reset();
+    this.selectedProject = null;
+    this.input.reset();
     this.error = '';
   }
 
   private scrollToBottom(): void {
-    setTimeout(() => {
-      if (this.messagesContainer) {
-        const element = this.messagesContainer.nativeElement;
-        element.scrollTop = element.scrollHeight;
+    try {
+      if (this.myScrollContainer) {
+        this.myScrollContainer.nativeElement.scrollTop = 
+          this.myScrollContainer.nativeElement.scrollHeight;
       }
-    }, 100);
+    } catch(err) {
+      console.error('Scroll error:', err);
+    }
   }
 }