jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat: Add CustomMarkdownField wrapper component (#9042)

Browse source 
✨ (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
This commit is contained in:
Cristhian Zanforlin Lousa 2025-07-21 11:24:58 -03:00 • committed by GitHub
commit 16d34e0a99
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/frontend/src/customization/components/custom-markdown-field.tsx Normal file
View file

@ -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}
/>
</>
);
};

4
src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx
View file

@ -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}