Add message pending status for sent messages

- Optimistically display sent messages with `addPendingMessage`
- Enable `labeled-response` capability for tracking message sent status
- Add `addSystemMessage` for local-only messages, such as `/help` responses
- Fix reactivity for the active channel and grouped messages
- Updated tsconfig to target ES2024 since we can support polyfills as needed

Author: MarkH817

src/app/types/modules/irc-framework/irc-framework.d.ts

@@ -62,11 +62,11 @@ declare module 'irc-framework' {
 
     changeNick(nick: string): void;
 
-    sendMessage(commandName: string, target: string, message: string): void;
+    sendMessage(commandName: string, target: string, message: string, tags?: Tags): void;
 
-    say(target: string, message: string): void;
-
-    notice(target: string, message: string): void;
+    say(target: string, message: string, tags?: Tags): void;
+    notice(target: string, message: string, tags?: Tags): void;
+    tagmsg(target: string, tags?: Tags): void;
 
     join(channel: string, key?: string): void;
 
@@ -90,9 +90,9 @@ declare module 'irc-framework' {
 
     setTopic(channel: string, newTopic: string): void;
 
-    ctcpRequest(target: string, type: string /* , ...params: Array<any> */): void;
+    ctcpRequest(target: string, type: string, ...params: string[]): void;
 
-    ctcpResponse(target: string, type: string /* , params: Array<any> */): void;
+    ctcpResponse(target: string, type: string, ...params: string[]): void;
 
     action(target: string, message: string): string[];
 
@@ -265,9 +265,15 @@ declare module 'irc-framework' {
   }
 
   export type Tags = Partial<{
+    /** See https://ircv3.net/specs/extensions/account-tag */
     account: string;
+    /** See https://ircv3.net/specs/extensions/batch */
     batch: string;
+    /** See https://ircv3.net/specs/extensions/labeled-response */
+    label: string;
+    /** See https://ircv3.net/specs/extensions/message-ids */
     msgid: string;
+    /** See https://ircv3.net/specs/extensions/server-time */
     time: string;
     [tagName: string]: string;
   }>;

src/components/ChatApp.vue

@@ -1,33 +1,39 @@
 <template>
   <DraggableWindow>
+    <template v-slot:header>
+      <span>{{ channel.activeChannelName }}</span>
+    </template>
     <template v-slot:main>
       <OnlineUsers />
-      <Transition name="fade"> </Transition>
+      <ChannelMessages />
+      <ChatInput />
     </template>
   </DraggableWindow>
 </template>
 
 <script setup lang="ts">
-  import DraggableWindow from './DraggableWindow.vue';
-  import OnlineUsers from './user/OnlineUsers.vue';
-  import { useChannelStore, useIrcStore } from '#stores';
   import { AUTO_JOIN_CHANNELS } from '#constants';
+  import { useChannelStore, useIrcStore } from '#stores';
   import { ref, watch } from 'vue';
+  import ChannelMessages from './channel/ChannelMessages.vue';
+  import DraggableWindow from './layout/DraggableWindow.vue';
+  import OnlineUsers from './user/OnlineUsers.vue';
+  import ChatInput from './chat/ChatInput.vue';
   // TODO: Re-implement resizing tracking
 
   const irc = useIrcStore();
-  const channels = useChannelStore();
+  const channel = useChannelStore();
   const joined = ref(false);
 
   watch([joined, () => irc.connectionStatus], ([hasJoined, connectionStatus]) => {
     if (hasJoined || connectionStatus !== 'connected') {
       return;
     }
 
-    for (const channel of AUTO_JOIN_CHANNELS) {
-      channels.joinChannel(channel);
+    for (const channelName of AUTO_JOIN_CHANNELS) {
+      channel.joinChannel(channelName);
     }
-    channels.changeActiveChannel(AUTO_JOIN_CHANNELS[0]);
+    channel.changeActiveChannel(AUTO_JOIN_CHANNELS[0]);
   });
 </script>
 

src/components/channel/ChannelMessages.vue

@@ -5,12 +5,10 @@
 <script setup lang="ts">
   import { useMessageGroups } from '#composables/useMessageGroups.ts';
   import { useChannelStore } from '#stores';
-  import { computed } from 'vue';
   import MessageGroup from './MessageGroup.vue';
 
-  const { activeChannel } = useChannelStore();
-  const messages = computed(() => activeChannel.messages);
-  const { messageGroups } = useMessageGroups(messages);
+  const channel = useChannelStore();
+  const { messageGroups } = useMessageGroups(() => channel.activeMessages);
 </script>
 
 <style scoped></style>

src/components/chat/ChatInput.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="chat-input-container p3 border-top bg-light">
+    <BForm @submit.prevent="onSubmit">
+      <BInputGroup size="lg">
+        <BFormInput
+          v-model="inputBuffer"
+          autofocus
+          autocomplete="off"
+          :placeholder="placeholder"
+          aria-label="Chat message"
+        />
+        <BButton
+          type="submit"
+          variant="primary"
+          class="px-4"
+          :disabled="!inputBuffer.trim()"
+        ></BButton>
+      </BInputGroup>
+    </BForm>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useChannelStore, useChatStore } from '#stores';
+  import { BButton, BForm, BFormInput, BInputGroup } from 'bootstrap-vue-next';
+  import { computed, ref } from 'vue';
+
+  const channel = useChannelStore();
+  const chat = useChatStore();
+  const inputBuffer = ref('');
+  const placeholder = computed(() => `Message ${channel.activeChannelName}`);
+
+  function onSubmit() {
+    const text = inputBuffer.value.trim();
+    if (!text) {
+      return;
+    }
+
+    const isCommand = text.startsWith('/');
+
+    if (isCommand) {
+      // TODO: Add command handler
+    } else {
+      chat.say(text);
+    }
+
+    inputBuffer.value = '';
+  }
+</script>
+
+<style scoped>
+  .chat-input-container {
+    min-height: 5em;
+  }
+</style>

src/components/DraggableWindow.vue src/components/layout/DraggableWindow.vuesrc/components/DraggableWindow.vue renamed to src/components/layout/DraggableWindow.vue

@@ -1,8 +1,7 @@
 import type { Message } from '#models';
-import { parseNick } from '#utils';
 import { computed, toValue, type MaybeRefOrGetter, type DeepReadonly } from 'vue';
 
-export interface MessageGroup extends Pick<Message, 'nick' | 'type'> {
+export interface MessageGroup extends Pick<Message, 'nick' | 'username' | 'type'> {
   id: string;
   messages: Message[];
 }
@@ -21,13 +20,14 @@ export function useMessageGroups(messages: MaybeRefOrGetter<Message[] | DeepRead
         !prevGroup ||
         message.type !== 'privmsg' ||
         prevGroup.type !== 'privmsg' ||
-        parseNick(prevGroup.nick) !== parseNick(message.nick)
+        prevGroup.username !== message.username
       ) {
         groups.push({
-          id: `group-${message.time}-${message.nick}`,
+          id: `group-${message.username}-${message.time}`,
           type: message.type,
           messages: [message],
           nick: message.nick,
+          username: message.username,
         });
       } else {
         prevGroup.messages.push(message);

src/composables/useMessageGroups.ts

@@ -1,14 +1,19 @@
 import type { Tags } from 'irc-framework';
 
 export type MessageType = 'privmsg' | 'action' | 'notice' | 'system';
+export type MessageStatus = 'pending' | 'sent' | 'error';
 
 export interface Message {
   id: string;
   time: number;
   starred: boolean;
   message: string;
   target: string;
+  username: string;
   nick: string;
   type: MessageType;
   tags: Tags;
+
+  status?: MessageStatus;
+  pendingId?: string;
 }