From 54775278da1de094d41c09705193232ab31c8bdb Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Tue, 12 Nov 2024 14:46:05 +0000
Subject: [PATCH] add logic to select category if the user starts with chatting

---
 app/src/lib/components/ChatContainer.svelte   |  7 ++--
 .../components/RenderCategorySelection.svelte | 13 +++++++
 app/src/lib/components/SelectCategory.svelte  | 33 +++++++++++++++++
 app/src/routes/+page.svelte                   | 36 +++++++++++++++----
 .../chat/[sessionId=sessionId]/+page.svelte   |  4 ++-
 5 files changed, 84 insertions(+), 9 deletions(-)
 create mode 100644 app/src/lib/components/RenderCategorySelection.svelte
 create mode 100644 app/src/lib/components/SelectCategory.svelte

diff --git a/app/src/lib/components/ChatContainer.svelte b/app/src/lib/components/ChatContainer.svelte
index 38dc80c..f5edada 100644
--- a/app/src/lib/components/ChatContainer.svelte
+++ b/app/src/lib/components/ChatContainer.svelte
@@ -7,9 +7,12 @@
 	let navLoading = false;
 </script>
 
-<div class="mx-auto flex h-full w-full flex-col overflow-auto items-center gap-1 px-4">
+<div
+	id="chatContainer1"
+	class="mx-auto flex h-full w-full flex-col overflow-auto items-center gap-1 px-4"
+>
 	<div class="sm:max-w-xl lg:max-w-3xl max-w-full w-full">
-		<div id="chatContainer1" class="scrollbar-y-1 w-full h-[calc(100%-4rem)] block">
+		<div class="scrollbar-y-1 w-full h-[calc(100%-4rem)] block">
 			<slot name="content"></slot>
 			<div class="h-48"></div>
 		</div>
diff --git a/app/src/lib/components/RenderCategorySelection.svelte b/app/src/lib/components/RenderCategorySelection.svelte
new file mode 100644
index 0000000..b76ed28
--- /dev/null
+++ b/app/src/lib/components/RenderCategorySelection.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import ChatListItem from './ChatListItem.svelte';
+	import SelectCategory from './SelectCategory.svelte';
+	export let content: string;
+</script>
+
+<div class="flex flex-col gap-y-3 h-full">
+	<ChatListItem type="user" {content} />
+
+	<ChatListItem type="assistant" content="Please select your audiocast category" />
+
+	<SelectCategory on:selectCategory />
+</div>
diff --git a/app/src/lib/components/SelectCategory.svelte b/app/src/lib/components/SelectCategory.svelte
new file mode 100644
index 0000000..625cdfb
--- /dev/null
+++ b/app/src/lib/components/SelectCategory.svelte
@@ -0,0 +1,33 @@
+<script lang="ts" context="module">
+	import type { ContentCategory } from '@/utils/types';
+
+	export const categories: ContentCategory[] = [
+		'podcast',
+		'sermon',
+		'audiodrama',
+		'lecture',
+		'commentary',
+		'voicenote',
+		'interview',
+		'soundbite'
+	];
+</script>
+
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import Button from './ui/button/button.svelte';
+	const dispatch = createEventDispatcher<{ selectCategory: { value: ContentCategory } }>();
+</script>
+
+<div class="w-full h-full block animate-fade-in">
+	<div class="flex flex-wrap gap-3">
+		{#each categories as category (category)}
+			<Button
+				class="bg-sky-900/40 hover:bg-sky-900/60 text-sky-200 px-4 py-2 rounded-full"
+				on:click={() => dispatch('selectCategory', { value: category })}
+			>
+				{category}
+			</Button>
+		{/each}
+	</div>
+</div>
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index c2e7324..0439f3d 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -2,16 +2,31 @@
 	import RenderExamples from '@/components/RenderExamples.svelte';
 	import ChatContainer from '@/components/ChatContainer.svelte';
 	import { getSessionContext } from '@/stores/sessionContext.svelte.js';
+	import { uuid } from '@/utils/uuid';
+	import { goto } from '$app/navigation';
+	import type { ContentCategory } from '@/utils/types';
+	import RenderCategorySelection from '@/components/RenderCategorySelection.svelte';
 
-	const { sessionId$ } = getSessionContext();
+	const { sessionId$, addChatItem, startSession } = getSessionContext();
 
 	let searchTerm = '';
+	let triggerSelectCategory = false;
+	let selectContent = '';
+
 	$: sessionId = $sessionId$;
 
 	function handleSearch() {
-		if (searchTerm) {
-			console.log(searchTerm);
-		}
+		selectContent = searchTerm;
+		triggerSelectCategory = true;
+		searchTerm = '';
+	}
+
+	function continueChat(category: ContentCategory) {
+		startSession(category);
+		addChatItem({ id: uuid(), content: selectContent, role: 'user', loading: false });
+
+		const href = `/chat/${sessionId}?category=${category}`;
+		goto(href);
 	}
 </script>
 
@@ -19,6 +34,15 @@
 	<title>Audiora</title>
 </svelte:head>
 
-<ChatContainer on:click={handleSearch} on:keypress={handleSearch}>
-	<RenderExamples slot="content" {sessionId} />
+<ChatContainer bind:searchTerm on:click={handleSearch} on:keypress={handleSearch}>
+	<svelte:fragment slot="content">
+		{#if triggerSelectCategory && selectContent}
+			<RenderCategorySelection
+				content={selectContent}
+				on:selectCategory={({ detail }) => continueChat(detail.value)}
+			/>
+		{:else}
+			<RenderExamples {sessionId} />
+		{/if}
+	</svelte:fragment>
 </ChatContainer>
diff --git a/app/src/routes/chat/[sessionId=sessionId]/+page.svelte b/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
index 211e4db..1699d6c 100644
--- a/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
+++ b/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
@@ -109,7 +109,9 @@
 					<ChatListItem type={item.role} content={item.content} loading={item.loading} />
 
 					{#if finalResponse && $fetchingSource$}
-						<div class="block w-full animate-pulse text-center p-2 text-gray-300">
+						<div
+							class="py-1 px-3 mx-auto w-fit bg-sky-600/20 animate-pulse text-sky-300 rounded-sm"
+						>
 							Fetching Audiocast Source...Please wait
 						</div>
 					{:else if finalResponse}