@ims360/svelte-ivory 0.3.11 → 0.4.0

package/dist/colorTheme.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Handle } from '@sveltejs/kit';
+export type ColorThemePreference = 'system' | 'light' | 'dark';
+declare class ThemeController {
+    private currentTheme;
+    constructor();
+    get theme(): ColorThemePreference;
+    get preference(): ColorThemePreference;
+    set theme(value: ColorThemePreference);
+    /** Add to hook sequence to enable correct prerendering ot the theme */
+    handle: Handle;
+}
+export declare const ColorTheme: ThemeController;
+export {};
+//# sourceMappingURL=colorTheme.svelte.d.ts.map

package/dist/colorTheme.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorTheme.svelte.d.ts","sourceRoot":"","sources":["../src/lib/colorTheme.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAI5C,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/D,cAAM,eAAe;IACjB,OAAO,CAAC,YAAY,CAA0C;;IAY9D,IAAI,KAAK,IAQQ,oBAAoB,CANpC;IAED,IAAI,UAAU,yBAEb;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,oBAAoB,EAepC;IAED,uEAAuE;IACvE,MAAM,EAAE,MAAM,CAcZ;CACL;AAED,eAAO,MAAM,UAAU,iBAAwB,CAAC"}

package/dist/colorTheme.svelte.js

@@ -0,0 +1,59 @@
+import { browser } from '$app/environment';
+import { cookie } from '@ims360/svelte-ivory/utils/functions';
+const COOKIE_THEME_KEY = 'theme';
+class ThemeController {
+    currentTheme = $state('system');
+    constructor() {
+        if (!browser)
+            return;
+        const value = cookie.get(COOKIE_THEME_KEY);
+        if (value === 'system' || value === 'dark' || value === 'light') {
+            this.theme = value;
+        }
+        else {
+            this.theme = 'system';
+        }
+    }
+    get theme() {
+        return this.currentTheme;
+    }
+    get preference() {
+        return this.currentTheme;
+    }
+    set theme(value) {
+        if (!browser)
+            return;
+        this.currentTheme = value;
+        cookie.set({
+            name: COOKIE_THEME_KEY,
+            value
+        });
+        if (value === 'system') {
+            const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            document.documentElement.classList.toggle('dark', systemDark);
+        }
+        else if (value === 'light') {
+            document.documentElement.classList.toggle('dark', false);
+        }
+        else {
+            document.documentElement.classList.toggle('dark', true);
+        }
+    }
+    /** Add to hook sequence to enable correct prerendering ot the theme */
+    handle = ({ event, resolve }) => {
+        const theme = event.cookies.get(COOKIE_THEME_KEY);
+        let isDark = false;
+        if (theme !== undefined && theme !== 'system') {
+            isDark = theme === 'dark';
+        }
+        else {
+            isDark = event.request.headers.get('sec-ch-prefers-color-scheme') === 'dark';
+        }
+        if (!isDark)
+            return resolve(event);
+        return resolve(event, {
+            transformPageChunk: ({ html }) => html.replace('class="', 'class="dark ')
+        });
+    };
+}
+export const ColorTheme = new ThemeController();

package/dist/components/ai/index.d.ts

@@ -1,6 +1,2 @@
-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';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ai/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,KAAK,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/ai/index.js

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

package/dist/components/basic/ThemeController.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { ColorTheme, type ColorThemePreference } from '../../colorTheme.svelte';
+    import { merge } from '@ims360/svelte-ivory/utils/functions';
+    import { Icon, Monitor, Moon, Sun } from '@lucide/svelte';
+    import type { ClassValue } from 'svelte/elements';
+
+    type Props = {
+        class: ClassValue;
+    };
+
+    let { class: clazz }: Props = $props();
+
+    const options: { icon: typeof Icon; value: ColorThemePreference; ariaLabel: string }[] = [
+        {
+            value: 'system',
+            icon: Monitor,
+            ariaLabel: 'System Theme'
+        },
+        {
+            value: 'dark',
+            icon: Moon,
+            ariaLabel: 'Dark Theme'
+        },
+        {
+            value: 'light',
+            icon: Sun,
+            ariaLabel: 'Light Theme'
+        }
+    ];
+</script>
+
+<div class={merge('border-surface-300-700 grid grid-cols-3 rounded-full border', clazz)}>
+    {#each options as { value, icon: Icon, ariaLabel }}
+        {@const selected = value === ColorTheme.theme}
+        <button
+            type="button"
+            class={[
+                'tranistion-all text-surface-600-400 hover:text-surface-900-100 h-6 w-6 rounded-full p-1 transition-colors',
+                selected && 'bg-surface-100-900'
+            ]}
+            onclick={() => {
+                ColorTheme.theme = value;
+            }}
+            aria-label={ariaLabel}
+        >
+            <Icon class="h-full w-full" />
+        </button>
+    {/each}
+</div>

package/dist/components/basic/ThemeController.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ClassValue } from 'svelte/elements';
+type Props = {
+    class: ClassValue;
+};
+declare const ThemeController: import("svelte").Component<Props, {}, "">;
+type ThemeController = ReturnType<typeof ThemeController>;
+export default ThemeController;
+//# sourceMappingURL=ThemeController.svelte.d.ts.map

package/dist/components/basic/ThemeController.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeController.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/ThemeController.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG9C,KAAK,KAAK,GAAG;IACT,KAAK,EAAE,UAAU,CAAC;CACrB,CAAC;AA6CN,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { ColorTheme, type ColorThemePreference } from './colorTheme.svelte';
 export { theme, type Theme } from './theme.svelte';
 export { type IvoryComponent } from './types';
 export type Variant = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'surface';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,OAAO,GACb,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,OAAO,GACb,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAC"}

package/dist/index.js

@@ -1,3 +1,4 @@
 // Reexport your entry components here
+export { ColorTheme } from './colorTheme.svelte';
 export { theme } from './theme.svelte';
 export {} from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.3.11",
+    "version": "0.4.0",
     "keywords": [
         "svelte"
     ],

package/src/lib/colorTheme.svelte.ts

@@ -0,0 +1,65 @@
+import { browser } from '$app/environment';
+import { cookie } from '@ims360/svelte-ivory/utils/functions';
+import type { Handle } from '@sveltejs/kit';
+
+const COOKIE_THEME_KEY = 'theme';
+
+export type ColorThemePreference = 'system' | 'light' | 'dark';
+
+class ThemeController {
+    private currentTheme = $state<ColorThemePreference>('system');
+
+    constructor() {
+        if (!browser) return;
+        const value = cookie.get(COOKIE_THEME_KEY);
+        if (value === 'system' || value === 'dark' || value === 'light') {
+            this.theme = value;
+        } else {
+            this.theme = 'system';
+        }
+    }
+
+    get theme() {
+        return this.currentTheme;
+    }
+
+    get preference() {
+        return this.currentTheme;
+    }
+
+    set theme(value: ColorThemePreference) {
+        if (!browser) return;
+        this.currentTheme = value;
+        cookie.set({
+            name: COOKIE_THEME_KEY,
+            value
+        });
+        if (value === 'system') {
+            const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            document.documentElement.classList.toggle('dark', systemDark);
+        } else if (value === 'light') {
+            document.documentElement.classList.toggle('dark', false);
+        } else {
+            document.documentElement.classList.toggle('dark', true);
+        }
+    }
+
+    /** Add to hook sequence to enable correct prerendering ot the theme */
+    handle: Handle = ({ event, resolve }) => {
+        const theme = event.cookies.get(COOKIE_THEME_KEY);
+        let isDark = false;
+        if (theme !== undefined && (theme as ColorThemePreference) !== 'system') {
+            isDark = theme === 'dark';
+        } else {
+            isDark = event.request.headers.get('sec-ch-prefers-color-scheme') === 'dark';
+        }
+
+        if (!isDark) return resolve(event);
+
+        return resolve(event, {
+            transformPageChunk: ({ html }) => html.replace('class="', 'class="dark ')
+        });
+    };
+}
+
+export const ColorTheme = new ThemeController();

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

@@ -1,5 +1 @@
-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/ThemeController.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { ColorTheme, type ColorThemePreference } from '$lib/colorTheme.svelte';
+    import { merge } from '@ims360/svelte-ivory/utils/functions';
+    import { Icon, Monitor, Moon, Sun } from '@lucide/svelte';
+    import type { ClassValue } from 'svelte/elements';
+
+    type Props = {
+        class: ClassValue;
+    };
+
+    let { class: clazz }: Props = $props();
+
+    const options: { icon: typeof Icon; value: ColorThemePreference; ariaLabel: string }[] = [
+        {
+            value: 'system',
+            icon: Monitor,
+            ariaLabel: 'System Theme'
+        },
+        {
+            value: 'dark',
+            icon: Moon,
+            ariaLabel: 'Dark Theme'
+        },
+        {
+            value: 'light',
+            icon: Sun,
+            ariaLabel: 'Light Theme'
+        }
+    ];
+</script>
+
+<div class={merge('border-surface-300-700 grid grid-cols-3 rounded-full border', clazz)}>
+    {#each options as { value, icon: Icon, ariaLabel }}
+        {@const selected = value === ColorTheme.theme}
+        <button
+            type="button"
+            class={[
+                'tranistion-all text-surface-600-400 hover:text-surface-900-100 h-6 w-6 rounded-full p-1 transition-colors',
+                selected && 'bg-surface-100-900'
+            ]}
+            onclick={() => {
+                ColorTheme.theme = value;
+            }}
+            aria-label={ariaLabel}
+        >
+            <Icon class="h-full w-full" />
+        </button>
+    {/each}
+</div>

package/src/lib/index.ts

@@ -1,4 +1,5 @@
 // Reexport your entry components here
+export { ColorTheme, type ColorThemePreference } from './colorTheme.svelte';
 export { theme, type Theme } from './theme.svelte';
 export { type IvoryComponent } from './types';
 

package/dist/components/ai/AiMessage.svelte

@@ -1,114 +0,0 @@
-<!-- 
-	@component
-	The default for AI Messages in the Chat component.
-	Can be customized using the `class` and `loading` props.
--->
-
-<script lang="ts">
-    import { merge } from '../../utils/functions';
-    import { ThumbsDown, ThumbsUp } from '@lucide/svelte';
-    import type { Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
-    import CopyToClipboardButton from '../buttons/CopyToClipboardButton.svelte';
-    import type { AiChatMessage } from './Chat.svelte';
-    import Markdown from './Markdown.svelte';
-
-    interface Props {
-        b_message: AiChatMessage;
-        messageText?: Snippet<[{ message: AiChatMessage }]>;
-        class?: ClassValue;
-        minHeight?: number;
-    }
-
-    let {
-        b_message = $bindable(),
-        class: clazz,
-        messageText = defaultMessage,
-        minHeight
-    }: Props = $props();
-
-    // const uuidRegex =
-    //     /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/g;
-    // const icon = `<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" class="h-[1em] origin-center overflow-visible align-[-0.125rem]" viewBox="0 0 512 512"><g transform="translate(256 256)" transform-origin="128 0"><path d="M336 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l121.4 0L212.7 276.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6 480 176c0 8.8 7.2 16 16 16s16-7.2 16-16l0-160c0-8.8-7.2-16-16-16L336 0zM64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-144c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 144c0 17.7-14.3 32-32 32L64 480c-17.7 0-32-14.3-32-32L32 96c0-17.7 14.3-32 32-32l144 0c8.8 0 16-7.2 16-16s-7.2-16-16-16L64 32z" fill="currentColor" transform="translate(-256 -256)"></path><!----></g></svg>`;
-
-    // async function replacerFactory(): Promise<(match: string) => string> {
-    //     const docs = await documents.value;
-    //     return (match: string) => {
-    //         const doc = docs.find((d) => d.id === match);
-
-    //         return `<span class="bg-surface-100-900 py-1 px-2 rounded flex flex-row items-center gap-2 hover:shadow-lg w-fit transition-all">
-    //         ${doc?.title ?? 'Unbekanntes Dokument'}
-    //         <a href="/documents/${doc?.id}" target="_blank">
-    //         ${icon}
-    //         </a>
-    //         </span>`;
-    //     };
-    // }
-</script>
-
-<div
-    class={merge('group flex w-full flex-col items-start', clazz)}
-    style={minHeight ? `min-height: ${minHeight}px;` : undefined}
->
-    {@render messageText({
-        message: b_message
-    })}
-    <div
-        class={[
-            'text-surface-500 flex -translate-x-3 flex-row items-center transition-all group-hover:opacity-100',
-            b_message.liked || b_message.disliked ? 'opacity-100' : 'opacity-0'
-        ]}
-    >
-        <CopyToClipboardButton
-            text={b_message.message}
-            toastMessage="Nachricht wurde in die Zwischenablage kopiert"
-        />
-        <button
-            type="button"
-            class="btn-icon"
-            onclick={() => {
-                b_message.liked = !b_message.liked;
-                b_message.disliked = false;
-            }}
-        >
-            <ThumbsUp class={[b_message.liked && 'fill-surface-500/50']} />
-        </button>
-        <button
-            type="button"
-            class="btn-icon"
-            onclick={() => {
-                b_message.liked = false;
-                b_message.disliked = !b_message.disliked;
-            }}
-        >
-            <ThumbsDown class={[b_message.disliked && 'fill-surface-500/50']} />
-        </button>
-        {#if b_message.time}
-            <p class="text-surface-400-600 pl-2">
-                {b_message.time.toLocaleString('de')}
-            </p>
-        {/if}
-    </div>
-</div>
-
-{#snippet defaultMessage({ message }: { message: AiChatMessage })}
-    {#if message}
-        <Markdown source={message.message} />
-    {:else}
-        <p class="flex flex-row">
-            <span class="h-4 animate-bounce rounded-full pl-1">.</span>
-            <span
-                class="h-4 animate-bounce rounded-full"
-                style="animation-delay: 125ms !important;"
-            >
-                .
-            </span>
-            <span
-                class="h-4 animate-bounce rounded-full"
-                style="animation-delay: 250ms !important;"
-            >
-                .
-            </span>
-        </p>
-    {/if}
-{/snippet}

package/dist/components/ai/AiMessage.svelte.d.ts

@@ -1,19 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
-import type { AiChatMessage } from './Chat.svelte';
-interface Props {
-    b_message: AiChatMessage;
-    messageText?: Snippet<[{
-        message: AiChatMessage;
-    }]>;
-    class?: ClassValue;
-    minHeight?: number;
-}
-/**
- * The default for AI Messages in the Chat component.
- * Can be customized using the `class` and `loading` props.
- */
-declare const AiMessage: import("svelte").Component<Props, {}, "b_message">;
-type AiMessage = ReturnType<typeof AiMessage>;
-export default AiMessage;
-//# sourceMappingURL=AiMessage.svelte.d.ts.map

package/dist/components/ai/AiMessage.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AiMessage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/AiMessage.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI/C,UAAU,KAAK;IACX,SAAS,EAAE,aAAa,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAsFL;;;GAGG;AACH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/ai/AttachedFile.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-    import { X } from '@lucide/svelte';
-    import type { ClassValue } from 'svelte/elements';
-
-    interface Props {
-        file: File;
-        onremove?: (f: File) => void;
-        class?: ClassValue;
-    }
-
-    let { file, onremove, class: clazz }: Props = $props();
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<svelte:element
-    this={onremove ? 'button' : 'div'}
-    type={onremove ? 'button' : undefined}
-    onclick={onremove ? () => onremove(file) : undefined}
-    class={[
-        'bg-primary-500/25 group flex flex-row items-center gap-1 overflow-hidden rounded-full px-4 py-1 whitespace-nowrap',
-        clazz
-    ]}
->
-    <p>{file.name}</p>
-    {#if onremove}
-        <X size={16} class="group-hover:text-primary-500" />
-    {/if}
-</svelte:element>

package/dist/components/ai/AttachedFile.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { ClassValue } from 'svelte/elements';
-interface Props {
-    file: File;
-    onremove?: (f: File) => void;
-    class?: ClassValue;
-}
-declare const AttachedFile: import("svelte").Component<Props, {}, "">;
-type AttachedFile = ReturnType<typeof AttachedFile>;
-export default AttachedFile;
-//# sourceMappingURL=AttachedFile.svelte.d.ts.map

package/dist/components/ai/AttachedFile.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AttachedFile.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/AttachedFile.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG9C,UAAU,KAAK;IACX,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB;AAsBL,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/ai/Chat.svelte

@@ -1,149 +0,0 @@
-<!-- 
-	@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 { merge } from '../../utils/functions';
-    import { tick, type Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
-    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 = $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;
-    }
-
-    export 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 (b_chat.loading) {
-            return;
-        }
-
-        b_chat.messages.push({
-            ...message,
-            from: 'user',
-            time: new Date()
-        });
-        // prevent the user from sending another message while we are loading the ai response
-        b_chat.loading = true;
-
-        // add an empty system message to the chat, this will indicate a loading state
-        b_chat.messages.push({
-            from: 'system',
-            message: '',
-            time: new Date()
-        });
-
-        await scrollToBottom();
-
-        await externalSubmit(message);
-
-        b_chat.loading = false;
-    }
-</script>
-
-<div class={merge('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 b_chat.messages.length === 0 && placeholder}
-            {@render placeholder()}
-        {/if}
-        {#each b_chat.messages as _, i (i)}
-            {@const message = b_chat.messages[i]}
-            {#if message.from === 'user'}
-                {@render userMessage({
-                    message,
-                    i
-                })}
-            {:else}
-                {@render systemMessage({
-                    message,
-                    i,
-                    minHeight: i === b_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={b_chat.messages[i]} {minHeight} />
-{/snippet}
-
-{#snippet defaultUserMessage({
-    message
-}: {
-    i: number;
-    message: AiChatMessage;
-    minHeight?: number;
-})}
-    <UserMessage {message} />
-{/snippet}

package/dist/components/ai/Chat.svelte.d.ts

@@ -1,43 +0,0 @@
-import { type Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
-export interface AiChatMessage {
-    from: 'user' | 'system';
-    message: string;
-    time?: Date;
-    liked?: boolean;
-    disliked?: boolean;
-    files?: File[];
-}
-export interface AiChat {
-    messages: AiChatMessage[];
-    loading?: boolean;
-}
-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>;
-}
-/**
- * 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.
- */
-declare const Chat: import("svelte").Component<Props, {
-    scrollToBottom: () => Promise<void>;
-}, "b_chat">;
-type Chat = ReturnType<typeof Chat>;
-export default Chat;
-//# sourceMappingURL=Chat.svelte.d.ts.map

package/dist/components/ai/Chat.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chat.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/Chat.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,MAAM;IACnB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACrF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;KAAE,CAAC,CAAC,CAAC;IAC7E,MAAM,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACrD;AAqHL;;;;GAIG;AACH,QAAA,MAAM,IAAI;;YAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/ai/UserMessage.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-    import { merge } from '../../utils/functions';
-    import type { Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
-    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={merge('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, i (i)}
-                {@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/dist/components/ai/UserMessage.svelte.d.ts

@@ -1,17 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
-import type { AiChatMessage } from './Chat.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;
-    }]>;
-}
-declare const UserMessage: import("svelte").Component<Props, {}, "">;
-type UserMessage = ReturnType<typeof UserMessage>;
-export default UserMessage;
-//# sourceMappingURL=UserMessage.svelte.d.ts.map

package/dist/components/ai/UserMessage.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UserMessage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/UserMessage.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI/C,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IACvB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IACrC,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAA;KAAE,CAAC,CAAC,CAAC;CACvD;AAgDL,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -1,114 +0,0 @@
-<!-- 
-	@component
-	The default for AI Messages in the Chat component.
-	Can be customized using the `class` and `loading` props.
--->
-
-<script lang="ts">
-    import { merge } from '$lib/utils/functions';
-    import { ThumbsDown, ThumbsUp } from '@lucide/svelte';
-    import type { Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
-    import CopyToClipboardButton from '../buttons/CopyToClipboardButton.svelte';
-    import type { AiChatMessage } from './Chat.svelte';
-    import Markdown from './Markdown.svelte';
-
-    interface Props {
-        b_message: AiChatMessage;
-        messageText?: Snippet<[{ message: AiChatMessage }]>;
-        class?: ClassValue;
-        minHeight?: number;
-    }
-
-    let {
-        b_message = $bindable(),
-        class: clazz,
-        messageText = defaultMessage,
-        minHeight
-    }: Props = $props();
-
-    // const uuidRegex =
-    //     /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/g;
-    // const icon = `<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" class="h-[1em] origin-center overflow-visible align-[-0.125rem]" viewBox="0 0 512 512"><g transform="translate(256 256)" transform-origin="128 0"><path d="M336 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l121.4 0L212.7 276.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6 480 176c0 8.8 7.2 16 16 16s16-7.2 16-16l0-160c0-8.8-7.2-16-16-16L336 0zM64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-144c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 144c0 17.7-14.3 32-32 32L64 480c-17.7 0-32-14.3-32-32L32 96c0-17.7 14.3-32 32-32l144 0c8.8 0 16-7.2 16-16s-7.2-16-16-16L64 32z" fill="currentColor" transform="translate(-256 -256)"></path><!----></g></svg>`;
-
-    // async function replacerFactory(): Promise<(match: string) => string> {
-    //     const docs = await documents.value;
-    //     return (match: string) => {
-    //         const doc = docs.find((d) => d.id === match);
-
-    //         return `<span class="bg-surface-100-900 py-1 px-2 rounded flex flex-row items-center gap-2 hover:shadow-lg w-fit transition-all">
-    //         ${doc?.title ?? 'Unbekanntes Dokument'}
-    //         <a href="/documents/${doc?.id}" target="_blank">
-    //         ${icon}
-    //         </a>
-    //         </span>`;
-    //     };
-    // }
-</script>
-
-<div
-    class={merge('group flex w-full flex-col items-start', clazz)}
-    style={minHeight ? `min-height: ${minHeight}px;` : undefined}
->
-    {@render messageText({
-        message: b_message
-    })}
-    <div
-        class={[
-            'text-surface-500 flex -translate-x-3 flex-row items-center transition-all group-hover:opacity-100',
-            b_message.liked || b_message.disliked ? 'opacity-100' : 'opacity-0'
-        ]}
-    >
-        <CopyToClipboardButton
-            text={b_message.message}
-            toastMessage="Nachricht wurde in die Zwischenablage kopiert"
-        />
-        <button
-            type="button"
-            class="btn-icon"
-            onclick={() => {
-                b_message.liked = !b_message.liked;
-                b_message.disliked = false;
-            }}
-        >
-            <ThumbsUp class={[b_message.liked && 'fill-surface-500/50']} />
-        </button>
-        <button
-            type="button"
-            class="btn-icon"
-            onclick={() => {
-                b_message.liked = false;
-                b_message.disliked = !b_message.disliked;
-            }}
-        >
-            <ThumbsDown class={[b_message.disliked && 'fill-surface-500/50']} />
-        </button>
-        {#if b_message.time}
-            <p class="text-surface-400-600 pl-2">
-                {b_message.time.toLocaleString('de')}
-            </p>
-        {/if}
-    </div>
-</div>
-
-{#snippet defaultMessage({ message }: { message: AiChatMessage })}
-    {#if message}
-        <Markdown source={message.message} />
-    {:else}
-        <p class="flex flex-row">
-            <span class="h-4 animate-bounce rounded-full pl-1">.</span>
-            <span
-                class="h-4 animate-bounce rounded-full"
-                style="animation-delay: 125ms !important;"
-            >
-                .
-            </span>
-            <span
-                class="h-4 animate-bounce rounded-full"
-                style="animation-delay: 250ms !important;"
-            >
-                .
-            </span>
-        </p>
-    {/if}
-{/snippet}

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

@@ -1,28 +0,0 @@
-<script lang="ts">
-    import { X } from '@lucide/svelte';
-    import type { ClassValue } from 'svelte/elements';
-
-    interface Props {
-        file: File;
-        onremove?: (f: File) => void;
-        class?: ClassValue;
-    }
-
-    let { file, onremove, class: clazz }: Props = $props();
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<svelte:element
-    this={onremove ? 'button' : 'div'}
-    type={onremove ? 'button' : undefined}
-    onclick={onremove ? () => onremove(file) : undefined}
-    class={[
-        'bg-primary-500/25 group flex flex-row items-center gap-1 overflow-hidden rounded-full px-4 py-1 whitespace-nowrap',
-        clazz
-    ]}
->
-    <p>{file.name}</p>
-    {#if onremove}
-        <X size={16} class="group-hover:text-primary-500" />
-    {/if}
-</svelte:element>

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

@@ -1,149 +0,0 @@
-<!-- 
-	@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 { merge } from '$lib/utils/functions';
-    import { tick, type Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
-    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 = $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;
-    }
-
-    export 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 (b_chat.loading) {
-            return;
-        }
-
-        b_chat.messages.push({
-            ...message,
-            from: 'user',
-            time: new Date()
-        });
-        // prevent the user from sending another message while we are loading the ai response
-        b_chat.loading = true;
-
-        // add an empty system message to the chat, this will indicate a loading state
-        b_chat.messages.push({
-            from: 'system',
-            message: '',
-            time: new Date()
-        });
-
-        await scrollToBottom();
-
-        await externalSubmit(message);
-
-        b_chat.loading = false;
-    }
-</script>
-
-<div class={merge('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 b_chat.messages.length === 0 && placeholder}
-            {@render placeholder()}
-        {/if}
-        {#each b_chat.messages as _, i (i)}
-            {@const message = b_chat.messages[i]}
-            {#if message.from === 'user'}
-                {@render userMessage({
-                    message,
-                    i
-                })}
-            {:else}
-                {@render systemMessage({
-                    message,
-                    i,
-                    minHeight: i === b_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={b_chat.messages[i]} {minHeight} />
-{/snippet}
-
-{#snippet defaultUserMessage({
-    message
-}: {
-    i: number;
-    message: AiChatMessage;
-    minHeight?: number;
-})}
-    <UserMessage {message} />
-{/snippet}

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

@@ -1,52 +0,0 @@
-<script lang="ts">
-    import { merge } from '$lib/utils/functions';
-    import type { Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
-    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={merge('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, i (i)}
-                {@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}