Added chat terminal to display terminal logs

surfsense_backend/app/services/streaming_service.py

@@ -6,22 +6,10 @@ class StreamingService:
     def __init__(self):
         self.terminal_idx = 1
         self.message_annotations = [
-            {
+            {"type": "TERMINAL_INFO", "content": []},
-                "type": "TERMINAL_INFO",
+            {"type": "SOURCES", "content": []},
-                "content": []
+            {"type": "ANSWER", "content": []},
-            },
+            {"type": "FURTHER_QUESTIONS", "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"

surfsense_web/components/chat_v2/ChatInterface.tsx

@@ -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">
+                <ChatMessageDisplay />
-                    <ChatMessages.List className="p-4">
-                        {/* Custom message rendering */}
-                    </ChatMessages.List>
-                    <ChatMessages.Loading />
-                </ChatMessages>
-
                 <div className="border-t p-4">
                     <CustomChatInput
                         onDocumentSelectionChange={onDocumentSelectionChange}

surfsense_web/components/chat_v2/ChatTerminal.tsx

@@ -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>
+    );
+}