Refined UI

An opinionated, customizable superset of shadcn/ui

AgentsPrimitivesSkillsSkins
Guides
  • Overview
  • Get started
  • Shadcn compatibility
  • Architecture
  • Agent surface
Primitives
  • Accordion
  • Alert
  • Alert dialog
  • Aspect ratio
  • Autocomplete
  • Avatar
  • Badge
  • Button
  • Button group
  • Calendar
  • Card
  • Checkbox
  • Checkbox Group
  • Code
  • Code Diff
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Date Picker
  • Dialog
  • Drawer
  • Empty
  • Field
  • Form
  • Gradient Editor
  • Hover card
  • Input
  • Input group
  • Input OTP
  • Item
  • Kbd
  • Markdown
  • Menu
  • Menubar
  • Meter
  • Native select
  • Navigation menu
  • Number Field
  • Pagination
  • Popover
  • Progress
  • Radio group
  • Resizable
  • Scroll area
  • Select
  • Sidebar
  • Skeleton
  • Slider
  • Spinner
  • Switch
  • Table
  • Table of contents
  • Tabs
  • Textarea
  • Toast
  • Toggle
  • Toolbar
  • Tooltip
  • Tree
  • Trigger Menu
  • Typography
Hooks
  • Use Chat Message
  • Use Chat Input
  • Use User Ask
  • Use Audio Recorder
  • Use Environment Variables
  • Use Copy To Clipboard
  • Use Tool Call
  • Use Sidebar Resize
Utils
  • cn
  • Skin
  • Contracts
  • Serialize
Extensions
  • Control Effects
  • View Transition
  • Send Aurora
  1. Reference
  2. useChatMessage
Hooks

useChatMessage

Typed role, density, and tone state for ChatMessage.

Installed to components/refined-ui/hooks/use-chat-message.ts with the ChatMessage component. It is local UI behavior — yours to own and edit.

Used by ChatMessage

Source

Installed hook source

Behavior hook
src/registry/hooks/use-chat-message.ts
import type { ChatDensity, ChatMessageProps, ChatRole, ChatState, ChatTone } from "../contracts";
​
export type ChatMessageContext = {
from: ChatRole;
state: ChatState;
density: ChatDensity;
tone: ChatTone;
isUser: boolean;
isAssistant: boolean;
isSystem: boolean;
isTool: boolean;
isCompact: boolean;
isStreaming: boolean;
isError: boolean;
};
​
function getChatMessageContext({
from,
state,
density,
tone,
}: Required<Pick<ChatMessageProps, "from" | "state" | "density" | "tone">>): ChatMessageContext {
return {
from,
state,
density,
tone,
isUser: from === "user",
isAssistant: from === "assistant",
isSystem: from === "system",
isTool: from === "tool",
isCompact: density === "compact",
isStreaming: state === "streaming",
isError: state === "error",
};
}
​
export function useChatMessage({
from,
state = "idle",
density = "comfortable",
tone = "neutral",
}: Pick<ChatMessageProps, "from" | "state" | "density" | "tone">) {
return getChatMessageContext({ from, state, density, tone });
}
​

On this page

  • Installation
  • Source