@jupyter/chat 0.21.1 → 0.22.0

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

@@ -4,22 +4,29 @@
  */
 
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
-import React, { useEffect, useState } from 'react';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { Box, Menu, MenuItem, Typography } from '@mui/material';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
 import { TooltippedIconButton } from '../../mui-extras';
 import { useTranslator } from '../../../context';
+import { includeSelectionIcon } from '../../../icons';
 import { IInputModel, InputModel } from '../../../input-model';
 
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
+const SEND_INCLUDE_OPENER_CLASS = 'jp-chat-send-include-opener';
+const SEND_INCLUDE_LI_CLASS = 'jp-chat-send-include';
 
 /**
- * The send button.
+ * The send button, with optional 'include selection' menu.
  */
 export function SendButton(
   props: InputToolbarRegistry.IToolbarItemProps
 ): JSX.Element {
   const { model, chatCommandRegistry, edit } = props;
+  const { activeCellManager, selectionWatcher } = model;
+  const supportSelection = !!activeCellManager || !!selectionWatcher;
   const trans = useTranslator();
 
   // Don't show this button when in edit mode
@@ -27,8 +34,24 @@ export function SendButton(
     return <></>;
   }
 
+  const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
   const [disabled, setDisabled] = useState(false);
   const [tooltip, setTooltip] = useState<string>('');
+  const [selectionTooltip, setSelectionTooltip] = useState<string>('');
+  const [disableInclude, setDisableInclude] = useState<boolean>(true);
+  const [showSendWithSelection, setShowSendWithSelection] = useState<boolean>(
+    supportSelection && (model.config.sendWithSelection ?? true)
+  );
+
+  const openMenu = useCallback((el: HTMLElement | null) => {
+    setMenuAnchorEl(el);
+    setMenuOpen(true);
+  }, []);
+
+  const closeMenu = useCallback(() => {
+    setMenuOpen(false);
+  }, []);
 
   useEffect(() => {
     const inputChanged = () => {
@@ -47,6 +70,9 @@ export function SendButton(
           ? trans.__('Send message (SHIFT+ENTER)')
           : trans.__('Send message (ENTER)')
       );
+      setShowSendWithSelection(
+        supportSelection && (config.sendWithSelection ?? true)
+      );
     };
     model.configChanged.connect(configChanged);
 
@@ -60,6 +86,30 @@ export function SendButton(
     };
   }, [model]);
 
+  useEffect(() => {
+    const toggleIncludeState = () => {
+      setDisableInclude(
+        !(selectionWatcher?.selection || activeCellManager?.available)
+      );
+      const tip = selectionWatcher?.selection
+        ? trans.__('%1 line(s) selected', selectionWatcher.selection.numLines)
+        : activeCellManager?.available
+          ? trans.__('Code from 1 active cell')
+          : trans.__('No selection or active cell');
+      setSelectionTooltip(tip);
+    };
+
+    if (showSendWithSelection) {
+      selectionWatcher?.selectionChanged.connect(toggleIncludeState);
+      activeCellManager?.availabilityChanged.connect(toggleIncludeState);
+      toggleIncludeState();
+    }
+    return () => {
+      selectionWatcher?.selectionChanged.disconnect(toggleIncludeState);
+      activeCellManager?.availabilityChanged.disconnect(toggleIncludeState);
+    };
+  }, [activeCellManager, selectionWatcher, showSendWithSelection]);
+
   async function send() {
     // Run all command providers
     await chatCommandRegistry?.onSubmit(model);
@@ -71,18 +121,112 @@ export function SendButton(
     model.focus();
   }
 
+  async function sendWithSelection() {
+    await chatCommandRegistry?.onSubmit(model);
+
+    let source = '';
+    let language: string | undefined;
+
+    if (selectionWatcher?.selection) {
+      source = selectionWatcher.selection.text;
+      language = selectionWatcher.selection.language;
+    } else if (activeCellManager?.available) {
+      const content = activeCellManager.getContent(false);
+      source = content!.source;
+      language = content?.language;
+    }
+
+    let body = model.value;
+    if (source) {
+      body += `\n\n\`\`\`${language ?? ''}\n${source}\n\`\`\`\n`;
+    }
+
+    model.value = '';
+    closeMenu();
+    model.send(body);
+    model.focus();
+  }
+
   return (
-    <TooltippedIconButton
-      onClick={send}
-      tooltip={tooltip}
-      disabled={disabled}
-      buttonProps={{
-        title: tooltip,
-        className: SEND_BUTTON_CLASS
-      }}
-      aria-label={tooltip}
-    >
-      <ArrowUpwardIcon />
-    </TooltippedIconButton>
+    <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: '1px' }}>
+      <TooltippedIconButton
+        onClick={send}
+        tooltip={tooltip}
+        disabled={disabled}
+        sx={{
+          borderRadius: showSendWithSelection
+            ? 'var(--jp-border-radius) 0 0 var(--jp-border-radius) !important'
+            : 'var(--jp-border-radius)'
+        }}
+        buttonProps={{
+          title: tooltip,
+          className: SEND_BUTTON_CLASS
+        }}
+        aria-label={tooltip}
+      >
+        <ArrowUpwardIcon />
+      </TooltippedIconButton>
+      {showSendWithSelection && (
+        <>
+          <TooltippedIconButton
+            onClick={e => openMenu(e.currentTarget)}
+            tooltip={trans.__('Send with selection')}
+            disabled={disabled}
+            sx={{
+              borderRadius:
+                '0 var(--jp-border-radius) var(--jp-border-radius) 0 !important',
+              width: '16px',
+              minWidth: '16px'
+            }}
+            buttonProps={{
+              onKeyDown: e => {
+                if (e.key !== 'Enter' && e.key !== ' ') {
+                  return;
+                }
+                openMenu(e.currentTarget);
+                e.stopPropagation();
+              },
+              className: SEND_INCLUDE_OPENER_CLASS
+            }}
+          >
+            <KeyboardArrowDownIcon sx={{ fontSize: '12px' }} />
+          </TooltippedIconButton>
+          <Menu
+            open={menuOpen}
+            onClose={closeMenu}
+            anchorEl={menuAnchorEl}
+            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+            transformOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+            sx={{
+              '& .MuiMenuItem-root': {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px'
+              },
+              '& svg': { lineHeight: 0 }
+            }}
+          >
+            <MenuItem
+              onClick={e => {
+                sendWithSelection();
+                e.stopPropagation();
+              }}
+              disabled={disableInclude}
+              className={SEND_INCLUDE_LI_CLASS}
+            >
+              <includeSelectionIcon.react />
+              <Box>
+                <Typography display="block">
+                  {trans.__('Send message with selection')}
+                </Typography>
+                <Typography display="block" sx={{ opacity: 0.618 }}>
+                  {selectionTooltip}
+                </Typography>
+              </Box>
+            </MenuItem>
+          </Menu>
+        </>
+      )}
+    </Box>
   );
 }

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

@@ -156,18 +156,19 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
      */
     event.stopPropagation();
 
+    const isSendCombination =
+      (sendWithShiftEnter && event.shiftKey) ||
+      (!sendWithShiftEnter && !event.shiftKey);
+
     // Do not send empty messages, and avoid adding new line in empty message.
-    if (!inputExists) {
+    if (!inputExists && (!isSendCombination || attachments.length === 0)) {
       event.stopPropagation();
       event.preventDefault();
       return;
     }
 
     // Finally, send the message when all other conditions are met.
-    if (
-      (sendWithShiftEnter && event.shiftKey) ||
-      (!sendWithShiftEnter && !event.shiftKey)
-    ) {
+    if (isSendCombination) {
       // Run all command providers
       await chatCommandRegistry?.onSubmit(model);
       model.send(model.value);

package/src/components/messages/chat-body-placeholder.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { useChatContext } from '../../context';
+
+/**
+ * Component that renders chat body placeholder using the factory from context.
+ * Renders nothing if no factory is provided.
+ */
+export function ChatBodyPlaceholder(): JSX.Element | null {
+  const { model, chatBodyPlaceholderFactory } = useChatContext();
+
+  if (!chatBodyPlaceholderFactory) {
+    return null;
+  }
+
+  const onSend = (body: string) => {
+    model.sendMessage({ body });
+  };
+
+  return chatBodyPlaceholderFactory.create({ onSend });
+}

package/src/components/messages/index.ts

@@ -12,3 +12,4 @@ export * from './navigation';
 export * from './preamble';
 export * from './toolbar';
 export * from './welcome';
+export * from './chat-body-placeholder';

package/src/components/messages/messages.tsx

@@ -14,6 +14,7 @@ import { ChatMessage } from './message';
 import { MessagePreambleComponent } from './preamble';
 import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
+import { ChatBodyPlaceholder } from './chat-body-placeholder';
 import { ScrollContainer } from '../scroll-container';
 import { useChatContext } from '../../context';
 import { Message } from '../../message';
@@ -68,11 +69,24 @@ export function ChatMessages(): JSX.Element {
     fetchHistory();
   }, [model]);
 
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  // Starts true so the chat scrolls to bottom on first render.
+  const shouldScrollRef = useRef<boolean>(true);
+
   /**
-   * Effect: listen to chat messages.
+   * Effect: listen to chat messages and decide whether to auto-scroll.
+   *
+   * We check `prevLastIdx` (length - 2) because by the time the signal fires,
+   * model.messages already contains the new message. So length - 2 is the
+   * message that WAS last before the new one arrived. If that was visible,
+   * the user was at the bottom and we should follow.
    */
   useEffect(() => {
     function handleChatEvents() {
+      const viewport = model.messagesInViewport ?? [];
+      const prevLastIdx = model.messages.length - 2;
+      shouldScrollRef.current =
+        prevLastIdx < 0 || viewport.includes(prevLastIdx);
       setMessages([...model.messages]);
     }
     model.messagesUpdated.connect(handleChatEvents);
@@ -82,6 +96,48 @@ export function ChatMessages(): JSX.Element {
     };
   }, [model]);
 
+  /**
+   * Effect: observe DOM mutations in the scroll container to keep the viewport
+   * pinned to the bottom as message content renders asynchronously.
+   *
+   * A single scrollTop assignment on state change isn't enough because message
+   * content (markdown, code blocks, images) renders after the initial DOM
+   * commit. The MutationObserver fires on every subtree change, keeping us
+   * pinned as content streams in or expands.
+   *
+   * The scroll listener lets a user manually scroll to the bottom during
+   * streaming to re-engage auto-scroll, or scroll up to disengage it.
+   */
+  useEffect(() => {
+    const el = scrollContainerRef.current;
+    if (!el) {
+      return;
+    }
+
+    const observer = new MutationObserver(() => {
+      if (shouldScrollRef.current) {
+        el.scrollTop = el.scrollHeight;
+      }
+    });
+
+    const handleScroll = () => {
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+      shouldScrollRef.current = atBottom;
+    };
+
+    observer.observe(el, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    el.addEventListener('scroll', handleScroll);
+
+    return () => {
+      observer.disconnect();
+      el.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   /**
    * Effect: Listen to the config change.
    */
@@ -163,8 +219,9 @@ export function ChatMessages(): JSX.Element {
   const horizontalPadding = area === 'main' ? 8 : 4;
   return (
     <>
-      <ScrollContainer sx={{ flexGrow: 1 }}>
+      <ScrollContainer ref={scrollContainerRef} sx={{ flexGrow: 1 }}>
         {welcomeMessage && <WelcomeMessage content={welcomeMessage} />}
+        {messages.length === 0 && <ChatBodyPlaceholder />}
         <Box
           sx={{
             paddingLeft: horizontalPadding,

package/src/components/scroll-container.tsx

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { Box, SxProps, Theme } from '@mui/material';
 
 type ScrollContainerProps = {
@@ -12,39 +12,32 @@ type ScrollContainerProps = {
 };
 
 /**
- * Component that handles intelligent scrolling.
+ * Scrollable container for chat messages. Scroll position is managed
+ * explicitly by the parent (ChatMessages) via a forwarded ref.
  *
- * - If viewport is at the bottom of the overflow container, appending new
- * children keeps the viewport on the bottom of the overflow container.
- *
- * - If viewport is in the middle of the overflow container, appending new
- * children leaves the viewport unaffected.
- *
- * Currently only works for Chrome and Firefox due to reliance on
- * `overflow-anchor`.
- *
- * **References**
- * - https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/
+ * `overflowAnchor: 'none'` disables the browser's built-in scroll anchoring
+ * which caused partial viewport shifts on new content in Chrome/Firefox
+ * and is unsupported in Safari.
  */
-export function ScrollContainer(props: ScrollContainerProps): JSX.Element {
-  const id = useMemo(
-    () => 'jupyter-chat-scroll-container-' + Date.now().toString(),
-    []
-  );
+export const ScrollContainer = forwardRef<HTMLDivElement, ScrollContainerProps>(
+  function ScrollContainer(props, ref) {
+    const id = useMemo(
+      () => 'jupyter-chat-scroll-container-' + Date.now().toString(),
+      []
+    );
 
-  return (
-    <Box
-      id={id}
-      sx={{
-        overflowY: 'scroll',
-        '& *': {
-          overflowAnchor: 'none'
-        },
-        ...props.sx
-      }}
-    >
-      <Box>{props.children}</Box>
-      <Box sx={{ overflowAnchor: 'auto', height: '1px' }} />
-    </Box>
-  );
-}
+    return (
+      <Box
+        ref={ref}
+        id={id}
+        sx={{
+          overflowY: 'scroll',
+          overflowAnchor: 'none',
+          ...props.sx
+        }}
+      >
+        {props.children}
+      </Box>
+    );
+  }
+);

package/src/input-model.ts

@@ -579,6 +579,10 @@ export namespace InputModel {
      * Whether to send a message via Shift-Enter instead of Enter.
      */
     sendWithShiftEnter?: boolean;
+    /**
+     * Whether to display the 'send with selection' button.
+     */
+    sendWithSelection?: boolean;
   }
 }
 

package/src/theme-provider.ts

@@ -68,7 +68,7 @@ export async function getJupyterLabTheme(): Promise<Theme> {
             style: {
               backgroundColor: `var(--jp-brand-color${light ? '1' : '2'})`,
               color: 'var(--jp-ui-inverse-font-color1)',
-              borderRadius: '4px',
+              borderRadius: 'var(--jp-border-radius)',
               boxShadow: 'none',
               '&:hover': {
                 backgroundColor: `var(--jp-brand-color${light ? '0' : '1'})`,
@@ -125,7 +125,7 @@ export async function getJupyterLabTheme(): Promise<Theme> {
             style: {
               backgroundColor: `var(--jp-brand-color${light ? '1' : '2'})`,
               color: 'var(--jp-ui-inverse-font-color1)',
-              borderRadius: '4px',
+              borderRadius: 'var(--jp-border-radius)',
               boxShadow: 'none',
               '&:hover': {
                 backgroundColor: `var(--jp-brand-color${light ? '0' : '1'})`,

package/src/tokens.ts

@@ -5,8 +5,9 @@
 
 import { IWidgetTracker, MainAreaWidget } from '@jupyterlab/apputils';
 import { Token } from '@lumino/coreutils';
+import { Widget } from '@lumino/widgets';
 
-import { ChatWidget } from './widgets';
+import { ChatWidget, Placeholder } from './widgets';
 import { IChatModel } from './model';
 
 /**
@@ -28,3 +29,62 @@ export const IChatTracker = new Token<IChatTracker>(
   '@jupyter/chat:IChatTracker',
   'The chat widget tracker'
 );
+
+/**
+ * The interface for the placeholder factory.
+ */
+export interface IChatPlaceholderFactory {
+  /**
+   * Create a placeholder widget for the multi-chat panel.
+   *
+   * @param props - the props passed to the placeholder.
+   * @returns a widget to display as placeholder.
+   */
+  create(props: Placeholder.IProps): Widget;
+}
+
+/**
+ * The token for the placeholder factory.
+ * Not provided by default — extensions can provide it to replace the default
+ * placeholder shown when no chat is open in the multi-chat panel.
+ */
+export const IChatPlaceholderFactory = new Token<IChatPlaceholderFactory>(
+  '@jupyter/chat:IChatPlaceholderFactory',
+  'The placeholder factory for the multi-chat panel'
+);
+
+/**
+ * The interface for the chat body placeholder factory.
+ */
+export interface IChatBodyPlaceholderFactory {
+  /**
+   * Create a chat body placeholder component shown when the chat has no messages.
+   *
+   * @param props - the props passed to the component.
+   * @returns a React element to display as chat body placeholder.
+   */
+  create(props: IChatBodyPlaceholderFactory.IProps): JSX.Element | null;
+}
+
+export namespace IChatBodyPlaceholderFactory {
+  /**
+   * The props passed to the chat body placeholder factory.
+   */
+  export interface IProps {
+    /**
+     * Callback to send a message.
+     */
+    onSend: (body: string) => void;
+  }
+}
+
+/**
+ * The token for the chat body placeholder factory.
+ * Not provided by default — extensions can provide it to display clickable
+ * chat body placeholder when a chat has no messages.
+ */
+export const IChatBodyPlaceholderFactory =
+  new Token<IChatBodyPlaceholderFactory>(
+    '@jupyter/chat:IChatBodyPlaceholderFactory',
+    'The chat body placeholder factory for empty chats'
+  );

package/src/types.ts

@@ -59,6 +59,10 @@ export interface IConfig {
    * Whether to display deleted messages.
    */
   showDeleted?: boolean;
+  /**
+   * Whether to display the 'send with selection' button.
+   */
+  sendWithSelection?: boolean;
 }
 
 /**

package/src/widgets/chat-widget.tsx

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { ReactWidget } from '@jupyterlab/apputils';
+import { Notification, ReactWidget } from '@jupyterlab/apputils';
 import { Cell } from '@jupyterlab/cells';
 import { DirListing } from '@jupyterlab/filebrowser';
 import { DocumentWidget } from '@jupyterlab/docregistry';
@@ -295,6 +295,9 @@ export class ChatWidget extends ReactWidget {
       // Get path from first cell as all cells come from same notebook as users can only select or drag cells from one notebook at a time
       if (!cells[0]?.id) {
         console.warn('No valid cells to process');
+        Notification.error(
+          'Failed to attach notebook cells: no valid cell data found.'
+        );
         return false;
       }
 
@@ -303,6 +306,9 @@ export class ChatWidget extends ReactWidget {
         console.warn(
           `Cannot find notebook for dragged cells from ${cells[0].id}`
         );
+        Notification.error(
+          'Failed to attach notebook cells: source notebook could not be located.'
+        );
         return false;
       }
 
@@ -346,8 +352,15 @@ export class ChatWidget extends ReactWidget {
         inputModel?.addAttachment?.(attachment);
         return !!inputModel;
       }
+
+      Notification.error(
+        'Failed to attach notebook cells: no supported cells were found.'
+      );
     } catch (error) {
       console.error('Failed to process cell drop: ', error);
+      Notification.error(
+        'Failed to attach notebook cells due to an unexpected error.'
+      );
     }
     return false;
   }

package/src/widgets/index.ts

@@ -8,3 +8,4 @@ export * from './chat-selector-popup';
 export * from './chat-sidebar';
 export * from './chat-widget';
 export * from './multichat-panel';
+export * from './placeholder';