Skip to content

Add expand/collapse toggle for input/output messages in span overview #1070

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chamals3n4 wants to merge 5 commits into
base: main
Choose a base branch
from
+114 −76
Open

Add expand/collapse toggle for input/output messages in span overview #1070

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
898c1db
Add expand/collapse toggle for input/output messages in span overview
chamals3n4 Jun 15, 2026
8c89f41
make the input section expand by default
chamals3n4 Jun 15, 2026
64ce77a
use oxygen ui accordion
chamals3n4 Jun 18, 2026
cdc77ac
rm comment
chamals3n4 Jun 22, 2026
f0fbd3c
Update console/workspaces/pages/traces/src/subComponents/spanDetails/…
chamals3n4 Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 114 additions & 76 deletions console/workspaces/pages/traces/src/subComponents/spanDetails/Overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,15 @@
* under the License.
*/

import { NoDataFound, JSONView, MarkdownView } from "@agent-management-platform/views";
import {
NoDataFound,
JSONView,
MarkdownView,
} from "@agent-management-platform/views";
import {
Accordion,
AccordionSummary,
AccordionDetails,
Box,
Card,
CardContent,
Expand All @@ -26,15 +33,15 @@ import {
Stack,
Typography,
} from "@wso2/oxygen-ui";
import { Info } from "@wso2/oxygen-ui-icons-react";
import { Info, ChevronDown } from "@wso2/oxygen-ui-icons-react";
import {
AmpAttributes,
PromptMessage,
ToolData,
AgentData,
CrewAITaskData,
} from "@agent-management-platform/types";
import { memo, useCallback, useMemo } from "react";
import { memo, useCallback, useMemo, useState } from "react";

interface OverviewProps {
ampAttributes?: AmpAttributes;
Expand All @@ -46,6 +53,7 @@ interface MessageListProps {
getRoleColor: (role: string) => "default" | "primary" | "success" | "info";
"data-testid"?: string;
showEmptyMessage?: boolean;
defaultExpanded?: boolean;
}

function formattedMessage(message: string) {
Expand Down Expand Up @@ -99,7 +107,10 @@ const MessageList = memo(function MessageList({
getRoleColor,
"data-testid": testId,
showEmptyMessage = false,
defaultExpanded = false,
}: MessageListProps) {
const [isExpanded, setIsExpanded] = useState(defaultExpanded);

if (messages.length === 0) {
if (!showEmptyMessage) {
return null;
Expand All @@ -124,86 +135,112 @@ const MessageList = memo(function MessageList({
return (
<Stack pt={2} data-testid={testId}>
<Divider sx={{ mb: 2 }} />
<Typography variant="h6" sx={{ mb: 2 }}>
{title}
</Typography>
<Stack spacing={2}>
{messages.map((message, index) => {
const messageKey =
(message as PromptMessage & { id?: string }).id ?? index;
return (
<Card key={messageKey} variant="outlined">
<CardContent>
<Stack spacing={1.5}>
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
{message?.role && message.role !== "unknown" && (
<Chip
label={
message.role.charAt(0).toUpperCase() +
message.role.slice(1)
}
size="small"
color={getRoleColor(message.role)}
variant="outlined"
/>
)}
</Box>
{message.content && !message.role && (
<JSONView json={formattedMessage(message.content)} />
)}
{message.content && message.role && (
<MarkdownView content={message.content} />
)}
{message.toolCalls && message.toolCalls.length > 0 && (
<Box>
<Stack spacing={1}>
{message.toolCalls.map((toolCall, toolIndex) => {
const toolCallKey = toolCall.id ?? toolIndex;
<Accordion
expanded={isExpanded}
onChange={(_, expanded) => setIsExpanded(expanded)}
disableGutters
elevation={0}
sx={{
bgcolor: "transparent",
border: "none",
"&:before": { display: "none" },
}}
>
<AccordionSummary
expandIcon={<ChevronDown />}
sx={{
px: 0,
minHeight: "auto",
"& .MuiAccordionSummary-content": { my: 1 },
}}
>
<Typography variant="h6">{title}</Typography>
</AccordionSummary>
<AccordionDetails sx={{ px: 0 }}>
<Stack spacing={2}>
{messages.map((message, index) => {
const messageKey =
(message as PromptMessage & { id?: string }).id ?? index;
return (
<Card key={messageKey} variant="outlined">
<CardContent>
<Stack spacing={1.5}>
<Box
sx={{ display: "flex", alignItems: "center", gap: 1 }}
>
{message?.role && message.role !== "unknown" && (
<Chip
label={
message.role.charAt(0).toUpperCase() +
message.role.slice(1)
}
size="small"
color={getRoleColor(message.role)}
variant="outlined"
/>
)}
</Box>
{message.content && !message.role && (
<JSONView json={formattedMessage(message.content)} />
)}
{message.content && message.role && (
<MarkdownView content={message.content} />
)}
{message.toolCalls && message.toolCalls.length > 0 && (
<Box>
<Stack spacing={1}>
{message.toolCalls.map((toolCall, toolIndex) => {
const toolCallKey = toolCall.id ?? toolIndex;

return (
<Card key={toolCallKey} variant="outlined">
<CardContent sx={{ "&:last-child": { pb: 1.5 } }}>
<Typography
variant="caption"
sx={{ fontWeight: "bold" }}
>
{toolCall.name}
</Typography>
{toolCall.arguments && (
<Typography
variant="caption"
sx={{
display: "block",
mt: 0.5,
fontFamily: "monospace",
whiteSpace: "pre-wrap",
wordBreak: "break-word",
}}
return (
<Card key={toolCallKey} variant="outlined">
<CardContent
sx={{ "&:last-child": { pb: 1.5 } }}
>
{formattedMessage(toolCall.arguments)}
</Typography>
)}
</CardContent>
</Card>
);
})}
</Stack>
</Box>
)}
</Stack>
</CardContent>
</Card>
);
})}
</Stack>
<Typography
variant="caption"
sx={{ fontWeight: "bold" }}
>
{toolCall.name}
</Typography>
{toolCall.arguments && (
<Typography
variant="caption"
sx={{
display: "block",
mt: 0.5,
fontFamily: "monospace",
whiteSpace: "pre-wrap",
wordBreak: "break-word",
}}
>
{formattedMessage(toolCall.arguments)}
</Typography>
)}
</CardContent>
</Card>
);
})}
</Stack>
</Box>
)}
</Stack>
</CardContent>
</Card>
);
})}
</Stack>
</AccordionDetails>
</Accordion>
</Stack>
);
});

export function Overview({ ampAttributes }: OverviewProps) {
const normalizeMessages = useCallback(
(
input: PromptMessage[] | string[] | string | undefined
input: PromptMessage[] | string[] | string | undefined,
): (Partial<PromptMessage> | { content: string })[] => {
if (!input) return [];
if (typeof input === "string") {
Expand All @@ -220,17 +257,17 @@ export function Overview({ ampAttributes }: OverviewProps) {
// Handle PromptMessage arrays
return input as PromptMessage[];
},
[]
[],
);

const inputMessages = useMemo(
() => normalizeMessages(ampAttributes?.input),
[ampAttributes?.input, normalizeMessages]
[ampAttributes?.input, normalizeMessages],
);

const outputMessages = useMemo(
() => normalizeMessages(ampAttributes?.output),
[ampAttributes?.output, normalizeMessages]
[ampAttributes?.output, normalizeMessages],
);

// Extract name from data based on kind
Expand Down Expand Up @@ -349,6 +386,7 @@ export function Overview({ ampAttributes }: OverviewProps) {
getRoleColor={getRoleColor}
data-testid="input-messages"
showEmptyMessage={false}
defaultExpanded
/>
<MessageList
title="Output Messages"
Expand Down