mirror of
https://github.com/davidkaya/aryx.git
synced 2026-08-27 13:23:57 +02:00
feat: redesign UI for modern look and clean UX
- Refined dark theme with zinc palette and indigo accents - Clean sidebar showing only project/session tree - Moved pattern management to full-screen settings panel - New session modal with project + pattern picker - Modern chat with avatar icons, inline send button, Enter-to-send - Welcome pane when no session is selected - Added lucide-react for consistent iconography - Custom scrollbar styling and auto-resize textarea - Removed clutter: no sidebar pattern list, no verbose headers Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Copilot CLI
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { type KeyboardEvent, useEffect, useRef, useState } from 'react';
|
||||
import { AlertCircle, ArrowUp, Bot, Loader2, User } from 'lucide-react';
|
||||
|
||||
import type { PatternDefinition } from '@shared/domain/pattern';
|
||||
import type { ProjectRecord } from '@shared/domain/project';
|
||||
@@ -14,6 +15,7 @@ interface ChatPaneProps {
|
||||
export function ChatPane({ project, pattern, session, onSend }: ChatPaneProps) {
|
||||
const [input, setInput] = useState('');
|
||||
const transcriptRef = useRef<HTMLDivElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
transcriptRef.current?.scrollTo({
|
||||
@@ -23,117 +25,144 @@ export function ChatPane({ project, pattern, session, onSend }: ChatPaneProps) {
|
||||
}, [session.messages.length]);
|
||||
|
||||
const isBusy = session.status === 'running';
|
||||
const sessionStats = useMemo(
|
||||
() => `${session.messages.length} messages • ${pattern.agents.length} agent${pattern.agents.length === 1 ? '' : 's'}`,
|
||||
[pattern.agents.length, session.messages.length],
|
||||
);
|
||||
|
||||
async function handleSubmit() {
|
||||
const text = input.trim();
|
||||
if (!text || isBusy) return;
|
||||
setInput('');
|
||||
await onSend(text);
|
||||
}
|
||||
|
||||
function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
void handleSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen flex-col">
|
||||
<header className="border-b border-slate-800 px-8 py-6">
|
||||
<div className="flex items-start justify-between gap-6">
|
||||
<div>
|
||||
<div className="text-xs uppercase tracking-[0.22em] text-slate-400">{project.name}</div>
|
||||
<h2 className="mt-2 text-2xl font-semibold text-white">{session.title}</h2>
|
||||
<p className="mt-2 text-sm text-slate-400">
|
||||
Pattern: <span className="font-medium text-slate-200">{pattern.name}</span> • Mode:{' '}
|
||||
<span className="font-medium text-slate-200">{pattern.mode}</span>
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-slate-500">{sessionStats}</p>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-full px-3 py-1.5 text-xs font-medium uppercase tracking-wide ${
|
||||
session.status === 'error'
|
||||
? 'bg-rose-500/15 text-rose-200'
|
||||
: session.status === 'running'
|
||||
? 'bg-sky-500/15 text-sky-200'
|
||||
: 'bg-slate-800 text-slate-200'
|
||||
}`}
|
||||
>
|
||||
{session.status}
|
||||
</div>
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Header */}
|
||||
<header className="flex items-center justify-between border-b border-[var(--color-border)] px-6 py-3">
|
||||
<div className="min-w-0">
|
||||
<h2 className="truncate text-sm font-semibold text-zinc-100">{session.title}</h2>
|
||||
<p className="mt-0.5 truncate text-[12px] text-zinc-500">
|
||||
{project.name} · {pattern.name} · {pattern.mode}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{session.status === 'running' && (
|
||||
<div className="flex items-center gap-1.5 text-[12px] text-blue-400">
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
Running
|
||||
</div>
|
||||
)}
|
||||
{session.status === 'error' && (
|
||||
<div className="flex items-center gap-1.5 text-[12px] text-red-400">
|
||||
<AlertCircle className="size-3.5" />
|
||||
Error
|
||||
</div>
|
||||
)}
|
||||
{session.status === 'idle' && session.messages.length > 0 && (
|
||||
<span className="text-[12px] text-zinc-600">
|
||||
{session.messages.length} message{session.messages.length === 1 ? '' : 's'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
className="flex-1 overflow-y-auto px-8 py-6"
|
||||
ref={transcriptRef}
|
||||
>
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto" ref={transcriptRef}>
|
||||
{session.messages.length === 0 ? (
|
||||
<div className="rounded-3xl border border-dashed border-slate-800 bg-slate-900/60 px-6 py-8 text-sm text-slate-400">
|
||||
Start the conversation to launch this orchestration against <span className="font-medium text-slate-200">{project.path}</span>.
|
||||
<div className="flex h-full flex-col items-center justify-center gap-2 px-6 text-center">
|
||||
<Bot className="size-10 text-zinc-800" />
|
||||
<p className="text-sm text-zinc-500">
|
||||
Send a message to start the conversation
|
||||
</p>
|
||||
<p className="text-[12px] text-zinc-700">
|
||||
Using <span className="text-zinc-500">{pattern.name}</span> in{' '}
|
||||
<span className="text-zinc-500">{project.name}</span>
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mx-auto flex max-w-4xl flex-col gap-4">
|
||||
{session.messages.map((message) => {
|
||||
const isUser = message.role === 'user';
|
||||
return (
|
||||
<div
|
||||
className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}
|
||||
key={message.id}
|
||||
>
|
||||
<div
|
||||
className={`max-w-3xl rounded-3xl px-5 py-4 shadow-sm ${
|
||||
isUser
|
||||
? 'bg-sky-500 text-slate-950'
|
||||
: 'border border-slate-800 bg-slate-900/85 text-slate-100'
|
||||
}`}
|
||||
>
|
||||
<div className={`text-xs font-semibold uppercase tracking-wide ${isUser ? 'text-slate-800' : 'text-slate-400'}`}>
|
||||
{message.authorName}
|
||||
<div className="mx-auto max-w-3xl px-6 py-4">
|
||||
<div className="space-y-1">
|
||||
{session.messages.map((message) => {
|
||||
const isUser = message.role === 'user';
|
||||
return (
|
||||
<div className="group py-3" key={message.id}>
|
||||
<div className="flex gap-3">
|
||||
<div
|
||||
className={`mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full ${
|
||||
isUser
|
||||
? 'bg-indigo-600 text-white'
|
||||
: 'bg-zinc-800 text-zinc-400'
|
||||
}`}
|
||||
>
|
||||
{isUser ? <User className="size-3.5" /> : <Bot className="size-3.5" />}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="mb-1 text-[12px] font-medium text-zinc-400">
|
||||
{message.authorName}
|
||||
</div>
|
||||
<div className="whitespace-pre-wrap text-[14px] leading-relaxed text-zinc-200">
|
||||
{message.content}
|
||||
</div>
|
||||
{message.pending && (
|
||||
<div className="mt-2 flex items-center gap-1.5 text-[12px] text-zinc-500">
|
||||
<Loader2 className="size-3 animate-spin" />
|
||||
Generating...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 whitespace-pre-wrap text-sm leading-6">{message.content}</div>
|
||||
{message.pending ? (
|
||||
<div className="mt-3 text-xs text-slate-400">Streaming…</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-800 px-8 py-5">
|
||||
{session.lastError ? (
|
||||
<div className="mb-4 rounded-xl border border-rose-500/40 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">
|
||||
{session.lastError}
|
||||
{/* Input area */}
|
||||
<div className="border-t border-[var(--color-border)] px-6 py-4">
|
||||
{session.lastError && (
|
||||
<div className="mb-3 flex items-start gap-2 rounded-lg bg-red-500/10 px-3 py-2 text-[13px] text-red-300">
|
||||
<AlertCircle className="mt-0.5 size-4 shrink-0 text-red-400" />
|
||||
<span>{session.lastError}</span>
|
||||
</div>
|
||||
) : null}
|
||||
)}
|
||||
|
||||
<form
|
||||
className="mx-auto flex max-w-4xl flex-col gap-3"
|
||||
onSubmit={async (event) => {
|
||||
event.preventDefault();
|
||||
if (!input.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextInput = input;
|
||||
setInput('');
|
||||
await onSend(nextInput);
|
||||
}}
|
||||
>
|
||||
<textarea
|
||||
className="min-h-28 w-full rounded-3xl border border-slate-700 bg-slate-900 px-5 py-4 text-sm text-slate-100 shadow-inner outline-none transition focus:border-sky-500"
|
||||
disabled={isBusy}
|
||||
onChange={(event) => setInput(event.target.value)}
|
||||
placeholder="Ask the selected orchestration to reason about the current project..."
|
||||
value={input}
|
||||
/>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<p className="text-xs text-slate-500">
|
||||
The .NET sidecar replays the saved transcript so sessions can resume after app restart.
|
||||
</p>
|
||||
<div className="mx-auto max-w-3xl">
|
||||
<div className="relative rounded-xl border border-zinc-700 bg-zinc-900 transition-colors focus-within:border-indigo-500/50">
|
||||
<textarea
|
||||
className="auto-resize-textarea block w-full resize-none bg-transparent px-4 py-3 pr-12 text-[14px] text-zinc-100 placeholder-zinc-600 outline-none"
|
||||
disabled={isBusy}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={isBusy ? 'Waiting for response...' : 'Message...'}
|
||||
ref={textareaRef}
|
||||
rows={1}
|
||||
value={input}
|
||||
/>
|
||||
<button
|
||||
className="rounded-full bg-sky-500 px-5 py-2.5 text-sm font-semibold text-slate-950 hover:bg-sky-400 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
className={`absolute bottom-2 right-2 flex size-8 items-center justify-center rounded-lg transition ${
|
||||
input.trim() && !isBusy
|
||||
? 'bg-indigo-600 text-white hover:bg-indigo-500'
|
||||
: 'bg-zinc-800 text-zinc-600'
|
||||
}`}
|
||||
disabled={isBusy || !input.trim()}
|
||||
type="submit"
|
||||
onClick={() => void handleSubmit()}
|
||||
type="button"
|
||||
>
|
||||
{isBusy ? 'Running…' : 'Send'}
|
||||
{isBusy ? (
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
) : (
|
||||
<ArrowUp className="size-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user