From 507c5528e6570f13ee7a189a8e83f9f4b43611b5 Mon Sep 17 00:00:00 2001 From: Nicolas Brichet Date: Tue, 28 Oct 2025 15:36:29 +0100 Subject: [PATCH 1/4] Not using Tooltipped button anymore --- src/components/clear-button.tsx | 20 ++++++------- src/components/model-select.tsx | 50 +++++++++++++++------------------ src/components/stop-button.tsx | 20 ++++++------- src/components/tool-select.tsx | 32 ++++++++++----------- 4 files changed, 58 insertions(+), 64 deletions(-) diff --git a/src/components/clear-button.tsx b/src/components/clear-button.tsx index 9a7a9295..5c7ccb88 100644 --- a/src/components/clear-button.tsx +++ b/src/components/clear-button.tsx @@ -1,7 +1,9 @@ -import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat'; +import { InputToolbarRegistry } from '@jupyter/chat'; import ClearIcon from '@mui/icons-material/Clear'; +import { Button } from '@mui/material'; + import React from 'react'; import { AIChatModel } from '../chat-model'; @@ -23,18 +25,16 @@ export interface IClearButtonProps export function ClearButton(props: IClearButtonProps): JSX.Element { const tooltip = 'Clear chat'; return ( - - + ); } diff --git a/src/components/model-select.tsx b/src/components/model-select.tsx index da57263b..7ccde49b 100644 --- a/src/components/model-select.tsx +++ b/src/components/model-select.tsx @@ -1,6 +1,6 @@ -import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat'; +import { InputToolbarRegistry } from '@jupyter/chat'; import CheckIcon from '@mui/icons-material/Check'; -import { Menu, MenuItem, Typography } from '@mui/material'; +import { Button, Menu, MenuItem, Typography } from '@mui/material'; import React, { useCallback, useEffect, useState } from 'react'; import { AIChatModel } from '../chat-model'; import { AISettingsModel } from '../models/settings-model'; @@ -97,16 +97,14 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element { // Show a message if no providers are configured if (availableModels.length === 0) { return ( - {}} - tooltip="No providers configured. Please go to AI Settings to add a provider." - buttonProps={{ - size: 'small', - variant: 'outlined', - color: 'warning', - disabled: true, - title: 'No Providers Available' - }} + aria-label="No providers configured. Please go to AI Settings to add a provider." + size={'small'} + variant={'outlined'} + color={'warning'} + disabled={true} + title={'No Providers Available'} sx={{ minWidth: 'auto', display: 'flex', @@ -120,30 +118,28 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element { > No Providers - + ); } return ( <> - { openMenu(e.currentTarget); }} - tooltip={`Current Model: ${currentProviderLabel} - ${currentModel}`} - buttonProps={{ - size: 'small', - variant: 'contained', - color: 'primary', - title: 'Select AI Model', - onKeyDown: e => { - if (e.key !== 'Enter' && e.key !== ' ') { - return; - } - openMenu(e.currentTarget); - // Stop propagation to prevent sending message - e.stopPropagation(); + aria-label={`Current Model: ${currentProviderLabel} - ${currentModel}`} + size={'small'} + variant={'contained'} + color={'primary'} + title={'Select AI Model'} + onKeyDown={e => { + if (e.key !== 'Enter' && e.key !== ' ') { + return; } + openMenu(e.currentTarget); + // Stop propagation to prevent sending message + e.stopPropagation(); }} sx={{ minWidth: 'auto', @@ -158,7 +154,7 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element { > {currentProviderLabel} - + - + ); } diff --git a/src/components/tool-select.tsx b/src/components/tool-select.tsx index 24d92b9f..527c101b 100644 --- a/src/components/tool-select.tsx +++ b/src/components/tool-select.tsx @@ -1,10 +1,10 @@ -import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat'; +import { InputToolbarRegistry } from '@jupyter/chat'; import BuildIcon from '@mui/icons-material/Build'; import CheckIcon from '@mui/icons-material/Check'; -import { Menu, MenuItem, Tooltip, Typography } from '@mui/material'; +import { Button, Menu, MenuItem, Tooltip, Typography } from '@mui/material'; import React, { useCallback, useEffect, useState } from 'react'; @@ -107,24 +107,22 @@ export function ToolSelect(props: IToolSelectProps): JSX.Element { return ( <> - { openMenu(e.currentTarget); }} - tooltip={`Tools (${selectedToolNames.length}/${tools.length} selected)`} - buttonProps={{ - size: 'small', - variant: selectedToolNames.length > 0 ? 'contained' : 'outlined', - color: 'primary', - title: 'Select AI Tools', - onKeyDown: e => { - if (e.key !== 'Enter' && e.key !== ' ') { - return; - } - openMenu(e.currentTarget); - // Stop propagation to prevent sending message - e.stopPropagation(); + aria-label={`Tools (${selectedToolNames.length}/${tools.length} selected)`} + size={'small'} + variant={selectedToolNames.length > 0 ? 'contained' : 'outlined'} + color={'primary'} + title={'Select AI Tools'} + onKeyDown={e => { + if (e.key !== 'Enter' && e.key !== ' ') { + return; } + openMenu(e.currentTarget); + // Stop propagation to prevent sending message + e.stopPropagation(); }} sx={ selectedToolNames.length === 0 @@ -133,7 +131,7 @@ export function ToolSelect(props: IToolSelectProps): JSX.Element { } > - + Date: Thu, 6 Nov 2025 09:11:28 +0100 Subject: [PATCH 2/4] Use pre-released package --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index cf175dd5..c34b4a97 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "@ai-sdk/google": "^2.0.19", "@ai-sdk/mistral": "^2.0.17", "@ai-sdk/openai": "^2.0.44", - "@jupyter/chat": "^0.18.2", + "@jupyter/chat": "^0.19.0-alpha.0", "@jupyterlab/application": "^4.0.0", "@jupyterlab/apputils": "^4.5.6", "@jupyterlab/cells": "^4.4.6", diff --git a/yarn.lock b/yarn.lock index 96f4f076..0b117621 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2234,9 +2234,9 @@ __metadata: languageName: node linkType: hard -"@jupyter/chat@npm:^0.18.2": - version: 0.18.2 - resolution: "@jupyter/chat@npm:0.18.2" +"@jupyter/chat@npm:^0.19.0-alpha.0": + version: 0.19.0-alpha.0 + resolution: "@jupyter/chat@npm:0.19.0-alpha.0" dependencies: "@emotion/react": ^11.10.5 "@emotion/styled": ^11.10.5 @@ -2262,7 +2262,7 @@ __metadata: clsx: ^2.1.0 react: ^18.2.0 react-dom: ^18.2.0 - checksum: eb345e4404e1d9ade075608238ef96e7ff1f260e817dbe9ed65cdbfb75498f9754ae774ca996f76357020f23b5c514634d058f6e23bf5abdf961dbce76dd2bd9 + checksum: d69399cb80bdcb59387fc44f0cd176aa626374a46b5c5a2d25512e053b2262edcb6acd5e7477eae3da36dd3bfd865103388b504ca486622fb640e88267b3411a languageName: node linkType: hard @@ -3019,7 +3019,7 @@ __metadata: "@ai-sdk/google": ^2.0.19 "@ai-sdk/mistral": ^2.0.17 "@ai-sdk/openai": ^2.0.44 - "@jupyter/chat": ^0.18.2 + "@jupyter/chat": ^0.19.0-alpha.0 "@jupyterlab/application": ^4.0.0 "@jupyterlab/apputils": ^4.5.6 "@jupyterlab/builder": ^4.0.0 From 35b105db71dd7d7e0d788ac0fdb93025ee1eb4ac Mon Sep 17 00:00:00 2001 From: Nicolas Brichet Date: Sat, 15 Nov 2025 09:13:58 +0100 Subject: [PATCH 3/4] Update @jupyter/chat dependency --- package.json | 2 +- src/components/clear-button.tsx | 20 ++++++------- src/components/model-select.tsx | 50 ++++++++++++++++++--------------- src/components/stop-button.tsx | 20 ++++++------- src/components/tool-select.tsx | 32 +++++++++++---------- yarn.lock | 10 +++---- 6 files changed, 70 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index c34b4a97..d7400c1d 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "@ai-sdk/google": "^2.0.19", "@ai-sdk/mistral": "^2.0.17", "@ai-sdk/openai": "^2.0.44", - "@jupyter/chat": "^0.19.0-alpha.0", + "@jupyter/chat": "^0.19.0-alpha.1", "@jupyterlab/application": "^4.0.0", "@jupyterlab/apputils": "^4.5.6", "@jupyterlab/cells": "^4.4.6", diff --git a/src/components/clear-button.tsx b/src/components/clear-button.tsx index 5c7ccb88..9a7a9295 100644 --- a/src/components/clear-button.tsx +++ b/src/components/clear-button.tsx @@ -1,9 +1,7 @@ -import { InputToolbarRegistry } from '@jupyter/chat'; +import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat'; import ClearIcon from '@mui/icons-material/Clear'; -import { Button } from '@mui/material'; - import React from 'react'; import { AIChatModel } from '../chat-model'; @@ -25,16 +23,18 @@ export interface IClearButtonProps export function ClearButton(props: IClearButtonProps): JSX.Element { const tooltip = 'Clear chat'; return ( - + ); } diff --git a/src/components/model-select.tsx b/src/components/model-select.tsx index 7ccde49b..da57263b 100644 --- a/src/components/model-select.tsx +++ b/src/components/model-select.tsx @@ -1,6 +1,6 @@ -import { InputToolbarRegistry } from '@jupyter/chat'; +import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat'; import CheckIcon from '@mui/icons-material/Check'; -import { Button, Menu, MenuItem, Typography } from '@mui/material'; +import { Menu, MenuItem, Typography } from '@mui/material'; import React, { useCallback, useEffect, useState } from 'react'; import { AIChatModel } from '../chat-model'; import { AISettingsModel } from '../models/settings-model'; @@ -97,14 +97,16 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element { // Show a message if no providers are configured if (availableModels.length === 0) { return ( - + ); } return ( <> - + - + ); } diff --git a/src/components/tool-select.tsx b/src/components/tool-select.tsx index 527c101b..24d92b9f 100644 --- a/src/components/tool-select.tsx +++ b/src/components/tool-select.tsx @@ -1,10 +1,10 @@ -import { InputToolbarRegistry } from '@jupyter/chat'; +import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat'; import BuildIcon from '@mui/icons-material/Build'; import CheckIcon from '@mui/icons-material/Check'; -import { Button, Menu, MenuItem, Tooltip, Typography } from '@mui/material'; +import { Menu, MenuItem, Tooltip, Typography } from '@mui/material'; import React, { useCallback, useEffect, useState } from 'react'; @@ -107,22 +107,24 @@ export function ToolSelect(props: IToolSelectProps): JSX.Element { return ( <> - + Date: Wed, 10 Dec 2025 21:31:55 +0100 Subject: [PATCH 4/4] Bump @jupyter-chat and update buttons style --- package.json | 2 +- src/components/clear-button.tsx | 11 ++++------- src/components/model-select.tsx | 12 ++++-------- src/components/tool-select.tsx | 4 ++-- yarn.lock | 10 +++++----- 5 files changed, 16 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index d7400c1d..9048319e 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "@ai-sdk/google": "^2.0.19", "@ai-sdk/mistral": "^2.0.17", "@ai-sdk/openai": "^2.0.44", - "@jupyter/chat": "^0.19.0-alpha.1", + "@jupyter/chat": "^0.19.0-alpha.2", "@jupyterlab/application": "^4.0.0", "@jupyterlab/apputils": "^4.5.6", "@jupyterlab/cells": "^4.4.6", diff --git a/src/components/clear-button.tsx b/src/components/clear-button.tsx index 9a7a9295..2f636215 100644 --- a/src/components/clear-button.tsx +++ b/src/components/clear-button.tsx @@ -1,4 +1,4 @@ -import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat'; +import { InputToolbarRegistry, TooltippedIconButton } from '@jupyter/chat'; import ClearIcon from '@mui/icons-material/Clear'; @@ -23,18 +23,15 @@ export interface IClearButtonProps export function ClearButton(props: IClearButtonProps): JSX.Element { const tooltip = 'Clear chat'; return ( - - + ); } diff --git a/src/components/model-select.tsx b/src/components/model-select.tsx index da57263b..c2e0521d 100644 --- a/src/components/model-select.tsx +++ b/src/components/model-select.tsx @@ -101,7 +101,6 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element { onClick={() => {}} tooltip="No providers configured. Please go to AI Settings to add a provider." buttonProps={{ - size: 'small', variant: 'outlined', color: 'warning', disabled: true, @@ -109,9 +108,9 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element { }} sx={{ minWidth: 'auto', + width: 'unset', display: 'flex', - alignItems: 'center', - height: '29px' + alignItems: 'center' }} > { if (e.key !== 'Enter' && e.key !== ' ') { @@ -147,9 +143,9 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element { }} sx={{ minWidth: 'auto', + width: 'unset', display: 'flex', - alignItems: 'center', - height: '29px' + alignItems: 'center' }} > + {/* TODO: replace it with a TooltippedIconButton when the onClick is fixed */} { openMenu(e.currentTarget); }} tooltip={`Tools (${selectedToolNames.length}/${tools.length} selected)`} buttonProps={{ - size: 'small', variant: selectedToolNames.length > 0 ? 'contained' : 'outlined', color: 'primary', title: 'Select AI Tools', @@ -132,7 +132,7 @@ export function ToolSelect(props: IToolSelectProps): JSX.Element { : {} } > - +