Show the workspace picture in the conversation header
This commit is contained in:
@@ -77,7 +77,12 @@ export default function ConversationHeader({
|
|||||||
<Row className="hidden md:flex min-w-0 w-full gap-x-3! gap-y-0! flex-nowrap">
|
<Row className="hidden md:flex min-w-0 w-full gap-x-3! gap-y-0! flex-nowrap">
|
||||||
{workspace?.id ? (
|
{workspace?.id ? (
|
||||||
<HeaderMetaItem
|
<HeaderMetaItem
|
||||||
icon={Layers}
|
image={
|
||||||
|
<WorkspaceAvatar
|
||||||
|
image_media_id={workspace?.image_media_id}
|
||||||
|
size="xs"
|
||||||
|
/>
|
||||||
|
}
|
||||||
label="Workspace"
|
label="Workspace"
|
||||||
text={workspace.name || "Workspace"}
|
text={workspace.name || "Workspace"}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,9 +1,11 @@
|
|||||||
import Row from "@moduletrace/twui/layout/Row";
|
import Row from "@moduletrace/twui/layout/Row";
|
||||||
import Span from "@moduletrace/twui/layout/Span";
|
import Span from "@moduletrace/twui/layout/Span";
|
||||||
import type { LucideIcon } from "lucide-react";
|
import type { LucideIcon } from "lucide-react";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
icon: LucideIcon;
|
icon?: LucideIcon;
|
||||||
|
image?: ReactNode;
|
||||||
/**
|
/**
|
||||||
* What the text is, for the tooltip and screen readers.
|
* What the text is, for the tooltip and screen readers.
|
||||||
*/
|
*/
|
||||||
@@ -15,13 +17,22 @@ type Props = {
|
|||||||
* One fact under the bot's name in the conversation header: an icon and
|
* One fact under the bot's name in the conversation header: an icon and
|
||||||
* a line of muted text.
|
* a line of muted text.
|
||||||
*/
|
*/
|
||||||
export default function HeaderMetaItem({ icon: Icon, label, text }: Props) {
|
export default function HeaderMetaItem({
|
||||||
|
icon: Icon,
|
||||||
|
label,
|
||||||
|
text,
|
||||||
|
image,
|
||||||
|
}: Props) {
|
||||||
return (
|
return (
|
||||||
<Row
|
<Row
|
||||||
title={`${label}: ${text}`}
|
title={`${label}: ${text}`}
|
||||||
className="min-w-0 shrink gap-1.5! flex-nowrap text-[13px] leading-[18px] text-ink-secondary"
|
className="min-w-0 shrink gap-1.5! flex-nowrap text-[13px] leading-[18px] text-ink-secondary"
|
||||||
>
|
>
|
||||||
<Icon size={13} aria-label={label} className="shrink-0" />
|
{Icon ? (
|
||||||
|
<Icon size={13} aria-label={label} className="shrink-0" />
|
||||||
|
) : image ? (
|
||||||
|
image
|
||||||
|
) : null}
|
||||||
<Span className="truncate">{text}</Span>
|
<Span className="truncate">{text}</Span>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user