feat: Add CustomMarkdownField wrapper component#9042
Merged
Cristhianzl merged 2 commits intomainfrom Jul 21, 2025
Merged
Conversation
…nent to encapsulate MarkdownField with additional props ♻️ (chat-message.tsx): refactor ChatMessage component to use CustomMarkdownField instead of MarkdownField for better customization and reusability
Contributor
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughA new Changes
Suggested labels
Suggested reviewers
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
dosubot
bot
added
size:M
github-actions
bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/frontend/src/customization/components/custom-markdown-field.tsx (2)
17-27: Remove unnecessary React fragment wrapper.The React fragment doesn't add any value since you're only rendering a single child component.
return ( - <> - <MarkdownField - isAudioMessage={isAudioMessage} - chat={chat} - isEmpty={isEmpty} - chatMessage={chatMessage} - editedFlag={editedFlag} - /> - </> + <MarkdownField + isAudioMessage={isAudioMessage} + chat={chat} + isEmpty={isEmpty} + chatMessage={chatMessage} + editedFlag={editedFlag} + /> );
10-28: Consider using React.forwardRef for better component composition.Based on the retrieved learnings, React components should use forwardRef for proper ref forwarding and compatibility with parent components.
-export const CustomMarkdownField = ({ +export const CustomMarkdownField = React.forwardRef< + HTMLDivElement, + CustomMarkdownFieldProps +>(({ isAudioMessage, chat, isEmpty, chatMessage, editedFlag, -}: CustomMarkdownFieldProps) => { +}, ref) => { return ( <MarkdownField + ref={ref} isAudioMessage={isAudioMessage} chat={chat} isEmpty={isEmpty} chatMessage={chatMessage} editedFlag={editedFlag} /> ); -}; +}); + +CustomMarkdownField.displayName = 'CustomMarkdownField';
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/frontend/src/customization/components/custom-markdown-field.tsx(1 hunks)src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
src/frontend/**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/frontend_development.mdc
src/frontend/**/*.{ts,tsx,js,jsx,css,scss}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/frontend_development.mdc
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx} : Use React 18 with TypeScript for all UI components and frontend logic.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx (4)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx} : Use React 18 with TypeScript for all UI components and frontend logic.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/components/**/*FlowGraph.tsx : Use React Flow for flow graph visualization components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Custom React Flow node types should be implemented as memoized components, using Handle components for connection points and supporting optional icons and labels.
src/frontend/src/customization/components/custom-markdown-field.tsx (3)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx} : Use React 18 with TypeScript for all UI components and frontend logic.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an `index.tsx` in your icon directory that exports your icon using `forwardRef` and passes the `isdark` prop.
🧬 Code Graph Analysis (1)
src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx (1)
src/frontend/src/customization/components/custom-markdown-field.tsx (1)
CustomMarkdownField(10-28)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: autofix
🔇 Additional comments (2)
src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx (2)
3-3: LGTM: Clean import addition.The import statement is correctly added and follows the established import pattern for customization components.
362-368: LGTM: Proper component replacement.The replacement of
MarkdownFieldwithCustomMarkdownFieldis implemented correctly. All props are forwarded appropriately, maintaining the same interface while enabling future customization opportunities.
Comment on lines
+3
to
+9
| type CustomMarkdownFieldProps = { | ||
| isAudioMessage: boolean; | ||
| chat: any; | ||
| isEmpty: boolean; | ||
| chatMessage: string; | ||
| editedFlag: React.ReactNode; | ||
| }; |
Contributor
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Improve TypeScript type safety by replacing any with a more specific type.
The chat prop is typed as any, which defeats the purpose of TypeScript's type checking and can lead to runtime errors.
Consider defining a proper interface or importing the existing chat type from the codebase:
+import { ChatMessageType } from "path/to/chat/types"; // Adjust path as needed
type CustomMarkdownFieldProps = {
isAudioMessage: boolean;
- chat: any;
+ chat: ChatMessageType;
isEmpty: boolean;
chatMessage: string;
editedFlag: React.ReactNode;
};🏁 Script executed:
#!/bin/bash
# Find the actual chat type definition in the codebase
ast-grep --pattern 'type $_ = {
$$$
message: $_
$$$
}'
# Also search for chat-related interfaces
rg -A 10 "interface.*Chat" --type typescript
rg -A 10 "type.*Chat" --type typescriptLength of output: 3629
Replace any with ChatMessageType for the chat prop
The chat prop is currently typed as any, which bypasses TypeScript’s checks and can introduce runtime errors. You can import the existing ChatMessageType and update the prop:
- In
src/frontend/src/customization/components/custom-markdown-field.tsx, add:import type { ChatMessageType } from '../../types/chat';
- Then update your props type:
type CustomMarkdownFieldProps = { isAudioMessage: boolean; - chat: any; + chat: ChatMessageType; isEmpty: boolean; chatMessage: string; editedFlag: React.ReactNode; };
🤖 Prompt for AI Agents
In src/frontend/src/customization/components/custom-markdown-field.tsx around
lines 3 to 9, replace the type of the `chat` prop from `any` to the specific
`ChatMessageType`. First, import `ChatMessageType` from '../../types/chat' at
the top of the file, then update the `CustomMarkdownFieldProps` type to use
`chat: ChatMessageType` instead of `any` to enable proper type checking.
deon-sanchez
approved these changes
Jul 18, 2025
Cristhianzl
added
lgtm
github-actions
bot
added
enhancement
Contributor
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
2getsandesh
pushed a commit
to 2getsandesh/langflow-IBM
that referenced
this pull request
Aug 6, 2025
✨ (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 file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new
CustomMarkdownFieldcomponent in the frontend codebase to replace the existingMarkdownFieldin certain contexts. The changes primarily focus on modularizing the code and enabling customization for markdown field rendering.Introduction of
CustomMarkdownField:src/frontend/src/customization/components/custom-markdown-field.tsx: Added a newCustomMarkdownFieldcomponent that wraps the existingMarkdownFieldand accepts the same props for rendering. This allows for future customization of markdown field behavior.Integration with existing components:
src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx: Replaced theMarkdownFieldimport withCustomMarkdownFieldand updated its usage in theChatMessagecomponent to use the new wrapper for rendering markdown fields. [1] [2]Cleanup of unused imports:
src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx: Removed the direct import ofMarkdownFieldfromedit-messagesince it is now encapsulated withinCustomMarkdownField.Summary by CodeRabbit