Initial commit: AI chat assistant with workflow chat, workspace, and profile tabs

Co-Authored-By: Claude <noreply@anthropic.com>

components/MessageList.uvue

@@ -0,0 +1,175 @@
+<template>
+  <view class="message-list">
+    <!-- Empty state -->
+    <view v-if="messages.length === 0 && !isLoading" class="message-list__empty">
+      <text class="message-list__empty-icon">💡</text>
+      <text class="message-list__empty-title">{{ emptyTitle }}</text>
+      <text class="message-list__empty-subtitle">{{ emptySubtitle }}</text>
+    </view>
+
+    <!-- Messages -->
+    <scroll-view
+      v-if="messages.length > 0 || isLoading"
+      class="message-list__scroll"
+      ref="scrollViewRef"
+      scroll-y="true"
+      show-scrollbar="false"
+      scroll-with-animation="true"
+      :scroll-top="scrollToBottom"
+    >
+      <view class="message-list__inner">
+        <MessageBubble
+          v-for="msg in messages"
+          :key="msg.id"
+          :message="msg"
+          @retry="onRetry(msg.id)"
+        />
+
+        <!-- Typing indicator -->
+        <TypingIndicator :visible="isLoading" />
+      </view>
+
+      <!-- Bottom spacer for comfortable scrolling -->
+      <view class="message-list__spacer"></view>
+    </scroll-view>
+
+    <!-- Scroll-to-bottom FAB -->
+    <view
+      v-if="showScrollFab"
+      class="message-list__fab"
+      @tap="scrollToLatest"
+    >
+      <text class="message-list__fab-icon">↓</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import type { Message } from '@/types/index'
+import MessageBubble from './MessageBubble.uvue'
+import TypingIndicator from './TypingIndicator.uvue'
+
+const props = defineProps<{
+  messages: Message[]
+  isLoading: boolean
+  emptyTitle: string
+  emptySubtitle: string
+}>()
+
+const emit = defineEmits<{
+  retry: [messageId: string]
+}>()
+
+// Auto-scroll: increment this to scroll to bottom
+const scrollToBottom = ref(0)
+const showScrollFab = ref(false)
+
+// Watch for new messages to auto-scroll
+watch(
+  () => props.messages.length,
+  () => {
+    // Trigger scroll to bottom on new message
+    nextTick(() => {
+      scrollToBottom.value = Date.now()
+    })
+  }
+)
+
+// Watch for isLoading to auto-scroll when typing starts
+watch(
+  () => props.isLoading,
+  (loading: boolean) => {
+    if (loading) {
+      nextTick(() => {
+        scrollToBottom.value = Date.now()
+      })
+    }
+  }
+)
+
+function scrollToLatest(): void {
+  scrollToBottom.value = Date.now()
+  showScrollFab.value = false
+}
+
+function onRetry(messageId: string): void {
+  emit('retry', messageId)
+}
+</script>
+
+<style scoped>
+.message-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Empty state */
+.message-list__empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 64rpx;
+}
+
+.message-list__empty-icon {
+  font-size: 80rpx;
+  margin-bottom: 24rpx;
+  opacity: 0.6;
+}
+
+.message-list__empty-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 12rpx;
+}
+
+.message-list__empty-subtitle {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.3);
+  text-align: center;
+  line-height: 1.5;
+}
+
+/* Scroll area */
+.message-list__scroll {
+  flex: 1;
+}
+
+.message-list__inner {
+  padding-top: 16rpx;
+  padding-bottom: 8rpx;
+}
+
+.message-list__spacer {
+  height: 32rpx;
+}
+
+/* Scroll-to-bottom FAB */
+.message-list__fab {
+  position: absolute;
+  bottom: 16rpx;
+  right: 24rpx;
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  background: rgba(108, 92, 231, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.4);
+  z-index: 10;
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.message-list__fab-icon {
+  font-size: 36rpx;
+  color: #ffffff;
+  font-weight: 600;
+}
+</style>