Files
accounted/components/agent/AgentAvatar.tsx
T
Jakob Wennberg ec27228a8e style: remove em/en dashes repo-wide, add CLAUDE.md rule against them (#890)
Em dashes (—) and en dashes (–) had spread across comments, docs, tests,
and a few UI strings, reading as AI-generated boilerplate rather than
house style. Replaced each with punctuation matching its context: colon
for explanatory clauses, comma for asides, plain hyphen for numeric/legal
ranges (e.g. "21-23§"), "to"/"till" for date ranges, parentheses for
paired-dash asides. messages/en.json and messages/sv.json were fixed by
hand together to keep sv/en in sync.

Left untouched where the dash is the functional subject rather than
decorative punctuation: date-range-parser.ts's separator regex,
charset-repair.ts's CP1252 byte-mapping table (and its test), the SIE
encoding mojibake docs, generic-csv.ts's minus-sign normalizer, the
agent system-prompt files that already instruct against em dashes, and
a golden iXBRL test fixture compared byte-for-byte.

Also fixes two bugs surfaced along the way: an off-by-one in
ApiKeysPanel's scope-label split (a leftover from an earlier partial
pass), and a charset-repair test that had lost the literal en-dash it
exists to verify.

Regenerated the agent atom seed migration (skills:generate) since 27
SKILL.md files changed. Added a CLAUDE.md rule against em/en dashes,
with an explicit carve-out for the functional-dash cases above.

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-04 15:58:06 +02:00

62 lines
1.6 KiB
TypeScript

'use client'
import { MessageCircle } from 'lucide-react'
import { cn } from '@/lib/utils'
import { getAvatarUrl } from './avatars'
interface Props {
avatarId: string | null | undefined
size?: 'xs' | 'sm' | 'md' | 'lg'
className?: string
alt?: string
}
// Renders the agent's avatar: either the chosen dicebear SVG from the
// AVATAR_OPTIONS registry, or a fallback MessageCircle glyph on a dark circle
// when no avatar is set yet (free tier / older profiles).
//
// `next/image` is intentionally NOT used: avatars are tiny remote SVGs from
// the dicebear CDN, and adding the domain to next.config just to render a
// 28px image is overkill. Browser caches the SVG forever via the seed-keyed
// URL.
export default function AgentAvatar({ avatarId, size = 'sm', className, alt }: Props) {
const url = getAvatarUrl(avatarId)
const dim = SIZES[size]
const altText = alt ?? 'Avatar'
if (!url) {
return (
<span
className={cn(
'inline-flex items-center justify-center rounded-full bg-foreground text-background shrink-0',
dim.box,
className,
)}
aria-label={altText}
>
<MessageCircle className={dim.icon} />
</span>
)
}
// eslint-disable-next-line @next/next/no-img-element
return (
<img
src={url}
alt={altText}
className={cn(
'rounded-full shrink-0 bg-secondary object-cover',
dim.box,
className,
)}
/>
)
}
const SIZES = {
xs: { box: 'h-5 w-5', icon: 'h-2.5 w-2.5' },
sm: { box: 'h-8 w-8', icon: 'h-3.5 w-3.5' },
md: { box: 'h-10 w-10', icon: 'h-4 w-4' },
lg: { box: 'h-14 w-14', icon: 'h-5 w-5' },
}