Release: Staging to Production - 2025.10.31 - #649
Conversation
# Fix: Credential Modal Issues in Agentflow Canvas (ANS-53) ## 🎯 Overview This PR resolves credential modal handling issues in the agentflow canvas and implements comprehensive refactoring of credential processing across the application. It also includes billing provider enhancements and improved error handling throughout the credential flow. ## 📝 Changes Summary ### 🐛 Bug Fixes - **Credential Modal in Agentflow Canvas**: Fixed issues preventing credential modal from displaying correctly in agentflow canvas - **Credential Processing Flow**: Restored proper credential modal logic after rebase conflicts ### ♻️ Refactoring & Enhancements #### Frontend (UI Package) - **New Hook**: Created `useFlowCredentials.js` - centralized custom hook for managing flow credential state and logic - **Enhanced Utility**: Extended `flowCredentialsHelper.js` with improved credential extraction and validation functions - **Canvas Components**: Updated credential handling in: - `agentflowsv2/Canvas.jsx` - Enhanced modal triggering and credential validation - `canvas/index.jsx` - Improved credential processing workflow - `marketplaces/MarketplaceCanvas.jsx` - Streamlined credential management #### Backend (Utils Package) - **New Utility**: Created `processFlowCredentials.ts` - dedicated function for processing flow credentials with consistent error handling - **Simplified Functions**: - `extractAllCredentials.ts` - Reduced complexity by delegating to shared logic (-75 lines) - `extractMissingCredentials.ts` - Streamlined credential extraction (-77 lines) ### 🔧 Error Handling Improvements - Replaced verbose console error logs with user-friendly error messages - Suppressed non-critical error logs to reduce noise - Standardized error handling patterns across credential processing functions - Enhanced stability in credential validation flows ## 📊 Impact Metrics ``` 11 files changed +637 insertions -258 deletions Net: +379 lines ``` ### Files Modified - **packages-answers/utils/src/** - `extractAllCredentials.ts` (simplified) - `extractMissingCredentials.ts` (simplified) - `processFlowCredentials.ts` (new) - **packages/ui/src/** - `hooks/useFlowCredentials.js` (new) - `utils/flowCredentialsHelper.js` (enhanced) - `views/agentflowsv2/Canvas.jsx` (updated) - `views/canvas/index.jsx` (updated) - `views/marketplaces/MarketplaceCanvas.jsx` (updated) ## 🧪 Testing Recommendations ### Manual Testing - [ ] Verify credential modal appears correctly in agentflow canvas - [ ] Test credential validation for new flows - [ ] Confirm missing credentials are properly detected and prompted - [ ] Validate error messages are user-friendly and actionable - [ ] Test marketplace canvas credential handling ### Regression Testing - [ ] Ensure existing chatflows continue to work - [ ] Verify no breaking changes in credential extraction - [ ] Test credential updates in existing flows ## 🚀 Deployment Notes - No database migrations required - No environment variable changes - No breaking API changes - Frontend and backend changes should be deployed together for consistency ## 📚 Additional Context This PR consolidates several related fixes and refactorings: 1. Initial credential modal fixes in agentflow 2. Comprehensive refactoring of credential extraction logic 3. Error handling improvements for better UX The changes maintain backward compatibility while improving code maintainability and user experience. --- **Ready for Review** ✅ --------- Co-authored-by: Max Techera <maxi.techerag@gmail.com> Co-authored-by: Claude <noreply@anthropic.com>
…-59) (#647) ## Summary Removed a type override in the marketplace service that was preventing Agentflow templates from showing up in the templates page. ## Changes - Removed `customTemplate.type = chatflow.type` assignment in `saveCustomTemplate` function - Allows Agentflow templates to maintain their correct type instead of being overridden by the chatflow type ## Problem The type override was causing Agentflow templates to be incorrectly classified, which prevented them from displaying properly on the templates page. ## Solution Removed the line that was overwriting the template type with the chatflow type, allowing the template's original type to be preserved correctly. ## Files Changed - `packages/server/src/services/marketplaces/index.ts` ## Testing Verify that Agentflow templates now appear correctly on the templates page.
…or (#648) ## Summary **ANS-41**: Complete implementation of follow-up prompts across backend and frontend ### Backend (Already Fixed ✅) - Refactored follow-up prompts generation in `packages/components/src/followUpPrompts.ts` - Simplified credential data retrieval - Updated OpenAI and Google Generative AI provider integrations - Updated dependencies (@langchain/core, @langchain/openai, zod) - Follow-up prompts now working in SidekickStudio (Flowise) UI ### Frontend (New ✨) - Implemented follow-up prompts display in Next.js web app - Created `FollowUpPrompts.tsx` component with Material-UI chips - Added sparkles icon (✨) and "Try these prompts" label matching embed widget design - Integrated into MessageCard to display after assistant messages - Only shows on last assistant message, auto-clears when user sends new message ## Technical Changes ### Type Definitions - Added `followUpPrompts?: string[]` to Message interface ### Components - **New:** `packages-answers/ui/src/FollowUpPrompts.tsx` - Material-UI Chip-based prompt display - Sparkles icon with "Try these prompts" label - Click handler sends prompt as new message ### Integration - **Modified:** `packages-answers/ui/src/Message/Message.tsx` - Integrated FollowUpPrompts component - Shows only for last assistant message - **Modified:** `packages-answers/ui/src/ChatRoom.tsx` - Simple isLastMessage detection logic - Passes followUpPrompts prop to MessageCard - **Modified:** `packages-answers/ui/src/AnswersContext.tsx` - Robust JSON parsing for both streaming and non-streaming modes - Handles backend double-stringification bug defensively - Try-catch error handling with fallback ## Backend Issue Found & Handled Discovered that commit `604e6ad03` re-introduced double-stringification bug in: - `packages/server/src/utils/buildChatflow.ts` (lines 653, 824) - `packages/server/src/utils/buildAgentflow.ts` (line 1930) Our frontend implementation handles this defensively with double-parse logic, matching the pattern used in Flowise UI. ## Test Plan - [x] Backend: Verify follow-up prompts generate correctly across all providers - [x] Backend: Test credential handling - [x] Backend: Validate dependency updates don't break existing functionality - [x] Frontend: Follow-up prompts display after assistant messages - [x] Frontend: Only last assistant message shows prompts - [x] Frontend: Prompts clear when user sends new message - [x] Frontend: Click handler sends prompt as new message - [ ] E2E: Test in dev environment across all chatflow types - [ ] E2E: Verify streaming and non-streaming modes - [ ] E2E: Test across different LLM providers ## Status ✅ Backend - Working in SidekickStudio (Flowise) UI ✅ Frontend - Implemented in Next.js web app ⏳ Ready for testing and review
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| export const FollowUpPrompts: React.FC<FollowUpPromptsProps> = ({ prompts, onPromptClick }) => { | ||
| // Safety check for prompts | ||
| if (!prompts || prompts.length === 0) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <Box sx={{ mt: 2 }}> | ||
| {/* Header with sparkles icon and text */} | ||
| <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 1 }}> | ||
| <IconSparkles size={16} color='#1976D2' /> | ||
| <Typography variant='body2' sx={{ color: 'text.secondary', fontSize: '0.875rem' }}> | ||
| Try these prompts | ||
| </Typography> | ||
| </Box> | ||
|
|
||
| {/* Prompts container */} | ||
| <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}> | ||
| {prompts.map((prompt, index) => ( | ||
| <Chip | ||
| key={index} | ||
| label={prompt} | ||
| onClick={() => onPromptClick(prompt)} | ||
| variant='outlined' |
There was a problem hiding this comment.
Safeguard follow-up prompt rendering for stored string values
The new FollowUpPrompts component assumes prompts is an array and immediately calls prompts.map(...), but chat messages persisted in the DB store followUpPrompts as JSON strings (see the server’s buildChatflow.ts where the value is JSON.stringify). When an existing chat session is reloaded, message.followUpPrompts is still a string and FollowUpPrompts will try to execute .map on that string, throwing prompts.map is not a function and breaking the message rendering. Guard the component with Array.isArray(prompts) or deserialize earlier so historic conversations with follow-up prompts don’t crash the chat UI.
Useful? React with 👍 / 👎.
Summary
Commits