Initial commit of akmon project

pages/mt/chat.uvue

@@ -0,0 +1,46 @@
+<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>