Fix frontend errors

frontend/src/lib/components/chat/chat-message/ChatMessage.svelte

@@ -8,7 +8,6 @@
 	export let time: string;
 	export let body: string;
 	export let from: "USER" | "AGENT" | "SYSTEM";
-	export let typewriter = false;
 
 	let bubbleClass: string;
 
@@ -25,7 +24,7 @@
 		<div class="flex gap-4">
 			<div class="shrink-0">
 				{#if from === "USER"}
-					<Avatar alt="user avatar" src={member?.profilePictureUrl} />
+					<Avatar alt="user avatar" src={member?.profilePictureUrl ?? ''} />
 				{:else if from === "AGENT"}
 					<LetterAvatar>Ag</LetterAvatar>
 				{:else}

frontend/src/lib/components/chat/chat.svelte

@@ -11,6 +11,7 @@
 	import { afterNavigate, goto } from "$app/navigation";
 	import { agentStore } from "$lib/stores/agent";
 	import { authStore } from "$lib/stores/auth";
+	import { v4 as uuidv4 } from "uuid";
 
 	let chatElement: HTMLDivElement;
 	let chatInputElement: HTMLInputElement;
@@ -24,8 +25,6 @@
 
 	$: messages = $chatStore.messages;
 	$: conversationId = $conversationStore.selectedConversationId;
-
-
 	
 
 	let shouldRedirectToConversation = false;
@@ -45,7 +44,9 @@
 
 		const actualConversationId = conversationId ?? generateConversationId();
 
+		const timestamp = new Date().toISOString();
 		const payload = {
+			timestamp,
 			data: {
 				text: chatInputValue,
 				conversationId: actualConversationId,
@@ -55,10 +56,15 @@
 
 		chatElement.scrollTop = chatElement.scrollHeight;
 
-		addMessage(payload.data);
+		addMessage({
+			id: uuidv4(), // this is a fake id, the real id will be set by the server
+			...payload.data, 
+			createdAt: timestamp
+		});
 		
 		isWaitingForAnswer = true;
 		$conversationStore.selectedConversationId = actualConversationId;
+
 		con.emit('chat-message', payload);
 
 		chatInputValue = "";
@@ -103,7 +109,12 @@
 		}
 
 		isWaitingForAnswer = false;
-		addMessage(payload.data);
+		addMessage({
+				id: payload.data.messageId,
+				text: payload.data.text,
+				source: payload.data.source,
+				createdAt: payload.timestamp
+			});
 	}
 
 	const listenToStreamedChatMessageToken = (payload: any) => {
@@ -170,12 +181,11 @@
 		class="absolute top-0 bottom-[80px] left-0 right-0 overflow-y-scroll bg-background-primary dark:bg-background-secondary-dark">
 			{#if messages?.length > 0}
 				<div class="flex flex-col grow gap-4 py-4 px-3 items-start">
-					{#each messages as message, idx}
+					{#each messages as message(message.id)}
 						<div class="w-full">
 							<ChatMessage
-								typewriter={idx === messages.length - 1}
 								from={message.source}
-								time={dayjs(message.createdAt).format("hh:mm A")}
+								time={dayjs(message.createdAt).format("M/D/YYYY hh:mm A")}
 								body={message.text} />
 						</div>
 					{/each}

frontend/src/lib/components/common/navigation/left-nav/LeftNav.svelte

@@ -16,7 +16,7 @@
 			return;
 		}
 
-		await fetchConversations(agent.id, member.id);
+		await fetchConversations(agent.id);
 	});
 
 

frontend/src/lib/components/common/navigation/top-nav/TopNav.svelte

@@ -39,7 +39,7 @@
 			on:keydown={() => {}}
 			tabindex="0"
 			class="relative flex gap-4 border-l border-stroke-base dark:border-stroke-base-dark h-full items-center justify-center px-3 cursor-pointer">
-			<Avatar alt="user avatar" src={member.profilePictureUrl} />
+			<Avatar alt="user avatar" src={member.profilePictureUrl ?? ''} />
 			<div class="antialiased flex flex-col gap-0">
 				<span class="text-body-base text-sm">{member.email}</span>
 				<span class="text-body-subdued text-sm">{projectConfig.name}</span>

frontend/src/lib/usecases/conversations/fetch-conversations.ts

@@ -3,9 +3,8 @@ import { AgentChatConversationsService } from "$lib/services/gen-api";
 import { setConversationList } from "$lib/stores/conversation";
 
 
-export const fetchConversations = async (agentId: string, memberId: string): Promise<Conversation[]> => {
+export const fetchConversations = async (agentId: string): Promise<Conversation[]> => {
 	const conversations = await AgentChatConversationsService.getAllConversations({
-		memberId,
 		agentId
 	})
 

server/src/frontend-connection/frontend-connection.gateway.ts

@@ -185,9 +185,6 @@ export class FrontendConnectionGateway
         );
       }
 
-      // TODO: if the agent was never connected, assume it is the platform owner testing his app out.
-      // Send  a link to the documentation on how to connect an agent.
-
       await this.messagesService.createMessage({
         conversationId: conversation.id,
         source: 'SYSTEM',
@@ -200,6 +197,7 @@ export class FrontendConnectionGateway
           text,
           conversationId: conversation.id,
           source: 'SYSTEM',
+          messageId: message.id,
         },
         message: 'Agent is offline',
       };