From eb8968e80035ab1fc4fbaa600dce37499275aa58 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 26 Aug 2024 03:02:37 -0700
Subject: [PATCH 1/5] Formatting

---
 src/ui/UserPortal/components/ChatMessage.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue
index 987265f7d0..1309cd670f 100644
--- a/src/ui/UserPortal/components/ChatMessage.vue
+++ b/src/ui/UserPortal/components/ChatMessage.vue
@@ -678,11 +678,11 @@ iframe {
 }
 
 .attachment-icon {
-        width: 24px;
-        margin-right: 4px;
-        vertical-align: middle;
-        line-height: 1;
-    }
+	width: 24px;
+	margin-right: 4px;
+	vertical-align: middle;
+	line-height: 1;
+}
 </style>
 
 <style lang="scss">

From 86fe15144cf629f7f5aa44c5c062fe198a7d58bc Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 26 Aug 2024 03:58:03 -0700
Subject: [PATCH 2/5] Comments and minor clean up

---
 src/ui/UserPortal/components/ChatMessage.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue
index 1309cd670f..647260d618 100644
--- a/src/ui/UserPortal/components/ChatMessage.vue
+++ b/src/ui/UserPortal/components/ChatMessage.vue
@@ -52,10 +52,12 @@
 					<template v-else>
 						<!-- Render the html content and any vue components within -->
 						<div v-for="content in messageContent" :key="content.fileName" class="message-content">
+							<!-- Text -->
 							<div v-if="content.type === 'text'">
 								<component :is="renderMarkdownComponent(content.value)"></component>
 							</div>
 
+							<!-- Image -->
 							<div v-else-if="content.type === 'image_file'">
 								<template v-if="content.loading || (!content.error && !content.blobUrl)">
 									<div class="loading-content-container">
@@ -88,6 +90,7 @@
 								</div>
 							</div>
 
+							<!-- HTML -->
 							<div v-else-if="content.type === 'html'">
 								<template v-if="content.loading || (!content.error && !content.blobUrl)">
 									<div class="loading-content-container">
@@ -102,6 +105,7 @@
 								<iframe v-if="content.blobUrl" :src="content.blobUrl" frameborder="0"> </iframe>
 							</div>
 
+							<!-- File -->
 							<div v-else-if="content.type === 'file_path'">
 								Download <i :class="$getFileIconClass(content.fileName, true)" class="attachment-icon"></i> 
 								<a
@@ -127,7 +131,9 @@
 					</template>
 				</div>
 
+				<!-- Assistant message footer -->
 				<div v-if="message.sender !== 'User'" class="message__footer">
+					<!-- Citations -->
 					<div v-if="message.citations?.length" class="citations">
 						<span><b>Citations: </b></span>
 						<span
@@ -140,6 +146,8 @@
 							{{ citation.title.split('/').pop() }}
 						</span>
 					</div>
+
+					<!-- Rating -->
 					<span class="ratings">
 						<!-- Like -->
 						<span>
@@ -211,6 +219,7 @@
 			{{ $filters.timeAgo(new Date(message.timeStamp)) }}
 		</Divider>
 
+		<!-- Analysis Modal -->
 		<AnalysisModal
 			:visible="isAnalysisModalVisible"
 			:analysisResults="message.analysisResults ?? []"
@@ -247,6 +256,7 @@ renderer.code = (code, language) => {
 	const encodedCode = encodeURIComponent(sourceCode);
 	return `<pre><code class="${languageClass}" data-code="${encodedCode}" data-language="${highlighted.language}">${highlighted.value}</code></pre>`;
 };
+
 function processLatex(html) {
 	const blockLatexPattern = /\\\[([^\]]+)\\\]/g;
 	const inlineLatexPattern = /\\\(([^\)]+)\\\)/g;
@@ -367,6 +377,8 @@ export default {
 	},
 
 	created() {
+		this.fetchContentFiles();
+
 		if (this.showWordAnimation) {
 			this.displayWordByWord();
 		} else {
@@ -374,10 +386,6 @@ export default {
 		}
 	},
 
-	mounted() {
-		this.fetchContentFiles();
-	},
-
 	methods: {
 		renderMarkdownComponent(contentValue: string) {
 			let htmlContent = processLatex(contentValue ?? '');

From 23a06ebde2651fb2ee824c46465d839b3a63e721 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 26 Aug 2024 03:58:47 -0700
Subject: [PATCH 3/5] Render code header for text based message content

---
 src/ui/UserPortal/components/ChatMessage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue
index 647260d618..cc35abc454 100644
--- a/src/ui/UserPortal/components/ChatMessage.vue
+++ b/src/ui/UserPortal/components/ChatMessage.vue
@@ -390,6 +390,7 @@ export default {
 		renderMarkdownComponent(contentValue: string) {
 			let htmlContent = processLatex(contentValue ?? '');
 			htmlContent = DOMPurify.sanitize(marked(htmlContent));
+			htmlContent = addCodeHeaderComponents(htmlContent);
 			return {
 				template: `<div>${htmlContent}</div>`,
 				components: {

From 6b307c025a1300d34739fb18f8038c23c4873f94 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 26 Aug 2024 05:25:27 -0700
Subject: [PATCH 4/5] Minor clean up

---
 src/ui/UserPortal/components/ChatMessage.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue
index cc35abc454..6e00d86688 100644
--- a/src/ui/UserPortal/components/ChatMessage.vue
+++ b/src/ui/UserPortal/components/ChatMessage.vue
@@ -256,6 +256,7 @@ renderer.code = (code, language) => {
 	const encodedCode = encodeURIComponent(sourceCode);
 	return `<pre><code class="${languageClass}" data-code="${encodedCode}" data-language="${highlighted.language}">${highlighted.value}</code></pre>`;
 };
+marked.use({ renderer });
 
 function processLatex(html) {
 	const blockLatexPattern = /\\\[([^\]]+)\\\]/g;
@@ -283,8 +284,6 @@ function processLatex(html) {
 	return html;
 }
 
-marked.use({ renderer });
-
 function addCodeHeaderComponents(htmlString) {
 	const parser = new DOMParser();
 	const doc = parser.parseFromString(htmlString, 'text/html');

From 13e79f54b8dc69f9eee78da29f84f6e921f27bb2 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 26 Aug 2024 05:49:33 -0700
Subject: [PATCH 5/5] Initial ChatMessageContentBlock component and
 implementation

---
 src/ui/UserPortal/components/ChatMessage.vue  | 251 ++++--------------
 .../components/ChatMessageContentBlock.vue    | 178 +++++++++++++
 2 files changed, 231 insertions(+), 198 deletions(-)
 create mode 100644 src/ui/UserPortal/components/ChatMessageContentBlock.vue

diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue
index 6e00d86688..378b5bf3df 100644
--- a/src/ui/UserPortal/components/ChatMessage.vue
+++ b/src/ui/UserPortal/components/ChatMessage.vue
@@ -35,100 +35,32 @@
 
 				<!-- Message text -->
 				<div class="message__body">
+					<!-- Attachments -->
 					<AttachmentList
 						v-if="message.sender === 'User'"
 						:attachments="message.attachmentDetails ?? []"
 						:attachmentIds="message.attachments"
 					/>
 
+					<!-- Message loading -->
 					<template v-if="message.sender === 'Assistant' && message.type === 'LoadingMessage'">
 						<i class="pi pi-spin pi-spinner"></i>
 					</template>
 
-					<template v-if="!messageContent || messageContent.length === 0">
-						<div v-html="compiledVueTemplate"></div>
-					</template>
-
-					<template v-else>
-						<!-- Render the html content and any vue components within -->
-						<div v-for="content in messageContent" :key="content.fileName" class="message-content">
-							<!-- Text -->
-							<div v-if="content.type === 'text'">
-								<component :is="renderMarkdownComponent(content.value)"></component>
-							</div>
-
-							<!-- Image -->
-							<div v-else-if="content.type === 'image_file'">
-								<template v-if="content.loading || (!content.error && !content.blobUrl)">
-									<div class="loading-content-container">
-										<i class="pi pi-image loading-content-icon" style="font-size: 2rem"></i>
-										<i
-											class="pi pi-spin pi-spinner loading-content-icon"
-											style="font-size: 1rem"
-										></i>
-										<span class="loading-content-text">Loading image...</span>
-									</div>
-								</template>
-								<Image
-									v-if="content.blobUrl"
-									:src="content.blobUrl"
-									:alt="content.fileName"
-									@load="content.loading = false"
-									@error="
-										content.loading = false;
-										content.error = true;
-									"
-									width="45%"
-									preview
-								/>
-								<div v-if="content.error" class="loading-content-error">
-									<i
-										class="pi pi-times-circle loading-content-error-icon"
-										style="font-size: 2rem"
-									></i>
-									<span class="loading-content-error-text">Could not load image</span>
-								</div>
-							</div>
-
-							<!-- HTML -->
-							<div v-else-if="content.type === 'html'">
-								<template v-if="content.loading || (!content.error && !content.blobUrl)">
-									<div class="loading-content-container">
-										<i class="pi pi-chart-line loading-content-icon" style="font-size: 2rem"></i>
-										<i
-											class="pi pi-spin pi-spinner loading-content-icon"
-											style="font-size: 1rem"
-										></i>
-										<span class="loading-content-text">Loading visualization...</span>
-									</div>
-								</template>
-								<iframe v-if="content.blobUrl" :src="content.blobUrl" frameborder="0"> </iframe>
-							</div>
-
-							<!-- File -->
-							<div v-else-if="content.type === 'file_path'">
-								Download <i :class="$getFileIconClass(content.fileName, true)" class="attachment-icon"></i> 
-								<a
-									:href="content.blobUrl"
-									:download="content.fileName ?? content.blobUrl ?? content.value"
-									target="_blank"
-								>
-									{{ content.fileName ?? content.blobUrl }}
-								</a>
-							</div>
-						</div>
-
-						<Button
-							v-if="message.analysisResults && message.analysisResults.length > 0"
-							class="message__button"
-							:disabled="message.type === 'LoadingMessage'"
-							size="small"
-							text
-							icon="pi pi-window-maximize"
-							label="Analysis"
-							@click.stop="showAnalysisModal"
-						/>
-					</template>
+					<!-- Render the html content and any vue components within -->
+					<component v-else :is="compiledMarkdownComponent" />
+
+					<!-- Analysis button -->
+					<Button
+						v-if="message.analysisResults && message.analysisResults.length > 0"
+						class="message__button"
+						:disabled="message.type === 'LoadingMessage'"
+						size="small"
+						text
+						icon="pi pi-window-maximize"
+						label="Analysis"
+						@click.stop="showAnalysisModal"
+					/>
 				</div>
 
 				<!-- Assistant message footer -->
@@ -240,12 +172,12 @@ import type { PropType, ref } from 'vue';
 import type { Message, CompletionPrompt } from '@/js/types';
 import api from '@/js/api';
 import CodeBlockHeader from '@/components/CodeBlockHeader.vue';
+import ChatMessageContentBlock from '@/components/ChatMessageContentBlock.vue';
 import AttachmentList from '@/components/AttachmentList.vue';
 import AnalysisModal from '@/components/AnalysisModal.vue';
 import AgentIcon from '@/components/AgentIcon.vue';
 
 const renderer = new marked.Renderer();
-
 renderer.code = (code, language) => {
 	const sourceCode = code.raw || code;
 	const validLanguage = !!(language && hljs.getLanguage(language));
@@ -277,9 +209,9 @@ function processLatex(html) {
 	});
 
 	// If LaTeX was found, render the content again with marked
-	if (hasBlockLatex || hasInlineLatex) {
-		html = marked(html);
-	}
+	// if (hasBlockLatex || hasInlineLatex) {
+	// 	html = marked(html);
+	// }
 
 	return html;
 }
@@ -360,9 +292,37 @@ export default {
 
 	computed: {
 		compiledMarkdown() {
-			let htmlContent = processLatex(this.message.text ?? '');
-			htmlContent = marked(htmlContent);
-			return DOMPurify.sanitize(htmlContent);
+			function processContentBlock(contentToProcess) {
+				let htmlContent = processLatex(contentToProcess ?? '');
+				htmlContent = marked(htmlContent);
+				return DOMPurify.sanitize(htmlContent);
+			};
+
+			let content = '';
+			if (this.messageContent && this.messageContent?.length > 0) {
+				this.messageContent.forEach((contentBlock) => {
+					switch (contentBlock.type) {
+						case 'text':
+							content += processContentBlock(contentBlock.value);
+							break;
+						// case 'image_file':
+						// 	break;
+						// case 'html':
+						// 	break;
+						// case 'file_path':
+						// 	break;
+						default:
+							// Maybe just pass invidual values directly as primitives instead of full object
+							const contentBlockEncoded = encodeURIComponent(JSON.stringify(contentBlock));
+							content += `<chat-message-content-block contentencoded="${contentBlockEncoded}"></chat-message-content-block>`;
+							break;
+					}
+				});
+			} else {
+				content = processContentBlock(this.message.text);
+			}
+
+			return content;
 		},
 
 		compiledMarkdownComponent() {
@@ -370,14 +330,13 @@ export default {
 				template: `<div>${this.compiledVueTemplate}</div>`,
 				components: {
 					CodeBlockHeader,
+					ChatMessageContentBlock,
 				},
 			};
 		},
 	},
 
 	created() {
-		this.fetchContentFiles();
-
 		if (this.showWordAnimation) {
 			this.displayWordByWord();
 		} else {
@@ -386,18 +345,6 @@ export default {
 	},
 
 	methods: {
-		renderMarkdownComponent(contentValue: string) {
-			let htmlContent = processLatex(contentValue ?? '');
-			htmlContent = DOMPurify.sanitize(marked(htmlContent));
-			htmlContent = addCodeHeaderComponents(htmlContent);
-			return {
-				template: `<div>${htmlContent}</div>`,
-				components: {
-					CodeBlockHeader,
-				},
-			};
-		},
-
 		displayWordByWord() {
 			const words = this.compiledMarkdown.split(/\s+/);
 			if (this.currentWordIndex >= words.length) {
@@ -412,7 +359,7 @@ export default {
 				stripTags: false,
 				ellipsis: '',
 				decodeEntities: false,
-				excludes: '',
+				excludes: ['code-block-header', 'chat-message-content-block'],
 				reserveLastWord: false,
 				keepWhitespaces: true,
 			});
@@ -451,34 +398,6 @@ export default {
 			this.prompt = prompt;
 			this.viewPrompt = true;
 		},
-
-		// Add this method to fetch content files securely
-		async fetchContentFiles() {
-			if (!this.messageContent || this.messageContent.length === 0) return;
-
-			const fetchPromises = this.messageContent.map(async (content) => {
-				if (['image_file', 'html', 'file_path'].includes(content.type)) {
-					content.loading = true;
-					content.error = false;
-					try {
-						const response = await api.fetchDirect(content.value);
-						if (content.type === 'html') {
-							const blob = new Blob([response], { type: 'text/html' });
-							content.blobUrl = URL.createObjectURL(blob);
-						} else {
-							content.blobUrl = URL.createObjectURL(response);
-						}
-						content.fileName = content.fileName?.split('/').pop();
-					} catch (error) {
-						console.error(`Failed to fetch content from ${content.value}`, error);
-						content.error = true;
-					}
-					content.loading = false;
-				}
-			});
-
-			await Promise.all(fetchPromises);
-		},
 	},
 };
 </script>
@@ -627,70 +546,6 @@ export default {
 	border-color: var(--primary-button-bg) !important;
 	color: var(--primary-button-text) !important;
 }
-
-.message-content {
-	margin-top: 5px;
-	margin-bottom: 5px;
-}
-
-img {
-	max-width: 100%;
-	height: auto;
-	border-radius: 8px;
-}
-
-iframe {
-	width: 100%;
-	height: 600px;
-	border-radius: 8px;
-}
-
-.loading-content-container {
-	display: flex;
-	align-items: center;
-
-	.loading-content-icon {
-		margin-right: 8px;
-		vertical-align: middle;
-		line-height: 1;
-	}
-
-	.loading-content-text {
-		font-size: 0.75rem;
-		font-style: italic;
-		line-height: 1.5;
-	}
-}
-
-.loading-content-error {
-	display: flex;
-	align-items: center;
-	width: 200px;
-	padding: 8px 12px;
-	border-radius: 0.75rem;
-	border-color: rgb(182, 2, 2);
-	color: rgb(182, 2, 2);
-	box-shadow: 0 1px 3px rgba(182, 2, 2, 0.664);
-
-	.loading-content-error-icon {
-		margin-right: 8px;
-		vertical-align: middle;
-		line-height: 1;
-	}
-
-	.loading-content-error-text {
-		font-size: 0.85rem;
-		font-style: italic;
-		line-height: 1.5;
-	}
-}
-
-.attachment-icon {
-	width: 24px;
-	margin-right: 4px;
-	vertical-align: middle;
-	line-height: 1;
-}
 </style>
 
 <style lang="scss">
diff --git a/src/ui/UserPortal/components/ChatMessageContentBlock.vue b/src/ui/UserPortal/components/ChatMessageContentBlock.vue
new file mode 100644
index 0000000000..2244e533e1
--- /dev/null
+++ b/src/ui/UserPortal/components/ChatMessageContentBlock.vue
@@ -0,0 +1,178 @@
+<template>
+	<div v-if="content" class="message-content">
+		<!-- Image -->
+		<div v-if="content.type === 'image_file'">
+			<template v-if="loading || (!error && !content.blobUrl)">
+				<div class="loading-content-container">
+					<i class="pi pi-image loading-content-icon" style="font-size: 2rem"></i>
+					<i
+						class="pi pi-spin pi-spinner loading-content-icon"
+						style="font-size: 1rem"
+					></i>
+					<span class="loading-content-text">Loading image...</span>
+				</div>
+			</template>
+			<Image
+				v-if="content.blobUrl"
+				:src="content.blobUrl"
+				:alt="content.fileName"
+				@load="loading = false"
+				@error="
+					loading = false;
+					error = true;
+				"
+				width="45%"
+				preview
+			/>
+			<div v-if="error" class="loading-content-error">
+				<i
+					class="pi pi-times-circle loading-content-error-icon"
+					style="font-size: 2rem"
+				></i>
+				<span class="loading-content-error-text">Could not load image</span>
+			</div>
+		</div>
+
+		<!-- HTML -->
+		<div v-else-if="content.type === 'html'">
+			<template v-if="loading || (!content.blobUrl)">
+				<div class="loading-content-container">
+					<i class="pi pi-chart-line loading-content-icon" style="font-size: 2rem"></i>
+					<i
+						class="pi pi-spin pi-spinner loading-content-icon"
+						style="font-size: 1rem"
+					></i>
+					<span class="loading-content-text">Loading visualization...</span>
+				</div>
+			</template>
+			<iframe v-if="content.blobUrl" :src="content.blobUrl" frameborder="0"></iframe>
+		</div>
+
+		<!-- File -->
+		<div v-else-if="content.type === 'file_path'">
+			Download <i :class="$getFileIconClass(content.fileName, true)" class="attachment-icon"></i> 
+			<a
+				:href="content.blobUrl"
+				:download="content.fileName ?? content.blobUrl ?? content.value"
+				target="_blank"
+			>
+				{{ content.fileName ?? content.blobUrl }}
+			</a>
+		</div>
+	</div>
+</template>
+
+<script>
+import api from '@/js/api';
+
+export default {
+	props: {
+		contentencoded: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			content: null,
+			loading: false,
+			error: false,
+		};
+	},
+
+	// computed: {
+	// 	content() {
+	// 		return JSON.parse(decodeURIComponent(this.contentencoded));
+	// 	},
+	// },
+
+	async created() {
+		this.content = JSON.parse(decodeURIComponent(this.contentencoded));
+
+		if (['image_file', 'html', 'file_path'].includes(this.content.type)) {
+			this.loading = true;
+			try {
+				const response = await api.fetchDirect(this.content.value);
+				if (this.content.type === 'html') {
+					const blob = new Blob([response], { type: 'text/html' });
+					this.content.blobUrl = URL.createObjectURL(blob);
+				} else {
+					this.content.blobUrl = URL.createObjectURL(response);
+				}
+				this.content.fileName = this.content.fileName?.split('/').pop();
+			} catch (error) {
+				console.error(`Failed to fetch content from ${this.content.value}`, error);
+				this.error = true;
+			}
+			this.loading = false;
+		}
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.message-content {
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+	border-radius: 8px;
+}
+
+iframe {
+	width: 100%;
+	height: 600px;
+	border-radius: 8px;
+}
+
+.loading-content-container {
+	display: flex;
+	align-items: center;
+
+	.loading-content-icon {
+		margin-right: 8px;
+		vertical-align: middle;
+		line-height: 1;
+	}
+
+	.loading-content-text {
+		font-size: 0.75rem;
+		font-style: italic;
+		line-height: 1.5;
+	}
+}
+
+.loading-content-error {
+	display: flex;
+	align-items: center;
+	width: 200px;
+	padding: 8px 12px;
+	border-radius: 0.75rem;
+	border-color: rgb(182, 2, 2);
+	color: rgb(182, 2, 2);
+	box-shadow: 0 1px 3px rgba(182, 2, 2, 0.664);
+
+	.loading-content-error-icon {
+		margin-right: 8px;
+		vertical-align: middle;
+		line-height: 1;
+	}
+
+	.loading-content-error-text {
+		font-size: 0.85rem;
+		font-style: italic;
+		line-height: 1.5;
+	}
+}
+
+.attachment-icon {
+	width: 24px;
+	margin-right: 4px;
+	vertical-align: middle;
+	line-height: 1;
+}
+</style>
\ No newline at end of file