Is it possible to interrupt or stop openai chat completion stream like chatgpt and not waste tokens?

Question

I have implemented openai chat api for getting reponse. I have applied chatStream so that it can be display like chatGPT. It works fine in my code. But there is option in chat gpt that when response streaming there is an option to stop the output response. How to achieve this functionality in php Laravel.

This is the JS code

$.ajax({
                method: 'POST',
                url: initArticleGenerateUrl,
                data: form,
            beforeSend: function() {
                $(".ArticleForm .loader").removeClass('hidden');
                $('#ArticleGenerateButton').attr('disabled', 'disabled');
                $('.BlogEditButton').addClass('hidden');
                $('.ArticleSuggestion').addClass('hidden');
                $('.ArticleSection').removeClass('hidden');
                
            },
            complete: function() {
                
                
            },
            success: function(data) {
                if (data.status == 200) {
                    $('.ArticleData').html(`
                        <h1 class="text-color-14 text-24 font-semibold font-RedHat dark:text-white">${$('#ArticleTitle').val()}</h1>
                    `);
                    $('.used-words-percentage').empty().append(data.usedPercentage);
                    $('.article-data').empty().html(data['article']);
                    $('.btn-create-content').prop('disabled', false);
    
                    longArticleFormData.article.data.generatedArticleBlogId = data.longArticleBlogId;
                    setLocalLongArticleData();
    
                    let url = articleGenerateUrl + "?long_article_id=" + data.longArticleBlogId;
    
                    const source = new EventSource(url, {withCredentials: true});
    
                    source.addEventListener("open", (e) => {
                        $('.ArticleSuggestion').addClass('hidden')
                        $('.ArticleData').removeClass('hidden');
                    });
    
                    source.addEventListener('update', function(event) {
    
                        if (event.data === "<END_STREAMING_SSE>") {
                            $('#ArticleGenerateButton').removeAttr('disabled');
                            $(".ArticleForm .loader").addClass('hidden');
                            $(".BlogEditButton").attr("href", SITE_URL + "/user/long-article/edit/" + data.unique_identifier);
                            $('.BlogEditButton').removeClass('hidden');
                            toastMixin.fire({
                                title: 'Article generated successfully.',
                                icon: 'success'
                            });
                            source.close();
                        }
    
                        let txt = event.data;
                        txt = txt.replace(/(?:\r\n|\r|\n)/g, '<br>');
                        let oldValue = '';
                        oldValue += $('.ArticleData').html();
                        let value = oldValue + txt;
                        value = value.replace(/\*\*(.*?)\*\*/g,
                                        '<br><br><h1 class="text-color-14 text-24 font-semibold font-RedHat dark:text-white">$1</h1>');
                        $('.ArticleData').html(value);
                    });
    
                   
    
                }  else {
                    errorMessage('Something went wrong', 'OutlineGenerateButton');
                }
            },
            error: function(data) {
                var jsonData = JSON.parse(data.responseText);
                var message = jsonData.response.records.response ? jsonData.response.records.response : jsonData.response.status.message
                errorMessage(message, 'OutlineGenerateButton');
            }
        });

This is the Laravel code

$options['prompt'] = filteringBadWords("This is the title: " . session('title') . ". These are the keywords: " . session('keywords') . ". This is the Heading list: " . session('outlines') . ". Expand each heading section to generate article in " . session('language') . " language. Do not add other headings or write more than the specific headings in Heading list. Give the heading output in bold font.");

        $generator = $this->generator;

        return response()->stream(function () use ($generator, $longArticle, $options, $subscription, $userId) {   
            
            $text = ""; 
            $totalTokens = 0;
            $streamData =  $generator->prepareChatOptions($options)->generateChatContent(['method' => 'createChatCompletionStream']);

            $textValue = '';
            foreach ($streamData as $response) {
                
                $text = $generator->getChatStreamContent($response);
                
                $textValue .= $text;
                $totalTokens++;
                if (connection_aborted()) {
                    break;
                }

                echo "event: update\n";
                echo 'data: ' . $text;
                echo "\n\n";
                ob_flush();
                flush();
            }

            

            echo "event: update\n";
            echo 'data: <END_STREAMING_SSE>';
            echo "\n\n";
            ob_flush();
            flush();

     
        }, 200, [
            'Cache-Control' => 'no-cache',
            'Content-Type' => 'text/event-stream',
        ]);

I want to know... in the middle of the content generate (when response stream foreach) can i stop generating the stream by clicking a stop button?