281 lines
11 KiB
TypeScript
281 lines
11 KiB
TypeScript
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
|
|
import * as teamsbotApi from '../../../api/teamsbotApi';
|
|
import type { TeamsbotSession, StartSessionRequest, TeamsbotJoinMode } from '../../../api/teamsbotApi';
|
|
import { getUserDataCache } from '../../../utils/userCache';
|
|
import styles from './Teamsbot.module.css';
|
|
|
|
/**
|
|
* TeamsbotDashboardView - Overview of all Teams Bot sessions.
|
|
* Allows starting new sessions and viewing active/past sessions.
|
|
*/
|
|
export const TeamsbotDashboardView: React.FC = () => {
|
|
const { instance, mandateId, featureCode } = useCurrentInstance();
|
|
const instanceId = instance?.id || '';
|
|
const navigate = useNavigate();
|
|
|
|
const cachedUser = getUserDataCache();
|
|
const _isSysAdmin = cachedUser?.isSysAdmin === true;
|
|
|
|
const [sessions, setSessions] = useState<TeamsbotSession[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// New session form
|
|
const [meetingLink, setMeetingLink] = useState('');
|
|
const [botName, setBotName] = useState('');
|
|
const [joinMode, setJoinMode] = useState<TeamsbotJoinMode>('anonymous');
|
|
const [sessionContext, setSessionContext] = useState('');
|
|
const [isStarting, setIsStarting] = useState(false);
|
|
|
|
const _loadSessions = useCallback(async () => {
|
|
if (!instanceId) return;
|
|
try {
|
|
setLoading(true);
|
|
const result = await teamsbotApi.listSessions(instanceId);
|
|
setSessions(result.sessions || []);
|
|
setError(null);
|
|
} catch (err: any) {
|
|
setError(err.message || 'Fehler beim Laden der Sitzungen');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [instanceId]);
|
|
|
|
useEffect(() => {
|
|
_loadSessions();
|
|
}, [_loadSessions]);
|
|
|
|
// Auto-refresh: poll every 10s when there are active sessions
|
|
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
|
useEffect(() => {
|
|
const hasActiveSessions = sessions.some(s => ['pending', 'joining', 'active'].includes(s.status));
|
|
if (hasActiveSessions && instanceId) {
|
|
pollRef.current = setInterval(() => {
|
|
teamsbotApi.listSessions(instanceId).then(r => setSessions(r.sessions || [])).catch(() => {});
|
|
}, 10000);
|
|
}
|
|
return () => { if (pollRef.current) clearInterval(pollRef.current); };
|
|
}, [sessions, instanceId]);
|
|
|
|
const _handleStartSession = async () => {
|
|
if (!meetingLink.trim()) return;
|
|
|
|
setIsStarting(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const request: StartSessionRequest = {
|
|
meetingLink: meetingLink.trim(),
|
|
botName: botName.trim() || undefined,
|
|
joinMode: joinMode,
|
|
sessionContext: sessionContext.trim() || undefined,
|
|
};
|
|
|
|
await teamsbotApi.startSession(instanceId, request);
|
|
setMeetingLink('');
|
|
setBotName('');
|
|
await _loadSessions();
|
|
} catch (err: any) {
|
|
setError(err.message || 'Fehler beim Starten der Sitzung');
|
|
} finally {
|
|
setIsStarting(false);
|
|
}
|
|
};
|
|
|
|
const _handleStopSession = async (sessionId: string) => {
|
|
try {
|
|
await teamsbotApi.stopSession(instanceId, sessionId);
|
|
await _loadSessions();
|
|
} catch (err: any) {
|
|
setError(err.message || 'Fehler beim Stoppen der Sitzung');
|
|
}
|
|
};
|
|
|
|
const _handleDeleteSession = async (sessionId: string) => {
|
|
try {
|
|
await teamsbotApi.deleteSession(instanceId, sessionId);
|
|
await _loadSessions();
|
|
} catch (err: any) {
|
|
setError(err.message || 'Fehler beim Loeschen der Sitzung');
|
|
}
|
|
};
|
|
|
|
const _getStatusBadgeClass = (status: string) => {
|
|
switch (status) {
|
|
case 'active': return styles.statusActive;
|
|
case 'joining': return styles.statusJoining;
|
|
case 'pending': return styles.statusPending;
|
|
case 'ended': return styles.statusEnded;
|
|
case 'error': return styles.statusError;
|
|
case 'leaving': return styles.statusLeaving;
|
|
default: return '';
|
|
}
|
|
};
|
|
|
|
const _getStatusLabel = (status: string) => {
|
|
const labels: Record<string, string> = {
|
|
pending: 'Wartend',
|
|
joining: 'Beitritt...',
|
|
active: 'Aktiv',
|
|
leaving: 'Verlassen...',
|
|
ended: 'Beendet',
|
|
error: 'Fehler',
|
|
};
|
|
return labels[status] || status;
|
|
};
|
|
|
|
const activeSessions = sessions.filter(s => ['pending', 'joining', 'active'].includes(s.status));
|
|
const pastSessions = sessions.filter(s => ['ended', 'error', 'leaving'].includes(s.status));
|
|
|
|
return (
|
|
<div className={styles.dashboardContainer}>
|
|
{/* Start New Session Card */}
|
|
<div className={styles.startSessionCard}>
|
|
<h3 className={styles.cardTitle}>Neue Bot-Sitzung starten</h3>
|
|
<p className={styles.cardDescription}>
|
|
Fuege den Teams Meeting-Link ein, um den AI-Bot in ein Meeting einzuschleusen.
|
|
</p>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label className={styles.label}>Teams Meeting-Link *</label>
|
|
<input
|
|
type="url"
|
|
className={styles.input}
|
|
placeholder="https://teams.microsoft.com/l/meetup-join/..."
|
|
value={meetingLink}
|
|
onChange={(e) => setMeetingLink(e.target.value)}
|
|
disabled={isStarting}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label className={styles.label}>Join-Modus</label>
|
|
<select
|
|
className={styles.select || styles.input}
|
|
value={joinMode}
|
|
onChange={(e) => setJoinMode(e.target.value as TeamsbotJoinMode)}
|
|
disabled={isStarting}
|
|
>
|
|
{_isSysAdmin && <option value="systemBot">System-Bot (authentifiziert)</option>}
|
|
<option value="anonymous">Anonymer Gast</option>
|
|
<option value="userAccount">Mein Account</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label className={styles.label}>Bot-Name (optional)</label>
|
|
<input
|
|
type="text"
|
|
className={styles.input}
|
|
placeholder="AI Assistant"
|
|
value={botName}
|
|
onChange={(e) => setBotName(e.target.value)}
|
|
disabled={isStarting}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label className={styles.label}>Session-Kontext (optional)</label>
|
|
<textarea
|
|
className={styles.textarea || styles.input}
|
|
placeholder="Agenda, Hintergrundinformationen, Dokumente oder andere Informationen fuer den Bot..."
|
|
value={sessionContext}
|
|
onChange={(e) => setSessionContext(e.target.value)}
|
|
disabled={isStarting}
|
|
rows={4}
|
|
style={{ resize: 'vertical', minHeight: '80px' }}
|
|
/>
|
|
<span style={{ fontSize: '12px', color: '#888' }}>
|
|
Kontext den der Bot waehrend der Sitzung nutzen kann (z.B. Meeting-Agenda, Projektinfos).
|
|
{sessionContext.length > 0 && ` (${sessionContext.length} Zeichen)`}
|
|
</span>
|
|
</div>
|
|
|
|
<button
|
|
className={styles.startButton}
|
|
onClick={_handleStartSession}
|
|
disabled={isStarting || !meetingLink.trim()}
|
|
>
|
|
{isStarting ? 'Wird gestartet...' : 'Bot ins Meeting senden'}
|
|
</button>
|
|
</div>
|
|
|
|
{error && <div className={styles.errorBanner}>{error}</div>}
|
|
|
|
{/* Active Sessions */}
|
|
{activeSessions.length > 0 && (
|
|
<div className={styles.sectionContainer}>
|
|
<h3 className={styles.sectionTitle}>Aktive Sitzungen</h3>
|
|
<div className={styles.sessionList}>
|
|
{activeSessions.map((session) => (
|
|
<div key={session.id} className={styles.sessionCard}>
|
|
<div className={styles.sessionHeader}>
|
|
<span className={styles.sessionBotName}>{session.botName}</span>
|
|
<span className={`${styles.statusBadge} ${_getStatusBadgeClass(session.status)}`}>
|
|
{_getStatusLabel(session.status)}
|
|
</span>
|
|
</div>
|
|
<div className={styles.sessionMeta}>
|
|
<span>{session.transcriptSegmentCount} Segmente</span>
|
|
<span>{session.botResponseCount} Antworten</span>
|
|
{session.startedAt && <span>Seit: {new Date(session.startedAt).toLocaleTimeString('de-CH')}</span>}
|
|
</div>
|
|
<div className={styles.sessionActions}>
|
|
<button className={styles.viewButton} onClick={() => navigate(`/mandates/${mandateId}/${featureCode}/${instanceId}/sessions?sessionId=${session.id}`)}>Live ansehen</button>
|
|
{session.status === 'active' && (
|
|
<button className={styles.stopButton} onClick={() => _handleStopSession(session.id)}>
|
|
Stoppen
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Past Sessions */}
|
|
<div className={styles.sectionContainer}>
|
|
<h3 className={styles.sectionTitle}>
|
|
{loading ? 'Lade Sitzungen...' : `Vergangene Sitzungen (${pastSessions.length})`}
|
|
</h3>
|
|
{pastSessions.length === 0 && !loading && (
|
|
<p className={styles.emptyState}>Noch keine vergangenen Sitzungen.</p>
|
|
)}
|
|
<div className={styles.sessionList}>
|
|
{pastSessions.map((session) => (
|
|
<div key={session.id} className={styles.sessionCard}>
|
|
<div className={styles.sessionHeader}>
|
|
<span className={styles.sessionBotName}>{session.botName}</span>
|
|
<span className={`${styles.statusBadge} ${_getStatusBadgeClass(session.status)}`}>
|
|
{_getStatusLabel(session.status)}
|
|
</span>
|
|
</div>
|
|
<div className={styles.sessionMeta}>
|
|
<span>{session.transcriptSegmentCount} Segmente</span>
|
|
<span>{session.botResponseCount} Antworten</span>
|
|
{session.startedAt && <span>{new Date(session.startedAt).toLocaleDateString('de-CH')}</span>}
|
|
</div>
|
|
{session.summary && (
|
|
<div className={styles.sessionSummary}>{session.summary.substring(0, 200)}...</div>
|
|
)}
|
|
{session.errorMessage && (
|
|
<div className={styles.sessionError}>{session.errorMessage}</div>
|
|
)}
|
|
<div className={styles.sessionActions}>
|
|
<button className={styles.viewButton} onClick={() => navigate(`/mandates/${mandateId}/${featureCode}/${instanceId}/sessions?sessionId=${session.id}`)}>Details</button>
|
|
<button className={styles.deleteButton} onClick={() => _handleDeleteSession(session.id)}>
|
|
Loeschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TeamsbotDashboardView;
|