feat: v14 with better popup
This commit is contained in:
826
chatwoot_quote_generator-0.14.user.js
Normal file
826
chatwoot_quote_generator-0.14.user.js
Normal file
@ -0,0 +1,826 @@
|
|||||||
|
// ==UserScript==
|
||||||
|
// @name Chatwoot Quote Generator
|
||||||
|
// @namespace http://tampermonkey.net/
|
||||||
|
// @version 0.14
|
||||||
|
// @description Generate a formatted quote from Chatwoot conversation
|
||||||
|
// @author You
|
||||||
|
// @match https://chatwoot.abawo.de/app/*
|
||||||
|
// @grant GM_setValue
|
||||||
|
// @grant GM_getValue
|
||||||
|
// ==/UserScript==
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Configuration with default values
|
||||||
|
let config = {
|
||||||
|
maxMessages: 5,
|
||||||
|
language: 'en',
|
||||||
|
showExclusionIndicator: true,
|
||||||
|
autoOpenParticipants: true
|
||||||
|
};
|
||||||
|
|
||||||
|
// Separator to identify the end of quotes
|
||||||
|
const QUOTE_SEPARATOR = "----------------- ";
|
||||||
|
|
||||||
|
// Month translations for German date formatting
|
||||||
|
const monthTranslations = {
|
||||||
|
'Jan': 'Jan',
|
||||||
|
'Feb': 'Feb',
|
||||||
|
'Mar': 'Mär',
|
||||||
|
'Apr': 'Apr',
|
||||||
|
'May': 'Mai',
|
||||||
|
'Jun': 'Jun',
|
||||||
|
'Jul': 'Jul',
|
||||||
|
'Aug': 'Aug',
|
||||||
|
'Sep': 'Sep',
|
||||||
|
'Oct': 'Okt',
|
||||||
|
'Nov': 'Nov',
|
||||||
|
'Dec': 'Dez'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Translations
|
||||||
|
const translations = {
|
||||||
|
en: {
|
||||||
|
wrote_at: 'wrote at',
|
||||||
|
from_abawo: 'from abawo',
|
||||||
|
max_messages: 'Maximum messages to quote:',
|
||||||
|
language: 'Language:',
|
||||||
|
save: 'Save',
|
||||||
|
cancel: 'Cancel',
|
||||||
|
quote_config: 'Quote Configuration',
|
||||||
|
english: 'English',
|
||||||
|
german: 'German',
|
||||||
|
show_exclusion: 'Show "..." for excluded messages:',
|
||||||
|
excluded_messages: '... (older messages hidden)',
|
||||||
|
auto_open: 'Auto-open participants section:'
|
||||||
|
},
|
||||||
|
de: {
|
||||||
|
wrote_at: 'schrieb am',
|
||||||
|
from_abawo: 'von abawo',
|
||||||
|
max_messages: 'Maximale Anzahl zu zitierender Nachrichten:',
|
||||||
|
language: 'Sprache:',
|
||||||
|
save: 'Speichern',
|
||||||
|
cancel: 'Abbrechen',
|
||||||
|
quote_config: 'Zitat-Konfiguration',
|
||||||
|
english: 'Englisch',
|
||||||
|
german: 'Deutsch',
|
||||||
|
show_exclusion: 'Zeige "..." für ausgeschlossene Nachrichten:',
|
||||||
|
excluded_messages: '... (ältere Nachrichten versteckt)',
|
||||||
|
auto_open: 'Teilnehmerbereich automatisch öffnen:'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper function to get translation
|
||||||
|
function t(key) {
|
||||||
|
return translations[config.language][key] || translations.en[key];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to format date in German style
|
||||||
|
function formatDateGerman(dateStr) {
|
||||||
|
// Common format is "Jun 17, 2:33 PM"
|
||||||
|
try {
|
||||||
|
// Extract components from the date string
|
||||||
|
const parts = dateStr.match(/(\w+)\s+(\d+),\s+(\d+):(\d+)\s+(\w+)/);
|
||||||
|
if (!parts) return dateStr; // Return original if no match
|
||||||
|
|
||||||
|
const month = monthTranslations[parts[1]] || parts[1];
|
||||||
|
const day = parts[2];
|
||||||
|
let hour = parseInt(parts[3]);
|
||||||
|
const minute = parts[4];
|
||||||
|
const ampm = parts[5];
|
||||||
|
|
||||||
|
// Convert to 24-hour format
|
||||||
|
if (ampm === 'PM' && hour < 12) hour += 12;
|
||||||
|
if (ampm === 'AM' && hour === 12) hour = 0;
|
||||||
|
|
||||||
|
// Format as "17. Jun um 14:33"
|
||||||
|
return `${day}. ${month} um ${hour.toString().padStart(2, '0')}:${minute}`;
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Error formatting date:', e);
|
||||||
|
return dateStr; // Return original on error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load saved configuration if available
|
||||||
|
try {
|
||||||
|
const savedConfig = GM_getValue('chatwootQuoteConfig');
|
||||||
|
if (savedConfig) {
|
||||||
|
config = JSON.parse(savedConfig);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to load configuration:', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save configuration
|
||||||
|
function saveConfig() {
|
||||||
|
GM_setValue('chatwootQuoteConfig', JSON.stringify(config));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to wait for an element to be available in the DOM
|
||||||
|
function waitForElement(selector, callback, maxWaitTime = 10000) {
|
||||||
|
const startTime = Date.now();
|
||||||
|
|
||||||
|
const checkExist = setInterval(function() {
|
||||||
|
const element = document.querySelector(selector);
|
||||||
|
|
||||||
|
if (element) {
|
||||||
|
clearInterval(checkExist);
|
||||||
|
callback(element);
|
||||||
|
} else if (Date.now() - startTime > maxWaitTime) {
|
||||||
|
clearInterval(checkExist);
|
||||||
|
console.log(`Element ${selector} not found after ${maxWaitTime}ms`);
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
// IMPROVED: Function to extract message text excluding blockquotes and HR elements
|
||||||
|
function extractTextExcludingQuotes(textContentElement) {
|
||||||
|
if (!textContentElement) return '';
|
||||||
|
|
||||||
|
// Check if there are blockquotes
|
||||||
|
const blockquotes = textContentElement.querySelectorAll('blockquote');
|
||||||
|
const hrElements = textContentElement.querySelectorAll('hr');
|
||||||
|
|
||||||
|
// If there are no blockquotes or hr elements, return the full text
|
||||||
|
if (blockquotes.length === 0 && hrElements.length === 0) {
|
||||||
|
// Customer email messages often have a different structure
|
||||||
|
if (textContentElement.querySelector('div[dir="auto"]')) {
|
||||||
|
return textContentElement.querySelector('div[dir="auto"]').textContent.trim();
|
||||||
|
}
|
||||||
|
// Messages with paragraphs
|
||||||
|
else if (textContentElement.querySelectorAll('p').length > 0) {
|
||||||
|
const paragraphs = textContentElement.querySelectorAll('p');
|
||||||
|
return Array.from(paragraphs)
|
||||||
|
.map(p => p.textContent.trim())
|
||||||
|
.filter(t => t)
|
||||||
|
.join('\n');
|
||||||
|
}
|
||||||
|
// Fallback for any other format
|
||||||
|
else {
|
||||||
|
return textContentElement.textContent.trim();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clone the node to avoid modifying the original
|
||||||
|
const clonedNode = textContentElement.cloneNode(true);
|
||||||
|
|
||||||
|
// Remove all blockquotes
|
||||||
|
blockquotes.forEach((blockquote, index) => {
|
||||||
|
const correspondingBlockquote = clonedNode.querySelectorAll('blockquote')[index];
|
||||||
|
if (correspondingBlockquote) {
|
||||||
|
correspondingBlockquote.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove all hr elements
|
||||||
|
hrElements.forEach((hr, index) => {
|
||||||
|
const correspondingHr = clonedNode.querySelectorAll('hr')[index];
|
||||||
|
if (correspondingHr) {
|
||||||
|
correspondingHr.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// IMPROVED: Extract text with better line break handling
|
||||||
|
let text = '';
|
||||||
|
|
||||||
|
// Process paragraph elements if they exist
|
||||||
|
if (clonedNode.querySelectorAll('p').length > 0) {
|
||||||
|
const paragraphs = clonedNode.querySelectorAll('p');
|
||||||
|
text = Array.from(paragraphs)
|
||||||
|
.map(p => p.textContent.trim())
|
||||||
|
.filter(t => t)
|
||||||
|
.join('\n');
|
||||||
|
} else {
|
||||||
|
// Get the text content
|
||||||
|
text = clonedNode.textContent.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
// IMPROVED: Clean up problematic formatting
|
||||||
|
// Replace double >> with single >
|
||||||
|
text = text.replace(/>>\s*>/g, '> ');
|
||||||
|
|
||||||
|
// Fix missing spaces after commas in quoted content
|
||||||
|
text = text.replace(/,(?=\S)/g, ', ');
|
||||||
|
|
||||||
|
// Ensure proper line breaks for quoted content
|
||||||
|
// Look for patterns like "> text> more text" and fix them
|
||||||
|
text = text.replace(/>\s*([^>]+?)>\s*/g, "> $1\n> ");
|
||||||
|
|
||||||
|
// Fix cases where quote separator is in the middle of text
|
||||||
|
if (text.includes(QUOTE_SEPARATOR)) {
|
||||||
|
const parts = text.split(QUOTE_SEPARATOR);
|
||||||
|
text = parts[0].trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Normalize multiple consecutive line breaks
|
||||||
|
text = text.replace(/\n{3,}/g, '\n\n');
|
||||||
|
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper functions for auto-opening UI elements
|
||||||
|
function isSidebarOpen() {
|
||||||
|
// Check if sidebar is open by looking for the caret direction
|
||||||
|
const sidebarToggle = document.querySelector('button[data-v-2defdc7c=""] .i-ph-caret-right-fill');
|
||||||
|
return !!sidebarToggle; // If caret-right-fill exists, sidebar is open
|
||||||
|
}
|
||||||
|
|
||||||
|
function isParticipantsSectionExpanded() {
|
||||||
|
// Check if participants section is expanded by looking for the minus icon
|
||||||
|
const participantsSection = document.querySelector('[data-v-70238fc0=""] button');
|
||||||
|
if (!participantsSection) return false;
|
||||||
|
|
||||||
|
// Look for minus icon (expanded state)
|
||||||
|
const minusIcon = participantsSection.querySelector('svg path[d*="M3.997 13H20"]');
|
||||||
|
return !!minusIcon;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hasParticipantsLoaded() {
|
||||||
|
// Check if participants have loaded (not showing "No one is participating")
|
||||||
|
const participantsText = document.querySelector('[data-v-d343fa58=""] .total-watchers');
|
||||||
|
if (!participantsText) return false;
|
||||||
|
|
||||||
|
const text = participantsText.textContent.trim();
|
||||||
|
return !text.includes('No one is participating') && text.includes('participating');
|
||||||
|
}
|
||||||
|
|
||||||
|
function clickSidebarToggle() {
|
||||||
|
const sidebarToggle = document.querySelector('button[data-v-2defdc7c=""]');
|
||||||
|
if (sidebarToggle) {
|
||||||
|
sidebarToggle.click();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clickParticipantsToggle() {
|
||||||
|
const participantsToggle = document.querySelector('[data-v-70238fc0=""] button');
|
||||||
|
if (participantsToggle) {
|
||||||
|
participantsToggle.click();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to wait with timeout
|
||||||
|
function waitFor(conditionFn, timeout = 1000) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
const startTime = Date.now();
|
||||||
|
const checkCondition = () => {
|
||||||
|
if (conditionFn()) {
|
||||||
|
resolve(true);
|
||||||
|
} else if (Date.now() - startTime > timeout) {
|
||||||
|
resolve(false);
|
||||||
|
} else {
|
||||||
|
setTimeout(checkCondition, 50);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
checkCondition();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to attempt auto-opening sidebar and participants section
|
||||||
|
async function ensureParticipantsSectionAccessible() {
|
||||||
|
if (!config.autoOpenParticipants) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
let opened = false;
|
||||||
|
|
||||||
|
// Step 1: Open sidebar if closed
|
||||||
|
if (!isSidebarOpen()) {
|
||||||
|
console.log('Opening sidebar...');
|
||||||
|
if (clickSidebarToggle()) {
|
||||||
|
opened = true;
|
||||||
|
await waitFor(isSidebarOpen, 200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 2: Expand participants section if collapsed
|
||||||
|
if (!isParticipantsSectionExpanded()) {
|
||||||
|
console.log('Expanding participants section...');
|
||||||
|
if (clickParticipantsToggle()) {
|
||||||
|
opened = true;
|
||||||
|
await waitFor(isParticipantsSectionExpanded, 200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 3: Wait for participants to load
|
||||||
|
if (opened) {
|
||||||
|
console.log('Waiting for participants to load...');
|
||||||
|
await waitFor(hasParticipantsLoaded, 600);
|
||||||
|
}
|
||||||
|
|
||||||
|
return opened;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to build lookup table from conversation participants
|
||||||
|
function buildAgentLookupTable() {
|
||||||
|
const lookupTable = {};
|
||||||
|
|
||||||
|
// Try to find the conversation participants section
|
||||||
|
const participantsSection = document.querySelector('[data-v-d343fa58=""][inbox-id]');
|
||||||
|
if (!participantsSection) {
|
||||||
|
return lookupTable;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Look for participant entries in overlapping thumbnails section
|
||||||
|
const thumbnails = participantsSection.querySelectorAll('.overlapping-thumbnails .user-thumbnail-box');
|
||||||
|
thumbnails.forEach(thumbnail => {
|
||||||
|
const nameAttr = thumbnail.getAttribute('data-original-title');
|
||||||
|
const avatarContainer = thumbnail.querySelector('.avatar-container');
|
||||||
|
|
||||||
|
if (nameAttr && avatarContainer) {
|
||||||
|
const initials = avatarContainer.textContent.trim();
|
||||||
|
if (initials && nameAttr) {
|
||||||
|
lookupTable[initials] = nameAttr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Also look in the dropdown participant list if available
|
||||||
|
const dropdownItems = participantsSection.querySelectorAll('.dropdown-menu__item');
|
||||||
|
dropdownItems.forEach(item => {
|
||||||
|
const nameSpan = item.querySelector('span[title]');
|
||||||
|
const avatarContainer = item.querySelector('.avatar-container');
|
||||||
|
|
||||||
|
if (nameSpan && avatarContainer) {
|
||||||
|
const fullName = nameSpan.getAttribute('title') || nameSpan.textContent.trim();
|
||||||
|
const initials = avatarContainer.textContent.trim();
|
||||||
|
if (initials && fullName) {
|
||||||
|
lookupTable[initials] = fullName;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return lookupTable;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to extract agent initials from avatar and get full name if available
|
||||||
|
function extractAgentInitials(messageElement, agentLookup = {}) {
|
||||||
|
// Look for avatar container within the message
|
||||||
|
const avatarContainer = messageElement.querySelector('.sender--info .avatar-container');
|
||||||
|
let initials = null;
|
||||||
|
|
||||||
|
if (avatarContainer) {
|
||||||
|
initials = avatarContainer.textContent.trim();
|
||||||
|
} else {
|
||||||
|
// Fallback: look for other possible avatar selectors
|
||||||
|
const altAvatarContainer = messageElement.querySelector('.user-thumbnail-box .avatar-container');
|
||||||
|
if (altAvatarContainer) {
|
||||||
|
initials = altAvatarContainer.textContent.trim();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (initials && initials.length >= 1) {
|
||||||
|
// Try to get full name from lookup table
|
||||||
|
const fullName = agentLookup[initials];
|
||||||
|
if (fullName) {
|
||||||
|
return fullName;
|
||||||
|
}
|
||||||
|
return initials;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If no initials found, return generic fallback
|
||||||
|
return "Agent";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to extract message data
|
||||||
|
async function extractMessages() {
|
||||||
|
// Build agent lookup table from conversation participants
|
||||||
|
let agentLookup = buildAgentLookupTable();
|
||||||
|
|
||||||
|
// If we don't have enough data and auto-open is enabled, try to access participants section
|
||||||
|
if (Object.keys(agentLookup).length === 0 && config.autoOpenParticipants) {
|
||||||
|
const opened = await ensureParticipantsSectionAccessible();
|
||||||
|
if (opened) {
|
||||||
|
// Try building lookup table again after opening UI elements
|
||||||
|
agentLookup = buildAgentLookupTable();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get customer name
|
||||||
|
const customerNameElement = document.querySelector('.conversation-details-wrap .text-base.font-medium.truncate.leading-tight.text-n-slate-12');
|
||||||
|
const customerName = customerNameElement ? customerNameElement.textContent.trim() : "Customer";
|
||||||
|
|
||||||
|
// Get all message items
|
||||||
|
const messages = [];
|
||||||
|
const messageItems = document.querySelectorAll('.conversation-panel > li');
|
||||||
|
|
||||||
|
messageItems.forEach(li => {
|
||||||
|
// Skip system messages (center)
|
||||||
|
if (li.classList.contains('center')) return;
|
||||||
|
|
||||||
|
const bubble = li.querySelector('.bubble');
|
||||||
|
if (!bubble) return;
|
||||||
|
|
||||||
|
// Skip private notes
|
||||||
|
if (bubble.classList.contains('is-private')) return;
|
||||||
|
|
||||||
|
const isCustomer = li.classList.contains('left');
|
||||||
|
|
||||||
|
// Determine sender name
|
||||||
|
let senderName;
|
||||||
|
if (isCustomer) {
|
||||||
|
senderName = customerName;
|
||||||
|
} else {
|
||||||
|
// Extract agent name/initials from the avatar within this specific message
|
||||||
|
const agentName = extractAgentInitials(li, agentLookup);
|
||||||
|
senderName = `${agentName} ${t('from_abawo')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extract timestamp
|
||||||
|
const timeElement = li.querySelector('.time');
|
||||||
|
const time = timeElement ? timeElement.textContent.trim() : "";
|
||||||
|
|
||||||
|
// Format the time according to the selected language
|
||||||
|
const formattedTime = config.language === 'de' ? formatDateGerman(time) : time;
|
||||||
|
|
||||||
|
// Extract message text
|
||||||
|
const textWrap = bubble.querySelector('.message-text__wrap');
|
||||||
|
if (!textWrap) return;
|
||||||
|
|
||||||
|
const textContentElement = textWrap.querySelector('.text-content');
|
||||||
|
|
||||||
|
// Extract text while excluding blockquotes
|
||||||
|
let text = extractTextExcludingQuotes(textContentElement);
|
||||||
|
|
||||||
|
if (text) {
|
||||||
|
messages.push({
|
||||||
|
isCustomer,
|
||||||
|
name: senderName,
|
||||||
|
time: formattedTime,
|
||||||
|
text
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Keep track of whether messages were excluded
|
||||||
|
const messagesExcluded = messages.length > config.maxMessages;
|
||||||
|
|
||||||
|
// Limit the number of messages based on configuration
|
||||||
|
if (messagesExcluded) {
|
||||||
|
messages.splice(0, messages.length - config.maxMessages);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { messages, messagesExcluded };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to format messages as a quote
|
||||||
|
function formatQuote(data) {
|
||||||
|
let quote = "";
|
||||||
|
|
||||||
|
// Add indicator for excluded messages if enabled and messages were excluded
|
||||||
|
if (config.showExclusionIndicator && data.messagesExcluded) {
|
||||||
|
quote += `> ${t('excluded_messages')}\n>\n`;
|
||||||
|
}
|
||||||
|
|
||||||
|
data.messages.forEach((message, index) => {
|
||||||
|
if (index > 0) {
|
||||||
|
quote += "\n>\n"; // Empty line with ">" between messages
|
||||||
|
}
|
||||||
|
|
||||||
|
quote += `> ${message.name} ${t('wrote_at')} ${message.time}:\n> ${message.text.replace(/\n/g, '\n> ')}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add separator to mark the end of quotes
|
||||||
|
if (quote) {
|
||||||
|
quote += `\n\n${QUOTE_SEPARATOR}\n\n`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return quote;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to add the quote to the text area
|
||||||
|
function addQuoteToTextArea(quote) {
|
||||||
|
const textArea = document.querySelector('.ProseMirror');
|
||||||
|
if (!textArea) return;
|
||||||
|
|
||||||
|
// Focus the editor
|
||||||
|
textArea.focus();
|
||||||
|
|
||||||
|
// Clear the editor if it's empty
|
||||||
|
if (textArea.querySelector('.empty-node')) {
|
||||||
|
textArea.innerHTML = '<p></p>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Try multiple methods to insert text
|
||||||
|
try {
|
||||||
|
// Try using execCommand
|
||||||
|
document.execCommand('insertText', false, quote);
|
||||||
|
} catch (e) {
|
||||||
|
console.log("execCommand method failed:", e);
|
||||||
|
|
||||||
|
// Fallback to creating a text node
|
||||||
|
try {
|
||||||
|
const selection = window.getSelection();
|
||||||
|
if (selection.rangeCount > 0) {
|
||||||
|
const range = selection.getRangeAt(0);
|
||||||
|
const textNode = document.createTextNode(quote);
|
||||||
|
range.insertNode(textNode);
|
||||||
|
} else {
|
||||||
|
// If no selection, add to the beginning
|
||||||
|
const p = textArea.querySelector('p') || textArea;
|
||||||
|
if (p.firstChild) {
|
||||||
|
p.insertBefore(document.createTextNode(quote), p.firstChild);
|
||||||
|
} else {
|
||||||
|
p.appendChild(document.createTextNode(quote));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to insert text:", err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to create and show configuration popup
|
||||||
|
function showConfigPopup(x, y) {
|
||||||
|
// Remove any existing popup
|
||||||
|
const existingPopup = document.getElementById('chatwoot-quote-config');
|
||||||
|
if (existingPopup) {
|
||||||
|
existingPopup.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create popup container
|
||||||
|
const popup = document.createElement('div');
|
||||||
|
popup.id = 'chatwoot-quote-config';
|
||||||
|
popup.style.position = 'fixed';
|
||||||
|
popup.style.zIndex = '9999';
|
||||||
|
popup.style.padding = '12px';
|
||||||
|
popup.style.backgroundColor = '#1e293b'; // Dark slate background
|
||||||
|
popup.style.border = '1px solid #475569'; // Lighter border
|
||||||
|
popup.style.borderRadius = '8px';
|
||||||
|
popup.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.3)';
|
||||||
|
popup.style.width = '280px';
|
||||||
|
popup.style.color = '#f1f5f9'; // Light text
|
||||||
|
|
||||||
|
// Add title
|
||||||
|
const title = document.createElement('h3');
|
||||||
|
title.textContent = t('quote_config');
|
||||||
|
title.style.margin = '0 0 12px 0';
|
||||||
|
title.style.fontSize = '16px';
|
||||||
|
title.style.fontWeight = 'bold';
|
||||||
|
title.style.color = '#f8fafc'; // Very light text for title
|
||||||
|
popup.appendChild(title);
|
||||||
|
|
||||||
|
// Add max messages configuration
|
||||||
|
const maxMessagesLabel = document.createElement('label');
|
||||||
|
maxMessagesLabel.textContent = t('max_messages') + ' ';
|
||||||
|
maxMessagesLabel.style.display = 'block';
|
||||||
|
maxMessagesLabel.style.marginBottom = '6px';
|
||||||
|
maxMessagesLabel.style.fontSize = '13px';
|
||||||
|
maxMessagesLabel.style.color = '#cbd5e1'; // Light gray text
|
||||||
|
popup.appendChild(maxMessagesLabel);
|
||||||
|
|
||||||
|
const maxMessagesInput = document.createElement('input');
|
||||||
|
maxMessagesInput.type = 'number';
|
||||||
|
maxMessagesInput.min = '1';
|
||||||
|
maxMessagesInput.max = '20';
|
||||||
|
maxMessagesInput.value = config.maxMessages;
|
||||||
|
maxMessagesInput.style.width = '100%';
|
||||||
|
maxMessagesInput.style.marginBottom = '12px';
|
||||||
|
maxMessagesInput.style.padding = '6px 8px';
|
||||||
|
maxMessagesInput.style.boxSizing = 'border-box';
|
||||||
|
maxMessagesInput.style.backgroundColor = '#334155'; // Dark input background
|
||||||
|
maxMessagesInput.style.border = '1px solid #475569';
|
||||||
|
maxMessagesInput.style.borderRadius = '4px';
|
||||||
|
maxMessagesInput.style.color = '#f1f5f9'; // Light input text
|
||||||
|
popup.appendChild(maxMessagesInput);
|
||||||
|
|
||||||
|
// Add language selector
|
||||||
|
const languageLabel = document.createElement('label');
|
||||||
|
languageLabel.textContent = t('language') + ' ';
|
||||||
|
languageLabel.style.display = 'block';
|
||||||
|
languageLabel.style.marginBottom = '6px';
|
||||||
|
languageLabel.style.fontSize = '13px';
|
||||||
|
languageLabel.style.color = '#cbd5e1';
|
||||||
|
popup.appendChild(languageLabel);
|
||||||
|
|
||||||
|
const languageSelect = document.createElement('select');
|
||||||
|
languageSelect.style.width = '100%';
|
||||||
|
languageSelect.style.marginBottom = '12px';
|
||||||
|
languageSelect.style.padding = '6px 8px';
|
||||||
|
languageSelect.style.boxSizing = 'border-box';
|
||||||
|
languageSelect.style.backgroundColor = '#334155';
|
||||||
|
languageSelect.style.border = '1px solid #475569';
|
||||||
|
languageSelect.style.borderRadius = '4px';
|
||||||
|
languageSelect.style.color = '#f1f5f9';
|
||||||
|
|
||||||
|
const languages = [
|
||||||
|
{ value: 'en', label: t('english') },
|
||||||
|
{ value: 'de', label: t('german') }
|
||||||
|
];
|
||||||
|
|
||||||
|
languages.forEach(lang => {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.value = lang.value;
|
||||||
|
option.textContent = lang.label;
|
||||||
|
if (config.language === lang.value) {
|
||||||
|
option.selected = true;
|
||||||
|
}
|
||||||
|
languageSelect.appendChild(option);
|
||||||
|
});
|
||||||
|
|
||||||
|
popup.appendChild(languageSelect);
|
||||||
|
|
||||||
|
// Add show exclusion indicator checkbox
|
||||||
|
const showExclusionLabel = document.createElement('label');
|
||||||
|
showExclusionLabel.textContent = t('show_exclusion') + ' ';
|
||||||
|
showExclusionLabel.style.display = 'block';
|
||||||
|
showExclusionLabel.style.marginBottom = '6px';
|
||||||
|
showExclusionLabel.style.fontSize = '13px';
|
||||||
|
showExclusionLabel.style.color = '#cbd5e1';
|
||||||
|
popup.appendChild(showExclusionLabel);
|
||||||
|
|
||||||
|
const showExclusionCheckbox = document.createElement('input');
|
||||||
|
showExclusionCheckbox.type = 'checkbox';
|
||||||
|
showExclusionCheckbox.checked = config.showExclusionIndicator;
|
||||||
|
showExclusionCheckbox.style.marginBottom = '12px';
|
||||||
|
showExclusionCheckbox.style.marginRight = '6px';
|
||||||
|
showExclusionCheckbox.style.accentColor = '#3b82f6'; // Blue accent for checkbox
|
||||||
|
popup.appendChild(showExclusionCheckbox);
|
||||||
|
|
||||||
|
// Add a line break after the checkbox
|
||||||
|
popup.appendChild(document.createElement('br'));
|
||||||
|
|
||||||
|
// Add auto-open participants checkbox
|
||||||
|
const autoOpenLabel = document.createElement('label');
|
||||||
|
autoOpenLabel.textContent = t('auto_open') + ' ';
|
||||||
|
autoOpenLabel.style.display = 'block';
|
||||||
|
autoOpenLabel.style.marginBottom = '6px';
|
||||||
|
autoOpenLabel.style.fontSize = '13px';
|
||||||
|
autoOpenLabel.style.color = '#cbd5e1';
|
||||||
|
popup.appendChild(autoOpenLabel);
|
||||||
|
|
||||||
|
const autoOpenCheckbox = document.createElement('input');
|
||||||
|
autoOpenCheckbox.type = 'checkbox';
|
||||||
|
autoOpenCheckbox.checked = config.autoOpenParticipants;
|
||||||
|
autoOpenCheckbox.style.marginBottom = '12px';
|
||||||
|
autoOpenCheckbox.style.marginRight = '6px';
|
||||||
|
autoOpenCheckbox.style.accentColor = '#3b82f6';
|
||||||
|
popup.appendChild(autoOpenCheckbox);
|
||||||
|
|
||||||
|
// Add a line break after the checkbox
|
||||||
|
popup.appendChild(document.createElement('br'));
|
||||||
|
|
||||||
|
// Add save button
|
||||||
|
const saveButton = document.createElement('button');
|
||||||
|
saveButton.textContent = t('save');
|
||||||
|
saveButton.style.padding = '8px 16px';
|
||||||
|
saveButton.style.backgroundColor = '#3b82f6'; // Blue background
|
||||||
|
saveButton.style.color = 'white';
|
||||||
|
saveButton.style.border = 'none';
|
||||||
|
saveButton.style.borderRadius = '6px';
|
||||||
|
saveButton.style.cursor = 'pointer';
|
||||||
|
saveButton.style.marginRight = '8px';
|
||||||
|
saveButton.style.fontSize = '13px';
|
||||||
|
saveButton.style.fontWeight = '500';
|
||||||
|
|
||||||
|
saveButton.addEventListener('click', function() {
|
||||||
|
config.maxMessages = parseInt(maxMessagesInput.value, 10) || 5;
|
||||||
|
config.language = languageSelect.value;
|
||||||
|
config.showExclusionIndicator = showExclusionCheckbox.checked;
|
||||||
|
config.autoOpenParticipants = autoOpenCheckbox.checked;
|
||||||
|
saveConfig();
|
||||||
|
popup.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
popup.appendChild(saveButton);
|
||||||
|
|
||||||
|
// Add cancel button
|
||||||
|
const cancelButton = document.createElement('button');
|
||||||
|
cancelButton.textContent = t('cancel');
|
||||||
|
cancelButton.style.padding = '8px 16px';
|
||||||
|
cancelButton.style.backgroundColor = '#475569'; // Dark gray background
|
||||||
|
cancelButton.style.color = '#f1f5f9'; // Light text
|
||||||
|
cancelButton.style.border = '1px solid #64748b';
|
||||||
|
cancelButton.style.borderRadius = '6px';
|
||||||
|
cancelButton.style.cursor = 'pointer';
|
||||||
|
cancelButton.style.fontSize = '13px';
|
||||||
|
cancelButton.style.fontWeight = '500';
|
||||||
|
|
||||||
|
cancelButton.addEventListener('click', function() {
|
||||||
|
popup.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
popup.appendChild(cancelButton);
|
||||||
|
|
||||||
|
// Calculate popup dimensions and position it with bottom-right at click position
|
||||||
|
// Need to temporarily add it to the DOM to get the dimensions
|
||||||
|
popup.style.visibility = 'hidden';
|
||||||
|
document.body.appendChild(popup);
|
||||||
|
const popupWidth = popup.offsetWidth;
|
||||||
|
const popupHeight = popup.offsetHeight;
|
||||||
|
document.body.removeChild(popup);
|
||||||
|
popup.style.visibility = 'visible';
|
||||||
|
|
||||||
|
// Position popup so bottom-right corner is at click position
|
||||||
|
const leftPos = Math.max(x - popupWidth, 10); // Ensure it doesn't go off the left edge
|
||||||
|
const topPos = Math.max(y - popupHeight, 10); // Ensure it doesn't go off the top edge
|
||||||
|
|
||||||
|
popup.style.left = `${leftPos}px`;
|
||||||
|
popup.style.top = `${topPos}px`;
|
||||||
|
|
||||||
|
// Close popup when clicking outside
|
||||||
|
document.addEventListener('click', function closePopup(e) {
|
||||||
|
if (!popup.contains(e.target) && e.target.id !== 'chatwoot-quote-btn') {
|
||||||
|
popup.remove();
|
||||||
|
document.removeEventListener('click', closePopup);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.appendChild(popup);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to create and add the quote button
|
||||||
|
function addQuoteButton() {
|
||||||
|
waitForElement('[data-v-b5303981] .right-wrap', (rightWrap) => {
|
||||||
|
// Check if button already exists
|
||||||
|
if (document.getElementById('chatwoot-quote-btn')) return;
|
||||||
|
|
||||||
|
// Create the button
|
||||||
|
const quoteButton = document.createElement('button');
|
||||||
|
quoteButton.id = 'chatwoot-quote-btn';
|
||||||
|
quoteButton.className = 'flex-shrink-0 inline-flex items-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:opacity-50 bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 focus-visible:bg-n-slate-9/20 outline-transparent h-8 px-3 text-sm justify-center';
|
||||||
|
quoteButton.innerHTML = '|> Quote';
|
||||||
|
quoteButton.style.marginRight = '8px';
|
||||||
|
|
||||||
|
// Add click event
|
||||||
|
quoteButton.addEventListener('click', async function(e) {
|
||||||
|
const data = await extractMessages();
|
||||||
|
const quote = formatQuote(data);
|
||||||
|
addQuoteToTextArea(quote);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add right-click event for configuration
|
||||||
|
quoteButton.addEventListener('contextmenu', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
showConfigPopup(e.clientX, e.clientY);
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Insert the button before the send button
|
||||||
|
const sendButton = rightWrap.querySelector('button[type="submit"]');
|
||||||
|
if (sendButton) {
|
||||||
|
rightWrap.insertBefore(quoteButton, sendButton);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize the script
|
||||||
|
function init() {
|
||||||
|
// Add button on page load
|
||||||
|
window.addEventListener('load', function() {
|
||||||
|
setTimeout(addQuoteButton, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Try adding button immediately
|
||||||
|
addQuoteButton();
|
||||||
|
|
||||||
|
// Also check periodically for dynamic page changes
|
||||||
|
setInterval(addQuoteButton, 3000);
|
||||||
|
|
||||||
|
// Add CSS for the button and popup
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
#chatwoot-quote-btn:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatwoot-quote-config {
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatwoot-quote-config input:focus,
|
||||||
|
#chatwoot-quote-config select:focus {
|
||||||
|
outline: 2px solid #3b82f6;
|
||||||
|
outline-offset: 1px;
|
||||||
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatwoot-quote-config button:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatwoot-quote-config button:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatwoot-quote-config input[type="number"]::-webkit-outer-spin-button,
|
||||||
|
#chatwoot-quote-config input[type="number"]::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatwoot-quote-config input[type="number"] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
})();
|
||||||
Reference in New Issue
Block a user