I need help changing the resquest to the Open AI API from singular to stream

I’m having a problem that most of the resquest I do are taking gateway timeout. I found that one way to avoid this is by using the ‘stream: true’ when making the request.
But that’s the only part I know. I’m saving the messages on firebase so I would have to make a big change to the code to be able to make this all work, can someone help me with some way for me to follow at least?

My codes:

import admin from 'firebase-admin'
import query from '../../lib/queryApi'
import { adminDb } from '../api/db/firebase-admin'
import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
    answer: string
}

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse<Data>
){
    const {prompt, id, user} = req.body

    // ChatGPT

    const response = await query(prompt, id, user)

    const message: Message = {
        text: response || "error",
        createdAt: admin.firestore.Timestamp.now(),
        user: {
            _id: "bot",
            name: "bot",
            avatar: 'any'
        },
    }


    await adminDb
        .collection("conversations")
        .doc(user.email)
        .collection("chats")
        .doc(id)
        .collection("messages")
        .add(message)

    res.status(200).json({ answer: message.text })
}

const query = async (prompt, _id, _user) => {
    const res = await openai.createCompletion({
        model: 'text-davinci-003',
        prompt,
        temperature: 0.3,
        max_tokens: 1000,
        frequency_penalty: 0.5,
        presence_penalty: 0,
        stream: true,
    })
    .then(res => res.data.choices[0].text)
    .catch(
        (err) => 
        `Something happened(Error: ${err.message})`
    )

    return res
}

export default query

My codes to display messages

'use client'
import Message from "./Message"
import { useEffect, useRef } from "react" 
import { ArrowSquareDown } from "phosphor-react"
import { db } from "../../pages/api/db/firebase-config"
import { useUserContext } from "../../app/context/userContext"
import { useCollection } from "react-firebase-hooks/firestore"
import { collection, orderBy, query } from "firebase/firestore"

function Chat({ id }) {
    const { user } = useUserContext()
    
    const [messages] = useCollection(
        user && query(
            collection(db, "conversations", user.email, "chats", id, "messages"),
            orderBy("createdAt", 'asc')
        )
    )

    const messagesEndRef = useRef(null);

    useEffect(() => {
        messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }, [messages]);

    return (
        <div className="flex-1 overflow-y-auto overflow-x-hidden" >
            {messages?.empty && (
                <>
                    <p className="mt-96 text-center text-white font-mont" >
                        Escreva uma pergunta para começar!
                    </p>
                    <ArrowSquareDown className="h-10 w-10 mx-auto mt-5 text-white" />
                </>
            )}
            {messages?.docs.map((message, index) => (
                <Message key={message.id} message={message.data()} isLastMessage={index === messages.docs.length - 1}/>
            ))}
            <div ref={messagesEndRef} />
        </div>
    )
}

export default Chat

import { DocumentData } from "firebase/firestore"

type Props = {
    message: DocumentData
    isLastMessage: boolean
}

function Message({ message}: Props) {
    const isChatGPT = message.user.name === "bot"
    const formattedText = new String(message.text).trimStart().replace(/n/g, '<br>');
    
    return (
        <div className={`py-5 text-white ${isChatGPT && "bg-[#434654]"}`} >
            <div className="flex space-x-5 max-w-2xl mx-auto" >
                <img src={message.user.avatar} alt="" className="h-8 w-8 rounded" />
                <p className='pt-1 text-sm font-mont' dangerouslySetInnerHTML={{__html: formattedText}} />
            </div>
        </div>
    )
}

export default Message