adding 'session/:sessionId/send-message' endpoint that allows for message sending, there exists an issue where the user-sent message doesn't appear in DB or show in the UI chat but the message sends successfully

Author: NaderRNA

webapp/src/animations/SignInAnimationTransparent.json

@@ -1,7 +1,7 @@
 'use strict';
 
 import { dynamicResponse } from '@dr';
-import { activeSessionRooms } from '@socketio';
+import { activeSessionRooms, io } from '@socketio';
 import {
 	getAgentById,
 	getAgentNameMap,
@@ -13,7 +13,8 @@ import { getAppById, unsafeGetAppById } from 'db/app';
 import {
 	getChatMessageAfterId,
 	getChatMessagesBySession,
-	unsafeGetChatMessagesBySession
+	unsafeGetChatMessagesBySession,
+	upsertOrUpdateChatMessage
 } from 'db/chat';
 import { getCrewById, getCrewsByTeam, unsafeGetCrewById } from 'db/crew';
 import {
@@ -33,6 +34,7 @@ import toObjectId from 'misc/toobjectid';
 import { ObjectId } from 'mongodb';
 import { sessionTaskQueue } from 'queue/bull';
 import { client } from 'redis/redis';
+import { v4 as uuidv4 } from 'uuid';
 const log = debug('webapp:controllers:session');
 import { App, AppType } from 'struct/app';
 import { SessionStatus } from 'struct/session';
@@ -536,6 +538,84 @@ export async function editSessionApi(req, res, next) {
 	});
 }
 
+export async function sendMessage(req, res, next) {
+	try {
+		const { sessionId } = req.params;
+		const { messageText } = req.body;
+		log(
+			`Sending message with found req.params = ${req.params.sessionId}\nand req.body.messageText = ${req.body.messageText}\nand req.body.sessionId = ${req.body.sessionId}`
+		);
+
+		let validationError = chainValidations(
+			req.body,
+			[
+				{
+					field: 'messageText',
+					validation: { notEmpty: true, ofType: 'string' }
+				}
+			],
+			{
+				messageText: 'Message Text'
+			}
+		);
+
+		if (validationError) {
+			return dynamicResponse(req, res, 400, { error: validationError });
+		}
+
+		const session = await unsafeGetSessionById(sessionId);
+		if (!session) {
+			return dynamicResponse(req, res, 400, { error: 'Session not found' });
+		}
+
+		const activeRoomSessionId = `_${sessionId}`;
+
+		if (!activeSessionRooms.includes(activeRoomSessionId)) {
+			activeSessionRooms.forEach(v => {
+				log(`roomId: ${v}`);
+			});
+			return dynamicResponse(req, res, 400, {
+				error: 'Attempting to send message to inactive session.'
+			});
+		}
+
+		const messagePayload = {
+			room: activeRoomSessionId,
+			message: messageText,
+			authorName: res.locals?.account?.name || 'External API',
+			event: 'message'
+		};
+
+		console.log('Message payload:', JSON.stringify(messagePayload, null, 2));
+
+		io.to(activeRoomSessionId).emit('message', messagePayload);
+
+		// // Persist the message in the database
+		// await upsertOrUpdateChatMessage(sessionId, {
+		// 	orgId: session.orgId,
+		// 	teamId: session.teamId,
+		// 	sessionId: session._id,
+		// 	authorId: res.locals?.account?._id || null, // API-triggered, no user ID
+		// 	authorName: res.locals?.account?.name || "External API",
+		// 	ts: Date.now(),
+		// 	message: messagePayload.message
+		// }, {
+		// 	ts: Date.now(),
+		// 	chunk: messagePayload.message,
+		// 	tokens: 0 // Update if tokenization is relevant
+		// });
+
+		return dynamicResponse(req, res, 200, {
+			message: 'Message sent successfully'
+		});
+	} catch (error) {
+		console.error(error);
+		return dynamicResponse(req, res, 500, {
+			error: 'Internal server error'
+		});
+	}
+}
+
 export async function startSession(req, res, next) {
 	const session = await unsafeGetSessionById(req.body.sessionId);
 	const canAccess = await checkCanAccessApp(session?.appId?.toString(), false, res.locals.account);

webapp/src/animations/dataSyncLoaderAnimation.json

@@ -298,26 +298,44 @@ div.bg-gray-200.border.rounded-sm.flex.space-x-1.pl-1 {
 }
 
 .gradient-animation {
-    background: linear-gradient(226deg, #612d89, #4f46e5);
-    background-size: 400% 400%;
+	background: linear-gradient(226deg, #612d89, #4f46e5);
+	background-size: 400% 400%;
 
-    -webkit-animation: left-frame-gradient 8s ease infinite;
-    -moz-animation: left-frame-gradient 8s ease infinite;
-    animation: left-frame-gradient 8s ease infinite;
+	-webkit-animation: left-frame-gradient 8s ease infinite;
+	-moz-animation: left-frame-gradient 8s ease infinite;
+	animation: left-frame-gradient 8s ease infinite;
 }
 
 @-webkit-keyframes left-frame-gradient {
-    0%{background-position:94% 0%}
-    50%{background-position:7% 100%}
-    100%{background-position:94% 0%}
+	0% {
+		background-position: 94% 0%;
+	}
+	50% {
+		background-position: 7% 100%;
+	}
+	100% {
+		background-position: 94% 0%;
+	}
 }
 @-moz-keyframes left-frame-gradient {
-    0%{background-position:94% 0%}
-    50%{background-position:7% 100%}
-    100%{background-position:94% 0%}
+	0% {
+		background-position: 94% 0%;
+	}
+	50% {
+		background-position: 7% 100%;
+	}
+	100% {
+		background-position: 94% 0%;
+	}
 }
 @keyframes left-frame-gradient {
-    0%{background-position:94% 0%}
-    50%{background-position:7% 100%}
-    100%{background-position:94% 0%}
-}
+	0% {
+		background-position: 94% 0%;
+	}
+	50% {
+		background-position: 7% 100%;
+	}
+	100% {
+		background-position: 94% 0%;
+	}
+}

webapp/src/controllers/session.ts

@@ -1,9 +1,11 @@
 import * as API from '@api';
 import { CubeIcon, EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
+import animationData from 'animations/SignInAnimationTransparent.json';
 import ButtonSpinner from 'components/ButtonSpinner';
 import ErrorAlert from 'components/ErrorAlert';
 import InputField from 'components/form/InputField';
 import InfoAlert from 'components/InfoAlert';
+import LeftFrame from 'components/onboarding/LeftFrame';
 import SuccessAlert from 'components/SuccessAlert';
 import { useSocketContext } from 'context/socket';
 import { useThemeContext } from 'context/themecontext';
@@ -15,8 +17,6 @@ import { useRouter } from 'next/router';
 import { usePostHog } from 'posthog-js/react';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import animationData from 'animations/SignInAnimationTransparent.json';
-import LeftFrame from 'components/onboarding/LeftFrame';
 
 export interface LoginFormValues {
 	name: string;

webapp/src/pages/globals.css

@@ -379,6 +379,12 @@ export default function router(server, app) {
 	teamRouter.post('/forms/session/:sessionId([a-f0-9]{24})/edit', sessionController.editSessionApi);
 	teamRouter.post('/forms/session/:sessionId([a-f0-9]{24})/start', sessionController.startSession);
 
+	//messages
+	teamRouter.post(
+		'/session/:sessionId([a-f0-9]{24})/send-message',
+		sessionController.sendMessage
+	);
+
 	//agents
 	teamRouter.get('/agents', agentController.agentsPage.bind(null, app));
 	teamRouter.get('/agents.json', agentController.agentsJson);

webapp/src/pages/login.tsx

@@ -149,6 +149,8 @@ export function initSocket(rawHttpServer) {
 			const socketRequest = socket.request as any;
 			data.event = data.event || 'message';
 
+			log('socket.id "%s" event "message" args: %O', socket.id, data);
+
 			if (typeof data.message !== 'object') {
 				data.message = {
 					type: 'text',