I’m building a mobile app with an integrated chat that uses OpenAI API or llama3 as model. i managed to get the streaming working properly. However I have a small problem when display the message being streamed. currently the message is displayed once the streaming is done instead of having a Chatgpt or any other LLM experience where you get message by chunk. here’s my current code.
Chat.tsx

  const {
    messages,
    addMessage,
    removeMessage,
    updateMessage,
    setIsMessageUpdating,
  } = useContext(MessagesContext);

 <FlatList
          data={messages}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => (
            <View
              style={styles.messageContainer}
              className={cn("flex justify-end", {
                "items-end": item.isUserMessage,
              })}
            >
              <View
                className={cn(
                  "flex flex-row gap-y-2 text-sm max-w-[90%] mx-2 overflow-x-hidden"
                )}
              >
                <View
                  className={cn("px-4 py-2 rounded-lg", {
                    "bg-primary ": item.isUserMessage,
                    "bg-secondary ": !item.isUserMessage,
                  })}
                >
                  <Text
                    className={cn({
                      "text-white ": item.isUserMessage,
                    })}
                  >
                    {item.text}
                  </Text>
                </View>
              </View>
            </View>
          )}
          contentContainerStyle={styles.messagesList}
        />

Here’s my function to handle the message sent with react query

  const { mutate: sendMessage, isPending } = useMutation({
    mutationKey: ["sendMessage"],
    // include message to later use it in onMutate
    mutationFn: async (message: Message) => {
      const response = await fetch(
        `${process.env.EXPO_PUBLIC_API_URL}/api/mobile/virtual-coach`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ messages }),
        }
      );
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }

      return response.body;
    },
    onMutate(message) {
      addMessage(message);
    },
    onSuccess: async (stream) => {
      if (!stream) throw new Error("No stream");

      // // construct new message to add
      const id = customAlphabet(
        "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
        10
      )();

      const responseMessage = {
        id,
        isUserMessage: false,
        text: "",
      };
      // add new message to state
      addMessage(responseMessage);
      setIsMessageUpdating(true);
      const reader = stream.getReader();
      const decoder = new TextDecoder("utf-8");
      let done = false;

      while (!done) {
        const { value, done: doneReading } = await reader.read();
        done = doneReading;
        const chunkValue = decoder.decode(new Uint8Array([value]), {
          stream: true,
        });
        updateMessage(id, (prev) => prev + chunkValue);
      }

      // // clean up
      setIsMessageUpdating(false);
    
    },
    onError: (_, message) => {
      console.log("error", _);
      removeMessage(message.id);
    },
  });

I think it has to do with flatlist re-redering behavior.