[NEB-246] Nebula: handle aborted session with no messages

Author: MananTank

apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx

@@ -9,7 +9,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
-import { ArrowRightIcon } from "lucide-react";
+import { ArrowRightIcon, MessageSquareXIcon } from "lucide-react";
 import Link from "next/link";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
@@ -263,8 +263,11 @@ export function ChatPageContent(props: {
   const showEmptyState =
     !userHasSubmittedMessage &&
     messages.length === 0 &&
+    !props.session &&
     !props.initialParams?.q;
 
+  const sessionWithNoMessages = props.session && messages.length === 0;
+
   const connectedWalletsMeta: WalletMeta[] = connectedWallets.map((x) => ({
     address: x.getAccount()?.address || "",
     walletId: x.id,
@@ -318,17 +321,35 @@ export function ChatPageContent(props: {
             </div>
           ) : (
             <div className="fade-in-0 relative z-[0] flex max-h-full flex-1 animate-in flex-col overflow-hidden">
-              <Chats
-                messages={messages}
-                isChatStreaming={isChatStreaming}
-                authToken={props.authToken}
-                sessionId={sessionId}
-                className="min-w-0 pt-6 pb-32"
-                client={client}
-                enableAutoScroll={enableAutoScroll}
-                setEnableAutoScroll={setEnableAutoScroll}
-                sendMessage={handleSendMessage}
-              />
+              {sessionWithNoMessages && (
+                <div className="container flex max-h-full max-w-[800px] flex-1 flex-col justify-center py-8">
+                  <div className="flex flex-col items-center justify-center p-4">
+                    <div className="mb-5 rounded-full border bg-card p-3">
+                      <MessageSquareXIcon className="size-6 text-muted-foreground" />
+                    </div>
+                    <p className="mb-1 text-center text-foreground">
+                      No messages found
+                    </p>
+                    <p className="text-balance text-center text-muted-foreground text-sm">
+                      This session was aborted before receiving any messages
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {messages.length > 0 && (
+                <Chats
+                  messages={messages}
+                  isChatStreaming={isChatStreaming}
+                  authToken={props.authToken}
+                  sessionId={sessionId}
+                  className="min-w-0 pt-6 pb-32"
+                  client={client}
+                  enableAutoScroll={enableAutoScroll}
+                  setEnableAutoScroll={setEnableAutoScroll}
+                  sendMessage={handleSendMessage}
+                />
+              )}
 
               <div className="container max-w-[800px]">
                 <ChatBar

apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx

@@ -87,7 +87,7 @@ export function ChatSidebar(props: {
               return (
                 <ChatSidebarLink
                   sessionId={session.id}
-                  title={session.title || session.id}
+                  title={session.title || "Untitled Chat"}
                   key={session.id}
                   authToken={props.authToken}
                 />

apps/dashboard/src/app/nebula-app/(app)/hooks/useSessionsWithLocalOverrides.ts

@@ -7,7 +7,19 @@ export function useSessionsWithLocalOverrides(
 ) {
   const newAddedSessions = useStore(newSessionsStore);
   const deletedSessions = useStore(deletedSessionsStore);
-  return [...newAddedSessions, ..._sessions].filter((s) => {
+  const mergedSessions = [..._sessions];
+
+  for (const session of newAddedSessions) {
+    // if adding a new session that has same id as existing session, update the existing session
+    const index = mergedSessions.findIndex((s) => s.id === session.id);
+    if (index !== -1) {
+      mergedSessions[index] = session;
+    } else {
+      mergedSessions.push(session);
+    }
+  }
+
+  return mergedSessions.filter((s) => {
     return !deletedSessions.some((d) => d === s.id);
   });
 }