@hivegpt/hiveai-angular 0.0.374 → 0.0.380

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

@@ -1,2143 +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
-  }
-}
+// 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 = res.Name;
+        this.botIcon = res.Icon;
+        this.botSkills = res?.Skills;
+        this.greetingMsg = res.Greeting;
+
+        this.thumbsDownMessages = res?.NegativeResponses?.length
+          ? res.NegativeResponses
+          : [
+            `We are sorry we've not been able to answer your question.<br/> However, our dedicated support team is happy to help. <span class='feedback-link' style='cursor: pointer; text-decoration: underline; font-weight: 700; color: #17235B;'><a style='color: inherit; text-decoration: none;' id='supportLink88' >Please click here</a></span> and a human agent will assist you as soon as possible`,
+          ];
+        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 ||
+            `Great. 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}\`')">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
+  }
+}