Chatbot: Chatbot (German)

/* eslint-disable no-console */

import MarkdownIt from 'markdown-it/dist/markdown-it.min.js';
import {
  chatbotQuestion, chatbotAnswer,
} from './chatbot-templates';

const md = new MarkdownIt({
  breaks: true,
  linkify: true,
  typographer: true,
  html: false,
});

const defaultLinkRender = md.renderer.rules.link_open || function(tokens, idx, options, env, renderer) {
  return renderer.renderToken(tokens, idx, options);
};

md.renderer.rules.link_open = function(tokens, idx, options, env, renderer) {
  const aIndex = tokens[idx].attrIndex('target');

  if (aIndex < 0) {
    tokens[idx].attrPush(['target', '_blank']);
  } else {
    tokens[idx].attrs[aIndex][1] = '_blank';
  }

  const relIndex = tokens[idx].attrIndex('rel');
  if (relIndex < 0) {
    tokens[idx].attrPush(['rel', 'noopener noreferrer']);
  } else {
    tokens[idx].attrs[relIndex][1] = 'noopener noreferrer';
  }

  return defaultLinkRender(tokens, idx, options, env, renderer);
};

class MarkdownParser {
  static parse(markdown) {
    if (!markdown) return '';

    try {
      return md.render(markdown);
    } catch (error) {
      console.error('Markdown parsing error:', error);
      return `<p>${markdown.replace(/\n/g, '<br>')}</p>`;
    }
  }
}

class ChatbotUI {
  constructor(chatbotElement) {
    this.chatbot = chatbotElement;
    this.questionTrigger = this.chatbot.querySelector('.chatbot__form-button');
    this.chatScrollContainer = this.chatbot.querySelector('.chatbot__chat');
    this.chatWrapper = this.chatbot.querySelector('.chatbot__chat-inner');
    this.chatInput = this.chatbot.querySelector('.chatbot__form input');
    this.requestObject = undefined;
    this.footerButtons = this.chatbot.querySelectorAll('.chatbot__footer-button');
    this.howToTrigger = this.chatbot.querySelector('.has-icon button');
    this.howToTarget = this.chatbot.querySelector('.has-icon p');

    this.currentResponse = '';
    this.currentResources = [];
    this.isGenerating = false;
    this.currentAnswerElement = null;
    this.currentQuestionElement = null;

    this.typingQueue = '';
    this.displayedLength = 0;
    this.isTyping = false;

    // Track thinking element and progress
    this.currentThinkingElement = null;
    this.connectionTimeout = null;

    // Generate unique session user ID
    this.sessionUserId = this.generateSessionUserId();

    // Initialize i18n strings
    this.initializeI18nStrings();
  }

  generateSessionUserId() {
    const timestamp = Date.now();
    const randomPart = Math.random().toString(36).substring(2, 15);
    return `user-${timestamp}-${randomPart}`;
  }

  initializeI18nStrings() {
    const lang = this.chatbot.dataset.lang || 'de';

    this.strings = {
      de: {
        textCopied: 'Text kopiert',
        textCopyError: 'Text konnte nicht kopiert werden',
        waitingMessage: 'Bitte warten Sie, während die Antwort generiert wird...',
        thinking: 'Ich denke nach',
        answerGenerated: 'Antwort generiert',
        close: 'Schließen',
        sources: 'Quellen',
        noSourcesAvailable: 'Für diese Antwort sind keine spezifischen Quellen verfügbar.',
        errorMessage: 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.',
        dateLocale: 'de-DE',
        researchProgress: 'Recherche läuft',
        usingTool: 'Verwende Tool',
        processing: 'Verarbeite...',
        copy: 'Kopieren',
        retry: 'Nochmal versuchen',
        timeLabel: 'Uhr',
        answerSupplement: 'Es handelt sich hier um KI-generierte Antworten, bitte überprüfen Sie alle Aussagen anhand der vorgeschlagenen Links.'
      },
      en: {
        textCopied: 'Text copied',
        textCopyError: 'Text could not be copied',
        waitingMessage: 'Please wait while the answer is being generated...',
        thinking: 'I am thinking',
        answerGenerated: 'Answer generated',
        close: 'Close',
        sources: 'Sources',
        noSourcesAvailable: 'No specific sources are available for this answer.',
        errorMessage: 'An error occurred. Please try again.',
        dateLocale: 'en-US',
        researchProgress: 'Research in progress',
        usingTool: 'Using tool',
        processing: 'Processing...',
        copy: 'Copy',
        retry: 'Try again',
        timeLabel: '',
        answerSupplement: 'These are AI-generated answers. Please verify all statements using the links provided.'
      }
    };

    this.t = this.strings[lang] || this.strings.de;
  }

  resetConnectionTimeout() {
    if (this.connectionTimeout) {
      clearTimeout(this.connectionTimeout);
    }
    this.connectionTimeout = setTimeout(() => {
      console.warn('Connection timeout - no data received for 30 seconds');
    }, 30000);
  }

  scrollToElement(element, offset = 0) {
    if (!element || !this.chatScrollContainer) return;

    const containerRect = this.chatScrollContainer.getBoundingClientRect();
    const elementRect = element.getBoundingClientRect();
    const currentScrollTop = this.chatScrollContainer.scrollTop;

    const targetScrollTop = currentScrollTop + elementRect.top - containerRect.top - offset;

    this.chatScrollContainer.scrollTo({
      top: targetScrollTop,
      behavior: 'smooth'
    });
  }

  scrollToBottom() {
    if (!this.chatScrollContainer) return;

    this.chatScrollContainer.scrollTo({
      top: this.chatScrollContainer.scrollHeight,
      behavior: 'smooth'
    });
  }

  handleButtonAria(button) {
    let ariaExpandedState = button.getAttribute('aria-expanded');
    ariaExpandedState = ariaExpandedState === 'true' ? 'false' : 'true';
    button.setAttribute('aria-expanded', ariaExpandedState);
  }

  async copyToClipboard(elements) {
    if (!elements.length) return;

    elements.forEach((el) => {
      const sourceElement = el.querySelector('.large');
      const copyButton = el.querySelector('.chatbot__chat-actions-copy');
      const output = el.querySelector('.chatbot__chat-actions-copy + .small');

      copyButton.addEventListener('click', async () => {
        try {
          const htmlBlob = new Blob([sourceElement.innerHTML], { type: 'text/html' });
          const textBlob = new Blob([sourceElement.textContent], { type: 'text/plain' });

          await navigator.clipboard.write([
            new ClipboardItem({
              'text/html': htmlBlob,
              'text/plain': textBlob
            })
          ]);

          output.textContent = this.t.textCopied;
        } catch (error) {
          try {
            await navigator.clipboard.writeText(sourceElement.textContent);
            output.textContent = this.t.textCopied;
          } catch (fallbackError) {
            output.textContent = this.t.textCopyError;
            console.warn('Unable to copy.', fallbackError);
          }
        }
      });
    });
  }

  setCurrentTime() {
    const currentDate = new Date();
    const currentHour = currentDate.getHours();
    const currentMinute = String(currentDate.getMinutes()).padStart(2, '0');
    const currentTime = `${currentHour}:${currentMinute}`;
    return currentTime;
  }

  setRequestObject(content) {
    const o = {
      model: '3pc',
      messages: [{ role: 'user', content }],
      temperature: 0,
      top_p: 1,
      n: 1,
      stream: true,
      max_tokens: 500,
      user: this.sessionUserId,
    };

    return o;
  }

  handleReferencesUI() {
    // Sources/Quellen button functionality removed
    // This method intentionally left empty to maintain compatibility
  }

  disableAllRetryButtons() {
    const retryButtons = this.chatbot.querySelectorAll('.chatbot__chat-actions-retry');
    retryButtons.forEach(button => {
      button.disabled = true;
      button.style.opacity = '0.3';
      button.style.cursor = 'not-allowed';
    });
  }

  async getStreamingAPIResponse(requestBody) {
    try {
      const response = await fetch('https://hida-chatbot.intra.3pc.de/chat/completions', {
        method: 'POST',
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
        body: JSON.stringify(requestBody),
        keepalive: true,
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let buffer = '';
      const self = this; // Capture 'this' context

      return {
        async *[Symbol.asyncIterator]() {
          while (true) {
            const { done, value } = await reader.read();
            if (done) break;

            buffer += decoder.decode(value, { stream: true });
            const lines = buffer.split('\n');
            buffer = lines.pop();

            for (const line of lines) {
              // Handle SSE keep-alive comments
              if (line.startsWith(': ')) {
                self.resetConnectionTimeout();
                continue;
              }

              if (line.startsWith('data: ')) {
                const data = line.slice(6);
                if (data === '[DONE]') {
                  return;
                }

                try {
                  const chunk = JSON.parse(data);

                  if (chunk.choices && chunk.choices[0] && chunk.choices[0].finish_reason === 'stop') {
                    yield { type: 'final', resources: chunk.resources || [] };
                    return;
                  }

                  const content = chunk.choices && chunk.choices[0] && chunk.choices[0].delta && chunk.choices[0].delta.content;
                  if (content) {
                    // Detect language from content for status messages
                    const lang = self.detectContentLanguage(content);

                    // Parse different content types with language detection
                    if (content.includes('🔧') || content.includes('Using') || content.includes('Verwende')) {
                      yield { type: 'tool_start', content, language: lang };
                    } else if (content.includes('💭')) {
                      yield { type: 'agent_thinking', content, language: lang };
                    } else if (content.includes('🚀') || content.includes('📝') || content.includes('Beginne') || content.includes('Erstelle')) {
                      yield { type: 'research_progress', content, language: lang };
                    } else if (content.includes('⏳') || content.includes('🔍') || content.includes('Arbeite')) {
                      yield { type: 'heartbeat', content, language: lang };
                    } else {
                      yield { type: 'content', content, language: lang };
                    }
                  }
                } catch (e) {
                  console.error('Error parsing chunk:', e);
                }
              }
            }
          }
        }
      };
    } catch (error) {
      console.warn('Streaming error:', error);
      throw error;
    }
  }

  createThinkingElement() {
    const thinkingId = `thinking-${Date.now()}`;
    const thinkingHTML = `
      <div class="chatbot__thinking" id="${thinkingId}">
        <div class="chatbot__thinking-header" onclick="this.parentElement.classList.toggle('expanded')">
          <span class="chatbot__thinking-text">${this.t.thinking}</span>
          <div class="chatbot__thinking-dots">
            <span></span><span></span><span></span>
          </div>
        </div>
        <div class="chatbot__thinking-content"></div>
      </div>
    `;

    this.chatWrapper.insertAdjacentHTML('beforeend', thinkingHTML);
    this.currentThinkingElement = document.getElementById(thinkingId);
    return this.currentThinkingElement;
  }

  updateThinkingStatus(element, content, type = 'thinking') {
    if (!element) return;

    const headerText = element.querySelector('.chatbot__thinking-text');
    const thinkingContent = element.querySelector('.chatbot__thinking-content');

    let displayText = content;

    // Clean up emoji prefixes
    if (type === 'agent_thinking') {
      displayText = content.replace(/💭\s*/, '').trim();
    } else if (type === 'tool_start') {
      displayText = content.replace(/🔧\s*/, '').trim();
    } else if (type === 'research_progress') {
      displayText = content.replace(/🚀|📝/g, '').trim();
    }

    if (displayText) {
      headerText.classList.add('updating');

      setTimeout(() => {
        if (type === 'research_progress') {
          headerText.textContent = displayText;
        } else if (type === 'tool_start') {
          headerText.textContent = `${this.t.usingTool}: ${displayText}`;
        } else {
          headerText.textContent = displayText;
        }
        headerText.classList.remove('updating');
      }, 150);

      // Add to thinking content log
      if (thinkingContent && displayText !== content) {
        thinkingContent.innerHTML += `<div class="thinking-step">${content}</div>`;
      }
    }
  }

  finishThinking(element) {
    if (!element) return;

    const headerText = element.querySelector('.chatbot__thinking-text');
    const dots = element.querySelector('.chatbot__thinking-dots');

    headerText.textContent = this.t.answerGenerated;
    headerText.classList.add('finished');
    if (dots) {
      dots.style.display = 'none';
    }
  }

  extractDomainName(url) {
    try {
      const domain = new URL(url).hostname;
      return domain.replace('www.', '');
    } catch {
      return url;
    }
  }

  detectInputLanguage(text) {
    const textLower = text.toLowerCase();

    const germanWords = ['der', 'die', 'das', 'und', 'ich', 'ist', 'ein', 'eine', 'von', 'zu', 'auf', 'mit', 'für', 'wird', 'werden', 'können', 'gibt', 'ansprechpartner', 'kurse', 'schulungen'];
    const englishWords = ['the', 'and', 'is', 'are', 'a', 'an', 'of', 'to', 'in', 'for', 'with', 'will', 'can', 'there', 'contact', 'courses', 'training'];

    const germanCount = germanWords.filter(word => textLower.includes(word)).length;
    const englishCount = englishWords.filter(word => textLower.includes(word)).length;

    return germanCount > englishCount ? 'de' : 'en';
  }

  detectContentLanguage(content) {
    const germanIndicators = ['Beginne', 'Verwende', 'Erstelle', 'Arbeite', 'Analysiere', 'Suche'];
    const englishIndicators = ['Starting', 'Using', 'Preparing', 'Working', 'Analyzing', 'Searching'];

    const hasGerman = germanIndicators.some(word => content.includes(word));
    const hasEnglish = englishIndicators.some(word => content.includes(word));

    if (hasGerman) return 'de';
    if (hasEnglish) return 'en';
    return this.detectedLanguage;
  }

  setSubmitDisabled(disabled) {
    const button = this.questionTrigger;
    const repostTriggers = this.chatbot.querySelectorAll('.chatbot__chat-actions-retry');

    repostTriggers.forEach(trigger => {
      trigger.disabled = disabled ? true : false;
      trigger.style.opacity = disabled ? '0.5' : '1';
      trigger.style.cursor = disabled ? 'not-allowed' : 'pointer';
      trigger.title = disabled ? this.t.waitingMessage : '';
    });

    if (disabled) {
      button.disabled = true;
      button.style.opacity = '0.5';
      button.style.cursor = 'not-allowed';
      button.title = this.t.waitingMessage;
    } else {
      button.disabled = false;
      button.style.opacity = '1';
      button.style.cursor = 'pointer';
      button.title = '';
    }
  }

  // displayResources(resources) {
  //   const chatOverlay = this.chatbot.querySelector('.chatbot__chat-overlay');
  //   if (chatOverlay) {
  //     let resourcesHTML;
  //
  //     if (resources && resources.length > 0) {
  //       resourcesHTML = `
  //         <div class="chatbot__chat-overlay-inner">
  //           <button class="chatbot__chat-overlay-button-close">
  //             <svg class="icon icon--close" viewBox="0 0 200 200" role="presentation"><use xlink:href="#icon-close"></use></svg>
  //             <span>${this.t.close}</span>
  //           </button>
  //           <h3 class="headline headline--module-2">${this.t.sources}</h3>
  //           <ul>
  //             ${resources.map(url => `
  //               <li>
  //                 <span class="chatbot__resource-icon">
  //                   <img class="chatbot_favicon"  src="https://www.google.com/s2/favicons?domain=${this.extractDomainName(url)}&sz=32"
  //                        alt="${this.extractDomainName(url)}"
  //                        style="width: auto;"
  //                        onerror="this.style.display='none'">
  //                 </span>
  //                 <div class="chatbot__resource-content">
  //                   <h3><a href="${url}" target="_blank">${this.extractDomainName(url)}</a></h3>
  //                   <p>${new Date().toLocaleDateString(this.t.dateLocale)}</p>
  //                 </div>
  //               </li>
  //             `).join('')}
  //           </ul>
  //         </div>
  //       `;
  //     } else {
  //       resourcesHTML = `
  //         <div class="chatbot__chat-overlay-inner">
  //           <button class="chatbot__chat-overlay-button-close">
  //             <svg class="icon icon--close" viewBox="0 0 200 200" role="presentation"><use xlink:href="#icon-close"></use></svg>
  //             <span>${this.t.close}</span>
  //           </button>
  //           <h3 class="headline headline--module-2">${this.t.sources}</h3>
  //           <p>${this.t.noSourcesAvailable}</p>
  //         </div>
  //       `;
  //     }
  //
  //     chatOverlay.innerHTML = resourcesHTML;
  //
  //     const closeButton = chatOverlay.querySelector('.chatbot__chat-overlay-button-close');
  //     const refsTrigger = this.chatbot.querySelector('.chatbot__chat-footer-button');
  //
  //     if (closeButton && refsTrigger) {
  //       closeButton.addEventListener('click', () => {
  //         chatOverlay.classList.remove('is-active');
  //         this.handleButtonAria(refsTrigger);
  //       });
  //     }
  //   }
  // }

  startGeneratingResponse() {
    this.chatWrapper.insertAdjacentHTML(
      'beforeend',
      chatbotAnswer(
        this.requestObject.messages[0].content,
        '',
        this.setCurrentTime(),
        true,
        this.t,
      ),
    );

    const answerElements = this.chatbot.querySelectorAll('.chatbot__chat-answer p.medium');
    this.currentAnswerElement = answerElements[answerElements.length - 1];

    // Scroll to the new answer element immediately after it's created
    setTimeout(() => {
      this.scrollToElement(this.currentAnswerElement, 20);
    }, 100);

    this.currentResponse = '';
    this.isGenerating = true;

    this.typingQueue = '';
    this.displayedLength = 0;
    this.isTyping = false;

    this.startSmoothTyping();
  }

  updateGeneratedResponse(content) {
    if (this.currentAnswerElement && this.isGenerating) {
      this.typingQueue += content;
      this.currentResponse += content;
    }
  }

  startSmoothTyping() {
    if (this.isTyping) return;
    this.isTyping = true;

    const typeNextChunk = () => {
      if (!this.isGenerating && this.displayedLength >= this.currentResponse.length) {
        this.isTyping = false;
        return;
      }

      const targetLength = Math.min(
        this.currentResponse.length,
        this.displayedLength + Math.max(1, Math.floor(Math.random() * 3) + 1)
      );

      if (targetLength > this.displayedLength) {
        this.displayedLength = targetLength;
        const displayText = this.currentResponse.substring(0, this.displayedLength);
        const htmlResponse = MarkdownParser.parse(displayText);
        this.currentAnswerElement.innerHTML = htmlResponse;
      }

      let delay = 5;

      const lastChar = this.currentResponse.charAt(this.displayedLength - 1);
      if (lastChar === '.' || lastChar === '!' || lastChar === '?') {
        delay = 30;
      } else if (lastChar === ',' || lastChar === ';' || lastChar === ':') {
        delay = 20;
      } else if (lastChar === ' ') {
        delay = 10;
      }

      delay += Math.random() * 8;

      setTimeout(typeNextChunk, delay);
    };

    typeNextChunk();
  }

  setAnswerSupplement = currentAnswerElement => {
    currentAnswerElement.insertAdjacentHTML(
      'beforeend',
      `<p>${this.t.answerSupplement}</p>`,
    );
  }

  finishGeneratingResponse(resources) {
    this.currentResources = resources;

    const waitForTypingComplete = () => {
      if (this.displayedLength < this.currentResponse.length) {
        setTimeout(waitForTypingComplete, 50);
        return;
      }

      this.setAnswerSupplement(this.currentAnswerElement);
      this.copyToClipboard(this.chatbot.querySelectorAll('.chatbot__chat-copy-text'));
      this.handleReferencesUI();
      // this.displayResources(resources);

      const repostTriggers = this.chatbot.querySelectorAll('.chatbot__chat-actions-retry');
      if (repostTriggers.length) {
        repostTriggers.forEach((trigger) => {
          trigger.addEventListener('click', () => {
            const answerWrapper = trigger.closest('.chatbot__chat-answer');
            this.repostQuestion(answerWrapper);
          });
        });
      }
      this.isGenerating = false;
      this.setSubmitDisabled(false);

      // Clear connection timeout
      if (this.connectionTimeout) {
        clearTimeout(this.connectionTimeout);
      }
    };

    waitForTypingComplete();
  }

  handleQuestionSubmit = async (e) => {
    e.preventDefault();

    if (this.isGenerating) {
      return;
    }

    if (!this.chatInput.value.trim()) {
      this.chatInput.value = '';
      return;
    }

    // Disable all previous retry buttons
    this.disableAllRetryButtons();

    // Detect language from user input
    this.detectedLanguage = this.detectInputLanguage(this.chatInput.value);

    this.chatWrapper.insertAdjacentHTML(
      'beforeend',
      chatbotQuestion(this.chatInput.value, this.setCurrentTime(), this.t),
    );

    const questionElements = this.chatbot.querySelectorAll('.chatbot__chat-question');
    this.currentQuestionElement = questionElements[questionElements.length - 1];

    setTimeout(() => {
      this.scrollToElement(this.currentQuestionElement, 20);
    }, 100);

    this.requestObject = this.setRequestObject(this.chatInput.value);
    this.chatInput.value = '';
    this.chatbot.classList.add('is-loading');

    this.setSubmitDisabled(true);

    // Create thinking element BEFORE creating answer element
    const thinkingId = `thinking-${Date.now()}`;
    const thinkingHTML = `
      <div class="chatbot__thinking" id="${thinkingId}">
        <div class="chatbot__thinking-header" onclick="this.parentElement.classList.toggle('expanded')">
          <span class="chatbot__thinking-text">${this.t.thinking}</span>
          <div class="chatbot__thinking-dots">
            <span></span><span></span><span></span>
          </div>
        </div>
        <div class="chatbot__thinking-content"></div>
      </div>
    `;

    this.chatWrapper.insertAdjacentHTML('beforeend', thinkingHTML);
    let thinkingElement = document.getElementById(thinkingId);
    this.chatbot.classList.remove('is-loading');

    // Start connection timeout
    this.resetConnectionTimeout();

    try {
      const stream = await this.getStreamingAPIResponse(this.requestObject);

      for await (const chunk of stream) {
        // Reset timeout on any activity
        this.resetConnectionTimeout();

        if (chunk.type === 'content') {
          if (!this.isGenerating) {
            this.finishThinking(thinkingElement);
            this.startGeneratingResponse();
          }
          this.updateGeneratedResponse(chunk.content);

        } else if (chunk.type === 'agent_thinking') {
          this.updateThinkingStatus(thinkingElement, chunk.content, 'agent_thinking');

        } else if (chunk.type === 'tool_start') {
          this.updateThinkingStatus(thinkingElement, chunk.content, 'tool_start');

        } else if (chunk.type === 'research_progress') {
          this.updateThinkingStatus(thinkingElement, chunk.content, 'research_progress');

        } else if (chunk.type === 'heartbeat') {
          // Just reset timeout, no UI update needed
          console.log('Heartbeat received');

        } else if (chunk.type === 'final') {
          if (this.isGenerating) {
            this.finishGeneratingResponse(chunk.resources);
          }
          break;
        }
      }

    } catch (error) {
      this.chatbot.classList.remove('is-loading');
      this.setSubmitDisabled(false);
      console.error('Stream processing error:', error);

      this.chatWrapper.insertAdjacentHTML(
        'beforeend',
        chatbotAnswer(
          this.requestObject.messages[0].content,
          this.t.errorMessage,
          this.setCurrentTime(),
          true,
          this.t,
        ),
      );

      // Clear connection timeout on error
      if (this.connectionTimeout) {
        clearTimeout(this.connectionTimeout);
      }
    }
  };


  repostQuestion = async (answerElement) => {
    this.setSubmitDisabled(true);
    const repostQuestion = answerElement.getAttribute('data-question');
    if (!repostQuestion) return;

    // Find the answer content element to replace
    const answerContent = answerElement.querySelector('p.medium');

    this.currentAnswerElement = answerContent;

    // Clear the existing answer content
    if (answerContent) {
      answerContent.innerHTML = '';
      // Make display none
      answerContent.style.display ="None"
    }

    // Remove any existing thinking elements
    const existingThinking = this.chatbot.querySelectorAll('.chatbot__thinking');
    existingThinking.forEach(thinking => thinking.remove());

    this.requestObject = this.setRequestObject(repostQuestion);
    this.chatbot.classList.add('is-loading');

    // Reset response state for replacement
    this.currentResponse = '';
    this.displayedLength = 0;
    this.isTyping = false;
    this.isGenerating = false; // Important: reset this flag

    const thinkingId = `thinking-${Date.now()}`;
    const thinkingHTML = `
      <div class="chatbot__thinking" id="${thinkingId}">
        <div class="chatbot__thinking-header" onclick="this.parentElement.classList.toggle('expanded')">
          <span class="chatbot__thinking-text">${this.t.thinking}</span>
          <div class="chatbot__thinking-dots">
            <span></span><span></span><span></span>
          </div>
        </div>
        <div class="chatbot__thinking-content"></div>
      </div>
    `;

    answerElement.insertAdjacentHTML('beforebegin', thinkingHTML);
    let thinkingElement = document.getElementById(thinkingId);
    this.chatbot.classList.remove('is-loading');

    setTimeout(() => {
      this.scrollToElement(thinkingElement, 20);
    }, 100);

    // Start connection timeout
    this.resetConnectionTimeout();

    try {
      const stream = await this.getStreamingAPIResponse(this.requestObject);

      for await (const chunk of stream) {
        // Reset timeout on any activity
        this.resetConnectionTimeout();

        if (chunk.type === 'content') {
          if (!this.isGenerating) {
            this.finishThinking(thinkingElement);
            // Don't call startGeneratingResponse() since we already have the answer element
            // Just start typing in the existing element
            this.isGenerating = true;
            answerContent.style.display = "block"
            this.startSmoothTyping();
          }
          this.updateGeneratedResponse(chunk.content);

        } else if (chunk.type === 'agent_thinking') {
          this.updateThinkingStatus(thinkingElement, chunk.content, 'agent_thinking');

        } else if (chunk.type === 'tool_start') {
          this.updateThinkingStatus(thinkingElement, chunk.content, 'tool_start');

        } else if (chunk.type === 'research_progress') {
          this.updateThinkingStatus(thinkingElement, chunk.content, 'research_progress');

        } else if (chunk.type === 'heartbeat') {
          console.log('Heartbeat received');

        } else if (chunk.type === 'final') {
          if (this.isGenerating) {
            this.setSubmitDisabled(false);
            this.finishGeneratingResponse(chunk.resources);
          }
          break;
        }
      }

    } catch (error) {
      this.chatbot.classList.remove('is-loading');
      this.setSubmitDisabled(false);
      console.error('Stream processing error:', error);

      if (answerContent) {
        answerContent.innerHTML = this.t.errorMessage;
      }

      // Clear connection timeout on error
      if (this.connectionTimeout) {
        clearTimeout(this.connectionTimeout);
      }
    }
  }

  bindEvents() {
    if (!this.questionTrigger) return;
    this.questionTrigger.addEventListener('click', this.handleQuestionSubmit);

    if (!this.footerButtons.length) return;
    this.footerButtons.forEach((button) => {
      button.addEventListener('click', () => {
        this.chatInput.value = button.textContent;
      });
    });

    if (!this.howToTrigger && !this.howToTarget) return;
    this.howToTrigger.addEventListener('click', () => {
      this.howToTarget.classList.toggle('is-active');
      this.handleButtonAria(this.howToTrigger);
    });
  }

  init() {
    this.bindEvents();
  }
}

const chatbots = document.querySelectorAll('.chatbot');
if (chatbots.length) {
  chatbots.forEach((chatbot) => {
    const chatbotUI = new ChatbotUI(chatbot);
    chatbotUI.init();
  });
}