Bugfix/Missing Reasoning Item (#6237)

* - pass langchain message instance as a whole to avoid missing reasoning item
- add `normalizeMessagesForStorage` function to convert LangChain message instances into plain JSON objects, improving database storage efficiency and UI readability

* - Fix ChatflowConfigurationDialog for inconsistent behaviour
- Added a button in NodeExecutionDetails to toggle visibility of all available tools, improving user experience.

* display input data for tool node in execution

Author: HenryHengZJ

packages/components/nodes/agentflow/Agent/Agent.ts

@@ -30,6 +30,7 @@ import {
     getUniqueImageMessages,
     processMessagesWithImages,
     revertBase64ImagesToFileRefs,
+    normalizeMessagesForStorage,
     replaceInlineDataWithFileReferences,
     updateFlowState
 } from '../utils'
@@ -1471,7 +1472,8 @@ class Agent_Agentflow implements INode {
              * This is to avoid storing the actual base64 data into database
              */
             const messagesToStore = messages.filter((msg: any) => !msg._isTemporaryImageMessage)
-            const messagesWithFileReferences = revertBase64ImagesToFileRefs(messagesToStore)
+            const normalizedMessagesToStore = normalizeMessagesForStorage(messagesToStore)
+            const messagesWithFileReferences = revertBase64ImagesToFileRefs(normalizedMessagesToStore)
 
             // Only add to runtime chat history if this is the first node
             const inputMessages = []
@@ -2235,13 +2237,7 @@ class Agent_Agentflow implements INode {
         }
 
         // Add LLM response with tool calls to messages
-        messages.push({
-            id: response.id,
-            role: 'assistant',
-            content: response.content,
-            tool_calls: response.tool_calls,
-            usage_metadata: response.usage_metadata
-        })
+        messages.push(response)
 
         // Process each tool call
         for (let i = 0; i < response.tool_calls.length; i++) {
@@ -2622,13 +2618,7 @@ class Agent_Agentflow implements INode {
         }
 
         // Add LLM response with tool calls to messages
-        messages.push({
-            id: response.id,
-            role: 'assistant',
-            content: response.content,
-            tool_calls: response.tool_calls,
-            usage_metadata: response.usage_metadata
-        })
+        messages.push(response)
 
         // Process each tool call
         for (let i = 0; i < response.tool_calls.length; i++) {

packages/components/nodes/agentflow/utils.ts

@@ -197,6 +197,47 @@ export const revertBase64ImagesToFileRefs = (messages: BaseMessageLike[]): BaseM
     return updatedMessages
 }
 
+/**
+ * Converts LangChain message/chunk instances into plain JSON objects for clean DB storage.
+ * This avoids persisting large `{ lc, type, kwargs }` blobs and keeps execution-details UI readable.
+ */
+export const normalizeMessagesForStorage = (messages: BaseMessageLike[]): BaseMessageLike[] => {
+    return (messages || []).map((msg: any) => {
+        if (msg?.lc_namespace || typeof msg?._getType === 'function') {
+            const rawType = typeof msg?._getType === 'function' ? msg._getType() : msg?.type
+            const role =
+                rawType === 'ai'
+                    ? 'assistant'
+                    : rawType === 'human'
+                    ? 'user'
+                    : rawType === 'system'
+                    ? 'system'
+                    : rawType === 'tool'
+                    ? 'tool'
+                    : msg?.role || 'assistant'
+
+            const plain: Record<string, any> = {
+                role,
+                content: msg?.content ?? ''
+            }
+
+            if (msg?.name) plain.name = msg.name
+            if (msg?.tool_call_id) plain.tool_call_id = msg.tool_call_id
+            if (Array.isArray(msg?.tool_calls) && msg.tool_calls.length > 0) plain.tool_calls = msg.tool_calls
+
+            if (msg?.additional_kwargs && Object.keys(msg.additional_kwargs).length > 0) {
+                plain.additional_kwargs = msg.additional_kwargs
+            }
+
+            if (msg?.usage_metadata) plain.usage_metadata = msg.usage_metadata
+            if (msg?.id) plain.id = msg.id
+
+            return plain
+        }
+        return msg
+    })
+}
+
 // ─── Handling new image uploads ──────────────────────────────────────────────
 
 /**

packages/ui/src/ui-component/dialog/ChatflowConfigurationDialog.jsx

@@ -167,26 +167,46 @@ function getSectionStatus(sectionId, chatflow) {
         case 'chatFeedback':
             return chatbotConfig?.chatFeedback?.status === true
         case 'speechToText': {
-            const stt = chatbotConfig?.speechToText
-            if (!stt) return false
-            return Object.values(stt).some((provider) => provider?.status === true)
+            if (!chatflow.speechToText) return false
+            try {
+                const stt = JSON.parse(chatflow.speechToText)
+                // "none" with status:true means disabled — ignore it
+                return Object.entries(stt).some(([key, provider]) => key !== 'none' && provider?.status === true)
+            } catch {
+                return false
+            }
         }
         case 'textToSpeech': {
-            const tts = chatbotConfig?.textToSpeech
-            if (!tts) return false
-            return Object.values(tts).some((provider) => provider?.status === true)
+            if (!chatflow.textToSpeech) return false
+            try {
+                const tts = JSON.parse(chatflow.textToSpeech)
+                return Object.entries(tts).some(([key, provider]) => key !== 'none' && provider?.status === true)
+            } catch {
+                return false
+            }
         }
         case 'fileUpload':
             return chatbotConfig?.fullFileUpload?.status === true
         case 'analyseChatflow': {
-            const ap = chatbotConfig?.analyticsProviders
-            if (!ap) return false
-            return Object.values(ap).some((provider) => provider?.status === true)
+            if (!chatflow.analytic) return false
+            try {
+                const ap = JSON.parse(chatflow.analytic)
+                return Object.values(ap).some((provider) => provider?.status === true)
+            } catch {
+                return false
+            }
         }
         case 'postProcessing':
-            return chatbotConfig?.postProcessing?.status === true
-        case 'mcpServer':
-            return chatbotConfig?.mcpServer?.status === true
+            return chatbotConfig?.postProcessing?.enabled === true
+        case 'mcpServer': {
+            if (!chatflow.mcpServerConfig) return false
+            try {
+                const mcp = typeof chatflow.mcpServerConfig === 'string' ? JSON.parse(chatflow.mcpServerConfig) : chatflow.mcpServerConfig
+                return mcp?.enabled === true
+            } catch {
+                return false
+            }
+        }
         case 'overrideConfig':
             return apiConfig?.overrideConfig?.status === true
         default:
@@ -206,7 +226,6 @@ const ChatflowConfigurationDialog = ({ show, isAgentCanvas, dialogProps, onCance
     const customization = useSelector((state) => state.customization)
 
     const [activeSection, setActiveSection] = useState('rateLimit')
-    const [mcpServerEnabled, setMcpServerEnabled] = useState(false)
 
     const isDark = theme.palette.mode === 'dark' || customization?.isDarkMode
 
@@ -253,7 +272,7 @@ const ChatflowConfigurationDialog = ({ show, isAgentCanvas, dialogProps, onCance
             case 'postProcessing':
                 return <PostProcessing {...props} />
             case 'mcpServer':
-                return <McpServer {...props} onStatusChange={(enabled) => setMcpServerEnabled(enabled)} />
+                return <McpServer {...props} />
             case 'overrideConfig':
                 return <OverrideConfig {...props} hideTitle />
             default:
@@ -346,8 +365,7 @@ const ChatflowConfigurationDialog = ({ show, isAgentCanvas, dialogProps, onCance
                                     {/* Section items */}
                                     {group.sections.map((section) => {
                                         const isActive = currentSection === section.id
-                                        const isEnabled =
-                                            section.id === 'mcpServer' ? mcpServerEnabled : getSectionStatus(section.id, chatflow)
+                                        const isEnabled = getSectionStatus(section.id, chatflow)
                                         const SectionIcon = section.icon
 
                                         return (

packages/ui/src/ui-component/extended/FollowUpPrompts.jsx

@@ -412,13 +412,25 @@ const FollowUpPrompts = ({ dialogProps }) => {
     }
 
     useEffect(() => {
-        if (dialogProps.chatflow && dialogProps.chatflow.followUpPrompts) {
-            let chatbotConfig = JSON.parse(dialogProps.chatflow.chatbotConfig)
-            let followUpPromptsConfig = JSON.parse(dialogProps.chatflow.followUpPrompts)
-            setChatbotConfig(chatbotConfig || {})
-            if (followUpPromptsConfig) {
-                setFollowUpPromptsConfig(followUpPromptsConfig)
-                setSelectedProvider(followUpPromptsConfig.selectedProvider)
+        if (!dialogProps.chatflow) return
+        // Load chatbotConfig unconditionally — otherwise saving follow-up prompts
+        // writes an empty object and wipes starterPrompts/leads/allowedOrigins/etc.
+        if (dialogProps.chatflow.chatbotConfig) {
+            try {
+                setChatbotConfig(JSON.parse(dialogProps.chatflow.chatbotConfig) || {})
+            } catch {
+                setChatbotConfig({})
+            }
+        }
+        if (dialogProps.chatflow.followUpPrompts) {
+            try {
+                const followUpPromptsConfig = JSON.parse(dialogProps.chatflow.followUpPrompts)
+                if (followUpPromptsConfig) {
+                    setFollowUpPromptsConfig(followUpPromptsConfig)
+                    setSelectedProvider(followUpPromptsConfig.selectedProvider)
+                }
+            } catch {
+                // ignore malformed stored config
             }
         }
 

packages/ui/src/views/agentexecutions/NodeExecutionDetails.jsx

@@ -48,6 +48,7 @@ export const NodeExecutionDetails = ({ data, label, status, metadata, isPublic,
     const [loadingMessage, setLoadingMessage] = useState('')
     const [sourceDialogOpen, setSourceDialogOpen] = useState(false)
     const [sourceDialogProps, setSourceDialogProps] = useState({})
+    const [showAllTools, setShowAllTools] = useState(false)
     const customization = useSelector((state) => state.customization)
     const theme = useTheme()
     const { enqueueSnackbar } = useSnackbar()
@@ -387,7 +388,7 @@ export const NodeExecutionDetails = ({ data, label, status, metadata, isPublic,
                             <Typography sx={{ mt: 2 }} variant='h5' gutterBottom>
                                 Tools
                             </Typography>
-                            {data.output.availableTools.map((tool, index) => {
+                            {(showAllTools ? data.output.availableTools : data.output.availableTools.slice(0, 5)).map((tool, index) => {
                                 // Check if this tool is in the usedTools array
                                 const isToolUsed =
                                     data.output.usedTools &&
@@ -412,7 +413,7 @@ export const NodeExecutionDetails = ({ data, label, status, metadata, isPublic,
                                         }}
                                     >
                                         <AccordionSummary
-                                            expandIcon={<IconChevronDown />}
+                                            expandIcon={<IconChevronDown color={customization.isDarkMode ? '#fff' : undefined} />}
                                             aria-controls={`tool-${index}-content`}
                                             id={`tool-${index}-header`}
                                         >
@@ -486,6 +487,15 @@ export const NodeExecutionDetails = ({ data, label, status, metadata, isPublic,
                                     </Accordion>
                                 )
                             })}
+                            {data.output.availableTools.length > 5 && (
+                                <Button
+                                    size='small'
+                                    onClick={() => setShowAllTools((prev) => !prev)}
+                                    sx={{ mt: 0.5, textTransform: 'none' }}
+                                >
+                                    {showAllTools ? 'Show less' : `Show ${data.output.availableTools.length - 5} more`}
+                                </Button>
+                            )}
                         </Box>
                     )}
                     <Typography sx={{ mt: 2 }} variant='h5' gutterBottom>
@@ -905,6 +915,8 @@ export const NodeExecutionDetails = ({ data, label, status, metadata, isPublic,
                                 )}
                             </Box>
                         ))
+                    ) : data?.name === 'toolAgentflow' && data?.input ? (
+                        <JSONViewer data={data.input} />
                     ) : data?.input?.form || data?.input?.http || data?.input?.conditions ? (
                         <JSONViewer data={data.input.form || data.input.http || data.input.conditions} />
                     ) : data?.input?.code ? (