先上效果

话不多说，直接上代码（本人用的hbuilder X+uniapp）

<template><view class="container"><!-- 聊天内容区域 --><scroll-view class="chat-list" scroll-y :scroll-top="scrollTop":scroll-with-animation="true"><view v-for="(item, index) in chatList" :key="index" class="chat-item":class="item.role === 'user' ? 'user' : 'assistant'"><view class="content-box"><text class="content">{{ item.content }}</text><text class="time">{{ item.time }}</text></view><view v-if="item.loading" class="loading"><view class="dot"></view><view class="dot"></view><view class="dot"></view></view></view></scroll-view><!-- 输入区域 --><view class="input-area"><input class="input" v-model="inputMessage" placeholder="请输入问题..."@confirm="sendMessage":disabled="isSending"placeholder-class="placeholder"/><button class="send-btn" @tap="sendMessage":disabled="isSending || !inputMessage">{{ isSending ? '发送中...' : '发送' }}</button></view></view>
</template><script>
const API_URL = 'https://api.deepseek.com/v1/chat/completions' // 替换为实际API地址
const API_KEY = 'sk-' // 替换为你的API密钥export default {data() {return {chatList: [],inputMessage: '',isSending: false,scrollTop: 0}},methods: {async sendMessage() {if (!this.inputMessage.trim() || this.isSending) returnconst userMessage = {role: 'user',content: this.inputMessage,time: this.getCurrentTime(),loading: false}// 添加用户消息console.log(userMessage)this.chatList.push(userMessage)this.inputMessage = ''// 添加AI的loading状态const assistantMessage = {role: 'assistant',content: '',time: '',loading: true}this.chatList.push(assistantMessage)this.isSending = truethis.scrollToBottom()try {const res = await uni.request({url: API_URL,method: 'POST',header: {'Content-Type': 'application/json','Authorization': `Bearer ${API_KEY}`},data: {model: 'deepseek-chat', // 模型messages: this.chatList.filter(item => !item.loading).map(item => ({role: item.role,content: item.content}))}})// 更新AI消息const lastIndex = this.chatList.length - 1this.chatList[lastIndex] = {role: 'assistant',content: res.data.choices[0].message.content,time: this.getCurrentTime(),loading: false}this.$forceUpdate()} catch (error) {console.error('API请求失败:', error)uni.showToast({title: '请求失败，请重试',icon: 'none'})this.chatList.pop() // 移除loading状态的消息} finally {this.isSending = falsethis.scrollToBottom()}},getCurrentTime() {const date = new Date()return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`},scrollToBottom() {this.$nextTick(() => {this.scrollTop = Math.random() * 1000000 // 通过随机数强制滚动到底部})}}
}
</script><style scoped>
/* 新增修改的样式 */
.container {padding-bottom: 120rpx; /* 给输入框留出空间 */
}.chat-list {padding: 20rpx 20rpx 160rpx; /* 底部留白防止遮挡 */
}.chat-item {margin: 30rpx 0;
}.content-box {max-width: 75%;padding: 20rpx 28rpx;border-radius: 16rpx;margin: 0 20rpx;position: relative;
}.user .content-box {background: #1989fa;color: white;margin-left: auto; /* 右对齐关键属性 */
}.assistant .content-box {background: #f8f8f8;color: #333;margin-right: auto; /* 左对齐关键属性 */
}.time {font-size: 24rpx;color: #999;position: absolute;bottom: -40rpx;white-space: nowrap;
}/* 新版加载动画 */
.loading {display: flex;align-items: center;padding: 20rpx;
}.dot {width: 12rpx;height: 12rpx;background: #ddd;border-radius: 50%;margin: 0 4rpx;animation: bounce 1.4s infinite ease-in-out;
}.dot:nth-child(2) {animation-delay: 0.2s;
}.dot:nth-child(3) {animation-delay: 0.4s;
}@keyframes bounce {0%, 80%, 100% { transform: translateY(0);}40% {transform: translateY(-10rpx);}
}/* 输入区域样式优化 */
.input-area {position: fixed;bottom: 0;left: 0;right: 0;display: flex;align-items: center;padding: 20rpx;background: #fff;border-top: 1rpx solid #eee;box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);
}.input {flex: 1;height: 80rpx;padding: 0 28rpx;background: #e9e9e9;border-radius: 40rpx;font-size: 28rpx;color: #333;border: none;
}.placeholder {color: #999;
}.send-btn {width: 140rpx;height: 80rpx;line-height: 80rpx;margin-left: 20rpx;background: #1989fa;color: white;border-radius: 40rpx;font-size: 28rpx;border: none;
}.send-btn[disabled] {opacity: 0.6;background: blue;color: white;
}
</style>

注：
1、修改你的密钥
2、需要在微信公众平台里面配置服务器域名（在开发管理里面）

https://api.deepseek.com

3、如果接口中有返回数据，但页面中没有数据展示，同时还提示API请求失败，打开接口返回的地址，与下面这段代码一一对应，看路径有没有问题

content: res.data.choices[0].message.content