fix(chat): move toolbar to Header and add New Session button
- Move ChatToolbar (session selector, refresh, thinking toggle) from the Chat page body into the Header component, so controls appear at the same level as the "Chat" title - Add New Session button (+) to create a fresh conversation - Add newSession action to chat store - Header conditionally renders ChatToolbar only on /chat route - Chat page fills full content area without duplicate toolbar
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
/**
|
||||
* Chat Toolbar
|
||||
* Session selector, refresh, and thinking toggle controls.
|
||||
* Session selector, new session, refresh, and thinking toggle.
|
||||
* Rendered in the Header when on the Chat page.
|
||||
*/
|
||||
import { RefreshCw, Brain, ChevronDown } from 'lucide-react';
|
||||
import { RefreshCw, Brain, ChevronDown, Plus } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useChatStore } from '@/stores/chat';
|
||||
import { cn } from '@/lib/utils';
|
||||
@@ -11,6 +12,7 @@ export function ChatToolbar() {
|
||||
const sessions = useChatStore((s) => s.sessions);
|
||||
const currentSessionKey = useChatStore((s) => s.currentSessionKey);
|
||||
const switchSession = useChatStore((s) => s.switchSession);
|
||||
const newSession = useChatStore((s) => s.newSession);
|
||||
const refresh = useChatStore((s) => s.refresh);
|
||||
const loading = useChatStore((s) => s.loading);
|
||||
const showThinking = useChatStore((s) => s.showThinking);
|
||||
@@ -51,6 +53,17 @@ export function ChatToolbar() {
|
||||
<ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
|
||||
</div>
|
||||
|
||||
{/* New Session */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={newSession}
|
||||
title="New session"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
{/* Refresh */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
||||
@@ -10,7 +10,6 @@ import { Card, CardContent } from '@/components/ui/card';
|
||||
import { useChatStore } from '@/stores/chat';
|
||||
import { useGatewayStore } from '@/stores/gateway';
|
||||
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
|
||||
import { ChatToolbar } from './ChatToolbar';
|
||||
import { ChatMessage } from './ChatMessage';
|
||||
import { ChatInput } from './ChatInput';
|
||||
import { extractText } from './message-utils';
|
||||
@@ -63,13 +62,7 @@ export function Chat() {
|
||||
const streamText = streamingMessage ? extractText(streamingMessage) : '';
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-4rem)] flex-col">
|
||||
{/* Toolbar: session selector, refresh, thinking toggle */}
|
||||
<div className="flex items-center justify-between px-4 py-2 border-b">
|
||||
<div /> {/* spacer */}
|
||||
<ChatToolbar />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col -m-6" style={{ height: 'calc(100vh - 3.5rem)' }}>
|
||||
{/* Messages Area */}
|
||||
<div className="flex-1 overflow-y-auto px-4 py-4">
|
||||
<div className="max-w-4xl mx-auto space-y-4">
|
||||
|
||||
Reference in New Issue
Block a user