mirror of
https://github.com/MODSetter/SurfSense.git
synced 2025-09-01 10:09:08 +00:00
Added chat terminal to display terminal logs
This commit is contained in:
Utkarsh-Patel-13
parent
1e441e07a3
commit
6af9805927
3 changed files with 161 additions and 31 deletions
|
|
@ -6,22 +6,10 @@ class StreamingService:
|
|||
def __init__(self):
|
||||
self.terminal_idx = 1
|
||||
self.message_annotations = [
|
||||
{
|
||||
"type": "TERMINAL_INFO",
|
||||
"content": []
|
||||
},
|
||||
{
|
||||
"type": "SOURCES",
|
||||
"content": []
|
||||
},
|
||||
{
|
||||
"type": "ANSWER",
|
||||
"content": []
|
||||
},
|
||||
{
|
||||
"type": "FURTHER_QUESTIONS",
|
||||
"content": []
|
||||
}
|
||||
{"type": "TERMINAL_INFO", "content": []},
|
||||
{"type": "SOURCES", "content": []},
|
||||
{"type": "ANSWER", "content": []},
|
||||
{"type": "FURTHER_QUESTIONS", "content": []},
|
||||
]
|
||||
|
||||
# DEPRECATED: This sends the full annotation array every time (inefficient)
|
||||
|
|
@ -35,7 +23,7 @@ class StreamingService:
|
|||
Returns:
|
||||
str: The formatted annotations string
|
||||
"""
|
||||
return f'8:{json.dumps(self.message_annotations)}\n'
|
||||
return f"8:{json.dumps(self.message_annotations)}\n"
|
||||
|
||||
def format_terminal_info_delta(self, text: str, message_type: str = "info") -> str:
|
||||
"""
|
||||
|
|
@ -55,7 +43,17 @@ class StreamingService:
|
|||
self.message_annotations[0]["content"].append(message)
|
||||
|
||||
# Return only the delta annotation
|
||||
annotation = {"type": "TERMINAL_INFO", "content": [message]}
|
||||
# annotation = {"type": "TERMINAL_INFO", "content": [message]}
|
||||
agent_data = {
|
||||
"agent_name": "Terminal agent",
|
||||
"events": [
|
||||
{
|
||||
"status": message_type,
|
||||
"result": message.get("text", ""),
|
||||
}
|
||||
],
|
||||
}
|
||||
annotation = {"type": "agent_events", "data": agent_data}
|
||||
return f"8:[{json.dumps(annotation)}]\n"
|
||||
|
||||
def format_sources_delta(self, sources: List[Dict[str, Any]]) -> str:
|
||||
|
|
@ -155,14 +153,16 @@ class StreamingService:
|
|||
"""
|
||||
return f"3:{json.dumps(error_message)}\n"
|
||||
|
||||
def format_completion(self, prompt_tokens: int = 156, completion_tokens: int = 204) -> str:
|
||||
def format_completion(
|
||||
self, prompt_tokens: int = 156, completion_tokens: int = 204
|
||||
) -> str:
|
||||
"""
|
||||
Format a completion message
|
||||
|
||||
|
||||
Args:
|
||||
prompt_tokens: Number of prompt tokens
|
||||
completion_tokens: Number of completion tokens
|
||||
|
||||
|
||||
Returns:
|
||||
str: The formatted completion string
|
||||
"""
|
||||
|
|
@ -172,7 +172,7 @@ class StreamingService:
|
|||
"usage": {
|
||||
"promptTokens": prompt_tokens,
|
||||
"completionTokens": completion_tokens,
|
||||
"totalTokens": total_tokens
|
||||
}
|
||||
"totalTokens": total_tokens,
|
||||
},
|
||||
}
|
||||
return f'd:{json.dumps(completion_data)}\n'
|
||||
return f"d:{json.dumps(completion_data)}\n"
|
||||
|
|
|
|||
|
|
@ -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
109
surfsense_web/components/chat_v2/ChatTerminal.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue