@softwareone/spi-sv5-library 1.10.1 → 1.10.3

package/dist/Button/Button.svelte

@@ -8,14 +8,49 @@
 	interface ButtonProps extends HTMLButtonAttributes {
 		variant?: Variant;
 		variantColor?: VariantColor;
+		loading?: boolean;
 		children: Snippet;
 	}
 
-	let { variant = 'primary', variantColor = 'primary', children, ...props }: ButtonProps = $props();
+	let {
+		variant = 'primary',
+		variantColor = 'primary',
+		loading = false,
+		children,
+		...props
+	}: ButtonProps = $props();
 </script>
 
-<button class="btn btn-{variant}-{variantColor}" {...props}>
-	{@render children()}
+<button
+	class={['btn', `btn-${variant}-${variantColor}`, loading && 'loading']}
+	disabled={loading || props.disabled}
+	{...props}
+>
+	{#if loading}
+		<span class="spinner-wrapper">
+			<svg
+				class="spinner"
+				width="16"
+				height="16"
+				viewBox="0 0 16 16"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM2.50919 8C2.50919 11.0325 4.96752 13.4908 8 13.4908C11.0325 13.4908 13.4908 11.0325 13.4908 8C13.4908 4.96752 11.0325 2.50919 8 2.50919C4.96752 2.50919 2.50919 4.96752 2.50919 8Z"
+					fill="currentColor"
+					opacity="0.3"
+				/>
+				<path
+					d="M8 1.2546C8 0.561698 8.56514 -0.0100693 9.24952 0.0981505C10.9084 0.360457 12.4543 1.14062 13.6569 2.34315C15.1571 3.84344 16 5.87827 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.4543 14.8594 10.9084 15.6396 9.24952 15.9018C8.56514 16.0101 8 15.4383 8 14.7454C8 14.0525 8.56889 13.5051 9.24375 13.3481C10.235 13.1176 11.1513 12.6138 11.8826 11.8826C12.9123 10.8529 13.4908 9.45641 13.4908 8C13.4908 6.54359 12.9123 5.14709 11.8826 4.11742C11.1513 3.38615 10.235 2.88245 9.24375 2.65189C8.56889 2.49492 8 1.9475 8 1.2546Z"
+					fill="currentColor"
+				/>
+			</svg>
+		</span>
+	{/if}
+	<span class="content" class:hidden={loading}>
+		{@render children()}
+	</span>
 </button>
 
 <style>
@@ -27,6 +62,56 @@
 		font-style: normal;
 		font-weight: 400;
 		line-height: 20px;
+		display: inline-flex;
+		position: relative;
+		transition: all 0.2s ease-in-out;
+	}
+
+	.content.hidden {
+		opacity: 0;
+	}
+
+	.spinner-wrapper {
+		position: absolute;
+		display: inline-flex;
+		align-items: center;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.spinner {
+		animation: spin 0.8s linear infinite;
+	}
+
+	.btn-primary-primary .spinner,
+	.btn-primary-danger .spinner {
+		color: #fff;
+	}
+
+	.btn-secondary-primary .spinner,
+	.btn-outline-primary .spinner,
+	.btn-outline-none-primary .spinner {
+		color: #472aff;
+	}
+
+	.btn-secondary-danger .spinner,
+	.btn-outline-danger .spinner,
+	.btn-outline-none-danger .spinner {
+		color: #dc182c;
+	}
+
+	.btn.loading {
+		cursor: wait;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
 	}
 
 	.btn:hover:not(:disabled),
@@ -40,7 +125,7 @@
 		outline: none;
 	}
 
-	.btn:disabled {
+	.btn:disabled:not(.loading) {
 		background: #e0e5e8;
 		border: none;
 		color: #6b7180;
@@ -132,8 +217,8 @@
 		background: #fce8ea;
 	}
 
-	.btn-outline-none-primary:disabled,
-	.btn-outline-none-danger:disabled {
+	.btn-outline-none-primary:disabled:not(.loading),
+	.btn-outline-none-danger:disabled:not(.loading) {
 		background: transparent;
 		color: #6b7180;
 	}

package/dist/Button/Button.svelte.d.ts

@@ -5,6 +5,7 @@ type VariantColor = 'primary' | 'danger';
 interface ButtonProps extends HTMLButtonAttributes {
     variant?: Variant;
     variantColor?: VariantColor;
+    loading?: boolean;
     children: Snippet;
 }
 declare const Button: import("svelte").Component<ButtonProps, {}, "">;

package/dist/Controls/Input/Input.svelte

@@ -321,15 +321,12 @@
 		box-shadow: 0px 0px 0px 3px rgba(220, 38, 38, 0.2);
 	}
 
-	.form-input-wrapper.success {
-		border-color: #008556;
-	}
-
+	.form-input-wrapper.success,
 	.form-input-wrapper.success:hover:not(:has(.form-input:disabled)):not(
 			:has(.form-input:read-only)
 		),
 	.form-input-wrapper.success:focus-within {
-		border-color: #10b981;
+		border-color: #008556;
 	}
 
 	.form-input-wrapper.success:focus-within {

package/dist/Controls/TextArea/TextArea.svelte

@@ -209,15 +209,13 @@
 		box-shadow: 0px 0px 0px 3px rgba(220, 38, 38, 0.2);
 	}
 
-	.form-textarea-wrapper.success {
-		border-color: #008556;
-	}
 
+	.form-textarea-wrapper.success,
 	.form-textarea-wrapper.success:hover:not(:has(.form-textarea:disabled)):not(
 			:has(.form-textarea:read-only)
 		),
 	.form-textarea-wrapper.success:focus-within {
-		border-color: #10b981;
+		border-color: #008556;
 	}
 
 	.form-textarea-wrapper.success:focus-within {

package/dist/Table/Header.svelte

@@ -164,7 +164,7 @@
 
 	.table-header-search {
 		display: flex;
-		width: 144px;
+		width: 100%;
 		margin: var(--spacing-xs) 0;
 		font-weight: var(--font-normal);
 	}

package/dist/Table/Table.svelte

@@ -238,7 +238,7 @@
 			{/if}
 		</header>
 
-		{#if enableChecked && (table.getIsSomeRowsSelected() || table.getIsAllRowsSelected())}
+		{#if enableChecked && selectedRows.length > 0}
 			<div class="table-bulk-actions">
 				<p>
 					{selectedRows.length} of {table.getCoreRowModel().rows.length} items are selected

package/dist/Table/excel.d.ts

@@ -1,4 +1,4 @@
 import type { Table } from './adapter/index.js';
 import { type ExcelSetting } from './excel-setting.js';
-declare const exportExcel: <T>(table: Table<T>, excelSetting: ExcelSetting) => Promise<void>;
+export declare const exportExcel: <T>(table: Table<T>, excelSetting: ExcelSetting) => Promise<void>;
 export default exportExcel;

package/dist/Table/excel.js

@@ -2,7 +2,7 @@
 import ExcelJS from 'exceljs';
 import saveAs from 'file-saver';
 import { ColumnFormat } from './excel-setting.js';
-const exportExcel = async (table, excelSetting) => {
+export const exportExcel = async (table, excelSetting) => {
     const workbook = new ExcelJS.Workbook();
     const worksheet = workbook.addWorksheet('Sheet 1');
     worksheet.columns = getColumns(table, excelSetting);

package/dist/Table/index.d.ts

@@ -2,5 +2,6 @@ export * from './adapter/index.js';
 export * from './consts.js';
 export * from './context.js';
 export { ColumnFormat, type ExcelSetting } from './excel-setting.js';
+export * from './excel.js';
 export { default as Table } from './Table.svelte';
-export { createActionsColumn } from './util.js';
+export { createActionsColumn, createStaticTable } from './util.js';

package/dist/Table/index.js

@@ -2,5 +2,6 @@ export * from './adapter/index.js';
 export * from './consts.js';
 export * from './context.js';
 export { ColumnFormat } from './excel-setting.js';
+export * from './excel.js';
 export { default as Table } from './Table.svelte';
-export { createActionsColumn } from './util.js';
+export { createActionsColumn, createStaticTable } from './util.js';

package/dist/Table/util.d.ts

@@ -1,4 +1,5 @@
-import { type Row } from './adapter/index.js';
+import { type ColumnDef, type Row } from './adapter/index.js';
 import type { Action } from './types.js';
 export declare const createCheckedColumn: <T>() => import("./adapter/index.js").DisplayColumnDef<T, unknown>;
 export declare const createActionsColumn: <T>(getActions: (row: Row<T>) => Action[]) => import("./adapter/index.js").DisplayColumnDef<T, unknown>;
+export declare const createStaticTable: <TData>(columns: ColumnDef<TData, any>[], data: TData[]) => import("./adapter/index.js").Table<TData>;

package/dist/Table/util.js

@@ -1,6 +1,6 @@
 import ActionsColumn from './ActionsColumn.svelte';
 import RowCheckBox from './RowCheckBox.svelte';
-import { createColumnHelper, renderComponent } from './adapter/index.js';
+import { createColumnHelper, createTable, getCoreRowModel, renderComponent } from './adapter/index.js';
 export const createCheckedColumn = () => {
     const columnHelper = createColumnHelper();
     return columnHelper.display({
@@ -44,3 +44,13 @@ export const createActionsColumn = (getActions) => {
         })
     });
 };
+export const createStaticTable = (columns, data) => {
+    return createTable({
+        columns,
+        data,
+        getCoreRowModel: getCoreRowModel(),
+        state: {},
+        onStateChange: () => { },
+        renderFallbackValue: null
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.10.1",
+	"version": "1.10.3",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",
@@ -50,7 +50,6 @@
 	},
 	"peerDependencies": {
 		"@tanstack/table-core": "^8.21.3",
-		"adaptivecards": "^3.0.5",
 		"exceljs": "^4.4.0",
 		"file-saver": "^2.0.5",
 		"svelte": "^5.0.0",
@@ -64,9 +63,6 @@
 		"zod": {
 			"optional": true
 		},
-		"adaptivecards": {
-			"optional": true
-		},
 		"@tanstack/table-core": {
 			"optional": true
 		},
@@ -78,27 +74,26 @@
 		}
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/adapter-node": "^5.4.0",
-		"@sveltejs/kit": "^2.48.4",
-		"@sveltejs/package": "^2.5.4",
-		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/adapter-node": "^5.5.3",
+		"@sveltejs/kit": "^2.53.0",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tanstack/table-core": "^8.21.3",
 		"@types/file-saver": "^2.0.7",
-		"adaptivecards": "^3.0.5",
 		"exceljs": "^4.4.0",
 		"file-saver": "^2.0.5",
-		"prettier": "^3.6.2",
-		"prettier-plugin-svelte": "^3.4.0",
-		"publint": "^0.3.15",
-		"svelte": "^5.43.5",
-		"svelte-check": "^4.3.3",
-		"sveltekit-superforms": "^2.28.1",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.5.0",
+		"publint": "^0.3.17",
+		"svelte": "^5.53.3",
+		"svelte-check": "^4.4.3",
+		"sveltekit-superforms": "^2.30.0",
 		"typescript": "^5.9.3",
-		"vite": "^6.3.0",
-		"zod": "^4.1.12"
+		"vite": "^7.3.1",
+		"zod": "^4.3.6"
 	},
 	"dependencies": {
-		"@sveltejs/kit": "^2.48.4"
+		"@sveltejs/kit": "^2.53.0"
 	}
 }

package/dist/ChatBot/ChatBot.svelte

@@ -1,210 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-
-	import ChatBotFooter from './ChatBotFooter.svelte';
-	import ChatBotHeader from './ChatBotHeader.svelte';
-	import ChatBotMessages from './ChatBotMessages.svelte';
-	import {
-		type ChatBotMessage,
-		type Chat,
-		type ChatMessage,
-		type ChatSessionStart,
-		type UserMessage,
-		type ChatBotReplyMessage
-	} from './chatbotState.svelte';
-
-	interface Props {
-		sendmessage: (chat: Chat) => Promise<ChatBotReplyMessage | undefined>;
-		title?: string;
-	}
-
-	let { sendmessage, title = 'Chat Bot' }: Props = $props();
-
-	const CHATBOT_MESSAGES_STORAGE_KEY = 'chatbot-messages';
-
-	let isOpen = $state(false);
-	let isLoading = $state(false);
-	let messages = $state<ChatBotMessage[]>([]);
-
-	const initializeChatBot = async () => {
-		const chat: ChatSessionStart = { type: 'session_init' };
-		await handleMessage(chat);
-	};
-
-	const onsend = async (text: string) => {
-		const chat: ChatMessage = { type: 'text', text };
-		const userMessage: UserMessage = {
-			type: 'user',
-			content: text
-		};
-		setMessages(userMessage);
-		await handleMessage(chat);
-	};
-
-	const handleMessage = async (chat: Chat) => {
-		isLoading = true;
-		const chatBotReplyMessage = await sendmessage(chat);
-		if (chatBotReplyMessage) setMessages(chatBotReplyMessage);
-		isLoading = false;
-	};
-
-	const setMessages = (message: ChatBotMessage) => {
-		messages = [...messages, message];
-		storeChatMessages(messages);
-	};
-
-	const handleClose = () => {
-		toggleModal();
-		messages = [];
-		clearChatMessages();
-	};
-
-	const toggleModal = () => {
-		isOpen = !isOpen;
-	};
-
-	function fetchChatMessages() {
-		const storedMessages = localStorage.getItem(CHATBOT_MESSAGES_STORAGE_KEY);
-		const messages: ChatBotMessage[] = storedMessages ? JSON.parse(storedMessages) : [];
-		return messages;
-	}
-
-	const storeChatMessages = (messages: ChatBotMessage[]) => {
-		localStorage.setItem(CHATBOT_MESSAGES_STORAGE_KEY, JSON.stringify(messages));
-	};
-
-	const clearChatMessages = () => {
-		localStorage.removeItem(CHATBOT_MESSAGES_STORAGE_KEY);
-	};
-
-	onMount(() => {
-		messages = fetchChatMessages();
-	});
-
-	$effect(() => {
-		if (isOpen && messages.length === 0) {
-			initializeChatBot();
-		}
-	});
-</script>
-
-<div class="container">
-	{#if isOpen}
-		<div class="chatbot-container">
-			<ChatBotHeader {title} onclose={handleClose} onminimize={toggleModal} />
-			<div class="chatbot-body">
-				<ChatBotMessages {messages} {isLoading} oncardaction={handleMessage} />
-			</div>
-			<ChatBotFooter {onsend} {isLoading} />
-		</div>
-	{:else}
-		<button class="chatbot-toggle" onclick={toggleModal} aria-label="Open chat">
-			<span class="material-icons">chat_bubble_outline</span>
-		</button>
-	{/if}
-</div>
-
-<style>
-	.container {
-		--chatbot-primary: #472aff;
-		--chatbot-primary-hover: #3520bf;
-		--chatbot-bg: #ffffff;
-		--chatbot-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-		--chatbot-radius: 16px;
-		--chatbot-transition: all 0.3s ease;
-	}
-
-	.chatbot-container {
-		position: fixed;
-		bottom: 24px;
-		right: 24px;
-		width: 400px;
-		height: 600px;
-		display: flex;
-		flex-direction: column;
-		border-radius: var(--chatbot-radius);
-		box-shadow: var(--chatbot-shadow);
-		background: var(--chatbot-bg);
-		animation: slideUp 0.3s ease;
-		transition: var(--chatbot-transition);
-		z-index: 1000;
-	}
-
-	.chatbot-body {
-		flex: 1;
-		overflow-y: auto;
-		padding: 10px;
-		background-color: #f9fafb;
-	}
-
-	.chatbot-toggle {
-		position: fixed;
-		bottom: 24px;
-		right: 24px;
-		width: 60px;
-		height: 60px;
-		border-radius: 50%;
-		background: var(--chatbot-primary);
-		color: var(--chatbot-bg);
-		border: none;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-shadow: var(--chatbot-shadow);
-		transition: var(--chatbot-transition);
-		z-index: 999;
-		animation: fadeIn 0.3s ease;
-	}
-
-	.chatbot-toggle:hover {
-		background: var(--chatbot-primary-hover);
-		transform: scale(1.1);
-		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
-	}
-
-	.chatbot-toggle:active {
-		transform: scale(0.95);
-	}
-
-	.chatbot-toggle .material-icons {
-		font-size: 28px;
-	}
-
-	@media (max-width: 480px) {
-		.chatbot-container {
-			width: 100vw;
-			height: 100vh;
-			bottom: 0;
-			right: 0;
-			border-radius: 0;
-		}
-
-		.chatbot-toggle {
-			bottom: 16px;
-			right: 16px;
-		}
-	}
-
-	@keyframes slideUp {
-		from {
-			transform: translateY(20px);
-			opacity: 0;
-		}
-		to {
-			transform: translateY(0);
-			opacity: 1;
-		}
-	}
-
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-			transform: scale(0.8);
-		}
-		to {
-			opacity: 1;
-			transform: scale(1);
-		}
-	}
-</style>

package/dist/ChatBot/ChatBot.svelte.d.ts

@@ -1,8 +0,0 @@
-import { type Chat, type ChatBotReplyMessage } from './chatbotState.svelte';
-interface Props {
-    sendmessage: (chat: Chat) => Promise<ChatBotReplyMessage | undefined>;
-    title?: string;
-}
-declare const ChatBot: import("svelte").Component<Props, {}, "">;
-type ChatBot = ReturnType<typeof ChatBot>;
-export default ChatBot;

package/dist/ChatBot/ChatBotFooter.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-	import { Input, Button } from '../index.js';
-
-	interface Props {
-		onsend: (text: string) => Promise<void>;
-		isLoading: boolean;
-	}
-
-	let { onsend, isLoading }: Props = $props();
-
-	let message = $state('');
-
-	const handleSend = async () => {
-		await onsend(message);
-		message = '';
-	};
-
-	const handleKeyPress = (event: KeyboardEvent) => {
-		if (event.key === 'Enter' && !event.shiftKey) {
-			event.preventDefault();
-			handleSend();
-		}
-	};
-</script>
-
-<div class="chatbot-input">
-	<div class="input">
-		<Input
-			placeholder="Type a message"
-			bind:value={message}
-			disableValidationColor
-			onkeydown={handleKeyPress}
-		/>
-	</div>
-	<Button
-		variant="primary"
-		variantColor="primary"
-		disabled={!message || isLoading}
-		onclick={handleSend}>Send</Button
-	>
-</div>
-
-<style>
-	.input {
-		width: 100%;
-	}
-
-	.chatbot-input {
-		display: flex;
-		gap: 10px;
-		padding: 10px 14px;
-	}
-</style>

package/dist/ChatBot/ChatBotFooter.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    onsend: (text: string) => Promise<void>;
-    isLoading: boolean;
-}
-declare const ChatBotFooter: import("svelte").Component<Props, {}, "">;
-type ChatBotFooter = ReturnType<typeof ChatBotFooter>;
-export default ChatBotFooter;

package/dist/ChatBot/ChatBotHeader.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-	type Props = {
-		title: string;
-		onclose: VoidFunction;
-		onminimize: VoidFunction;
-	};
-	let { title, onclose, onminimize }: Props = $props();
-</script>
-
-<div class="chatbot-header">
-	<h3 class="chatbot-title">{title}</h3>
-	<div class="header-actions">
-		<button type="button" class="icon-btn" onclick={onminimize} aria-label="Minimize chat">
-			<span class="material-icons">remove</span>
-		</button>
-		<button type="button" class="icon-btn" onclick={onclose} aria-label="Close chat">
-			<span class="material-icons">close</span>
-		</button>
-	</div>
-</div>
-
-<style>
-	.chatbot-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 12px 16px;
-		background: #472aff;
-		color: #fff;
-		border-top-left-radius: 16px;
-		border-top-right-radius: 16px;
-	}
-
-	.chatbot-title {
-		margin: 0;
-		font-size: 15px;
-		font-weight: 600;
-	}
-
-	.header-actions {
-		display: flex;
-		gap: 4px;
-		align-items: center;
-	}
-
-	.icon-btn {
-		background: transparent;
-		border: none;
-		color: #fff;
-		cursor: pointer;
-		padding: 4px;
-		border-radius: 6px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: background-color 0.2s ease;
-	}
-
-	.icon-btn:hover {
-		background-color: rgba(255, 255, 255, 0.2);
-	}
-
-	.icon-btn .material-icons {
-		font-size: 18px;
-	}
-</style>

package/dist/ChatBot/ChatBotHeader.svelte.d.ts

@@ -1,8 +0,0 @@
-type Props = {
-    title: string;
-    onclose: VoidFunction;
-    onminimize: VoidFunction;
-};
-declare const ChatBotHeader: import("svelte").Component<Props, {}, "">;
-type ChatBotHeader = ReturnType<typeof ChatBotHeader>;
-export default ChatBotHeader;

package/dist/ChatBot/ChatBotMessages.svelte

@@ -1,278 +0,0 @@
-<script lang="ts">
-	import type { Attachment } from 'svelte/attachments';
-
-	import {
-		Action,
-		AdaptiveCard,
-		HostConfig,
-		SubmitAction,
-		type IAdaptiveCard
-	} from 'adaptivecards';
-
-	import type { Chat, ChatBotMessage } from './chatbotState.svelte';
-
-	interface Props {
-		messages: ChatBotMessage[];
-		isLoading: boolean;
-		oncardaction: (chat: Chat) => void;
-	}
-
-	let { messages, isLoading, oncardaction }: Props = $props();
-
-	const renderAdaptiveCard = (content: IAdaptiveCard): Attachment<HTMLElement> => {
-		return (element) => {
-			const adaptiveCard = new AdaptiveCard();
-
-			adaptiveCard.hostConfig = createHostConfig();
-			adaptiveCard.onExecuteAction = handleActionExecution;
-			adaptiveCard.parse(content);
-
-			const rendered = adaptiveCard.render();
-			if (rendered) {
-				rendered.classList.add('adaptive-card');
-				element.appendChild(rendered);
-			}
-		};
-	};
-
-	const createHostConfig = () => {
-		return new HostConfig({
-			fontFamily: 'Poppins, sans-serif'
-		});
-	};
-
-	const handleActionExecution = (action: Action) => {
-		if (action instanceof SubmitAction) {
-			const chat = action.data as Chat;
-			oncardaction(chat);
-		}
-	};
-
-	const scrollIntoView: Attachment<HTMLDivElement> = (element: HTMLDivElement) => {
-		isLoading;
-		messages.length;
-		element.scrollIntoView({ behavior: 'smooth', block: 'end' });
-	};
-</script>
-
-<div {@attach scrollIntoView} class="messages">
-	{#each messages as message}
-		{@const isBot = message.type === 'bot'}
-		{@const isUser = message.type === 'user'}
-
-		<div class={['message', isBot && 'bot', isUser && 'user']}>
-			{#if isBot && typeof message.content !== 'string'}
-				<div {@attach renderAdaptiveCard(message.content)}></div>
-			{:else}
-				<p class="message-text">{message.content}</p>
-			{/if}
-		</div>
-	{/each}
-
-	{#if isLoading}
-		<div class="loading">
-			{#each Array(3) as _}
-				<span class="loading-dot"></span>
-			{/each}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.messages {
-		--color-bg-messages: #f9fafb;
-		--color-bg-bot: #f8f8ff;
-		--color-bg-user: #472aff;
-		--color-text-primary: #1a1a1a;
-		--color-text-inverse: #ffffff;
-		--color-border-bot: #543bfa;
-		--color-scrollbar: #b5b6ff;
-		--color-scrollbar-hover: #8a8bff;
-		--color-button-primary: #472aff;
-		--color-button-hover: #3520bf;
-		--color-button-active: #2a1894;
-		--radius-sm: 8px;
-		--radius-md: 12px;
-		--spacing-xs: 6px;
-		--spacing-sm: 10px;
-		--spacing-md: 14px;
-		--spacing-lg: 16px;
-		--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
-		--shadow-md: 0 2px 10px rgba(0, 0, 0, 0.06);
-		--shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.08);
-
-		padding: var(--spacing-lg);
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-md);
-		background: var(--color-bg-messages);
-		border-radius: var(--radius-md);
-		box-shadow: var(--shadow-md);
-	}
-
-	.message {
-		padding: var(--spacing-md);
-		border-radius: var(--radius-md);
-		max-width: 95%;
-		word-break: break-word;
-		overflow-wrap: break-word;
-		line-height: 1.5;
-		animation: fadeIn 0.35s ease forwards;
-		transition: all 0.25s ease;
-	}
-
-	.message.user {
-		align-self: flex-end;
-		background-color: var(--color-bg-user);
-		color: var(--color-text-inverse);
-		border-radius: var(--radius-md) var(--radius-md) 0 var(--radius-md);
-		max-width: 80%;
-		box-shadow: var(--shadow-sm);
-	}
-
-	.message.bot {
-		align-self: flex-start;
-		background-color: var(--color-bg-bot);
-		color: var(--color-text-primary);
-		border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0;
-		box-shadow: var(--shadow-sm);
-		border-left: 4px solid var(--color-border-bot);
-	}
-
-	.message-text {
-		margin: 0;
-		line-height: 1.4;
-	}
-
-	.loading {
-		display: flex;
-		gap: var(--spacing-xs);
-		padding: var(--spacing-sm);
-	}
-
-	.loading-dot {
-		width: 8px;
-		height: 8px;
-		border-radius: 50%;
-		background-color: var(--color-border-bot);
-		animation: bounce 1.4s infinite ease-in-out both;
-	}
-
-	.loading-dot:nth-child(1) {
-		animation-delay: -0.32s;
-	}
-
-	.loading-dot:nth-child(2) {
-		animation-delay: -0.16s;
-	}
-
-	:global(.adaptive-card),
-	:global(.adaptive-card .ac-container),
-	:global(.adaptive-card .ac-columnSet),
-	:global(.adaptive-card .ac-column),
-	:global(.adaptive-card .ac-actionSet) {
-		width: 100%;
-		max-width: 100%;
-		margin: 0;
-		padding: 0;
-		box-sizing: border-box;
-	}
-
-	:global(.adaptive-card .ac-textBlock) {
-		margin-bottom: var(--spacing-xs);
-		line-height: 1.5;
-		word-break: break-word;
-	}
-
-	:global(.adaptive-card .ac-pushButton),
-	:global(.adaptive-card button),
-	:global(.adaptive-card .ac-actionSet .ac-button) {
-		all: unset;
-		box-sizing: border-box;
-		display: inline-block;
-		text-align: center;
-		padding: 12px 16px;
-		border-radius: var(--radius-sm);
-		width: 100%;
-		cursor: pointer;
-		background: var(--color-button-primary);
-		color: var(--color-text-inverse);
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 1.4;
-		min-height: 44px;
-		box-shadow: var(--shadow-sm);
-		transition:
-			transform 0.2s ease,
-			box-shadow 0.2s ease,
-			background-color 0.2s ease;
-	}
-
-	:global(.adaptive-card .ac-pushButton:hover),
-	:global(.adaptive-card button:hover),
-	:global(.adaptive-card .ac-button:hover) {
-		background: var(--color-button-hover);
-		transform: translateY(-1px);
-		box-shadow: var(--shadow-hover);
-	}
-
-	:global(.adaptive-card .ac-pushButton:active),
-	:global(.adaptive-card button:active),
-	:global(.adaptive-card .ac-button:active) {
-		background: var(--color-button-active);
-		transform: translateY(0);
-		box-shadow: none;
-	}
-
-	:global(.adaptive-card .ac-actionSet) {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		gap: var(--spacing-sm);
-	}
-
-	:global(.adaptive-card .ac-actionSet .ac-pushButton),
-	:global(.adaptive-card .ac-actionSet button),
-	:global(.adaptive-card .ac-actionSet .ac-button) {
-		max-width: 280px;
-		text-align: center;
-		margin: 0 auto;
-	}
-
-	:global(.adaptive-card .ac-actionSet.faq-buttons .ac-pushButton),
-	:global(.adaptive-card .ac-actionSet.faq-buttons button),
-	:global(.adaptive-card .ac-actionSet.faq-buttons .ac-button) {
-		width: 100%;
-		max-width: 100%;
-		text-align: left;
-	}
-
-	@media (min-width: 640px) {
-		:global(.adaptive-card .ac-actionSet) {
-			flex-direction: column;
-			align-items: stretch;
-		}
-	}
-
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-			transform: translateY(10px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	@keyframes bounce {
-		0%,
-		80%,
-		100% {
-			transform: scale(0);
-		}
-		40% {
-			transform: scale(1);
-		}
-	}
-</style>

package/dist/ChatBot/ChatBotMessages.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Chat, ChatBotMessage } from './chatbotState.svelte';
-interface Props {
-    messages: ChatBotMessage[];
-    isLoading: boolean;
-    oncardaction: (chat: Chat) => void;
-}
-declare const ChatBotMessages: import("svelte").Component<Props, {}, "">;
-type ChatBotMessages = ReturnType<typeof ChatBotMessages>;
-export default ChatBotMessages;

package/dist/ChatBot/chatbotState.svelte.d.ts

@@ -1,27 +0,0 @@
-import type { IAdaptiveCard } from 'adaptivecards';
-export interface UserMessage {
-    type: 'user';
-    content: string;
-}
-export interface ChatBotReplyMessage {
-    type: 'bot';
-    content: IAdaptiveCard | string;
-}
-export type ChatBotMessage = UserMessage | ChatBotReplyMessage;
-export interface ChatModuleSelector {
-    type: 'module_select';
-    module: string;
-}
-export interface ChatFAQSelector {
-    type: 'faq_select';
-    module: string;
-    question: string;
-}
-export interface ChatMessage {
-    type: 'text';
-    text: string;
-}
-export interface ChatSessionStart {
-    type: 'session_init';
-}
-export type Chat = ChatModuleSelector | ChatFAQSelector | ChatSessionStart | ChatMessage;

package/dist/ChatBot/chatbotState.svelte.js

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