Chat header: remove the agent identity block
Dropped the avatar + name + role + online dot from the top of the chat header (the claw is already shown in the rail and the welcome state). The header now holds only the right-aligned action cluster (and the device/ Close overlay while the panel is open). Removed the now-unused agent prop + Avatar/Agent imports; ChatWorkspace no longer passes agent to the header. Regenerated chat-welcome + computer-home baselines; full suite (37) green. Co-Authored-By: Claude Fable 5 <[email protected]>
This commit is contained in:
co-authored by
Claude Fable 5
parent
8c9b750673
commit
c174c94594
@@ -4,8 +4,6 @@ import Image from "next/image";
|
|||||||
import { List, Monitor, SquarePen, X } from "lucide-react";
|
import { List, Monitor, SquarePen, X } from "lucide-react";
|
||||||
import { useQueryStates } from "nuqs";
|
import { useQueryStates } from "nuqs";
|
||||||
|
|
||||||
import type { Agent } from "@/lib/api/schemas";
|
|
||||||
import { Avatar } from "@/components/ui/Avatar";
|
|
||||||
import { DeviceSizeToggle } from "@/components/computer/DeviceSizeToggle";
|
import { DeviceSizeToggle } from "@/components/computer/DeviceSizeToggle";
|
||||||
import { panelParsers, type DeviceSize } from "@/lib/url/panel-params";
|
import { panelParsers, type DeviceSize } from "@/lib/url/panel-params";
|
||||||
|
|
||||||
@@ -24,40 +22,17 @@ const OPEN_MARGIN: Record<DeviceSize, string> = {
|
|||||||
full: "md:mr-[67%]",
|
full: "md:mr-[67%]",
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Chat header (measured): a two-zone toolbar. The identity sits left; the
|
/** Chat header (measured): the right-aligned action cluster (Slack /
|
||||||
* action cluster (Sessions / New / Computer) is centered as its own group;
|
* Sessions / New / Computer) and, while the panel is open, a separate
|
||||||
* and the device-size toggles + Close are a separate, absolutely-positioned
|
* absolutely-positioned device-size + Close overlay (z-50). No agent
|
||||||
* top-right overlay (z-50, above the Computer panel) shown while the panel
|
* identity block — the claw is already shown in the rail + welcome. */
|
||||||
* is open. Button styling, icons, aria-labels and handlers are unchanged —
|
export function ChatHeader({ onNewSession }: { onNewSession: () => void }) {
|
||||||
* only the grouping/positioning differs. */
|
|
||||||
export function ChatHeader({
|
|
||||||
agent,
|
|
||||||
onNewSession,
|
|
||||||
}: {
|
|
||||||
agent: Agent;
|
|
||||||
onNewSession: () => void;
|
|
||||||
}) {
|
|
||||||
const [{ sessions, app, device }, setParams] = useQueryStates(panelParsers, {
|
const [{ sessions, app, device }, setParams] = useQueryStates(panelParsers, {
|
||||||
shallow: true,
|
shallow: true,
|
||||||
});
|
});
|
||||||
const panelOpen = app !== null;
|
const panelOpen = app !== null;
|
||||||
return (
|
return (
|
||||||
<header className="relative flex h-20 items-center gap-3 px-5">
|
<header className="relative flex h-20 items-center gap-3 px-5">
|
||||||
{/* Identity (left). Capped so it never reaches the centered cluster. */}
|
|
||||||
<Avatar
|
|
||||||
name={agent.name}
|
|
||||||
accent={agent.accent}
|
|
||||||
size="header"
|
|
||||||
shape="squircle"
|
|
||||||
online={agent.status === "online"}
|
|
||||||
/>
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<p className="truncate text-lg font-semibold text-neutral-200">
|
|
||||||
{agent.name}
|
|
||||||
</p>
|
|
||||||
<p className="truncate text-sm text-[#7d7d7d]">{agent.job_title}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Action cluster — right-aligned in flow (measured: ml-auto), the
|
{/* Action cluster — right-aligned in flow (measured: ml-auto), the
|
||||||
chipped action group (Slack / Sessions / New), a vertical
|
chipped action group (Slack / Sessions / New), a vertical
|
||||||
separator, then the coral Computer toggle. When the panel opens it
|
separator, then the coral Computer toggle. When the panel opens it
|
||||||
|
|||||||
@@ -91,7 +91,7 @@ export function ChatWorkspace({
|
|||||||
/>
|
/>
|
||||||
</SlidePanel>
|
</SlidePanel>
|
||||||
<section className="flex min-w-0 flex-1 flex-col">
|
<section className="flex min-w-0 flex-1 flex-col">
|
||||||
<ChatHeader agent={agent} onNewSession={newSession} />
|
<ChatHeader onNewSession={newSession} />
|
||||||
{/* Reserve the panel's width as right-padding so the centered chat
|
{/* Reserve the panel's width as right-padding so the centered chat
|
||||||
column re-centers in the left space and never hides behind the
|
column re-centers in the left space and never hides behind the
|
||||||
absolute panel (animates in sync with the panel). */}
|
absolute panel (animates in sync with the panel). */}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 198 KiB After Width: | Height: | Size: 194 KiB |
Reference in New Issue
Block a user