@jupyter/chat 0.19.0-alpha.2 → 0.19.0-alpha.3

package/lib/components/input/buttons/attach-button.js

@@ -38,7 +38,7 @@ export function AttachButton(props) {
             console.warn('Error selecting files to attach', e);
         }
     };
-    return (React.createElement(TooltippedIconButton, { onClick: onclick, tooltip: tooltip, iconButtonProps: {
+    return (React.createElement(TooltippedIconButton, { onClick: onclick, tooltip: tooltip, buttonProps: {
             title: tooltip,
             className: ATTACH_BUTTON_CLASS
         } },

package/lib/components/input/buttons/cancel-button.js

@@ -14,7 +14,7 @@ export function CancelButton(props) {
         return React.createElement(React.Fragment, null);
     }
     const tooltip = 'Cancel editing';
-    return (React.createElement(TooltippedIconButton, { onClick: props.model.cancel, tooltip: tooltip, iconButtonProps: {
+    return (React.createElement(TooltippedIconButton, { onClick: props.model.cancel, tooltip: tooltip, buttonProps: {
             title: tooltip,
             className: CANCEL_BUTTON_CLASS
         } },

package/lib/components/input/buttons/save-edit-button.js

@@ -36,7 +36,7 @@ export function SaveEditButton(props) {
         await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
         model.send(model.value);
     }
-    return (React.createElement(TooltippedIconButton, { onClick: save, tooltip: tooltip, disabled: disabled, iconButtonProps: {
+    return (React.createElement(TooltippedIconButton, { onClick: save, tooltip: tooltip, disabled: disabled, buttonProps: {
             title: tooltip,
             className: SAVE_EDIT_BUTTON_CLASS
         }, "aria-label": tooltip },

package/lib/components/input/buttons/send-button.js

@@ -33,6 +33,8 @@ export function SendButton(props) {
                 : 'Send message (ENTER)');
         };
         model.configChanged.connect(configChanged);
+        // Initialize the tooltip.
+        configChanged(model, model.config);
         return () => {
             var _a, _b;
             model.valueChanged.disconnect(inputChanged);
@@ -51,7 +53,7 @@ export function SendButton(props) {
         model.value = '';
         model.focus();
     }
-    return (React.createElement(TooltippedIconButton, { onClick: send, tooltip: tooltip, disabled: disabled, iconButtonProps: {
+    return (React.createElement(TooltippedIconButton, { onClick: send, tooltip: tooltip, disabled: disabled, buttonProps: {
             title: tooltip,
             className: SEND_BUTTON_CLASS
         }, "aria-label": tooltip },

package/lib/components/input/buttons/stop-button.js

@@ -38,7 +38,7 @@ export function StopButton(props) {
         // This will need to be implemented based on how the chat model handles stopping AI responses
         console.log('Stop button clicked');
     }
-    return (React.createElement(TooltippedIconButton, { onClick: stop, tooltip: tooltip, disabled: disabled, iconButtonProps: {
+    return (React.createElement(TooltippedIconButton, { onClick: stop, tooltip: tooltip, disabled: disabled, buttonProps: {
             title: tooltip,
             className: STOP_BUTTON_CLASS
         }, "aria-label": tooltip },

package/lib/components/input/chat-input.js

@@ -23,7 +23,6 @@ export function ChatInput(props) {
     const [sendWithShiftEnter, setSendWithShiftEnter] = useState((_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
     const [attachments, setAttachments] = useState(model.attachments);
     const [toolbarElements, setToolbarElements] = useState([]);
-    const [isFocused, setIsFocused] = useState(false);
     const [writers, setWriters] = useState([]);
     /**
      * Auto-focus the input when the component is first mounted.
@@ -163,9 +162,7 @@ export function ChatInput(props) {
     return (React.createElement(Box, { sx: props.sx, className: clsx(INPUT_BOX_CLASS), "data-input-id": model.id },
         React.createElement(Box, { sx: {
                 border: '1px solid',
-                borderColor: isFocused
-                    ? 'var(--jp-brand-color1)'
-                    : 'var(--jp-border-color1)',
+                borderColor: 'var(--jp-border-color1)',
                 borderRadius: 2,
                 transition: 'border-color 0.2s ease',
                 display: 'flex',
@@ -188,7 +185,7 @@ export function ChatInput(props) {
                             padding: 0
                         }
                     }
-                }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "standard", className: INPUT_TEXTFIELD_CLASS, multiline: true, maxRows: 10, onKeyDown: handleKeyDown, placeholder: "Type a chat message, @ to mention...", inputRef: inputRef, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onSelect: () => { var _a, _b; return (model.cursorIndex = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null); }, sx: {
+                }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "standard", className: INPUT_TEXTFIELD_CLASS, multiline: true, maxRows: 10, onKeyDown: handleKeyDown, placeholder: "Type a chat message, @ to mention...", inputRef: inputRef, onSelect: () => { var _a, _b; return (model.cursorIndex = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null); }, sx: {
                         padding: 1.5,
                         margin: 0,
                         boxSizing: 'border-box',

package/lib/components/mui-extras/tooltipped-button.d.ts

@@ -1,35 +1,14 @@
-import { ButtonOwnProps, ButtonProps, SxProps, TooltipProps } from '@mui/material';
+import { ButtonProps, SxProps, TooltipProps } from '@mui/material';
 import React from 'react';
 export declare const TOOLTIPPED_WRAP_CLASS = "jp-chat-tooltipped-wrap";
-export declare const DEFAULT_BUTTON_PROPS: Partial<ButtonOwnProps>;
-export declare const DEFAULT_BUTTON_SX: {
-    minWidth: string;
-    width: string;
-    height: string;
-    lineHeight: number;
-    '&:disabled': {
-        opacity: number;
-    };
-};
-export declare const INPUT_TOOLBAR_BUTTON_SX: {
-    backgroundColor: string;
-    color: string;
-    borderRadius: string;
-    boxShadow: string;
-    '&:hover': {
-        backgroundColor: string;
-        boxShadow: string;
-    };
-    '&:disabled': {
-        backgroundColor: string;
-        color: string;
-        opacity: number;
-    };
-};
+/**
+ * The props for the tooltipped button.
+ */
 export type TooltippedButtonProps = {
     onClick: React.MouseEventHandler<HTMLButtonElement>;
     tooltip: string;
     children: JSX.Element;
+    className?: string;
     inputToolbar?: boolean;
     disabled?: boolean;
     placement?: TooltipProps['placement'];

package/lib/components/mui-extras/tooltipped-button.js

@@ -2,38 +2,11 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import { classes } from '@jupyterlab/ui-components';
 import { Button } from '@mui/material';
 import React from 'react';
 import { ContrastingTooltip } from './contrasting-tooltip';
 export const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
-export const DEFAULT_BUTTON_PROPS = {
-    size: 'small',
-    variant: 'contained'
-};
-export const DEFAULT_BUTTON_SX = {
-    minWidth: '24px',
-    width: '24px',
-    height: '24px',
-    lineHeight: 0,
-    '&:disabled': {
-        opacity: 0.5
-    }
-};
-export const INPUT_TOOLBAR_BUTTON_SX = {
-    backgroundColor: 'var(--jp-brand-color1)',
-    color: 'white',
-    borderRadius: '4px',
-    boxShadow: 'none',
-    '&:hover': {
-        backgroundColor: 'var(--jp-brand-color0)',
-        boxShadow: 'none'
-    },
-    '&:disabled': {
-        backgroundColor: 'var(--jp-border-color2)',
-        color: 'var(--jp-ui-font-color3)',
-        opacity: 0.5
-    }
-};
 /**
  * A component that renders an MUI `Button` with a high-contrast tooltip
  * provided by `ContrastingTooltip`. This component differs from the MUI
@@ -63,10 +36,8 @@ export function TooltippedButton(props) {
                 ]
             }
         } },
-        React.createElement("span", { style: { cursor: 'default' }, className: TOOLTIPPED_WRAP_CLASS },
-            React.createElement(Button, { ...DEFAULT_BUTTON_PROPS, ...props.buttonProps, onClick: props.onClick, disabled: props.disabled, sx: {
-                    ...DEFAULT_BUTTON_SX,
-                    ...(((_b = props.inputToolbar) !== null && _b !== void 0 ? _b : true) && INPUT_TOOLBAR_BUTTON_SX),
+        React.createElement("span", { className: classes(props.className, TOOLTIPPED_WRAP_CLASS) },
+            React.createElement(Button, { ...(((_b = props.inputToolbar) !== null && _b !== void 0 ? _b : true) && { variant: 'input-toolbar' }), ...props.buttonProps, onClick: props.onClick, disabled: props.disabled, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : props.tooltip, sx: {
                     ...props.sx
-                }, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : props.tooltip }, props.children))));
+                } }, props.children))));
 }

package/lib/components/mui-extras/tooltipped-icon-button.d.ts

@@ -1,29 +1,14 @@
 /// <reference types="react" />
-import { IconButtonProps, SvgIconOwnProps, TooltipProps } from '@mui/material';
-export type TooltippedIconButtonProps = {
-    onClick: () => unknown;
-    tooltip: string;
-    children: JSX.Element;
-    className?: string;
-    inputToolbar?: boolean;
-    disabled?: boolean;
-    placement?: TooltipProps['placement'];
-    /**
-     * The font size of the icon. By default it will be set to 'small'.
-     */
-    fontSize?: SvgIconOwnProps['fontSize'];
-    /**
-     * The offset of the tooltip popup.
-     *
-     * The expected syntax is defined by the Popper library:
-     * https://popper.js.org/docs/v2/modifiers/offset/
-     */
-    offset?: [number, number];
-    'aria-label'?: string;
+import { IconButtonProps } from '@mui/material';
+import { TooltippedButtonProps } from './tooltipped-button';
+/**
+ * The props for the tooltipped icon button.
+ */
+export type TooltippedIconButtonProps = TooltippedButtonProps & {
     /**
      * Props passed directly to the MUI `IconButton` component.
      */
-    iconButtonProps?: IconButtonProps;
+    buttonProps?: IconButtonProps;
 };
 /**
  * A component that renders an MUI `IconButton` with a high-contrast tooltip
@@ -36,5 +21,10 @@ export type TooltippedIconButtonProps = {
  * - Lowers the opacity of the IconButton when disabled.
  * - Renders the IconButton with `line-height: 0` to avoid showing extra
  * vertical space in SVG icons.
+ *
+ * NOTES:
+ *  This kind of button doesn't allow regular variants ('outlined', 'contained', 'text').
+ *  The only one allowed is 'input-toolbar'. If you want to use one of the regular, use
+ *  the TooltippedButton instead.
  */
 export declare function TooltippedIconButton(props: TooltippedIconButtonProps): JSX.Element;

package/lib/components/mui-extras/tooltipped-icon-button.js

@@ -6,7 +6,7 @@ import { classes } from '@jupyterlab/ui-components';
 import { IconButton } from '@mui/material';
 import React from 'react';
 import { ContrastingTooltip } from './contrasting-tooltip';
-import { DEFAULT_BUTTON_PROPS, DEFAULT_BUTTON_SX, INPUT_TOOLBAR_BUTTON_SX, TOOLTIPPED_WRAP_CLASS } from './tooltipped-button';
+import { TOOLTIPPED_WRAP_CLASS } from './tooltipped-button';
 /**
  * A component that renders an MUI `IconButton` with a high-contrast tooltip
  * provided by `ContrastingTooltip`. This component differs from the MUI
@@ -18,12 +18,15 @@ import { DEFAULT_BUTTON_PROPS, DEFAULT_BUTTON_SX, INPUT_TOOLBAR_BUTTON_SX, TOOLT
  * - Lowers the opacity of the IconButton when disabled.
  * - Renders the IconButton with `line-height: 0` to avoid showing extra
  * vertical space in SVG icons.
+ *
+ * NOTES:
+ *  This kind of button doesn't allow regular variants ('outlined', 'contained', 'text').
+ *  The only one allowed is 'input-toolbar'. If you want to use one of the regular, use
+ *  the TooltippedButton instead.
  */
 export function TooltippedIconButton(props) {
     var _a, _b, _c;
-    // Override the default icon font size from 'medium' to 'small'
-    props.children.props.fontSize = (_a = props.fontSize) !== null && _a !== void 0 ? _a : 'small';
-    return (React.createElement(ContrastingTooltip, { title: props.tooltip, placement: (_b = props.placement) !== null && _b !== void 0 ? _b : 'top', slotProps: {
+    return (React.createElement(ContrastingTooltip, { title: props.tooltip, placement: (_a = props.placement) !== null && _a !== void 0 ? _a : 'top', slotProps: {
             popper: {
                 modifiers: [
                     {
@@ -36,8 +39,7 @@ export function TooltippedIconButton(props) {
             }
         } },
         React.createElement("span", { className: classes(props.className, TOOLTIPPED_WRAP_CLASS) },
-            React.createElement(IconButton, { ...DEFAULT_BUTTON_PROPS, ...props.iconButtonProps, onClick: props.onClick, disabled: props.disabled, sx: {
-                    ...DEFAULT_BUTTON_SX,
-                    ...(((_c = props.inputToolbar) !== null && _c !== void 0 ? _c : true) && INPUT_TOOLBAR_BUTTON_SX)
-                }, "aria-label": props['aria-label'] }, props.children))));
+            React.createElement(IconButton, { ...(((_b = props.inputToolbar) !== null && _b !== void 0 ? _b : true) && { variant: 'input-toolbar' }), ...props.buttonProps, onClick: props.onClick, disabled: props.disabled, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : props.tooltip, sx: {
+                    ...props.sx
+                } }, props.children))));
 }

package/lib/theme-provider.d.ts

@@ -1,3 +1,22 @@
+import '@mui/material/Button';
+import '@mui/material/IconButton';
 import { Theme } from '@mui/material/styles';
+/**
+ * Allow a new variant type, for the input toolbar.
+ */
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        'input-toolbar': true;
+    }
+}
+/**
+ * Allow a new variant property in IconButton, to be able to set the same properties
+ * as the input toolbar buttons.
+ */
+declare module '@mui/material/IconButton' {
+    interface IconButtonOwnProps {
+        variant?: 'input-toolbar';
+    }
+}
 export declare function pollUntilReady(): Promise<void>;
 export declare function getJupyterLabTheme(): Promise<Theme>;

package/lib/theme-provider.js

@@ -2,6 +2,8 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import '@mui/material/Button';
+import '@mui/material/IconButton';
 import { createTheme } from '@mui/material/styles';
 function getCSSVariable(name) {
     return getComputedStyle(document.body).getPropertyValue(name).trim();
@@ -19,8 +21,41 @@ export async function getJupyterLabTheme() {
         components: {
             MuiButton: {
                 defaultProps: {
-                    size: 'small'
-                }
+                    size: 'small',
+                    variant: 'contained'
+                },
+                styleOverrides: {
+                    root: {
+                        minWidth: '24px',
+                        width: '24px',
+                        height: '24px',
+                        lineHeight: 0,
+                        '&:disabled': {
+                            opacity: 0.5
+                        }
+                    }
+                },
+                variants: [
+                    {
+                        // The default style for input toolbar button variant.
+                        props: { variant: 'input-toolbar' },
+                        style: {
+                            backgroundColor: 'var(--jp-brand-color1)',
+                            color: 'white',
+                            borderRadius: '4px',
+                            boxShadow: 'none',
+                            '&:hover': {
+                                backgroundColor: 'var(--jp-brand-color0)',
+                                boxShadow: 'none'
+                            },
+                            '&:disabled': {
+                                backgroundColor: 'var(--jp-border-color2)',
+                                color: 'var(--jp-ui-font-color3)',
+                                opacity: 0.5
+                            }
+                        }
+                    }
+                ]
             },
             MuiFilledInput: {
                 defaultProps: {
@@ -41,7 +76,43 @@ export async function getJupyterLabTheme() {
             MuiIconButton: {
                 defaultProps: {
                     size: 'small'
-                }
+                },
+                styleOverrides: {
+                    root: {
+                        minWidth: '24px',
+                        width: '24px',
+                        height: '24px',
+                        lineHeight: 0,
+                        '&:disabled': {
+                            opacity: 0.5
+                        },
+                        // Set the default size of the svg icon if not set by user.
+                        '& .MuiSvgIcon-root:not([fontSize])': {
+                            fontSize: 'medium'
+                        }
+                    }
+                },
+                variants: [
+                    {
+                        // The default style for input toolbar button variant.
+                        props: { variant: 'input-toolbar' },
+                        style: {
+                            backgroundColor: 'var(--jp-brand-color1)',
+                            color: 'white',
+                            borderRadius: '4px',
+                            boxShadow: 'none',
+                            '&:hover': {
+                                backgroundColor: 'var(--jp-brand-color0)',
+                                boxShadow: 'none'
+                            },
+                            '&:disabled': {
+                                backgroundColor: 'var(--jp-border-color2)',
+                                color: 'var(--jp-ui-font-color3)',
+                                opacity: 0.5
+                            }
+                        }
+                    }
+                ]
             },
             MuiInputBase: {
                 defaultProps: {

package/lib/widgets/chat-widget.d.ts

@@ -55,6 +55,10 @@ export declare class ChatWidget extends ReactWidget {
      * Process dropped cells
      */
     private _processCellDrop;
+    /**
+     * Process dropped tabBar files
+     */
+    private _processTabDrop;
     /**
      * Find the notebook path for a cell by searching through active and open notebooks
      */

package/lib/widgets/chat-widget.js

@@ -3,6 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { ReactWidget } from '@jupyterlab/apputils';
+import { DocumentWidget } from '@jupyterlab/docregistry';
 import { isCode, isMarkdown, isRaw } from '@jupyterlab/nbformat';
 import React from 'react';
 import { Drag } from '@lumino/dragdrop';
@@ -12,6 +13,8 @@ import { chatIcon } from '../icons';
 const FILE_BROWSER_MIME = 'application/x-jupyter-icontentsrich';
 // MIME type constant for Notebook cell drag events
 const NOTEBOOK_CELL_MIME = 'application/vnd.jupyter.cells';
+// MIME type constant for TabBar file drag events
+const TABBAR_FILE_MIME = 'application/vnd.lumino.widget-factory';
 // CSS class constants
 const INPUT_CONTAINER_CLASS = 'jp-chat-input-container';
 const DRAG_HOVER_CLASS = 'jp-chat-drag-hover';
@@ -146,7 +149,9 @@ export class ChatWidget extends ReactWidget {
      */
     _canHandleDrop(event) {
         const types = event.mimeData.types();
-        return (types.includes(NOTEBOOK_CELL_MIME) || types.includes(FILE_BROWSER_MIME));
+        return (types.includes(NOTEBOOK_CELL_MIME) ||
+            types.includes(FILE_BROWSER_MIME) ||
+            types.includes(TABBAR_FILE_MIME));
     }
     /**
      * Handle drop events
@@ -166,6 +171,9 @@ export class ChatWidget extends ReactWidget {
             else if (event.mimeData.hasData(FILE_BROWSER_MIME)) {
                 this._processFileDrop(event);
             }
+            else if (event.mimeData.hasData(TABBAR_FILE_MIME)) {
+                this._processTabDrop(event);
+            }
         }
         catch (error) {
             console.error('Error processing drop:', error);
@@ -268,6 +276,35 @@ export class ChatWidget extends ReactWidget {
             console.error('Failed to process cell drop: ', error);
         }
     }
+    /**
+     * Process dropped tabBar files
+     */
+    _processTabDrop(event) {
+        var _a, _b;
+        const factory = event.mimeData.getData(TABBAR_FILE_MIME);
+        if (!factory) {
+            console.warn('No factory in drag event');
+            return;
+        }
+        const widget = factory();
+        if (!widget || !(widget instanceof DocumentWidget)) {
+            console.warn('No file associated to the element');
+            return;
+        }
+        const path = widget.context.path;
+        if (!path) {
+            console.warn('Widget has no path');
+            return;
+        }
+        const mimetype = ((_a = widget.context.model) === null || _a === void 0 ? void 0 : _a.mimeType) || 'application/octet-stream';
+        const attachment = {
+            type: 'file',
+            value: path,
+            mimetype
+        };
+        const inputModel = this._getInputFromEvent(event);
+        (_b = inputModel === null || inputModel === void 0 ? void 0 : inputModel.addAttachment) === null || _b === void 0 ? void 0 : _b.call(inputModel, attachment);
+    }
     /**
      * Find the notebook path for a cell by searching through active and open notebooks
      */

package/lib/widgets/multichat-panel.js

@@ -354,7 +354,7 @@ function ChatSelect({ chatNamesChanged, handleChange }) {
     chatNamesChanged.connect((_, chatNames) => {
         setChatNames(chatNames);
     });
-    return (React.createElement(HTMLSelect, { onChange: handleChange, value: "-" },
+    return (React.createElement(HTMLSelect, { key: Object.keys(chatNames).join(), onChange: handleChange, value: "-" },
         React.createElement("option", { value: "-", disabled: true, hidden: true }, "Open a chat"),
         Object.keys(chatNames).map(name => (React.createElement("option", { value: chatNames[name] }, name)))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.19.0-alpha.2",
+  "version": "0.19.0-alpha.3",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",
@@ -51,6 +51,7 @@
     "@jupyterlab/codeeditor": "^4.2.0",
     "@jupyterlab/codemirror": "^4.2.0",
     "@jupyterlab/docmanager": "^4.2.0",
+    "@jupyterlab/docregistry": "^4.2.0",
     "@jupyterlab/filebrowser": "^4.2.0",
     "@jupyterlab/fileeditor": "^4.2.0",
     "@jupyterlab/notebook": "^4.2.0",
@@ -62,6 +63,7 @@
     "@lumino/disposable": "^2.0.0",
     "@lumino/polling": "^2.0.0",
     "@lumino/signaling": "^2.0.0",
+    "@lumino/widgets": "^2.0.0",
     "@mui/icons-material": "^7.3.2",
     "@mui/material": "^7.3.2",
     "clsx": "^2.1.0",

package/src/components/input/buttons/attach-button.tsx

@@ -50,7 +50,7 @@ export function AttachButton(
     <TooltippedIconButton
       onClick={onclick}
       tooltip={tooltip}
-      iconButtonProps={{
+      buttonProps={{
         title: tooltip,
         className: ATTACH_BUTTON_CLASS
       }}

package/src/components/input/buttons/cancel-button.tsx

@@ -25,7 +25,7 @@ export function CancelButton(
     <TooltippedIconButton
       onClick={props.model.cancel}
       tooltip={tooltip}
-      iconButtonProps={{
+      buttonProps={{
         title: tooltip,
         className: CANCEL_BUTTON_CLASS
       }}

package/src/components/input/buttons/save-edit-button.tsx

@@ -54,7 +54,7 @@ export function SaveEditButton(
       onClick={save}
       tooltip={tooltip}
       disabled={disabled}
-      iconButtonProps={{
+      buttonProps={{
         title: tooltip,
         className: SAVE_EDIT_BUTTON_CLASS
       }}

package/src/components/input/buttons/send-button.tsx

@@ -48,6 +48,9 @@ export function SendButton(
     };
     model.configChanged.connect(configChanged);
 
+    // Initialize the tooltip.
+    configChanged(model, model.config);
+
     return () => {
       model.valueChanged.disconnect(inputChanged);
       model.attachmentsChanged?.disconnect(inputChanged);
@@ -73,7 +76,7 @@ export function SendButton(
       onClick={send}
       tooltip={tooltip}
       disabled={disabled}
-      iconButtonProps={{
+      buttonProps={{
         title: tooltip,
         className: SEND_BUTTON_CLASS
       }}

package/src/components/input/buttons/stop-button.tsx

@@ -55,7 +55,7 @@ export function StopButton(
       onClick={stop}
       tooltip={tooltip}
       disabled={disabled}
-      iconButtonProps={{
+      buttonProps={{
         title: tooltip,
         className: STOP_BUTTON_CLASS
       }}

package/src/components/input/chat-input.tsx

@@ -46,7 +46,6 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
   const [toolbarElements, setToolbarElements] = useState<
     InputToolbarRegistry.IToolbarItem[]
   >([]);
-  const [isFocused, setIsFocused] = useState<boolean>(false);
   const [writers, setWriters] = useState<IChatModel.IWriter[]>([]);
 
   /**
@@ -214,9 +213,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
       <Box
         sx={{
           border: '1px solid',
-          borderColor: isFocused
-            ? 'var(--jp-brand-color1)'
-            : 'var(--jp-border-color1)',
+          borderColor: 'var(--jp-border-color1)',
           borderRadius: 2,
           transition: 'border-color 0.2s ease',
           display: 'flex',
@@ -262,8 +259,6 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
               onKeyDown={handleKeyDown}
               placeholder="Type a chat message, @ to mention..."
               inputRef={inputRef}
-              onFocus={() => setIsFocused(true)}
-              onBlur={() => setIsFocused(false)}
               onSelect={() =>
                 (model.cursorIndex = inputRef.current?.selectionStart ?? null)
               }

package/src/components/mui-extras/tooltipped-button.tsx

@@ -3,54 +3,22 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import {
-  Button,
-  ButtonOwnProps,
-  ButtonProps,
-  SxProps,
-  TooltipProps
-} from '@mui/material';
+import { classes } from '@jupyterlab/ui-components';
+import { Button, ButtonProps, SxProps, TooltipProps } from '@mui/material';
 import React from 'react';
 
 import { ContrastingTooltip } from './contrasting-tooltip';
 
 export const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
 
-export const DEFAULT_BUTTON_PROPS: Partial<ButtonOwnProps> = {
-  size: 'small',
-  variant: 'contained'
-};
-
-export const DEFAULT_BUTTON_SX = {
-  minWidth: '24px',
-  width: '24px',
-  height: '24px',
-  lineHeight: 0,
-  '&:disabled': {
-    opacity: 0.5
-  }
-};
-
-export const INPUT_TOOLBAR_BUTTON_SX = {
-  backgroundColor: 'var(--jp-brand-color1)',
-  color: 'white',
-  borderRadius: '4px',
-  boxShadow: 'none',
-  '&:hover': {
-    backgroundColor: 'var(--jp-brand-color0)',
-    boxShadow: 'none'
-  },
-  '&:disabled': {
-    backgroundColor: 'var(--jp-border-color2)',
-    color: 'var(--jp-ui-font-color3)',
-    opacity: 0.5
-  }
-};
-
+/**
+ * The props for the tooltipped button.
+ */
 export type TooltippedButtonProps = {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   tooltip: string;
   children: JSX.Element;
+  className?: string;
   inputToolbar?: boolean;
   disabled?: boolean;
   placement?: TooltipProps['placement'];
@@ -112,18 +80,16 @@ export function TooltippedButton(props: TooltippedButtonProps): JSX.Element {
 
         See: https://mui.com/material-ui/react-tooltip/#disabled-elements
       */}
-      <span style={{ cursor: 'default' }} className={TOOLTIPPED_WRAP_CLASS}>
+      <span className={classes(props.className, TOOLTIPPED_WRAP_CLASS)}>
         <Button
-          {...DEFAULT_BUTTON_PROPS}
+          {...((props.inputToolbar ?? true) && { variant: 'input-toolbar' })}
           {...props.buttonProps}
           onClick={props.onClick}
           disabled={props.disabled}
+          aria-label={props['aria-label'] ?? props.tooltip}
           sx={{
-            ...DEFAULT_BUTTON_SX,
-            ...((props.inputToolbar ?? true) && INPUT_TOOLBAR_BUTTON_SX),
             ...props.sx
           }}
-          aria-label={props['aria-label'] ?? props.tooltip}
         >
           {props.children}
         </Button>

package/src/components/mui-extras/tooltipped-icon-button.tsx

@@ -4,46 +4,23 @@
  */
 
 import { classes } from '@jupyterlab/ui-components';
-import {
-  IconButton,
-  IconButtonProps,
-  SvgIconOwnProps,
-  TooltipProps
-} from '@mui/material';
+import { IconButton, IconButtonProps } from '@mui/material';
 import React from 'react';
 
 import { ContrastingTooltip } from './contrasting-tooltip';
 import {
-  DEFAULT_BUTTON_PROPS,
-  DEFAULT_BUTTON_SX,
-  INPUT_TOOLBAR_BUTTON_SX,
-  TOOLTIPPED_WRAP_CLASS
+  TOOLTIPPED_WRAP_CLASS,
+  TooltippedButtonProps
 } from './tooltipped-button';
 
-export type TooltippedIconButtonProps = {
-  onClick: () => unknown;
-  tooltip: string;
-  children: JSX.Element;
-  className?: string;
-  inputToolbar?: boolean;
-  disabled?: boolean;
-  placement?: TooltipProps['placement'];
-  /**
-   * The font size of the icon. By default it will be set to 'small'.
-   */
-  fontSize?: SvgIconOwnProps['fontSize'];
-  /**
-   * The offset of the tooltip popup.
-   *
-   * The expected syntax is defined by the Popper library:
-   * https://popper.js.org/docs/v2/modifiers/offset/
-   */
-  offset?: [number, number];
-  'aria-label'?: string;
+/**
+ * The props for the tooltipped icon button.
+ */
+export type TooltippedIconButtonProps = TooltippedButtonProps & {
   /**
    * Props passed directly to the MUI `IconButton` component.
    */
-  iconButtonProps?: IconButtonProps;
+  buttonProps?: IconButtonProps;
 };
 
 /**
@@ -57,12 +34,15 @@ export type TooltippedIconButtonProps = {
  * - Lowers the opacity of the IconButton when disabled.
  * - Renders the IconButton with `line-height: 0` to avoid showing extra
  * vertical space in SVG icons.
+ *
+ * NOTES:
+ *  This kind of button doesn't allow regular variants ('outlined', 'contained', 'text').
+ *  The only one allowed is 'input-toolbar'. If you want to use one of the regular, use
+ *  the TooltippedButton instead.
  */
 export function TooltippedIconButton(
   props: TooltippedIconButtonProps
 ): JSX.Element {
-  // Override the default icon font size from 'medium' to 'small'
-  props.children.props.fontSize = props.fontSize ?? 'small';
   return (
     <ContrastingTooltip
       title={props.tooltip}
@@ -89,15 +69,14 @@ export function TooltippedIconButton(
       */}
       <span className={classes(props.className, TOOLTIPPED_WRAP_CLASS)}>
         <IconButton
-          {...DEFAULT_BUTTON_PROPS}
-          {...props.iconButtonProps}
+          {...((props.inputToolbar ?? true) && { variant: 'input-toolbar' })}
+          {...props.buttonProps}
           onClick={props.onClick}
           disabled={props.disabled}
+          aria-label={props['aria-label'] ?? props.tooltip}
           sx={{
-            ...DEFAULT_BUTTON_SX,
-            ...((props.inputToolbar ?? true) && INPUT_TOOLBAR_BUTTON_SX)
+            ...props.sx
           }}
-          aria-label={props['aria-label']}
         >
           {props.children}
         </IconButton>

package/src/theme-provider.ts

@@ -3,8 +3,31 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import '@mui/material/Button';
+import '@mui/material/IconButton';
 import { Theme, createTheme } from '@mui/material/styles';
 
+/**
+ * Allow a new variant type, for the input toolbar.
+ */
+declare module '@mui/material/Button' {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  interface ButtonPropsVariantOverrides {
+    'input-toolbar': true;
+  }
+}
+
+/**
+ * Allow a new variant property in IconButton, to be able to set the same properties
+ * as the input toolbar buttons.
+ */
+declare module '@mui/material/IconButton' {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  interface IconButtonOwnProps {
+    variant?: 'input-toolbar';
+  }
+}
+
 function getCSSVariable(name: string): string {
   return getComputedStyle(document.body).getPropertyValue(name).trim();
 }
@@ -23,8 +46,41 @@ export async function getJupyterLabTheme(): Promise<Theme> {
     components: {
       MuiButton: {
         defaultProps: {
-          size: 'small'
-        }
+          size: 'small',
+          variant: 'contained'
+        },
+        styleOverrides: {
+          root: {
+            minWidth: '24px',
+            width: '24px',
+            height: '24px',
+            lineHeight: 0,
+            '&:disabled': {
+              opacity: 0.5
+            }
+          }
+        },
+        variants: [
+          {
+            // The default style for input toolbar button variant.
+            props: { variant: 'input-toolbar' },
+            style: {
+              backgroundColor: 'var(--jp-brand-color1)',
+              color: 'white',
+              borderRadius: '4px',
+              boxShadow: 'none',
+              '&:hover': {
+                backgroundColor: 'var(--jp-brand-color0)',
+                boxShadow: 'none'
+              },
+              '&:disabled': {
+                backgroundColor: 'var(--jp-border-color2)',
+                color: 'var(--jp-ui-font-color3)',
+                opacity: 0.5
+              }
+            }
+          }
+        ]
       },
       MuiFilledInput: {
         defaultProps: {
@@ -45,7 +101,43 @@ export async function getJupyterLabTheme(): Promise<Theme> {
       MuiIconButton: {
         defaultProps: {
           size: 'small'
-        }
+        },
+        styleOverrides: {
+          root: {
+            minWidth: '24px',
+            width: '24px',
+            height: '24px',
+            lineHeight: 0,
+            '&:disabled': {
+              opacity: 0.5
+            },
+            // Set the default size of the svg icon if not set by user.
+            '& .MuiSvgIcon-root:not([fontSize])': {
+              fontSize: 'medium'
+            }
+          }
+        },
+        variants: [
+          {
+            // The default style for input toolbar button variant.
+            props: { variant: 'input-toolbar' },
+            style: {
+              backgroundColor: 'var(--jp-brand-color1)',
+              color: 'white',
+              borderRadius: '4px',
+              boxShadow: 'none',
+              '&:hover': {
+                backgroundColor: 'var(--jp-brand-color0)',
+                boxShadow: 'none'
+              },
+              '&:disabled': {
+                backgroundColor: 'var(--jp-border-color2)',
+                color: 'var(--jp-ui-font-color3)',
+                opacity: 0.5
+              }
+            }
+          }
+        ]
       },
       MuiInputBase: {
         defaultProps: {

package/src/widgets/chat-widget.tsx

@@ -6,10 +6,12 @@
 import { ReactWidget } from '@jupyterlab/apputils';
 import { Cell } from '@jupyterlab/cells';
 import { DirListing } from '@jupyterlab/filebrowser';
+import { DocumentWidget } from '@jupyterlab/docregistry';
 import { ICell, isCode, isMarkdown, isRaw } from '@jupyterlab/nbformat';
 import React from 'react';
 import { Message } from '@lumino/messaging';
 import { Drag } from '@lumino/dragdrop';
+import { Widget } from '@lumino/widgets';
 
 import { Chat, IInputToolbarRegistry, MESSAGE_CLASS } from '../components';
 import { chatIcon } from '../icons';
@@ -29,6 +31,9 @@ const FILE_BROWSER_MIME = 'application/x-jupyter-icontentsrich';
 // MIME type constant for Notebook cell drag events
 const NOTEBOOK_CELL_MIME = 'application/vnd.jupyter.cells';
 
+// MIME type constant for TabBar file drag events
+const TABBAR_FILE_MIME = 'application/vnd.lumino.widget-factory';
+
 // CSS class constants
 const INPUT_CONTAINER_CLASS = 'jp-chat-input-container';
 const DRAG_HOVER_CLASS = 'jp-chat-drag-hover';
@@ -187,7 +192,9 @@ export class ChatWidget extends ReactWidget {
   private _canHandleDrop(event: Drag.Event): boolean {
     const types = event.mimeData.types();
     return (
-      types.includes(NOTEBOOK_CELL_MIME) || types.includes(FILE_BROWSER_MIME)
+      types.includes(NOTEBOOK_CELL_MIME) ||
+      types.includes(FILE_BROWSER_MIME) ||
+      types.includes(TABBAR_FILE_MIME)
     );
   }
 
@@ -210,6 +217,8 @@ export class ChatWidget extends ReactWidget {
         this._processCellDrop(event);
       } else if (event.mimeData.hasData(FILE_BROWSER_MIME)) {
         this._processFileDrop(event);
+      } else if (event.mimeData.hasData(TABBAR_FILE_MIME)) {
+        this._processTabDrop(event);
       }
     } catch (error) {
       console.error('Error processing drop:', error);
@@ -329,6 +338,40 @@ export class ChatWidget extends ReactWidget {
     }
   }
 
+  /**
+   * Process dropped tabBar files
+   */
+  private _processTabDrop(event: Drag.Event) {
+    const factory = event.mimeData.getData(TABBAR_FILE_MIME) as () => Widget;
+    if (!factory) {
+      console.warn('No factory in drag event');
+      return;
+    }
+
+    const widget = factory();
+    if (!widget || !(widget instanceof DocumentWidget)) {
+      console.warn('No file associated to the element');
+      return;
+    }
+
+    const path = widget.context.path;
+    if (!path) {
+      console.warn('Widget has no path');
+      return;
+    }
+
+    const mimetype =
+      widget.context.model?.mimeType || 'application/octet-stream';
+    const attachment: IFileAttachment = {
+      type: 'file',
+      value: path,
+      mimetype
+    };
+
+    const inputModel = this._getInputFromEvent(event);
+    inputModel?.addAttachment?.(attachment);
+  }
+
   /**
    * Find the notebook path for a cell by searching through active and open notebooks
    */

package/src/widgets/multichat-panel.tsx

@@ -546,7 +546,11 @@ function ChatSelect({
   });
 
   return (
-    <HTMLSelect onChange={handleChange} value="-">
+    <HTMLSelect
+      key={Object.keys(chatNames).join()}
+      onChange={handleChange}
+      value="-"
+    >
       <option value="-" disabled hidden>
         Open a chat
       </option>

package/style/chat.css

@@ -106,3 +106,13 @@
   padding: 2px 0;
   font-weight: bold;
 }
+
+.jp-chat-sidepanel .jp-chat-open {
+  flex: 1 1 0%;
+  min-width: 0;
+  max-width: fit-content;
+}
+
+.jp-AccordionPanel-title .jp-chat-section-toolbar {
+  flex: 0 0 auto;
+}

package/style/input.css

@@ -45,3 +45,7 @@
 .jp-chat-input-toolbar .jp-chat-send-include-opener {
   padding: 4px 0;
 }
+
+.jp-chat-input-container:focus-within > div:first-of-type {
+  border-color: var(--jp-brand-color1);
+}