mrcwlnd/timetracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Timebot implementation

Browse Source
This commit is contained in:
MarcWieland
2026-06-08 23:34:08 +02:00
parent b8b01871ed
commit 82626bc5b3
17 changed files with 802 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
timetracker.Client/Components/Layout/ChatbotWidget.razor
+297
View File
@@ -0,0 +1,297 @@
@inject ITimetrackerService TrackerService
@inject AuthenticationStateProvider AuthStateProvider
@inject IJSRuntime JS
@using System.Security.Claims
@using timetracker.Shared
@if (_isOpen)
{
<div class="timebot-chat-window">
<!-- Chat Header -->
<div class="timebot-header">
<div class="timebot-header-info">
<img src="/timebot.png" class="timebot-header-avatar" alt="Timebot" />
<div class="timebot-header-text">
<span class="timebot-header-title">Timebot</span>
<span class="timebot-header-status"><span class="status-dot"></span> Online</span>
</div>
</div>
<button class="timebot-close-btn" @onclick="ToggleChat" aria-label="Schließen">
<MudIcon Icon="@Icons.Material.Filled.Close" Size="Size.Small" Style="color: white;" />
</button>
</div>
<!-- Chat Body -->
<div class="timebot-body" id="timebot-body-el">
@foreach (var msg in _messages)
{
<div class="timebot-msg-row @(msg.Sender == "User" ? "user-row" : "bot-row")">
@if (msg.Sender == "Bot")
{
<img src="/timebot.png" class="timebot-msg-avatar" alt="Timebot" />
}
<div class="timebot-msg-bubble @(msg.Sender == "User" ? "user-bubble" : "bot-bubble")">
@if (msg.IsTyping)
{
<div class="typing-indicator">
<span></span><span></span><span></span>
</div>
}
else
{
@((MarkupString)FormatMessageText(msg.Content))
}
</div>
</div>
}
</div>
<!-- Suggestion Chips -->
<div class="timebot-suggestions">
<button @onclick="@(() => AskQuestion("Überstunden"))">📊 Überstunden</button>
<button @onclick="@(() => AskQuestion("Woche"))">⏱️ Wochenarbeitszeit</button>
<button @onclick="@(() => AskQuestion("Urlaub"))">🏖️ Urlaubs-Maximizer</button>
<button @onclick="@(() => AskQuestion("Hilfe"))">💡 Hilfe</button>
</div>
<!-- Chat Footer -->
<div class="timebot-footer">
<input type="text" @bind="_userInput" @bind:event="oninput" @onkeypress="HandleKeyPress" placeholder="Schreibe eine Nachricht..." class="timebot-input" />
<button class="timebot-send-btn" @onclick="SendMessage" disabled="@(string.IsNullOrWhiteSpace(_userInput))">
<MudIcon Icon="@Icons.Material.Filled.Send" Style="color: #3F51B5;" />
</button>
</div>
</div>
}
<!-- Floating Button -->
<div class="timebot-launcher @(_isOpen ? "open" : "")" @onclick="ToggleChat">
<img src="/timebot.png" alt="Timebot Launcher" />
@if (_unreadCount > 0 && !_isOpen)
{
<span class="timebot-badge">@_unreadCount</span>
}
</div>
@code {
private bool _isOpen = false;
private string _userInput = "";
private int _unreadCount = 1;
private List<ChatMessage> _messages = new();
private int _userId;
private string _username = "Marc";
private AppSettings _settings = new();
protected override async Task OnInitializedAsync()
{
var authState = await AuthStateProvider.GetAuthenticationStateAsync();
var claim = authState.User.FindFirst(ClaimTypes.NameIdentifier);
if (claim != null)
{
_userId = int.Parse(claim.Value);
_username = authState.User.Identity?.Name ?? "Marc";
if (!string.IsNullOrEmpty(_username))
{
_username = char.ToUpper(_username[0]) + _username.Substring(1);
}
_settings = await TrackerService.GetSettingsAsync(_userId);
}
_messages.Add(new ChatMessage
{
Sender = "Bot",
Content = $"Hallo {_username}! 👋 Ich bin dein Timebot. Ich habe ein Auge auf deine Zeiten geworfen.\n\nWie kann ich dir heute helfen?",
Timestamp = DateTime.Now
});
}
private void ToggleChat()
{
_isOpen = !_isOpen;
if (_isOpen)
{
_unreadCount = 0;
_ = ScrollToBottom();
}
}
private async Task HandleKeyPress(KeyboardEventArgs e)
{
if (e.Key == "Enter" && !string.IsNullOrWhiteSpace(_userInput))
{
await SendMessage();
}
}
private async Task SendMessage()
{
if (string.IsNullOrWhiteSpace(_userInput)) return;
var text = _userInput;
_userInput = "";
_messages.Add(new ChatMessage { Sender = "User", Content = text, Timestamp = DateTime.Now });
await ScrollToBottom();
await RespondTo(text);
}
private async Task AskQuestion(string key)
{
string userQuestion = "";
if (key == "Überstunden") userQuestion = "Wie viele Überstunden habe ich?";
else if (key == "Woche") userQuestion = "Wie sieht meine Woche aus?";
else if (key == "Urlaub") userQuestion = "Wie hilft mir der Urlaubs-Maximizer?";
else if (key == "Hilfe") userQuestion = "Welche Fragen kann ich dir stellen?";
_messages.Add(new ChatMessage { Sender = "User", Content = userQuestion, Timestamp = DateTime.Now });
await ScrollToBottom();
await RespondTo(key);
}
private async Task RespondTo(string query)
{
// Add typing indicator
var typingMsg = new ChatMessage { Sender = "Bot", IsTyping = true, Timestamp = DateTime.Now };
_messages.Add(typingMsg);
await ScrollToBottom();
// Simulate thinking/typing delay
await Task.Delay(1000);
_messages.Remove(typingMsg);
string responseText = "";
var normalized = query.ToLower();
if (normalized.Contains("überstunden") || normalized == "überstunden" || normalized.Contains("saldo") || normalized.Contains("gleitzeit"))
{
var settings = await TrackerService.GetSettingsAsync(_userId);
var overtime = await TrackerService.GetTotalOvertimeAsync(_userId, settings);
var overtimeStr = FormatTs(overtime, sign: true);
if (overtime >= TimeSpan.Zero)
{
responseText = $"Dein Gleitzeitkonto sieht super aus! Du hast aktuell **{overtimeStr} Std.** auf deinem Gleitzeitkonto angesammelt.\n\nSehr stark! Hast du mit der Extrazeit schon etwas vor oder bist du einfach nur voll am Hustlen? 🚀🔥";
}
else
{
responseText = $"Dein Gleitzeitkonto steht aktuell bei **{overtimeStr} Std.**\n\nDu bist also ein kleines bisschen im Minus. Aber kein Grund zur Sorge: Das lässt sich mit ein paar Extra-Minuten in den nächsten Tagen leicht wieder ausgleichen! 💪";
}
}
else if (normalized.Contains("woche") || normalized == "woche" || normalized.Contains("arbeitszeit") || normalized.Contains("stunden"))
{
var today = DateOnly.FromDateTime(DateTime.Today);
var monday = GetMonday(today);
var settings = await TrackerService.GetSettingsAsync(_userId);
var weekDays = await TrackerService.GetWeekAsync(_userId, monday);
double workedHours = 0;
double targetHours = 0;
foreach (var date in Enumerable.Range(0, 7).Select(i => monday.AddDays(i)))
{
bool isWorkDay = settings.IsWorkDay(date.DayOfWeek);
if (isWorkDay)
{
targetHours += settings.DailyTargetHours;
}
var wd = weekDays.FirstOrDefault(d => d.Date == date);
if (wd != null && wd.StartTime != null && wd.EndTime != null)
{
var gross = wd.EndTime.Value.ToTimeSpan() - wd.StartTime.Value.ToTimeSpan();
if (gross > TimeSpan.Zero)
{
var breakTotal = wd.Breaks
.Where(b => b.StartTime.HasValue && b.EndTime.HasValue && b.EndTime > b.StartTime)
.Aggregate(TimeSpan.Zero, (s, b) =>
s + (b.EndTime!.Value.ToTimeSpan() - b.StartTime!.Value.ToTimeSpan()));
workedHours += (gross - breakTotal).TotalHours;
}
}
}
var workedTs = TimeSpan.FromHours(workedHours);
var targetTs = TimeSpan.FromHours(targetHours);
var percent = targetHours > 0 ? (int)Math.Round(workedHours / targetHours * 100) : 0;
responseText = $"Diese Woche hast du bereits **{FormatTs(workedTs)}** von geplanten **{FormatTs(targetTs)}** gearbeitet.\n\nDu hast diese Woche also schon **{percent}%** deines Solls erfüllt. Weiter so! ⏰";
}
else if (normalized.Contains("urlaub") || normalized == "urlaub" || normalized.Contains("maximizer") || normalized.Contains("brückentag"))
{
responseText = $"Der **Urlaubs-Maximizer** analysiert das Kalenderjahr, gesetzliche Feiertage und Brückentage, um dir die besten Zeiträume für Urlaub vorzuschlagen.\n\nDu findest die Auswertung direkt in der Sidebar unter **'Urlaubs-Maximizer'**. So machst du aus wenigen Urlaubstagen maximale Freizeit! 🏖️✈️";
}
else if (normalized.Contains("hilfe") || normalized == "hilfe" || normalized.Contains("hallo") || normalized.Contains("hi") || normalized.Contains("helo") || normalized.Contains("huhu") || normalized == "hilfe")
{
responseText = $"Ich kann dir Auskunft über deine Zeiten geben. Frage mich zum Beispiel:\n\n" +
$"• *'Wie viele Überstunden habe ich?'*\n" +
$"• *'Wie sieht meine Woche aus?'*\n" +
$"• *'Was macht der Urlaubs-Maximizer?'*\n\n" +
$"Oder tippe einfach deine Frage ein! 💡";
}
else
{
responseText = $"Entschuldige, diese Frage kann ich leider noch nicht beantworten. 🤖\n\nFrage mich gerne nach deinem **Überstunden-Saldo**, deiner **Wochen-Arbeitszeit** oder dem **Urlaubs-Maximizer**!";
}
_messages.Add(new ChatMessage { Sender = "Bot", Content = responseText, Timestamp = DateTime.Now });
await ScrollToBottom();
}
private async Task ScrollToBottom()
{
try
{
await JS.InvokeVoidAsync("eval", "setTimeout(() => { const el = document.getElementById('timebot-body-el'); if(el) el.scrollTop = el.scrollHeight; }, 50);");
}
catch
{
// Prerender-Pass ignorieren
}
}
private string FormatMessageText(string text)
{
// Simple helper to replace markdown bold (**text**) with HTML bold (<strong>text</strong>)
// and newlines (\n) with <br />
if (string.IsNullOrEmpty(text)) return "";
var formatted = text;
// Escape HTML first to prevent XSS
formatted = System.Net.WebUtility.HtmlEncode(formatted);
// Replace back escaped ** formatting
// Simple regex replace for **text**
var regex = new System.Text.RegularExpressions.Regex(@"\*\*(.*?)\*\*");
formatted = regex.Replace(formatted, "<strong>$1</strong>");
// Replace newlines
formatted = formatted.Replace("\n", "<br />");
return formatted;
}
private static DateOnly GetMonday(DateOnly date)
{
int diff = ((int)date.DayOfWeek - (int)DayOfWeek.Monday + 7) % 7;
return date.AddDays(-diff);
}
private static string FormatTs(TimeSpan ts, bool sign = false)
{
if (ts == TimeSpan.Zero && sign) return "±0:00";
var prefix = sign ? (ts >= TimeSpan.Zero ? "+" : "−") : (ts < TimeSpan.Zero ? "−" : "");
var abs = ts.Duration();
return $"{prefix}{(int)abs.TotalHours}:{abs.Minutes:D2}";
}
private sealed class ChatMessage
{
public string Sender { get; set; } = "Bot";
public string Content { get; set; } = "";
public DateTime Timestamp { get; set; } = DateTime.Now;
public bool IsTyping { get; set; } = false;
}
}
timetracker.Client/Components/Layout/ChatbotWidget.razor.css
+334
View File
@@ -0,0 +1,334 @@
/* Floating Launcher Button */
.timebot-launcher {
position: fixed;
bottom: 24px;
right: 24px;
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #ffffff 0%, #f1f3f9 100%);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
cursor: pointer;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 2px solid #3F51B5;
}
.timebot-launcher:hover {
transform: scale(1.1) translateY(-4px);
box-shadow: 0 12px 28px rgba(63, 81, 181, 0.4);
border-color: #1A237E;
}
.timebot-launcher img {
width: 48px;
height: 48px;
object-fit: contain;
}
.timebot-launcher.open {
transform: scale(0.9) rotate(90deg);
opacity: 0.8;
}
.timebot-badge {
position: absolute;
top: -4px;
right: -4px;
background-color: #ff3b30;
color: white;
font-size: 11px;
font-weight: bold;
padding: 3px 7px;
border-radius: 10px;
border: 2px solid white;
}
/* Chat Window */
.timebot-chat-window {
position: fixed;
bottom: 100px;
right: 24px;
width: 360px;
height: 520px;
max-height: 80vh;
border-radius: 20px;
background: rgba(32, 33, 36, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 9999;
animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
color: #f1f3f9;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Header */
.timebot-header {
background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%);
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.timebot-header-info {
display: flex;
align-items: center;
gap: 12px;
}
.timebot-header-avatar {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
padding: 2px;
object-fit: contain;
}
.timebot-header-text {
display: flex;
flex-direction: column;
}
.timebot-header-title {
font-weight: 700;
font-size: 15px;
color: white;
letter-spacing: 0.3px;
}
.timebot-header-status {
font-size: 11px;
color: rgba(255, 255, 255, 0.75);
display: flex;
align-items: center;
gap: 4px;
}
.status-dot {
width: 6px;
height: 6px;
background-color: #4cd964;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 8px #4cd964;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(76, 217, 100, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 217, 100, 0); }
}
.timebot-close-btn {
background: transparent;
border: none;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.timebot-close-btn:hover {
opacity: 1;
}
/* Chat Body */
.timebot-body {
flex: 1;
padding: 16px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
background: rgba(24, 25, 28, 0.4);
}
.timebot-msg-row {
display: flex;
gap: 8px;
max-width: 85%;
}
.timebot-msg-row.bot-row {
align-self: flex-start;
}
.timebot-msg-row.user-row {
align-self: flex-end;
flex-direction: row-reverse;
}
.timebot-msg-avatar {
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
padding: 2px;
align-self: flex-end;
object-fit: contain;
}
.timebot-msg-bubble {
padding: 10px 14px;
border-radius: 16px;
font-size: 13.5px;
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
}
.bot-bubble {
background: rgba(255, 255, 255, 0.08);
color: #e3e3e7;
border-bottom-left-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.04);
}
.user-bubble {
background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%);
color: white;
border-bottom-right-radius: 4px;
box-shadow: 0 4px 12px rgba(63, 81, 181, 0.2);
}
/* Typing Indicator */
.typing-indicator {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 0;
}
.typing-indicator span {
width: 6px;
height: 6px;
background-color: #a8b2c1;
border-radius: 50%;
display: inline-block;
animation: bounce 1.4s infinite both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1.0); }
}
/* Suggestions */
.timebot-suggestions {
display: flex;
gap: 6px;
padding: 8px 12px;
background: rgba(18, 18, 20, 0.6);
border-top: 1px solid rgba(255, 255, 255, 0.06);
overflow-x: auto;
scrollbar-width: none; /* Scrollbar hidden for visual aesthetics */
}
.timebot-suggestions::-webkit-scrollbar {
display: none;
}
.timebot-suggestions button {
flex-shrink: 0;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #cbd5e1;
padding: 6px 12px;
border-radius: 14px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
}
.timebot-suggestions button:hover {
background: rgba(63, 81, 181, 0.15);
border-color: #3F51B5;
color: white;
transform: translateY(-1px);
}
/* Footer */
.timebot-footer {
padding: 12px;
display: flex;
align-items: center;
gap: 8px;
background: rgba(32, 33, 36, 0.98);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.timebot-input {
flex: 1;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
color: white;
padding: 10px 14px;
border-radius: 12px;
font-size: 13px;
outline: none;
transition: all 0.2s;
}
.timebot-input:focus {
border-color: #3F51B5;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
}
.timebot-send-btn {
background: white;
border: none;
border-radius: 10px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.timebot-send-btn:hover {
background: #e3e6ff;
transform: scale(1.05);
}
.timebot-send-btn:disabled {
background: rgba(255, 255, 255, 0.04);
cursor: not-allowed;
transform: none;
}
.timebot-send-btn:disabled ::deep .mud-icon-root {
color: rgba(255, 255, 255, 0.2) !important;
}
timetracker.Client/Components/Layout/MainLayout.razor
+6
View File
@@ -29,6 +29,12 @@
@Body
</MudContainer>
</MudMainContent>
<AuthorizeView>
<Authorized>
<ChatbotWidget />
</Authorized>
</AuthorizeView>
</MudLayout>
@code {
timetracker.Client/Components/Pages/Changelog.razor
+7 -2
View File
@@ -68,12 +68,17 @@
private readonly List<Release> _releases =
[
new("1.3", "09.06.2026", true,
new("1.4", "08.06.2026", true,
[
new("Neu", "Timebot implementiert"),
new("Upgrade", "Security hardening")
]),
new("1.3", "08.06.2026", false,
[
new("Fix", "Browser-Tab hat statischen Text angezeigt und sich nicht dynamisch an die jeweilige Seite angepasst"),
]),
new("1.2", "08.06.2026", true,
new("1.2", "08.06.2026", false,
[
new("Upgrade", "Architektur-Migration auf Hosted Blazor WebAssembly (.NET 10) mit sauberer Projektstruktur (Client, Server, Shared)"),
new("Neu", "Unterstützung für PostgreSQL-Datenbanken als produktive und skalierbare Alternative zu SQLite"),
timetracker.Client/Components/Pages/Login.razor
+3 -1
View File
@@ -106,6 +106,7 @@
@bind-Value="_registerModel.Password"
Required="true"
HelperText="Mindestens 6 Zeichen" />
<input type="text" style="display: none;" tabindex="-1" autocomplete="off" @bind="_honeypot" />
<MudButton ButtonType="ButtonType.Submit"
Variant="Variant.Filled"
Color="Color.Secondary"
@@ -132,6 +133,7 @@
private int _activeTab = 0;
private string? _error;
private bool _loading;
private string _honeypot = "";
private readonly AuthModel _loginModel = new();
private readonly AuthModel _registerModel = new();
@@ -191,7 +193,7 @@
_error = null;
try
{
var (user, error) = await AuthService.RegisterAsync(_registerModel.Username, _registerModel.Password);
var (user, error) = await AuthService.RegisterAsync(_registerModel.Username, _registerModel.Password, _honeypot);
if (user != null)
{
Nav.NavigateTo("/", forceLoad: true);