Implementation:TobikoData Sqlmesh MessageContainer
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Components |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
A styled container component for displaying informational messages with optional loading states.
Description
The MessageContainer component wraps content in a centered, rounded container with translucent background styling. It integrates with LoadingContainer to support loading states and provides text wrapping control through the wrap prop. The container uses HorizontalContainer as its base with padding, rounded corners (2xl), and custom CSS variables for background color. When loading, it delegates to LoadingContainer while maintaining styling consistency. The component supports both truncated text (default) and wrapped text display.
Usage
Use MessageContainer to display informational messages, empty states, error messages, or status updates in a visually distinct container. Enable isLoading to show loading indicators within the message context. Use wrap prop to control whether long text should wrap or truncate with ellipsis.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/common/src/components/MessageContainer/MessageContainer.tsx
Signature
export interface MessageContainerProps {
children: React.ReactNode
className?: string
wrap?: boolean
isLoading?: boolean
}
export function MessageContainer({
children,
className,
wrap = false,
isLoading = false,
}: MessageContainerProps) {
// Implementation
}
Import
import { MessageContainer } from '@sqlmesh-common/components/MessageContainer/MessageContainer'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| children | React.ReactNode | Yes | Message content to display |
| className | string | No | Additional CSS classes |
| wrap | boolean | No | If true, text wraps; if false, text truncates (default: false) |
| isLoading | boolean | No | Show loading indicator (default: false) |
Outputs
| Name | Type | Description |
|---|---|---|
| element | React.ReactElement | Styled container with message content |
Usage Examples
// Basic message
<MessageContainer>
No data available
</MessageContainer>
// Loading message
<MessageContainer isLoading={true}>
Loading messages...
</MessageContainer>
// Long text with wrapping
<MessageContainer wrap={true}>
This is a long message that will wrap to multiple lines instead of
truncating with an ellipsis when it exceeds the container width.
</MessageContainer>
// Truncated text (default)
<MessageContainer>
This is a very long message that will be truncated with ellipsis
</MessageContainer>
// Error message
<MessageContainer className="text-red-600">
Failed to load data. Please try again.
</MessageContainer>
// Empty state
<MessageContainer className="text-muted-foreground">
No results found for your search
</MessageContainer>
// Custom styled container
<MessageContainer className="bg-blue-50 text-blue-900">
Information: Your changes have been saved
</MessageContainer>