From 8e677d8ea47327513aa6b8ede711ccdc8334bd8d Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Fri, 9 Aug 2024 14:29:17 -0400
Subject: [PATCH 1/3] Add file name to message content and introduce constants

---
 .../Constants/Chat/MessageContentTypes.cs     | 34 +++++++++++++++++++
 .../Common/Models/Chat/MessageContent.cs      |  6 ++++
 2 files changed, 40 insertions(+)
 create mode 100644 src/dotnet/Common/Constants/Chat/MessageContentTypes.cs

diff --git a/src/dotnet/Common/Constants/Chat/MessageContentTypes.cs b/src/dotnet/Common/Constants/Chat/MessageContentTypes.cs
new file mode 100644
index 0000000000..4fb7ba4598
--- /dev/null
+++ b/src/dotnet/Common/Constants/Chat/MessageContentTypes.cs
@@ -0,0 +1,34 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace FoundationaLLM.Common.Constants.Chat
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public static class MessageContentTypes
+    {
+        /// <summary>
+        /// Plaintext and formatted text, such as markdown.
+        /// </summary>
+        public const string Text = "text";
+
+        /// <summary>
+        /// Image file link.
+        /// </summary>
+        public const string Image = "image";
+
+        /// <summary>
+        /// General file link.
+        /// </summary>
+        public const string File = "file";
+
+        /// <summary>
+        /// HTML file link.
+        /// </summary>
+        public const string Html = "html";
+    }
+}
diff --git a/src/dotnet/Common/Models/Chat/MessageContent.cs b/src/dotnet/Common/Models/Chat/MessageContent.cs
index 81d646862a..8486ca8e92 100644
--- a/src/dotnet/Common/Models/Chat/MessageContent.cs
+++ b/src/dotnet/Common/Models/Chat/MessageContent.cs
@@ -13,6 +13,12 @@ public class MessageContent
         [JsonPropertyName("type")]
         public string? Type { get; set; }
 
+        /// <summary>
+        /// The file name related to the Value, if applicable.
+        /// </summary>
+        [JsonPropertyName("file_name")]
+        public string? FileName { get; set; }
+
         /// <summary>
         /// The value of the message content.
         /// </summary>

From d0ad08ca55be9267cdbe1d24f85f2aeccc10f303 Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Fri, 9 Aug 2024 14:30:03 -0400
Subject: [PATCH 2/3] Handle processing message content items in the User
 Portal and rendering based on type

---
 src/ui/UserPortal/components/ChatMessage.vue | 46 +++++++++++++++++++-
 src/ui/UserPortal/js/types/index.ts          |  7 +++
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue
index e91092569c..5125c10887 100644
--- a/src/ui/UserPortal/components/ChatMessage.vue
+++ b/src/ui/UserPortal/components/ChatMessage.vue
@@ -40,8 +40,23 @@
 						<i class="pi pi-spin pi-spinner"></i>
 					</template>
 
-					<!-- Render the html content and any vue components within -->
-					<component :is="compiledMarkdownComponent"></component>
+					<template v-if="!message.content">
+						<div v-html="compiledVueTemplate"></div>
+					</template>
+					<template v-else>
+						<!-- Render the html content and any vue components within -->
+						<div v-for="content in message.content" :key="content.file_name" class="message-content">
+							<div v-if="content.type === 'text'">
+								<component :is="renderMarkdownComponent(content.value)"></component>
+							</div>
+							<div v-else-if="content.type === 'image'">
+								<img :src="content.value" :alt="content.file_name" />
+							</div>
+							<div v-else-if="content.type === 'html'">
+								<iframe :src="content.value" frameborder="0"></iframe>
+							</div>
+						</div>
+					</template>
 				</div>
 
 				<div v-if="message.sender !== 'User'" class="message__footer">
@@ -229,6 +244,16 @@ export default {
 	},
 
 	methods: {
+		renderMarkdownComponent(contentValue: string) {
+      		const sanitizedContent = DOMPurify.sanitize(marked(contentValue));
+			return {
+				template: `<div>${sanitizedContent}</div>`,
+				components: {
+				CodeBlockHeader,
+				},
+			};
+		},
+
 		displayWordByWord() {
 			const words = this.compiledMarkdown.split(/\s+/);
 			if (this.currentWordIndex >= words.length) {
@@ -430,6 +455,23 @@ 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;
+}
 </style>
 
 <style lang="scss">
diff --git a/src/ui/UserPortal/js/types/index.ts b/src/ui/UserPortal/js/types/index.ts
index d4cdc03250..b0c28b41ed 100644
--- a/src/ui/UserPortal/js/types/index.ts
+++ b/src/ui/UserPortal/js/types/index.ts
@@ -34,6 +34,13 @@ export interface Message {
 	vector: Array<Number>;
 	completionPromptId: string | null;
 	citations: Array<Citation>;
+	content: Array<MessageContent>;
+}
+
+export interface MessageContent {
+	type: string;
+	file_name: string;
+	value: string;
 }
 
 export interface Session {

From ffc24e869f74c732fd70dcadd2c92ed6fb15e78f Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Fri, 9 Aug 2024 15:08:49 -0400
Subject: [PATCH 3/3] Handle file types in message content items

---
 src/dotnet/Common/Models/Chat/MessageContent.cs | 2 +-
 src/ui/UserPortal/components/ChatMessage.vue    | 3 +++
 src/ui/UserPortal/js/types/index.ts             | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/dotnet/Common/Models/Chat/MessageContent.cs b/src/dotnet/Common/Models/Chat/MessageContent.cs
index 8486ca8e92..30484acb04 100644
--- a/src/dotnet/Common/Models/Chat/MessageContent.cs
+++ b/src/dotnet/Common/Models/Chat/MessageContent.cs
@@ -16,7 +16,7 @@ public class MessageContent
         /// <summary>
         /// The file name related to the Value, if applicable.
         /// </summary>
-        [JsonPropertyName("file_name")]
+        [JsonPropertyName("fileName")]
         public string? FileName { get; set; }
 
         /// <summary>
diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue
index 5125c10887..737d7e399f 100644
--- a/src/ui/UserPortal/components/ChatMessage.vue
+++ b/src/ui/UserPortal/components/ChatMessage.vue
@@ -55,6 +55,9 @@
 							<div v-else-if="content.type === 'html'">
 								<iframe :src="content.value" frameborder="0"></iframe>
 							</div>
+							<div v-else-if="content.type === 'file'">
+								Download <a :href="content.value" target="_blank">{{ content.fileName ?? content.value }}</a>
+							</div>
 						</div>
 					</template>
 				</div>
diff --git a/src/ui/UserPortal/js/types/index.ts b/src/ui/UserPortal/js/types/index.ts
index b0c28b41ed..cafd0258ce 100644
--- a/src/ui/UserPortal/js/types/index.ts
+++ b/src/ui/UserPortal/js/types/index.ts
@@ -39,7 +39,7 @@ export interface Message {
 
 export interface MessageContent {
 	type: string;
-	file_name: string;
+	fileName: string;
 	value: string;
 }