@rkosafo/cai.components 0.0.40 → 0.0.42

package/dist/layout/Chat/RichText.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+	import { clickOutsideAction, 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
+	}: 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="mt-1 flex-grow rounded-md bg-transparent p-2 focus:outline-none"
+				{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/Chat/RichText.svelte.d.ts

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

package/dist/layout/Chat/index.d.ts

@@ -0,0 +1,9 @@
+export * from './types.js';
+export { default as ChatEntrySkeleton } from './ChatEntrySkeleton.svelte';
+export { default as ChatHeader } from './ChatHeader.svelte';
+export { default as RichTextEditor } from './RichText.svelte';
+export { default as PreviewPage } from './PreviewPage.svelte';
+export { default as CategorySelector } from './CategorySelector.svelte';
+export { default as DraggableWindow } from './DraggableWindow.svelte';
+export { default as ChatInput } from './ChatInput.svelte';
+export { default as ChatEntry } from './ChatEntry.svelte';

package/dist/layout/Chat/index.js

@@ -0,0 +1,9 @@
+export * from './types.js';
+export { default as ChatEntrySkeleton } from './ChatEntrySkeleton.svelte';
+export { default as ChatHeader } from './ChatHeader.svelte';
+export { default as RichTextEditor } from './RichText.svelte';
+export { default as PreviewPage } from './PreviewPage.svelte';
+export { default as CategorySelector } from './CategorySelector.svelte';
+export { default as DraggableWindow } from './DraggableWindow.svelte';
+export { default as ChatInput } from './ChatInput.svelte';
+export { default as ChatEntry } from './ChatEntry.svelte';

package/dist/layout/Chat/types.d.ts

@@ -0,0 +1,139 @@
+import type { Snippet } from 'svelte';
+export interface ChatEntrySkeletonProps {
+    isMobile?: boolean;
+    messageCount?: number;
+}
+export interface ChatHeaderOverflowAction {
+    id: string;
+    label: string;
+    icon?: string;
+}
+export type CaseToggleType = 'follow' | 'unfollow';
+export interface ChatHeaderProps {
+    logoUrl?: string;
+    caseTitle?: string;
+    user?: {
+        name: string;
+        profileImageUrl?: string;
+        initials: string;
+    };
+    caseTypes?: string;
+    assignedTo?: string;
+    showAssignedTo?: boolean;
+    showFollowCaseButton?: boolean;
+    showBackArrow?: boolean;
+    overflowActionsList?: ChatHeaderOverflowAction[];
+    showOverflowActionButton?: boolean;
+    caseStatus?: string;
+    isFollowingCase?: boolean;
+    showFollowOverflowAction?: boolean;
+    showCloseOverflowAction?: boolean;
+    onCloseCase?: () => void;
+    onOverflowActionClicked?: (val: ChatHeaderOverflowAction) => void;
+    onToggleFollowCase?: (val: CaseToggleType) => void;
+    onBackArrowClicked?: () => void;
+    leadingWidget?: Snippet;
+    trailingWidget?: Snippet;
+    caseDetailsWidget?: Snippet;
+}
+export interface ISlashCommand {
+    name: string;
+    cmdK: string;
+    hint: string;
+    viewer: string;
+}
+export interface IMentionableItem {
+    id: string | number;
+    name: string;
+    avatar?: string;
+}
+export interface RichTextProps {
+    value?: string;
+    placeholder?: string;
+    loading?: boolean;
+    slashCommands?: ISlashCommand[];
+    mentionableItems?: IMentionableItem[];
+    onSend?: () => void;
+    onSlash?: (val: ISlashCommand) => void;
+    onMention?: (val: IMentionableItem) => void;
+}
+export type CommandListType = 'slash' | 'mention';
+export interface PreviewPageSrc {
+    name: string;
+    content: string;
+    file: string;
+}
+export interface PreviewPageProps {
+    open: boolean;
+    fullImage?: boolean;
+    showActions?: boolean;
+    title: string;
+    src?: PreviewPageSrc;
+    onGetImage?: (val: PreviewPageSrc) => void;
+}
+export interface ICaseCategory {
+    id: number;
+    name: string;
+    description: string;
+    assignedTo: number[];
+    visibleTo: number[];
+    canClose: number[];
+    autoAssign: boolean;
+    parentId?: number;
+    items?: ICaseCategory[];
+}
+export interface CategorySelectorClicked {
+    selected: ICaseCategory;
+    list: string[] | null;
+}
+export interface CategorySelectorProps {
+    items?: ICaseCategory[];
+    options?: ICaseCategory[];
+    onClick?: (val: CategorySelectorClicked) => void;
+}
+export interface DraggableWindowProps {
+    title: string;
+    isOpen: boolean;
+    isCollapsed: boolean;
+    width?: string;
+    height?: string;
+    x?: number;
+    y?: number;
+    minWidth?: string;
+    minHeight?: string;
+    zIndex?: number;
+    onBringToFront?: () => void;
+}
+export interface ChatInputMessage {
+    content: string;
+    contentType: 'text';
+    files: File[];
+    mentions: any[];
+}
+export interface ChatInputProps {
+    clearMessage?: boolean;
+    hideLoad?: boolean;
+    slashCommands?: ISlashCommand[];
+    mentionableItems?: IMentionableItem[];
+    onMessage?: (val: ChatInputMessage) => void;
+    onSlash?: (val: ISlashCommand) => void;
+    previewPageTitle?: string;
+}
+export interface ChatEntryMessage {
+    mine: boolean;
+    message: string;
+    files?: string[];
+    user?: {
+        firstName: string;
+        id: number | string;
+        surname: string;
+        otherNames?: string;
+        staffNumber?: string;
+    };
+}
+export interface ChatEntryPageProps {
+    message: ChatEntryMessage;
+    time: string;
+    userId: number | string;
+    textBorder?: boolean;
+}

package/dist/layout/Chat/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/index.d.ts

@@ -2,6 +2,7 @@ import { type ClassValue } from 'clsx';
 export { default as Popper } from './Popper.svelte';
 export * from './closeButton/index.js';
 export { trapFocus } from './action.js';
+import type { ICaseCategory } from '../index.js';
 export declare function cn(...inputs: ClassValue[]): string;
 export declare function saveToLocalStorage<T>(key: string, data: T): void;
 export declare function loadFromLocalStorage<T>(key: string): T | undefined;
@@ -11,3 +12,12 @@ export declare const send: (node: any, params: import("svelte/transition").Cross
 }) => () => import("svelte/transition").TransitionConfig, receive: (node: any, params: import("svelte/transition").CrossfadeParams & {
     key: any;
 }) => () => import("svelte/transition").TransitionConfig;
+export declare function getInitials(val?: string): string;
+export declare function findTicketCategoryParents(selectedItem: ICaseCategory, data: ICaseCategory[]): string[] | null;
+export declare function formatTicketDate(x: any): string;
+export declare function formatTicketHeader(x: any): string;
+export declare function isImage(path: string): boolean;
+export declare function isPdf(path: string): boolean;
+export declare function isWord(path: string): boolean;
+export declare function isPPT(path: string): boolean;
+export declare function isExcel(path: string): boolean;

package/dist/utils/index.js

@@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge';
 export { default as Popper } from './Popper.svelte';
 export * from './closeButton/index.js';
 export { trapFocus } from './action.js';
+import dayjs from 'dayjs';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
@@ -50,3 +51,81 @@ export const [send, receive] = crossfade({
         };
     }
 });
+export function getInitials(val) {
+    if (!val)
+        return '';
+    return val
+        .split(' ')
+        .filter((x) => x.length > 1)
+        .map((x) => x[0])
+        .join('');
+}
+export function findTicketCategoryParents(selectedItem, data) {
+    function findParentsRecursive(category, categories) {
+        for (const item of categories) {
+            if (item === category) {
+                return [item.name];
+            }
+            else if (item.items) {
+                const parents = findParentsRecursive(category, item.items);
+                if (parents) {
+                    return [item.name, ...parents];
+                }
+            }
+        }
+        return null;
+    }
+    const parentStack = findParentsRecursive(selectedItem, data);
+    return parentStack;
+}
+export function formatTicketDate(x) {
+    let today = dayjs();
+    let date = dayjs(x);
+    if (today.isSame(date, 'day')) {
+        return date.format('hh:mm a');
+    }
+    else if (date.add(7, 'day').isSame(today)) {
+        return date.format('ddd');
+    }
+    else {
+        return date.format('ddd DD,MM,YYYY');
+    }
+}
+export function formatTicketHeader(x) {
+    let today = dayjs();
+    let date = dayjs(x);
+    // const yesterday = today.subtract(1, 'day');
+    const difference = today.diff(date, 'day');
+    const isDateInCurrentWeek = today.startOf('week').isSame(date.startOf('week'), 'day');
+    // console.log(difference);
+    if (today.isSame(date, 'day')) {
+        return 'Today';
+    }
+    else if (difference === 0) {
+        return 'Yesterday';
+    }
+    else if (isDateInCurrentWeek) {
+        return date.format('dddd');
+    }
+    else {
+        return date.format('ddd DD,MMM,YYYY');
+    }
+}
+export function isImage(path) {
+    return (path?.toLowerCase().includes('jpeg') ||
+        path?.toLowerCase().includes('png') ||
+        path?.toLowerCase().includes('webq') ||
+        path?.toLowerCase().includes('jpg'));
+}
+export function isPdf(path) {
+    return path.toLowerCase().endsWith('.pdf');
+}
+export function isWord(path) {
+    return path.toLowerCase().includes('docs');
+}
+export function isPPT(path) {
+    return path.toLowerCase().includes('pptx');
+}
+export function isExcel(path) {
+    return path?.toLowerCase().includes('csv') || path?.toLowerCase().includes('xlsx');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -57,6 +57,7 @@
     "cl-editor": "^2.3.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "dayjs": "^1.11.18",
     "felte": "^1.3.0",
     "iconify-icon": "^3.0.0",
     "keycloak-js": "^26.2.0",