Skip to main content
@@ -14,5 +19,8 @@
${sanitizedContent}
`; + } + + return html; + } + + function addUTMParameters(url) { + try { + const urlObj = new URL(url); + urlObj.searchParams.set('utm_campaign', '215266513-FlowFuse Expert'); + return urlObj.toString(); + } catch (e) { + // If URL parsing fails, return original URL + return url; + } + } + + function renderRichContent(richAnswer) { + let html = ''; + + // Setup Guide label for guide messages + let headerText = 'Result' + + if (richAnswer.kind === 'guide') headerText = 'Setup Guide' + if (richAnswer.kind === 'resources') headerText = 'Resources'; + + html += `${headerText}
`;
+
+ // Title
+ if (richAnswer.title) {
+ html += `${richAnswer.title}
`; + } + + // Summary text (if any) + if (richAnswer.summary) { // typically a guide has a summary + html += `${richAnswer.summary}
`; + } + + // Content text (if any) + if (richAnswer.content) { // typically a resources response has this field + html += `${richAnswer.content}
`; + } + + // Steps + if (richAnswer.steps && richAnswer.steps.length > 0) { + html += '';
+ html += '
';
+ }
+
+ // Node Packages
+ if (richAnswer.nodePackages && richAnswer.nodePackages.length > 0) {
+ html += 'Steps:
'; + html += '- ';
+
+ richAnswer.steps.forEach((step, index) => {
+ html += `
+
-
+ ${index + 1}
+ ++
${step.title}
+${step.detail}
+ `;
+ });
+
+ html += '
';
+ html += '
';
+ }
+
+ // Resources
+ if (richAnswer.resources && richAnswer.resources.length > 0) {
+ html += 'Required Node Packages
'; + html += '';
+ richAnswer.nodePackages.forEach(pkg => {
+ const url = pkg.url || pkg.metadata?.source;
+ const defLocation = 'https://flows.nodered.org/search?type=node';
+ const packageName = pkg.name || pkg.id || pkg.metadata?.id;
+ const nodeUrl = url || (packageName ? `https://flows.nodered.org/node/${packageName}` : defLocation);
+ const nodeUrlWithUTM = addUTMParameters(nodeUrl);
+ const faviconUrl = `https://www.google.com/s2/favicons?domain=${new URL(nodeUrl).hostname}`;
+
+ html += `
+
+
';
+ html += '
+ 
+
+ `;
+ });
+
+ html += '
+
+ ${packageName || nodeUrl}
+${nodeUrl}
+';
+ html += '
';
+ }
+
+ // Flows
+ if (richAnswer.flows && richAnswer.flows.length > 0) {
+ html += 'Related Resources
'; + html += '';
+
+ richAnswer.resources.forEach(resource => {
+ const url = resource.url || resource.metadata?.source;
+ const title = resource.title || resource.metadata?.title || url;
+ const faviconUrl = `https://www.google.com/s2/favicons?domain=${new URL(url).hostname}`;
+ const resourceUrlWithUTM = addUTMParameters(url);
+
+ html += `
+
+
';
+ html += '
+
+
+ `;
+ });
+
+ html += '
+
+ ${title}
+${url}
+';
+ html += '
';
+ }
+
+ return html;
+ }
+
+ // Stop generation
+ const stopGenerationBtn = document.getElementById('stop-generation');
+ if (stopGenerationBtn) {
+ stopGenerationBtn.addEventListener('click', function() {
+ // Stop the current generation
+ isGenerating = false;
+
+ // Clear transaction ID to ignore any subsequent responses
+ lastTransactionId = null;
+
+ // Stop loading message rotation
+ stopLoadingMessageRotation();
+
+ // Abort the current API request if it exists
+ if (currentAbortController) {
+ currentAbortController.abort();
+ }
+
+ updateInputState();
+ });
+ }
+
+ // Send message
+ const sendMessageBtn = document.getElementById('send-message');
+ if (sendMessageBtn) {
+ sendMessageBtn.addEventListener('click', async function() {
+ const message = modalInput.value.trim();
+ if (!message) return; // Don't send empty messages
+
+ // Clear the input
+ modalInput.value = '';
+
+ // Add user message
+ addMessage(message, 'human');
+
+ // Mark as generating and update UI
+ isGenerating = true;
+ updateInputState();
+
+ // Start AI response
+ const aiMessageIndex = addProgressiveMessage('', 'ai');
+
+ try {
+ // Make API call
+ const response = await sendChatMessage(message);
+
+ // Check if response is valid
+ if (!response || !response.answer) {
+ throw new Error('Invalid response from server');
+ }
+
+ // Check if this response is from the most recent transaction
+ if (response.transactionId !== lastTransactionId) {
+ // Ignore response from cancelled/outdated request
+ return;
+ }
+
+ // Handle multi-message vs single message responses
+ if (response.isMultiMessage && Array.isArray(response.answer)) {
+ // Stop loading animation first
+ const loadingElement = chatMessages.children[aiMessageIndex];
+ if (loadingElement) {
+ const loadingBubble = loadingElement.querySelector('.ai-loading');
+ if (loadingBubble) {
+ stopLoadingMessageRotation();
+ }
+ }
+
+ // Wait a bit to ensure loading dots are visible
+ await new Promise(resolve => setTimeout(resolve, 300));
+
+ // Remove the loading message from DOM and array
+ messages.splice(aiMessageIndex, 1);
+ const aiMessageElements = chatMessages.children;
+ if (aiMessageElements[aiMessageIndex]) {
+ chatMessages.removeChild(aiMessageElements[aiMessageIndex]);
+ }
+
+ // Now add each message from the response
+ response.answer.forEach(messageObj => {
+ addAIMessageFromObject(messageObj);
+ });
+ } else {
+ // Fallback for old single message format - treat as single chat message
+ const messageText = typeof response.answer === 'string' ? response.answer : response.answer[0]?.content || 'No response';
+ const words = messageText.split(' ');
+ let currentText = '';
+
+ for (let i = 0; i < words.length; i++) {
+ // Check if generation was stopped or transaction changed
+ if (!isGenerating || response.transactionId !== lastTransactionId) {
+ break;
+ }
+
+ currentText += (i > 0 ? ' ' : '') + words[i];
+ updateMessage(aiMessageIndex, currentText);
+ await new Promise(resolve => setTimeout(resolve, 30));
+ }
+ }
+ } catch (error) {
+ if (error.name === 'AbortError') {
+ // Update message to show it was stopped
+ updateMessage(aiMessageIndex, messages[aiMessageIndex].content + ' Stopped your request');
+ } else {
+ // Handle other errors
+ updateMessage(aiMessageIndex, 'Sorry, an error occurred while generating the response.');
+ }
+ }
+
+ // Mark generation as complete
+ isGenerating = false;
+ currentAbortController = null;
+ updateInputState();
+ });
+ }
+
+ // Update send button when typing
+ modalInput.addEventListener('input', function() {
+ updateInputState();
+ });
+
+ // Enter key to send message
+ modalInput.addEventListener('keydown', async function(e) {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ const message = modalInput.value.trim();
+ if (message) {
+ modalInput.value = '';
+
+
+ // Re-enable auto-scroll when user sends a new message
+ autoScrollEnabled = true;
+
+ // Add user message
+ addMessage(message, 'human');
+
+ // Mark as generating and update UI
+ isGenerating = true;
+ updateInputState();
+
+ // Start AI response
+ const aiMessageIndex = addProgressiveMessage('', 'ai');
+
+ try {
+ // Make API call
+ const response = await sendChatMessage(message);
+
+ // Check if response is valid
+ if (!response || !response.answer) {
+ throw new Error('Invalid response from server');
+ }
+
+ // Check if this response is from the most recent transaction
+ if (response.transactionId !== lastTransactionId) {
+ // Ignore response from cancelled/outdated request
+ return;
+ }
+
+ // Handle multi-message vs single message responses
+ if (response.isMultiMessage && Array.isArray(response.answer)) {
+ // Stop loading animation first
+ const loadingElement = chatMessages.children[aiMessageIndex];
+ if (loadingElement) {
+ const loadingBubble = loadingElement.querySelector('.ai-loading');
+ if (loadingBubble) {
+ stopLoadingMessageRotation();
+ }
+ }
+
+ // Wait a bit to ensure loading dots are visible
+ await new Promise(resolve => setTimeout(resolve, 300));
+
+ // Remove the loading message from DOM and array
+ messages.splice(aiMessageIndex, 1);
+ const aiMessageElements = chatMessages.children;
+ if (aiMessageElements[aiMessageIndex]) {
+ chatMessages.removeChild(aiMessageElements[aiMessageIndex]);
+ }
+
+ // Now add each message from the response
+ response.answer.forEach(messageObj => {
+ addAIMessageFromObject(messageObj);
+ });
+ } else {
+ // Fallback for old single message format - treat as single chat message
+ const messageText = typeof response.answer === 'string' ? response.answer : response.answer[0]?.content || 'No response';
+ const words = messageText.split(' ');
+ let currentText = '';
+
+ for (let i = 0; i < words.length; i++) {
+ // Check if generation was stopped or transaction changed
+ if (!isGenerating || response.transactionId !== lastTransactionId) {
+ break;
+ }
+
+ currentText += (i > 0 ? ' ' : '') + words[i];
+ updateMessage(aiMessageIndex, currentText);
+ await new Promise(resolve => setTimeout(resolve, 30));
+ }
+ }
+ } catch (error) {
+ if (error.name === 'AbortError') {
+ // Update message to show it was stopped
+ updateMessage(aiMessageIndex, messages[aiMessageIndex].content + ' Stopped your request');
+ } else {
+ // Handle other errors
+ updateMessage(aiMessageIndex, 'Sorry, an error occurred while generating the response.');
+ }
+ }
+
+ // Mark generation as complete
+ isGenerating = false;
+ currentAbortController = null;
+ updateInputState();
+ }
+ }
+ });
+
+ // Add click handler for flow copy buttons & code blocks
+ if (window.__ffExpertFlowClick) document.removeEventListener('click', window.__ffExpertFlowClick);
+ window.__ffExpertFlowClick = flowInteractionHandler;
+ document.addEventListener('click', flowInteractionHandler);
+
+
+ // Clear conversation event listener
+ const clearConversationBtn = document.getElementById('clear-conversation');
+ if (clearConversationBtn) {
+ clearConversationBtn.addEventListener('click', clearConversation);
+ }
+
+ // Open the conversation from anywhere on the page, without morphing from the entry box.
+ window.ffExpertOpen = function(text) {
+ openModal((text || '').trim(), { morph: false });
+ };
+
+ let target
+ let messageHandler
+ // Determine app URL based on hostname
+ const appURL = window.location.hostname === 'localhost'
+ ? 'http://localhost:3000'
+ : 'https://app.flowfuse.com';
+
+ document.getElementById('continue-to-app').addEventListener('click', function handler() {
+ // Reuse existing target window or create new one if it doesn't exist or was closed
+ if (!target || target.closed) {
+ target = window.open(appURL, 'flowfuse-app');
+ } else {
+ // If window exists and is open, bring it to focus
+ target.focus();
+ }
+
+ // Only create the messageHandler if it doesn't exist
+ if (!messageHandler) {
+ messageHandler = function(event) {
+ // Verify the origin for security
+ if (event.origin !== appURL) {
+ return;
+ }
+ // Check message type
+ if (event.data.type === 'onLoad' && event.data.status === 'ready') {
+ // Now you can send messages to the target
+ target.postMessage({
+ source : 'flowfuse-website',
+ scope : 'flowfuse-expert',
+ action : 'set-context',
+ payload: {
+ data: transferPayload,
+ sessionId
+ }
+ },
+ appURL
+ )
+ } else if (event.data.type === 'flowfuse-expert-response' && event.data.action === 'confirm') {
+ // Remove message handler after successful context response
+ window.removeEventListener('message', messageHandler)
+ messageHandler = null
+ closeModal()
+ }
+ };
+ // Add the event listener only once
+ window.addEventListener('message', messageHandler);
+ }
+ });
+}
+
+window.ffExpertInit = ffExpertInit;
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', ffExpertInit);
+} else {
+ ffExpertInit();
+}
Example Flows
'; + html += '- ';
+
+ richAnswer.flows.forEach(flow => {
+ if (!flow || typeof flow !== 'object' || !flow.metadata || !Array.isArray(flow.metadata.flows) || flow.metadata.flows.length === 0) return;
+ const flowId = `flow-${crypto.randomUUID()}`
+ let flowsJSON = JSON.stringify(flow.metadata.flows, null, 2);
+ flowsStore[flowId] = flowsJSON;
+ html += `
+
-
+ +++ ++++++
${flow.title}
++ + +++ Category: + ${flow.metadata?.category} +
++ ++ `
+ });
+
+ html += '