mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-04-29 18:36:23 +02:00
Tushar
GitHub
commit
1f55e5b949
4 changed files with 266 additions and 90 deletions
|
|
@ -5,8 +5,7 @@ import { RunEvent, ListRunsResponse } from '@x/shared/src/runs.js';
|
|||
import type { LanguageModelUsage, ToolUIPart } from 'ai';
|
||||
import './App.css'
|
||||
import z from 'zod';
|
||||
import { Button } from './components/ui/button';
|
||||
import { CheckIcon, LoaderIcon, PanelLeftIcon, Expand, Shrink, X, ChevronLeftIcon, ChevronRightIcon, SquarePen, SearchIcon } from 'lucide-react';
|
||||
import { CheckIcon, LoaderIcon, PanelLeftIcon, Maximize2, Minimize2, ChevronLeftIcon, ChevronRightIcon, SquarePen, SearchIcon } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { MarkdownEditor } from './components/markdown-editor';
|
||||
import { ChatSidebar } from './components/chat-sidebar';
|
||||
|
|
@ -100,8 +99,9 @@ const TITLEBAR_BUTTON_PX = 32
|
|||
const TITLEBAR_BUTTON_GAP_PX = 4
|
||||
const TITLEBAR_HEADER_GAP_PX = 8
|
||||
const TITLEBAR_TOGGLE_MARGIN_LEFT_PX = 12
|
||||
const TITLEBAR_BUTTONS_COLLAPSED = 4
|
||||
const TITLEBAR_BUTTON_GAPS_COLLAPSED = 3
|
||||
const TITLEBAR_BUTTONS_COLLAPSED = 5
|
||||
const TITLEBAR_BUTTON_GAPS_COLLAPSED = 4
|
||||
const GRAPH_TAB_PATH = '__rowboat_graph_view__'
|
||||
|
||||
const clampNumber = (value: number, min: number, max: number) =>
|
||||
Math.min(max, Math.max(min, value))
|
||||
|
|
@ -134,6 +134,18 @@ const getBaseName = (path: string) => {
|
|||
return file.replace(/\.md$/i, '')
|
||||
}
|
||||
|
||||
const getAncestorDirectoryPaths = (path: string): string[] => {
|
||||
const parts = path.split('/').filter(Boolean)
|
||||
if (parts.length <= 2) return []
|
||||
const ancestors: string[] = []
|
||||
for (let i = 1; i < parts.length - 1; i++) {
|
||||
ancestors.push(parts.slice(0, i + 1).join('/'))
|
||||
}
|
||||
return ancestors
|
||||
}
|
||||
|
||||
const isGraphTabPath = (path: string) => path === GRAPH_TAB_PATH
|
||||
|
||||
const normalizeUsage = (usage?: Partial<LanguageModelUsage> | null): LanguageModelUsage | null => {
|
||||
if (!usage) return null
|
||||
const hasNumbers = Object.values(usage).some((value) => typeof value === 'number')
|
||||
|
|
@ -224,6 +236,7 @@ function FixedSidebarToggle({
|
|||
canNavigateBack,
|
||||
canNavigateForward,
|
||||
onNewChat,
|
||||
onOpenSearch,
|
||||
leftInsetPx,
|
||||
}: {
|
||||
onNavigateBack: () => void
|
||||
|
|
@ -231,6 +244,7 @@ function FixedSidebarToggle({
|
|||
canNavigateBack: boolean
|
||||
canNavigateForward: boolean
|
||||
onNewChat: () => void
|
||||
onOpenSearch: () => void
|
||||
leftInsetPx: number
|
||||
}) {
|
||||
const { toggleSidebar, state } = useSidebar()
|
||||
|
|
@ -257,6 +271,15 @@ function FixedSidebarToggle({
|
|||
>
|
||||
<SquarePen className="size-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpenSearch}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
||||
style={{ marginLeft: TITLEBAR_BUTTON_GAP_PX }}
|
||||
aria-label="Search"
|
||||
>
|
||||
<SearchIcon className="size-5" />
|
||||
</button>
|
||||
{/* Back / Forward navigation */}
|
||||
{isCollapsed && (
|
||||
<>
|
||||
|
|
@ -309,7 +332,7 @@ function ContentHeader({
|
|||
"titlebar-drag-region flex h-10 shrink-0 items-stretch border-b border-border px-3 bg-sidebar transition-[padding] duration-200 ease-linear overflow-hidden",
|
||||
// When the sidebar is collapsed the content area shifts left, so we need enough left padding
|
||||
// to avoid overlapping the fixed traffic-lights/toggle/back/forward controls.
|
||||
isCollapsed && !collapsedLeftPaddingPx && "pl-[168px]"
|
||||
isCollapsed && !collapsedLeftPaddingPx && "pl-[196px]"
|
||||
)}
|
||||
style={isCollapsed && collapsedLeftPaddingPx ? { paddingLeft: collapsedLeftPaddingPx } : undefined}
|
||||
>
|
||||
|
|
@ -493,6 +516,7 @@ function App() {
|
|||
const newFileTabId = () => `file-tab-${++fileTabIdCounterRef.current}`
|
||||
|
||||
const getFileTabTitle = useCallback((tab: FileTab) => {
|
||||
if (isGraphTabPath(tab.path)) return 'Graph View'
|
||||
return tab.path.split('/').pop()?.replace(/\.md$/i, '') || tab.path
|
||||
}, [])
|
||||
|
||||
|
|
@ -583,6 +607,25 @@ function App() {
|
|||
}
|
||||
}, [selectedPath])
|
||||
|
||||
// Keep active file visible in the Knowledge tree by auto-expanding its ancestor folders.
|
||||
useEffect(() => {
|
||||
if (!selectedPath) return
|
||||
const ancestorDirs = getAncestorDirectoryPaths(selectedPath)
|
||||
if (ancestorDirs.length === 0) return
|
||||
|
||||
setExpandedPaths((prev) => {
|
||||
let changed = false
|
||||
const next = new Set(prev)
|
||||
for (const dirPath of ancestorDirs) {
|
||||
if (!next.has(dirPath)) {
|
||||
next.add(dirPath)
|
||||
changed = true
|
||||
}
|
||||
}
|
||||
return changed ? next : prev
|
||||
})
|
||||
}, [selectedPath])
|
||||
|
||||
// Keep runIdRef in sync with runId state (for use in event handlers to avoid stale closures)
|
||||
useEffect(() => {
|
||||
runIdRef.current = runId
|
||||
|
|
@ -624,23 +667,28 @@ function App() {
|
|||
processingRunIdsRef.current = processingRunIds
|
||||
}, [processingRunIds])
|
||||
|
||||
// Sync active run streaming UI with background tracking
|
||||
// Sync active run streaming UI with background processing tracking.
|
||||
// Depend on both runId and processingRunIds so we don't miss late/early event ordering.
|
||||
useEffect(() => {
|
||||
if (!runId) {
|
||||
setIsProcessing(false)
|
||||
setIsStopping(false)
|
||||
setStopClickedAt(null)
|
||||
setCurrentAssistantMessage('')
|
||||
return
|
||||
}
|
||||
const isRunProcessing = processingRunIdsRef.current.has(runId)
|
||||
const isRunProcessing = processingRunIds.has(runId)
|
||||
setIsProcessing(isRunProcessing)
|
||||
if (isRunProcessing) {
|
||||
const buffer = streamingBuffersRef.current.get(runId)
|
||||
setCurrentAssistantMessage(buffer?.assistant ?? '')
|
||||
} else {
|
||||
setIsStopping(false)
|
||||
setStopClickedAt(null)
|
||||
setCurrentAssistantMessage('')
|
||||
streamingBuffersRef.current.delete(runId)
|
||||
}
|
||||
}, [runId])
|
||||
}, [runId, processingRunIds])
|
||||
|
||||
// Load directory tree
|
||||
const loadDirectory = useCallback(async () => {
|
||||
|
|
@ -1163,7 +1211,14 @@ function App() {
|
|||
break
|
||||
|
||||
case 'start':
|
||||
setProcessingRunIds(prev => {
|
||||
if (prev.has(event.runId)) return prev
|
||||
const next = new Set(prev)
|
||||
next.add(event.runId)
|
||||
return next
|
||||
})
|
||||
if (!isActiveRun) return
|
||||
setIsProcessing(true)
|
||||
setCurrentAssistantMessage('')
|
||||
setModelUsage(null)
|
||||
break
|
||||
|
|
@ -1171,12 +1226,20 @@ function App() {
|
|||
case 'llm-stream-event':
|
||||
{
|
||||
const llmEvent = event.event
|
||||
// Fallback: if processing-start is missed/out-of-order, stream activity still means run is active.
|
||||
setProcessingRunIds(prev => {
|
||||
if (prev.has(event.runId)) return prev
|
||||
const next = new Set(prev)
|
||||
next.add(event.runId)
|
||||
return next
|
||||
})
|
||||
if (!isActiveRun) {
|
||||
if (llmEvent.type === 'text-delta' && llmEvent.delta) {
|
||||
appendStreamingBuffer(event.runId, llmEvent.delta)
|
||||
}
|
||||
return
|
||||
}
|
||||
setIsProcessing(true)
|
||||
if (llmEvent.type === 'text-delta' && llmEvent.delta) {
|
||||
appendStreamingBuffer(event.runId, llmEvent.delta)
|
||||
setCurrentAssistantMessage(prev => prev + llmEvent.delta)
|
||||
|
|
@ -1592,8 +1655,10 @@ function App() {
|
|||
const restoreChatTabState = useCallback((tabId: string, fallbackRunId: string | null): boolean => {
|
||||
const cached = chatViewStateByTabRef.current[tabId]
|
||||
if (!cached) return false
|
||||
// Ignore stale cache snapshots that don't match the tab's current run binding.
|
||||
if (cached.runId !== fallbackRunId) return false
|
||||
|
||||
const resolvedRunId = cached.runId ?? fallbackRunId
|
||||
const resolvedRunId = fallbackRunId
|
||||
setRunId(resolvedRunId)
|
||||
setConversation(cached.conversation)
|
||||
setCurrentAssistantMessage(cached.currentAssistantMessage)
|
||||
|
|
@ -1615,6 +1680,8 @@ function App() {
|
|||
const openChatInNewTab = useCallback((targetRunId: string) => {
|
||||
const existingTab = chatTabs.find(t => t.runId === targetRunId)
|
||||
if (existingTab) {
|
||||
// Cancel stale in-flight loads from previously focused tabs.
|
||||
loadRunRequestIdRef.current += 1
|
||||
setActiveChatTabId(existingTab.id)
|
||||
const restored = restoreChatTabState(existingTab.id, existingTab.runId)
|
||||
if (processingRunIdsRef.current.has(targetRunId) || !restored) {
|
||||
|
|
@ -1633,6 +1700,8 @@ function App() {
|
|||
if (!tab) return
|
||||
if (tabId === activeChatTabId) return
|
||||
saveChatScrollForTab(activeChatTabId)
|
||||
// Cancel stale in-flight loads from previously focused tabs.
|
||||
loadRunRequestIdRef.current += 1
|
||||
setActiveChatTabId(tabId)
|
||||
const restored = restoreChatTabState(tabId, tab.runId)
|
||||
if (tab.runId && processingRunIdsRef.current.has(tab.runId)) {
|
||||
|
|
@ -1669,6 +1738,8 @@ function App() {
|
|||
if (tabId === activeChatTabId && nextTabs.length > 0) {
|
||||
const newIdx = Math.min(idx, nextTabs.length - 1)
|
||||
const newActiveTab = nextTabs[newIdx]
|
||||
// Cancel stale in-flight loads from the closing tab.
|
||||
loadRunRequestIdRef.current += 1
|
||||
setActiveChatTabId(newActiveTab.id)
|
||||
const restored = restoreChatTabState(newActiveTab.id, newActiveTab.runId)
|
||||
if (newActiveTab.runId && processingRunIdsRef.current.has(newActiveTab.runId)) {
|
||||
|
|
@ -1758,12 +1829,14 @@ function App() {
|
|||
const existingTab = fileTabs.find(t => t.path === path)
|
||||
if (existingTab) {
|
||||
setActiveFileTabId(existingTab.id)
|
||||
setIsGraphOpen(false)
|
||||
setSelectedPath(path)
|
||||
return
|
||||
}
|
||||
const id = newFileTabId()
|
||||
setFileTabs(prev => [...prev, { id, path }])
|
||||
setActiveFileTabId(id)
|
||||
setIsGraphOpen(false)
|
||||
setSelectedPath(path)
|
||||
}, [fileTabs])
|
||||
|
||||
|
|
@ -1771,12 +1844,24 @@ function App() {
|
|||
const tab = fileTabs.find(t => t.id === tabId)
|
||||
if (!tab) return
|
||||
setActiveFileTabId(tabId)
|
||||
setSelectedBackgroundTask(null)
|
||||
setExpandedFrom(null)
|
||||
// If chat-only maximize is active, drop back to a visible knowledge layout.
|
||||
if (isRightPaneMaximized) {
|
||||
setIsRightPaneMaximized(false)
|
||||
}
|
||||
if (isGraphTabPath(tab.path)) {
|
||||
setSelectedPath(null)
|
||||
setIsGraphOpen(true)
|
||||
return
|
||||
}
|
||||
setIsGraphOpen(false)
|
||||
setSelectedPath(tab.path)
|
||||
}, [fileTabs])
|
||||
}, [fileTabs, isRightPaneMaximized])
|
||||
|
||||
const closeFileTab = useCallback((tabId: string) => {
|
||||
const closingTab = fileTabs.find(t => t.id === tabId)
|
||||
if (closingTab) {
|
||||
if (closingTab && !isGraphTabPath(closingTab.path)) {
|
||||
removeEditorCacheForPath(closingTab.path)
|
||||
initialContentByPathRef.current.delete(closingTab.path)
|
||||
if (editorPathRef.current === closingTab.path) {
|
||||
|
|
@ -1788,15 +1873,23 @@ function App() {
|
|||
// Last file tab - close it and go back to chat
|
||||
setActiveFileTabId(null)
|
||||
setSelectedPath(null)
|
||||
setIsGraphOpen(false)
|
||||
return []
|
||||
}
|
||||
const idx = prev.findIndex(t => t.id === tabId)
|
||||
if (idx === -1) return prev
|
||||
const next = prev.filter(t => t.id !== tabId)
|
||||
if (tabId === activeFileTabId && next.length > 0) {
|
||||
const newIdx = Math.min(idx, next.length - 1)
|
||||
const newActiveTab = next[newIdx]
|
||||
setActiveFileTabId(newActiveTab.id)
|
||||
setSelectedPath(newActiveTab.path)
|
||||
if (isGraphTabPath(newActiveTab.path)) {
|
||||
setSelectedPath(null)
|
||||
setIsGraphOpen(true)
|
||||
} else {
|
||||
setIsGraphOpen(false)
|
||||
setSelectedPath(newActiveTab.path)
|
||||
}
|
||||
}
|
||||
return next
|
||||
})
|
||||
|
|
@ -1887,22 +1980,62 @@ function App() {
|
|||
return [...stack, entry]
|
||||
}, [])
|
||||
|
||||
const ensureFileTabForPath = useCallback((path: string) => {
|
||||
const existingTab = fileTabs.find((tab) => tab.path === path)
|
||||
if (existingTab) {
|
||||
setActiveFileTabId(existingTab.id)
|
||||
return
|
||||
}
|
||||
|
||||
if (activeFileTabId) {
|
||||
const activeTab = fileTabs.find((tab) => tab.id === activeFileTabId)
|
||||
if (activeTab && !isGraphTabPath(activeTab.path)) {
|
||||
setFileTabs((prev) => prev.map((tab) => (
|
||||
tab.id === activeFileTabId ? { ...tab, path } : tab
|
||||
)))
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const id = newFileTabId()
|
||||
setFileTabs((prev) => [...prev, { id, path }])
|
||||
setActiveFileTabId(id)
|
||||
}, [fileTabs, activeFileTabId])
|
||||
|
||||
const ensureGraphFileTab = useCallback(() => {
|
||||
const existingGraphTab = fileTabs.find((tab) => isGraphTabPath(tab.path))
|
||||
if (existingGraphTab) {
|
||||
setActiveFileTabId(existingGraphTab.id)
|
||||
return
|
||||
}
|
||||
const id = newFileTabId()
|
||||
setFileTabs((prev) => [...prev, { id, path: GRAPH_TAB_PATH }])
|
||||
setActiveFileTabId(id)
|
||||
}, [fileTabs])
|
||||
|
||||
const applyViewState = useCallback(async (view: ViewState) => {
|
||||
switch (view.type) {
|
||||
case 'file':
|
||||
setSelectedBackgroundTask(null)
|
||||
setIsGraphOpen(false)
|
||||
setExpandedFrom(null)
|
||||
setIsChatSidebarOpen(true)
|
||||
setIsRightPaneMaximized(false)
|
||||
// Preserve split vs knowledge-max mode when navigating knowledge files.
|
||||
// Only exit chat-only maximize, because that would hide the selected file.
|
||||
if (isRightPaneMaximized) {
|
||||
setIsRightPaneMaximized(false)
|
||||
}
|
||||
setSelectedPath(view.path)
|
||||
ensureFileTabForPath(view.path)
|
||||
return
|
||||
case 'graph':
|
||||
setSelectedBackgroundTask(null)
|
||||
setSelectedPath(null)
|
||||
setExpandedFrom(null)
|
||||
setIsGraphOpen(true)
|
||||
setIsRightPaneMaximized(false)
|
||||
ensureGraphFileTab()
|
||||
if (isRightPaneMaximized) {
|
||||
setIsRightPaneMaximized(false)
|
||||
}
|
||||
return
|
||||
case 'task':
|
||||
setSelectedPath(null)
|
||||
|
|
@ -1924,7 +2057,7 @@ function App() {
|
|||
}
|
||||
return
|
||||
}
|
||||
}, [handleNewChat, loadRun])
|
||||
}, [ensureFileTabForPath, ensureGraphFileTab, handleNewChat, isRightPaneMaximized, loadRun])
|
||||
|
||||
const navigateToView = useCallback(async (nextView: ViewState) => {
|
||||
const current = currentViewState
|
||||
|
|
@ -1993,22 +2126,8 @@ function App() {
|
|||
}, [viewHistory.forward, currentViewState])
|
||||
|
||||
const navigateToFile = useCallback((path: string) => {
|
||||
// If already open in a file tab, switch to it
|
||||
const existingTab = fileTabs.find(t => t.path === path)
|
||||
if (existingTab) {
|
||||
switchFileTab(existingTab.id)
|
||||
return
|
||||
}
|
||||
// Update current file tab or create one if none exists
|
||||
if (activeFileTabId) {
|
||||
setFileTabs(prev => prev.map(t => t.id === activeFileTabId ? { ...t, path } : t))
|
||||
} else {
|
||||
const id = newFileTabId()
|
||||
setFileTabs(prev => [...prev, { id, path }])
|
||||
setActiveFileTabId(id)
|
||||
}
|
||||
void navigateToView({ type: 'file', path })
|
||||
}, [navigateToView, fileTabs, activeFileTabId, switchFileTab])
|
||||
}, [navigateToView])
|
||||
|
||||
const navigateToFullScreenChat = useCallback(() => {
|
||||
// Only treat this as navigation when coming from another view
|
||||
|
|
@ -2099,8 +2218,13 @@ function App() {
|
|||
const targetPane: ShortcutPane = rightPaneAvailable
|
||||
? (isRightPaneMaximized ? 'right' : activeShortcutPane)
|
||||
: 'left'
|
||||
const inFileView = targetPane === 'left' && Boolean(selectedPath)
|
||||
const targetFileTabId = activeFileTabId ?? fileTabs.find((tab) => tab.path === selectedPath)?.id ?? null
|
||||
const inFileView = targetPane === 'left' && Boolean(selectedPath || isGraphOpen)
|
||||
const selectedKnowledgePath = isGraphOpen ? GRAPH_TAB_PATH : selectedPath
|
||||
const targetFileTabId = activeFileTabId ?? (
|
||||
selectedKnowledgePath
|
||||
? (fileTabs.find((tab) => tab.path === selectedKnowledgePath)?.id ?? null)
|
||||
: null
|
||||
)
|
||||
|
||||
// Cmd+W — close active tab
|
||||
if (e.key === 'w') {
|
||||
|
|
@ -2270,6 +2394,11 @@ function App() {
|
|||
}
|
||||
},
|
||||
openGraph: () => {
|
||||
// From chat-only landing state, open graph directly in full knowledge view.
|
||||
if (!selectedPath && !isGraphOpen && !selectedBackgroundTask) {
|
||||
setIsChatSidebarOpen(false)
|
||||
setIsRightPaneMaximized(false)
|
||||
}
|
||||
void navigateToView({ type: 'graph' })
|
||||
},
|
||||
expandAll: () => setExpandedPaths(new Set(collectDirPaths(tree))),
|
||||
|
|
@ -2335,7 +2464,7 @@ function App() {
|
|||
onOpenInNewTab: (path: string) => {
|
||||
openFileInNewTab(path)
|
||||
},
|
||||
}), [tree, selectedPath, workspaceRoot, navigateToFile, navigateToView, openFileInNewTab, fileTabs, closeFileTab, removeEditorCacheForPath])
|
||||
}), [tree, selectedPath, isGraphOpen, selectedBackgroundTask, workspaceRoot, navigateToFile, navigateToView, openFileInNewTab, fileTabs, closeFileTab, removeEditorCacheForPath])
|
||||
|
||||
// Handler for when a voice note is created/updated
|
||||
const handleVoiceNoteCreated = useCallback(async (notePath: string) => {
|
||||
|
|
@ -2619,6 +2748,7 @@ function App() {
|
|||
: null
|
||||
const isRightPaneContext = Boolean(selectedPath || isGraphOpen)
|
||||
const isRightPaneOnlyMode = isRightPaneContext && isChatSidebarOpen && isRightPaneMaximized
|
||||
const shouldCollapseLeftPane = isRightPaneOnlyMode
|
||||
const openMarkdownTabs = React.useMemo(() => {
|
||||
const markdownTabs = fileTabs.filter(tab => tab.path.endsWith('.md'))
|
||||
if (selectedPath?.endsWith('.md')) {
|
||||
|
|
@ -2655,7 +2785,6 @@ function App() {
|
|||
onSelectRun: (runIdToLoad) => {
|
||||
if (selectedPath || isGraphOpen) {
|
||||
setIsChatSidebarOpen(true)
|
||||
setIsRightPaneMaximized(false)
|
||||
}
|
||||
|
||||
// If already open in a chat tab, switch to it
|
||||
|
|
@ -2715,9 +2844,13 @@ function App() {
|
|||
backgroundTasks={backgroundTasks}
|
||||
selectedBackgroundTask={selectedBackgroundTask}
|
||||
/>
|
||||
{!isRightPaneOnlyMode && (
|
||||
<SidebarInset
|
||||
className="overflow-hidden! min-h-0 min-w-0"
|
||||
className={cn(
|
||||
"overflow-hidden! min-h-0 min-w-0 transition-[max-width] duration-200 ease-linear",
|
||||
shouldCollapseLeftPane && "pointer-events-none select-none"
|
||||
)}
|
||||
style={shouldCollapseLeftPane ? { maxWidth: 0 } : { maxWidth: '100%' }}
|
||||
aria-hidden={shouldCollapseLeftPane}
|
||||
onMouseDownCapture={() => setActiveShortcutPane('left')}
|
||||
onFocusCapture={() => setActiveShortcutPane('left')}
|
||||
>
|
||||
|
|
@ -2729,7 +2862,7 @@ function App() {
|
|||
canNavigateForward={canNavigateForward}
|
||||
collapsedLeftPaddingPx={collapsedLeftPaddingPx}
|
||||
>
|
||||
{selectedPath && fileTabs.length >= 1 ? (
|
||||
{(selectedPath || isGraphOpen) && fileTabs.length >= 1 ? (
|
||||
<TabBar
|
||||
tabs={fileTabs}
|
||||
activeTabId={activeFileTabId ?? ''}
|
||||
|
|
@ -2737,6 +2870,7 @@ function App() {
|
|||
getTabId={(t) => t.id}
|
||||
onSwitchTab={switchFileTab}
|
||||
onCloseTab={closeFileTab}
|
||||
allowSingleTabClose={fileTabs.length === 1 && isGraphOpen}
|
||||
/>
|
||||
) : (
|
||||
<TabBar
|
||||
|
|
@ -2749,14 +2883,6 @@ function App() {
|
|||
onCloseTab={closeChatTab}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsSearchOpen(true)}
|
||||
className="titlebar-no-drag flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
||||
aria-label="Search"
|
||||
>
|
||||
<SearchIcon className="size-4" />
|
||||
</button>
|
||||
{selectedPath && (
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground self-center shrink-0 pl-2">
|
||||
{isSaving ? (
|
||||
|
|
@ -2772,25 +2898,35 @@ function App() {
|
|||
) : null}
|
||||
</div>
|
||||
)}
|
||||
{!selectedPath && isGraphOpen && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => { void navigateToView({ type: 'chat', runId }) }}
|
||||
className="titlebar-no-drag text-foreground self-center shrink-0"
|
||||
>
|
||||
Close Graph
|
||||
</Button>
|
||||
{!selectedPath && !isGraphOpen && !selectedTask && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleNewChatTab}
|
||||
className="titlebar-no-drag flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors self-center shrink-0"
|
||||
aria-label="New chat tab"
|
||||
>
|
||||
<SquarePen className="size-5" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">New chat tab</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
{!selectedPath && !isGraphOpen && expandedFrom && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCloseFullScreenChat}
|
||||
className="titlebar-no-drag flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors self-center shrink-0"
|
||||
aria-label="Return to file"
|
||||
>
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCloseFullScreenChat}
|
||||
className="titlebar-no-drag flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors self-center shrink-0"
|
||||
aria-label="Restore two-pane view"
|
||||
>
|
||||
<Minimize2 className="size-5" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">Restore two-pane view</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
{(selectedPath || isGraphOpen) && (
|
||||
<Tooltip>
|
||||
|
|
@ -2799,17 +2935,13 @@ function App() {
|
|||
type="button"
|
||||
onClick={toggleKnowledgePane}
|
||||
className="titlebar-no-drag flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors -mr-1 self-center shrink-0"
|
||||
aria-label={isChatSidebarOpen
|
||||
? (selectedPath ? "Maximize knowledge view" : "Maximize main view")
|
||||
: "Restore two-pane view"}
|
||||
aria-label={isChatSidebarOpen ? "Maximize knowledge view" : "Restore two-pane view"}
|
||||
>
|
||||
{isChatSidebarOpen ? <Expand className="size-5" /> : <Shrink className="size-5" />}
|
||||
{isChatSidebarOpen ? <Maximize2 className="size-5" /> : <Minimize2 className="size-5" />}
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
{isChatSidebarOpen
|
||||
? (selectedPath ? "Maximize knowledge view" : "Maximize main view")
|
||||
: "Restore two-pane view"}
|
||||
{isChatSidebarOpen ? "Maximize knowledge view" : "Restore two-pane view"}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
|
@ -3009,7 +3141,6 @@ function App() {
|
|||
</FileCardProvider>
|
||||
)}
|
||||
</SidebarInset>
|
||||
)}
|
||||
|
||||
{/* Chat sidebar - shown when viewing files/graph */}
|
||||
{isRightPaneContext && (
|
||||
|
|
@ -3058,6 +3189,7 @@ function App() {
|
|||
canNavigateBack={canNavigateBack}
|
||||
canNavigateForward={canNavigateForward}
|
||||
onNewChat={handleNewChatTab}
|
||||
onOpenSearch={() => setIsSearchOpen(true)}
|
||||
leftInsetPx={isMac ? MACOS_TRAFFIC_LIGHTS_RESERVED_PX : 0}
|
||||
/>
|
||||
</SidebarProvider>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { Expand, Shrink, SquarePen } from 'lucide-react'
|
||||
import { Maximize2, Minimize2, SquarePen } from 'lucide-react'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
|
@ -154,6 +154,8 @@ export function ChatSidebar({
|
|||
const paneRef = useRef<HTMLDivElement>(null)
|
||||
const startXRef = useRef(0)
|
||||
const startWidthRef = useRef(0)
|
||||
const prevIsMaximizedRef = useRef(isMaximized)
|
||||
const justToggledMaximize = prevIsMaximizedRef.current !== isMaximized
|
||||
|
||||
const getMaxAllowedWidth = useCallback(() => {
|
||||
if (typeof window === 'undefined') return MAX_WIDTH
|
||||
|
|
@ -183,6 +185,10 @@ export function ChatSidebar({
|
|||
setShowContent(false)
|
||||
}, [isOpen])
|
||||
|
||||
useEffect(() => {
|
||||
prevIsMaximizedRef.current = isMaximized
|
||||
}, [isMaximized])
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') return
|
||||
try {
|
||||
|
|
@ -343,7 +349,7 @@ export function ChatSidebar({
|
|||
onFocusCapture={onActivate}
|
||||
className={cn(
|
||||
'relative flex min-w-0 flex-col overflow-hidden border-l border-border bg-background',
|
||||
!isResizing && 'transition-[width] duration-200 ease-linear'
|
||||
!isResizing && !justToggledMaximize && 'transition-[width] duration-200 ease-linear'
|
||||
)}
|
||||
style={paneStyle}
|
||||
>
|
||||
|
|
@ -394,7 +400,7 @@ export function ChatSidebar({
|
|||
className="titlebar-no-drag my-1 mr-2 h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
|
||||
aria-label={isMaximized ? 'Restore two-pane view' : 'Maximize chat view'}
|
||||
>
|
||||
{isMaximized ? <Shrink className="size-5" /> : <Expand className="size-5" />}
|
||||
{isMaximized ? <Minimize2 className="size-5" /> : <Maximize2 className="size-5" />}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
|
|
|
|||
|
|
@ -820,6 +820,36 @@ function KnowledgeSection({
|
|||
onVoiceNoteCreated?: (path: string) => void
|
||||
}) {
|
||||
const isExpanded = expandedPaths.size > 0
|
||||
const treeContainerRef = React.useRef<HTMLDivElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedPath) return
|
||||
|
||||
let cancelled = false
|
||||
let rafId: number | null = null
|
||||
let attempts = 0
|
||||
const maxAttempts = 20
|
||||
|
||||
const revealActiveFile = () => {
|
||||
if (cancelled) return
|
||||
const container = treeContainerRef.current
|
||||
if (!container) return
|
||||
const activeRow = container.querySelector<HTMLElement>('[data-knowledge-active="true"]')
|
||||
if (activeRow) {
|
||||
activeRow.scrollIntoView({ block: "nearest", inline: "nearest" })
|
||||
return
|
||||
}
|
||||
if (attempts >= maxAttempts) return
|
||||
attempts += 1
|
||||
rafId = requestAnimationFrame(revealActiveFile)
|
||||
}
|
||||
|
||||
rafId = requestAnimationFrame(revealActiveFile)
|
||||
return () => {
|
||||
cancelled = true
|
||||
if (rafId !== null) cancelAnimationFrame(rafId)
|
||||
}
|
||||
}, [selectedPath, expandedPaths, tree])
|
||||
|
||||
const quickActions = [
|
||||
{ icon: FilePlus, label: "New Note", action: () => actions.createNote() },
|
||||
|
|
@ -865,18 +895,20 @@ function KnowledgeSection({
|
|||
</Tooltip>
|
||||
</div>
|
||||
<SidebarGroupContent className="flex-1 overflow-y-auto">
|
||||
<SidebarMenu>
|
||||
{tree.map((item, index) => (
|
||||
<Tree
|
||||
key={index}
|
||||
item={item}
|
||||
selectedPath={selectedPath}
|
||||
expandedPaths={expandedPaths}
|
||||
onSelect={onSelectFile}
|
||||
actions={actions}
|
||||
/>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
<div ref={treeContainerRef}>
|
||||
<SidebarMenu>
|
||||
{tree.map((item, index) => (
|
||||
<Tree
|
||||
key={index}
|
||||
item={item}
|
||||
selectedPath={selectedPath}
|
||||
expandedPaths={expandedPaths}
|
||||
onSelect={onSelectFile}
|
||||
actions={actions}
|
||||
/>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</div>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</ContextMenuTrigger>
|
||||
|
|
@ -935,7 +967,7 @@ function Tree({
|
|||
try {
|
||||
await actions.rename(item.path, trimmedName, isDir)
|
||||
toast('Renamed successfully', 'success')
|
||||
} catch (err) {
|
||||
} catch {
|
||||
toast('Failed to rename', 'error')
|
||||
}
|
||||
}
|
||||
|
|
@ -950,7 +982,7 @@ function Tree({
|
|||
try {
|
||||
await actions.remove(item.path)
|
||||
toast('Moved to trash', 'success')
|
||||
} catch (err) {
|
||||
} catch {
|
||||
toast('Failed to delete', 'error')
|
||||
}
|
||||
}
|
||||
|
|
@ -1045,7 +1077,11 @@ function Tree({
|
|||
return (
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild>
|
||||
<SidebarMenuItem className="group/file-item">
|
||||
<SidebarMenuItem
|
||||
className="group/file-item"
|
||||
data-knowledge-file-path={item.path}
|
||||
data-knowledge-active={isSelected ? "true" : "false"}
|
||||
>
|
||||
<SidebarMenuButton
|
||||
isActive={isSelected}
|
||||
onClick={(e) => {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ interface TabBarProps<T> {
|
|||
onSwitchTab: (tabId: string) => void
|
||||
onCloseTab: (tabId: string) => void
|
||||
layout?: 'fill' | 'scroll'
|
||||
allowSingleTabClose?: boolean
|
||||
}
|
||||
|
||||
export function TabBar<T>({
|
||||
|
|
@ -32,6 +33,7 @@ export function TabBar<T>({
|
|||
onSwitchTab,
|
||||
onCloseTab,
|
||||
layout = 'fill',
|
||||
allowSingleTabClose = false,
|
||||
}: TabBarProps<T>) {
|
||||
return (
|
||||
<div
|
||||
|
|
@ -69,7 +71,7 @@ export function TabBar<T>({
|
|||
<span className="size-1.5 shrink-0 rounded-full bg-emerald-500 animate-pulse" />
|
||||
)}
|
||||
<span className="truncate flex-1 text-left">{title}</span>
|
||||
{tabs.length > 1 && (
|
||||
{(allowSingleTabClose || tabs.length > 1) && (
|
||||
<span
|
||||
role="button"
|
||||
className="shrink-0 flex items-center justify-center rounded-sm p-0.5 opacity-0 group-hover/tab:opacity-60 hover:opacity-100! hover:bg-foreground/10 transition-all"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue