mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(24-03): wire search, branch selector, export, scroll-to-message into ChatPanel

Browse source 
- Add scrollToMessageId/setScrollToMessageId to ChatPanelContext
- Add "Search chat messages" item to CommandPalette (dispatches nexus:open-chat-search)
- Integrate ChatSearchDialog, ChatBranchSelector, ChatBookmarkList into ChatPanel
- Add export buttons (Markdown) and bookmarks panel toggle in header
- Wire branch-on-edit: branchConversation called when editing message with subsequent replies
- Add scroll-to-message support in ChatMessageList via virtualizer.scrollToIndex
- Show GitBranch icon for branch conversations in ChatConversationList
This commit is contained in:
Nexus Dev 2026-04-01 22:39:21 +00:00
parent 6b474f5d26
commit 0dde83b566
5 changed files with 202 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
ui/src/components/ChatConversationList.tsx
View file

@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from "react";
import { Plus, Search, X } from "lucide-react";
import { GitBranch, Plus, Search, X } from "lucide-react";
import { useChatConversations } from "../hooks/useChatConversations";
import { useChatPanel } from "../context/ChatPanelContext";
import { ChatConversationItem } from "./ChatConversationItem";
@ -169,16 +169,22 @@ export function ChatConversationList({ companyId }: ChatConversationListProps) {
</div>
) : (
sorted.map((conversation) => (
<ChatConversationItem
key={conversation.id}
conversation={conversation}
isActive={activeConversationId === conversation.id}
onSelect={setActiveConversationId}
onRename={handleRename}
onPin={handlePin}
onArchive={handleArchive}
onDelete={handleDeleteRequest}
/>
<div key={conversation.id} className="relative">
{conversation.parentConversationId && (
<GitBranch className="absolute left-1 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground pointer-events-none z-10" />
)}
<div className={conversation.parentConversationId ? "pl-4" : undefined}>
<ChatConversationItem
conversation={conversation}
isActive={activeConversationId === conversation.id}
onSelect={setActiveConversationId}
onRename={handleRename}
onPin={handlePin}
onArchive={handleArchive}
onDelete={handleDeleteRequest}
/>
</div>
</div>
))
)}

21
ui/src/components/ChatMessageList.tsx
View file

@ -1,6 +1,7 @@
import { useRef, useEffect, useCallback, useState } from "react";
import { useVirtualizer } from "@tanstack/react-virtual";
import { useChatMessages } from "../hooks/useChatMessages";
import { useChatPanel } from "../context/ChatPanelContext";
import { ChatMessage } from "./ChatMessage";
import { ArrowDown } from "lucide-react";
import { Button } from "@/components/ui/button";
@ -18,6 +19,8 @@ interface ChatMessageListProps {
onRetry?: (messageId: string) => void;
onHandoff?: (spec: { what: string; why: string; constraints: string; success: string }) => void;
agentMap?: Map<string, { name: string; icon: string | null; role: AgentRole | null }>;
onBookmark?: (messageId: string) => void;
bookmarkedMessageIds?: Set<string>;
}
export function ChatMessageList({
@ -31,8 +34,11 @@ export function ChatMessageList({
onRetry,
onHandoff,
agentMap,
onBookmark,
bookmarkedMessageIds,
}: ChatMessageListProps) {
const { messages, isLoading } = useChatMessages(conversationId);
const { scrollToMessageId, setScrollToMessageId } = useChatPanel();
const parentRef = useRef<HTMLDivElement>(null);
const [showJumpToBottom, setShowJumpToBottom] = useState(false);
@ -78,6 +84,19 @@ export function ChatMessageList({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [streamingContent, isStreaming]);
// Scroll to a specific message when scrollToMessageId is set
useEffect(() => {
if (!scrollToMessageId) return;
const index = displayMessages.findIndex((m) => m.id === scrollToMessageId);
if (index >= 0) {
virtualizer.scrollToIndex(index, { align: "center" });
setScrollToMessageId(null);
}
// TODO: if message not in current page (infinite scroll), scroll is best-effort only.
// Future iteration: load pages until message found, then scroll.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [scrollToMessageId]);
// Track scroll position for "jump to bottom" button
const handleScroll = useCallback(() => {
const el = parentRef.current;
@ -156,6 +175,8 @@ export function ChatMessageList({
onEdit={onEdit}
onRetry={onRetry}
onHandoff={onHandoff}
onBookmark={onBookmark}
isBookmarked={msg.id ? (bookmarkedMessageIds?.has(msg.id) ?? false) : false}
/>
</div>
);

157
ui/src/components/ChatPanel.tsx
View file

@ -1,5 +1,5 @@
import { useState, useMemo, useEffect, useCallback } from "react";
import { X } from "lucide-react";
import { Bookmark, Download, X } from "lucide-react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useChatPanel } from "../context/ChatPanelContext";
import { useCompany } from "../context/CompanyContext";
@ -9,28 +9,41 @@ import { ChatConversationList } from "./ChatConversationList";
import { ChatMessageList } from "./ChatMessageList";
import { ChatAgentSelector } from "./ChatAgentSelector";
import { ChatStopButton } from "./ChatStopButton";
import { ChatSearchDialog } from "./ChatSearchDialog";
import { ChatBranchSelector } from "./ChatBranchSelector";
import { ChatBookmarkList } from "./ChatBookmarkList";
import { Button } from "@/components/ui/button";
import { chatApi } from "../api/chat";
import { agentsApi } from "../api/agents";
import { useChatMessages } from "../hooks/useChatMessages";
import { useStreamingChat } from "../hooks/useStreamingChat";
import { useBrainstormerDefault } from "../hooks/useBrainstormerDefault";
import { useChatBookmarks, useToggleBookmark } from "../hooks/useChatBookmarks";
import { resolveAgentFromContent } from "../lib/slash-commands";
import type { AgentRole } from "@paperclipai/shared";
export function ChatPanel() {
const { chatOpen, setChatOpen, activeConversationId, setActiveConversationId } = useChatPanel();
const { chatOpen, setChatOpen, activeConversationId, setActiveConversationId, setScrollToMessageId } = useChatPanel();
const { selectedCompanyId } = useCompany();
const queryClient = useQueryClient();
const { pushToast } = useToast();
const [isSending, setIsSending] = useState(false);
const [activeAgentId, setActiveAgentId] = useState<string | null>(null);
const [searchOpen, setSearchOpen] = useState(false);
const [bookmarksOpen, setBookmarksOpen] = useState(false);
const { messages } = useChatMessages(activeConversationId);
const { streamingContent, isStreaming, startStream, stop } = useStreamingChat(activeConversationId);
const brainstormerDefaultId = useBrainstormerDefault();
// Listen for nexus:open-chat-search custom event (dispatched by CommandPalette)
useEffect(() => {
const handler = () => setSearchOpen(true);
window.addEventListener("nexus:open-chat-search", handler);
return () => window.removeEventListener("nexus:open-chat-search", handler);
}, []);
// Auto-select brainstormer (general agent) for new conversations
useEffect(() => {
if (activeAgentId === null && brainstormerDefaultId !== null && !activeConversationId) {
@ -68,6 +81,51 @@ export function ChatPanel() {
// Resolve streaming agent identity
const streamingAgent = activeAgentId ? agentMap.get(activeAgentId) : undefined;
// Fetch branches for active conversation
const { data: branchesData } = useQuery({
queryKey: ["chat", "branches", activeConversationId],
queryFn: () => chatApi.listBranches(activeConversationId!),
enabled: !!activeConversationId,
});
const branches = branchesData?.items ?? [];
// Bookmark state for active conversation
const { data: bookmarkData } = useChatBookmarks(selectedCompanyId, activeConversationId ?? undefined);
const { toggleBookmark } = useToggleBookmark();
const bookmarkedMessageIds = useMemo(() => {
const ids = new Set<string>();
for (const b of bookmarkData?.items ?? []) {
ids.add(b.message.id);
}
return ids;
}, [bookmarkData]);
// Search navigation handler
const handleSearchNavigate = useCallback((conversationId: string, messageId: string) => {
setActiveConversationId(conversationId);
setScrollToMessageId(messageId);
setSearchOpen(false);
}, [setActiveConversationId, setScrollToMessageId]);
// Bookmark navigation handler
const handleBookmarkNavigate = useCallback((conversationId: string, messageId: string) => {
setActiveConversationId(conversationId);
setScrollToMessageId(messageId);
setBookmarksOpen(false);
}, [setActiveConversationId, setScrollToMessageId]);
// Bookmark toggle handler
const handleBookmark = useCallback((messageId: string) => {
if (!activeConversationId) return;
toggleBookmark({ conversationId: activeConversationId, messageId });
}, [activeConversationId, toggleBookmark]);
// Export handler
const handleExport = useCallback((format: "markdown" | "json") => {
if (!activeConversationId) return;
window.location.href = chatApi.exportConversation(activeConversationId, format);
}, [activeConversationId]);
const handleSend = async (content: string) => {
if (!selectedCompanyId) return;
@ -97,13 +155,39 @@ export function ChatPanel() {
}
};
// Edit handler: update message, truncate after it, re-stream
// Edit handler: if editing a message that has subsequent responses, branch first
const handleEdit = async (messageId: string, newContent: string) => {
if (!activeConversationId) return;
await chatApi.editMessage(activeConversationId, messageId, newContent);
await chatApi.truncateMessagesAfter(activeConversationId, messageId);
queryClient.invalidateQueries({ queryKey: ["chat", "messages", activeConversationId] });
startStream(newContent, activeAgentId ?? undefined);
// Check if there are any messages after the edited message
const editedIdx = messages.findIndex((m) => m.id === messageId);
const hasSubsequentMessages = editedIdx >= 0 && editedIdx < messages.length - 1;
if (hasSubsequentMessages) {
// Branch the conversation from this message first (CHAT-14)
try {
const newConv = await chatApi.branchConversation(activeConversationId, messageId);
setActiveConversationId(newConv.id);
// Invalidate branches list so branch selector updates
queryClient.invalidateQueries({ queryKey: ["chat", "branches"] });
queryClient.invalidateQueries({ queryKey: ["chat"] });
// Edit the message on the new branch
await chatApi.editMessage(newConv.id, messageId, newContent);
await chatApi.truncateMessagesAfter(newConv.id, messageId);
queryClient.invalidateQueries({ queryKey: ["chat", "messages", newConv.id] });
queryClient.invalidateQueries({ queryKey: ["chat", "search"] });
startStream(newContent, activeAgentId ?? undefined);
} catch {
pushToast({ title: "Could not create branch. Try again.", tone: "error" });
}
} else {
// No subsequent messages — edit in place
await chatApi.editMessage(activeConversationId, messageId, newContent);
await chatApi.truncateMessagesAfter(activeConversationId, messageId);
queryClient.invalidateQueries({ queryKey: ["chat", "messages", activeConversationId] });
queryClient.invalidateQueries({ queryKey: ["chat", "search"] });
startStream(newContent, activeAgentId ?? undefined);
}
};
// Retry handler: find the last user message before the assistant message,
@ -140,6 +224,7 @@ export function ChatPanel() {
// Delete everything after the user message (includes the assistant message itself)
await chatApi.truncateMessagesAfter(activeConversationId, userMessageId);
queryClient.invalidateQueries({ queryKey: ["chat", "messages", activeConversationId] });
queryClient.invalidateQueries({ queryKey: ["chat", "search"] });
// Re-stream using the actual user message content
startStream(lastUserContent, activeAgentId ?? undefined);
@ -154,7 +239,33 @@ export function ChatPanel() {
{/* Header with agent selector */}
<div className="flex items-center justify-between border-b border-border px-4 py-2 min-w-[380px]">
<span className="text-sm font-medium">Chat</span>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
{selectedCompanyId && activeConversationId && (
<>
{/* Bookmarks toggle */}
<Button
variant={bookmarksOpen ? "secondary" : "ghost"}
size="icon"
className="h-6 w-6"
onClick={() => setBookmarksOpen((v) => !v)}
aria-label="Bookmarks"
title="Bookmarks"
>
<Bookmark className="h-4 w-4" />
</Button>
{/* Export buttons */}
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => handleExport("markdown")}
aria-label="Export as Markdown"
title="Export as Markdown"
>
<Download className="h-4 w-4" />
</Button>
</>
)}
{selectedCompanyId && (
<ChatAgentSelector
companyId={selectedCompanyId}
@ -190,6 +301,26 @@ export function ChatPanel() {
{/* Right column: message thread + stop button + input */}
<div className="flex flex-1 flex-col min-w-0">
{/* Bookmarks panel (shown when toggled) */}
{bookmarksOpen && selectedCompanyId && (
<div className="border-b border-border" style={{ maxHeight: 200, overflow: "hidden" }}>
<ChatBookmarkList
companyId={selectedCompanyId}
onNavigate={handleBookmarkNavigate}
/>
</div>
)}
{/* Branch selector */}
{activeConversationId && branches.length > 0 && (
<ChatBranchSelector
conversationId={activeConversationId}
branches={branches}
activeBranchId={activeConversationId}
onSelectBranch={setActiveConversationId}
/>
)}
{/* Message area */}
<div className="flex-1 overflow-hidden">
{activeConversationId ? (
@ -204,6 +335,8 @@ export function ChatPanel() {
onRetry={handleRetry}
onHandoff={handleHandoff}
agentMap={agentMap}
onBookmark={handleBookmark}
bookmarkedMessageIds={bookmarkedMessageIds}
/>
) : (
<div className="flex items-center justify-center h-full p-3">
@ -230,6 +363,14 @@ export function ChatPanel() {
</div>
</div>
</div>
{/* Search dialog */}
<ChatSearchDialog
open={searchOpen}
onOpenChange={setSearchOpen}
companyId={selectedCompanyId}
onNavigate={handleSearchNavigate}
/>
</aside>
);
}

11
ui/src/components/CommandPalette.tsx
View file

@ -28,6 +28,7 @@ import {
History,
SquarePen,
Plus,
Search,
} from "lucide-react";
import { Identity } from "./Identity";
import { agentUrl, projectUrl } from "../lib/utils";
@ -114,6 +115,16 @@ export function CommandPalette() {
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Actions">
<CommandItem
value="search-chat"
onSelect={() => {
window.dispatchEvent(new CustomEvent("nexus:open-chat-search"));
setOpen(false);
}}
>
<Search className="mr-2 h-4 w-4" />
Search chat messages
</CommandItem>
<CommandItem
onSelect={() => {
setOpen(false);

5
ui/src/context/ChatPanelContext.tsx
View file

@ -5,9 +5,11 @@ const STORAGE_KEY = "nexus:chat-panel-open";
interface ChatPanelContextValue {
chatOpen: boolean;
activeConversationId: string | null;
scrollToMessageId: string | null;
setChatOpen: (open: boolean) => void;
toggleChat: () => void;
setActiveConversationId: (id: string | null) => void;
setScrollToMessageId: (id: string | null) => void;
}
const ChatPanelContext = createContext<ChatPanelContextValue | null>(null);
@ -32,6 +34,7 @@ function writePreference(open: boolean) {
export function ChatPanelProvider({ children }: { children: ReactNode }) {
const [chatOpen, setChatOpenState] = useState(readPreference);
const [activeConversationId, setActiveConversationId] = useState<string | null>(null);
const [scrollToMessageId, setScrollToMessageId] = useState<string | null>(null);
const setChatOpen = useCallback((open: boolean) => {
setChatOpenState(open);
@ -48,7 +51,7 @@ export function ChatPanelProvider({ children }: { children: ReactNode }) {
return (
<ChatPanelContext.Provider
value={{ chatOpen, activeConversationId, setChatOpen, toggleChat, setActiveConversationId }}
value={{ chatOpen, activeConversationId, scrollToMessageId, setChatOpen, toggleChat, setActiveConversationId, setScrollToMessageId }}
>
{children}
</ChatPanelContext.Provider>