I keep getting random 0:” and “0;” in my responses. For example here:

AI: 0: “” 0: “Here” 0: ” is” 0: ” a” 0: ” shortened” 0: ” version”0: “: ” 0: “George” 0: ” Washington” 0: ” was”0: ” the” 0: ” first” 0: ” President” 0: ” of”0: ” the” 0: ” United”0: ” States” 0: “, ” 0: ” serving” 0: ” from” 0: ” ” 0: “178”0: “9” 0: ” to” 0: ” ” 0: “179”0: “7” 0: “. ” 0: ” He” 0: ” was”0: ” a” 0: ” military” 0: ” leader” 0: ” during” 0: ” the”0: ” American” 0: ” Revolutionary” 0: ” War” 0: ” and” 0: ” is” 0: ” considered”0: ” one” 0: ” of” 0: ” the”0: ” most” 0: ” important” 0: ” figures” 0: ” in” 0: ” American” 0: ” history”0: “. ” 0: ” Washington” 0: “‘s” 0: ” leadership”0: “, ” 0: ” integrity” 0: “, ” 0: ” and” 0: ” legacy” 0: ” continue”0: ” to” 0: ” inspire” 0: ” Americans”0: ” to” 0: ” this” 0: ” day” 0: “. ” 0: “”

For context, here is my code:

"use client";

import * as z from "zod";
import React, { useState, useRef, useEffect } from 'react';
import { Heading } from "@/components/heading";
import { MessageSquare } from "lucide-react";
import { useForm } from 'react-hook-form';
import { zodResolver } from "@hookform/resolvers/zod";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";
import { formSchema } from "./constants";

type ChatCompletionRequestMessage = {
  role: 'system' | 'user' | 'assistant';
  content: string;
};

const ConversationPage = () => {
  const router = useRouter();
  const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const abortControllerRef = useRef<AbortController | null>(null);

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: { prompt: "" }
  });

  useEffect(() => {
    return () => {
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  }, []);


  const cleanText = (text: string) => {
    return text
      .replace(/\n/g, 'n')  // Replace escaped newlines with actual newlines
      .replace(/\t/g, 't')  // Replace escaped tabs with actual tabs
      .replace(/s+/g, ' ')  // Replace multiple spaces with a single space
      .replace(/s*([.,!?:;])s*/g, '$1 ')  // Ensure spaces around punctuation
      .replace(/s*-s*/g, ' - ')  // Fix spacing around dashes
      .replace(/s*'s*/g, "'")  // Fix spacing around apostrophes
      .replace(/s*(s*/g, ' (')  // Fix spacing around opening parentheses
      .replace(/s*)s*/g, ') ')  // Fix spacing around closing parentheses
      .trim();
  };
  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    try {
      setIsLoading(true);
      const userMessage: ChatCompletionRequestMessage = {
        role: "user",
        content: values.prompt,
      };
      const newMessages = [...messages, userMessage];
      setMessages(newMessages);
  
      abortControllerRef.current = new AbortController();
  
      const response = await fetch("/api/conversation", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ messages: newMessages }),
        signal: abortControllerRef.current.signal,
      });
  
      if (!response.ok) {
        throw new Error(response.statusText);
      }
  
      const data = response.body;
      if (!data) {
        return;
      }
  
      const reader = data.getReader();
      const decoder = new TextDecoder();
      let done = false;
      let accumulatedResponse = "";
  
      setMessages((currentMessages) => [
        ...currentMessages,
        { role: "assistant", content: "" },
      ]);
  
      while (!done) {
        const { value, done: doneReading } = await reader.read();
        done = doneReading;
        const chunkValue = decoder.decode(value, { stream: true });
        
        // Clean the chunk and accumulate the response
        accumulatedResponse += cleanText(chunkValue);
  
        // Update the assistant message with the accumulated response
        setMessages((currentMessages) => [
          ...currentMessages.slice(0, -1),
          { role: "assistant", content: accumulatedResponse },
        ]);
      }
  
      form.reset();
    } catch (error: any) {
      if (error.name === "AbortError") {
        console.log("Fetch aborted");
      } else {
        console.error("Error:", error);
      }
    } finally {
      setIsLoading(false);
      router.refresh();
    }
  };
  
  

  
  return (
    <div>
      <Heading
        title="Conversation"
        description="Our Most Advanced Conversation Model"
        icon={MessageSquare}
        iconColor="text-violet-500"
        bgColor="bg-violet-500/10"
      />
      <div className="px-4 lg:px-8">
        <div>
          <Form {...form}>
            <form
              onSubmit={form.handleSubmit(onSubmit)}
              className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
            >
              <FormField
                name="prompt"
                render={({ field }) => (
                  <FormItem className="col-span-12 lg:col-span-10">
                    <FormControl className="m-0 p-0">
                      <Input
                        className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                        disabled={isLoading}
                        placeholder="Message Genius"
                        {...field}
                      />
                    </FormControl>
                  </FormItem>
                )}
              />
              <Button className="col-span-12 lg:col-span-2 w-full" disabled={isLoading}>
                Generate
              </Button>
            </form>
          </Form>
        </div>
        <div className="space-y-4 mt-4">
          <div className="flex flex-col-reverse gap-y-4">
            {messages.map((message, index) => (
              <div key={index} className={`p-8 w-full flex items-start gap-x-8 rounded-lg ${message.role === 'user' ? 'bg-white border border-black/10' : 'bg-muted'}`}>
                {message.role === 'user' ? 'You' : 'AI'}: {message.content}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ConversationPage;

So I added a cleanText function that I thought would help but didnt do much, and I also tried to edit the onSubmit function to no luck.

Thank you guys for your help and thanks in advance!