Function appendMessage

public/js/aiChat.js:1090–1149

(role, text, options = {})

  };

  const appendMessage = (role, text, options = {}) => {
    if (!logEl) return;
    const dark = isDarkModeEnabled();
    const row = document.createElement('div');
    const mine = role === 'user';
    const myBg = dark ? '#1d4ed8' : '#2563eb';
    const aiBg = dark ? '#181818' : '#e5e7eb';
    const aiBorder = dark ? '1px solid #303030' : '1px solid #d1d5db';
    row.style.alignSelf = 'stretch';
    row.style.display = 'flex';
    row.style.justifyContent = mine ? 'flex-end' : 'flex-start';
    const column = document.createElement('div');
    column.style.maxWidth = 'min(88%, 640px)';
    column.style.display = 'flex';
    column.style.flexDirection = 'column';
    column.style.gap = '4px';
    column.style.alignItems = mine ? 'flex-end' : 'flex-start';

    const label = document.createElement('div');
    label.style.fontSize = '11px';
    label.style.opacity = '.58';
    label.style.padding = '0 2px';
    label.textContent = mine ? 'You' : 'AI';

    const bubble = document.createElement('div');
    bubble.style.padding = '11px 14px';
    bubble.style.borderRadius = mine ? '18px 18px 6px 18px' : '18px 18px 18px 6px';
    bubble.style.background = mine ? myBg : aiBg;
    bubble.style.border = mine ? 'none' : aiBorder;
    bubble.style.color = mine ? '#ffffff' : (dark ? '#f3f5f7' : '#111827');
    bubble.style.whiteSpace = 'pre-wrap';
    bubble.style.wordBreak = 'break-word';
    bubble.style.lineHeight = '1.45';
    bubble.style.boxShadow = mine ? '0 10px 24px rgba(37,99,235,.18)' : '0 1px 2px rgba(15,23,42,.04)';

    const textEl = document.createElement('div');
    textEl.textContent = String(text || '');
    bubble.appendChild(textEl);

    const workflowEl = document.createElement('div');
    if (options.workflow) {
      workflowEl.innerHTML = buildWorkflowCard(options.workflow);
    }
    bubble.appendChild(workflowEl);

    column.appendChild(label);
    column.appendChild(bubble);
    row.appendChild(column);
    logEl.appendChild(row);
    scrollLogToBottom();
    return {
      row,
      setText(nextText) {
        textEl.textContent = String(nextText || '');
      },
      setWorkflow(nextWorkflow) {
        workflowEl.innerHTML = nextWorkflow ? buildWorkflowCard(nextWorkflow) : '';
      }