chat feature added

src/lib/components/common/Modal.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { fade, blur } from 'svelte/transition';
+
+	export let show = true;
+	let mounted = false;
+
+	onMount(() => {
+		mounted = true;
+	});
+
+	$: if (mounted) {
+		if (show) {
+			document.body.style.overflow = 'hidden';
+		} else {
+			document.body.style.overflow = 'unset';
+		}
+	}
+</script>
+
+{#if show}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		class="fixed top-0 right-0 left-0 bottom-0 bg-stone-900/50 w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
+		on:click={() => {
+			show = false;
+		}}
+	>
+		<div
+			class="m-auto min-h-52 max-w-full w-[30rem] bg-stone-800 rounded-lg p-5 mx-3 shadow-3xl"
+			transition:fade={{ delay: 100, duration: 200 }}
+			on:click={(e) => {
+				e.stopPropagation();
+			}}
+		>
+			<slot />
+		</div>
+	</div>
+{/if}

src/lib/components/common/Overlay.svelte

@@ -0,0 +1,33 @@
+<script>
+	import Spinner from './Spinner.svelte';
+
+	export let show = false;
+	export let content = '';
+
+	export let opacity = 1;
+</script>
+
+<div class="relative">
+	{#if show}
+		<div class="absolute w-full h-full flex">
+			<div
+				class="absolute rounded"
+				style="inset: -10px; opacity: {opacity}; backdrop-filter: blur(5px);"
+			/>
+
+			<div class="flex w-full flex-col justify-center">
+				<div class=" py-3">
+					<Spinner className="ml-2" />
+				</div>
+
+				{#if content !== ''}
+					<div class="text-center text-gray-100 text-xs font-medium z-50">
+						{content}
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<slot />
+</div>

src/lib/components/common/Spinner.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let className: string = 'text-white';
+	export let theme: 'blue' | 'white' | 'black' = 'white';
+</script>
+
+<div class="flex justify-center text-center {className}">
+	<svg
+		class="animate-spin -ml-1 mr-3 h-5 w-5 {theme === 'blue'
+			? 'text-sky-600'
+			: theme === 'white'
+			? 'text-white'
+			: 'text-gray-600'} "
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+	>
+		<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+		<path
+			class="opacity-75"
+			fill="currentColor"
+			d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+		/>
+	</svg>
+</div>