apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-26 01:06:23 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added chat terminal to display terminal logs

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

35
surfsense_web/components/chat_v2/ChatInterface.tsx
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}

109
surfsense_web/components/chat_v2/ChatTerminal.tsx Normal file
View file

@ -0,0 +1,109 @@
"use client";
import React from "react";
import { getAnnotationData, Message } from "@llamaindex/chat-ui";
export default function TerminalDisplay({ messages }: { messages: Message[] }) {
const [isCollapsed, setIsCollapsed] = React.useState(true);
// Get the last assistant message that's not being typed
const lastAssistantMessage = messages
.filter((msg) => msg.role === "assistant")
.pop();
if (!lastAssistantMessage) {
return <></>;
}
const annotations = getAnnotationData(lastAssistantMessage, "agent_events");
if (annotations.length === 0) {
return <></>;
}
// Get all agent events and combine them
const events: any[] = [];
annotations.forEach((annotation: any) => {
if (annotation?.events && Array.isArray(annotation.events)) {
events.push(...annotation.events);
}
});
if (events.length === 0) {
return <></>;
}
return (
<div className="bg-gray-900 rounded-lg border border-gray-700 overflow-hidden font-mono text-sm shadow-lg">
{/* Terminal Header */}
<div
className="bg-gray-800 px-4 py-2 flex items-center gap-2 border-b border-gray-700 cursor-pointer hover:bg-gray-750 transition-colors"
onClick={() => setIsCollapsed(!isCollapsed)}
>
<div className="flex gap-2">
<div className="w-3 h-3 rounded-full bg-red-500"></div>
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
<div className="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div className="text-gray-400 text-xs ml-2 flex-1">
Agent Process Terminal ({events.length} events)
</div>
<div className="text-gray-400">
{isCollapsed ? (
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
) : (
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 15l7-7 7 7"
/>
</svg>
)}
</div>
</div>
{/* Terminal Content */}
{!isCollapsed && (
<div className="h-64 overflow-y-auto p-4 space-y-1 bg-gray-900">
{events.map((event, index) => (
<div key={index} className="text-green-400">
<span className="text-blue-400">$</span>
<span className="text-yellow-400 ml-2">
[{event.status || "completed"}]
</span>
{event.result && (
<span className="text-gray-300 ml-4 mt-1 pl-2 border-l-2 border-gray-600">
{event.result.slice(0, 100)}...
</span>
)}
</div>
))}
{events.length === 0 && (
<div className="text-gray-500 italic">
No agent events to display...
</div>
)}
</div>
)}
</div>
);
}