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:T1423,"use client"; import { type KeyboardEvent, type PointerEvent, type RefObject, useRef, useState, } from "react"; export type ModalView = "thread" | "list"; type ModalSize = { readonly width: number; readonly height: number }; type ResizeDrag = { readonly pointerId: number; readonly x: number; readonly y: number; readonly width: number; readonly height: number; readonly direction: 1 | -1; last: ModalSize | null; }; const SIZE_STORAGE_KEY = "aui-modal-size"; const MIN_SIZE: ModalSize = { width: 320, height: 400 }; // The trigger and its offsets sit below the modal, so the height leaves room for them. const VIEWPORT_INSET: ModalSize = { width: 32, height: 96 }; const RESIZE_STEP = 16; const clampSize = ({ width, height }: ModalSize): ModalSize => ({ width: Math.round( Math.max( MIN_SIZE.width, Math.min(width, window.innerWidth - VIEWPORT_INSET.width), ), ), height: Math.round( Math.max( MIN_SIZE.height, Math.min(height, window.innerHeight - VIEWPORT_INSET.height), ), ), }); const readStoredSize = (): ModalSize | null => { if (typeof window === "undefined") return null; try { const stored: unknown = JSON.parse( window.localStorage.getItem(SIZE_STORAGE_KEY) ?? "null", ); if (typeof stored !== "object" || stored === null) return null; const { width, height } = stored as Record; if (typeof width !== "number" || typeof height !== "number") return null; return clampSize({ width, height }); } catch { return null; } }; const storeSize = (size: ModalSize | null) => { try { if (size) { window.localStorage.setItem(SIZE_STORAGE_KEY, JSON.stringify(size)); } else { window.localStorage.removeItem(SIZE_STORAGE_KEY); } } catch { // Without storage the size lasts until the page reloads. } }; const isRtl = (element: Element) => getComputedStyle(element).direction === "rtl"; export const useModalSize = (contentRef: RefObject) => { const [size, setSize] = useState(readStoredSize); const dragRef = useRef(null); const commitSize = (next: ModalSize | null) => { setSize(next); storeSize(next); }; const sizeFromPointer = ( drag: ResizeDrag, event: PointerEvent, ) => clampSize({ width: drag.width - (event.clientX - drag.x) * drag.direction, height: drag.height - (event.clientY - drag.y), }); const takeDrag = (event: PointerEvent) => { const drag = dragRef.current; if (!drag || drag.pointerId !== event.pointerId) return null; dragRef.current = null; return drag; }; const reset = () => { dragRef.current = null; commitSize(null); }; return { size, reset, handleProps: { onPointerDown: (event: PointerEvent) => { const content = contentRef.current; if (event.button !== 0 || !content) return; const rect = content.getBoundingClientRect(); dragRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, width: rect.width, height: rect.height, direction: isRtl(content) ? -1 : 1, last: null, }; event.currentTarget.setPointerCapture(event.pointerId); event.preventDefault(); }, onPointerMove: (event: PointerEvent) => { const drag = dragRef.current; if (!drag || drag.pointerId !== event.pointerId) return; if (!drag.last && event.clientX === drag.x && event.clientY === drag.y) return; drag.last = sizeFromPointer(drag, event); setSize(drag.last); }, onPointerUp: (event: PointerEvent) => { const drag = takeDrag(event); if (!drag) return; if (drag.last || event.clientX !== drag.x || event.clientY !== drag.y) { commitSize(sizeFromPointer(drag, event)); } }, onPointerCancel: (event: PointerEvent) => { const drag = takeDrag(event); if (drag?.last) commitSize(drag.last); }, onKeyDown: (event: KeyboardEvent) => { const content = contentRef.current; if (!content) return; if (event.key === "Enter" || event.key === " ") { event.preventDefault(); reset(); return; } const step = event.shiftKey ? RESIZE_STEP * 4 : RESIZE_STEP; const rtl = isRtl(content); const changes: Record = { ArrowUp: [0, step], ArrowDown: [0, -step], [rtl ? "ArrowRight" : "ArrowLeft"]: [step, 0], [rtl ? "ArrowLeft" : "ArrowRight"]: [-step, 0], }; const change = changes[event.key]; if (!change) return; event.preventDefault(); const rect = content.getBoundingClientRect(); commitSize( clampSize({ width: rect.width + change[0], height: rect.height + change[1], }), ); }, }, }; }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"components/assistant-ui/utils/modal-size.ts","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]