@rkosafo/cai.components 0.0.40 → 0.0.42

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export * from './ui/box/index.js';
 export * from './ui/breadcrumb/index.js';
 export * from './layout/ComponentCanvas/index.js';
 export * from './ui/toast/index.js';
+export * from './layout/Chat/index.js';
 export * from './forms/input/index.js';
 export * from './forms/label/index.js';
 export * from './forms/datepicker/index.js';

package/dist/index.js

@@ -28,6 +28,7 @@ export * from './ui/box/index.js';
 export * from './ui/breadcrumb/index.js';
 export * from './layout/ComponentCanvas/index.js';
 export * from './ui/toast/index.js';
+export * from './layout/Chat/index.js';
 export * from './forms/input/index.js';
 export * from './forms/label/index.js';
 export * from './forms/datepicker/index.js';

package/dist/layout/Chat/CategorySelector.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { findTicketCategoryParents, IconifyIcon } from '../../index.js';
+	import { slide } from 'svelte/transition';
+	import type { CategorySelectorProps, ICaseCategory } from './types.js';
+
+	let { items = [], options = [], onClick }: CategorySelectorProps = $props();
+
+	let openSubmenu = $state(-1);
+
+	function toggleSubmenu(index: any) {
+		openSubmenu = openSubmenu === index ? -1 : index;
+	}
+	function handleItemClick(option: ICaseCategory) {
+		if (!option.items) {
+			const data = findTicketCategoryParents(option, options);
+			onClick?.({ selected: option, list: data });
+		}
+	}
+</script>
+
+<ul transition:slide class="divide-y">
+	{#each items as item, index (item.name)}
+		<li class="w-full text-sm">
+			<button
+				type="button"
+				class="w-full px-2 py-1 text-left hover:bg-gray-100"
+				onclick={() => {
+					if (item.items) {
+						toggleSubmenu(index);
+					} else {
+						handleItemClick(item);
+					}
+				}}
+			>
+				<div class="flex items-center justify-between">
+					{item.name}
+					{#if item.items}
+						<IconifyIcon
+							icon={openSubmenu === index ? 'ri:arrow-up-s-fill' : 'ri:arrow-down-s-fill'}
+							class="text-lg text-gray-500"
+						/>
+					{/if}
+				</div>
+			</button>
+			{#if item.items && openSubmenu === index}
+				<div class="pl-4">
+					<svelte:self items={item.items} onclick {options} />
+				</div>
+			{/if}
+		</li>
+	{/each}
+</ul>

package/dist/layout/Chat/CategorySelector.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CategorySelectorProps } from './types.js';
+declare const CategorySelector: import("svelte").Component<CategorySelectorProps, {}, "">;
+type CategorySelector = ReturnType<typeof CategorySelector>;
+export default CategorySelector;

package/dist/layout/Chat/ChatEntry.svelte

@@ -0,0 +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: '' }}
+/>

package/dist/layout/Chat/ChatEntry.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ChatEntryPageProps } from './index.js';
+declare const ChatEntry: import("svelte").Component<ChatEntryPageProps, {}, "">;
+type ChatEntry = ReturnType<typeof ChatEntry>;
+export default ChatEntry;

package/dist/layout/Chat/ChatEntrySkeleton.svelte

@@ -0,0 +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>

package/dist/layout/Chat/ChatEntrySkeleton.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatEntrySkeletonProps } from './index.js';
+declare const ChatEntrySkeleton: import("svelte").Component<ChatEntrySkeletonProps, {}, "">;
+type ChatEntrySkeleton = ReturnType<typeof ChatEntrySkeleton>;
+export default ChatEntrySkeleton;

package/dist/layout/Chat/ChatHeader.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	import { clickOutsideAction, DropdownItem } from '../../index.js';
+	import { Avatar } from '../../ui/avatar/index.js';
+	import { IconifyIcon } from '../../ui/icons/index.js';
+	import { slide } from 'svelte/transition';
+	import type { ChatHeaderProps } from './index.js';
+
+	let {
+		caseTitle = '',
+		user = { name: '', profileImageUrl: '', initials: '' },
+		caseTypes = '',
+		assignedTo = '',
+		showAssignedTo = false,
+		showFollowCaseButton = false,
+		showBackArrow = false,
+		isFollowingCase = false,
+		overflowActionsList = [],
+		showOverflowActionButton = true,
+		caseStatus = '',
+		logoUrl = '',
+		showFollowOverflowAction = true,
+		showCloseOverflowAction = true,
+		onOverflowActionClicked,
+		onToggleFollowCase,
+		leadingWidget,
+		trailingWidget,
+		caseDetailsWidget,
+		onBackArrowClicked,
+		onCloseCase
+	}: ChatHeaderProps = $props();
+
+	let showMenu = $state(false);
+</script>
+
+<div class="flex items-center justify-between">
+	{#if caseDetailsWidget}
+		{@render caseDetailsWidget?.()}
+	{:else}
+		<div class="flex w-full items-center gap-1.5">
+			{@render leadingWidget?.()}
+			{#if showBackArrow}
+				<button aria-label="back" onclick={onBackArrowClicked}>
+					<IconifyIcon
+						icon="ep:back"
+						class="block rounded-full p-2 hover:bg-gray-200 lg:hidden"
+						style="font-size: 20px;"
+					/>
+				</button>
+			{/if}
+			<div class="flex items-center gap-3">
+				{#if user?.profileImageUrl}
+					<Avatar
+						src={user?.profileImageUrl}
+						alt="pic"
+						class="h-14 w-14 border text-lg font-medium"
+					/>
+				{:else if user?.initials}
+					<Avatar class="h-14 w-14 border bg-primary-500 text-lg font-medium text-white"
+						>{user.initials}</Avatar
+					>
+				{:else}
+					<Avatar src={logoUrl} alt="logo" class="h-14 w-14 border text-lg font-medium" />
+				{/if}
+				<div class="flex flex-col">
+					<div class="font-medium capitalize">{user.name}</div>
+					<div class="flex gap-2">
+						<div class="max-w-xs truncate text-sm text-gray-500 capitalize">
+							<span class=" font-medium text-black">Title:</span>
+							<span title={caseTitle}>
+								{caseTitle}
+							</span>
+						</div>
+						<div class="text-sm text-gray-500 capitalize">
+							<span class="font-medium text-black">status: </span>
+							{caseStatus}
+						</div>
+						<div class="text-sm" class:hidden={!showAssignedTo}>
+							<span>Assigned To :</span> <span class="text-gray-500">{assignedTo}</span>
+						</div>
+					</div>
+					<div class="flex gap-2">
+						<div class="max-w-xl truncate text-sm text-gray-500 capitalize">
+							{caseTypes}
+						</div>
+					</div>
+					{#if showFollowCaseButton}
+						<div class="">
+							<button
+								onclick={() => onToggleFollowCase?.(isFollowingCase ? 'unfollow' : 'follow')}
+								class="flex w-fit items-center gap-1 rounded bg-gray-200 px-2 py-0.5 text-xs hover:bg-gray-300"
+							>
+								<span>{isFollowingCase ? 'Unfollow' : 'Follow'}</span>
+								<IconifyIcon icon={isFollowingCase ? 'mdi:eye-off' : 'mdi:eye'} />
+							</button>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	{/if}
+	{@render trailingWidget?.()}
+	{#if showOverflowActionButton}
+		<div class="w-10"></div>
+	{/if}
+
+	{#if showOverflowActionButton}
+		<div
+			class="relative space-y-2"
+			use:clickOutsideAction
+			onclickoutside={() => (showMenu = false)}
+		>
+			<button
+				aria-label="toggle menu"
+				class="grid place-content-center rounded-full p-1 text-gray-600 hover:bg-gray-200"
+				onclick={() => (showMenu = !showMenu)}
+			>
+				<IconifyIcon icon="mdi:dots-vertical" style="font-size: 25px;" />
+			</button>
+			{#if showMenu}
+				<div
+					class="absolute right-3 z-10 flex w-44 flex-col divide-y rounded-md bg-white py-1 shadow-md shadow-gray-300"
+					transition:slide
+					use:clickOutsideAction
+				>
+					{#if showFollowOverflowAction}
+						{#if !isFollowingCase}
+							<DropdownItem
+								class="flex w-full appearance-none items-center gap-1 whitespace-nowrap"
+								onclick={() => {
+									onToggleFollowCase?.('follow');
+									showMenu = false;
+								}}><IconifyIcon icon="mdi:eye" style="font-size: 20px;" /> Follow Case</DropdownItem
+							>
+						{:else}
+							<DropdownItem
+								class="flex w-full appearance-none items-center gap-1 whitespace-nowrap"
+								onclick={() => {
+									onToggleFollowCase?.('unfollow');
+									showMenu = false;
+								}}
+								><IconifyIcon icon="mdi:eye-off" style="font-size: 20px;" /> Unfollow Case</DropdownItem
+							>
+						{/if}
+					{/if}
+					{#if overflowActionsList.length > 0}
+						{#each overflowActionsList as item}
+							<DropdownItem
+								class="flex w-full appearance-none items-center gap-1 whitespace-nowrap"
+								onclick={() => {
+									onOverflowActionClicked?.(item);
+									showMenu = false;
+								}}
+								><IconifyIcon icon={item.icon} style="font-size: 20px;" />
+								{item.label}</DropdownItem
+							>
+						{/each}
+					{/if}
+					{#if showCloseOverflowAction}
+						<DropdownItem
+							class="flex w-full appearance-none items-center gap-1 whitespace-nowrap text-red-600"
+							onclick={() => {
+								onCloseCase?.();
+								showMenu = false;
+							}}
+							><IconifyIcon icon="tabler:message-2-x" style="font-size: 20px;" /> Close Case</DropdownItem
+						>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/layout/Chat/ChatHeader.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatHeaderProps } from './index.js';
+declare const ChatHeader: import("svelte").Component<ChatHeaderProps, {}, "">;
+type ChatHeader = ReturnType<typeof ChatHeader>;
+export default ChatHeader;