上边代码换成vue3代码

好的，下面是将上面的代码改写成 Vue 3 的代码：

<template>
  <div>
    <h1>{{ message }}</h1>
    <input type="text" v-model="inputText" @keyup.enter="sendMessage" />
    <ul>
      <li v-for="(message, index) in messages" :key="index">
        <span>{{ message.sender }}</span>
        <span>{{ message.text }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChitGPT from './ChitGPT';

export default {
  name: 'ChatBox',
  setup() {
    const message = ref('ChitGPT ChatBox');
    const messages = ref([]);

    const inputText = ref('');
    const sendMessage = () => {
      if (inputText.value === '') {
        return;
      }

      const newMessage = {
        sender: 'User',
        text: inputText.value,
      };
      messages.value.push(newMessage);
      inputText.value = '';

      ChitGPT.sendMessage(newMessage.text).then((response) => {
        const aiMessage = {
          sender: 'AI',
          text: response,
        };
        messages.value.push(aiMessage);
      });
    };

    return {
      message,
      messages,
      inputText,
      sendMessage,
    };
  },
};
</script>