47 lines
1.4 KiB
Plaintext
47 lines
1.4 KiB
Plaintext
<template>
|
|
<view :class="['mt-chat', isLargeScreen ? 'large' : 'small']">
|
|
<scroll-view class="mt-chat-history">
|
|
<view v-for="msg in messages" :key="msg.id" :class="['mt-chat-msg', msg.role]">
|
|
<text>{{ msg.content }}</text>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="mt-chat-input">
|
|
<input v-model="input" :placeholder="t('mt.chat.placeholder')" @confirm="onSend" />
|
|
<button @tap="onSend">{{ t('mt.chat.send') }}</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script lang="uts">
|
|
import { ref, onLoad } from 'uni-app'
|
|
import { t } from '@/i18n/mt'
|
|
import { isLargeScreen } from '@/utils/responsive'
|
|
import { useChat } from '@/composables/use-chat'
|
|
|
|
const messages = ref([])
|
|
const input = ref('')
|
|
const { sendMessage, loadHistory } = useChat()
|
|
|
|
onLoad(() => {
|
|
loadHistory().then(res => { messages.value = res })
|
|
})
|
|
|
|
function onSend() {
|
|
if (!input.value) return
|
|
sendMessage(input.value).then(msg => {
|
|
messages.value.push(msg)
|
|
input.value = ''
|
|
})
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.mt-chat {
|
|
display: flex; flex-direction: column; height: 100vh;
|
|
&.large { max-width: 900rpx; margin: 0 auto; }
|
|
.mt-chat-history { flex: 1; overflow-y: auto; padding: 24rpx; }
|
|
.mt-chat-msg { margin-bottom: 16rpx; }
|
|
.mt-chat-msg.user { text-align: right; color: #1976d2; }
|
|
.mt-chat-msg.assistant { text-align: left; color: #333; }
|
|
.mt-chat-input { display: flex; gap: 12rpx; padding: 16rpx; border-top: 1px solid #eee; }
|
|
}
|
|
</style>
|