ai-assistant.js

const DEFAULT_REPLY =
  'Ik heb nog geen live AI-backend. Gebruik dit venster voor snelle navigatiehulp en ideetjes.';

const KEYWORD_RESPONSES = [
  {
    terms: ['blog', 'post', 'artikel'],
    reply:
      'Open /blog/ voor nieuwste artikelen. Wil je filters? Gebruik categorieknoppen op de blogpagina.',
  },
  {
    terms: ['widget', 'dashboard', 'pomodoro', 'weer', 'clock'],
    reply: 'Dashboard bevat Pomodoro, Weather en Clock widgets. Je vindt deze via /dashboard/.',
  },
  {
    terms: ['update', 'nieuw', 'changelog'],
    reply: 'Open /updates/ om recente commits, bijdragers en release-notes te bekijken.',
  },
];

export const normalizePrompt = (value = '') => value.trim().toLowerCase();

export const getAssistantReply = (prompt) => {
  const normalizedPrompt = normalizePrompt(prompt);
  if (!normalizedPrompt) {
    return 'Typ een korte vraag, bijvoorbeeld: "Waar staat de Pomodoro?"';
  }

  const match = KEYWORD_RESPONSES.find(({ terms }) =>
    terms.some((term) => normalizedPrompt.includes(term)),
  );

  return match ? match.reply : DEFAULT_REPLY;
};

export const createMessage = (text, tone) => {
  const message = document.createElement('p');
  message.className = `ai-helper__message ai-helper__message--${tone}`;
  message.textContent = text;
  return message;
};

export const initAiAssistant = (root = document) => {
  const toggle = root.querySelector('[data-ai-helper-toggle]');
  const panel = root.querySelector('[data-ai-helper-chat]');
  const form = root.querySelector('[data-ai-helper-form]');
  const input = root.querySelector('#ai-helper-input');
  const log = root.querySelector('[data-ai-helper-messages]');

  if (!toggle || !panel || !form || !input || !log) return;

  const setOpen = (isOpen) => {
    panel.hidden = !isOpen;
    toggle.setAttribute('aria-expanded', String(isOpen));
    if (isOpen) {
      input.focus();
    }
  };

  toggle.addEventListener('click', () => {
    const isOpen = toggle.getAttribute('aria-expanded') !== 'true';
    setOpen(isOpen);
  });

  form.addEventListener('submit', (event) => {
    event.preventDefault();

    const prompt = input.value;
    const cleanedPrompt = prompt.trim();
    if (!cleanedPrompt) {
      log.append(createMessage(getAssistantReply(''), 'assistant'));
      log.scrollTop = log.scrollHeight;
      form.reset();
      input.focus();
      return;
    }

    log.append(createMessage(cleanedPrompt, 'user'));
    log.append(createMessage(getAssistantReply(cleanedPrompt), 'assistant'));
    log.scrollTop = log.scrollHeight;
    form.reset();
    input.focus();
  });

  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      setOpen(false);
    }
  });
};

if (typeof document !== 'undefined') {
  initAiAssistant();
}