ChatGPT streaming integration with Flutter package chat_gpt_flutter

Question

I'm using FlutterFlow to develop a mobile app. This app should provide a chat interface with the ChatGPT completions API. The response from the AI should be streamed to a UI text field similar to the experience you get on the official ChatGPT website.

I integrated this Flutter package to achieve this: https://pub.dev/packages/chat_gpt_flutter

Calling the API and receiving the response works but I cannot get my app's UI to update in real-time as the response words are received. It is not a problem with the Flutter package as I can see in the logs that it actually provide new incoming words every few milliseconds. The problem is how to update the UI as the stream of words arrive?

Here is my current code - I use a FlutterFlow "custom action" to run this code:

final request = CompletionRequest(
      messages: gptMessages,
      stream: true,
      maxTokens: 3000, // Using 4000 here led to HTTP 400 Error
      model: ChatGptModel.gpt35Turbo);

StreamSubscription<StreamCompletionResponse>? streamSubscription;

final stream = await chatGpt.createChatCompletionStream(request);

streamSubscription = stream?.listen(
  (event) => FFAppState().update(
    () {
      if (event.streamMessageEnd) {
        print("Received end of response");
        streamSubscription?.cancel();
      } else {
        if (!firstAIResponseTokenReceived) {
          // Add new AI response to the AppState variable
          ChatMessageStruct aiMsg = new ChatMessageStruct();
          aiMsg.role = "assistant";
          aiMsg.content = "";
          FFAppState().ChatWithAI.add(aiMsg);
          firstAIResponseTokenReceived = true;
        }
        ChatMessageStruct aiMsg = new ChatMessageStruct();
        aiMsg.role = "assistant";
        aiMsg.content = FFAppState().ChatWithAI.last.content +
            (event.choices?.first.delta?.content ?? '');

        FFAppState().ChatWithAI.removeLast();
        FFAppState().ChatWithAI.add(aiMsg);
      }
    },
  ),
);

FFAppState().ChatWithAI is a list of chat message structs, held within my app's state. The ListView that holds all chat messages is linked to that app state variable. So whenever I add a new child to FFAppState().ChatWithAI, the ListView will update and display the latest chat message.

Once the stream ends, my UI gets properly updated and the chat message with the full response form ChatGPT appears. But I want it to appear word-by-word as the reponse is being streamed live and not only after the final token has been received.