besper-frontend-site-dev-main
Version:
Professional B-esper Frontend Site - Site-wide integration toolkit for full website bot deployment
186 lines (166 loc) • 6.13 kB
JavaScript
/**
* Chat Header Component
* Handles the header section of the chat widget including title and action buttons
*/
import { getLocalizedCategory } from '../../utils/i18n.js';
export class ChatHeader {
constructor(widget, state, options = {}) {
this.widget = widget;
this.state = state;
this.options = options;
}
/**
* Generate the HTML for the chat header
* @returns {string} Header HTML string
*/
getHTML() {
const config = this.state.botConfig || {};
const tooltips = getLocalizedCategory('tooltips', this.state.userLanguage);
return `
<div class="besper-chat-header">
<div class="besper-chat-header-left">
<div class="besper-chat-title-group">
<div class="besper-chat-title">${config.botTitle || 'Chat Assistant'}</div>
</div>
</div>
<div class="besper-chat-header-right">
<div class="besper-chat-actions">
${this.getDataPolicyButton(config, tooltips)}
${this.getExpandButton(tooltips)}
${this.getDownloadButton(tooltips)}
${this.getRestartButton(tooltips)}
${this.getDeleteButton(tooltips)}
${this.getMinimizeButton(tooltips)}
</div>
</div>
</div>
`;
}
/**
* Get data policy button HTML
*/
getDataPolicyButton(config, tooltips) {
if (!config || !config.dataPolicyUrl) return '';
return `
<button type="button" class="besper-action-btn" id="besper-data-policy-btn" title="${tooltips.dataPolicy}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</button>
`;
}
/**
* Get expand button HTML
*/
getExpandButton(tooltips) {
return `
<button type="button" class="besper-action-btn" id="besper-expand-btn" title="${tooltips.expandView}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
</svg>
</button>
`;
}
/**
* Get download button HTML
*/
getDownloadButton(tooltips) {
return `
<button type="button" class="besper-action-btn" id="besper-download-btn" title="${tooltips.downloadConversation}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7,10 12,15 17,10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
</button>
`;
}
/**
* Get restart button HTML
*/
getRestartButton(tooltips) {
return `
<button type="button" class="besper-action-btn" id="besper-restart-btn" title="${tooltips.restartConversation}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M1 4v6h6"/>
<path d="M23 20v-6h-6"/>
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10"/>
<path d="M3.51 15a9 9 0 0 0 14.85 3.36L23 14"/>
</svg>
</button>
`;
}
/**
* Get delete button HTML
*/
getDeleteButton(tooltips) {
return `
<button type="button" class="besper-action-btn" id="besper-delete-btn" title="${tooltips.deleteConversation}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="3,6 5,6 21,6"/>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
<line x1="10" y1="11" x2="10" y2="17"/>
<line x1="14" y1="11" x2="14" y2="17"/>
</svg>
</button>
`;
}
/**
* Get minimize button HTML
*/
getMinimizeButton(tooltips) {
return `
<button type="button" class="besper-action-btn" id="besper-minimize-btn" title="${tooltips.minimizeChat}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
`;
}
/**
* Setup event listeners for header buttons
*/
setupEventListeners(callbacks) {
const dataPolicyBtn = this.widget.querySelector('#besper-data-policy-btn');
const expandBtn = this.widget.querySelector('#besper-expand-btn');
const downloadBtn = this.widget.querySelector('#besper-download-btn');
const restartBtn = this.widget.querySelector('#besper-restart-btn');
const deleteBtn = this.widget.querySelector('#besper-delete-btn');
const minimizeBtn = this.widget.querySelector('#besper-minimize-btn');
if (dataPolicyBtn && callbacks.onDataPolicy) {
dataPolicyBtn.addEventListener('click', callbacks.onDataPolicy);
}
if (expandBtn && callbacks.onExpand) {
expandBtn.addEventListener('click', callbacks.onExpand);
}
if (downloadBtn && callbacks.onDownload) {
downloadBtn.addEventListener('click', callbacks.onDownload);
}
if (restartBtn && callbacks.onRestart) {
restartBtn.addEventListener('click', callbacks.onRestart);
}
if (deleteBtn && callbacks.onDelete) {
deleteBtn.addEventListener('click', callbacks.onDelete);
}
if (minimizeBtn && callbacks.onMinimize) {
minimizeBtn.addEventListener('click', callbacks.onMinimize);
}
}
/**
* Update expand button appearance based on current state
*/
updateExpandButton() {
const expandBtn = this.widget.querySelector('#besper-expand-btn');
if (!expandBtn) return;
const svg = expandBtn.querySelector('svg');
if (this.state.viewState === 'normal') {
expandBtn.title = 'Optimize view for better readability';
svg.innerHTML = '<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>';
} else {
expandBtn.title = 'Return to normal view';
svg.innerHTML =
'<path d="M8 3v3a2 2 0 0 1-2 2H3M16 3v3a2 2 0 0 0 2 2h3M8 21v-3a2 2 0 0 1 2-2h3M16 21v-3a2 2 0 0 0-2-2h-3"/>';
}
}
}