updated the fronend with the streaming effect

src/app/features/home/home.component.ts

@@ -19,78 +19,97 @@ import { SourceDocumentModel } from 'src/app/core/models/source-document.model';
   styleUrls: ['./home.component.scss']
 })
 
-
 export class HomeComponent implements OnInit {
-
-
   chats: Array<ChatModel> = [];
   selectedChatIndex: number;
   userQuestion: string;
   isLoading: boolean = false;
   isContainerHidden: boolean = false;
 
-
-  constructor(private historyService : HistoryService,
-    private datePipe: DatePipe, 
+  constructor(
+    private historyService: HistoryService,
+    private datePipe: DatePipe,
     private chatService: ChatService,
-    private toastr: ToastrService) { }
+    private toastr: ToastrService
+  ) {}
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
 
-  }
   copyQuestion(question: string) {
-    // Copy the question to the clipboard
     const textField = document.createElement('textarea');
     textField.innerText = question;
     document.body.appendChild(textField);
     textField.select();
     document.execCommand('copy');
     textField.remove();
-
-    // Show a toast message
     this.toastr.success('Question copied: ' + question, 'Copied');
-}
+  }
+
+  // Step 2: Add the streaming text method
+  streamResponseText(responseText: string, chatIndex: number): void {
+    const answerModel = this.chats[chatIndex].answerModel;
+    answerModel.content = ''; // Clear the content before streaming
+
+    let index = 0;
+    const intervalId = setInterval(() => {
+      if (index < responseText.length) {
+        answerModel.content += responseText[index];
+        index++;
+      } else {
+        clearInterval(intervalId); // Stop the interval when text is fully displayed
+      }
+    }, 10); // Adjust delay as needed (30ms)
+  }
 
   onQuestionSubmit() {
-    if(this.userQuestion){
-      console.log("row user question :",this.userQuestion);
+    if (this.userQuestion) {
+      console.log("Row user question:", this.userQuestion);
       const questionModel: QuestionModel = new QuestionModel();
-
-  
       questionModel.user_question = this.userQuestion;
 
       this.isLoading = true;
 
-      this.chatService.generateAnswer(questionModel).subscribe((response) => {
-        console.log(response);
-
-        const chatModel: ChatModel = new ChatModel();
-        console.log("chatmodel :",chatModel);
-        const user_question = response["user_input"];
-        console.log("user input :",user_question);
-        const arr= response["format_data"];
-        console.log("arr :",arr);
-        const Question_model= {
-          user_question: user_question
-      };
-        chatModel.questionModel = Question_model;
-        console.log("user question :",chatModel.questionModel);
-        
-        const Answer_Model ={
-          content: response.bot_response,
-          sourceDocuments: response.format_data
-      }
-        chatModel.answerModel = Answer_Model;
-        this.chats.unshift(chatModel);
-        this.selectedChatIndex = 0;
-        this.isLoading = false;
-        this.userQuestion = '';
-        //this.getChatHistoryByUser(this.user.userId);
-      }, error => {
-        this.isLoading = false;
-      });
+      this.chatService.generateAnswer(questionModel).subscribe(
+        (response) => {
+          console.log("API Response:", response);
+
+          const chatModel: ChatModel = new ChatModel();
+
+          const Question_model = {
+            user_question: response["user_input"],
+          };
+          chatModel.questionModel = Question_model;
+
+          console.log("User question:", chatModel.questionModel);
+
+          const formattedResponse = response["bot_response"]
+            .replace(/\/n|\n/g, "<br>") // Handle newlines
+            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+            .replace(/###\s(.*?):/g, '<br><h6>$1:</h6>'); // Handle bold text
+
+          const Answer_Model = {
+            content: '', // Start with empty content for streaming
+            sourceDocuments: response.format_data,
+          };
+
+          chatModel.answerModel = Answer_Model;
+          this.chats.unshift(chatModel);
+          this.selectedChatIndex = 0;
+
+          // Step 3: Use the streaming effect
+          const currentChatIndex = this.selectedChatIndex;
+          this.streamResponseText(formattedResponse, currentChatIndex);
+
+          this.isLoading = false;
+          this.userQuestion = '';
+        },
+        (error) => {
+          this.isLoading = false;
+        }
+      );
+
       this.isContainerHidden = true;
-    } 
+    }
   }
 
   handleQuestionSelect(index: number): void {