5e: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60:T4430,'use client' import * as React from 'react' import { ArrowUpIcon } from 'lucide-react' import debounce from 'debounce' import useMeasure from 'react-use-measure' import { cn } from '@/lib/utils' import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupTextarea, } from '@/components/ui/input-group' import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar' import { useUserInterruption } from '@/hooks/use-interruption' import { useComposedRefs } from '@/registry/lib/compose-refs' type ChatMessageVariant = 'self' | 'peer' | 'system' /* ------------------------------------------------------------------------------------------------- * ChatSubmitEvent * -------------------------------------------------------------------------------------------------*/ export class ChatSubmitEvent { readonly form: HTMLFormElement readonly input: HTMLInputElement | HTMLTextAreaElement | null readonly message: string defaultPrevented = false constructor(data: { form: HTMLFormElement input: HTMLInputElement | HTMLTextAreaElement | null message: string }) { this.form = data.form this.input = data.input this.message = data.message } preventDefault() { this.defaultPrevented = true } } /* ------------------------------------------------------------------------------------------------- * Chat Context * -------------------------------------------------------------------------------------------------*/ type ChatContextValue = { inputRef: React.RefObject viewportRef: React.RefObject scrollToBottom: (behavior?: ScrollBehavior) => void onSubmit?: (event: ChatSubmitEvent) => void onViewportHeightChange: (height: number) => void onInputHeightChange: (height: number) => void } const ChatContext = React.createContext(null) function useChatContext() { const context = React.useContext(ChatContext) if (!context) { throw new Error('Chat components must be used within a component') } return context } /* ------------------------------------------------------------------------------------------------- * Chat * -------------------------------------------------------------------------------------------------*/ type ChatProps = { onSubmit?: (event: ChatSubmitEvent) => void bottomThreshold?: number children: React.ReactNode } export function Chat({ onSubmit, bottomThreshold = 24, children }: ChatProps) { const [isAtBottom, setIsAtBottom] = React.useState(true) const { interruptedRef, interrupt } = useUserInterruption(200) const viewportRef = React.useRef(null) const inputRef = React.useRef(null) const isAtBottomRef = React.useRef(true) const isScrollingToBottomRef = React.useRef(false) const prevViewportHeightRef = React.useRef(0) const prevInputHeightRef = React.useRef(0) React.useEffect(() => { isAtBottomRef.current = isAtBottom }, [isAtBottom]) const scrollToBottom = React.useCallback( (behavior: ScrollBehavior = 'smooth') => { const viewport = viewportRef.current if (!viewport || interruptedRef.current) return isScrollingToBottomRef.current = true viewport.scrollTo({ top: viewport.scrollHeight, behavior }) }, [interruptedRef] ) const checkIfAtBottom = React.useCallback(() => { const viewport = viewportRef.current if (!viewport) return false const { scrollTop, scrollHeight, clientHeight } = viewport const distanceFromBottom = scrollHeight - scrollTop - clientHeight return distanceFromBottom <= bottomThreshold }, [bottomThreshold]) React.useEffect(() => { const viewport = viewportRef.current if (!viewport) return const handleScroll = debounce(() => { const actuallyAtBottom = checkIfAtBottom() if (isScrollingToBottomRef.current) { if (actuallyAtBottom) { isScrollingToBottomRef.current = false } setIsAtBottom(true) return } setIsAtBottom(actuallyAtBottom) }, 100) const handleUserInterrupt = () => { if (isScrollingToBottomRef.current) { isScrollingToBottomRef.current = false setIsAtBottom(checkIfAtBottom()) } interrupt() } viewport.addEventListener('scroll', handleScroll) viewport.addEventListener('wheel', handleUserInterrupt, { passive: true }) viewport.addEventListener('touchstart', handleUserInterrupt, { passive: true, }) return () => { viewport.removeEventListener('scroll', handleScroll) viewport.removeEventListener('wheel', handleUserInterrupt) viewport.removeEventListener('touchstart', handleUserInterrupt) } }, [bottomThreshold, interrupt, checkIfAtBottom]) const onViewportHeightChange = React.useCallback( (height: number) => { if (!isAtBottomRef.current) return const viewportHeightChange = height - prevViewportHeightRef.current if (viewportHeightChange > 0) { scrollToBottom() } prevViewportHeightRef.current = height }, [scrollToBottom] ) const onInputHeightChange = React.useCallback( (height: number) => { if (!isAtBottomRef.current) return const inputHeightChange = height - prevInputHeightRef.current if (inputHeightChange > 0) { scrollToBottom() } prevInputHeightRef.current = height }, [scrollToBottom] ) const contextValue = React.useMemo( () => ({ viewportRef, inputRef, scrollToBottom, onSubmit, onViewportHeightChange, onInputHeightChange, }), [scrollToBottom, onSubmit, onViewportHeightChange, onInputHeightChange] ) return ( {children} ) } export { useChatContext } /* ------------------------------------------------------------------------------------------------- * ChatViewport * -------------------------------------------------------------------------------------------------*/ export function ChatViewport({ className, ...props }: React.ComponentProps<'div'>) { const { viewportRef, scrollToBottom } = useChatContext() React.useLayoutEffect(() => { scrollToBottom('instant') }, [scrollToBottom]) return (

) } /* ------------------------------------------------------------------------------------------------- * ChatMessages * -------------------------------------------------------------------------------------------------*/ export function ChatMessages({ className, ...props }: React.ComponentProps<'div'>) { const { onViewportHeightChange } = useChatContext() const [ref, { height }] = useMeasure() React.useEffect(() => { onViewportHeightChange(height) }, [height, onViewportHeightChange]) return

} /* ------------------------------------------------------------------------------------------------- * ChatMessage * -------------------------------------------------------------------------------------------------*/ type ChatMessageProps = React.ComponentProps<'div'> & { variant?: ChatMessageVariant } export function ChatMessageRow({ className, variant = 'self', ...props }: ChatMessageProps) { return (

) } /* ------------------------------------------------------------------------------------------------- * ChatMessageAvatar * -------------------------------------------------------------------------------------------------*/ type ChatMessageAvatarProps = React.ComponentProps & { src?: string alt?: string fallback?: React.ReactNode } export function ChatMessageAvatar({ className, src, alt, fallback, children, ...props }: ChatMessageAvatarProps) { return ( {src && } {fallback ?? children} ) } /* ------------------------------------------------------------------------------------------------- * ChatMessageBubble * -------------------------------------------------------------------------------------------------*/ type ChatMessageBubbleProps = React.ComponentProps<'div'> export function ChatMessageBubble({ className, ...props }: ChatMessageBubbleProps) { return (

) } /* ------------------------------------------------------------------------------------------------- * ChatMessageAddon * -------------------------------------------------------------------------------------------------*/ type ChatMessageAddonProps = React.ComponentProps<'div'> & { align?: 'inline' | 'block' } export function ChatMessageAddon({ className, align = 'block', ...props }: ChatMessageAddonProps) { return (

) } /* ------------------------------------------------------------------------------------------------- * ChatMessageTime * -------------------------------------------------------------------------------------------------*/ export function ChatMessageTime({ className, dateTime, children, ...props }: Omit, 'dateTime'> & { dateTime: Date }) { return ( {children ?? dateTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', })} ) } /* ------------------------------------------------------------------------------------------------- * ChatInputArea * -------------------------------------------------------------------------------------------------*/ type ChatInputAreaProps = Omit< React.ComponentProps<'form'>, 'children' | 'onSubmit' > & Pick, 'children'> export function ChatInputArea({ className, children, ...props }: ChatInputAreaProps) { const { onSubmit: onSubmitContext, inputRef, scrollToBottom, onInputHeightChange, } = useChatContext() const [areaRef, { height }] = useMeasure() const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const form = e.currentTarget const input = inputRef.current const message = input?.value.trim() if (!message || !input) return const event = new ChatSubmitEvent({ form, input, message, }) onSubmitContext?.(event) if (!event.defaultPrevented) { form.reset() } requestAnimationFrame(() => { scrollToBottom('smooth') }) } React.useEffect(() => { onInputHeightChange(height) }, [height, onInputHeightChange]) return ( ) } function ChatMultilineInput({ ref, ...props }: React.ComponentProps) { const textareaRef = React.useRef(null) const composedRef = useComposedRefs(ref, textareaRef) React.useEffect(() => { const textarea = textareaRef.current if (!textarea) return const supportsFieldSizing = CSS.supports('field-sizing', 'content') const handleInput = () => { if (!supportsFieldSizing) { textarea.style.height = '0' textarea.style.height = `${textarea.scrollHeight}px` } textarea.scrollTop = textarea.scrollHeight } handleInput() textarea.addEventListener('input', handleInput) return () => { textarea.removeEventListener('input', handleInput) } }, []) return } function ChatSinglelineInput({ ...props }: React.ComponentProps) { return } type TextareaProps = Omit< React.ComponentProps, 'multiline' > type InputProps = Omit< React.ComponentProps, 'multiline' > type ChatInputProps = | ({ multiline: true } & TextareaProps) | ({ multiline: false } & InputProps) export function ChatInputField({ ref, ...rest }: ChatInputProps) { const { inputRef } = useChatContext() const composedRef = useComposedRefs( ref, inputRef ) const submitOnEnter = ( e: React.KeyboardEvent ) => { if (e.key === 'Enter' && !e.shiftKey && !e.defaultPrevented) { e.preventDefault() e.currentTarget.form?.requestSubmit() } } if (rest.multiline) { const { className, onKeyDown, multiline: _, ..._rest } = rest return ( <> { onKeyDown?.(e) submitOnEnter(e) }} {..._rest} ref={composedRef} /> ) } const { className, onKeyDown, multiline: _, ..._rest } = rest return ( { onKeyDown?.(e) submitOnEnter(e) }} {..._rest} ref={composedRef} /> ) } export function ChatInputSubmit({ className, disabled, children, ...props }: React.ComponentProps) { return ( {children ?? ( <> Send )} ) } 61:T736,import * as React from "react"; type PossibleRef = React.Ref | undefined; /** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */ function setRef(ref: PossibleRef, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { ref.current = value; } } /** * A utility to compose multiple refs together * Accepts callback refs and RefObject(s) */ function composeRefs(...refs: PossibleRef[]): React.RefCallback { return (node) => { let hasCleanup = false; const cleanups = refs.map((ref) => { const cleanup = setRef(ref, node); if (!hasCleanup && typeof cleanup === "function") { hasCleanup = true; } return cleanup; }); // React <19 will log an error to the console if a callback ref returns a // value. We don't use ref cleanups internally so this will only happen if a // user's ref callback returns a value, which we only expect if they are // using the cleanup functionality added in React 19. if (hasCleanup) { return () => { for (let i = 0; i < cleanups.length; i++) { const cleanup = cleanups[i]; if (typeof cleanup === "function") { cleanup(); } else { setRef(refs[i], null); } } }; } }; } /** * A custom hook that composes multiple refs * Accepts callback refs and RefObject(s) */ function useComposedRefs(...refs: PossibleRef[]): React.RefCallback { // biome-ignore lint/correctness/useExhaustiveDependencies: we want to memoize by all values // eslint-disable-next-line react-hooks/use-memo return React.useCallback(composeRefs(...refs), refs); } export { composeRefs, useComposedRefs }; 5d:["$","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","debounce",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/debounce","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":"debounce"}]]}]}],["$","li","react-use-measure",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-use-measure","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":"react-use-measure"}]]}]}]]}],["$","$L5e",null,{"namespace":"@joyco","registryDependencies":["@joyco/input-group","@joyco/avatar","@joyco/utils"]}]]}],null]}],["$","$L5f",null,{"files":[{"path":"registry/components/chat.tsx","content":"$60","type":"registry:component"},{"path":"hooks/use-interruption.ts","content":"import * as React from 'react'\n\n/**\n * Hook to manage user interruption state with a timeout-based cooldown.\n * When `interrupt` is called, sets a flag for a duration that can be checked via `isInterruptedRef`.\n */\nexport const useUserInterruption = (duration: number = 200) => {\n const interruptedRef = React.useRef(false)\n const timeoutRef = React.useRef | null>(null)\n\n const interrupt = React.useCallback(() => {\n interruptedRef.current = true\n\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n\n timeoutRef.current = setTimeout(() => {\n interruptedRef.current = false\n timeoutRef.current = null\n }, duration)\n }, [duration])\n\n React.useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n }\n }, [])\n\n return { interruptedRef, interrupt }\n}\n","type":"registry:hook"},{"path":"registry/lib/compose-refs.ts","content":"$61","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]