Keep the conversation header's meta on one line with the workspace

This commit is contained in:
2026-10-21 16:43:48 +01:00
parent 92ad95f743
commit 66903f7a00
3 changed files with 38 additions and 33 deletions
+3 -3
View File
@@ -5,9 +5,9 @@ import { twMerge } from "tailwind-merge";
import profileImageUrls from "@/src/utils/profile-image-urls";
const WorkspaceAvatarSizes = {
xs: { box: "size-[18px] rounded-[4px]", icon: 12 },
sm: { box: "size-8 rounded-default-sm", icon: 16 },
lg: { box: "size-14 rounded-default", icon: 24 },
xs: { box: "size-[18px] min-w-[18px] rounded-[4px]", icon: 12 },
sm: { box: "size-8 min-w-8 rounded-default-sm", icon: 16 },
lg: { box: "size-14 min-w-14 rounded-default", icon: 24 },
} as const;
type Props = {
@@ -57,35 +57,40 @@ export default function ConversationHeader({
{bot.name}
</H1>
{workspace?.id ? (
<Row className="min-w-0 w-full gap-2! flex-nowrap">
<WorkspaceAvatar
image_media_id={workspace.image_media_id}
size="xs"
/>
<Span size="smaller" className="truncate">
{workspace.name || "Workspace"}
</Span>
</Row>
) : null}
<Row className="min-w-0 w-full gap-x-1! md:gap-x-3! gap-y-0! flex-nowrap">
<HeaderMetaItem
icon={CpuAi}
label="Model"
text={
model
? `${model.name} · ${model.provider_name}`
: "No model set up"
}
/>
{computer_name ? (
<HeaderMetaItem
icon={Monitor}
label="Computer"
text={computer_name}
/>
<Row className="flex-nowrap w-full">
{workspace?.id ? (
<Row className="min-w-0 gap-2! flex-nowrap">
<WorkspaceAvatar
image_media_id={workspace.image_media_id}
size="xs"
/>
<Span
size="smaller"
className="truncate hidden xl:block"
>
{workspace.name || "Workspace"}
</Span>
</Row>
) : null}
<Row className="min-w-0 gap-x-1! md:gap-x-3! gap-y-0! flex-nowrap grow">
<HeaderMetaItem
icon={CpuAi}
label="Model"
text={
model
? `${model.name} · ${model.provider_name}`
: "No model set up"
}
/>
{computer_name ? (
<HeaderMetaItem
icon={Monitor}
label="Computer"
text={computer_name}
/>
) : null}
</Row>
</Row>
</Stack>
@@ -26,14 +26,14 @@ export default function HeaderMetaItem({
return (
<Row
title={`${label}: ${text}`}
className="min-w-0 shrink gap-1.5! flex-nowrap text-[13px] leading-[18px] text-ink-secondary"
className="min-w-0 grow overflow-hidden gap-1.5! flex-nowrap text-[13px] leading-[18px] text-ink-secondary"
>
{Icon ? (
<Icon size={13} aria-label={label} className="shrink-0" />
) : image ? (
image
) : null}
<Span className="truncate">{text}</Span>
<Span className="min-w-0 grow truncate">{text}</Span>
</Row>
);
}