From 6bd9abc422283da48ba2028ade8d0110bf1387bc Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 20 Nov 2024 03:40:36 +0000
Subject: [PATCH 01/45] add accordion item for creating custom source items

---
 app/src/lib/components/AddCustomSource.svelte | 23 +++++++++++
 app/src/lib/components/CustomSources.svelte   | 29 +++++++++++++
 .../lib/components/RenderAudioSource.svelte   | 41 ++++++++++++++++---
 .../ui/accordion/accordion-trigger.svelte     | 16 ++++----
 app/src/lib/components/ui/accordion/index.ts  | 10 ++---
 5 files changed, 102 insertions(+), 17 deletions(-)
 create mode 100644 app/src/lib/components/AddCustomSource.svelte
 create mode 100644 app/src/lib/components/CustomSources.svelte

diff --git a/app/src/lib/components/AddCustomSource.svelte b/app/src/lib/components/AddCustomSource.svelte
new file mode 100644
index 0000000..8b4431b
--- /dev/null
+++ b/app/src/lib/components/AddCustomSource.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { cn } from '@/utils/ui.utils';
+	export let show = false;
+</script>
+
+<div class="container w-full flex justify-center overflow-hidden flex-col items-center" class:show>
+	<div>Add Custom Source</div>
+</div>
+
+<style>
+	.container {
+		height: 0;
+		opacity: 0;
+		transition:
+			height 0.3s ease-in-out,
+			opacity 0.3s ease-in-out;
+	}
+
+	.show {
+		opacity: 1;
+		height: 10rem;
+	}
+</style>
diff --git a/app/src/lib/components/CustomSources.svelte b/app/src/lib/components/CustomSources.svelte
new file mode 100644
index 0000000..dc427e3
--- /dev/null
+++ b/app/src/lib/components/CustomSources.svelte
@@ -0,0 +1,29 @@
+<script>
+	import * as Accordion from './ui/accordion';
+
+	const customSources = [
+		{
+			id: '1',
+			type: 'copy/paste',
+			title: 'Custom Source 1',
+			content: 'AI-generated Source content goes here'
+		},
+		{
+			id: '2',
+			type: 'webpage',
+			title: 'Custom Source 2',
+			content: 'Custom Souce content goes here'
+		}
+	];
+</script>
+
+{#each customSources as source (source.id)}
+	<Accordion.Item value={source.id} class="border-gray-800">
+		<Accordion.Trigger>{source.title}</Accordion.Trigger>
+		<Accordion.Content>
+			<div class="flex w-full flex-col gap-y-3 p-2 bg-gray-900/70 text-gray-300">
+				{source.content}
+			</div>
+		</Accordion.Content>
+	</Accordion.Item>
+{/each}
diff --git a/app/src/lib/components/RenderAudioSource.svelte b/app/src/lib/components/RenderAudioSource.svelte
index 94d2f11..1fceab9 100644
--- a/app/src/lib/components/RenderAudioSource.svelte
+++ b/app/src/lib/components/RenderAudioSource.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import * as Drawer from './ui/drawer';
 	import { Button } from './ui/button';
+	import * as Accordion from './ui/accordion';
 	import { parse } from 'marked';
+	import { PlusIcon } from 'lucide-svelte';
+	import CustomSources from './CustomSources.svelte';
+	import AddCustomSource from './AddCustomSource.svelte';
 
 	export let audioSource: string;
 
@@ -29,11 +33,38 @@
 				<div
 					class="mx-auto relative w-full h-[calc(100%+120px)] max-w-full px-4 py-2 md:max-w-3xl xl:max-w-4xl"
 				>
-					<article class="prose text-gray-300 flex flex-col gap-y-3">
-						{#await parse(audioSource) then parsedContent}
-							{@html parsedContent}
-						{/await}
-					</article>
+					<Accordion.Root>
+						<Accordion.Item value="item-x" class="border-gray-800 mb-3 rounded-md border">
+							<Accordion.Trigger
+								class="no-underline hover:no-underline px-3 rounded-md border-dashed bg-gray-900/60 hover:bg-gray-900"
+							>
+								<span class="capitalize font-medium text-gray-400"> Add custom source </span>
+								<span slot="icon" class="p-1 rounded-full border border-gray-500">
+									<PlusIcon
+										class="inline w-6 h-6 text-gray-400 hover:text-gray-200 transition-all"
+									/>
+								</span>
+							</Accordion.Trigger>
+							<Accordion.Content>
+								<AddCustomSource show />
+							</Accordion.Content>
+						</Accordion.Item>
+
+						<Accordion.Item value="item-0" class="border-gray-800">
+							<Accordion.Trigger>AI-generated Source</Accordion.Trigger>
+							<Accordion.Content>
+								<article
+									class="prose text-gray-300 flex p-2 flex-col gap-y-3 bg-gray-900/70 text-gray-30"
+								>
+									{#await parse(audioSource) then parsedContent}
+										{@html parsedContent}
+									{/await}
+								</article>
+							</Accordion.Content>
+						</Accordion.Item>
+
+						<CustomSources />
+					</Accordion.Root>
 				</div>
 			</div>
 		</Drawer.Content>
diff --git a/app/src/lib/components/ui/accordion/accordion-trigger.svelte b/app/src/lib/components/ui/accordion/accordion-trigger.svelte
index 10d4398..63178e6 100644
--- a/app/src/lib/components/ui/accordion/accordion-trigger.svelte
+++ b/app/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -1,26 +1,28 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
-	import { cn } from "$lib/utils/ui.utils.js";
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import ChevronDown from 'lucide-svelte/icons/chevron-down';
+	import { cn } from '$lib/utils/ui.utils.js';
 
 	type $$Props = AccordionPrimitive.TriggerProps;
 	type $$Events = AccordionPrimitive.TriggerEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let level: AccordionPrimitive.HeaderProps["level"] = 3;
+	let className: $$Props['class'] = undefined;
+	export let level: AccordionPrimitive.HeaderProps['level'] = 3;
 	export { className as class };
 </script>
 
 <AccordionPrimitive.Header {level} class="flex">
 	<AccordionPrimitive.Trigger
 		class={cn(
-			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
 			className
 		)}
 		{...$$restProps}
 		on:click
 	>
 		<slot />
-		<ChevronDown class="h-4 w-4 transition-transform duration-200" />
+		<slot name="icon">
+			<ChevronDown class="h-4 w-4 transition-transform duration-200" />
+		</slot>
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>
diff --git a/app/src/lib/components/ui/accordion/index.ts b/app/src/lib/components/ui/accordion/index.ts
index ed49213..0734d4e 100644
--- a/app/src/lib/components/ui/accordion/index.ts
+++ b/app/src/lib/components/ui/accordion/index.ts
@@ -1,7 +1,7 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
-import Content from "./accordion-content.svelte";
-import Item from "./accordion-item.svelte";
-import Trigger from "./accordion-trigger.svelte";
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
 const Root = AccordionPrimitive.Root;
 
 export {
@@ -13,5 +13,5 @@ export {
 	Root as Accordion,
 	Content as AccordionContent,
 	Item as AccordionItem,
-	Trigger as AccordionTrigger,
+	Trigger as AccordionTrigger
 };

From ac8a25667524448dbfea4a23296cfc17ff533ef4 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 20 Nov 2024 14:42:15 +0000
Subject: [PATCH 02/45] add shadcn-card component

---
 .../components/ui/card/card-content.svelte    | 13 ++++++++++
 .../ui/card/card-description.svelte           | 13 ++++++++++
 .../lib/components/ui/card/card-footer.svelte | 13 ++++++++++
 .../lib/components/ui/card/card-header.svelte | 13 ++++++++++
 .../lib/components/ui/card/card-title.svelte  | 21 ++++++++++++++++
 app/src/lib/components/ui/card/card.svelte    | 16 +++++++++++++
 app/src/lib/components/ui/card/index.ts       | 24 +++++++++++++++++++
 7 files changed, 113 insertions(+)
 create mode 100644 app/src/lib/components/ui/card/card-content.svelte
 create mode 100644 app/src/lib/components/ui/card/card-description.svelte
 create mode 100644 app/src/lib/components/ui/card/card-footer.svelte
 create mode 100644 app/src/lib/components/ui/card/card-header.svelte
 create mode 100644 app/src/lib/components/ui/card/card-title.svelte
 create mode 100644 app/src/lib/components/ui/card/card.svelte
 create mode 100644 app/src/lib/components/ui/card/index.ts

diff --git a/app/src/lib/components/ui/card/card-content.svelte b/app/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..3e2d651
--- /dev/null
+++ b/app/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("p-6", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/app/src/lib/components/ui/card/card-description.svelte b/app/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..53aed74
--- /dev/null
+++ b/app/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.utils.js";
+
+	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<p class={cn("text-muted-foreground text-sm", className)} {...$$restProps}>
+	<slot />
+</p>
diff --git a/app/src/lib/components/ui/card/card-footer.svelte b/app/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..77f8356
--- /dev/null
+++ b/app/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/app/src/lib/components/ui/card/card-header.svelte b/app/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..2fcfbc0
--- /dev/null
+++ b/app/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/app/src/lib/components/ui/card/card-title.svelte b/app/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..68018e2
--- /dev/null
+++ b/app/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/utils/ui.utils.js";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		tag?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let tag: $$Props["tag"] = "h3";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={tag}
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/app/src/lib/components/ui/card/card.svelte b/app/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..db600ca
--- /dev/null
+++ b/app/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/app/src/lib/components/ui/card/index.ts b/app/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..bcc031d
--- /dev/null
+++ b/app/src/lib/components/ui/card/index.ts
@@ -0,0 +1,24 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+};
+
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

From dfbdc906685d0df5dec72c720f243f0f4e400c78 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 20 Nov 2024 14:42:59 +0000
Subject: [PATCH 03/45] wip: add form for custom user source

---
 .../lib/components/ChatListActionItems.svelte |  2 +-
 .../AddCustomSource.svelte                    |  1 -
 .../custom-source/AddCustomSourceForm.svelte  | 92 +++++++++++++++++++
 .../{ => custom-source}/CustomSources.svelte  |  2 +-
 .../RenderAudioSource.svelte                  | 34 +++++--
 5 files changed, 118 insertions(+), 13 deletions(-)
 rename app/src/lib/components/{ => custom-source}/AddCustomSource.svelte (90%)
 create mode 100644 app/src/lib/components/custom-source/AddCustomSourceForm.svelte
 rename app/src/lib/components/{ => custom-source}/CustomSources.svelte (93%)
 rename app/src/lib/components/{ => custom-source}/RenderAudioSource.svelte (70%)

diff --git a/app/src/lib/components/ChatListActionItems.svelte b/app/src/lib/components/ChatListActionItems.svelte
index d47d753..1b4fe4f 100644
--- a/app/src/lib/components/ChatListActionItems.svelte
+++ b/app/src/lib/components/ChatListActionItems.svelte
@@ -11,7 +11,7 @@
 	import { toast } from 'svelte-sonner';
 	import { Button } from './ui/button';
 	import { getSessionContext } from '@/stores/sessionContext.svelte';
-	import RenderAudioSource from '@/components/RenderAudioSource.svelte';
+	import RenderAudioSource from '@/components/custom-source/RenderAudioSource.svelte';
 	import { streamingResponse } from '@/utils/streamingResponse';
 	import { Share2Icon } from 'lucide-svelte';
 	import ShareModal from './share/ShareModal.svelte';
diff --git a/app/src/lib/components/AddCustomSource.svelte b/app/src/lib/components/custom-source/AddCustomSource.svelte
similarity index 90%
rename from app/src/lib/components/AddCustomSource.svelte
rename to app/src/lib/components/custom-source/AddCustomSource.svelte
index 8b4431b..943eafe 100644
--- a/app/src/lib/components/AddCustomSource.svelte
+++ b/app/src/lib/components/custom-source/AddCustomSource.svelte
@@ -1,5 +1,4 @@
 <script>
-	import { cn } from '@/utils/ui.utils';
 	export let show = false;
 </script>
 
diff --git a/app/src/lib/components/custom-source/AddCustomSourceForm.svelte b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
new file mode 100644
index 0000000..8d04f3d
--- /dev/null
+++ b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { Button } from '../ui/button';
+	import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';
+	import { FileIcon, LinkIcon, Upload, X } from 'lucide-svelte';
+	import cs from 'clsx';
+
+	let dragActive = false;
+
+	function handleDrag(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+
+		if (e.type === 'dragenter' || e.type === 'dragover') {
+			dragActive = true;
+		} else if (e.type === 'dragleave') {
+			dragActive = false;
+		}
+	}
+
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		dragActive = false;
+		// Handle file upload here
+	}
+</script>
+
+<div class="h-full bg-gray-950 pt-2">
+	<Card class="w-full bg-gray-900 border-none">
+		<CardHeader>
+			<CardTitle class="text-2xl font-normal">Custom source</CardTitle>
+			<CardDescription class="text-gray-400 text-lg">
+				Let's base Audiora's responses on the information that matters most to you. (E.g., marketing
+				plans, research notes, meeting transcripts, etc.)
+			</CardDescription>
+		</CardHeader>
+		<CardContent class="flex w-full flex-col gap-y-4">
+			<div
+				role="presentation"
+				aria-dropeffect="move"
+				on:dragenter={handleDrag}
+				on:dragleave={handleDrag}
+				on:dragover={handleDrag}
+				on:drop={handleDrop}
+				class={cs('border-2 border-dashed rounded-xl p-8 text-center', {
+					'border-blue-500 bg-blue-500/10': dragActive,
+					'border-gray-700': !dragActive
+				})}
+			>
+				<div class="flex flex-col items-center gap-4">
+					<div class="h-12 w-12 rounded-full bg-gray-800 flex items-center justify-center">
+						<Upload class="h-6 w-6" />
+					</div>
+					<div class="space-y-2">
+						<h3 class="text-xl">Upload sources</h3>
+						<p class="text-gray-400">
+							Drag & drop or{' '}
+							<button class="text-blue-400 hover:text-blue-300">choose file</button> to upload
+						</p>
+					</div>
+					<p class="text-sm text-gray-500">
+						Supported file types: PDF, .txt, Markdown, Audio (e.g. mp3)
+					</p>
+				</div>
+			</div>
+
+			<div class="grid md:grid-cols-2 gap-4">
+				<Button
+					variant="outline"
+					class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800"
+				>
+					<LinkIcon class="h-6 w-6" />
+					<span>Link</span>
+					<div class="flex gap-2 text-sm text-blue-400">
+						<span>Website</span>
+						<span>•</span>
+						<span>YouTube</span>
+					</div>
+				</Button>
+
+				<Button
+					variant="outline"
+					class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800"
+				>
+					<FileIcon class="h-6 w-6" />
+					<span>Paste text</span>
+					<span class="text-sm text-blue-400">Copied text</span>
+				</Button>
+			</div>
+		</CardContent>
+	</Card>
+</div>
diff --git a/app/src/lib/components/CustomSources.svelte b/app/src/lib/components/custom-source/CustomSources.svelte
similarity index 93%
rename from app/src/lib/components/CustomSources.svelte
rename to app/src/lib/components/custom-source/CustomSources.svelte
index dc427e3..ae07934 100644
--- a/app/src/lib/components/CustomSources.svelte
+++ b/app/src/lib/components/custom-source/CustomSources.svelte
@@ -1,5 +1,5 @@
 <script>
-	import * as Accordion from './ui/accordion';
+	import * as Accordion from '../ui/accordion';
 
 	const customSources = [
 		{
diff --git a/app/src/lib/components/RenderAudioSource.svelte b/app/src/lib/components/custom-source/RenderAudioSource.svelte
similarity index 70%
rename from app/src/lib/components/RenderAudioSource.svelte
rename to app/src/lib/components/custom-source/RenderAudioSource.svelte
index 1fceab9..10c55d9 100644
--- a/app/src/lib/components/RenderAudioSource.svelte
+++ b/app/src/lib/components/custom-source/RenderAudioSource.svelte
@@ -1,16 +1,22 @@
 <script lang="ts">
-	import * as Drawer from './ui/drawer';
-	import { Button } from './ui/button';
-	import * as Accordion from './ui/accordion';
+	import * as Drawer from '../ui/drawer';
+	import { Button } from '../ui/button';
+	import * as Accordion from '../ui/accordion';
 	import { parse } from 'marked';
 	import { PlusIcon } from 'lucide-svelte';
 	import CustomSources from './CustomSources.svelte';
-	import AddCustomSource from './AddCustomSource.svelte';
+	import AddCustomSourceForm from './AddCustomSourceForm.svelte';
 
 	export let audioSource: string;
 
 	let snapPoints = [0.75, 0.9];
 	let activeSnapPoint = snapPoints[0];
+
+	function accordionValueChanged(v: string | string[] | undefined) {
+		if (v === 'item-x') {
+			activeSnapPoint = snapPoints[snapPoints.length - 1];
+		}
+	}
 </script>
 
 <Drawer.Root {snapPoints} bind:activeSnapPoint direction="bottom" dismissible shouldScaleBackground>
@@ -26,17 +32,18 @@
 		<Drawer.Content class="border-neutral-800 pb-40 block h-full w-full rounded-t-md">
 			<Drawer.Title
 				class="text-2xl px-4 py-2 mx-auto md:max-w-3xl xl:max-w-4xl w-full gradient-gray-to-emerald font-medium"
-				>Audiocast Source
+			>
+				Audiocast Source
 			</Drawer.Title>
 
 			<div class="h-full overflow-hidden overflow-y-auto">
 				<div
 					class="mx-auto relative w-full h-[calc(100%+120px)] max-w-full px-4 py-2 md:max-w-3xl xl:max-w-4xl"
 				>
-					<Accordion.Root>
-						<Accordion.Item value="item-x" class="border-gray-800 mb-3 rounded-md border">
+					<Accordion.Root onValueChange={accordionValueChanged}>
+						<Accordion.Item value="item-x" class="mb-3 rounded-md border-none">
 							<Accordion.Trigger
-								class="no-underline hover:no-underline px-3 rounded-md border-dashed bg-gray-900/60 hover:bg-gray-900"
+								class="no-underline hover:no-underline px-3 border-gray-700 rounded-md border border-dashed bg-gray-900/60 hover:bg-gray-900"
 							>
 								<span class="capitalize font-medium text-gray-400"> Add custom source </span>
 								<span slot="icon" class="p-1 rounded-full border border-gray-500">
@@ -45,8 +52,8 @@
 									/>
 								</span>
 							</Accordion.Trigger>
-							<Accordion.Content>
-								<AddCustomSource show />
+							<Accordion.Content class="accordion-content">
+								<AddCustomSourceForm />
 							</Accordion.Content>
 						</Accordion.Item>
 
@@ -70,3 +77,10 @@
 		</Drawer.Content>
 	</Drawer.Portal>
 </Drawer.Root>
+
+<style>
+	:global(.accordion-content div) {
+		padding-bottom: 4px;
+		max-height: 100%;
+	}
+</style>

From 2b2f5f123828532cddfcd3133fa8525befd5c11d Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 20 Nov 2024 14:51:30 +0000
Subject: [PATCH 04/45] cleanup custom source componentn

---
 .../custom-source/AddCustomSource.svelte      | 106 +++++++++++++++---
 .../custom-source/AddCustomSourceForm.svelte  |  92 ---------------
 .../custom-source/RenderAudioSource.svelte    |   4 +-
 3 files changed, 91 insertions(+), 111 deletions(-)
 delete mode 100644 app/src/lib/components/custom-source/AddCustomSourceForm.svelte

diff --git a/app/src/lib/components/custom-source/AddCustomSource.svelte b/app/src/lib/components/custom-source/AddCustomSource.svelte
index 943eafe..fc59dab 100644
--- a/app/src/lib/components/custom-source/AddCustomSource.svelte
+++ b/app/src/lib/components/custom-source/AddCustomSource.svelte
@@ -1,22 +1,94 @@
-<script>
-	export let show = false;
-</script>
+<script lang="ts">
+	import { Button } from '../ui/button';
+	import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';
+	import { FileIcon, LinkIcon, Upload, X } from 'lucide-svelte';
+	import cs from 'clsx';
 
-<div class="container w-full flex justify-center overflow-hidden flex-col items-center" class:show>
-	<div>Add Custom Source</div>
-</div>
+	let dragActive = false;
 
-<style>
-	.container {
-		height: 0;
-		opacity: 0;
-		transition:
-			height 0.3s ease-in-out,
-			opacity 0.3s ease-in-out;
+	function handleDrag(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+
+		if (e.type === 'dragenter' || e.type === 'dragover') {
+			dragActive = true;
+		} else if (e.type === 'dragleave') {
+			dragActive = false;
+		}
 	}
 
-	.show {
-		opacity: 1;
-		height: 10rem;
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		dragActive = false;
+		// Handle file upload here
 	}
-</style>
+</script>
+
+<div class="h-full bg-gray-950 pt-2">
+	<Card class="w-full bg-gray-900 border-none">
+		<CardHeader>
+			<CardTitle class="text-xl font-normal">Custom source</CardTitle>
+			<CardDescription class="text-gray-400 text-base">
+				Let's base Audiora's responses on the information that matters most to you. (E.g., marketing
+				plans, research notes, meeting transcripts, etc.)
+			</CardDescription>
+		</CardHeader>
+		<CardContent class="flex w-full flex-col gap-y-4">
+			<div
+				role="presentation"
+				aria-dropeffect="move"
+				on:dragenter={handleDrag}
+				on:dragleave={handleDrag}
+				on:dragover={handleDrag}
+				on:drop={handleDrop}
+				class={cs('border-2 border-dashed rounded-xl p-8 text-center', {
+					'border-blue-500 bg-blue-500/10': dragActive,
+					'border-gray-700': !dragActive
+				})}
+			>
+				<div class="flex flex-col items-center gap-4">
+					<div class="h-12 w-12 rounded-full bg-gray-800 flex items-center justify-center">
+						<Upload class="h-6 w-6" />
+					</div>
+					<div class="space-y-2">
+						<h3 class="text-xl">Upload sources</h3>
+						<p class="text-gray-400">
+							Drag & drop or{' '}
+							<button class="text-blue-400 hover:text-blue-300">choose file</button> to upload
+						</p>
+					</div>
+					<p class="text-sm text-gray-500">
+						Supported file types: PDF, .txt, Markdown. (Max size: 1MB)
+					</p>
+				</div>
+			</div>
+
+			<div class="grid md:grid-cols-2 gap-4">
+				<Button
+					variant="outline"
+					class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800"
+				>
+					<div class="flex items-center gap-2 text-gray-300">
+						<LinkIcon class="h-4 w-4" />
+						<span>Link</span>
+					</div>
+					<div class="flex gap-2 text-sm text-blue-400">
+						<span>Website (including .pdf)</span>
+					</div>
+				</Button>
+
+				<Button
+					variant="outline"
+					class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800"
+				>
+					<div class="flex items-center gap-2 text-gray-300">
+						<FileIcon class="h-4 w-4" />
+						<span>Paste text</span>
+					</div>
+					<span class="text-sm text-blue-400">Copied text</span>
+				</Button>
+			</div>
+		</CardContent>
+	</Card>
+</div>
diff --git a/app/src/lib/components/custom-source/AddCustomSourceForm.svelte b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
deleted file mode 100644
index 8d04f3d..0000000
--- a/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
+++ /dev/null
@@ -1,92 +0,0 @@
-<script lang="ts">
-	import { Button } from '../ui/button';
-	import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';
-	import { FileIcon, LinkIcon, Upload, X } from 'lucide-svelte';
-	import cs from 'clsx';
-
-	let dragActive = false;
-
-	function handleDrag(e: DragEvent) {
-		e.preventDefault();
-		e.stopPropagation();
-
-		if (e.type === 'dragenter' || e.type === 'dragover') {
-			dragActive = true;
-		} else if (e.type === 'dragleave') {
-			dragActive = false;
-		}
-	}
-
-	function handleDrop(e: DragEvent) {
-		e.preventDefault();
-		e.stopPropagation();
-		dragActive = false;
-		// Handle file upload here
-	}
-</script>
-
-<div class="h-full bg-gray-950 pt-2">
-	<Card class="w-full bg-gray-900 border-none">
-		<CardHeader>
-			<CardTitle class="text-2xl font-normal">Custom source</CardTitle>
-			<CardDescription class="text-gray-400 text-lg">
-				Let's base Audiora's responses on the information that matters most to you. (E.g., marketing
-				plans, research notes, meeting transcripts, etc.)
-			</CardDescription>
-		</CardHeader>
-		<CardContent class="flex w-full flex-col gap-y-4">
-			<div
-				role="presentation"
-				aria-dropeffect="move"
-				on:dragenter={handleDrag}
-				on:dragleave={handleDrag}
-				on:dragover={handleDrag}
-				on:drop={handleDrop}
-				class={cs('border-2 border-dashed rounded-xl p-8 text-center', {
-					'border-blue-500 bg-blue-500/10': dragActive,
-					'border-gray-700': !dragActive
-				})}
-			>
-				<div class="flex flex-col items-center gap-4">
-					<div class="h-12 w-12 rounded-full bg-gray-800 flex items-center justify-center">
-						<Upload class="h-6 w-6" />
-					</div>
-					<div class="space-y-2">
-						<h3 class="text-xl">Upload sources</h3>
-						<p class="text-gray-400">
-							Drag & drop or{' '}
-							<button class="text-blue-400 hover:text-blue-300">choose file</button> to upload
-						</p>
-					</div>
-					<p class="text-sm text-gray-500">
-						Supported file types: PDF, .txt, Markdown, Audio (e.g. mp3)
-					</p>
-				</div>
-			</div>
-
-			<div class="grid md:grid-cols-2 gap-4">
-				<Button
-					variant="outline"
-					class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800"
-				>
-					<LinkIcon class="h-6 w-6" />
-					<span>Link</span>
-					<div class="flex gap-2 text-sm text-blue-400">
-						<span>Website</span>
-						<span>•</span>
-						<span>YouTube</span>
-					</div>
-				</Button>
-
-				<Button
-					variant="outline"
-					class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800"
-				>
-					<FileIcon class="h-6 w-6" />
-					<span>Paste text</span>
-					<span class="text-sm text-blue-400">Copied text</span>
-				</Button>
-			</div>
-		</CardContent>
-	</Card>
-</div>
diff --git a/app/src/lib/components/custom-source/RenderAudioSource.svelte b/app/src/lib/components/custom-source/RenderAudioSource.svelte
index 10c55d9..e6bcd0a 100644
--- a/app/src/lib/components/custom-source/RenderAudioSource.svelte
+++ b/app/src/lib/components/custom-source/RenderAudioSource.svelte
@@ -5,7 +5,7 @@
 	import { parse } from 'marked';
 	import { PlusIcon } from 'lucide-svelte';
 	import CustomSources from './CustomSources.svelte';
-	import AddCustomSourceForm from './AddCustomSourceForm.svelte';
+	import AddCustomSource from './AddCustomSource.svelte';
 
 	export let audioSource: string;
 
@@ -53,7 +53,7 @@
 								</span>
 							</Accordion.Trigger>
 							<Accordion.Content class="accordion-content">
-								<AddCustomSourceForm />
+								<AddCustomSource />
 							</Accordion.Content>
 						</Accordion.Item>
 

From f1b8ab29e488980002fe444e82a012052b7e23a6 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 20 Nov 2024 15:32:59 +0000
Subject: [PATCH 05/45] add shadcn input component

---
 app/src/lib/components/ui/input/index.ts     | 29 ++++++++++++++
 app/src/lib/components/ui/input/input.svelte | 42 ++++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 app/src/lib/components/ui/input/index.ts
 create mode 100644 app/src/lib/components/ui/input/input.svelte

diff --git a/app/src/lib/components/ui/input/index.ts b/app/src/lib/components/ui/input/index.ts
new file mode 100644
index 0000000..75e3bc2
--- /dev/null
+++ b/app/src/lib/components/ui/input/index.ts
@@ -0,0 +1,29 @@
+import Root from "./input.svelte";
+
+export type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	mousemove: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+	wheel: FormInputEvent<WheelEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input,
+};
diff --git a/app/src/lib/components/ui/input/input.svelte b/app/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000..446230b
--- /dev/null
+++ b/app/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { InputEvents } from "./index.js";
+	import { cn } from "$lib/utils/ui.utils.js";
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+
+	// Workaround for https://github.com/sveltejs/svelte/issues/9305
+	// Fixed in Svelte 5, but not backported to 4.x.
+	export let readonly: $$Props["readonly"] = undefined;
+</script>
+
+<input
+	class={cn(
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{readonly}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:focusin
+	on:focusout
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:mousemove
+	on:paste
+	on:input
+	on:wheel|passive
+	{...$$restProps}
+/>

From 1bf978ca6285972704edc6ccd302acfdf8d24a93 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 20 Nov 2024 15:33:43 +0000
Subject: [PATCH 06/45] add components to get custom source by website url and
 copy/paste

---
 .../custom-source/AddCustomSource.svelte      | 103 +++---------------
 .../custom-source/AddCustomSourceForm.svelte  | 100 +++++++++++++++++
 .../custom-source/CopyPasteSource.svelte      |  65 +++++++++++
 .../custom-source/WebsiteURLSource.svelte     |  62 +++++++++++
 4 files changed, 242 insertions(+), 88 deletions(-)
 create mode 100644 app/src/lib/components/custom-source/AddCustomSourceForm.svelte
 create mode 100644 app/src/lib/components/custom-source/CopyPasteSource.svelte
 create mode 100644 app/src/lib/components/custom-source/WebsiteURLSource.svelte

diff --git a/app/src/lib/components/custom-source/AddCustomSource.svelte b/app/src/lib/components/custom-source/AddCustomSource.svelte
index fc59dab..bf899d4 100644
--- a/app/src/lib/components/custom-source/AddCustomSource.svelte
+++ b/app/src/lib/components/custom-source/AddCustomSource.svelte
@@ -1,94 +1,21 @@
 <script lang="ts">
-	import { Button } from '../ui/button';
-	import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';
-	import { FileIcon, LinkIcon, Upload, X } from 'lucide-svelte';
-	import cs from 'clsx';
+	import AddCustomSourceForm from './AddCustomSourceForm.svelte';
+	import WebsiteURLSource from './WebsiteURLSource.svelte';
+	import CopyPasteSource from './CopyPasteSource.svelte';
 
-	let dragActive = false;
-
-	function handleDrag(e: DragEvent) {
-		e.preventDefault();
-		e.stopPropagation();
-
-		if (e.type === 'dragenter' || e.type === 'dragover') {
-			dragActive = true;
-		} else if (e.type === 'dragleave') {
-			dragActive = false;
-		}
-	}
-
-	function handleDrop(e: DragEvent) {
-		e.preventDefault();
-		e.stopPropagation();
-		dragActive = false;
-		// Handle file upload here
-	}
+	let showWebsiteURLForm = false;
+	let showCopyPasteForm = false;
 </script>
 
 <div class="h-full bg-gray-950 pt-2">
-	<Card class="w-full bg-gray-900 border-none">
-		<CardHeader>
-			<CardTitle class="text-xl font-normal">Custom source</CardTitle>
-			<CardDescription class="text-gray-400 text-base">
-				Let's base Audiora's responses on the information that matters most to you. (E.g., marketing
-				plans, research notes, meeting transcripts, etc.)
-			</CardDescription>
-		</CardHeader>
-		<CardContent class="flex w-full flex-col gap-y-4">
-			<div
-				role="presentation"
-				aria-dropeffect="move"
-				on:dragenter={handleDrag}
-				on:dragleave={handleDrag}
-				on:dragover={handleDrag}
-				on:drop={handleDrop}
-				class={cs('border-2 border-dashed rounded-xl p-8 text-center', {
-					'border-blue-500 bg-blue-500/10': dragActive,
-					'border-gray-700': !dragActive
-				})}
-			>
-				<div class="flex flex-col items-center gap-4">
-					<div class="h-12 w-12 rounded-full bg-gray-800 flex items-center justify-center">
-						<Upload class="h-6 w-6" />
-					</div>
-					<div class="space-y-2">
-						<h3 class="text-xl">Upload sources</h3>
-						<p class="text-gray-400">
-							Drag & drop or{' '}
-							<button class="text-blue-400 hover:text-blue-300">choose file</button> to upload
-						</p>
-					</div>
-					<p class="text-sm text-gray-500">
-						Supported file types: PDF, .txt, Markdown. (Max size: 1MB)
-					</p>
-				</div>
-			</div>
-
-			<div class="grid md:grid-cols-2 gap-4">
-				<Button
-					variant="outline"
-					class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800"
-				>
-					<div class="flex items-center gap-2 text-gray-300">
-						<LinkIcon class="h-4 w-4" />
-						<span>Link</span>
-					</div>
-					<div class="flex gap-2 text-sm text-blue-400">
-						<span>Website (including .pdf)</span>
-					</div>
-				</Button>
-
-				<Button
-					variant="outline"
-					class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800"
-				>
-					<div class="flex items-center gap-2 text-gray-300">
-						<FileIcon class="h-4 w-4" />
-						<span>Paste text</span>
-					</div>
-					<span class="text-sm text-blue-400">Copied text</span>
-				</Button>
-			</div>
-		</CardContent>
-	</Card>
+	{#if !showWebsiteURLForm && !showCopyPasteForm}
+		<AddCustomSourceForm
+			on:useWebsiteURL={() => (showWebsiteURLForm = true)}
+			on:useCopyPaste={() => (showCopyPasteForm = true)}
+		/>
+	{:else if showWebsiteURLForm}
+		<WebsiteURLSource on:closeWebsiteURL={() => (showWebsiteURLForm = false)} />
+	{:else if showCopyPasteForm}
+		<CopyPasteSource on:closeCopyPaste={() => (showCopyPasteForm = false)} />
+	{/if}
 </div>
diff --git a/app/src/lib/components/custom-source/AddCustomSourceForm.svelte b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
new file mode 100644
index 0000000..4d1e0db
--- /dev/null
+++ b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { Button } from '../ui/button';
+	import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';
+	import { FileIcon, LinkIcon, Upload, X } from 'lucide-svelte';
+	import cs from 'clsx';
+
+	const dispatch = createEventDispatcher<{
+		useWebsiteURL: void;
+		useCopyPaste: void;
+	}>();
+
+	let dragActive = false;
+
+	function handleDrag(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+
+		if (e.type === 'dragenter' || e.type === 'dragover') {
+			dragActive = true;
+		} else if (e.type === 'dragleave') {
+			dragActive = false;
+		}
+	}
+
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		dragActive = false;
+		// Handle file upload here
+	}
+</script>
+
+<Card class="w-full bg-gray-900 border-none">
+	<CardHeader>
+		<CardTitle class="text-xl font-normal">Custom source</CardTitle>
+		<CardDescription class="text-gray-400 text-base">
+			Let's base Audiora's responses on the information that matters most to you. (E.g., marketing
+			plans, research notes, meeting transcripts, etc.)
+		</CardDescription>
+	</CardHeader>
+	<CardContent class="flex w-full flex-col gap-y-4">
+		<div
+			role="presentation"
+			aria-dropeffect="move"
+			on:dragenter={handleDrag}
+			on:dragleave={handleDrag}
+			on:dragover={handleDrag}
+			on:drop={handleDrop}
+			class={cs('border-2 border-dashed rounded-xl p-8 text-center', {
+				'border-blue-500 bg-blue-500/10': dragActive,
+				'border-gray-700': !dragActive
+			})}
+		>
+			<div class="flex flex-col items-center gap-4">
+				<div class="h-12 w-12 rounded-full bg-gray-800 flex items-center justify-center">
+					<Upload class="h-6 w-6" />
+				</div>
+				<div class="space-y-2">
+					<h3 class="text-xl">Upload sources</h3>
+					<p class="text-gray-400">
+						Drag & drop or{' '}
+						<button class="text-blue-400 hover:text-blue-300">choose file</button> to upload
+					</p>
+				</div>
+				<p class="text-sm text-gray-500">
+					Supported file types: PDF, .txt, Markdown. (Max size: 1MB)
+				</p>
+			</div>
+		</div>
+
+		<div class="grid md:grid-cols-2 gap-4">
+			<Button
+				variant="outline"
+				class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800"
+				on:click={() => dispatch('useWebsiteURL')}
+			>
+				<div class="flex items-center gap-2 text-gray-300">
+					<LinkIcon class="h-4 w-4" />
+					<span>Website URL</span>
+				</div>
+				<div class="flex gap-2 text-sm text-blue-400">
+					<span>including .pdf</span>
+				</div>
+			</Button>
+
+			<Button
+				variant="outline"
+				class="h-auto p-4 flex flex-col items-center gap-2 bg-gray-800/50 border-gray-700 hover:bg-gray-800"
+				on:click={() => dispatch('useCopyPaste')}
+			>
+				<div class="flex items-center gap-2 text-gray-300">
+					<FileIcon class="h-4 w-4" />
+					<span>Paste text</span>
+				</div>
+				<span class="text-sm text-blue-400">Copied text</span>
+			</Button>
+		</div>
+	</CardContent>
+</Card>
diff --git a/app/src/lib/components/custom-source/CopyPasteSource.svelte b/app/src/lib/components/custom-source/CopyPasteSource.svelte
new file mode 100644
index 0000000..34fe5e6
--- /dev/null
+++ b/app/src/lib/components/custom-source/CopyPasteSource.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { ArrowLeft, X, MessageCircle } from 'lucide-svelte';
+	import { Button } from '../ui/button';
+	import { Card, CardContent, CardHeader } from '../ui/card';
+	import { Textarea } from '../ui/textarea';
+	import { Input } from '../ui/input';
+
+	const dispatch = createEventDispatcher<{ closeCopyPaste: void }>();
+</script>
+
+<Card class="max-w-2xl mx-auto bg-gray-900 border-gray-800">
+	<CardHeader>
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-2">
+				<Button
+					variant="ghost"
+					size="icon"
+					class="text-gray-400 hover:text-white"
+					on:click={() => dispatch('closeCopyPaste')}
+				>
+					<ArrowLeft class="h-5 w-5" />
+				</Button>
+				<h1 class="text-2xl font-normal">Paste copied text</h1>
+			</div>
+			<Button
+				variant="ghost"
+				size="icon"
+				class="text-gray-400 hover:text-white"
+				on:click={() => dispatch('closeCopyPaste')}
+			>
+				<X class="h-5 w-5" />
+			</Button>
+		</div>
+
+		<p class="text-gray-400">Paste your copied text below to upload as a source</p>
+	</CardHeader>
+
+	<CardContent class="flex flex-col gap-y-4">
+		<div class="flex flex-col gap-y-2">
+			<label for="url" class="text-blue-400">Paste Text here*</label>
+
+			<div class="relative">
+				<Textarea
+					id="text"
+					class="min-h-56 ring-0 focus:ring-0 focus-visible:ring-0 text-base bg-gray-900 border-blue-400/50 focus:border-blue-400 text-white resize-none"
+					placeholder=""
+				/>
+				<div class="absolute bottom-3 right-3 flex items-center gap-1">
+					<Button
+						variant="ghost"
+						size="icon"
+						class="h-8 w-8 rounded-full bg-gray-800 hover:bg-gray-700"
+					>
+						<MessageCircle class="h-4 w-4" />
+					</Button>
+				</div>
+			</div>
+
+			<div class="flex justify-end">
+				<Button class="bg-blue-500 text-base px-8 text-blue-100 hover:bg-blue-600">Insert</Button>
+			</div>
+		</div></CardContent
+	>
+</Card>
diff --git a/app/src/lib/components/custom-source/WebsiteURLSource.svelte b/app/src/lib/components/custom-source/WebsiteURLSource.svelte
new file mode 100644
index 0000000..5bbdcc6
--- /dev/null
+++ b/app/src/lib/components/custom-source/WebsiteURLSource.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { ArrowLeft, X } from 'lucide-svelte';
+	import { Button } from '../ui/button';
+	import { Card, CardContent, CardHeader } from '../ui/card';
+	import { Input } from '../ui/input';
+
+	const dispatch = createEventDispatcher<{ closeWebsiteURL: void }>();
+</script>
+
+<Card class="max-w-2xl mx-auto bg-gray-900 border-gray-800">
+	<CardHeader>
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-2">
+				<Button
+					variant="ghost"
+					size="icon"
+					class="text-gray-400 hover:text-white"
+					on:click={() => dispatch('closeWebsiteURL')}
+				>
+					<ArrowLeft class="h-5 w-5" />
+				</Button>
+				<h1 class="text-2xl font-normal">Website URL</h1>
+			</div>
+			<Button
+				variant="ghost"
+				size="icon"
+				class="text-gray-400 hover:text-white"
+				on:click={() => dispatch('closeWebsiteURL')}
+			>
+				<X class="h-5 w-5" />
+			</Button>
+		</div>
+
+		<p class="text-gray-400">Paste in a Web Link below to upload as a source</p>
+	</CardHeader>
+
+	<CardContent class="flex flex-col gap-y-4">
+		<div class="flex flex-col gap-y-2">
+			<label for="url" class="text-blue-400">Paste URL*</label>
+			<Input
+				id="url"
+				placeholder="https://"
+				class="bg-gray-900 focus:ring-0 focus-visible:ring-0 border-blue-400 text-white placeholder:text-gray-600"
+			/>
+		</div>
+
+		<div class="flex flex-col gap-y-2">
+			<div class="font-medium text-xl">Notes</div>
+			<ul class="list-disc list-inside space-y-1 text-gray-400">
+				<li>Only the visible text on the website will be imported at this moment</li>
+				<li>Content behind paywalls are not supported</li>
+				<li>Content requiring authentication are not supported</li>
+				<li>Supports .pdf url</li>
+			</ul>
+		</div>
+
+		<div class="flex justify-end">
+			<Button class="bg-blue-500 text-base px-8 text-blue-100 hover:bg-blue-600">Insert</Button>
+		</div>
+	</CardContent>
+</Card>

From 6c011fde970f67e71e0f3cc185fb7b39951cd34d Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 20 Nov 2024 18:47:27 +0000
Subject: [PATCH 07/45] add logic for extracting pdf and page content from url

---
 api/requirements.txt                 |  6 +-
 api/src/main.py                      |  8 +++
 api/src/utils/extract_url_content.py | 89 ++++++++++++++++++++++++++++
 3 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 api/src/utils/extract_url_content.py

diff --git a/api/requirements.txt b/api/requirements.txt
index a7490ae..f10ddd5 100644
--- a/api/requirements.txt
+++ b/api/requirements.txt
@@ -30,4 +30,8 @@ uvicorn
 uvloop
 redis[hiredis]
 
-async-web-search
\ No newline at end of file
+async-web-search
+
+lxml 
+beautifulsoup4 
+pypdf[crypto]
\ No newline at end of file
diff --git a/api/src/main.py b/api/src/main.py
index a5faa27..07232a2 100644
--- a/api/src/main.py
+++ b/api/src/main.py
@@ -13,6 +13,7 @@
     SessionChatItem,
     SessionChatRequest,
 )
+from src.utils.extract_url_content import ExtractURLContent, ExtractURLContentRequest, URLContent
 from src.utils.generate_audiocast import (
     GenerateAudioCastRequest,
     GenerateAudioCastResponse,
@@ -135,3 +136,10 @@ async def get_signed_url_endpoint(blobname: str):
 async def get_session_title_endpoint(request: GetSessionTitleModel, background_tasks: BackgroundTasks):
     source_content = await get_session_title(request, background_tasks)
     return source_content
+
+
+@app.post("/extract-url-content", response_model=URLContent)
+async def extract_url_content_endpoint(request: ExtractURLContentRequest):
+    extractor = ExtractURLContent()
+    page_content = await extractor._extract(request.url)
+    return page_content
diff --git a/api/src/utils/extract_url_content.py b/api/src/utils/extract_url_content.py
new file mode 100644
index 0000000..260aa5e
--- /dev/null
+++ b/api/src/utils/extract_url_content.py
@@ -0,0 +1,89 @@
+import re
+from io import BytesIO
+from urllib.parse import urlparse
+
+import httpx
+from bs4 import BeautifulSoup, Tag
+from pydantic import BaseModel
+from pypdf import PdfReader
+
+from src.utils.decorators import process_time
+
+
+class ExtractURLContentRequest(BaseModel):
+    url: str
+
+
+class URLContent(BaseModel):
+    content: str
+    content_type: str
+    metadata: dict = {}
+
+    def __str__(self):
+        return f"Content: {self.content}"
+
+
+class ExtractURLContent:
+    def __init__(self, timeout: int = 10):
+        self.timeout = timeout
+        self.client = httpx.AsyncClient(timeout=self.timeout)
+
+    async def __aenter__(self):
+        return self
+
+    async def __exit__(self):
+        await self.client.aclose()
+
+    async def __aexit__(self):
+        return await self.__exit__()
+
+    def _clean_text(self, text: str) -> str:
+        """replace all whitespace sequences with a single space"""
+        return re.compile(r"\s+").sub(" ", text).strip()
+
+    async def _extract_pdf(self, content: bytes) -> tuple[str, dict]:
+        pdf_reader = PdfReader(BytesIO(content))
+        text_content = " ".join(page.extract_text() for page in pdf_reader.pages)
+        metadata = {"pages": len(pdf_reader.pages), "info": pdf_reader.metadata or {}}
+
+        return self._clean_text(text_content), metadata
+
+    async def _extract_html(self, content: bytes) -> tuple[str, dict]:
+        soup = BeautifulSoup(content, "lxml")
+        for element in soup(["script", "style", "nav", "footer"]):
+            element.decompose()
+
+        text_content = soup.get_text(separator=" ", strip=True)
+        descr_tag = soup.find("meta", {"name": "description"})
+        metadata = {
+            "title": soup.title.string if soup.title else "",
+            "description": descr_tag.get("content") if isinstance(descr_tag, Tag) else "",
+        }
+
+        return self._clean_text(text_content), metadata
+
+    @process_time()
+    async def _extract(self, url: str) -> URLContent:
+        parsed_url = urlparse(url)
+        if not parsed_url.scheme or not parsed_url.netloc:
+            raise ValueError("Invalid URL provided")
+
+        try:
+            response = await self.client.get(url)
+            response.raise_for_status()
+            content_type = response.headers.get("content-type", "").lower()
+
+            if url.lower().endswith(".pdf") or "application/pdf" in content_type:
+                text, metadata = await self._extract_pdf(response.content)
+                content_type = "application/pdf"
+            else:
+                text, metadata = await self._extract_html(response.content)
+                content_type = "text/html"
+
+            return URLContent(
+                content=text,
+                content_type=content_type,
+                metadata=metadata,
+            )
+        except Exception as e:
+            raise Exception(f"Failed to extract content: {str(e)}")

From 32586d86abae77c2e3ba9b5f9934766e41a4c1a8 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 20 Nov 2024 19:06:36 +0000
Subject: [PATCH 08/45] wip: add component for rendering pdf content

---
 .../custom-source/CustomSources.svelte        | 49 ++++++++++++++++---
 .../custom-source/RenderPDFContent.svelte     | 10 ++++
 2 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 app/src/lib/components/custom-source/RenderPDFContent.svelte

diff --git a/app/src/lib/components/custom-source/CustomSources.svelte b/app/src/lib/components/custom-source/CustomSources.svelte
index ae07934..309c588 100644
--- a/app/src/lib/components/custom-source/CustomSources.svelte
+++ b/app/src/lib/components/custom-source/CustomSources.svelte
@@ -1,28 +1,63 @@
-<script>
-	import * as Accordion from '../ui/accordion';
+<script lang="ts" context="module">
+	export type LinkSources = {
+		type: 'link';
+		url: string;
+	};
+
+	export type CopyPasteSources = {
+		type: 'copy/paste';
+	};
 
-	const customSources = [
+	export type CustomSources = (LinkSources | CopyPasteSources) & {
+		id: string;
+		title: string;
+		content_type: 'text/plain' | 'text/html' | 'application/pdf';
+		content: string;
+	};
+
+	const customSources: CustomSources[] = [
 		{
 			id: '1',
 			type: 'copy/paste',
+			content_type: 'text/html',
 			title: 'Custom Source 1',
 			content: 'AI-generated Source content goes here'
 		},
 		{
 			id: '2',
-			type: 'webpage',
 			title: 'Custom Source 2',
-			content: 'Custom Souce content goes here'
+			content_type: 'text/plain',
+			type: 'link',
+			content: 'Custom Souce content goes here',
+			url: 'https://www.google.com'
+		},
+		{
+			id: '3',
+			type: 'link',
+			content_type: 'application/pdf',
+			title: 'Custom Source 3',
+			content: 'Custom Souce content goes here',
+			url: 'https://www.wikipedia.org'
 		}
 	];
 </script>
 
-{#each customSources as source (source.id)}
+<script lang="ts">
+	import * as Accordion from '../ui/accordion';
+	import RenderPdfContent from './RenderPDFContent.svelte';
+	export let sources = customSources;
+</script>
+
+{#each sources as source (source.id)}
 	<Accordion.Item value={source.id} class="border-gray-800">
 		<Accordion.Trigger>{source.title}</Accordion.Trigger>
 		<Accordion.Content>
 			<div class="flex w-full flex-col gap-y-3 p-2 bg-gray-900/70 text-gray-300">
-				{source.content}
+				{#if source.content_type === 'application/pdf'}
+					<RenderPdfContent content={source.content} />
+				{:else}
+					{source.content}
+				{/if}
 			</div>
 		</Accordion.Content>
 	</Accordion.Item>
diff --git a/app/src/lib/components/custom-source/RenderPDFContent.svelte b/app/src/lib/components/custom-source/RenderPDFContent.svelte
new file mode 100644
index 0000000..172b25f
--- /dev/null
+++ b/app/src/lib/components/custom-source/RenderPDFContent.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let content: string;
+	$: paragraphs = content.split('\n').filter((p) => p.trim());
+</script>
+
+<article class="prose max-w-full flex flex-col gap-y-3">
+	{#each paragraphs as paragraph, idx (idx)}
+		{paragraph}
+	{/each}
+</article>

From cbff60aad86ae80654d36c7fad17fdadb630dbf8 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 20 Nov 2024 19:23:38 +0000
Subject: [PATCH 09/45] define id field on URLContent

---
 api/src/utils/extract_url_content.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/api/src/utils/extract_url_content.py b/api/src/utils/extract_url_content.py
index 260aa5e..02c97b4 100644
--- a/api/src/utils/extract_url_content.py
+++ b/api/src/utils/extract_url_content.py
@@ -1,6 +1,7 @@
 import re
 from io import BytesIO
 from urllib.parse import urlparse
+from uuid import uuid4
 
 import httpx
 from bs4 import BeautifulSoup, Tag
@@ -15,6 +16,7 @@ class ExtractURLContentRequest(BaseModel):
 
 
 class URLContent(BaseModel):
+    id: str
     content: str
     content_type: str
     metadata: dict = {}
@@ -81,6 +83,7 @@ async def _extract(self, url: str) -> URLContent:
                 content_type = "text/html"
 
             return URLContent(
+                id=str(uuid4()),
                 content=text,
                 content_type=content_type,
                 metadata=metadata,

From d961077615a1064b350a3183c736b18145ced99a Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 20 Nov 2024 20:18:08 +0000
Subject: [PATCH 10/45] fetch custom sources from specified links

- supports .pdf and any public webpage
---
 api/src/main.py                               |   2 +-
 .../custom-source/AddCustomSource.svelte      |  15 ++-
 .../custom-source/CustomSources.svelte        |  70 ++++--------
 .../FetchingSourceSkeleton.svelte             |   7 ++
 .../custom-source/RenderAudioSource.svelte    | 103 ++++++++++++------
 .../custom-source/WebsiteURLSource.svelte     |  18 ++-
 app/src/lib/stores/customSources.svelte.ts    |  35 ++++++
 7 files changed, 164 insertions(+), 86 deletions(-)
 create mode 100644 app/src/lib/components/custom-source/FetchingSourceSkeleton.svelte
 create mode 100644 app/src/lib/stores/customSources.svelte.ts

diff --git a/api/src/main.py b/api/src/main.py
index 07232a2..6e58fc9 100644
--- a/api/src/main.py
+++ b/api/src/main.py
@@ -142,4 +142,4 @@ async def get_session_title_endpoint(request: GetSessionTitleModel, background_t
 async def extract_url_content_endpoint(request: ExtractURLContentRequest):
     extractor = ExtractURLContent()
     page_content = await extractor._extract(request.url)
-    return page_content
+    return page_content.model_dump()
diff --git a/app/src/lib/components/custom-source/AddCustomSource.svelte b/app/src/lib/components/custom-source/AddCustomSource.svelte
index bf899d4..bda1fa7 100644
--- a/app/src/lib/components/custom-source/AddCustomSource.svelte
+++ b/app/src/lib/components/custom-source/AddCustomSource.svelte
@@ -2,20 +2,25 @@
 	import AddCustomSourceForm from './AddCustomSourceForm.svelte';
 	import WebsiteURLSource from './WebsiteURLSource.svelte';
 	import CopyPasteSource from './CopyPasteSource.svelte';
+	import FetchingSourceSkeleton from './FetchingSourceSkeleton.svelte';
+
+	export let fetchingSource = false;
 
 	let showWebsiteURLForm = false;
 	let showCopyPasteForm = false;
 </script>
 
 <div class="h-full bg-gray-950 pt-2">
-	{#if !showWebsiteURLForm && !showCopyPasteForm}
+	{#if fetchingSource}
+		<FetchingSourceSkeleton />
+	{:else if showWebsiteURLForm}
+		<WebsiteURLSource on:closeWebsiteURL={() => (showWebsiteURLForm = false)} on:submitURL />
+	{:else if showCopyPasteForm}
+		<CopyPasteSource on:closeCopyPaste={() => (showCopyPasteForm = false)} />
+	{:else}
 		<AddCustomSourceForm
 			on:useWebsiteURL={() => (showWebsiteURLForm = true)}
 			on:useCopyPaste={() => (showCopyPasteForm = true)}
 		/>
-	{:else if showWebsiteURLForm}
-		<WebsiteURLSource on:closeWebsiteURL={() => (showWebsiteURLForm = false)} />
-	{:else if showCopyPasteForm}
-		<CopyPasteSource on:closeCopyPaste={() => (showCopyPasteForm = false)} />
 	{/if}
 </div>
diff --git a/app/src/lib/components/custom-source/CustomSources.svelte b/app/src/lib/components/custom-source/CustomSources.svelte
index 309c588..4fd60e9 100644
--- a/app/src/lib/components/custom-source/CustomSources.svelte
+++ b/app/src/lib/components/custom-source/CustomSources.svelte
@@ -1,56 +1,32 @@
-<script lang="ts" context="module">
-	export type LinkSources = {
-		type: 'link';
-		url: string;
-	};
-
-	export type CopyPasteSources = {
-		type: 'copy/paste';
-	};
-
-	export type CustomSources = (LinkSources | CopyPasteSources) & {
-		id: string;
-		title: string;
-		content_type: 'text/plain' | 'text/html' | 'application/pdf';
-		content: string;
-	};
-
-	const customSources: CustomSources[] = [
-		{
-			id: '1',
-			type: 'copy/paste',
-			content_type: 'text/html',
-			title: 'Custom Source 1',
-			content: 'AI-generated Source content goes here'
-		},
-		{
-			id: '2',
-			title: 'Custom Source 2',
-			content_type: 'text/plain',
-			type: 'link',
-			content: 'Custom Souce content goes here',
-			url: 'https://www.google.com'
-		},
-		{
-			id: '3',
-			type: 'link',
-			content_type: 'application/pdf',
-			title: 'Custom Source 3',
-			content: 'Custom Souce content goes here',
-			url: 'https://www.wikipedia.org'
-		}
-	];
-</script>
-
 <script lang="ts">
+	import { getCustomSources } from '@/stores/customSources.svelte';
 	import * as Accordion from '../ui/accordion';
 	import RenderPdfContent from './RenderPDFContent.svelte';
-	export let sources = customSources;
+
+	const { sources$ } = getCustomSources();
+
+	$: sources = $sources$;
+
+	function truncate(str: string, n: number) {
+		return str.length > n ? str.substr(0, n - 1) + '...' : str;
+	}
 </script>
 
-{#each sources as source (source.id)}
+{#each sources as source, idx (source.id)}
 	<Accordion.Item value={source.id} class="border-gray-800">
-		<Accordion.Trigger>{source.title}</Accordion.Trigger>
+		<Accordion.Trigger>
+			<div class="inline-flex break-words text-wrap">
+				<span class="shrink-0 inline-flex">
+					Custom Source {idx + 1}
+				</span>
+				{#if source.type === 'link'}
+					{':'}
+					<span class="text-gray-400 text-start ml-1">
+						{truncate(source.url, 45)}
+					</span>
+				{/if}
+			</div>
+		</Accordion.Trigger>
 		<Accordion.Content>
 			<div class="flex w-full flex-col gap-y-3 p-2 bg-gray-900/70 text-gray-300">
 				{#if source.content_type === 'application/pdf'}
diff --git a/app/src/lib/components/custom-source/FetchingSourceSkeleton.svelte b/app/src/lib/components/custom-source/FetchingSourceSkeleton.svelte
new file mode 100644
index 0000000..42caf5f
--- /dev/null
+++ b/app/src/lib/components/custom-source/FetchingSourceSkeleton.svelte
@@ -0,0 +1,7 @@
+<div class="flex flex-col gap-y-2 w-full">
+	<div class="h-2 w-full bg-gray-800 rounded animate-pulse" />
+	<div class="h-2 w-full bg-gray-800 rounded animate-pulse" />
+	<div class="h-2 w-full bg-gray-800 rounded animate-pulse" />
+	<div class="h-2 w-full bg-gray-800 rounded animate-pulse" />
+	<div class="h-2 w-3/5 bg-gray-800 rounded animate-pulse" />
+</div>
diff --git a/app/src/lib/components/custom-source/RenderAudioSource.svelte b/app/src/lib/components/custom-source/RenderAudioSource.svelte
index e6bcd0a..d1ea5e0 100644
--- a/app/src/lib/components/custom-source/RenderAudioSource.svelte
+++ b/app/src/lib/components/custom-source/RenderAudioSource.svelte
@@ -6,17 +6,53 @@
 	import { PlusIcon } from 'lucide-svelte';
 	import CustomSources from './CustomSources.svelte';
 	import AddCustomSource from './AddCustomSource.svelte';
+	import { getCustomSources, type Sources } from '@/stores/customSources.svelte';
+	import { env } from '@env';
 
 	export let audioSource: string;
 
+	const { addSource } = getCustomSources();
+
 	let snapPoints = [0.75, 0.9];
 	let activeSnapPoint = snapPoints[0];
+	let fetchingSource = false;
+
+	let accordionResetKey = {};
 
 	function accordionValueChanged(v: string | string[] | undefined) {
 		if (v === 'item-x') {
 			activeSnapPoint = snapPoints[snapPoints.length - 1];
 		}
 	}
+
+	async function getURLContent(url: string) {
+		if (fetchingSource) return;
+
+		fetchingSource = true;
+		const result = await fetchURLContent(url).catch(console.error);
+		fetchingSource = false;
+
+		accordionResetKey = {};
+		if (result) addSource(result);
+	}
+
+	async function fetchURLContent(url: string): Promise<Sources> {
+		return fetch(`${env.API_BASE_URL}/extract-url-content`, {
+			method: 'POST',
+			body: JSON.stringify({ url }),
+			headers: { 'Content-Type': 'application/json' }
+		})
+			.then<{
+				id: string;
+				content: string;
+				content_type: Sources['content_type'];
+				metadata: Record<string, any>;
+			}>((res) => {
+				if (res.ok) return res.json();
+				throw new Error('Failed to fetch');
+			})
+			.then((data) => ({ ...data, type: 'link', url }));
+	}
 </script>
 
 <Drawer.Root {snapPoints} bind:activeSnapPoint direction="bottom" dismissible shouldScaleBackground>
@@ -40,38 +76,43 @@
 				<div
 					class="mx-auto relative w-full h-[calc(100%+120px)] max-w-full px-4 py-2 md:max-w-3xl xl:max-w-4xl"
 				>
-					<Accordion.Root onValueChange={accordionValueChanged}>
-						<Accordion.Item value="item-x" class="mb-3 rounded-md border-none">
-							<Accordion.Trigger
-								class="no-underline hover:no-underline px-3 border-gray-700 rounded-md border border-dashed bg-gray-900/60 hover:bg-gray-900"
-							>
-								<span class="capitalize font-medium text-gray-400"> Add custom source </span>
-								<span slot="icon" class="p-1 rounded-full border border-gray-500">
-									<PlusIcon
-										class="inline w-6 h-6 text-gray-400 hover:text-gray-200 transition-all"
-									/>
-								</span>
-							</Accordion.Trigger>
-							<Accordion.Content class="accordion-content">
-								<AddCustomSource />
-							</Accordion.Content>
-						</Accordion.Item>
-
-						<Accordion.Item value="item-0" class="border-gray-800">
-							<Accordion.Trigger>AI-generated Source</Accordion.Trigger>
-							<Accordion.Content>
-								<article
-									class="prose text-gray-300 flex p-2 flex-col gap-y-3 bg-gray-900/70 text-gray-30"
+					{#key accordionResetKey}
+						<Accordion.Root onValueChange={accordionValueChanged}>
+							<Accordion.Item value="item-x" class="mb-3 rounded-md border-none">
+								<Accordion.Trigger
+									class="no-underline hover:no-underline px-3 border-gray-700 rounded-md border border-dashed bg-gray-900/60 hover:bg-gray-900"
 								>
-									{#await parse(audioSource) then parsedContent}
-										{@html parsedContent}
-									{/await}
-								</article>
-							</Accordion.Content>
-						</Accordion.Item>
-
-						<CustomSources />
-					</Accordion.Root>
+									<span class="capitalize font-medium text-gray-400"> Add custom source </span>
+									<span slot="icon" class="p-1 rounded-full border border-gray-500">
+										<PlusIcon
+											class="inline w-6 h-6 text-gray-400 hover:text-gray-200 transition-all"
+										/>
+									</span>
+								</Accordion.Trigger>
+								<Accordion.Content class="accordion-content">
+									<AddCustomSource
+										{fetchingSource}
+										on:submitURL={({ detail }) => getURLContent(detail.url)}
+									/>
+								</Accordion.Content>
+							</Accordion.Item>
+
+							<Accordion.Item value="item-0" class="border-gray-800">
+								<Accordion.Trigger>AI-generated Source</Accordion.Trigger>
+								<Accordion.Content>
+									<article
+										class="prose text-gray-300 flex p-2 flex-col gap-y-3 bg-gray-900/70 text-gray-30"
+									>
+										{#await parse(audioSource) then parsedContent}
+											{@html parsedContent}
+										{/await}
+									</article>
+								</Accordion.Content>
+							</Accordion.Item>
+
+							<CustomSources />
+						</Accordion.Root>
+					{/key}
 				</div>
 			</div>
 		</Drawer.Content>
diff --git a/app/src/lib/components/custom-source/WebsiteURLSource.svelte b/app/src/lib/components/custom-source/WebsiteURLSource.svelte
index 5bbdcc6..e9db006 100644
--- a/app/src/lib/components/custom-source/WebsiteURLSource.svelte
+++ b/app/src/lib/components/custom-source/WebsiteURLSource.svelte
@@ -5,7 +5,8 @@
 	import { Card, CardContent, CardHeader } from '../ui/card';
 	import { Input } from '../ui/input';
 
-	const dispatch = createEventDispatcher<{ closeWebsiteURL: void }>();
+	const dispatch = createEventDispatcher<{ closeWebsiteURL: void; submitURL: { url: string } }>();
+	let url = '';
 </script>
 
 <Card class="max-w-2xl mx-auto bg-gray-900 border-gray-800">
@@ -40,7 +41,9 @@
 			<label for="url" class="text-blue-400">Paste URL*</label>
 			<Input
 				id="url"
+				bind:value={url}
 				placeholder="https://"
+				autocomplete="off"
 				class="bg-gray-900 focus:ring-0 focus-visible:ring-0 border-blue-400 text-white placeholder:text-gray-600"
 			/>
 		</div>
@@ -56,7 +59,18 @@
 		</div>
 
 		<div class="flex justify-end">
-			<Button class="bg-blue-500 text-base px-8 text-blue-100 hover:bg-blue-600">Insert</Button>
+			<Button
+				on:click={() => {
+					dispatch('submitURL', { url });
+					requestAnimationFrame(() => {
+						dispatch('closeWebsiteURL');
+					});
+				}}
+				disabled={!url}
+				class="bg-blue-500 text-base px-8 text-blue-100 hover:bg-blue-600"
+			>
+				Insert
+			</Button>
 		</div>
 	</CardContent>
 </Card>
diff --git a/app/src/lib/stores/customSources.svelte.ts b/app/src/lib/stores/customSources.svelte.ts
new file mode 100644
index 0000000..cf6f9ef
--- /dev/null
+++ b/app/src/lib/stores/customSources.svelte.ts
@@ -0,0 +1,35 @@
+import { setContext, getContext } from 'svelte';
+import { writable } from 'svelte/store';
+
+export type LinkSources = {
+	type: 'link';
+	url: string;
+};
+
+export type CopyPasteSources = {
+	type: 'copy/paste';
+};
+
+export type Sources = (LinkSources | CopyPasteSources) & {
+	id: string;
+	content_type: 'text/plain' | 'text/html' | 'application/pdf';
+	content: string;
+};
+
+const CONTEXT_KEY = {};
+
+export const setCustomSources = () => {
+	const sources$ = writable<Sources[]>([]);
+
+	return setContext(CONTEXT_KEY, {
+		sources$,
+		addSource: (source: Sources) => {
+			sources$.update((sources) => [...sources, source]);
+			return sources$;
+		}
+	});
+};
+
+export type CustomSourcesType = ReturnType<typeof setCustomSources>;
+export const getCustomSources = () =>
+	getContext<CustomSourcesType>(CONTEXT_KEY) || setCustomSources();

From 4dce53e6acec3c2707cc160284b41d3b1d8a37d0 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 21 Nov 2024 15:59:44 +0000
Subject: [PATCH 11/45] retain formatting in web and pdf content; improve page
 content rendering

---
 api/src/utils/extract_url_content.py          | 19 +++++++++++-------
 .../custom-source/CustomSources.svelte        | 14 ++++++-------
 .../custom-source/RenderAudioSource.svelte    |  4 ++--
 .../custom-source/RenderPDFContent.svelte     | 10 ----------
 .../custom-source/RenderWebContent.svelte     | 20 +++++++++++++++++++
 5 files changed, 40 insertions(+), 27 deletions(-)
 delete mode 100644 app/src/lib/components/custom-source/RenderPDFContent.svelte
 create mode 100644 app/src/lib/components/custom-source/RenderWebContent.svelte

diff --git a/api/src/utils/extract_url_content.py b/api/src/utils/extract_url_content.py
index 02c97b4..087e3cc 100644
--- a/api/src/utils/extract_url_content.py
+++ b/api/src/utils/extract_url_content.py
@@ -1,4 +1,3 @@
-import re
 from io import BytesIO
 from urllib.parse import urlparse
 from uuid import uuid4
@@ -40,22 +39,28 @@ async def __aexit__(self):
         return await self.__exit__()
 
     def _clean_text(self, text: str) -> str:
-        """replace all whitespace sequences with a single space"""
-        return re.compile(r"\s+").sub(" ", text).strip()
+        """TODO: write text cleaning logic"""
+        return text.strip()
 
     async def _extract_pdf(self, content: bytes) -> tuple[str, dict]:
         pdf_reader = PdfReader(BytesIO(content))
-        text_content = " ".join(page.extract_text() for page in pdf_reader.pages)
-        metadata = {"pages": len(pdf_reader.pages), "info": pdf_reader.metadata or {}}
 
-        return self._clean_text(text_content), metadata
+        pages: list[str] = []
+        for page in pdf_reader.pages:
+            text = page.extract_text()
+            # Split into paragraphs and clean
+            paragraphs = [p.strip() for p in text.split("\n\n") if p.strip()]
+            pages.append("\n\n".join(paragraphs))
+
+        metadata = {**(pdf_reader.metadata or {}), "pages": pdf_reader.get_num_pages()}
+        return self._clean_text("\n\n".join(pages)), metadata
 
     async def _extract_html(self, content: bytes) -> tuple[str, dict]:
         soup = BeautifulSoup(content, "lxml")
         for element in soup(["script", "style", "nav", "footer"]):
             element.decompose()
 
-        text_content = soup.get_text(separator=" ", strip=True)
+        text_content = soup.get_text(separator="\n\n", strip=True)
         descr_tag = soup.find("meta", {"name": "description"})
         metadata = {
             "title": soup.title.string if soup.title else "",
diff --git a/app/src/lib/components/custom-source/CustomSources.svelte b/app/src/lib/components/custom-source/CustomSources.svelte
index 4fd60e9..ad908b4 100644
--- a/app/src/lib/components/custom-source/CustomSources.svelte
+++ b/app/src/lib/components/custom-source/CustomSources.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { getCustomSources } from '@/stores/customSources.svelte';
 	import * as Accordion from '../ui/accordion';
-	import RenderPdfContent from './RenderPDFContent.svelte';
+	import RenderWebContent from './RenderWebContent.svelte';
 
 	const { sources$ } = getCustomSources();
 
 	$: sources = $sources$;
 
 	function truncate(str: string, n: number) {
-		return str.length > n ? str.substr(0, n - 1) + '...' : str;
+		return str.length > n ? str.substring(0, n - 1) + '...' : str;
 	}
 </script>
 
@@ -28,12 +28,10 @@
 			</div>
 		</Accordion.Trigger>
 		<Accordion.Content>
-			<div class="flex w-full flex-col gap-y-3 p-2 bg-gray-900/70 text-gray-300">
-				{#if source.content_type === 'application/pdf'}
-					<RenderPdfContent content={source.content} />
-				{:else}
-					{source.content}
-				{/if}
+			<div
+				class="flex w-full max-h-96 overflow-y-auto flex-col gap-y-3 p-2 bg-gray-900/70 text-gray-300"
+			>
+				<RenderWebContent content={source.content} />
 			</div>
 		</Accordion.Content>
 	</Accordion.Item>
diff --git a/app/src/lib/components/custom-source/RenderAudioSource.svelte b/app/src/lib/components/custom-source/RenderAudioSource.svelte
index d1ea5e0..5a523b2 100644
--- a/app/src/lib/components/custom-source/RenderAudioSource.svelte
+++ b/app/src/lib/components/custom-source/RenderAudioSource.svelte
@@ -13,7 +13,7 @@
 
 	const { addSource } = getCustomSources();
 
-	let snapPoints = [0.75, 0.9];
+	let snapPoints = [0.75, 0.95];
 	let activeSnapPoint = snapPoints[0];
 	let fetchingSource = false;
 
@@ -101,7 +101,7 @@
 								<Accordion.Trigger>AI-generated Source</Accordion.Trigger>
 								<Accordion.Content>
 									<article
-										class="prose text-gray-300 flex p-2 flex-col gap-y-3 bg-gray-900/70 text-gray-30"
+										class="prose max-h-96 overflow-y-auto text-gray-300 flex p-2 flex-col gap-y-3 bg-gray-900/70 text-gray-30"
 									>
 										{#await parse(audioSource) then parsedContent}
 											{@html parsedContent}
diff --git a/app/src/lib/components/custom-source/RenderPDFContent.svelte b/app/src/lib/components/custom-source/RenderPDFContent.svelte
deleted file mode 100644
index 172b25f..0000000
--- a/app/src/lib/components/custom-source/RenderPDFContent.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-	export let content: string;
-	$: paragraphs = content.split('\n').filter((p) => p.trim());
-</script>
-
-<article class="prose max-w-full flex flex-col gap-y-3">
-	{#each paragraphs as paragraph, idx (idx)}
-		{paragraph}
-	{/each}
-</article>
diff --git a/app/src/lib/components/custom-source/RenderWebContent.svelte b/app/src/lib/components/custom-source/RenderWebContent.svelte
new file mode 100644
index 0000000..7b88fe6
--- /dev/null
+++ b/app/src/lib/components/custom-source/RenderWebContent.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let content: string;
+	$: paragraphs = content.split('\n\n').filter((p) => p.trim());
+</script>
+
+<section class="w-full flex flex-col gap-y-3">
+	{#each paragraphs as paragraph, idx (idx)}
+		<article class="pb-2 border-b leading-relaxed border-b-gray-500/10">
+			{paragraph}
+		</article>
+	{/each}
+</section>
+
+<style>
+	article :global(code) {
+		background-color: rgba(62, 3, 3, 0.1);
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+	}
+</style>

From 2b93957a2a05096b3b8468796ce1f17380757507 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 21 Nov 2024 16:09:33 +0000
Subject: [PATCH 12/45] cleanup

---
 .../custom-source/RenderAudioSource.svelte           |  7 +++++--
 .../components/custom-source/RenderWebContent.svelte | 12 +++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/src/lib/components/custom-source/RenderAudioSource.svelte b/app/src/lib/components/custom-source/RenderAudioSource.svelte
index 5a523b2..687035a 100644
--- a/app/src/lib/components/custom-source/RenderAudioSource.svelte
+++ b/app/src/lib/components/custom-source/RenderAudioSource.svelte
@@ -101,7 +101,7 @@
 								<Accordion.Trigger>AI-generated Source</Accordion.Trigger>
 								<Accordion.Content>
 									<article
-										class="prose max-h-96 overflow-y-auto text-gray-300 flex p-2 flex-col gap-y-3 bg-gray-900/70 text-gray-30"
+										class="prose leading-relaxed max-h-96 overflow-y-auto text-gray-300 flex p-2 flex-col gap-y-3 bg-gray-900/70 text-gray-30"
 									>
 										{#await parse(audioSource) then parsedContent}
 											{@html parsedContent}
@@ -119,9 +119,12 @@
 	</Drawer.Portal>
 </Drawer.Root>
 
-<style>
+<style lang="postcss">
 	:global(.accordion-content div) {
 		padding-bottom: 4px;
 		max-height: 100%;
 	}
+	article :global(p) {
+		@apply text-sm;
+	}
 </style>
diff --git a/app/src/lib/components/custom-source/RenderWebContent.svelte b/app/src/lib/components/custom-source/RenderWebContent.svelte
index 7b88fe6..98cd983 100644
--- a/app/src/lib/components/custom-source/RenderWebContent.svelte
+++ b/app/src/lib/components/custom-source/RenderWebContent.svelte
@@ -3,13 +3,11 @@
 	$: paragraphs = content.split('\n\n').filter((p) => p.trim());
 </script>
 
-<section class="w-full flex flex-col gap-y-3">
-	{#each paragraphs as paragraph, idx (idx)}
-		<article class="pb-2 border-b leading-relaxed border-b-gray-500/10">
-			{paragraph}
-		</article>
-	{/each}
-</section>
+{#each paragraphs as paragraph, idx (idx)}
+	<article class="pb-2 border-b leading-relaxed border-b-gray-500/10">
+		{paragraph}
+	</article>
+{/each}
 
 <style>
 	article :global(code) {

From 60652ba0f04f25418fb6aa73193f1244386a6943 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 21 Nov 2024 17:17:35 +0000
Subject: [PATCH 13/45] wip: add logic to store and fetch custom sources

---
 api/src/main.py                         | 12 ++--
 api/src/utils/generate_custom_source.py | 73 +++++++++++++++++++++++++
 2 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 api/src/utils/generate_custom_source.py

diff --git a/api/src/main.py b/api/src/main.py
index 6e58fc9..e01ae9c 100644
--- a/api/src/main.py
+++ b/api/src/main.py
@@ -20,6 +20,7 @@
     generate_audiocast,
 )
 from src.utils.generate_audiocast_source import GenerateAudiocastSource, generate_audiocast_source
+from src.utils.generate_custom_source import GenerateCustomSourceRequest, generate_custom_source
 from src.utils.get_audiocast import get_audiocast
 from src.utils.get_session_title import GetSessionTitleModel, get_session_title
 from src.utils.session_manager import SessionManager
@@ -86,8 +87,7 @@ async def generate_audiocast_endpoint(
     request: GenerateAudioCastRequest,
     background_tasks: BackgroundTasks,
 ):
-    result = await generate_audiocast(request, background_tasks)
-    return result
+    return await generate_audiocast(request, background_tasks)
 
 
 @app.get("/audiocast/{session_id}", response_model=GenerateAudioCastResponse)
@@ -134,8 +134,7 @@ async def get_signed_url_endpoint(blobname: str):
 
 @app.post("/get-session-title", response_model=str)
 async def get_session_title_endpoint(request: GetSessionTitleModel, background_tasks: BackgroundTasks):
-    source_content = await get_session_title(request, background_tasks)
-    return source_content
+    return await get_session_title(request, background_tasks)
 
 
 @app.post("/extract-url-content", response_model=URLContent)
@@ -143,3 +142,8 @@ async def extract_url_content_endpoint(request: ExtractURLContentRequest):
     extractor = ExtractURLContent()
     page_content = await extractor._extract(request.url)
     return page_content.model_dump()
+
+
+@app.post("/generate-custom-source", response_model=URLContent)
+async def generate_custom_source_endpoint(request: GenerateCustomSourceRequest, background_tasks: BackgroundTasks):
+    return await generate_custom_source(request, background_tasks)
diff --git a/api/src/utils/generate_custom_source.py b/api/src/utils/generate_custom_source.py
new file mode 100644
index 0000000..c5d86e1
--- /dev/null
+++ b/api/src/utils/generate_custom_source.py
@@ -0,0 +1,73 @@
+from typing import Optional
+
+from fastapi import BackgroundTasks
+from pydantic import BaseModel
+
+from src.services.firestore_sdk import (
+    Collection,
+    DBManager,
+    collections,
+)
+from src.utils.extract_url_content import ExtractURLContent, URLContent
+
+
+class GenerateCustomSourceRequest(BaseModel):
+    url: str
+    sessionId: str
+
+
+class CustomSourceModel(URLContent):
+    created_at: Optional[str] = None
+    updated_at: Optional[str] = None
+
+
+class CustomSourceManager(DBManager):
+    collection: Collection = collections["audiora_sessions"]
+    sub_collection = "custom_sources"
+
+    def __init__(self, session_id: str):
+        super().__init__()
+        self.doc_id = session_id
+
+    def _check_document(self):
+        """if the collection does not exist, create it"""
+        doc = self._get_document(self.collection, self.doc_id)
+        if not doc.exists:
+            raise Exception("Session not found")
+        return doc
+
+    def _set_custom_source(self, data: CustomSourceModel):
+        self._check_document()
+
+        doc_ref = self._get_collection(self.collection).document(self.doc_id)
+        return (
+            doc_ref.collection(self.sub_collection)
+            .document(data.id)
+            .set({**(data.model_dump()), "created_at": self._timestamp, "updated_at": self._timestamp})
+        )
+
+    def _get_custom_source(self, source_id: str):
+        self._check_document()
+        return (
+            self._get_collection(self.collection)
+            .document(self.doc_id)
+            .collection(self.sub_collection)
+            .document(source_id)
+            .get()
+        )
+        # what about
+        # doc_path = f"{self.collection}/{self.doc_id}/{self.sub_collection}"
+        # return self._get_document(doc_path, source_id).get()
+
+
+async def generate_custom_source(request: GenerateCustomSourceRequest, background_tasks: BackgroundTasks):
+    extractor = ExtractURLContent()
+    page_content = await extractor._extract(request.url)
+
+    async def save_to_firestore():
+        custom_source = CustomSourceModel(**page_content.model_dump())
+        manager = CustomSourceManager(request.sessionId)
+        manager._set_custom_source(custom_source)
+
+    background_tasks.add_task(save_to_firestore)
+    return page_content.model_dump()

From 71b812a718318b995588f5b4fec2652af9d600c3 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 21 Nov 2024 17:37:02 +0000
Subject: [PATCH 14/45] add endpoint to fetch custom sources for a given
 audiocast session

---
 api/src/main.py                         | 34 +++++++++++++++++++++----
 api/src/utils/generate_custom_source.py | 22 ++++++++++++----
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/api/src/main.py b/api/src/main.py
index e01ae9c..de010a1 100644
--- a/api/src/main.py
+++ b/api/src/main.py
@@ -20,7 +20,13 @@
     generate_audiocast,
 )
 from src.utils.generate_audiocast_source import GenerateAudiocastSource, generate_audiocast_source
-from src.utils.generate_custom_source import GenerateCustomSourceRequest, generate_custom_source
+from src.utils.generate_custom_source import (
+    CustomSourceManager,
+    CustomSourceModel,
+    GenerateCustomSourceRequest,
+    GetCustomSourcesRequest,
+    generate_custom_source,
+)
 from src.utils.get_audiocast import get_audiocast
 from src.utils.get_session_title import GetSessionTitleModel, get_session_title
 from src.utils.session_manager import SessionManager
@@ -61,7 +67,11 @@ async def root():
 
 
 @app.post("/chat/{session_id}", response_model=Generator[str, Any, None])
-async def chat_endpoint(session_id: str, request: SessionChatRequest, background_tasks: BackgroundTasks):
+async def chat_endpoint(
+    session_id: str,
+    request: SessionChatRequest,
+    background_tasks: BackgroundTasks,
+):
     """Chat endpoint"""
     category = request.contentCategory
     db = SessionManager(session_id, category)
@@ -97,7 +107,10 @@ async def get_audiocast_endpoint(session_id: str):
 
 
 @app.post("/generate-audiocast-source", response_model=str)
-async def generate_audiocast_source_endpoint(request: GenerateAudiocastSource, background_tasks: BackgroundTasks):
+async def generate_audiocast_source_endpoint(
+    request: GenerateAudiocastSource,
+    background_tasks: BackgroundTasks,
+):
     source_content = await generate_audiocast_source(request, background_tasks)
     if not source_content:
         raise HTTPException(status_code=500, detail="Failed to generate source content")
@@ -133,7 +146,10 @@ async def get_signed_url_endpoint(blobname: str):
 
 
 @app.post("/get-session-title", response_model=str)
-async def get_session_title_endpoint(request: GetSessionTitleModel, background_tasks: BackgroundTasks):
+async def get_session_title_endpoint(
+    request: GetSessionTitleModel,
+    background_tasks: BackgroundTasks,
+):
     return await get_session_title(request, background_tasks)
 
 
@@ -145,5 +161,13 @@ async def extract_url_content_endpoint(request: ExtractURLContentRequest):
 
 
 @app.post("/generate-custom-source", response_model=URLContent)
-async def generate_custom_source_endpoint(request: GenerateCustomSourceRequest, background_tasks: BackgroundTasks):
+async def generate_custom_source_endpoint(
+    request: GenerateCustomSourceRequest,
+    background_tasks: BackgroundTasks,
+):
     return await generate_custom_source(request, background_tasks)
+
+
+@app.post("/get-custom-sources", response_model=list[CustomSourceModel])
+async def get_custom_sources_endpoint(request: GetCustomSourcesRequest):
+    return CustomSourceManager(request.sessionId)._get_custom_sources()
diff --git a/api/src/utils/generate_custom_source.py b/api/src/utils/generate_custom_source.py
index c5d86e1..c1b4733 100644
--- a/api/src/utils/generate_custom_source.py
+++ b/api/src/utils/generate_custom_source.py
@@ -1,4 +1,4 @@
-from typing import Optional
+from typing import Optional, cast
 
 from fastapi import BackgroundTasks
 from pydantic import BaseModel
@@ -16,6 +16,10 @@ class GenerateCustomSourceRequest(BaseModel):
     sessionId: str
 
 
+class GetCustomSourcesRequest(BaseModel):
+    sessionId: str
+
+
 class CustomSourceModel(URLContent):
     created_at: Optional[str] = None
     updated_at: Optional[str] = None
@@ -46,7 +50,7 @@ def _set_custom_source(self, data: CustomSourceModel):
             .set({**(data.model_dump()), "created_at": self._timestamp, "updated_at": self._timestamp})
         )
 
-    def _get_custom_source(self, source_id: str):
+    def _get_custom_source(self, source_id: str) -> CustomSourceModel:
         self._check_document()
         return (
             self._get_collection(self.collection)
@@ -55,9 +59,17 @@ def _get_custom_source(self, source_id: str):
             .document(source_id)
             .get()
         )
-        # what about
-        # doc_path = f"{self.collection}/{self.doc_id}/{self.sub_collection}"
-        # return self._get_document(doc_path, source_id).get()
+
+    def _get_custom_sources(self):
+        self._check_document()
+
+        try:
+            doc_ref = self._get_collection(self.collection).document(self.doc_id)
+            snap = doc_ref.collection(self.sub_collection).get()
+            return [cast(CustomSourceModel, doc.to_dict()) for doc in snap.docs if doc.exists]
+        except Exception as e:
+            print(f"Error getting custom sources for Session: {self.doc_id}", e)
+            return []
 
 
 async def generate_custom_source(request: GenerateCustomSourceRequest, background_tasks: BackgroundTasks):

From 0149a111eaa8e1aa2f1506d7373ac98f48a0c7e8 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 21 Nov 2024 17:51:20 +0000
Subject: [PATCH 15/45] create a component for rendering audio_souces -
 ai-generated custom

---
 .../lib/components/ChatListActionItems.svelte |  4 +--
 ....svelte => ManageAudioSourceDrawer.svelte} | 33 +++++--------------
 .../lib/components/RenderAudioSources.svelte  | 30 +++++++++++++++++
 .../[sessionId=sessionId]/+page.svelte        | 22 ++++++-------
 4 files changed, 50 insertions(+), 39 deletions(-)
 rename app/src/lib/components/{custom-source/RenderAudioSource.svelte => ManageAudioSourceDrawer.svelte} (77%)
 create mode 100644 app/src/lib/components/RenderAudioSources.svelte

diff --git a/app/src/lib/components/ChatListActionItems.svelte b/app/src/lib/components/ChatListActionItems.svelte
index 1b4fe4f..9074fa7 100644
--- a/app/src/lib/components/ChatListActionItems.svelte
+++ b/app/src/lib/components/ChatListActionItems.svelte
@@ -11,11 +11,11 @@
 	import { toast } from 'svelte-sonner';
 	import { Button } from './ui/button';
 	import { getSessionContext } from '@/stores/sessionContext.svelte';
-	import RenderAudioSource from '@/components/custom-source/RenderAudioSource.svelte';
 	import { streamingResponse } from '@/utils/streamingResponse';
 	import { Share2Icon } from 'lucide-svelte';
 	import ShareModal from './share/ShareModal.svelte';
 	import { getShareableLink, getShareTitle } from '@/utils/shareMeta';
+	import ManageAudioSourceDrawer from './ManageAudioSourceDrawer.svelte';
 
 	export let sessionId: string;
 	export let category: ContentCategory;
@@ -133,7 +133,7 @@
 			>
 
 			{#if $audioSource$}
-				<RenderAudioSource audioSource={$audioSource$} />
+				<ManageAudioSourceDrawer aiSource={$audioSource$} />
 			{:else}
 				<Button
 					variant="ghost"
diff --git a/app/src/lib/components/custom-source/RenderAudioSource.svelte b/app/src/lib/components/ManageAudioSourceDrawer.svelte
similarity index 77%
rename from app/src/lib/components/custom-source/RenderAudioSource.svelte
rename to app/src/lib/components/ManageAudioSourceDrawer.svelte
index 687035a..794fc95 100644
--- a/app/src/lib/components/custom-source/RenderAudioSource.svelte
+++ b/app/src/lib/components/ManageAudioSourceDrawer.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-	import * as Drawer from '../ui/drawer';
-	import { Button } from '../ui/button';
-	import * as Accordion from '../ui/accordion';
-	import { parse } from 'marked';
+	import * as Drawer from './ui/drawer';
+	import { Button } from './ui/button';
+	import * as Accordion from './ui/accordion';
 	import { PlusIcon } from 'lucide-svelte';
-	import CustomSources from './CustomSources.svelte';
-	import AddCustomSource from './AddCustomSource.svelte';
+	import AddCustomSource from './custom-source/AddCustomSource.svelte';
 	import { getCustomSources, type Sources } from '@/stores/customSources.svelte';
 	import { env } from '@env';
+	import RenderAudioSources from './RenderAudioSources.svelte';
 
-	export let audioSource: string;
+	export let aiSource: string;
 
 	const { addSource } = getCustomSources();
 
@@ -97,20 +96,7 @@
 								</Accordion.Content>
 							</Accordion.Item>
 
-							<Accordion.Item value="item-0" class="border-gray-800">
-								<Accordion.Trigger>AI-generated Source</Accordion.Trigger>
-								<Accordion.Content>
-									<article
-										class="prose leading-relaxed max-h-96 overflow-y-auto text-gray-300 flex p-2 flex-col gap-y-3 bg-gray-900/70 text-gray-30"
-									>
-										{#await parse(audioSource) then parsedContent}
-											{@html parsedContent}
-										{/await}
-									</article>
-								</Accordion.Content>
-							</Accordion.Item>
-
-							<CustomSources />
+							<RenderAudioSources {aiSource} />
 						</Accordion.Root>
 					{/key}
 				</div>
@@ -119,12 +105,9 @@
 	</Drawer.Portal>
 </Drawer.Root>
 
-<style lang="postcss">
+<style>
 	:global(.accordion-content div) {
 		padding-bottom: 4px;
 		max-height: 100%;
 	}
-	article :global(p) {
-		@apply text-sm;
-	}
 </style>
diff --git a/app/src/lib/components/RenderAudioSources.svelte b/app/src/lib/components/RenderAudioSources.svelte
new file mode 100644
index 0000000..e02c35a
--- /dev/null
+++ b/app/src/lib/components/RenderAudioSources.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { parse } from 'marked';
+	import * as Accordion from './ui/accordion';
+	import CustomSources from './custom-source/CustomSources.svelte';
+
+	export let aiSource: string;
+</script>
+
+<render-audio-sources>
+	<Accordion.Item value="ai-source-item" class="border-gray-800">
+		<Accordion.Trigger>AI-generated Source</Accordion.Trigger>
+		<Accordion.Content>
+			<article
+				class="prose leading-relaxed max-h-96 overflow-y-auto text-gray-300 flex p-2 flex-col gap-y-3 bg-gray-900/70 text-gray-30"
+			>
+				{#await parse(aiSource) then parsedContent}
+					{@html parsedContent}
+				{/await}
+			</article>
+		</Accordion.Content>
+	</Accordion.Item>
+
+	<CustomSources />
+</render-audio-sources>
+
+<style lang="postcss">
+	article :global(p) {
+		@apply text-sm;
+	}
+</style>
diff --git a/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte b/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
index d2b0142..2a4ac1e 100644
--- a/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
+++ b/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
@@ -32,6 +32,7 @@
 	import AudiocastPageAction from '@/components/AudiocastPageAction.svelte';
 	import AudiocastPageChat from '@/components/AudiocastPageChat.svelte';
 	import AudiocastPageSkeletonLoader from '@/components/AudiocastPageSkeletonLoader.svelte';
+	import RenderAudioSources from '@/components/RenderAudioSources.svelte';
 
 	const { session$ } = getSessionContext();
 
@@ -117,24 +118,15 @@
 				<Accordion.Item value="item-1" class="border-gray-800">
 					<Accordion.Trigger>Audio Transcript</Accordion.Trigger>
 					<Accordion.Content>
-						<div class="flex w-full flex-col gap-y-3 p-2 bg-gray-900/70 text-gray-300">
+						<article class="flex w-full flex-col gap-y-3 p-2 bg-gray-900/70 text-gray-300">
 							{#await parse(parseScript(data.script)) then parsedContent}
 								{@html parsedContent}
 							{/await}
-						</div>
+						</article>
 					</Accordion.Content>
 				</Accordion.Item>
 
-				<Accordion.Item value="item-2" class="border-gray-800">
-					<Accordion.Trigger>Source Content</Accordion.Trigger>
-					<Accordion.Content>
-						<div class="flex w-full flex-col gap-y-3 bg-gray-900/70 text-gray-300 p-2">
-							{#await parse(data.source_content) then parsedContent}
-								{@html parsedContent}
-							{/await}
-						</div>
-					</Accordion.Content>
-				</Accordion.Item>
+				<RenderAudioSources aiSource={data.source_content} />
 			</Accordion.Root>
 
 			<AudiocastPageAction {sessionId} sessionTitle={data.title || 'Untitled'} on:showChats>
@@ -145,3 +137,9 @@
 		<div>Error: {String(error)}</div>
 	{/await}
 </div>
+
+<style lang="postcss">
+	article :global(p) {
+		@apply text-sm;
+	}
+</style>

From d839f66589ece9ffb43de1d8f091bc50e935c89b Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 21 Nov 2024 18:38:35 +0000
Subject: [PATCH 16/45] setup firebase and rxjs

---
 app/package.json                              |   2 +
 app/src/env/setup.js                          |   3 +-
 app/src/global.d.ts                           |   1 +
 .../services/firebase/firebase.analytics.ts   |   9 +
 .../services/firebase/firebase.firestore.ts   |   7 +
 app/src/lib/services/firebase/index.ts        |  16 +
 app/vite.config.ts                            |   2 +
 pnpm-lock.yaml                                | 640 +++++++++++++++++-
 8 files changed, 644 insertions(+), 36 deletions(-)
 create mode 100644 app/src/lib/services/firebase/firebase.analytics.ts
 create mode 100644 app/src/lib/services/firebase/firebase.firestore.ts
 create mode 100644 app/src/lib/services/firebase/index.ts

diff --git a/app/package.json b/app/package.json
index 98fa045..02aaad1 100644
--- a/app/package.json
+++ b/app/package.json
@@ -26,12 +26,14 @@
 		"dayjs": "^1.11.13",
 		"dotenv": "16.3.1",
 		"ejs": "^3.1.10",
+		"firebase": "^11.0.2",
 		"github-slugger": "^2.0.0",
 		"lucide-svelte": "^0.456.0",
 		"marked": "^14.1.4",
 		"mode-watcher": "^0.4.1",
 		"nanoid": "^5.0.7",
 		"ramda": "^0.30.1",
+		"rxjs": "^7.8.1",
 		"svelte-persisted-store": "^0.11.0",
 		"svelte-sonner": "^0.3.28",
 		"tailwind-merge": "^2.4.0",
diff --git a/app/src/env/setup.js b/app/src/env/setup.js
index 5d217af..110b0a0 100644
--- a/app/src/env/setup.js
+++ b/app/src/env/setup.js
@@ -4,5 +4,6 @@ export const env = {
 	VERSION: process.env.VERSION,
 	BUILD_TIME: new Date().toString(),
 	API_BASE_URL: process.env.API_BASE_URL,
-	IMGPROXY_URL: process.env.IMGPROXY_URL
+	IMGPROXY_URL: process.env.IMGPROXY_URL,
+	FIREBASE_CONFIG: process.env.FIREBASE_CONFIG
 };
diff --git a/app/src/global.d.ts b/app/src/global.d.ts
index fc5d3cc..658fdba 100644
--- a/app/src/global.d.ts
+++ b/app/src/global.d.ts
@@ -1,5 +1,6 @@
 declare namespace NodeJS {
 	export interface ProcessEnv {
 		NODE_ENV: 'development' | 'production';
+		FIREBASE_CONFIG: object & { apiKey: string };
 	}
 }
diff --git a/app/src/lib/services/firebase/firebase.analytics.ts b/app/src/lib/services/firebase/firebase.analytics.ts
new file mode 100644
index 0000000..bf49d58
--- /dev/null
+++ b/app/src/lib/services/firebase/firebase.analytics.ts
@@ -0,0 +1,9 @@
+import type { FirebaseApp } from 'firebase/app';
+import { browser } from '$app/environment';
+import { getAnalytics } from 'firebase/analytics';
+
+export async function initAnalytics(app: FirebaseApp) {
+	if (!browser) return;
+	const analytics = getAnalytics(app);
+	analytics.app.automaticDataCollectionEnabled = false;
+}
diff --git a/app/src/lib/services/firebase/firebase.firestore.ts b/app/src/lib/services/firebase/firebase.firestore.ts
new file mode 100644
index 0000000..17744c8
--- /dev/null
+++ b/app/src/lib/services/firebase/firebase.firestore.ts
@@ -0,0 +1,7 @@
+import { doc, collection, type Firestore } from 'firebase/firestore';
+export function refs(firestore: Firestore) {
+	return {
+		docRef: (col: string, id: string) => doc(firestore, col, id),
+		colRef: (col: string) => collection(firestore, col)
+	};
+}
diff --git a/app/src/lib/services/firebase/index.ts b/app/src/lib/services/firebase/index.ts
new file mode 100644
index 0000000..c773222
--- /dev/null
+++ b/app/src/lib/services/firebase/index.ts
@@ -0,0 +1,16 @@
+import { initializeApp } from 'firebase/app';
+import { initializeFirestore } from 'firebase/firestore';
+import { refs } from './firebase.firestore';
+import { browser } from '$app/environment';
+import { env } from '@env';
+import { initAnalytics } from './firebase.analytics';
+
+export const app = initializeApp(env.FIREBASE_CONFIG);
+export const firestore = initializeFirestore(app, {
+	experimentalAutoDetectLongPolling: browser,
+	localCache: browser ? { kind: 'persistent' } : void 0
+});
+
+export const dbRefs = refs(firestore);
+
+initAnalytics(app);
diff --git a/app/vite.config.ts b/app/vite.config.ts
index 9f397e6..9e1c9a1 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -8,6 +8,8 @@ export default defineConfig({
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	},
 	define: {
+		'process.env.USE_EMULATORS': `'${process.env.USE_EMULATORS || false}'`,
+		'process.env.FIREBASE_CONFIG': `'${process.env.FIREBASE_CONFIG || {}}'`,
 		...defineEnv()
 	},
 	build: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b8c2af..e23ba7c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ importers:
       ejs:
         specifier: ^3.1.10
         version: 3.1.10
+      firebase:
+        specifier: ^11.0.2
+        version: 11.0.2
       github-slugger:
         specifier: ^2.0.0
         version: 2.0.0
@@ -68,6 +71,9 @@ importers:
       ramda:
         specifier: ^0.30.1
         version: 0.30.1
+      rxjs:
+        specifier: ^7.8.1
+        version: 7.8.1
       svelte-persisted-store:
         specifier: ^0.11.0
         version: 0.11.0(svelte@4.2.19)
@@ -360,33 +366,243 @@ packages:
   '@fastify/busboy@3.0.0':
     resolution: {integrity: sha512-83rnH2nCvclWaPQQKvkJ2pdOjG4TZyEVuFDnlOF6KP08lDaaceVyw/W63mDuafQT+MKHCvXIPpE5uYWeM0rT4w==}
 
+  '@firebase/analytics-compat@0.2.16':
+    resolution: {integrity: sha512-Q/s+u/TEMSb2EDJFQMGsOzpSosybBl8HuoSEMyGZ99+0Pu7SIR9MPDGUjc8PKiCFQWDJ3QXxgqh1d/rujyAMbA==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/analytics-types@0.8.3':
+    resolution: {integrity: sha512-VrIp/d8iq2g501qO46uGz3hjbDb8xzYMrbu8Tp0ovzIzrvJZ2fvmj649gTjge/b7cCCcjT0H37g1gVtlNhnkbg==}
+
+  '@firebase/analytics@0.10.10':
+    resolution: {integrity: sha512-Psdo7c9g2SLAYh6u1XRA+RZ7ab2JfBVuAt/kLzXkhKZL/gS2cQUCMsOW5p0RIlDPRKqpdNSmvujd2TeRWLKOkQ==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/app-check-compat@0.3.17':
+    resolution: {integrity: sha512-a/eadrGsY0MVCBPhrNbKUhoYpms4UKTYLKO7nswwSFVsm3Rw6NslQQCNLfvljcDqP4E7alQDRGJXjkxd/5gJ+Q==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
   '@firebase/app-check-interop-types@0.3.2':
     resolution: {integrity: sha512-LMs47Vinv2HBMZi49C09dJxp0QT5LwDzFaVGf/+ITHe3BlIhUiLNttkATSXplc89A2lAaeTqjgqVkiRfUGyQiQ==}
 
+  '@firebase/app-check-interop-types@0.3.3':
+    resolution: {integrity: sha512-gAlxfPLT2j8bTI/qfe3ahl2I2YcBQ8cFIBdhAQA4I2f3TndcO+22YizyGYuttLHPQEpWkhmpFW60VCFEPg4g5A==}
+
+  '@firebase/app-check-types@0.5.3':
+    resolution: {integrity: sha512-hyl5rKSj0QmwPdsAxrI5x1otDlByQ7bvNvVt8G/XPO2CSwE++rmSVf3VEhaeOR4J8ZFaF0Z0NDSmLejPweZ3ng==}
+
+  '@firebase/app-check@0.8.10':
+    resolution: {integrity: sha512-DWFfxxif/t+Ow4MmRUevDX+A3hVxm1rUf6y5ZP4sIomfnVCO1NNahqtsv9rb1/tKGkTeoVT40weiTS/WjQG1mA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/app-compat@0.2.46':
+    resolution: {integrity: sha512-9hSHWE5LMqtKIm13CnH5OZeMPbkVV3y5vgNZ5EMFHcG2ceRrncyNjG9No5XfWQw8JponZdGs4HlE4aMD/jxcFA==}
+    engines: {node: '>=18.0.0'}
+
   '@firebase/app-types@0.9.2':
     resolution: {integrity: sha512-oMEZ1TDlBz479lmABwWsWjzHwheQKiAgnuKxE0pz0IXCVx7/rtlkx1fQ6GfgK24WCrxDKMplZrT50Kh04iMbXQ==}
 
+  '@firebase/app-types@0.9.3':
+    resolution: {integrity: sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw==}
+
+  '@firebase/app@0.10.16':
+    resolution: {integrity: sha512-SUati2qH48gvVGnSsqMkZr1Iq7No52a3tJQ4itboSTM89Erezmw3v1RsfVymrDze9+KiOLmBpvLNKSvheITFjg==}
+    engines: {node: '>=18.0.0'}
+
+  '@firebase/auth-compat@0.5.16':
+    resolution: {integrity: sha512-YlYwJMBqAyv0ESy3jDUyshMhZlbUiwAm6B6+uUmigNDHU+uq7j4SFiDJEZlFFIz397yBzKn06SUdqutdQzGnCA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
   '@firebase/auth-interop-types@0.2.3':
     resolution: {integrity: sha512-Fc9wuJGgxoxQeavybiuwgyi+0rssr76b+nHpj+eGhXFYAdudMWyfBHvFL/I5fEHniUM/UQdFzi9VXJK2iZF7FQ==}
 
+  '@firebase/auth-interop-types@0.2.4':
+    resolution: {integrity: sha512-JPgcXKCuO+CWqGDnigBtvo09HeBs5u/Ktc2GaFj2m01hLarbxthLNm7Fk8iOP1aqAtXV+fnnGj7U28xmk7IwVA==}
+
+  '@firebase/auth-types@0.12.3':
+    resolution: {integrity: sha512-Zq9zI0o5hqXDtKg6yDkSnvMCMuLU6qAVS51PANQx+ZZX5xnzyNLEBO3GZgBUPsV5qIMFhjhqmLDxUqCbnAYy2A==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+
+  '@firebase/auth@1.8.1':
+    resolution: {integrity: sha512-LX9N/Cf5Z35r5yqm2+5M3+2bRRe/+RFaa/+u4HDni7TA27C/Xm4XHLKcWcLg1BzjrS4zngSaBEOSODvp6RFOqQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+      '@react-native-async-storage/async-storage': ^1.18.1
+    peerDependenciesMeta:
+      '@react-native-async-storage/async-storage':
+        optional: true
+
+  '@firebase/component@0.6.11':
+    resolution: {integrity: sha512-eQbeCgPukLgsKD0Kw5wQgsMDX5LeoI1MIrziNDjmc6XDq5ZQnuUymANQgAb2wp1tSF9zDSXyxJmIUXaKgN58Ug==}
+    engines: {node: '>=18.0.0'}
+
   '@firebase/component@0.6.9':
     resolution: {integrity: sha512-gm8EUEJE/fEac86AvHn8Z/QW8BvR56TBw3hMW0O838J/1mThYQXAIQBgUv75EqlCZfdawpWLrKt1uXvp9ciK3Q==}
 
+  '@firebase/data-connect@0.1.2':
+    resolution: {integrity: sha512-Bcf29mntFCt5V7aceMe36wnkHrG7cwbMlUVbDHOlh2foQKx9VtSXEONw9r6FtL1sFobHVYOM5L6umX35f59m5g==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
   '@firebase/database-compat@1.0.8':
     resolution: {integrity: sha512-OpeWZoPE3sGIRPBKYnW9wLad25RaWbGyk7fFQe4xnJQKRzlynWeFBSRRAoLE2Old01WXwskUiucNqUUVlFsceg==}
 
+  '@firebase/database-compat@2.0.1':
+    resolution: {integrity: sha512-IsFivOjdE1GrjTeKoBU/ZMenESKDXidFDzZzHBPQ/4P20ptGdrl3oLlWrV/QJqJ9lND4IidE3z4Xr5JyfUW1vg==}
+    engines: {node: '>=18.0.0'}
+
   '@firebase/database-types@1.0.5':
     resolution: {integrity: sha512-fTlqCNwFYyq/C6W7AJ5OCuq5CeZuBEsEwptnVxlNPkWCo5cTTyukzAHRSO/jaQcItz33FfYrrFk1SJofcu2AaQ==}
 
+  '@firebase/database-types@1.0.7':
+    resolution: {integrity: sha512-I7zcLfJXrM0WM+ksFmFdAMdlq/DFmpeMNa+/GNsLyFo5u/lX5zzkPzGe3srVWqaBQBY5KprylDGxOsP6ETfL0A==}
+
+  '@firebase/database@1.0.10':
+    resolution: {integrity: sha512-sWp2g92u7xT4BojGbTXZ80iaSIaL6GAL0pwvM0CO/hb0nHSnABAqsH7AhnWGsGvXuEvbPr7blZylPaR9J+GSuQ==}
+    engines: {node: '>=18.0.0'}
+
   '@firebase/database@1.0.8':
     resolution: {integrity: sha512-dzXALZeBI1U5TXt6619cv0+tgEhJiwlUtQ55WNZY7vGAjv7Q1QioV969iYwt1AQQ0ovHnEW0YW9TiBfefLvErg==}
 
+  '@firebase/firestore-compat@0.3.40':
+    resolution: {integrity: sha512-18HopMN811KYBc9Ptpr1Rewwio0XF09FF3jc5wtV6rGyAs815SlFFw5vW7ZeLd43zv9tlEc2FzM0H+5Vr9ZRxw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/firestore-types@3.0.3':
+    resolution: {integrity: sha512-hD2jGdiWRxB/eZWF89xcK9gF8wvENDJkzpVFb4aGkzfEaKxVRD1kjz1t1Wj8VZEp2LCB53Yx1zD8mrhQu87R6Q==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+
+  '@firebase/firestore@4.7.5':
+    resolution: {integrity: sha512-OO3rHvjC07jL2ITN255xH/UzCVSvh6xG8oTzQdFScQvFbcm1fjCL1hgAdpDZcx3vVcKMV+6ktr8wbllkB8r+FQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/functions-compat@0.3.16':
+    resolution: {integrity: sha512-FL7EXehiiBisNIR7mlb0i+moyWKLVfcEJgh/Wq6ZV6BdrCObpCTz7w5EvuRIEFX5e9cNL2oWInKg8S5X4HtINg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/functions-types@0.6.3':
+    resolution: {integrity: sha512-EZoDKQLUHFKNx6VLipQwrSMh01A1SaL3Wg6Hpi//x6/fJ6Ee4hrAeswK99I5Ht8roiniKHw4iO0B1Oxj5I4plg==}
+
+  '@firebase/functions@0.11.10':
+    resolution: {integrity: sha512-TP+Dzebazhw6+GduBdWn1kOJRFH84G2z+BW3pNVfkpFRkc//+uT1Uw2+dLpMGSSBRG7FrcDG91vcPnOFCzr15w==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/installations-compat@0.2.11':
+    resolution: {integrity: sha512-SHRgw5LTa6v8LubmJZxcOCwEd1MfWQPUtKdiuCx2VMWnapX54skZd1PkQg0K4l3k+4ujbI2cn7FE6Li9hbChBw==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/installations-types@0.5.3':
+    resolution: {integrity: sha512-2FJI7gkLqIE0iYsNQ1P751lO3hER+Umykel+TkLwHj6plzWVxqvfclPUZhcKFVQObqloEBTmpi2Ozn7EkCABAA==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+
+  '@firebase/installations@0.6.11':
+    resolution: {integrity: sha512-w8fY8mw6fxJzsZM2ufmTtomopXl1+bn/syYon+Gpn+0p0nO1cIUEVEFrFazTLaaL9q1CaVhc3HmseRTsI3igAA==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
   '@firebase/logger@0.4.2':
     resolution: {integrity: sha512-Q1VuA5M1Gjqrwom6I6NUU4lQXdo9IAQieXlujeHZWvRt1b7qQ0KwBaNAjgxG27jgF9/mUwsNmO8ptBCGVYhB0A==}
 
+  '@firebase/logger@0.4.4':
+    resolution: {integrity: sha512-mH0PEh1zoXGnaR8gD1DeGeNZtWFKbnz9hDO91dIml3iou1gpOnLqXQ2dJfB71dj6dpmUjcQ6phY3ZZJbjErr9g==}
+    engines: {node: '>=18.0.0'}
+
+  '@firebase/messaging-compat@0.2.14':
+    resolution: {integrity: sha512-r9weK8jTEA2aGiwy0IbMQPnzuJ0DHkOQaMxGJOlU2QZ1a7fh6RHpNtaoM+LKnn6u1NQgmAOWYNr9vezVQEm9zw==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/messaging-interop-types@0.2.3':
+    resolution: {integrity: sha512-xfzFaJpzcmtDjycpDeCUj0Ge10ATFi/VHVIvEEjDNc3hodVBQADZ7BWQU7CuFpjSHE+eLuBI13z5F/9xOoGX8Q==}
+
+  '@firebase/messaging@0.12.14':
+    resolution: {integrity: sha512-cSGP34jJswFvME8tdMDkvJvW6T1jEekyMSyq84AMBZ0KEpJbDWuC9n4wKT2lxUm1jaL651iZnn6g51yCl77ICg==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/performance-compat@0.2.11':
+    resolution: {integrity: sha512-DqeNBy51W2xzlklyC7Ht9JQ94HhTA08PCcM4MDeyG/ol3fqum/+YgtHWQ2IQuduqH9afETthZqLwCZiSgY7hiA==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/performance-types@0.2.3':
+    resolution: {integrity: sha512-IgkyTz6QZVPAq8GSkLYJvwSLr3LS9+V6vNPQr0x4YozZJiLF5jYixj0amDtATf1X0EtYHqoPO48a9ija8GocxQ==}
+
+  '@firebase/performance@0.6.11':
+    resolution: {integrity: sha512-FlkJFeqLlIeh5T4Am3uE38HVzggliDIEFy/fErEc1faINOUFCb6vQBEoNZGaXvRnTR8lh3X/hP7tv37C7BsK9g==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/remote-config-compat@0.2.11':
+    resolution: {integrity: sha512-zfIjpwPrGuIOZDmduukN086qjhZ1LnbJi/iYzgua+2qeTlO0XdlE1v66gJPwygGB3TOhT0yb9EiUZ3nBNttMqg==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/remote-config-types@0.3.3':
+    resolution: {integrity: sha512-YlRI9CHxrk3lpQuFup9N1eohpwdWayKZUNZ/YeQ0PZoncJ66P32UsKUKqVXOaieTjJIOh7yH8JEzRdht5s+d6g==}
+
+  '@firebase/remote-config@0.4.11':
+    resolution: {integrity: sha512-9z0rgKuws2nj+7cdiqF+NY1QR4na6KnuOvP+jQvgilDOhGtKOcCMq5XHiu66i73A9kFhyU6QQ2pHXxcmaq1pBw==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/storage-compat@0.3.14':
+    resolution: {integrity: sha512-Ok5FmXJiapaNAOQ8W8qppnfwgP8540jw2B8M0c4TFZqF4BD+CoKBxW0dRtOuLNGadLhzqqkDZZZtkexxrveQqA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/storage-types@0.8.3':
+    resolution: {integrity: sha512-+Muk7g9uwngTpd8xn9OdF/D48uiQ7I1Fae7ULsWPuKoCH3HU7bfFPhxtJYzyhjdniowhuDpQcfPmuNRAqZEfvg==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+
+  '@firebase/storage@0.13.4':
+    resolution: {integrity: sha512-b1KaTTRiMupFurIhpGIbReaWev0k5O3ouTHkAPcEssT+FvU3q/1JwzvkX4+ZdB60Fc43Mbp8qQ1gWfT0Z2FP9Q==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+
   '@firebase/util@1.10.0':
     resolution: {integrity: sha512-xKtx4A668icQqoANRxyDLBLz51TAbDP9KRfpbKGxiCAW346d0BeJe5vN6/hKxxmWwnZ0mautyv39JxviwwQMOQ==}
 
+  '@firebase/util@1.10.2':
+    resolution: {integrity: sha512-qnSHIoE9FK+HYnNhTI8q14evyqbc/vHRivfB4TgCIUOl4tosmKSQlp7ltymOlMP4xVIJTg5wrkfcZ60X4nUf7Q==}
+    engines: {node: '>=18.0.0'}
+
+  '@firebase/vertexai@1.0.1':
+    resolution: {integrity: sha512-f48MGSofhaS05ebpN7zMIv4tBqYf19pXr5/4njKtNZVLbjxUswDma0SuFDoO+IwgbdkhFxgtNctM+C1zfI/O1Q==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+      '@firebase/app-types': 0.x
+
+  '@firebase/webchannel-wrapper@1.0.3':
+    resolution: {integrity: sha512-2xCRM9q9FlzGZCdgDMJwc0gyUkWFtkosy7Xxr6sFgQwn+wMNIWd7xIvYNauU1r64B5L5rsGKy/n9TKJ0aAFeqQ==}
+
   '@floating-ui/core@1.6.8':
     resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
 
@@ -420,6 +636,10 @@ packages:
     resolution: {integrity: sha512-bgxdZmgTrJZX50OjyVwz3+mNEnCTNkh3cIqGPWVNeW9jX6bn1ZkU80uPd+67/ZpIJIjRQ9qaHCjhavyoWYxumg==}
     engines: {node: '>=12.10.0'}
 
+  '@grpc/grpc-js@1.9.15':
+    resolution: {integrity: sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==}
+    engines: {node: ^8.13.0 || >=10.10.0}
+
   '@grpc/proto-loader@0.7.13':
     resolution: {integrity: sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==}
     engines: {node: '>=6'}
@@ -1404,6 +1624,9 @@ packages:
     resolution: {integrity: sha512-raFIrOyTqREbyXsNkSHyciQLfv8AUZazehPaQS1lZBSCDYW74FYXU0nQZa3qHI4K+hawohlDbywZ4+qce9YNxA==}
     engines: {node: '>=14'}
 
+  firebase@11.0.2:
+    resolution: {integrity: sha512-w4T8BSJpzdZA25QRch5ahLsgB6uRvg1LEic4BaC5rTD1YygroI1AXp+W+rbMnr8d8EjfAv6t4k8doULIjc1P8Q==}
+
   flat-cache@4.0.1:
     resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
     engines: {node: '>=16'}
@@ -1587,6 +1810,9 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  idb@7.1.1:
+    resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -2323,6 +2549,9 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  rxjs@7.8.1:
+    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
+
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -3000,17 +3229,123 @@ snapshots:
 
   '@fastify/busboy@3.0.0': {}
 
+  '@firebase/analytics-compat@0.2.16(@firebase/app-compat@0.2.46)(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/analytics': 0.10.10(@firebase/app@0.10.16)
+      '@firebase/analytics-types': 0.8.3
+      '@firebase/app-compat': 0.2.46
+      '@firebase/component': 0.6.11
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/analytics-types@0.8.3': {}
+
+  '@firebase/analytics@0.10.10(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/component': 0.6.11
+      '@firebase/installations': 0.6.11(@firebase/app@0.10.16)
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+
+  '@firebase/app-check-compat@0.3.17(@firebase/app-compat@0.2.46)(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app-check': 0.8.10(@firebase/app@0.10.16)
+      '@firebase/app-check-types': 0.5.3
+      '@firebase/app-compat': 0.2.46
+      '@firebase/component': 0.6.11
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
   '@firebase/app-check-interop-types@0.3.2': {}
 
+  '@firebase/app-check-interop-types@0.3.3': {}
+
+  '@firebase/app-check-types@0.5.3': {}
+
+  '@firebase/app-check@0.8.10(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/component': 0.6.11
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+
+  '@firebase/app-compat@0.2.46':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/component': 0.6.11
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+
   '@firebase/app-types@0.9.2': {}
 
+  '@firebase/app-types@0.9.3': {}
+
+  '@firebase/app@0.10.16':
+    dependencies:
+      '@firebase/component': 0.6.11
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      idb: 7.1.1
+      tslib: 2.8.1
+
+  '@firebase/auth-compat@0.5.16(@firebase/app-compat@0.2.46)(@firebase/app-types@0.9.3)(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app-compat': 0.2.46
+      '@firebase/auth': 1.8.1(@firebase/app@0.10.16)
+      '@firebase/auth-types': 0.12.3(@firebase/app-types@0.9.3)(@firebase/util@1.10.2)
+      '@firebase/component': 0.6.11
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+      - '@react-native-async-storage/async-storage'
+
   '@firebase/auth-interop-types@0.2.3': {}
 
+  '@firebase/auth-interop-types@0.2.4': {}
+
+  '@firebase/auth-types@0.12.3(@firebase/app-types@0.9.3)(@firebase/util@1.10.2)':
+    dependencies:
+      '@firebase/app-types': 0.9.3
+      '@firebase/util': 1.10.2
+
+  '@firebase/auth@1.8.1(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/component': 0.6.11
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+
+  '@firebase/component@0.6.11':
+    dependencies:
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+
   '@firebase/component@0.6.9':
     dependencies:
       '@firebase/util': 1.10.0
       tslib: 2.8.1
 
+  '@firebase/data-connect@0.1.2(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/auth-interop-types': 0.2.4
+      '@firebase/component': 0.6.11
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+
   '@firebase/database-compat@1.0.8':
     dependencies:
       '@firebase/component': 0.6.9
@@ -3020,11 +3355,35 @@ snapshots:
       '@firebase/util': 1.10.0
       tslib: 2.8.1
 
+  '@firebase/database-compat@2.0.1':
+    dependencies:
+      '@firebase/component': 0.6.11
+      '@firebase/database': 1.0.10
+      '@firebase/database-types': 1.0.7
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+
   '@firebase/database-types@1.0.5':
     dependencies:
       '@firebase/app-types': 0.9.2
       '@firebase/util': 1.10.0
 
+  '@firebase/database-types@1.0.7':
+    dependencies:
+      '@firebase/app-types': 0.9.3
+      '@firebase/util': 1.10.2
+
+  '@firebase/database@1.0.10':
+    dependencies:
+      '@firebase/app-check-interop-types': 0.3.3
+      '@firebase/auth-interop-types': 0.2.4
+      '@firebase/component': 0.6.11
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      faye-websocket: 0.11.4
+      tslib: 2.8.1
+
   '@firebase/database@1.0.8':
     dependencies:
       '@firebase/app-check-interop-types': 0.3.2
@@ -3035,14 +3394,201 @@ snapshots:
       faye-websocket: 0.11.4
       tslib: 2.8.1
 
+  '@firebase/firestore-compat@0.3.40(@firebase/app-compat@0.2.46)(@firebase/app-types@0.9.3)(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app-compat': 0.2.46
+      '@firebase/component': 0.6.11
+      '@firebase/firestore': 4.7.5(@firebase/app@0.10.16)
+      '@firebase/firestore-types': 3.0.3(@firebase/app-types@0.9.3)(@firebase/util@1.10.2)
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+
+  '@firebase/firestore-types@3.0.3(@firebase/app-types@0.9.3)(@firebase/util@1.10.2)':
+    dependencies:
+      '@firebase/app-types': 0.9.3
+      '@firebase/util': 1.10.2
+
+  '@firebase/firestore@4.7.5(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/component': 0.6.11
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      '@firebase/webchannel-wrapper': 1.0.3
+      '@grpc/grpc-js': 1.9.15
+      '@grpc/proto-loader': 0.7.13
+      tslib: 2.8.1
+
+  '@firebase/functions-compat@0.3.16(@firebase/app-compat@0.2.46)(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app-compat': 0.2.46
+      '@firebase/component': 0.6.11
+      '@firebase/functions': 0.11.10(@firebase/app@0.10.16)
+      '@firebase/functions-types': 0.6.3
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/functions-types@0.6.3': {}
+
+  '@firebase/functions@0.11.10(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/app-check-interop-types': 0.3.3
+      '@firebase/auth-interop-types': 0.2.4
+      '@firebase/component': 0.6.11
+      '@firebase/messaging-interop-types': 0.2.3
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+
+  '@firebase/installations-compat@0.2.11(@firebase/app-compat@0.2.46)(@firebase/app-types@0.9.3)(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app-compat': 0.2.46
+      '@firebase/component': 0.6.11
+      '@firebase/installations': 0.6.11(@firebase/app@0.10.16)
+      '@firebase/installations-types': 0.5.3(@firebase/app-types@0.9.3)
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+
+  '@firebase/installations-types@0.5.3(@firebase/app-types@0.9.3)':
+    dependencies:
+      '@firebase/app-types': 0.9.3
+
+  '@firebase/installations@0.6.11(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/component': 0.6.11
+      '@firebase/util': 1.10.2
+      idb: 7.1.1
+      tslib: 2.8.1
+
   '@firebase/logger@0.4.2':
     dependencies:
       tslib: 2.8.1
 
+  '@firebase/logger@0.4.4':
+    dependencies:
+      tslib: 2.8.1
+
+  '@firebase/messaging-compat@0.2.14(@firebase/app-compat@0.2.46)(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app-compat': 0.2.46
+      '@firebase/component': 0.6.11
+      '@firebase/messaging': 0.12.14(@firebase/app@0.10.16)
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/messaging-interop-types@0.2.3': {}
+
+  '@firebase/messaging@0.12.14(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/component': 0.6.11
+      '@firebase/installations': 0.6.11(@firebase/app@0.10.16)
+      '@firebase/messaging-interop-types': 0.2.3
+      '@firebase/util': 1.10.2
+      idb: 7.1.1
+      tslib: 2.8.1
+
+  '@firebase/performance-compat@0.2.11(@firebase/app-compat@0.2.46)(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app-compat': 0.2.46
+      '@firebase/component': 0.6.11
+      '@firebase/logger': 0.4.4
+      '@firebase/performance': 0.6.11(@firebase/app@0.10.16)
+      '@firebase/performance-types': 0.2.3
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/performance-types@0.2.3': {}
+
+  '@firebase/performance@0.6.11(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/component': 0.6.11
+      '@firebase/installations': 0.6.11(@firebase/app@0.10.16)
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+
+  '@firebase/remote-config-compat@0.2.11(@firebase/app-compat@0.2.46)(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app-compat': 0.2.46
+      '@firebase/component': 0.6.11
+      '@firebase/logger': 0.4.4
+      '@firebase/remote-config': 0.4.11(@firebase/app@0.10.16)
+      '@firebase/remote-config-types': 0.3.3
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/remote-config-types@0.3.3': {}
+
+  '@firebase/remote-config@0.4.11(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/component': 0.6.11
+      '@firebase/installations': 0.6.11(@firebase/app@0.10.16)
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+
+  '@firebase/storage-compat@0.3.14(@firebase/app-compat@0.2.46)(@firebase/app-types@0.9.3)(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app-compat': 0.2.46
+      '@firebase/component': 0.6.11
+      '@firebase/storage': 0.13.4(@firebase/app@0.10.16)
+      '@firebase/storage-types': 0.8.3(@firebase/app-types@0.9.3)(@firebase/util@1.10.2)
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+
+  '@firebase/storage-types@0.8.3(@firebase/app-types@0.9.3)(@firebase/util@1.10.2)':
+    dependencies:
+      '@firebase/app-types': 0.9.3
+      '@firebase/util': 1.10.2
+
+  '@firebase/storage@0.13.4(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/component': 0.6.11
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+
   '@firebase/util@1.10.0':
     dependencies:
       tslib: 2.8.1
 
+  '@firebase/util@1.10.2':
+    dependencies:
+      tslib: 2.8.1
+
+  '@firebase/vertexai@1.0.1(@firebase/app-types@0.9.3)(@firebase/app@0.10.16)':
+    dependencies:
+      '@firebase/app': 0.10.16
+      '@firebase/app-check-interop-types': 0.3.3
+      '@firebase/app-types': 0.9.3
+      '@firebase/component': 0.6.11
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.10.2
+      tslib: 2.8.1
+
+  '@firebase/webchannel-wrapper@1.0.3': {}
+
   '@floating-ui/core@1.6.8':
     dependencies:
       '@floating-ui/utils': 0.2.8
@@ -3106,13 +3652,17 @@ snapshots:
       '@js-sdsl/ordered-map': 4.4.2
     optional: true
 
+  '@grpc/grpc-js@1.9.15':
+    dependencies:
+      '@grpc/proto-loader': 0.7.13
+      '@types/node': 22.9.0
+
   '@grpc/proto-loader@0.7.13':
     dependencies:
       lodash.camelcase: 4.3.0
       long: 5.2.3
       protobufjs: 7.4.0
       yargs: 17.7.2
-    optional: true
 
   '@humanfs/core@0.19.1': {}
 
@@ -3194,38 +3744,28 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
-  '@protobufjs/aspromise@1.1.2':
-    optional: true
+  '@protobufjs/aspromise@1.1.2': {}
 
-  '@protobufjs/base64@1.1.2':
-    optional: true
+  '@protobufjs/base64@1.1.2': {}
 
-  '@protobufjs/codegen@2.0.4':
-    optional: true
+  '@protobufjs/codegen@2.0.4': {}
 
-  '@protobufjs/eventemitter@1.1.0':
-    optional: true
+  '@protobufjs/eventemitter@1.1.0': {}
 
   '@protobufjs/fetch@1.1.0':
     dependencies:
       '@protobufjs/aspromise': 1.1.2
       '@protobufjs/inquire': 1.1.0
-    optional: true
 
-  '@protobufjs/float@1.0.2':
-    optional: true
+  '@protobufjs/float@1.0.2': {}
 
-  '@protobufjs/inquire@1.1.0':
-    optional: true
+  '@protobufjs/inquire@1.1.0': {}
 
-  '@protobufjs/path@1.1.2':
-    optional: true
+  '@protobufjs/path@1.1.2': {}
 
-  '@protobufjs/pool@1.1.0':
-    optional: true
+  '@protobufjs/pool@1.1.0': {}
 
-  '@protobufjs/utf8@1.1.0':
-    optional: true
+  '@protobufjs/utf8@1.1.0': {}
 
   '@rollup/plugin-commonjs@28.0.1(rollup@4.25.0)':
     dependencies:
@@ -3797,7 +4337,6 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
-    optional: true
 
   clsx@2.1.1: {}
 
@@ -4246,6 +4785,39 @@ snapshots:
       - encoding
       - supports-color
 
+  firebase@11.0.2:
+    dependencies:
+      '@firebase/analytics': 0.10.10(@firebase/app@0.10.16)
+      '@firebase/analytics-compat': 0.2.16(@firebase/app-compat@0.2.46)(@firebase/app@0.10.16)
+      '@firebase/app': 0.10.16
+      '@firebase/app-check': 0.8.10(@firebase/app@0.10.16)
+      '@firebase/app-check-compat': 0.3.17(@firebase/app-compat@0.2.46)(@firebase/app@0.10.16)
+      '@firebase/app-compat': 0.2.46
+      '@firebase/app-types': 0.9.3
+      '@firebase/auth': 1.8.1(@firebase/app@0.10.16)
+      '@firebase/auth-compat': 0.5.16(@firebase/app-compat@0.2.46)(@firebase/app-types@0.9.3)(@firebase/app@0.10.16)
+      '@firebase/data-connect': 0.1.2(@firebase/app@0.10.16)
+      '@firebase/database': 1.0.10
+      '@firebase/database-compat': 2.0.1
+      '@firebase/firestore': 4.7.5(@firebase/app@0.10.16)
+      '@firebase/firestore-compat': 0.3.40(@firebase/app-compat@0.2.46)(@firebase/app-types@0.9.3)(@firebase/app@0.10.16)
+      '@firebase/functions': 0.11.10(@firebase/app@0.10.16)
+      '@firebase/functions-compat': 0.3.16(@firebase/app-compat@0.2.46)(@firebase/app@0.10.16)
+      '@firebase/installations': 0.6.11(@firebase/app@0.10.16)
+      '@firebase/installations-compat': 0.2.11(@firebase/app-compat@0.2.46)(@firebase/app-types@0.9.3)(@firebase/app@0.10.16)
+      '@firebase/messaging': 0.12.14(@firebase/app@0.10.16)
+      '@firebase/messaging-compat': 0.2.14(@firebase/app-compat@0.2.46)(@firebase/app@0.10.16)
+      '@firebase/performance': 0.6.11(@firebase/app@0.10.16)
+      '@firebase/performance-compat': 0.2.11(@firebase/app-compat@0.2.46)(@firebase/app@0.10.16)
+      '@firebase/remote-config': 0.4.11(@firebase/app@0.10.16)
+      '@firebase/remote-config-compat': 0.2.11(@firebase/app-compat@0.2.46)(@firebase/app@0.10.16)
+      '@firebase/storage': 0.13.4(@firebase/app@0.10.16)
+      '@firebase/storage-compat': 0.3.14(@firebase/app-compat@0.2.46)(@firebase/app-types@0.9.3)(@firebase/app@0.10.16)
+      '@firebase/util': 1.10.2
+      '@firebase/vertexai': 1.0.1(@firebase/app-types@0.9.3)(@firebase/app@0.10.16)
+    transitivePeerDependencies:
+      - '@react-native-async-storage/async-storage'
+
   flat-cache@4.0.1:
     dependencies:
       flatted: 3.3.1
@@ -4319,8 +4891,7 @@ snapshots:
       - supports-color
     optional: true
 
-  get-caller-file@2.0.5:
-    optional: true
+  get-caller-file@2.0.5: {}
 
   get-intrinsic@1.2.4:
     dependencies:
@@ -4482,6 +5053,8 @@ snapshots:
 
   husky@8.0.3: {}
 
+  idb@7.1.1: {}
+
   ignore@5.3.2: {}
 
   import-fresh@3.3.0:
@@ -4714,8 +5287,7 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
-  lodash.camelcase@4.3.0:
-    optional: true
+  lodash.camelcase@4.3.0: {}
 
   lodash.clonedeep@4.5.0: {}
 
@@ -4735,8 +5307,7 @@ snapshots:
 
   lodash.once@4.1.1: {}
 
-  long@5.2.3:
-    optional: true
+  long@5.2.3: {}
 
   loupe@3.1.2: {}
 
@@ -5051,7 +5622,6 @@ snapshots:
       '@protobufjs/utf8': 1.1.0
       '@types/node': 22.9.0
       long: 5.2.3
-    optional: true
 
   punycode@2.3.1: {}
 
@@ -5087,8 +5657,7 @@ snapshots:
       es-errors: 1.3.0
       set-function-name: 2.0.2
 
-  require-directory@2.1.1:
-    optional: true
+  require-directory@2.1.1: {}
 
   resolve-from@4.0.0: {}
 
@@ -5145,6 +5714,10 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  rxjs@7.8.1:
+    dependencies:
+      tslib: 2.8.1
+
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
@@ -5735,8 +6308,7 @@ snapshots:
 
   wrappy@1.0.2: {}
 
-  y18n@5.0.8:
-    optional: true
+  y18n@5.0.8: {}
 
   yallist@4.0.0: {}
 
@@ -5744,8 +6316,7 @@ snapshots:
 
   yaml@2.6.0: {}
 
-  yargs-parser@21.1.1:
-    optional: true
+  yargs-parser@21.1.1: {}
 
   yargs@17.7.2:
     dependencies:
@@ -5756,6 +6327,5 @@ snapshots:
       string-width: 4.2.3
       y18n: 5.0.8
       yargs-parser: 21.1.1
-    optional: true
 
   yocto-queue@0.1.0: {}

From 39e45ab6987c9817ad28e42d1c8c90ef298cc9ae Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 21 Nov 2024 19:26:07 +0000
Subject: [PATCH 17/45] add a safe_to_dict method to db_manager

---
 api/src/services/firestore_sdk.py       | 14 ++++++++++++++
 api/src/utils/generate_custom_source.py |  9 +++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/api/src/services/firestore_sdk.py b/api/src/services/firestore_sdk.py
index cef9ee2..0a87c84 100644
--- a/api/src/services/firestore_sdk.py
+++ b/api/src/services/firestore_sdk.py
@@ -1,3 +1,4 @@
+from datetime import datetime
 from typing import Dict, Literal
 
 from firebase_admin.firestore import client, firestore
@@ -48,3 +49,16 @@ def _get_document(self, collection: Collection, doc_id: str):
 
     def _get_documents(self, collection: Collection):
         return self._get_collection(collection).stream()
+
+    @classmethod
+    def _safe_to_dict(cls, data: dict):
+        """
+        safely parse firestore data by converting convert all timestamp to string
+        """
+
+        def _safe_to_str(value: dict | str | datetime):
+            if isinstance(value, datetime):
+                return value.strftime("%Y-%m-%d %H:%M:%S")
+            return value
+
+        return {k: _safe_to_str(v) for k, v in data.items()}
diff --git a/api/src/utils/generate_custom_source.py b/api/src/utils/generate_custom_source.py
index c1b4733..c1b9f5d 100644
--- a/api/src/utils/generate_custom_source.py
+++ b/api/src/utils/generate_custom_source.py
@@ -65,8 +65,13 @@ def _get_custom_sources(self):
 
         try:
             doc_ref = self._get_collection(self.collection).document(self.doc_id)
-            snap = doc_ref.collection(self.sub_collection).get()
-            return [cast(CustomSourceModel, doc.to_dict()) for doc in snap.docs if doc.exists]
+            docs = doc_ref.collection(self.sub_collection).get()
+            return [
+                cast(CustomSourceModel, self._safe_to_dict(doc.to_dict()))
+                for doc in docs
+                if doc.exists and doc.to_dict()
+            ]
+
         except Exception as e:
             print(f"Error getting custom sources for Session: {self.doc_id}", e)
             return []

From 3cd2a8910bc40d689feb1dd986644fe9b17a539f Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 21 Nov 2024 19:27:31 +0000
Subject: [PATCH 18/45] use generate-custom-source endpoint when adding custom
 source

- this allows saving the custom source to firestore
---
 app/src/lib/components/ManageAudioSourceDrawer.svelte | 8 ++++++--
 app/src/lib/stores/customSources.svelte.ts            | 5 ++---
 app/src/routes/+layout.svelte                         | 5 ++++-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/src/lib/components/ManageAudioSourceDrawer.svelte b/app/src/lib/components/ManageAudioSourceDrawer.svelte
index 794fc95..bb8b7e0 100644
--- a/app/src/lib/components/ManageAudioSourceDrawer.svelte
+++ b/app/src/lib/components/ManageAudioSourceDrawer.svelte
@@ -7,9 +7,11 @@
 	import { getCustomSources, type Sources } from '@/stores/customSources.svelte';
 	import { env } from '@env';
 	import RenderAudioSources from './RenderAudioSources.svelte';
+	import { getSessionContext } from '@/stores/sessionContext.svelte';
 
 	export let aiSource: string;
 
+	const { sessionId$ } = getSessionContext();
 	const { addSource } = getCustomSources();
 
 	let snapPoints = [0.75, 0.95];
@@ -18,6 +20,8 @@
 
 	let accordionResetKey = {};
 
+	$: sessionId = $sessionId$;
+
 	function accordionValueChanged(v: string | string[] | undefined) {
 		if (v === 'item-x') {
 			activeSnapPoint = snapPoints[snapPoints.length - 1];
@@ -36,9 +40,9 @@
 	}
 
 	async function fetchURLContent(url: string): Promise<Sources> {
-		return fetch(`${env.API_BASE_URL}/extract-url-content`, {
+		return fetch(`${env.API_BASE_URL}/generate-custom-source`, {
 			method: 'POST',
-			body: JSON.stringify({ url }),
+			body: JSON.stringify({ url, sessionId }),
 			headers: { 'Content-Type': 'application/json' }
 		})
 			.then<{
diff --git a/app/src/lib/stores/customSources.svelte.ts b/app/src/lib/stores/customSources.svelte.ts
index cf6f9ef..e5ad04e 100644
--- a/app/src/lib/stores/customSources.svelte.ts
+++ b/app/src/lib/stores/customSources.svelte.ts
@@ -18,7 +18,7 @@ export type Sources = (LinkSources | CopyPasteSources) & {
 
 const CONTEXT_KEY = {};
 
-export const setCustomSources = () => {
+export const setCustomSources = (_sessionId: string) => {
 	const sources$ = writable<Sources[]>([]);
 
 	return setContext(CONTEXT_KEY, {
@@ -31,5 +31,4 @@ export const setCustomSources = () => {
 };
 
 export type CustomSourcesType = ReturnType<typeof setCustomSources>;
-export const getCustomSources = () =>
-	getContext<CustomSourcesType>(CONTEXT_KEY) || setCustomSources();
+export const getCustomSources = () => getContext<CustomSourcesType>(CONTEXT_KEY);
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 8adcb9c..afaef8a 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -11,12 +11,15 @@
 	import { page } from '$app/stores';
 	import Spinner from '@/components/Spinner.svelte';
 	import { setAppContext } from '@/stores/appContext.svelte';
+	import { setCustomSources } from '@/stores/customSources.svelte';
 
 	export let data;
 
-	$: setAppContext();
 	$: sessionId = $page.params.sessionId || data.sessionId;
+
+	$: setAppContext();
 	$: setSessionContext(sessionId);
+	$: setCustomSources(sessionId);
 </script>
 
 <svelte:head>

From a9dcbbdd5f82fc474338bed1e7a68d7a30f295b2 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 21 Nov 2024 19:48:13 +0000
Subject: [PATCH 19/45] fetch custom sources on mount page/drawer

---
 .../custom-source/CustomSources.svelte        | 81 +++++++++++++------
 app/src/lib/stores/customSources.svelte.ts    |  5 +-
 2 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/app/src/lib/components/custom-source/CustomSources.svelte b/app/src/lib/components/custom-source/CustomSources.svelte
index ad908b4..5e85ab1 100644
--- a/app/src/lib/components/custom-source/CustomSources.svelte
+++ b/app/src/lib/components/custom-source/CustomSources.svelte
@@ -2,37 +2,70 @@
 	import { getCustomSources } from '@/stores/customSources.svelte';
 	import * as Accordion from '../ui/accordion';
 	import RenderWebContent from './RenderWebContent.svelte';
+	import { env } from '@env';
+	import type { Sources } from '@/stores/customSources.svelte';
+	import { getSessionContext } from '@/stores/sessionContext.svelte';
+	import { browser } from '$app/environment';
 
+	const { sessionId$ } = getSessionContext();
 	const { sources$ } = getCustomSources();
 
-	$: sources = $sources$;
+	$: sessionId = $sessionId$;
+	$: sources = $sources$?.sort((a, b) => {
+		if (a.created_at && b.created_at) {
+			return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
+		}
+		return 0;
+	});
+
+	$: if (browser) getCustomSource(sessionId).then((d) => sources$.set(d));
+
+	async function getCustomSource(sessionId: string) {
+		return fetch(`${env.API_BASE_URL}/get-custom-sources`, {
+			method: 'POST',
+			body: JSON.stringify({ sessionId }),
+			headers: { 'Content-Type': 'application/json' }
+		})
+			.then<Sources[]>((res) => {
+				if (res.ok) return res.json();
+				throw new Error('Error fetching custom sources');
+			})
+			.catch(() => [] as Sources[]);
+	}
 
 	function truncate(str: string, n: number) {
 		return str.length > n ? str.substring(0, n - 1) + '...' : str;
 	}
 </script>
 
-{#each sources as source, idx (source.id)}
-	<Accordion.Item value={source.id} class="border-gray-800">
-		<Accordion.Trigger>
-			<div class="inline-flex break-words text-wrap">
-				<span class="shrink-0 inline-flex">
-					Custom Source {idx + 1}
-				</span>
-				{#if source.type === 'link'}
-					{':'}
-					<span class="text-gray-400 text-start ml-1">
-						{truncate(source.url, 45)}
+{#if sources == null}
+	<div class="flex flex-col gap-y-0.5 pt-0.5 w-full">
+		<div class="h-14 w-full bg-gray-800 animate-pulse" />
+		<div class="h-14 w-full bg-gray-800 animate-pulse" />
+	</div>
+{:else}
+	{#each sources as source, idx (source.id)}
+		<Accordion.Item value={source.id} class="border-gray-800">
+			<Accordion.Trigger>
+				<div class="inline-flex break-words text-wrap">
+					<span class="shrink-0 inline-flex">
+						Custom Source {idx + 1}
 					</span>
-				{/if}
-			</div>
-		</Accordion.Trigger>
-		<Accordion.Content>
-			<div
-				class="flex w-full max-h-96 overflow-y-auto flex-col gap-y-3 p-2 bg-gray-900/70 text-gray-300"
-			>
-				<RenderWebContent content={source.content} />
-			</div>
-		</Accordion.Content>
-	</Accordion.Item>
-{/each}
+					{#if source.type === 'link'}
+						{':'}
+						<span class="text-gray-400 text-start ml-1">
+							{truncate(source.url, 45)}
+						</span>
+					{/if}
+				</div>
+			</Accordion.Trigger>
+			<Accordion.Content>
+				<div
+					class="flex w-full max-h-96 overflow-y-auto flex-col gap-y-3 p-2 bg-gray-900/70 text-gray-300"
+				>
+					<RenderWebContent content={source.content} />
+				</div>
+			</Accordion.Content>
+		</Accordion.Item>
+	{/each}
+{/if}
diff --git a/app/src/lib/stores/customSources.svelte.ts b/app/src/lib/stores/customSources.svelte.ts
index e5ad04e..d882aaa 100644
--- a/app/src/lib/stores/customSources.svelte.ts
+++ b/app/src/lib/stores/customSources.svelte.ts
@@ -14,17 +14,18 @@ export type Sources = (LinkSources | CopyPasteSources) & {
 	id: string;
 	content_type: 'text/plain' | 'text/html' | 'application/pdf';
 	content: string;
+	created_at: string;
 };
 
 const CONTEXT_KEY = {};
 
 export const setCustomSources = (_sessionId: string) => {
-	const sources$ = writable<Sources[]>([]);
+	const sources$ = writable<Sources[] | null>(null);
 
 	return setContext(CONTEXT_KEY, {
 		sources$,
 		addSource: (source: Sources) => {
-			sources$.update((sources) => [...sources, source]);
+			sources$.update((sources) => (!sources ? sources : [...sources, source]));
 			return sources$;
 		}
 	});

From 0ac5bb9d5e3f2021e89febea5a7fef6946b62ac5 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 21 Nov 2024 23:17:51 +0000
Subject: [PATCH 20/45] read custom_sources from firebase using the js_sdk

---
 .../custom-source/CustomSources.svelte        | 21 --------
 app/src/lib/db/db.base.ts                     |  4 ++
 app/src/lib/db/db.customSources.ts            | 24 ++++++++++
 app/src/lib/db/db.utils.ts                    | 48 +++++++++++++++++++
 app/src/lib/server/firebase-admin/index.ts    |  1 +
 app/src/lib/stores/customSources.svelte.ts    | 13 ++---
 6 files changed, 81 insertions(+), 30 deletions(-)
 create mode 100644 app/src/lib/db/db.base.ts
 create mode 100644 app/src/lib/db/db.customSources.ts
 create mode 100644 app/src/lib/db/db.utils.ts
 create mode 100644 app/src/lib/server/firebase-admin/index.ts

diff --git a/app/src/lib/components/custom-source/CustomSources.svelte b/app/src/lib/components/custom-source/CustomSources.svelte
index 5e85ab1..dc65e5b 100644
--- a/app/src/lib/components/custom-source/CustomSources.svelte
+++ b/app/src/lib/components/custom-source/CustomSources.svelte
@@ -2,15 +2,9 @@
 	import { getCustomSources } from '@/stores/customSources.svelte';
 	import * as Accordion from '../ui/accordion';
 	import RenderWebContent from './RenderWebContent.svelte';
-	import { env } from '@env';
-	import type { Sources } from '@/stores/customSources.svelte';
-	import { getSessionContext } from '@/stores/sessionContext.svelte';
-	import { browser } from '$app/environment';
 
-	const { sessionId$ } = getSessionContext();
 	const { sources$ } = getCustomSources();
 
-	$: sessionId = $sessionId$;
 	$: sources = $sources$?.sort((a, b) => {
 		if (a.created_at && b.created_at) {
 			return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
@@ -18,21 +12,6 @@
 		return 0;
 	});
 
-	$: if (browser) getCustomSource(sessionId).then((d) => sources$.set(d));
-
-	async function getCustomSource(sessionId: string) {
-		return fetch(`${env.API_BASE_URL}/get-custom-sources`, {
-			method: 'POST',
-			body: JSON.stringify({ sessionId }),
-			headers: { 'Content-Type': 'application/json' }
-		})
-			.then<Sources[]>((res) => {
-				if (res.ok) return res.json();
-				throw new Error('Error fetching custom sources');
-			})
-			.catch(() => [] as Sources[]);
-	}
-
 	function truncate(str: string, n: number) {
 		return str.length > n ? str.substring(0, n - 1) + '...' : str;
 	}
diff --git a/app/src/lib/db/db.base.ts b/app/src/lib/db/db.base.ts
new file mode 100644
index 0000000..ba7a468
--- /dev/null
+++ b/app/src/lib/db/db.base.ts
@@ -0,0 +1,4 @@
+export const colPaths = {
+	audiora_sessions: 'audiora_sessions',
+	custom_sources: 'custom_sources'
+};
diff --git a/app/src/lib/db/db.customSources.ts b/app/src/lib/db/db.customSources.ts
new file mode 100644
index 0000000..5c2e78a
--- /dev/null
+++ b/app/src/lib/db/db.customSources.ts
@@ -0,0 +1,24 @@
+import { orderBy, where, type CollectionReference } from 'firebase/firestore';
+import { distinctUntilChanged, shareReplay, of, catchError, switchMap, startWith } from 'rxjs';
+import { dbRefs } from '@/services/firebase';
+import { equals } from 'ramda';
+import { collectionData, getQueryConstraints } from './db.utils';
+import type { Sources } from '@/stores/customSources.svelte';
+
+export const getCustomSources$ = (sessionId: string) => {
+	const colRef = dbRefs.colRef(
+		`audiora_sessions/${sessionId}/custom_sources`
+	) as CollectionReference<Sources>;
+
+	const colData = collectionData(
+		getQueryConstraints(colRef, where('sessionId', '==', sessionId), orderBy('created_at', 'asc'))
+	);
+
+	return colData.pipe(
+		switchMap((v) => of(v)),
+		distinctUntilChanged((a, b) => equals(a, b)),
+		shareReplay(1),
+		catchError(() => of(null)),
+		startWith(null)
+	);
+};
diff --git a/app/src/lib/db/db.utils.ts b/app/src/lib/db/db.utils.ts
new file mode 100644
index 0000000..5e895dd
--- /dev/null
+++ b/app/src/lib/db/db.utils.ts
@@ -0,0 +1,48 @@
+import {
+	type CollectionReference,
+	type DocumentData,
+	type DocumentReference,
+	type QueryConstraint,
+	type Query,
+	onSnapshot,
+	query
+} from 'firebase/firestore';
+import { Observable } from 'rxjs';
+
+let DEFAULT_OPTIONS = { includeMetadataChanges: false };
+
+export const docData = <T>(
+	docRef: DocumentReference<T, DocumentData>,
+	options = DEFAULT_OPTIONS
+): Observable<T> =>
+	new Observable((subscriber) => {
+		let unsubscribe = onSnapshot(docRef, options, {
+			next: (snap) => {
+				if (snap.exists()) {
+					subscriber.next(snap.data() as NonNullable<T>);
+				} else {
+					subscriber.next(null as T);
+				}
+			},
+			error: subscriber.error.bind(subscriber),
+			complete: subscriber.complete.bind(subscriber)
+		});
+		return { unsubscribe };
+	});
+
+export const collectionData = <T>(query: Query<T>, options = DEFAULT_OPTIONS): Observable<T[]> =>
+	new Observable((subscriber) => {
+		let unsubscribe = onSnapshot(query, options, {
+			next: (snap) => {
+				subscriber.next(snap.docs.map((doc) => doc.data() as NonNullable<T>));
+			},
+			error: subscriber.error.bind(subscriber),
+			complete: subscriber.complete.bind(subscriber)
+		});
+		return { unsubscribe };
+	});
+
+export const getQueryConstraints = <T>(
+	colRef: CollectionReference<T>,
+	...queryConstraint: QueryConstraint[]
+) => query(colRef, ...queryConstraint);
diff --git a/app/src/lib/server/firebase-admin/index.ts b/app/src/lib/server/firebase-admin/index.ts
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/app/src/lib/server/firebase-admin/index.ts
@@ -0,0 +1 @@
+export {};
diff --git a/app/src/lib/stores/customSources.svelte.ts b/app/src/lib/stores/customSources.svelte.ts
index d882aaa..ad0b68e 100644
--- a/app/src/lib/stores/customSources.svelte.ts
+++ b/app/src/lib/stores/customSources.svelte.ts
@@ -1,5 +1,5 @@
+import { getCustomSources$ } from '@/db/db.customSources';
 import { setContext, getContext } from 'svelte';
-import { writable } from 'svelte/store';
 
 export type LinkSources = {
 	type: 'link';
@@ -19,15 +19,10 @@ export type Sources = (LinkSources | CopyPasteSources) & {
 
 const CONTEXT_KEY = {};
 
-export const setCustomSources = (_sessionId: string) => {
-	const sources$ = writable<Sources[] | null>(null);
-
+export const setCustomSources = (sessionId: string) => {
+	const sources$ = getCustomSources$(sessionId);
 	return setContext(CONTEXT_KEY, {
-		sources$,
-		addSource: (source: Sources) => {
-			sources$.update((sources) => (!sources ? sources : [...sources, source]));
-			return sources$;
-		}
+		sources$
 	});
 };
 

From a35895470b0a35ee69972b09e6fb6f16a17b3935 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Thu, 21 Nov 2024 23:25:01 +0000
Subject: [PATCH 21/45] add firebase.json and optimize_deps

---
 app/src/hooks.server.ts | 1 +
 app/vite.config.ts      | 9 ++++++++-
 firebase.json           | 8 ++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 firebase.json

diff --git a/app/src/hooks.server.ts b/app/src/hooks.server.ts
index 956ecb8..79b78e9 100644
--- a/app/src/hooks.server.ts
+++ b/app/src/hooks.server.ts
@@ -1,3 +1,4 @@
+import 'dotenv/config';
 import type { HandleServerError, Handle } from '@sveltejs/kit';
 import { sequence } from '@sveltejs/kit/hooks';
 import ejs from 'ejs';
diff --git a/app/vite.config.ts b/app/vite.config.ts
index 9e1c9a1..3e9ac2e 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -19,6 +19,13 @@ export default defineConfig({
 		noExternal: ['ramda', 'bits-ui']
 	},
 	optimizeDeps: {
-		include: ['copy-to-clipboard']
+		include: [
+			'copy-to-clipboard',
+			'firebase/app',
+			'firebase/analytics',
+			'firebase/firestore',
+			'firebase/auth',
+			'firebase/storage'
+		]
 	}
 });
diff --git a/firebase.json b/firebase.json
new file mode 100644
index 0000000..71b1b29
--- /dev/null
+++ b/firebase.json
@@ -0,0 +1,8 @@
+{
+    "emulators": {
+        "ui": {
+            "enabled": false,
+            "port": 4000
+        }
+    }
+}
\ No newline at end of file

From 4f8e2d7539f8743699edb83853ddc42124ec0c8a Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 00:00:33 +0000
Subject: [PATCH 22/45] parse firebase_config env variable in vite.config

---
 app/src/env/setup.js                   |  3 +--
 app/src/lib/services/firebase/index.ts | 12 ++++++------
 app/src/routes/chat/+layout.server.ts  |  1 +
 app/vite.config.ts                     |  3 +--
 4 files changed, 9 insertions(+), 10 deletions(-)
 create mode 100644 app/src/routes/chat/+layout.server.ts

diff --git a/app/src/env/setup.js b/app/src/env/setup.js
index 110b0a0..5d217af 100644
--- a/app/src/env/setup.js
+++ b/app/src/env/setup.js
@@ -4,6 +4,5 @@ export const env = {
 	VERSION: process.env.VERSION,
 	BUILD_TIME: new Date().toString(),
 	API_BASE_URL: process.env.API_BASE_URL,
-	IMGPROXY_URL: process.env.IMGPROXY_URL,
-	FIREBASE_CONFIG: process.env.FIREBASE_CONFIG
+	IMGPROXY_URL: process.env.IMGPROXY_URL
 };
diff --git a/app/src/lib/services/firebase/index.ts b/app/src/lib/services/firebase/index.ts
index c773222..d4fec3d 100644
--- a/app/src/lib/services/firebase/index.ts
+++ b/app/src/lib/services/firebase/index.ts
@@ -1,16 +1,16 @@
-import { initializeApp } from 'firebase/app';
+import { initializeApp, getApps } from 'firebase/app';
 import { initializeFirestore } from 'firebase/firestore';
 import { refs } from './firebase.firestore';
-import { browser } from '$app/environment';
-import { env } from '@env';
 import { initAnalytics } from './firebase.analytics';
+import { browser } from '$app/environment';
 
-export const app = initializeApp(env.FIREBASE_CONFIG);
+// Initialize Firebase
+export const app = getApps()[0] || initializeApp(process.env.FIREBASE_CONFIG);
 export const firestore = initializeFirestore(app, {
 	experimentalAutoDetectLongPolling: browser,
 	localCache: browser ? { kind: 'persistent' } : void 0
 });
 
-export const dbRefs = refs(firestore);
-
 initAnalytics(app);
+export const analytics = initAnalytics(app);
+export const dbRefs = refs(firestore);
diff --git a/app/src/routes/chat/+layout.server.ts b/app/src/routes/chat/+layout.server.ts
new file mode 100644
index 0000000..a3d1578
--- /dev/null
+++ b/app/src/routes/chat/+layout.server.ts
@@ -0,0 +1 @@
+export const ssr = false;
diff --git a/app/vite.config.ts b/app/vite.config.ts
index 3e9ac2e..52f76b2 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -8,8 +8,7 @@ export default defineConfig({
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	},
 	define: {
-		'process.env.USE_EMULATORS': `'${process.env.USE_EMULATORS || false}'`,
-		'process.env.FIREBASE_CONFIG': `'${process.env.FIREBASE_CONFIG || {}}'`,
+		'process.env.FIREBASE_CONFIG': process.env.FIREBASE_CONFIG,
 		...defineEnv()
 	},
 	build: {

From b2389a6c92e8e485553424d45c7eed2e920e8d5b Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 00:01:25 +0000
Subject: [PATCH 23/45] define .firebaserc

---
 .firebaserc | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .firebaserc

diff --git a/.firebaserc b/.firebaserc
new file mode 100644
index 0000000..6ddcd7f
--- /dev/null
+++ b/.firebaserc
@@ -0,0 +1,3 @@
+{
+    "projects": {}
+}
\ No newline at end of file

From 873934bb1075ba2478ce8ecb1b2e5a79565b6b23 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 00:27:24 +0000
Subject: [PATCH 24/45] update custom_source model; add toast notification

---
 api/src/utils/generate_custom_source.py       | 10 ++++--
 .../components/ManageAudioSourceDrawer.svelte | 35 +++++++++----------
 .../custom-source/CustomSources.svelte        |  2 +-
 app/src/lib/db/db.customSources.ts            |  6 ++--
 app/src/lib/stores/customSources.svelte.ts    |  6 ++--
 5 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/api/src/utils/generate_custom_source.py b/api/src/utils/generate_custom_source.py
index c1b9f5d..e1438cf 100644
--- a/api/src/utils/generate_custom_source.py
+++ b/api/src/utils/generate_custom_source.py
@@ -1,4 +1,4 @@
-from typing import Optional, cast
+from typing import Literal, Optional, cast
 
 from fastapi import BackgroundTasks
 from pydantic import BaseModel
@@ -21,6 +21,8 @@ class GetCustomSourcesRequest(BaseModel):
 
 
 class CustomSourceModel(URLContent):
+    url: str
+    source_type: Literal["link", "copy/paste"]
     created_at: Optional[str] = None
     updated_at: Optional[str] = None
 
@@ -82,7 +84,11 @@ async def generate_custom_source(request: GenerateCustomSourceRequest, backgroun
     page_content = await extractor._extract(request.url)
 
     async def save_to_firestore():
-        custom_source = CustomSourceModel(**page_content.model_dump())
+        custom_source = CustomSourceModel(
+            **page_content.model_dump(),
+            url=request.url,
+            source_type="link",
+        )
         manager = CustomSourceManager(request.sessionId)
         manager._set_custom_source(custom_source)
 
diff --git a/app/src/lib/components/ManageAudioSourceDrawer.svelte b/app/src/lib/components/ManageAudioSourceDrawer.svelte
index bb8b7e0..4cc3af1 100644
--- a/app/src/lib/components/ManageAudioSourceDrawer.svelte
+++ b/app/src/lib/components/ManageAudioSourceDrawer.svelte
@@ -4,15 +4,14 @@
 	import * as Accordion from './ui/accordion';
 	import { PlusIcon } from 'lucide-svelte';
 	import AddCustomSource from './custom-source/AddCustomSource.svelte';
-	import { getCustomSources, type Sources } from '@/stores/customSources.svelte';
 	import { env } from '@env';
 	import RenderAudioSources from './RenderAudioSources.svelte';
 	import { getSessionContext } from '@/stores/sessionContext.svelte';
+	import { toast } from 'svelte-sonner';
 
 	export let aiSource: string;
 
 	const { sessionId$ } = getSessionContext();
-	const { addSource } = getCustomSources();
 
 	let snapPoints = [0.75, 0.95];
 	let activeSnapPoint = snapPoints[0];
@@ -32,29 +31,27 @@
 		if (fetchingSource) return;
 
 		fetchingSource = true;
-		const result = await fetchURLContent(url).catch(console.error);
-		fetchingSource = false;
-
-		accordionResetKey = {};
-		if (result) addSource(result);
+		return fetchURLContent(url)
+			.then(() => toast.success('Custom source added successfully'))
+			.catch((e) => {
+				console.error(e);
+				toast.error('Failed to add custom source', { description: e.message });
+			})
+			.finally(() => {
+				fetchingSource = false;
+				accordionResetKey = {};
+			});
 	}
 
-	async function fetchURLContent(url: string): Promise<Sources> {
+	async function fetchURLContent(url: string) {
 		return fetch(`${env.API_BASE_URL}/generate-custom-source`, {
 			method: 'POST',
 			body: JSON.stringify({ url, sessionId }),
 			headers: { 'Content-Type': 'application/json' }
-		})
-			.then<{
-				id: string;
-				content: string;
-				content_type: Sources['content_type'];
-				metadata: Record<string, any>;
-			}>((res) => {
-				if (res.ok) return res.json();
-				throw new Error('Failed to fetch');
-			})
-			.then((data) => ({ ...data, type: 'link', url }));
+		}).then((res) => {
+			if (res.ok) return res.json();
+			throw new Error('Failed to fetch');
+		});
 	}
 </script>
 
diff --git a/app/src/lib/components/custom-source/CustomSources.svelte b/app/src/lib/components/custom-source/CustomSources.svelte
index dc65e5b..10a2d51 100644
--- a/app/src/lib/components/custom-source/CustomSources.svelte
+++ b/app/src/lib/components/custom-source/CustomSources.svelte
@@ -30,7 +30,7 @@
 					<span class="shrink-0 inline-flex">
 						Custom Source {idx + 1}
 					</span>
-					{#if source.type === 'link'}
+					{#if source.source_type === 'link'}
 						{':'}
 						<span class="text-gray-400 text-start ml-1">
 							{truncate(source.url, 45)}
diff --git a/app/src/lib/db/db.customSources.ts b/app/src/lib/db/db.customSources.ts
index 5c2e78a..972d1f2 100644
--- a/app/src/lib/db/db.customSources.ts
+++ b/app/src/lib/db/db.customSources.ts
@@ -1,4 +1,4 @@
-import { orderBy, where, type CollectionReference } from 'firebase/firestore';
+import { orderBy, type CollectionReference } from 'firebase/firestore';
 import { distinctUntilChanged, shareReplay, of, catchError, switchMap, startWith } from 'rxjs';
 import { dbRefs } from '@/services/firebase';
 import { equals } from 'ramda';
@@ -10,9 +10,7 @@ export const getCustomSources$ = (sessionId: string) => {
 		`audiora_sessions/${sessionId}/custom_sources`
 	) as CollectionReference<Sources>;
 
-	const colData = collectionData(
-		getQueryConstraints(colRef, where('sessionId', '==', sessionId), orderBy('created_at', 'asc'))
-	);
+	const colData = collectionData(getQueryConstraints(colRef, orderBy('created_at', 'asc')));
 
 	return colData.pipe(
 		switchMap((v) => of(v)),
diff --git a/app/src/lib/stores/customSources.svelte.ts b/app/src/lib/stores/customSources.svelte.ts
index ad0b68e..36d3c63 100644
--- a/app/src/lib/stores/customSources.svelte.ts
+++ b/app/src/lib/stores/customSources.svelte.ts
@@ -2,19 +2,19 @@ import { getCustomSources$ } from '@/db/db.customSources';
 import { setContext, getContext } from 'svelte';
 
 export type LinkSources = {
-	type: 'link';
+	source_type: 'link';
 	url: string;
 };
 
 export type CopyPasteSources = {
-	type: 'copy/paste';
+	source_type: 'copy/paste';
 };
 
 export type Sources = (LinkSources | CopyPasteSources) & {
 	id: string;
 	content_type: 'text/plain' | 'text/html' | 'application/pdf';
 	content: string;
-	created_at: string;
+	created_at?: string;
 };
 
 const CONTEXT_KEY = {};

From 68dbc6e014d1999f80e4dec4eea13994c66ac5b6 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 00:36:03 +0000
Subject: [PATCH 25/45] consolidate and cleanup

---
 .../custom-source/CustomSources.svelte        | 10 +++----
 app/src/lib/db/db.customSources.ts            | 17 ++++++++++-
 app/src/lib/stores/customSources.svelte.ts    | 30 -------------------
 app/src/lib/stores/sessionContext.svelte.ts   |  2 ++
 app/src/routes/+layout.svelte                 |  2 --
 .../[sessionId=sessionId]/+page.svelte        |  4 ++-
 6 files changed, 26 insertions(+), 39 deletions(-)
 delete mode 100644 app/src/lib/stores/customSources.svelte.ts

diff --git a/app/src/lib/components/custom-source/CustomSources.svelte b/app/src/lib/components/custom-source/CustomSources.svelte
index 10a2d51..462a0d3 100644
--- a/app/src/lib/components/custom-source/CustomSources.svelte
+++ b/app/src/lib/components/custom-source/CustomSources.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { getCustomSources } from '@/stores/customSources.svelte';
 	import * as Accordion from '../ui/accordion';
 	import RenderWebContent from './RenderWebContent.svelte';
+	import { getSessionContext } from '@/stores/sessionContext.svelte';
 
-	const { sources$ } = getCustomSources();
+	const { customSources$ } = getSessionContext();
 
-	$: sources = $sources$?.sort((a, b) => {
+	$: customSources = $customSources$?.sort((a, b) => {
 		if (a.created_at && b.created_at) {
 			return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
 		}
@@ -17,13 +17,13 @@
 	}
 </script>
 
-{#if sources == null}
+{#if customSources == null}
 	<div class="flex flex-col gap-y-0.5 pt-0.5 w-full">
 		<div class="h-14 w-full bg-gray-800 animate-pulse" />
 		<div class="h-14 w-full bg-gray-800 animate-pulse" />
 	</div>
 {:else}
-	{#each sources as source, idx (source.id)}
+	{#each customSources as source, idx (source.id)}
 		<Accordion.Item value={source.id} class="border-gray-800">
 			<Accordion.Trigger>
 				<div class="inline-flex break-words text-wrap">
diff --git a/app/src/lib/db/db.customSources.ts b/app/src/lib/db/db.customSources.ts
index 972d1f2..6a9d627 100644
--- a/app/src/lib/db/db.customSources.ts
+++ b/app/src/lib/db/db.customSources.ts
@@ -3,7 +3,22 @@ import { distinctUntilChanged, shareReplay, of, catchError, switchMap, startWith
 import { dbRefs } from '@/services/firebase';
 import { equals } from 'ramda';
 import { collectionData, getQueryConstraints } from './db.utils';
-import type { Sources } from '@/stores/customSources.svelte';
+
+export type LinkSources = {
+	source_type: 'link';
+	url: string;
+};
+
+export type CopyPasteSources = {
+	source_type: 'copy/paste';
+};
+
+export type Sources = (LinkSources | CopyPasteSources) & {
+	id: string;
+	content_type: 'text/plain' | 'text/html' | 'application/pdf';
+	content: string;
+	created_at?: string;
+};
 
 export const getCustomSources$ = (sessionId: string) => {
 	const colRef = dbRefs.colRef(
diff --git a/app/src/lib/stores/customSources.svelte.ts b/app/src/lib/stores/customSources.svelte.ts
deleted file mode 100644
index 36d3c63..0000000
--- a/app/src/lib/stores/customSources.svelte.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { getCustomSources$ } from '@/db/db.customSources';
-import { setContext, getContext } from 'svelte';
-
-export type LinkSources = {
-	source_type: 'link';
-	url: string;
-};
-
-export type CopyPasteSources = {
-	source_type: 'copy/paste';
-};
-
-export type Sources = (LinkSources | CopyPasteSources) & {
-	id: string;
-	content_type: 'text/plain' | 'text/html' | 'application/pdf';
-	content: string;
-	created_at?: string;
-};
-
-const CONTEXT_KEY = {};
-
-export const setCustomSources = (sessionId: string) => {
-	const sources$ = getCustomSources$(sessionId);
-	return setContext(CONTEXT_KEY, {
-		sources$
-	});
-};
-
-export type CustomSourcesType = ReturnType<typeof setCustomSources>;
-export const getCustomSources = () => getContext<CustomSourcesType>(CONTEXT_KEY);
diff --git a/app/src/lib/stores/sessionContext.svelte.ts b/app/src/lib/stores/sessionContext.svelte.ts
index 7c372c7..6ef8864 100644
--- a/app/src/lib/stores/sessionContext.svelte.ts
+++ b/app/src/lib/stores/sessionContext.svelte.ts
@@ -1,3 +1,4 @@
+import { getCustomSources$ } from '@/db/db.customSources';
 import type { ContentCategory } from '@/utils/types';
 import { setContext, getContext } from 'svelte';
 import { persisted } from 'svelte-persisted-store';
@@ -37,6 +38,7 @@ export function setSessionContext(sessionId: string) {
 		sessionCompleted$,
 		fetchingSource$,
 		audioSource$,
+		customSources$: getCustomSources$(sessionId),
 		startSession: (category: ContentCategory) => {
 			session$.set({
 				id: sessionId,
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index afaef8a..4fd7a7a 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -11,7 +11,6 @@
 	import { page } from '$app/stores';
 	import Spinner from '@/components/Spinner.svelte';
 	import { setAppContext } from '@/stores/appContext.svelte';
-	import { setCustomSources } from '@/stores/customSources.svelte';
 
 	export let data;
 
@@ -19,7 +18,6 @@
 
 	$: setAppContext();
 	$: setSessionContext(sessionId);
-	$: setCustomSources(sessionId);
 </script>
 
 <svelte:head>
diff --git a/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte b/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
index 2a4ac1e..f19e00f 100644
--- a/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
+++ b/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
@@ -34,12 +34,14 @@
 	import AudiocastPageSkeletonLoader from '@/components/AudiocastPageSkeletonLoader.svelte';
 	import RenderAudioSources from '@/components/RenderAudioSources.svelte';
 
-	const { session$ } = getSessionContext();
+	const { session$, customSources$ } = getSessionContext();
 
 	let generating = false;
 
 	$: sessionId = $page.params.sessionId;
 
+	$: $customSources$;
+
 	async function generateAudiocast(sessionId: string, category: ContentCategory, summary: string) {
 		if (generating) return;
 		generating = true;

From 9ba2940061fcb018cbef67c5010a5f380be1791f Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 00:52:07 +0000
Subject: [PATCH 26/45] wip: create workflow to store copy/paste source

---
 .../components/ManageAudioSourceDrawer.svelte | 24 ++++++++++++-------
 .../custom-source/AddCustomSource.svelte      | 10 ++++----
 .../custom-source/CopyPasteSource.svelte      | 21 +++++++++++++---
 ...svelte => GeneratingSourceSkeleton.svelte} |  0
 .../[sessionId=sessionId]/+page.svelte        |  4 +++-
 app/src/routes/chat/+layout.server.ts         |  1 -
 6 files changed, 41 insertions(+), 19 deletions(-)
 rename app/src/lib/components/custom-source/{FetchingSourceSkeleton.svelte => GeneratingSourceSkeleton.svelte} (100%)
 delete mode 100644 app/src/routes/chat/+layout.server.ts

diff --git a/app/src/lib/components/ManageAudioSourceDrawer.svelte b/app/src/lib/components/ManageAudioSourceDrawer.svelte
index 4cc3af1..62d90e3 100644
--- a/app/src/lib/components/ManageAudioSourceDrawer.svelte
+++ b/app/src/lib/components/ManageAudioSourceDrawer.svelte
@@ -15,7 +15,7 @@
 
 	let snapPoints = [0.75, 0.95];
 	let activeSnapPoint = snapPoints[0];
-	let fetchingSource = false;
+	let generatingSource = false;
 
 	let accordionResetKey = {};
 
@@ -27,23 +27,23 @@
 		}
 	}
 
-	async function getURLContent(url: string) {
-		if (fetchingSource) return;
+	async function createURLContent(url: string) {
+		if (generatingSource) return;
 
-		fetchingSource = true;
-		return fetchURLContent(url)
+		generatingSource = true;
+		return generateURLSource(url)
 			.then(() => toast.success('Custom source added successfully'))
 			.catch((e) => {
 				console.error(e);
 				toast.error('Failed to add custom source', { description: e.message });
 			})
 			.finally(() => {
-				fetchingSource = false;
+				generatingSource = false;
 				accordionResetKey = {};
 			});
 	}
 
-	async function fetchURLContent(url: string) {
+	async function generateURLSource(url: string) {
 		return fetch(`${env.API_BASE_URL}/generate-custom-source`, {
 			method: 'POST',
 			body: JSON.stringify({ url, sessionId }),
@@ -53,6 +53,11 @@
 			throw new Error('Failed to fetch');
 		});
 	}
+
+	async function createCopyPasteContent(text: string) {
+		if (generatingSource) return;
+		generatingSource = true;
+	}
 </script>
 
 <Drawer.Root {snapPoints} bind:activeSnapPoint direction="bottom" dismissible shouldScaleBackground>
@@ -91,8 +96,9 @@
 								</Accordion.Trigger>
 								<Accordion.Content class="accordion-content">
 									<AddCustomSource
-										{fetchingSource}
-										on:submitURL={({ detail }) => getURLContent(detail.url)}
+										{generatingSource}
+										on:submitURL={({ detail }) => createURLContent(detail.url)}
+										on:submitCopyPaste={({ detail }) => createCopyPasteContent(detail.text)}
 									/>
 								</Accordion.Content>
 							</Accordion.Item>
diff --git a/app/src/lib/components/custom-source/AddCustomSource.svelte b/app/src/lib/components/custom-source/AddCustomSource.svelte
index bda1fa7..850cbc4 100644
--- a/app/src/lib/components/custom-source/AddCustomSource.svelte
+++ b/app/src/lib/components/custom-source/AddCustomSource.svelte
@@ -2,21 +2,21 @@
 	import AddCustomSourceForm from './AddCustomSourceForm.svelte';
 	import WebsiteURLSource from './WebsiteURLSource.svelte';
 	import CopyPasteSource from './CopyPasteSource.svelte';
-	import FetchingSourceSkeleton from './FetchingSourceSkeleton.svelte';
+	import GeneratingSourceSkeleton from './GeneratingSourceSkeleton.svelte';
 
-	export let fetchingSource = false;
+	export let generatingSource = false;
 
 	let showWebsiteURLForm = false;
 	let showCopyPasteForm = false;
 </script>
 
 <div class="h-full bg-gray-950 pt-2">
-	{#if fetchingSource}
-		<FetchingSourceSkeleton />
+	{#if generatingSource}
+		<GeneratingSourceSkeleton />
 	{:else if showWebsiteURLForm}
 		<WebsiteURLSource on:closeWebsiteURL={() => (showWebsiteURLForm = false)} on:submitURL />
 	{:else if showCopyPasteForm}
-		<CopyPasteSource on:closeCopyPaste={() => (showCopyPasteForm = false)} />
+		<CopyPasteSource on:closeCopyPaste={() => (showCopyPasteForm = false)} on:submitCopyPaste />
 	{:else}
 		<AddCustomSourceForm
 			on:useWebsiteURL={() => (showWebsiteURLForm = true)}
diff --git a/app/src/lib/components/custom-source/CopyPasteSource.svelte b/app/src/lib/components/custom-source/CopyPasteSource.svelte
index 34fe5e6..7b7f8dc 100644
--- a/app/src/lib/components/custom-source/CopyPasteSource.svelte
+++ b/app/src/lib/components/custom-source/CopyPasteSource.svelte
@@ -4,9 +4,13 @@
 	import { Button } from '../ui/button';
 	import { Card, CardContent, CardHeader } from '../ui/card';
 	import { Textarea } from '../ui/textarea';
-	import { Input } from '../ui/input';
 
-	const dispatch = createEventDispatcher<{ closeCopyPaste: void }>();
+	const dispatch = createEventDispatcher<{
+		submitCopyPaste: { text: string };
+		closeCopyPaste: void;
+	}>();
+
+	let text = '';
 </script>
 
 <Card class="max-w-2xl mx-auto bg-gray-900 border-gray-800">
@@ -43,6 +47,7 @@
 			<div class="relative">
 				<Textarea
 					id="text"
+					bind:value={text}
 					class="min-h-56 ring-0 focus:ring-0 focus-visible:ring-0 text-base bg-gray-900 border-blue-400/50 focus:border-blue-400 text-white resize-none"
 					placeholder=""
 				/>
@@ -58,7 +63,17 @@
 			</div>
 
 			<div class="flex justify-end">
-				<Button class="bg-blue-500 text-base px-8 text-blue-100 hover:bg-blue-600">Insert</Button>
+				<Button
+					on:click={() => {
+						dispatch('submitCopyPaste', { text });
+						requestAnimationFrame(() => {
+							dispatch('closeCopyPaste');
+						});
+					}}
+					disabled={!text}
+					class="bg-blue-500 text-base px-8 text-blue-100 hover:bg-blue-600"
+					>Insert
+				</Button>
 			</div>
 		</div></CardContent
 	>
diff --git a/app/src/lib/components/custom-source/FetchingSourceSkeleton.svelte b/app/src/lib/components/custom-source/GeneratingSourceSkeleton.svelte
similarity index 100%
rename from app/src/lib/components/custom-source/FetchingSourceSkeleton.svelte
rename to app/src/lib/components/custom-source/GeneratingSourceSkeleton.svelte
diff --git a/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte b/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
index f19e00f..f788fe6 100644
--- a/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
+++ b/app/src/routes/audiocast/[sessionId=sessionId]/+page.svelte
@@ -120,7 +120,9 @@
 				<Accordion.Item value="item-1" class="border-gray-800">
 					<Accordion.Trigger>Audio Transcript</Accordion.Trigger>
 					<Accordion.Content>
-						<article class="flex w-full flex-col gap-y-3 p-2 bg-gray-900/70 text-gray-300">
+						<article
+							class="flex max-h-96 overflow-y-auto w-full flex-col gap-y-3 p-2 bg-gray-900/70 text-gray-300"
+						>
 							{#await parse(parseScript(data.script)) then parsedContent}
 								{@html parsedContent}
 							{/await}
diff --git a/app/src/routes/chat/+layout.server.ts b/app/src/routes/chat/+layout.server.ts
deleted file mode 100644
index a3d1578..0000000
--- a/app/src/routes/chat/+layout.server.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const ssr = false;

From f8f4c44d024d075c24f3c8a7c304c3da2412dc9f Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 07:47:32 +0000
Subject: [PATCH 27/45] add useful helpers to CustomSourceManager

---
 api/src/utils/generate_custom_source.py | 41 ++++++++++++++++---------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/api/src/utils/generate_custom_source.py b/api/src/utils/generate_custom_source.py
index e1438cf..5135e69 100644
--- a/api/src/utils/generate_custom_source.py
+++ b/api/src/utils/generate_custom_source.py
@@ -1,6 +1,7 @@
 from typing import Literal, Optional, cast
 
 from fastapi import BackgroundTasks
+from google.cloud.firestore_v1 import DocumentReference
 from pydantic import BaseModel
 
 from src.services.firestore_sdk import (
@@ -20,6 +21,11 @@ class GetCustomSourcesRequest(BaseModel):
     sessionId: str
 
 
+class DeleteCustomSourcesRequest(BaseModel):
+    sessionId: str
+    sourceId: str
+
+
 class CustomSourceModel(URLContent):
     url: str
     source_type: Literal["link", "copy/paste"]
@@ -42,32 +48,36 @@ def _check_document(self):
             raise Exception("Session not found")
         return doc
 
-    def _set_custom_source(self, data: CustomSourceModel):
-        self._check_document()
-
-        doc_ref = self._get_collection(self.collection).document(self.doc_id)
-        return (
-            doc_ref.collection(self.sub_collection)
-            .document(data.id)
-            .set({**(data.model_dump()), "created_at": self._timestamp, "updated_at": self._timestamp})
-        )
-
-    def _get_custom_source(self, source_id: str) -> CustomSourceModel:
+    def _get_doc_ref(self, source_id: str) -> DocumentReference:
         self._check_document()
         return (
             self._get_collection(self.collection)
             .document(self.doc_id)
             .collection(self.sub_collection)
             .document(source_id)
-            .get()
         )
 
+    def _set_custom_source(self, data: CustomSourceModel):
+        return self._get_doc_ref(data.id).set(
+            {
+                **(data.model_dump()),
+                "created_at": self._timestamp,
+                "updated_at": self._timestamp,
+            }
+        )
+
+    def _get_custom_source(self, source_id: str) -> CustomSourceModel | None:
+        doc = self._get_doc_ref(source_id).get()
+        data = doc.to_dict()
+        if doc.exists and data:
+            return cast(CustomSourceModel, self._safe_to_dict(data))
+
     def _get_custom_sources(self):
         self._check_document()
 
         try:
-            doc_ref = self._get_collection(self.collection).document(self.doc_id)
-            docs = doc_ref.collection(self.sub_collection).get()
+            session_ref = self._get_collection(self.collection).document(self.doc_id)
+            docs = session_ref.collection(self.sub_collection).get()
             return [
                 cast(CustomSourceModel, self._safe_to_dict(doc.to_dict()))
                 for doc in docs
@@ -78,6 +88,9 @@ def _get_custom_sources(self):
             print(f"Error getting custom sources for Session: {self.doc_id}", e)
             return []
 
+    def _delete_custom_source(self, source_id: str):
+        return self._get_doc_ref(source_id).delete()
+
 
 async def generate_custom_source(request: GenerateCustomSourceRequest, background_tasks: BackgroundTasks):
     extractor = ExtractURLContent()

From e90a2fb678b90b80c386abfa0ed1bc2fcc4c03c3 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 08:09:34 +0000
Subject: [PATCH 28/45] add endpoint and request logic to add copy/paste source

---
 api/src/main.py                               | 29 ++++++++++++++-----
 api/src/utils/custom_sources/__init__.py      |  0
 .../generate_custom_source.py                 |  2 +-
 .../custom_sources/save_copied_source.py      | 22 ++++++++++++++
 .../components/ManageAudioSourceDrawer.svelte | 28 +++++++++---------
 5 files changed, 59 insertions(+), 22 deletions(-)
 create mode 100644 api/src/utils/custom_sources/__init__.py
 rename api/src/utils/{ => custom_sources}/generate_custom_source.py (99%)
 create mode 100644 api/src/utils/custom_sources/save_copied_source.py

diff --git a/api/src/main.py b/api/src/main.py
index de010a1..b95f582 100644
--- a/api/src/main.py
+++ b/api/src/main.py
@@ -13,6 +13,15 @@
     SessionChatItem,
     SessionChatRequest,
 )
+from src.utils.custom_sources.generate_custom_source import (
+    CustomSourceManager,
+    CustomSourceModel,
+    DeleteCustomSourcesRequest,
+    GenerateCustomSourceRequest,
+    GetCustomSourcesRequest,
+    generate_custom_source,
+)
+from src.utils.custom_sources.save_copied_source import CopiedPasteSourceRequest, save_copied_source
 from src.utils.extract_url_content import ExtractURLContent, ExtractURLContentRequest, URLContent
 from src.utils.generate_audiocast import (
     GenerateAudioCastRequest,
@@ -20,13 +29,6 @@
     generate_audiocast,
 )
 from src.utils.generate_audiocast_source import GenerateAudiocastSource, generate_audiocast_source
-from src.utils.generate_custom_source import (
-    CustomSourceManager,
-    CustomSourceModel,
-    GenerateCustomSourceRequest,
-    GetCustomSourcesRequest,
-    generate_custom_source,
-)
 from src.utils.get_audiocast import get_audiocast
 from src.utils.get_session_title import GetSessionTitleModel, get_session_title
 from src.utils.session_manager import SessionManager
@@ -171,3 +173,16 @@ async def generate_custom_source_endpoint(
 @app.post("/get-custom-sources", response_model=list[CustomSourceModel])
 async def get_custom_sources_endpoint(request: GetCustomSourcesRequest):
     return CustomSourceManager(request.sessionId)._get_custom_sources()
+
+
+@app.post("/delete-custom-source", response_model=list[CustomSourceModel])
+async def delete_custom_source_endpoint(request: DeleteCustomSourcesRequest):
+    manager = CustomSourceManager(request.sessionId)
+    manager._delete_custom_source(request.sourceId)
+    return "Deleted"
+
+
+@app.post("/save-copied-source", response_model=str)
+async def save_copied_source_endpoint(request: CopiedPasteSourceRequest):
+    result = save_copied_source(request)
+    return result
diff --git a/api/src/utils/custom_sources/__init__.py b/api/src/utils/custom_sources/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/api/src/utils/generate_custom_source.py b/api/src/utils/custom_sources/generate_custom_source.py
similarity index 99%
rename from api/src/utils/generate_custom_source.py
rename to api/src/utils/custom_sources/generate_custom_source.py
index 5135e69..a23f39e 100644
--- a/api/src/utils/generate_custom_source.py
+++ b/api/src/utils/custom_sources/generate_custom_source.py
@@ -27,8 +27,8 @@ class DeleteCustomSourcesRequest(BaseModel):
 
 
 class CustomSourceModel(URLContent):
-    url: str
     source_type: Literal["link", "copy/paste"]
+    url: Optional[str] = None
     created_at: Optional[str] = None
     updated_at: Optional[str] = None
 
diff --git a/api/src/utils/custom_sources/save_copied_source.py b/api/src/utils/custom_sources/save_copied_source.py
new file mode 100644
index 0000000..e39bb18
--- /dev/null
+++ b/api/src/utils/custom_sources/save_copied_source.py
@@ -0,0 +1,22 @@
+from uuid import uuid4
+
+from pydantic import BaseModel
+
+from .generate_custom_source import CustomSourceManager, CustomSourceModel
+
+
+class CopiedPasteSourceRequest(BaseModel):
+    sessionId: str
+    text: str
+
+
+def save_copied_source(request: CopiedPasteSourceRequest):
+    custom_source = CustomSourceModel(
+        id=str(uuid4()),
+        content=request.text,
+        content_type="text/plain",
+        source_type="copy/paste",
+    )
+
+    CustomSourceManager(request.sessionId)._set_custom_source(custom_source)
+    return "Saved"
diff --git a/app/src/lib/components/ManageAudioSourceDrawer.svelte b/app/src/lib/components/ManageAudioSourceDrawer.svelte
index 62d90e3..b478bbb 100644
--- a/app/src/lib/components/ManageAudioSourceDrawer.svelte
+++ b/app/src/lib/components/ManageAudioSourceDrawer.svelte
@@ -27,11 +27,19 @@
 		}
 	}
 
-	async function createURLContent(url: string) {
+	async function createSourceContent(endpoint: string, data: Record<string, any>) {
 		if (generatingSource) return;
-
 		generatingSource = true;
-		return generateURLSource(url)
+
+		return fetch(`${env.API_BASE_URL}/${endpoint}`, {
+			method: 'POST',
+			body: JSON.stringify(data),
+			headers: { 'Content-Type': 'application/json' }
+		})
+			.then((res) => {
+				if (res.ok) return res.json();
+				throw new Error('Failed to fetch');
+			})
 			.then(() => toast.success('Custom source added successfully'))
 			.catch((e) => {
 				console.error(e);
@@ -43,20 +51,12 @@
 			});
 	}
 
-	async function generateURLSource(url: string) {
-		return fetch(`${env.API_BASE_URL}/generate-custom-source`, {
-			method: 'POST',
-			body: JSON.stringify({ url, sessionId }),
-			headers: { 'Content-Type': 'application/json' }
-		}).then((res) => {
-			if (res.ok) return res.json();
-			throw new Error('Failed to fetch');
-		});
+	async function createURLContent(url: string) {
+		return createSourceContent('generate-custom-source', { url, sessionId });
 	}
 
 	async function createCopyPasteContent(text: string) {
-		if (generatingSource) return;
-		generatingSource = true;
+		return createSourceContent('save-copied-source', { text, sessionId });
 	}
 </script>
 

From dbcc9925de3dc17d1a4892a9408b704c653c22e8 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 08:13:20 +0000
Subject: [PATCH 29/45] improve the layouts of copypast_source and
 website_url_source forms

---
 .../custom-source/CopyPasteSource.svelte      | 104 ++++++++---------
 .../custom-source/WebsiteURLSource.svelte     | 108 +++++++++---------
 2 files changed, 108 insertions(+), 104 deletions(-)

diff --git a/app/src/lib/components/custom-source/CopyPasteSource.svelte b/app/src/lib/components/custom-source/CopyPasteSource.svelte
index 7b7f8dc..23fa2dd 100644
--- a/app/src/lib/components/custom-source/CopyPasteSource.svelte
+++ b/app/src/lib/components/custom-source/CopyPasteSource.svelte
@@ -13,68 +13,70 @@
 	let text = '';
 </script>
 
-<Card class="max-w-2xl mx-auto bg-gray-900 border-gray-800">
-	<CardHeader>
-		<div class="flex items-center justify-between">
-			<div class="flex items-center gap-2">
+<div class="bg-gray-900 border-gray-800 w-full rounded-md">
+	<Card class="max-w-2xl mx-auto border-none bg-transparent">
+		<CardHeader>
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-2">
+					<Button
+						variant="ghost"
+						size="icon"
+						class="text-gray-400 hover:text-white"
+						on:click={() => dispatch('closeCopyPaste')}
+					>
+						<ArrowLeft class="h-5 w-5" />
+					</Button>
+					<h1 class="text-2xl font-normal">Paste copied text</h1>
+				</div>
 				<Button
 					variant="ghost"
 					size="icon"
 					class="text-gray-400 hover:text-white"
 					on:click={() => dispatch('closeCopyPaste')}
 				>
-					<ArrowLeft class="h-5 w-5" />
+					<X class="h-5 w-5" />
 				</Button>
-				<h1 class="text-2xl font-normal">Paste copied text</h1>
 			</div>
-			<Button
-				variant="ghost"
-				size="icon"
-				class="text-gray-400 hover:text-white"
-				on:click={() => dispatch('closeCopyPaste')}
-			>
-				<X class="h-5 w-5" />
-			</Button>
-		</div>
 
-		<p class="text-gray-400">Paste your copied text below to upload as a source</p>
-	</CardHeader>
+			<p class="text-gray-400">Paste your copied text below to upload as a source</p>
+		</CardHeader>
 
-	<CardContent class="flex flex-col gap-y-4">
-		<div class="flex flex-col gap-y-2">
-			<label for="url" class="text-blue-400">Paste Text here*</label>
+		<CardContent class="flex flex-col gap-y-4">
+			<div class="flex flex-col gap-y-2">
+				<label for="url" class="text-blue-400">Paste Text here*</label>
+
+				<div class="relative">
+					<Textarea
+						id="text"
+						bind:value={text}
+						class="min-h-56 ring-0 focus:ring-0 focus-visible:ring-0 text-base bg-gray-900 border-blue-400/50 focus:border-blue-400 text-white resize-none"
+						placeholder=""
+					/>
+					<div class="absolute bottom-3 right-3 flex items-center gap-1">
+						<Button
+							variant="ghost"
+							size="icon"
+							class="h-8 w-8 rounded-full bg-gray-800 hover:bg-gray-700"
+						>
+							<MessageCircle class="h-4 w-4" />
+						</Button>
+					</div>
+				</div>
 
-			<div class="relative">
-				<Textarea
-					id="text"
-					bind:value={text}
-					class="min-h-56 ring-0 focus:ring-0 focus-visible:ring-0 text-base bg-gray-900 border-blue-400/50 focus:border-blue-400 text-white resize-none"
-					placeholder=""
-				/>
-				<div class="absolute bottom-3 right-3 flex items-center gap-1">
+				<div class="flex justify-end">
 					<Button
-						variant="ghost"
-						size="icon"
-						class="h-8 w-8 rounded-full bg-gray-800 hover:bg-gray-700"
-					>
-						<MessageCircle class="h-4 w-4" />
+						on:click={() => {
+							dispatch('submitCopyPaste', { text });
+							requestAnimationFrame(() => {
+								dispatch('closeCopyPaste');
+							});
+						}}
+						disabled={!text}
+						class="bg-blue-500 text-base px-8 text-blue-100 hover:bg-blue-600"
+						>Insert
 					</Button>
 				</div>
-			</div>
-
-			<div class="flex justify-end">
-				<Button
-					on:click={() => {
-						dispatch('submitCopyPaste', { text });
-						requestAnimationFrame(() => {
-							dispatch('closeCopyPaste');
-						});
-					}}
-					disabled={!text}
-					class="bg-blue-500 text-base px-8 text-blue-100 hover:bg-blue-600"
-					>Insert
-				</Button>
-			</div>
-		</div></CardContent
-	>
-</Card>
+			</div></CardContent
+		>
+	</Card>
+</div>
diff --git a/app/src/lib/components/custom-source/WebsiteURLSource.svelte b/app/src/lib/components/custom-source/WebsiteURLSource.svelte
index e9db006..4647736 100644
--- a/app/src/lib/components/custom-source/WebsiteURLSource.svelte
+++ b/app/src/lib/components/custom-source/WebsiteURLSource.svelte
@@ -9,68 +9,70 @@
 	let url = '';
 </script>
 
-<Card class="max-w-2xl mx-auto bg-gray-900 border-gray-800">
-	<CardHeader>
-		<div class="flex items-center justify-between">
-			<div class="flex items-center gap-2">
+<div class="bg-gray-900 border-gray-800 w-full rounded-md">
+	<Card class="max-w-2xl mx-auto border-none bg-transparent">
+		<CardHeader>
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-2">
+					<Button
+						variant="ghost"
+						size="icon"
+						class="text-gray-400 hover:text-white"
+						on:click={() => dispatch('closeWebsiteURL')}
+					>
+						<ArrowLeft class="h-5 w-5" />
+					</Button>
+					<h1 class="text-2xl font-normal">Website URL</h1>
+				</div>
 				<Button
 					variant="ghost"
 					size="icon"
 					class="text-gray-400 hover:text-white"
 					on:click={() => dispatch('closeWebsiteURL')}
 				>
-					<ArrowLeft class="h-5 w-5" />
+					<X class="h-5 w-5" />
 				</Button>
-				<h1 class="text-2xl font-normal">Website URL</h1>
 			</div>
-			<Button
-				variant="ghost"
-				size="icon"
-				class="text-gray-400 hover:text-white"
-				on:click={() => dispatch('closeWebsiteURL')}
-			>
-				<X class="h-5 w-5" />
-			</Button>
-		</div>
 
-		<p class="text-gray-400">Paste in a Web Link below to upload as a source</p>
-	</CardHeader>
+			<p class="text-gray-400">Paste in a Web Link below to upload as a source</p>
+		</CardHeader>
 
-	<CardContent class="flex flex-col gap-y-4">
-		<div class="flex flex-col gap-y-2">
-			<label for="url" class="text-blue-400">Paste URL*</label>
-			<Input
-				id="url"
-				bind:value={url}
-				placeholder="https://"
-				autocomplete="off"
-				class="bg-gray-900 focus:ring-0 focus-visible:ring-0 border-blue-400 text-white placeholder:text-gray-600"
-			/>
-		</div>
+		<CardContent class="flex flex-col gap-y-4">
+			<div class="flex flex-col gap-y-2">
+				<label for="url" class="text-blue-400">Paste URL*</label>
+				<Input
+					id="url"
+					bind:value={url}
+					placeholder="https://"
+					autocomplete="off"
+					class="bg-gray-900 focus:ring-0 focus-visible:ring-0 border-blue-400 text-white placeholder:text-gray-600"
+				/>
+			</div>
 
-		<div class="flex flex-col gap-y-2">
-			<div class="font-medium text-xl">Notes</div>
-			<ul class="list-disc list-inside space-y-1 text-gray-400">
-				<li>Only the visible text on the website will be imported at this moment</li>
-				<li>Content behind paywalls are not supported</li>
-				<li>Content requiring authentication are not supported</li>
-				<li>Supports .pdf url</li>
-			</ul>
-		</div>
+			<div class="flex flex-col gap-y-2">
+				<div class="font-medium text-xl">Notes</div>
+				<ul class="list-disc list-inside space-y-1 text-gray-400">
+					<li>Only the visible text on the website will be imported at this moment</li>
+					<li>Content behind paywalls are not supported</li>
+					<li>Content requiring authentication are not supported</li>
+					<li>Supports .pdf url</li>
+				</ul>
+			</div>
 
-		<div class="flex justify-end">
-			<Button
-				on:click={() => {
-					dispatch('submitURL', { url });
-					requestAnimationFrame(() => {
-						dispatch('closeWebsiteURL');
-					});
-				}}
-				disabled={!url}
-				class="bg-blue-500 text-base px-8 text-blue-100 hover:bg-blue-600"
-			>
-				Insert
-			</Button>
-		</div>
-	</CardContent>
-</Card>
+			<div class="flex justify-end">
+				<Button
+					on:click={() => {
+						dispatch('submitURL', { url });
+						requestAnimationFrame(() => {
+							dispatch('closeWebsiteURL');
+						});
+					}}
+					disabled={!url}
+					class="bg-blue-500 text-base px-8 text-blue-100 hover:bg-blue-600"
+				>
+					Insert
+				</Button>
+			</div>
+		</CardContent>
+	</Card>
+</div>

From 226fbad5804de791432b035f21beefc4609e1364 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 09:46:32 +0000
Subject: [PATCH 30/45] refactor and cleanup

---
 api/src/main.py                               | 37 +++++---
 api/src/utils/custom_sources/base_utils.py    | 86 +++++++++++++++++++
 .../extract_url_content.py                    | 51 +++--------
 .../custom_sources/generate_custom_source.py  | 84 ++----------------
 api/src/utils/custom_sources/read_content.py  | 21 +++++
 .../custom_sources/save_uploaded_sources.py   | 62 +++++++++++++
 6 files changed, 212 insertions(+), 129 deletions(-)
 create mode 100644 api/src/utils/custom_sources/base_utils.py
 rename api/src/utils/{ => custom_sources}/extract_url_content.py (58%)
 create mode 100644 api/src/utils/custom_sources/read_content.py
 create mode 100644 api/src/utils/custom_sources/save_uploaded_sources.py

diff --git a/api/src/main.py b/api/src/main.py
index b95f582..5048dd7 100644
--- a/api/src/main.py
+++ b/api/src/main.py
@@ -2,7 +2,8 @@
 from time import time
 from typing import Any, Callable, Generator
 
-from fastapi import BackgroundTasks, FastAPI, HTTPException, Request
+from api.src.utils.custom_sources.extract_url_content import ExtractURLContent, ExtractURLContentRequest, URLContent
+from fastapi import BackgroundTasks, FastAPI, Form, HTTPException, Request, UploadFile
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse, StreamingResponse
 from fastapi_utilities import add_timer_middleware
@@ -22,7 +23,6 @@
     generate_custom_source,
 )
 from src.utils.custom_sources.save_copied_source import CopiedPasteSourceRequest, save_copied_source
-from src.utils.extract_url_content import ExtractURLContent, ExtractURLContentRequest, URLContent
 from src.utils.generate_audiocast import (
     GenerateAudioCastRequest,
     GenerateAudioCastResponse,
@@ -64,12 +64,12 @@ async def log_request_headers(request: Request, call_next: Callable):
 
 
 @app.get("/")
-async def root():
+def root():
     return {"message": "Hello World"}
 
 
 @app.post("/chat/{session_id}", response_model=Generator[str, Any, None])
-async def chat_endpoint(
+def chat_endpoint(
     session_id: str,
     request: SessionChatRequest,
     background_tasks: BackgroundTasks,
@@ -103,7 +103,7 @@ async def generate_audiocast_endpoint(
 
 
 @app.get("/audiocast/{session_id}", response_model=GenerateAudioCastResponse)
-async def get_audiocast_endpoint(session_id: str):
+def get_audiocast_endpoint(session_id: str):
     result = get_audiocast(session_id)
     return result
 
@@ -120,7 +120,7 @@ async def generate_audiocast_source_endpoint(
 
 
 @app.get("/get-signed-url", response_model=str)
-async def get_signed_url_endpoint(blobname: str):
+def get_signed_url_endpoint(blobname: str):
     """
     Get signed URL for generated audiocast
     """
@@ -156,18 +156,18 @@ async def get_session_title_endpoint(
 
 
 @app.post("/extract-url-content", response_model=URLContent)
-async def extract_url_content_endpoint(request: ExtractURLContentRequest):
+def extract_url_content_endpoint(request: ExtractURLContentRequest):
     extractor = ExtractURLContent()
-    page_content = await extractor._extract(request.url)
+    page_content = extractor._extract(request.url)
     return page_content.model_dump()
 
 
 @app.post("/generate-custom-source", response_model=URLContent)
-async def generate_custom_source_endpoint(
+def generate_custom_source_endpoint(
     request: GenerateCustomSourceRequest,
     background_tasks: BackgroundTasks,
 ):
-    return await generate_custom_source(request, background_tasks)
+    return generate_custom_source(request, background_tasks)
 
 
 @app.post("/get-custom-sources", response_model=list[CustomSourceModel])
@@ -176,13 +176,26 @@ async def get_custom_sources_endpoint(request: GetCustomSourcesRequest):
 
 
 @app.post("/delete-custom-source", response_model=list[CustomSourceModel])
-async def delete_custom_source_endpoint(request: DeleteCustomSourcesRequest):
+def delete_custom_source_endpoint(request: DeleteCustomSourcesRequest):
     manager = CustomSourceManager(request.sessionId)
     manager._delete_custom_source(request.sourceId)
     return "Deleted"
 
 
 @app.post("/save-copied-source", response_model=str)
-async def save_copied_source_endpoint(request: CopiedPasteSourceRequest):
+def save_copied_source_endpoint(request: CopiedPasteSourceRequest):
     result = save_copied_source(request)
     return result
+
+
+@app.post("/save-uploaded-sources", response_model=str)
+async def save_uploaded_files_endpoint(files: list[UploadFile], sessionId: str = Form(...)):
+    """
+    Save sources uploaded from the frontend
+    """
+    print(f"Session ID: {sessionId}")
+    for file in files:
+        file_bytes = await file.read()
+        print(f"File INFO: {file.filename}, Size: {len(file_bytes)} bytes")
+        # Process the file as needed
+    return "Files saved successfully"
diff --git a/api/src/utils/custom_sources/base_utils.py b/api/src/utils/custom_sources/base_utils.py
new file mode 100644
index 0000000..811b7ec
--- /dev/null
+++ b/api/src/utils/custom_sources/base_utils.py
@@ -0,0 +1,86 @@
+from typing import Literal, Optional, cast
+
+from google.cloud.firestore_v1 import DocumentReference
+from pydantic import BaseModel
+
+from src.services.firestore_sdk import (
+    Collection,
+    DBManager,
+    collections,
+)
+
+
+class URLContent(BaseModel):
+    id: str
+    content: str
+    content_type: str
+    metadata: dict = {}
+
+    def __str__(self):
+        return f"Content: {self.content}"
+
+
+class CustomSourceModel(URLContent):
+    source_type: Literal["link", "copy/paste", "file_upload"]
+    url: Optional[str] = None
+    created_at: Optional[str] = None
+    updated_at: Optional[str] = None
+
+
+class CustomSourceManager(DBManager):
+    collection: Collection = collections["audiora_sessions"]
+    sub_collection = "custom_sources"
+
+    def __init__(self, session_id: str):
+        super().__init__()
+        self.doc_id = session_id
+
+    def _check_document(self):
+        """if the collection does not exist, create it"""
+        doc = self._get_document(self.collection, self.doc_id)
+        if not doc.exists:
+            raise Exception("Session not found")
+        return doc
+
+    def _get_doc_ref(self, source_id: str) -> DocumentReference:
+        self._check_document()
+        return (
+            self._get_collection(self.collection)
+            .document(self.doc_id)
+            .collection(self.sub_collection)
+            .document(source_id)
+        )
+
+    def _set_custom_source(self, data: CustomSourceModel):
+        return self._get_doc_ref(data.id).set(
+            {
+                **(data.model_dump()),
+                "created_at": self._timestamp,
+                "updated_at": self._timestamp,
+            }
+        )
+
+    def _get_custom_source(self, source_id: str) -> CustomSourceModel | None:
+        doc = self._get_doc_ref(source_id).get()
+        data = doc.to_dict()
+        if doc.exists and data:
+            return cast(CustomSourceModel, self._safe_to_dict(data))
+
+    def _get_custom_sources(self):
+        self._check_document()
+
+        try:
+            session_ref = self._get_collection(self.collection).document(self.doc_id)
+            docs = session_ref.collection(self.sub_collection).get()
+            return [
+                cast(CustomSourceModel, self._safe_to_dict(doc.to_dict()))
+                for doc in docs
+                if doc.exists and doc.to_dict()
+            ]
+
+        except Exception as e:
+            print(f"Error getting custom sources for Session: {self.doc_id}", e)
+            return []
+
+    def _delete_custom_source(self, source_id: str):
+        return self._get_doc_ref(source_id).delete()
diff --git a/api/src/utils/extract_url_content.py b/api/src/utils/custom_sources/extract_url_content.py
similarity index 58%
rename from api/src/utils/extract_url_content.py
rename to api/src/utils/custom_sources/extract_url_content.py
index 087e3cc..bf2e749 100644
--- a/api/src/utils/extract_url_content.py
+++ b/api/src/utils/custom_sources/extract_url_content.py
@@ -1,61 +1,34 @@
-from io import BytesIO
 from urllib.parse import urlparse
 from uuid import uuid4
 
 import httpx
 from bs4 import BeautifulSoup, Tag
 from pydantic import BaseModel
-from pypdf import PdfReader
 
 from src.utils.decorators import process_time
 
+from .base_utils import URLContent
+from .read_content import ReadContent
+
 
 class ExtractURLContentRequest(BaseModel):
     url: str
 
 
-class URLContent(BaseModel):
-    id: str
-    content: str
-    content_type: str
-    metadata: dict = {}
-
-    def __str__(self):
-        return f"Content: {self.content}"
-
-
-class ExtractURLContent:
+class ExtractURLContent(ReadContent):
     def __init__(self, timeout: int = 10):
         self.timeout = timeout
-        self.client = httpx.AsyncClient(timeout=self.timeout)
-
-    async def __aenter__(self):
-        return self
-
-    async def __exit__(self):
-        await self.client.aclose()
-
-    async def __aexit__(self):
-        return await self.__exit__()
 
     def _clean_text(self, text: str) -> str:
         """TODO: write text cleaning logic"""
         return text.strip()
 
-    async def _extract_pdf(self, content: bytes) -> tuple[str, dict]:
-        pdf_reader = PdfReader(BytesIO(content))
-
-        pages: list[str] = []
-        for page in pdf_reader.pages:
-            text = page.extract_text()
-            # Split into paragraphs and clean
-            paragraphs = [p.strip() for p in text.split("\n\n") if p.strip()]
-            pages.append("\n\n".join(paragraphs))
-
+    def _extract_pdf(self, content: bytes) -> tuple[str, dict]:
+        text_content, pdf_reader = self._read_pdf(content)
         metadata = {**(pdf_reader.metadata or {}), "pages": pdf_reader.get_num_pages()}
-        return self._clean_text("\n\n".join(pages)), metadata
+        return self._clean_text(text_content), metadata
 
-    async def _extract_html(self, content: bytes) -> tuple[str, dict]:
+    def _extract_html(self, content: bytes) -> tuple[str, dict]:
         soup = BeautifulSoup(content, "lxml")
         for element in soup(["script", "style", "nav", "footer"]):
             element.decompose()
@@ -70,21 +43,21 @@ async def _extract_html(self, content: bytes) -> tuple[str, dict]:
         return self._clean_text(text_content), metadata
 
     @process_time()
-    async def _extract(self, url: str) -> URLContent:
+    def _extract(self, url: str) -> URLContent:
         parsed_url = urlparse(url)
         if not parsed_url.scheme or not parsed_url.netloc:
             raise ValueError("Invalid URL provided")
 
         try:
-            response = await self.client.get(url)
+            response = httpx.get(url)
             response.raise_for_status()
             content_type = response.headers.get("content-type", "").lower()
 
             if url.lower().endswith(".pdf") or "application/pdf" in content_type:
-                text, metadata = await self._extract_pdf(response.content)
+                text, metadata = self._extract_pdf(response.content)
                 content_type = "application/pdf"
             else:
-                text, metadata = await self._extract_html(response.content)
+                text, metadata = self._extract_html(response.content)
                 content_type = "text/html"
 
             return URLContent(
diff --git a/api/src/utils/custom_sources/generate_custom_source.py b/api/src/utils/custom_sources/generate_custom_source.py
index a23f39e..37952e0 100644
--- a/api/src/utils/custom_sources/generate_custom_source.py
+++ b/api/src/utils/custom_sources/generate_custom_source.py
@@ -1,15 +1,9 @@
-from typing import Literal, Optional, cast
-
 from fastapi import BackgroundTasks
-from google.cloud.firestore_v1 import DocumentReference
 from pydantic import BaseModel
 
-from src.services.firestore_sdk import (
-    Collection,
-    DBManager,
-    collections,
-)
-from src.utils.extract_url_content import ExtractURLContent, URLContent
+from src.utils.custom_sources.extract_url_content import ExtractURLContent
+
+from .base_utils import CustomSourceManager, CustomSourceModel
 
 
 class GenerateCustomSourceRequest(BaseModel):
@@ -26,77 +20,11 @@ class DeleteCustomSourcesRequest(BaseModel):
     sourceId: str
 
 
-class CustomSourceModel(URLContent):
-    source_type: Literal["link", "copy/paste"]
-    url: Optional[str] = None
-    created_at: Optional[str] = None
-    updated_at: Optional[str] = None
-
-
-class CustomSourceManager(DBManager):
-    collection: Collection = collections["audiora_sessions"]
-    sub_collection = "custom_sources"
-
-    def __init__(self, session_id: str):
-        super().__init__()
-        self.doc_id = session_id
-
-    def _check_document(self):
-        """if the collection does not exist, create it"""
-        doc = self._get_document(self.collection, self.doc_id)
-        if not doc.exists:
-            raise Exception("Session not found")
-        return doc
-
-    def _get_doc_ref(self, source_id: str) -> DocumentReference:
-        self._check_document()
-        return (
-            self._get_collection(self.collection)
-            .document(self.doc_id)
-            .collection(self.sub_collection)
-            .document(source_id)
-        )
-
-    def _set_custom_source(self, data: CustomSourceModel):
-        return self._get_doc_ref(data.id).set(
-            {
-                **(data.model_dump()),
-                "created_at": self._timestamp,
-                "updated_at": self._timestamp,
-            }
-        )
-
-    def _get_custom_source(self, source_id: str) -> CustomSourceModel | None:
-        doc = self._get_doc_ref(source_id).get()
-        data = doc.to_dict()
-        if doc.exists and data:
-            return cast(CustomSourceModel, self._safe_to_dict(data))
-
-    def _get_custom_sources(self):
-        self._check_document()
-
-        try:
-            session_ref = self._get_collection(self.collection).document(self.doc_id)
-            docs = session_ref.collection(self.sub_collection).get()
-            return [
-                cast(CustomSourceModel, self._safe_to_dict(doc.to_dict()))
-                for doc in docs
-                if doc.exists and doc.to_dict()
-            ]
-
-        except Exception as e:
-            print(f"Error getting custom sources for Session: {self.doc_id}", e)
-            return []
-
-    def _delete_custom_source(self, source_id: str):
-        return self._get_doc_ref(source_id).delete()
-
-
-async def generate_custom_source(request: GenerateCustomSourceRequest, background_tasks: BackgroundTasks):
+def generate_custom_source(request: GenerateCustomSourceRequest, background_tasks: BackgroundTasks):
     extractor = ExtractURLContent()
-    page_content = await extractor._extract(request.url)
+    page_content = extractor._extract(request.url)
 
-    async def save_to_firestore():
+    def save_to_firestore():
         custom_source = CustomSourceModel(
             **page_content.model_dump(),
             url=request.url,
diff --git a/api/src/utils/custom_sources/read_content.py b/api/src/utils/custom_sources/read_content.py
new file mode 100644
index 0000000..295fb9d
--- /dev/null
+++ b/api/src/utils/custom_sources/read_content.py
@@ -0,0 +1,21 @@
+from io import BytesIO
+
+from pypdf import PdfReader
+
+
+class ReadContent:
+    def _read_pdf(self, content: bytes) -> tuple[str, PdfReader]:
+        pdf_reader = PdfReader(BytesIO(content))
+
+        pages: list[str] = []
+        for page in pdf_reader.pages:
+            text = page.extract_text()
+            # Split into paragraphs and clean
+            paragraphs = [p.strip() for p in text.split("\n\n") if p.strip()]
+            pages.append("\n\n".join(paragraphs))
+
+        text_content = "\n\n".join(pages).strip()
+        return text_content, pdf_reader
+
+    def _read_txt(self, content: bytes) -> str:
+        return content.decode()
diff --git a/api/src/utils/custom_sources/save_uploaded_sources.py b/api/src/utils/custom_sources/save_uploaded_sources.py
new file mode 100644
index 0000000..a50e806
--- /dev/null
+++ b/api/src/utils/custom_sources/save_uploaded_sources.py
@@ -0,0 +1,62 @@
+from uuid import uuid4
+
+from fastapi import UploadFile
+from pydantic import BaseModel
+
+from .base_utils import CustomSourceManager, CustomSourceModel
+from .extract_url_content import URLContent
+from .read_content import ReadContent
+
+
+class UploadedSourcesRequest(BaseModel):
+    sessionId: str
+    files: list[UploadFile]
+
+
+class UploadedContent(URLContent):
+    pass
+
+
+class UploadContent:
+    def __init__(self, session_id: str):
+        self.session_id = session_id
+        self.content_reader = ReadContent()
+
+    async def _extract_content(self, file: UploadFile):
+        file_bytes = await file.read()
+
+        print(f"FILE_INFO>>>: {file.filename}, Size: {len(file_bytes)} bytes")
+
+        if file.content_type == "application/pdf":
+            text_content, metadata = self.__pdf_content(file_bytes)
+            content_type = "application/pdf"
+        else:
+            text_content, metadata = self.content_reader._read_txt(file_bytes), {}
+            content_type = "text/plain"
+
+        return UploadedContent(
+            id=str(uuid4()),
+            content=text_content,
+            content_type=content_type,
+            metadata=metadata,
+        )
+
+    def __pdf_content(self, content: bytes) -> tuple[str, dict]:
+        text_content, pdf_reader = self.content_reader._read_pdf(content)
+        metadata = {**(pdf_reader.metadata or {}), "pages": pdf_reader.get_num_pages()}
+
+        return text_content, metadata
+
+    async def _save_uploaded_sources(self, request: UploadedSourcesRequest):
+        contents = [self._extract_content(file) for file in request.files]
+
+        manager = CustomSourceManager(request.sessionId)
+        for content in contents:
+            _content = await content
+            custom_source = CustomSourceModel(
+                **_content.model_dump(),
+                source_type="file_upload",
+            )
+            manager._set_custom_source(custom_source)
+
+        return "Saved"

From 0169e7dccd44a25f86df2f689279b3f6a5d9bced Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 09:49:08 +0000
Subject: [PATCH 31/45] use improved module names

---
 api/src/main.py                                           | 8 ++++----
 .../{generate_custom_source.py => generate_url_source.py} | 0
 api/src/utils/custom_sources/save_copied_source.py        | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)
 rename api/src/utils/custom_sources/{generate_custom_source.py => generate_url_source.py} (100%)

diff --git a/api/src/main.py b/api/src/main.py
index 5048dd7..2685632 100644
--- a/api/src/main.py
+++ b/api/src/main.py
@@ -2,7 +2,7 @@
 from time import time
 from typing import Any, Callable, Generator
 
-from api.src.utils.custom_sources.extract_url_content import ExtractURLContent, ExtractURLContentRequest, URLContent
+from src.utils.custom_sources.extract_url_content import ExtractURLContent, ExtractURLContentRequest, URLContent
 from fastapi import BackgroundTasks, FastAPI, Form, HTTPException, Request, UploadFile
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse, StreamingResponse
@@ -14,7 +14,7 @@
     SessionChatItem,
     SessionChatRequest,
 )
-from src.utils.custom_sources.generate_custom_source import (
+from src.utils.custom_sources.generate_url_source import (
     CustomSourceManager,
     CustomSourceModel,
     DeleteCustomSourcesRequest,
@@ -162,8 +162,8 @@ def extract_url_content_endpoint(request: ExtractURLContentRequest):
     return page_content.model_dump()
 
 
-@app.post("/generate-custom-source", response_model=URLContent)
-def generate_custom_source_endpoint(
+@app.post("/generate-url-source", response_model=URLContent)
+def generate_url_source_endpoint(
     request: GenerateCustomSourceRequest,
     background_tasks: BackgroundTasks,
 ):
diff --git a/api/src/utils/custom_sources/generate_custom_source.py b/api/src/utils/custom_sources/generate_url_source.py
similarity index 100%
rename from api/src/utils/custom_sources/generate_custom_source.py
rename to api/src/utils/custom_sources/generate_url_source.py
diff --git a/api/src/utils/custom_sources/save_copied_source.py b/api/src/utils/custom_sources/save_copied_source.py
index e39bb18..260c525 100644
--- a/api/src/utils/custom_sources/save_copied_source.py
+++ b/api/src/utils/custom_sources/save_copied_source.py
@@ -2,7 +2,7 @@
 
 from pydantic import BaseModel
 
-from .generate_custom_source import CustomSourceManager, CustomSourceModel
+from .base_utils import CustomSourceManager, CustomSourceModel
 
 
 class CopiedPasteSourceRequest(BaseModel):

From 79b758b04c555ba64f71c4e05c3d7e88b4aef7d0 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 09:57:02 +0000
Subject: [PATCH 32/45] finalize endpoint to store uploaded content

---
 api/src/main.py                               | 11 ++--
 .../custom_sources/save_uploaded_sources.py   | 51 +++++++++----------
 2 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/api/src/main.py b/api/src/main.py
index 2685632..9e3c31e 100644
--- a/api/src/main.py
+++ b/api/src/main.py
@@ -2,7 +2,6 @@
 from time import time
 from typing import Any, Callable, Generator
 
-from src.utils.custom_sources.extract_url_content import ExtractURLContent, ExtractURLContentRequest, URLContent
 from fastapi import BackgroundTasks, FastAPI, Form, HTTPException, Request, UploadFile
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse, StreamingResponse
@@ -14,6 +13,7 @@
     SessionChatItem,
     SessionChatRequest,
 )
+from src.utils.custom_sources.extract_url_content import ExtractURLContent, ExtractURLContentRequest, URLContent
 from src.utils.custom_sources.generate_url_source import (
     CustomSourceManager,
     CustomSourceModel,
@@ -23,6 +23,7 @@
     generate_custom_source,
 )
 from src.utils.custom_sources.save_copied_source import CopiedPasteSourceRequest, save_copied_source
+from src.utils.custom_sources.save_uploaded_sources import UploadedFiles
 from src.utils.generate_audiocast import (
     GenerateAudioCastRequest,
     GenerateAudioCastResponse,
@@ -193,9 +194,5 @@ async def save_uploaded_files_endpoint(files: list[UploadFile], sessionId: str =
     """
     Save sources uploaded from the frontend
     """
-    print(f"Session ID: {sessionId}")
-    for file in files:
-        file_bytes = await file.read()
-        print(f"File INFO: {file.filename}, Size: {len(file_bytes)} bytes")
-        # Process the file as needed
-    return "Files saved successfully"
+    result = await UploadedFiles(session_id=sessionId)._save_sources(files)
+    return result
diff --git a/api/src/utils/custom_sources/save_uploaded_sources.py b/api/src/utils/custom_sources/save_uploaded_sources.py
index a50e806..1a8f479 100644
--- a/api/src/utils/custom_sources/save_uploaded_sources.py
+++ b/api/src/utils/custom_sources/save_uploaded_sources.py
@@ -1,38 +1,42 @@
 from uuid import uuid4
 
 from fastapi import UploadFile
-from pydantic import BaseModel
 
-from .base_utils import CustomSourceManager, CustomSourceModel
-from .extract_url_content import URLContent
+from .base_utils import CustomSourceManager, CustomSourceModel, URLContent
 from .read_content import ReadContent
 
-
-class UploadedSourcesRequest(BaseModel):
-    sessionId: str
-    files: list[UploadFile]
+FIVE_MB = 5 * 1024 * 1024
 
 
 class UploadedContent(URLContent):
     pass
 
 
-class UploadContent:
+class UploadedFiles:
     def __init__(self, session_id: str):
         self.session_id = session_id
         self.content_reader = ReadContent()
 
     async def _extract_content(self, file: UploadFile):
         file_bytes = await file.read()
-
         print(f"FILE_INFO>>>: {file.filename}, Size: {len(file_bytes)} bytes")
 
+        # ensure file size is less than 5MB
+        if len(file_bytes) > FIVE_MB:
+            return None
+
         if file.content_type == "application/pdf":
-            text_content, metadata = self.__pdf_content(file_bytes)
+            text_content, pdf_reader = self.content_reader._read_pdf(file_bytes)
+
+            metadata = {**(pdf_reader.metadata or {}), "pages": pdf_reader.get_num_pages()}
             content_type = "application/pdf"
-        else:
-            text_content, metadata = self.content_reader._read_txt(file_bytes), {}
+        elif file.content_type == "text/plain":
+            text_content = self.content_reader._read_txt(file_bytes)
+
+            metadata = {}
             content_type = "text/plain"
+        else:
+            return None
 
         return UploadedContent(
             id=str(uuid4()),
@@ -41,22 +45,13 @@ async def _extract_content(self, file: UploadFile):
             metadata=metadata,
         )
 
-    def __pdf_content(self, content: bytes) -> tuple[str, dict]:
-        text_content, pdf_reader = self.content_reader._read_pdf(content)
-        metadata = {**(pdf_reader.metadata or {}), "pages": pdf_reader.get_num_pages()}
-
-        return text_content, metadata
-
-    async def _save_uploaded_sources(self, request: UploadedSourcesRequest):
-        contents = [self._extract_content(file) for file in request.files]
+    async def _save_sources(self, files: list[UploadFile]):
+        manager = CustomSourceManager(self.session_id)
 
-        manager = CustomSourceManager(request.sessionId)
-        for content in contents:
-            _content = await content
-            custom_source = CustomSourceModel(
-                **_content.model_dump(),
-                source_type="file_upload",
-            )
-            manager._set_custom_source(custom_source)
+        for file in files:
+            content = await self._extract_content(file)
+            if content:
+                custom_source = CustomSourceModel(**content.model_dump(), source_type="file_upload")
+                manager._set_custom_source(custom_source)
 
         return "Saved"

From 6e2da445874ed1c2105e4e5af526ba187168655a Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 10:02:28 +0000
Subject: [PATCH 33/45] improve class and module names

---
 api/src/utils/custom_sources/base_utils.py            |  4 ++--
 api/src/utils/custom_sources/extract_url_content.py   |  6 +++---
 api/src/utils/custom_sources/generate_url_source.py   |  6 +++---
 api/src/utils/custom_sources/save_uploaded_sources.py |  8 ++------
 app/src/lib/components/ManageAudioSourceDrawer.svelte | 10 +++-------
 app/src/lib/db/db.customSources.ts                    | 10 +++++++---
 6 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/api/src/utils/custom_sources/base_utils.py b/api/src/utils/custom_sources/base_utils.py
index 811b7ec..1d1611c 100644
--- a/api/src/utils/custom_sources/base_utils.py
+++ b/api/src/utils/custom_sources/base_utils.py
@@ -10,7 +10,7 @@
 )
 
 
-class URLContent(BaseModel):
+class SourceContent(BaseModel):
     id: str
     content: str
     content_type: str
@@ -20,7 +20,7 @@ def __str__(self):
         return f"Content: {self.content}"
 
 
-class CustomSourceModel(URLContent):
+class CustomSourceModel(SourceContent):
     source_type: Literal["link", "copy/paste", "file_upload"]
     url: Optional[str] = None
     created_at: Optional[str] = None
diff --git a/api/src/utils/custom_sources/extract_url_content.py b/api/src/utils/custom_sources/extract_url_content.py
index bf2e749..d51f4b4 100644
--- a/api/src/utils/custom_sources/extract_url_content.py
+++ b/api/src/utils/custom_sources/extract_url_content.py
@@ -7,7 +7,7 @@
 
 from src.utils.decorators import process_time
 
-from .base_utils import URLContent
+from .base_utils import SourceContent
 from .read_content import ReadContent
 
 
@@ -43,7 +43,7 @@ def _extract_html(self, content: bytes) -> tuple[str, dict]:
         return self._clean_text(text_content), metadata
 
     @process_time()
-    def _extract(self, url: str) -> URLContent:
+    def _extract(self, url: str) -> SourceContent:
         parsed_url = urlparse(url)
         if not parsed_url.scheme or not parsed_url.netloc:
             raise ValueError("Invalid URL provided")
@@ -60,7 +60,7 @@ def _extract(self, url: str) -> URLContent:
                 text, metadata = self._extract_html(response.content)
                 content_type = "text/html"
 
-            return URLContent(
+            return SourceContent(
                 id=str(uuid4()),
                 content=text,
                 content_type=content_type,
diff --git a/api/src/utils/custom_sources/generate_url_source.py b/api/src/utils/custom_sources/generate_url_source.py
index 37952e0..8a61860 100644
--- a/api/src/utils/custom_sources/generate_url_source.py
+++ b/api/src/utils/custom_sources/generate_url_source.py
@@ -22,11 +22,11 @@ class DeleteCustomSourcesRequest(BaseModel):
 
 def generate_custom_source(request: GenerateCustomSourceRequest, background_tasks: BackgroundTasks):
     extractor = ExtractURLContent()
-    page_content = extractor._extract(request.url)
+    content = extractor._extract(request.url)
 
     def save_to_firestore():
         custom_source = CustomSourceModel(
-            **page_content.model_dump(),
+            **content.model_dump(),
             url=request.url,
             source_type="link",
         )
@@ -34,4 +34,4 @@ def save_to_firestore():
         manager._set_custom_source(custom_source)
 
     background_tasks.add_task(save_to_firestore)
-    return page_content.model_dump()
+    return content.model_dump()
diff --git a/api/src/utils/custom_sources/save_uploaded_sources.py b/api/src/utils/custom_sources/save_uploaded_sources.py
index 1a8f479..444ad97 100644
--- a/api/src/utils/custom_sources/save_uploaded_sources.py
+++ b/api/src/utils/custom_sources/save_uploaded_sources.py
@@ -2,16 +2,12 @@
 
 from fastapi import UploadFile
 
-from .base_utils import CustomSourceManager, CustomSourceModel, URLContent
+from .base_utils import CustomSourceManager, CustomSourceModel, SourceContent
 from .read_content import ReadContent
 
 FIVE_MB = 5 * 1024 * 1024
 
 
-class UploadedContent(URLContent):
-    pass
-
-
 class UploadedFiles:
     def __init__(self, session_id: str):
         self.session_id = session_id
@@ -38,7 +34,7 @@ async def _extract_content(self, file: UploadFile):
         else:
             return None
 
-        return UploadedContent(
+        return SourceContent(
             id=str(uuid4()),
             content=text_content,
             content_type=content_type,
diff --git a/app/src/lib/components/ManageAudioSourceDrawer.svelte b/app/src/lib/components/ManageAudioSourceDrawer.svelte
index b478bbb..47562d3 100644
--- a/app/src/lib/components/ManageAudioSourceDrawer.svelte
+++ b/app/src/lib/components/ManageAudioSourceDrawer.svelte
@@ -37,14 +37,10 @@
 			headers: { 'Content-Type': 'application/json' }
 		})
 			.then((res) => {
-				if (res.ok) return res.json();
+				if (res.ok) return toast.success('Custom source added successfully');
 				throw new Error('Failed to fetch');
 			})
-			.then(() => toast.success('Custom source added successfully'))
-			.catch((e) => {
-				console.error(e);
-				toast.error('Failed to add custom source', { description: e.message });
-			})
+			.catch((e) => toast.error('Failed to add custom source', { description: e.message }))
 			.finally(() => {
 				generatingSource = false;
 				accordionResetKey = {};
@@ -52,7 +48,7 @@
 	}
 
 	async function createURLContent(url: string) {
-		return createSourceContent('generate-custom-source', { url, sessionId });
+		return createSourceContent('generate-url-source', { url, sessionId });
 	}
 
 	async function createCopyPasteContent(text: string) {
diff --git a/app/src/lib/db/db.customSources.ts b/app/src/lib/db/db.customSources.ts
index 6a9d627..db9d0ac 100644
--- a/app/src/lib/db/db.customSources.ts
+++ b/app/src/lib/db/db.customSources.ts
@@ -4,16 +4,20 @@ import { dbRefs } from '@/services/firebase';
 import { equals } from 'ramda';
 import { collectionData, getQueryConstraints } from './db.utils';
 
-export type LinkSources = {
+export type LinkSource = {
 	source_type: 'link';
 	url: string;
 };
 
-export type CopyPasteSources = {
+export type CopyPasteSource = {
 	source_type: 'copy/paste';
 };
 
-export type Sources = (LinkSources | CopyPasteSources) & {
+export type UploadSource = {
+	source_type: 'file_upload';
+};
+
+export type Sources = (LinkSource | CopyPasteSource | UploadSource) & {
 	id: string;
 	content_type: 'text/plain' | 'text/html' | 'application/pdf';
 	content: string;

From d95073ed0237268150752056de7332791dbd67b4 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 10:09:00 +0000
Subject: [PATCH 34/45] add ui logic for uploading dropped files

---
 api/src/main.py                               |  9 +--
 .../custom-source/AddCustomSourceForm.svelte  | 68 ++++++++++++++++++-
 2 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/api/src/main.py b/api/src/main.py
index 9e3c31e..ae7297b 100644
--- a/api/src/main.py
+++ b/api/src/main.py
@@ -13,7 +13,8 @@
     SessionChatItem,
     SessionChatRequest,
 )
-from src.utils.custom_sources.extract_url_content import ExtractURLContent, ExtractURLContentRequest, URLContent
+from src.utils.custom_sources.base_utils import SourceContent
+from src.utils.custom_sources.extract_url_content import ExtractURLContent, ExtractURLContentRequest
 from src.utils.custom_sources.generate_url_source import (
     CustomSourceManager,
     CustomSourceModel,
@@ -121,7 +122,7 @@ async def generate_audiocast_source_endpoint(
 
 
 @app.get("/get-signed-url", response_model=str)
-def get_signed_url_endpoint(blobname: str):
+async def get_signed_url_endpoint(blobname: str):
     """
     Get signed URL for generated audiocast
     """
@@ -156,14 +157,14 @@ async def get_session_title_endpoint(
     return await get_session_title(request, background_tasks)
 
 
-@app.post("/extract-url-content", response_model=URLContent)
+@app.post("/extract-url-content", response_model=SourceContent)
 def extract_url_content_endpoint(request: ExtractURLContentRequest):
     extractor = ExtractURLContent()
     page_content = extractor._extract(request.url)
     return page_content.model_dump()
 
 
-@app.post("/generate-url-source", response_model=URLContent)
+@app.post("/generate-url-source", response_model=SourceContent)
 def generate_url_source_endpoint(
     request: GenerateCustomSourceRequest,
     background_tasks: BackgroundTasks,
diff --git a/app/src/lib/components/custom-source/AddCustomSourceForm.svelte b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
index 4d1e0db..bfe10c8 100644
--- a/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
+++ b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
@@ -1,17 +1,28 @@
+<script context="module">
+	const FIVE_MB = 5 * 1024 * 1024;
+</script>
+
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { Button } from '../ui/button';
 	import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';
-	import { FileIcon, LinkIcon, Upload, X } from 'lucide-svelte';
+	import { FileIcon, LinkIcon, Upload } from 'lucide-svelte';
 	import cs from 'clsx';
+	import { toast } from 'svelte-sonner';
+	import { env } from '@env';
+	import { getSessionContext } from '@/stores/sessionContext.svelte';
 
 	const dispatch = createEventDispatcher<{
 		useWebsiteURL: void;
 		useCopyPaste: void;
 	}>();
 
+	const { sessionId$ } = getSessionContext();
+
 	let dragActive = false;
 
+	$: sessionId = $sessionId$;
+
 	function handleDrag(e: DragEvent) {
 		e.preventDefault();
 		e.stopPropagation();
@@ -23,11 +34,64 @@
 		}
 	}
 
-	function handleDrop(e: DragEvent) {
+	async function handleDrop(e: DragEvent) {
 		e.preventDefault();
 		e.stopPropagation();
 		dragActive = false;
+
+		const files = e.dataTransfer?.files;
+		if (!files) return toast.error('No files found');
+
+		// Validate files
+		const validFiles = getValidFiles(files);
+		if (!validFiles.length) return;
+
 		// Handle file upload here
+		return uploadValidatedFiles(validFiles);
+	}
+
+	function getValidFiles(files: FileList) {
+		// ensure max 5 files each less than 1mb
+		if (files.length > 5) {
+			return toast.error('Max 5 files allowed'), [];
+		}
+
+		const validFiles: File[] = [];
+
+		for (let i = 0; i < files.length; i++) {
+			const file = files[i];
+			if (file.size > FIVE_MB) {
+				toast.info(`File '${file.name}' exceeds 5MB. Skipping...`);
+				continue;
+			}
+
+			if (file.type !== 'application/pdf' && !file.name.endsWith('.txt')) {
+				toast.info(`Unsupported file type for ${file.name}. Skipping...`);
+				continue;
+			}
+
+			validFiles.push(file);
+		}
+
+		return validFiles;
+	}
+
+	async function uploadValidatedFiles(files: File[]) {
+		const formData = new FormData();
+		formData.append('sessionId', sessionId);
+		for (let i = 0; i < files.length; i++) {
+			formData.append('files', files[i]);
+		}
+
+		return fetch(`${env.API_BASE_URL}/save-uploaded-sources`, {
+			method: 'POST',
+			body: formData
+		})
+			.then((res) => {
+				if (res.ok) return toast.success('Files uploaded successfully');
+				throw new Error(res.statusText);
+			})
+			.catch((e) => toast.error('Failed to upload files', { description: e.message }));
 	}
 </script>
 

From 4f9e69d01fe97a1001e453d862a3c03568065940 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 10:28:56 +0000
Subject: [PATCH 35/45] upload dragged&dropped file as form_data; allow up to
 10mb

---
 .../custom_sources/save_uploaded_sources.py   |  6 +--
 .../components/ManageAudioSourceDrawer.svelte | 19 ++++++--
 .../custom-source/AddCustomSource.svelte      |  2 +-
 .../custom-source/AddCustomSourceForm.svelte  | 46 ++++---------------
 4 files changed, 29 insertions(+), 44 deletions(-)

diff --git a/api/src/utils/custom_sources/save_uploaded_sources.py b/api/src/utils/custom_sources/save_uploaded_sources.py
index 444ad97..59d4538 100644
--- a/api/src/utils/custom_sources/save_uploaded_sources.py
+++ b/api/src/utils/custom_sources/save_uploaded_sources.py
@@ -5,7 +5,7 @@
 from .base_utils import CustomSourceManager, CustomSourceModel, SourceContent
 from .read_content import ReadContent
 
-FIVE_MB = 5 * 1024 * 1024
+TEN_MB = 10 * 1024 * 1024
 
 
 class UploadedFiles:
@@ -17,8 +17,8 @@ async def _extract_content(self, file: UploadFile):
         file_bytes = await file.read()
         print(f"FILE_INFO>>>: {file.filename}, Size: {len(file_bytes)} bytes")
 
-        # ensure file size is less than 5MB
-        if len(file_bytes) > FIVE_MB:
+        # ensure file size is less than 10MB
+        if len(file_bytes) > TEN_MB:
             return None
 
         if file.content_type == "application/pdf":
diff --git a/app/src/lib/components/ManageAudioSourceDrawer.svelte b/app/src/lib/components/ManageAudioSourceDrawer.svelte
index 47562d3..303e59f 100644
--- a/app/src/lib/components/ManageAudioSourceDrawer.svelte
+++ b/app/src/lib/components/ManageAudioSourceDrawer.svelte
@@ -27,14 +27,16 @@
 		}
 	}
 
-	async function createSourceContent(endpoint: string, data: Record<string, any>) {
+	async function createSourceContent(endpoint: string, data: FormData | Record<string, any>) {
 		if (generatingSource) return;
 		generatingSource = true;
 
+		const isFormData = data instanceof FormData;
+
 		return fetch(`${env.API_BASE_URL}/${endpoint}`, {
 			method: 'POST',
-			body: JSON.stringify(data),
-			headers: { 'Content-Type': 'application/json' }
+			body: isFormData ? data : JSON.stringify(data),
+			headers: isFormData ? {} : { 'Content-Type': 'application/json' }
 		})
 			.then((res) => {
 				if (res.ok) return toast.success('Custom source added successfully');
@@ -54,6 +56,16 @@
 	async function createCopyPasteContent(text: string) {
 		return createSourceContent('save-copied-source', { text, sessionId });
 	}
+
+	async function uploadValidatedFiles(files: File[]) {
+		const formData = new FormData();
+		formData.append('sessionId', sessionId);
+		for (let i = 0; i < files.length; i++) {
+			formData.append('files', files[i]);
+		}
+
+		return createSourceContent('save-uploaded-sources', formData);
+	}
 </script>
 
 <Drawer.Root {snapPoints} bind:activeSnapPoint direction="bottom" dismissible shouldScaleBackground>
@@ -95,6 +107,7 @@
 										{generatingSource}
 										on:submitURL={({ detail }) => createURLContent(detail.url)}
 										on:submitCopyPaste={({ detail }) => createCopyPasteContent(detail.text)}
+										on:submitFiles={({ detail }) => uploadValidatedFiles(detail.files)}
 									/>
 								</Accordion.Content>
 							</Accordion.Item>
diff --git a/app/src/lib/components/custom-source/AddCustomSource.svelte b/app/src/lib/components/custom-source/AddCustomSource.svelte
index 850cbc4..9198fc5 100644
--- a/app/src/lib/components/custom-source/AddCustomSource.svelte
+++ b/app/src/lib/components/custom-source/AddCustomSource.svelte
@@ -5,7 +5,6 @@
 	import GeneratingSourceSkeleton from './GeneratingSourceSkeleton.svelte';
 
 	export let generatingSource = false;
-
 	let showWebsiteURLForm = false;
 	let showCopyPasteForm = false;
 </script>
@@ -21,6 +20,7 @@
 		<AddCustomSourceForm
 			on:useWebsiteURL={() => (showWebsiteURLForm = true)}
 			on:useCopyPaste={() => (showCopyPasteForm = true)}
+			on:submitFiles
 		/>
 	{/if}
 </div>
diff --git a/app/src/lib/components/custom-source/AddCustomSourceForm.svelte b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
index bfe10c8..d3615f9 100644
--- a/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
+++ b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
@@ -1,5 +1,5 @@
 <script context="module">
-	const FIVE_MB = 5 * 1024 * 1024;
+	const TEN_MB = 10 * 1024 * 1024;
 </script>
 
 <script lang="ts">
@@ -9,24 +9,18 @@
 	import { FileIcon, LinkIcon, Upload } from 'lucide-svelte';
 	import cs from 'clsx';
 	import { toast } from 'svelte-sonner';
-	import { env } from '@env';
-	import { getSessionContext } from '@/stores/sessionContext.svelte';
 
 	const dispatch = createEventDispatcher<{
 		useWebsiteURL: void;
 		useCopyPaste: void;
+		submitFiles: { files: File[] };
 	}>();
 
-	const { sessionId$ } = getSessionContext();
-
 	let dragActive = false;
 
-	$: sessionId = $sessionId$;
-
 	function handleDrag(e: DragEvent) {
 		e.preventDefault();
 		e.stopPropagation();
-
 		if (e.type === 'dragenter' || e.type === 'dragover') {
 			dragActive = true;
 		} else if (e.type === 'dragleave') {
@@ -42,16 +36,14 @@
 		const files = e.dataTransfer?.files;
 		if (!files) return toast.error('No files found');
 
-		// Validate files
 		const validFiles = getValidFiles(files);
-		if (!validFiles.length) return;
-
-		// Handle file upload here
-		return uploadValidatedFiles(validFiles);
+		if (validFiles.length) {
+			dispatch('submitFiles', { files: validFiles });
+		}
 	}
 
 	function getValidFiles(files: FileList) {
-		// ensure max 5 files each less than 1mb
+		// ensure max 5 files with each less than 10mb
 		if (files.length > 5) {
 			return toast.error('Max 5 files allowed'), [];
 		}
@@ -60,8 +52,8 @@
 
 		for (let i = 0; i < files.length; i++) {
 			const file = files[i];
-			if (file.size > FIVE_MB) {
-				toast.info(`File '${file.name}' exceeds 5MB. Skipping...`);
+			if (file.size > TEN_MB) {
+				toast.info(`File '${file.name}' exceeds 10MB. Skipping...`);
 				continue;
 			}
 
@@ -69,30 +61,10 @@
 				toast.info(`Unsupported file type for ${file.name}. Skipping...`);
 				continue;
 			}
-
 			validFiles.push(file);
 		}
-
 		return validFiles;
 	}
-
-	async function uploadValidatedFiles(files: File[]) {
-		const formData = new FormData();
-		formData.append('sessionId', sessionId);
-		for (let i = 0; i < files.length; i++) {
-			formData.append('files', files[i]);
-		}
-
-		return fetch(`${env.API_BASE_URL}/save-uploaded-sources`, {
-			method: 'POST',
-			body: formData
-		})
-			.then((res) => {
-				if (res.ok) return toast.success('Files uploaded successfully');
-				throw new Error(res.statusText);
-			})
-			.catch((e) => toast.error('Failed to upload files', { description: e.message }));
-	}
 </script>
 
 <Card class="w-full bg-gray-900 border-none">
@@ -128,7 +100,7 @@
 					</p>
 				</div>
 				<p class="text-sm text-gray-500">
-					Supported file types: PDF, .txt, Markdown. (Max size: 1MB)
+					Supported file types: PDF, .txt, Markdown. (Max size: 10MB)
 				</p>
 			</div>
 		</div>

From f1d56cd26eeb9c62f7699778bf414ab326ec9310 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 10:38:07 +0000
Subject: [PATCH 36/45] add a title field on source_content model

---
 api/src/utils/custom_sources/base_utils.py          |  6 +++++-
 .../utils/custom_sources/save_uploaded_sources.py   |  3 +--
 .../components/custom-source/CustomSources.svelte   | 13 ++++++++-----
 app/src/lib/db/db.customSources.ts                  |  1 +
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/api/src/utils/custom_sources/base_utils.py b/api/src/utils/custom_sources/base_utils.py
index 1d1611c..8e04906 100644
--- a/api/src/utils/custom_sources/base_utils.py
+++ b/api/src/utils/custom_sources/base_utils.py
@@ -15,9 +15,13 @@ class SourceContent(BaseModel):
     content: str
     content_type: str
     metadata: dict = {}
+    title: Optional[str] = None
 
     def __str__(self):
-        return f"Content: {self.content}"
+        result = f"Content: {self.content}"
+        if self.title:
+            return f"Title: {self.title}\n{result}"
+        return result
 
 
 class CustomSourceModel(SourceContent):
diff --git a/api/src/utils/custom_sources/save_uploaded_sources.py b/api/src/utils/custom_sources/save_uploaded_sources.py
index 59d4538..28f2882 100644
--- a/api/src/utils/custom_sources/save_uploaded_sources.py
+++ b/api/src/utils/custom_sources/save_uploaded_sources.py
@@ -15,8 +15,6 @@ def __init__(self, session_id: str):
 
     async def _extract_content(self, file: UploadFile):
         file_bytes = await file.read()
-        print(f"FILE_INFO>>>: {file.filename}, Size: {len(file_bytes)} bytes")
-
         # ensure file size is less than 10MB
         if len(file_bytes) > TEN_MB:
             return None
@@ -39,6 +37,7 @@ async def _extract_content(self, file: UploadFile):
             content=text_content,
             content_type=content_type,
             metadata=metadata,
+            title=file.filename,
         )
 
     async def _save_sources(self, files: list[UploadFile]):
diff --git a/app/src/lib/components/custom-source/CustomSources.svelte b/app/src/lib/components/custom-source/CustomSources.svelte
index 462a0d3..d8b89b2 100644
--- a/app/src/lib/components/custom-source/CustomSources.svelte
+++ b/app/src/lib/components/custom-source/CustomSources.svelte
@@ -30,12 +30,15 @@
 					<span class="shrink-0 inline-flex">
 						Custom Source {idx + 1}
 					</span>
-					{#if source.source_type === 'link'}
-						{':'}
-						<span class="text-gray-400 text-start ml-1">
+					{':'}
+					<span class="text-gray-400 text-start ml-1">
+						{#if source.source_type === 'link'}
 							{truncate(source.url, 45)}
-						</span>
-					{/if}
+						{:else}
+							{@const label = source.title || source.id}
+							{truncate(label, 45)}
+						{/if}
+					</span>
 				</div>
 			</Accordion.Trigger>
 			<Accordion.Content>
diff --git a/app/src/lib/db/db.customSources.ts b/app/src/lib/db/db.customSources.ts
index db9d0ac..cf62dd0 100644
--- a/app/src/lib/db/db.customSources.ts
+++ b/app/src/lib/db/db.customSources.ts
@@ -21,6 +21,7 @@ export type Sources = (LinkSource | CopyPasteSource | UploadSource) & {
 	id: string;
 	content_type: 'text/plain' | 'text/html' | 'application/pdf';
 	content: string;
+	title?: string;
 	created_at?: string;
 };
 

From 9b6e4bc8c529ee8904e0e68ffa64349b0c8277e5 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 11:01:50 +0000
Subject: [PATCH 37/45] ensure the user cannot create more than 5 custom
 sources

---
 .../components/ManageAudioSourceDrawer.svelte | 25 ++++++++++++++++---
 .../custom-source/AddCustomSourceForm.svelte  |  6 ++++-
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/app/src/lib/components/ManageAudioSourceDrawer.svelte b/app/src/lib/components/ManageAudioSourceDrawer.svelte
index 303e59f..6ee55db 100644
--- a/app/src/lib/components/ManageAudioSourceDrawer.svelte
+++ b/app/src/lib/components/ManageAudioSourceDrawer.svelte
@@ -1,3 +1,7 @@
+<script context="module">
+	const MAX_ALLOWABLE_SOURCES = 5;
+</script>
+
 <script lang="ts">
 	import * as Drawer from './ui/drawer';
 	import { Button } from './ui/button';
@@ -8,10 +12,11 @@
 	import RenderAudioSources from './RenderAudioSources.svelte';
 	import { getSessionContext } from '@/stores/sessionContext.svelte';
 	import { toast } from 'svelte-sonner';
+	import { cn } from '@/utils/ui.utils';
 
 	export let aiSource: string;
 
-	const { sessionId$ } = getSessionContext();
+	const { sessionId$, customSources$ } = getSessionContext();
 
 	let snapPoints = [0.75, 0.95];
 	let activeSnapPoint = snapPoints[0];
@@ -20,6 +25,8 @@
 	let accordionResetKey = {};
 
 	$: sessionId = $sessionId$;
+	$: numSources = $customSources$?.length;
+	$: overMaxSources = numSources && numSources >= MAX_ALLOWABLE_SOURCES;
 
 	function accordionValueChanged(v: string | string[] | undefined) {
 		if (v === 'item-x') {
@@ -93,10 +100,20 @@
 						<Accordion.Root onValueChange={accordionValueChanged}>
 							<Accordion.Item value="item-x" class="mb-3 rounded-md border-none">
 								<Accordion.Trigger
-									class="no-underline hover:no-underline px-3 border-gray-700 rounded-md border border-dashed bg-gray-900/60 hover:bg-gray-900"
+									class={cn(
+										'no-underline hover:no-underline px-3 border-gray-700 rounded-md border border-dashed bg-gray-900/60 hover:bg-gray-900',
+										{ 'pointer-events-none': overMaxSources }
+									)}
 								>
-									<span class="capitalize font-medium text-gray-400"> Add custom source </span>
-									<span slot="icon" class="p-1 rounded-full border border-gray-500">
+									<div class="flex flex-col items-start gap-y-1">
+										<span class="capitalize font-medium text-gray-400"> Add custom source </span>
+										{#if overMaxSources}
+											<span class="text-sm text-red-300">
+												You've reached a max of {MAX_ALLOWABLE_SOURCES} sources
+											</span>
+										{/if}
+									</div>
+									<span slot="icon" class={'p-1 rounded-full border border-gray-500'}>
 										<PlusIcon
 											class="inline w-6 h-6 text-gray-400 hover:text-gray-200 transition-all"
 										/>
diff --git a/app/src/lib/components/custom-source/AddCustomSourceForm.svelte b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
index d3615f9..52b68a1 100644
--- a/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
+++ b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
@@ -9,6 +9,7 @@
 	import { FileIcon, LinkIcon, Upload } from 'lucide-svelte';
 	import cs from 'clsx';
 	import { toast } from 'svelte-sonner';
+	import { getSessionContext } from '@/stores/sessionContext.svelte';
 
 	const dispatch = createEventDispatcher<{
 		useWebsiteURL: void;
@@ -16,6 +17,8 @@
 		submitFiles: { files: File[] };
 	}>();
 
+	const { customSources$ } = getSessionContext();
+
 	let dragActive = false;
 
 	function handleDrag(e: DragEvent) {
@@ -44,7 +47,8 @@
 
 	function getValidFiles(files: FileList) {
 		// ensure max 5 files with each less than 10mb
-		if (files.length > 5) {
+		const currentFilesCount = $customSources$?.length || 0;
+		if (files.length + currentFilesCount > 5) {
 			return toast.error('Max 5 files allowed'), [];
 		}
 

From dac47b279ab07df8f97a8b34557188d31dd7c838 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 11:17:21 +0000
Subject: [PATCH 38/45] allow uploading a file using the file dialog

---
 .../custom-source/AddCustomSourceForm.svelte  | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/src/lib/components/custom-source/AddCustomSourceForm.svelte b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
index 52b68a1..4c0005c 100644
--- a/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
+++ b/app/src/lib/components/custom-source/AddCustomSourceForm.svelte
@@ -20,6 +20,7 @@
 	const { customSources$ } = getSessionContext();
 
 	let dragActive = false;
+	let fileuploadEl: HTMLInputElement;
 
 	function handleDrag(e: DragEvent) {
 		e.preventDefault();
@@ -36,7 +37,10 @@
 		e.stopPropagation();
 		dragActive = false;
 
-		const files = e.dataTransfer?.files;
+		handleFiles(e.dataTransfer?.files);
+	}
+
+	async function handleFiles(files?: FileList | null) {
 		if (!files) return toast.error('No files found');
 
 		const validFiles = getValidFiles(files);
@@ -100,7 +104,19 @@
 					<h3 class="text-xl">Upload sources</h3>
 					<p class="text-gray-400">
 						Drag & drop or{' '}
-						<button class="text-blue-400 hover:text-blue-300">choose file</button> to upload
+						<button class="text-blue-400 hover:text-blue-300" on:click={() => fileuploadEl.click()}
+							>choose file
+						</button>
+						to upload
+
+						<input
+							type="file"
+							class="hidden"
+							multiple
+							accept=".pdf,.txt"
+							bind:this={fileuploadEl}
+							on:change={(e) => handleFiles(e.currentTarget.files)}
+						/>
 					</p>
 				</div>
 				<p class="text-sm text-gray-500">

From 4f9520cabdb949e13623a57dc75cc904977b62e1 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 11:19:22 +0000
Subject: [PATCH 39/45] cleanup

---
 app/src/lib/components/ManageAudioSourceDrawer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/lib/components/ManageAudioSourceDrawer.svelte b/app/src/lib/components/ManageAudioSourceDrawer.svelte
index 6ee55db..4e9df0e 100644
--- a/app/src/lib/components/ManageAudioSourceDrawer.svelte
+++ b/app/src/lib/components/ManageAudioSourceDrawer.svelte
@@ -109,7 +109,7 @@
 										<span class="capitalize font-medium text-gray-400"> Add custom source </span>
 										{#if overMaxSources}
 											<span class="text-sm text-red-300">
-												You've reached a max of {MAX_ALLOWABLE_SOURCES} sources
+												You've reached a max of {MAX_ALLOWABLE_SOURCES} custom sources
 											</span>
 										{/if}
 									</div>

From e9e6c9c5598861ab16ee71eca2cf31e0b19efa67 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 12:13:07 +0000
Subject: [PATCH 40/45] write source_content to db after it's generated

---
 api/src/utils/audiocast_request.py         | 10 ++++------
 api/src/utils/audiocast_source_refiner.py  |  2 +-
 api/src/utils/custom_sources/base_utils.py |  2 +-
 api/src/utils/generate_audiocast_source.py | 11 +++++------
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/api/src/utils/audiocast_request.py b/api/src/utils/audiocast_request.py
index ecda344..207767c 100644
--- a/api/src/utils/audiocast_request.py
+++ b/api/src/utils/audiocast_request.py
@@ -21,22 +21,20 @@ async def _run(self):
         Returns:
             str: The audiocast source content
         """
-        source_content = await self.__use_openai(self.category, self.preference_summary)
+        additional_ctx = await self.get_context(self.preference_summary)
+        source_content = await self.__use_openai(self.category, self.preference_summary, additional_ctx)
         if not source_content:
             raise ValueError("Failed to generate audiocast source content")
 
         return self._refine(source_content)
 
-    async def __use_openai(self, category: ContentCategory, preference_summary: str):
+    async def __use_openai(self, category: ContentCategory, preference_summary: str, additional_ctx: str):
         """
         Generate audiocast source content using OpenAI.
         """
         refined_summary = re.sub("You want", "A user who wants", preference_summary, flags=re.IGNORECASE)
         refined_summary = re.sub("You", "A user", refined_summary, flags=re.IGNORECASE)
 
-        additional_context = await self.get_context(self.preference_summary)
-        print(f">>> Additional context: {additional_context}")
-
         response = get_openai().chat.completions.create(
             model="gpt-4o",
             messages=[
@@ -45,7 +43,7 @@ async def __use_openai(self, category: ContentCategory, preference_summary: str)
                     "content": generate_source_content_prompt(
                         category,
                         refined_summary,
-                        additional_context,
+                        additional_ctx,
                     ),
                 },
                 {
diff --git a/api/src/utils/audiocast_source_refiner.py b/api/src/utils/audiocast_source_refiner.py
index 0147c31..b4f3184 100644
--- a/api/src/utils/audiocast_source_refiner.py
+++ b/api/src/utils/audiocast_source_refiner.py
@@ -10,7 +10,7 @@ def __init__(self, category: ContentCategory, preference_summary: str):
         self.category = category
         self.preference_summary = preference_summary
 
-    def _refine(self, content):
+    def _refine(self, content: str):
         """
         Moderate and augment the source content to ensure it aligns with the user's preferences.
         """
diff --git a/api/src/utils/custom_sources/base_utils.py b/api/src/utils/custom_sources/base_utils.py
index 8e04906..c6c5850 100644
--- a/api/src/utils/custom_sources/base_utils.py
+++ b/api/src/utils/custom_sources/base_utils.py
@@ -70,7 +70,7 @@ def _get_custom_source(self, source_id: str) -> CustomSourceModel | None:
         if doc.exists and data:
             return cast(CustomSourceModel, self._safe_to_dict(data))
 
-    def _get_custom_sources(self):
+    def _get_custom_sources(self) -> list[CustomSourceModel]:
         self._check_document()
 
         try:
diff --git a/api/src/utils/generate_audiocast_source.py b/api/src/utils/generate_audiocast_source.py
index d637e67..c80df70 100644
--- a/api/src/utils/generate_audiocast_source.py
+++ b/api/src/utils/generate_audiocast_source.py
@@ -27,13 +27,12 @@ async def generate_audiocast_source(request: GenerateAudiocastSource, background
 
     @use_cache_manager(cache_key)
     async def _handler():
-        def update_session_info(info: str):
-            db = SessionManager(session_id, category)
-            background_tasks.add_task(db._update_info, info)
+        db = SessionManager(session_id, category)
+        background_tasks.add_task(db._update_info, "Generating source content...")
 
-        update_session_info("Generating source content...")
-        source_content_generator = GenerateSourceContent(category, preference_summary)
-        source_content = await source_content_generator._run()
+        generator = GenerateSourceContent(category, preference_summary)
+        source_content = await generator._run()
+        background_tasks.add_task(db._update_source, source_content)
 
         return source_content
 

From df49a87b3325cb1d918f05f9d726c8b2cb38efa6 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 12:20:38 +0000
Subject: [PATCH 41/45] add user provided custom sources to the tts_prompt

---
 api/src/utils/audiocast_script_maker.py      |  7 +-
 api/src/utils/generate_audiocast.py          | 86 +++++++++++++-------
 api/src/utils/prompt_templates/tts_prompt.py | 10 ++-
 3 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/api/src/utils/audiocast_script_maker.py b/api/src/utils/audiocast_script_maker.py
index 5c64db1..827d840 100644
--- a/api/src/utils/audiocast_script_maker.py
+++ b/api/src/utils/audiocast_script_maker.py
@@ -13,9 +13,10 @@
 class AudioScriptMaker:
     category: ContentCategory
 
-    def __init__(self, category: ContentCategory, source_content: str):
+    def __init__(self, category: ContentCategory, source_content: str, compiled_custom_sources: str | None = None):
         self.category = category
         self.source_content = source_content
+        self.compiled_custom_sources = compiled_custom_sources
 
     def create(self, provider: AudioScriptProvider = "openai"):
         """
@@ -28,9 +29,11 @@ def create(self, provider: AudioScriptProvider = "openai"):
         """
         print("Generating audio script...")
         print(f"Category: {self.category}; Source content: {self.source_content}")
+        if self.compiled_custom_sources:
+            print(f"Custom sources: {self.compiled_custom_sources}")
 
         prompt_maker = TTSPromptMaker(self.category, Metadata())
-        system_prompt = prompt_maker.get_system_prompt(self.source_content)
+        system_prompt = prompt_maker.get_system_prompt(self.source_content, self.compiled_custom_sources)
 
         if provider == "anthropic":
             audio_script = self.__use_anthropic(system_prompt)
diff --git a/api/src/utils/generate_audiocast.py b/api/src/utils/generate_audiocast.py
index fd46725..eb29abc 100644
--- a/api/src/utils/generate_audiocast.py
+++ b/api/src/utils/generate_audiocast.py
@@ -9,11 +9,40 @@
     GenerateAudioCastRequest,
     GenerateAudioCastResponse,
 )
+from src.utils.chat_utils import ContentCategory
+from src.utils.custom_sources.base_utils import CustomSourceManager
 from src.utils.generate_audiocast_source import GenerateAudiocastSource, generate_audiocast_source
 from src.utils.session_manager import SessionManager
 from src.utils.waveform_utils import WaveformUtils
 
 
+def compile_custom_sources(session_id: str):
+    sources = CustomSourceManager(session_id)._get_custom_sources()
+    return "\n\n".join([str(source) for source in sources if source.content])
+
+
+def post_generate_audio(
+    session_id: str,
+    category: ContentCategory,
+    audio_path: str,
+    audio_script: str,
+):
+    try:
+        # Store audio
+        storage_manager = StorageManager()
+        storage_manager.upload_audio_to_gcs(audio_path, session_id)
+
+        # Update session metadata
+        db = SessionManager(session_id, category)
+        db._update_transcript(audio_script)
+
+        # Generate and save audio waveform as mp4
+        waveform_utils = WaveformUtils(session_id, audio_path)
+        waveform_utils.run_all()
+    except Exception as e:
+        print(f"Error in generate_audiocast background_tasks: {str(e)}")
+
+
 async def generate_audiocast(request: GenerateAudioCastRequest, background_tasks: BackgroundTasks):
     """## Generate audiocast based on a summary of user's request
 
@@ -21,34 +50,42 @@ async def generate_audiocast(request: GenerateAudioCastRequest, background_tasks
     1. Generate source content
     2. Generate audio script
     3. Generate audio
-    4a. Store audio
-    4b. Store the audio waveform on GCS
+    4. a) Store audio. b) Store the audio waveform on GCS
     5. Update session
     """
     summary = request.summary
     category = request.category
     session_id = request.sessionId
 
-    source_content = await generate_audiocast_source(
-        GenerateAudiocastSource(
-            sessionId=session_id,
-            category=category,
-            preferenceSummary=summary,
-        ),
-        background_tasks,
-    )
-
     db = SessionManager(session_id, category)
 
     def update_session_info(info: str):
         background_tasks.add_task(db._update_info, info)
 
+    session_data = SessionManager.data(session_id)
+    source_content = session_data.metadata.source if session_data and session_data.metadata else None
+
+    if not source_content:
+        update_session_info("Generating source content...")
+        source_content = await generate_audiocast_source(
+            GenerateAudiocastSource(
+                sessionId=session_id,
+                category=category,
+                preferenceSummary=summary,
+            ),
+            background_tasks,
+        )
+
     if not source_content:
         raise HTTPException(status_code=500, detail="Failed to generate source content")
 
+    # get custom sources
+    update_session_info("Checking for custom sources...")
+    compiled_custom_sources = compile_custom_sources(session_id)
+
     # Generate audio script
     update_session_info("Generating audio script...")
-    script_maker = AudioScriptMaker(category, source_content)
+    script_maker = AudioScriptMaker(category, source_content, compiled_custom_sources)
     audio_script = script_maker.create(provider="gemini")
 
     if not audio_script:
@@ -59,24 +96,13 @@ def update_session_info(info: str):
     audio_manager = AudioManager(custom_config=AudioManagerConfig(tts_provider="openai"))
     audio_path = await audio_manager.generate_speech(audio_script)
 
-    def _run_on_background():
-        try:
-            # Store audio
-            storage_manager = StorageManager()
-            storage_manager.upload_audio_to_gcs(audio_path, session_id)
-
-            # Update session metadata
-            db._update_source(source_content)
-            db._update_transcript(audio_script)
-            # TODO: add one to update title
-
-            # Generate and save audio waveform as mp4
-            waveform_utils = WaveformUtils(session_id, audio_path)
-            waveform_utils.run_all()
-        except Exception as e:
-            print(f"Error in generate_audiocast background_tasks: {str(e)}")
-
-    background_tasks.add_task(_run_on_background)
+    background_tasks.add_task(
+        post_generate_audio,
+        session_id,
+        category,
+        audio_path,
+        audio_script,
+    )
 
     session_data = SessionManager.data(session_id)
     if not session_data:
diff --git a/api/src/utils/prompt_templates/tts_prompt.py b/api/src/utils/prompt_templates/tts_prompt.py
index 474d1fa..2818108 100644
--- a/api/src/utils/prompt_templates/tts_prompt.py
+++ b/api/src/utils/prompt_templates/tts_prompt.py
@@ -19,15 +19,17 @@ def get_tags(self) -> list[str]:
         """Get connection tags based on the number of speakers."""
         return [f"<Speaker{i}>" for i in range(1, 10)]
 
-    def get_system_prompt(self, source_content: str) -> str:
+    def get_system_prompt(self, source_content: str, compiled_custom_sources: str | None = None) -> str:
         """
         Generate an optimized system prompt for converting a source content into the appropriate format.
         """
-        return f"""You're a super-intelligent AI who generates different forms, styles and genres of audiocast script.
+        return f"""You're a super-intelligent AI that can generate different forms, styles and genres of audiocast script.
 
-        Your task is to transform the following source content into an engaging {self.category} TTS-optimized audiocast script.
+        Your task is to transform the following source contents into an engaging {self.category} TTS-optimized audiocast script.
 
-        Source Content: {source_content}
+        Source Contents:
+        - AI-generated: {source_content}
+        {"- User-provided: " + compiled_custom_sources if compiled_custom_sources else ""}
 
         Content Parameters:
         1. Format: Create {category_qualifiers[self.category]} in TTS-optomized audiocast flow

From 8566d73f772c43054d097fbce9414b800c5681ee Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 12:39:02 +0000
Subject: [PATCH 42/45] specify the correct interface for _get_custom_sources

---
 api/src/utils/custom_sources/base_utils.py | 21 ++++++++++++++++++---
 api/src/utils/generate_audiocast.py        |  2 +-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/api/src/utils/custom_sources/base_utils.py b/api/src/utils/custom_sources/base_utils.py
index c6c5850..6291f6e 100644
--- a/api/src/utils/custom_sources/base_utils.py
+++ b/api/src/utils/custom_sources/base_utils.py
@@ -1,4 +1,4 @@
-from typing import Literal, Optional, cast
+from typing import Literal, Optional, TypedDict, cast
 
 from google.cloud.firestore_v1 import DocumentReference
 from pydantic import BaseModel
@@ -31,6 +31,21 @@ class CustomSourceModel(SourceContent):
     updated_at: Optional[str] = None
 
 
+class SourceContentDict(TypedDict):
+    id: str
+    content: str
+    content_type: str
+    metadata: dict
+    title: Optional[str]
+
+
+class CustomSourceModelDict(SourceContentDict):
+    source_type: Literal["link", "copy/paste", "file_upload"]
+    url: Optional[str]
+    created_at: Optional[str]
+    updated_at: Optional[str]
+
+
 class CustomSourceManager(DBManager):
     collection: Collection = collections["audiora_sessions"]
     sub_collection = "custom_sources"
@@ -70,14 +85,14 @@ def _get_custom_source(self, source_id: str) -> CustomSourceModel | None:
         if doc.exists and data:
             return cast(CustomSourceModel, self._safe_to_dict(data))
 
-    def _get_custom_sources(self) -> list[CustomSourceModel]:
+    def _get_custom_sources(self) -> list[CustomSourceModelDict]:
         self._check_document()
 
         try:
             session_ref = self._get_collection(self.collection).document(self.doc_id)
             docs = session_ref.collection(self.sub_collection).get()
             return [
-                cast(CustomSourceModel, self._safe_to_dict(doc.to_dict()))
+                cast(CustomSourceModelDict, self._safe_to_dict(doc.to_dict()))
                 for doc in docs
                 if doc.exists and doc.to_dict()
             ]
diff --git a/api/src/utils/generate_audiocast.py b/api/src/utils/generate_audiocast.py
index eb29abc..6c1b02e 100644
--- a/api/src/utils/generate_audiocast.py
+++ b/api/src/utils/generate_audiocast.py
@@ -18,7 +18,7 @@
 
 def compile_custom_sources(session_id: str):
     sources = CustomSourceManager(session_id)._get_custom_sources()
-    return "\n\n".join([str(source) for source in sources if source.content])
+    return "\n\n".join([str(source) for source in sources if source["content"]])
 
 
 def post_generate_audio(

From a4477eb4f3ff215c90dd494ad081a7958984aeab Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 12:59:54 +0000
Subject: [PATCH 43/45] improve the prompt to exclude extraneous information in
 user-provided sources

---
 api/src/utils/prompt_templates/tts_prompt.py | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/api/src/utils/prompt_templates/tts_prompt.py b/api/src/utils/prompt_templates/tts_prompt.py
index 2818108..697e53c 100644
--- a/api/src/utils/prompt_templates/tts_prompt.py
+++ b/api/src/utils/prompt_templates/tts_prompt.py
@@ -21,11 +21,11 @@ def get_tags(self) -> list[str]:
 
     def get_system_prompt(self, source_content: str, compiled_custom_sources: str | None = None) -> str:
         """
-        Generate an optimized system prompt for converting a source content into the appropriate format.
+        Generate an optimized system prompt for converting source contents into the appropriate format.
         """
         return f"""You're a super-intelligent AI that can generate different forms, styles and genres of audiocast script.
 
-        Your task is to transform the following source contents into an engaging {self.category} TTS-optimized audiocast script.
+        Your task is to transform the following source contents into a single, engaging {self.category} TTS-optimized audiocast script.
 
         Source Contents:
         - AI-generated: {source_content}
@@ -79,15 +79,20 @@ def get_system_prompt(self, source_content: str, compiled_custom_sources: str |
         - Verify SSML tag accuracy, opening and closure
         - Check speaker tag consistency
         - Clear, accessible language
-        - Maintain accurate representation of source content, don't deviate
+        - Maintain accurate representation of the source contents, don't deviate
         - Appropriate word counnt for {self.category} format
         - Generate only the audiocast transcript
         - Ensure all SSML tags are properly formatted and within the speaker tags
 
+        6. Using the Source Contents:
+        - Treat the source contents as complimentary, transitioning smoothly between sections and segments
+        - Exclude any unnecessary or incompatible details or information
+        - Prioritize sections that greatly support the overall discussion/narrative
+
         Output Format Example for 2 speakers:
         <Speaker1>Hello there! [Content Intro & Overview].</Speaker1>
         <Speaker2>I'm particularly excited about [Specific Aspect]. What caught your attention about this?</Speaker2>
         <Speaker1>Well <break time="0.2s"/> what really stands out is [Key Point]...</Speaker1>
 
-        Remember: Focus solely on conveying the source content in an engaging audio format while optimizing for audio delivery.
+        Remember: Keep the final output engaging and optimized for audio delivery.
         """

From 1986c0ae372b765fa9e624adcd3c715320feea67 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 13:03:41 +0000
Subject: [PATCH 44/45] add FIREBASE_CONFIG to env

---
 .github/workflows/deploy_app.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/deploy_app.yml b/.github/workflows/deploy_app.yml
index f6fa05a..7266f00 100644
--- a/.github/workflows/deploy_app.yml
+++ b/.github/workflows/deploy_app.yml
@@ -24,6 +24,7 @@ env:
   CONFIG_FILE: "app/app.yaml"
   SERVICE: audiora-app
   API_BASE_URL: ${{ secrets.API_BASE_URL }}
+  FIREBASE_CONFIG: ${{ secrets.FIREBASE_CONFIG }}
 
 jobs:
   prepare:
@@ -118,6 +119,7 @@ jobs:
             BUCKET_NAME=${{ secrets.BUCKET_NAME }}
             CLOUD_STORAGE_BUCKET=${{ secrets.BUCKET_NAME }}
             API_BASE_URL=${{ secrets.API_BASE_URL }}
+            FIREBASE_CONFIG=${{ secrets.FIREBASE_CONFIG }}
 
       - run: curl -f "${{ steps.deploy.outputs.url }}"
       - uses: marocchino/sticky-pull-request-comment@v2

From 60d346484bfca5b68145704fbe5ddf159a77352f Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 22 Nov 2024 13:24:58 +0000
Subject: [PATCH 45/45] remove firebase_config from env_vars

---
 .github/workflows/deploy_app.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/deploy_app.yml b/.github/workflows/deploy_app.yml
index 7266f00..9be7444 100644
--- a/.github/workflows/deploy_app.yml
+++ b/.github/workflows/deploy_app.yml
@@ -119,7 +119,6 @@ jobs:
             BUCKET_NAME=${{ secrets.BUCKET_NAME }}
             CLOUD_STORAGE_BUCKET=${{ secrets.BUCKET_NAME }}
             API_BASE_URL=${{ secrets.API_BASE_URL }}
-            FIREBASE_CONFIG=${{ secrets.FIREBASE_CONFIG }}
 
       - run: curl -f "${{ steps.deploy.outputs.url }}"
       - uses: marocchino/sticky-pull-request-comment@v2