mirror of
https://github.com/davidkaya/aryx.git
synced 2026-07-24 13:38:43 +02:00
refactor: move Terminal and Prompts pills into composer
Declutter the pill row above the chat composer by relocating Terminal and Prompts pills from the session-config rows into the composer's bottom action bar (left side). The session-config row now only shows session-scoped controls: Tools, Approval, Model, and Thinking. The relocated pills use a lighter, borderless style matching the inner-composer aesthetic alongside the existing Attach, Plan mode, and Send buttons. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -488,14 +488,6 @@ export function ChatPane({
|
||||
{/* Session config pills — tools/approval left, model/reasoning right */}
|
||||
{isSingleAgent && (
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
{onTerminalToggle && (
|
||||
<InlineTerminalPill
|
||||
disabled={false}
|
||||
isOpen={!!terminalOpen}
|
||||
isRunning={!!terminalRunning}
|
||||
onToggle={onTerminalToggle}
|
||||
/>
|
||||
)}
|
||||
{hasConfigurableTools && onUpdateSessionTooling && (
|
||||
<InlineToolsPill
|
||||
disabled={isComposerDisabled}
|
||||
@@ -553,14 +545,6 @@ export function ChatPane({
|
||||
{/* Session config pills — tool & approval controls (multi-agent) */}
|
||||
{!isSingleAgent && (hasConfigurableTools || hasToolCallApproval) && (
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
{onTerminalToggle && (
|
||||
<InlineTerminalPill
|
||||
disabled={false}
|
||||
isOpen={!!terminalOpen}
|
||||
isRunning={!!terminalRunning}
|
||||
onToggle={onTerminalToggle}
|
||||
/>
|
||||
)}
|
||||
{hasConfigurableTools && onUpdateSessionTooling && (
|
||||
<InlineToolsPill
|
||||
disabled={isComposerDisabled}
|
||||
@@ -585,17 +569,6 @@ export function ChatPane({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Prompt files pill */}
|
||||
{!isScratchpad && promptFiles.length > 0 && (
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<InlinePromptPill
|
||||
disabled={isComposerDisabled}
|
||||
onSubmit={(content) => void onSend(content)}
|
||||
promptFiles={promptFiles}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Attachment preview */}
|
||||
{pendingAttachments.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 px-1 pb-2">
|
||||
@@ -643,7 +616,29 @@ export function ChatPane({
|
||||
: 'Message...'
|
||||
}
|
||||
>
|
||||
<div className="absolute bottom-2 right-2 flex items-center gap-1">
|
||||
{/* Bottom action bar: left = shortcuts, right = buttons */}
|
||||
<div className="absolute inset-x-2 bottom-2 flex items-center justify-between pointer-events-none">
|
||||
{/* Left: quick actions */}
|
||||
<div className="flex items-center gap-1.5 pointer-events-auto">
|
||||
{onTerminalToggle && (
|
||||
<InlineTerminalPill
|
||||
disabled={false}
|
||||
isOpen={!!terminalOpen}
|
||||
isRunning={!!terminalRunning}
|
||||
onToggle={onTerminalToggle}
|
||||
/>
|
||||
)}
|
||||
{!isScratchpad && promptFiles.length > 0 && (
|
||||
<InlinePromptPill
|
||||
disabled={isComposerDisabled}
|
||||
onSubmit={(content) => void onSend(content)}
|
||||
promptFiles={promptFiles}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: attach, plan mode, send */}
|
||||
<div className="flex items-center gap-1 pointer-events-auto">
|
||||
{/* Attachment picker */}
|
||||
<button
|
||||
aria-label="Attach image"
|
||||
@@ -732,6 +727,7 @@ export function ChatPane({
|
||||
<ArrowUp className="size-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</MarkdownComposer>
|
||||
{isPlanMode && !isSessionBusy && (
|
||||
|
||||
@@ -677,17 +677,17 @@ export function InlineTerminalPill({
|
||||
return (
|
||||
<button
|
||||
aria-pressed={isOpen}
|
||||
className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition ${
|
||||
className={`inline-flex items-center gap-1 rounded-lg px-2 py-1 text-[11px] font-medium transition ${
|
||||
isOpen
|
||||
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
|
||||
: 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
|
||||
? 'bg-indigo-500/15 text-indigo-300 hover:bg-indigo-500/20'
|
||||
: 'text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300'
|
||||
} disabled:cursor-not-allowed disabled:opacity-50`}
|
||||
disabled={disabled}
|
||||
onClick={onToggle}
|
||||
type="button"
|
||||
>
|
||||
{isRunning && <span className="size-1.5 shrink-0 rounded-full bg-emerald-400" />}
|
||||
<TerminalSquare className="size-2.5" />
|
||||
<TerminalSquare className="size-3" />
|
||||
<span>Terminal</span>
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -66,14 +66,14 @@ export function InlinePromptPill({
|
||||
<button
|
||||
aria-expanded={open}
|
||||
aria-haspopup="listbox"
|
||||
className="inline-flex items-center gap-1 rounded border border-zinc-700 bg-zinc-800 px-2 py-1 text-[11px] font-medium text-zinc-400 transition hover:border-zinc-600 hover:text-zinc-200"
|
||||
className="inline-flex items-center gap-1 rounded-lg px-2 py-1 text-[11px] font-medium text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
|
||||
disabled={disabled}
|
||||
onClick={() => setOpen(!open)}
|
||||
type="button"
|
||||
>
|
||||
<FileText className="size-3" />
|
||||
Prompts
|
||||
<span className="ml-0.5 text-zinc-600">({promptFiles.length})</span>
|
||||
<span className="text-zinc-600">({promptFiles.length})</span>
|
||||
</button>
|
||||
|
||||
{open && !disabled && (
|
||||
|
||||
Reference in New Issue
Block a user