feat: Chat messaging system

Author: Pazdikan

src/addon/addons/base.ts src/addon/addons/base.tsxsrc/addon/addons/base.ts renamed to src/addon/addons/base.tsx

@@ -8,6 +8,9 @@ import { api, IAPI } from "@/api/api";
 import { Post } from "@/network/posts/post.types";
 import { useGame } from "@/core/store/game-store";
 import { getRandomMessage } from "@/network/posts/content";
+import { toast } from "@/hooks/use-toast";
+import { ToastAction, ToastActionElement } from "@/common/components/ui/toast";
+import React from "react";
 
 export const coreAddon: Addon = {
   id: "core",
@@ -29,6 +32,35 @@ export const coreAddon: Addon = {
 
       triggerRandomEvent();
     });
+
+    // Listen for chat messages globally and respond
+    api.event.on("chat/messageSent", (event: any) => {
+      if (!event.message.isPlayer) return;
+      // Respond after a short delay
+      setTimeout(() => {
+        const responseMsg = {
+          id: useGame.getState().gameState.world.time! + 1,
+          characterId: event.characterId,
+          content: "Hello, I received your message!",
+          timestamp: useGame.getState().gameState.world.time!,
+          isPlayer: false,
+        };
+        api.character.addChatMessage(event.characterId, responseMsg);
+      }, Math.floor(Math.random() * 3000) + 2000);
+    });
+
+    // Message received toast
+    api.event.on("chat/messageSent", (event) => {
+      if (event.message.isPlayer) return;
+
+      toast({
+        title: `Message from ${api.character.getFullName(
+          api.character.getCharacterById(event.characterId)!
+        )}`,
+        description: event.message.content,
+        action: <ToastAction altText="Try again">Try again</ToastAction>,
+      });
+    });
   },
   onDisabled: () => {
     // Usually, here you would remove all registered stuff from onEnabled,

src/api/api.ts

@@ -41,5 +41,11 @@ class API implements IAPI {
 
 export const api = new API();
 
+declare global {
+  interface Window {
+    api: API;
+  }
+}
+
 // Expose API to browser console
 window.api = api;

src/api/character.ts

@@ -2,6 +2,7 @@ import { Character, Gender } from "@/character/character.types";
 import { Company } from "@/company/company.types";
 import { useGame } from "@/core/store/game-store";
 import { api } from "./api";
+import { Message } from "@/core/core.types";
 
 export interface ICharacterAPI {
   first_names_male: string[];
@@ -157,4 +158,29 @@ export class CharacterAPI implements ICharacterAPI {
 
     return characters[randomIndex];
   }
+
+  addChatMessage(characterId: number, message: Message): void {
+    const { gameState, updateGameState } = useGame.getState();
+    const chats = { ...gameState.chats };
+    const isFirstMessage =
+      !chats[characterId] || chats[characterId].length === 0;
+    if (!chats[characterId]) chats[characterId] = [];
+    chats[characterId] = [...chats[characterId], message];
+    updateGameState({ chats });
+
+    // Trigger chat/messageSent event
+    api.event.trigger({
+      type: "chat/messageSent",
+      message,
+      characterId,
+    });
+
+    // Trigger chat/conversationStarted if first message
+    if (isFirstMessage) {
+      api.event.trigger({
+        type: "chat/conversationStarted",
+        characterId,
+      });
+    }
+  }
 }

src/common/components/root/chat.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
+import { random } from "lodash";
 import { Input } from "@/common/components/ui/input";
 import { Button } from "@/common/components/ui/button";
 import { ScrollArea } from "@/common/components/ui/scroll-area";
@@ -9,13 +10,7 @@ import { Send, Search } from "lucide-react";
 import { useGame } from "@/core/store/game-store";
 import { api } from "@/api/api";
 
-interface Message {
-  id: number;
-  characterId: number;
-  content: string;
-  timestamp: number;
-  isPlayer: boolean;
-}
+import { Message } from "@/core/core.types";
 
 export function Chat() {
   const { gameState } = useGame();
@@ -25,6 +20,7 @@ export function Chat() {
     )
   );
   const [filteredCharacters, setFilteredCharacters] = useState(characters);
+  const [isTyping, setIsTyping] = useState(false);
 
   useEffect(() => {
     setCharacters(
@@ -40,23 +36,7 @@ export function Chat() {
     return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
   };
 
-  // Initial conversations with each character
-  const initialConversations: Record<string, Message[]> = {};
-
-  characters.forEach((character) => {
-    initialConversations[character.id] = [
-      {
-        id: Date.now() + Math.random(),
-        characterId: character.id,
-        content: "Hi",
-        timestamp: useGame.getState().gameState.world?.time ?? 0,
-        isPlayer: false,
-      },
-    ];
-  });
-
   const [selectedCharacter, setSelectedCharacter] = useState(characters[0]);
-  const [conversations, setConversations] = useState(initialConversations);
   const [newMessage, setNewMessage] = useState("");
   const [searchQuery, setSearchQuery] = useState("");
   const scrollAreaRef = useRef<HTMLDivElement>(null);
@@ -78,32 +58,31 @@ export function Chat() {
       const scrollContainer = scrollAreaRef.current;
       scrollContainer.scrollTop = scrollContainer.scrollHeight;
     }
-  }, [conversations, selectedCharacter]);
+  }, [gameState.chats, selectedCharacter]);
 
   const handleSendMessage = () => {
     if (newMessage.trim() === "") return;
-
-    // Add player message
     const playerMsg: Message = {
-      id: Date.now(),
-      characterId: 0,
+      id: useGame.getState().gameState.world.time!,
+      characterId: selectedCharacter.id,
       content: newMessage,
-      timestamp: Date.now(),
+      timestamp: useGame.getState().gameState.world.time!,
       isPlayer: true,
     };
-
-    // Update the conversation with the selected character
-    setConversations((prev) => ({
-      ...prev,
-      [selectedCharacter.id]: [
-        ...(prev[selectedCharacter.id] || []),
-        playerMsg,
-      ],
-    }));
-
+    api.character.addChatMessage(selectedCharacter.id, playerMsg);
     setNewMessage("");
   };
 
+  // Typing animation when player sends a message
+  useEffect(() => {
+    if (!isTyping) return;
+    const typingDelay = random(2000, 5000);
+    const timeout = setTimeout(() => {
+      setIsTyping(false);
+    }, typingDelay);
+    return () => clearTimeout(timeout);
+  }, [isTyping]);
+
   console.log("Characters", characters);
   console.log("Filtered Characters", filteredCharacters);
 
@@ -183,7 +162,8 @@ export function Chat() {
 
           <ScrollArea className="flex-1 p-4" ref={scrollAreaRef}>
             <div className="space-y-6">
-              {conversations[selectedCharacter.id]?.map((message) => (
+              {/* Chat messages */}
+              {gameState.chats[selectedCharacter.id]?.map((message) => (
                 <div
                   key={message.id}
                   className={`flex gap-4 ${
@@ -204,7 +184,7 @@ export function Chat() {
                   >
                     <div
                       className={`px-4 py-2 rounded-lg ${
-                        message.isPlayer ? "bg-primary" : "bg-muted"
+                        message.isPlayer ? "bg-popover" : "bg-muted"
                       }`}
                     >
                       <p className="text-sm">{message.content}</p>
@@ -220,6 +200,28 @@ export function Chat() {
                   )}
                 </div>
               ))}
+              {/* Typing animation for character (left side only) */}
+              {isTyping && (
+                <div className="flex gap-4 justify-start">
+                  <Avatar>
+                    <AvatarFallback>
+                      {api.character.getInitial(selectedCharacter)}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex flex-col max-w-[70%] items-start">
+                    <div className="px-4 py-2 rounded-lg bg-muted flex items-center">
+                      <span className="animate-pulse flex gap-1">
+                        <span className="w-2 h-2 bg-gray-400 rounded-full inline-block"></span>
+                        <span className="w-2 h-2 bg-gray-400 rounded-full inline-block"></span>
+                        <span className="w-2 h-2 bg-gray-400 rounded-full inline-block"></span>
+                      </span>
+                    </div>
+                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 px-1">
+                      Typing...
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
           </ScrollArea>
 

src/common/components/ui/global-dropdown-menu.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/common/components/ui/dropdown-menu";
 import { Button } from "@/common/components/ui/button";
 import React from "react";
+import { EllipsisVertical } from "lucide-react";
 
 export type MenuOption = {
   id: string;
@@ -32,7 +33,7 @@ export const GlobalDropdownMenu: React.FC<GlobalDropdownMenuProps> = ({
   label = "Actions",
   trigger = (
     <Button variant="ghost" size="icon">
-      <span>⋮</span>
+      <EllipsisVertical size={24} />
     </Button>
   ),
 }) => {

src/core/core.types.ts

@@ -26,6 +26,7 @@ export interface GameState {
     };
   };
   world: World;
+  chats: Record<string, Message[]>;
 }
 
 export interface DebugState {
@@ -51,8 +52,17 @@ export const initialState: GameState = {
   world: {
     time: Date.now(),
   },
+  chats: {},
 };
 
+export interface Message {
+  id: number;
+  characterId: number;
+  content: string;
+  timestamp: number;
+  isPlayer: boolean;
+}
+
 export interface GameContextType {
   gameState: GameState;
   updateGameState: (update: Partial<GameState>) => void;

src/core/event/event-manager.ts

@@ -2,8 +2,16 @@ import { HireEvent } from "./events/hire";
 import { NetworkPostEvent } from "./events/network-post";
 import { NewGameEvent } from "./events/new-game";
 import { TickEvent } from "./events/tick";
+import { ChatMessageSentEvent } from "./events/chat-message-sent";
+import { ChatConversationStartedEvent } from "./events/chat-conversation-started";
 
-type GameEvent = TickEvent | NewGameEvent | HireEvent | NetworkPostEvent;
+type GameEvent =
+  | TickEvent
+  | NewGameEvent
+  | HireEvent
+  | NetworkPostEvent
+  | ChatMessageSentEvent
+  | ChatConversationStartedEvent;
 
 interface IEventManager {
   /**
@@ -30,6 +38,22 @@ export class EventManager implements IEventManager {
     >;
   } = {};
 
+  /**
+   * Removes a callback for a specific event type.
+   * @param eventType - The type of event to stop listening for.
+   * @param callback - The function to remove.
+   */
+  off<K extends GameEvent["type"]>(
+    eventType: K,
+    callback: (event: Extract<GameEvent, { type: K }>) => void
+  ) {
+    const arr = this.listeners[eventType];
+    if (!arr) return;
+    this.listeners[eventType] = arr.filter(
+      (cb) => cb !== callback
+    ) as typeof arr;
+  }
+
   on<K extends GameEvent["type"]>(
     eventType: K,
     callback: (event: Extract<GameEvent, { type: K }>) => void

src/core/event/events/chat-conversation-started.ts

@@ -0,0 +1,6 @@
+import { BaseEvent } from "../event";
+
+export interface ChatConversationStartedEvent extends BaseEvent {
+  type: "chat/conversationStarted";
+  characterId: number;
+}

src/core/event/events/chat-message-sent.ts

@@ -0,0 +1,8 @@
+import { BaseEvent } from "../event";
+import { Message } from "@/core/core.types";
+
+export interface ChatMessageSentEvent extends BaseEvent {
+  type: "chat/messageSent";
+  message: Message;
+  characterId: number;
+}

src/core/store/game-store.tsx

@@ -1,4 +1,4 @@
-import { GameState, initialState } from "@/core/core.types";
+import { GameState, initialState, Message } from "@/core/core.types";
 import { create } from "zustand";
 import seedrandom from "seedrandom";
 import { Generator } from "@/core/generation/generator";