Chat

web/src/components/chat/chat-box.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import ChatMessage from './chat-message.vue'
+import SyncButton from '../button/sync-button.vue'
+import { ref, watch, nextTick } from 'vue'
+import type { ChatMessage as TChatMessage } from '@sync/wire'
+
+const props = defineProps<{
+    msgs: TChatMessage[]
+    usernameMap: Map<string, string>
+}>()
+
+const chatBox = ref<HTMLElement | null>(null)
+const showBtn = ref(false)
+let isScrolling = false
+
+watch(props.msgs, async () => {
+    if (showBtn.value) return
+    await nextTick()
+    scrollDown()
+})
+
+function onScroll(e: Event) {
+    if (isScrolling == true) return
+    const target = e.target as HTMLElement
+    if (target.scrollHeight - target.scrollTop - target.clientHeight > 10) {
+        showBtn.value = true
+    } else showBtn.value = false
+}
+function scrollDown() {
+    if (chatBox.value) {
+        isScrolling = true
+        showBtn.value = false
+        chatBox.value.scrollTo({
+            top: chatBox.value.scrollHeight,
+            behavior: 'smooth',
+        })
+        setTimeout(() => {
+            isScrolling = false
+        }, 500)
+    }
+}
+
+function resolveUsername(msg: TChatMessage) {
+    if (msg.type === 'system') return 'System'
+    return props.usernameMap.get(msg.userId) ?? msg.userId.substring(0, 5)
+}
+</script>
+
+<template>
+    <div class="chat-wrapper" ref="chatBox" @scroll="onScroll">
+        <div class="chat">
+            <ChatMessage
+                v-for="msg in props.msgs"
+                :key="msg.timestamp"
+                :username="resolveUsername(msg)"
+                :timestamp="new Date(msg.timestamp)"
+                :text="msg.text"
+            />
+        </div>
+        <SyncButton
+            v-if="showBtn"
+            @click="scrollDown"
+            class="scroll-down-btn shadow-medium"
+            icon="arrow_down"
+            color="primary"
+            bstyle="small"
+        />
+    </div>
+</template>
+
+<style scoped>
+.chat-wrapper {
+    position: relative;
+    flex: 2 0;
+    overflow: hidden scroll;
+}
+
+.scroll-down-btn {
+    position: sticky;
+    bottom: 20px;
+    float: right;
+    right: 10px;
+
+    & :deep(svg) {
+        fill: var(--s-background) !important;
+    }
+}
+</style>

web/src/components/chat/chat-message.vue

@@ -28,7 +28,7 @@ const props = defineProps<{
             <div v-if="props.text" class="c-msg-content text">
                 <span>{{ props.text }}</span>
             </div>
-            <div v-else class="c-msg-content recommendation"></div>
+            <div v-if="props.recommendation" class="c-msg-content recommendation"></div>
         </div>
     </div>
 </template>
@@ -53,6 +53,7 @@ const props = defineProps<{
 .c-msg-body {
     display: flex;
     flex-direction: column;
+    width: 100%;
     gap: 4px;
 }
 
@@ -63,7 +64,7 @@ const props = defineProps<{
 .name-time-row {
     display: flex;
     flex-direction: row;
-    align-items: flex-end;
+    align-items: baseline;
     justify-content: space-between;
 }
 

web/src/views/RoomView.vue

@@ -7,7 +7,7 @@ import SyncIcon from '../components/icon/sync-icon.vue'
 import UserRoom from '../components/user/user-room.vue'
 import SyncButton from '../components/button/sync-button.vue'
 import ChatTextField from '../components/chat/chat-text-field.vue'
-import ChatMessage from '../components/chat/chat-message.vue'
+import ChatBox from '../components/chat/chat-box.vue'
 
 const sessionStore = useSessionStore()
 const roomStore = useRoomStore()
@@ -118,17 +118,9 @@ RoomLoading: {{ roomStore.roomLoading }} ({{ roomStore.roomLoadingProgress }})</
 
                 <div class="playlist"></div>
 
-                <div class="chat">
-                    <ChatMessage
-                        v-for="i in 100"
-                        :key="i"
-                        :username="'aaa'"
-                        :timestamp="new Date()"
-                        :text="'Hello world! This is a test message. AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'"
-                    />
-                </div>
+                <ChatBox :msgs="roomStore.chat" :username-map="roomStore.uidUsernameCache" />
 
-                <ChatTextField />
+                <ChatTextField @send="roomStore.sendChat" />
             </div>
         </div>
     </main>
@@ -278,9 +270,4 @@ main {
 .playlist {
     flex: 1 0;
 }
-
-.chat {
-    flex: 2 0;
-    overflow: hidden scroll;
-}
 </style>