apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 08:46:22 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Better layout for terminal and chat messages

Browse source
This commit is contained in:
Utkarsh-Patel-13 2025-07-22 20:36:52 -07:00
parent 6af9805927
commit 7c6437eef6
3 changed files with 57 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

50
surfsense_web/components/chat_v2/ChatInterface.tsx
View file

@ -7,6 +7,7 @@ import {
ChatMessages,
useChatUI,
ChatMessage,
Message,
} from "@llamaindex/chat-ui";
import { Document } from "@/hooks/use-documents";
import { CustomChatInput } from "@/components/chat_v2/ChatInputGroup";
@ -26,23 +27,48 @@ interface ChatInterfaceProps {
onResearchModeChange?: (mode: ResearchMode) => void;
}
function ChatMessageDisplay() {
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} />
<ChatMessage.Content className="flex-1">
<ChatMessage.Content.Markdown />
</ChatMessage.Content>
<ChatMessage.Actions className="flex-1 flex flex-row justify-end" />
</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) => (
<div key={`Message-${index}`}>
{message.role === "assistant" && (
<TerminalDisplay messages={messages} />
)}
<ChatMessage
key={index}
message={message}
isLast={index === messages.length - 1}
/>
</div>
<ChatMessageDisplay
key={`Message-${index}`}
message={message}
isLast={index === messages.length - 1}
/>
))}
</ChatMessages.List>
<ChatMessages.Loading />
@ -64,7 +90,7 @@ export default function ChatInterface({
return (
<ChatSection handler={handler} className="flex h-full">
<div className="flex flex-1 flex-col">
<ChatMessageDisplay />
<ChatMessagesDisplay />
<div className="border-t p-4">
<CustomChatInput
onDocumentSelectionChange={onDocumentSelectionChange}