352 lines
18 KiB
TypeScript
352 lines
18 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { invoke } from '@tauri-apps/api/core';
|
|
import { Calendar, RefreshCw, LogIn, Video } from 'lucide-react';
|
|
import { openUrl } from '@tauri-apps/plugin-opener';
|
|
|
|
interface CalendarEvent {
|
|
id: string;
|
|
subject: string;
|
|
start: { dateTime: string, timeZone: string };
|
|
end: { dateTime: string, timeZone: string };
|
|
onlineMeeting?: { joinUrl: string };
|
|
location?: { displayName: string };
|
|
bodyPreview?: string; // Text preview
|
|
body?: { content: string, contentType: string }; // Full HTML/Text
|
|
attendees?: { emailAddress: { name: string, address: string }, type: string, status: { response: string } }[];
|
|
}
|
|
|
|
interface MeetingsViewProps {
|
|
onStartRecording: (subject?: string) => void;
|
|
azureClientId: string;
|
|
apiKey: string;
|
|
productId: string;
|
|
selectedModel: string;
|
|
onModelChange: (model: string) => void;
|
|
}
|
|
|
|
export default function MeetingsView({ onStartRecording, azureClientId, apiKey, productId, selectedModel, onModelChange }: MeetingsViewProps) {
|
|
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
|
const [token, setToken] = useState(localStorage.getItem('m365_token') || '');
|
|
// const [clientId, setClientId] = useState(azureClientId); // Use prop directly
|
|
|
|
// Sync prop to state if needed, or just use prop.
|
|
// Let's us prop directly in startAuthFlow
|
|
|
|
const [events, setEvents] = useState<CalendarEvent[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
|
|
|
|
const [availableModels, setAvailableModels] = useState<Array<{ id: string, name: string }>>([]);
|
|
|
|
const toggleExpand = (id: string) => {
|
|
const newSet = new Set(expandedIds);
|
|
if (newSet.has(id)) {
|
|
newSet.delete(id);
|
|
} else {
|
|
newSet.add(id);
|
|
}
|
|
setExpandedIds(newSet);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (apiKey && productId) {
|
|
loadModels();
|
|
}
|
|
}, [apiKey, productId]);
|
|
|
|
const loadModels = async () => {
|
|
try {
|
|
const models = await invoke<Array<{ id: string, name: string }>>('get_available_models', { apiKey, productId });
|
|
if (models && models.length > 0) {
|
|
models.sort((a, b) => a.name.localeCompare(b.name));
|
|
setAvailableModels(models);
|
|
}
|
|
} catch (e) {
|
|
console.error("Failed to load models:", e);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (token) {
|
|
setIsAuthenticated(true);
|
|
fetchEvents(token);
|
|
}
|
|
}, [token]);
|
|
|
|
const handleLogin = async () => {
|
|
if (!azureClientId) {
|
|
setError("Please configure Client ID in Settings");
|
|
return;
|
|
}
|
|
localStorage.setItem('m365_client_id', azureClientId);
|
|
|
|
setLoading(true);
|
|
setError('');
|
|
try {
|
|
const accessToken = await invoke<string>('start_auth_flow', { clientId: azureClientId });
|
|
setToken(accessToken);
|
|
localStorage.setItem('m365_token', accessToken);
|
|
setIsAuthenticated(true);
|
|
fetchEvents(accessToken);
|
|
} catch (err) {
|
|
console.error("Auth failed", err);
|
|
setError(String(err)); // Use String() to safely convert error object
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchEvents = async (authToken: string) => {
|
|
setLoading(true);
|
|
setError('');
|
|
try {
|
|
const data = await invoke<CalendarEvent[]>('get_calendar_events', { token: authToken });
|
|
// Sort by start time
|
|
const sorted = data.sort((a, b) => new Date(a.start.dateTime).getTime() - new Date(b.start.dateTime).getTime());
|
|
setEvents(sorted);
|
|
} catch (err) {
|
|
console.error("Fetch failed", err);
|
|
setError(`Fetch failed: ${err}`);
|
|
// If error is 401, logout
|
|
if (String(err).includes('401')) {
|
|
logout();
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const logout = () => {
|
|
setToken('');
|
|
localStorage.removeItem('m365_token');
|
|
setIsAuthenticated(false);
|
|
setEvents([]);
|
|
};
|
|
|
|
const handleJoin = async (joinUrl?: string, subject?: string) => {
|
|
if (!joinUrl) return;
|
|
try {
|
|
// 1. Open URL
|
|
await openUrl(joinUrl);
|
|
// 2. Start Recording (wait a sec for app focus switch?)
|
|
// Actually user might want to confirm recording? Protocol says "one-click".
|
|
onStartRecording(subject);
|
|
} catch (e) {
|
|
console.error("Failed to join", e);
|
|
}
|
|
};
|
|
|
|
const formatTime = (isoString: string) => {
|
|
return new Date(isoString).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
};
|
|
|
|
const formatDate = (isoString: string) => {
|
|
const date = new Date(isoString);
|
|
const today = new Date();
|
|
const tomorrow = new Date(today);
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
|
|
if (date.toDateString() === today.toDateString()) return "Today";
|
|
if (date.toDateString() === tomorrow.toDateString()) return "Tomorrow";
|
|
return date.toLocaleDateString([], { weekday: 'long', month: 'long', day: 'numeric' });
|
|
};
|
|
|
|
// Group events by date
|
|
const groupedEvents = events.reduce((groups, event) => {
|
|
const dateKey = formatDate(event.start.dateTime);
|
|
if (!groups[dateKey]) {
|
|
groups[dateKey] = [];
|
|
}
|
|
groups[dateKey].push(event);
|
|
return groups;
|
|
}, {} as Record<string, CalendarEvent[]>);
|
|
|
|
return (
|
|
<div className="flex flex-col w-full h-full bg-background p-6">
|
|
<h1 className="text-2xl font-bold mb-6 flex items-center gap-2">
|
|
<Calendar className="w-8 h-8" />
|
|
Upcoming Meetings
|
|
</h1>
|
|
|
|
{/* Auth Section */}
|
|
{!isAuthenticated ? (
|
|
<div className="flex flex-col items-center justify-center flex-1 gap-6 text-center max-w-md mx-auto">
|
|
<div className="bg-secondary/30 p-8 rounded-xl border border-border">
|
|
<Calendar className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
|
|
<h2 className="text-lg font-semibold mb-2">Connect Microsoft 365</h2>
|
|
<p className="text-sm text-muted-foreground mb-6">
|
|
Connect your account to see upcoming Teams & Zoom meetings and join them with one click.
|
|
</p>
|
|
|
|
<div className="flex flex-col gap-3">
|
|
<div className="text-sm p-3 bg-secondary/50 rounded border border-border text-center">
|
|
{azureClientId ? (
|
|
<span className="text-green-600 font-medium">Client ID Configured</span>
|
|
) : (
|
|
<span className="text-destructive font-medium">Client ID Missing in Settings</span>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleLogin}
|
|
disabled={loading || !azureClientId}
|
|
className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm flex items-center justify-center gap-2 hover:opacity-90 disabled:opacity-50 w-full transition-all"
|
|
>
|
|
{loading ? <RefreshCw className="animate-spin" size={16} /> : <LogIn size={16} />}
|
|
Connect Account
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mt-4 p-3 bg-destructive/10 text-destructive text-xs rounded-md text-left break-all">
|
|
<strong>Error:</strong> {error}
|
|
</div>
|
|
)}
|
|
|
|
<p className="text-[10px] text-muted-foreground mt-4 px-2">
|
|
Note: Requires an Azure App Registration (Multitenant) with redirect URI: <br />
|
|
<code className="bg-secondary px-1 rounded">http://localhost:14200/auth/callback</code>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col flex-1 overflow-hidden">
|
|
<div className="flex justify-between items-center mb-4 px-1">
|
|
<span className="text-sm text-muted-foreground font-medium">Next 7 Days</span>
|
|
<div className="flex items-center gap-3">
|
|
{/* Model Selector */}
|
|
<div className="flex items-center gap-2 bg-secondary/50 p-1 rounded-lg border border-border/50">
|
|
<span className="text-[10px] uppercase font-bold text-muted-foreground pl-2">Using:</span>
|
|
<select
|
|
value={selectedModel}
|
|
onChange={(e) => onModelChange(e.target.value)}
|
|
className="bg-transparent text-xs font-medium outline-none text-foreground cursor-pointer"
|
|
>
|
|
{availableModels.map(m => (
|
|
<option key={m.id} value={m.id}>{m.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<button onClick={() => fetchEvents(token)} disabled={loading} className="text-muted-foreground hover:text-foreground p-1 rounded hover:bg-secondary transition-colors" title="Refresh">
|
|
<RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
|
|
</button>
|
|
<button onClick={logout} className="text-muted-foreground hover:text-destructive p-1 rounded hover:bg-destructive/10 transition-colors" title="Logout">
|
|
<LogIn size={16} className="rotate-180" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{events.length === 0 && !loading && (
|
|
<div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
|
|
{/* No meetings empty state (only if no error) */}
|
|
<Calendar size={48} className="mb-4 opacity-20" />
|
|
<p>No upcoming meetings found for the next 7 days.</p>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="m-4 p-3 bg-destructive/10 text-destructive text-sm rounded-md flex items-center justify-between">
|
|
<span>{error}</span>
|
|
<button onClick={() => fetchEvents(token)} className="underline hover:no-underline ml-2">Retry</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex-1 overflow-y-auto pr-2 space-y-6 pb-20">
|
|
{Object.entries(groupedEvents).map(([dateLabel, dateEvents]) => (
|
|
<div key={dateLabel} className="space-y-3">
|
|
<div className="sticky top-0 z-10 bg-background/95 backdrop-blur py-2 border-b border-border/50 text-xs font-bold uppercase tracking-wider text-muted-foreground">
|
|
{dateLabel}
|
|
</div>
|
|
{dateEvents.map(event => (
|
|
<div key={event.id} className="bg-card border border-border rounded-xl p-4 hover:shadow-md transition-all group">
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="text-lg font-mono font-medium text-foreground">
|
|
{formatTime(event.start.dateTime)}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
- {formatTime(event.end.dateTime)}
|
|
</span>
|
|
</div>
|
|
<h3 className="text-base font-semibold group-hover:text-primary transition-colors leading-tight">
|
|
{event.subject}
|
|
</h3>
|
|
{event.location?.displayName && (
|
|
<div className="text-xs text-muted-foreground flex items-center gap-1">
|
|
📍 {event.location.displayName}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{event.onlineMeeting?.joinUrl ? (
|
|
<button
|
|
onClick={() => handleJoin(event.onlineMeeting?.joinUrl, event.subject)}
|
|
className="shrink-0 bg-green-600 hover:bg-green-700 text-white p-2 rounded-lg shadow-sm hover:shadow transition-all flex flex-col items-center justify-center gap-0.5 min-w-[70px]"
|
|
title={`Join & Summarize with ${selectedModel}`}
|
|
>
|
|
<Video size={16} />
|
|
<span className="text-[10px] font-bold">JOIN</span>
|
|
</button>
|
|
) : (
|
|
<div className="px-2 py-1 bg-secondary text-muted-foreground text-[10px] rounded italic">
|
|
No Link
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Expand/Collapse Button */}
|
|
<button
|
|
onClick={() => toggleExpand(event.id)}
|
|
className="text-[10px] text-muted-foreground hover:text-primary mt-2 flex items-center gap-1 transition-colors w-full justify-center py-0.5 bg-secondary/30 hover:bg-secondary/50 rounded"
|
|
>
|
|
{expandedIds.has(event.id) ? "Hide Details" : "Show Details"}
|
|
</button>
|
|
|
|
{/* Expanded Content */}
|
|
{expandedIds.has(event.id) && (
|
|
<div className="mt-2 text-xs text-foreground/80 bg-background/50 p-3 rounded border border-border/50 animate-in fade-in slide-in-from-top-1">
|
|
{event.body?.content ? (
|
|
<div
|
|
className="prose prose-xs dark:prose-invert max-w-none break-words"
|
|
dangerouslySetInnerHTML={{ __html: event.body.content }}
|
|
/>
|
|
) : (
|
|
<p className="whitespace-pre-wrap">{event.bodyPreview || "No details available."}</p>
|
|
)}
|
|
|
|
{event.attendees && event.attendees.length > 0 && (
|
|
<div className="mt-3 pt-3 border-t border-border/50">
|
|
<h4 className="text-xs font-semibold text-foreground mb-2 flex items-center gap-2">
|
|
👥 Attendees ({event.attendees.length})
|
|
</h4>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{event.attendees.map((att, i) => (
|
|
<div key={i} className="flex items-center gap-1.5 bg-secondary/50 border border-border/50 px-2 py-1 rounded text-xs transition-colors">
|
|
<div className={`w-1.5 h-1.5 rounded-full shrink-0 ${att.status.response === 'accepted' ? 'bg-green-500 shadow-[0_0_4px_rgba(34,197,94,0.4)]' :
|
|
att.status.response === 'declined' ? 'bg-red-500' : 'bg-yellow-500'
|
|
}`} title={`Status: ${att.status.response}`} />
|
|
<span className="truncate max-w-[150px]" title={att.emailAddress.address}>
|
|
{att.emailAddress.name || att.emailAddress.address}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|