@rkosafo/cai.components 0.0.75 → 0.0.78

package/dist/layout/Chat/ChatEntry.svelte

@@ -1,246 +1,246 @@
-<script lang="ts">
-	import { IconifyIcon, isExcel, isImage, isPdf, isPPT, isWord } from '../../index.js';
-	import { type ChatEntryPageProps } from './index.js';
-	import PreviewPage from './PreviewPage.svelte';
-
-	let { message, time = '', textBorder = true, userId }: ChatEntryPageProps = $props();
-
-	let showImage = $state(false);
-	let selectedFile = $state('');
-
-	let frame = $state<HTMLIFrameElement | undefined>();
-	function onItemClick(e: any) {
-		e.target.requestFullscreen();
-		e.stopPropagation();
-	}
-</script>
-
-<div class=" mb-2 {message.mine ? 'flex justify-end' : 'flex justify-start'} ">
-	<div class="mx-2 flex flex-col">
-		<div class=" {message.mine ? ' text-right ' : ' text-left'} ">
-			<span class=" text-sm text-gray-800/70">
-				{time}
-			</span>
-		</div>
-		<div class="order-1 flex max-w-sm flex-col space-y-2 text-sm" class:items-end={message.mine}>
-			<div>
-				<div class="space-y-2">
-					<div class="flex" class:justify-end={message.mine} class:justify-start={!message.mine}>
-						<div
-							class="inline-block bg-gray-200 px-4 py-2 break-normal {message.mine
-								? 'rounded-l-md rounded-r-sm border-r-4 border-blue-800 '
-								: 'rounded-l-sm rounded-r-md border-l-4 border-yellow-400'} "
-						>
-							{#if message.message.includes('http' || 'www.')}
-								<a
-									class={textBorder ? '' : 'bg-yellow-500 px-px  '}
-									href={message.message}
-									target="_blank"
-								>
-									<p
-										class="text-blue-500 underline decoration-blue-500 underline-offset-2 hover:text-blue-700"
-									>
-										{message.message}
-									</p>
-								</a>
-							{:else}
-								<p class={`break-normal ${textBorder ? '' : 'bg-yellow-500 px-px'}`}>
-									{message.message}
-								</p>
-							{/if}
-						</div>
-					</div>
-					{#if message.files && message.files.length}
-						{#each message.files as image}
-							<div
-								class:justify-end={message.mine}
-								class:justify-start={!message.mine}
-								class:hidden={!isImage(image)}
-							>
-								<div
-									class=" flex rounded-md p-1"
-									class:justify-end={message.mine}
-									class:justify-start={!message.mine}
-								>
-									<button class="group relative rounded-md bg-gray-200 p-0.5" onclick={onItemClick}>
-										<img
-											src={image}
-											alt="pic"
-											class="max-h-60 w-40 transform rounded-md transition duration-300 ease-in-out group-hover:scale-95"
-										/>
-										<!-- <div
-													class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-opacity rounded-md"
-												/> -->
-									</button>
-								</div>
-							</div>
-							<div
-								class:justify-end={message.mine}
-								class:justify-start={!message.mine}
-								class:hidden={!isPdf(image)}
-							>
-								<div
-									class=" flex rounded-md p-1"
-									class:justify-end={message.mine}
-									class:justify-start={!message.mine}
-								>
-									<button
-										class="group relative rounded-md bg-gray-200 px-0.5 py-2"
-										onclick={(_) => {
-											selectedFile = image;
-											showImage = true;
-										}}
-									>
-										<IconifyIcon
-											icon="vscode-icons:file-type-pdf2"
-											style="font-size: 150px;"
-											class="transform transition duration-300 ease-in-out group-hover:scale-95"
-										/>
-										<!-- <div
-													class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-opacity rounded-md"
-												/> -->
-									</button>
-								</div>
-							</div>
-							<div
-								class:justify-end={message.mine}
-								class:justify-start={!message.mine}
-								class:hidden={!isWord(image)}
-							>
-								<div
-									class=" flex rounded-md p-1"
-									class:justify-end={message.mine}
-									class:justify-start={!message.mine}
-								>
-									<button
-										class="group relative rounded-md bg-gray-200 p-0.5"
-										onclick={(_) => {
-											selectedFile = image;
-											showImage = true;
-										}}
-									>
-										<IconifyIcon
-											icon="vscode-icons:file-type-word"
-											style="font-size: 150px;"
-											class="transform transition duration-300 ease-in-out group-hover:scale-95"
-										/>
-										<!-- <div
-													class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-opacity rounded-md"
-												/> -->
-									</button>
-								</div>
-							</div>
-							<div
-								class:justify-end={message.mine}
-								class:justify-start={!message.mine}
-								class:hidden={!isPPT(image)}
-							>
-								<div
-									class=" flex rounded-md p-1"
-									class:justify-end={message.mine}
-									class:justify-start={!message.mine}
-								>
-									<button
-										class="group relative rounded-md bg-gray-200 p-0.5"
-										onclick={(_) => {
-											selectedFile = image;
-											showImage = true;
-										}}
-									>
-										<IconifyIcon
-											icon="vscode-icons:file-type-powerpoint2"
-											style="font-size: 150px;"
-											class="transform transition duration-300 ease-in-out group-hover:scale-95"
-										/>
-										<!-- <div
-													class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-opacity rounded-md"
-												/> -->
-									</button>
-								</div>
-							</div>
-							<div
-								class:justify-end={message.mine}
-								class:justify-start={!message.mine}
-								class:hidden={!isExcel(image)}
-							>
-								<div
-									class=" flex rounded-md p-1"
-									class:justify-end={message.mine}
-									class:justify-start={!message.mine}
-								>
-									<button
-										class="group relative rounded-md bg-gray-200 p-0.5"
-										onclick={() => {
-											selectedFile = image;
-											showImage = true;
-										}}
-									>
-										<IconifyIcon
-											icon="vscode-icons:file-type-excel"
-											style="font-size: 150px;"
-											class="transform transition duration-300 ease-in-out group-hover:scale-95"
-										/>
-										<!-- <div
-										class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-opacity rounded-md"
-									/> -->
-									</button>
-								</div>
-							</div>
-							<div
-								class:justify-end={message.mine}
-								class:justify-start={!message.mine}
-								class:hidden={isImage(image) ||
-									isPPT(image) ||
-									isPdf(image) ||
-									isWord(image) ||
-									isExcel(image)}
-							>
-								<div
-									class=" flex rounded-md p-1"
-									class:justify-end={message.mine}
-									class:justify-start={!message.mine}
-								>
-									<button
-										class="group relative rounded-md bg-gray-200 p-0.5"
-										onclick={(_) => {
-											selectedFile = image;
-											showImage = true;
-										}}
-									>
-										<IconifyIcon
-											icon="bxs:file"
-											style="font-size: 150px;"
-											class="transform transition duration-300 ease-in-out group-hover:scale-95"
-										/>
-										<!-- <div
-													class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-opacity rounded-md"
-												/> -->
-									</button>
-								</div>
-								<iframe src={image} title={image} class="flex-grow" bind:this={frame}></iframe>
-							</div>
-							<!-- {/if} -->
-						{/each}
-					{/if}
-				</div>
-				<!-- {/if} -->
-			</div>
-			<div class:hidden={!message.mine}>
-				<p class:hidden={userId === message.user?.id} class="text-sm text-gray-500 antialiased">
-					{message.user?.firstName}
-					{message?.user?.otherNames ?? ''}
-					{message.user?.surname}
-					{message.user?.staffNumber ?? ''}
-				</p>
-			</div>
-		</div>
-	</div>
-</div>
-
-<PreviewPage
-	title="Attachment Preview"
-	bind:open={showImage}
-	showActions={false}
-	fullImage
-	src={{ content: selectedFile, name: '', file: '' }}
-/>
+<script lang="ts">
+	import { IconifyIcon, isExcel, isImage, isPdf, isPPT, isWord } from '../../index.js';
+	import { type ChatEntryPageProps } from './index.js';
+	import PreviewPage from './PreviewPage.svelte';
+
+	let { message, time = '', textBorder = true, userId }: ChatEntryPageProps = $props();
+
+	let showImage = $state(false);
+	let selectedFile = $state('');
+
+	let frame = $state<HTMLIFrameElement | undefined>();
+	function onItemClick(e: any) {
+		e.target.requestFullscreen();
+		e.stopPropagation();
+	}
+</script>
+
+<div class=" mb-2 {message.mine ? 'flex justify-end' : 'flex justify-start'} ">
+	<div class="mx-2 flex flex-col">
+		<div class=" {message.mine ? ' text-right ' : ' text-left'} ">
+			<span class=" text-sm text-gray-800/70">
+				{time}
+			</span>
+		</div>
+		<div class="order-1 flex max-w-sm flex-col space-y-2 text-sm" class:items-end={message.mine}>
+			<div>
+				<div class="space-y-2">
+					<div class="flex" class:justify-end={message.mine} class:justify-start={!message.mine}>
+						<div
+							class="inline-block bg-gray-200 px-4 py-2 break-normal {message.mine
+								? 'rounded-l-md rounded-r-sm border-r-4 border-blue-800 '
+								: 'rounded-l-sm rounded-r-md border-l-4 border-yellow-400'} "
+						>
+							{#if message.message.includes('http' || 'www.')}
+								<a
+									class={textBorder ? '' : 'bg-yellow-500 px-px  '}
+									href={message.message}
+									target="_blank"
+								>
+									<p
+										class="text-blue-500 underline decoration-blue-500 underline-offset-2 hover:text-blue-700"
+									>
+										{message.message}
+									</p>
+								</a>
+							{:else}
+								<p class={`break-normal ${textBorder ? '' : 'bg-yellow-500 px-px'}`}>
+									{message.message}
+								</p>
+							{/if}
+						</div>
+					</div>
+					{#if message.files && message.files.length}
+						{#each message.files as image}
+							<div
+								class:justify-end={message.mine}
+								class:justify-start={!message.mine}
+								class:hidden={!isImage(image)}
+							>
+								<div
+									class=" flex rounded-md p-1"
+									class:justify-end={message.mine}
+									class:justify-start={!message.mine}
+								>
+									<button class="group relative rounded-md bg-gray-200 p-0.5" onclick={onItemClick}>
+										<img
+											src={image}
+											alt="pic"
+											class="max-h-60 w-40 transform rounded-md transition duration-300 ease-in-out group-hover:scale-95"
+										/>
+										<!-- <div
+													class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-opacity rounded-md"
+												/> -->
+									</button>
+								</div>
+							</div>
+							<div
+								class:justify-end={message.mine}
+								class:justify-start={!message.mine}
+								class:hidden={!isPdf(image)}
+							>
+								<div
+									class=" flex rounded-md p-1"
+									class:justify-end={message.mine}
+									class:justify-start={!message.mine}
+								>
+									<button
+										class="group relative rounded-md bg-gray-200 px-0.5 py-2"
+										onclick={(_) => {
+											selectedFile = image;
+											showImage = true;
+										}}
+									>
+										<IconifyIcon
+											icon="vscode-icons:file-type-pdf2"
+											style="font-size: 150px;"
+											class="transform transition duration-300 ease-in-out group-hover:scale-95"
+										/>
+										<!-- <div
+													class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-opacity rounded-md"
+												/> -->
+									</button>
+								</div>
+							</div>
+							<div
+								class:justify-end={message.mine}
+								class:justify-start={!message.mine}
+								class:hidden={!isWord(image)}
+							>
+								<div
+									class=" flex rounded-md p-1"
+									class:justify-end={message.mine}
+									class:justify-start={!message.mine}
+								>
+									<button
+										class="group relative rounded-md bg-gray-200 p-0.5"
+										onclick={(_) => {
+											selectedFile = image;
+											showImage = true;
+										}}
+									>
+										<IconifyIcon
+											icon="vscode-icons:file-type-word"
+											style="font-size: 150px;"
+											class="transform transition duration-300 ease-in-out group-hover:scale-95"
+										/>
+										<!-- <div
+													class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-opacity rounded-md"
+												/> -->
+									</button>
+								</div>
+							</div>
+							<div
+								class:justify-end={message.mine}
+								class:justify-start={!message.mine}
+								class:hidden={!isPPT(image)}
+							>
+								<div
+									class=" flex rounded-md p-1"
+									class:justify-end={message.mine}
+									class:justify-start={!message.mine}
+								>
+									<button
+										class="group relative rounded-md bg-gray-200 p-0.5"
+										onclick={(_) => {
+											selectedFile = image;
+											showImage = true;
+										}}
+									>
+										<IconifyIcon
+											icon="vscode-icons:file-type-powerpoint2"
+											style="font-size: 150px;"
+											class="transform transition duration-300 ease-in-out group-hover:scale-95"
+										/>
+										<!-- <div
+													class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-opacity rounded-md"
+												/> -->
+									</button>
+								</div>
+							</div>
+							<div
+								class:justify-end={message.mine}
+								class:justify-start={!message.mine}
+								class:hidden={!isExcel(image)}
+							>
+								<div
+									class=" flex rounded-md p-1"
+									class:justify-end={message.mine}
+									class:justify-start={!message.mine}
+								>
+									<button
+										class="group relative rounded-md bg-gray-200 p-0.5"
+										onclick={() => {
+											selectedFile = image;
+											showImage = true;
+										}}
+									>
+										<IconifyIcon
+											icon="vscode-icons:file-type-excel"
+											style="font-size: 150px;"
+											class="transform transition duration-300 ease-in-out group-hover:scale-95"
+										/>
+										<!-- <div
+										class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-opacity rounded-md"
+									/> -->
+									</button>
+								</div>
+							</div>
+							<div
+								class:justify-end={message.mine}
+								class:justify-start={!message.mine}
+								class:hidden={isImage(image) ||
+									isPPT(image) ||
+									isPdf(image) ||
+									isWord(image) ||
+									isExcel(image)}
+							>
+								<div
+									class=" flex rounded-md p-1"
+									class:justify-end={message.mine}
+									class:justify-start={!message.mine}
+								>
+									<button
+										class="group relative rounded-md bg-gray-200 p-0.5"
+										onclick={(_) => {
+											selectedFile = image;
+											showImage = true;
+										}}
+									>
+										<IconifyIcon
+											icon="bxs:file"
+											style="font-size: 150px;"
+											class="transform transition duration-300 ease-in-out group-hover:scale-95"
+										/>
+										<!-- <div
+													class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-opacity rounded-md"
+												/> -->
+									</button>
+								</div>
+								<iframe src={image} title={image} class="flex-grow" bind:this={frame}></iframe>
+							</div>
+							<!-- {/if} -->
+						{/each}
+					{/if}
+				</div>
+				<!-- {/if} -->
+			</div>
+			<div class:hidden={!message.mine}>
+				<p class:hidden={userId === message.user?.id} class="text-sm text-gray-500 antialiased">
+					{message.user?.firstName}
+					{message?.user?.otherNames ?? ''}
+					{message.user?.surname}
+					{message.user?.staffNumber ?? ''}
+				</p>
+			</div>
+		</div>
+	</div>
+</div>
+
+<PreviewPage
+	title="Attachment Preview"
+	bind:open={showImage}
+	showActions={false}
+	fullImage
+	src={{ content: selectedFile, name: '', file: '' }}
+/>

package/dist/layout/Chat/ChatEntrySkeleton.svelte

@@ -1,81 +1,81 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-	import type { ChatEntrySkeletonProps } from './index.js';
-
-	let { isMobile = false, messageCount = 5 }: ChatEntrySkeletonProps = $props();
-</script>
-
-<div class="flex h-full w-full flex-col overflow-x-hidden overflow-y-auto">
-	<div
-		class="chat-list-pane relative isolate flex h-full w-full flex-col overflow-x-hidden overflow-y-auto bg-green-50/40 !bg-contain !bg-center !bg-no-repeat"
-	>
-		{#if messageCount === 0}
-			<div
-				class="mx-auto flex min-h-full max-w-[12rem] flex-col items-center justify-center gap-1 text-center text-base font-semibold text-gray-400"
-			>
-				<div class="h-20 w-20 rounded-full bg-gray-400 opacity-20"></div>
-				<span class="text-sm"> Select a query to view the conversation </span>
-			</div>
-		{:else}
-			<!-- Received message skeletons -->
-			{#each Array(Math.ceil(messageCount / 2)) as _, i}
-				<div transition:fade={{ delay: i * 100 }} class="flex flex-col items-start gap-2 p-4">
-					<div class="flex items-center gap-2">
-						<div class="h-8 w-8 animate-pulse rounded-full bg-gray-200"></div>
-						<div class="h-4 w-20 animate-pulse rounded-full bg-gray-200"></div>
-					</div>
-					<div class="ml-10 flex flex-col gap-1">
-						<div class="h-4 w-64 animate-pulse rounded-md bg-gray-200"></div>
-						<div class="h-4 w-48 animate-pulse rounded-md bg-gray-200"></div>
-						<div class="h-4 w-32 animate-pulse rounded-md bg-gray-200"></div>
-					</div>
-					<div class="ml-10 h-3 w-24 animate-pulse rounded-full bg-gray-200"></div>
-				</div>
-			{/each}
-
-			<!-- Sent message skeletons -->
-			{#each Array(Math.floor(messageCount / 2)) as _, i}
-				<div
-					transition:fade={{ delay: (i + Math.ceil(messageCount / 2)) * 100 }}
-					class="flex flex-col items-end gap-2 p-4"
-				>
-					<div class="flex gap-1">
-						<div class="flex flex-col items-end gap-1">
-							<div class="h-4 w-20 animate-pulse rounded-full bg-gray-200"></div>
-							<div class="h-4 w-56 animate-pulse rounded-md bg-gray-200"></div>
-							<div class="h-4 w-40 animate-pulse rounded-md bg-gray-200"></div>
-							<div class="h-3 w-20 animate-pulse rounded-full bg-gray-200"></div>
-						</div>
-						<div class="flex items-center gap-2">
-							<div class="h-8 w-8 animate-pulse rounded-full bg-gray-200"></div>
-						</div>
-					</div>
-				</div>
-			{/each}
-		{/if}
-	</div>
-
-	<!-- Input area skeleton -->
-	<div class={`border-t bg-white p-2 ${isMobile ? 'pb-20' : 'pb-2'}`}>
-		<div class="flex items-center gap-2">
-			<div class="h-10 flex-1 animate-pulse rounded-full bg-gray-200"></div>
-			<div class="h-10 w-10 animate-pulse rounded-full bg-gray-200"></div>
-		</div>
-	</div>
-</div>
-
-<style>
-	.animate-pulse {
-		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-	}
-
-	@keyframes pulse {
-		0%,
-		100% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.5;
-		}
-	}
-</style>
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { ChatEntrySkeletonProps } from './index.js';
+
+	let { isMobile = false, messageCount = 5 }: ChatEntrySkeletonProps = $props();
+</script>
+
+<div class="flex h-full w-full flex-col overflow-x-hidden overflow-y-auto">
+	<div
+		class="chat-list-pane relative isolate flex h-full w-full flex-col overflow-x-hidden overflow-y-auto bg-green-50/40 !bg-contain !bg-center !bg-no-repeat"
+	>
+		{#if messageCount === 0}
+			<div
+				class="mx-auto flex min-h-full max-w-[12rem] flex-col items-center justify-center gap-1 text-center text-base font-semibold text-gray-400"
+			>
+				<div class="h-20 w-20 rounded-full bg-gray-400 opacity-20"></div>
+				<span class="text-sm"> Select a query to view the conversation </span>
+			</div>
+		{:else}
+			<!-- Received message skeletons -->
+			{#each Array(Math.ceil(messageCount / 2)) as _, i}
+				<div transition:fade={{ delay: i * 100 }} class="flex flex-col items-start gap-2 p-4">
+					<div class="flex items-center gap-2">
+						<div class="h-8 w-8 animate-pulse rounded-full bg-gray-200"></div>
+						<div class="h-4 w-20 animate-pulse rounded-full bg-gray-200"></div>
+					</div>
+					<div class="ml-10 flex flex-col gap-1">
+						<div class="h-4 w-64 animate-pulse rounded-md bg-gray-200"></div>
+						<div class="h-4 w-48 animate-pulse rounded-md bg-gray-200"></div>
+						<div class="h-4 w-32 animate-pulse rounded-md bg-gray-200"></div>
+					</div>
+					<div class="ml-10 h-3 w-24 animate-pulse rounded-full bg-gray-200"></div>
+				</div>
+			{/each}
+
+			<!-- Sent message skeletons -->
+			{#each Array(Math.floor(messageCount / 2)) as _, i}
+				<div
+					transition:fade={{ delay: (i + Math.ceil(messageCount / 2)) * 100 }}
+					class="flex flex-col items-end gap-2 p-4"
+				>
+					<div class="flex gap-1">
+						<div class="flex flex-col items-end gap-1">
+							<div class="h-4 w-20 animate-pulse rounded-full bg-gray-200"></div>
+							<div class="h-4 w-56 animate-pulse rounded-md bg-gray-200"></div>
+							<div class="h-4 w-40 animate-pulse rounded-md bg-gray-200"></div>
+							<div class="h-3 w-20 animate-pulse rounded-full bg-gray-200"></div>
+						</div>
+						<div class="flex items-center gap-2">
+							<div class="h-8 w-8 animate-pulse rounded-full bg-gray-200"></div>
+						</div>
+					</div>
+				</div>
+			{/each}
+		{/if}
+	</div>
+
+	<!-- Input area skeleton -->
+	<div class={`border-t bg-white p-2 ${isMobile ? 'pb-20' : 'pb-2'}`}>
+		<div class="flex items-center gap-2">
+			<div class="h-10 flex-1 animate-pulse rounded-full bg-gray-200"></div>
+			<div class="h-10 w-10 animate-pulse rounded-full bg-gray-200"></div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.animate-pulse {
+		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	}
+
+	@keyframes pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.5;
+		}
+	}
+</style>