Stopping and/or Resetting group data with an API stream data source?

I have a RE with a data source type as an API stream. I am reusing this across numerous parts of my app but have found the ‘Reset group’ does not clear the data. Is that true?

I currently: Hide the group, reset the group (but it seems ineffective), send new stream result, then show the RE again. This shows the old data, with a flicker as the data streams in. It’s a weak workflow.

I did wonder about making a fake stream data source, to reset - but that seems OTT. Any better ways?

I’m also wondering how I can ‘stop’ a live stream, like the Stop button in chatgpt. Has anyone achieved this? My experience with stopping live FE workflows in bubble is ‘that’s hard’ - which sucks.

Tips / advice welcome - I want to give my users more control other than ‘waiting’ for streams and the flickering refreshes as new content comes to a RE.

I ran into a similar issue. Unfortunately, for API calls that receive stream data directly from the API Connector, even though we can reset the group that has the “text stream” data source, that doesn’t actually stop the streaming itself. If you check the DevTools network tab, you’ll still see the stream chunks coming in. The reset only affects the front end, so to speak and even then, it doesn’t work properly. Unfortunately, this is a current limitation in Bubble.

The only way I managed to solve it was by moving everything to the front end and handling it through JavaScript. Since our stream call happens in n8n, we’re not exposing any LLM API keys in the direct front-end call. For security, we implemented a JWT generation flow, the user triggers it on the front end, but the JWT is actually generated in Bubble’s backend workflows. Then, in n8n, we simply validate that JWT. This setup allowed us to keep the n8n endpoint secure.

But as I mentioned, this is a limitation in Bubble, and we had to go down a much more complex JavaScript route. We implemented custom code to handle the stream and to actually be able to interrupt it. For that, we used the Toolbox plugin and Bubble’s HTML element, which let us build the structure we needed and it’s now working perfectly. It just ended up being a lot more complex than we’d like.

Unfortunately, you might have to take a similar approach :confused:

2 Likes

Thank you @carlovsk.edits - funnily enough the more I’ve relied on API connector the less I’ve found it can perform its job. I am increasingly moving out to Cloudflare service workers which perform a more stable and reliable request, then pull this in via the API connector. I could probably add a command to the worker that requests a stop to the stream and therefore ‘terminates’ mid-flow. I’ve not added JWTs yet but I can also see the value of these, so appreciate knowing this was your approach for a secure connection too.

I don’t think I’ll go as far as you did with JS and HTML - I’d like to keep it as bubble-based as I can. Otherwise I might as well start moving more seriously into full code!

Creative solutions for resetting a stream block still welcomed!

2 Likes

Here’s my solution - and it’s pretty dank but working:

  1. Create a new BE workflow called ‘ai-reset-stream’ (or whatever).
  2. Set this with one action: Return data from API. I just set it to plain text and ‘Loading…’.
  3. Add this as an API Connector source, set as a ‘stream’ type.
  4. Display this API source in the group before you stream new content to the RE / streaming group.
  5. Voila, the RE / streaming group shows ‘Loading…’ briefly, and then the new content as it streams in.

Inelegant, sure, but better than seeing the previous content. Improvements welcome.