@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/layout/Chat/RichText.svelte

@@ -1,216 +1,216 @@
-<script lang="ts">
-	import { clickOutsideAction, cn, IconifyIcon } from '../../index.js';
-	import type { CommandListType, IMentionableItem, ISlashCommand, RichTextProps } from './index.js';
-
-	let {
-		value = $bindable(''),
-		placeholder = 'Type a new message',
-		loading = false,
-		slashCommands = [],
-		mentionableItems = [],
-		onMention,
-		onSend,
-		onSlash,
-		class: className = ''
-	}: RichTextProps = $props();
-
-	let showCommandList = $state(false);
-	let commandListPosition = $state(0);
-	let commandListType = $state<CommandListType>('slash');
-	let filteredItems = $state<Array<ISlashCommand | IMentionableItem>>([]);
-	let textareaElement = $state<HTMLTextAreaElement | undefined>(undefined);
-	let lastTriggerPosition = $state(-1);
-
-	function onKeyUp(e: KeyboardEvent) {
-		if (e.code === 'Enter' && value && !e.shiftKey) {
-			if (showCommandList) {
-				e.preventDefault();
-				selectCommand();
-				return;
-			}
-			onSend?.();
-			return;
-		}
-
-		if (showCommandList) {
-			if (e.code === 'ArrowUp') {
-				e.preventDefault();
-				commandListPosition = Math.max(0, commandListPosition - 1);
-			} else if (e.code === 'ArrowDown') {
-				e.preventDefault();
-				commandListPosition = Math.min(filteredItems.length - 1, commandListPosition + 1);
-			}
-		}
-	}
-
-	function onKeyDown(e: KeyboardEvent) {
-		const cursorPos = textareaElement!.selectionStart;
-		const textBeforeCursor = value.substring(0, cursorPos);
-
-		if (e.key === '/' && !showCommandList) {
-			lastTriggerPosition = cursorPos;
-			showCommandList = true;
-			commandListType = 'slash';
-			filteredItems = slashCommands;
-			commandListPosition = 0;
-		} else if (e.key === '@' && !showCommandList) {
-			lastTriggerPosition = cursorPos;
-			showCommandList = true;
-			commandListType = 'mention';
-			filteredItems = mentionableItems;
-			commandListPosition = 0;
-		}
-
-		if (e.key === 'Backspace') {
-			const textUntilCursor = value.substring(0, cursorPos);
-			const lastAtPos = textUntilCursor.lastIndexOf('@');
-
-			if (lastAtPos !== -1) {
-				const textAfterAt = value.substring(lastAtPos);
-				const spacePos = textAfterAt.indexOf(' ');
-				const mentionText = spacePos === -1 ? textAfterAt : textAfterAt.substring(0, spacePos);
-
-				const mentionMatch = mentionableItems.find(
-					(item) => `@${item.name.replaceAll(' ', '_')}` === mentionText
-				);
-
-				if (mentionMatch && cursorPos > lastAtPos && cursorPos <= lastAtPos + mentionText.length) {
-					e.preventDefault();
-
-					const textBeforeMention = value.substring(0, lastAtPos);
-					const textAfterMention = value.substring(lastAtPos + mentionText.length);
-					value = textBeforeMention + textAfterMention;
-
-					setTimeout(() => {
-						textareaElement!.setSelectionRange(lastAtPos, lastAtPos);
-					});
-					return;
-				}
-			}
-
-			if (showCommandList && cursorPos <= lastTriggerPosition) {
-				showCommandList = false;
-			}
-		}
-
-		if (showCommandList) {
-			const textAfterTrigger = textBeforeCursor.substring(lastTriggerPosition);
-
-			if (commandListType === 'slash') {
-				filteredItems = slashCommands.filter((cmd) =>
-					cmd.cmdK.includes(textAfterTrigger.toLowerCase())
-				);
-			} else {
-				filteredItems = mentionableItems.filter((item) =>
-					item.name.toLowerCase().includes(textAfterTrigger.toLowerCase())
-				);
-			}
-
-			commandListPosition = Math.min(commandListPosition, filteredItems.length - 1);
-		}
-	}
-
-	function selectCommand() {
-		if (filteredItems.length === 0) return;
-
-		const selectedItem = filteredItems[commandListPosition];
-		const cursorPos = textareaElement!.selectionStart;
-		const textBeforeTrigger = value.substring(0, lastTriggerPosition);
-		const textAfterSelection = value.substring(cursorPos);
-
-		if (commandListType === 'slash') {
-			value = '';
-			onSlash?.(selectedItem as ISlashCommand);
-		} else {
-			value =
-				textBeforeTrigger +
-				`@${(selectedItem as IMentionableItem).name.replaceAll(' ', '_')}` +
-				textAfterSelection;
-			onMention?.(selectedItem as IMentionableItem);
-		}
-
-		const newCursorPos =
-			textBeforeTrigger.length +
-			(commandListType === 'slash'
-				? (selectedItem as ISlashCommand).cmdK.length + 1
-				: `@${(selectedItem as IMentionableItem).name.replaceAll(' ', '_')}`.length);
-
-		setTimeout(() => {
-			textareaElement!.setSelectionRange(newCursorPos, newCursorPos);
-		});
-
-		showCommandList = false;
-		commandListPosition = 0;
-	}
-
-	function closeCommandList() {
-		showCommandList = false;
-		commandListPosition = 0;
-	}
-
-	function autoExpandTextarea(event: any) {
-		event.target.style.height = 'auto';
-		event.target.style.height = event.target.scrollHeight + 'px';
-	}
-</script>
-
-<div class="flex flex-col gap-2" use:clickOutsideAction onclickoutside={closeCommandList}>
-	<div class="relative px-2">
-		<div class="flex">
-			<textarea
-				bind:value
-				bind:this={textareaElement}
-				oninput={autoExpandTextarea}
-				onkeyup={onKeyUp}
-				onkeydown={onKeyDown}
-				rows="1"
-				class={cn('mt-1 flex-grow rounded-md bg-transparent p-2 focus:outline-none', className)}
-				{placeholder}
-			></textarea>
-			{#if loading}
-				<div class="absolute right-5 pt-4">
-					<IconifyIcon icon="svg-spinners:3-dots-move" style="font-size: 20px;" />
-				</div>
-			{/if}
-		</div>
-
-		{#if showCommandList && filteredItems.length > 0}
-			<div
-				class="absolute bottom-12 left-2 z-[3500] w-64 rounded-md border border-gray-200 bg-white shadow-lg"
-			>
-				<ul class="py-1">
-					{#each filteredItems as item, index}
-						<li
-							class="cursor-pointer px-4 py-2 hover:bg-gray-100 {index === commandListPosition
-								? 'bg-gray-100'
-								: ''}"
-							onclick={() => {
-								commandListPosition = index;
-								selectCommand();
-							}}
-						>
-							{#if commandListType === 'slash'}
-								<div class="font-medium text-blue-600">{item?.name}</div>
-								<div class="text-xs text-gray-500">{item?.hint}</div>
-							{:else}
-								<div class="flex items-center gap-2">
-									{#if item?.avatar}
-										<img src={item?.avatar} alt={item?.name} class="h-6 w-6 rounded-full" />
-									{/if}
-									<div class="font-medium text-blue-600">{item?.name}</div>
-								</div>
-							{/if}
-						</li>
-					{/each}
-				</ul>
-			</div>
-		{/if}
-	</div>
-</div>
-
-<style>
-	textarea {
-		resize: none;
-		overflow: hidden;
-	}
-</style>
+<script lang="ts">
+	import { clickOutsideAction, cn, IconifyIcon } from '../../index.js';
+	import type { CommandListType, IMentionableItem, ISlashCommand, RichTextProps } from './index.js';
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Type a new message',
+		loading = false,
+		slashCommands = [],
+		mentionableItems = [],
+		onMention,
+		onSend,
+		onSlash,
+		class: className = ''
+	}: RichTextProps = $props();
+
+	let showCommandList = $state(false);
+	let commandListPosition = $state(0);
+	let commandListType = $state<CommandListType>('slash');
+	let filteredItems = $state<Array<ISlashCommand | IMentionableItem>>([]);
+	let textareaElement = $state<HTMLTextAreaElement | undefined>(undefined);
+	let lastTriggerPosition = $state(-1);
+
+	function onKeyUp(e: KeyboardEvent) {
+		if (e.code === 'Enter' && value && !e.shiftKey) {
+			if (showCommandList) {
+				e.preventDefault();
+				selectCommand();
+				return;
+			}
+			onSend?.();
+			return;
+		}
+
+		if (showCommandList) {
+			if (e.code === 'ArrowUp') {
+				e.preventDefault();
+				commandListPosition = Math.max(0, commandListPosition - 1);
+			} else if (e.code === 'ArrowDown') {
+				e.preventDefault();
+				commandListPosition = Math.min(filteredItems.length - 1, commandListPosition + 1);
+			}
+		}
+	}
+
+	function onKeyDown(e: KeyboardEvent) {
+		const cursorPos = textareaElement!.selectionStart;
+		const textBeforeCursor = value.substring(0, cursorPos);
+
+		if (e.key === '/' && !showCommandList) {
+			lastTriggerPosition = cursorPos;
+			showCommandList = true;
+			commandListType = 'slash';
+			filteredItems = slashCommands;
+			commandListPosition = 0;
+		} else if (e.key === '@' && !showCommandList) {
+			lastTriggerPosition = cursorPos;
+			showCommandList = true;
+			commandListType = 'mention';
+			filteredItems = mentionableItems;
+			commandListPosition = 0;
+		}
+
+		if (e.key === 'Backspace') {
+			const textUntilCursor = value.substring(0, cursorPos);
+			const lastAtPos = textUntilCursor.lastIndexOf('@');
+
+			if (lastAtPos !== -1) {
+				const textAfterAt = value.substring(lastAtPos);
+				const spacePos = textAfterAt.indexOf(' ');
+				const mentionText = spacePos === -1 ? textAfterAt : textAfterAt.substring(0, spacePos);
+
+				const mentionMatch = mentionableItems.find(
+					(item) => `@${item.name.replaceAll(' ', '_')}` === mentionText
+				);
+
+				if (mentionMatch && cursorPos > lastAtPos && cursorPos <= lastAtPos + mentionText.length) {
+					e.preventDefault();
+
+					const textBeforeMention = value.substring(0, lastAtPos);
+					const textAfterMention = value.substring(lastAtPos + mentionText.length);
+					value = textBeforeMention + textAfterMention;
+
+					setTimeout(() => {
+						textareaElement!.setSelectionRange(lastAtPos, lastAtPos);
+					});
+					return;
+				}
+			}
+
+			if (showCommandList && cursorPos <= lastTriggerPosition) {
+				showCommandList = false;
+			}
+		}
+
+		if (showCommandList) {
+			const textAfterTrigger = textBeforeCursor.substring(lastTriggerPosition);
+
+			if (commandListType === 'slash') {
+				filteredItems = slashCommands.filter((cmd) =>
+					cmd.cmdK.includes(textAfterTrigger.toLowerCase())
+				);
+			} else {
+				filteredItems = mentionableItems.filter((item) =>
+					item.name.toLowerCase().includes(textAfterTrigger.toLowerCase())
+				);
+			}
+
+			commandListPosition = Math.min(commandListPosition, filteredItems.length - 1);
+		}
+	}
+
+	function selectCommand() {
+		if (filteredItems.length === 0) return;
+
+		const selectedItem = filteredItems[commandListPosition];
+		const cursorPos = textareaElement!.selectionStart;
+		const textBeforeTrigger = value.substring(0, lastTriggerPosition);
+		const textAfterSelection = value.substring(cursorPos);
+
+		if (commandListType === 'slash') {
+			value = '';
+			onSlash?.(selectedItem as ISlashCommand);
+		} else {
+			value =
+				textBeforeTrigger +
+				`@${(selectedItem as IMentionableItem).name.replaceAll(' ', '_')}` +
+				textAfterSelection;
+			onMention?.(selectedItem as IMentionableItem);
+		}
+
+		const newCursorPos =
+			textBeforeTrigger.length +
+			(commandListType === 'slash'
+				? (selectedItem as ISlashCommand).cmdK.length + 1
+				: `@${(selectedItem as IMentionableItem).name.replaceAll(' ', '_')}`.length);
+
+		setTimeout(() => {
+			textareaElement!.setSelectionRange(newCursorPos, newCursorPos);
+		});
+
+		showCommandList = false;
+		commandListPosition = 0;
+	}
+
+	function closeCommandList() {
+		showCommandList = false;
+		commandListPosition = 0;
+	}
+
+	function autoExpandTextarea(event: any) {
+		event.target.style.height = 'auto';
+		event.target.style.height = event.target.scrollHeight + 'px';
+	}
+</script>
+
+<div class="flex flex-col gap-2" use:clickOutsideAction onclickoutside={closeCommandList}>
+	<div class="relative px-2">
+		<div class="flex">
+			<textarea
+				bind:value
+				bind:this={textareaElement}
+				oninput={autoExpandTextarea}
+				onkeyup={onKeyUp}
+				onkeydown={onKeyDown}
+				rows="1"
+				class={cn('mt-1 flex-grow rounded-md bg-transparent p-2 focus:outline-none', className)}
+				{placeholder}
+			></textarea>
+			{#if loading}
+				<div class="absolute right-5 pt-4">
+					<IconifyIcon icon="svg-spinners:3-dots-move" style="font-size: 20px;" />
+				</div>
+			{/if}
+		</div>
+
+		{#if showCommandList && filteredItems.length > 0}
+			<div
+				class="absolute bottom-12 left-2 z-[3500] w-64 rounded-md border border-gray-200 bg-white shadow-lg"
+			>
+				<ul class="py-1">
+					{#each filteredItems as item, index}
+						<li
+							class="cursor-pointer px-4 py-2 hover:bg-gray-100 {index === commandListPosition
+								? 'bg-gray-100'
+								: ''}"
+							onclick={() => {
+								commandListPosition = index;
+								selectCommand();
+							}}
+						>
+							{#if commandListType === 'slash'}
+								<div class="font-medium text-blue-600">{item?.name}</div>
+								<div class="text-xs text-gray-500">{item?.hint}</div>
+							{:else}
+								<div class="flex items-center gap-2">
+									{#if item?.avatar}
+										<img src={item?.avatar} alt={item?.name} class="h-6 w-6 rounded-full" />
+									{/if}
+									<div class="font-medium text-blue-600">{item?.name}</div>
+								</div>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	textarea {
+		resize: none;
+		overflow: hidden;
+	}
+</style>

package/dist/layout/ComponentCanvas/Canvas.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-	import { receive, type IComponentDescriptor, type IDocumentCanvasProps } from '../../index.js';
-	import { nanoid } from 'nanoid';
-	import ComponentRenderer from './ComponentRenderer.svelte';
-
-	let {
-		children = [],
-		close,
-		contextKey,
-		toggleCollapse,
-		showBackground
-	}: IDocumentCanvasProps = $props();
-
-	function updateChildren(children: IComponentDescriptor[]) {
-		return children.map((a) => {
-			if (!a.id) a.id = nanoid();
-			return a;
-		});
-	}
-
-	let toRender = $derived(updateChildren(children));
-</script>
-
-<div class="flex flex-grow flex-col gap-5">
-	{#each toRender as child (child.id)}
-		<div
-			class="flex p-3"
-			class:shadow={showBackground}
-			class:bg-white={showBackground}
-			in:receive={{ key: child.id }}
-		>
-			<ComponentRenderer descriptor={child} {contextKey} {close} {toggleCollapse} />
-		</div>
-	{/each}
-	{#if toRender.length === 0}
-		<!-- <Alert>
-      It is lonely here
-    </Alert> -->
-	{/if}
-</div>
+<script lang="ts">
+	import { receive, type IComponentDescriptor, type IDocumentCanvasProps } from '../../index.js';
+	import { nanoid } from 'nanoid';
+	import ComponentRenderer from './ComponentRenderer.svelte';
+
+	let {
+		children = [],
+		close,
+		contextKey,
+		toggleCollapse,
+		showBackground
+	}: IDocumentCanvasProps = $props();
+
+	function updateChildren(children: IComponentDescriptor[]) {
+		return children.map((a) => {
+			if (!a.id) a.id = nanoid();
+			return a;
+		});
+	}
+
+	let toRender = $derived(updateChildren(children));
+</script>
+
+<div class="flex flex-grow flex-col gap-5">
+	{#each toRender as child (child.id)}
+		<div
+			class="flex p-3"
+			class:shadow={showBackground}
+			class:bg-white={showBackground}
+			in:receive={{ key: child.id }}
+		>
+			<ComponentRenderer descriptor={child} {contextKey} {close} {toggleCollapse} />
+		</div>
+	{/each}
+	{#if toRender.length === 0}
+		<!-- <Alert>
+      It is lonely here
+    </Alert> -->
+	{/if}
+</div>