50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T550,"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import type { ComponentProps, ReactElement } from "react"; import { cn } from "@/registry/default/lib/utils"; export type ChatBubbleProps = useRender.ComponentProps<"div"> & { align?: "start" | "end"; variant?: "default" | "muted"; grouped?: boolean; }; export function ChatBubble({ align = "start", variant = "default", grouped = false, className, render, ...props }: ChatBubbleProps): ReactElement { const defaultProps = { "data-slot": "chat-bubble", "data-align": align, "data-variant": variant, "data-grouped": grouped || undefined, className: cn( "relative flex min-w-0 flex-col gap-2 rounded-2xl px-3.5 py-2.5 text-foreground", variant === "default" ? "bg-foreground/12" : "bg-foreground/4", !grouped && (align === "end" ? "rounded-se-md" : "rounded-ss-md"), className, ), }; return useRender({ defaultTagName: "div", render, props: mergeProps<"div">(defaultProps, props), }); } export function ChatBubbleReactions({ className, ...props }: ComponentProps<"div">): ReactElement { return (

); } 53:Tf3d,"use client"; import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import type { ReactElement, ReactNode } from "react"; import { useState } from "react"; import { cn } from "@/registry/default/lib/utils"; import { Collapsible, CollapsiblePanel, CollapsibleTrigger, } from "@/registry/default/ui/collapsible"; import { splitChatMessagePreview } from "./lib/split-chat-message-preview"; export type ChatCollapsibleMessageProps = { text: string; showMoreLabel: string; showLessLabel: string; side: "incoming" | "outgoing"; maxPreviewLength?: number; defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; renderText?: (text: string) => ReactNode; className?: string; }; function renderPlainText(text: string): ReactElement { return (

{text}

); } function ChatCollapsibleMessage({ text, showMoreLabel, showLessLabel, side, maxPreviewLength, defaultOpen = false, open, onOpenChange, renderText = renderPlainText, className, }: ChatCollapsibleMessageProps): ReactElement { const { preview, remainder } = splitChatMessagePreview( text, maxPreviewLength, ); if (!remainder) { return

{renderText(text)}

; } return ( ); } function ExpandableChatMessage({ text, preview, renderText, showMoreLabel, showLessLabel, side, className, defaultOpen, open: controlledOpen, onOpenChange, }: { text: string; preview: string; renderText: (text: string) => ReactNode; showMoreLabel: string; showLessLabel: string; side: "incoming" | "outgoing"; className?: string; defaultOpen: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; }): ReactElement { const [internalOpen, setInternalOpen] = useState(defaultOpen); const open = controlledOpen ?? internalOpen; const setOpen = (nextOpen: boolean): void => { if (controlledOpen === undefined) setInternalOpen(nextOpen); onOpenChange?.(nextOpen); }; const Icon = open ? ChevronUpIcon : ChevronDownIcon; return (

{renderText(preview)}

{renderText(text)}

{open ? showLessLabel : showMoreLabel} ); } export { ChatCollapsibleMessage, splitChatMessagePreview }; 54:Tb9d,"use client"; import type { ComponentProps, ReactElement, ReactNode } from "react"; import { cn } from "@/registry/default/lib/utils"; import { ScrollAreaPrimitive, ScrollBar, } from "@/registry/default/ui/scroll-area"; import { ChatJumpToLatestButton } from "./chat-jump-to-latest-button"; import type { ChatScrollController } from "./hooks/use-chat-scroll"; export type ChatConversationProps = ComponentProps<"div"> & { scroll: ChatScrollController; label: string; jumpLabel: ReactNode; contentClassName?: string; overlay?: ReactNode; inactive?: boolean; /** "off" when the caller announces arrivals itself, e.g. so paged-in history isn't read out. */ live?: "polite" | "off"; }; export function ChatConversation({ scroll, label, jumpLabel, contentClassName, children, overlay, inactive = false, live, className, ...props }: ChatConversationProps): ReactElement { return (

{children} {scroll.showJump && !inactive && (

{jumpLabel}

)} {overlay}

); } 55:T708,"use client"; import type { ComponentProps, ReactElement, ReactNode } from "react"; import { cn } from "@/registry/default/lib/utils"; export type ChatMemberEntry = { id: string; name: ReactNode; avatar?: ReactNode; badges?: ReactNode; action?: ReactNode; dimmed?: boolean; }; export type ChatMemberListProps = ComponentProps<"ul"> & { members: readonly ChatMemberEntry[]; }; export function ChatMemberList({ members, className, ...props }: ChatMemberListProps): ReactElement { return (

{member.avatar}
{member.name} {member.badges}
{member.action}

); } export type ChatMemberSectionProps = ChatMemberListProps & { label: string; heading?: ReactNode; }; export function ChatMemberSection({ label, heading, members, ...props }: ChatMemberSectionProps): ReactElement | null { if (!members.length) return null; return (

{heading && (

{heading}

)}

); } 56:T1208,"use client"; import { CornerDownLeftIcon, EllipsisIcon } from "lucide-react"; import type { ComponentProps, ReactElement, ReactNode, RefObject } from "react"; import { useRef, useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { Menu, MenuPopup, MenuTrigger } from "@/registry/default/ui/menu"; import { Toolbar, ToolbarButton } from "@/registry/default/ui/toolbar"; import { Tooltip, TooltipPopup, TooltipTrigger, } from "@/registry/default/ui/tooltip"; import { useChatPopupDismissal } from "./hooks/use-chat-popup-dismissal"; export type ChatMessageActionToolbarProps = { side: "incoming" | "outgoing"; toolbarLabel: string; reactionPicker?: (toolbarRef: RefObject) => ReactNode; menuTriggerRef?: RefObject; menuFinalFocus?: ComponentProps["finalFocus"]; } & ( | { onReply: () => void; replyLabel: string; replyTooltip: string } | { onReply?: never; replyLabel?: never; replyTooltip?: never } ) & ( | { menuChildren: ReactNode; moreLabel: string; moreTooltip: string } | { menuChildren?: never; moreLabel?: never; moreTooltip?: never } ); export function ChatMessageActionToolbar({ side, toolbarLabel, reactionPicker, replyLabel, replyTooltip, onReply, moreLabel, moreTooltip, menuChildren, menuTriggerRef: suppliedMenuTriggerRef, menuFinalFocus, }: ChatMessageActionToolbarProps): ReactElement | null { const [menuOpen, setMenuOpen] = useState(false); const [menuDismissedOutside, setMenuDismissedOutside] = useState(false); const toolbarRef = useRef(null); const ownMenuTriggerRef = useRef(null); const menuTriggerRef = suppliedMenuTriggerRef ?? ownMenuTriggerRef; useChatPopupDismissal(menuOpen, menuTriggerRef, () => setMenuOpen(false)); if (!reactionPicker && !onReply && !menuChildren) return null; return ( {reactionPicker?.(toolbarRef)} {onReply && ( { if (event.button === 0) event.preventDefault(); }} onClick={onReply} /> } /> } > {replyTooltip} )} {menuChildren && ( { setMenuDismissedOutside( details.reason === "outside-press" || details.reason === "focus-out", ); setMenuOpen(open); }} > } /> } /> } > {moreTooltip} {menuChildren} )} ); } 57:T9fd,"use client"; import { motion, useReducedMotion } from "motion/react"; import type { ReactElement } from "react"; import { cn } from "@/registry/default/lib/utils"; import { ChatBubble, type ChatBubbleProps } from "./chat-bubble"; export type ChatMessageBubbleProps = Omit< ChatBubbleProps, "align" | "variant" | "grouped" | "render" > & { side: "incoming" | "outgoing"; firstInGroup?: boolean; animateEntrance?: boolean; highlighted?: boolean; onAnimationComplete?: () => void; }; export function ChatMessageBubble({ side, firstInGroup = true, animateEntrance = false, highlighted = false, children, className, onAnimationComplete, ...props }: ChatMessageBubbleProps): ReactElement { const reduceMotion = useReducedMotion(); const entranceOrigin = side === "outgoing" ? "origin-top-right rtl:origin-top-left" : "origin-top-left rtl:origin-top-right"; return ( } > {children} {highlighted && ( ); } 58:T486,"use client"; import type { ReactElement, ReactNode } from "react"; import { type ChatMemberEntry, ChatMemberSection } from "./chat-members"; import { ChatMessageFooter } from "./chat-message-layout"; export type ChatMessageInfoProps = { message: ReactNode; metadata: ReactNode; groups: readonly { id: string; label: string; icon?: ReactNode; members: readonly ChatMemberEntry[]; }[]; }; export function ChatMessageInfo({ message, metadata, groups, }: ChatMessageInfoProps): ReactElement { return (

{message}

{metadata}

{groups.map((group) => ( {group.icon} {group.label} } members={group.members} /> ))}

); } 59:T9c6,"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import type { ComponentProps, ReactElement } from "react"; import { cn } from "@/registry/default/lib/utils"; export type ChatMessageLayoutProps = useRender.ComponentProps<"article"> & { align?: "start" | "end"; }; export function ChatMessageLayout({ align = "start", className, render, ...props }: ChatMessageLayoutProps): ReactElement { const defaultProps = { "data-slot": "chat-message", "data-align": align, className: cn( "group/message relative grid scroll-m-8 grid-cols-1 items-start rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring has-[>[data-slot=chat-message-avatar]]:grid-cols-[auto_minmax(0,1fr)] has-[>[data-slot=chat-message-avatar]]:gap-x-2 has-[>[data-slot=chat-message-header]]:gap-y-1", className, ), }; return useRender({ defaultTagName: "article", render, props: mergeProps<"article">(defaultProps, props), }); } export function ChatMessageAvatar({ className, ...props }: ComponentProps<"div">): ReactElement { return (

); } export function ChatMessageHeader({ className, ...props }: ComponentProps<"div">): ReactElement { return (

[data-slot=chat-message-avatar])]:col-start-2 row-start-1 px-1 font-medium text-muted-foreground text-xs group-data-[align=end]/message:justify-self-end", className, )} {...props} /> ); } export function ChatMessageContent({ className, ...props }: ComponentProps<"div">): ReactElement { return (

[data-slot=chat-message-avatar])]:col-start-2 row-start-2 flex min-w-0 flex-col gap-1 group-data-[align=end]/message:items-end", className, )} {...props} /> ); } export function ChatMessageFooter({ className, ...props }: ComponentProps<"div">): ReactElement { return (

); } 5a:T443,import type { ComponentProps, ReactElement } from "react"; import { cn } from "@/registry/default/lib/utils"; export type ChatMessageTextProps = Omit, "children"> & { text: string; mentions?: readonly string[]; }; export function ChatMessageText({ text, mentions = [], className, ...props }: ChatMessageTextProps): ReactElement { const names = new Set(mentions.map((name) => `@${name}`)); const parts = text.split(/(@[\p{L}\p{N}_.-]+)/u); return (

{parts.map((part, index) => { if (index > 0 && !/(?:^|\s)$/.test(parts[index - 1] ?? "")) return part; const mention = names.has(part) ? part : part.replace(/[.-]+$/, ""); if (!names.has(mention)) return part; return ( {mention} {part.slice(mention.length)} ); })}

); } 5b:Tbe5,"use client"; import type { ReactElement, ReactNode } from "react"; import { cn } from "@/registry/default/lib/utils"; import { ChatBubbleReactions } from "./chat-bubble"; import { ChatMessageBubble, type ChatMessageBubbleProps, } from "./chat-message-bubble"; import { ChatMessageAvatar, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, ChatMessageLayout, type ChatMessageLayoutProps, } from "./chat-message-layout"; import { ChatMessageText } from "./chat-message-text"; type ChatMessageAnimationProps = Pick< ChatMessageBubbleProps, "animateEntrance" | "highlighted" | "onAnimationComplete" >; export type ChatMessageProps = Omit< ChatMessageLayoutProps, "align" | "children" > & ChatMessageAnimationProps & { side: "incoming" | "outgoing"; author?: ReactNode; avatar?: ReactNode; grouped?: boolean; lifted?: boolean; children: ReactNode; actions?: ReactNode; reactions?: ReactNode; footer?: ReactNode; bubble?: boolean; bubbleProps?: Omit< ChatMessageBubbleProps, "side" | "firstInGroup" | "children" | keyof ChatMessageAnimationProps >; }; export function ChatMessage({ side, author, avatar, grouped = false, lifted = false, children, actions, reactions, footer, bubble = true, bubbleProps, animateEntrance, highlighted, onAnimationComplete, ...props }: ChatMessageProps): ReactElement { const own = side === "outgoing"; return ( {!own && !grouped && author && ( {author} )} {!own && avatar && ( {!grouped && avatar} )} {bubble ? (

{typeof children === "string" ? ( ) : ( children )}

{actions}

) : ( children )} {reactions && {reactions}} {footer && {footer}} ); } 5c:T1b4f,"use client"; import { motion, useReducedMotion } from "motion/react"; import type { ComponentProps, ReactElement, ReactNode } from "react"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/registry/default/lib/utils"; import { Popover, PopoverPopup, PopoverTrigger, } from "@/registry/default/ui/popover"; import { Toggle } from "@/registry/default/ui/toggle"; import { useChatPopupDismissal } from "./hooks/use-chat-popup-dismissal"; export type ChatReactionChipProps = { animateEntrance?: boolean; emoji: string; count: number; selected: boolean; label: string; onClick: () => void; reactorContent?: ReactNode; reactorLabel?: string; popupAlign?: ComponentProps["align"]; className?: string; }; export function ChatReactionChip({ animateEntrance = false, emoji, count, selected, label, onClick, className, reactorContent, reactorLabel, popupAlign, }: ChatReactionChipProps): ReactElement { const reduceMotion = useReducedMotion(); const [animateReaction, setAnimateReaction] = useState(false); const previouslySelected = useRef(selected); useEffect(() => { setAnimateReaction(selected && !previouslySelected.current); previouslySelected.current = selected; }, [selected]); const [open, setOpen] = useState(false); const triggerRef = useRef(null); const anchorRef = useRef(null); const popupRef = useRef(null); const holdTimer = useRef | null>(null); const touchOrigin = useRef<{ x: number; y: number } | null>(null); const suppressClick = useRef(false); const clearHold = useCallback((): void => { if (holdTimer.current !== null) clearTimeout(holdTimer.current); holdTimer.current = null; }, []); useEffect(() => clearHold, [clearHold]); useChatPopupDismissal(open, triggerRef, () => { clearHold(); if (touchOrigin.current) suppressClick.current = true; touchOrigin.current = null; setOpen(false); }); const chip = ( { if (suppressClick.current) { suppressClick.current = false; details.cancel(); return; } onClick(); }} > {emoji} {count} ); const content = !reactorContent ? ( chip ) : ( { if (details.reason === "trigger-press") { details.cancel(); return; } if ( details.reason === "trigger-hover" && !window.matchMedia("(hover: hover) and (pointer: fine)").matches ) { details.cancel(); return; } setOpen(nextOpen); }} > { if ( event.currentTarget.matches(":focus-visible") && !touchOrigin.current ) setOpen(true); }} onBlur={(event) => { if (!popupRef.current?.contains(event.relatedTarget)) setOpen(false); }} onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") suppressClick.current = false; }} onPointerDown={(event) => { suppressClick.current = false; if (event.pointerType !== "touch" || !event.isPrimary) return; touchOrigin.current = { x: event.clientX, y: event.clientY }; clearHold(); holdTimer.current = setTimeout(() => { holdTimer.current = null; suppressClick.current = true; setOpen(true); }, 500); }} onPointerMove={(event) => { const origin = touchOrigin.current; if ( !origin || Math.hypot(event.clientX - origin.x, event.clientY - origin.y) <= 8 ) return; clearHold(); suppressClick.current = true; touchOrigin.current = null; setOpen(false); }} onPointerUp={() => { clearHold(); touchOrigin.current = null; }} onPointerCancel={() => { clearHold(); touchOrigin.current = null; suppressClick.current = true; setOpen(false); }} onContextMenu={(event) => { if (touchOrigin.current || suppressClick.current) event.preventDefault(); }} /> {reactorContent} ); return ( {content} ); } 5d:Tc9d,"use client"; import { HeartIcon } from "lucide-react"; import type { ComponentProps, ReactElement } from "react"; import { useRef, useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { Popover, PopoverPopup, PopoverTrigger, } from "@/registry/default/ui/popover"; import { ToolbarButton } from "@/registry/default/ui/toolbar"; import { Tooltip, TooltipPopup, TooltipTrigger, } from "@/registry/default/ui/tooltip"; import { useChatPopupDismissal } from "./hooks/use-chat-popup-dismissal"; export type ChatReactionPickerProps = { inToolbar?: boolean; options: readonly { emoji: string; label: string }[]; selectedEmojis: readonly string[]; triggerLabel: string; triggerTooltip: string; popupLabel: string; popupAlign?: ComponentProps["align"]; popupAnchor?: ComponentProps["anchor"]; onSelect: (emoji: string) => void; }; export function ChatReactionPicker({ inToolbar = false, options, selectedEmojis, triggerLabel, triggerTooltip, popupLabel, popupAlign, popupAnchor, onSelect, }: ChatReactionPickerProps): ReactElement { const [open, setOpen] = useState(false); const triggerRef = useRef(null); useChatPopupDismissal(open, triggerRef, () => setOpen(false)); const trigger = ( { if (event.button === 0) event.preventDefault(); }} /> } /> ); return ( : trigger} > {triggerTooltip} interaction === "keyboard"} finalFocus={(interaction) => interaction === "keyboard"} className="transform-gpu rounded-full before:rounded-full **:data-[slot=popover-viewport]:p-1" >

{options.map(({ emoji, label }) => ( ))}

); } 5e:T203a,"use client"; import { XIcon } from "lucide-react"; import { motion, usePresence, useReducedMotion } from "motion/react"; import type { ReactElement, ReactNode, RefObject } from "react"; import { useLayoutEffect, useRef, useState } from "react"; import { cn } from "@/registry/default/lib/utils"; import { Button } from "@/registry/default/ui/button"; import { ScrollArea } from "@/registry/default/ui/scroll-area"; import { Tooltip, TooltipPopup, TooltipTrigger, } from "@/registry/default/ui/tooltip"; import { ChatMessageBubble } from "./chat-message-bubble"; export type ChatReplyTarget = { source: HTMLDivElement; width: number; firstInGroup: boolean; }; export type ChatReplyPreviewProps = { target: ChatReplyTarget; side: "incoming" | "outgoing"; avatar?: ReactNode; author: ReactNode; replyLabel: ReactNode; cancelLabel: string; children: ReactNode; dismissalRef: RefObject<"cancel" | "send">; onCancel: () => void; }; export function ChatReplyPreview({ target, side, avatar, author, replyLabel, cancelLabel, children, dismissalRef, onCancel, }: ChatReplyPreviewProps): ReactElement { const anchorRef = useRef(null); const bubbleRef = useRef(null); const [origin, setOrigin] = useState(null); const reduceMotion = useReducedMotion(); const [isPresent, safeToRemove] = usePresence(); const own = side === "outgoing"; // biome-ignore lint/correctness/useExhaustiveDependencies: Remeasure the source on exit after the viewport or keyboard may have moved. useLayoutEffect(() => { const anchor = anchorRef.current; const bubble = bubbleRef.current; if (!anchor || !bubble) return; const destination = anchor.getBoundingClientRect(); const source = target.source.getBoundingClientRect(); setOrigin(source.top - destination.top - bubble.offsetTop); }, [isPresent, target]); const returning = dismissalRef.current === "cancel" && target.source.isConnected; return ( <> { if (event.button === 0) event.preventDefault(); }} onWheel={(event) => event.preventDefault()} />

{ if (!isPresent) safeToRemove?.(); }} className={cn( "relative grid items-start gap-y-1", own ? "grid-cols-1" : "grid-cols-[1.75rem_minmax(0,1fr)] gap-x-2", origin === null && "invisible", )} > {!own && ( {avatar} )} {isPresent ? replyLabel : author}

{children} { if (event.button === 0) event.preventDefault(); }} onClick={onCancel} /> } > {cancelLabel}

); } 5f:T51c,"use client"; import { CornerDownRightIcon } from "lucide-react"; import type { ComponentProps, ReactElement } from "react"; import { cn } from "@/registry/default/lib/utils"; export type ChatReplyReferenceProps = Omit< ComponentProps<"button">, "children" > & { author: string; preview: string; }; export function ChatReplyReference({ author, preview, className, ...props }: ChatReplyReferenceProps): ReactElement { return ( ); } 60:Tc43,"use client"; import type { ReactElement, ReactNode } from "react"; import { Children } from "react"; import { cn } from "@/registry/default/lib/utils"; import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/registry/default/ui/empty"; import { Skeleton } from "@/registry/default/ui/skeleton"; import { ChatMessageAvatar, ChatMessageContent, ChatMessageHeader, ChatMessageLayout, } from "./chat-message-layout"; export type ChatEmptyStateProps = { title: ReactNode; description: ReactNode; icon: ReactNode; children?: ReactNode; }; export function ChatEmptyState({ title, description, icon, children, }: ChatEmptyStateProps): ReactElement { return ( {icon} {title} {description} {Children.toArray(children).length > 0 && ( {children} )} ); } const LOADING_ROWS = [ { id: "first", side: "incoming" }, { id: "second", side: "outgoing" }, { id: "third", side: "incoming" }, { id: "fourth", side: "outgoing" }, ] as const; export function ChatLoadingState({ label, children, }: { label: string; children?: ReactNode; }): ReactElement { return (

{label} {LOADING_ROWS.map(({ side, id }) => ( ))} {children}

); } export function ChatStatusBar({ title, description, action, }: { title: ReactNode; description: ReactNode; action?: ReactNode; }): ReactElement { return (

{title}

{description}

{action}

); } 61:Td7b,"use client"; import { AnimatePresence, motion, usePresence, useReducedMotion, } from "motion/react"; import type { ComponentProps, ReactElement } from "react"; import { Fragment } from "react"; import { cn } from "@/registry/default/lib/utils"; export type ChatTypingIndicatorProps = Omit< ComponentProps<"div">, "children" > & { label: string; visible?: boolean; }; export function ChatTypingIndicator({ label, visible = true, className, ...props }: ChatTypingIndicatorProps): ReactElement { return ( {visible && ( )} ); } function ChatTypingIndicatorContent({ label, className, ...props }: Omit): ReactElement { const reduceMotion = useReducedMotion(); const [isPresent, safeToRemove] = usePresence(); return ( { if (!isPresent) safeToRemove?.(); }} >

{label}

); } 62:Tcaf,"use client"; import { type RefObject, useEffect, useRef } from "react"; export function useChatPopupDismissal( active: boolean, triggerRef: RefObject, onDismiss: () => void, ): void { const onDismissRef = useRef(onDismiss); useEffect(() => { onDismissRef.current = onDismiss; }, [onDismiss]); useEffect(() => { const trigger = triggerRef.current; if (!active || !trigger) return; const ownerDocument = trigger.ownerDocument; const onScrollInput = (event: Event): void => { if (!(event.target instanceof Element)) return; if (event.target.closest('[role="menu"], [data-slot="popover-popup"]')) return; if (event instanceof KeyboardEvent) { if ( event.defaultPrevented || ![ "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End", " ", ].includes(event.key) || event.altKey || event.ctrlKey || event.metaKey || event.target.closest( "input, textarea, select, button, a, [contenteditable], [role=menu], [role=listbox], [role=combobox], [role=slider], [role=tablist]", ) ) return; } const isScrollable = (element: Element): boolean => { const style = getComputedStyle(element); const page = element === ownerDocument.scrollingElement; return ( (element.scrollHeight > element.clientHeight && (page || /auto|scroll/.test(style.overflowY))) || (element.scrollWidth > element.clientWidth && (page || /auto|scroll/.test(style.overflowX))) ); }; // Dismiss on input in the scroller, never on automatic scrolling or menu navigation. for ( let element: Element | null = event.target; element; element = element.parentElement ) { if (!isScrollable(element)) continue; if (element.contains(trigger)) onDismissRef.current(); return; } // Modal menus intercept wheel/touch input with a backdrop over the scroller. const point = event instanceof WheelEvent ? event : event instanceof TouchEvent ? event.touches[0] : undefined; if (!point) return; for ( let element = trigger.parentElement; element; element = element.parentElement ) { if (!isScrollable(element)) continue; const bounds = element.getBoundingClientRect(); if ( point.clientX >= bounds.left && point.clientX <= bounds.right && point.clientY >= bounds.top && point.clientY <= bounds.bottom ) { onDismissRef.current(); return; } } }; const scrollInputs = ["wheel", "touchmove", "keydown"] as const; for (const type of scrollInputs) ownerDocument.addEventListener(type, onScrollInput, { passive: true }); return () => { for (const type of scrollInputs) ownerDocument.removeEventListener(type, onScrollInput); }; }, [active, triggerRef]); } 63:Tbad,"use client"; import { type UIEvent, useEffect, useLayoutEffect, useRef, useState, } from "react"; export type ChatScrollOptions = { active?: boolean; paused?: boolean; itemCount: number; layoutKey?: string | number; onReachEnd?: () => void; }; export function useChatScroll({ active = true, paused = false, itemCount, layoutKey, onReachEnd, }: ChatScrollOptions) { const viewportRef = useRef(null); const atBottomRef = useRef(true); const [showJump, setShowJump] = useState(false); // biome-ignore lint/correctness/useExhaustiveDependencies: Follow content changes before scroll events can misinterpret the new height. useLayoutEffect(() => { const viewport = viewportRef.current; if (!active || paused || !viewport) return; // Follow before a scroll event can interpret newly added height as scrolling away. if (atBottomRef.current) { viewport.scrollTop = viewport.scrollHeight; setShowJump(false); } else { setShowJump( viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight > 64, ); } }, [active, paused, itemCount, layoutKey]); useEffect(() => { if (!active || paused) return; let observer: ResizeObserver | undefined; const frame = requestAnimationFrame(() => { const viewport = viewportRef.current; if (!viewport) return; observer = new ResizeObserver(() => { if (atBottomRef.current) viewport.scrollTop = viewport.scrollHeight; }); observer.observe(viewport); if (viewport.firstElementChild) observer.observe(viewport.firstElementChild); }); return () => { cancelAnimationFrame(frame); observer?.disconnect(); }; }, [active, paused]); const updatePosition = (): void => { const viewport = viewportRef.current; atBottomRef.current = Boolean( viewport && viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight < 64, ); }; const onScroll = (_event: UIEvent): void => { if (paused) return; updatePosition(); setShowJump(!atBottomRef.current); if (atBottomRef.current) onReachEnd?.(); }; const resetScroll = (atBottom = true): void => { atBottomRef.current = atBottom; setShowJump(!atBottom); requestAnimationFrame(() => { const viewport = viewportRef.current; if (viewport) viewport.scrollTop = atBottom ? viewport.scrollHeight : 0; }); }; const scrollToLatest = (): void => { atBottomRef.current = true; const viewport = viewportRef.current; viewport?.scrollTo({ top: viewport.scrollHeight, behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth", }); }; return { viewportRef, atBottomRef, showJump, onScroll, resetScroll, updatePosition, scrollToLatest, }; } export type ChatScrollController = ReturnType; 64:T479,export function splitChatMessagePreview( text: string, maxPreviewLength = 500, ): { preview: string; remainder: string | null } { if (text.length <= maxPreviewLength) return { preview: text, remainder: null }; const limit = Math.max(1, Math.floor(maxPreviewLength)); const paragraphBreak = text.lastIndexOf("\n\n", limit); let splitAt = limit; if (paragraphBreak > limit / 2) { splitAt = paragraphBreak; } else { for (let index = limit; index > 0; index--) { if (/\s/u.test(text[index] ?? "")) { splitAt = index; break; } } } if (typeof Intl.Segmenter === "function") { const segments = new Intl.Segmenter(undefined, { granularity: "grapheme", }).segment(text); for (const { index, segment } of segments) { if (index + segment.length > splitAt) { splitAt = index || segment.length; break; } } } else if (/^[\uDC00-\uDFFF]$/u.test(text[splitAt] ?? "")) { splitAt = splitAt === 1 ? 2 : splitAt - 1; } return { preview: text.slice(0, splitAt).trimEnd(), remainder: text.slice(splitAt).trimStart() || null, }; } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion@14.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@14.0.0"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","@base-ui/react@1.8.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react@1.8.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@coss","registryDependencies":["@coss/button","@coss/collapsible","@coss/empty","@coss/menu","@coss/popover","@coss/scroll-area","@coss/skeleton","@coss/toggle","@coss/toolbar","@coss/tooltip","@coss/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/chat/chat-bubble.tsx","content":"$52","type":"registry:component","target":"@components/chat/chat-bubble.tsx"},{"path":"registry/default/chat/chat-collapsible-message.tsx","content":"$53","type":"registry:component","target":"@components/chat/chat-collapsible-message.tsx"},{"path":"registry/default/chat/chat-conversation.tsx","content":"$54","type":"registry:component","target":"@components/chat/chat-conversation.tsx"},{"path":"registry/default/chat/chat-date-pill.tsx","content":"\"use client\";\n\nimport type { ComponentProps, ReactElement } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function ChatDatePill({\n className,\n ...props\n}: ComponentProps<\"div\">): ReactElement {\n return (\n \n );\n}\n","type":"registry:component","target":"@components/chat/chat-date-pill.tsx"},{"path":"registry/default/chat/chat-delivery-indicator.tsx","content":"\"use client\";\n\nimport {\n CheckCheckIcon,\n CheckIcon,\n CircleAlertIcon,\n ClockIcon,\n} from \"lucide-react\";\nimport type { ReactElement } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type ChatDeliveryIndicatorProps = {\n status: \"sending\" | \"sent\" | \"delivered\" | \"read\" | \"failed\";\n label: string;\n};\n\nexport function ChatDeliveryIndicator({\n status,\n label,\n}: ChatDeliveryIndicatorProps): ReactElement {\n const Icon = {\n sending: ClockIcon,\n sent: CheckIcon,\n delivered: CheckCheckIcon,\n read: CheckCheckIcon,\n failed: CircleAlertIcon,\n }[status];\n\n return (\n \n \n \n );\n}\n","type":"registry:component","target":"@components/chat/chat-delivery-indicator.tsx"},{"path":"registry/default/chat/chat-jump-to-latest-button.tsx","content":"\"use client\";\n\nimport { ArrowDownIcon } from \"lucide-react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button, type ButtonProps } from \"@/registry/default/ui/button\";\n\nexport type ChatJumpToLatestButtonProps = Omit<\n ButtonProps,\n \"children\" | \"size\" | \"variant\"\n> & {\n children: ReactNode;\n};\n\nexport function ChatJumpToLatestButton({\n className,\n children,\n ...props\n}: ChatJumpToLatestButtonProps): ReactElement {\n return (\n \n \n \n {children}\n \n

\n );\n}\n","type":"registry:component","target":"@components/chat/chat-jump-to-latest-button.tsx"},{"path":"registry/default/chat/chat-members.tsx","content":"$55","type":"registry:component","target":"@components/chat/chat-members.tsx"},{"path":"registry/default/chat/chat-message-actions.tsx","content":"$56","type":"registry:component","target":"@components/chat/chat-message-actions.tsx"},{"path":"registry/default/chat/chat-message-bubble.tsx","content":"$57","type":"registry:component","target":"@components/chat/chat-message-bubble.tsx"},{"path":"registry/default/chat/chat-message-info.tsx","content":"$58","type":"registry:component","target":"@components/chat/chat-message-info.tsx"},{"path":"registry/default/chat/chat-message-layout.tsx","content":"$59","type":"registry:component","target":"@components/chat/chat-message-layout.tsx"},{"path":"registry/default/chat/chat-message-text.tsx","content":"$5a","type":"registry:component","target":"@components/chat/chat-message-text.tsx"},{"path":"registry/default/chat/chat-message.tsx","content":"$5b","type":"registry:component","target":"@components/chat/chat-message.tsx"},{"path":"registry/default/chat/chat-reaction-chip.tsx","content":"$5c","type":"registry:component","target":"@components/chat/chat-reaction-chip.tsx"},{"path":"registry/default/chat/chat-reaction-picker.tsx","content":"$5d","type":"registry:component","target":"@components/chat/chat-reaction-picker.tsx"},{"path":"registry/default/chat/chat-reply-preview.tsx","content":"$5e","type":"registry:component","target":"@components/chat/chat-reply-preview.tsx"},{"path":"registry/default/chat/chat-reply-reference.tsx","content":"$5f","type":"registry:component","target":"@components/chat/chat-reply-reference.tsx"},{"path":"registry/default/chat/chat-states.tsx","content":"$60","type":"registry:component","target":"@components/chat/chat-states.tsx"},{"path":"registry/default/chat/chat-typing-indicator.tsx","content":"$61","type":"registry:component","target":"@components/chat/chat-typing-indicator.tsx"},{"path":"registry/default/chat/chat-unread-divider.tsx","content":"\"use client\";\n\nimport type { ComponentProps, ReactElement } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function ChatUnreadDivider({\n children,\n className,\n ...props\n}: ComponentProps<\"div\">): ReactElement {\n return (\n \n \n {children}\n \n

\n );\n}\n","type":"registry:component","target":"@components/chat/chat-unread-divider.tsx"},{"path":"registry/default/chat/hooks/use-chat-popup-dismissal.ts","content":"$62","type":"registry:component","target":"@components/chat/hooks/use-chat-popup-dismissal.ts"},{"path":"registry/default/chat/hooks/use-chat-scroll.ts","content":"$63","type":"registry:component","target":"@components/chat/hooks/use-chat-scroll.ts"},{"path":"registry/default/chat/lib/split-chat-message-preview.ts","content":"$64","type":"registry:component","target":"@components/chat/lib/split-chat-message-preview.ts"}],"className":"h-[70svh] min-h-80"}]]}]