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

Visual redesign, message input, reversed messages, systemd service

Browse Source 
- New visual identity: solid dark cards, purple accent, iOS-like feel
- Session replay: newest messages first, message input with send button
- Chat proxy route for sending messages to sessions
- systemd user service with deploy script
- All pages restyled: Pulse, Memory, History, Skills, Cron, Soul, Config
This commit is contained in:
Hermes
2026-04-09 21:12:14 -05:00
parent 65f71fe995
commit 4f5fde34a3
17 changed files with 428 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/MessageBubble.tsx
+25 -47
View File
@@ -1,7 +1,7 @@
"use client";
import { useState } from "react";
import { Wrench, ChevronDown, ChevronRight, User, Bot } from "lucide-react";
import { Wrench, ChevronDown, ChevronRight } from "lucide-react";
import type { Message, ToolCall } from "@/lib/types";
interface Props {
@@ -15,25 +15,24 @@ function ToolCallBlock({ tc, result }: { tc: ToolCall; result?: { name: string;
try { args = JSON.parse(tc.function.arguments); } catch {}
return (
<div className="mt-2">
<div className="mt-1.5">
<button
onClick={() => setOpen(!open)}
className="flex items-center gap-1.5 text-xs py-1 px-2 rounded-lg active:bg-white/[0.04] transition-all"
style={{ color: "#f59e0b" }}
className="flex items-center gap-1 text-[11px] py-0.5 px-1.5 rounded-md active:bg-white/[0.04]"
style={{ color: "var(--accent)" }}
>
<Wrench size={11} />
<Wrench size={10} />
<span className="font-mono">{tc.function.name}</span>
{open ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
{open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
</button>
{open && (
<div className="mt-1 ml-2 pl-2 border-l border-white/[0.06] space-y-1">
<pre className="text-[11px] text-zinc-500 overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto">
<div className="mt-1 ml-2 pl-2 space-y-1" style={{ borderLeft: "2px solid var(--border)" }}>
<pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto" style={{ color: "var(--text-3)" }}>
{JSON.stringify(args, null, 2)}
</pre>
{result && (
<pre className="text-[11px] text-zinc-600 overflow-x-auto whitespace-pre-wrap max-h-32 overflow-y-auto">
{result.content.slice(0, 500)}
{result.content.length > 500 ? "..." : ""}
<pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-32 overflow-y-auto" style={{ color: "var(--text-3)", opacity: 0.6 }}>
{result.content.slice(0, 500)}{result.content.length > 500 ? "..." : ""}
</pre>
)}
</div>
@@ -56,24 +55,14 @@ export function MessageBubble({ message, toolResults }: Props) {
return (
<div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
<div
className="max-w-[90%] rounded-2xl px-4 py-3"
className="max-w-[88%] rounded-2xl px-3.5 py-2.5"
style={{
background: isUser ? "rgba(56,189,248,0.12)" : "rgba(255,255,255,0.04)",
border: `1px solid ${isUser ? "rgba(56,189,248,0.2)" : "rgba(255,255,255,0.06)"}`,
background: isUser ? "var(--accent)" : "var(--bg-raised)",
color: isUser ? "white" : "var(--text-1)",
}}
>
<div className="flex items-center gap-1.5 mb-1">
{isUser ? (
<User size={12} className="text-sky-400" />
) : (
<Bot size={12} className="text-amber-400" />
)}
<span className="text-[10px] font-medium" style={{ color: isUser ? "#38bdf8" : "#f59e0b" }}>
{isUser ? "You" : "Hermes"}
</span>
</div>
{content && (
<p className="text-sm text-zinc-300 whitespace-pre-wrap leading-relaxed break-words">
<p className="text-[14px] whitespace-pre-wrap leading-relaxed break-words">
{content}
</p>
)}
@@ -81,14 +70,10 @@ export function MessageBubble({ message, toolResults }: Props) {
<div>
{toolCalls.length <= 3 ? (
toolCalls.map((tc) => (
<ToolCallBlock
key={tc.id}
tc={tc}
result={toolResults.get(tc.id)}
/>
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
))
) : (
<CollapsedToolCalls toolCalls={toolCalls} toolResults={toolResults} />
<CollapsedTools toolCalls={toolCalls} toolResults={toolResults} />
)}
</div>
)}
@@ -97,29 +82,22 @@ export function MessageBubble({ message, toolResults }: Props) {
);
}
function CollapsedToolCalls({
toolCalls,
toolResults,
}: {
toolCalls: ToolCall[];
toolResults: Map<string, { name: string; content: string }>;
}) {
function CollapsedTools({ toolCalls, toolResults }: { toolCalls: ToolCall[]; toolResults: Map<string, { name: string; content: string }> }) {
const [open, setOpen] = useState(false);
return (
<div className="mt-2">
<div className="mt-1.5">
<button
onClick={() => setOpen(!open)}
className="flex items-center gap-1.5 text-xs py-1 px-2 rounded-lg active:bg-white/[0.04]"
style={{ color: "#f59e0b" }}
className="flex items-center gap-1 text-[11px] py-0.5 px-1.5 rounded-md active:bg-white/[0.04]"
style={{ color: "var(--accent)" }}
>
<Wrench size={11} />
<Wrench size={10} />
<span>{toolCalls.length} tool calls</span>
{open ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
{open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
</button>
{open &&
toolCalls.map((tc) => (
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
))}
{open && toolCalls.map((tc) => (
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
))}
</div>
);
}