chore: initial import
This commit is contained in:
chelsea
804
web_App.tsx
Normal file
804
web_App.tsx
Normal file
@@ -0,0 +1,804 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent, type KeyboardEvent } from "react";
|
||||
import "./App.css";
|
||||
|
||||
type MessageRole = "user" | "assistant" | "system";
|
||||
type MessageStatus = "sent" | "pending" | "error";
|
||||
|
||||
type Message = {
|
||||
id: string;
|
||||
role: MessageRole;
|
||||
text: string;
|
||||
timestamp: number;
|
||||
status?: MessageStatus;
|
||||
};
|
||||
|
||||
type ProgressEntry = {
|
||||
timestamp: string;
|
||||
status: string;
|
||||
note?: string | null;
|
||||
};
|
||||
|
||||
type ActionItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
cadence: string;
|
||||
details?: string | null;
|
||||
interval_minutes?: number | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
progress: ProgressEntry[];
|
||||
};
|
||||
|
||||
type ProgressDraft = {
|
||||
status: string;
|
||||
note: string;
|
||||
};
|
||||
|
||||
type PromptOption = {
|
||||
label: string;
|
||||
description: string;
|
||||
category: string;
|
||||
promptName: string;
|
||||
accent: string;
|
||||
};
|
||||
|
||||
const promptOptions: PromptOption[] = [
|
||||
{
|
||||
label: "General support",
|
||||
description: "Quick welcome / encouragement.",
|
||||
category: "general",
|
||||
promptName: "welcome",
|
||||
accent: "#38bdf8",
|
||||
},
|
||||
{
|
||||
label: "Plan a thing",
|
||||
description: "Break work into small steps.",
|
||||
category: "planning",
|
||||
promptName: "breakdown",
|
||||
accent: "#f472b6",
|
||||
},
|
||||
{
|
||||
label: "Schedule reminder",
|
||||
description: "Confirm timing + emit JSON.",
|
||||
category: "reminders",
|
||||
promptName: "schedule",
|
||||
accent: "#c084fc",
|
||||
},
|
||||
];
|
||||
|
||||
const contextSuggestions = [
|
||||
"Take a note that I'm experimenting with DeepSeek.",
|
||||
"Help me plan my inbox zero session for 30 min.",
|
||||
"Remind me in 10 minutes to stand up and stretch.",
|
||||
"Break down cleaning my kitchen tonight.",
|
||||
"Draft a gentle check-in for future-me about therapy homework.",
|
||||
];
|
||||
|
||||
const storageKey = "adhd-conversation-cache";
|
||||
const maxContextLength = 1500;
|
||||
const defaultProgress: ProgressDraft = { status: "update", note: "" };
|
||||
|
||||
const safeId = () => {
|
||||
if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
|
||||
return crypto.randomUUID();
|
||||
}
|
||||
return `id-${Math.random().toString(36).slice(2)}`;
|
||||
};
|
||||
|
||||
const createSystemMessage = (): Message => ({
|
||||
id: safeId(),
|
||||
role: "system",
|
||||
timestamp: Date.now(),
|
||||
text: "✨ Fresh chat. Pick a mode above, type anything below, and I'll relay it to ADHDbot.",
|
||||
});
|
||||
|
||||
const shortDateFormatter = new Intl.DateTimeFormat("en", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
});
|
||||
|
||||
function App() {
|
||||
const [userId, setUserId] = useState("chelsea");
|
||||
const [modeIndex, setModeIndex] = useState(0);
|
||||
const [context, setContext] = useState("");
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [actions, setActions] = useState<ActionItem[]>([]);
|
||||
const [actionsLoading, setActionsLoading] = useState(false);
|
||||
const [actionsError, setActionsError] = useState<string | null>(null);
|
||||
const [newActionTitle, setNewActionTitle] = useState("");
|
||||
const [newActionCadence, setNewActionCadence] = useState("daily");
|
||||
const [newActionInterval, setNewActionInterval] = useState("");
|
||||
const [newActionDetails, setNewActionDetails] = useState("");
|
||||
const [progressDrafts, setProgressDrafts] = useState<Record<string, ProgressDraft>>({});
|
||||
const [messages, setMessages] = useState<Message[]>(() => {
|
||||
if (typeof window === "undefined") {
|
||||
return [createSystemMessage()];
|
||||
}
|
||||
try {
|
||||
const cached = window.localStorage.getItem(storageKey);
|
||||
if (cached) {
|
||||
const parsed = JSON.parse(cached) as Message[];
|
||||
if (Array.isArray(parsed) && parsed.length) {
|
||||
return parsed;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
return [createSystemMessage()];
|
||||
});
|
||||
const [isOnline, setIsOnline] = useState(() => (typeof navigator === "undefined" ? true : navigator.onLine));
|
||||
const [lastRefreshedAt, setLastRefreshedAt] = useState<number | null>(null);
|
||||
|
||||
const selectedPrompt = useMemo(() => promptOptions[modeIndex], [modeIndex]);
|
||||
const conversationRef = useRef<HTMLDivElement | null>(null);
|
||||
const composerRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
|
||||
const charCount = context.length;
|
||||
const isOverLimit = charCount > maxContextLength;
|
||||
const canSend = Boolean(context.trim()) && !isSending && !isOverLimit;
|
||||
|
||||
const loadProgressDraft = useCallback(
|
||||
(actionId: string): ProgressDraft => {
|
||||
return progressDrafts[actionId] ?? defaultProgress;
|
||||
},
|
||||
[progressDrafts],
|
||||
);
|
||||
|
||||
const fetchActions = useCallback(
|
||||
async (targetUserId: string) => {
|
||||
if (!targetUserId) {
|
||||
return;
|
||||
}
|
||||
setActionsLoading(true);
|
||||
setActionsError(null);
|
||||
try {
|
||||
const response = await fetch(`/api/users/${targetUserId}/actions`, {
|
||||
credentials: "include",
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch actions: ${response.status}`);
|
||||
}
|
||||
const data = (await response.json()) as { action_items: ActionItem[] };
|
||||
setActions(data.action_items ?? []);
|
||||
setProgressDrafts({});
|
||||
setLastRefreshedAt(Date.now());
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setActionsError("Couldn't load action items.");
|
||||
} finally {
|
||||
setActionsLoading(false);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const actionSummary = useMemo(() => {
|
||||
if (!actions.length) {
|
||||
return { activeCount: 0, totalProgress: 0, lastUpdated: null as number | null };
|
||||
}
|
||||
let lastUpdated: number | null = null;
|
||||
let totalProgress = 0;
|
||||
actions.forEach((action) => {
|
||||
const updated = Date.parse(action.updated_at);
|
||||
if (!Number.isNaN(updated) && (lastUpdated === null || updated > lastUpdated)) {
|
||||
lastUpdated = updated;
|
||||
}
|
||||
totalProgress += action.progress?.length ?? 0;
|
||||
});
|
||||
return { activeCount: actions.length, totalProgress, lastUpdated };
|
||||
}, [actions]);
|
||||
|
||||
const conversationSummary = useMemo(() => {
|
||||
const assistantTurns = messages.filter((msg) => msg.role === "assistant").length;
|
||||
const userTurns = messages.filter((msg) => msg.role === "user").length;
|
||||
const lastReply = messages.length ? messages[messages.length - 1]?.timestamp : null;
|
||||
return {
|
||||
turns: assistantTurns + userTurns,
|
||||
lastReply,
|
||||
};
|
||||
}, [messages]);
|
||||
|
||||
const formattedActionUpdate = actionSummary.lastUpdated ? shortDateFormatter.format(actionSummary.lastUpdated) : "No updates yet";
|
||||
const formattedRefresh = lastRefreshedAt ? shortDateFormatter.format(lastRefreshedAt) : "Not synced yet";
|
||||
const formattedLastReply = conversationSummary.lastReply ? shortDateFormatter.format(conversationSummary.lastReply) : "—";
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") {
|
||||
return;
|
||||
}
|
||||
window.localStorage.setItem(storageKey, JSON.stringify(messages));
|
||||
}, [messages]);
|
||||
|
||||
useEffect(() => {
|
||||
conversationRef.current?.scrollTo({
|
||||
top: conversationRef.current.scrollHeight,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}, [messages, isSending]);
|
||||
|
||||
useEffect(() => {
|
||||
if ("serviceWorker" in navigator) {
|
||||
navigator.serviceWorker.register("/sw.js").catch(() => undefined);
|
||||
}
|
||||
document.cookie = "adhd_auth=1; Path=/; Max-Age=31536000; SameSite=Lax";
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchActions(userId);
|
||||
}, [userId, fetchActions]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleOnline = () => setIsOnline(true);
|
||||
const handleOffline = () => setIsOnline(false);
|
||||
window.addEventListener("online", handleOnline);
|
||||
window.addEventListener("offline", handleOffline);
|
||||
return () => {
|
||||
window.removeEventListener("online", handleOnline);
|
||||
window.removeEventListener("offline", handleOffline);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!composerRef.current) {
|
||||
return;
|
||||
}
|
||||
const element = composerRef.current;
|
||||
element.style.height = "auto";
|
||||
const maxHeight = 240;
|
||||
element.style.height = `${Math.min(element.scrollHeight, maxHeight)}px`;
|
||||
}, [context]);
|
||||
|
||||
useEffect(() => {
|
||||
composerRef.current?.focus();
|
||||
}, [modeIndex]);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = `ADHDbot • ${selectedPrompt.label}`;
|
||||
}, [selectedPrompt.label]);
|
||||
|
||||
const sendMessage = useCallback(async () => {
|
||||
if (!context.trim() || isSending) {
|
||||
return;
|
||||
}
|
||||
const trimmedContext = context.trim();
|
||||
const historyPayload = messages
|
||||
.filter((msg) => msg.role !== "system")
|
||||
.map((msg) => ({ role: msg.role, content: msg.text }));
|
||||
|
||||
const payload = {
|
||||
userId,
|
||||
category: selectedPrompt.category,
|
||||
promptName: selectedPrompt.promptName,
|
||||
context: trimmedContext,
|
||||
history: historyPayload,
|
||||
modeHint: selectedPrompt.label,
|
||||
};
|
||||
|
||||
const userMessage: Message = {
|
||||
id: safeId(),
|
||||
role: "user",
|
||||
timestamp: Date.now(),
|
||||
text: trimmedContext,
|
||||
status: "sent",
|
||||
};
|
||||
setMessages((prev) => [...prev, userMessage]);
|
||||
setContext("");
|
||||
setIsSending(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/run", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`Request failed: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
const botMessage: Message = {
|
||||
id: safeId(),
|
||||
role: "assistant",
|
||||
timestamp: Date.now(),
|
||||
text: data.message ?? "(No response returned)",
|
||||
status: "sent",
|
||||
};
|
||||
setMessages((prev) => [...prev, botMessage]);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError("Something went sideways. Double-check the API and try again.");
|
||||
const errorMessage: Message = {
|
||||
id: safeId(),
|
||||
role: "system",
|
||||
timestamp: Date.now(),
|
||||
text: "⚠️ Message failed. Please verify the API service is reachable.",
|
||||
status: "error",
|
||||
};
|
||||
setMessages((prev) => [...prev, errorMessage]);
|
||||
} finally {
|
||||
setIsSending(false);
|
||||
}
|
||||
}, [context, isSending, messages, selectedPrompt.category, selectedPrompt.label, selectedPrompt.promptName, userId]);
|
||||
|
||||
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
void sendMessage();
|
||||
};
|
||||
|
||||
const handleComposerKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
void sendMessage();
|
||||
}
|
||||
};
|
||||
|
||||
const applySuggestion = (suggestion: string) => {
|
||||
setContext((prev) => (prev ? `${prev}\n${suggestion}` : suggestion));
|
||||
composerRef.current?.focus();
|
||||
};
|
||||
|
||||
const handleNewAction = async (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const payload = {
|
||||
title: newActionTitle.trim(),
|
||||
cadence: newActionCadence,
|
||||
interval_minutes: newActionInterval ? Number(newActionInterval) : null,
|
||||
details: newActionDetails.trim() || undefined,
|
||||
};
|
||||
if (!payload.title) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`/api/users/${userId}/actions`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`Action create failed: ${response.status}`);
|
||||
}
|
||||
setNewActionTitle("");
|
||||
setNewActionDetails("");
|
||||
setNewActionInterval("");
|
||||
setNewActionCadence("daily");
|
||||
await fetchActions(userId);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setActionsError("Couldn't save the new action.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteAction = async (actionId: string) => {
|
||||
if (!window.confirm("Remove this action item? This only affects local memory.")) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`/api/users/${userId}/actions/${actionId}`, {
|
||||
method: "DELETE",
|
||||
credentials: "include",
|
||||
});
|
||||
if (!response.ok && response.status !== 204) {
|
||||
throw new Error(`Delete failed: ${response.status}`);
|
||||
}
|
||||
await fetchActions(userId);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setActionsError("Couldn't delete that action.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleProgressDraftChange = (actionId: string, field: keyof ProgressDraft, value: string) => {
|
||||
setProgressDrafts((prev) => {
|
||||
const base = prev[actionId] ?? defaultProgress;
|
||||
return {
|
||||
...prev,
|
||||
[actionId]: {
|
||||
...base,
|
||||
[field]: value,
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const handleProgressSubmit = async (actionId: string) => {
|
||||
const draft = loadProgressDraft(actionId);
|
||||
try {
|
||||
const response = await fetch(`/api/users/${userId}/actions/${actionId}/progress`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({
|
||||
status: draft.status || "update",
|
||||
note: draft.note || undefined,
|
||||
}),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`Progress failed: ${response.status}`);
|
||||
}
|
||||
setProgressDrafts((prev) => ({
|
||||
...prev,
|
||||
[actionId]: defaultProgress,
|
||||
}));
|
||||
await fetchActions(userId);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setActionsError("Couldn't log progress.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetConversation = () => {
|
||||
if (!window.confirm("Start a fresh chat? This only clears your local history.")) {
|
||||
return;
|
||||
}
|
||||
const fresh = createSystemMessage();
|
||||
setMessages([fresh]);
|
||||
if (typeof window !== "undefined") {
|
||||
window.localStorage.setItem(storageKey, JSON.stringify([fresh]));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="chat-shell">
|
||||
<header className="chat-header glass">
|
||||
<div>
|
||||
<p className="eyebrow">ADHD Coach Console</p>
|
||||
<h1>Instant Messaging</h1>
|
||||
<p className="muted">One thread for prompts, plans, notes, and reminders.</p>
|
||||
<div className="status-row">
|
||||
<StatusChip variant={isOnline ? "online" : "offline"} label={isOnline ? "Online" : "Offline"} />
|
||||
<button type="button" className="reset-chat" onClick={handleResetConversation}>
|
||||
Reset chat
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-controls">
|
||||
<label>
|
||||
<span>User</span>
|
||||
<input value={userId} onChange={(e) => setUserId(e.target.value)} autoComplete="off" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Mode</span>
|
||||
<select value={modeIndex} onChange={(e) => setModeIndex(Number(e.target.value))}>
|
||||
{promptOptions.map((option, index) => (
|
||||
<option key={option.promptName} value={index}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<small className="muted tiny">{selectedPrompt.description}</small>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="stat-row">
|
||||
<StatCard label="Current mode" value={selectedPrompt.label} sublabel={selectedPrompt.description} accent={selectedPrompt.accent} />
|
||||
<StatCard label="Action items" value={actionSummary.activeCount} sublabel={`Last update ${formattedActionUpdate}`} />
|
||||
<StatCard label="Progress notes" value={actionSummary.totalProgress} sublabel="All time" />
|
||||
<StatCard label="Chat turns" value={conversationSummary.turns} sublabel={`Last reply ${formattedLastReply}`} />
|
||||
</section>
|
||||
|
||||
<ModeSwitch options={promptOptions} activeIndex={modeIndex} onChange={setModeIndex} />
|
||||
|
||||
<section className="dashboard-grid">
|
||||
<div className="conversation-stack glass">
|
||||
<div className="conversation-header">
|
||||
<div>
|
||||
<p className="eyebrow">Live thread</p>
|
||||
<h2>{selectedPrompt.label}</h2>
|
||||
<p className="muted tiny">{selectedPrompt.description}</p>
|
||||
</div>
|
||||
<span className="muted tiny">User ID: {userId || "—"}</span>
|
||||
</div>
|
||||
<div className="chat-main" ref={conversationRef}>
|
||||
{messages.map((message) => (
|
||||
<MessageBubble key={message.id} message={message} />
|
||||
))}
|
||||
{isSending && <TypingIndicator />}
|
||||
</div>
|
||||
|
||||
<section className="composer-wrapper">
|
||||
<form className="composer-form" onSubmit={handleSubmit}>
|
||||
<textarea
|
||||
ref={composerRef}
|
||||
rows={2}
|
||||
value={context}
|
||||
onChange={(event) => setContext(event.target.value)}
|
||||
onKeyDown={handleComposerKeyDown}
|
||||
placeholder="Type anything… reminders, notes, or planning requests."
|
||||
/>
|
||||
<button type="submit" disabled={!canSend}>
|
||||
{isSending ? "Sending…" : "Send"}
|
||||
</button>
|
||||
</form>
|
||||
<div className="composer-meta">
|
||||
<span>{isOverLimit ? "Trim this message a little." : "Cmd/Ctrl + Enter to send"}</span>
|
||||
<span className={isOverLimit ? "muted danger" : "muted"}>
|
||||
{charCount}/{maxContextLength}
|
||||
</span>
|
||||
</div>
|
||||
{error && <p className="error-banner">{error}</p>}
|
||||
<SuggestionChips suggestions={contextSuggestions} onSelect={applySuggestion} />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className="actions-panel glass">
|
||||
<div className="actions-panel__header">
|
||||
<div>
|
||||
<p className="eyebrow">Daily & Periodic</p>
|
||||
<h2>Action Items</h2>
|
||||
<p className="muted tiny">Last synced {formattedRefresh}</p>
|
||||
</div>
|
||||
<button type="button" onClick={() => fetchActions(userId)} className="refresh-button">
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form className="new-action-form" onSubmit={handleNewAction}>
|
||||
<div className="field-cluster">
|
||||
<label>
|
||||
<span>Title</span>
|
||||
<input value={newActionTitle} onChange={(e) => setNewActionTitle(e.target.value)} required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Cadence</span>
|
||||
<select value={newActionCadence} onChange={(e) => setNewActionCadence(e.target.value)}>
|
||||
<option value="daily">Daily</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="periodic">Periodic</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Interval (min)</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={newActionInterval}
|
||||
onChange={(e) => setNewActionInterval(e.target.value)}
|
||||
placeholder="Optional"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span>Details</span>
|
||||
<textarea
|
||||
rows={2}
|
||||
value={newActionDetails}
|
||||
onChange={(e) => setNewActionDetails(e.target.value)}
|
||||
placeholder="What should you consider when this comes up?"
|
||||
/>
|
||||
</label>
|
||||
<button type="submit">Add Action</button>
|
||||
</form>
|
||||
|
||||
{actionsError && <p className="error-banner">{actionsError}</p>}
|
||||
{actionsLoading ? (
|
||||
<p className="muted">Loading actions…</p>
|
||||
) : actions.length === 0 ? (
|
||||
<p className="muted">No saved actions yet. Add one above to experiment.</p>
|
||||
) : (
|
||||
<ul className="action-list">
|
||||
{actions.map((action) => (
|
||||
<ActionCard
|
||||
key={action.id}
|
||||
action={action}
|
||||
draft={loadProgressDraft(action.id)}
|
||||
onDraftChange={(field, value) => handleProgressDraftChange(action.id, field, value)}
|
||||
onSubmit={() => handleProgressSubmit(action.id)}
|
||||
onDelete={() => handleDeleteAction(action.id)}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type MessageBubbleProps = {
|
||||
message: Message;
|
||||
};
|
||||
|
||||
function MessageBubble({ message }: MessageBubbleProps) {
|
||||
const authorLabel = message.role === "user" ? "You" : message.role === "assistant" ? "ADHDbot" : "System";
|
||||
const timeLabel = new Intl.DateTimeFormat("en", { hour: "numeric", minute: "2-digit" }).format(message.timestamp);
|
||||
return (
|
||||
<article className={`bubble ${message.role}`}>
|
||||
<div className="meta">
|
||||
<span>
|
||||
{authorLabel}
|
||||
{message.status === "pending" && <span className="pill pill--pending">sending…</span>}
|
||||
{message.status === "error" && <span className="pill pill--error">error</span>}
|
||||
</span>
|
||||
<time dateTime={new Date(message.timestamp).toISOString()}>{timeLabel}</time>
|
||||
</div>
|
||||
<p>{message.text}</p>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function TypingIndicator() {
|
||||
return (
|
||||
<article className="bubble assistant ghost">
|
||||
<div className="meta">
|
||||
<span>ADHDbot</span>
|
||||
<span className="muted tiny">drafting…</span>
|
||||
</div>
|
||||
<p className="typing-dots">
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</p>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
type SuggestionChipsProps = {
|
||||
suggestions: string[];
|
||||
onSelect: (value: string) => void;
|
||||
};
|
||||
|
||||
function SuggestionChips({ suggestions, onSelect }: SuggestionChipsProps) {
|
||||
return (
|
||||
<div className="suggestion-row">
|
||||
{suggestions.map((suggestion) => (
|
||||
<button key={suggestion} type="button" onClick={() => onSelect(suggestion)}>
|
||||
{suggestion}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type StatCardProps = {
|
||||
label: string;
|
||||
value: string | number;
|
||||
sublabel?: string;
|
||||
accent?: string;
|
||||
};
|
||||
|
||||
function StatCard({ label, value, sublabel, accent }: StatCardProps) {
|
||||
return (
|
||||
<div className="stat-card glass">
|
||||
<p className="stat-label">{label}</p>
|
||||
<strong style={{ color: accent ?? "#f8fafc" }}>{value}</strong>
|
||||
{sublabel && <small className="muted tiny">{sublabel}</small>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type ModeSwitchProps = {
|
||||
options: PromptOption[];
|
||||
activeIndex: number;
|
||||
onChange: (index: number) => void;
|
||||
};
|
||||
|
||||
function ModeSwitch({ options, activeIndex, onChange }: ModeSwitchProps) {
|
||||
return (
|
||||
<div className="mode-switch">
|
||||
{options.map((option, index) => (
|
||||
<button
|
||||
key={option.promptName}
|
||||
type="button"
|
||||
className={`mode-pill ${index === activeIndex ? "active" : ""}`}
|
||||
onClick={() => onChange(index)}
|
||||
>
|
||||
<span className="mode-pill__label">
|
||||
<span className="mode-pill__dot" style={{ background: option.accent }} />
|
||||
{option.label}
|
||||
</span>
|
||||
<small>{option.description}</small>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type StatusChipProps = {
|
||||
label: string;
|
||||
variant?: "online" | "offline" | "default";
|
||||
};
|
||||
|
||||
function StatusChip({ label, variant = "default" }: StatusChipProps) {
|
||||
return (
|
||||
<span className={`status-chip ${variant}`}>
|
||||
<span className="status-dot" />
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
type ActionCardProps = {
|
||||
action: ActionItem;
|
||||
draft: ProgressDraft;
|
||||
onDraftChange: (field: keyof ProgressDraft, value: string) => void;
|
||||
onSubmit: () => void;
|
||||
onDelete: () => void;
|
||||
};
|
||||
|
||||
function ActionCard({ action, draft, onDraftChange, onSubmit, onDelete }: ActionCardProps) {
|
||||
const recentLabel = lastProgressLabel(action);
|
||||
return (
|
||||
<li className="action-card glass">
|
||||
<div className="action-card__body">
|
||||
<div>
|
||||
<div className="action-card__title-row">
|
||||
<h3>{action.title}</h3>
|
||||
<span className="pill">{action.cadence}</span>
|
||||
</div>
|
||||
<p>{action.details || "No extra details stored."}</p>
|
||||
</div>
|
||||
<dl>
|
||||
<div>
|
||||
<dt>Interval</dt>
|
||||
<dd>{action.interval_minutes ?? "—"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Created</dt>
|
||||
<dd>{formatDateSafe(action.created_at)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Updated</dt>
|
||||
<dd>{formatDateSafe(action.updated_at)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div className="action-card__progress">
|
||||
<p className="muted tiny">
|
||||
<strong>Recent:</strong> {recentLabel}
|
||||
</p>
|
||||
<form
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
onSubmit();
|
||||
}}
|
||||
>
|
||||
<select value={draft.status} onChange={(event) => onDraftChange("status", event.target.value)}>
|
||||
<option value="update">Update</option>
|
||||
<option value="done">Done</option>
|
||||
<option value="skipped">Skipped</option>
|
||||
<option value="blocked">Blocked</option>
|
||||
</select>
|
||||
<input
|
||||
value={draft.note}
|
||||
onChange={(event) => onDraftChange("note", event.target.value)}
|
||||
placeholder="Add note (optional)"
|
||||
/>
|
||||
<button type="submit">Log</button>
|
||||
<button type="button" className="ghost" onClick={onDelete}>
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function lastProgressLabel(item: ActionItem) {
|
||||
if (!item.progress?.length) {
|
||||
return "No progress logged yet.";
|
||||
}
|
||||
const entry = item.progress[item.progress.length - 1];
|
||||
const time = formatDateSafe(entry.timestamp);
|
||||
const note = entry.note ? ` — ${entry.note}` : "";
|
||||
return `${entry.status} @ ${time}${note}`;
|
||||
}
|
||||
|
||||
function formatDateSafe(value: string | number | Date | null | undefined) {
|
||||
if (value === null || value === undefined) {
|
||||
return "—";
|
||||
}
|
||||
const date = value instanceof Date ? value : new Date(value);
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return "—";
|
||||
}
|
||||
return shortDateFormatter.format(date);
|
||||
}
|
||||
|
||||
export default App;
|
||||
Reference in New Issue
Block a user