From 352ea4a7809fd8c8d4fcdc4281446190045c6da5 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 7 Nov 2024 18:24:04 +0000
Subject: [PATCH] feat: refactor content category handling and implement chat
 session management

---
 app/src/lib/components/RenderExamples.svelte  | 10 +--------
 app/src/lib/stores/chatStore.svelte.ts        | 22 +++++++++++++++++++
 app/src/lib/utils/types.ts                    |  9 ++++++++
 app/src/routes/+layout.server.ts              |  4 +++-
 app/src/routes/+layout.svelte                 | 20 ++++++++---------
 .../[sessionId=sessionId]/+layout.server.ts   |  6 +++++
 app/src/routes/[sessionId=sessionId]/+page.ts |  4 +---
 7 files changed, 52 insertions(+), 23 deletions(-)
 create mode 100644 app/src/lib/stores/chatStore.svelte.ts
 create mode 100644 app/src/lib/utils/types.ts
 create mode 100644 app/src/routes/[sessionId=sessionId]/+layout.server.ts

diff --git a/app/src/lib/components/RenderExamples.svelte b/app/src/lib/components/RenderExamples.svelte
index aac5283..a6e0489 100644
--- a/app/src/lib/components/RenderExamples.svelte
+++ b/app/src/lib/components/RenderExamples.svelte
@@ -1,13 +1,5 @@
 <script lang="ts" context="module">
-	export type ContentCategory =
-		| 'podcast'
-		| 'sermon'
-		| 'audiodrama'
-		| 'lecture'
-		| 'commentary'
-		| 'voicenote'
-		| 'interview'
-		| 'soundbite';
+	import type { ContentCategory } from '@/utils/types';
 
 	export const content_examples: Record<ContentCategory, string> = {
 		podcast:
diff --git a/app/src/lib/stores/chatStore.svelte.ts b/app/src/lib/stores/chatStore.svelte.ts
new file mode 100644
index 0000000..6003956
--- /dev/null
+++ b/app/src/lib/stores/chatStore.svelte.ts
@@ -0,0 +1,22 @@
+import { setContext, getContext } from 'svelte';
+import { persisted } from 'svelte-persisted-store';
+
+const CONTEXT_KEY = {};
+const CHAT_SESSION_KEY = 'CHAT_SESSION_KEY';
+
+export type ChatItem = {
+	id: string;
+	content: string;
+	role: 'user' | 'assistant';
+};
+
+export function setChatSession(sessionId: string) {
+	const chatSession$ = persisted<ChatItem[]>(`${CHAT_SESSION_KEY}_${sessionId}`, []);
+
+	return setContext(CONTEXT_KEY, {
+		chatSession$
+	});
+}
+
+export type ChatSession = ReturnType<typeof setChatSession>;
+export const getChatSession = (): ChatSession => getContext(CONTEXT_KEY);
diff --git a/app/src/lib/utils/types.ts b/app/src/lib/utils/types.ts
new file mode 100644
index 0000000..9153d84
--- /dev/null
+++ b/app/src/lib/utils/types.ts
@@ -0,0 +1,9 @@
+export type ContentCategory =
+	| 'podcast'
+	| 'sermon'
+	| 'audiodrama'
+	| 'lecture'
+	| 'commentary'
+	| 'voicenote'
+	| 'interview'
+	| 'soundbite';
diff --git a/app/src/routes/+layout.server.ts b/app/src/routes/+layout.server.ts
index b5bfe23..394d1e7 100644
--- a/app/src/routes/+layout.server.ts
+++ b/app/src/routes/+layout.server.ts
@@ -1,9 +1,11 @@
+import type { ContentCategory } from '@/utils/types';
 import type { LayoutServerLoad } from './$types';
 
 export const ssr = true;
 export const prerender = false;
 export const load: LayoutServerLoad = ({ locals }) => {
 	return {
-		sessionId: locals.sessionId
+		sessionId: locals.sessionId,
+		category: null as ContentCategory | null
 	};
 };
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index a5edce9..97eccc1 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,13 +1,12 @@
 <script lang="ts" context="module">
 	import '../app.css';
-	import { page } from '$app/stores';
-	// import { browser } from '$app/environment';
-	// import { goto } from '$app/navigation';
-	// import { sessionStore } from '$lib/stores/session';
-	// import ChatInterface from '$lib/components/ChatInterface.svelte';
-	// import AudioInterface from '$lib/components/AudioInterface.svelte';
+</script>
 
-	// $: userSpecification = $sessionStore.userSpecification;
+<script>
+	import { page } from '$app/stores';
+	import { setChatSession } from '$lib/stores/chatStore.svelte';
+	export let data;
+	$: setChatSession(data.sessionId);
 </script>
 
 <svelte:head>
@@ -21,9 +20,10 @@
 		</div>
 
 		<div class="pt-2">
-			{#if $page.data.contentCategory}
-				<h3 class="mt-4 text-lg font-semibold">Content Category:</h3>
-				<p class="capitalize">{$page.data.contentCategory}</p>
+			{#if $page.data.category}
+				<h3 class="mt-4 text-lg font-medium capitalize">
+					Content Category: {$page.data.category}
+				</h3>
 			{:else}
 				<p class="mt-4 text-muted-foreground">
 					Your preferences and audiocast metadata will appear here
diff --git a/app/src/routes/[sessionId=sessionId]/+layout.server.ts b/app/src/routes/[sessionId=sessionId]/+layout.server.ts
new file mode 100644
index 0000000..9fb43ea
--- /dev/null
+++ b/app/src/routes/[sessionId=sessionId]/+layout.server.ts
@@ -0,0 +1,6 @@
+import type { LayoutServerLoad } from './$types';
+export const load: LayoutServerLoad = ({ url }) => {
+	return {
+		category: url.searchParams.get('category')
+	};
+};
diff --git a/app/src/routes/[sessionId=sessionId]/+page.ts b/app/src/routes/[sessionId=sessionId]/+page.ts
index 8e5a07f..a593689 100644
--- a/app/src/routes/[sessionId=sessionId]/+page.ts
+++ b/app/src/routes/[sessionId=sessionId]/+page.ts
@@ -2,10 +2,8 @@ import { error, redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url, parent }) => {
-	const category = url.searchParams.get('category');
+	const { sessionId, category } = await parent();
 	if (!category) error(400, 'Audio category was not found');
-
-	const { sessionId } = await parent();
 	if (url.pathname !== `/${sessionId}`) redirect(307, '/');
 
 	return {