📎
Drop files here
Supports: ${CONFIG.ACCEPTED_FILE_TYPES.join(', ')}
`;
document.body.appendChild(dropZone);
// Handle drop on the zone itself
dropZone.addEventListener('drop', handleDrop, true);
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
e.stopPropagation();
updateDropZoneContext(e.clientX, e.clientY);
}, true);
dropZone.addEventListener('dragleave', (e) => {
if (e.relatedTarget === null || !dropZone.contains(e.relatedTarget)) {
hideDropZone();
}
});
return dropZone;
}
function updateDropZoneContext(x, y) {
const contextEl = document.getElementById('nc-drop-zone-context');
if (!contextEl) return;
// Detect what we're hovering over
const knowledgeTab = $('[data-automation-id="Knowledge"][aria-selected="true"]');
if (knowledgeTab) {
contextEl.textContent = 'Will add to Knowledge Files';
contextEl.style.color = '#059669';
return;
}
// Check if we can identify chat areas
const allInputs = getAllFileInputs();
if (allInputs.length > 1) {
contextEl.textContent = 'Drop near the chat you want to attach to';
contextEl.style.color = '#6B7280';
} else if (allInputs.length === 1) {
contextEl.textContent = '';
} else {
contextEl.textContent = 'No file upload found on this page';
contextEl.style.color = '#DC2626';
}
}
function showDropZone() {
const dropZone = document.getElementById('nc-drop-zone') || createDropZone();
dropZone.classList.add('visible');
dropZoneVisible = true;
debugLog('Drop zone shown');
}
function hideDropZone() {
const dropZone = document.getElementById('nc-drop-zone');
if (dropZone) {
dropZone.classList.remove('visible');
}
dropZoneVisible = false;
debugLog('Drop zone hidden');
}
function handleDrop(e) {
e.preventDefault();
e.stopPropagation();
const dropX = e.clientX;
const dropY = e.clientY;
hideDropZone();
const files = Array.from(e.dataTransfer?.files || []);
debugLog('Drop event - files:', files.length, files.map(f => f.name), `at (${dropX}, ${dropY})`);
if (files.length === 0) {
debugLog('No files in drop');
return;
}
// Filter valid files
const validFiles = files.filter(file => {
const ext = '.' + file.name.split('.').pop().toLowerCase();
const isValid = CONFIG.ACCEPTED_FILE_TYPES.includes(ext);
debugLog(`File ${file.name} ext=${ext} valid=${isValid}`);
return isValid;
});
const invalidCount = files.length - validFiles.length;
if (invalidCount > 0) {
showToast(`${invalidCount} file(s) rejected - unsupported type`, 'error');
}
if (validFiles.length === 0) {
debugLog('No valid files after filtering');
return;
}
// Find the best file input based on drop location
const fileInput = findFileInputNearPoint(dropX, dropY);
if (fileInput) {
attachFilesToInput(validFiles, fileInput);
} else {
showToast('Could not find file input', 'error');
}
}
function attachFilesToInput(files, targetInput = null) {
const fileInput = targetInput || getFileInput();
debugLog('Attaching files to input:', fileInput);
if (!fileInput) {
console.error('[NinjaCat Chat UX] File input not found');
showToast('Could not attach files - input not found', 'error');
return;
}
try {
// Create a DataTransfer to set files on input
const dataTransfer = new DataTransfer();
files.forEach(file => {
dataTransfer.items.add(file);
debugLog('Added file to DataTransfer:', file.name);
});
// Set files on the input
fileInput.files = dataTransfer.files;
debugLog('Set files on input, count:', fileInput.files.length);
// Dispatch change event - this is what triggers Vue's file handling
const changeEvent = new Event('change', { bubbles: true, cancelable: true });
fileInput.dispatchEvent(changeEvent);
debugLog('Dispatched change event');
// Also dispatch input event for good measure
fileInput.dispatchEvent(new Event('input', { bubbles: true }));
// For Knowledge tab uploads, we may need to programmatically click
// the "Add File" button or trigger a specific handler
const context = determineFileInputContext(fileInput);
debugLog('File input context:', context);
if (context === FILE_CONTEXTS.KNOWLEDGE) {
// Try clicking the Add File button to trigger any additional handlers
const addFileBtn = fileInput.parentElement?.querySelector('.cursor-pointer');
if (addFileBtn) {
debugLog('Found Add File button, may need manual trigger');
}
}
// Show success after a brief delay to check
setTimeout(() => {
showToast(`${files.length} file(s) attached`, 'success');
debugLog('Files attachment complete');
}, 100);
} catch (err) {
console.error('[NinjaCat Chat UX] Error attaching files:', err);
showToast('Error attaching files', 'error');
}
}
// ---- Drag Events on Document ----
let dragCounter = 0;
function setupDragListeners() {
// Reset counter on any drop (even if not on our zone)
document.addEventListener('drop', (e) => {
dragCounter = 0;
if (dropZoneVisible) {
// Let our drop zone handle it
return;
}
// Prevent default browser behavior for drops outside our zone
e.preventDefault();
}, true);
document.addEventListener('dragenter', (e) => {
if (e.dataTransfer?.types?.includes('Files')) {
dragCounter++;
if (dragCounter === 1) {
showDropZone();
}
}
}, false);
document.addEventListener('dragleave', (e) => {
if (e.dataTransfer?.types?.includes('Files')) {
dragCounter--;
if (dragCounter <= 0) {
dragCounter = 0;
hideDropZone();
}
}
}, false);
document.addEventListener('dragover', (e) => {
if (e.dataTransfer?.types?.includes('Files')) {
e.preventDefault();
}
}, false);
debugLog('Drag listeners setup complete');
}
// ---- Always Unlocked Input ----
function ensureInputUnlocked() {
const textarea = getTextarea();
if (!textarea) return;
// Unlock the textarea itself
if (textarea.disabled) {
textarea.disabled = false;
debugLog('Unlocked textarea (was disabled)');
}
if (textarea.readOnly) {
textarea.readOnly = false;
debugLog('Unlocked textarea (was readonly)');
}
if (textarea.classList.contains('disabled') ||
textarea.classList.contains('cursor-not-allowed')) {
textarea.classList.remove('disabled', 'cursor-not-allowed');
debugLog('Removed disabling classes from textarea');
}
// IMPORTANT: Also unlock parent containers that may have "disabled" class
// NinjaCat adds "disabled" class to the parent .flex.items-center container
let parent = textarea.parentElement;
while (parent) {
if (parent.classList.contains('disabled')) {
parent.classList.remove('disabled');
debugLog('Removed disabled class from parent:', parent.className);
}
// Stop at the main input container
if (parent.classList.contains('rounded-3xl')) break;
parent = parent.parentElement;
}
// Also ensure the send button is enabled
const sendBtn = findSendButton();
if (sendBtn) {
// Remove disabled state and ensure it's clickable
sendBtn.disabled = false;
sendBtn.style.pointerEvents = 'auto';
debugLog('Ensured send button is clickable');
}
// IMPORTANT: Reset our internal processing flag when we unlock input.
// This prevents the Enter interceptor from blocking sends after error/cancel.
if (isAgentProcessing) {
// Double-check there's no real processing signal before resetting
const hasSpinner = document.querySelector('.animate-spin, [class*="spinner"], [class*="loading"]');
const hasStopBtn = document.querySelector('button[class*="stop"], button[class*="cancel"], [data-tip*="Stop"], [data-tip*="Cancel"]');
if (!hasSpinner && !hasStopBtn) {
isAgentProcessing = false;
debugLog('Reset isAgentProcessing to false (no hard signals present)');
}
}
}
// ---- Agent Processing Detection ----
function detectAgentProcessing() {
// Look for indicators that agent is actively processing
// Check for spinning/loading indicators anywhere in the chat area
const spinners = document.querySelectorAll('.animate-spin, [class*="spinner"], [class*="loading"]');
for (const spinner of spinners) {
if (spinner.offsetParent !== null) {
debugLog('Agent processing detected: spinner found');
return true;
}
}
// Check for "Stop" or "Cancel" button which indicates agent is running
const stopBtn = document.querySelector('button[class*="stop"], button[class*="cancel"], [data-tip*="Stop"], [data-tip*="Cancel"]');
if (stopBtn && stopBtn.offsetParent !== null) {
debugLog('Agent processing detected: stop/cancel button visible');
return true;
}
// Check for typing indicator or "thinking" state
const thinkingIndicators = document.querySelectorAll('[class*="thinking"], [class*="typing"], [class*="generating"]');
for (const indicator of thinkingIndicators) {
if (indicator.offsetParent !== null) {
debugLog('Agent processing detected: thinking indicator');
return true;
}
}
// NOTE: We intentionally do NOT use send button color (grey vs blue) as a signal.
// The button can stay grey after errors/cancels even though the agent is idle.
// Relying on color caused false positives that blocked user input.
return false;
}
/**
* Find the send button - it's the rounded circle with an arrow icon
*/
function findSendButton() {
// Look for the send button by its structure: rounded-full with arrow SVG
const candidates = document.querySelectorAll('.rounded-full');
for (const el of candidates) {
// Check if it contains the arrow SVG (path with specific clip-path)
const svg = el.querySelector('svg');
if (svg && el.offsetParent !== null) {
// The send button has a specific size and contains an arrow
const rect = el.getBoundingClientRect();
if (rect.width >= 20 && rect.width <= 30 && rect.height >= 20 && rect.height <= 30) {
// Check if near a textarea
const container = el.closest('.border.rounded-3xl, .flex.items-center');
if (container && container.querySelector('#autoselect-experience, textarea')) {
return el;
}
}
}
}
// Fallback selectors
return document.querySelector('.rounded-full.bg-blue-5, .rounded-full.bg-blue-100, .rounded-full.bg-grey-5');
}
function updateAgentState() {
const wasProcessing = isAgentProcessing;
isAgentProcessing = detectAgentProcessing();
if (wasProcessing && !isAgentProcessing) {
debugLog('Agent finished processing');
onAgentComplete();
} else if (!wasProcessing && isAgentProcessing) {
debugLog('Agent started processing');
}
// Always ensure input is unlocked
ensureInputUnlocked();
}
function onAgentComplete() {
if (!queuePaused && messageQueue.length > 0) {
const nextMessage = messageQueue.shift();
sendMessage(nextMessage);
updateQueueUI();
}
}
// ---- Message Queue ----
function addToQueue(message) {
if (messageQueue.length >= CONFIG.MAX_QUEUE_SIZE) {
showToast(`Queue full (max ${CONFIG.MAX_QUEUE_SIZE} messages)`, 'error');
return false;
}
messageQueue.push(message);
updateQueueUI();
showToast(`Message queued (${messageQueue.length}/${CONFIG.MAX_QUEUE_SIZE})`, 'info');
debugLog('Message added to queue:', message.substring(0, 30));
return true;
}
function removeFromQueue(index) {
if (index >= 0 && index < messageQueue.length) {
messageQueue.splice(index, 1);
updateQueueUI();
}
}
function clearQueue() {
messageQueue = [];
queuePaused = false;
updateQueueUI();
showToast('Queue cleared', 'info');
}
function pauseQueue() {
queuePaused = true;
updateQueueUI();
}
function resumeQueue() {
queuePaused = false;
if (!isAgentProcessing && messageQueue.length > 0) {
const nextMessage = messageQueue.shift();
sendMessage(nextMessage);
}
updateQueueUI();
}
function sendMessage(text) {
const textarea = getTextarea();
if (!textarea) {
console.error('[NinjaCat Chat UX] Cannot send - textarea not found');
return false;
}
debugLog('Sending message:', text.substring(0, 50) + '...');
// Ensure textarea is enabled
textarea.disabled = false;
textarea.readOnly = false;
// Set textarea value using native setter for Vue reactivity
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
nativeInputValueSetter.call(textarea, text);
// Dispatch input event to trigger Vue's v-model
textarea.dispatchEvent(new Event('input', { bubbles: true }));
// Also trigger keyup to ensure any listeners pick it up
textarea.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));
// Give Vue a moment to react, then click send
setTimeout(() => {
const sendBtn = findSendButton();
debugLog('Send button found:', sendBtn);
if (sendBtn) {
// Make sure button is clickable
sendBtn.disabled = false;
sendBtn.click();
debugLog('Message sent via button click');
} else {
// Fallback: simulate Enter key with all necessary properties
debugLog('No send button found, trying Enter key');
const enterEvent = new KeyboardEvent('keydown', {
key: 'Enter',
code: 'Enter',
keyCode: 13,
which: 13,
bubbles: true,
cancelable: true
});
textarea.dispatchEvent(enterEvent);
debugLog('Enter key dispatched');
}
}, 100);
return true;
}
/**
* Directly trigger a send - bypasses queue, for use after errors/cancellations
*/
function forceSendCurrentInput() {
const textarea = getTextarea();
if (!textarea) return false;
const text = textarea.value.trim();
if (!text) return false;
debugLog('Force sending current input');
// Clear the textarea first
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
nativeInputValueSetter.call(textarea, '');
textarea.dispatchEvent(new Event('input', { bubbles: true }));
// Then send the message
return sendMessage(text);
}
// ---- Queue UI ----
function updateQueueUI() {
let container = document.getElementById('nc-queue-container');
if (messageQueue.length === 0) {
if (container) container.remove();
return;
}
const wrapper = getInputWrapper();
if (!wrapper) {
debugLog('Could not find input wrapper for queue UI');
return;
}
if (!container) {
container = document.createElement('div');
container.id = 'nc-queue-container';
container.className = 'nc-queue-container';
wrapper.parentElement?.insertBefore(container, wrapper.nextSibling);
}
const pausedClass = queuePaused ? 'paused' : '';
container.innerHTML = `