Update frontend UI/UX

src/pages/admin/bots/[bot_id]/(partials)/bot-ref-chip.tsx

@@ -0,0 +1,48 @@
+import { useContext } from "react";
+import Link from "@moduletrace/twui/layout/Link";
+import Span from "@moduletrace/twui/layout/Span";
+import BotAvatar from "@/src/components/general/bot-avatar";
+import type { BotFace, BotHue } from "@/src/dict/bot-dict";
+import { AppContext } from "@/src/pages/__root";
+import { CrewBotsContext } from "../(data)/crew-bots-context";
+
+type Props = {
+    bot_id: number;
+};
+
+/**
+ * A crew member a bot named in a message (`botRef`): a link to its
+ * conversation, in the open workspace when it's in the crew there, else
+ * its own chat. A bot the user doesn't reach is shown by name only.
+ */
+export default function BotRefChip({ bot_id }: Props) {
+    const { pageProps } = useContext(AppContext);
+    const workspace_id = pageProps?.workspace?.id;
+    const bots = useContext(CrewBotsContext);
+    const bot = bots.find((b) => b.id == bot_id);
+
+    if (!bot) {
+        return <Span className="font-bold">{`bot ${bot_id}`}</Span>;
+    }
+
+    return (
+        <Link
+            href={
+                workspace_id
+                    ? `/admin/workspaces/${workspace_id}/bots/${bot.id}`
+                    : `/admin/bots/${bot.id}`
+            }
+            title={`Open ${bot.name}`}
+            className="inline-flex h-6 gap-1.5 items-center px-1.5 align-middle rounded-default-xs border-0 bg-sunken text-[13px] font-bold leading-4 text-ink whitespace-nowrap hover:opacity-80"
+        >
+            <BotAvatar
+                image_media_id={bot.image_media_id}
+                hue={(bot.hue || null) as BotHue | null}
+                face={(bot.face || "idle") as BotFace}
+                label={bot.name || ""}
+                size={18}
+            />
+            {bot.name}
+        </Link>
+    );
+}

src/pages/admin/bots/[bot_id]/(partials)/markdown-link.tsx

@@ -1,14 +1,15 @@
 import type { ComponentProps } from "react";
 import Link from "@moduletrace/twui/layout/Link";
 import { ComputerViewModes, type ComputerViewMode } from "@/src/dict/computer-dict";
-import { ComputerRefHrefPrefix, TakeOverRefHrefPrefix } from "@/src/utils/link-computer-refs";
+import { BotRefHrefPrefix, ComputerRefHrefPrefix, TakeOverRefHrefPrefix } from "@/src/utils/link-computer-refs";
+import BotRefChip from "./bot-ref-chip";
 import ComputerRefChip from "./computer-ref-chip";
 import TakeOverChip from "./take-over-chip";
 
 /**
  * A link in a bot message. A computer the bot named (`linkComputerRefs`)
  * becomes its switch button, a take-over request a button that opens the
- * computer; anything else opens in a new tab.
+ * computer, a bot it named a link to that bot's conversation; anything else opens in a new tab.
  */
 export default function MarkdownLink({ href, children }: ComponentProps<"a">) {
     if (href?.startsWith(ComputerRefHrefPrefix)) {
@@ -32,6 +33,12 @@ export default function MarkdownLink({ href, children }: ComponentProps<"a">) {
         }
     }
 
+    if (href?.startsWith(BotRefHrefPrefix)) {
+        const bot_id = Number(href.slice(BotRefHrefPrefix.length));
+
+        if (bot_id) return <BotRefChip bot_id={bot_id} />;
+    }
+
     return (
         <Link
             href={href}