From 16d34e0a99541e77ec18881ea1b33d27ec9d9cbe Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 21 Jul 2025 11:24:58 -0300
Subject: [PATCH] feat: Add CustomMarkdownField wrapper component (#9042)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ (custom-markdown-field.tsx): create a new CustomMarkdownField component to encapsulate MarkdownField with additional props
♻️ (chat-message.tsx): refactor ChatMessage component to use CustomMarkdownField instead of MarkdownField for better customization and reusability
---
 .../components/custom-markdown-field.tsx      | 28 +++++++++++++++++++
 .../chatView/chatMessage/chat-message.tsx     |  4 +--
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/src/customization/components/custom-markdown-field.tsx

diff --git a/src/frontend/src/customization/components/custom-markdown-field.tsx b/src/frontend/src/customization/components/custom-markdown-field.tsx
new file mode 100644
index 000000000..1eb6a8b97
--- /dev/null
+++ b/src/frontend/src/customization/components/custom-markdown-field.tsx
@@ -0,0 +1,28 @@
+import { MarkdownField } from "@/modals/IOModal/components/chatView/chatMessage/components/edit-message";
+
+type CustomMarkdownFieldProps = {
+  isAudioMessage: boolean;
+  chat: any;
+  isEmpty: boolean;
+  chatMessage: string;
+  editedFlag: React.ReactNode;
+};
+export const CustomMarkdownField = ({
+  isAudioMessage,
+  chat,
+  isEmpty,
+  chatMessage,
+  editedFlag,
+}: CustomMarkdownFieldProps) => {
+  return (
+    <>
+      <MarkdownField
+        isAudioMessage={isAudioMessage}
+        chat={chat}
+        isEmpty={isEmpty}
+        chatMessage={chatMessage}
+        editedFlag={editedFlag}
+      />
+    </>
+  );
+};
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx
index c0c4a535c..e764a26a4 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx
@@ -2,6 +2,7 @@ import Convert from "ansi-to-html";
 import { useEffect, useRef, useState } from "react";
 import { ContentBlockDisplay } from "@/components/core/chatComponents/ContentBlockDisplay";
 import { useUpdateMessage } from "@/controllers/API/queries/messages";
+import { CustomMarkdownField } from "@/customization/components/custom-markdown-field";
 import { CustomProfileIcon } from "@/customization/components/custom-profile-icon";
 import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
 import useFlowStore from "@/stores/flowStore";
@@ -16,7 +17,6 @@ import useAlertStore from "../../../../../stores/alertStore";
 import type { chatMessagePropsType } from "../../../../../types/components";
 import { cn } from "../../../../../utils/utils";
 import { ErrorView } from "./components/content-view";
-import { MarkdownField } from "./components/edit-message";
 import EditMessageField from "./components/edit-message-field";
 import FileCardWrapper from "./components/file-card-wrapper";
 import { EditMessageButton } from "./components/message-options";
@@ -359,7 +359,7 @@ export default function ChatMessage({
                                 onCancel={() => setEditMessage(false)}
                               />
                             ) : (
-                              <MarkdownField
+                              <CustomMarkdownField
                                 isAudioMessage={isAudioMessage}
                                 chat={chat}
                                 isEmpty={isEmpty}