Merge pull request #1397 from solliancenet/jdh-update-release-0.8.0-r…

…ender-files

(0.8.0) User Portal: Render files

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";
+    }
+}

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("fileName")]
+        public string? FileName { get; set; }
+
         /// <summary>
         /// The value of the message content.
         /// </summary>

src/ui/UserPortal/components/ChatMessage.vue

@@ -40,8 +40,26 @@
 						<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 v-else-if="content.type === 'file'">
+								Download <a :href="content.value" target="_blank">{{ content.fileName ?? content.value }}</a>
+							</div>
+						</div>
+					</template>
 				</div>
 
 				<div v-if="message.sender !== 'User'" class="message__footer">
@@ -229,6 +247,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 +458,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">

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;
+	fileName: string;
+	value: string;
 }
 
 export interface Session {