hermes/hermes-os
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Improve chat UX: thinking indicator, pending message, 5min timeout

Browse Source
This commit is contained in:
Hermes
2026-04-09 21:15:11 -05:00
parent 9d8c338a67
commit 893c74ed38
2 changed files with 50 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/api/sessions/[id]/chat/route.ts
+8 -2
View File
@@ -6,17 +6,23 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
const { id } = await params;
const body = await req.json();
try {
// Agent chat can take a while — 5 minute timeout
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 300_000);
const res = await fetch(BACKEND + "/api/sessions/" + id + "/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
signal: controller.signal,
});
clearTimeout(timeout);
const data = await res.text();
return new NextResponse(data, {
status: res.status,
headers: { "content-type": "application/json" },
});
} catch {
return NextResponse.json({ error: "backend unreachable" }, { status: 502 });
} catch (e) {
const msg = e instanceof Error ? e.message : "backend unreachable";
return NextResponse.json({ error: msg }, { status: 502 });
}
}
app/history/[id]/page.tsx
+42 -15
View File
@@ -1,26 +1,29 @@
"use client";
import { use, useState, useRef, useEffect } from "react";
import { ArrowLeft, Send } from "lucide-react";
import { use, useState, useRef } from "react";
import { ArrowLeft, Send, Loader2 } from "lucide-react";
import Link from "next/link";
import { useSession, useMessages } from "@/lib/hooks";
import { timeAgo, formatTokens, platformBadgeClass } from "@/lib/utils";
import { MessageBubble } from "@/components/MessageBubble";
import { useQueryClient } from "@tanstack/react-query";
export default function SessionReplayPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = use(params);
const qc = useQueryClient();
const { data: sessionData } = useSession(id);
const { data: messagesData, isLoading, refetch } = useMessages(id);
const { data: messagesData, isLoading } = useMessages(id);
const [input, setInput] = useState("");
const [sending, setSending] = useState(false);
const [pendingMsg, setPendingMsg] = useState<string | null>(null);
const inputRef = useRef<HTMLInputElement>(null);
const session = sessionData?.session;
const messages = messagesData?.items || [];
const visibleMessages = messages.filter(
(m) => m.role === "user" || m.role === "assistant"
).reverse(); // newest first
const visibleMessages = messages
.filter((m) => m.role === "user" || m.role === "assistant")
.reverse();
const toolResults = new Map<string, { name: string; content: string }>();
for (const m of messages) {
@@ -34,20 +37,23 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
const sendMessage = async () => {
if (!input.trim() || sending) return;
const msg = input.trim();
setInput("");
setSending(true);
setPendingMsg(msg);
try {
await fetch("/api/sessions/" + id + "/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: input.trim() }),
body: JSON.stringify({ message: msg }),
});
setInput("");
// Poll for response
setTimeout(() => refetch(), 2000);
setTimeout(() => refetch(), 5000);
setTimeout(() => refetch(), 10000);
} catch {}
setPendingMsg(null);
setSending(false);
qc.invalidateQueries({ queryKey: ["messages", id] });
qc.invalidateQueries({ queryKey: ["session", id] });
};
return (
@@ -82,7 +88,7 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && sendMessage()}
placeholder="Send a message..."
placeholder={sending ? "Hermes is thinking..." : "Send a message..."}
className="flex-1 px-4 py-2.5 rounded-xl text-sm outline-none transition-colors"
style={{
background: "var(--bg-raised)",
@@ -97,7 +103,7 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
className="px-3 rounded-xl transition-opacity disabled:opacity-20"
style={{ background: "var(--accent)", color: "white" }}
>
<Send size={16} />
{sending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
</button>
</div>
@@ -113,10 +119,31 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
</div>
) : (
<div className="space-y-2">
{/* Pending thinking indicator */}
{sending && (
<div className="flex justify-start">
<div className="rounded-2xl px-3.5 py-2.5" style={{ background: "var(--bg-raised)" }}>
<div className="flex items-center gap-2 text-[13px]" style={{ color: "var(--text-2)" }}>
<Loader2 size={14} className="animate-spin" style={{ color: "var(--accent)" }} />
Thinking...
</div>
</div>
</div>
)}
{/* Pending user message */}
{pendingMsg && (
<div className="flex justify-end">
<div className="max-w-[88%] rounded-2xl px-3.5 py-2.5 opacity-60" style={{ background: "var(--accent)", color: "white" }}>
<p className="text-[14px]">{pendingMsg}</p>
</div>
</div>
)}
{visibleMessages.map((m) => (
<MessageBubble key={m.id} message={m} toolResults={toolResults} />
))}
{visibleMessages.length === 0 && (
{visibleMessages.length === 0 && !sending && (
<p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>
Empty session
</p>