tben
1a6249afd3
A bot's identity was one of seven hues, and the hue picked both its colour and its stone shape. Now its colour is free and its stone is its own: - `bots.color` holds any `#rrggbb`, `bots.stone` the flat-cut shape it's drawn on. `bots.hue` stays as the palette column they replaced, read only as a fallback; `src/scripts/move-bot-colour-to-owners.ts` backfills an install from it (safe to rerun). - `src/utils/bot-color.ts` is the only place a colour is validated or resolved (`resolveBotColor`/`resolveBotStone` carry the old hue forward, `botColorNeedsPaperFace` flips the eyes to paper on a very dark body), and `src/utils/bot-stone-props.ts` gives every row its props, so a row saved before this still renders as it did. - `BotStone` takes the colour as the body's SVG `fill`, the one documented exception to the token rule: an arbitrary hex has no token to point at. `UnreadDot` follows it. - The picker keeps the palette tiles (still shape and colour together) and adds a native swatch and a hex field, so a custom colour keeps its stone. Same place as before: the header avatar's modal and Settings > Bots, for crew managers. The coordinator stays hue-less. - A recolour reaches other open tabs through `pushBotUpdated`.
45 lines
2.1 KiB
TypeScript
45 lines
2.1 KiB
TypeScript
import { useContext } from "react";
|
|
import { NodeViewWrapper, type ReactNodeViewProps } from "@tiptap/react";
|
|
import Span from "@moduletrace/twui/layout/Span";
|
|
import BotAvatar from "@/src/components/general/bot-avatar";
|
|
import WorkspaceAvatar from "@/src/components/general/workspace-avatar";
|
|
import type { BotFace } from "@/src/dict/bot-dict";
|
|
import botStoneProps from "@/src/utils/bot-stone-props";
|
|
import { CrewBotsContext } from "../(data)/crew-bots-context";
|
|
import { CrewWorkspacesContext } from "../(data)/crew-workspaces-context";
|
|
|
|
/**
|
|
* A bot or workspace mentioned in the composer, shown like the chips in
|
|
* the thread (`BotRefChip`, `WorkspaceRefChip`) but not a link. One the
|
|
* user can't see any more keeps its ref's words.
|
|
*/
|
|
export default function ComposerMentionChip({ node, selected }: ReactNodeViewProps) {
|
|
const bots = useContext(CrewBotsContext);
|
|
const workspaces = useContext(CrewWorkspacesContext);
|
|
const id = Number(node.attrs.id);
|
|
const is_workspace = node.attrs.mentionSuggestionChar == "#";
|
|
const bot = is_workspace ? undefined : bots.find((b) => b.id == id);
|
|
const workspace = is_workspace ? workspaces.find((w) => w.id == id) : undefined;
|
|
const name = bot?.name || workspace?.name || node.attrs.label || `${is_workspace ? "workspace" : "bot"} ${id}`;
|
|
|
|
return (
|
|
<NodeViewWrapper
|
|
as="span"
|
|
data-mention=""
|
|
className={`inline-flex h-6 gap-1.5 items-center px-1.5 mx-px align-middle rounded-default-xs bg-sunken text-[13px] font-bold leading-4 text-ink whitespace-nowrap ${selected ? "ring-2 ring-ink" : ""}`}
|
|
>
|
|
{bot ? (
|
|
<BotAvatar
|
|
image_media_id={bot.image_media_id}
|
|
{...botStoneProps({ color: bot.color, stone: bot.stone, hue: bot.hue })}
|
|
face={(bot.face || "idle") as BotFace}
|
|
label={bot.name || ""}
|
|
size={18}
|
|
/>
|
|
) : null}
|
|
{workspace ? <WorkspaceAvatar image_media_id={workspace.image_media_id} size="xs" /> : null}
|
|
<Span>{name}</Span>
|
|
</NodeViewWrapper>
|
|
);
|
|
}
|