update chatbot

src/app/chatbot/chatbot.html

@@ -1,39 +1,41 @@
-<!-- src/app/llama-demo/llama-demo.component.html -->
-<div class="card">
-  <h2>GGUF LLaMA – Demo</h2>
+<div class="chat-container">
+  <div class="chat-box" #chatBox>
+    <div class="chat-message" *ngFor="let message of messages; trackBy: trackByIndex">
+      <!-- User Message -->
+      <div class="user-message" *ngIf="message.user">
+        <div class="avatar">
+          <img src="/user.png" alt="User" />
+        </div>
+        <div class="message-content">
+          <p>{{ message.user }}</p>
+        </div>
+      </div>
 
-  <div class="field">
-    <label>Prompt</label>
-    <textarea rows="6" [formControl]="form.controls.prompt"
-              placeholder="Write your question or instruction here"></textarea>
-  </div>
-
-  <div class="row">
-    <div class="field">
-      <label>Max tokens</label>
-      <input type="number" [formControl]="form.controls.max_tokens" min="16" />
-    </div>
-    <div class="field">
-      <label>Temperature</label>
-      <input type="number" step="0.1" [formControl]="form.controls.temperature" />
-    </div>
-    <div class="field">
-      <label>Top-p</label>
-      <input type="number" step="0.05" [formControl]="form.controls.top_p" />
-    </div>
-    <div class="field">
-      <label>Repeat penalty</label>
-      <input type="number" step="0.1" [formControl]="form.controls.repeat_penalty" />
+      <!-- Bot Message -->
+      <div class="bot-message" *ngIf="message.bot !== null">
+        <div class="message-content">
+          <!-- Show typing dots for the latest pair while waiting -->
+          <ng-container *ngIf="message.bot === '' && isLast(message) && loading; else botText">
+            <div class="typing">
+              <span></span><span></span><span></span>
+            </div>
+          </ng-container>
+          <ng-template #botText>
+            <p>{{ message.bot }}</p>
+          </ng-template>
+        </div>
+        <div class="avatar">
+          <img src="/chatbot.png" alt="Bot" />
+        </div>
+      </div>
     </div>
   </div>
 
-  <button (click)="onGenerate()" [disabled]="isLoading">Generate</button>
-
-  <div class="status" *ngIf="isLoading">Generating…</div>
-  <div class="error" *ngIf="errorMsg">{{ errorMsg }}</div>
-
-  <div class="output" *ngIf="resultText">
-    <h3>Output</h3>
-    <pre>{{ resultText }}</pre>
+  <div class="input-box">
+    <input type="text"
+           [(ngModel)]="question"
+           placeholder="Type your message here..."
+           (keyup.enter)="askQuestion()" />
+    <button (click)="askQuestion()" [disabled]="loading && question.trim() === ''">Send</button>
   </div>
 </div>

src/app/chatbot/chatbot.scss

@@ -1,74 +1,165 @@
-/* src/app/llama-demo/llama-demo.component.css */
-.card {
-  max-width: 860px;
-  margin: 24px auto;
-  padding: 16px;
-  border-radius: 12px;
-  background: #111;
-  color: #eee;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+/* Container */
+.chat-container {
+  overflow-y: overlay;
+  padding-top: 10vw;
+  height: 30vw;  
 }
 
-.field {
+/* Message wrapper */
+.chat-message {
   display: flex;
   flex-direction: column;
-  margin-bottom: 12px;
+  gap: 6px;
+  animation: fadeIn 0.25s ease-out;
+  max-width: 100%;
+}
+
+.user-message,
+.bot-message {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  gap: 2vw;
+}
+
+.user-message {
+  justify-content: flex-start;
+}
+
+.bot-message {
+  justify-content: flex-end;
+  align-self: flex-end;
 }
 
-.field > label {
-  font-size: 0.9rem;
-  opacity: 0.9;
-  margin-bottom: 4px;
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
 
-textarea, input {
-  background: #181818;
-  color: #f0f0f0;
-  border: 1px solid #2a2a2a;
-  border-radius: 8px;
-  padding: 10px;
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-.row {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-  margin: 12px 0;
+.user-message .message-content,
+.bot-message .message-content {
+  padding: 12px 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  width: 50%;
 }
 
-button {
-  padding: 10px 16px;
-  border-radius: 8px;
+.user-message .message-content {
+  background-color: #f4f4f4;
+  width: auto;
+}
+
+.bot-message .message-content {
+  background-color: #f4f4f4;
+}
+
+.message-content p {
+  margin: 0;
+  color: #333;
+  font-size: 1vw;
+  line-height: 1.5;
+}
+
+/* Input */
+.input-box {
+  display: flex;
+  gap: 1vw;
+  padding: 2vw;
+  border-top: 1px solid #ddd;
+  background-color: #fff;
+  position: absolute;
+  bottom: 0;
+  width: -webkit-fill-available;
+}
+
+.input-box input {
+  flex: 1 1 auto;
+  padding: 1vw;
+  font-size: 1vw;
+  border-radius: 12px;
+  border: 1px solid #ddd;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+  outline: none;
+  transition: border 0.3s ease;
+  font-family: 'Roboto', sans-serif;
+}
+
+.input-box input:focus {
+  border-color: #4e8fff;
+  box-shadow: 0 4px 10px rgba(78,143,255,0.3);
+}
+
+.input-box button {
+  padding: 10px 15px;
+  background-color: #4e8fff;
+  color: #fff;
   border: none;
-  color: #0b0b0b;
-  background: #a6ff00; /* subtle neon green accent */
+  border-radius: 12px;
   cursor: pointer;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  transition: background-color 0.3s ease;
+  font-family: 'Roboto', sans-serif;
+}
+
+.input-box button:hover {
+  background-color: #1e6ab2;
 }
 
-button[disabled] {
-  opacity: 0.6;
-  cursor: not-allowed;
+/* Typing dots */
+.typing {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 1em;
 }
 
-.status {
-  margin-top: 12px;
-  opacity: 0.9;
+.typing span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #333;
+  display: inline-block;
+  animation: bounce 1s infinite ease-in-out;
 }
 
-.error {
-  margin-top: 12px;
-  color: #ff8080;
+.typing span:nth-child(2) {
+  animation-delay: 0.15s;
 }
 
-.output {
-  margin-top: 16px;
-  background: #0d0d0d;
-  border: 1px solid #242424;
-  border-radius: 8px;
-  padding: 12px;
+.typing span:nth-child(3) {
+  animation-delay: 0.30s;
 }
 
-pre {
-  white-space: pre-wrap;
-  word-break: break-word;
+@keyframes bounce {
+  0%, 80%, 100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+
+  40% {
+    transform: translateY(-6px);
+    opacity: 1;
+  }
+}
+
+/* Enter animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }

src/app/chatbot/chatbot.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { map, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ChatBotService {
+
+  private readonly baseUrl =
+    location.hostname.endsWith('hf.space')
+      ? 'https://pykara-pytrade-backend.hf.space'
+      : 'http://127.0.0.1:5000';
+
+  private apiUrl = `${this.baseUrl}/chat`;
+  constructor(private http: HttpClient) { }
+
+  // Function to send a prompt to the Flask API and fetch the response
+  generateResponse(prompt: string): Observable<any> {
+    const body = { message: prompt }; // The prompt object sent to the API
+    return this.http.post<any>(this.apiUrl, body); // Sending POST request
+  }
+
+}

src/app/chatbot/chatbot.ts

@@ -1,64 +1,69 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
-import axios from 'axios';
-import { FormBuilder, Validators } from '@angular/forms';
-import { LlamaService, GenerateResponse } from './llama.service';
-import { ReactiveFormsModule } from '@angular/forms';
+import { ChatBotService } from './chatbot.service';
 
+type ChatPair = { user: string; bot: string | null };
 
 @Component({
   selector: 'app-chatbot',
   standalone: true,
-  imports: [CommonModule,ReactiveFormsModule,FormsModule],
+  imports: [CommonModule, HttpClientModule, FormsModule],
   templateUrl: './chatbot.html',
-  styleUrl: './chatbot.scss'
+  styleUrls: ['./chatbot.scss'],
 })
 export class Chatbot {
-  isLoading = false;
-  errorMsg = '';
-  resultText = '';
-  form: any;
-  
+  @ViewChild('chatBox') chatBoxRef!: ElementRef<HTMLDivElement>;
 
-  constructor(private fb: FormBuilder, private llama: LlamaService) {
-    this.form = this.fb.group({
-      prompt: ['', [Validators.required]],
-      max_tokens: [256],
-      temperature: [0.7],
-      top_p: [0.95],
-      repeat_penalty: [1.1]
-    });
-  }
+  question: string = '';
+  loading: boolean = false;
+  messages: ChatPair[] = [];
 
-  onGenerate() {
-    this.errorMsg = '';
-    this.resultText = '';
-    if (this.form.invalid) {
-      this.errorMsg = 'Please enter a prompt.';
-      return;
-    }
+  constructor(private chatService: ChatBotService) { }
 
-    this.isLoading = true;
+  askQuestion(): void {
+    const q = this.question.trim();
+    if (!q) return;
 
-    const body = {
-      prompt: this.form.value.prompt ?? '',
-      max_tokens: Number(this.form.value.max_tokens ?? 256),
-      temperature: Number(this.form.value.temperature ?? 0.7),
-      top_p: Number(this.form.value.top_p ?? 0.95),
-      repeat_penalty: Number(this.form.value.repeat_penalty ?? 1.1),
-      stop: ['[USER]'] // optional
-    };
+    // push one pair: user + empty bot (will show typing dots)
+    this.messages.push({ user: q, bot: '' });
+    this.question = '';
+    this.loading = true;
+    this.scrollToBottomSoon();
 
-    this.llama.generate(body).subscribe({
-      next: (res: GenerateResponse) => {
-        this.resultText = res.output || '';
-        this.isLoading = false;
+    this.chatService.generateResponse(q).subscribe({
+      next: (response) => {
+        const answer = response?.answer ?? 'No response received.';
+        this.messages[this.messages.length - 1].bot = answer;
+        this.loading = false;
+        this.scrollToBottomSoon();
+      },
+      error: () => {
+        this.messages[this.messages.length - 1].bot =
+          'Error: Could not get a response from the server.';
+        this.loading = false;
+        this.scrollToBottomSoon();
       },
-      error: (err: Error) => {
-        this.errorMsg = err.message || 'Request failed';
-        this.isLoading = false;
-      }
     });
   }
+
+  isLast(msg: ChatPair): boolean {
+    return this.messages.length > 0 && this.messages[this.messages.length - 1] === msg;
+  }
+
+  trackByIndex(index: number): number {
+    return index;
+  }
+
+  private scrollToBottomSoon() {
+    // Wait for DOM update
+    setTimeout(() => {
+      try {
+        const el = this.chatBoxRef?.nativeElement;
+        if (el) el.scrollTop = el.scrollHeight;
+      } catch { }
+    }, 0);
+  }
 }

src/app/chatbot/llama.service.ts

@@ -1,51 +0,0 @@
-// src/app/services/llama.service.ts
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
-
-import { Observable, throwError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-
-export interface GenerateRequest {
-  prompt: string;
-  max_tokens?: number;
-  temperature?: number;
-  top_p?: number;
-  repeat_penalty?: number;
-  stop?: string[];
-  system?: string;
-}
-
-export interface GenerateResponse {
-  output: string;
-  usage?: any;
-  model?: string;
-  params?: any;
-}
-
-@Injectable({ providedIn: 'root' })
-export class LlamaService {
-  private base = "http://127.0.0.1:5000";
-
-  constructor(private http: HttpClient) { }
-
-  generate(body: GenerateRequest): Observable<GenerateResponse> {
-    const url = `${this.base}/generate`;
-    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
-    return this.http.post<GenerateResponse>(url, body, { headers })
-      .pipe(catchError(this.handleError));
-  }
-
-  // Optional: Streaming with SSE (requires a streaming endpoint in Flask; see section 5)
-  generateStream(prompt: string): EventSource {
-    const url = `${this.base}/generate_stream?prompt=${encodeURIComponent(prompt)}`;
-    const es = new EventSource(url);
-    return es;
-  }
-
-  private handleError(err: HttpErrorResponse) {
-    if (err.error instanceof ErrorEvent) {
-      return throwError(() => new Error(`Client error: ${err.error.message}`));
-    }
-    return throwError(() => new Error(`Server error ${err.status}: ${err.message}`));
-  }
-}