@kroonen-ai/librebot-widget 1.6.2 → 1.6.3

package/dist/librebot.esm.js

@@ -422,6 +422,45 @@ const getStyles = (primaryColor = '#14b8a6') => `
     40% { transform: scale(1); opacity: 1; }
   }
 
+  /* Sources display */
+  .librebot-sources {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid var(--lb-border);
+  }
+
+  .librebot-sources-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--lb-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .librebot-source-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    font-size: 11px;
+    color: var(--lb-text-secondary);
+  }
+
+  .librebot-widget.light .librebot-source-tag {
+    background: rgba(0, 0, 0, 0.06);
+  }
+
+  .librebot-source-relevance {
+    color: var(--lb-primary);
+    font-weight: 500;
+  }
+
   .librebot-input-area {
     padding: 12px 16px;
     border-top: 1px solid var(--lb-border);
@@ -866,6 +905,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Sorry, I had trouble connecting. Please try again.',
         streamingNotSupported: 'Sorry, streaming is not supported.',
         poweredBy: 'Powered by',
+        sourcesLabel: 'Sources:',
         bookingTitle: 'Book an Appointment',
         selectDate: 'Select a date',
         selectTime: 'Select a time',
@@ -891,6 +931,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Désolé, j\'ai eu du mal à me connecter. Veuillez réessayer.',
         streamingNotSupported: 'Désolé, le streaming n\'est pas pris en charge.',
         poweredBy: 'Propulsé par',
+        sourcesLabel: 'Sources :',
         bookingTitle: 'Prendre rendez-vous',
         selectDate: 'Choisir une date',
         selectTime: 'Choisir une heure',
@@ -916,6 +957,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Entschuldigung, ich hatte Verbindungsprobleme. Bitte versuchen Sie es erneut.',
         streamingNotSupported: 'Entschuldigung, Streaming wird nicht unterstützt.',
         poweredBy: 'Betrieben von',
+        sourcesLabel: 'Quellen:',
         bookingTitle: 'Termin buchen',
         selectDate: 'Datum auswählen',
         selectTime: 'Uhrzeit auswählen',
@@ -941,6 +983,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Sorry, ik had moeite met verbinden. Probeer het opnieuw.',
         streamingNotSupported: 'Sorry, streaming wordt niet ondersteund.',
         poweredBy: 'Mogelijk gemaakt door',
+        sourcesLabel: 'Bronnen:',
         bookingTitle: 'Afspraak maken',
         selectDate: 'Selecteer een datum',
         selectTime: 'Selecteer een tijd',
@@ -966,6 +1009,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Lo siento, tuve problemas para conectarme. Por favor, inténtalo de nuevo.',
         streamingNotSupported: 'Lo siento, el streaming no está soportado.',
         poweredBy: 'Desarrollado por',
+        sourcesLabel: 'Fuentes:',
         bookingTitle: 'Reservar cita',
         selectDate: 'Seleccionar fecha',
         selectTime: 'Seleccionar hora',
@@ -991,6 +1035,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Desculpe, tive problemas para conectar. Por favor, tente novamente.',
         streamingNotSupported: 'Desculpe, streaming não é suportado.',
         poweredBy: 'Desenvolvido por',
+        sourcesLabel: 'Fontes:',
         bookingTitle: 'Agendar consulta',
         selectDate: 'Selecionar data',
         selectTime: 'Selecionar horário',
@@ -1016,6 +1061,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: '죄송합니다. 연결에 문제가 있습니다. 다시 시도해 주세요.',
         streamingNotSupported: '죄송합니다. 스트리밍이 지원되지 않습니다.',
         poweredBy: '제공:',
+        sourcesLabel: '출처:',
         bookingTitle: '예약하기',
         selectDate: '날짜 선택',
         selectTime: '시간 선택',
@@ -1041,6 +1087,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: '申し訳ありません。接続に問題がありました。もう一度お試しください。',
         streamingNotSupported: '申し訳ありません。ストリーミングはサポートされていません。',
         poweredBy: '提供：',
+        sourcesLabel: '出典：',
         bookingTitle: '予約する',
         selectDate: '日付を選択',
         selectTime: '時間を選択',
@@ -1066,6 +1113,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: '抱歉，连接出现问题。请重试。',
         streamingNotSupported: '抱歉，不支持流式传输。',
         poweredBy: '由以下提供支持：',
+        sourcesLabel: '来源：',
         bookingTitle: '预约',
         selectDate: '选择日期',
         selectTime: '选择时间',
@@ -1091,6 +1139,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'क्षमा करें, कनेक्ट करने में समस्या हुई। कृपया पुनः प्रयास करें।',
         streamingNotSupported: 'क्षमा करें, स्ट्रीमिंग समर्थित नहीं है।',
         poweredBy: 'द्वारा संचालित',
+        sourcesLabel: 'स्रोत:',
         bookingTitle: 'अपॉइंटमेंट बुक करें',
         selectDate: 'तिथि चुनें',
         selectTime: 'समय चुनें',
@@ -1116,6 +1165,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'عذراً، واجهت مشكلة في الاتصال. يرجى المحاولة مرة أخرى.',
         streamingNotSupported: 'عذراً، البث غير مدعوم.',
         poweredBy: 'مدعوم من',
+        sourcesLabel: 'المصادر:',
         bookingTitle: 'حجز موعد',
         selectDate: 'اختر التاريخ',
         selectTime: 'اختر الوقت',
@@ -1142,6 +1192,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'দুঃখিত, সংযোগে সমস্যা হয়েছে। অনুগ্রহ করে আবার চেষ্টা করুন।',
         streamingNotSupported: 'দুঃখিত, স্ট্রিমিং সমর্থিত নয়।',
         poweredBy: 'দ্বারা চালিত',
+        sourcesLabel: 'সূত্র:',
         bookingTitle: 'অ্যাপয়েন্টমেন্ট বুক করুন',
         selectDate: 'তারিখ নির্বাচন করুন',
         selectTime: 'সময় নির্বাচন করুন',
@@ -1168,6 +1219,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Извините, возникла проблема с подключением. Пожалуйста, попробуйте снова.',
         streamingNotSupported: 'Извините, потоковая передача не поддерживается.',
         poweredBy: 'Работает на',
+        sourcesLabel: 'Источники:',
         bookingTitle: 'Записаться на приём',
         selectDate: 'Выберите дату',
         selectTime: 'Выберите время',
@@ -1194,6 +1246,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Maaf, ada masalah koneksi. Silakan coba lagi.',
         streamingNotSupported: 'Maaf, streaming tidak didukung.',
         poweredBy: 'Didukung oleh',
+        sourcesLabel: 'Sumber:',
         bookingTitle: 'Buat Janji',
         selectDate: 'Pilih tanggal',
         selectTime: 'Pilih waktu',
@@ -1220,6 +1273,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Xin lỗi, có vấn đề kết nối. Vui lòng thử lại.',
         streamingNotSupported: 'Xin lỗi, không hỗ trợ phát trực tuyến.',
         poweredBy: 'Được cung cấp bởi',
+        sourcesLabel: 'Nguồn:',
         bookingTitle: 'Đặt lịch hẹn',
         selectDate: 'Chọn ngày',
         selectTime: 'Chọn giờ',
@@ -1246,6 +1300,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Üzgünüm, bağlantı sorunu yaşadım. Lütfen tekrar deneyin.',
         streamingNotSupported: 'Üzgünüm, akış desteklenmiyor.',
         poweredBy: 'Tarafından desteklenmektedir',
+        sourcesLabel: 'Kaynaklar:',
         bookingTitle: 'Randevu Al',
         selectDate: 'Tarih seçin',
         selectTime: 'Saat seçin',
@@ -1272,6 +1327,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Mi dispiace, ho avuto problemi di connessione. Per favore riprova.',
         streamingNotSupported: 'Mi dispiace, lo streaming non è supportato.',
         poweredBy: 'Offerto da',
+        sourcesLabel: 'Fonti:',
         bookingTitle: 'Prenota un Appuntamento',
         selectDate: 'Seleziona una data',
         selectTime: 'Seleziona un orario',
@@ -1298,6 +1354,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'ขออภัย มีปัญหาในการเชื่อมต่อ กรุณาลองอีกครั้ง',
         streamingNotSupported: 'ขออภัย ไม่รองรับการสตรีม',
         poweredBy: 'ขับเคลื่อนโดย',
+        sourcesLabel: 'แหล่งที่มา:',
         bookingTitle: 'จองนัดหมาย',
         selectDate: 'เลือกวันที่',
         selectTime: 'เลือกเวลา',
@@ -1324,6 +1381,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Przepraszam, miałem problem z połączeniem. Spróbuj ponownie.',
         streamingNotSupported: 'Przepraszam, streaming nie jest obsługiwany.',
         poweredBy: 'Obsługiwane przez',
+        sourcesLabel: 'Źródła:',
         bookingTitle: 'Umów wizytę',
         selectDate: 'Wybierz datę',
         selectTime: 'Wybierz godzinę',
@@ -1350,6 +1408,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Вибачте, виникла проблема з підключенням. Будь ласка, спробуйте ще раз.',
         streamingNotSupported: 'Вибачте, потокова передача не підтримується.',
         poweredBy: 'Працює на',
+        sourcesLabel: 'Джерела:',
         bookingTitle: 'Записатися на прийом',
         selectDate: 'Оберіть дату',
         selectTime: 'Оберіть час',
@@ -1376,6 +1435,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Maaf, ada masalah sambungan. Sila cuba lagi.',
         streamingNotSupported: 'Maaf, penstriman tidak disokong.',
         poweredBy: 'Dikuasakan oleh',
+        sourcesLabel: 'Sumber:',
         bookingTitle: 'Buat Temujanji',
         selectDate: 'Pilih tarikh',
         selectTime: 'Pilih masa',
@@ -1402,6 +1462,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Omlouvám se, měl jsem problém s připojením. Zkuste to prosím znovu.',
         streamingNotSupported: 'Omlouvám se, streamování není podporováno.',
         poweredBy: 'Využívá technologii',
+        sourcesLabel: 'Zdroje:',
         bookingTitle: 'Rezervovat schůzku',
         selectDate: 'Vyberte datum',
         selectTime: 'Vyberte čas',
@@ -1428,6 +1489,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Tyvärr hade jag problem med anslutningen. Försök igen.',
         streamingNotSupported: 'Tyvärr stöds inte streaming.',
         poweredBy: 'Drivs av',
+        sourcesLabel: 'Källor:',
         bookingTitle: 'Boka tid',
         selectDate: 'Välj datum',
         selectTime: 'Välj tid',
@@ -1454,6 +1516,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Beklager, jeg havde problemer med forbindelsen. Prøv venligst igen.',
         streamingNotSupported: 'Beklager, streaming understøttes ikke.',
         poweredBy: 'Drevet af',
+        sourcesLabel: 'Kilder:',
         bookingTitle: 'Book en tid',
         selectDate: 'Vælg dato',
         selectTime: 'Vælg tidspunkt',
@@ -1480,6 +1543,7 @@ const WIDGET_TRANSLATIONS = {
         connectionError: 'Því miður átti ég í vandræðum með tengingu. Vinsamlegast reyndu aftur.',
         streamingNotSupported: 'Því miður er streymi ekki stutt.',
         poweredBy: 'Knúið af',
+        sourcesLabel: 'Heimildir:',
         bookingTitle: 'Bóka tíma',
         selectDate: 'Veldu dagsetningu',
         selectTime: 'Veldu tíma',
@@ -1545,6 +1609,7 @@ class LibreBotWidget {
             welcomeMessage: '', // Will be set from translations
             streaming: true,
             whiteLabel: false,
+            showSources: false,
             autoLoadConfig: true,
             lang: 'en',
         };
@@ -1617,6 +1682,8 @@ class LibreBotWidget {
             provided.streaming = userConfig.streaming;
         if (userConfig.whiteLabel !== defaults.whiteLabel)
             provided.whiteLabel = userConfig.whiteLabel;
+        if (userConfig.showSources !== defaults.showSources)
+            provided.showSources = userConfig.showSources;
         return provided;
     }
     init() {
@@ -1757,12 +1824,13 @@ class LibreBotWidget {
         this.isOpen = false;
         this.modal?.classList.remove('open');
     }
-    addMessage(role, content) {
+    addMessage(role, content, sources) {
         const message = {
             id: `msg-${Date.now()}`,
             role,
             content,
             timestamp: new Date(),
+            sources,
         };
         this.messages.push(message);
         this.renderMessage(message);
@@ -1773,9 +1841,38 @@ class LibreBotWidget {
         const el = document.createElement('div');
         el.className = `librebot-message ${message.role}`;
         el.innerHTML = this.formatMessage(message.content);
+        // Add sources if showSources is enabled and message has sources
+        if (this.config.showSources && message.sources && message.sources.length > 0 && message.role === 'assistant') {
+            const sourcesEl = this.renderSources(message.sources);
+            el.appendChild(sourcesEl);
+        }
         this.messagesContainer.appendChild(el);
         this.scrollToBottom();
     }
+    renderSources(sources) {
+        const container = document.createElement('div');
+        container.className = 'librebot-sources';
+        const label = document.createElement('span');
+        label.className = 'librebot-sources-label';
+        label.textContent = this.translations.sourcesLabel || 'Sources:';
+        container.appendChild(label);
+        sources.forEach(source => {
+            const tag = document.createElement('span');
+            tag.className = 'librebot-source-tag';
+            const relevancePercent = Math.round(source.relevance * 100);
+            tag.innerHTML = `${this.escapeHtml(source.documentName)} <span class="librebot-source-relevance">(${relevancePercent}%)</span>`;
+            container.appendChild(tag);
+        });
+        return container;
+    }
+    escapeHtml(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+    }
     formatMessage(content) {
         // Escape HTML to prevent XSS
         const escapeHtml = (text) => {
@@ -1879,7 +1976,7 @@ class LibreBotWidget {
                     this.addMessage('assistant', `${this.translations.errorPrefix} ${response.error}`);
                 }
                 else {
-                    this.addMessage('assistant', response.response);
+                    this.addMessage('assistant', response.response, response.sources);
                     // Check for booking intent
                     this.handleBookingIntent(response);
                 }
@@ -1927,6 +2024,7 @@ class LibreBotWidget {
         const decoder = new TextDecoder();
         let fullContent = '';
         let bookingIntentData = null;
+        let receivedSources = [];
         try {
             while (true) {
                 const { done, value } = await reader.read();
@@ -1950,6 +2048,10 @@ class LibreBotWidget {
                             if (parsed.sessionId) {
                                 this.saveSession(parsed.sessionId);
                             }
+                            // Capture sources from metadata
+                            if (parsed.sources && Array.isArray(parsed.sources)) {
+                                receivedSources = parsed.sources;
+                            }
                             // Check for booking intent in metadata
                             if (parsed.booking_intent && parsed.booking_config) {
                                 bookingIntentData = parsed;
@@ -1965,12 +2067,18 @@ class LibreBotWidget {
         catch (error) {
             console.error('Stream reading error:', error);
         }
+        // Add sources to message element if showSources is enabled
+        if (this.config.showSources && receivedSources.length > 0) {
+            const sourcesEl = this.renderSources(receivedSources);
+            messageEl.appendChild(sourcesEl);
+        }
         // Add to messages array
         this.messages.push({
             id: `msg-${Date.now()}`,
             role: 'assistant',
             content: fullContent,
             timestamp: new Date(),
+            sources: receivedSources.length > 0 ? receivedSources : undefined,
         });
         // Handle booking intent if detected
         if (bookingIntentData) {