From 2b87b7bb7539cca8498f904252bbb2937efa1d25 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 12 May 2025 20:54:35 +0000
Subject: [PATCH] [NEB-246] Nebula: handle aborted session with no messages
 (#7025)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `ChatSidebar`, `useSessionsWithLocalOverrides`, and `ChatPageContent` components. It improves session handling, updates the chat sidebar title, and adds a user-friendly message for sessions without messages.

### Detailed summary
- Updated `title` prop in `<ChatSidebarLink>` to default to "Untitled Chat".
- Merged new sessions with existing ones in `useSessionsWithLocalOverrides`.
- Introduced a message and icon for sessions with no messages in `ChatPageContent`.
- Conditional rendering of `<Chats>` based on message availability.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../(app)/components/ChatPageContent.tsx      | 45 ++++++++++++++-----
 .../(app)/components/ChatSidebar.tsx          |  2 +-
 .../hooks/useSessionsWithLocalOverrides.ts    | 14 +++++-
 3 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
index e0d28857a65..4bca9787c17 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
+++ b/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
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
index db674e2a833..f082f592e81 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
+++ b/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}
                 />
diff --git a/apps/dashboard/src/app/nebula-app/(app)/hooks/useSessionsWithLocalOverrides.ts b/apps/dashboard/src/app/nebula-app/(app)/hooks/useSessionsWithLocalOverrides.ts
index eb8cd56ed43..c1e46724a42 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/hooks/useSessionsWithLocalOverrides.ts
+++ b/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);
   });
 }