strawberries/frangipane-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reworked the chat layout and fixed a rate limiting mistake

Browse Source
This commit is contained in:
eiiko6
2025-12-28 20:29:13 +01:00
parent 3633b6594c
commit dd293c8e3d
11 changed files with 424 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/pages/ChatPage.vue
View File

@@ -1,138 +1,50 @@
<template>
<div class="chat-page">
<div class="messages-container" ref="messageListRef">
<MessageList :messages="messages" />
</div>
<div class="chat-layout">
<aside class="sidebar">
<RoomList />
</aside>
<div class="input-container">
<MessageInput @send="onSend" />
</div>
<main class="chat-window-container">
<ChatWindow :uuid="uuid" />
</main>
</div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref, nextTick } from "vue";
import { fetchMessages, sendMessage, getWsToken } from "../api/messages";
import type { Message } from "../types/api";
import MessageList from "../components/MessageList.vue";
import MessageInput from "../components/MessageInput.vue";
import { API_WS } from '../main.ts'
let socket: WebSocket | null = null;
const props = defineProps<{ uuid: string }>();
const messages = ref<Message[]>([]);
const messageListRef = ref<HTMLElement | null>(null);
async function load() {
messages.value = await fetchMessages(props.uuid);
}
async function onSend(content: string) {
await sendMessage(props.uuid, content);
// messages.value.push(msg);
await nextTick();
scrollToBottom();
}
function scrollToBottom() {
if (messageListRef.value) {
messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
}
}
onMounted(async () => {
await load();
await nextTick();
scrollToBottom();
// Fetch WebSocket token from the backend
const wsToken = await getWsToken(props.uuid);
// Connect to the WebSocket with the token
socket = new WebSocket(`${API_WS}/rooms/${props.uuid}?token=${wsToken}`);
socket.onmessage = (event) => {
const msg: Message = JSON.parse(event.data);
const exists = messages.value.some(
(m) =>
m.sent_at === msg.sent_at &&
m.sender === msg.sender &&
m.content === msg.content
);
if (!exists) {
messages.value.push(msg);
nextTick().then(scrollToBottom);
}
};
socket.onclose = () => {
console.warn("WebSocket closed");
};
});
onUnmounted(() => {
socket?.close();
});
defineProps<{ uuid: string }>();
import RoomList from "../components/RoomList.vue";
import ChatWindow from "../components/ChatWindow.vue";
</script>
<style scoped>
.chat-page {
.chat-layout {
display: flex;
flex-direction: column;
height: 95%;
width: 90%;
padding: 15px;
height: 80vh;
width: 100%;
max-width: 1200px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--panel);
overflow: hidden;
}
.messages-container {
.sidebar {
width: 300px;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
}
.chat-window-container {
flex: 1;
padding: 1rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
word-wrap: break-word;
min-width: 0;
}
.input-container {
padding: 0.5rem 1rem;
border-top: 1px solid var(--border);
background: var(--panel);
}
.chat-page {
display: flex;
flex-direction: column;
height: 95%;
width: 90%;
padding: 15px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--panel);
overflow: hidden;
}
.messages-container {
flex: 1;
padding: 1rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
word-wrap: break-word;
}
.input-container {
padding: 0.5rem 1rem;
border-top: 1px solid var(--border);
background: var(--panel);
@media (max-width: 720px) {
.sidebar {
display: none;
}
}
</style>

90
src/pages/RoomsPage.vue
View File

@@ -1,90 +0,0 @@
<template>
<div class="rooms-page">
<header class="rooms-header">
<h1>Your rooms</h1>
<button @click="showCreate = true">Create room</button>
</header>
<CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
<ul class="rooms-list">
<li v-for="room in rooms" :key="room.uuid" class="room-item">
<router-link class="room-link" :to="`/rooms/${room.uuid}`">
{{ room.name }} <span class="owner">{{ room.owner_name }}</span>
</router-link>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { initAuth } from '../stores/auth.ts'
import { fetchRooms } from '../api/rooms'
import type { Room } from '../types/api'
import CreateRoomModal from '../components/CreateRoomModal.vue'
const showCreate = ref(false)
const rooms = ref<Room[]>([])
onMounted(async () => {
const auth = await initAuth()
rooms.value = await fetchRooms(auth.uuid!)
})
</script>
<style scoped>
.rooms-page {
max-width: 720px;
margin: 0 auto;
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.rooms-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.rooms-header h1 {
font-size: 1.5rem;
font-weight: 600;
}
.rooms-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.room-item {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.room-link {
display: block;
padding: 0.75rem 1rem;
color: var(--text);
text-decoration: none;
}
.room-link:hover {
background: rgba(255, 255, 255, 0.03);
}
.owner {
font-weight: normal;
opacity: 0.7;
font-size: 0.85rem;
margin-left: 0.5rem;
}
</style>