apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-27 09:46:25 +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

42
surfsense_web/components/chat_v2/ChatTerminal.tsx
View file

@ -3,31 +3,24 @@
import React from "react";
import { getAnnotationData, Message } from "@llamaindex/chat-ui";
export default function TerminalDisplay({ messages }: { messages: Message[] }) {
export default function TerminalDisplay({ message }: { message: 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) {
if (!message) {
return <></>;
}
const annotations = getAnnotationData(lastAssistantMessage, "agent_events");
if (annotations.length === 0) {
return <></>;
interface TerminalInfo {
id: number;
text: string;
type: string;
}
// 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);
}
});
const events = getAnnotationData(
message,
"TERMINAL_INFO"
) as TerminalInfo[];
if (events.length === 0) {
return <></>;
@ -85,16 +78,17 @@ export default function TerminalDisplay({ messages }: { messages: Message[] }) {
{!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">
<div
key={`${event.id}-${index}`}
className="text-green-400"
>
<span className="text-blue-400">$</span>
<span className="text-yellow-400 ml-2">
[{event.status || "completed"}]
[{event.type || ""}]
</span>
<span className="text-gray-300 ml-4 mt-1 pl-2 border-l-2 border-gray-600">
{event.text || ""}...
</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 && (