Template
112 lines
3.2 KiB
TypeScript
112 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { ChatInput } from './ChatInput';
|
|
import { ChatMessages } from './ChatMessages';
|
|
import { ChatPrompt } from './ChatPrompt';
|
|
import { ChatSidebar } from './ChatSidebar';
|
|
import { useChatSession } from '@/hooks/use-chat-session';
|
|
import type { PromptSuggestion } from '@/config/suggestions';
|
|
import { DEFAULT_OPENROUTER_MODEL_ID, type OpenRouterModelId } from '@/lib/openrouter';
|
|
import {
|
|
SidebarProvider,
|
|
SidebarInset,
|
|
SidebarTrigger,
|
|
} from '@/components/ui/sidebar';
|
|
|
|
interface ChatAgentProps {
|
|
suggestions?: PromptSuggestion[];
|
|
webSearchEnabled?: boolean;
|
|
defaultModelId?: OpenRouterModelId;
|
|
}
|
|
|
|
export function ChatAgent({
|
|
suggestions,
|
|
webSearchEnabled = false,
|
|
defaultModelId = DEFAULT_OPENROUTER_MODEL_ID,
|
|
}: ChatAgentProps) {
|
|
const {
|
|
inputValue,
|
|
setInputValue,
|
|
modelId,
|
|
setModelId,
|
|
chatId,
|
|
chats,
|
|
chatMessages,
|
|
status,
|
|
chatStatus,
|
|
aiError,
|
|
isPreparingFiles,
|
|
handleSelectChat,
|
|
handleNewChat,
|
|
handleDeleteChat,
|
|
handleSendMessage,
|
|
handleStop,
|
|
} = useChatSession(defaultModelId);
|
|
|
|
const hasMessages = chatMessages.length > 0;
|
|
|
|
return (
|
|
<SidebarProvider defaultOpen={false}>
|
|
<ChatSidebar
|
|
chats={chats}
|
|
activeChatId={chatId}
|
|
onSelectChat={handleSelectChat}
|
|
onNewChat={handleNewChat}
|
|
onDeleteChat={handleDeleteChat}
|
|
/>
|
|
<SidebarInset className="bg-muted">
|
|
{!hasMessages ? (
|
|
<div className="relative">
|
|
<div className="absolute top-2 left-2 z-10">
|
|
<SidebarTrigger />
|
|
</div>
|
|
<ChatPrompt
|
|
value={inputValue}
|
|
onChange={setInputValue}
|
|
onSubmit={handleSendMessage}
|
|
modelId={modelId}
|
|
onModelChange={setModelId}
|
|
onStop={isPreparingFiles ? undefined : handleStop}
|
|
status={chatStatus}
|
|
suggestions={suggestions}
|
|
webSearchEnabled={webSearchEnabled}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="relative flex h-screen flex-col bg-muted">
|
|
<div className="absolute top-2 left-2 z-10">
|
|
<SidebarTrigger />
|
|
</div>
|
|
<div className="flex-1 overflow-hidden">
|
|
<ChatMessages
|
|
messages={chatMessages}
|
|
status={status}
|
|
/>
|
|
</div>
|
|
<div className="sticky bottom-0 bg-muted p-4">
|
|
<div className="mx-auto max-w-3xl">
|
|
{aiError && (
|
|
<p role="alert" className="mb-3 text-sm text-destructive">
|
|
The response could not be completed. Please try again.
|
|
</p>
|
|
)}
|
|
<ChatInput
|
|
value={inputValue}
|
|
onChange={setInputValue}
|
|
onSubmit={handleSendMessage}
|
|
modelId={modelId}
|
|
onModelChange={setModelId}
|
|
onStop={isPreparingFiles ? undefined : handleStop}
|
|
status={chatStatus}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
);
|
|
}
|
|
|
|
export type { UIMessage as Message } from 'ai';
|