Message Text - Osmium

The MessageText component is responsible for rendering the text content of chat messages. It wraps the Markdown component and provides proper whitespace handling with pre-wrap styling for natural text flow.

Installation

Install the MessageText component using the shadcn CLI:

pnpm dlx shadcn@latest add https://registry.intface.io/message-text.json

npx shadcn@latest add https://registry.intface.io/message-text.json

yarn shadcn@latest add https://registry.intface.io/message-text.json

bunx --bun shadcn@latest add https://registry.intface.io/message-text.json

Usage

import MessageText from "@/components/chat/message-text";

export default function ChatMessage() {
  const messageContent = `
Hello! This is a **markdown** message with:

- List items
- Code: \`console.log("hello")\`
- [Links](https://example.com)

Multiple paragraphs are preserved.
  `;

  return (
    <div className="message">
      <MessageText className="text-sm">
        {messageContent}
      </MessageText>
    </div>
  );
}

Props

string

required

The message text content to render. Supports markdown formatting.