addMessage()

in src/p5js_playground/playground.tsx [212:250]

• 31 lines of code
• 2 McCabe index (conditional complexity)

  addMessage(role: string, message: string) {
    const div = document.createElement('div');
    div.classList.add('turn');
    div.classList.add(`role-${role.trim()}`);

    const thinkingDetails = document.createElement('details');
    thinkingDetails.classList.add('hidden');
    const summary = document.createElement('summary');
    summary.textContent = 'Thinking...';
    thinkingDetails.classList.add('thinking');
    thinkingDetails.setAttribute('open', 'true');
    const thinking = document.createElement('div');
    thinkingDetails.append(thinking);
    div.append(thinkingDetails);
    const text = document.createElement('div');
    text.className = 'text';
    text.textContent = message;
    div.append(text);

    if (role === 'system-ask') {
      const btn = document.createElement('button');
      btn.textContent = 'Improve';
      div.appendChild(btn);
      btn.addEventListener('click', () => {
        // remove button
        div.removeChild(btn);

        // call model
        this.sendMessageAction(message, 'SYSTEM');
      });
    }

    this.messages.push(div);
    this.requestUpdate();

    this.scrollToTheEnd();

    return {thinking, text};
  }