How can I update my page.tsx for proper OpenAI 4.0.0 API integration?

Hi, I'm new to this and have updated my route.ts based on the latest OpenAI documentation for API calls. However, I'm not sure how to adjust my page.tsx to work with the new setup and properly handle responses from ChatGPT3.5.

The following is my current route.ts:

TYPESCRIPTCopied
//route.ts
import OpenAI from 'openai';
import { auth } from "@clerk/nextjs";
import { NextResponse } from "next/server";

const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY // This is also the default, can be omitted
});

export async function POST(
    req: Request
) {
    try {
        const { userId } = auth();
        const body = await req.json();
        const { messages } = body;

        if (!userId) {
            return new NextResponse("Unauthorised", { status: 401 });
        }

        if (!openai) {
            return new NextResponse("OpenAI API Key not configured", { status: 500 });
        }

        if (!messages) {
            return new NextResponse("Messages are required", { status: 400 });
        }

        const response = await openai.chat.completions.create({
            model: "gpt-3.5-turbo",
            messages: [{"role": "user", "content": "Hello!"}],
        });

        console.log(response.choices[0].message);

    } catch (error) {
        console.log("[CONVERSATION_ERROR]", error)
        return new NextResponse("Internal error", { status: 500 });
    }
}

And here is my current page.tsx:

TYPESCRIPTCopied
//page.tsx

"use client";

import axios from "axios";
import * as z from "zod";

import { zodResolver } from "@hookform/resolvers/zod";
import { Heading } from "@/components/heading";
import { MessageSquare } from "lucide-react";
import { useForm } from "react-hook-form";
import ChatCompletion from "openai";
import { formSchema } from "./constants";
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 { useState } from "react";
import createCompletion from "openai";
import OpenAI from 'openai';

const ConversationPage = () => {
    const router = useRouter();
    const [messages, setMessages] = useState<createCompletion[]>([]);
  
    const form = useForm<z.infer<typeof formSchema>>({
      resolver: zodResolver(formSchema),
      defaultValues: {
        prompt: ""
      }
    });
  
    const isLoading = form.formState.isSubmitting;
    
    const onSubmit = async (values: z.infer<typeof formSchema>) => {
      try {
        const userMessage: createCompletion = { role: "user", content: values.prompt };
        const newMessages = [...messages, userMessage];
        
        const response = await axios.post('/api/conversation', { messages: newMessages });
        setMessages((current) => [...current, userMessage, response.data]);
        
        form.reset();
      } catch (error: any) {
        console.log(error);
        } 
        finally {
        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="How do I calculate the radius of a circle?"
                                    {...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)=> (
                                <div key={message.content}>
                                    {message.content}
                                    </div>
                            ))}
                    </div>
                    </div>
                </div>
            </div>
        );
    }
    
export default ConversationPage;

I need help updating my page.tsx to be in line with the new API route and response format. Any pointers or revised example code would be greatly appreciated!