How to access the response generated by const completion function?

[toxic viper]

`
const openai = new OpenAI();

const ConversationPage = () => {
const router = useRouter();
//const proModal = useProModal();
const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);

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>) => {
console.log(values);

try {
  //const completion: ChatCompletionRequestMessage = { role: "user", content: values.prompt };
  const completion  = await openai.chat.completions.create({
    messages: [{ "role": "system", "content" : "You are a helpful assistant." }],
    model: "gpt-3.5-turbo",
  })

  const newMessages = [...messages, completion];
  const response = await axios.post('/api/conversation', { messages: newMessages });
  setMessages((current) => [...current, completion, 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 gap-2 
            grid-cols-12">
          
          <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" type="submit" 
            disabled={isLoading} size="icon"> Generate
          </Button>
        </form>
      </Form>

    </div>

`

`
<div className="space-y-4 mt-4">
{isLoading && (
<div className="p-8 rounded-lg w-full flex items-center justify-center bg-muted">
<Loader />
</div>
)}
{messages.length === 0 && !isLoading && (
<Empty label="No conversation started." />
)}
<div className="flex flex-col-reverse gap-y-4">
{messages.map((message) => (
<div
key={message.content}
className={cn(
"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" ? <UserAvatar /> : <BotAvatar />}
<p className="text-sm">
{message}
</p>
</div>
))}
</div>
</div>
</div>
</div>
);
}

export default ConversationPage;
`