@softwareone/spi-sv5-library 1.7.10 → 1.8.0

package/dist/Accordion/Accordion.svelte

@@ -4,12 +4,16 @@
 	interface AccordionProps {
 		title: string;
 		disableBorder?: boolean;
-		content: Snippet;
+		isOpen?: boolean;
+		children: Snippet;
 	}
 
-	let { title, disableBorder = false, content }: AccordionProps = $props();
-
-	let isOpen = $state(false);
+	let {
+		title,
+		disableBorder = false,
+		isOpen = $bindable(false),
+		children
+	}: AccordionProps = $props();
 
 	const toggleAccordion = () => {
 		isOpen = !isOpen;
@@ -19,9 +23,13 @@
 <aside class="accordion-container" class:border={!disableBorder}>
 	<div class="accordion-content">
 		<section class="header" class:is-open={isOpen}>
-			<button class="button" onclick={toggleAccordion}>
-				<span class="material-icons-outlined icon-span">
-					{isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}
+			<button
+				class="button"
+				onclick={toggleAccordion}
+				aria-label={isOpen ? 'Collapse accordion' : 'Expand accordion'}
+			>
+				<span class="material-icons-outlined icon-span" class:rotate={isOpen}>
+					keyboard_arrow_right
 				</span>
 			</button>
 
@@ -29,7 +37,9 @@
 		</section>
 
 		{#if isOpen}
-			{@render content()}
+			<div class="content">
+				{@render children()}
+			</div>
 		{/if}
 	</div>
 </aside>
@@ -38,22 +48,20 @@
 	.accordion-container {
 		width: 100%;
 		height: 100%;
-		padding: 32px;
-		display: flex;
 
 		--border-color: #e0e5e8;
 		--color: #472aff;
 	}
 
 	.accordion-content {
-		flex-direction: column;
-		flex: 1 1 0;
-		gap: 4px;
-		display: flex;
 		font-size: 14px;
 		line-height: 20px;
 	}
 
+	.content {
+		padding: 10px 10px 0 28px;
+	}
+
 	.is-open {
 		padding-bottom: 10px;
 	}
@@ -70,6 +78,7 @@
 	.border {
 		border: 1px solid var(--border-color);
 		border-radius: 8px;
+		padding: 32px;
 	}
 
 	.button {
@@ -85,5 +94,10 @@
 	.icon-span {
 		color: var(--color);
 		font-size: 20px;
+		transition: transform 0.2s ease-in-out;
+	}
+
+	.icon-span.rotate {
+		transform: rotate(90deg);
 	}
 </style>

package/dist/Accordion/Accordion.svelte.d.ts

@@ -2,8 +2,9 @@ import type { Snippet } from 'svelte';
 interface AccordionProps {
     title: string;
     disableBorder?: boolean;
-    content: Snippet;
+    isOpen?: boolean;
+    children: Snippet;
 }
-declare const Accordion: import("svelte").Component<AccordionProps, {}, "">;
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "isOpen">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/dist/ChatBot/ChatBot.svelte

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

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

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

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

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

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

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

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

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

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

package/dist/Spinner/Spinner.svelte

@@ -2,9 +2,10 @@
 	interface SpinnerProps {
 		show: boolean;
 		size?: 'sm' | 'md' | 'lg';
+		isFixedPosition?: boolean;
 	}
 
-	let { show = $bindable(false), size = 'lg' }: SpinnerProps = $props();
+	let { show = $bindable(false), size = 'lg', isFixedPosition = false }: SpinnerProps = $props();
 
 	const pixelSizes: Record<string, number> = {
 		sm: 16,
@@ -14,20 +15,20 @@
 </script>
 
 {#if show}
-<div class="spinner-container">
-	<div class="spinner" style="width: {pixelSizes[size]}px; height: {pixelSizes[size]}px;">
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
-			<path
-				d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM6.27298 20C6.27298 27.5812 12.4188 33.727 20 33.727C27.5812 33.727 33.727 27.5812 33.727 20C33.727 12.4188 27.5812 6.27298 20 6.27298C12.4188 6.27298 6.27298 12.4188 6.27298 20Z"
-				fill="#E0E5E8"
-			/>
-			<path
-				d="M20 3.13649C20 1.40425 21.4128 -0.0251732 23.1238 0.245376C27.2709 0.901143 31.1358 2.85154 34.1421 5.85786C37.8929 9.60859 40 14.6957 40 20C40 25.3043 37.8929 30.3914 34.1421 34.1421C31.1358 37.1485 27.2709 39.0989 23.1238 39.7546C21.4128 40.0252 20 38.5957 20 36.8635C20 35.1313 21.4222 33.7627 23.1094 33.3703C25.5876 32.7939 27.8783 31.5346 29.7065 29.7065C32.2808 27.1322 33.727 23.6406 33.727 20C33.727 16.3594 32.2808 12.8678 29.7065 10.2935C27.8783 8.46537 25.5876 7.20612 23.1094 6.62973C21.4222 6.23731 20 4.86873 20 3.13649Z"
-				fill="#472AFF"
-			/>
-		</svg>
+	<div class={['spinner-container', isFixedPosition ? 'fixed' : 'absolute']}>
+		<div class="spinner" style="width: {pixelSizes[size]}px; height: {pixelSizes[size]}px;">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
+				<path
+					d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM6.27298 20C6.27298 27.5812 12.4188 33.727 20 33.727C27.5812 33.727 33.727 27.5812 33.727 20C33.727 12.4188 27.5812 6.27298 20 6.27298C12.4188 6.27298 6.27298 12.4188 6.27298 20Z"
+					fill="#E0E5E8"
+				/>
+				<path
+					d="M20 3.13649C20 1.40425 21.4128 -0.0251732 23.1238 0.245376C27.2709 0.901143 31.1358 2.85154 34.1421 5.85786C37.8929 9.60859 40 14.6957 40 20C40 25.3043 37.8929 30.3914 34.1421 34.1421C31.1358 37.1485 27.2709 39.0989 23.1238 39.7546C21.4128 40.0252 20 38.5957 20 36.8635C20 35.1313 21.4222 33.7627 23.1094 33.3703C25.5876 32.7939 27.8783 31.5346 29.7065 29.7065C32.2808 27.1322 33.727 23.6406 33.727 20C33.727 16.3594 32.2808 12.8678 29.7065 10.2935C27.8783 8.46537 25.5876 7.20612 23.1094 6.62973C21.4222 6.23731 20 4.86873 20 3.13649Z"
+					fill="#472AFF"
+				/>
+			</svg>
+		</div>
 	</div>
-</div>
 {/if}
 
 <style>
@@ -37,13 +38,20 @@
 		align-items: center;
 		width: 100%;
 		height: 100%;
-		position: absolute;
 		top: 0;
 		left: 0;
 		background-color: rgba(255, 255, 255, 0.8);
 		z-index: 1000;
 	}
 
+	.fixed {
+		position: fixed;
+	}
+
+	.absolute {
+		position: absolute;
+	}
+
 	.spinner {
 		animation: spin 0.8s linear infinite;
 	}

package/dist/Spinner/Spinner.svelte.d.ts

@@ -1,6 +1,7 @@
 interface SpinnerProps {
     show: boolean;
     size?: 'sm' | 'md' | 'lg';
+    isFixedPosition?: boolean;
 }
 declare const Spinner: import("svelte").Component<SpinnerProps, {}, "show">;
 type Spinner = ReturnType<typeof Spinner>;

package/dist/Tabs/Tabs.svelte

@@ -114,7 +114,7 @@
 		height: 100%;
 		position: relative;
 		border-radius: 0px 0px 16px 16px;
-		overflow: hidden;
+		overflow-wrap: break-word;
 		padding: 24px;
 		box-sizing: border-box;
 		min-height: 300px;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import Avatar from './Avatar/Avatar.svelte';
 import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
 import Button from './Button/Button.svelte';
 import Card from './Card/Card.svelte';
+import ChatBot from './ChatBot/ChatBot.svelte';
 import Chips from './Chips/Chips.svelte';
 import DeleteConfirmationModal from './DeleteConfirmation/DeleteConfirmation.svelte';
 import ErrorPage from './ErrorPage/ErrorPage.svelte';
@@ -45,6 +46,7 @@ import { validateSchema } from './Form/FormController/helper.js';
 import { createZodString } from './Form/FormController/zod-validations.js';
 import { getSubMenuItemsFromMenu } from './Menu/MenuState.svelte';
 import type { BreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
+import type { Chat, ChatBotReplyMessage, ChatBotMessage } from './ChatBot/chatbotState.svelte';
 import type { FormError, FormContext } from './Form/FormController/types.js';
 import type { HighlightPanelColumn } from './HighlightPanel/highlightPanelState.svelte.js';
 import type { HomeItem } from './Menu/MenuState.svelte.js';
@@ -58,4 +60,4 @@ import type { Toast } from './Toast/toastState.svelte';
 import type { WaffleItem } from './Waffle/waffleState.svelte.js';
 import type { AttachFileFormConfig, FileValidationCallback } from './Form/AttachFile/attachFile.svelte.js';
 import type { NotificationProps } from './Notification/notificationState.svelte.js';
-export { Accordion, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, ErrorPage, Footer, Form, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, AttachFile, addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, setFormContext, getFormContext, validateSchema, createZodString, getSubMenuItemsFromMenu, ChipType, ColumnType, ImageType, type BreadcrumbsNameMap, type HighlightPanelColumn, type HomeItem, type MainMenu, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type SwitcherOption, type Tab, type Toast, type WaffleItem, type FormError, type FormContext, type SubMenuItem, type AttachFileFormConfig, type FileValidationCallback, type NotificationProps };
+export { Accordion, Avatar, Breadcrumbs, Button, Card, ChatBot, Chips, DeleteConfirmationModal, ErrorPage, Footer, Form, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, AttachFile, addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, setFormContext, getFormContext, validateSchema, createZodString, getSubMenuItemsFromMenu, ChipType, ColumnType, ImageType, type BreadcrumbsNameMap, type Chat, type ChatBotMessage, type ChatBotReplyMessage, type HighlightPanelColumn, type HomeItem, type MainMenu, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type SwitcherOption, type Tab, type Toast, type WaffleItem, type FormError, type FormContext, type SubMenuItem, type AttachFileFormConfig, type FileValidationCallback, type NotificationProps };

package/dist/index.js

@@ -4,6 +4,7 @@ import Avatar from './Avatar/Avatar.svelte';
 import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
 import Button from './Button/Button.svelte';
 import Card from './Card/Card.svelte';
+import ChatBot from './ChatBot/ChatBot.svelte';
 import Chips from './Chips/Chips.svelte';
 import DeleteConfirmationModal from './DeleteConfirmation/DeleteConfirmation.svelte';
 import ErrorPage from './ErrorPage/ErrorPage.svelte';
@@ -48,7 +49,7 @@ import { createZodString } from './Form/FormController/zod-validations.js';
 import { getSubMenuItemsFromMenu } from './Menu/MenuState.svelte';
 export { 
 // Components
-Accordion, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, ErrorPage, Footer, Form, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, AttachFile, 
+Accordion, Avatar, Breadcrumbs, Button, Card, ChatBot, Chips, DeleteConfirmationModal, ErrorPage, Footer, Form, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, AttachFile, 
 // Functions and helpers
 addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, setFormContext, getFormContext, validateSchema, createZodString, getSubMenuItemsFromMenu, 
 // Enums

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.7.10",
+	"version": "1.8.0",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",
@@ -41,6 +41,7 @@
 		}
 	},
 	"peerDependencies": {
+		"adaptivecards": "^3.0.5",
 		"svelte": "^5.0.0",
 		"sveltekit-superforms": "^2.0.0",
 		"zod": "^4.0.0"
@@ -51,6 +52,9 @@
 		},
 		"zod": {
 			"optional": true
+		},
+		"adaptivecards": {
+			"optional": true
 		}
 	},
 	"devDependencies": {
@@ -59,15 +63,16 @@
 		"@sveltejs/kit": "^2.48.4",
 		"@sveltejs/package": "^2.5.4",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"adaptivecards": "^3.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",
 		"typescript": "^5.9.3",
 		"vite": "^6.3.0",
-		"zod": "^4.1.12",
-		"sveltekit-superforms": "^2.28.1"
+		"zod": "^4.1.12"
 	},
 	"dependencies": {
 		"@sveltejs/kit": "^2.48.4"