@hivegpt/hiveai-angular 0.0.372 → 0.0.374

package/src/lib/components/chat-drawer/chat-drawer.component.ts

@@ -0,0 +1,2143 @@
+// import { Platform } from '@angular/cdk/platform';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { TranslationService } from '../translations/translation.service';
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  QueryList,
+  Renderer2,
+  SimpleChanges,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core';
+import { MatDrawer } from '@angular/material/sidenav';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { of, Subscription } from 'rxjs';
+import { catchError, switchMap } from 'rxjs/operators';
+import { formatNow, formatTimeStamps } from '../../utils/utils';
+import {
+  dev_environment,
+  prod_environment,
+} from '../../../environments/environment';
+import { ConversationService } from '../conversation.service';
+import { Observable } from 'rxjs';
+import { SocketService } from '../socket-service.service';
+
+import { FormBuilder, Validators } from '@angular/forms';
+import * as SpeechSDK from 'microsoft-cognitiveservices-speech-sdk';
+import { BotsService } from '../bot.service';
+import * as marked from 'marked';  // Import marked
+
+@Component({
+  selector: 'hivegpt-chat-drawer-package',
+  templateUrl: './chat-drawer.component.html',
+  styleUrls: ['./chat-drawer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChatDrawerComponent implements OnInit, OnChanges {
+  @ViewChild('chatMain') private chatMain: ElementRef;
+  @ViewChild('myInput') private myInput: ElementRef;
+  @ViewChildren('closeplaygroundbutton')
+  closePlaygroundButtons: QueryList<ElementRef>;
+  @ViewChild('drawer') drawer!: MatDrawer;
+  @ViewChild('sourcesDrawer') sourcesDrawer!: MatDrawer;
+  @ViewChild('editorsDrawer') editorsDrawer!: MatDrawer;
+  private bodyOverflowClass = 'body-overflow-hidden';
+  @ViewChild('myTextarea', { static: false })
+  myTextarea!: ElementRef<HTMLTextAreaElement>; // Reference to the textarea
+  isCollapsedTrue = false;
+  @Input() copilotName: string = 'HiveXGPT';
+  @Input() firstName!: string;
+  @Input() lastName!: string;
+  @Input() apiKey!: string;
+  @Input() bgBubbleAi!: string;
+  @Input() bgBubbleUser!: string;
+  @Input() bgGradient!: string[];
+  @Input() botName!: string;
+  @Input() botSkills!: string;
+  @Input() botId!: string;
+  @Input() orgId!: string;
+  @Input() closeButtonColor!: string;
+  @Input() closeButtonbgColor!: string;
+  @Input() credentials!: [];
+  @Input() dateTimeColor!: string;
+  @Input() dateTextColor!: string;
+  @Input() eventId!: string;
+  @Input() s27Token!: string;
+  @Input() eventName!: string;
+  @Input() botIcon!: string;
+  @Input() formFieldBgColor!: string;
+  @Input() formFieldTextColor!: string;
+  @Input() fullView!: boolean;
+  @Input() gradientColors!: string[];
+  @Input() greeting!: string;
+  @Input() messageTextColorAi!: string;
+  @Input() messageTextColorUser!: string;
+  @Input() rules!: string;
+  @Input() sendButtonColor!: string;
+  @Input() sendButtonTextColor!: string;
+  @Input() showClose!: boolean;
+  @Input() thumbsDownMessages!: string[];
+  @Input() thumbsUpMessage!: string;
+  @Input() timezone!: string;
+  @Input() unknownResponses!: [];
+  @Input() useOpenAi!: boolean;
+  @Input() userId!: string;
+  @Input() isDev!: boolean;
+
+  @Input() againButtonColor!: string[];
+  @Input() againButtonTextColor!: string[];
+  @Output() feedbackEvent = new EventEmitter<string>();
+  @Output() onCloseEvent = new EventEmitter<void>();
+  @Output() openPage = new EventEmitter<any>();
+  @Output() sessionActions = new EventEmitter<any>();
+  @Output() closeBot = new EventEmitter<any>();
+  @Output() connectWithUser = new EventEmitter<any>();
+  @Output() scheduleMeeting = new EventEmitter<string>();
+  @Output() refreshToken = new EventEmitter<any>();
+  @Output() openSupport = new EventEmitter<any>();
+
+  autogenKey = 'Autogen_eDJTtEU-NB0RtIpzq1w';
+  addToMyAgendaAction = 'add_to_my_agenda';
+  myUpcomingSessionAction = 'my_upcomming_session';
+  connectOrFollowAction = 'connect_or_follow';
+  aiResponse: string = '';
+  chatLog: any[] = [];
+  decoder = new TextDecoder();
+  feedbackDone: boolean = false;
+  greetingMsg: string = '';
+  hasBackdropValue: boolean = false;
+  input: string = '';
+  listenerAdded = false;
+  loading: boolean = false;
+  mode: string = 'over';
+  quickPrompts: any[] = [];
+  thumbsDownMsgIndex = 0;
+  userName: string = '';
+  showStartAgain: boolean = false;
+  isIOSDevice: boolean = false;
+  showFeedBackIconsIndex: number | null = null;
+  temperature: number = 1;
+  speakers = [];
+  environment: {
+    USERS_API;
+    BASE_URL;
+    AGENTS_API;
+  };
+  pendingRequests: any;
+  myConnections: any;
+  conversationKey: string;
+  conSessionKey: string = '';
+  isFetchDataFor: boolean;
+  is401: boolean;
+  msg: any;
+  chat: any;
+  isWorkflowOpen: boolean;
+  orgWorkflows: any;
+  openWorkflowInput: boolean;
+  selectedWorkflow: any;
+  workflowForm: any;
+  currentWorkflowActionProgress: number = 0;
+  currentWorkflowAction: string = '';
+  executingWorkflow: boolean;
+  workflowExecutionDetails: any;
+  showWorkflowExecutionDetails: any;
+  currentWorkflowExecutionDetails: any;
+
+  speechConfig: SpeechSDK.SpeechConfig;
+  recognizer: SpeechSDK.SpeechRecognizer;
+  recognizedText: string = '';
+  authorizationToken: string = '';
+  region: string = 'westeurope'; // Set your Azure region here
+  isRecording: boolean;
+
+  constructor(
+    private fb: FormBuilder,
+    private botService: BotsService,
+    private cdr: ChangeDetectorRef,
+    private http: HttpClient,
+    private sanitizer: DomSanitizer,
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private socketService: SocketService,
+    private conversationService: ConversationService, // private platform: Platform
+  private translationService: TranslationService
+  ) {
+    this.chatMain = new ElementRef(null);
+
+    // if (this.platform.IOS) {
+    //   this.isIOSDevice = true;
+    // }
+  }
+getTranslation(key: string) {
+    return this.translationService.getTranslation(key);
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    // Handle eventId changes to update translation service
+    if (changes.eventId && changes.eventId.currentValue) {
+      this.translationService.setEventId(changes.eventId.currentValue);
+    }
+
+    if (changes.s27Token) {
+      if (changes.s27Token.currentValue != changes.s27Token.previousValue) {
+        this.s27Token = changes.s27Token.currentValue;
+
+        console.log('isFetchDataFor: ', this.isFetchDataFor);
+        console.log('msg: ', this.msg);
+        console.log('chat: ', this.chat);
+        if (this.is401) {
+          if (this.isFetchDataFor) {
+            this.fetchDataFor(this.msg, this.chat);
+          } else {
+            this.fetchData(this.msg);
+          }
+        }
+      }
+    }
+
+    if (changes.orgId) {
+      if (
+        changes.orgId.currentValue != changes.orgId.previousValue &&
+        changes.orgId.currentValue
+      ) {
+        this.initializeSocket();
+
+      }
+    }
+  }
+
+
+  domainAuthorityValue: any = "prod-lite";
+
+  ngOnInit(): void {
+    // Set the eventId in translation service to get the correct language from localStorage
+    if (this.eventId) {
+      this.translationService.setEventId(this.eventId);
+    }
+
+    this.environment = this.isDev ? dev_environment : prod_environment;
+
+    const domain = window.location.hostname;
+
+    // Determine the header value based on the domain
+
+
+    if (domain.includes('pre-app.social27.com')) {
+      this.domainAuthorityValue = 'pre-prod-lite';
+    } else if (domain.includes('app.social27.com')) {
+      this.domainAuthorityValue = 'prod-lite';
+    } else if (domain.includes('hivegpt.io')) {
+      this.domainAuthorityValue = 'hivegpt';
+    }
+
+    // this.fetchMyConnections().subscribe();
+    // this.fetchPendingRequests().subscribe();
+
+    this.changeTemperature(this.temperature);
+    this.fetchBotConfig().subscribe(
+      (res) => {
+        this.cdr.markForCheck();
+
+        this.fetchChatHistory().subscribe(
+          (response) => {
+            this.loading = false;
+            this.mapChatHistory(response);
+            this.cdr.markForCheck();
+          },
+          (err) => {
+            console.error('Error fetching chat history:', err);
+          }
+        );
+      },
+      (err) => {
+        console.error('Error fetching chat history:', err);
+      }
+    );
+    // this.fetchAgents();
+    // this.fetchEditorContent();
+    this.cdr.markForCheck();
+    // this.initializeSocket();
+    this.botService.fetchSpeechAuthorizationToken(this.botId, this.apiKey, this.domainAuthorityValue).subscribe((token) => {
+      this.authorizationToken = token;
+      this.initializeSpeechRecognizer(token);
+    });
+  }
+
+  private eventSubscription: Subscription;
+  initializeSocket() {
+    try {
+      this.socketService.disconnectSocketConnection();
+    } catch (error) { }
+    setTimeout(() => {
+      this.socketService.connectSocketConnection();
+      setTimeout(() => {
+        console.log('YES INIT');
+        const conversation_id = this.conversationService.getKey(this.botId);
+
+        this.socketService.registerUserSpecificHiveSocket(
+          this.botId,
+          conversation_id,
+          this.orgId
+        );
+        setTimeout(() => {
+          this.listenSockets();
+        }, 300);
+      }, 200);
+    }, 300);
+  }
+
+  subscriptionNew: any;
+  socketData: any;
+
+  listenSockets() {
+    if (this.eventSubscription) {
+      this.eventSubscription.unsubscribe();
+    }
+    console.log('Listen Socket');
+    this.eventSubscription = this.conversationService
+      .getUserSpecificNotification()
+      .subscribe(
+        (res) => {
+          console.log('Listen Socket response');
+          console.log(res);
+          // Check if OtherFields exists in the response
+          if (res?.m?.OtherFields?.workflow_id) {
+            const {
+              percentage,
+              output,
+              action_name,
+              current_action_name,
+              workflow_execution_id,
+              time_stamp,
+            } = res?.m?.OtherFields;
+
+            this.currentWorkflowActionProgress = percentage;
+            this.currentWorkflowAction = action_name;
+
+            const actionIndex = this.workflowExecutionDetails.Actions.findIndex(
+              (a) => a.Name == current_action_name
+            );
+
+            if (actionIndex !== -1) {
+              this.workflowExecutionDetails.Actions[actionIndex][
+                'Output'
+              ] = output;
+              this.workflowExecutionDetails.Actions[actionIndex][
+                'InsertTimeStamp'
+              ] = formatTimeStamps(this.timezone, time_stamp);
+            } else {
+              console.error(`Action with name ${action_name} not found`);
+            }
+
+            this.currentWorkflowExecutionDetails = this.workflowExecutionDetails;
+
+            if (this.currentWorkflowActionProgress == 100) {
+              this.chatLog[this.chatLog.length - 1][
+                'WorkflowExecutionId'
+              ] = workflow_execution_id;
+              this.isChatingWithAi = false;
+              this.executingWorkflow = false;
+            }
+
+            this.cdr.detectChanges();
+          } else if (res?.m?.OtherFields) {
+            const {
+              conversation_id,
+              bot_id,
+              message_id,
+              answer,
+              web_results,
+              search_results,
+              graphs,
+              execution_graphs,
+              suggestions,
+            } = res?.m?.OtherFields;
+            console.log('message_id1');
+            console.log(res?.m?.OtherFields);
+            var currentChatMessage = this.chatLog.find(
+              (p) => p._id == message_id
+            );
+            console.log(this.chatLog);
+            if (!currentChatMessage) {
+              console.log('message_id2');
+              console.log(message_id);
+              currentChatMessage = {
+                _id: message_id,
+                type: 'ai',
+                time: formatNow(this.timezone),
+              };
+
+              this.chatLog.push(currentChatMessage);
+
+              this.showFeedBackIconsIndex = this.chatLog.length - 1;
+              console.log('message_id3');
+              console.log(message_id);
+              this.cdr.detectChanges();
+            }
+
+            // Handle the fields based on their presence
+            if (search_results && Array.isArray(search_results)) {
+              console.log('Online Search Terms:', search_results);
+              currentChatMessage.searchTerms = search_results;
+              this.cdr.detectChanges();
+            }
+
+            if (web_results && Array.isArray(web_results)) {
+              console.log('Web Results:', web_results);
+              currentChatMessage.sourcesList = web_results;
+              currentChatMessage.displayedSources = web_results?.slice(0, 3); // First 3 cards
+              currentChatMessage.remainingSources = web_results?.slice(3); // Remaining items
+              this.cdr.detectChanges();
+            }
+
+            if (answer) {
+              this.isChatingWithAi = false;
+              console.log('Answer:', answer);
+
+              currentChatMessage.message = this.processMessageForDisplay(
+                answer
+              );
+              this.cdr.detectChanges();
+              this.scrollToBottom();
+            }
+
+            if (graphs && Array.isArray(graphs)) {
+              console.log('Graphs:', graphs);
+              currentChatMessage.graphs = graphs;
+              this.cdr.detectChanges();
+            }
+
+            if (execution_graphs && Array.isArray(execution_graphs)) {
+              console.log('Execution Graphs:', execution_graphs);
+              currentChatMessage.executionGraphs = execution_graphs;
+              this.cdr.detectChanges();
+            }
+
+            if (suggestions && Array.isArray(suggestions)) {
+              console.log('suggestions:', suggestions);
+              currentChatMessage.relatedListItems = suggestions;
+              this.cdr.detectChanges();
+              // Process online search terms as needed
+            }
+
+            // Add any other fields and their processing here
+          } else {
+            console.warn('OtherFields is missing in the response');
+          }
+        },
+        (err) => {
+          this.eventSubscription.unsubscribe();
+          console.error('Error in fetching data from socket', err);
+        }
+      );
+  }
+
+  initializeSocketAndListen() { }
+  handleEvent(data: any, type: string) {
+    switch (type) {
+      case 'webresult':
+        break;
+      case 'answer':
+        break;
+      case 'graph':
+        break;
+      default:
+        break;
+    }
+  }
+  ngOnDestroy(): void {
+    if (this.eventSubscription) {
+      this.eventSubscription.unsubscribe();
+    }
+    this.socketService.disconnectSocketConnection();
+    //this.socketService.close();
+  }
+  changeTemperature(newTemperature: number) {
+    if (this.loading) return;
+    this.temperature = newTemperature;
+    const wrapper = document.querySelector('.hivegpt-chat-wrapper');
+    // Remove existing theme classes from body
+    wrapper?.classList.remove('creative', 'balanced', 'precise');
+
+    switch (newTemperature) {
+      case 0:
+        wrapper?.classList.add('creative');
+        break;
+      case 1:
+        wrapper?.classList.add('balanced');
+        break;
+      case 2:
+        wrapper?.classList.add('precise');
+        break;
+      default:
+        break;
+    }
+  }
+
+  onStartAgain() {
+    if (this.loading) return;
+    this.showStartAgain = false;
+    this.chatLog = [];
+    this.chatLog.push({
+      type: 'ai',
+      message: this.greetingMsg,
+
+      time: formatNow(this.timezone),
+    });
+    this.archieveMessages().subscribe();
+  }
+
+  archieveMessages() {
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': this.apiKey,
+      'hive-bot-id': this.botId,
+      'domain-authority': this.domainAuthorityValue
+    });
+    const url = `${this.environment.BASE_URL}/bot/clear-history/${this.botId}/${this.userId}`;
+    return this.http.post(url, { headers }).pipe(
+      switchMap((res: any) => {
+        return of(res);
+      }),
+      catchError((error) => {
+        return of(null);
+      })
+    );
+  }
+
+  triggerSupport() {
+
+    this.openSupport.emit();
+  }
+  fetchBotConfig() {
+    this.loading = true;
+    const headers = new HttpHeaders({
+      'x-api-key': this.apiKey,
+      'hive-bot-id': this.botId,
+      'domain-authority': this.domainAuthorityValue
+    });
+    const url = `${this.environment.BASE_URL}/bots?bot_id=${this.botId}`;
+    return this.http.get(url, { headers }).pipe(
+      switchMap((res: any) => {
+        this.botName =this.getTranslation( res.Name);
+        this.botIcon = res.Icon;
+        this.botSkills = res?.Skills;
+        this.greetingMsg = res.Greeting;
+
+        this.thumbsDownMessages = res?.NegativeResponses?.length
+          ? res.NegativeResponses
+          : [
+           this.getTranslation( `We are sorry we've not been able to answer your question`),
+          ];
+        this.quickPrompts = res.QuickPrompts;
+        this.cdr.markForCheck();
+        this.loading = false;
+        return of(res);
+      }),
+      catchError((error) => {
+        console.error('Error fetching chatbot config: ', error);
+        this.loading = false;
+        return of(null);
+      })
+    );
+  }
+
+  fetchChatHistory(): Observable<any> {
+    this.loading = true;
+
+    this.conversationKey = this.conversationService.getKey(this.botId, false);
+    this.conSessionKey = this.conversationService.getSessionKey(this.botId, false);
+    const url = `${this.environment.BASE_URL}/conversations/${this.conversationKey}?session_id=${this.conSessionKey}`;
+    const headers = new HttpHeaders({
+      accept: 'application/json',
+      'x-api-key': this.apiKey,
+      'hive-bot-id': this.botId,
+      'domain-authority': this.domainAuthorityValue
+    });
+
+    return this.http
+      .get(url, { headers })
+      .pipe(catchError(this.handleError<any>('fetchConversation')));
+  }
+
+  private handleError<T>(operation = 'operation', result?: T) {
+    return (error: any): Observable<T> => {
+      console.error(`${operation} failed: ${error.message}`);
+      return of(result as T);
+    };
+  }
+  // fetchChatHistory() {
+  //   this.loading = true;
+  //   const headers = new HttpHeaders({
+  //     'Content-Type': 'application/json',
+  //     'x-api-key': this.apiKey,
+  //   });
+  //   return this.http
+  //     .get(`${this.environment.BASE_URL}/conversations/${this.conversationKey}`, { headers })
+  //     .pipe(
+  //       switchMap((res: any) => {
+  //         this.loading = false;
+  //         return of(res);
+  //       }),
+  //       catchError((error: any) => {
+  //         console.error('Error fetching chat history: ', error);
+  //         this.loading = false;
+  //         return of(null);
+  //       })
+  //     );
+  // }
+
+  mapChatHistory(chats: any) {
+    this.chatLog.push({
+      type: 'ai',
+      message: this.greetingMsg,
+      time: formatNow(this.timezone),
+    });
+    if (chats && chats?.Messages?.length) {
+      chats?.Messages.forEach((chat: any) => {
+        if (chat.Type == 'user') {
+          this.chatLog.push({
+            type: 'user',
+            message: this.processMessageForDisplay(chat.Text),
+            time: formatTimeStamps(this.timezone, chat.InsertTimestamp),
+            copied: false,
+            isCollapsedTrue: false,
+            WorkflowExecutionId: chat.WorkflowExecutionId,
+            _id: chat._id
+          });
+        }
+        if (chat.Type == 'ai') {
+          var sourcesList = chat.WebLinks || [];
+          var displayedSources = chat.WebLinks.slice(0, 3); // First 3 cards
+          var remainingSources = chat.WebLinks.slice(3); // Remaining items
+
+          this.chatLog.push({
+            type: 'ai',
+            message: this.processMessageForDisplay(chat.Text),
+            executionGraphs: chat.ExecutionGraphs,
+            graphs: chat.Graphs,
+            searchTerms: chat.SearchTerms,
+            sourcesList: sourcesList,
+            displayedSources: displayedSources,
+            remainingSources: remainingSources,
+            time: formatTimeStamps(this.timezone, chat.InsertTimestamp),
+            copied: false,
+            isCollapsedTrue: false,
+            _id: chat._id
+          });
+          this.showFeedBackIconsIndex = this.chatLog.length - 1;
+        }
+      });
+      this.showStartAgain = true;
+    }
+    this.scrollToBottom();
+    this.cdr.markForCheck();
+  }
+
+  processMessage(message: string): SafeHtml {
+    if (!message || !(message?.length > 0)) {
+      return '';
+    }
+
+    // console.log('here is my message')
+    // console.log(message);
+
+    message = message.trim();
+
+    const markdownLinkRegex = /\[([^[]+)]\(([^)]+)\)/g;
+    const urlRegex = /(?<!href=")\bhttps?:\/\/\S+(?<![.,])/gi;
+
+    if (markdownLinkRegex.test(message)) {
+      const html = message.replace(
+        markdownLinkRegex,
+        '<a href="$2" target="_blank">$1</a>'
+      );
+      //console.log('Sanitized message: ', message);
+      return this.sanitizeHtml(html);
+    }
+
+    if (urlRegex.test(message)) {
+      const html = message.replace(
+        urlRegex,
+        '<a href="$&" target="_blank">$&</a>'
+      );
+      // console.log('Sanitized message: ', message);
+      return this.sanitizeHtml(html);
+    }
+
+    message = message.replace(/(?:\r\n|\r|\n)/g, '<br>');
+
+    message = message.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    // Convert Markdown headers to HTML headers
+    message = message.replace(/^(#{1,6})\s+(.*)$/gm, (match, hashes, text) => {
+      const level = hashes.length;
+      return `<h${level}>${text}</h${level}>`;
+    });
+
+    this.cdr.markForCheck();
+    const sanitizedMessage = this.sanitizeHtml(message);
+    return sanitizedMessage;
+  }
+
+  ngAfterViewChecked() {
+    const feedbackLinks = this.elementRef.nativeElement.querySelectorAll(
+      '.feedback-link'
+    );
+    feedbackLinks.forEach((link: any) => {
+      link.addEventListener(
+        'click',
+        this.onFeedbackClick.bind(this, 'zendesk')
+      );
+    });
+    // if (this.elementRef.nativeElement.querySelector('.feedback-link')) {
+    //   this.elementRef.nativeElement
+    //     .querySelector('.feedback-link')
+    //     .addEventListener('click', this.onFeedbackClick.bind(this, 'zendesk'));
+    // }
+  }
+
+  sanitizeHtml(html: string): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+
+  onFeedbackClick(value: string) {
+    this.feedbackEvent.emit(value);
+  }
+
+  onClose() {
+    this.renderer.removeClass(document.body, this.bodyOverflowClass);
+    this.onCloseEvent.emit();
+  }
+
+  sendMessageWithTile(prompt: string) {
+    this.input = prompt;
+    this.fetchData();
+    this.scrollToBottom();
+  }
+  isChatingWithAi = false;
+  fetchData(msg = null) {
+    this.input = msg || this.input?.trim();
+    this.msg = this.input;
+    if (!this.input || this.loading) {
+      return;
+    }
+
+    this.chatLog.push({
+      type: 'user',
+      message: this.processMessageForDisplay(this.input),
+      time: formatNow(this.timezone),
+      copied: false,
+      isCollapsedTrue: false,
+    });
+
+    try {
+      const textarea = this.myInput.nativeElement;
+      textarea.style.height = 'hidden'; // Reset the height
+      textarea.style.height = `62px`;
+    } catch (error) { }
+    this.cdr.markForCheck();
+
+    this.aiResponse = '';
+    this.isChatingWithAi = true;
+
+    this.makeAskRequest(this.input, this.agents, this.conversationKey);
+  }
+  fetchDataFor(msg, chat) {
+    const inputMsg = msg?.trim();
+    if (!inputMsg || this.loading) {
+      return;
+    }
+    try {
+      chat.relatedListItems = [];
+      this.cdr.detectChanges();
+    } catch (error) { }
+
+    this.scrollToBottom();
+    this.chatLog.push({
+      type: 'user',
+      message: this.processMessageForDisplay(inputMsg),
+      time: formatNow(this.timezone),
+      copied: false,
+      isCollapsedTrue: false,
+    });
+
+    this.cdr.markForCheck();
+
+    this.aiResponse = '';
+    this.isChatingWithAi = true;
+
+    this.makeAskRequest(inputMsg, this.agents, this.conversationKey, msg, chat);
+  }
+  fetchSmallTalk() {
+    this.loading = true;
+    this.cdr.markForCheck();
+
+    const url = `${this.environment.BASE_URL}/bot/small-talk/${this.botId}/${this.userId}`;
+
+    this.http
+      .get<{ smallTalk: string }>(url, {
+        headers: {
+          'x-api-key': this.apiKey,
+          'hive-bot-id': this.botId,
+          'domain-authority': this.domainAuthorityValue
+        },
+      })
+      .pipe(
+        catchError((error) => {
+          console.error('Error while fetching small talk:', error);
+
+          return of(null);
+        })
+      )
+      .subscribe((response) => {
+        this.loading = false;
+        this.cdr.markForCheck();
+
+        if (!response) {
+          return;
+        }
+
+        if (response && response.smallTalk) {
+          this.chatLog.push({
+            type: 'ai',
+            message: this.processMessage(response.smallTalk),
+            time: formatNow(this.timezone),
+            isFeedbackMsg: true,
+          });
+          this.showFeedBackIconsIndex = this.chatLog.length - 2;
+          // this.scrollToBottom();
+          this.cdr.markForCheck();
+        }
+      });
+  }
+
+  readAllChunks = (stream: any) => {
+    const reader = stream.getReader();
+    const allSuggestions: string[] = [];
+
+    reader.closed.catch((err: any) => {
+      if (err) {
+        console.error('Error reading stream: ', err);
+      }
+
+      this.isChatingWithAi = false;
+      this.scrollToBottom();
+      return;
+    });
+
+    return new ReadableStream({
+      start: (controller) => {
+        return this.pump(controller, reader, allSuggestions);
+      },
+    });
+  };
+
+  pump(controller: any, reader: any, allSuggestions: string[]) {
+    reader.read().then(({ done, value }: any) => {
+      const lastItem = this.chatLog[this.chatLog.length - 1];
+
+      if (done) {
+        lastItem.message = this.processMessageForDisplay(lastItem.message);
+        this.chatLog.pop();
+        this.chatLog.push(lastItem);
+        if (allSuggestions?.length) {
+          this.chatLog.push({
+            type: 'suggestions',
+            suggestions: allSuggestions,
+          });
+        }
+
+        controller.close();
+        this.isChatingWithAi = false;
+        // this.scrollToBottom();
+        this.cdr.markForCheck();
+        this.showStartAgain = true;
+
+        // setTimeout(() => {
+        //   this.fetchSmallTalk();
+        // },1000)
+        return;
+      }
+
+      let decodedChunk = this.decoder.decode(value, { stream: true });
+      this.aiResponse += decodedChunk;
+      if (lastItem.type === 'ai') {
+        const suggestionsMatch = this.aiResponse.match(/<sug>(.*?)<\/sug>/g);
+        if (suggestionsMatch) {
+          suggestionsMatch.forEach((match) => {
+            this.aiResponse = this.aiResponse.replace(match, '');
+            allSuggestions.push(match?.replace(/<\/?sug>/g, ''));
+          });
+        }
+
+        lastItem.message = this.aiResponse;
+        this.cdr.markForCheck();
+      } else {
+        this.isChatingWithAi = false;
+
+        let aiFormattedData: any;
+
+        try {
+          console.log('parsing json ');
+          aiFormattedData = JSON.parse(JSON.parse(this.aiResponse));
+        } catch (e) {
+          try {
+            console.log('parsing json 2');
+            aiFormattedData = JSON.parse(this.aiResponse);
+          } catch (e) { }
+        }
+
+        console.log('parsing json done');
+
+        if (aiFormattedData && aiFormattedData?.section_id?.length > 0) {
+          if (
+            aiFormattedData.section_id == 'company_search' ||
+            aiFormattedData.section_id == 'user_search' ||
+            aiFormattedData.section_id == 'industry_company_search'
+          ) {
+            this.fetchMyConnections().subscribe();
+            this.fetchPendingRequests().subscribe();
+          }
+
+          if (aiFormattedData.section_id == this.myUpcomingSessionAction) {
+            var speakerIds = [];
+            aiFormattedData.content?.forEach((session) => {
+              speakerIds = [...speakerIds, ...session.speakers];
+            });
+
+            if (speakerIds?.length > 0) this.getSpeakersByStaffIds(speakerIds);
+          }
+
+          if (
+            aiFormattedData.section_id == this.addToMyAgendaAction &&
+            aiFormattedData.content?.length > 0
+          ) {
+            this.openPage.next({
+              sectionId: aiFormattedData.section_id,
+              sessionIds: aiFormattedData.content,
+            });
+          }
+
+          if (aiFormattedData.section_id == this.connectOrFollowAction) {
+            let usersLen = aiFormattedData.content?.length;
+            if (usersLen > 1) {
+              this.openPage.next({
+                sectionId: 'open_networking_drawer',
+                search: aiFormattedData.content,
+              });
+            } else if (usersLen == 1) {
+              this.openPage.next({
+                sectionId: aiFormattedData.section_id,
+                connetUserIds: [aiFormattedData.content[0].userId],
+              });
+            }
+          }
+
+          if (aiFormattedData.is_open_page == 'true') {
+            this.openPage.next({
+              sectionId: aiFormattedData.section_id,
+              search: aiFormattedData.content,
+            });
+
+            if (this.isMobileBrowser()) {
+              aiFormattedData.message +=
+                '\n\n' + '<a id="closeBotNow">Click Here</a> to see results.';
+            }
+          }
+
+          this.chatLog.push({
+            type: 'ai',
+            message: aiFormattedData.message,
+            action: aiFormattedData,
+            time: formatNow(this.timezone),
+          });
+
+          if (this.isMobileBrowser()) {
+            setTimeout(() => {
+              this.addCloseBotClickEvent();
+            }, 500);
+          }
+
+          this.aiResponse = '';
+        } else {
+          this.chatLog.push({
+            type: 'ai',
+            message: this.aiResponse,
+            time: formatNow(this.timezone),
+          });
+        }
+
+        this.showFeedBackIconsIndex = this.chatLog.length - 1;
+        this.cdr.markForCheck();
+      }
+
+      this.scrollToBottom();
+
+      // Enqueue the next data chunk into our target stream
+      controller.enqueue(value);
+      this.pump(controller, reader, allSuggestions);
+    });
+  }
+
+  submitFeedback(flag: boolean, message) {
+    console.log(message);
+
+    this.feedbackDone = true;
+    this.showFeedBackIconsIndex = null;
+    const conversation_id = this.conversationService.getKey(this.botId);
+    const url = `${this.environment.AGENTS_API}/Conversation/coPilot/${this.botId}/conversation/${conversation_id}/helpful-response`;
+    fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'apiKey': 'Conversation_WIz/qAm+EEmfOkFaUA/weA==',
+        'hive-bot-id': this.botId,
+        'domain-authority': this.domainAuthorityValue
+      },
+      body: JSON.stringify({ messageId: message._id, isHelpful: flag }),
+    }).then(() => {
+      if (flag) {
+        this.chatLog.push({
+          type: 'ai',
+          message:
+            this.thumbsUpMessage ||
+            this.getTranslation('May I assist you with anything else'),
+          time: formatNow(this.timezone),
+          isFeedbackMsg: true,
+        });
+
+        this.scrollToBottom();
+        this.cdr.markForCheck();
+        this.feedbackDone = false;
+        this.showFeedBackIconsIndex = null;
+        return;
+      }
+
+      this.chatLog.push({
+        type: 'ai',
+        message: this.processMessage(
+          this.thumbsDownMessages[this.thumbsDownMsgIndex]
+        ),
+        time: formatNow(this.timezone),
+        isFeedbackMsg: true,
+      });
+      this.thumbsDownMsgIndex =
+        (this.thumbsDownMsgIndex + 1) % this.thumbsDownMessages.length;
+      this.scrollToBottom();
+      this.cdr.markForCheck();
+      setTimeout(() => {
+        const supportLink = document.getElementById('supportLink88');
+        if (supportLink) {
+          supportLink.addEventListener('click', this.triggerSupport.bind(this));
+
+        }
+      }, 200);
+      this.feedbackDone = false;
+      this.showFeedBackIconsIndex = null;
+    });
+  }
+  handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      // Prevent default behavior (new line)
+      event.preventDefault();
+      // Call your submit function
+      this.handleSubmit(event);
+    }
+  }
+  handleSubmit(event) {
+    this.fetchData();
+    this.scrollToBottom();
+
+  }
+
+  handleUpClick(idx: any) {
+    if (this.feedbackDone) {
+      return;
+    }
+
+    this.submitFeedback(true, this.chatLog[idx]);
+    this.chatLog[idx].liked = !this.chatLog[idx].liked;
+
+    if (this.chatLog[idx].unliked) {
+      this.chatLog[idx].unliked = !this.chatLog[idx].unliked;
+    }
+
+    this.cdr.markForCheck();
+  }
+
+  handleDownClick(idx: any) {
+    if (this.feedbackDone) return;
+    this.submitFeedback(false, this.chatLog[idx]);
+    this.chatLog[idx].unliked = !this.chatLog[idx].unliked;
+    if (this.chatLog[idx].liked)
+      this.chatLog[idx].liked = !this.chatLog[idx].liked;
+  }
+  // handleCopyClick(index: any) {
+  //   // Copy the message to the clipboard
+  //   const contentToCopy = this.chatLog[index].message;
+  //   console.log('contentToCopy');
+  //   console.log(contentToCopy);
+  //   navigator.clipboard.writeText(contentToCopy).then(() => {
+  //     // Indicate that the message was copied
+  //     this.chatLog[index].copied = true;
+  //     this.cdr.detectChanges();
+  //     // Reset the copied state after a delay
+  //     setTimeout(() => {
+  //       this.chatLog[index].copied = false;
+  //       this.cdr.detectChanges();
+  //     }, 2000); // Reset after 2 seconds
+  //   });
+  // }
+  copyText(id, index) {
+    // Get the text element
+    var textElement = document.getElementById(id);
+
+    // Create a temporary textarea element to copy the text
+    var tempTextArea = document.createElement('textarea');
+    tempTextArea.value = textElement.innerText;
+
+    // Append the textarea to the body (necessary for the execCommand to work)
+    document.body.appendChild(tempTextArea);
+
+    // Select the text inside the textarea
+    tempTextArea.select();
+
+    // Copy the text to the clipboard
+    document.execCommand('copy');
+
+    // Remove the temporary textarea
+    document.body.removeChild(tempTextArea);
+
+    // Optionally, you can alert the user or change the button text to indicate the copy was successful
+    // alert('Text copied to clipboard!');
+
+    this.chatLog[index].copied = true;
+    this.cdr.detectChanges();
+    // Reset the copied state after a delay
+    setTimeout(() => {
+      this.chatLog[index].copied = false;
+      this.cdr.detectChanges();
+    }, 2000); // Reset after 2 seconds
+  }
+  handleCopyClick(index: any) {
+    // Copy the message to the clipboard
+    const contentToCopy = this.chatLog[index].message;
+    const resutlt = this.copyText('messageText_' + index, index);
+  }
+
+  sanitizeHTML(html: string): string {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+
+    // Create a new document fragment to hold the simplified content
+    const fragment = document.createDocumentFragment();
+
+    // Append the children of the body of the parsed document to the fragment
+    Array.from(doc.body.childNodes).forEach((node) => {
+      fragment.appendChild(node.cloneNode(true));
+    });
+
+    // Create a new div element to hold the simplified HTML
+    const simplifiedDiv = document.createElement('div');
+    simplifiedDiv.appendChild(fragment);
+
+    // Remove complex tags or attributes as needed
+    // Example: remove scripts
+    simplifiedDiv
+      .querySelectorAll('script')
+      .forEach((script) => script.remove());
+
+    // Return the simplified HTML as a string
+    return simplifiedDiv.innerHTML;
+  }
+
+  currentMessageForEditor: any = '';
+  currentIndexForEditor: any = -1;
+  handleEditorClick(index: any) {
+    if (this.currentIndexForEditor == -1) {
+      this.currentIndexForEditor = index;
+      this.currentMessageForEditor = this.sanitizeHTML(
+        this.chatLog[index].message
+      );
+      this.currentMessageForEditor = this.currentMessageForEditor.replace(
+        'SafeValue must use [property]=binding:',
+        ''
+      );
+
+      this.cdr.detectChanges();
+    } else {
+      if (this.currentIndexForEditor == index) {
+        this.currentMessageForEditor += this.sanitizeHTML(
+          this.chatLog[index].message
+        );
+        this.currentMessageForEditor = this.currentMessageForEditor.replace(
+          'SafeValue must use [property]=binding:',
+          ''
+        );
+        this.cdr.detectChanges();
+      } else {
+        this.currentIndexForEditor = index;
+        this.currentMessageForEditor = this.sanitizeHTML(
+          this.chatLog[index].message
+        );
+        this.currentMessageForEditor = this.currentMessageForEditor.replace(
+          'SafeValue must use [property]=binding:',
+          ''
+        );
+        this.cdr.detectChanges();
+      }
+    }
+    this.chatLog[index].isEditor = true;
+    this.cdr.detectChanges();
+    // Reset the copied state after a delay
+    setTimeout(() => {
+      this.chatLog[index].isEditor = false;
+      this.cdr.detectChanges();
+    }, 2000); // Reset after 2 seconds
+    this.editorsDrawer.open();
+    const button = document.getElementById('botcloseplaygroundbutton');
+    if (button) {
+      button.style.display = 'none';
+    }
+    this.cdr.detectChanges();
+  }
+  scrollToBottom() {
+    let counter = 0;
+    const interval = setInterval(() => {
+      this.chatMain.nativeElement.scrollTop = this.chatMain.nativeElement.scrollHeight;
+      if (counter++ > 5) clearInterval(interval);
+    }, 5);
+  }
+
+  handleAction(action: any) {
+    console.info('incoming action from the chatbot AI');
+    console.info(action);
+
+    if (action?.content) {
+    }
+  }
+
+  ngAfterViewInit() {
+    // Check if the drawer is initially open and apply overflow hidden to body if so
+    if (this.drawer.opened) {
+      this.setBodyOverflow();
+    }
+
+    // Listen to changes in the drawer being opened or closed
+    this.drawer.openedChange.subscribe((opened: boolean) => {
+      if (opened) {
+        this.setBodyOverflow();
+      } else {
+        this.removeBodyOverflow();
+      }
+    });
+
+    this.drawer.openedChange.subscribe((opened) => {
+      if (opened) {
+        setTimeout(() => {
+          if (this.myTextarea && this.myTextarea.nativeElement) {
+            this.myTextarea.nativeElement.focus(); // Focus on the textarea
+          }
+        });
+      }
+    });
+
+
+
+  }
+
+  private setBodyOverflow() {
+    this.renderer.addClass(document.body, this.bodyOverflowClass);
+  }
+
+  private removeBodyOverflow() {
+    this.renderer.removeClass(document.body, this.bodyOverflowClass);
+  }
+
+  getSpeakersByStaffIds(ids) {
+    const url = `${this.environment.USERS_API}/events/${this.eventId}/users/get-by-staff-ids`;
+    fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + 'your_token_here',
+      },
+      body: JSON.stringify(ids),
+    })
+      .then((response) => {
+        if (response.ok) {
+          return response.json(); // Parse the JSON body of the response
+        } else {
+          throw new Error('Network response was not ok.');
+        }
+      })
+      .then((data) => {
+        if (data?.length > 0) {
+          data.forEach((speaker) => {
+            this.speakers[speaker.id] = speaker;
+          });
+
+          this.cdr.markForCheck();
+        }
+      })
+      .catch((err) => {
+        console.error('Error fetching data:', err);
+        this.loading = false;
+      });
+  }
+
+  performSessionAction(sessionId, action) {
+    this.sessionActions.next({
+      sessionId,
+      action,
+    });
+  }
+
+  addCloseBotClickEvent() {
+    const element = this.elementRef.nativeElement.querySelector('#closeBotNow');
+    if (element) {
+      this.renderer.listen(element, 'click', () => {
+        this.closeBot.next();
+      });
+    }
+  }
+
+  isMobileBrowser() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
+  }
+
+  connectToUser(userId) {
+    this.connectWithUser.emit({
+      connect: !this.canDisconnect(userId),
+      userId,
+    });
+
+    setTimeout(() => {
+      this.fetchMyConnections().subscribe((res) => {
+        this.cdr.markForCheck();
+      });
+      this.fetchPendingRequests().subscribe((res) => {
+        this.cdr.markForCheck();
+      });
+    }, 500);
+  }
+
+  scheduleMeetingWithUser(user) {
+    this.scheduleMeeting.emit(user);
+  }
+
+  canConnect(userId) {
+    return !(
+      this.canDisconnect(userId) ||
+      this.pendingRequests.find((a) => a == userId)
+    );
+  }
+
+  canDisconnect(userId) {
+    return this.myConnections.find((conn) => conn.userId == userId);
+  }
+
+  fetchPendingRequests() {
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      apiKey: this.autogenKey,
+    });
+    return this.http
+      .get(
+        `${this.environment.USERS_API}/events/${this.eventId}/connection-requests/autogen/pending-sent-requests?userId=${this.userId}`,
+        { headers }
+      )
+      .pipe(
+        switchMap((res: any) => {
+          this.pendingRequests = res;
+          this.cdr.markForCheck();
+          return of(res);
+        }),
+        catchError((error: any) => {
+          console.error('Error fetching pending requests: ', error);
+          return of(null);
+        })
+      );
+  }
+
+  fetchMyConnections() {
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      apiKey: this.autogenKey,
+    });
+    return this.http
+      .get(
+        `${this.environment.USERS_API}/events/${this.eventId}/users-connections/autogen?userId=${this.userId}`,
+        { headers }
+      )
+      .pipe(
+        switchMap((res: any) => {
+          this.myConnections = res;
+          this.cdr.markForCheck();
+          return of(res);
+        }),
+        catchError((error: any) => {
+          console.error('Error fetching pending requests: ', error);
+          return of(null);
+        })
+      );
+  }
+
+  isDropdownOpen: boolean = false;
+  agents: any;
+  selectedAgents = [];
+  allSelected = false;
+  // Toggle the dropdown visibility
+  toggleDropdown() {
+    if (!this.agents)
+      this.fetchAgents();
+    this.isDropdownOpen = !this.isDropdownOpen;
+    this.cdr.detectChanges();
+  }
+
+  onSelectAll(event: Event): void {
+    this.agents?.forEach((agent) => (agent.selected = false));
+    this.cdr.detectChanges();
+  }
+
+  onAgentChange(agent: any): void {
+    //agent.selected = !agent.selected;
+    //console.log(agent);
+    let agentFound = this.agents.filter((p) => p.id == agent.id);
+    if (agentFound && agentFound.length > 0) {
+      agentFound[0].selected = !agentFound[0].selected;
+      this.cdr.detectChanges();
+    }
+    this.cdr.detectChanges();
+  }
+
+  areAllSelected(): boolean {
+    return this.agents?.every((agent) => !agent.selected);
+  }
+
+  getDropdownHeaderText(): string {
+    const selectedAgents = this.agents?.filter((agent) => agent.selected);
+    if (!selectedAgents) {
+      return 'All Agents';
+    } else {
+      if (selectedAgents && selectedAgents?.length === 0) {
+        return 'All Agents';
+      } else {
+        return selectedAgents?.length > 1
+          ? `${selectedAgents?.length} Agents Selected`
+          : `${selectedAgents?.length} Agent Selected`;
+      }
+    }
+  }
+  fetchAgents_http() {
+    this.loading = true;
+    const url = `${this.environment.AGENTS_API}/CoPilot/${this.botId}/active-agents`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+    });
+
+    return this.http.post(url, {}, { headers }).pipe(
+      switchMap((res: any) => {
+        if (res) {
+          this.agents = res.map((agent) => ({
+            ...agent,
+            selected: false,
+          }));
+        }
+        this.cdr.markForCheck();
+
+        return of(res);
+      }),
+      catchError((error) => {
+        console.error('Error fetching chatbot config: ', error);
+
+        return of(null);
+      })
+    );
+  }
+  isDocInEditMode = false;
+  documentContent: any;
+
+  conversationId: any;
+  isContentLoaded = false;
+
+  fetchContent_http() {
+    this.isDocInEditMode = false;
+    this.isContentLoaded = false;
+    console.log('API call function');
+    this.loading = true;
+    const conversation_id = this.conversationService.getKey(this.botId);
+    this.conversationId = conversation_id;
+    const url = `${this.environment.AGENTS_API}/ConversationDocuments?conversationId=${conversation_id}&botId=${this.botId}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      apiKey: 'WIz/qAm+EEmfOkFaUA/weA==',
+      'domain-authority': this.domainAuthorityValue
+    });
+
+    return this.http.get(url, { headers }).pipe(
+      switchMap((res: any) => {
+        if (res) {
+          this.isDocInEditMode = true;
+          this.documentContent = res;
+          console.log('Get API callled success');
+          this.isContentLoaded = true;
+          console.log(res);
+        }
+        this.cdr.markForCheck();
+
+        return of(res);
+      }),
+      catchError((error) => {
+        console.error('Error fetching chatbot config DJ: ', error);
+        this.isDocInEditMode = false;
+        this.isContentLoaded = true;
+
+        if (error?.status == 404) {
+          console.log('dash');
+          this.isDocInEditMode = false;
+          this.isContentLoaded = true;
+        }
+        return of(null);
+      })
+    );
+  }
+
+  fetchAgents() {
+    this.fetchAgents_http().subscribe();
+  }
+
+  fetchEditorContent() {
+    this.fetchContent_http().subscribe();
+  }
+
+  // events/${eventId}/users-connections
+  processMessageForDisplay(markdown: string): SafeHtml {
+    try {
+      // Create a custom renderer to modify <a> tags
+      const renderer = new marked.Renderer();
+
+      // Customize anchor tags to include target="_blank"
+      renderer.link = (href: string, title: string, text: string) => {
+        return `<a href="${href}" title="${title || ''
+          }" target="_blank">${text}</a>`;
+      };
+
+      // Parse the markdown content to HTML using marked with the custom renderer
+      const markdownContent = marked.parse(markdown, { renderer: renderer });
+
+      // Sanitize the parsed HTML using Angular's DomSanitizer
+      const sanitizedHtml = this.sanitizer.bypassSecurityTrustHtml(
+        markdownContent
+      );
+
+      // Return the safe HTML content for display
+      return sanitizedHtml;
+    } catch (error) {
+      console.error('Error processing markdown:', error);
+      return ''; // Return an empty string or handle the error appropriately
+    }
+  }
+
+  prepareHtml(markdown: string): string {
+    if (!markdown || !(markdown.length > 0)) {
+      console.error('Input Markdown is null or empty');
+      return '';
+    }
+
+    // Convert Markdown headers (### or ##) to <strong> for bold headings
+    let html = markdown.replace(/^(#{1,6})\s+(.*)$/gm, (match, hashes, text) => {
+      const level = hashes.length;
+      if (level === 3) {
+        return `<h3><strong>${text}</strong></h3>`;
+      } else if (level === 4) {
+        return `<h4><strong>${text}</strong></h4>`;
+      }
+      return `<strong>${text}</strong>`;
+    });
+
+    // Convert Markdown code blocks with language to preformatted HTML
+    html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
+      const escapedCode = this.escapeHtml(code);
+      const language = lang || 'plaintext';
+
+      // Create a copy button for the code block
+      return `
+      <div class="code-container">
+        <button id="copy-button" class="copy-button" (click)="copyToClipboard('\`${escapedCode}\`')">${this.getTranslation('Copy')}</button>
+        <pre class="code_block diff"><code class="language-${language}">${escapedCode}</code></pre>
+      </div>`;
+    });
+
+    // Convert inline code (wrapped in `backticks`) to inline <code> tags
+    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+    // Convert Markdown bold to HTML <strong>
+    html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+
+    // Convert numbered lists
+    html = html.replace(/^\d+\.\s+(.*)$/gm, '<li>$1</li>');
+
+    // Convert bullet point lists
+    html = html.replace(/^\-\s+(.*)$/gm, '<li>$1</li>');
+
+    // Convert Markdown links to HTML links
+    html = html.replace(/\[([^\]]+)]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+
+    // Convert new lines to <br> tags for paragraphs
+    html = html.replace(/(?:\r\n|\r|\n)/g, '<br>');
+
+    return html;
+  }
+
+  // Helper function to escape HTML characters for code blocks
+  escapeHtml(code: string): string {
+    return code
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+
+  // Function to copy text to clipboard
+  public copyToClipboard(text: string) {
+    navigator.clipboard.writeText(text).then(() => {
+      alert('Code copied to clipboard!');
+    }, (err) => {
+      console.error('Could not copy text: ', err);
+    });
+  }
+
+
+
+
+
+
+  isCollapsed = false;
+  isCollapsedForGraph = false;
+  isCollapsedForFGraph = false;
+  toggleCollapse() {
+    this.isCollapsed = !this.isCollapsed;
+    this.cdr.detectChanges();
+  }
+
+  toggleCollapseGraph() {
+    this.isCollapsedForGraph = !this.isCollapsedForGraph;
+    this.cdr.detectChanges();
+  }
+  toggleCollapseFGraph() {
+    this.isCollapsedForFGraph = !this.isCollapsedForFGraph;
+    this.cdr.detectChanges();
+  }
+  //   [
+  //   {
+  //     "title": "AI News January 2024: In-Depth and Concise - The AI Track",
+  //     "desc": "Each month, we compile significant news, trends, and happenings in AI, providing detailed summaries with key points in bullet form for concise yet complete understanding.",
+  //     "link": "https://theaitrack.com/ai-news-january-2024/"
+  //   },
+  //   {
+  //     "title": "Top AI News, January 2024 - Everypixel Journal",
+  //     "desc": "In this monthly roundup, we spotlight the top AI news stories from January, including the OpenAI vs. The New York Times Lawsuit.",
+  //     "link": "https://journal.everypixel.com/top-ai-news-january-2024"
+  //   },
+  //   {
+  //     "title": "AI News July 2024: In-Depth and Concise - The AI Track",
+  //     "desc": "This page features AI News for July 2024, highlighting significant events such as Canva acquiring Leonardo AI.",
+  //     "link": "https://theaitrack.com/ai-news-july-2024-in-depth-and-concise/"
+  //   },
+  //   {
+  //     "title": "January news roundup: What's new in the world of AI? - Pluralsight",
+  //     "desc": "OpenAI’s new GPT store, business-ready ChatGPT plans, and a predicted rise in AI-powered cybercrime.",
+  //     "link": "https://www.pluralsight.com/resources/blog/data/ai-this-month-january-2024"
+  //   },
+  //   {
+  //     "title": "AI News August 2024: In-Depth and Concise - The AI Track",
+  //     "desc": "This page features AI News for August 2024, with highlights such as Nvidia delaying the “Blackwell” B200 AI chips delivery.",
+  //     "link": "https://theaitrack.com/ai-news-august-2024-in-depth-and-concise-duplicate/"
+  //   }
+  // ]
+  dateTime = { now: new Date().toISOString() };
+  // Extracts the domain from a URL
+  getDomainName(url: string): string {
+    try {
+      const { hostname } = new URL(url);
+      return hostname.replace(/^www\./, ''); // Remove 'www.' if present
+    } catch {
+      return 'unknown';
+    }
+  }
+
+  // Generates the favicon URL
+  getFaviconUrl(url: string): string {
+    const domain = this.getDomainName(url);
+    return `https://www.google.com/s2/favicons?sz=128&domain=${domain}`;
+  }
+  currentSourcesList: any = [];
+  onCardClick(sources): void {
+    this.currentSourcesList = sources;
+    this.cdr.detectChanges();
+    this.sourcesDrawer.open();
+    const button = document.getElementById('botcloseplaygroundbutton');
+    if (button) {
+      button.style.display = 'none';
+    }
+  }
+
+  isShowEditorButton = true;
+
+  openOuterEditor() {
+    this.fetchEditorContent();
+    this.editorsDrawer.open();
+    this.isDrawerOpen = true;
+    this.isShowEditorButton = false;
+    this.cdr.detectChanges();
+
+    const button = document.getElementById('botcloseplaygroundbutton');
+    if (button) {
+      button.style.display = 'none';
+    }
+  }
+
+  onCloseEditor() {
+    this.editorsDrawer.close();
+    this.isDrawerOpen = false;
+    this.isShowEditorButton = true;
+    this.cdr.detectChanges(); // Trigger change detection if needed
+    this.onDrawerClosed();
+  }
+
+  onCloseSource() {
+    this.sourcesDrawer.close();
+    this.isDrawerOpen = false;
+    this.cdr.detectChanges(); // Trigger change detection if needed
+    this.onDrawerClosed();
+  }
+  onDrawerClosed() {
+    setTimeout(() => {
+      this.isDrawerOpen = true;
+      this.cdr.detectChanges(); // Trigger change detection if needed
+      // Use ngClass to dynamically apply the class
+      const button = document.getElementById('botcloseplaygroundbutton');
+      if (button) {
+        button.style.display = 'block';
+      }
+    }, 800);
+  }
+  isDrawerOpen = true;
+
+  toggleDrawer(todo) {
+    this.isDrawerOpen = todo;
+    this.cdr.detectChanges();
+    this.updateButtonVisibility();
+  }
+  updateButtonVisibility() {
+    const button = document.getElementById('botcloseplaygroundbutton');
+    if (button) {
+      button.style.display = this.isDrawerOpen ? 'block' : 'none';
+    }
+  }
+  openLinkInNewTab(link: string): void {
+    window.open(link, '_blank');
+  }
+  adjustTextareaHeight(event: any): void {
+    try {
+      if (event.key === 'Enter' && !event.shiftKey) {
+        // Prevents a new line from being added
+        event.preventDefault();
+      }
+    } catch (error) {
+
+    }
+    const textarea = event.target as HTMLTextAreaElement;
+    textarea.style.height = 'auto'; // Reset the height
+    textarea.style.height = `${textarea.scrollHeight}px`; // Adjust height to match content
+    // Ensure the height doesn't exceed the max-height set in CSS
+    if (textarea.scrollHeight > 150) {
+      textarea.style.height = `150px`; // Adjust height to match content
+      textarea.style.overflowY = 'auto'; // Enable scrolling if content exceeds 400px
+    } else {
+      textarea.style.overflowY = 'hidden'; // Hide scrollbar if content is within limits
+    }
+  }
+
+  toggleWorkflows(value = null) {
+
+    if (!this.checkForCop29BotId()) {
+      this.botService.getWorkflowsByOrgId(this.orgId).subscribe((res) => {
+        this.orgWorkflows = res;
+        this.isWorkflowOpen = value == null ? !this.isWorkflowOpen : value;
+
+        if (!this.isWorkflowOpen) {
+          this.selectedWorkflow = null;
+          this.openWorkflowInput = false;
+        }
+
+        this.cdr.detectChanges();
+      });
+    }
+
+  }
+
+  initializeForm() {
+    // Create form controls dynamically based on selectedWorkflow.Trigger.InputSchema
+    const formControls = {};
+    if (this.selectedWorkflow?.Trigger?.InputSchema) {
+      this.selectedWorkflow.Trigger.InputSchema.forEach((input) => {
+        formControls[input.InputId] = [
+          input.Value || '',
+          input.Required ? Validators.required : null,
+        ];
+      });
+    }
+
+    // Initialize the form
+    this.workflowForm = this.fb.group(formControls);
+  }
+
+  onWorkflowSelected(workflow) {
+    this.selectedWorkflow = workflow;
+    this.initializeForm();
+    this.isWorkflowOpen = false;
+    this.openWorkflowInput = true;
+  }
+
+  onWorkflowSubmit() {
+    const container = document.getElementById('allChats');
+    if (this.workflowForm.valid) {
+      console.log(this.workflowForm.value);
+
+      var input = this.prepareHtml(
+        this.generateMarkdown(
+          this.selectedWorkflow.Name,
+          this.workflowForm.value
+        )
+      );
+
+      // update last two chatLog entries, set showWorkflowExecutionLoader = false
+      try {
+        this.chatLog[this.chatLog.length - 1][
+          'showWorkflowExecutionLoader'
+        ] = false;
+        this.chatLog[this.chatLog.length - 2][
+          'showWorkflowExecutionLoader'
+        ] = false;
+      } catch (error) { }
+
+      this.chatLog.push({
+        type: 'user',
+        message: input,
+        time: formatNow(this.timezone),
+        copied: false,
+        isCollapsedTrue: false,
+        showWorkflowExecutionLoader: true,
+      });
+
+      console.log(input);
+
+      this.currentWorkflowActionProgress = 0;
+      this.currentWorkflowAction =
+        'Executing ' + this.selectedWorkflow.Actions[0].Name;
+      this.isChatingWithAi = true;
+      this.executingWorkflow = true;
+      this.workflowExecutionDetails = {
+        Actions: this.selectedWorkflow.Actions,
+        Inputs: this.workflowForm.value,
+        workflowInputs: this.workflowForm.value,
+        WorkflowName: this.selectedWorkflow.Name,
+      };
+      this.currentWorkflowExecutionDetails = this.workflowExecutionDetails;
+      this.scrollToBottom();
+
+      this.cdr.detectChanges();
+
+      // execute the ask endpoint with workflow input
+      this.makeAskRequest(
+        input,
+        this.agents,
+        this.conversationKey,
+        '',
+        null,
+        this.selectedWorkflow['_id'],
+        this.workflowForm.value
+      );
+    }
+  }
+
+  makeAskRequest(
+    inputMsg: string,
+    agents: any[],
+    conversationId: string,
+    msg?: any,
+    chat?: any,
+    workflowId?: string,
+    workflow_inputs?: any
+  ): void {
+    var url = `${this.environment.BASE_URL}/ai/ask`;
+
+    var body = {
+      user_question: inputMsg,
+      user_id: this.userId,
+      bot_id: this.botId,
+      message_id: this.conversationService.generateKey(),
+      session_id: this.conSessionKey,
+      agents: agents?.filter((p) => p.selected).map((p) => p.id) ?? [],
+      conversation_id: conversationId,
+      first_name: this.firstName,
+      last_name: this.lastName
+    };
+
+    if (workflowId) {
+      body['workflow_id'] = workflowId;
+      body['workflow_inputs'] = workflow_inputs;
+    }
+
+
+    fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + this.s27Token,
+        'x-api-key': this.apiKey,
+        'hive-bot-id': this.botId,
+        'domain-authority': this.domainAuthorityValue
+      },
+      body: JSON.stringify(body),
+    })
+      .then((response) => {
+        if (response.status === 401 || response.status === 403) {
+          this.is401 = true;
+          this.refreshToken.emit();
+
+          // If `msg` and `chat` exist, handle them
+          if (msg && chat) {
+            this.msg = msg;
+            this.chat = chat;
+            this.isFetchDataFor = true;
+          }
+        } else {
+          this.is401 = false;
+        }
+        return response.json();
+      })
+      .then((data) => {
+        console.log(data);
+        // Additional response handling if needed
+      })
+      .catch((err) => {
+        console.error('Error: ', err);
+        this.isChatingWithAi = false;
+      });
+
+    this.input = '';
+    this.selectedWorkflow = null;
+    this.openWorkflowInput = false;
+    this.isWorkflowOpen = false;
+    this.scrollToBottom();
+    this.cdr.markForCheck();
+  }
+
+
+  makeAskRequestold(
+    inputMsg: string,
+    agents: any[],
+    conversationId: string,
+    msg?: any,
+    chat?: any,
+    workflowId?: string,
+    workflow_inputs?: any
+  ): void {
+    const url = `${this.environment.BASE_URL}/ai/ask`;
+
+    const body: any = {
+      user_question: inputMsg,
+      user_id: this.userId,
+      bot_id: this.botId,
+      message_id: this.conversationService.generateKey(),
+      agents: agents?.filter((p) => p.selected).map((p) => p.id) ?? [],
+      conversation_id: conversationId,
+      first_name: this.firstName,
+      last_name: this.lastName,
+    };
+
+    if (workflowId) {
+      body['workflow_id'] = workflowId;
+      body['workflow_inputs'] = workflow_inputs;
+    }
+
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': this.apiKey,
+      'hive-bot-id': this.botId,
+      'domain-authority': this.domainAuthorityValue,
+    });
+
+    this.http.post(url, body, { headers })
+      .subscribe({
+        next: (data) => {
+          console.log(data);
+          // Additional response handling if needed
+        },
+        error: (err) => {
+          console.error('Error: ', err);
+          this.isChatingWithAi = false;
+        },
+      });
+
+    this.input = '';
+    this.selectedWorkflow = null;
+    this.openWorkflowInput = false;
+    this.isWorkflowOpen = false;
+    this.scrollToBottom();
+    this.cdr.markForCheck();
+
+  }
+
+  generateMarkdown(title, obj) {
+    // Initialize markdown with the title
+    let markdown = `## ${title}\n`;
+
+    // Loop through the object and append the field names and values
+    for (const [key, value] of Object.entries(obj)) {
+      var key_label =
+        this.selectedWorkflow.Trigger.InputSchema.find(
+          (input) => input.InputId === key
+        )?.Label || key;
+      markdown += `- **${key_label}**: ${value}\n`;
+    }
+
+    return markdown;
+  }
+
+  showWorkflowHistoryDetails(workflow_id) {
+    if (!workflow_id) {
+      this.workflowExecutionDetails = this.currentWorkflowExecutionDetails;
+      this.showWorkflowExecutionDetails = true;
+      this.cdr.detectChanges();
+      return;
+    }
+
+    this.botService.getWorkflowExecutionById(workflow_id).subscribe((res) => {
+      if (res && res.Actions && Array.isArray(res.Actions)) {
+        res.Actions = res.Actions.map((action) => {
+          if (action.InsertTimeStamp) {
+            action.InsertTimeStamp = formatTimeStamps(
+              this.timezone,
+              action.InsertTimeStamp
+            );
+          }
+          return action;
+        });
+      }
+
+      res.InsertTimeStamp = formatTimeStamps(
+        this.timezone,
+        res.InsertTimeStamp
+      );
+      this.workflowExecutionDetails = res;
+      this.showWorkflowExecutionDetails = true;
+      this.cdr.detectChanges();
+    });
+  }
+
+  closeModal() {
+    this.showWorkflowExecutionDetails = false;
+  }
+
+  objectToArray(obj: any): any[] {
+    return Object.keys(obj).map((key) => ({ key, value: obj[key] }));
+  }
+
+  startNewConversation() {
+    this.conversationKey = this.conversationService.getKey(this.botId, true);
+    this.chatLog = [this.chatLog[0]];
+    this.isChatingWithAi = false;
+    setTimeout(() => {
+      this.initializeSocket();
+    }, 200);
+    this.scrollToBottom();
+    this.cdr.detectChanges();
+  }
+
+  initializeSpeechRecognizer(token: string) {
+    this.speechConfig = SpeechSDK.SpeechConfig.fromAuthorizationToken(
+      token,
+      this.region
+    );
+    const audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
+    this.recognizer = new SpeechSDK.SpeechRecognizer(
+      this.speechConfig,
+      audioConfig
+    );
+
+    this.recognizer.recognizing = (s, e) => {
+      if (e.result.reason === SpeechSDK.ResultReason.RecognizingSpeech) {
+        this.input = e.result.text;
+        console.log(`Recognizing: ${e.result.text}`);
+        this.cdr.markForCheck();
+      }
+    };
+
+    this.recognizer.recognized = (s, e) => {
+      if (e.result.reason === SpeechSDK.ResultReason.RecognizedSpeech) {
+        this.input = e.result.text;
+        console.log(`Recognized: ${e.result.text}`);
+        this.toggleRecording();
+        this.cdr.markForCheck();
+      }
+    };
+
+    this.recognizer.canceled = (s, e) => {
+      console.error('Canceled: ', e.errorDetails);
+    };
+
+    this.recognizer.sessionStopped = (s, e) => {
+      console.log('Session stopped.');
+      this.recognizer.stopContinuousRecognitionAsync();
+      this.fetchData();
+    };
+  }
+
+  toggleRecording() {
+    this.isRecording = !this.isRecording;
+
+    if (this.isRecording) {
+      this.startRecognition();
+    } else {
+      this.stopRecognition();
+    }
+  }
+
+  startRecognition() {
+    this.recognizer.startContinuousRecognitionAsync();
+  }
+
+  stopRecognition() {
+    this.recognizer.stopContinuousRecognitionAsync();
+  }
+
+  checkForCop29BotId() {
+    return this.botId == '66fa3f276c5d71e2717bfea8' || this.botId == '671633545652dd78efec848d';
+
+  }
+
+  getLatestTime(time): string {
+    if (time) {
+      return time;
+    }
+    return new Date().toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    }); // returns current time in 'shortTime' format
+  }
+}