From 908386f8b9eac4342db775e9813f2a3228350553 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Mon, 11 Nov 2024 11:16:41 +0000
Subject: [PATCH] extract the summary from the content

---
 .../lib/components/CheckFinalResponse.svelte  | 20 +++++++++----
 .../chat-list/ChatListActionItems.svelte      | 28 +++++++++++++++++++
 .../chat/[sessionId=sessionId]/+page.svelte   | 23 ++++++++++-----
 3 files changed, 59 insertions(+), 12 deletions(-)
 create mode 100644 app/src/lib/components/chat-list/ChatListActionItems.svelte

diff --git a/app/src/lib/components/CheckFinalResponse.svelte b/app/src/lib/components/CheckFinalResponse.svelte
index 82ce7fa..57fc5e1 100644
--- a/app/src/lib/components/CheckFinalResponse.svelte
+++ b/app/src/lib/components/CheckFinalResponse.svelte
@@ -1,31 +1,41 @@
 <script context="module">
-	const FINAL_RESPONSE_SUFFIX = 'Please click the button below to start generating the audiocast.';
+	export const FINAL_RESPONSE_PREFIX = 'Ok, thanks for clarifying!';
+	export const FINAL_RESPONSE_SUFFIX =
+		'Please click the button below to start generating the audiocast.';
 </script>
 
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { Button } from './ui/button';
+
 	export let content: string;
 
 	const dispatch = createEventDispatcher<{
 		finalResponse: void;
-		generate: void;
 		reviewSource: void;
 		startNew: void;
+		generate: { summary: string };
 	}>();
 	let mounted = false;
 
 	$: finalResponse = content.includes(FINAL_RESPONSE_SUFFIX);
 	$: if (mounted && finalResponse) dispatch('finalResponse');
 
+	function ongenerate() {
+		const replacePrefixRegex = new RegExp(FINAL_RESPONSE_PREFIX, 'gi');
+		const replaceSuffixRegex = new RegExp(FINAL_RESPONSE_SUFFIX, 'gi');
+		const summary = content.replace(replacePrefixRegex, '').replace(replaceSuffixRegex, '').trim();
+
+		dispatch('generate', { summary });
+	}
+
 	onMount(() => (mounted = true));
 </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={() => dispatch('generate')}>Generate Audiocast</Button
+		<Button class="bg-emerald-600 text-emerald-100 hover:bg-emerald-700" on:click={ongenerate}
+			>Generate Audiocast</Button
 		>
 
 		<Button
diff --git a/app/src/lib/components/chat-list/ChatListActionItems.svelte b/app/src/lib/components/chat-list/ChatListActionItems.svelte
new file mode 100644
index 0000000..9374c17
--- /dev/null
+++ b/app/src/lib/components/chat-list/ChatListActionItems.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import type { ContentCategory } from '@/utils/types';
+
+	export let sessionId: string;
+	export let category: ContentCategory;
+
+	function ongenerate(summary: string) {
+		console.log('ongenerate', sessionId, summary, category);
+		fetch('/api/generate', {
+			method: 'POST',
+			body: JSON.stringify({ sessionId, summary, category }),
+			headers: { 'Content-Type': 'application/json' }
+		});
+	}
+
+	function onreviewSource() {
+		console.log('reviewSource');
+	}
+
+	async function onstartNew() {
+		return goto('/', { invalidateAll: true, replaceState: true });
+	}
+</script>
+
+<div>
+	<slot {ongenerate} {onreviewSource} {onstartNew}></slot>
+</div>
diff --git a/app/src/routes/chat/[sessionId=sessionId]/+page.svelte b/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
index e361465..e948030 100644
--- a/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
+++ b/app/src/routes/chat/[sessionId=sessionId]/+page.svelte
@@ -6,6 +6,7 @@
 	import { uuid } from '@/utils/uuid';
 	import { streamingResponse } from '$lib/utils/streamingResponse';
 	import CheckFinalResponse from '@/components/CheckFinalResponse.svelte';
+	import ChatListActionItems from '@/components/chat-list/ChatListActionItems.svelte';
 
 	export let data;
 
@@ -87,13 +88,21 @@
 				{#each sessionChats as item (item.id)}
 					<ChatListItem type={item.role} content={item.content} loading={item.loading} />
 
-					<CheckFinalResponse
-						content={item.content}
-						on:finalResponse={scrollChatContent}
-						on:generate
-						on:reviewSource
-						on:startNew
-					/>
+					<ChatListActionItems
+						{category}
+						{sessionId}
+						let:ongenerate
+						let:onreviewSource
+						let:onstartNew
+					>
+						<CheckFinalResponse
+							content={item.content}
+							on:finalResponse={scrollChatContent}
+							on:generate={({ detail }) => ongenerate(detail.summary)}
+							on:reviewSource={onreviewSource}
+							on:startNew={onstartNew}
+						/>
+					</ChatListActionItems>
 				{/each}
 			{/key}
 		</div>