Skip to content

Gagik/poc assistant #7607

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

Draft
lerouxb wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Gagik/poc assistant #7607

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fae790a
chore: working tool calls
gagik Nov 4, 2025
3bc0eb8
chore: add approval
gagik Nov 5, 2025
81737ae
chore: status indicator
gagik Nov 5, 2025
05b5aec
chore: compact tool message
gagik Nov 5, 2025
94523ce
chore: automatic opening tool
gagik Nov 5, 2025
ba88c35
chore: connect automatically
gagik Nov 5, 2025
f5e02ae
chore: custom list collections view
gagik Nov 5, 2025
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
Prev Previous commit
Next Next commit
chore: compact tool message
  • Loading branch information
@gagik
gagik committed Nov 5, 2025
commit 05b5aeccb071e6155006600181aec6d80c6a54e9
50 changes: 29 additions & 21 deletions packages/compass-assistant/src/components/tool-call-message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
import { useMCPController } from '@mongodb-js/compass-generative-ai/provider';

const toolCallCardStyles = css({
padding: spacing[300],
padding: spacing[200],
borderRadius: spacing[200],
backgroundColor: palette.gray.light3,
border: `1px solid ${palette.gray.light2}`,
Expand All @@ -28,15 +28,15 @@ const toolHeaderStyles = css({
display: 'flex',
alignItems: 'center',
gap: spacing[200],
marginBottom: spacing[200],
marginBottom: spacing[100],
});

const toolIconContainerStyles = css({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: spacing[500],
height: spacing[500],
width: spacing[400],
height: spacing[400],
borderRadius: '4px',
backgroundColor: palette.white,
});
Expand All @@ -48,25 +48,25 @@ const toolIconContainerDarkModeStyles = css({
const toolNameStyles = css({
fontFamily: 'Source Code Pro, monospace',
fontWeight: 600,
fontSize: '13px',
lineHeight: '20px',
fontSize: '12px',
lineHeight: '16px',
});

const toolDescriptionStyles = css({
marginBottom: spacing[200],
fontSize: '13px',
lineHeight: '20px',
marginBottom: spacing[100],
fontSize: '12px',
lineHeight: '16px',
});

const inputLabelStyles = css({
fontWeight: 600,
fontSize: '13px',
fontSize: '12px',
});

const codeBlockStyles = css({
maxHeight: '200px',
overflowY: 'auto',
fontSize: '12px',
fontSize: '11px',
backgroundColor: palette.gray.light2,
padding: spacing[200],
borderRadius: '4px',
Expand All @@ -88,8 +88,10 @@ const expandableHeaderStyles = css({
marginTop: spacing[100],
borderRadius: '4px',
backgroundColor: palette.gray.light2,
transition: 'background-color color 0.2s ease-in-out',
'&:hover': {
backgroundColor: palette.gray.light1,
color: palette.black,
},
});

Expand All @@ -102,7 +104,7 @@ const expandableHeaderDarkModeStyles = css({

const expandableContentStyles = css({
marginTop: spacing[100],
padding: spacing[200],
padding: spacing[100],
borderRadius: '4px',
backgroundColor: palette.gray.light2,
});
Expand Down Expand Up @@ -130,6 +132,7 @@ const statusStyles = css({
const statusTextStyles = css({
color: palette.gray.dark1,
fontWeight: 500,
fontSize: '12px',
});

export interface ToolCallPart {
Expand Down Expand Up @@ -206,15 +209,13 @@ export const ToolCallMessage: React.FunctionComponent<ToolCallMessageProps> = ({
darkMode && toolIconContainerDarkModeStyles
)}
>
<Icon glyph="Wrench" size="small" />
<Icon glyph="Wrench" size="xsmall" />
</div>
<div>
<div className={toolNameStyles}>{toolName}</div>
<div className={toolNameStyles}>
<b>{toolName}</b>: {description}
</div>
</div>

<Body className={toolDescriptionStyles}>{description}</Body>

{/* Input Section */}
<div>
<div
Expand All @@ -233,7 +234,10 @@ export const ToolCallMessage: React.FunctionComponent<ToolCallMessageProps> = ({
}}
>
<span className={inputLabelStyles}>Input</span>
<Icon glyph={isInputExpanded ? 'ChevronDown' : 'ChevronRight'} />
<Icon
glyph={isInputExpanded ? 'ChevronDown' : 'ChevronRight'}
size="xsmall"
/>
</div>
{isInputExpanded && (
<div
Expand Down Expand Up @@ -273,7 +277,10 @@ export const ToolCallMessage: React.FunctionComponent<ToolCallMessageProps> = ({
}}
>
<span className={inputLabelStyles}>Output</span>
<Icon glyph={isOutputExpanded ? 'ChevronDown' : 'ChevronRight'} />
<Icon
glyph={isOutputExpanded ? 'ChevronDown' : 'ChevronRight'}
size="xsmall"
/>
</div>
{isOutputExpanded && (
<div
Expand Down Expand Up @@ -301,14 +308,14 @@ export const ToolCallMessage: React.FunctionComponent<ToolCallMessageProps> = ({
<Button
variant={ButtonVariant.Default}
onClick={() => onDeny?.(toolCall.approval!.id)}
size="default"
size="xsmall"
>
Deny
</Button>
<Button
variant={ButtonVariant.Primary}
onClick={() => onApprove?.(toolCall.approval!.id)}
size="default"
size="xsmall"
>
Allow
</Button>
Expand All @@ -321,6 +328,7 @@ export const ToolCallMessage: React.FunctionComponent<ToolCallMessageProps> = ({
<Icon
glyph={wasApproved ? 'CheckmarkWithCircle' : 'XWithCircle'}
color={palette.gray.dark1}
size="xsmall"
/>
<Body className={statusTextStyles} weight="medium">
{wasApproved ? 'Tool call approved' : 'Tool call denied'}
Expand Down