UX Improvements for Jupyter Chat Interface

.gitignore

@@ -135,3 +135,6 @@ Untitled*.ipynb
 
 # Chat files
 *.chat
+
+# Ignore secrets in '.env'
+.env

packages/jupyter-chat/src/components/attachments.tsx

@@ -4,18 +4,14 @@
  */
 
 import CloseIcon from '@mui/icons-material/Close';
-import { Box } from '@mui/material';
+import { Box, Button, Tooltip } from '@mui/material';
 import React, { useContext } from 'react';
 import { PathExt } from '@jupyterlab/coreutils';
 import { UUID } from '@lumino/coreutils';
 
-import { TooltippedButton } from './mui-extras/tooltipped-button';
 import { IAttachment } from '../types';
 import { AttachmentOpenerContext } from '../context';
 
-const ATTACHMENTS_CLASS = 'jp-chat-attachments';
-const ATTACHMENT_CLASS = 'jp-chat-attachment';
-const ATTACHMENT_CLICKABLE_CLASS = 'jp-chat-attachment-clickable';
 const REMOVE_BUTTON_CLASS = 'jp-chat-attachment-remove';
 
 /**
@@ -57,7 +53,15 @@ export type AttachmentsProps = {
  */
 export function AttachmentPreviewList(props: AttachmentsProps): JSX.Element {
   return (
-    <Box className={ATTACHMENTS_CLASS}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 1,
+        rowGap: 1,
+        columnGap: 2
+      }}
+    >
       {props.attachments.map(attachment => (
         <AttachmentPreview
           key={`${PathExt.basename(attachment.value)}-${UUID.uuid4()}`}
@@ -82,40 +86,65 @@ export type AttachmentProps = AttachmentsProps & {
 export function AttachmentPreview(props: AttachmentProps): JSX.Element {
   const remove_tooltip = 'Remove attachment';
   const attachmentOpenerRegistry = useContext(AttachmentOpenerContext);
+  const isClickable = !!attachmentOpenerRegistry?.get(props.attachment.type);
 
   return (
-    <Box className={ATTACHMENT_CLASS}>
-      <span
-        className={
-          attachmentOpenerRegistry?.get(props.attachment.type)
-            ? ATTACHMENT_CLICKABLE_CLASS
-            : ''
-        }
-        onClick={() =>
-          attachmentOpenerRegistry?.get(props.attachment.type)?.(
-            props.attachment
-          )
-        }
-      >
-        {getAttachmentDisplayName(props.attachment)}
-      </span>
-      {props.onRemove && (
-        <TooltippedButton
-          onClick={() => props.onRemove!(props.attachment)}
-          tooltip={remove_tooltip}
-          buttonProps={{
-            size: 'small',
-            title: remove_tooltip,
-            className: REMOVE_BUTTON_CLASS
-          }}
+    <Box
+      sx={{
+        border: '1px solid var(--jp-border-color1)',
+        borderRadius: '2px',
+        px: 1,
+        py: 0.5,
+        backgroundColor: 'var(--jp-layout-color2)',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5,
+        fontSize: '0.8125rem'
+      }}
+    >
+      <Tooltip title={props.attachment.value} placement="top" arrow>
+        <Box
+          component="span"
+          onClick={() =>
+            attachmentOpenerRegistry?.get(props.attachment.type)?.(
+              props.attachment
+            )
+          }
           sx={{
-            minWidth: 'unset',
-            padding: '0',
-            color: 'inherit'
+            cursor: isClickable ? 'pointer' : 'default',
+            '&:hover': isClickable
+              ? {
+                  textDecoration: 'underline'
+                }
+              : {}
           }}
         >
-          <CloseIcon />
-        </TooltippedButton>
+          {getAttachmentDisplayName(props.attachment)}
+        </Box>
+      </Tooltip>
+      {props.onRemove && (
+        <Tooltip title={remove_tooltip} placement="top" arrow>
+          <span>
+            <Button
+              onClick={() => props.onRemove!(props.attachment)}
+              size="small"
+              className={REMOVE_BUTTON_CLASS}
+              aria-label={remove_tooltip}
+              sx={{
+                minWidth: 'unset',
+                padding: 0,
+                lineHeight: 0,
+                color: 'var(--jp-ui-font-color2)',
+                '&:hover': {
+                  color: 'var(--jp-ui-font-color0)',
+                  backgroundColor: 'transparent'
+                }
+              }}
+            >
+              <CloseIcon fontSize="small" />
+            </Button>
+          </span>
+        </Tooltip>
       )}
     </Box>
   );

packages/jupyter-chat/src/components/chat.tsx

@@ -25,13 +25,16 @@ import {
   IChatCommandRegistry,
   IMessageFooterRegistry
 } from '../registers';
+import { ChatArea } from '../types';
 
 export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
   const { model } = props;
   let { inputToolbarRegistry } = props;
   if (!inputToolbarRegistry) {
     inputToolbarRegistry = InputToolbarRegistry.defaultToolbarRegistry();
   }
+  // const horizontalPadding = props.area === 'main' ? 8 : 4;
+  const horizontalPadding = 4;
 
   return (
     <AttachmentOpenerContext.Provider value={props.attachmentOpenerRegistry}>
@@ -42,18 +45,20 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
         inputToolbarRegistry={inputToolbarRegistry}
         messageFooterRegistry={props.messageFooterRegistry}
         welcomeMessage={props.welcomeMessage}
+        area={props.area}
       />
       <ChatInput
         sx={{
-          paddingLeft: 4,
-          paddingRight: 4,
+          paddingLeft: horizontalPadding,
+          paddingRight: horizontalPadding,
           paddingTop: 0,
-          paddingBottom: 0,
-          borderTop: '1px solid var(--jp-border-color1)'
+          paddingBottom: 0
         }}
         model={model.input}
         chatCommandRegistry={props.chatCommandRegistry}
         toolbarRegistry={inputToolbarRegistry}
+        area={props.area}
+        chatModel={model}
       />
     </AttachmentOpenerContext.Provider>
   );
@@ -141,6 +146,10 @@ export namespace Chat {
      * The welcome message.
      */
     welcomeMessage?: string;
+    /**
+     * The area where the chat is displayed.
+     */
+    area?: ChatArea;
   }
 
   /**

packages/jupyter-chat/src/components/code-blocks/code-toolbar.tsx

@@ -4,11 +4,10 @@
  */
 
 import { addAboveIcon, addBelowIcon } from '@jupyterlab/ui-components';
-import { Box } from '@mui/material';
+import { Box, IconButton, Tooltip } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 import { CopyButton } from './copy-button';
-import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button';
 import { IActiveCellManager } from '../../active-cell-manager';
 import { replaceCellIcon } from '../../icons';
 import { IChatModel } from '../../model';
@@ -82,8 +81,7 @@ export function CodeToolbar(props: CodeToolbarProps): JSX.Element {
         alignItems: 'center',
         padding: '2px 2px',
         marginBottom: '1em',
-        border: '1px solid var(--jp-cell-editor-border-color)',
-        borderTop: 'none'
+        border: 'none'
       }}
       className={CODE_TOOLBAR_CLASS}
     >
@@ -116,14 +114,24 @@ function InsertAboveButton(props: ToolbarButtonProps) {
     : 'Insert above active cell (no active cell)';
 
   return (
-    <TooltippedIconButton
-      className={props.className}
-      tooltip={tooltip}
-      onClick={() => props.activeCellManager?.insertAbove(props.content)}
-      disabled={!props.activeCellAvailable}
-    >
-      <addAboveIcon.react height="16px" width="16px" />
-    </TooltippedIconButton>
+    <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>
   );
 }
 
@@ -133,14 +141,24 @@ function InsertBelowButton(props: ToolbarButtonProps) {
     : 'Insert below active cell (no active cell)';
 
   return (
-    <TooltippedIconButton
-      className={props.className}
-      tooltip={tooltip}
-      disabled={!props.activeCellAvailable}
-      onClick={() => props.activeCellManager?.insertBelow(props.content)}
-    >
-      <addBelowIcon.react height="16px" width="16px" />
-    </TooltippedIconButton>
+    <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>
   );
 }
 
@@ -169,13 +187,23 @@ function ReplaceButton(props: ToolbarButtonProps) {
   };
 
   return (
-    <TooltippedIconButton
-      className={props.className}
-      tooltip={tooltip}
-      disabled={disabled}
-      onClick={replace}
-    >
-      <replaceCellIcon.react height="16px" width="16px" />
-    </TooltippedIconButton>
+    <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>
   );
 }

packages/jupyter-chat/src/components/code-blocks/copy-button.tsx

@@ -6,8 +6,7 @@
 import React, { useState, useCallback, useRef } from 'react';
 
 import { copyIcon } from '@jupyterlab/ui-components';
-
-import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button';
+import { IconButton, Tooltip } from '@mui/material';
 
 enum CopyStatus {
   None,
@@ -59,16 +58,26 @@ export function CopyButton(props: CopyButtonProps): JSX.Element {
     );
   }, [copyStatus, props.value]);
 
+  const tooltip = COPYBTN_TEXT_BY_STATUS[copyStatus];
+
   return (
-    <TooltippedIconButton
-      disabled={isCopyDisabled}
-      className={props.className}
-      tooltip={COPYBTN_TEXT_BY_STATUS[copyStatus]}
-      placement="top"
-      onClick={copy}
-      aria-label="Copy to clipboard"
-    >
-      <copyIcon.react height="16px" width="16px" />
-    </TooltippedIconButton>
+    <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>
   );
 }

packages/jupyter-chat/src/components/index.ts

@@ -9,5 +9,4 @@ export * from './code-blocks';
 export * from './input';
 export * from './jl-theme-provider';
 export * from './messages';
-export * from './mui-extras';
 export * from './scroll-container';

packages/jupyter-chat/src/components/input/buttons/attach-button.tsx

@@ -52,12 +52,18 @@ export function AttachButton(
       tooltip={tooltip}
       buttonProps={{
         size: 'small',
-        variant: 'contained',
+        variant: 'text',
         title: tooltip,
         className: ATTACH_BUTTON_CLASS
       }}
+      sx={{
+        width: '24px',
+        height: '24px',
+        minWidth: '24px',
+        color: 'gray'
+      }}
     >
-      <AttachFileIcon />
+      <AttachFileIcon sx={{ fontSize: '16px ' }} />
     </TooltippedButton>
   );
 }