Skip to content

fix(conversations): Improve tool badge rendering and overflow behavior #115880

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

Merged
obostjancic merged 16 commits into from
May 21, 2026
Merged

fix(conversations): Improve tool badge rendering and overflow behavior #115880

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
60eca4e
fix(conversations): Improve tool badge rendering and overflow behavior
obostjancic May 20, 2026
a2d6ff3
fix(conversations): Fix tag text truncation and show badges in overfl…
obostjancic May 20, 2026
87669cc
fix(conversations): Remove fixed maxWidth from tool names tooltip
obostjancic May 20, 2026
b9dfa15
fix(conversations): Make entire tool call row show selected state
obostjancic May 20, 2026
baa1db6
fix(conversations): Only truncate the last visible tool tag, not all …
obostjancic May 20, 2026
18ff3bd
ref(conversations): Simplify last-tag flex style using map arr argument
obostjancic May 21, 2026
7a1fc9e
Merge branch 'master' into ognjenbostjancic/tet-2365-improve-renderin…
obostjancic May 21, 2026
957d236
use info text
obostjancic May 21, 2026
1d66e2b
cursor bot fixes
obostjancic May 21, 2026
5668b35
last tag fixed
obostjancic May 21, 2026
83ce7c3
:hammer_and_wrench: apply pre-commit fixes
getsantry[bot] May 21, 2026
cefd566
simplify
obostjancic May 21, 2026
745a553
Merge branch 'master' into ognjenbostjancic/tet-2365-improve-renderin…
obostjancic May 21, 2026
61c8508
fix
obostjancic May 21, 2026
01b079a
:hammer_and_wrench: apply pre-commit fixes
getsantry[bot] May 21, 2026
b011ecd
fix(conversations): Also escape backslashes in conversation ID query
obostjancic May 21, 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
6 changes: 1 addition & 5 deletions static/app/components/core/badge/tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,11 +115,7 @@ const Text = styled('div')`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

/* @TODO(jonasbadalic): Some occurrences pass other things than strings into the children prop. */
Comment thread
obostjancic marked this conversation as resolved.
display: flex;
align-items: center;
gap: ${p => p.theme.space.xs};
min-width: 0;
`;

const IconWrapper = styled('span')`
Expand Down
57 changes: 36 additions & 21 deletions static/app/views/explore/conversations/components/conversationSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,30 +183,38 @@ export function ConversationAggregatesBar({
<Text size="sm" bold variant="muted" wrap="nowrap">
{t('Used Tools')}
</Text>
{aggregates.toolNames.slice(0, VISIBLE_TOOL_COUNT).map(name => (
<Tag key={name} variant="info">
{name}
</Tag>
{aggregates.toolNames.slice(0, VISIBLE_TOOL_COUNT).map((name, index, arr) => (
<Tooltip key={name} title={name} showOnlyOnOverflow skipWrapper>
<Tag
variant="info"
style={
index === arr.length - 1
? {flexShrink: 1, minWidth: 0}
: {flexShrink: 0}
}
>
{name}
</Tag>
</Tooltip>
Comment thread
obostjancic marked this conversation as resolved.
Outdated
))}
{aggregates.toolNames.length > VISIBLE_TOOL_COUNT && (
<DropdownMenu
size="sm"
triggerLabel={
<Text size="sm" variant="muted">
{t('+%s more', aggregates.toolNames.length - VISIBLE_TOOL_COUNT)}
</Text>
<Tooltip
title={
<MoreToolsTooltip>
{aggregates.toolNames.slice(VISIBLE_TOOL_COUNT).map(name => (
<Tag key={name} variant="info">
{name}
</Tag>
))}
</MoreToolsTooltip>
}
triggerProps={{
size: 'zero',
variant: 'transparent',
showChevron: false,
}}
items={aggregates.toolNames.slice(VISIBLE_TOOL_COUNT).map(name => ({
key: name,
label: <Tag variant="info">{name}</Tag>,
textValue: name,
}))}
/>
isHoverable
skipWrapper
>
<Text size="sm" variant="muted" wrap="nowrap">
Copy link
Copy Markdown
Collaborator

@TkDodo TkDodo May 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we use <InfoText> here instead of Text with a tooltip ?

{t('+%s more', aggregates.toolNames.length - VISIBLE_TOOL_COUNT)}
</Text>
</Tooltip>
)}
</ToolTagsRow>
)
Expand Down Expand Up @@ -405,3 +413,10 @@ function ToolTagsRow({children}: {children: React.ReactNode}) {
</Flex>
);
}

const MoreToolsTooltip = styled('div')`
display: flex;
flex-wrap: wrap;
gap: ${p => p.theme.space.xs};
padding: ${p => p.theme.space.xs} 0;
`;
Copy link
Copy Markdown
Collaborator

@TkDodo TkDodo May 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should please be the Flex primitive component - no more styled divs if possible.

Comment thread
cursor[bot] marked this conversation as resolved.
Outdated
15 changes: 5 additions & 10 deletions static/app/views/explore/conversations/components/messageToolCalls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ export function MessageToolCalls({
radius="sm"
padding="xs sm"
cursor="pointer"
hasError={tool.hasError}
isSelected={isToolSelected}
onClick={(e: React.MouseEvent) => {
e.stopPropagation();
trackAnalytics('conversations.message.click-tool-call', {organization});
Expand All @@ -52,14 +54,12 @@ export function MessageToolCalls({
{t('Called tool')}
</Text>
</Container>
<ClickableTag
<Tag
variant={tool.hasError ? 'danger' : 'info'}
icon={tool.hasError ? <IconFire /> : undefined}
hasError={tool.hasError}
isSelected={isToolSelected}
>
{tool.name}
</ClickableTag>
</Tag>
{toolNode && <ToolInputPreview node={toolNode} />}
</Flex>
</ToolCallLine>
Expand All @@ -81,15 +81,10 @@ function ToolInputPreview({node}: {node: AITraceSpanNode}) {
);
}

const ToolCallLine = styled(Container)`
const ToolCallLine = styled(Container)<{hasError?: boolean; isSelected?: boolean}>`
&:hover {
opacity: 0.85;
}
`;

const ClickableTag = styled(Tag)<{hasError?: boolean; isSelected?: boolean}>`
cursor: pointer;
padding: 0 ${p => p.theme.space.xs};
${p =>
p.isSelected &&
`
Expand Down
1 change: 1 addition & 0 deletions static/app/views/explore/conversations/components/toolTags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export function ToolTags({toolNames}: ToolTagsProps) {
}
}}
variant="info"
style={{maxWidth: '100%', minWidth: 0}}
>
{toolName}
</Tag>
Expand Down
Loading