请基于Vue3、Vite、Eslint等技术来实现一个运行在Web端的客服聊天窗口。具体要求：UI设计风格需要参考：Ant Design该聊天窗口大体分为三个部分：在顶部需要显示客服的名称信息；在中部需要显示用户与客服的聊天消息；在底部提供一个文字输入框与发送按钮以让用户能够输入文本与发送消息。该聊天窗口需要始终在网页的右小角置顶显示你需要假定该聊天窗口基于WebSocket协议与后台服务端进行通

由于需要使用Vue3和Vite，需要先安装Vue3和Vite：

npm install vue@next
npm install vite

接下来，需要创建一个新的Vue3项目，并安装Ant Design组件库和WebSocket库：

npm init vite-app chat-window
cd chat-window
npm install ant-design-vue@next
npm install vue3-websocket

接下来，我们需要创建一个ChatWindow组件，并在App.vue中使用它：

<template>
  <div id="app">
    <ChatWindow />
  </div>
</template>

<script>
import ChatWindow from './components/ChatWindow.vue'

export default {
  components: {
    ChatWindow
  }
}
</script>

ChatWindow组件包含三个部分：顶部的客服信息、中部的聊天内容、底部的输入框和发送按钮。

<template>
  <div class="chat-window">
    <div class="chat-window-header">
      <div class="chat-window-avatar">
        <a-avatar :src="avatar" :size="40" />
      </div>
      <div class="chat-window-info">
        <p class="chat-window-name">{{ name }}</p>
        <p class="chat-window-status">
          <a-badge status="processing" /> {{ status }}
        </p>
      </div>
    </div>
    <div class="chat-window-content">
      <div v-for="(msg, index) in messages" :key="index">
        <div v-if="msg.type === 'received'" class="chat-window-message received">
          <p>{{ msg.text }}</p>
        </div>
        <div v-else class="chat-window-message sent">
          <p>{{ msg.text }}</p>
        </div>
      </div>
    </div>
    <div class="chat-window-input">
      <a-input
        placeholder="输入消息"
        v-model="inputMessage"
        @keyup.enter="sendMessage"
      />
      <a-button type="primary" @click="sendMessage">发送</a-button>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Avatar, Badge, Input, Button } from 'ant-design-vue'
import useWebSocket from 'vue3-websocket'

export default defineComponent({
  components: {
    Avatar,
    Badge,
    Input,
    Button
  },
  setup() {
    const name = '小明'
    const avatar = 'https://i.pravatar.cc/300'
    const status = '在线'
    const inputMessage = ref('')
    const messages = ref([])

    const { send } = useWebSocket('ws://localhost:3000', {
      onMessage: (event) => {
        const data = JSON.parse(event.data)
        messages.value.push(data)
      }
    })

    function sendMessage() {
      const message = {
        type: 'sent',
        text: inputMessage.value
      }
      messages.value.push(message)

      send(JSON.stringify(message))

      inputMessage.value = ''
    }

    return {
      name,
      avatar,
      status,
      inputMessage,
      messages,
      sendMessage
    }
  }
})
</script>

<style scoped>
.chat-window {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  height: 500px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 10px #ccc;
}

.chat-window-header {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.chat-window-avatar {
  margin-right: 10px;
}

.chat-window-info {
  display: flex;
  flex-direction: column;
}

.chat-window-name {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.chat-window-status {
  margin: 0;
}

.chat-window-content {
  padding: 10px;
  height: 400px;
  overflow-y: auto;
}

.chat-window-message {
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 4px;
}

.chat-window-message.received {
  background-color: #f2f2f2;
}

.chat-window-message.sent {
  background-color: #e6f7ff;
}

.chat-window-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-top: 1px solid #ccc;
}
</style>

在setup函数中，我们使用了vue3-websocket库来建立WebSocket连接，并在收到消息时更新聊天内容。sendMessage函数用于发送消息，并将消息添加到聊天内容中。我们还使用了Ant Design组件库中的Avatar、Badge、Input和Button组件来实现UI效果。

最后，在main.js中注册Ant Design组件库和全局样式：

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

createApp(App).use(Antd).mount('#app')

以上代码实现了一个简单的Web客服聊天窗口，可以实现发送和接收消息的功能