Chathistory seeding and scroll back paging

packages/app/src/components/windows/WindowChat.vue

@@ -1,21 +1,65 @@
 <script setup lang="ts">
+import { MessageType } from "core-wasm"
 import type { WindowChat } from "../../lib/windows"
 import { useIrcStore } from "../../stores/irc"
-
-// TODO: if no chat is active, list available chats for a server. We know that
-// because channelId will be "__unspecified"
+import { ref } from "vue"
 
 const props = defineProps<WindowChat>()
 
+const editmsg = ref("")
+
 const irc = useIrcStore()
-const state = irc.getServerState(props.serverId)
+const messages = irc.getChannelMessages(props.serverId, "#orbit/testing")
+
+async function sendMessage() {
+  if (editmsg.value === "") {
+    return
+  }
+  const out = editmsg.value
+  editmsg.value = ""
+  await irc.serverChannel?.send_message(out)
+}
 </script>
 
 <template>
   <div>
     <pre>
       {{ props }}
     </pre>
-    <pre>{{ state }}</pre>
+    <button @click="irc.requestScrollback(props.serverId, '#orbit/testing')">Get more</button>
+    <div class="messages">
+      <div v-for="message in messages" :key="message.metadata.msgid">
+        <pre class="msg" v-if="message.metadata.message_type === MessageType.Privmsg">{{ message.metadata.user }}: {{ message.text?.content }}</pre>
+        <pre class="join" v-if="message.metadata.message_type === MessageType.Join">{{ message.metadata.user }} joined</pre>
+        <pre class="part" v-if="message.metadata.message_type === MessageType.Part">{{ message.metadata.user }} parted</pre>
+        <pre class="quit" v-if="message.metadata.message_type === MessageType.Quit">{{ message.metadata.user }} quit</pre>
+      </div>
+    </div>
+    <form @submit.prevent="sendMessage">
+      <input v-model="editmsg" type="text" />
+    </form>
   </div>
 </template>
+<style scoped>
+button {
+  padding: 10px;
+  background-color: gray;
+}
+.messages {
+  max-height: 500px;
+  width: 800px;
+  overflow-y: scroll;
+
+  pre {
+    padding: 2px;
+  }
+
+  .join {
+    color: green;
+  }
+  .part,
+  .quit {
+    color: red;
+  }
+}
+</style>

packages/app/src/stores/irc.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia"
-import { Message, React, type IrcConnection, type Server, type ServerList } from "core-wasm"
-import { computed, ref, shallowRef } from "vue"
+import { ChannelMessage, Message, React, type IrcConnection, type Server, type ServerList, OrbitError, IrcChannel } from "core-wasm"
+import { computed, reactive, ref, shallowRef } from "vue"
 import { useUserStore } from "./user"
 import { useAppStateStore } from "./app-state"
 
@@ -22,7 +22,8 @@ export const useIrcStore = defineStore("irc", () => {
   const serverHandlers = shallowRef<Map<number, IrcConnection>>(new Map())
 
   // Holds references to messages per server. This should be actually per `server:channel`
-  const serverMessages = shallowRef<Map<number, Message[]>>(new Map())
+  const serverMessages = reactive<Map<number, Map<string, Message[]>>>(new Map())
+  const serverChannel = ref<IrcChannel>()
 
   let controller: ServerList = {} as ServerList
 
@@ -69,8 +70,21 @@ export const useIrcStore = defineStore("irc", () => {
     serverHandlers.value.set(state.id, handler)
 
     await handler.sign_in_anonymous(user.me.displayName, user.me.accountName, user.me.accountName)
+    serverChannel.value = await handler.join_channel("#orbit/testing")
     console.log("Signed in")
 
+    // Set initial channel messages
+    const channelState = (await serverChannel.value.state())!
+
+    const existingServer = serverMessages.get(state.id) ?? new Map<string, Message[]>()
+    const existingChannel = existingServer.get(channelState.metadata.name) ?? []
+
+    existingChannel.push(...channelState.messages)
+    existingChannel.sort((a, b) => a.metadata.server_time - b.metadata.server_time)
+
+    existingServer.set(channelState.metadata.name, existingChannel)
+    serverMessages.set(state.id, existingServer)
+
     registerServerEvents(state.id, handler)
 
     return {
@@ -82,10 +96,15 @@ export const useIrcStore = defineStore("irc", () => {
   function registerServerEvents(key: number, handler: IrcConnection) {
     // Runs whenever some dataset on the server object changes
     handler.on_data((event) => {
-      if (event instanceof Message) {
-        const existing = serverMessages.value.get(key) ?? []
-        existing.push(event)
-        serverMessages.value.set(key, existing)
+      if (event instanceof ChannelMessage) {
+        const existingServer = serverMessages.get(key) ?? new Map()
+        const existingChannel = existingServer.get(event.channel) ?? []
+
+        existingChannel.push(event.message)
+        existingChannel.sort((a: Message, b: Message) => a.metadata.server_time - b.metadata.server_time)
+
+        existingServer.set(event.channel, existingChannel)
+        serverMessages.set(key, existingServer)
       } else if (event instanceof React) {
         // TODO
         console.log("Received reaction", event)
@@ -104,10 +123,42 @@ export const useIrcStore = defineStore("irc", () => {
     })
   }
 
+  // TODO: these should be cached not to create a separate computed value on each call
   function getServerState(id: number) {
     return computed(() => serverState.value.get(id))
   }
 
+  function getChannelMessages(id: number, channel: string) {
+    return computed(() => serverMessages.get(id)?.get(channel))
+  }
+
+  // TODO: will be called automatically by a scroll listener to append new messages as user's nearing the top of the window
+  async function requestScrollback(id: number, channel: string) {
+    try {
+      const oldestId = serverMessages.get(id)?.get(channel)?.at(0)?.metadata.msgid
+      if (!oldestId) {
+        return
+      }
+      const history = await serverHandlers.value.get(id)?.history_before(channel, oldestId)
+
+      if (!history) {
+        return
+      }
+
+      const existingServer = serverMessages.get(id) ?? new Map<string, Message[]>()
+      const existingChannel = existingServer.get(history.channel) ?? []
+
+      existingChannel.push(...history.messages)
+      existingChannel.sort((a, b) => a.metadata.server_time - b.metadata.server_time)
+
+      existingServer.set(history.channel, existingChannel)
+      serverMessages.set(id, existingServer)
+    } catch (e: unknown) {
+      const error = e as OrbitError
+      console.error(JSON.parse(error.toString()))
+    }
+  }
+
   return {
     init,
     serverConnect,
@@ -116,5 +167,8 @@ export const useIrcStore = defineStore("irc", () => {
     serverData: serverState,
     serverControllers: serverHandlers,
     getServerState,
+    getChannelMessages,
+    requestScrollback,
+    serverChannel,
   }
 })

packages/core/core-shared/Cargo.toml

@@ -1,4 +1,5 @@
 [package]
+
 name = "core-shared"
 version = "0.1.0"
 edition = "2024"
@@ -8,19 +9,24 @@ anyhow = { version = "1.0.103", features = ["backtrace"] }
 base64 = "0.22.1"
 blake3 = "1.8.5"
 futures = "0.3.32"
-gloo-console = { version = "0.4.0", optional = true }
-gloo-net = { version = "0.7.0", optional = true }
-indexed_db_futures = { version = "0.6.4", features = ["serde"] }
 irc-proto = "1.1.0"
 ordermap = "1.2.0"
 thiserror = "2.0.18"
 time = { version = "0.3.53", features = ["parsing"] }
 tracing = "0.1.44"
+
 tsify = { version = "0.5.6", optional = true, features = ["js"] }
 wasm-bindgen = { version = "0.2.126", optional = true }
+web-time = { version = "1.1.0", optional = true }
+gloo-console = { version = "0.4.0", optional = true }
+gloo-net = { version = "0.7.0", optional = true }
+tokio = { version = "1.52.3", features = ["macros", "rt", "time", "sync"], optional = true }
+gloo-timers = { version = "0.4.0", features = ["futures"], optional = true }
+rand = { version = "0.10.2", default-features = false }
 
 [features]
-web = ["dep:gloo-net", "dep:wasm-bindgen", "dep:gloo-console", "dep:tsify"]
+web = ["dep:gloo-net", "dep:wasm-bindgen", "dep:gloo-console", "dep:tsify", "dep:web-time", "dep:gloo-timers"]
+default = ["dep:tokio"]
 
 [dev-dependencies]
 assert_matches = "1.5.0"