Minor fixes and renaming to new chat ui components

This commit is contained in:
Utkarsh-Patel-13 2025-07-25 16:07:42 -07:00
parent 5197269c43
commit 246e3d61ed
8 changed files with 616 additions and 473 deletions

View file

@ -2,21 +2,13 @@
import React from "react";
import {
ChatSection,
ChatSection as LlamaIndexChatSection,
ChatHandler,
ChatCanvas,
ChatMessages,
useChatUI,
ChatMessage,
Message,
} from "@llamaindex/chat-ui";
import { Document } from "@/hooks/use-documents";
import { CustomChatInput } from "@/components/chat_v2/ChatInputGroup";
import { ChatInputUI } from "@/components/chat_v2/ChatInputGroup";
import { ResearchMode } from "@/components/chat";
import TerminalDisplay from "@/components/chat_v2/ChatTerminal";
import ChatSourcesDisplay from "@/components/chat_v2/ChatSources";
import { CitationDisplay } from "@/components/chat_v2/ChatCitation";
import { ChatFurtherQuestions } from "@/components/chat_v2/ChatFurtherQuestions";
import { ChatMessagesUI } from "@/components/chat_v2/ChatMessages";
interface ChatInterfaceProps {
handler: ChatHandler;
@ -30,60 +22,6 @@ interface ChatInterfaceProps {
onResearchModeChange?: (mode: ResearchMode) => void;
}
function ChatMessageDisplay({
message,
isLast,
}: {
message: Message;
isLast: boolean;
}) {
return (
<ChatMessage
message={message}
isLast={isLast}
className="flex flex-col "
>
{message.role === "assistant" ? (
<div className="flex-1 flex flex-col space-y-4">
<TerminalDisplay message={message} open={isLast} />
<ChatSourcesDisplay message={message} />
<ChatMessage.Content className="flex-1">
<ChatMessage.Content.Markdown citationComponent={CitationDisplay} />
</ChatMessage.Content>
<div className="flex flex-row justify-end gap-2">
{isLast && <ChatFurtherQuestions message={message} />}
<ChatMessage.Actions className="flex-1 flex-row" />
</div>
</div>
) : (
<ChatMessage.Content className="flex-1">
<ChatMessage.Content.Markdown />
</ChatMessage.Content>
)}
</ChatMessage>
);
}
function ChatMessagesDisplay() {
const { messages } = useChatUI();
return (
<ChatMessages className="flex-1">
<ChatMessages.List className="p-4">
{messages.map((message, index) => (
<ChatMessageDisplay
key={`Message-${index}`}
message={message}
isLast={index === messages.length - 1}
/>
))}
</ChatMessages.List>
<ChatMessages.Loading />
</ChatMessages>
);
}
export default function ChatInterface({
handler,
onDocumentSelectionChange,
@ -96,11 +34,11 @@ export default function ChatInterface({
onResearchModeChange,
}: ChatInterfaceProps) {
return (
<ChatSection handler={handler} className="flex h-full">
<LlamaIndexChatSection handler={handler} className="flex h-full">
<div className="flex flex-1 flex-col">
<ChatMessagesDisplay />
<ChatMessagesUI />
<div className="border-t p-4">
<CustomChatInput
<ChatInputUI
onDocumentSelectionChange={onDocumentSelectionChange}
selectedDocuments={selectedDocuments}
onConnectorSelectionChange={onConnectorSelectionChange}
@ -113,7 +51,6 @@ export default function ChatInterface({
</div>
</div>
<ChatCanvas className="w-1/2 border-l" />
</ChatSection>
</LlamaIndexChatSection>
);
}