refactor: implement ChatContainer component and update layout for ses…

…sion handling

app/src/lib/components/ChatContainer.svelte

@@ -0,0 +1,14 @@
+<div class="relative overflow-hidden w-full flex flex-col h-full">
+	<div class="overflow-auto px-10 w-full block h-[calc(85%-2.5rem)]">
+		<div class="flex flex-col gap-y-2">
+			<h1 class="text-5xl font-bold">🎧 Audiora</h1>
+			<h2 class="text-lg">Listen to anything, anytime.</h2>
+		</div>
+
+		<slot name="content"></slot>
+	</div>
+
+	<div class="h-[16%] fixed w-[calc(100%-24.5rem)] bottom-0 shrink-0">
+		<slot name="chat_input"></slot>
+	</div>
+</div>

app/src/params/sessionId.ts

@@ -0,0 +1,2 @@
+import type { ParamMatcher } from '@sveltejs/kit';
+export const match: ParamMatcher = (param: string) => param != null && param !== 'null';

app/src/routes/+layout.svelte

@@ -16,7 +16,7 @@
 
 <div class="min-h-screen bg-background flex gap-x-2">
 	<aside class="shrink-0 h-screen pt-10 w-96 bg-gray-900 p-4 px-8">
-		<div class="text-sm text-muted-foreground p-3 rounded-lg bg-gray-700">
+		<div class="text-muted-foreground px-3 py-4 rounded-lg bg-gray-700">
 			A VeedoAI project. (c) 2024
 		</div>
 
@@ -25,7 +25,7 @@
 				<h3 class="mt-4 text-lg font-semibold">Content Category:</h3>
 				<p class="capitalize">{$page.data.contentCategory}</p>
 			{:else}
-				<p class="mt-4 text-sm text-muted-foreground">
+				<p class="mt-4 text-muted-foreground">
 					Your preferences and audiocast metadata will appear here
 				</p>
 			{/if}

app/src/routes/+page.svelte

@@ -1,36 +1,18 @@
 <script lang="ts">
-	// import { browser } from '$app/environment';
-	// import { goto } from '$app/navigation';
-	// import { page } from '$app/stores';
-	// import { sessionStore } from '$lib/stores/session';
-	// import ChatInterface from '$lib/components/ChatInterface.svelte';
-	// import AudioInterface from '$lib/components/AudioInterface.svelte';
-	// $: userSpecification = $sessionStore.userSpecification;
 	import RenderExamples from '@/components/RenderExamples.svelte';
-
+	import ChatContainer from '@/components/ChatContainer.svelte';
 	export let data;
-
 	$: sessionId = data.sessionId;
 </script>
 
 <svelte:head>
 	<title>Audiora</title>
 </svelte:head>
 
-<div class="relative overflow-hidden w-full flex flex-col h-full">
-	<div class="overflow-auto px-10 w-full block h-[calc(85%-2.5rem)]">
-		<div class="flex flex-col gap-y-2">
-			<h1 class="text-5xl font-bold">🎧 Audiora</h1>
-			<h2 class="text-lg">Listen to anything, anytime.</h2>
-		</div>
+<ChatContainer>
+	<RenderExamples slot="content" {sessionId} />
 
-		<RenderExamples {sessionId} />
+	<div slot="chat_input" class="h-[16%] fixed w-[calc(100%-24.5rem)] bottom-0 shrink-0">
+		Chat Input Section
 	</div>
-
-	<div class="h-[16%] fixed w-[calc(100%-24.5rem)] bottom-0 shrink-0">Chat Input Section</div>
-	<!-- {#if !userSpecification}
-	  <ChatInterface />
-	{:else}
-	  <AudioInterface />
-	{/if} -->
-</div>
+</ChatContainer>

app/src/routes/[sessionId=sessionId]/+page.server.ts

@@ -0,0 +1,11 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = ({ url }) => {
+	const category = url.searchParams.get('category');
+	if (!category) error(400, 'Audio category was not found');
+
+	return {
+		category
+	};
+};

app/src/routes/[sessionId=sessionId]/+page.svelte

@@ -0,0 +1,17 @@
+<script>
+	import ChatContainer from '@/components/ChatContainer.svelte';
+	export let data;
+
+	$: category = data.category;
+	$: sessionId = data.sessionId;
+</script>
+
+<ChatContainer>
+	<div slot="content">
+		{sessionId}: {category}
+	</div>
+
+	<div slot="chat_input" class="h-[16%] fixed w-[calc(100%-24.5rem)] bottom-0 shrink-0">
+		Chat Input Section
+	</div>
+</ChatContainer>