Skip to content

Use the TooltippedIconButton in toolbars #319

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
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Use the TooltippedIconButton in toolbars #319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ad56195
TooltippedButton style according to the send button
brichet Nov 20, 2025
584fecf
Use the TooltippedIconButton for all the default input toolbar buttons
brichet Nov 20, 2025
46d3668
Use the TooltippedIconButton for message toolbar buttons
brichet Nov 20, 2025
48753a8
Use the TooltippedIconButton in the code toolbar
brichet Nov 20, 2025
88df735
Fix test
brichet Nov 20, 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
84 changes: 29 additions & 55 deletions packages/jupyter-chat/src/components/code-blocks/code-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
*/

import { addAboveIcon, addBelowIcon } from '@jupyterlab/ui-components';
import { Box, IconButton, Tooltip } from '@mui/material';
import { Box } from '@mui/material';
import React, { useEffect, useState } from 'react';

import { CopyButton } from './copy-button';
import { TooltippedIconButton } from '../mui-extras';
import { IActiveCellManager } from '../../active-cell-manager';
import { replaceCellIcon } from '../../icons';
import { IChatModel } from '../../model';
Expand Down Expand Up @@ -114,24 +115,15 @@ function InsertAboveButton(props: ToolbarButtonProps) {
: 'Insert above active cell (no active cell)';

return (
<Tooltip title={tooltip} placement="top" arrow>
<span>
<IconButton
className={props.className}
onClick={() => props.activeCellManager?.insertAbove(props.content)}
disabled={!props.activeCellAvailable}
aria-label={tooltip}
sx={{
lineHeight: 0,
'&.Mui-disabled': {
opacity: 0.5
}
}}
>
<addAboveIcon.react height="16px" width="16px" />
</IconButton>
</span>
</Tooltip>
<TooltippedIconButton
className={props.className}
tooltip={tooltip}
onClick={() => props.activeCellManager?.insertAbove(props.content)}
disabled={!props.activeCellAvailable}
inputToolbar={false}
>
<addAboveIcon.react height="16px" width="16px" />
</TooltippedIconButton>
);
}

Expand All @@ -141,24 +133,15 @@ function InsertBelowButton(props: ToolbarButtonProps) {
: 'Insert below active cell (no active cell)';

return (
<Tooltip title={tooltip} placement="top" arrow>
<span>
<IconButton
className={props.className}
disabled={!props.activeCellAvailable}
onClick={() => props.activeCellManager?.insertBelow(props.content)}
aria-label={tooltip}
sx={{
lineHeight: 0,
'&.Mui-disabled': {
opacity: 0.5
}
}}
>
<addBelowIcon.react height="16px" width="16px" />
</IconButton>
</span>
</Tooltip>
<TooltippedIconButton
className={props.className}
tooltip={tooltip}
disabled={!props.activeCellAvailable}
onClick={() => props.activeCellManager?.insertBelow(props.content)}
inputToolbar={false}
>
<addBelowIcon.react height="16px" width="16px" />
</TooltippedIconButton>
);
}

Expand Down Expand Up @@ -187,23 +170,14 @@ function ReplaceButton(props: ToolbarButtonProps) {
};

return (
<Tooltip title={tooltip} placement="top" arrow>
<span>
<IconButton
className={props.className}
disabled={disabled}
onClick={replace}
aria-label={tooltip}
sx={{
lineHeight: 0,
'&.Mui-disabled': {
opacity: 0.5
}
}}
>
<replaceCellIcon.react height="16px" width="16px" />
</IconButton>
</span>
</Tooltip>
<TooltippedIconButton
className={props.className}
tooltip={tooltip}
disabled={disabled}
onClick={replace}
inputToolbar={false}
>
<replaceCellIcon.react height="16px" width="16px" />
</TooltippedIconButton>
);
}
33 changes: 13 additions & 20 deletions packages/jupyter-chat/src/components/code-blocks/copy-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
* Distributed under the terms of the Modified BSD License.
*/

import { copyIcon } from '@jupyterlab/ui-components';
import React, { useState, useCallback, useRef } from 'react';

import { copyIcon } from '@jupyterlab/ui-components';
import { IconButton, Tooltip } from '@mui/material';
import { TooltippedIconButton } from '../mui-extras';

enum CopyStatus {
None,
Expand Down Expand Up @@ -61,23 +61,16 @@ export function CopyButton(props: CopyButtonProps): JSX.Element {
const tooltip = COPYBTN_TEXT_BY_STATUS[copyStatus];

return (
<Tooltip title={tooltip} placement="top" arrow>
<span>
<IconButton
disabled={isCopyDisabled}
className={props.className}
onClick={copy}
aria-label="Copy to clipboard"
sx={{
lineHeight: 0,
'&.Mui-disabled': {
opacity: 0.5
}
}}
>
<copyIcon.react height="16px" width="16px" />
</IconButton>
</span>
</Tooltip>
<TooltippedIconButton
disabled={isCopyDisabled}
className={props.className}
tooltip={tooltip}
placement="top"
onClick={copy}
aria-label="Copy to clipboard"
inputToolbar={false}
>
<copyIcon.react height="16px" width="16px" />
</TooltippedIconButton>
);
}
18 changes: 5 additions & 13 deletions packages/jupyter-chat/src/components/input/buttons/attach-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import AttachFileIcon from '@mui/icons-material/AttachFile';
import React from 'react';

import { InputToolbarRegistry } from '../toolbar-registry';
import { TooltippedButton } from '../../mui-extras/tooltipped-button';
import { TooltippedIconButton } from '../../mui-extras';

const ATTACH_BUTTON_CLASS = 'jp-chat-attach-button';

Expand Down Expand Up @@ -47,23 +47,15 @@ export function AttachButton(
};

return (
<TooltippedButton
<TooltippedIconButton
onClick={onclick}
tooltip={tooltip}
buttonProps={{
size: 'small',
variant: 'text',
iconButtonProps={{
title: tooltip,
className: ATTACH_BUTTON_CLASS
}}
sx={{
width: '24px',
height: '24px',
minWidth: '24px',
color: 'gray'
}}
>
<AttachFileIcon sx={{ fontSize: '16px ' }} />
</TooltippedButton>
<AttachFileIcon />
</TooltippedIconButton>
);
}
31 changes: 12 additions & 19 deletions packages/jupyter-chat/src/components/input/buttons/cancel-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
*/

import CloseIcon from '@mui/icons-material/Close';
import { IconButton, Tooltip } from '@mui/material';
import React from 'react';

import { InputToolbarRegistry } from '../toolbar-registry';
import { TooltippedIconButton } from '../../mui-extras';

const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';

Expand All @@ -20,24 +20,17 @@ export function CancelButton(
if (!props.model.cancel) {
return <></>;
}
const tooltip = 'Cancel editing';
const tooltip = 'Cancel edition';
return (
<Tooltip title={tooltip} placement="top" arrow>
<span>
<IconButton
onClick={props.model.cancel}
className={CANCEL_BUTTON_CLASS}
aria-label={tooltip}
sx={{
width: '24px',
height: '24px',
padding: 0,
lineHeight: 0
}}
>
<CloseIcon sx={{ fontSize: '16px' }} />
</IconButton>
</span>
</Tooltip>
<TooltippedIconButton
onClick={props.model.cancel}
tooltip={tooltip}
iconButtonProps={{
title: tooltip,
className: CANCEL_BUTTON_CLASS
}}
>
<CloseIcon />
</TooltippedIconButton>
);
}
35 changes: 13 additions & 22 deletions packages/jupyter-chat/src/components/input/buttons/save-edit-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
*/

import CheckIcon from '@mui/icons-material/Check';
import { IconButton, Tooltip } from '@mui/material';
import React, { useEffect, useState } from 'react';

import { InputToolbarRegistry } from '../toolbar-registry';
import { TooltippedIconButton } from '../../mui-extras';

const SAVE_EDIT_BUTTON_CLASS = 'jp-chat-save-edit-button';

Expand Down Expand Up @@ -50,26 +50,17 @@ export function SaveEditButton(
}

return (
<Tooltip title={tooltip} placement="top" arrow>
<span>
<IconButton
onClick={save}
disabled={disabled}
className={SAVE_EDIT_BUTTON_CLASS}
aria-label={tooltip}
sx={{
width: '24px',
height: '24px',
padding: 0,
lineHeight: 0,
'&.Mui-disabled': {
opacity: 0.5
}
}}
>
<CheckIcon sx={{ fontSize: '16px' }} />
</IconButton>
</span>
</Tooltip>
<TooltippedIconButton
onClick={save}
tooltip={tooltip}
disabled={disabled}
iconButtonProps={{
title: tooltip,
className: SAVE_EDIT_BUTTON_CLASS
}}
aria-label={tooltip}
>
<CheckIcon />
</TooltippedIconButton>
);
}
47 changes: 13 additions & 34 deletions packages/jupyter-chat/src/components/input/buttons/send-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
*/

import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import { Button, Tooltip } from '@mui/material';
import React, { useEffect, useState } from 'react';

import { InputToolbarRegistry } from '../toolbar-registry';
import { TooltippedIconButton } from '../../mui-extras';
import { IInputModel, InputModel } from '../../../input-model';

const SEND_BUTTON_CLASS = 'jp-chat-send-button';
Expand Down Expand Up @@ -69,38 +69,17 @@ export function SendButton(
}

return (
<Tooltip title={tooltip} placement="top" arrow>
<span>
<Button
onClick={send}
disabled={disabled}
size="small"
variant="contained"
className={SEND_BUTTON_CLASS}
aria-label={tooltip}
sx={{
backgroundColor: 'var(--jp-brand-color1)',
color: 'white',
minWidth: '24px',
width: '24px',
height: '24px',
borderRadius: '4px',
boxShadow: 'none',
lineHeight: 0,
'&:hover': {
backgroundColor: 'var(--jp-brand-color0)',
boxShadow: 'none'
},
'&.Mui-disabled': {
backgroundColor: 'var(--jp-border-color2)',
color: 'var(--jp-ui-font-color3)',
opacity: 0.5
}
}}
>
<ArrowUpwardIcon sx={{ fontSize: '16px' }} />
</Button>
</span>
</Tooltip>
<TooltippedIconButton
onClick={send}
tooltip={tooltip}
disabled={disabled}
iconButtonProps={{
title: tooltip,
className: SEND_BUTTON_CLASS
}}
aria-label={tooltip}
>
<ArrowUpwardIcon />
</TooltippedIconButton>
);
}
Loading
Loading