Update frontend UI/UX

src/pages/admin/bots/[bot_id]/(data)/crew-bots-context.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { BotWithLastMessage } from "@/src/types";
+
+/**
+ * The live crew the conversation sees (the workspace's in a workspace),
+ * so a bot named in a message links to it, even one created just now.
+ */
+export const CrewBotsContext = React.createContext<BotWithLastMessage[]>([]);

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}

src/pages/admin/bots/[bot_id]/(sections)/conversation.tsx

@@ -10,6 +10,7 @@ import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
 import useLiveBots from "@/src/hooks/use-live-bots";
 import useServerEvent from "@/src/hooks/use-server-event";
 import { BotComputersContext } from "../(data)/bot-computers-context";
+import { CrewBotsContext } from "../(data)/crew-bots-context";
 import { BotMessageActionsContext } from "../(data)/message-actions-context";
 import { SpeakMessageContext } from "../(data)/speak-message-context";
 import reactToBotMessage from "../(functions)/react-to-bot-message";
@@ -156,6 +157,7 @@ export default function Conversation() {
     if (!bot?.id || !live_bot) return null;
 
     return (
+        <CrewBotsContext.Provider value={bots}>
         <BotComputersContext.Provider value={bot_computers}>
             <SpeakMessageContext.Provider value={speak}>
                 <BotMessageActionsContext.Provider
@@ -206,5 +208,6 @@ export default function Conversation() {
                 <ComputerViewerModal bot={live_bot} />
             </SpeakMessageContext.Provider>
         </BotComputersContext.Provider>
+        </CrewBotsContext.Provider>
     );
 }