@rkosafo/cai.components 0.0.75 → 0.0.78

package/dist/layout/Chat/ChatInput.svelte

@@ -1,207 +1,207 @@
-<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,
-		class: className = ''
-	}: 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 : PreviewPageSrc) {
-		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}
-		class={className}
-	/>
-
-	<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}
-/>
+<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,
+		class: className = ''
+	}: 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 : PreviewPageSrc) {
+		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}
+		class={className}
+	/>
+
+	<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}
+/>