implement chat feature

src/components/room/chat/chat-container.tsx

@@ -1,49 +1,81 @@
 import { ChevronRightIcon, SendHorizonal, Smile, Users } from 'lucide-react';
-import { useState } from 'react';
+import { useState, type KeyboardEvent } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { Assets } from '@/assets';
 import { Typography } from '@/components/typography';
 import { useSignaling } from '@/hooks/use-signaling';
 import { cn } from '@/lib/utils';
-import { useModalChatOpen, usePeerMe } from '@/store/conf/hooks';
+import {
+  useChatActions,
+  useChats,
+  useModalChatOpen,
+  usePeerMe,
+} from '@/store/conf/hooks';
 import { Actions } from '@/types/actions';
+import ChatItem from './chat-item';
+import type { Chat } from '@/types';
 
 const ChatContainer = () => {
   const chatOpen = useModalChatOpen();
   const { signalingService } = useSignaling();
   const peerMe = usePeerMe();
   const [message, setMessage] = useState('');
+  const chats = useChats();
+  const chatActions = useChatActions();
 
   const handleSendChat = async () => {
-    if (!signalingService) return;
+    if (!signalingService || !peerMe || !message.length) return;
+    if (!message.trim()) return;
+    const chatMessage: Chat = {
+      id: uuidv4(),
+      text: message,
+      sender: peerMe,
+      createdAt: Date.now(),
+    };
     signalingService.sendMessage({
       action: Actions.SendChat,
-      args: {
-        id: uuidv4(),
-        text: message,
-        sender: peerMe,
-        createdAt: Date.now(),
-      },
+      args: { ...chatMessage },
     });
-    console.log(message, 'sent');
+    chatActions.addChat(chatMessage);
+    setMessage('');
   };
+
+  const handleOnKeyPress = async (
+    event: KeyboardEvent<HTMLTextAreaElement>
+  ) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSendChat();
+    }
+  };
+
   return (
     <div
       className={cn(
-        'hidden flex-col gap-3 w-full flex-1 overflow-hidden transition-all duration-300 ease-in-out ',
+        'hidden flex-col gap-3 w-full h-full flex-1 overflow-hidden transition-all duration-300 ease-in-out ',
         chatOpen && 'flex'
       )}
     >
       {/* content */}
-      <div className=" flex-1 flex justify-center items-center flex-col  gap-2 ">
-        <img src={Assets.emptyChat} alt="Emtpy Chat" className=" w-3/5 " />
-        <Typography variant="h5">Start Conversation</Typography>
-        <Typography variant="paragraph" className=" text-center">
-          There are no messages here yet. Start a conversation by sending a
-          message.
-        </Typography>
-      </div>
+      {!chats.length ? (
+        <div className=" flex-1 flex justify-center items-center flex-col  gap-2 ">
+          <img src={Assets.emptyChat} alt="Emtpy Chat" className=" w-3/5 " />
+          <Typography variant="h5">Start Conversation</Typography>
+          <Typography variant="paragraph" className=" text-center">
+            There are no messages here yet. Start a conversation by sending a
+            message.
+          </Typography>
+        </div>
+      ) : (
+        <div className=" flex-1 overflow-y-auto">
+          <div className=" flex flex-col justify-end gap-y-3">
+            {chats.map(chat => (
+              <ChatItem key={chat.id} chat={chat} />
+            ))}
+          </div>
+        </div>
+      )}
       {/* input */}
       <div className=" flex flex-col gap-2">
         <div className=" flex items-center text-xs gap-1 cursor-pointer">
@@ -54,18 +86,16 @@ const ChatContainer = () => {
             <ChevronRightIcon size={12} />
           </div>
         </div>
-        <div
-          className=" h-12 flex items-center gap-2  bg-gray-700/40  p-2 rounded-md "
-          title="Coming soon"
-        >
+        <div className=" h-12 flex items-center gap-2  bg-gray-700/40  p-2 rounded-md ">
           <textarea
             value={message}
             onChange={event => setMessage(event.target.value)}
-            className=" flex-1 bg-transparent focus:outline-none border-none focus:border-none placeholder:text-gray-500 text-sm"
+            className=" flex-1 bg-transparent focus:outline-none border-none focus:border-none placeholder:text-gray-500 text-sm resize-none "
             placeholder="Send a message..."
+            onKeyDown={handleOnKeyPress}
           />
           <Smile />
-          <SendHorizonal onClick={handleSendChat} />
+          <SendHorizonal className="cursor-pointer " onClick={handleSendChat} />
         </div>
       </div>
     </div>

src/components/room/chat/chat-item.tsx

@@ -0,0 +1,29 @@
+import { Typography } from '@/components/typography';
+import { convertTimestampTo12HourTime } from '@/lib/utils';
+import type { Chat } from '@/types';
+
+const ChatItem = ({ chat }: { chat: Chat }) => {
+  return (
+    <div
+      key={chat.id}
+      className=" flex w-full flex-col bg-black/20 p-2 rounded-lg gap-y-1"
+    >
+      <div className="flex flex-row  items-center justify-between ">
+        <Typography variant="subtitle-2">{chat.sender.name}</Typography>
+        <Typography variant="overline" className=" text-white/40 font-light">
+          {convertTimestampTo12HourTime(chat.createdAt)}
+        </Typography>
+      </div>
+      <div>
+        <Typography
+          variant="body-2"
+          className=" font-light text-white/60 whitespace-pre-wrap"
+        >
+          {chat.text}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default ChatItem;

src/hooks/use-room.ts

@@ -1,4 +1,5 @@
 import {
+  useChatActions,
   usePeerActions,
   usePeerMe,
   useRoomAccess,
@@ -30,6 +31,7 @@ export const useRoom = () => {
   const peerMe = usePeerMe();
   const roomData = useRoomData();
   const roomAccess = useRoomAccess();
+  const chatActions = useChatActions();
 
   const joinVisitors = useCallback(async () => {
     if (!signalingService || !roomData) return;
@@ -128,9 +130,17 @@ export const useRoom = () => {
       [Actions.SendChat]: async args => {
         const data = ValidationSchema.sendChat.parse(args);
         console.log(data);
+        chatActions.addChat(data);
       },
     }),
-    [closeConsumer, createConsumer, pauseConsumer, peerActions, resumeConsumer]
+    [
+      closeConsumer,
+      createConsumer,
+      pauseConsumer,
+      peerActions,
+      resumeConsumer,
+      chatActions,
+    ]
   );
 
   return { joinVisitors, joinRoom, leaveRoom, actionHandlers };

src/lib/utils.ts

@@ -234,3 +234,16 @@ export const audioContraints = (deviceId: string) => ({
     noiseSuppression: { ideal: true },
   },
 });
+
+export const convertTimestampTo12HourTime = (timestamp: number) => {
+  const date = new Date(timestamp);
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  const period = hour >= 12 ? 'PM' : 'AM';
+
+  const formattedHour = hour % 12 === 0 ? 12 : hour % 12;
+  const paddedHours = formattedHour < 10 ? '0' + formattedHour : formattedHour;
+  const paddedMinute = minute < 10 ? '0' + minute : minute;
+
+  return paddedHours + ':' + paddedMinute + ' ' + period;
+};

src/store/conf/hooks.ts

@@ -157,3 +157,15 @@ export const useModalActions = () =>
     }),
     []
   );
+
+// ============================================================================
+// CHAT SELECTORS
+// ============================================================================
+export const useChats = () => useConfStore(state => state.chat.chats);
+export const useChatActions = () =>
+  useMemo(
+    () => ({
+      addChat: useConfStore.getState().chat.add,
+    }),
+    []
+  );

src/store/conf/slices/chat-slice.ts

@@ -1,9 +1,10 @@
 import type { StateCreator } from 'zustand';
 import type { ConfStoreState } from '../type';
+import type { Chat } from '@/types';
 
 export interface ChatSlice {
-  open: boolean;
-  toggle: () => void;
+  chats: Chat[];
+  add: (chat: Chat) => void;
 }
 
 export const createChatSlice: StateCreator<
@@ -12,10 +13,10 @@ export const createChatSlice: StateCreator<
   [['zustand/immer', ChatSlice]],
   ChatSlice
 > = set => ({
-  open: false,
-  toggle: () =>
+  chats: [],
+  add: chat =>
     set(state => {
-      state.chat.open = !state.chat.open;
+      state.chat.chats.push(chat);
       return state;
     }),
 });

src/types/actions.ts

@@ -45,7 +45,7 @@ export enum Actions {
   AddRole = 'add_role',
   RemoveRole = 'remove_role',
 
-  EndMeeting = 'end_meeting',
+  EndRoom = 'end_room',
 
   Heartbeat = 'heartbeat',
   HeartbeatAck = 'heartbeat_ack',