mlogclub
74b4317578
- Replaced manual scroll handling in ChatPanel with ConversationMessageScroller for better performance and maintainability. - Introduced ConversationMessageBubble and ConversationMessageRow components for consistent message styling. - Updated SupportChatMessageList to utilize new message components and scrolling logic. - Added utility components for message scroller and message display, enhancing the overall chat experience. - Updated package dependencies to include @shadcn/react for UI components.
105 lines
2.4 KiB
TypeScript
105 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import type { ReactNode } from "react"
|
|
|
|
import {
|
|
Message,
|
|
MessageAvatar,
|
|
MessageContent,
|
|
MessageFooter,
|
|
MessageHeader,
|
|
} from "@/components/ui/message"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
type ConversationMessageRowProps = {
|
|
align: "start" | "end"
|
|
centered?: boolean
|
|
header?: ReactNode
|
|
footer?: ReactNode
|
|
avatar?: ReactNode
|
|
children: ReactNode
|
|
className?: string
|
|
avatarClassName?: string
|
|
contentClassName?: string
|
|
headerClassName?: string
|
|
footerClassName?: string
|
|
}
|
|
|
|
export function ConversationMessageRow({
|
|
align,
|
|
centered = false,
|
|
header,
|
|
footer,
|
|
avatar,
|
|
children,
|
|
className,
|
|
avatarClassName,
|
|
contentClassName,
|
|
headerClassName,
|
|
footerClassName,
|
|
}: ConversationMessageRowProps) {
|
|
if (centered) {
|
|
return (
|
|
<Message
|
|
align="start"
|
|
className={cn("justify-center", className)}
|
|
>
|
|
<MessageContent className={cn("w-fit max-w-[85%] items-center", contentClassName)}>
|
|
{header ? (
|
|
<MessageHeader className={cn("justify-center text-center", headerClassName)}>
|
|
{header}
|
|
</MessageHeader>
|
|
) : null}
|
|
{children}
|
|
{footer ? (
|
|
<MessageFooter className={cn("justify-center text-center", footerClassName)}>
|
|
{footer}
|
|
</MessageFooter>
|
|
) : null}
|
|
</MessageContent>
|
|
</Message>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Message align={align} className={className}>
|
|
{avatar ? (
|
|
<MessageAvatar className={cn("bg-transparent", avatarClassName)}>
|
|
{avatar}
|
|
</MessageAvatar>
|
|
) : null}
|
|
<MessageContent
|
|
className={cn(
|
|
"max-w-[85%]",
|
|
align === "end" ? "items-end" : "items-start",
|
|
contentClassName,
|
|
)}
|
|
>
|
|
{header ? (
|
|
<MessageHeader
|
|
className={cn(
|
|
"gap-2 px-0",
|
|
align === "end" ? "justify-end text-right" : "justify-start text-left",
|
|
headerClassName,
|
|
)}
|
|
>
|
|
{header}
|
|
</MessageHeader>
|
|
) : null}
|
|
{children}
|
|
{footer ? (
|
|
<MessageFooter
|
|
className={cn(
|
|
"gap-2 px-0",
|
|
align === "end" ? "justify-end text-right" : "justify-start text-left",
|
|
footerClassName,
|
|
)}
|
|
>
|
|
{footer}
|
|
</MessageFooter>
|
|
) : null}
|
|
</MessageContent>
|
|
</Message>
|
|
)
|
|
}
|