Function createChatUi

public/js/aiChat.js:275–1490

(config)

}

function createChatUi(config) {
  const headerButtons = document.querySelector('.header-buttons');
  if (!headerButtons) return null;
  ensureAiChatStyles();

  const btn = makeEl('button', {
    id: 'aiChatBtn',
    title: 'AI Chat (Pro)'
  }, '<i class="material-icons">smart_toy</i>');

  const overlay = makeEl('div', {
    id: 'aiChatOverlay',
    style: 'position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:12000;display:none;'
  });

  const card = makeEl('div', {
    id: 'aiChatCard',
    style: 'position:absolute;right:20px;top:60px;width:min(760px,calc(100vw - 24px));height:min(84vh,820px);background:var(--card-bg,#fff);color:var(--text-color,#111);border:1px solid rgba(0,0,0,.12);border-radius:20px;box-shadow:0 22px 60px rgba(15,23,42,.24);display:flex;flex-direction:column;overflow:hidden;'
  });
  const dataEgress = (config?.settings?.dataEgress && typeof config.settings.dataEgress === 'object')
    ? config.settings.dataEgress
    : {};
  const dataEgressEnabled = !!dataEgress.enabled;
  const dataEgressMessage = String(dataEgress.message || '').trim();

  card.innerHTML = `
    <div data-ai-chat-section="head" style="display:flex;justify-content:space-between;align-items:flex-start;padding:10px 14px 8px;border-bottom:1px solid rgba(0,0,0,.08);gap:10px;">
      <div style="display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;">
        <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
          <div style="font-weight:700;font-size:14px;line-height:1.1;">AI Chat</div>
          <div style="font-size:11px;opacity:.66;line-height:1.1;">ACL-scoped, audited</div>
        </div>
        <div id="aiChatMeta" style="font-size:10px;opacity:.68;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></div>
      </div>
      <span id="aiChatClose" class="editor-close-btn" role="button" aria-label="Close" title="Close">&times;</span>
    </div>
    ${dataEgressEnabled ? `
      <div data-ai-chat-section="egress" style="padding:7px 14px;border-bottom:1px solid rgba(0,0,0,.08);font-size:11px;line-height:1.35;background:rgba(245,158,11,.10);color:inherit;">
        <strong>External AI data egress:</strong> ${escapeHTML(dataEgressMessage || 'Enabled external AI providers may send prompts and visible file excerpts to third-party services.')}
      </div>
    ` : ''}
    <div data-ai-chat-section="scope" style="display:flex;gap:8px;padding:7px 14px;border-bottom:1px solid rgba(0,0,0,.08);flex-wrap:wrap;">
      <div style="display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-width:0;">
        <div id="aiChatScopeSummary" style="font-size:11px;opacity:.78;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;"></div>
        <button type="button" id="aiChatToggleScope" class="btn btn-sm btn-light" style="border-radius:999px;padding:3px 8px;font-size:10px;line-height:1.1;flex:0 0 auto;">Show scope</button>
      </div>
      <div id="aiChatScopeFields" style="display:none;gap:10px;flex-wrap:wrap;width:100%;">
        <div style="display:flex;justify-content:flex-end;width:100%;">
          <button type="button" id="aiChatUseCurrent" class="btn btn-sm btn-light" style="border-radius:999px;padding:4px 10px;font-size:11px;line-height:1.2;">Scope chat here</button>
        </div>
        <label style="margin:0;display:flex;flex-direction:column;font-size:11px;gap:4px;min-width:130px;text-transform:uppercase;letter-spacing:.04em;opacity:.82;">
          <span>Work In Source</span>
          <input id="aiChatSource" class="form-control form-control-sm" value="local" />
        </label>
        <label style="margin:0;display:flex;flex-direction:column;font-size:11px;gap:4px;min-width:190px;flex:1;text-transform:uppercase;letter-spacing:.04em;opacity:.82;">
          <span>Folder Scope</span>
          <input id="aiChatRoot" class="form-control form-control-sm" value="root" />
        </label>