big update
This commit is contained in:
gpatruno
+342
-197
@@ -15,6 +15,26 @@
|
||||
<a class="navbar-brand" href="#">
|
||||
<i class="fas fa-robot me-2"></i>TwitchBot Controller
|
||||
</a>
|
||||
<div class="navbar-nav me-auto ms-3 d-none d-lg-flex">
|
||||
<a class="nav-link navbar-sitemap-link" data-main-tab="flux-tab" href="#" onclick="activateMainTab('flux-tab'); return false;">
|
||||
<i class="fas fa-tachometer-alt me-1"></i>Dashboard
|
||||
</a>
|
||||
<a class="nav-link navbar-sitemap-link" data-main-tab="users-tab" href="#" onclick="activateMainTab('users-tab'); return false;">
|
||||
<i class="fas fa-users me-1"></i>Utilisateurs
|
||||
</a>
|
||||
<a class="nav-link navbar-sitemap-link" data-main-tab="prompts-tab" href="#" onclick="activateMainTab('prompts-tab'); return false;">
|
||||
<i class="fas fa-cogs me-1"></i>Prompts IA
|
||||
</a>
|
||||
<a class="nav-link navbar-sitemap-link" data-main-tab="subtitles-tab" href="#" onclick="activateMainTab('subtitles-tab'); return false;">
|
||||
<i class="fas fa-closed-captioning me-1"></i>Sous-titres
|
||||
</a>
|
||||
<a class="nav-link navbar-sitemap-link" data-main-tab="interaction-tab" href="#" onclick="activateMainTab('interaction-tab'); return false;">
|
||||
<i class="fas fa-at me-1"></i>Interaction chat
|
||||
</a>
|
||||
<a class="nav-link navbar-sitemap-link" data-main-tab="settings-tab" href="#" onclick="activateMainTab('settings-tab'); return false;">
|
||||
<i class="fas fa-sliders-h me-1"></i>Paramètres
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-nav ms-auto">
|
||||
<span class="navbar-text">
|
||||
<i class="fas fa-circle text-success pulse"></i>
|
||||
@@ -26,139 +46,13 @@
|
||||
|
||||
<div class="container-fluid mt-4">
|
||||
<div class="row">
|
||||
<!-- Sidebar -->
|
||||
<div class="col-md-2">
|
||||
<div class="card bg-secondary">
|
||||
<div class="card-header">
|
||||
<h5><i class="fas fa-tachometer-alt me-2"></i>Tableau de Bord</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="status-item">
|
||||
<span class="badge bg-info">Flux Actifs</span>
|
||||
<span class="float-end" id="flux-count">0</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="badge bg-warning">Enregistrements</span>
|
||||
<span class="float-end" id="recording-count">0</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="badge bg-success">Connexions Chat</span>
|
||||
<span class="float-end" id="chat-count">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="card bg-secondary mt-3">
|
||||
<div class="card-header">
|
||||
<h5><i class="fas fa-bolt me-2"></i>Actions Rapides</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button class="btn btn-success btn-sm w-100 mb-2" onclick="generateResponse()">
|
||||
<i class="fas fa-magic me-2"></i>Générer Réponse
|
||||
</button>
|
||||
<button class="btn btn-primary btn-sm w-100 mb-2" onclick="sendLastGeneration()">
|
||||
<i class="fas fa-paper-plane me-2"></i>Envoyer Dernière Génération
|
||||
</button>
|
||||
<button class="btn btn-info btn-sm w-100 mb-2" onclick="refreshData()">
|
||||
<i class="fas fa-sync me-2"></i>Actualiser
|
||||
</button>
|
||||
|
||||
<!-- Auto Subtitle Generation Toggle -->
|
||||
<div class="mt-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="small text-muted">Génération Auto Sous-titres</span>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="autoSubtitleToggle" onchange="toggleAutoSubtitle()">
|
||||
<label class="form-check-label small" for="autoSubtitleToggle"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<small class="text-muted" id="autoSubtitleStatus">Arrêté</small>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button class="btn btn-warning btn-sm w-100" onclick="forceStopAutoSubtitle()" title="Forcer l'arrêt en cas de problème">
|
||||
<i class="fas fa-stop-circle me-1"></i>Force Stop
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto Message Sending Toggle -->
|
||||
<div class="mt-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="small text-muted">Envoi Auto Messages</span>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="autoMessageToggle" onchange="toggleAutoMessage()">
|
||||
<label class="form-check-label small" for="autoMessageToggle"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<small class="text-muted" id="autoMessageStatus">Arrêté</small>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button class="btn btn-warning btn-sm w-100" onclick="forceStopAutoMessage()" title="Forcer l'arrêt en cas de problème">
|
||||
<i class="fas fa-stop-circle me-1"></i>Force Stop
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Message Toggle -->
|
||||
<div class="mt-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="small text-muted">Envoi Messages Chat</span>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="chatMessageToggle" onchange="toggleChatMessage()">
|
||||
<label class="form-check-label small" for="chatMessageToggle"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<small class="text-muted" id="chatMessageStatus">Désactivé</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IA Generator Control -->
|
||||
<div class="mt-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="small text-muted">Générateur IA</span>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="iaGeneratorToggle" onchange="toggleIAGenerator()">
|
||||
<label class="form-check-label small" for="iaGeneratorToggle"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<small class="text-muted" id="iaGeneratorStatus">Arrêté</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Control Twitch Control -->
|
||||
<div class="mt-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="small text-muted">Contrôleur Twitch</span>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="controlTwitchToggle" onchange="toggleControlTwitch()">
|
||||
<label class="form-check-label small" for="controlTwitchToggle"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<small class="text-muted" id="controlTwitchStatus">Arrêté</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="col-md-7">
|
||||
<div class="col-md-9" id="main-content-col">
|
||||
<!-- Tabs Navigation -->
|
||||
<ul class="nav nav-tabs" id="mainTabs" role="tablist">
|
||||
<ul class="nav nav-tabs d-none" id="mainTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="flux-tab" data-bs-toggle="tab" data-bs-target="#flux" type="button">
|
||||
<i class="fas fa-stream me-2"></i>Flux
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button">
|
||||
<i class="fas fa-comments me-2"></i>Messages
|
||||
<i class="fas fa-tachometer-alt me-2"></i>Dashboard
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
@@ -176,73 +70,174 @@
|
||||
<i class="fas fa-closed-captioning me-2"></i>Sous-titres
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="interaction-tab" data-bs-toggle="tab" data-bs-target="#interaction" type="button">
|
||||
<i class="fas fa-at me-2"></i>Interaction chat
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button">
|
||||
<i class="fas fa-sliders-h me-2"></i>Paramètres
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content mt-3" id="mainTabContent">
|
||||
<!-- Flux Tab -->
|
||||
<div class="tab-pane fade show active" id="flux" role="tabpanel">
|
||||
<div class="card bg-secondary">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5><i class="fas fa-stream me-2"></i>Gestion des Flux</h5>
|
||||
<button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addFluxModal">
|
||||
<i class="fas fa-plus me-2"></i>Ajouter Flux
|
||||
</button>
|
||||
<!-- Ligne 1: tableau de bord + gestion des flux -->
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-4">
|
||||
<div class="card bg-secondary h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="fas fa-tachometer-alt me-2"></i>Tableau de Bord</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="status-item">
|
||||
<span class="badge bg-info">Flux Actifs</span>
|
||||
<span class="float-end" id="flux-count">0</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="badge bg-warning">Enregistrements</span>
|
||||
<span class="float-end" id="recording-count">0</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="badge bg-success">Connexions Chat</span>
|
||||
<span class="float-end" id="chat-count">0</span>
|
||||
</div>
|
||||
<div class="small text-muted mt-3">
|
||||
Vue rapide de l’activité (flux, enregistrement, connexions chat).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="flux-list">
|
||||
<!-- Flux list will be populated here -->
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div class="card bg-secondary h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0"><i class="fas fa-stream me-2"></i>Gestion des Flux</h5>
|
||||
<button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addFluxModal">
|
||||
<i class="fas fa-plus me-2"></i>Ajouter Flux
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="flux-list">
|
||||
<!-- Flux list will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Messages Tab -->
|
||||
<div class="tab-pane fade" id="messages" role="tabpanel">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card bg-secondary">
|
||||
<div class="card-header">
|
||||
<h5><i class="fas fa-eye me-2"></i>Prochain Message</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-info" id="next-message">
|
||||
Aucun message en attente
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="sendNextMessage()">
|
||||
<i class="fas fa-paper-plane me-2"></i>Envoyer ce Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-secondary mt-3">
|
||||
<div class="card-header">
|
||||
<h5><i class="fas fa-keyboard me-2"></i>Envoyer Message Personnalisé</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="custom-message-user" class="form-label">Utilisateur</label>
|
||||
<select class="form-select user-selector" id="custom-message-user">
|
||||
<option value="-1">Sélectionner un utilisateur...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<textarea class="form-control" id="custom-message" rows="3" placeholder="Tapez votre message ici..."></textarea>
|
||||
</div>
|
||||
<button class="btn btn-success" onclick="sendCustomMessage()">
|
||||
<i class="fas fa-send me-2"></i>Envoyer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Ligne 2: actions rapides -->
|
||||
<div class="card bg-secondary mt-3">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="fas fa-bolt me-2"></i>Actions Rapides</h5>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card bg-secondary">
|
||||
<div class="card-header">
|
||||
<h5><i class="fas fa-history me-2"></i>Messages Récents</h5>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-success btn-sm w-100" onclick="generateResponse()">
|
||||
<i class="fas fa-magic me-2"></i>Générer Réponse
|
||||
</button>
|
||||
<div class="small text-muted mt-1">Déclenche une génération IA à partir du dernier texte (sous-titres).</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="recent-messages" class="message-history">
|
||||
<!-- Recent messages will be populated here -->
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary btn-sm w-100" onclick="sendLastGeneration()">
|
||||
<i class="fas fa-paper-plane me-2"></i>Envoyer Dernière Génération
|
||||
</button>
|
||||
<div class="small text-muted mt-1">Envoie sur Twitch la dernière réponse IA disponible.</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-info btn-sm w-100" onclick="refreshData()">
|
||||
<i class="fas fa-sync me-2"></i>Actualiser
|
||||
</button>
|
||||
<div class="small text-muted mt-1">Recharge l’état et les données (flux, users, sous-titres, etc.).</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-secondary my-3">
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="fw-semibold">Génération Auto Sous-titres</div>
|
||||
<div class="small text-muted">Transcrit automatiquement les mp3 (Whisper) et alimente l’historique.</div>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="autoSubtitleToggle" onchange="toggleAutoSubtitle()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted" id="autoSubtitleStatus">Arrêté</small>
|
||||
<button class="btn btn-warning btn-sm" onclick="forceStopAutoSubtitle()" title="Forcer l'arrêt en cas de problème">
|
||||
<i class="fas fa-stop-circle me-1"></i>Force Stop
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="fw-semibold">Envoi Auto Messages</div>
|
||||
<div class="small text-muted">Envoie automatiquement les générations IA disponibles.</div>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="autoMessageToggle" onchange="toggleAutoMessage()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted" id="autoMessageStatus">Arrêté</small>
|
||||
<button class="btn btn-warning btn-sm" onclick="forceStopAutoMessage()" title="Forcer l'arrêt en cas de problème">
|
||||
<i class="fas fa-stop-circle me-1"></i>Force Stop
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="fw-semibold">Envoi Messages Chat</div>
|
||||
<div class="small text-muted">Interrupteur global: autorise/bloque tout envoi sur Twitch.</div>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="chatMessageToggle" onchange="toggleChatMessage()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<small class="text-muted" id="chatMessageStatus">Désactivé</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-6">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="fw-semibold">Générateur IA</div>
|
||||
<div class="small text-muted">Génère périodiquement des réponses (stockées dans `storage/IA_generator.json`).</div>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="iaGeneratorToggle" onchange="toggleIAGenerator()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<small class="text-muted" id="iaGeneratorStatus">Arrêté</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-6">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="fw-semibold">Contrôleur Twitch</div>
|
||||
<div class="small text-muted">Envoie automatiquement sur Twitch les générations présentes en file.</div>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="controlTwitchToggle" onchange="toggleControlTwitch()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<small class="text-muted" id="controlTwitchStatus">Arrêté</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -269,20 +264,40 @@
|
||||
|
||||
<!-- Prompts Tab -->
|
||||
<div class="tab-pane fade" id="prompts" role="tabpanel">
|
||||
<div class="card bg-secondary">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5><i class="fas fa-cogs me-2"></i>Configuration des Prompts IA</h5>
|
||||
<button class="btn btn-success btn-sm" onclick="addPrompt()">
|
||||
<i class="fas fa-plus me-2"></i>Ajouter Prompt
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="prompts-list">
|
||||
<!-- Prompts will be populated here -->
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-7">
|
||||
<div class="card bg-secondary">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0"><i class="fas fa-cogs me-2"></i>Configuration des Prompts IA</h5>
|
||||
<button class="btn btn-success btn-sm" onclick="addPrompt()">
|
||||
<i class="fas fa-plus me-2"></i>Ajouter Prompt
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="prompts-list">
|
||||
<!-- Prompts will be populated here -->
|
||||
</div>
|
||||
<button class="btn btn-primary mt-3" onclick="savePrompts()">
|
||||
<i class="fas fa-save me-2"></i>Sauvegarder les Prompts
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-5">
|
||||
<div class="card bg-secondary">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="fas fa-eye me-2"></i>Prochain Message</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-info" id="next-message">
|
||||
Aucun message en attente
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="sendNextMessage()">
|
||||
<i class="fas fa-paper-plane me-2"></i>Envoyer ce Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary mt-3" onclick="savePrompts()">
|
||||
<i class="fas fa-save me-2"></i>Sauvegarder les Prompts
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -334,11 +349,141 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interaction Chat Tab -->
|
||||
<div class="tab-pane fade" id="interaction" role="tabpanel">
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<div class="card bg-secondary">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5><i class="fas fa-at me-2"></i>Interaction chat</h5>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-outline-light btn-sm" onclick="refreshInteractionConfig()">
|
||||
<i class="fas fa-sync me-1"></i>Recharger
|
||||
</button>
|
||||
<button class="btn btn-success btn-sm" onclick="saveInteractionConfig()">
|
||||
<i class="fas fa-save me-1"></i>Sauvegarder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="interaction-enabled">
|
||||
<label class="form-check-label" for="interaction-enabled">Actif</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label small text-muted" for="interaction-mode">Mode</label>
|
||||
<select class="form-select form-select-sm" id="interaction-mode">
|
||||
<option value="predefined">Réponses préenregistrées (défaut)</option>
|
||||
<option value="tgpt">TGPT</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label small text-muted" for="interaction-cooldown">Cooldown (sec)</label>
|
||||
<input class="form-control form-control-sm" type="number" min="0" max="999" id="interaction-cooldown" value="8">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mt-1">
|
||||
<div class="col-md-4">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="interaction-tgpt-enabled">
|
||||
<label class="form-check-label" for="interaction-tgpt-enabled">TGPT activé</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<label class="form-label small text-muted" for="interaction-tgpt-preprompt">Préprompt TGPT (global)</label>
|
||||
<textarea class="form-control" id="interaction-tgpt-preprompt" rows="2" placeholder="Ex: Réponds brièvement en français."></textarea>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label small text-muted" for="interaction-tgpt-max-chars">Max caractères TGPT</label>
|
||||
<input class="form-control form-control-sm" type="number" min="10" max="2000" id="interaction-tgpt-max-chars" value="100">
|
||||
<div class="form-text text-muted">Au-delà: tronqué avec “...”.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-secondary my-3">
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-8">
|
||||
<label class="form-label small text-muted" for="interaction-default-responses">Réponses par défaut (1 par ligne)</label>
|
||||
<textarea class="form-control" id="interaction-default-responses" rows="3" placeholder="salut"></textarea>
|
||||
<div class="form-text text-muted">Si un message mentionne un compte enregistré et qu’aucune règle ne match, la 1ère ligne sera utilisée.</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label small text-muted">Comptes enregistrés</label>
|
||||
<div class="border rounded p-2 bg-dark" style="max-height: 140px; overflow:auto;">
|
||||
<div id="interaction-registered-accounts" class="small text-muted">—</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-secondary my-3">
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h6 class="mb-0"><i class="fas fa-list me-2"></i>Règles</h6>
|
||||
<button class="btn btn-primary btn-sm" onclick="addInteractionRule()">
|
||||
<i class="fas fa-plus me-1"></i>Ajouter règle
|
||||
</button>
|
||||
</div>
|
||||
<div id="interaction-rules" class="d-flex flex-column gap-2">
|
||||
<!-- rules injected -->
|
||||
</div>
|
||||
<div class="form-text text-muted mt-2">
|
||||
Ordre: la 1ère règle qui match gagne. Conditions possibles: utilisateur source, compte mentionné, texte contenu.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="card bg-secondary">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5><i class="fas fa-clipboard-list me-2"></i>Logs</h5>
|
||||
<button class="btn btn-outline-light btn-sm" onclick="refreshInteractionLog()">
|
||||
<i class="fas fa-sync me-1"></i>Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="interaction-log" class="subtitle-history">
|
||||
<div class="text-muted text-center">Aucun log</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Tab -->
|
||||
<div class="tab-pane fade" id="settings" role="tabpanel">
|
||||
<div class="card bg-secondary">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0"><i class="fas fa-sliders-h me-2"></i>Paramètres</h5>
|
||||
<button class="btn btn-success btn-sm" onclick="saveSettings()">
|
||||
<i class="fas fa-save me-1"></i>Sauvegarder
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small text-muted" for="settings-message-max-chars">Limite caractères message Twitch</label>
|
||||
<input class="form-control" type="number" min="10" max="500" id="settings-message-max-chars" value="100">
|
||||
<div class="form-text text-muted">
|
||||
Si un message dépasse la limite, il est tronqué et “...” est ajouté, puis il est envoyé.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Column -->
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3" id="chat-col">
|
||||
<div class="card bg-secondary chat-container">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5><i class="fas fa-comments me-2"></i>Chat du Stream</h5>
|
||||
|
||||
Reference in New Issue
Block a user