Open URL links from the Chat to a new Window

[nag-24]

Hello Flowise community,

I would like URL links which are returned in the chat responses to be opened in a new window when clicked by the user. Currently they open in the same tab as the website on which the chatbot is embedded thus navigating away from the website.

I need to incorporate this Javascript code in the Flowise code.

const url = "https://example.com";
window.open(url, "_blank");

Any ideas where I can incorporate this Javascript code in the Flowise Code.

Thanks.

Nagarajan

[Jaredude]

The flowise chatbot might support html in markdown, so you can try getting the bot to output link as follows:
<a href="http://example.com/" target="_blank">Hello, world!</a>

In theory, that should produce a link similar to the following: Hello, world!

[nag-24]

Thanks Jared. I did the same thing and changed all my URL links to the above format and upserted them into Vector database (Pinecone) without using a text splitter. The chat is still opening the links in the same tab. I'm waiting to see if this is because of time lag in updating the Vector database. I just wanted to explore adding some custom code to the Flowise code to address this in case the markdown format doesn't work.

[nag-24]

I need assistance with this issue I'm facing.

My flowise chatbot embedded on my website is providing URL links from the Vector Database (Pinecone) API connection that I provided but the links are opening in the same tab on which the website is embedded even though I have explicitly given all the URL links in markdown format
Code to make URL links open in a new tab Github.txt
.

Please see attached the screenshot from Pinecone and my website HTML.

There is an override somewhere in the Flowise code that is ignoring the markdown portion " target="_blank" of my URL links. I'm unable to locate this in the Flowise code posted on Github. Please guide me as to where I can modify this. I even tried adding this additional code (attached as notepad file) to my HTML code that I'm embedding on my wordpress website but I need the exact selector for Flowise's chatbot's messages container.

Please help, Thanks.

[Jaredude]

This is most likely related to FlowiseChatEmbed and when the Bot message bubble is parsed by @ts-stack/markdown. Try making the request via Postman and see if you can back the raw link as expected. You should get something along these lines:

If you don't get back the full link with _blank via Postman, then try connecting your flow to langsmith to see what's arriving to the model as context. The full urls with _blank should be part of the context, and then from there we can see if maybe the model is messing with the links or if the API is indeed modifying the links.

[nag-24]

Thanks Jared for your prompt response. I'm not sure how to test the Flowise AI chatbot using postman to inspect the URL links. I also asked ChatGPT (Tech SupportAdvisor on GPT store) and it gave me the below reply:
Testing the behavior of HTML elements and JavaScript code execution, particularly something like opening links in a new tab (target="_blank") using Postman, isn't directly possible. Postman is a tool primarily designed for API testing, which involves sending requests and receiving responses to and from endpoints. It doesn't render HTML or execute JavaScript, so you can't use it to test front-end behavior such as how links open in a web browser. If you have any heads up on where I can find the @ts-stack/markdown in the FlowwiseChatEmbed code, that would be great. Thanks so much.

[Jaredude]

To test the Flowise output, you'd make a request to the CURL url from the Flowise flow.

This way, you can see the raw output prior to it being processed by any chatbot. If the URLs are showing _blank (they are in my sample I made in the screenshot, so it's very likely the Embed and not Flowise or the bot changing them), then all you'd need to do is fork the FlowiseChatEmbed project and make the changes you'd like to support your custom needs and then use that forked version on your website.

Hardcoding a _blank on all links in the chat bot would result in a breaking change to all users already using the Embed library, so you'd want to use your own custom version.

Or, figure out if there are parameters to pass into the markdown parsing that would allow it to not strip the _blank you have in the links coming from the server.

Still, checking the raw payload returned from Flowise via Postman is the most important step because that will determine where, if at all, what code needs to be modified in your case.

[nag-24]

) Thanks Jared. Please see screenshot of postman using curl. The " target="_blank" is not appearing in the links.

[Jaredude]

It's likely the model itself is rewriting the links. Which model are you using?

You can try to force the model to output the html with the _blank using prompting, but I've found models often refuse to do exactly what you prompt them to do with link creation. If you can get the model to make the proper link, congratulations... but your best bet will be to fork the ChatEmbed repo and modify it to output all links with _blank.

EDIT: An additional option that would work would be to add an optional flag in the init that would be checked on the message bubble creation and set the link target. This way, existing implementations of the Embed would not break, and anyone looking to add _blank to the links could set that flag.

Example:
Chatbot.init({ theme: { chatWindow: { botMessage: { linkTarget: "_blank" } } } })

@nag-24 Let me know if this is something you're going to implement. Otherwise, I can make the update and submit a PR to provide this functionality.

[nag-24]

Flowise team,

I think I found the code in https://github.com/FlowiseAI/FlowiseChatEmbed that needs to be tweaked to make the URL links open in a new tab (other than website on which the chatbot is deployed).
https://github.com/FlowiseAI/FlowiseChatEmbed/blob/main/src/components/bubbles/BotBubble.tsx
I need to insert the below lines after line 45 in the code from the above page.
botMessageEl.querySelectorAll('a').forEach(link => {
link.target = '_blank';
});
Can you pls help with this?
Screenshot also attached.