@rkosafo/cai.components 0.0.39 → 0.0.41

package/dist/layout/Chat/ChatInput.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { fade, fly } from 'svelte/transition';
+	import type {
+		ChatInputMessage,
+		ChatInputProps,
+		IMentionableItem,
+		PreviewPageSrc
+	} from './types.js';
+	import { IconifyIcon } from '../../ui/icons/index.js';
+	import RichText from './RichText.svelte';
+	import PreviewPage from './PreviewPage.svelte';
+	import { clickOutsideAction } from '../../index.js';
+
+	let {
+		hideLoad = true,
+		clearMessage = false,
+		slashCommands = [],
+		mentionableItems = [],
+		onMessage,
+		previewPageTitle = 'Preview Attachment',
+		onSlash
+	}: ChatInputProps = $props();
+
+	let message = $state<ChatInputMessage>({
+		content: '',
+		contentType: 'text',
+		files: [],
+		mentions: []
+	});
+
+	let mentions = $state<IMentionableItem[]>([]);
+
+	let imageInput = $state<PreviewPageSrc>({
+		name: '',
+		content: '',
+		file: ''
+	});
+	let filesToSend = $state<any[]>([]);
+	let showImage = $state(false);
+	let open = $state(false);
+	let showFiles = $state(false);
+	let openDropDown = $state(false);
+
+	function loadFile(e: any) {
+		let image = e.target.files[0];
+		let reader = new FileReader();
+		reader.readAsDataURL(image);
+
+		reader.onload = (e: any) => {
+			const x = { name: image.name, content: e.target.result, file: image };
+			imageInput = x;
+		};
+		showImage = true;
+		open = false;
+	}
+
+	function onEmoji(event: any) {
+		message.content += event.detail;
+	}
+
+	function sendImage({ detail }: any) {
+		const { file } = detail;
+		filesToSend = [file, ...filesToSend];
+		imageInput = {
+			name: '',
+			content: '',
+			file: ''
+		};
+		showImage = false;
+	}
+
+	function sendMessage() {
+		if (message.content.length > 0) {
+			message = { ...message, files: filesToSend, mentions };
+			onMessage?.(message);
+			message = { content: '', contentType: 'text', files: [], mentions: [] };
+			filesToSend = [];
+			return;
+		}
+	}
+
+	function handleMention(event: any) {
+		const { detail } = event;
+		if (mentions.some((mention) => mention.id === detail.id)) {
+			mentions = mentions.filter((mention) => mention.id !== detail.id);
+		} else {
+			mentions = [...mentions, detail];
+		}
+
+		// console.log({ mentions, message: message.content });
+	}
+</script>
+
+<div class="flex flex-col gap-2">
+	{#if showFiles}
+		{#each filesToSend as file, index}
+			<ul class="flex w-full flex-col divide-y py-2" transition:fade>
+				<li class="w-full">
+					<div class="flex items-center justify-between">
+						<p class="w-96 truncate">{index + 1}. {file?.name}</p>
+						<button
+							class="grid place-content-center"
+							onclick={() => {
+								filesToSend = filesToSend.filter((_, i) => i !== index);
+							}}
+						>
+							<IconifyIcon
+								icon="ic:baseline-delete"
+								class="text-red-500"
+								style="font-size: 20px;"
+							/>
+						</button>
+					</div>
+				</li>
+			</ul>
+		{/each}
+	{/if}
+	<RichText
+		bind:value={message.content}
+		loading={!hideLoad}
+		{slashCommands}
+		{mentionableItems}
+		onMention={handleMention}
+		{onSlash}
+	/>
+
+	<div class="mx-4 flex items-center justify-between">
+		<div
+			class="flex items-center gap-3"
+			use:clickOutsideAction
+			onclickoutside={() => (openDropDown = false)}
+		>
+			<!-- <button class="  relative text-slate-600 hover:text-indigo-600 pb-2">
+				<EmojiSelector on:emoji={onEmoji} />
+			</button> -->
+			<button onclick={() => (open = !open)} class="text-slate-600 hover:text-indigo-600"
+				><IconifyIcon icon="mdi:clippy" style="font-size: 20px;" /></button
+			>
+		</div>
+		{#if filesToSend.length}
+			<div class="flex-grow pl-3" in:fade>
+				<button class="text-purple-700" onclick={() => (showFiles = !showFiles)}>
+					{filesToSend.length}
+					Attachments
+				</button>
+			</div>
+		{/if}
+		<button
+			aria-label="send message"
+			onclick={sendMessage}
+			class="text-slate-600 hover:text-indigo-600"
+		>
+			<IconifyIcon icon="majesticons:send" style="font-size: 20px;" />
+		</button>
+	</div>
+</div>
+
+{#if open}
+	<div class="relative">
+		<ul
+			use:clickOutsideAction
+			onclickoutside={() => (open = false)}
+			transition:fly={{ y: 50 }}
+			class="absolute bottom-6 left-8"
+		>
+			<li
+				class="h-10 w-10 cursor-pointer rounded-full bg-gradient-to-b from-blue-500 to-blue-300 p-2 text-white"
+			>
+				<label for="doc"
+					><IconifyIcon
+						icon="bxs:file"
+						class="grid cursor-pointer place-content-center"
+						style="font-size: 24px;"
+					/>
+				</label>
+				<input type="file" id="doc" class="hidden" accept="application/pdf" onchange={loadFile} />
+			</li>
+			<li
+				class="my-2 h-10 w-10 cursor-pointer rounded-full bg-gradient-to-b from-purple-500 to-pink-500 p-2 text-white"
+			>
+				<label for="photo"
+					><IconifyIcon
+						icon="icon-park-solid:pic"
+						class="grid cursor-pointer place-content-center"
+						style="font-size: 24px;"
+					/>
+				</label>
+				<input
+					type="file"
+					id="photo"
+					class="hidden"
+					accept="image/png, image/jpg"
+					onchange={loadFile}
+				/>
+			</li>
+		</ul>
+	</div>
+{/if}
+
+<PreviewPage
+	title={previewPageTitle}
+	src={imageInput}
+	bind:open={showImage}
+	onGetImage={sendImage}
+/>

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

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

package/dist/layout/Chat/DraggableWindow.svelte

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

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

@@ -0,0 +1,28 @@
+import type { DraggableWindowProps } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const DraggableWindow: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<DraggableWindowProps, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "isOpen" | "x" | "y" | "isCollapsed">;
+type DraggableWindow = InstanceType<typeof DraggableWindow>;
+export default DraggableWindow;

package/dist/layout/Chat/PreviewPage.svelte

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

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

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