Show the workspace picture in the conversation header

src/pages/admin/bots/[bot_id]/(partials)/conversation-header.tsx

@@ -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">
                     {workspace?.id ? (
                         <HeaderMetaItem
-                            icon={Layers}
+                            image={
+                                <WorkspaceAvatar
+                                    image_media_id={workspace?.image_media_id}
+                                    size="xs"
+                                />
+                            }
                             label="Workspace"
                             text={workspace.name || "Workspace"}
                         />

src/pages/admin/bots/[bot_id]/(partials)/header-meta-item.tsx

@@ -1,9 +1,11 @@
 import Row from "@moduletrace/twui/layout/Row";
 import Span from "@moduletrace/twui/layout/Span";
 import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
 
 type Props = {
-    icon: LucideIcon;
+    icon?: LucideIcon;
+    image?: ReactNode;
     /**
      * 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
  * 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 (
         <Row
             title={`${label}: ${text}`}
             className="min-w-0 shrink 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>
         </Row>
     );