feat(FN-4107): persist chat draft auto-save in ChatView

Persist chat drafts to storage in the ChatView component, with accompanying test coverage in a new `ChatView.draft.test.tsx` file.

Fusion-Task-Id: FN-4107

.changeset/FN-4107-chat-draft-persistence.md

@@ -0,0 +1,5 @@
+---
+"@runfusion/fusion": patch
+---
+
+Chat composer text is now persisted per conversation and recovered across page refreshes.

packages/dashboard/app/components/ChatView.tsx

@@ -345,6 +345,27 @@ const CHAT_SIDEBAR_MIN_WIDTH = 180;
 const CHAT_SIDEBAR_MAX_WIDTH = 500;
 const CHAT_SIDEBAR_STORAGE_KEY = "fusion:chat-sidebar-width";
 const CHAT_SCOPE_STORAGE_KEY = "fusion:chat-scope";
+const CHAT_DRAFT_STORAGE_PREFIX = "fusion:chat-draft:";
+
+function getChatDraftKey(scope: "direct" | "rooms", id: string | null | undefined): string | null {
+  if (!id) {
+    return null;
+  }
+
+  return `${CHAT_DRAFT_STORAGE_PREFIX}${scope}:${id}`;
+}
+
+function getPersistedChatDraft(key: string | null): string {
+  if (!key) {
+    return "";
+  }
+
+  try {
+    return localStorage.getItem(key) ?? "";
+  } catch {
+    return "";
+  }
+}
 
 interface PendingAttachment {
   file: File;
@@ -839,18 +860,35 @@ export function ChatView({ projectId, addToast, experimentalFeatures }: ChatView
   } = useChat(projectId, addToast);
 
   const [showNewDialog, setShowNewDialog] = useState(false);
-  const [messageInput, setMessageInput] = useState("");
+  const chatRoomsEnabled = experimentalFeatures?.chatRooms === true;
+  const [chatScope, setChatScope] = useState<"direct" | "rooms">(() => {
+    try {
+      const persistedScope = localStorage.getItem(CHAT_SCOPE_STORAGE_KEY);
+      if (persistedScope === "rooms" && chatRoomsEnabled) {
+        return "rooms";
+      }
+    } catch {
+      // Ignore storage errors.
+    }
+
+    return "direct";
+  });
+  // Keep this hook unconditional to preserve hook ordering and test stability.
+  // Rooms UI and interactions are fully gated by `chatRoomsEnabled`.
+  const rooms = useChatRooms(projectId, addToast);
+  const [messageInput, setMessageInput] = useState(() => {
+    const initialDraftKey = getChatDraftKey(
+      chatScope,
+      chatScope === "rooms" ? rooms.activeRoom?.id : activeSession?.id,
+    );
+    return getPersistedChatDraft(initialDraftKey);
+  });
   const [contextMenu, setContextMenu] = useState<{ sessionId: string; x: number; y: number } | null>(null);
   const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
   const [confirmDeleteRoomId, setConfirmDeleteRoomId] = useState<string | null>(null);
   const [sidebarVisible, setSidebarVisible] = useState(true);
   const [sidebarWidth, setSidebarWidth] = useState(CHAT_SIDEBAR_DEFAULT_WIDTH);
-  const [chatScope, setChatScope] = useState<"direct" | "rooms">("direct");
   const [createRoomOpen, setCreateRoomOpen] = useState(false);
-  const chatRoomsEnabled = experimentalFeatures?.chatRooms === true;
-  // Keep this hook unconditional to preserve hook ordering and test stability.
-  // Rooms UI and interactions are fully gated by `chatRoomsEnabled`.
-  const rooms = useChatRooms(projectId, addToast);
   const [agentsMap, setAgentsMap] = useState<Map<string, Agent>>(new Map());
   const [discoveredSkills, setDiscoveredSkills] = useState<DiscoveredSkill[]>([]);
   const [skillsLoading, setSkillsLoading] = useState(true);
@@ -948,6 +986,37 @@ export function ChatView({ projectId, addToast, experimentalFeatures }: ChatView
     }
   }, [chatRoomsEnabled, chatScope]);
 
+  const activeDraftKey = getChatDraftKey(
+    chatScope,
+    chatScope === "rooms" ? rooms.activeRoom?.id : activeSession?.id,
+  );
+  const lastDraftKeyRef = useRef<string | null>(activeDraftKey);
+
+  useEffect(() => {
+    if (activeDraftKey === lastDraftKeyRef.current) {
+      return;
+    }
+
+    lastDraftKeyRef.current = activeDraftKey;
+    setMessageInput(getPersistedChatDraft(activeDraftKey));
+  }, [activeDraftKey]);
+
+  useEffect(() => {
+    if (!activeDraftKey || lastDraftKeyRef.current !== activeDraftKey) {
+      return;
+    }
+
+    try {
+      if (messageInput) {
+        localStorage.setItem(activeDraftKey, messageInput);
+        return;
+      }
+      localStorage.removeItem(activeDraftKey);
+    } catch {
+      // Ignore storage errors.
+    }
+  }, [activeDraftKey, messageInput]);
+
   const roomThreadActive = chatRoomsEnabled && chatScope === "rooms" && !!rooms.activeRoom;
   const { keyboardOverlap, viewportHeight, viewportOffsetTop, keyboardOpen } = useMobileKeyboard({
     enabled: isMobile && (!!activeSession || roomThreadActive),
@@ -1354,6 +1423,13 @@ export function ChatView({ projectId, addToast, experimentalFeatures }: ChatView
 
   const clearComposerState = useCallback(() => {
     setMessageInput("");
+    if (activeDraftKey) {
+      try {
+        localStorage.removeItem(activeDraftKey);
+      } catch {
+        // Ignore storage errors.
+      }
+    }
     setShowSkillMenu(false);
     setSkillFilter("");
     setMentionPopupVisible(false);
@@ -1367,7 +1443,7 @@ export function ChatView({ projectId, addToast, experimentalFeatures }: ChatView
       }
       return [];
     });
-  }, []);
+  }, [activeDraftKey]);
 
   // Handle send message including pending attachment uploads.
   const handleSend = useCallback(() => {

packages/dashboard/app/components/__tests__/ChatView.draft.test.tsx

@@ -0,0 +1,222 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { ChatView } from "../ChatView";
+import * as useChatModule from "../../hooks/useChat";
+import * as useChatRoomsModule from "../../hooks/useChatRooms";
+import type { ChatSessionInfo, UseChatReturn } from "../../hooks/useChat";
+import type { UseChatRoomsResult } from "../../hooks/useChatRooms";
+import { _resetInitialViewportHeight } from "../../hooks/useMobileKeyboard";
+
+Element.prototype.scrollIntoView = vi.fn();
+
+vi.mock("../../hooks/useChat");
+vi.mock("../../hooks/useChatRooms");
+vi.mock("../../api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../api")>();
+  return {
+    ...actual,
+    fetchAgents: vi.fn().mockResolvedValue([]),
+    fetchDiscoveredSkills: vi.fn().mockResolvedValue([]),
+    searchFiles: vi.fn().mockResolvedValue({ files: [] }),
+  };
+});
+
+const mockUseChat = vi.mocked(useChatModule.useChat);
+const mockUseChatRooms = vi.mocked(useChatRoomsModule.useChatRooms);
+
+const sessionOne: ChatSessionInfo = {
+  id: "session-001",
+  agentId: "agent-001",
+  status: "active",
+  title: "Session One",
+  createdAt: "2026-04-08T00:00:00.000Z",
+  updatedAt: "2026-04-08T00:00:00.000Z",
+};
+
+const sessionTwo: ChatSessionInfo = {
+  ...sessionOne,
+  id: "session-002",
+  title: "Session Two",
+};
+
+const roomOne = {
+  id: "room-001",
+  name: "Room One",
+  slug: "room-one",
+  description: null,
+  projectId: "proj-123",
+  createdBy: "agent-001",
+  status: "active" as const,
+  createdAt: "2026-04-08T00:00:00.000Z",
+  updatedAt: "2026-04-08T00:00:00.000Z",
+};
+
+const defaultChatState: UseChatReturn = {
+  sessions: [sessionOne, sessionTwo],
+  activeSession: sessionOne,
+  sessionsLoading: false,
+  messages: [],
+  messagesLoading: false,
+  isStreaming: false,
+  streamingText: "",
+  streamingThinking: "",
+  streamingToolCalls: [],
+  selectSession: vi.fn(),
+  createSession: vi.fn().mockResolvedValue(sessionTwo),
+  archiveSession: vi.fn(),
+  deleteSession: vi.fn(),
+  sendMessage: vi.fn(),
+  stopStreaming: vi.fn(),
+  pendingMessage: "",
+  clearPendingMessage: vi.fn(),
+  loadMoreMessages: vi.fn(),
+  hasMoreMessages: false,
+  searchQuery: "",
+  setSearchQuery: vi.fn(),
+  filteredSessions: [sessionOne, sessionTwo],
+  refreshSessions: vi.fn(),
+  agentsMap: new Map(),
+};
+
+const defaultRoomsState: UseChatRoomsResult = {
+  rooms: [roomOne],
+  roomsLoading: false,
+  roomsError: null,
+  activeRoom: roomOne,
+  activeRoomMembers: [],
+  messages: [],
+  messagesLoading: false,
+  selectRoom: vi.fn(),
+  createRoom: vi.fn(),
+  deleteRoom: vi.fn(),
+  sendRoomMessage: vi.fn().mockResolvedValue(undefined),
+  refreshRooms: vi.fn(),
+};
+
+function setup(chatOverrides: Partial<UseChatReturn> = {}, roomsOverrides: Partial<UseChatRoomsResult> = {}) {
+  mockUseChat.mockReturnValue({ ...defaultChatState, ...chatOverrides });
+  mockUseChatRooms.mockReturnValue({ ...defaultRoomsState, ...roomsOverrides });
+}
+
+function mockDesktopViewport() {
+  if (!window.matchMedia) {
+    Object.defineProperty(window, "matchMedia", { value: vi.fn(), configurable: true, writable: true });
+  }
+  Object.defineProperty(window, "innerWidth", { value: 1280, configurable: true });
+  vi.spyOn(window, "matchMedia").mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+}
+
+function renderChatView() {
+  return render(<ChatView projectId="proj-123" addToast={vi.fn()} experimentalFeatures={{ chatRooms: true }} />);
+}
+
+describe("ChatView draft persistence", () => {
+  beforeEach(() => {
+    _resetInitialViewportHeight();
+    vi.clearAllMocks();
+    localStorage.clear();
+    mockDesktopViewport();
+    setup();
+  });
+
+  it("writes direct-session drafts to localStorage while typing", async () => {
+    renderChatView();
+
+    await userEvent.type(screen.getByPlaceholderText("Type a message..."), "hello draft");
+
+    await waitFor(() => {
+      expect(localStorage.getItem("fusion:chat-draft:direct:session-001")).toBe("hello draft");
+    });
+  });
+
+  it("restores the persisted direct-session draft when remounted", () => {
+    localStorage.setItem("fusion:chat-draft:direct:session-001", "saved draft");
+
+    const { unmount } = renderChatView();
+    expect(screen.getByPlaceholderText("Type a message...")).toHaveValue("saved draft");
+
+    unmount();
+    renderChatView();
+
+    expect(screen.getByPlaceholderText("Type a message...")).toHaveValue("saved draft");
+  });
+
+  it("swaps the visible draft when the active direct session changes", async () => {
+    localStorage.setItem("fusion:chat-draft:direct:session-002", "session two draft");
+
+    const { rerender } = renderChatView();
+    expect(screen.getByPlaceholderText("Type a message...")).toHaveValue("");
+
+    setup({
+      activeSession: sessionTwo,
+      sessions: [sessionOne, sessionTwo],
+      filteredSessions: [sessionOne, sessionTwo],
+    });
+    rerender(<ChatView projectId="proj-123" addToast={vi.fn()} experimentalFeatures={{ chatRooms: true }} />);
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText("Type a message...")).toHaveValue("session two draft");
+    });
+  });
+
+  it("clears the composer and removes the direct-session draft after send", async () => {
+    const sendMessage = vi.fn();
+    setup({ sendMessage });
+
+    renderChatView();
+
+    await userEvent.type(screen.getByPlaceholderText("Type a message..."), "send me");
+    await userEvent.click(screen.getAllByTestId("chat-send-btn")[0]);
+
+    await waitFor(() => {
+      expect(sendMessage).toHaveBeenCalledWith("send me", []);
+      expect(screen.getByPlaceholderText("Type a message...")).toHaveValue("");
+      expect(localStorage.getItem("fusion:chat-draft:direct:session-001")).toBeNull();
+    });
+  });
+
+  it("removes the storage key when the draft becomes empty", async () => {
+    renderChatView();
+
+    const textarea = screen.getByPlaceholderText("Type a message...");
+    await userEvent.type(textarea, "temporary");
+    await waitFor(() => {
+      expect(localStorage.getItem("fusion:chat-draft:direct:session-001")).toBe("temporary");
+    });
+
+    await userEvent.clear(textarea);
+
+    await waitFor(() => {
+      expect(localStorage.getItem("fusion:chat-draft:direct:session-001")).toBeNull();
+    });
+  });
+
+  it("uses room-scoped draft keys and keeps them isolated from direct drafts", async () => {
+    localStorage.setItem("fusion:chat-scope", "rooms");
+    localStorage.setItem("fusion:chat-draft:direct:session-001", "direct draft");
+    localStorage.setItem("fusion:chat-draft:rooms:room-001", "room draft");
+
+    renderChatView();
+
+    const textarea = screen.getByPlaceholderText("Type a message...");
+    expect(textarea).toHaveValue("room draft");
+
+    await userEvent.clear(textarea);
+    await userEvent.type(textarea, "updated room draft");
+
+    await waitFor(() => {
+      expect(localStorage.getItem("fusion:chat-draft:rooms:room-001")).toBe("updated room draft");
+      expect(localStorage.getItem("fusion:chat-draft:direct:session-001")).toBe("direct draft");
+    });
+  });
+});