f8cbf142b5
Initial commit. Spun up via the docs/STARTER.md recipe: cp from vibespace, reset git, rename package, set brand to "Arcadia Admin" with Shield icon in app/lib/identity.ts. Inherits the full Crema sibling-lib wiring including @crema/arcadia-client (typed HTTP + Phoenix Channels realtime against arcadia-core) and @crema/arcadia-auth-ui (login/signup/password-reset/2FA forms). The /login route already renders <LoginForm>; <ArcadiaProvider> in app/root.tsx reads VITE_ARCADIA_URL (default localhost:4000) and VITE_ARCADIA_TENANT (default "default"). CLAUDE.md and README rewritten to frame this as the admin app for arcadia-core. docs/STARTER.md removed — arcadia-admin is a leaf consumer, not a downstream starter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
// Renders an assistant message: markdown for prose, and a small "Ran N
|
|
// actions" pill in place of any ```action``` fenced blocks (which are the
|
|
// machine-readable instructions the bus has already executed).
|
|
|
|
import { useMemo } from "react"
|
|
import ReactMarkdown from "react-markdown"
|
|
import { Sparkles } from "lucide-react"
|
|
|
|
import { extractActionBlocks } from "@crema/action-bus"
|
|
|
|
const ACTION_BLOCK_RE = /```action\s*\n[\s\S]*?```/g
|
|
|
|
export function MessageBody({ content }: { content: string }) {
|
|
const { prose, actionCount } = useMemo(() => {
|
|
const blocks = extractActionBlocks(content)
|
|
return {
|
|
prose: content.replace(ACTION_BLOCK_RE, "").trim(),
|
|
actionCount: blocks.length,
|
|
}
|
|
}, [content])
|
|
|
|
return (
|
|
<div className="prose prose-sm max-w-none dark:prose-invert">
|
|
{prose && (
|
|
<ReactMarkdown
|
|
components={{
|
|
// Tight overrides — keep paragraphs compact in chat bubbles
|
|
p: ({ children }) => <p className="my-1.5 leading-relaxed">{children}</p>,
|
|
code: ({ children, className }) => {
|
|
const isBlock = className?.startsWith("language-")
|
|
if (isBlock) {
|
|
return (
|
|
<pre className="my-2 overflow-x-auto rounded-md bg-muted p-3 text-xs">
|
|
<code className="font-mono">{children}</code>
|
|
</pre>
|
|
)
|
|
}
|
|
return (
|
|
<code className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]">
|
|
{children}
|
|
</code>
|
|
)
|
|
},
|
|
ul: ({ children }) => <ul className="my-1.5 list-disc pl-5">{children}</ul>,
|
|
ol: ({ children }) => <ol className="my-1.5 list-decimal pl-5">{children}</ol>,
|
|
li: ({ children }) => <li className="my-0.5">{children}</li>,
|
|
a: ({ children, href }) => (
|
|
<a href={href} className="text-primary underline underline-offset-2" target="_blank" rel="noreferrer">
|
|
{children}
|
|
</a>
|
|
),
|
|
}}
|
|
>
|
|
{prose}
|
|
</ReactMarkdown>
|
|
)}
|
|
{actionCount > 0 && (
|
|
<span
|
|
className="mt-1 inline-flex items-center gap-1.5 rounded-full border border-primary/40 bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary dark:border-sky-400/60 dark:bg-sky-400/15 dark:text-sky-200"
|
|
title="Action block executed by the command bus"
|
|
>
|
|
<Sparkles className="size-3" />
|
|
Ran {actionCount} action{actionCount > 1 ? "s" : ""}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|