@rkosafo/cai.components 0.0.74 → 0.0.78

package/dist/layout/Chat/DraggableWindow.svelte

@@ -1,230 +1,230 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-	import type { DraggableWindowProps } from './types.js';
-
-	let {
-		title,
-		isOpen = $bindable(true),
-		isCollapsed = $bindable(false),
-		width = '500px',
-		height = '400px',
-		x = $bindable(100),
-		y = $bindable(100),
-		minWidth = '300px',
-		minHeight = '200px',
-		zIndex = 3000,
-		onBringToFront
-	}: DraggableWindowProps = $props();
-
-	let startX = $state<number | undefined>();
-	let startY = $state<number | undefined>();
-	let isDragging = $state(false);
-	let isResizing = $state(false);
-	let resizeDirection: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' | null = null;
-	let startWidth = $state<number | undefined>();
-	let startHeight = $state<number | undefined>();
-
-	function startDrag(e: MouseEvent) {
-		if (isResizing) return;
-		isDragging = true;
-		startX = e.clientX - x;
-		startY = e.clientY - y;
-		window.addEventListener('mousemove', handleDrag);
-		window.addEventListener('mouseup', stopDrag);
-		// bringToFront();
-	}
-
-	function handleDrag(e: MouseEvent) {
-		if (isDragging) {
-			x = e.clientX - startX!;
-			y = e.clientY - startY!;
-		} else if (isResizing) {
-			const deltaX = e.clientX - startX!;
-			const deltaY = e.clientY - startY!;
-
-			if (resizeDirection?.includes('e')) {
-				width = `${Math.max(parseInt(minWidth), startWidth! + deltaX)}px`;
-			}
-			if (resizeDirection?.includes('w')) {
-				const newWidth = Math.max(parseInt(minWidth), startWidth! - deltaX);
-				width = `${newWidth}px`;
-				x += startWidth! - newWidth;
-			}
-			if (resizeDirection?.includes('s')) {
-				height = `${Math.max(parseInt(minHeight), startHeight! + deltaY)}px`;
-			}
-			if (resizeDirection?.includes('n')) {
-				const newHeight = Math.max(parseInt(minHeight), startHeight! - deltaY);
-				height = `${newHeight}px`;
-				y += startHeight! - newHeight;
-			}
-		}
-	}
-
-	function stopDrag() {
-		isDragging = false;
-		isResizing = false;
-		resizeDirection = null;
-		window.removeEventListener('mousemove', handleDrag);
-		window.removeEventListener('mouseup', stopDrag);
-	}
-
-	function startResize(e: MouseEvent, direction: typeof resizeDirection) {
-		e.stopPropagation();
-		isResizing = true;
-		resizeDirection = direction;
-		startX = e.clientX;
-		startY = e.clientY;
-		startWidth = parseInt(width);
-		startHeight = parseInt(height);
-		window.addEventListener('mousemove', handleDrag);
-		window.addEventListener('mouseup', stopDrag);
-	}
-
-	function toggleCollapse(event: any) {
-		event.stopPropagation();
-		isCollapsed = !isCollapsed;
-	}
-
-	function bringToFront() {
-		onBringToFront?.();
-	}
-
-	function closeWindow(event: any) {
-		event.stopPropagation();
-		isOpen = false;
-	}
-	function handleWindowClick() {
-		if (!isDragging && !isResizing) {
-			bringToFront();
-		}
-	}
-</script>
-
-{#if isOpen}
-	<div
-		class="absolute flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-xl"
-		style={`width: ${width}; height: ${isCollapsed ? '40px' : height}; left: ${x}px; top: ${y}px; min-width: ${minWidth}; min-height: ${isCollapsed ? '40px' : minHeight}; z-index: ${zIndex};`}
-		transition:fade={{ duration: 150 }}
-		onclick={handleWindowClick}
-	>
-		<div
-			class="flex cursor-move items-center justify-between border-b border-gray-200 bg-gray-100 px-3 py-2"
-			onmousedown={startDrag}
-		>
-			<div class="font-medium text-gray-700">{title}</div>
-			<div class="flex space-x-2">
-				<button
-					class="flex h-6 w-6 items-center justify-center text-gray-500 hover:text-gray-700"
-					onclick={toggleCollapse}
-				>
-					{#if isCollapsed}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="16"
-							height="16"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<polyline points="4 14 10 14 10 20"></polyline>
-							<polyline points="20 10 14 10 14 4"></polyline>
-						</svg>
-					{:else}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="16"
-							height="16"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<polyline points="4 14 10 14 10 20"></polyline>
-							<polyline points="20 10 14 10 14 4"></polyline>
-						</svg>
-					{/if}
-				</button>
-				<button
-					class="flex h-6 w-6 items-center justify-center text-gray-500 hover:text-gray-700"
-					onclick={closeWindow}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						width="16"
-						height="16"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<line x1="18" y1="6" x2="6" y2="18"></line>
-						<line x1="6" y1="6" x2="18" y2="18"></line>
-					</svg>
-				</button>
-			</div>
-		</div>
-
-		<div class="flex-grow overflow-auto p-4" class:hidden={isCollapsed}>
-			<slot />
-		</div>
-
-		<!-- Resize handles -->
-		<div
-			class="absolute top-0 left-0 h-2 w-2 cursor-nw-resize"
-			onmousedown={(e) => startResize(e, 'nw')}
-		></div>
-		<div
-			class="absolute top-0 left-0 h-2 w-full cursor-n-resize"
-			onmousedown={(e) => startResize(e, 'n')}
-		></div>
-		<div
-			class="absolute top-0 right-0 h-2 w-2 cursor-ne-resize"
-			onmousedown={(e) => startResize(e, 'ne')}
-		></div>
-		<div
-			class="absolute top-0 right-0 h-full w-2 cursor-e-resize"
-			onmousedown={(e) => startResize(e, 'e')}
-		></div>
-		<div
-			class="absolute right-0 bottom-0 h-2 w-2 cursor-se-resize"
-			onmousedown={(e) => startResize(e, 'se')}
-		></div>
-		<div
-			class="absolute bottom-0 left-0 h-2 w-full cursor-s-resize"
-			onmousedown={(e) => startResize(e, 's')}
-		></div>
-		<div
-			class="absolute bottom-0 left-0 h-2 w-2 cursor-sw-resize"
-			onmousedown={(e) => startResize(e, 'sw')}
-		></div>
-		<div
-			class="absolute top-0 left-0 h-full w-2 cursor-w-resize"
-			onmousedown={(e) => startResize(e, 'w')}
-		></div>
-	</div>
-{/if}
-
-<style>
-	.cursor-nw-resize,
-	.cursor-ne-resize,
-	.cursor-se-resize,
-	.cursor-sw-resize {
-		cursor: nwse-resize;
-	}
-	.cursor-n-resize,
-	.cursor-s-resize {
-		cursor: ns-resize;
-	}
-	.cursor-e-resize,
-	.cursor-w-resize {
-		cursor: ew-resize;
-	}
-</style>
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { DraggableWindowProps } from './types.js';
+
+	let {
+		title,
+		isOpen = $bindable(true),
+		isCollapsed = $bindable(false),
+		width = '500px',
+		height = '400px',
+		x = $bindable(100),
+		y = $bindable(100),
+		minWidth = '300px',
+		minHeight = '200px',
+		zIndex = 3000,
+		onBringToFront
+	}: DraggableWindowProps = $props();
+
+	let startX = $state<number | undefined>();
+	let startY = $state<number | undefined>();
+	let isDragging = $state(false);
+	let isResizing = $state(false);
+	let resizeDirection: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' | null = null;
+	let startWidth = $state<number | undefined>();
+	let startHeight = $state<number | undefined>();
+
+	function startDrag(e: MouseEvent) {
+		if (isResizing) return;
+		isDragging = true;
+		startX = e.clientX - x;
+		startY = e.clientY - y;
+		window.addEventListener('mousemove', handleDrag);
+		window.addEventListener('mouseup', stopDrag);
+		// bringToFront();
+	}
+
+	function handleDrag(e: MouseEvent) {
+		if (isDragging) {
+			x = e.clientX - startX!;
+			y = e.clientY - startY!;
+		} else if (isResizing) {
+			const deltaX = e.clientX - startX!;
+			const deltaY = e.clientY - startY!;
+
+			if (resizeDirection?.includes('e')) {
+				width = `${Math.max(parseInt(minWidth), startWidth! + deltaX)}px`;
+			}
+			if (resizeDirection?.includes('w')) {
+				const newWidth = Math.max(parseInt(minWidth), startWidth! - deltaX);
+				width = `${newWidth}px`;
+				x += startWidth! - newWidth;
+			}
+			if (resizeDirection?.includes('s')) {
+				height = `${Math.max(parseInt(minHeight), startHeight! + deltaY)}px`;
+			}
+			if (resizeDirection?.includes('n')) {
+				const newHeight = Math.max(parseInt(minHeight), startHeight! - deltaY);
+				height = `${newHeight}px`;
+				y += startHeight! - newHeight;
+			}
+		}
+	}
+
+	function stopDrag() {
+		isDragging = false;
+		isResizing = false;
+		resizeDirection = null;
+		window.removeEventListener('mousemove', handleDrag);
+		window.removeEventListener('mouseup', stopDrag);
+	}
+
+	function startResize(e: MouseEvent, direction: typeof resizeDirection) {
+		e.stopPropagation();
+		isResizing = true;
+		resizeDirection = direction;
+		startX = e.clientX;
+		startY = e.clientY;
+		startWidth = parseInt(width);
+		startHeight = parseInt(height);
+		window.addEventListener('mousemove', handleDrag);
+		window.addEventListener('mouseup', stopDrag);
+	}
+
+	function toggleCollapse(event: any) {
+		event.stopPropagation();
+		isCollapsed = !isCollapsed;
+	}
+
+	function bringToFront() {
+		onBringToFront?.();
+	}
+
+	function closeWindow(event: any) {
+		event.stopPropagation();
+		isOpen = false;
+	}
+	function handleWindowClick() {
+		if (!isDragging && !isResizing) {
+			bringToFront();
+		}
+	}
+</script>
+
+{#if isOpen}
+	<div
+		class="absolute flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-xl"
+		style={`width: ${width}; height: ${isCollapsed ? '40px' : height}; left: ${x}px; top: ${y}px; min-width: ${minWidth}; min-height: ${isCollapsed ? '40px' : minHeight}; z-index: ${zIndex};`}
+		transition:fade={{ duration: 150 }}
+		onclick={handleWindowClick}
+	>
+		<div
+			class="flex cursor-move items-center justify-between border-b border-gray-200 bg-gray-100 px-3 py-2"
+			onmousedown={startDrag}
+		>
+			<div class="font-medium text-gray-700">{title}</div>
+			<div class="flex space-x-2">
+				<button
+					class="flex h-6 w-6 items-center justify-center text-gray-500 hover:text-gray-700"
+					onclick={toggleCollapse}
+				>
+					{#if isCollapsed}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<polyline points="4 14 10 14 10 20"></polyline>
+							<polyline points="20 10 14 10 14 4"></polyline>
+						</svg>
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<polyline points="4 14 10 14 10 20"></polyline>
+							<polyline points="20 10 14 10 14 4"></polyline>
+						</svg>
+					{/if}
+				</button>
+				<button
+					class="flex h-6 w-6 items-center justify-center text-gray-500 hover:text-gray-700"
+					onclick={closeWindow}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<line x1="18" y1="6" x2="6" y2="18"></line>
+						<line x1="6" y1="6" x2="18" y2="18"></line>
+					</svg>
+				</button>
+			</div>
+		</div>
+
+		<div class="flex-grow overflow-auto p-4" class:hidden={isCollapsed}>
+			<slot />
+		</div>
+
+		<!-- Resize handles -->
+		<div
+			class="absolute top-0 left-0 h-2 w-2 cursor-nw-resize"
+			onmousedown={(e) => startResize(e, 'nw')}
+		></div>
+		<div
+			class="absolute top-0 left-0 h-2 w-full cursor-n-resize"
+			onmousedown={(e) => startResize(e, 'n')}
+		></div>
+		<div
+			class="absolute top-0 right-0 h-2 w-2 cursor-ne-resize"
+			onmousedown={(e) => startResize(e, 'ne')}
+		></div>
+		<div
+			class="absolute top-0 right-0 h-full w-2 cursor-e-resize"
+			onmousedown={(e) => startResize(e, 'e')}
+		></div>
+		<div
+			class="absolute right-0 bottom-0 h-2 w-2 cursor-se-resize"
+			onmousedown={(e) => startResize(e, 'se')}
+		></div>
+		<div
+			class="absolute bottom-0 left-0 h-2 w-full cursor-s-resize"
+			onmousedown={(e) => startResize(e, 's')}
+		></div>
+		<div
+			class="absolute bottom-0 left-0 h-2 w-2 cursor-sw-resize"
+			onmousedown={(e) => startResize(e, 'sw')}
+		></div>
+		<div
+			class="absolute top-0 left-0 h-full w-2 cursor-w-resize"
+			onmousedown={(e) => startResize(e, 'w')}
+		></div>
+	</div>
+{/if}
+
+<style>
+	.cursor-nw-resize,
+	.cursor-ne-resize,
+	.cursor-se-resize,
+	.cursor-sw-resize {
+		cursor: nwse-resize;
+	}
+	.cursor-n-resize,
+	.cursor-s-resize {
+		cursor: ns-resize;
+	}
+	.cursor-e-resize,
+	.cursor-w-resize {
+		cursor: ew-resize;
+	}
+</style>