live chat

package.json

@@ -44,6 +44,7 @@
 		"@spotify/web-api-ts-sdk": "^1.2.0",
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
+		"crisp-sdk-web": "^1.0.25",
 		"dompurify": "^3.2.0",
 		"groq-sdk": "^0.8.0",
 		"marked": "^15.0.0",

src/lib/components/Chat.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Crisp } from 'crisp-sdk-web';
+	import { onMount } from 'svelte';
+
+	Crisp.configure('dff8b97b-a019-4187-b065-c6ca5de05775');
+
+	onMount(() => {
+		console.log('Starting chat');
+		Crisp.chat.open();
+	});
+</script>

src/routes/+layout.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import '../app.css';
 	import { page } from '$app/stores';
+	import { Button } from '$lib/components/ui/button';
 	import posthog from 'posthog-js';
 	import { browser } from '$app/environment';
 	import { beforeNavigate, afterNavigate } from '$app/navigation';
+	import Chat from '$lib/components/Chat.svelte';
+	let chatting = $state(false);
 	let { children } = $props();
 	if (browser) {
 		beforeNavigate(() => posthog.capture('$pageleave'));
@@ -36,3 +39,15 @@
 </header>
 
 {@render children()}
+
+{#if chatting}
+	<Chat />
+{:else}
+	<div
+		class={`my-8 flex items-center justify-center transition-opacity duration-200 ${chatting ? 'opacity-0' : 'opacity-100'}`}
+	>
+		<Button class="text-sm underline opacity-70" variant="link" on:click={() => (chatting = true)}
+			>feedback</Button
+		>
+	</div>
+{/if}