Files
cobble/src/pages/admin/bots/[bot_id]/(partials)/crew-message-line.tsx
T
tbenandClaude Opus 5.5 3e78d51b56 Keep bot messages inside the column on narrow screens
Lists no longer add twui's 25px list margin on top of full width,
markdown blocks and list items are capped at the column, long words
and inline code wrap anywhere, and ref chips with long labels truncate
instead of pushing the line past the edge.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-28 06:23:09 +01:00

34 lines
1.1 KiB
TypeScript

import { memo } from "react";
import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import Stack from "@moduletrace/twui/layout/Stack";
import type { BotMessageWithAttachments } from "@/src/types";
import linkComputerRefs from "@/src/utils/link-computer-refs";
import { MessageMarkdownComponents } from "../(data)/message-markdown-components";
/**
* Kept module-level: a new array on every render makes `react-markdown`
* parse the message again.
*/
const RemarkPlugins = [remarkGfm];
type Props = {
message: BotMessageWithAttachments;
};
/**
* One chatroom outcome in the asking bot's conversation, rendered like a
* bot's message (its room ref a chip that opens the room).
*/
function CrewMessageLine({ message }: Props) {
return (
<Stack className="w-full gap-2.5! items-start wrap-anywhere [&>*]:max-w-full">
<Markdown remarkPlugins={RemarkPlugins} components={MessageMarkdownComponents}>
{linkComputerRefs({ text: message.text || "" })}
</Markdown>
</Stack>
);
}
export default memo(CrewMessageLine);