refactor App and ChatSidebar components to replace Minimize2 icon with Shrink, enhance tooltip functionality, and streamline chat handling logic

This commit is contained in:
tusharmagar 2026-02-18 20:21:13 +05:30
parent abb9f9b2ca
commit 6495a1132a
2 changed files with 31 additions and 36 deletions

View file

@ -6,7 +6,7 @@ import type { LanguageModelUsage, ToolUIPart } from 'ai';
import './App.css' import './App.css'
import z from 'zod'; import z from 'zod';
import { Button } from './components/ui/button'; import { Button } from './components/ui/button';
import { CheckIcon, LoaderIcon, PanelLeftIcon, Expand, Minimize2, X, ChevronLeftIcon, ChevronRightIcon, SquarePen, SearchIcon } from 'lucide-react'; import { CheckIcon, LoaderIcon, PanelLeftIcon, Expand, Shrink, X, ChevronLeftIcon, ChevronRightIcon, SquarePen, SearchIcon } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { MarkdownEditor } from './components/markdown-editor'; import { MarkdownEditor } from './components/markdown-editor';
import { ChatSidebar } from './components/chat-sidebar'; import { ChatSidebar } from './components/chat-sidebar';
@ -43,7 +43,7 @@ import {
SidebarProvider, SidebarProvider,
useSidebar, useSidebar,
} from "@/components/ui/sidebar" } from "@/components/ui/sidebar"
import { TooltipProvider } from "@/components/ui/tooltip" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Toaster } from "@/components/ui/sonner" import { Toaster } from "@/components/ui/sonner"
import { stripKnowledgePrefix, toKnowledgePath, wikiLabel } from '@/lib/wiki-links' import { stripKnowledgePrefix, toKnowledgePath, wikiLabel } from '@/lib/wiki-links'
import { OnboardingModal } from '@/components/onboarding-modal' import { OnboardingModal } from '@/components/onboarding-modal'
@ -1802,19 +1802,16 @@ function App() {
setActiveChatTabId(id) setActiveChatTabId(id)
} }
handleNewChat() handleNewChat()
// In two-pane mode, keep the current knowledge/graph context and just reset chat. // Left-pane "new chat" should always open full chat view.
if (selectedPath || isGraphOpen) { if (selectedPath || isGraphOpen) {
setIsChatSidebarOpen(true) setExpandedFrom({ path: selectedPath, graph: isGraphOpen })
setIsRightPaneMaximized(false) } else {
return
}
// Outside two-pane mode, leave task detail view and return to chat.
if (selectedBackgroundTask) {
setExpandedFrom(null) setExpandedFrom(null)
setSelectedBackgroundTask(null)
} }
}, [chatTabs, activeChatTabId, handleNewChat, selectedPath, isGraphOpen, selectedBackgroundTask]) setIsRightPaneMaximized(false)
setSelectedPath(null)
setIsGraphOpen(false)
}, [chatTabs, activeChatTabId, handleNewChat, selectedPath, isGraphOpen])
// Sidebar variant: create/switch chat tab without leaving file/graph context. // Sidebar variant: create/switch chat tab without leaving file/graph context.
const handleNewChatTabInSidebar = useCallback(() => { const handleNewChatTabInSidebar = useCallback(() => {
@ -2657,15 +2654,7 @@ function App() {
currentRunId={runId} currentRunId={runId}
processingRunIds={processingRunIds} processingRunIds={processingRunIds}
tasksActions={{ tasksActions={{
onNewChat: () => { onNewChat: handleNewChatTab,
if (selectedPath || isGraphOpen) {
handleNewChatTabInSidebar()
setIsChatSidebarOpen(true)
setIsRightPaneMaximized(false)
return
}
handleNewChatTab()
},
onSelectRun: (runIdToLoad) => { onSelectRun: (runIdToLoad) => {
if (selectedPath || isGraphOpen) { if (selectedPath || isGraphOpen) {
setIsChatSidebarOpen(true) setIsChatSidebarOpen(true)
@ -2803,19 +2792,25 @@ function App() {
</button> </button>
)} )}
{(selectedPath || isGraphOpen) && ( {(selectedPath || isGraphOpen) && (
<button <Tooltip>
type="button" <TooltipTrigger asChild>
onClick={toggleKnowledgePane} <button
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" type="button"
aria-label={isChatSidebarOpen onClick={toggleKnowledgePane}
? (selectedPath ? "Maximize knowledge view" : "Maximize main view") 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"
: "Restore two-pane view"} aria-label={isChatSidebarOpen
title={isChatSidebarOpen ? (selectedPath ? "Maximize knowledge view" : "Maximize main view")
? (selectedPath ? "Maximize knowledge view" : "Maximize main view") : "Restore two-pane view"}
: "Restore two-pane view"} >
> {isChatSidebarOpen ? <Expand className="size-5" /> : <Shrink className="size-5" />}
{isChatSidebarOpen ? <Expand className="size-5" /> : <Minimize2 className="size-5" />} </button>
</button> </TooltipTrigger>
<TooltipContent side="bottom">
{isChatSidebarOpen
? (selectedPath ? "Maximize knowledge view" : "Maximize main view")
: "Restore two-pane view"}
</TooltipContent>
</Tooltip>
)} )}
</ContentHeader> </ContentHeader>

View file

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Expand, Minimize2, SquarePen } from 'lucide-react' import { Expand, Shrink, SquarePen } from 'lucide-react'
import type { ToolUIPart } from 'ai' import type { ToolUIPart } from 'ai'
import z from 'zod' import z from 'zod'
@ -419,7 +419,7 @@ export function ChatSidebar({
onClick={onOpenFullScreen} onClick={onOpenFullScreen}
className="titlebar-no-drag my-1 mr-2 h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground" className="titlebar-no-drag my-1 mr-2 h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
> >
{isMaximized ? <Minimize2 className="size-5" /> : <Expand className="size-5" />} {isMaximized ? <Shrink className="size-5" /> : <Expand className="size-5" />}
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="bottom"> <TooltipContent side="bottom">