function bindAIBuddy(elementId) {
  console.debug("bindAIBuddy on element " + elementId);
  
  const aiBuddy = document.getElementById(elementId);
  
  if (!aiBuddy) {
      console.error(`AIBuddy with id "${elementId}" not found.`);
      return;
  }

  let lastShiftPress = 0;
  const doublePressDelay = 300;

  const makeAIRequest = () => {
    const targetID = "q_" + elementId;

    htmx.ajax('GET', '/ai/request', {
      target: `#${targetID}`,
      headers: {"Content-Type": "application/x-www-form-urlencoded"},
      swap: "outerHTML",
      values: {
          _id: elementId,
      }
    });
    
    // Listen for the htmx:afterSwap event to focus on the input
    document.addEventListener('htmx:afterSwap', function(event) {
      if (event.target.id === targetID) {
         event.target.focus();
      }

      // Remove this event listener after it's been triggered
      document.removeEventListener('htmx:afterSwap', arguments.callee);
    });
  };

  document.addEventListener('keydown', (event) => {
    if (event.ctrlKey && event.key === 'k') {
      event.preventDefault();
      makeAIRequest();
    }
  });

  document.addEventListener('keyup', (event) => {
    if (event.key === 'Shift') {
      const currentTime = new Date().getTime();
      if (currentTime - lastShiftPress <= doublePressDelay) {
        event.preventDefault();
        makeAIRequest();
      }
      lastShiftPress = currentTime;
    }
  });
}