@ims360/svelte-ivory 0.0.2

package/src/lib/components/ai/Chat.svelte

@@ -0,0 +1,150 @@
+<!-- 
+	@component
+	An AI chat component that can be used to create a chatbot.
+	Comes with default styles for the chat messages, but can be customized with the `userMessage` and `systemMessage` props.
+	The input component has to be provided as a child component, and the `submit` function has to be provided as a callback.  
+-->
+
+<script lang="ts" module>
+    import clsx from 'clsx';
+    import { tick, type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import AiMessage from './AiMessage.svelte';
+    import UserMessage from './UserMessage.svelte';
+
+    export interface AiChatMessage {
+        from: 'user' | 'system';
+        message: string;
+        time?: Date;
+        liked?: boolean;
+        disliked?: boolean;
+        files?: File[];
+    }
+
+    export interface AiChat {
+        messages: AiChatMessage[];
+        loading?: boolean;
+    }
+</script>
+
+<script lang="ts">
+    interface Props {
+        class?: ClassValue;
+        b_chat: AiChat;
+        userMessage?: Snippet<[{ message: AiChatMessage; i: number }]>;
+        systemMessage?: Snippet<[{ message: AiChatMessage; i: number; minHeight?: number }]>;
+        placeholder?: Snippet;
+        children: Snippet<[{ onsubmit: (message: AiChatMessage) => Promise<void> }]>;
+        submit: (message: AiChatMessage) => Promise<void>;
+    }
+
+    let {
+        class: clazz,
+        b_chat: chat = $bindable(),
+        userMessage = defaultUserMessage,
+        systemMessage = defaultSystemMessage,
+        placeholder,
+        children,
+        submit: externalSubmit
+    }: Props = $props();
+
+    let chatContainer = $state<HTMLDivElement>();
+    let lastMessageMinHeight = $state(0);
+
+    function getLastMessageMinHeight() {
+        if (!chatContainer) return 0;
+        const secondToLastElement = chatContainer.children[chatContainer.children.length - 2];
+        const rect = secondToLastElement?.getBoundingClientRect();
+        const remainHeight = chatContainer.clientHeight - rect.height - 16;
+        return remainHeight;
+    }
+
+    async function scrollToBottom() {
+        if (!chatContainer) return;
+        await tick();
+        await tick();
+        lastMessageMinHeight = getLastMessageMinHeight();
+        await tick();
+        // ensure we don't scroll if the newly generated message is already in view
+        chatContainer.scrollTo({
+            top: chatContainer.scrollHeight,
+            behavior: 'smooth'
+        });
+    }
+
+    async function submit(message: AiChatMessage) {
+        if (chat.loading) {
+            return;
+        }
+
+        chat.messages.push({
+            ...message,
+            from: 'user',
+            time: new Date()
+        });
+        // prevent the user from sending another message while we are loading the ai response
+        chat.loading = true;
+
+        // add an empty system message to the chat, this will indicate a loading state
+        chat.messages.push({
+            from: 'system',
+            message: '',
+            time: new Date()
+        });
+
+        await scrollToBottom();
+
+        await externalSubmit(message);
+
+        chat.loading = false;
+    }
+</script>
+
+<div class={twMerge(clsx('flex grow flex-col gap-2 overflow-hidden', clazz))}>
+    <div
+        class="flex grow flex-col gap-4 overflow-auto pr-2 [scrollbar-gutter:stable]"
+        bind:this={chatContainer}
+    >
+        {#if chat.messages.length === 0 && placeholder}
+            {@render placeholder()}
+        {/if}
+        {#each chat.messages as _, i}
+            {@const message = chat.messages[i]}
+            {#if message.from === 'user'}
+                {@render userMessage({
+                    message,
+                    i
+                })}
+            {:else}
+                {@render systemMessage({
+                    message,
+                    i,
+                    minHeight: i === chat.messages.length - 1 ? lastMessageMinHeight : 0
+                })}
+            {/if}
+        {/each}
+    </div>
+    {@render children({ onsubmit: submit })}
+</div>
+
+{#snippet defaultSystemMessage({
+    i,
+    minHeight
+}: {
+    i: number;
+    message: AiChatMessage;
+    minHeight?: number;
+})}
+    <AiMessage bind:b_message={chat.messages[i]} {minHeight} />
+{/snippet}
+
+{#snippet defaultUserMessage({
+    message
+}: {
+    i: number;
+    message: AiChatMessage;
+    minHeight?: number;
+})}
+    <UserMessage {message} />
+{/snippet}

package/src/lib/components/ai/Markdown.svelte

@@ -0,0 +1,59 @@
+<!-- 
+	@component
+	Renders markdown to html.  
+	Uses the [marked](https://marked.js.org/) library for rendering and [dompurify](https://github.com/cure53/DOMPurify) for sanitizing the html.
+-->
+
+<script lang="ts">
+    import clsx from 'clsx';
+    import DomPurify from 'dompurify';
+    import { marked } from 'marked';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+
+    interface Props {
+        source: string;
+        class?: ClassValue;
+        replace?: {
+            regex: RegExp;
+            replacerFactory: () => Promise<(match: string) => string> | ((match: string) => string);
+        };
+    }
+
+    let { source, replace, class: clazz }: Props = $props();
+
+    const html = $derived.by(async () => {
+        // replace 0 width characters
+        const cleanedSource = source.replace(
+            // eslint-disable-next-line no-misleading-character-class
+            /^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,
+            ''
+        );
+
+        const html = await marked.parse(cleanedSource);
+        // const docs = await documents.value;
+
+        if (replace) {
+            const replacer = await replace.replacerFactory();
+            const replaced = html.replaceAll(replace.regex, replacer);
+            return DomPurify.sanitize(replaced);
+        } else {
+            return DomPurify.sanitize(html);
+        }
+    });
+</script>
+
+<div
+    class={twMerge(
+        clsx(
+            'text-surface-950-50 prose prose-strong:text-surface-950-50 prose-p:my-1 flex flex-col items-start gap-1',
+            clazz
+        )
+    )}
+>
+    {#await html then html}
+        <!-- this is fine since we purify the string -->
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html html}
+    {/await}
+</div>

package/src/lib/components/ai/UserMessage.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import AttachedFile from './AttachedFile.svelte';
+    import type { AiChatMessage } from './Chat.svelte';
+    import Markdown from './Markdown.svelte';
+
+    interface Props {
+        class?: ClassValue;
+        message: AiChatMessage;
+        /** How attached files should be rendered */
+        attachedFile?: Snippet<[file: File]>;
+        /** How the message string should be rendered */
+        messageText?: Snippet<[{ message: AiChatMessage }]>;
+    }
+
+    let {
+        class: clazz,
+        message,
+        attachedFile = defaultAttachedFile,
+        messageText = defaultMessageText
+    }: Props = $props();
+</script>
+
+<div class={twMerge(clsx('flex w-full flex-col items-end gap-1', clazz))}>
+    {@render messageText({ message })}
+    {#if message.files}
+        <div class="flex flex-row items-center gap-2">
+            {#each message.files as file}
+                {@render attachedFile(file)}
+            {/each}
+        </div>
+    {/if}
+    <div class="flex flex-row items-center gap-2">
+        {#if message.time}
+            <p class="text-surface-400-600 text-sm">
+                {message.time.toLocaleString('de')}
+            </p>
+        {/if}
+    </div>
+</div>
+
+{#snippet defaultAttachedFile(file: File)}
+    <AttachedFile {file} />
+{/snippet}
+
+{#snippet defaultMessageText({ message }: { message: AiChatMessage })}
+    <div class="bg-surface-200-800 text-surface-contrast-200-800 rounded px-2 py-0.5">
+        <Markdown source={message.message} />
+    </div>
+{/snippet}

package/src/lib/components/ai/index.ts

@@ -0,0 +1,5 @@
+export { default as AiMessage } from './AiMessage.svelte';
+export { default as AttachedFile } from './AttachedFile.svelte';
+export { default as Chat, type AiChat, type AiChatMessage } from './Chat.svelte';
+export { default as Markdown } from './Markdown.svelte';
+export { default as UserMessage } from './UserMessage.svelte';

package/src/lib/components/basic/checkbox/Checkbox.svelte

@@ -0,0 +1,79 @@
+<!-- 
+    @component
+    It's a checkbox 
+-->
+
+<script lang="ts">
+    import { type Icon as LucideIcon, Minus, icons } from '@lucide/svelte';
+    import clsx from 'clsx';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+
+    const Check = $derived(icons.Check);
+
+    type Props = {
+        class?: ClassValue;
+        /** `checked` has prioriy over `partial` */
+        checked?: boolean | null;
+        /** `checked` has prioriy over `partial` */
+        partial?: boolean | null;
+        id?: string;
+        /** if true, the onclick handler will not be called */
+        disabled?: boolean;
+        onclick?: () => void;
+        /** data-testid */
+        testId?: string;
+    };
+
+    let {
+        class: clazz,
+        checked = false,
+        partial = false,
+        id,
+        disabled = false,
+        onclick,
+        testId
+    }: Props = $props();
+
+    const {
+        icon: Icon,
+        innerClass,
+        style
+    }: { icon?: typeof LucideIcon; innerClass?: string; style?: string } = $derived.by(() => {
+        if (!checked && !partial) return { innerClass: 'border-surface-500' };
+        if (checked)
+            return {
+                icon: Check,
+                innerClass: 'bg-primary-500 border-primary-500 text-surface-50'
+            };
+        if (partial)
+            return {
+                icon: Minus,
+                innerClass: 'border-primary-700 text-primary-500'
+            };
+        return {};
+    });
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions-->
+<svelte:element
+    this={onclick ? 'button' : 'div'}
+    type="button"
+    {id}
+    {disabled}
+    {style}
+    class={twMerge(
+        clsx(
+            'box-border flex h-5 w-5 items-center justify-center overflow-hidden rounded border-2 transition-colors',
+            disabled && 'cursor-not-allowed opacity-70',
+            innerClass,
+            clazz
+        )
+    )}
+    {onclick}
+    data-testid={testId}
+>
+    {#if Icon}
+        <Icon class="h-full w-full" size={16} strokeWidth={3} />
+    {/if}
+</svelte:element>

package/src/lib/components/basic/checkbox/checkbox.svelte.spec.ts

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/svelte';
+import { userEvent } from '@testing-library/user-event';
+import { fn } from '@vitest/spy';
+import { describe, expect, it } from 'vitest';
+import { Checkbox } from '../index';
+
+const testId = 'checkbox';
+
+describe('Basic/Checkbox', () => {
+    it('renders the checked icon', async () => {
+        render(Checkbox, { testId, checked: true });
+
+        const checkbox = screen.getByTestId(testId);
+        expect(checkbox).toBeVisible();
+        const icon = checkbox.querySelector('svg');
+        expect(icon).toBeVisible();
+    });
+
+    it('fires click event when clicked', async () => {
+        const callback = fn();
+        render(Checkbox, { testId, onclick: callback });
+
+        const checkbox = screen.getByTestId(testId);
+        expect(checkbox).toBeVisible();
+        checkbox.click();
+        expect(callback).toHaveBeenCalledOnce();
+    });
+
+    it("doesn't fire click event when disabled", async () => {
+        const callback = fn();
+        render(Checkbox, { testId, onclick: callback, disabled: true });
+
+        const checkbox = screen.getByTestId(testId);
+        expect(checkbox).toBeVisible();
+        await userEvent.click(checkbox);
+        expect(callback).not.toHaveBeenCalled();
+    });
+});

package/src/lib/components/basic/index.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './checkbox/Checkbox.svelte';
+export { default as Toggle } from './toggle/Toggle.svelte';

package/src/lib/components/basic/toggle/Toggle.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+
+    type Props = {
+        value?: boolean;
+        class?: ClassValue;
+        onclick?: () => void;
+        children?: Snippet;
+        testId?: string;
+    };
+
+    let { value, class: clazz, onclick, children, testId }: Props = $props();
+
+    let thumbWidth = $state(0);
+</script>
+
+<svelte:element
+    this={onclick ? 'button' : 'div'}
+    class={twMerge(
+        clsx(
+            'flex h-5 w-9 items-center rounded-full border p-0.5',
+            value ? 'bg-primary-500 border-primary-500' : 'bg-surface-500/30 border-surface-500/60',
+            clazz
+        )
+    )}
+    type={onclick ? 'button' : undefined}
+    role={onclick ? 'button' : undefined}
+    {onclick}
+    tabindex="0"
+    data-testid={testId}
+>
+    <div class="relative flex h-full w-full flex-row items-center">
+        <div
+            class={[
+                'relative flex aspect-square h-full items-center justify-center rounded-full transition-all',
+                value ? 'bg-surface-50' : 'bg-surface-600'
+            ]}
+            style={value ? `left: calc(100% - ${thumbWidth}px);` : 'left: 0;'}
+            bind:clientWidth={thumbWidth}
+        >
+            {@render children?.()}
+        </div>
+    </div>
+</svelte:element>

package/src/lib/components/basic/toggle/toggle.svelte.spec.ts

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/svelte';
+import { fn } from '@vitest/spy';
+import { describe, expect, it } from 'vitest';
+import Toggle from './Toggle.svelte';
+
+const testId = 'toggle';
+
+describe('Basic/Toggle', () => {
+    it('fires click event when clicked', async () => {
+        const callback = fn();
+        render(Toggle, { testId, onclick: callback });
+
+        const toggle = screen.getByTestId(testId);
+        expect(toggle).toBeVisible();
+        toggle.click();
+        expect(callback).toHaveBeenCalledOnce();
+    });
+});

package/src/lib/components/buttons/CopyToClipboardButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+    import { Copy } from '@lucide/svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { Toasts } from '../toast';
+
+    let lastCopied = $state<string>();
+</script>
+
+<script lang="ts">
+    interface Props {
+        text: string;
+        class?: ClassValue;
+        toastMessage?: string;
+    }
+
+    let { text, class: clazz = 'text-xl', toastMessage }: Props = $props();
+
+    async function copyText() {
+        await navigator.clipboard.writeText(text);
+        lastCopied = text;
+        if (toastMessage) {
+            Toasts.trigger({
+                variant: 'success',
+                message: toastMessage,
+                icon: Copy
+            });
+        }
+    }
+</script>
+
+<button type="button" class={['text-surface-500 btn', clazz]} onclick={copyText}>
+    <Copy class={['h-5 w-5']} />
+</button>

package/src/lib/components/layout/heading/Heading.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+
+    export interface Props {
+        children: Snippet;
+        class?: ClassValue;
+    }
+
+    export function setClasses(c: ClassValue) {
+        defaultClasses = c;
+    }
+
+    let defaultClasses = $state<ClassValue>('');
+</script>
+
+<script lang="ts">
+    let { children, class: clazz }: Props = $props();
+</script>
+
+<!-- 
+    @component
+    A component for unified headings.  
+    Classes that are set using the `setDefaultClasses` function will be applied to all headings,
+    including the ones used in other components of this lib, e.g. the `Modal`.
+    If you set the `defaultClasses`, make sure to call it before using a component that uses the heading component (e.g. your root `+layout.svelte`).
+-->
+
+<h2 class={twMerge(clsx('truncate text-lg font-bold select-none', defaultClasses, clazz))}>
+    {@render children()}
+</h2>

package/src/lib/components/layout/heading/index.ts

@@ -0,0 +1,7 @@
+import { default as HeadingComponent, setClasses } from './Heading.svelte';
+
+const Heading = Object.assign(HeadingComponent, {
+    setClasses
+});
+
+export default Heading;

package/src/lib/components/layout/hiddenBackground/HiddenBackground.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" module>
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { fade } from 'svelte/transition';
+    import { twMerge } from 'tailwind-merge';
+    import { focusTrap, shortcut } from '../../../utils/actions/index';
+
+    let globalClass = $state<ClassValue>();
+
+    export function setClasses(value: ClassValue) {
+        globalClass = value;
+    }
+
+    export const TEST_ID = 'background';
+</script>
+
+<script lang="ts">
+    interface Props {
+        class?: ClassValue;
+        /** Gets called when the dialog is clicked */
+        onclose?: () => void;
+        children: Snippet;
+    }
+
+    let { class: clazz, onclose, children }: Props = $props();
+</script>
+
+<dialog
+    class={twMerge(
+        clsx(
+            'bg-surface-950-50/40 absolute top-0 left-0 z-40 m-0 h-full w-full p-0',
+            globalClass,
+            clazz
+        )
+    )}
+    open
+    use:focusTrap={true}
+    use:shortcut={{
+        code: 'Escape',
+        callback: onclose ?? (() => {})
+    }}
+    onclick={onclose}
+    transition:fade={{ duration: 200 }}
+    data-testid={TEST_ID}
+>
+    {@render children()}
+</dialog>

package/src/lib/components/layout/hiddenBackground/index.ts

@@ -0,0 +1,8 @@
+import { default as HiddenBg, setClasses, TEST_ID } from './HiddenBackground.svelte';
+
+const HiddenBackground = Object.assign(HiddenBg, {
+    setClasses,
+    TEST_ID
+});
+
+export default HiddenBackground;

package/src/lib/components/layout/index.ts

@@ -0,0 +1,7 @@
+export { default as Heading } from './heading/index';
+export { default as HiddenBackground } from './hiddenBackground/index';
+export { default as Modal } from './modal/Modal.svelte';
+export { default as Popover } from './popover/Popover.svelte';
+export { default as Portal } from './portal/Portal.svelte';
+export { default as Tabs } from './tabs/index';
+export { default as Tooltip } from './tooltip/Tooltip.svelte';