swap chat input box with navigation button when audiocast completes f…

…or a given session
nwaughachukwuma · Nov 11, 2024 · 80bc3ac · 80bc3ac
1 parent 43a8cfd
commit 80bc3ac
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 22 deletions.
diff --git a/app/src/lib/components/ChatBoxContainer.svelte b/app/src/lib/components/ChatBoxContainer.svelte
@@ -5,13 +5,14 @@
 	export let loading = false;
 	export let searchTerm: string;
 	export let showIcon = false;
+	export let disabled = false;
 </script>
 
 <div
 	class="fixed bg-background bottom-0 block w-full max-w-full max-sm:px-2 py-4 sm:max-w-xl lg:max-w-3xl"
 >
 	<div class="block w-full items-center">
-		<ChatBox {showIcon} disabled={loading} bind:searchTerm on:keypress>
+		<ChatBox {showIcon} disabled={loading || disabled} bind:searchTerm on:keypress>
 			<svelte:fragment slot="icon-right" let:disabled>
 				<ChatBoxIcon iconType="send" {loading} {disabled} {searchTerm} on:click />
 			</svelte:fragment>

diff --git a/app/src/lib/components/ChatContainer.svelte b/app/src/lib/components/ChatContainer.svelte
@@ -1,6 +1,9 @@
 <script>
+	import { getSessionContext } from '@/stores/sessionContext.svelte';
 	import ChatBoxContainer from './ChatBoxContainer.svelte';
+
 	export let searchTerm = '';
+	const { sessionCompleted$ } = getSessionContext();
 	let navLoading = false;
 </script>
 
@@ -12,5 +15,14 @@
 		<div class="h-32"></div>
 	</div>
 
-	<ChatBoxContainer bind:searchTerm loading={navLoading} showIcon on:keypress on:click />
+	{#if !$sessionCompleted$}
+		<ChatBoxContainer
+			bind:searchTerm
+			loading={navLoading}
+			showIcon
+			disabled={$sessionCompleted$}
+			on:keypress
+			on:click
+		/>
+	{/if}
 </div>
diff --git a/app/src/lib/components/CheckFinalResponse.svelte b/app/src/lib/components/CheckFinalResponse.svelte
@@ -7,9 +7,12 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { Button } from './ui/button';
+	import { getSessionContext } from '@/stores/sessionContext.svelte';
 
 	export let content: string;
 
+	const { sessionId$, sessionCompleted$ } = getSessionContext();
+
 	const dispatch = createEventDispatcher<{
 		finalResponse: void;
 		reviewSource: void;
@@ -33,23 +36,34 @@
 </script>
 
 {#if finalResponse}
-	<div class="animate-fade-in grid sm:grid-cols-3 gap-3">
-		<Button class="bg-emerald-600 text-emerald-100 hover:bg-emerald-700" on:click={ongenerate}
-			>Generate Audiocast</Button
-		>
-
-		<Button
-			variant="ghost"
-			class="bg-gray-800 hover:bg-gray-700 text-emerald-600 hover:text-emerald-600"
-			on:click={() => dispatch('reviewSource')}
-		>
-			Review Source
-		</Button>
-
-		<Button
-			variant="ghost"
-			class="text-emerald-600 hover:text-emerald-600 hover:bg-gray-800/40"
-			on:click={() => dispatch('startNew')}>Start New Session</Button
-		>
-	</div>
+	{#if $sessionCompleted$}
+		<div class="mt-3 w-full items-center justify-center flex">
+			<a
+				href="/audiocast/{$sessionId$}"
+				data-sveltekit-preload-data="hover"
+				class="py-3 rounded-md px-16 no-underline hover:no-underline bg-emerald-600 text-emerald-100 hover:bg-emerald-700"
+				>View Audiocast</a
+			>
+		</div>
+	{:else}
+		<div class="animate-fade-in grid sm:grid-cols-3 gap-3">
+			<Button class="bg-emerald-600 text-emerald-100 hover:bg-emerald-700" on:click={ongenerate}
+				>Generate Audiocast</Button
+			>
+
+			<Button
+				variant="ghost"
+				class="bg-gray-800 hover:bg-gray-700 text-emerald-600 hover:text-emerald-600"
+				on:click={() => dispatch('reviewSource')}
+			>
+				Review Source
+			</Button>
+
+			<Button
+				variant="ghost"
+				class="text-emerald-600 hover:text-emerald-600 hover:bg-gray-800/40"
+				on:click={() => dispatch('startNew')}>Start New Session</Button
+			>
+		</div>
+	{/if}
 {/if}
diff --git a/app/src/lib/stores/sessionContext.svelte.ts b/app/src/lib/stores/sessionContext.svelte.ts
@@ -1,7 +1,7 @@
 import type { ContentCategory } from '@/utils/types';
 import { setContext, getContext } from 'svelte';
 import { persisted } from 'svelte-persisted-store';
-import { writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 
 const CONTEXT_KEY = {};
 export const SESSION_KEY = 'AUDIOCAST_SESSION';
@@ -26,10 +26,12 @@ export type Session = {
 export function setSessionContext(sessionId: string) {
 	const session$ = persisted<Session | null>(`${SESSION_KEY}_${sessionId}`, null);
 	const sessionId$ = writable(sessionId);
+	const sessionCompleted$ = derived(session$, ($session) => !!$session?.completed);
 
 	return setContext(CONTEXT_KEY, {
 		session$,
 		sessionId$,
+		sessionCompleted$,
 		startSession: (category: ContentCategory) => {
 			session$.set({
 				id: sessionId,