From 3e63ff8ae0e159ac330d1f1e15a2e3508aee63a5 Mon Sep 17 00:00:00 2001 From: obrucheoghene Date: Tue, 18 Nov 2025 12:57:31 +0100 Subject: [PATCH 1/6] feat: handle send chat to signaling service --- src/components/room/chat/chat-container.tsx | 33 +++++++++++++++++---- src/components/room/chat/chat.tsx | 2 +- src/hooks/use-room.ts | 4 +++ src/lib/schema.ts | 17 +++++++++++ 4 files changed, 50 insertions(+), 6 deletions(-) diff --git a/src/components/room/chat/chat-container.tsx b/src/components/room/chat/chat-container.tsx index 8c36d64..653aabe 100644 --- a/src/components/room/chat/chat-container.tsx +++ b/src/components/room/chat/chat-container.tsx @@ -1,12 +1,33 @@ +import { ChevronRightIcon, SendHorizonal, Smile, Users } from 'lucide-react'; +import { useState } 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 } from '@/store/conf/hooks'; - -import { ChevronRightIcon, SendHorizonal, Smile, Users } from 'lucide-react'; +import { useModalChatOpen, usePeerMe } from '@/store/conf/hooks'; +import { Actions } from '@/types/actions'; const ChatContainer = () => { const chatOpen = useModalChatOpen(); + const { signalingService } = useSignaling(); + const peerMe = usePeerMe(); + const [message, setMessage] = useState(''); + + const handleSendChat = async () => { + if (!signalingService) return; + signalingService.sendMessage({ + action: Actions.SendChat, + args: { + id: uuidv4(), + text: message, + sender: peerMe, + createdAt: Date.now(), + }, + }); + console.log(message, 'sent'); + }; return (
{ className=" h-12 flex items-center gap-2 bg-gray-700/40 p-2 rounded-md " title="Coming soon" > - setMessage(event.target.value)} className=" flex-1 bg-transparent focus:outline-none border-none focus:border-none placeholder:text-gray-500 text-sm" placeholder="Send a message..." /> - +
diff --git a/src/components/room/chat/chat.tsx b/src/components/room/chat/chat.tsx index bc223ad..14e61bd 100644 --- a/src/components/room/chat/chat.tsx +++ b/src/components/room/chat/chat.tsx @@ -11,7 +11,7 @@ const Chat = () => { variant="ghost" size="icon" className="w-12 h-12 rounded-xl text-white relative - bg-gradient-to-br from-white/15 to-white/1 backdrop-blur-xl + bg-linear-to-br from-white/15 to-white/1 backdrop-blur-xl " > diff --git a/src/hooks/use-room.ts b/src/hooks/use-room.ts index a480d6a..4cb638f 100644 --- a/src/hooks/use-room.ts +++ b/src/hooks/use-room.ts @@ -125,6 +125,10 @@ export const useRoom = () => { const data = ValidationSchema.consumerStateData.parse(args); closeConsumer(data); }, + [Actions.SendChat]: async args => { + const data = ValidationSchema.sendChat.parse(args); + console.log(data); + }, }), [closeConsumer, createConsumer, pauseConsumer, peerActions, resumeConsumer] ); diff --git a/src/lib/schema.ts b/src/lib/schema.ts index 14bb675..7d4df60 100644 --- a/src/lib/schema.ts +++ b/src/lib/schema.ts @@ -3,6 +3,15 @@ import z from 'zod'; const producerSource = z.enum(['mic', 'camera', 'screen', 'screenAudio']); const mediaKind = z.enum(['audio', 'video']); +const peerDataSchema = z.object({ + id: z.string(), + name: z.string(), + userId: z.string().optional(), + email: z.string().optional(), + photo: z.string().optional(), + color: z.string().optional(), +}); + export const ValidationSchema = { peerData: z.object({ id: z.string(), @@ -31,4 +40,12 @@ export const ValidationSchema = { producerSource: producerSource, fromProducer: z.boolean().optional(), }), + + sendChat: z.object({ + id: z.string(), + text: z.string(), + sender: peerDataSchema, + receiver: peerDataSchema.optional(), + createdAt: z.number(), + }), }; From 9c1337854d163776f60f8c26c2f60cdaa1c86903 Mon Sep 17 00:00:00 2001 From: obrucheoghene Date: Tue, 18 Nov 2025 12:57:52 +0100 Subject: [PATCH 2/6] fix: update classname to remove warnings --- src/components/dynamic-bg.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dynamic-bg.tsx b/src/components/dynamic-bg.tsx index fdcff9c..09c7d2d 100644 --- a/src/components/dynamic-bg.tsx +++ b/src/components/dynamic-bg.tsx @@ -20,7 +20,7 @@ const DynamicBg = () => { const parallaxOffset = scrollY * 0.5; return ( -
+
Date: Wed, 19 Nov 2025 10:11:14 +0100 Subject: [PATCH 3/6] style: add wrapper of position relative in display --- src/components/room/display/index.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/room/display/index.tsx b/src/components/room/display/index.tsx index 88ebd41..c6fb12a 100644 --- a/src/components/room/display/index.tsx +++ b/src/components/room/display/index.tsx @@ -5,15 +5,17 @@ import ScreenView from './screen-view'; const Display = () => { return (
- {/* change padding to pt-10 */} - {/* screen sharing */} - - {/* peers grid */} - - {/* chat and attendees */} - +
+ {/* change padding to pt-10 */} + {/* screen sharing */} + + {/* peers grid */} + + {/* chat and attendees */} + +
); }; From 0cc4dfb73a512235e9f96e790de72d382bad14a1 Mon Sep 17 00:00:00 2001 From: obrucheoghene Date: Wed, 19 Nov 2025 10:11:50 +0100 Subject: [PATCH 4/6] style: make sidebar position absolute in sm and static in lg --- src/components/room/sidebar.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/room/sidebar.tsx b/src/components/room/sidebar.tsx index 1b1a297..afa613b 100644 --- a/src/components/room/sidebar.tsx +++ b/src/components/room/sidebar.tsx @@ -25,7 +25,9 @@ const Sidebar = () => { return (
From bddb9efd1280150d6413d913a5d5230f30eb71d6 Mon Sep 17 00:00:00 2001 From: obrucheoghene Date: Wed, 19 Nov 2025 10:30:40 +0100 Subject: [PATCH 5/6] style: make screen view responsive on mobile device --- src/components/room/display/index.tsx | 2 +- src/components/room/display/main-grid.tsx | 2 +- src/components/room/display/screen-view.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/room/display/index.tsx b/src/components/room/display/index.tsx index c6fb12a..0afabe3 100644 --- a/src/components/room/display/index.tsx +++ b/src/components/room/display/index.tsx @@ -7,7 +7,7 @@ const Display = () => {
-
+
{/* change padding to pt-10 */} {/* screen sharing */} diff --git a/src/components/room/display/main-grid.tsx b/src/components/room/display/main-grid.tsx index 70e5a23..0f1f0cf 100644 --- a/src/components/room/display/main-grid.tsx +++ b/src/components/room/display/main-grid.tsx @@ -88,7 +88,7 @@ const MainGrid = () => {
diff --git a/src/components/room/display/screen-view.tsx b/src/components/room/display/screen-view.tsx index 4219315..4c8c0d7 100644 --- a/src/components/room/display/screen-view.tsx +++ b/src/components/room/display/screen-view.tsx @@ -48,7 +48,7 @@ const ScreenView = () => { return (
From 44376e9f7f8c7c7a0896c4a0565ba4f65dffeb52 Mon Sep 17 00:00:00 2001 From: obrucheoghene Date: Wed, 19 Nov 2025 10:37:01 +0100 Subject: [PATCH 6/6] style: increase screen view size in lg screen --- src/components/room/display/main-grid.tsx | 2 +- src/components/room/display/screen-view.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/room/display/main-grid.tsx b/src/components/room/display/main-grid.tsx index 0f1f0cf..ca08506 100644 --- a/src/components/room/display/main-grid.tsx +++ b/src/components/room/display/main-grid.tsx @@ -89,7 +89,7 @@ const MainGrid = () => { ref={gridRef} className={cn( `w-full h-1/2 lg:h-full flex flex-wrap items-center justify-center content-center gap-3 py-2 overflow-hidden lg:min-w-[400px] xl:min-w-[450px] 2xl:min-w-[500px]`, - (screenOn || peerScreens.length) && 'xl:w-2/6 2xl:w-3/12' + (screenOn || peerScreens.length) && 'lg:w-1/3 xl:w-2/6 2xl:w-3/12' )} > {layout ? ( diff --git a/src/components/room/display/screen-view.tsx b/src/components/room/display/screen-view.tsx index 4c8c0d7..7f9db11 100644 --- a/src/components/room/display/screen-view.tsx +++ b/src/components/room/display/screen-view.tsx @@ -48,7 +48,7 @@ const ScreenView = () => { return (