Support chat api v4 #4104
Merged
Support chat api v4 #4104
Conversation
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
✅ Deploy Preview for flowforge-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for flowforge-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
Author
|
TODO 
|
Closed
3 tasks
Contributor
|
@Steve-Mcl regarding the flow buttons:
cc: @cstns |
Contributor
|
Originally we had something like this, which also showed the json: 
It included some instructions regarding how to use the flows. If we are going to put something in the clipboard I suggest we have:
|
…functionality, and overflow handling for improved usability
Contributor
|
Contributor
|
we should use this pr to deploy to production and switch the dev rag url to the prod one |
Contributor
|
API endpoint hardcoded still: |
dimitrieh
requested changes
Nov 19, 2025
Contributor
dimitrieh
left a comment
dimitrieh
left a comment
There was a problem hiding this comment.
I'll be making some changes :). one sec
Contributor
|
|
…tend message padding styles - Add hover states with indigo color scheme and transitions to JSON toggle and copy buttons - Extend py-4 padding to resources message kind for consistency with guide messages
Contributor
|
types we now have:
Testing for each one |
…odal
Tailwind's content scanner cannot detect classes that are conditionally
assigned in template literals or dynamically constructed with variables.
The AI Expert Modal (src/js/ai-expert-modal.js) uses patterns like:
messageBubble.className = `max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
type === 'human'
? 'bg-indigo-600 text-white rounded-br-sm'
: 'bg-gray-100 text-gray-800 rounded-bl-sm'
}`;
Added all dynamically assigned classes to the safelist to ensure they are
included in the generated CSS, including message styling (py-4, py-2,
bg-indigo-600, text-white, etc.) and layout classes (justify-end,
justify-start, max-w-xs, lg:max-w-md, etc.).
- Enhanced hover effects on resource links with indigo color scheme - Added active states for better user feedback (active:bg-indigo-100, active:border-indigo-500) - Improved transition effects (transition-all duration-200) - Adjusted flow icon sizing and alignment for better visual hierarchy - Reduced margin spacing for cleaner layout
dimitrieh
requested changes
Nov 19, 2025
Contributor
There was a problem hiding this comment.
Seems we are missing resources for the guide (doesn't show packages)
response doesn't seem to have any (different session):
{
"query": "How would I read modbus data from a PLC and store it in a database table?",
"context": {
"userId": null,
"website": true
},
"kind": "guide",
"type": "AIMessage",
"answer": [
{
"schemaName": "GuideSchema",
"title": "Reading Modbus Data from a PLC and Storing it in a Database Table with FlowFuse and Node-RED",
"summary": "This guide explains how to read Modbus data from a PLC using Node-RED managed by FlowFuse and store the data into a database table.",
"steps": [
{
"title": "Set Up Your Node-RED Instance in FlowFuse",
"detail": "Ensure you have a Node-RED instance running on FlowFuse, preferably on an edge device close to your PLC for reliable Modbus communication."
},
{
"title": "Install and Configure Modbus Nodes",
"detail": "Use the built-in or community Modbus nodes in Node-RED. Drag the Modbus Read node onto your flow canvas and configure it with the PLC's Modbus connection details (IP address, port, unit ID, register addresses)."
},
{
"title": "Read Data from the PLC",
"detail": "Configure the Modbus Read node to poll the desired registers at your required interval. This node will output the Modbus data as a message payload."
},
{
"title": "Process and Format the Data",
"detail": "Use Function nodes or the FlowFuse Assistant inside Node-RED to transform or format the raw Modbus data as needed before storing."
},
{
"title": "Store Data in a Database Table",
"detail": "Use FlowFuse Tables and the dedicated query node to insert the processed data into your database table. Configure the query node with the appropriate SQL insert statement or use the AI-assisted query builder."
},
{
"title": "Deploy and Monitor Your Flow",
"detail": "Deploy your flow and monitor the data collection and storage process. Use debug nodes or FlowFuse monitoring tools to ensure data is being read and stored correctly."
}
],
"resources": [
{
"type": "document",
"id": "https___flowfuse_com_blog_2025_09_using_modbus_with_flowfuse_::15",
"title": "Using Modbus with FlowFuse",
"metadata": {
"source": "https://flowfuse.com/blog/2025/09/using-modbus-with-flowfuse/",
"lastModified": 1758844800000,
"chunk": 15
},
"pageContent": "Reading Data\nReading data from Modbus slaves in FlowFuse is straightforward. The process is the same regardless of which data type you want to read. 1. Drag the Modbus Read node onto the FlowFuse canvas. Double-click it to open the configuration."
},
{
"type": "document",
"id": "https___flowfuse_com_blog_2025_10_how_to_log_plc_data_csv_files_::9",
"title": "How to Log PLC Data to CSV Files",
"metadata": {
"source": "https://flowfuse.com/blog/2025/10/how-to-log-plc-data-csv-files/",
"lastModified": 1761091200000,
"chunk": 9
},
"pageContent": "for FlowFuse and set up an instance on your edge device. This device will manage data collection and logging from your PLC using Node-RED. Step 1: Setting Up PLC Communication in FlowFuse\nBefore logging data, you need a stable connection to your PLC. FlowFuse uses Node-RED under the hood, which supports every major industrial protocol through community-maintained packages."
}
],
"flows": [],
"nodePackages": [],
"kind": "guide"
},
{
"title": "Follow-up",
"content": "We have built this guide for you. If you need something different, tell us what you would like to change.",
"kind": "chat"
}
Contributor
|
@cstns the main thing I discovered is that the guide response is lacking node packages (i tested it with multiple prompts). We'll need to fix this from the BE. Other than that, I fixed some layout and interaction issues. which should mostly be fine and certainly not block anything |
- Updated node packages and example flows to use consistent hover/active states - All components now use indigo-themed interactions (hover:border-indigo-400, hover:bg-indigo-50, active:bg-indigo-100, active:border-indigo-500) - Added smooth transitions (transition-all duration-200) across all interactive elements - Fixed Tailwind class generation by adding all dynamically assigned classes to safelist - Added CSS rule to remove bottom margin from single example flow items
Contributor
|
and some additional fixes:
|
- Removed hover/active states from example flows container to avoid button visibility issues - Reverted buttons to hover:bg-indigo-50 for proper contrast on white background - Added dynamic margin toggle for JSON box: mt-3 only appears when expanded - Added mt-3 to Tailwind safelist for JSON expansion feature
Contributor
|
@cstns back to you. Please have a quick read through my comments and the commit messages :) Styling wise should be good now. Issue at #4104 (comment) remains |
Contributor
|
thank you! I also noticed guides not being returned and made a comment on FlowFuse/flowfuse#6310. You are right, it should be done on the BE side. The problem we face now is that we can't release this until the new v4 format reaches the prod instance for which we'd need to trigger a pipeline. |
Contributor
|
✔️ on the changes! We must not forget to point the client to use the production v4 endpoint not the staging one before mergeing |
Contributor
|
yup see open comment at #4104 (comment) |
11 tasks
dimitrieh
approved these changes
Nov 20, 2025
Contributor
dimitrieh
left a comment
dimitrieh
left a comment
There was a problem hiding this comment.
Approving during live review
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Support additional responses including flows json
Additional, adds DomPurify
IMPORTANT
This is a work in progress (for hand over)
TODO
-devprod URLRelated Issue(s)
prerequisites
Checklist