read mode front update

[t2design11]

User description

• Enhance Flow and Node Components
• Enhance Workflow Read Page and Components

---

PR Type

Enhancement, Bug fix, Tests

---

Description

• Enhanced ReactFlow components for better edit mode handling.

  • Prevented ReactFlow selection state changes during edit mode.
  • Improved zooming and viewport adjustments for nodes.

• Added tooltip functionality and improved UI for BeginNode.

  • Introduced a tooltip component for better path name visibility.
  • Enhanced hover and click interactions for BeginNode.

• Refactored and improved workflow read page components.

  • Automatically expanded steps when paths are loaded.
  • Improved step click handling with block IDs and smooth scrolling.
  • Updated styles for consistency and responsiveness.

• Updated various components for better user experience.

  • Adjusted colors, hover effects, and layout in ProcessCanvas, StepsContainer, and others.
  • Improved integration badges and step display in ProcessCard and StepsContainer.

---

Changes walkthrough 📝

	Relevant files
Enhancement	14 files Flow.tsx Improved edit mode handling and viewport adjustments          +7/-1      MediaUploader.tsx Updated upload text color to secondary color                          +1/-1      BeginNode.tsx Added tooltip and improved hover interactions                        +66/-10  CustomNode.tsx Enhanced edit mode and zoom functionality                                +15/-3    Header.tsx Removed feedback slideout and comment button                          +3/-17    ProcessCanvas.tsx Adjusted background color for better contrast                        +1/-1      ProcessCard.tsx Improved integration badges and layout                                      +4/-5      Sidebar.tsx Adjusted padding for better layout                                              +1/-1      StepsContainer.tsx Enhanced hover effects and added helper functions                +51/-35  HorizontalLastStep.tsx Adjusted border radius for consistency                                      +1/-1      HorizontalStep.tsx Improved step header and image layout                                        +7/-8      VerticalLastStep.tsx Adjusted layout for better responsiveness                                +1/-1      VerticalStep.tsx Improved default expansion and display titles                        +82/-60  page.tsx Refactored step handling and added auto-expansion                +28/-15
Bug fix	1 files FeedbackSlideout.tsx Removed unused code and improved readability                          +6/-5

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

@t2design11 is attempting to deploy a commit to the Mtogbe's projects team on Vercel, but is not a member of this team. To resolve this issue, you can:

• Make your repository public. Collaboration is free for open source and public repositories.
• Upgrade to pro and add @t2design11 as a member. A Pro subscription is required to access Vercel's collaborative features.
  • If you're the owner of the team, click here to upgrade and add @t2design11 as a member.
  • If you're the user who initiated this build request, click here to request access.
  • If you're already a member of the Mtogbe's projects team, make sure that your Vercel account is connected to your GitHub account.

To read more about collaboration on Vercel, click here.

[qodo-code-review]

Qodo Merge was enabled for this repository. To continue using it, please link your Git account with your Qodo account here.

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Console Log There's a console.log statement that should be removed before production deployment. This debug statement outputs block details and could expose sensitive information. console.log('Block details:', block.id, block.title, block.step_details); Commented Code The entire FeedbackSlideout component has been commented out but still exists in the codebase. This should either be properly removed or restored if needed. /* 'use client'; import React, { useState, useContext } from 'react'; import { useTheme, useColors } from '@/app/theme/hooks'; import { cn } from '@/lib/utils/cn'; import ButtonNormal from '@/app/components/ButtonNormal'; import Image from 'next/image'; import { HeaderHeightContext } from './Header'; interface FeedbackMessage { id: string; user: { name: string; avatar: string; isOnline?: boolean; }; message?: string; attachment?: { name: string; type: string; size: string; }; timestamp: string; isYou?: boolean; status?: 'pending' | 'resolved'; type?: 'feedback' | 'comment'; } interface FeedbackSlideoutProps { isOpen: boolean; onClose: () => void; messages: FeedbackMessage[]; onSendMessage: (message: string) => void; } const FeedbackContent: React.FC<{ messages: FeedbackMessage[]; colors: any }> = ({ messages, colors }) => { const feedbackMessages = messages.filter(m => !m.status || m.status === 'pending'); return ( <div className="flex-1 overflow-y-auto p-4 space-y-4" style={{ backgroundColor: colors['bg-secondary'] }}> {feedbackMessages.map((message) => ( <MessageItem key={message.id} message={message} colors={colors} /> ))} </div> ); }; const ResolvedContent: React.FC<{ messages: FeedbackMessage[]; colors: any }> = ({ messages, colors }) => { const resolvedMessages = messages.filter(m => m.status === 'resolved'); return ( <div className="flex-1 overflow-y-auto p-4 space-y-4" style={{ backgroundColor: colors['bg-secondary'] }}> {resolvedMessages.map((message) => ( <MessageItem key={message.id} message={message} colors={colors} /> ))} {resolvedMessages.length === 0 && ( <div className="flex flex-col items-center justify-center h-full text-center" style={{ color: colors['text-secondary'] }}> <p className="text-sm">No resolved items yet</p> </div> )} </div> ); }; const CommentsContent: React.FC<{ messages: FeedbackMessage[]; colors: any }> = ({ messages, colors }) => { const comments = messages.filter(m => m.type === 'comment'); return ( <div className="flex-1 overflow-y-auto p-4 space-y-4" style={{ backgroundColor: colors['bg-secondary'] }}> {comments.map((message) => ( <MessageItem key={message.id} message={message} colors={colors} /> ))} {comments.length === 0 && ( <div className="flex flex-col items-center justify-center h-full text-center" style={{ color: colors['text-secondary'] }}> <p className="text-sm">No comments yet</p> </div> )} </div> ); }; const MessageItem: React.FC<{ message: FeedbackMessage; colors: any }> = ({ message, colors }) => ( <div className={cn("flex items-start gap-3", message.isYou && "flex-row-reverse")}> <div className="relative"> <div className="w-8 h-8 rounded-full overflow-hidden" style={{ backgroundColor: colors['bg-tertiary'] }}> <Image src={message.user.avatar} alt={message.user.name} width={32} height={32} className="object-cover" /> </div> {message.user.isOnline && ( <div className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full border-2" style={{ backgroundColor: colors['success'], borderColor: colors['bg-primary'] }} /> )} </div> <div className={cn("flex flex-col max-w-[280px] p-3 rounded-lg", message.isYou ? "text-white" : "border")} style={{ backgroundColor: message.isYou ? colors['bg-brand-solid'] : colors['bg-primary'], borderColor: message.isYou ? 'transparent' : colors['border-secondary'], color: message.isYou ? colors['text-inverse'] : colors['text-primary'] }} > <div className="flex items-center gap-2 mb-1"> <span className="font-medium text-sm">{message.user.name}</span> <span className="text-xs" style={{ color: message.isYou ? colors['text-inverse-secondary'] : colors['text-secondary'] }} > {message.timestamp} </span> </div> {message.message && <p className="text-sm">{message.message}</p>} {message.attachment && ( <div className="mt-2 p-2 rounded flex items-center gap-2" style={{ backgroundColor: message.isYou ? colors['accent-secondary'] : colors['bg-secondary'] }} > <div className="w-8 h-8 flex items-center justify-center"> <Image src={`${process.env.NEXT_PUBLIC_SUPABASE_URL}${process.env.NEXT_PUBLIC_SUPABASE_STORAGE_PATH}/assets/shared_components/pdf-icon.svg`} alt="PDF" width={24} height={24} /> </div> <div className="flex-1"> <p className="text-sm font-medium">{message.attachment.name}</p> <p className="text-xs" style={{ color: message.isYou ? colors['text-inverse-secondary'] : colors['text-secondary'] }} > {message.attachment.size} </p> </div> </div> )} </div> </div> ); const FeedbackSlideout: React.FC<FeedbackSlideoutProps> = ({ isOpen, onClose, messages, onSendMessage }) => { const { getCssVariable } = useTheme(); const colors = useColors(); const headerHeight = useContext(HeaderHeightContext); const [activeTab, setActiveTab] = useState<'feedbacks' | 'resolved' | 'comments'>('feedbacks'); const [newMessage, setNewMessage] = useState(''); const handleSendMessage = () => { if (newMessage.trim()) { onSendMessage(newMessage); setNewMessage(''); } }; const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSendMessage(); } }; const renderContent = () => { switch (activeTab) { case 'feedbacks': return <FeedbackContent messages={messages} colors={colors} />; case 'resolved': return <ResolvedContent messages={messages} colors={colors} />; case 'comments': return <CommentsContent messages={messages} colors={colors} />; default: return null; } }; return ( <div className={cn( "fixed right-0 flex flex-col transition-transform duration-300 ease-in-out z-40", "border-l shadow-lg", isOpen ? "translate-x-0" : "translate-x-full" )} style={{ backgroundColor: colors['bg-primary'], borderColor: colors['border-primary'], width: '400px', height: `calc(100vh - ${headerHeight}px)`, top: `${headerHeight}px` }} > {/* Header *//* <div className="flex items-center justify-between p-4"> <h2 className="text-lg font-semibold" style={{ color: colors['text-primary'] }}> {activeTab === 'feedbacks' ? 'Feedbacks' : activeTab === 'resolved' ? 'Resolved' : 'Comments'} </h2> <button onClick={onClose} className="p-1 rounded-full transition-colors hover:opacity-80" style={{ backgroundColor: colors['bg-secondary'] }} > <Image src={`${process.env.NEXT_PUBLIC_SUPABASE_URL}${process.env.NEXT_PUBLIC_SUPABASE_STORAGE_PATH}/assets/shared_components/x-close-icon.svg`} alt="Close" width={16} height={16} /> </button> </div> {/* Tabs *//* <div className="flex px-4 border-b" style={{ borderColor: colors['border-secondary'] }}> {['Feedbacks', 'Resolved', 'Comments'].map((tab) => ( <button key={tab} onClick={() => setActiveTab(tab.toLowerCase() as any)} className={cn( "py-3 px-4 text-sm font-medium relative transition-colors hover:opacity-80", activeTab === tab.toLowerCase() && "border-b-2" )} style={{ color: activeTab === tab.toLowerCase() ? colors['text-brand-tertiary'] : colors['text-secondary'], borderColor: activeTab === tab.toLowerCase() ? colors['text-brand-tertiary'] : 'transparent' }} > {tab} </button> ))} </div> {/* Content *}/* {renderContent()} {/* Message Input *//* <div className="p-4 border-t" style={{ backgroundColor: colors['bg-primary'], borderColor: colors['border-secondary'] }} > <div className="flex items-center gap-2 p-2 rounded-lg" style={{ backgroundColor: colors['bg-secondary'] }} > <input type="text" value={newMessage} onChange={(e) => setNewMessage(e.target.value)} onKeyPress={handleKeyPress} placeholder={`Type your ${activeTab === 'comments' ? 'comment' : 'feedback'}...`} className="flex-1 bg-transparent border-none outline-none text-sm placeholder:text-secondary" style={{ color: colors['text-primary'] }} /> <ButtonNormal variant="primary" size="small" onClick={handleSendMessage} disabled={!newMessage.trim()} iconOnly leadingIcon={`${process.env.NEXT_PUBLIC_SUPABASE_URL}${process.env.NEXT_PUBLIC_SUPABASE_STORAGE_PATH}/assets/shared_components/send-01.svg`} /> </div> </div> </div> ); }; export default FeedbackSlideout;*/ Tooltip Scaling The tooltip scaling logic might cause readability issues at extreme zoom levels. The minimum font size calculation could result in very small text that's difficult to read. fontSize: `${Math.max(12, 12 / zoom)}px`, }}

[qodo-code-review]

PR Code Suggestions ✨

Latest suggestions up to 5cfd26f

Category	Suggestion	Impact
Possible issue	Fix missing header offset The code has a comment about adjusting for header height, but there's no actual implementation for this adjustment. This could cause scrolling issues where elements are partially hidden under the header. app/workspace/[id]/[workflowId]/read/page.tsx [809-826] // Function to handle step click from sidebar const handleStepClick = (blockId: number) => { setCurrentStep(blockId); // Add to expanded steps if not already expanded if (!expandedSteps.includes(blockId)) { setExpandedSteps(prev => [...prev, blockId]); } // Find the element with the matching block ID const blockElement = document.getElementById(`block-${blockId.toString()}`); if (blockElement) { setTimeout(() => { blockElement.scrollIntoView({ behavior: 'smooth', block: 'center', }); - // Adjust for header height + // Apply header height adjustment + const headerHeight = document.querySelector('header')?.offsetHeight || 0; + window.scrollBy(0, -headerHeight); + }, 100); + } [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 9 __ Why: The code has a comment about adjusting for header height but lacks implementation, which could cause elements to be partially hidden under the header when scrolling. Adding the missing adjustment code fixes this functional issue.	High
	Fix inconsistent toggle behavior The toggle function prevents users from expanding/collapsing steps without images, but the UI still shows a toggle indicator for all steps. This creates a confusing user experience where clicking on some steps doesn't do anything despite visual cues suggesting it should. app/workspace/[id]/[workflowId]/read/components/steps/VerticalStep.tsx [59-65] const handleToggle = () => { - // Only toggle if there's an image to show - if (!block.image) return; - const newState = !isExpanded; setIsExpanded(newState); onToggle?.(newState); }; [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: The current implementation prevents toggling steps without images, but the UI still shows toggle indicators for all steps, creating a confusing user experience. Removing this condition makes the UI behavior consistent with visual cues.	Medium
General	Remove misleading comment The comment about not setting ReactFlow selection state is misleading as there's no code implementing this behavior. You should either add code to prevent ReactFlow's default selection or remove the comment to avoid confusion. app/workspace/[id]/[workflowId]/reactflow/components/Flow.tsx [554-557] onNodeClick={(event, node) => { event.preventDefault(); event.stopPropagation(); // Extract the block ID from the node ID (remove "block-" prefix) const blockId = node.id.replace('block-', ''); // Set edit mode to true and update the selected node ID setEditMode(true, blockId); - // Don't set ReactFlow selection state as CustomNode handles this differently - // Find the node and zoom to it [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: The comment about not setting ReactFlow selection state is misleading as there's no corresponding implementation. Removing it improves code clarity and prevents confusion for developers.	Medium
More

---

Previous suggestions

Suggestions up to commit dca7d19

Category	Suggestion	Impact
Possible issue	Fix missing closing brackets The code is missing the closing brackets for the setTimeout callback and the if statement. This will cause a syntax error and prevent the function from working properly. app/workspace/[id]/[workflowId]/read/page.tsx [809-826] // Function to handle step click from sidebar const handleStepClick = (blockId: number) => { setCurrentStep(blockId); // Add to expanded steps if not already expanded if (!expandedSteps.includes(blockId)) { setExpandedSteps(prev => [...prev, blockId]); } // Find the element with the matching block ID const blockElement = document.getElementById(`block-${blockId.toString()}`); if (blockElement) { setTimeout(() => { blockElement.scrollIntoView({ behavior: 'smooth', block: 'center', }); // Adjust for header height + }, 100); + } +}; Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a critical syntax error where closing brackets for the setTimeout callback and if statement are missing. The fix properly adds the missing brackets and a timeout value, which would prevent the code from breaking at runtime.	High
	Fix potential null reference The zoom level calculation doesn't account for potential null values in the transform array. Add a null check to prevent runtime errors when the transform array is undefined or doesn't have an element at index 2. app/workspace/[id]/[workflowId]/reactflow/components/nodes/BeginNode.tsx [19-22] // Get the current zoom level from ReactFlow store -const zoom = useStore((state) => state.transform?.[2] ?? 1); +const zoom = useStore((state) => state.transform && state.transform[2] ? state.transform[2] : 1); if (!show) return <>{children}</>; Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a potential runtime error when accessing the transform array. The improved code adds proper null checking to prevent crashes when the transform array is undefined or doesn't have an element at index 2.	Medium

✅ Suggestions up to commit e1f4b88

Category	Suggestion	Impact
Possible issue	✅ Add null check for transform Suggestion Impact: The commit implemented exactly the suggested change by adding an optional chaining operator and nullish coalescing to provide a default value of 1 when transform is undefined code diff: - const zoom = useStore((state) => state.transform[2]); + const zoom = useStore((state) => state.transform?.[2] ?? 1); The ReactFlow store's transform state might be undefined during initial rendering, which could cause runtime errors. Add a null check or provide a default value for the zoom level. app/workspace/[id]/[workflowId]/reactflow/components/nodes/BeginNode.tsx [19-20] // Get the current zoom level from ReactFlow store -const zoom = useStore((state) => state.transform[2]); +const zoom = useStore((state) => state.transform?.[2] ?? 1); [Suggestion has been applied] Suggestion importance[1-10]: 8 __ Why: This suggestion addresses a potential runtime error by adding a null check for the transform state which might be undefined during initial rendering. Using the optional chaining operator and nullish coalescing provides a fallback value, preventing crashes.	Medium
	✅ Fix type mismatch Suggestion Impact: The commit directly implemented the suggestion by adding .toString() to the blockId when using it in getElementById, ensuring proper type handling when looking up DOM elements by ID code diff: - const blockElement = document.getElementById(`block-${blockId}`); + const blockElement = document.getElementById(`block-${blockId.toString()}`); The blockId parameter is being used as a number, but DOM IDs are strings. When constructing the element ID for getElementById, ensure the blockId is properly converted to a string to avoid type mismatches. app/workspace/[id]/[workflowId]/read/page.tsx [819-820] // Function to handle step click from sidebar const handleStepClick = (blockId: number) => { setCurrentStep(blockId); // Add to expanded steps if not already expanded if (!expandedSteps.includes(blockId)) { setExpandedSteps(prev => [...prev, blockId]); } // Find the element with the matching block ID - const blockElement = document.getElementById(`block-${blockId}`); + const blockElement = document.getElementById(`block-${blockId.toString()}`); if (blockElement) { setTimeout(() => { blockElement.scrollIntoView({ behavior: 'smooth', block: 'center', }); // Adjust for header height Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies a potential type issue when using a number as a DOM element ID. Explicitly converting blockId to a string with toString() ensures proper type handling when looking up elements by ID, preventing subtle bugs.	Low

✅ Suggestions up to commit 8d0d1e7

Category	Suggestion	Impact
Possible issue	✅ Prevent division by zero Suggestion Impact: The commit addressed the division by zero issue but used a different approach. Instead of adding a check for zoom === 0, it used optional chaining and provided a default value of 1 for zoom, which effectively prevents division by zero. code diff: - const zoom = useStore((state) => state.transform[2]); + const zoom = useStore((state) => state.transform?.[2] ?? 1); The zoom value might be zero during initial rendering, which would cause a division by zero in the transform scale calculation. Add a safety check to prevent this issue. app/workspace/[id]/[workflowId]/reactflow/components/nodes/BeginNode.tsx [19-22] // Get the current zoom level from ReactFlow store const zoom = useStore((state) => state.transform[2]); -if (!show) return <>{children}</>; +// Prevent division by zero +if (!show || zoom === 0) return <>{children}</>; Suggestion importance[1-10]: 8 __ Why: This suggestion addresses a potential runtime error where division by zero could occur if the zoom value is 0 during initial rendering. This is a critical bug fix that would prevent the application from crashing.	Medium
	Implement header height adjustment There's a comment about adjusting for header height, but the code doesn't actually implement this adjustment. This could cause elements to be partially hidden under the header when scrolling. app/workspace/[id]/[workflowId]/read/page.tsx [821-826] // Scroll to step with centering const blockElement = document.getElementById(`block-${blockId}`); if (blockElement) { setTimeout(() => { blockElement.scrollIntoView({ behavior: 'smooth', block: 'center', }); // Adjust for header height + const headerHeight = document.querySelector('header')?.offsetHeight || 0; + if (headerHeight > 0) { + window.scrollBy(0, -headerHeight/2); + } + }, 100); Suggestion importance[1-10]: 7 __ Why: This suggestion implements the missing header height adjustment that was only commented but not coded. This would prevent UI elements from being hidden under the header when scrolling, improving user experience.	Medium
	Add missing setTimeout delay The setTimeout is missing a delay parameter, which could cause inconsistent scrolling behavior. Add a small delay value to ensure the DOM has updated before scrolling. app/workspace/[id]/[workflowId]/read/page.tsx [821-826] // Function to handle step click from sidebar const handleStepClick = (blockId: number) => { setCurrentStep(blockId); // Add to expanded steps if not already expanded if (!expandedSteps.includes(blockId)) { setExpandedSteps(prev => [...prev, blockId]); } // Find the element with the matching block ID const blockElement = document.getElementById(`block-${blockId}`); if (blockElement) { setTimeout(() => { blockElement.scrollIntoView({ behavior: 'smooth', block: 'center', }); // Adjust for header height + }, 100); // Add small delay to ensure DOM updates Suggestion importance[1-10]: 6 __ Why: The suggestion adds a missing delay parameter to setTimeout, which could improve scrolling reliability. Without a delay, the DOM might not have fully updated before the scroll attempt, potentially causing inconsistent behavior.	Low