Skip to content

feat: multi-upload drag-and-drop, delete cascade, dark mode fix, chat readability #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kaiohz merged 1 commit into from
Jul 23, 2026
Merged

feat: multi-upload drag-and-drop, delete cascade, dark mode fix, chat readability #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 135 additions & 23 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 19 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,27 @@
<!doctype html>
<html lang="en">
<html lang="fr">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
<script>
(function () {
try {
var t = localStorage.getItem("composable-ui-theme");
if (t === "light") {
document.documentElement.classList.remove("dark");
} else {
document.documentElement.classList.add("dark");
}
} catch (e) {
document.documentElement.classList.add("dark");
}
})();
</script>
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<title>Composable UI</title>
</head>
<body>
Expand Down
2 changes: 2 additions & 0 deletions src/application/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Suspense, lazy } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import ChatPage from "@/application/pages/ChatPage";
import SettingsPage from "@/application/pages/SettingsPage";

// Lazy-load secondary routes for code-splitting / smaller initial bundle.
const AgentsPage = lazy(() => import("@/application/pages/AgentsPage"));
Expand All @@ -23,6 +24,7 @@ function App() {
<Route path="/agents" element={<AgentsPage />} />
<Route path="/chat/:threadId?" element={<ChatPage />} />
<Route path="/rag" element={<RagPage />} />
<Route path="/settings" element={<SettingsPage />} />
</Routes>
);
}
Expand Down
97 changes: 42 additions & 55 deletions src/application/components/agent/AgentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,59 @@
import { Bot, Settings, Trash2 } from "lucide-react";
import type { AgentConfigMetadata } from "@/domain/entities/agent/agentConfigMetadata";
import StatusBadge from "@/application/components/shared/StatusBadge";
import { Button } from "@/application/components/ui/button";

interface AgentCardProps {
readonly agent: AgentConfigMetadata;
readonly onConfigure: (name: string) => void;
readonly onDelete?: (name: string) => void;
}

const AGENT_ICONS: Record<string, string> = {
a: "smart_toy",
b: "psychology",
c: "code",
d: "data_object",
e: "engineering",
f: "functions",
g: "generating_tokens",
h: "hub",
i: "integration_instructions",
j: "join",
k: "key",
l: "lightbulb",
m: "model_training",
n: "neurology",
o: "offline_bolt",
p: "precision_manufacturing",
q: "query_stats",
r: "robot_2",
s: "schema",
t: "terminal",
u: "upgrade",
v: "verified",
w: "workspaces",
x: "extension",
y: "yield",
z: "zoom_in",
};

function getAgentIcon(name: string): string {
const firstLetter = name.charAt(0).toLowerCase();
return AGENT_ICONS[firstLetter] ?? "smart_toy";
}

export default function AgentCard({ agent, onConfigure }: Readonly<AgentCardProps>) {
export default function AgentCard({ agent, onConfigure, onDelete }: Readonly<AgentCardProps>) {
return (
<div className="bg-surface-container-lowest rounded-xl p-8 ambient-shadow hover:translate-y-[-2px] transition-transform duration-300">
{/* Header: icon + status */}
<div className="flex items-center justify-between mb-6">
<div className="w-12 h-12 rounded-xl bg-primary-container flex items-center justify-center">
<span className="material-symbols-outlined text-white text-2xl">
{getAgentIcon(agent.name)}
</span>
<div
data-od-id={`agent-card-${agent.name}`}
className="group relative flex flex-col gap-3 border border-border bg-surface p-4 block-shadow-raised transition-[border-color,box-shadow,transform] duration-base ease-standard hover:-translate-y-0.5 hover:border-accent"
>
<div className="flex items-center justify-between">
<div
className="flex h-12 w-12 items-center justify-center border border-border bg-surface-warm font-display text-lg text-accent"
aria-hidden="true"
>
<Bot className="h-6 w-6" />
</div>
<StatusBadge status={agent.is_builtin ? "Active" : "Standby"} />
</div>

{/* Name */}
<h3 className="font-headline text-2xl font-bold text-on-surface mb-2">{agent.name}</h3>
<h3 className="min-w-0 truncate font-display text-lg uppercase tracking-[0.06em] text-fg">
{agent.name}
</h3>
<p className="font-mono text-xs text-muted">{agent.model}</p>

{/* Model */}
<p className="text-sm text-on-surface-variant mb-8">{agent.model}</p>

{/* Configure link */}
<button
type="button"
onClick={() => onConfigure(agent.name)}
className="flex items-center gap-2 text-secondary-brand font-headline text-xs font-bold uppercase tracking-widest hover:opacity-80 transition-opacity"
>
Configure <span className="material-symbols-outlined text-base">arrow_forward</span>
</button>
<div className="mt-auto flex items-center gap-2 border-t border-border-soft pt-2">
<Button
type="button"
variant="secondary"
size="sm"
onClick={() => onConfigure(agent.name)}
data-od-id={`agent-configure-${agent.name}`}
>
<Settings className="h-4 w-4" aria-hidden="true" />
Configure
</Button>
{onDelete && (
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => onDelete(agent.name)}
aria-label={`Delete ${agent.name}`}
className="ml-auto h-8 w-8"
>
<Trash2 className="h-4 w-4" aria-hidden="true" />
</Button>
)}
</div>
</div>
);
}
Loading
Loading