Fix issue #4828: [Bug]: Chat interface empty state flickers for a brief moment until messages load

frontend/__tests__/components/chat/chat-input.test.tsx

@@ -171,9 +171,9 @@ describe("ChatInput", () => {
     // Fire paste event with text data
     fireEvent.paste(input!, {
       clipboardData: {
-        getData: (type: string) => type === 'text/plain' ? 'test paste' : '',
-        files: []
-      }
+        getData: (type: string) => (type === "text/plain" ? "test paste" : ""),
+        files: [],
+      },
     });
   });
 
@@ -187,14 +187,16 @@ describe("ChatInput", () => {
     expect(input).toBeTruthy();
 
     // Create a paste event with an image file
-    const file = new File(["dummy content"], "image.png", { type: "image/png" });
+    const file = new File(["dummy content"], "image.png", {
+      type: "image/png",
+    });
 
     // Fire paste event with image data
     fireEvent.paste(input!, {
       clipboardData: {
-        getData: () => '',
-        files: [file]
-      }
+        getData: () => "",
+        files: [file],
+      },
     });
 
     // Verify image paste was handled

frontend/__tests__/components/chat/chat-interface.test.tsx

@@ -17,7 +17,11 @@ describe("Empty state", () => {
   }));
 
   const { useSocket: useSocketMock } = vi.hoisted(() => ({
-    useSocket: vi.fn(() => ({ send: sendMock, runtimeActive: true })),
+    useSocket: vi.fn(() => ({
+      send: sendMock,
+      runtimeActive: true,
+      isConnected: true,
+    })),
   }));
 
   beforeAll(() => {
@@ -31,6 +35,31 @@ describe("Empty state", () => {
     vi.clearAllMocks();
   });
 
+  it("should not render suggestions if socket is not yet connected", () => {
+    useSocketMock.mockImplementation(() => ({
+      send: sendMock,
+      runtimeActive: false,
+      isConnected: false,
+    }));
+
+    const { rerender } = renderWithProviders(<ChatInterface />, {
+      preloadedState: {
+        chat: { messages: [] },
+      },
+    });
+
+    expect(screen.queryByTestId("suggestions")).not.toBeInTheDocument();
+
+    useSocketMock.mockImplementation(() => ({
+      send: sendMock,
+      runtimeActive: true,
+      isConnected: true,
+    }));
+    rerender(<ChatInterface />);
+
+    expect(screen.getByTestId("suggestions")).toBeInTheDocument();
+  });
+
   it("should render suggestions if empty", () => {
     const { store } = renderWithProviders(<ChatInterface />, {
       preloadedState: {
@@ -80,6 +109,7 @@ describe("Empty state", () => {
       useSocketMock.mockImplementation(() => ({
         send: sendMock,
         runtimeActive: false, // mock an inactive runtime setup
+        isConnected: false,
       }));
       const addUserMessageSpy = vi.spyOn(ChatSlice, "addUserMessage");
       const user = userEvent.setup();
@@ -109,6 +139,7 @@ describe("Empty state", () => {
       useSocketMock.mockImplementation(() => ({
         send: sendMock,
         runtimeActive: false, // mock an inactive runtime setup
+        isConnected: false,
       }));
       const user = userEvent.setup();
       const { rerender } = renderWithProviders(<ChatInterface />, {
@@ -126,6 +157,7 @@ describe("Empty state", () => {
       useSocketMock.mockImplementation(() => ({
         send: sendMock,
         runtimeActive: true, // mock an active runtime setup
+        isConnected: true,
       }));
       rerender(<ChatInterface />);
 

frontend/src/components/chat-interface.tsx

@@ -28,7 +28,7 @@ const isErrorMessage = (
 ): message is ErrorMessage => "error" in message;
 
 export function ChatInterface() {
-  const { send } = useSocket();
+  const { send, isConnected } = useSocket();
   const dispatch = useDispatch();
   const scrollRef = React.useRef<HTMLDivElement>(null);
   const { scrollDomToBottom, onChatBodyScroll, hitBottom } =
@@ -74,7 +74,7 @@ export function ChatInterface() {
 
   return (
     <div className="h-full flex flex-col justify-between">
-      {messages.length === 0 && (
+      {messages.length === 0 && isConnected && (
         <div className="flex flex-col gap-6 h-full px-4 items-center justify-center">
           <div className="flex flex-col items-center p-4 bg-neutral-700 rounded-xl w-full">
             <BuildIt width={45} height={54} />

frontend/src/context/socket.tsx

@@ -143,4 +143,4 @@ function useSocket() {
   return context;
 }
 
-export { SocketProvider, useSocket };
+export { SocketContext, SocketProvider, useSocket };