From 4c490132ba77e78433d3b7b2474b69b07bf60eb8 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 6 May 2024 15:14:33 -0700
Subject: [PATCH] refac: styling

---
 backend/apps/rag/utils.py                     |  2 +
 .../chat/Messages/CitationsModal.svelte       | 49 ++++++++++---------
 .../chat/Messages/ResponseMessage.svelte      |  2 +
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/backend/apps/rag/utils.py b/backend/apps/rag/utils.py
index 8efa1a9f7..944abb219 100644
--- a/backend/apps/rag/utils.py
+++ b/backend/apps/rag/utils.py
@@ -320,6 +320,7 @@ def rag_messages(
         extracted_collections.extend(collection)
 
     context_string = ""
+
     citations = []
     for context in relevant_contexts:
         try:
@@ -335,6 +336,7 @@ def rag_messages(
                     )
         except Exception as e:
             log.exception(e)
+
     context_string = context_string.strip()
 
     ra_content = rag_template(
diff --git a/src/lib/components/chat/Messages/CitationsModal.svelte b/src/lib/components/chat/Messages/CitationsModal.svelte
index 1043577e8..8a030b7b8 100644
--- a/src/lib/components/chat/Messages/CitationsModal.svelte
+++ b/src/lib/components/chat/Messages/CitationsModal.svelte
@@ -23,7 +23,7 @@
 
 <Modal size="lg" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4">
+		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
 			<div class=" text-lg font-medium self-center capitalize">
 				{$i18n.t('Citation')}
 			</div>
@@ -45,29 +45,32 @@
 				</svg>
 			</button>
 		</div>
-		<div class="flex flex-col w-full px-5 py-4 dark:text-gray-200 overflow-y-scroll max-h-[22rem]">
-			{#each mergedDocuments as document, documentIdx}
-				<div class="flex flex-col w-full">
-					<div class=" font-medium dark:text-gray-300">
-						{$i18n.t('Source')}
-					</div>
-					<div class="text-sm dark:text-gray-400">
-						{document.metadata?.source ?? $i18n.t('No source available')}
-					</div>
-				</div>
-				<div class="flex flex-col w-full">
-					<div class=" font-medium dark:text-gray-300">
-						{$i18n.t('Content')}
-					</div>
-					<pre class="text-sm dark:text-gray-400">
-						{document.document}
-					</pre>
-				</div>
 
-				{#if documentIdx !== mergedDocuments.length - 1}
-					<hr class=" dark:border-gray-850" />
-				{/if}
-			{/each}
+		<div class="flex flex-col md:flex-row w-full px-5 pb-5 md:space-x-4">
+			<div class="flex flex-col w-full dark:text-gray-200 overflow-y-scroll max-h-[22rem]">
+				{#each mergedDocuments as document, documentIdx}
+					<div class="flex flex-col w-full">
+						<div class="text-sm font-medium dark:text-gray-300">
+							{$i18n.t('Source')}
+						</div>
+						<div class="text-sm dark:text-gray-400">
+							{document.metadata?.source ?? $i18n.t('No source available')}
+						</div>
+					</div>
+					<div class="flex flex-col w-full">
+						<div class=" text-sm font-medium dark:text-gray-300">
+							{$i18n.t('Content')}
+						</div>
+						<pre class="text-sm dark:text-gray-400 whitespace-pre-line">
+							{document.document}
+						</pre>
+					</div>
+
+					{#if documentIdx !== mergedDocuments.length - 1}
+						<hr class=" dark:border-gray-850 my-3" />
+					{/if}
+				{/each}
+			</div>
 		</div>
 	</div>
 </Modal>
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 033ebcf7a..b7a4f259c 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -141,6 +141,7 @@
 				const zipped = (citation?.document ?? []).map(function (document, index) {
 					return [document, citation.metadata?.[index]];
 				});
+
 				for (const [document, metadata] of zipped) {
 					const source = metadata?.source ?? 'N/A';
 					if (source in flattenedCitations) {
@@ -154,6 +155,7 @@
 					}
 				}
 			}
+
 			console.log(flattenedCitations);
 			console.log(Object.keys(flattenedCitations));
 		}