@kroonen-ai/librebot-widget 1.2.0 → 1.4.0

package/dist/librebot.esm.js

@@ -148,6 +148,13 @@ const getStyles = (primaryColor = '#14b8a6') => `
     background: var(--lb-bg-secondary);
   }
 
+  .librebot-chat-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
   .librebot-messages {
     flex: 1;
     overflow-y: auto;
@@ -157,6 +164,13 @@ const getStyles = (primaryColor = '#14b8a6') => `
     gap: 12px;
   }
 
+  .librebot-booking-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
   .librebot-message {
     max-width: 85%;
     padding: 10px 14px;
@@ -467,11 +481,616 @@ const getStyles = (primaryColor = '#14b8a6') => `
   .librebot-powered a:hover {
     text-decoration: underline;
   }
+
+  /* RTL Support */
+  .librebot-widget.rtl {
+    direction: rtl;
+    text-align: right;
+  }
+
+  .librebot-widget.rtl .librebot-message.user {
+    align-self: flex-start;
+    border-bottom-right-radius: 16px;
+    border-bottom-left-radius: 4px;
+  }
+
+  .librebot-widget.rtl .librebot-message.assistant {
+    align-self: flex-end;
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 4px;
+  }
+
+  .librebot-widget.rtl .librebot-typing {
+    align-self: flex-end;
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 4px;
+  }
+
+  .librebot-widget.rtl .librebot-header-content {
+    flex-direction: row-reverse;
+  }
+
+  .librebot-widget.rtl .librebot-input {
+    text-align: right;
+  }
+
+  .librebot-widget.rtl .librebot-input-area {
+    flex-direction: row-reverse;
+  }
+
+  .librebot-widget.rtl .librebot-ul,
+  .librebot-widget.rtl .librebot-ol {
+    padding-left: 0;
+    padding-right: 20px;
+  }
+
+  .librebot-widget.rtl .librebot-blockquote {
+    border-left: none;
+    border-right: 3px solid var(--lb-primary);
+    border-radius: 6px 0 0 6px;
+  }
+
+  /* Booking Mode Styles */
+  .librebot-booking {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .librebot-booking-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--lb-border);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .librebot-booking-back {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--lb-text-secondary);
+    transition: background 0.2s;
+  }
+
+  .librebot-booking-back:hover {
+    background: var(--lb-bg-secondary);
+  }
+
+  .librebot-booking-back svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .librebot-booking-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--lb-text);
+    margin: 0;
+  }
+
+  .librebot-booking-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+  }
+
+  .librebot-booking-section {
+    margin-bottom: 20px;
+  }
+
+  .librebot-booking-label {
+    display: block;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--lb-text);
+    margin-bottom: 8px;
+  }
+
+  .librebot-date-input {
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid var(--lb-border);
+    border-radius: 8px;
+    background: var(--lb-bg-secondary);
+    color: var(--lb-text);
+    font-size: 14px;
+    outline: none;
+    cursor: pointer;
+  }
+
+  .librebot-date-input:focus {
+    border-color: var(--lb-primary);
+  }
+
+  .librebot-slots {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+
+  .librebot-slot {
+    padding: 10px 8px;
+    border: 1px solid var(--lb-border);
+    border-radius: 8px;
+    background: var(--lb-bg-secondary);
+    color: var(--lb-text);
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: center;
+  }
+
+  .librebot-slot:hover {
+    border-color: var(--lb-primary);
+  }
+
+  .librebot-slot.selected {
+    background: var(--lb-primary);
+    border-color: var(--lb-primary);
+    color: white;
+  }
+
+  .librebot-slot:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .librebot-slots-loading,
+  .librebot-slots-empty {
+    text-align: center;
+    padding: 20px;
+    color: var(--lb-text-secondary);
+    font-size: 13px;
+  }
+
+  .librebot-form-field {
+    margin-bottom: 16px;
+  }
+
+  .librebot-form-label {
+    display: block;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--lb-text);
+    margin-bottom: 6px;
+  }
+
+  .librebot-form-label .required {
+    color: #ef4444;
+    margin-left: 2px;
+  }
+
+  .librebot-form-input,
+  .librebot-form-textarea,
+  .librebot-form-select {
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid var(--lb-border);
+    border-radius: 8px;
+    background: var(--lb-bg-secondary);
+    color: var(--lb-text);
+    font-size: 14px;
+    outline: none;
+    font-family: inherit;
+  }
+
+  .librebot-form-input:focus,
+  .librebot-form-textarea:focus,
+  .librebot-form-select:focus {
+    border-color: var(--lb-primary);
+  }
+
+  .librebot-form-textarea {
+    min-height: 80px;
+    resize: vertical;
+  }
+
+  .librebot-booking-submit {
+    width: 100%;
+    padding: 12px;
+    border: none;
+    border-radius: 8px;
+    background: var(--lb-primary);
+    color: white;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+    margin-top: 12px;
+  }
+
+  .librebot-booking-submit:hover {
+    background: var(--lb-primary-hover);
+  }
+
+  .librebot-booking-submit:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Booking Success */
+  .librebot-booking-success {
+    text-align: center;
+    padding: 24px 16px;
+  }
+
+  .librebot-booking-success-icon {
+    width: 60px;
+    height: 60px;
+    margin: 0 auto 16px;
+    background: var(--lb-primary);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .librebot-booking-success-icon svg {
+    width: 32px;
+    height: 32px;
+    fill: white;
+  }
+
+  .librebot-booking-success h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--lb-text);
+    margin: 0 0 16px;
+  }
+
+  .librebot-booking-details {
+    background: var(--lb-bg-secondary);
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 16px;
+    text-align: left;
+  }
+
+  .librebot-booking-detail {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--lb-border);
+    font-size: 13px;
+  }
+
+  .librebot-booking-detail:last-child {
+    border-bottom: none;
+  }
+
+  .librebot-booking-detail-label {
+    color: var(--lb-text-secondary);
+  }
+
+  .librebot-booking-detail-value {
+    color: var(--lb-text);
+    font-weight: 500;
+  }
+
+  .librebot-meeting-link {
+    display: inline-block;
+    padding: 12px 24px;
+    background: var(--lb-primary);
+    color: white;
+    text-decoration: none;
+    border-radius: 8px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    transition: background 0.2s;
+  }
+
+  .librebot-meeting-link:hover {
+    background: var(--lb-primary-hover);
+  }
+
+  /* RTL Booking Styles */
+  .librebot-widget.rtl .librebot-booking-header {
+    flex-direction: row-reverse;
+  }
+
+  .librebot-widget.rtl .librebot-form-label .required {
+    margin-left: 0;
+    margin-right: 2px;
+  }
+
+  .librebot-widget.rtl .librebot-form-input,
+  .librebot-widget.rtl .librebot-form-textarea {
+    text-align: right;
+  }
+
+  .librebot-widget.rtl .librebot-booking-detail {
+    flex-direction: row-reverse;
+  }
+
+  .librebot-widget.rtl .librebot-booking-details {
+    text-align: right;
+  }
 `;
 
 const chatIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`;
 const closeIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
 const sendIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>`;
+const backIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>`;
+const checkIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+
+const WIDGET_TRANSLATIONS = {
+    en: {
+        placeholder: 'Ask a question...',
+        welcomeMessage: 'Hi! I can help you find answers in the documentation. What would you like to know?',
+        errorPrefix: 'Sorry, I encountered an error:',
+        connectionError: 'Sorry, I had trouble connecting. Please try again.',
+        streamingNotSupported: 'Sorry, streaming is not supported.',
+        poweredBy: 'Powered by',
+        bookingTitle: 'Book an Appointment',
+        selectDate: 'Select a date',
+        selectTime: 'Select a time',
+        bookAppointment: 'Book Appointment',
+        noSlotsAvailable: 'No time slots available for this date',
+        loadingSlots: 'Loading available times...',
+        bookingSuccess: 'Your appointment has been confirmed!',
+        bookingError: 'Failed to book appointment. Please try again.',
+        backToChat: 'Back to chat',
+        yourDetails: 'Your Details',
+        confirmBooking: 'Confirm Booking',
+        meetingWith: 'Meeting',
+        duration: 'Duration',
+        minutes: 'minutes',
+        joinMeeting: 'Join Meeting',
+    },
+    fr: {
+        placeholder: 'Posez une question...',
+        welcomeMessage: 'Bonjour ! Je peux vous aider à trouver des réponses dans la documentation. Que souhaitez-vous savoir ?',
+        errorPrefix: 'Désolé, j\'ai rencontré une erreur :',
+        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',
+        bookingTitle: 'Prendre rendez-vous',
+        selectDate: 'Choisir une date',
+        selectTime: 'Choisir une heure',
+        bookAppointment: 'Prendre rendez-vous',
+        noSlotsAvailable: 'Aucun créneau disponible pour cette date',
+        loadingSlots: 'Chargement des horaires...',
+        bookingSuccess: 'Votre rendez-vous a été confirmé !',
+        bookingError: 'Échec de la réservation. Veuillez réessayer.',
+        backToChat: 'Retour au chat',
+        yourDetails: 'Vos informations',
+        confirmBooking: 'Confirmer la réservation',
+        meetingWith: 'Réunion',
+        duration: 'Durée',
+        minutes: 'minutes',
+        joinMeeting: 'Rejoindre la réunion',
+    },
+    de: {
+        placeholder: 'Stellen Sie eine Frage...',
+        welcomeMessage: 'Hallo! Ich kann Ihnen helfen, Antworten in der Dokumentation zu finden. Was möchten Sie wissen?',
+        errorPrefix: 'Entschuldigung, ein Fehler ist aufgetreten:',
+        connectionError: 'Entschuldigung, ich hatte Verbindungsprobleme. Bitte versuchen Sie es erneut.',
+        streamingNotSupported: 'Entschuldigung, Streaming wird nicht unterstützt.',
+        poweredBy: 'Betrieben von',
+        bookingTitle: 'Termin buchen',
+        selectDate: 'Datum auswählen',
+        selectTime: 'Uhrzeit auswählen',
+        bookAppointment: 'Termin buchen',
+        noSlotsAvailable: 'Keine Termine für dieses Datum verfügbar',
+        loadingSlots: 'Verfügbare Zeiten werden geladen...',
+        bookingSuccess: 'Ihr Termin wurde bestätigt!',
+        bookingError: 'Terminbuchung fehlgeschlagen. Bitte versuchen Sie es erneut.',
+        backToChat: 'Zurück zum Chat',
+        yourDetails: 'Ihre Angaben',
+        confirmBooking: 'Buchung bestätigen',
+        meetingWith: 'Meeting',
+        duration: 'Dauer',
+        minutes: 'Minuten',
+        joinMeeting: 'An Meeting teilnehmen',
+    },
+    nl: {
+        placeholder: 'Stel een vraag...',
+        welcomeMessage: 'Hallo! Ik kan je helpen antwoorden te vinden in de documentatie. Wat wil je weten?',
+        errorPrefix: 'Sorry, er is een fout opgetreden:',
+        connectionError: 'Sorry, ik had moeite met verbinden. Probeer het opnieuw.',
+        streamingNotSupported: 'Sorry, streaming wordt niet ondersteund.',
+        poweredBy: 'Mogelijk gemaakt door',
+        bookingTitle: 'Afspraak maken',
+        selectDate: 'Selecteer een datum',
+        selectTime: 'Selecteer een tijd',
+        bookAppointment: 'Afspraak maken',
+        noSlotsAvailable: 'Geen tijdsloten beschikbaar voor deze datum',
+        loadingSlots: 'Beschikbare tijden laden...',
+        bookingSuccess: 'Je afspraak is bevestigd!',
+        bookingError: 'Afspraak maken mislukt. Probeer het opnieuw.',
+        backToChat: 'Terug naar chat',
+        yourDetails: 'Je gegevens',
+        confirmBooking: 'Boeking bevestigen',
+        meetingWith: 'Vergadering',
+        duration: 'Duur',
+        minutes: 'minuten',
+        joinMeeting: 'Deelnemen aan vergadering',
+    },
+    es: {
+        placeholder: 'Haz una pregunta...',
+        welcomeMessage: '¡Hola! Puedo ayudarte a encontrar respuestas en la documentación. ¿Qué te gustaría saber?',
+        errorPrefix: 'Lo siento, encontré un error:',
+        connectionError: 'Lo siento, tuve problemas para conectarme. Por favor, inténtalo de nuevo.',
+        streamingNotSupported: 'Lo siento, el streaming no está soportado.',
+        poweredBy: 'Desarrollado por',
+        bookingTitle: 'Reservar cita',
+        selectDate: 'Seleccionar fecha',
+        selectTime: 'Seleccionar hora',
+        bookAppointment: 'Reservar cita',
+        noSlotsAvailable: 'No hay horarios disponibles para esta fecha',
+        loadingSlots: 'Cargando horarios disponibles...',
+        bookingSuccess: '¡Tu cita ha sido confirmada!',
+        bookingError: 'Error al reservar la cita. Por favor, inténtalo de nuevo.',
+        backToChat: 'Volver al chat',
+        yourDetails: 'Tus datos',
+        confirmBooking: 'Confirmar reserva',
+        meetingWith: 'Reunión',
+        duration: 'Duración',
+        minutes: 'minutos',
+        joinMeeting: 'Unirse a la reunión',
+    },
+    pt: {
+        placeholder: 'Faça uma pergunta...',
+        welcomeMessage: 'Olá! Posso ajudá-lo a encontrar respostas na documentação. O que você gostaria de saber?',
+        errorPrefix: 'Desculpe, encontrei um erro:',
+        connectionError: 'Desculpe, tive problemas para conectar. Por favor, tente novamente.',
+        streamingNotSupported: 'Desculpe, streaming não é suportado.',
+        poweredBy: 'Desenvolvido por',
+        bookingTitle: 'Agendar consulta',
+        selectDate: 'Selecionar data',
+        selectTime: 'Selecionar horário',
+        bookAppointment: 'Agendar consulta',
+        noSlotsAvailable: 'Nenhum horário disponível para esta data',
+        loadingSlots: 'Carregando horários disponíveis...',
+        bookingSuccess: 'Seu agendamento foi confirmado!',
+        bookingError: 'Falha ao agendar. Por favor, tente novamente.',
+        backToChat: 'Voltar ao chat',
+        yourDetails: 'Seus dados',
+        confirmBooking: 'Confirmar agendamento',
+        meetingWith: 'Reunião',
+        duration: 'Duração',
+        minutes: 'minutos',
+        joinMeeting: 'Entrar na reunião',
+    },
+    ko: {
+        placeholder: '질문하세요...',
+        welcomeMessage: '안녕하세요! 문서에서 답변을 찾는 데 도움을 드릴 수 있습니다. 무엇을 알고 싶으신가요?',
+        errorPrefix: '죄송합니다. 오류가 발생했습니다:',
+        connectionError: '죄송합니다. 연결에 문제가 있습니다. 다시 시도해 주세요.',
+        streamingNotSupported: '죄송합니다. 스트리밍이 지원되지 않습니다.',
+        poweredBy: '제공:',
+        bookingTitle: '예약하기',
+        selectDate: '날짜 선택',
+        selectTime: '시간 선택',
+        bookAppointment: '예약하기',
+        noSlotsAvailable: '선택한 날짜에 가능한 시간이 없습니다',
+        loadingSlots: '가능한 시간 로딩 중...',
+        bookingSuccess: '예약이 확정되었습니다!',
+        bookingError: '예약에 실패했습니다. 다시 시도해 주세요.',
+        backToChat: '채팅으로 돌아가기',
+        yourDetails: '정보 입력',
+        confirmBooking: '예약 확정',
+        meetingWith: '미팅',
+        duration: '소요 시간',
+        minutes: '분',
+        joinMeeting: '미팅 참가',
+    },
+    ja: {
+        placeholder: '質問してください...',
+        welcomeMessage: 'こんにちは！ドキュメントから回答を見つけるお手伝いができます。何をお知りになりたいですか？',
+        errorPrefix: '申し訳ありません。エラーが発生しました：',
+        connectionError: '申し訳ありません。接続に問題がありました。もう一度お試しください。',
+        streamingNotSupported: '申し訳ありません。ストリーミングはサポートされていません。',
+        poweredBy: '提供：',
+        bookingTitle: '予約する',
+        selectDate: '日付を選択',
+        selectTime: '時間を選択',
+        bookAppointment: '予約する',
+        noSlotsAvailable: 'この日は空き時間がありません',
+        loadingSlots: '空き時間を読み込み中...',
+        bookingSuccess: 'ご予約が確定しました！',
+        bookingError: '予約に失敗しました。もう一度お試しください。',
+        backToChat: 'チャットに戻る',
+        yourDetails: 'お客様情報',
+        confirmBooking: '予約を確定',
+        meetingWith: 'ミーティング',
+        duration: '所要時間',
+        minutes: '分',
+        joinMeeting: 'ミーティングに参加',
+    },
+    zh: {
+        placeholder: '请提问...',
+        welcomeMessage: '您好！我可以帮助您在文档中查找答案。您想了解什么？',
+        errorPrefix: '抱歉，遇到了错误：',
+        connectionError: '抱歉，连接出现问题。请重试。',
+        streamingNotSupported: '抱歉，不支持流式传输。',
+        poweredBy: '由以下提供支持：',
+        bookingTitle: '预约',
+        selectDate: '选择日期',
+        selectTime: '选择时间',
+        bookAppointment: '预约',
+        noSlotsAvailable: '该日期没有可用时间段',
+        loadingSlots: '加载可用时间...',
+        bookingSuccess: '您的预约已确认！',
+        bookingError: '预约失败。请重试。',
+        backToChat: '返回聊天',
+        yourDetails: '您的信息',
+        confirmBooking: '确认预约',
+        meetingWith: '会议',
+        duration: '时长',
+        minutes: '分钟',
+        joinMeeting: '加入会议',
+    },
+    hi: {
+        placeholder: 'कोई प्रश्न पूछें...',
+        welcomeMessage: 'नमस्ते! मैं आपको दस्तावेज़ों में उत्तर खोजने में मदद कर सकता हूं। आप क्या जानना चाहते हैं?',
+        errorPrefix: 'क्षमा करें, एक त्रुटि हुई:',
+        connectionError: 'क्षमा करें, कनेक्ट करने में समस्या हुई। कृपया पुनः प्रयास करें।',
+        streamingNotSupported: 'क्षमा करें, स्ट्रीमिंग समर्थित नहीं है।',
+        poweredBy: 'द्वारा संचालित',
+        bookingTitle: 'अपॉइंटमेंट बुक करें',
+        selectDate: 'तिथि चुनें',
+        selectTime: 'समय चुनें',
+        bookAppointment: 'अपॉइंटमेंट बुक करें',
+        noSlotsAvailable: 'इस तिथि के लिए कोई समय उपलब्ध नहीं है',
+        loadingSlots: 'उपलब्ध समय लोड हो रहा है...',
+        bookingSuccess: 'आपकी अपॉइंटमेंट की पुष्टि हो गई है!',
+        bookingError: 'बुकिंग विफल। कृपया पुनः प्रयास करें।',
+        backToChat: 'चैट पर वापस जाएं',
+        yourDetails: 'आपका विवरण',
+        confirmBooking: 'बुकिंग की पुष्टि करें',
+        meetingWith: 'मीटिंग',
+        duration: 'अवधि',
+        minutes: 'मिनट',
+        joinMeeting: 'मीटिंग में शामिल हों',
+    },
+    ar: {
+        placeholder: 'اطرح سؤالاً...',
+        welcomeMessage: 'مرحباً! يمكنني مساعدتك في العثور على إجابات في الوثائق. ماذا تريد أن تعرف؟',
+        errorPrefix: 'عذراً، حدث خطأ:',
+        connectionError: 'عذراً، واجهت مشكلة في الاتصال. يرجى المحاولة مرة أخرى.',
+        streamingNotSupported: 'عذراً، البث غير مدعوم.',
+        poweredBy: 'مدعوم من',
+        bookingTitle: 'حجز موعد',
+        selectDate: 'اختر التاريخ',
+        selectTime: 'اختر الوقت',
+        bookAppointment: 'حجز موعد',
+        noSlotsAvailable: 'لا توجد أوقات متاحة لهذا التاريخ',
+        loadingSlots: 'جاري تحميل الأوقات المتاحة...',
+        bookingSuccess: 'تم تأكيد موعدك!',
+        bookingError: 'فشل الحجز. يرجى المحاولة مرة أخرى.',
+        backToChat: 'العودة إلى المحادثة',
+        yourDetails: 'بياناتك',
+        confirmBooking: 'تأكيد الحجز',
+        meetingWith: 'اجتماع',
+        duration: 'المدة',
+        minutes: 'دقيقة',
+        joinMeeting: 'انضم إلى الاجتماع',
+    },
+};
+const RTL_LANGUAGES = ['ar'];
+function detectLanguage() {
+    // 1. Check document's lang attribute
+    const htmlLang = document.documentElement.lang?.toLowerCase().split('-')[0];
+    if (htmlLang && htmlLang in WIDGET_TRANSLATIONS) {
+        return htmlLang;
+    }
+    // 2. Check navigator.language
+    const navLang = navigator.language?.toLowerCase().split('-')[0];
+    if (navLang && navLang in WIDGET_TRANSLATIONS) {
+        return navLang;
+    }
+    // 3. Default to English
+    return 'en';
+}
 
 class LibreBotWidget {
     constructor(config) {
@@ -483,6 +1102,17 @@ class LibreBotWidget {
         this.messages = [];
         this.isLoading = false;
         this.sessionId = null;
+        this.translations = WIDGET_TRANSLATIONS.en;
+        this.isRtl = false;
+        // Booking mode state
+        this.mode = 'chat';
+        this.bookingConfig = null;
+        this.selectedDate = null;
+        this.selectedSlot = null;
+        this.availableSlots = [];
+        this.bookingContainer = null;
+        this.chatContainer = null;
+        this.inputArea = null;
         this.defaultConfig = {
             apiUrl: 'https://librebot.io/api',
             position: 'bottom-right',
@@ -490,17 +1120,29 @@ class LibreBotWidget {
             primaryColor: '#14b8a6',
             title: 'Libre Bot',
             subtitle: 'AI Documentation Assistant',
-            placeholder: 'Ask a question...',
-            welcomeMessage: 'Hi! I can help you find answers in the documentation. What would you like to know?',
+            placeholder: '', // Will be set from translations
+            welcomeMessage: '', // Will be set from translations
             streaming: true,
             whiteLabel: false,
             autoLoadConfig: true,
+            lang: 'en',
         };
         if (!config.apiKey) {
             console.error('LibreBot: API key is required');
             return;
         }
-        this.config = { ...this.defaultConfig, ...config };
+        // Detect language from config or host page
+        const detectedLang = config.lang || detectLanguage();
+        this.translations = WIDGET_TRANSLATIONS[detectedLang] || WIDGET_TRANSLATIONS.en;
+        this.isRtl = RTL_LANGUAGES.includes(detectedLang);
+        // Apply defaults with translations
+        const configWithTranslations = {
+            ...config,
+            lang: detectedLang,
+            placeholder: config.placeholder || this.translations.placeholder,
+            welcomeMessage: config.welcomeMessage || this.translations.welcomeMessage,
+        };
+        this.config = { ...this.defaultConfig, ...configWithTranslations };
         // Auto-load config from server if enabled and no custom settings provided
         if (this.config.autoLoadConfig) {
             this.loadRemoteConfig().then(() => this.init());
@@ -601,7 +1243,12 @@ class LibreBotWidget {
     createWidget() {
         // Create container
         this.container = document.createElement('div');
-        this.container.className = `librebot-widget ${this.config.theme === 'light' ? 'light' : ''}`;
+        let className = 'librebot-widget';
+        if (this.config.theme === 'light')
+            className += ' light';
+        if (this.isRtl)
+            className += ' rtl';
+        this.container.className = className;
         // Create FAB button
         const fab = document.createElement('button');
         fab.className = `librebot-fab ${this.config.position === 'bottom-left' ? 'left' : ''}`;
@@ -618,6 +1265,9 @@ class LibreBotWidget {
         // Get references
         this.messagesContainer = this.modal.querySelector('.librebot-messages');
         this.input = this.modal.querySelector('.librebot-input');
+        this.chatContainer = this.modal.querySelector('.librebot-chat-container');
+        this.bookingContainer = this.modal.querySelector('.librebot-booking-container');
+        this.inputArea = this.modal.querySelector('.librebot-input-area');
         // Add event listeners
         const closeBtn = this.modal.querySelector('.librebot-close');
         closeBtn?.addEventListener('click', () => this.close());
@@ -640,7 +1290,7 @@ class LibreBotWidget {
         const poweredByHtml = this.config.whiteLabel
             ? ''
             : `<div class="librebot-powered">
-        Powered by <a href="https://librebot.io" target="_blank">Libre Bot</a>
+        ${this.translations.poweredBy} <a href="https://librebot.io" target="_blank">Libre Bot</a>
       </div>`;
         return `
       <div class="librebot-header">
@@ -653,7 +1303,10 @@ class LibreBotWidget {
         </div>
         <button class="librebot-close">${closeIcon}</button>
       </div>
-      <div class="librebot-messages"></div>
+      <div class="librebot-chat-container">
+        <div class="librebot-messages"></div>
+      </div>
+      <div class="librebot-booking-container" style="display: none;"></div>
       <div class="librebot-input-area">
         <input type="text" class="librebot-input" placeholder="${this.config.placeholder}" />
         <button class="librebot-send">${sendIcon}</button>
@@ -800,16 +1453,18 @@ class LibreBotWidget {
                 const response = await this.callAPI(content);
                 typing.remove();
                 if (response.error) {
-                    this.addMessage('assistant', `Sorry, I encountered an error: ${response.error}`);
+                    this.addMessage('assistant', `${this.translations.errorPrefix} ${response.error}`);
                 }
                 else {
                     this.addMessage('assistant', response.response);
+                    // Check for booking intent
+                    this.handleBookingIntent(response);
                 }
             }
         }
         catch (error) {
             typing.remove();
-            this.addMessage('assistant', 'Sorry, I had trouble connecting. Please try again.');
+            this.addMessage('assistant', this.translations.connectionError);
             console.error('LibreBot error:', error);
         }
         finally {
@@ -833,7 +1488,7 @@ class LibreBotWidget {
         if (!response.ok) {
             typing.remove();
             const error = await response.json().catch(() => ({ error: 'Request failed' }));
-            this.addMessage('assistant', `Sorry, I encountered an error: ${error.error || 'Request failed'}`);
+            this.addMessage('assistant', `${this.translations.errorPrefix} ${error.error || 'Request failed'}`);
             return;
         }
         // Remove typing indicator and create streaming message element
@@ -843,11 +1498,12 @@ class LibreBotWidget {
         this.messagesContainer?.appendChild(messageEl);
         const reader = response.body?.getReader();
         if (!reader) {
-            this.addMessage('assistant', 'Sorry, streaming is not supported.');
+            this.addMessage('assistant', this.translations.streamingNotSupported);
             return;
         }
         const decoder = new TextDecoder();
         let fullContent = '';
+        let bookingIntentData = null;
         try {
             while (true) {
                 const { done, value } = await reader.read();
@@ -871,6 +1527,10 @@ class LibreBotWidget {
                             if (parsed.sessionId) {
                                 this.saveSession(parsed.sessionId);
                             }
+                            // Check for booking intent in metadata
+                            if (parsed.booking_intent && parsed.booking_config) {
+                                bookingIntentData = parsed;
+                            }
                         }
                         catch {
                             // Skip malformed JSON
@@ -889,6 +1549,10 @@ class LibreBotWidget {
             content: fullContent,
             timestamp: new Date(),
         });
+        // Handle booking intent if detected
+        if (bookingIntentData) {
+            this.handleBookingIntent(bookingIntentData);
+        }
     }
     async callAPI(message) {
         const response = await fetch(`${this.config.apiUrl}/chat`, {
@@ -942,7 +1606,318 @@ class LibreBotWidget {
             // localStorage may not be available
         }
     }
+    // Booking Mode Methods
+    switchToBookingMode(config) {
+        this.bookingConfig = config;
+        this.mode = 'booking';
+        this.selectedDate = null;
+        this.selectedSlot = null;
+        this.availableSlots = [];
+        // Hide chat, show booking
+        if (this.chatContainer)
+            this.chatContainer.style.display = 'none';
+        if (this.inputArea)
+            this.inputArea.style.display = 'none';
+        if (this.bookingContainer) {
+            this.bookingContainer.style.display = 'flex';
+            this.renderBookingUI();
+        }
+    }
+    switchToChatMode() {
+        this.mode = 'chat';
+        this.bookingConfig = null;
+        this.selectedDate = null;
+        this.selectedSlot = null;
+        this.availableSlots = [];
+        // Show chat, hide booking
+        if (this.chatContainer)
+            this.chatContainer.style.display = 'flex';
+        if (this.inputArea)
+            this.inputArea.style.display = 'flex';
+        if (this.bookingContainer) {
+            this.bookingContainer.style.display = 'none';
+            this.bookingContainer.innerHTML = '';
+        }
+    }
+    renderBookingUI() {
+        if (!this.bookingContainer || !this.bookingConfig)
+            return;
+        const minDate = new Date();
+        minDate.setDate(minDate.getDate() + 1);
+        const maxDate = new Date();
+        maxDate.setDate(maxDate.getDate() + (this.bookingConfig.advance_booking_days || 30));
+        const formFieldsHtml = this.bookingConfig.form_fields.map(field => {
+            const requiredMark = field.required ? '<span class="required">*</span>' : '';
+            const requiredAttr = field.required ? 'required' : '';
+            if (field.type === 'textarea') {
+                return `
+          <div class="librebot-form-field">
+            <label class="librebot-form-label">${field.label}${requiredMark}</label>
+            <textarea
+              class="librebot-form-textarea"
+              name="${field.name}"
+              placeholder="${field.placeholder || ''}"
+              ${requiredAttr}
+            ></textarea>
+          </div>
+        `;
+            }
+            if (field.type === 'select' && field.options) {
+                const optionsHtml = field.options.map(opt => `<option value="${opt}">${opt}</option>`).join('');
+                return `
+          <div class="librebot-form-field">
+            <label class="librebot-form-label">${field.label}${requiredMark}</label>
+            <select
+              class="librebot-form-select"
+              name="${field.name}"
+              ${requiredAttr}
+            >
+              <option value="">${field.placeholder || 'Select...'}</option>
+              ${optionsHtml}
+            </select>
+          </div>
+        `;
+            }
+            return `
+        <div class="librebot-form-field">
+          <label class="librebot-form-label">${field.label}${requiredMark}</label>
+          <input
+            type="${field.type}"
+            class="librebot-form-input"
+            name="${field.name}"
+            placeholder="${field.placeholder || ''}"
+            ${requiredAttr}
+          />
+        </div>
+      `;
+        }).join('');
+        this.bookingContainer.innerHTML = `
+      <div class="librebot-booking">
+        <div class="librebot-booking-header">
+          <button class="librebot-booking-back">${backIcon}</button>
+          <h3 class="librebot-booking-title">${this.translations.bookingTitle}</h3>
+        </div>
+        <div class="librebot-booking-content">
+          <div class="librebot-booking-section">
+            <label class="librebot-booking-label">${this.translations.selectDate}</label>
+            <input
+              type="date"
+              class="librebot-date-input"
+              min="${minDate.toISOString().split('T')[0]}"
+              max="${maxDate.toISOString().split('T')[0]}"
+            />
+          </div>
+          <div class="librebot-booking-section">
+            <label class="librebot-booking-label">${this.translations.selectTime}</label>
+            <div class="librebot-slots-container">
+              <div class="librebot-slots-empty">${this.translations.selectDate}</div>
+            </div>
+          </div>
+          <div class="librebot-booking-section librebot-form-section" style="display: none;">
+            <label class="librebot-booking-label">${this.translations.yourDetails}</label>
+            <form class="librebot-booking-form">
+              ${formFieldsHtml}
+              <button type="submit" class="librebot-booking-submit" disabled>
+                ${this.translations.confirmBooking}
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    `;
+        // Add event listeners
+        const backBtn = this.bookingContainer.querySelector('.librebot-booking-back');
+        backBtn?.addEventListener('click', () => this.switchToChatMode());
+        const dateInput = this.bookingContainer.querySelector('.librebot-date-input');
+        dateInput?.addEventListener('change', (e) => {
+            const target = e.target;
+            this.selectedDate = target.value;
+            this.selectedSlot = null;
+            this.loadAvailableSlots(target.value);
+        });
+        const form = this.bookingContainer.querySelector('.librebot-booking-form');
+        form?.addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.submitBooking(form);
+        });
+    }
+    async loadAvailableSlots(date) {
+        const slotsContainer = this.bookingContainer?.querySelector('.librebot-slots-container');
+        if (!slotsContainer)
+            return;
+        slotsContainer.innerHTML = `<div class="librebot-slots-loading">${this.translations.loadingSlots}</div>`;
+        try {
+            const response = await fetch(`${this.config.apiUrl}/bookings/slots?date=${date}&timezone=${Intl.DateTimeFormat().resolvedOptions().timeZone}`, {
+                headers: {
+                    Authorization: `Bearer ${this.config.apiKey}`,
+                },
+            });
+            if (!response.ok) {
+                throw new Error('Failed to load slots');
+            }
+            const data = await response.json();
+            this.availableSlots = data.slots || [];
+            if (this.availableSlots.length === 0) {
+                slotsContainer.innerHTML = `<div class="librebot-slots-empty">${this.translations.noSlotsAvailable}</div>`;
+                return;
+            }
+            const slotsHtml = this.availableSlots.map(slot => {
+                const disabled = !slot.available ? 'disabled' : '';
+                return `
+          <button
+            type="button"
+            class="librebot-slot"
+            data-start="${slot.start}"
+            data-end="${slot.end}"
+            ${disabled}
+          >${slot.start}</button>
+        `;
+            }).join('');
+            slotsContainer.innerHTML = `<div class="librebot-slots">${slotsHtml}</div>`;
+            // Add click handlers to slot buttons
+            const slotButtons = slotsContainer.querySelectorAll('.librebot-slot');
+            slotButtons.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const start = btn.getAttribute('data-start') || '';
+                    const end = btn.getAttribute('data-end') || '';
+                    this.selectSlot({ start, end, available: true }, btn);
+                });
+            });
+        }
+        catch (err) {
+            console.error('Failed to load slots:', err);
+            slotsContainer.innerHTML = `<div class="librebot-slots-empty">${this.translations.bookingError}</div>`;
+        }
+    }
+    selectSlot(slot, buttonEl) {
+        this.selectedSlot = slot;
+        // Update button styles
+        const allSlots = this.bookingContainer?.querySelectorAll('.librebot-slot');
+        allSlots?.forEach(el => el.classList.remove('selected'));
+        buttonEl.classList.add('selected');
+        // Show form section
+        const formSection = this.bookingContainer?.querySelector('.librebot-form-section');
+        if (formSection) {
+            formSection.style.display = 'block';
+        }
+        // Enable submit button
+        const submitBtn = this.bookingContainer?.querySelector('.librebot-booking-submit');
+        if (submitBtn) {
+            submitBtn.disabled = false;
+        }
+        // Scroll to form
+        formSection?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+    async submitBooking(form) {
+        if (!this.selectedDate || !this.selectedSlot || !this.bookingConfig)
+            return;
+        const submitBtn = form.querySelector('.librebot-booking-submit');
+        if (submitBtn) {
+            submitBtn.disabled = true;
+            submitBtn.textContent = '...';
+        }
+        // Collect form data
+        const formData = new FormData(form);
+        const formDataObj = {};
+        formData.forEach((value, key) => {
+            formDataObj[key] = value.toString();
+        });
+        try {
+            const response = await fetch(`${this.config.apiUrl}/bookings/submit`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${this.config.apiKey}`,
+                },
+                body: JSON.stringify({
+                    date: this.selectedDate,
+                    slot_start: this.selectedSlot.start,
+                    slot_end: this.selectedSlot.end,
+                    form_data: formDataObj,
+                    session_id: this.sessionId,
+                    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+                }),
+            });
+            const result = await response.json();
+            if (result.success && result.booking) {
+                this.renderBookingSuccess(result.booking);
+            }
+            else {
+                throw new Error(result.error || 'Booking failed');
+            }
+        }
+        catch (err) {
+            console.error('Booking submission failed:', err);
+            if (submitBtn) {
+                submitBtn.disabled = false;
+                submitBtn.textContent = this.translations.confirmBooking;
+            }
+            alert(this.translations.bookingError);
+        }
+    }
+    renderBookingSuccess(booking) {
+        if (!this.bookingContainer)
+            return;
+        // Format the date and time
+        const startDate = new Date(booking.scheduled_start);
+        const formattedDate = startDate.toLocaleDateString(undefined, {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        });
+        const formattedTime = startDate.toLocaleTimeString(undefined, {
+            hour: 'numeric',
+            minute: '2-digit',
+        });
+        const meetingLinkHtml = booking.meeting_link
+            ? `<a href="${booking.meeting_link}" target="_blank" class="librebot-meeting-link">${this.translations.joinMeeting}</a>`
+            : '';
+        this.bookingContainer.innerHTML = `
+      <div class="librebot-booking">
+        <div class="librebot-booking-header">
+          <button class="librebot-booking-back">${backIcon}</button>
+          <h3 class="librebot-booking-title">${this.translations.bookingTitle}</h3>
+        </div>
+        <div class="librebot-booking-content">
+          <div class="librebot-booking-success">
+            <div class="librebot-booking-success-icon">${checkIcon}</div>
+            <h3>${this.translations.bookingSuccess}</h3>
+            <div class="librebot-booking-details">
+              <div class="librebot-booking-detail">
+                <span class="librebot-booking-detail-label">${this.translations.selectDate}</span>
+                <span class="librebot-booking-detail-value">${formattedDate}</span>
+              </div>
+              <div class="librebot-booking-detail">
+                <span class="librebot-booking-detail-label">${this.translations.selectTime}</span>
+                <span class="librebot-booking-detail-value">${formattedTime}</span>
+              </div>
+              <div class="librebot-booking-detail">
+                <span class="librebot-booking-detail-label">${this.translations.duration}</span>
+                <span class="librebot-booking-detail-value">${booking.duration_minutes} ${this.translations.minutes}</span>
+              </div>
+            </div>
+            ${meetingLinkHtml}
+            <button class="librebot-booking-submit" type="button">${this.translations.backToChat}</button>
+          </div>
+        </div>
+      </div>
+    `;
+        // Add event listeners
+        const backBtn = this.bookingContainer.querySelector('.librebot-booking-back');
+        backBtn?.addEventListener('click', () => this.switchToChatMode());
+        const chatBtn = this.bookingContainer.querySelector('.librebot-booking-submit');
+        chatBtn?.addEventListener('click', () => this.switchToChatMode());
+    }
+    handleBookingIntent(data) {
+        if (data.booking_intent && data.booking_config) {
+            // Add a brief delay so user can see the AI response before switching
+            setTimeout(() => {
+                this.switchToBookingMode(data.booking_config);
+            }, 1500);
+        }
+    }
 }
 
-export { LibreBotWidget };
+export { LibreBotWidget, RTL_LANGUAGES, WIDGET_TRANSLATIONS, detectLanguage };
 //# sourceMappingURL=librebot.esm.js.map