(function (){
'use strict';
const state={
open: false,
loading: false,
category: 'dashboard',
history: [],
categories: null,
conversationId: null,
};
const isAdmin=typeof claudeChatbot!=='undefined'&&claudeChatbot.isAdmin;
let $trigger, $container, $messages, $input, $sendBtn, $categoriesBar;
const icons={
chat: '',
close: '',
send: '',
bot: '',
user: '',
spark: '',
'chart-bar': '',
'share': '',
'box': '',
'users': '',
'layout-dashboard': '',
};
document.addEventListener('DOMContentLoaded', ()=> {
$trigger=document.getElementById('ccb-trigger');
$container=document.getElementById('ccb-container');
$messages=document.getElementById('ccb-messages');
$input=document.getElementById('ccb-input');
$sendBtn=document.getElementById('ccb-send');
$categoriesBar=document.getElementById('ccb-categories');
if(!$trigger||!$container) return;
$trigger.addEventListener('click', toggleChat);
document.getElementById('ccb-close')?.addEventListener('click', toggleChat);
$sendBtn.addEventListener('click', sendMessage);
$input.addEventListener('keydown', (e)=> {
if(e.key==='Enter'&&!e.shiftKey){
e.preventDefault();
sendMessage();
}});
$input.addEventListener('input', autoResize);
loadCategories();
if(isAdmin){
loadConversations();
}});
function toggleChat(){
state.open = !state.open;
$container.classList.toggle('ccb-closed', !state.open);
$trigger.classList.toggle('ccb-hidden', state.open);
if(state.open){
setTimeout(()=> $input.focus(), 300);
}}
async function loadCategories(){
try {
const resp=await fetch(claudeChatbot.restUrl.replace('/ask', '/categories'));
state.categories=await resp.json();
renderCategories();
renderWelcome();
} catch {
renderWelcome();
}}
function renderCategories(){
if(!state.categories||!$categoriesBar) return;
$categoriesBar.innerHTML='';
for (const [key, cat] of Object.entries(state.categories)){
const btn=document.createElement('button');
btn.className='ccb-category-btn' + (key===state.category ? ' ccb-active':'');
btn.dataset.category=key;
btn.innerHTML=(icons[cat.icon]||'') + '' + cat.label + '';
btn.addEventListener('click', ()=> switchCategory(key));
$categoriesBar.appendChild(btn);
}}
function switchCategory(key){
state.category=key;
state.history=[];
state.conversationId=null;
document.querySelectorAll('.ccb-category-btn').forEach((btn)=> {
btn.classList.toggle('ccb-active', btn.dataset.category===key);
});
$messages.innerHTML='';
renderWelcome();
}
function renderWelcome(){
const cat=state.categories?.[state.category];
const suggestions=cat?.suggestions||[
'Fais-moi un résumé de la semaine',
'Quels sont mes meilleurs produits ?',
'Analyse mes ventes récentes',
];
const userName=(typeof claudeChatbot!=='undefined'&&claudeChatbot.userName) ? claudeChatbot.userName:'';
const welcomeEl=document.createElement('div');
welcomeEl.className='ccb-welcome';
welcomeEl.innerHTML=`
${icons.spark}
Bonjour${userName ? ' ' + escapeHtml(userName):''} ! Comment puis-je vous aider ?
Posez-moi n'importe quelle question sur vos données.
${suggestions.map((s)=> ``).join('')}
`;
$messages.appendChild(welcomeEl);
welcomeEl.querySelectorAll('.ccb-suggestion').forEach((btn)=> {
btn.addEventListener('click', ()=> {
$input.value=btn.textContent;
sendMessage();
});
});
}
async function sendMessage(){
const text=$input.value.trim();
if(!text||state.loading) return;
const welcome=$messages.querySelector('.ccb-welcome');
if(welcome) welcome.remove();
appendMessage('user', text);
state.history.push({ role: 'user', content: text });
$input.value='';
$input.style.height='auto';
state.loading=true;
$sendBtn.disabled=true;
if(isAdmin){
if(!state.conversationId){
state.conversationId=await createConversation(state.category);
}
saveMessage(state.conversationId, 'user', text);
}
const typingEl=showTyping();
try {
const resp=await fetch(claudeChatbot.restUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-WP-Nonce': claudeChatbot.nonce,
},
body: JSON.stringify({
message: text,
category: state.category,
history: state.history.slice(-20),
}),
});
const data=await resp.json();
typingEl.remove();
if(data.error){
appendMessage('assistant', 'Désolé, une erreur est survenue:' + data.error);
}else{
const response=data.response;
appendMessage('assistant', response);
state.history.push({ role: 'assistant', content: response });
if(data.cached){
appendSystemNote('Réponse depuis le cache');
}
if(isAdmin&&state.conversationId){
saveMessage(state.conversationId, 'assistant', response);
refreshConversations();
}}
} catch (err){
typingEl.remove();
appendMessage('assistant', 'Erreur de connexion. Veuillez réessayer.');
}
state.loading=false;
$sendBtn.disabled=false;
$input.focus();
}
async function createConversation(category){
try {
const r=await fetch(claudeChatbot.restUrl.replace('/ask', '/conversations'), {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': claudeChatbot.nonce },
body: JSON.stringify({ category }),
});
const data=await r.json();
return data.id||null;
} catch { return null; }}
async function saveMessage(convId, role, content){
try {
await fetch(claudeChatbot.restUrl.replace('/ask', '/conversations/' + convId + '/messages'), {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': claudeChatbot.nonce },
body: JSON.stringify({ role, content }),
});
} catch {}}
async function loadConversations(){
const list=document.getElementById('cdf-conv-list');
if(!list) return;
try {
const r=await fetch(claudeChatbot.restUrl.replace('/ask', '/conversations'), {
headers: { 'X-WP-Nonce': claudeChatbot.nonce },
});
const convs=await r.json();
renderConversationList(list, convs);
} catch {}}
function refreshConversations(){
loadConversations();
}
function renderConversationList(el, convs){
if(!convs.length){
el.innerHTML='Aucune conversation
';
return;
}
el.innerHTML=convs.map(c=> `
${escapeHtml(c.title||'Sans titre')}
${c.message_count||0} msg
${formatDate(c.updated_at)}
`).join('');
el.querySelectorAll('.cdf-conv-item').forEach(item=> {
item.addEventListener('click', (e)=> {
if(e.target.classList.contains('cdf-conv-delete')) return;
loadConversation(parseInt(item.dataset.id));
});
});
el.querySelectorAll('.cdf-conv-delete').forEach(btn=> {
btn.addEventListener('click', async (e)=> {
e.stopPropagation();
const id=parseInt(btn.dataset.id);
await fetch(claudeChatbot.restUrl.replace('/ask', '/conversations/' + id), {
method: 'DELETE',
headers: { 'X-WP-Nonce': claudeChatbot.nonce },
});
if(state.conversationId===id) startNewConversation();
refreshConversations();
});
});
}
async function loadConversation(id){
try {
const r=await fetch(claudeChatbot.restUrl.replace('/ask', '/conversations/' + id), {
headers: { 'X-WP-Nonce': claudeChatbot.nonce },
});
const conv=await r.json();
if(!conv||conv.error) return;
state.conversationId=id;
state.category=conv.category||'dashboard';
state.history=[];
document.querySelectorAll('.ccb-category-btn').forEach(btn=> {
btn.classList.toggle('ccb-active', btn.dataset.category===state.category);
});
$messages.innerHTML='';
if(conv.messages&&conv.messages.length){
conv.messages.forEach(m=> {
appendMessage(m.role, m.content);
state.history.push({ role: m.role, content: m.content });
});
}else{
renderWelcome();
}
document.querySelectorAll('.cdf-conv-item').forEach(el=> {
el.classList.toggle('active', el.dataset.id==id);
});
} catch {}}
window.cdfNewConversation=function (){
startNewConversation();
};
function startNewConversation(){
state.conversationId=null;
state.history=[];
$messages.innerHTML='';
renderWelcome();
document.querySelectorAll('.cdf-conv-item').forEach(el=> el.classList.remove('active'));
}
function appendMessage(role, content){
const msgEl=document.createElement('div');
msgEl.className='ccb-message ccb-' + role;
const avatarIcon=role==='assistant' ? icons.bot:icons.user;
const bubbleContent=role==='assistant' ? renderMarkdown(content):escapeHtml(content);
msgEl.innerHTML=`
${avatarIcon}
${bubbleContent}
`;
$messages.appendChild(msgEl);
scrollToBottom();
}
function appendSystemNote(text){
const el=document.createElement('div');
el.style.cssText='text-align:center;font-size:10px;color:#94a3b8;padding:4px;';
el.textContent=text;
$messages.appendChild(el);
}
function showTyping(){
const el=document.createElement('div');
el.className='ccb-typing';
el.innerHTML=`
${icons.bot}
`;
$messages.appendChild(el);
scrollToBottom();
return el;
}
function renderMarkdown(text){
if(!text) return '';
const codeBlocks=[];
text=text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code)=> {
codeBlocks.push('' + escapeHtml(code.trim()) + '
');
return '\n%%CODE_BLOCK_' + (codeBlocks.length - 1) + '%%\n';
});
const lines=text.split('\n');
const blocks=[];
let i=0;
while (i < lines.length){
if(lines[i].trim().startsWith('|')&&lines[i].trim().endsWith('|')){
const tableLines=[];
while (i < lines.length&&lines[i].trim().startsWith('|')&&lines[i].trim().endsWith('|')){
tableLines.push(lines[i].trim());
i++;
}
blocks.push(renderTable(tableLines));
}else{
blocks.push(lines[i]);
i++;
}}
let html=blocks.join('\n');
html=html.replace(/`([^`]+)`/g, (_, code)=> '' + escapeHtml(code) + '');
html=html.replace(/\*\*\*(.+?)\*\*\*/g, '$1');
html=html.replace(/\*\*(.+?)\*\*/g, '$1');
html=html.replace(/\*(.+?)\*/g, '$1');
html=html.replace(/^#{3}\s+(.+)$/gm, '$1
');
html=html.replace(/^#{2}\s+(.+)$/gm, '$1
');
html=html.replace(/^#{1}\s+(.+)$/gm, '$1
');
html=html.replace(/^---+$/gm, '
');
html=html.replace(/^[\-\*]\s+(.+)$/gm, '%%LI%%$1%%/LI%%');
html=html.replace(/(%%LI%%[\s\S]*?%%\/LI%%\n?)+/g, (match)=> {
const items=match.replace(/%%LI%%/g, '').replace(/%%\/LI%%/g, '');
return '';
});
html=html.replace(/^\d+\.\s+(.+)$/gm, '%%OLI%%$1%%/OLI%%');
html=html.replace(/(%%OLI%%[\s\S]*?%%\/OLI%%\n?)+/g, (match)=> {
const items=match.replace(/%%OLI%%/g, '').replace(/%%\/OLI%%/g, '');
return '' + items.trim() + '
';
});
html=html.replace(/%%CODE_BLOCK_(\d+)%%/g, (_, idx)=> codeBlocks[parseInt(idx)]);
html=html.replace(/\n\n+/g, '');
html=html.replace(/\n/g, '
');
html='
' + html + '
';
const blockTags=['h1', 'h2', 'h3', 'ul', 'ol', 'table', 'pre', 'hr', 'div'];
blockTags.forEach(tag=> {
html=html.replace(new RegExp('\\s*(<' + tag + '[> ])', 'g'), '$1');
html=html.replace(new RegExp('()\\s*
', 'g'), '$1');
});
html=html.replace(/\s*<\/p>/g, '');
html=html.replace(/
\s*(<\/?(?:h[1-3]|ul|ol|li|table|thead|tbody|tr|pre|hr|div))/g, '$1');
return html;
}
function renderTable(tableLines){
if(tableLines.length < 2) return tableLines.join('
');
const parseRow=(line)=> {
return line.replace(/^\|/, '').replace(/\|$/, '').split('|').map(c=> c.trim());
};
const headerCells=parseRow(tableLines[0]);
const isSeparator=/^\|[\s\-:|]+\|$/.test(tableLines[1]);
const bodyStart=isSeparator ? 2:1;
let html='
';
html +='';
headerCells.forEach(c=> { html +='| ' + c + ' | '; });
html +='
';
if(bodyStart < tableLines.length){
html +='';
for (let r=bodyStart; r < tableLines.length; r++){
const cells=parseRow(tableLines[r]);
html +='';
cells.forEach(c=> { html +='| ' + c + ' | '; });
html +='
';
}
html +='';
}
html +='