feat: BooCode 2.0 UI — Ember theme, brand banner, coder tabs, model-attribution chips
- Ember theme (Obsidian charcoal + #ff7a18 orange), now DEFAULT_THEME_ID; server theme_id whitelist gains 'ember' - Brand banner: transparent Westie mascot + >_BooCode wordmark, big/edge-to-edge (flood-filled to transparency + cropped) - Coder panes are multi-tab: + opens a BooCode tab, split opens a pane (shared ChatTabBar via tabKind + createCoderTab; closeOtherTabs/tab-numbering extended to coder) - Model-attribution: new messages.model column stamped at finalizeCompletion (BooChat/native coder) + dispatcher assistant-row creation (external coder); surfaced via view + wire types + live frame; rendered as a subtle shortened-name chip (shortenModelName) - Composer Web toggle moved into a boxed focus-ringed input; glowing accent dot on tool rows - Claude SDK follow-ups (1M context, follow-up-message fix, collapsed thinking/tool chips) + CLAUDE_SDK_BACKEND=1 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,14 +1,8 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, type DragEvent, type KeyboardEvent } from 'react';
|
||||
import { Check, ListPlus, Plus, Send, Square } from 'lucide-react';
|
||||
import { Globe, ListPlus, Send, Square } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import {
|
||||
flattenToMessage,
|
||||
inferLanguage,
|
||||
@@ -598,39 +592,9 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
|
||||
onChange={onAgentChange}
|
||||
/>
|
||||
)}
|
||||
{sessionId && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Quick toggles"
|
||||
title="Quick toggles"
|
||||
className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
>
|
||||
<Plus className="size-3.5" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuItem
|
||||
onSelect={async () => {
|
||||
// v1.9: tri-state collapses to two on the wire when toggled
|
||||
// here. null (inherit) treated as off; click flips to true.
|
||||
// To restore "inherit" the user opens SettingsPane.
|
||||
const next = webSearchEnabled === true ? false : true;
|
||||
try {
|
||||
await api.sessions.update(sessionId, { web_search_enabled: next });
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'failed to toggle web search');
|
||||
}
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check className={`size-3 ${webSearchEnabled === true ? 'opacity-100' : 'opacity-0'}`} />
|
||||
Enable web search and fetch
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
{/* BooCode 2.0: the web-search toggle moved out of this top toolbar
|
||||
into the composer box's bottom controls row (the Web pill below),
|
||||
leaving the top row as just the agent picker + context bar. */}
|
||||
{/* v1.11.5.1: ContextBar fills the remaining horizontal space.
|
||||
`flex-1 min-w-0` is set inside the component. Mounts only when
|
||||
the caller passes `messages` so older call sites (without the
|
||||
@@ -640,54 +604,86 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="px-4 py-3 flex items-end gap-2">
|
||||
<Textarea
|
||||
ref={textareaRef}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
onKeyDown={onKeyDown}
|
||||
onPaste={onPaste}
|
||||
placeholder={
|
||||
isMobile
|
||||
? 'Ask about this project. Tap send to submit.'
|
||||
: 'Ask about this project. Enter to send · Shift+Enter for newline.'
|
||||
}
|
||||
disabled={disabled || busy}
|
||||
rows={3}
|
||||
className="resize-none min-h-[68px] max-h-[240px]"
|
||||
/>
|
||||
{(() => {
|
||||
const hasContent = value.trim().length > 0 || attachments.length > 0;
|
||||
// While generating with an empty draft, the button stops generation.
|
||||
if (generating && onStop && !hasContent) {
|
||||
return (
|
||||
<Button
|
||||
onClick={() => void onStop()}
|
||||
size="icon-lg"
|
||||
variant="outline"
|
||||
aria-label="Stop generating"
|
||||
title="Stop generating"
|
||||
{/* BooCode 2.0 composer: textarea + a bottom controls row live INSIDE one
|
||||
bordered, focus-ringed message box (Refreshed direction). */}
|
||||
<div className="px-4 py-3">
|
||||
<div className="rounded-xl border bg-card transition-colors focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/15">
|
||||
<Textarea
|
||||
ref={textareaRef}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
onKeyDown={onKeyDown}
|
||||
onPaste={onPaste}
|
||||
placeholder={
|
||||
isMobile
|
||||
? 'Ask about this project. Tap send to submit.'
|
||||
: 'Ask about this project. Enter to send · Shift+Enter for newline.'
|
||||
}
|
||||
disabled={disabled || busy}
|
||||
rows={3}
|
||||
className="resize-none min-h-[56px] max-h-[240px] border-0 bg-transparent px-3 pt-2.5 shadow-none focus-visible:ring-0 dark:bg-transparent"
|
||||
/>
|
||||
{/* bottom controls row: Web toggle on the left, Send/Stop on the right */}
|
||||
<div className="flex items-center gap-1.5 px-2 pb-2 pt-0.5">
|
||||
{sessionId && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
// v1.9 tri-state collapses to two on toggle; null (inherit) → on.
|
||||
const next = webSearchEnabled === true ? false : true;
|
||||
try {
|
||||
await api.sessions.update(sessionId, { web_search_enabled: next });
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'failed to toggle web search');
|
||||
}
|
||||
}}
|
||||
aria-pressed={webSearchEnabled === true}
|
||||
title="Web search & fetch"
|
||||
className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs transition-colors max-md:min-h-[36px] ${
|
||||
webSearchEnabled === true
|
||||
? 'border-primary/40 bg-primary/10 text-primary'
|
||||
: 'border-border text-muted-foreground hover:bg-muted hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
<Square className="fill-current size-3.5" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
// With a draft, submit. While generating the caller queues it, so the
|
||||
// button reads as Queue; otherwise it's a normal Send.
|
||||
const queueing = !!generating && hasContent;
|
||||
return (
|
||||
<Button
|
||||
onClick={() => void submit()}
|
||||
disabled={disabled || busy || !hasContent}
|
||||
size="icon-lg"
|
||||
variant={queueing ? 'secondary' : 'default'}
|
||||
aria-label={queueing ? 'Queue message' : 'Send'}
|
||||
title={queueing ? 'Queue message' : 'Send'}
|
||||
>
|
||||
{queueing ? <ListPlus /> : <Send />}
|
||||
</Button>
|
||||
);
|
||||
})()}
|
||||
<Globe className="size-3.5" />
|
||||
Web
|
||||
</button>
|
||||
)}
|
||||
<div className="flex-1" />
|
||||
{(() => {
|
||||
const hasContent = value.trim().length > 0 || attachments.length > 0;
|
||||
// While generating with an empty draft, the button stops generation.
|
||||
if (generating && onStop && !hasContent) {
|
||||
return (
|
||||
<Button
|
||||
onClick={() => void onStop()}
|
||||
size="icon"
|
||||
variant="outline"
|
||||
aria-label="Stop generating"
|
||||
title="Stop generating"
|
||||
>
|
||||
<Square className="fill-current size-3.5" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
// With a draft, submit. While generating the caller queues it, so the
|
||||
// button reads as Queue; otherwise it's a normal Send.
|
||||
const queueing = !!generating && hasContent;
|
||||
return (
|
||||
<Button
|
||||
onClick={() => void submit()}
|
||||
disabled={disabled || busy || !hasContent}
|
||||
size="icon"
|
||||
variant={queueing ? 'secondary' : 'default'}
|
||||
aria-label={queueing ? 'Queue message' : 'Send'}
|
||||
title={queueing ? 'Queue message' : 'Send'}
|
||||
>
|
||||
{queueing ? <ListPlus /> : <Send />}
|
||||
</Button>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AttachmentPreviewModal
|
||||
|
||||
Reference in New Issue
Block a user