以上vue3的写法改成组合式api实现

好的，以下是使用Vue 3中的组合式API实现以上功能的示例代码：

import { reactive, toRefs } from 'vue';

export default function useChatbot() {
  const state = reactive({
    conversationHistory: [],
    currentMessage: '',
    chatbotName: 'ChitGPT',
  });

  function addMessage(message, isUser) {
    state.conversationHistory.push({ message, isUser });
  }

  function sendMessage() {
    if (state.currentMessage.trim() !== '') {
      addMessage(state.currentMessage, true);
      // 调用后端API获取chatbot的回复信息
      // ...
      addMessage('这是' + state.chatbotName + '的回复', false);
      state.currentMessage = '';
    }
  }

  return {
    ...toRefs(state),
    sendMessage,
  };
}

在这个示例代码中，我们使用Vue 3中的`reactive`函数创建了一个响应式对象`state`，并且使用组合式API的`toRefs`函数将其转换为普通的响应式对象。

接下来，我们定义了两个函数`addMessage`和`sendMessage`，分别用于向对话历史中添加一条消息和发送当前消息。在`sendMessage`函数中，我们调用后端API获取chatbot的回复信息，并将其添加到对话历史中。

最后，我们将`toRefs(state)`和`sendMessage`函数作为返回值，以便在组件中使用。