@rkosafo/cai.components 0.0.74 → 0.0.78

package/dist/layout/Chat/PreviewPage.svelte

@@ -1,182 +1,182 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-	import type { PreviewPageProps } from './index.js';
-	import { cubicIn, elasticInOut } from 'svelte/easing';
-	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
-	import { isImage, isPdf } from '../../index.js';
-
-	let {
-		open = $bindable(true),
-		fullImage = false,
-		showActions = true,
-		title = '',
-		onGetImage,
-		src = {
-			name: '',
-			content: '',
-			file: ''
-		}
-	}: PreviewPageProps = $props();
-
-	let scale = $state(1);
-	const maxScale = $state(3);
-	const minScale = $state(1);
-
-	function zoomin() {
-		if (scale < maxScale) {
-			scale += 0.1;
-		}
-	}
-
-	function zoomout() {
-		if (scale > minScale) {
-			scale -= 0.1;
-		}
-	}
-</script>
-
-{#if open}
-	<div class=" relative p-0 md:p-5 lg:p-10">
-		<div
-			class="bg-opacity-60 fixed inset-0 z-[3000] mx-auto bg-gray-500 transition-opacity"
-			in:fade={{ duration: 300, easing: cubicIn }}
-			out:fade={{ duration: 200, easing: elasticInOut }}
-		></div>
-	</div>
-{/if}
-
-{#if open}
-	{#if fullImage}
-		<div
-			class="bg-opacity-75 fixed inset-0 z-[3000] mx-auto h-12 overflow-y-auto bg-gray-900 shadow-sm shadow-gray-50"
-		>
-			<div class="mx-4 flex h-full items-center justify-between p-2">
-				<span class="font-semiblod tracking-wider text-white">{title}</span>
-				<div class="flex items-center gap-4 text-white">
-					<!-- <button on:click={zoomin} type="button"
-						><iconify-icon icon="ri:zoom-in-fill" class="hover:fill-red-600" /></button
-					>
-					<button on:click={zoomout} type="button"
-						><iconify-icon icon="mingcute:zoom-out-fill" class="hover:fill-green-600" /></button
-					>
-					<button class="grid place-content-center p-[1px]" type="button"
-						><iconify-icon
-							icon="line-md:cloud-download-loop"
-							class="hover:text-purple-600"
-							style="font-size: 27px;"
-						/></button
-					> -->
-					<button
-						type="button"
-						onclick={() => (open = false)}
-						class="grid place-content-center rounded-full bg-red-500 p-[1px] hover:bg-red-600"
-					>
-						<IconifyIcon icon="ic:round-close" style="font-size: 25px;" />
-					</button>
-				</div>
-			</div>
-		</div>
-	{/if}
-
-	<div
-		aria-live="assertive"
-		class="pointer-events-none fixed inset-0 z-[3100] flex place-content-center items-center sm:items-start"
-	>
-		<div
-			class="pointer-events-none flex h-full max-w-7xl flex-grow flex-col"
-			in:fade={{ duration: 300, easing: cubicIn }}
-			out:fade={{ duration: 200, easing: elasticInOut }}
-		>
-			<div class="h-16" style="line-height: 4rem">&nbsp;</div>
-			<div class=" bg-opacity-75 pointer-events-auto flex-grow border-gray-200 transition-opacity">
-				<div class=" grid h-full w-full">
-					<div class="relative transform overflow-hidden transition-all sm:my-6">
-						{#if ('content' in src && src?.content
-								.substr(5, 10)
-								.includes('image/')) || isImage(src?.content)}
-							<div class="flex h-full w-full flex-col items-center justify-center gap-1">
-								<div class="zoomed-image" style="transform: scale({scale});">
-									<img
-										id="map"
-										src={src?.content}
-										alt=""
-										class="object-cover"
-										class:w-96={!fullImage}
-									/>
-								</div>
-								{#if src?.name}
-									<p class="text-center text-white">{src?.name}</p>
-								{/if}
-							</div>
-						{:else if isPdf(src?.content)}
-							<div class="h-full w-full items-center justify-center">
-								<iframe src={src.content} title="attachment" class="h-full w-full"></iframe>
-								{#if src?.name}
-									<p class="text-center text-white">{src?.name}</p>
-								{/if}
-							</div>
-						{:else}
-							<div class="flex h-full flex-col items-center justify-center gap-1">
-								<div class="">
-									<IconifyIcon
-										icon={'name' in src && src?.name.includes('.pdf')
-											? 'vscode-icons:file-type-pdf2'
-											: src?.name.includes('.docx')
-												? 'vscode-icons:file-type-word'
-												: src?.name.includes('.pptx')
-													? 'vscode-icons:file-type-powerpoint2'
-													: src?.name.includes('.xlsx') || src?.name.includes('.cv')
-														? 'vscode-icons:file-type-excel'
-														: 'bxs:file'}
-										style="font-size: 150px;"
-									/>
-								</div>
-								{#if src?.name}
-									<p class="text-center text-white">{src?.name}</p>
-								{/if}
-							</div>
-						{/if}
-					</div>
-					{#if showActions}
-						<div class="flex justify-center">
-							<div class=" flex gap-6">
-								<button
-									type="button"
-									aria-label="toggle modal"
-									onclick={() => (open = false)}
-									class="flex h-8 w-8 items-center justify-center rounded-full bg-red-500 text-white ring-8 ring-white hover:bg-red-800"
-								>
-									<IconifyIcon icon="ic:round-close" style="font-size: 24px;" />
-								</button>
-								<button
-									type="button"
-									aria-label="get image"
-									onclick={(_) => {
-										onGetImage?.(src);
-									}}
-									class="flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-white ring-8 ring-white hover:bg-green-800"
-								>
-									<IconifyIcon icon="majesticons:send" style="font-size: 20px;" />
-								</button>
-							</div>
-						</div>
-					{/if}
-				</div>
-			</div>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.image-container {
-		overflow: hidden;
-		width: 100%;
-		max-width: 600px; /* Adjust as needed */
-		height: auto;
-	}
-
-	.zoomed-image {
-		transform-origin: center;
-		transition: transform 0.2s ease;
-	}
-</style>
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { PreviewPageProps } from './index.js';
+	import { cubicIn, elasticInOut } from 'svelte/easing';
+	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
+	import { isImage, isPdf } from '../../index.js';
+
+	let {
+		open = $bindable(true),
+		fullImage = false,
+		showActions = true,
+		title = '',
+		onGetImage,
+		src = {
+			name: '',
+			content: '',
+			file: ''
+		}
+	}: PreviewPageProps = $props();
+
+	let scale = $state(1);
+	const maxScale = $state(3);
+	const minScale = $state(1);
+
+	function zoomin() {
+		if (scale < maxScale) {
+			scale += 0.1;
+		}
+	}
+
+	function zoomout() {
+		if (scale > minScale) {
+			scale -= 0.1;
+		}
+	}
+</script>
+
+{#if open}
+	<div class=" relative p-0 md:p-5 lg:p-10">
+		<div
+			class="bg-opacity-60 fixed inset-0 z-[3000] mx-auto bg-gray-500 transition-opacity"
+			in:fade={{ duration: 300, easing: cubicIn }}
+			out:fade={{ duration: 200, easing: elasticInOut }}
+		></div>
+	</div>
+{/if}
+
+{#if open}
+	{#if fullImage}
+		<div
+			class="bg-opacity-75 fixed inset-0 z-[3000] mx-auto h-12 overflow-y-auto bg-gray-900 shadow-sm shadow-gray-50"
+		>
+			<div class="mx-4 flex h-full items-center justify-between p-2">
+				<span class="font-semiblod tracking-wider text-white">{title}</span>
+				<div class="flex items-center gap-4 text-white">
+					<!-- <button on:click={zoomin} type="button"
+						><iconify-icon icon="ri:zoom-in-fill" class="hover:fill-red-600" /></button
+					>
+					<button on:click={zoomout} type="button"
+						><iconify-icon icon="mingcute:zoom-out-fill" class="hover:fill-green-600" /></button
+					>
+					<button class="grid place-content-center p-[1px]" type="button"
+						><iconify-icon
+							icon="line-md:cloud-download-loop"
+							class="hover:text-purple-600"
+							style="font-size: 27px;"
+						/></button
+					> -->
+					<button
+						type="button"
+						onclick={() => (open = false)}
+						class="grid place-content-center rounded-full bg-red-500 p-[1px] hover:bg-red-600"
+					>
+						<IconifyIcon icon="ic:round-close" style="font-size: 25px;" />
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	<div
+		aria-live="assertive"
+		class="pointer-events-none fixed inset-0 z-[3100] flex place-content-center items-center sm:items-start"
+	>
+		<div
+			class="pointer-events-none flex h-full max-w-7xl flex-grow flex-col"
+			in:fade={{ duration: 300, easing: cubicIn }}
+			out:fade={{ duration: 200, easing: elasticInOut }}
+		>
+			<div class="h-16" style="line-height: 4rem">&nbsp;</div>
+			<div class=" bg-opacity-75 pointer-events-auto flex-grow border-gray-200 transition-opacity">
+				<div class=" grid h-full w-full">
+					<div class="relative transform overflow-hidden transition-all sm:my-6">
+						{#if ('content' in src && src?.content
+								.substr(5, 10)
+								.includes('image/')) || isImage(src?.content)}
+							<div class="flex h-full w-full flex-col items-center justify-center gap-1">
+								<div class="zoomed-image" style="transform: scale({scale});">
+									<img
+										id="map"
+										src={src?.content}
+										alt=""
+										class="object-cover"
+										class:w-96={!fullImage}
+									/>
+								</div>
+								{#if src?.name}
+									<p class="text-center text-white">{src?.name}</p>
+								{/if}
+							</div>
+						{:else if isPdf(src?.content)}
+							<div class="h-full w-full items-center justify-center">
+								<iframe src={src.content} title="attachment" class="h-full w-full"></iframe>
+								{#if src?.name}
+									<p class="text-center text-white">{src?.name}</p>
+								{/if}
+							</div>
+						{:else}
+							<div class="flex h-full flex-col items-center justify-center gap-1">
+								<div class="">
+									<IconifyIcon
+										icon={'name' in src && src?.name.includes('.pdf')
+											? 'vscode-icons:file-type-pdf2'
+											: src?.name.includes('.docx')
+												? 'vscode-icons:file-type-word'
+												: src?.name.includes('.pptx')
+													? 'vscode-icons:file-type-powerpoint2'
+													: src?.name.includes('.xlsx') || src?.name.includes('.cv')
+														? 'vscode-icons:file-type-excel'
+														: 'bxs:file'}
+										style="font-size: 150px;"
+									/>
+								</div>
+								{#if src?.name}
+									<p class="text-center text-white">{src?.name}</p>
+								{/if}
+							</div>
+						{/if}
+					</div>
+					{#if showActions}
+						<div class="flex justify-center">
+							<div class=" flex gap-6">
+								<button
+									type="button"
+									aria-label="toggle modal"
+									onclick={() => (open = false)}
+									class="flex h-8 w-8 items-center justify-center rounded-full bg-red-500 text-white ring-8 ring-white hover:bg-red-800"
+								>
+									<IconifyIcon icon="ic:round-close" style="font-size: 24px;" />
+								</button>
+								<button
+									type="button"
+									aria-label="get image"
+									onclick={(_) => {
+										onGetImage?.(src);
+									}}
+									class="flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-white ring-8 ring-white hover:bg-green-800"
+								>
+									<IconifyIcon icon="majesticons:send" style="font-size: 20px;" />
+								</button>
+							</div>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.image-container {
+		overflow: hidden;
+		width: 100%;
+		max-width: 600px; /* Adjust as needed */
+		height: auto;
+	}
+
+	.zoomed-image {
+		transform-origin: center;
+		transition: transform 0.2s ease;
+	}
+</style>