export const title = "Messaging components"
export const description = "Powerful and customizable React messaging components built for modern applications and websites. These messaging components are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/messaging/messaging.story.tsx";
import * as MessageActions from "@/components/application/messaging/message-action.demo.tsx";

<PreviewAndCode title="Messaging example" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">        
        <div className="scrollbar-hide h-full w-full overflow-auto py-10 px-4">
            <div className="sm:mx-auto w-full sm:max-w-md">
                <Demos.MessagesDefaultDemo />
            </div>
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="scrollbar-hide max-h-[720px]" component="messaging/MessagesDefaultDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

Messaging component depends on other components to function properly. Before using them, make sure to add the required components via CLI.

Use the following command to install them:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add messaging
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/messaging" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the messaging components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Message status

In order to display the message status separately, you can use the `MessageStatus` component. It accepts the `status` prop which can be one of the following:

- `sent`
- `read`
- `failed`

Optionally, you can also pass the `readAt` prop to display the date and time when the message was read.

<PreviewAndCode title="Message status" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageStatus />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="messaging/MessageStatusDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Message action examples

Below are examples and variations of this message action component:

### Message action minimal {{ tocOnly:true }}

<PreviewAndCode title="Message action minimal" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageActionMinimal />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="message-action/MessageActionMinimal" />
    </TabPanel>
</PreviewAndCode>

### Message action textarea {{ tocOnly:true }}

<PreviewAndCode title="Message action textarea" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageActionTextarea />
    </ResizablePreview> 
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="message-action/MessageActionTextarea" />
    </TabPanel>
</PreviewAndCode>

### Message action advanced {{ tocOnly:true }}

<PreviewAndCode title="Message action advanced" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageActionAdvanced />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="message-action/MessageActionAdvanced" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Message examples

Below are examples and variations of this message component:

### Message simple {{ tocOnly:true }}

<PreviewAndCode title="Message simple" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageItemSimpleDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="messaging/MessageItemSimpleDemo" />
    </TabPanel>
</PreviewAndCode>

### Message reactions {{ tocOnly:true }}

<PreviewAndCode title="Message reactions" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageItemReactionsDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="messaging/MessageItemReactionsDemo" />
    </TabPanel>
</PreviewAndCode>

### Message reply {{ tocOnly:true }}

<PreviewAndCode title="Message reply" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageItemReplyDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="messaging/MessageItemReplyDemo" />
    </TabPanel>
</PreviewAndCode>

### Message attachment {{ tocOnly:true }}

<PreviewAndCode title="Message attachment" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageItemAttachmentDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="messaging/MessageItemAttachmentDemo" />
    </TabPanel>
</PreviewAndCode>

### Message audio {{ tocOnly:true }}

<PreviewAndCode title="Message audio" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageItemAudioDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="messaging/MessageItemAudioDemo" />
    </TabPanel>
</PreviewAndCode>

### Message image {{ tocOnly:true }}

<PreviewAndCode title="Message image" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageItemImageDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="messaging/MessageItemImageDemo" />
    </TabPanel>
</PreviewAndCode>

### Message link preview {{ tocOnly:true }}

<PreviewAndCode title="Message link preview" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageItemLinkPreviewDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="messaging/MessageItemLinkPreviewDemo" />
    </TabPanel>
</PreviewAndCode>

### Message link minimal {{ tocOnly:true }}

<PreviewAndCode title="Message link minimal" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageItemLinkMinimalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="messaging/MessageItemLinkMinimalDemo" />
    </TabPanel>
</PreviewAndCode>


### Message writing {{ tocOnly:true }}

<PreviewAndCode title="Message writing" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MessageItemWritingDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="messaging/MessageItemWritingDemo" />
    </TabPanel>
</PreviewAndCode>