{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "message",
  "title": "Message",
  "description": "One turn. Yours sit right in a tile; the agent’s are plain text under its name.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json",
    "https://creance.pages.dev/r/loading-dots.json"
  ],
  "files": [
    {
      "path": "message/Message.css",
      "content": ".cr-message {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cr-space-2);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-md);\n  line-height: 1.55;\n}\n\n.cr-message[data-from='user'] {\n  align-items: flex-end;\n}\n\n/* Your own words: a tile on the right, with the corner nearest the input squared off. */\n.cr-message[data-from='user'] .cr-message__content {\n  box-sizing: border-box;\n  max-width: 78%;\n  padding: var(--cr-space-3) var(--cr-space-4);\n  border: 1px solid var(--cr-color-glass-edge);\n  border-radius: 20px 20px 6px;\n  background: var(--cr-color-glass-sheet);\n  box-shadow: var(--cr-shadow-card);\n}\n\n.cr-message__who {\n  display: flex;\n  align-items: center;\n  gap: var(--cr-space-2);\n  font-size: var(--cr-font-size-sm);\n  font-weight: var(--cr-font-weight-semibold);\n}\n\n.cr-message__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cr-space-3);\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.cr-message__content > p {\n  margin: 0;\n}\n\n/* While it writes: a caret at the end of the last block, or of the text itself when there are no blocks. */\n.cr-message[data-status='streaming'] .cr-message__content > :last-child::after,\n.cr-message[data-status='streaming'] .cr-message__content:not(:has(> *))::after {\n  content: '';\n  display: inline-block;\n  width: 8px;\n  height: 1.1em;\n  margin-inline-start: 2px;\n  border-radius: 2px;\n  background: var(--cr-color-ink-bg);\n  vertical-align: -0.2em;\n}\n\n.cr-message__actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  margin-inline-start: calc(-1 * var(--cr-space-2));\n  color: var(--cr-color-text-muted);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/message/Message.css"
    },
    {
      "path": "message/Message.tsx",
      "content": "import type { ReactNode } from 'react';\nimport { LoadingDots } from '@/components/creance/loading-dots/LoadingDots';\nimport { cx } from '@/lib/creance/cx';\nimport { VisuallyHidden } from '@/lib/creance/VisuallyHidden';\nimport './Message.css';\n\nexport interface MessageProps {\n  /** `user` sits on the right in a tile. `assistant` is plain text on the page, under its name. */\n  from: 'user' | 'assistant';\n  /** Who is speaking. Shown above an assistant message; read out for a user message. Default \"You\" or \"Assistant\". */\n  name?: string;\n  /** Beside the name of an assistant message, usually an Avatar. */\n  avatar?: ReactNode;\n  /**\n   * `pending` shows three dots before the first word. `streaming` puts a caret at the end of the text.\n   * Default `done`.\n   */\n  status?: 'pending' | 'streaming' | 'done';\n  /** What screen readers hear while `pending`. Default \"{name} is thinking\". */\n  pendingLabel?: string;\n  /** Under a finished assistant message: copy, try again, feedback. */\n  actions?: ReactNode;\n  /** The message. Render markdown yourself; the kit does not parse it. */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** One turn in a conversation. The message body is whatever you render, including Reasoning, Sources and tool calls. */\nexport function Message({ from, name, avatar, status = 'done', pendingLabel, actions, children, className }: MessageProps) {\n  const who = name ?? (from === 'user' ? 'You' : 'Assistant');\n  return (\n    <div className={cx('cr-message', className)} data-from={from} data-status={status}>\n      {from === 'assistant' ? (\n        <div className=\"cr-message__who\">\n          {avatar}\n          <span>{who}</span>\n        </div>\n      ) : (\n        <VisuallyHidden>{who}: </VisuallyHidden>\n      )}\n      {status === 'pending' ? (\n        <LoadingDots tone=\"muted\">\n          <VisuallyHidden>{pendingLabel ?? `${who} is thinking`}</VisuallyHidden>\n        </LoadingDots>\n      ) : (\n        <div className=\"cr-message__content\">{children}</div>\n      )}\n      {actions && status === 'done' && <div className=\"cr-message__actions\">{actions}</div>}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/message/Message.tsx"
    }
  ],
  "categories": [
    "molecule",
    "chat"
  ],
  "type": "registry:ui"
}