Added chat terminal to display terminal logs

This commit is contained in:
Utkarsh-Patel-13 2025-07-22 18:53:25 -07:00
parent 1e441e07a3
commit 6af9805927
3 changed files with 161 additions and 31 deletions

View file

@ -5,11 +5,14 @@ import {
ChatHandler,
ChatCanvas,
ChatMessages,
useChatUI,
ChatMessage,
} from "@llamaindex/chat-ui";
import { Document } from "@/hooks/use-documents";
import { CustomChatInput } from "@/components/chat_v2/ChatInputGroup";
import { ResearchMode } from "@/components/chat";
import React from "react";
import TerminalDisplay from "@/components/chat_v2/ChatTerminal";
interface ChatInterfaceProps {
handler: ChatHandler;
@ -23,6 +26,30 @@ interface ChatInterfaceProps {
onResearchModeChange?: (mode: ResearchMode) => void;
}
function ChatMessageDisplay() {
const { messages } = useChatUI();
return (
<ChatMessages className="flex-1">
<ChatMessages.List className="p-4">
{messages.map((message, index) => (
<div key={`Message-${index}`}>
{message.role === "assistant" && (
<TerminalDisplay messages={messages} />
)}
<ChatMessage
key={index}
message={message}
isLast={index === messages.length - 1}
/>
</div>
))}
</ChatMessages.List>
<ChatMessages.Loading />
</ChatMessages>
);
}
export default function ChatInterface({
handler,
onDocumentSelectionChange,
@ -37,13 +64,7 @@ export default function ChatInterface({
return (
<ChatSection handler={handler} className="flex h-full">
<div className="flex flex-1 flex-col">
<ChatMessages className="flex-1">
<ChatMessages.List className="p-4">
{/* Custom message rendering */}
</ChatMessages.List>
<ChatMessages.Loading />
</ChatMessages>
<ChatMessageDisplay />
<div className="border-t p-4">
<CustomChatInput
onDocumentSelectionChange={onDocumentSelectionChange}