https://yannick.services/apps/ragweb/Recent content in Chatbot IA pour site web | RagWeb on yannick.servicesHugo -- gohugo.iofrcontact@yannick.services (Yannick)contact@yannick.services (Yannick)https://yannick.services/apps/ragweb/app/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/ragweb/app/<script> document.addEventListener('alpine:init', () => { if (Alpine.store('auth')) return; const COGNITO_DOMAIN = 'https:\/\/auth.yannick.services'; const COGNITO_CLIENT_ID = '76sdci6g48222d6olhqrq88529'; const COGNITO_REDIRECT_URI = 'https:\/\/yannick.services\/compte\/callback\/'; const COGNITO_TOKEN_URL = `${COGNITO_DOMAIN}/oauth2/token`; Alpine.store('auth', { accessToken: null, idToken: null, refreshToken: null, init() { this.accessToken = localStorage.getItem('ys_access_token'); this.idToken = localStorage.getItem('ys_id_token'); this.refreshToken = localStorage.getItem('ys_refresh_token'); }, isAuthenticated() { if (!this.accessToken) return false; if (this.isTokenExpired(this.accessToken)) { if (this.refreshToken) return true; return false; } return true; }, isTokenExpired(token) { try { const payload = JSON.parse(atob(token.split('.')[1])); return payload.exp * 1000 < Date.now(); } catch (e) { return true; } }, async refreshIfNeeded() { if (!this.isTokenExpired(this.accessToken)) return true; if (!this.refreshToken) return false; try { const resp = await fetch(COGNITO_TOKEN_URL, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ grant_type: 'refresh_token', client_id: COGNITO_CLIENT_ID, refresh_token: this.refreshToken, }), }); if (!resp.ok) throw new Error('refresh_failed'); const data = await resp.json(); this.setTokens(data.access_token, data.id_token, this.refreshToken); return true; } catch (e) { this.logout(); return false; } }, setTokens(access, id, refresh) { this.accessToken = access; this.idToken = id; this.refreshToken = refresh; localStorage.setItem('ys_access_token', access); localStorage.setItem('ys_id_token', id); localStorage.setItem('ys_refresh_token', refresh); }, logout() { this.accessToken = null; this.idToken = null; this.refreshToken = null; localStorage.removeItem('ys_access_token'); localStorage.removeItem('ys_id_token'); localStorage.removeItem('ys_refresh_token'); var logoutUrl = COGNITO_DOMAIN + '/logout?client_id=' + COGNITO_CLIENT_ID + '&logout_uri=' + encodeURIComponent('https://yannick.services/'); window.location.href = logoutUrl; }, async apiFetch(url, options) { if (!options) options = {}; const ok = await this.refreshIfNeeded(); if (!ok) return null; const headers = options.headers || {}; headers['Authorization'] = 'Bearer ' + this.idToken; headers['Content-Type'] = 'application/json'; const method = options.method || 'GET'; const response = await fetch(url, { method, headers: headers, body: options.body || undefined, }); if (response && response.status >= 500 && typeof Sentry !== 'undefined') { let errorDetail = ''; try { const b = await response.clone().json(); errorDetail = b.error || JSON.stringify(b); } catch {} Sentry.captureMessage(`API ${response.status}: ${method} ${url} — ${errorDetail}`, { level: 'error', tags: { api_status: response.status, api_method: method }, extra: { url, method, status: response.status, errorDetail }, }); } return response; }, generateCodeVerifier() { const array = new Uint8Array(32); crypto.getRandomValues(array); return btoa(String.fromCharCode.apply(null, array)) .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''); }, async generateCodeChallenge(verifier) { const encoder = new TextEncoder(); const data = encoder.encode(verifier); const digest = await crypto.subtle.digest('SHA-256', data); return btoa(String.fromCharCode.apply(null, new Uint8Array(digest))) .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''); }, async redirectToLogin() { localStorage.setItem('ys_return_url', window.location.pathname + window.location.search); const verifier = this.generateCodeVerifier(); localStorage.setItem('ys_code_verifier', verifier); const challenge = await this.generateCodeChallenge(verifier); const params = new URLSearchParams({ response_type: 'code', client_id: COGNITO_CLIENT_ID, redirect_uri: COGNITO_REDIRECT_URI, scope: 'openid email', code_challenge: challenge, code_challenge_method: 'S256', lang: 'fr', }); window.location.href = COGNITO_DOMAIN + '/oauth2/authorize?' + params.toString(); }, }); }); </script> <style> :root { --rwtab-accent: #2563eb; --rwtab-accent-hover: #1d4ed8; --rwtab-accent-light: #eff6ff; --rwtab-accent-dark: #1e3a5f; --rwtab-accent-text-dark: #93c5fd; } .rwtab-container { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .rwtab-layout { display: flex; flex-direction: row; gap: 1.5rem; } .rwtab-sidebar { display: flex; flex-direction: column; gap: 0.25rem; width: 200px; flex-shrink: 0; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; } .dark .rwtab-sidebar { background: #1f2937; border-color: #374151; } .rwtab-content { flex: 1; min-width: 0; } .rwtab-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border: none; border-left: 3px solid transparent; border-radius: 0.5rem; background: transparent; color: #374151; font-size: 0.8125rem; font-weight: 500; cursor: pointer; text-align: left; width: 100%; min-height: 44px; transition: background 0.15s, border-color 0.15s, color 0.15s; } .rwtab-btn:hover { background: #f3f4f6; } .dark .rwtab-btn { color: #d1d5db; } .dark .rwtab-btn:hover { background: #374151; } .rwtab-btn-active { background: var(--rwtab-accent-light); color: var(--rwtab-accent); font-weight: 600; border-left-color: var(--rwtab-accent); } .rwtab-btn-active:hover { background: var(--rwtab-accent-light); } .dark .rwtab-btn-active { background: var(--rwtab-accent-dark); color: var(--rwtab-accent-text-dark); border-left-color: var(--rwtab-accent-text-dark); } .dark .rwtab-btn-active:hover { background: var(--rwtab-accent-dark); } .rwtab-btn-locked { opacity: 0.55; cursor: not-allowed; } .rwtab-btn-locked:hover { background: transparent; } .dark .rwtab-btn-locked:hover { background: transparent; } .rwtab-btn i { width: 1rem; text-align: center; font-size: 0.8125rem; } .rwtab-btn-lock { margin-left: auto; font-size: 0.625rem; color: #9ca3af; } .dark .rwtab-btn-lock { color: #6b7280; } .rwtab-mobile-bar { display: none; overflow-x: auto; gap: 0.25rem; padding: 0.375rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; -webkit-overflow-scrolling: touch; } .dark .rwtab-mobile-bar { background: #1f2937; border-color: #374151; } .rwtab-mobile-bar .rwtab-btn { white-space: nowrap; min-width: auto; width: auto; border-left: none; border-bottom: 3px solid transparent; } .rwtab-mobile-bar .rwtab-btn-active { border-left: none; border-bottom-color: var(--rwtab-accent); } .dark .rwtab-mobile-bar .rwtab-btn-active { border-left: none; border-bottom-color: var(--rwtab-accent-text-dark); } @media (max-width: 768px) { .rwtab-layout { flex-direction: column; gap: 0; } .rwtab-sidebar { display: none; } .rwtab-mobile-bar { display: flex; } } .rwtab-lock-msg { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem 1.5rem; text-align: center; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; } .dark .rwtab-lock-msg { background: #1f2937; border-color: #374151; } .rwtab-lock-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f3f4f6; color: #6b7280; font-size: 1.25rem; } .dark .rwtab-lock-icon { background: #374151; color: #9ca3af; } .rwtab-lock-text { font-size: 0.875rem; color: #6b7280; max-width: 320px; line-height: 1.5; } .dark .rwtab-lock-text { color: #9ca3af; } .rwtab-lock-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; border: none; background: var(--rwtab-accent); color: #fff; font-size: 0.875rem; font-weight: 500; cursor: pointer; min-height: 44px; transition: background 0.15s; } .rwtab-lock-cta:hover { background: var(--rwtab-accent-hover); } .rwtab-loading { display: flex; align-items: center; justify-content: center; padding: 3rem; } .rwtab-spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border: 2px solid rgba(37, 99, 235, 0.2); border-top-color: #2563eb; border-radius: 50%; animation: rwtab-spin 0.6s linear infinite; } @keyframes rwtab-spin { to { transform: rotate(360deg); } } .rwtab-auth-msg { text-align: center; padding: 3rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .rwtab-auth-msg p { font-size: 0.875rem; color: #6b7280; } .dark .rwtab-auth-msg p { color: #9ca3af; } [x-cloak] { display: none !important; } .rwd-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; text-decoration: none; transition: background 0.15s, opacity 0.15s; min-height: 44px; } .rwd-btn:disabled { opacity: 0.5; cursor: not-allowed; } .rwd-btn-primary { background: #2563eb; color: #fff; } .rwd-btn-primary:hover:not(:disabled) { background: #1d4ed8; } .rwd-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; } .dark .rwd-btn-secondary { background: #374151; color: #e5e7eb; border-color: #4b5563; } .rwd-btn-secondary:hover:not(:disabled) { background: #e5e7eb; } .dark .rwd-btn-secondary:hover:not(:disabled) { background: #4b5563; } .rwd-info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } @media (max-width: 600px) { .rwd-info-grid { grid-template-columns: 1fr; } } .rwd-info-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; } .dark .rwd-info-card { background: #1f2937; border-color: #374151; } .rwd-info-label { font-size: 0.6875rem; font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; } .dark .rwd-info-label { color: #9ca3af; } .rwd-info-value { font-size: 1.25rem; font-weight: 700; color: #111827; } .dark .rwd-info-value { color: #f9fafb; } .rwd-info-detail { font-size: 0.6875rem; color: #9ca3af; } .dark .rwd-info-detail { color: #6b7280; } .rwd-progress-bar { width: 100%; height: 0.5rem; background: #e5e7eb; border-radius: 9999px; overflow: hidden; } .dark .rwd-progress-bar { background: #374151; } .rwd-progress-fill { height: 100%; border-radius: 9999px; background: #2563eb; transition: width 0.3s; } .rwd-progress-fill-warn { background: #f59e0b; } .rwd-progress-fill-full { background: #dc2626; } .rwd-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; } .rwd-badge-success { background: #dcfce7; color: #166534; } .dark .rwd-badge-success { background: #064e3b; color: #6ee7b7; } .rwd-badge-warning { background: #fef3c7; color: #92400e; } .dark .rwd-badge-warning { background: #451a03; color: #fbbf24; } .rwd-badge-error { background: #fee2e2; color: #991b1b; } .dark .rwd-badge-error { background: #450a0a; color: #fca5a5; } .rwd-badge-neutral { background: #f3f4f6; color: #6b7280; } .dark .rwd-badge-neutral { background: #374151; color: #9ca3af; } .rwd-embed-section { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .rwd-embed-section:last-child { margin-bottom: 0; } .dark .rwd-embed-section { background: #1f2937; border-color: #374151; } .rwd-embed-title { font-size: 0.875rem; font-weight: 600; color: #111827; } .dark .rwd-embed-title { color: #f9fafb; } .rwd-embed-desc { font-size: 0.8125rem; color: #6b7280; } .dark .rwd-embed-desc { color: #9ca3af; } .rwd-embed-code { position: relative; padding: 0.75rem 1rem; background: #1f2937; border-radius: 0.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #e5e7eb; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } .rwd-embed-copy { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.5rem; background: #374151; border: none; border-radius: 0.25rem; color: #d1d5db; font-size: 0.6875rem; cursor: pointer; } .rwd-embed-copy:hover { background: #4b5563; } .rwd-verify-container { display: flex; flex-direction: column; gap: 2rem; padding: 2rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; } .dark .rwd-verify-container { background: #1f2937; border-color: #374151; } .rwd-verify-header { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; } .rwd-verify-icon-wrap { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eff6ff; color: #2563eb; font-size: 1.25rem; } .dark .rwd-verify-icon-wrap { background: #1e3a5f; color: #93c5fd; } .rwd-verify-input-row { display: flex; flex-direction: column; gap: 0.375rem; } .rwd-verify-input { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; background: #fff; color: #111827; width: 100%; } .dark .rwd-verify-input { background: #111827; border-color: #374151; color: #f3f4f6; } .rwd-verify-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); } .rwd-verify-methods { display: flex; gap: 0.75rem; flex-wrap: wrap; } .rwd-verify-method-btn { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; color: #374151; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .dark .rwd-verify-method-btn { background: #111827; border-color: #374151; color: #d1d5db; } .rwd-verify-method-btn:hover { border-color: #2563eb; } .rwd-verify-method-active { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; } .dark .rwd-verify-method-active { border-color: #3b82f6; background: #1e3a5f; color: #93c5fd; } .rwd-verify-spinner { display: inline-block; width: 0.875rem; height: 0.875rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: rwtab-spin 0.6s linear infinite; } .rwd-verify-instructions { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem; } .dark .rwd-verify-instructions { background: #111827; border-color: #374151; } .rwd-verify-address-box { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #fff; border: 1px solid #d1d5db; border-radius: 0.375rem; font-family: monospace; } .dark .rwd-verify-address-box { background: #1f2937; border-color: #374151; } .rwd-verify-copy-btn { padding: 0.25rem 0.5rem; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 0.25rem; color: #374151; font-size: 0.75rem; cursor: pointer; } .dark .rwd-verify-copy-btn { background: #374151; border-color: #4b5563; color: #d1d5db; } .rwd-verify-copy-btn:hover { background: #e5e7eb; } .dark .rwd-verify-copy-btn:hover { background: #4b5563; } .rwd-verify-dns-table { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem; background: #fff; border: 1px solid #d1d5db; border-radius: 0.375rem; } .dark .rwd-verify-dns-table { background: #1f2937; border-color: #374151; } .rwd-verify-dns-row { display: flex; align-items: center; gap: 0.75rem; } .rwd-verify-dns-label { font-size: 0.6875rem; font-weight: 600; color: #6b7280; min-width: 3.5rem; } .dark .rwd-verify-dns-label { color: #9ca3af; } .rwd-verify-dns-value { font-size: 0.75rem; font-family: monospace; color: #111827; word-break: break-all; } .dark .rwd-verify-dns-value { color: #f3f4f6; } .rwd-verify-polling { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 0.5rem; } .dark .rwd-verify-polling { background: #1e3a5f; border-color: #2563eb; } .rwd-verify-error { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #fef2f2; border: 1px solid #fca5a5; border-radius: 0.5rem; font-size: 0.8125rem; color: #991b1b; } .dark .rwd-verify-error { background: #450a0a; border-color: #dc2626; color: #fca5a5; } .rwd-verify-explain { padding: 0.625rem 0.75rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem; } .dark .rwd-verify-explain { background: #111827; border-color: #374151; } .rwd-verify-step { display: flex; align-items: flex-start; gap: 0.5rem; } .rwd-verify-step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex-shrink: 0; border-radius: 50%; background: #2563eb; color: #fff; font-size: 0.625rem; font-weight: 700; } .dark .rwd-verify-step-num { background: #3b82f6; } .rwcfg-container { display: flex; flex-direction: column; } .rwcfg-section { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; margin-bottom: 1.5rem; } .rwcfg-section:last-child { margin-bottom: 0; } .dark .rwcfg-section { background: #1f2937; border-color: #374151; } .rwcfg-section-header { display: flex; align-items: center; justify-content: space-between; } .rwcfg-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } .rwcfg-item-row { display: flex; align-items: center; gap: 0.5rem; } .rwcfg-input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.8125rem; background: #fff; color: #111827; } .dark .rwcfg-input { background: #111827; border-color: #374151; color: #f3f4f6; } .rwcfg-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); } .rwcfg-input-mono { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; } .rwcfg-btn-remove { padding: 0.375rem 0.5rem; border: 1px solid #fca5a5; border-radius: 0.375rem; background: transparent; color: #dc2626; cursor: pointer; font-size: 0.75rem; } .dark .rwcfg-btn-remove { border-color: #7f1d1d; color: #fca5a5; } .rwcfg-btn-remove:hover { background: #fef2f2; } .dark .rwcfg-btn-remove:hover { background: #450a0a; } .rwcfg-btn-add { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 1px dashed #d1d5db; border-radius: 0.5rem; background: transparent; color: #6b7280; cursor: pointer; font-size: 0.75rem; font-weight: 500; align-self: flex-start; } .dark .rwcfg-btn-add { border-color: #4b5563; color: #9ca3af; } .rwcfg-btn-add:hover { border-color: #2563eb; color: #2563eb; } .rwcfg-btn-add:disabled { opacity: 0.4; cursor: not-allowed; } .rwcfg-upgrade-link { color: #2563eb; text-decoration: underline; font-weight: 500; } .dark .rwcfg-upgrade-link { color: #93c5fd; } .rwcfg-locked-msg { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.75rem; color: #6b7280; } .dark .rwcfg-locked-msg { background: #111827; border-color: #374151; color: #9ca3af; } .rwcfg-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.5rem; } .rwcfg-info-item { display: flex; flex-direction: column; gap: 0.125rem; } .rwcfg-info-label { font-size: 0.6875rem; font-weight: 500; color: #6b7280; text-transform: uppercase; } .dark .rwcfg-info-label { color: #9ca3af; } .rwcfg-info-value { font-size: 0.875rem; font-weight: 600; color: #111827; } .dark .rwcfg-info-value { color: #f9fafb; } .rwcfg-actions { display: flex; align-items: center; gap: 0.75rem; } .rwcfg-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; } .rwcfg-toggle-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .rwcfg-checkbox { width: 1rem; height: 1rem; border-radius: 0.25rem; border: 1px solid #d1d5db; accent-color: #2563eb; cursor: pointer; } .rwcfg-checkbox:disabled { opacity: 0.5; cursor: not-allowed; } .dark .rwcfg-checkbox { border-color: #4b5563; } .rwcfg-auth-status { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .rwcfg-auth-badge-active { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px; background: #dcfce7; color: #166534; font-size: 0.75rem; font-weight: 500; } .dark .rwcfg-auth-badge-active { background: #064e3b; color: #6ee7b7; } .rwcfg-yt-input-row { display: flex; align-items: center; gap: 0.5rem; } .rwcfg-btn-yt-scan { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border: 1px solid #dc2626; border-radius: 0.5rem; background: #dc2626; color: #fff; cursor: pointer; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; min-height: 44px; } .rwcfg-btn-yt-scan:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; } .rwcfg-btn-yt-scan:disabled { opacity: 0.5; cursor: not-allowed; } .rwcfg-btn-yt-scan:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; } .dark .rwcfg-btn-yt-scan { background: #b91c1c; border-color: #b91c1c; } .dark .rwcfg-btn-yt-scan:hover:not(:disabled) { background: #991b1b; border-color: #991b1b; } @media (max-width: 480px) { .rwcfg-yt-input-row { flex-direction: column; align-items: stretch; } .rwcfg-btn-yt-scan { justify-content: center; } } .rwcfg-yt-results { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; } .rwcfg-yt-channel-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .rwcfg-btn-yt-refresh { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 500; cursor: pointer; border: 1px solid #d1d5db; background: #f9fafb; color: #4b5563; transition: background 0.15s, border-color 0.15s; margin-left: auto; min-height: 28px; } .rwcfg-btn-yt-refresh:hover:not(:disabled) { background: #f3f4f6; border-color: #9ca3af; } .rwcfg-btn-yt-refresh:disabled { opacity: 0.5; cursor: not-allowed; } .rwcfg-btn-yt-refresh:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .dark .rwcfg-btn-yt-refresh { background: #374151; border-color: #4b5563; color: #d1d5db; } .dark .rwcfg-btn-yt-refresh:hover:not(:disabled) { background: #4b5563; } .rwcfg-yt-quota-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; } .dark .rwcfg-yt-quota-badge { background: #451a03; color: #fbbf24; border-color: #78350f; } .rwcfg-yt-mode-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .rwcfg-yt-mode-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 500; cursor: pointer; border: 1px solid #d1d5db; background: #fff; color: #374151; transition: background 0.15s, border-color 0.15s; } .rwcfg-yt-mode-btn:hover { background: #f3f4f6; } .rwcfg-yt-mode-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .rwcfg-yt-mode-btn.active { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; } .dark .rwcfg-yt-mode-btn { background: #1f2937; border-color: #4b5563; color: #d1d5db; } .dark .rwcfg-yt-mode-btn:hover { background: #374151; } .dark .rwcfg-yt-mode-btn.active { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; } .rwcfg-yt-actions-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .rwcfg-yt-action-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.6875rem; cursor: pointer; border: 1px solid #e5e7eb; background: #f9fafb; color: #4b5563; } .rwcfg-yt-action-btn:hover { background: #f3f4f6; border-color: #d1d5db; } .rwcfg-yt-action-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .rwcfg-yt-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } .dark .rwcfg-yt-action-btn { background: #374151; border-color: #4b5563; color: #9ca3af; } .dark .rwcfg-yt-action-btn:hover { background: #4b5563; } .rwcfg-yt-video-list { max-height: 300px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fafafa; } .dark .rwcfg-yt-video-list { background: #111827; border-color: #374151; } .rwcfg-yt-video-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid #f3f4f6; } .rwcfg-yt-video-item:last-child { border-bottom: none; } .dark .rwcfg-yt-video-item { border-bottom-color: #1f2937; } .rwcfg-yt-video-item label { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; cursor: pointer; } .rwcfg-yt-video-title { flex: 1; min-width: 0; font-size: 0.8125rem; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dark .rwcfg-yt-video-title { color: #e5e7eb; } .rwcfg-yt-video-duration { flex-shrink: 0; font-size: 0.6875rem; font-weight: 500; font-variant-numeric: tabular-nums; padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: #f3f4f6; color: #6b7280; } .dark .rwcfg-yt-video-duration { background: #374151; color: #9ca3af; } .rwcfg-yt-selected-count { font-size: 0.75rem; color: #6b7280; } .dark .rwcfg-yt-selected-count { color: #9ca3af; } @media (max-width: 480px) { .rwcfg-yt-video-list { max-height: 240px; } .rwcfg-yt-mode-row { flex-direction: column; align-items: stretch; } .rwcfg-yt-mode-btn { justify-content: center; } } .rwcfg-yt-status-badge { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; white-space: nowrap; } .rwcfg-yt-status-indexed { background: #dcfce7; color: #166534; } .dark .rwcfg-yt-status-indexed { background: #064e3b; color: #6ee7b7; } .rwcfg-yt-status-pending { background: #dbeafe; color: #1e40af; } .dark .rwcfg-yt-status-pending { background: #1e3a5f; color: #93c5fd; } .rwcfg-yt-status-pending i { animation: rwtab-spin 0.8s linear infinite; } .rwcfg-yt-status-unavailable { background: #f3f4f6; color: #6b7280; } .dark .rwcfg-yt-status-unavailable { background: #374151; color: #9ca3af; } .rwcfg-yt-status-error { background: #fee2e2; color: #991b1b; } .dark .rwcfg-yt-status-error { background: #450a0a; color: #fca5a5; } .rwcfg-btn-yt-index { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: 0.5rem; background: #2563eb; color: #fff; border: none; font-size: 0.8125rem; font-weight: 500; cursor: pointer; min-height: 44px; transition: background 0.15s; } .rwcfg-btn-yt-index:hover:not(:disabled) { background: #1d4ed8; } .rwcfg-btn-yt-index:disabled { opacity: 0.5; cursor: not-allowed; } .rwcfg-btn-yt-index:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .rwcfg-btn-yt-disconnect { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border-radius: 0.5rem; background: transparent; color: #dc2626; border: 1px solid transparent; font-size: 0.8125rem; font-weight: 500; cursor: pointer; min-height: 44px; transition: background 0.15s, border-color 0.15s; } .rwcfg-btn-yt-disconnect:hover:not(:disabled) { background: #fef2f2; border-color: #fecaca; } .rwcfg-btn-yt-disconnect:disabled { opacity: 0.5; cursor: not-allowed; } .rwcfg-btn-yt-disconnect:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; } .dark .rwcfg-btn-yt-disconnect { color: #f87171; } .dark .rwcfg-btn-yt-disconnect:hover:not(:disabled) { background: #450a0a; border-color: #7f1d1d; } .rwcfg-yt-dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 9998; } .rwcfg-yt-dialog-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: #fff; border-radius: 0.75rem; padding: 1.5rem; width: 90%; max-width: 400px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); } .dark .rwcfg-yt-dialog-panel { background: #1f2937; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.4); } .rwcfg-yt-dialog-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; color: #111827; } .dark .rwcfg-yt-dialog-title { color: #f3f4f6; } .rwcfg-yt-dialog-text { font-size: 0.8125rem; color: #6b7280; margin: 0 0 1.25rem; line-height: 1.5; } .dark .rwcfg-yt-dialog-text { color: #9ca3af; } .rwcfg-yt-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; } .rwcfg-yt-dialog-btn-cancel { padding: 0.5rem 1rem; border-radius: 0.5rem; background: #f3f4f6; border: 1px solid #d1d5db; color: #374151; font-size: 0.8125rem; font-weight: 500; cursor: pointer; min-height: 36px; } .rwcfg-yt-dialog-btn-cancel:hover { background: #e5e7eb; } .rwcfg-yt-dialog-btn-cancel:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .dark .rwcfg-yt-dialog-btn-cancel { background: #374151; border-color: #4b5563; color: #d1d5db; } .dark .rwcfg-yt-dialog-btn-cancel:hover { background: #4b5563; } .rwcfg-yt-dialog-btn-confirm { padding: 0.5rem 1rem; border-radius: 0.5rem; background: #dc2626; border: none; color: #fff; font-size: 0.8125rem; font-weight: 500; cursor: pointer; min-height: 36px; } .rwcfg-yt-dialog-btn-confirm:hover { background: #b91c1c; } .rwcfg-yt-dialog-btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; } .rwcfg-yt-dialog-btn-confirm:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; } .dark .rwcfg-yt-dialog-btn-confirm { background: #b91c1c; } .dark .rwcfg-yt-dialog-btn-confirm:hover { background: #991b1b; } .rwcfg-yt-disconnect-separator { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #e5e7eb; } .dark .rwcfg-yt-disconnect-separator { border-top-color: #374151; } .rwd-usage-section { padding: 1.25rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; } .dark .rwd-usage-section { background: #1f2937; border-color: #374151; } .rwd-active-container { display: flex; flex-direction: column; gap: 2rem; } .rwd-state-centered { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 2.5rem 1.5rem; text-align: center; } .rwd-reindex-actions { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .rwd-shape-selector { display: flex; gap: 0.375rem; flex-wrap: wrap; } .rwd-shape-option { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.375rem 0.5rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; cursor: pointer; transition: border-color 0.15s, background 0.15s; min-width: 44px; } .dark .rwd-shape-option { background: #111827; border-color: #374151; } .rwd-shape-option:hover { border-color: #2563eb; } .rwd-shape-active { border-color: #2563eb; background: #eff6ff; } .dark .rwd-shape-active { border-color: #3b82f6; background: #1e3a5f; } .rwd-shape-preview { display: block; width: 22px; height: 22px; } .rwd-shape-label { font-size: 0.625rem; color: #6b7280; } .dark .rwd-shape-label { color: #9ca3af; } .rwd-shape-active .rwd-shape-label { color: #2563eb; font-weight: 500; } .dark .rwd-shape-active .rwd-shape-label { color: #93c5fd; } .rwd-icon-selector { display: flex; gap: 0.375rem; flex-wrap: wrap; } .rwd-icon-option { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.375rem 0.5rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; cursor: pointer; transition: border-color 0.15s, background 0.15s; min-width: 44px; color: #6b7280; } .dark .rwd-icon-option { background: #111827; border-color: #374151; color: #9ca3af; } .rwd-icon-option:hover { border-color: #2563eb; } .rwd-icon-active { border-color: #2563eb; background: #eff6ff; color: #2563eb; } .dark .rwd-icon-active { border-color: #3b82f6; background: #1e3a5f; color: #93c5fd; } .rwd-icon-option i { font-size: 1rem; } .rwd-icon-label { font-size: 0.625rem; } .rwd-icon-active .rwd-icon-label { font-weight: 500; } </style> <div x-data="ragwebDashboard()" x-init="init()" x-cloak class="rwtab-container" @ragweb-navigate.window="switchTab($event.detail)"> <template x-if="loading"> <div class="rwtab-loading"><span class="rwtab-spinner"></span></div> </template> <template x-if="!loading && !authenticated"> <div class="rwtab-auth-msg"> <i class="fa-sharp fa-solid fa-lock" style="font-size:2rem;color:#9ca3af;"></i> <p>Connectez-vous pour accéder à votre tableau de bord RagWeb.</p>https://yannick.services/apps/ragweb/test/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/ragweb/test/<style> .rwtest-container { max-width: 780px; margin: 0 auto; padding: 2rem 1rem; min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; } .rwtest-info { text-align: center; font-size: 0.8125rem; color: #6b7280; } .dark .rwtest-info { color: #9ca3af; } .rwtest-back { font-size: 0.8125rem; color: #2563eb; text-decoration: none; display: inline-flex; align-items: center; gap: 0.375rem; background: none; border: none; cursor: pointer; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.15s; } .rwtest-back:hover { background: #eff6ff; } .dark .rwtest-back { color: #60a5fa; } .dark .rwtest-back:hover { background: #1e3a5f; } </style> <div class="rwtest-container"> <p class="rwtest-info"> <i class="fa-sharp fa-solid fa-flask" aria-hidden="true"></i> Le widget de test s'affiche en bas de cette page avec votre configuration. </p>