ChatBubble Component

ℹ️

The ChatBubble component is a versatile React component designed for displaying chat messages with different styles, positions, and content configurations. This component is inspired by the DaisyUI (opens in a new tab) framework's design for cards.

Example Preview

ChatBubble Example

Usage

import { ChatBubble } from "@/@core";
 
// Example usage of ChatBubble component
const MyChatBubble = () => {
  return <ChatBubble message="Hello there!" color="primary" />;
};
 
export default MyChatBubble;

Props

Prop Name	Type	Default Value	Required	Description
`position`	`chat-start`, `chat-end`	`chat-start`	No	Position of the chat bubble.
`color`	`primary`, `secondary`, `info`, `accent`, `success`, `warning`, `error`	`primary`	No	Color of the chat bubble.
`variant`	`with-image`, `without-image`	`without-image`	No	Variant of the chat bubble.
`src`	`string`	-	No	Source URL for the avatar image.
`alt`	`string`	-	No	Alternate text for the avatar image.
`header`	`React.ReactNode`	-	No	Header content for the chat bubble.
`footer`	`React.ReactNode`	-	No	Footer content for the chat bubble.
`message`	`string`	-	No	Message content for the chat bubble.
`children`	`React.ReactNode`	-	No	Custom content for the chat bubble. Use this if you need more control over the content structure.
`className`	`string`	-	No	Additional class name(s) for the chat bubble.

Examples

Here are examples of using the ChatBubble component with different configurations:

<ChatBubble message="Hello there!" color="primary" />
<ChatBubble message="Hi!" color="secondary" />
<ChatBubble message="Nice to meet you!" color="info" />
<ChatBubble message="How can I help you?" color="accent" />
<ChatBubble message="Great news!" color="success" />
<ChatBubble message="Be careful!" color="warning" />
<ChatBubble message="Something went wrong." color="error" />
<ChatBubble variant="with-image" src="https://example.com/avatar.jpg" alt="User Avatar" />
<ChatBubble variant="without-image" header={<div>User123</div>} footer={<div>12:45 PM</div>} />
<ChatBubble color="primary" className="custom-chat-bubble" />

These examples demonstrate how to use the ChatBubble component with different colors, variants, and content configurations. Customize the props based on your design requirements.

Feel free to adjust the installation and usage sections based on your project structure and requirements.

ℹ️

Note: The ChatBubble component is a versatile React component designed for displaying chat messages with different styles, positions, and content configurations. This component is inspired by the DaisyUI (opens in a new tab) framework's design for cards. Check it out for more awesome components.

Card Chip