@jupyter/chat 0.18.2 → 0.19.0-alpha.1

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

@@ -3,11 +3,11 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import CancelIcon from '@mui/icons-material/Cancel';
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton, Tooltip } from '@mui/material';
 import React from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
-import { TooltippedButton } from '../../mui-extras/tooltipped-button';
 
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 
@@ -20,19 +20,24 @@ export function CancelButton(
   if (!props.model.cancel) {
     return <></>;
   }
-  const tooltip = 'Cancel edition';
+  const tooltip = 'Cancel editing';
   return (
-    <TooltippedButton
-      onClick={props.model.cancel}
-      tooltip={tooltip}
-      buttonProps={{
-        size: 'small',
-        variant: 'contained',
-        title: tooltip,
-        className: CANCEL_BUTTON_CLASS
-      }}
-    >
-      <CancelIcon />
-    </TooltippedButton>
+    <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>
   );
 }

package/src/components/input/buttons/index.ts

@@ -5,4 +5,6 @@
 
 export { AttachButton } from './attach-button';
 export { CancelButton } from './cancel-button';
+export { SaveEditButton } from './save-edit-button';
 export { SendButton } from './send-button';
+export { StopButton } from './stop-button';

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

@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import CheckIcon from '@mui/icons-material/Check';
+import { IconButton, Tooltip } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+
+import { InputToolbarRegistry } from '../toolbar-registry';
+
+const SAVE_EDIT_BUTTON_CLASS = 'jp-chat-save-edit-button';
+
+/**
+ * The save edit button.
+ */
+export function SaveEditButton(
+  props: InputToolbarRegistry.IToolbarItemProps
+): JSX.Element {
+  const { model, chatCommandRegistry, edit } = props;
+
+  // Don't show this button when not in edit mode
+  if (!edit) {
+    return <></>;
+  }
+
+  const [disabled, setDisabled] = useState(false);
+  const tooltip = 'Save edits';
+
+  useEffect(() => {
+    const inputChanged = () => {
+      const inputExist = !!model.value.trim() || model.attachments.length;
+      setDisabled(!inputExist);
+    };
+
+    model.valueChanged.connect(inputChanged);
+    model.attachmentsChanged?.connect(inputChanged);
+
+    inputChanged();
+
+    return () => {
+      model.valueChanged.disconnect(inputChanged);
+      model.attachmentsChanged?.disconnect(inputChanged);
+    };
+  }, [model]);
+
+  async function save() {
+    await chatCommandRegistry?.onSubmit(model);
+    model.send(model.value);
+  }
+
+  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>
+  );
+}

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

@@ -3,47 +3,31 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
-import SendIcon from '@mui/icons-material/Send';
-import { Box, Menu, MenuItem, Typography } from '@mui/material';
-import React, { useCallback, useEffect, useState } from 'react';
+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 { TooltippedButton } from '../../mui-extras/tooltipped-button';
-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, with optional 'include selection' menu.
+ * The send button.
  */
 export function SendButton(
   props: InputToolbarRegistry.IToolbarItemProps
 ): JSX.Element {
-  const { model, chatCommandRegistry } = props;
-  const { activeCellManager, selectionWatcher } = model;
-  const hideIncludeSelection = !activeCellManager || !selectionWatcher;
+  const { model, chatModel, chatCommandRegistry, edit } = props;
+
+  // Don't show this button when in edit mode
+  if (edit) {
+    return <></>;
+  }
 
-  const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
-  const [menuOpen, setMenuOpen] = useState(false);
   const [disabled, setDisabled] = useState(false);
   const [tooltip, setTooltip] = useState<string>('');
 
-  const openMenu = useCallback((el: HTMLElement | null) => {
-    setMenuAnchorEl(el);
-    setMenuOpen(true);
-  }, []);
-
-  const closeMenu = useCallback(() => {
-    setMenuOpen(false);
-  }, []);
-
-  const [selectionTooltip, setSelectionTooltip] = useState<string>('');
-  const [disableInclude, setDisableInclude] = useState<boolean>(true);
-
   useEffect(() => {
     const inputChanged = () => {
       const inputExist = !!model.value.trim() || model.attachments.length;
@@ -71,153 +55,52 @@ export function SendButton(
     };
   }, [model]);
 
-  useEffect(() => {
-    /**
-     * Enable or disable the include selection button, and adapt the tooltip.
-     */
-    const toggleIncludeState = () => {
-      setDisableInclude(
-        !(selectionWatcher?.selection || activeCellManager?.available)
-      );
-      const tooltip = selectionWatcher?.selection
-        ? `${selectionWatcher.selection.numLines} line(s) selected`
-        : activeCellManager?.available
-          ? 'Code from 1 active cell'
-          : 'No selection or active cell';
-      setSelectionTooltip(tooltip);
-    };
-
-    if (!hideIncludeSelection) {
-      selectionWatcher?.selectionChanged.connect(toggleIncludeState);
-      activeCellManager?.availabilityChanged.connect(toggleIncludeState);
-      toggleIncludeState();
-    }
-    return () => {
-      selectionWatcher?.selectionChanged.disconnect(toggleIncludeState);
-      activeCellManager?.availabilityChanged.disconnect(toggleIncludeState);
-    };
-  }, [activeCellManager, selectionWatcher]);
-
   async function send() {
+    // Run all command providers
     await chatCommandRegistry?.onSubmit(model);
-    model.send(model.value);
-  }
-
-  async function sendWithSelection() {
-    let source = '';
-
-    // Run all chat command providers
-    await chatCommandRegistry?.onSubmit(model);
-
-    let language: string | undefined;
-    if (selectionWatcher?.selection) {
-      // Append the selected text if exists.
-      source = selectionWatcher.selection.text;
-      language = selectionWatcher.selection.language;
-    } else if (activeCellManager?.available) {
-      // Append the active cell content if exists.
-      const content = activeCellManager.getContent(false);
-      source = content!.source;
-      language = content?.language;
-    }
-    let content = model.value;
-    if (source) {
-      content += `
 
-\`\`\`${language ?? ''}
-${source}
-\`\`\`
-`;
-    }
-    model.send(content);
-    closeMenu();
+    // send message through chat model
+    await chatModel?.sendMessage({
+      body: model.value
+    });
+    // clear input model value & re-focus
     model.value = '';
+    model.focus();
   }
 
   return (
-    <>
-      <TooltippedButton
-        onClick={send}
-        disabled={disabled}
-        tooltip={tooltip}
-        buttonProps={{
-          size: 'small',
-          title: tooltip,
-          variant: 'contained',
-          className: SEND_BUTTON_CLASS
-        }}
-      >
-        <SendIcon />
-      </TooltippedButton>
-      {!hideIncludeSelection && (
-        <>
-          <TooltippedButton
-            onClick={e => {
-              openMenu(e.currentTarget);
-            }}
-            disabled={disabled}
-            tooltip=""
-            buttonProps={{
-              variant: 'contained',
-              onKeyDown: e => {
-                if (e.key !== 'Enter' && e.key !== ' ') {
-                  return;
-                }
-                openMenu(e.currentTarget);
-                // stopping propagation of this event prevents the prompt from being
-                // sent when the dropdown button is selected and clicked via 'Enter'.
-                e.stopPropagation();
-              },
-              className: SEND_INCLUDE_OPENER_CLASS
-            }}
-          >
-            <KeyboardArrowDown />
-          </TooltippedButton>
-          <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();
-                // prevent sending second message with no selection
-                e.stopPropagation();
-              }}
-              disabled={disableInclude}
-              className={SEND_INCLUDE_LI_CLASS}
-            >
-              <includeSelectionIcon.react />
-              <Box>
-                <Typography display="block">
-                  Send message with selection
-                </Typography>
-                <Typography display="block" sx={{ opacity: 0.618 }}>
-                  {selectionTooltip}
-                </Typography>
-              </Box>
-            </MenuItem>
-          </Menu>
-        </>
-      )}
-    </>
+    <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>
   );
 }

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

@@ -0,0 +1,88 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import StopIcon from '@mui/icons-material/Stop';
+import { Button, Tooltip } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+
+import { InputToolbarRegistry } from '../toolbar-registry';
+
+const STOP_BUTTON_CLASS = 'jp-chat-stop-button';
+
+/**
+ * The stop button.
+ */
+export function StopButton(
+  props: InputToolbarRegistry.IToolbarItemProps
+): JSX.Element {
+  const { chatModel } = props;
+  const [disabled, setDisabled] = useState(true);
+  const tooltip = 'Stop generating';
+
+  useEffect(() => {
+    if (!chatModel) {
+      setDisabled(true);
+      return;
+    }
+
+    const checkWriters = () => {
+      // Check if there's at least one AI agent writer (bot)
+      const hasAIWriter = chatModel.writers.some(writer => writer.user.bot);
+      setDisabled(!hasAIWriter);
+    };
+
+    // Check initially
+    checkWriters();
+
+    // Listen to writers changes
+    chatModel.writersChanged?.connect(checkWriters);
+
+    return () => {
+      chatModel.writersChanged?.disconnect(checkWriters);
+    };
+  }, [chatModel]);
+
+  function stop() {
+    // TODO: Implement stop functionality
+    // This will need to be implemented based on how the chat model handles stopping AI responses
+    console.log('Stop button clicked');
+  }
+
+  return (
+    <Tooltip title={tooltip} placement="top" arrow>
+      <span>
+        <Button
+          onClick={stop}
+          disabled={disabled}
+          size="small"
+          variant="contained"
+          className={STOP_BUTTON_CLASS}
+          aria-label={tooltip}
+          sx={{
+            backgroundColor: 'var(--jp-error-color1)',
+            color: 'white',
+            minWidth: '24px',
+            width: '24px',
+            height: '24px',
+            borderRadius: '4px',
+            boxShadow: 'none',
+            lineHeight: 0,
+            '&:hover': {
+              backgroundColor: 'var(--jp-error-color0)',
+              boxShadow: 'none'
+            },
+            '&.Mui-disabled': {
+              backgroundColor: 'var(--jp-border-color2)',
+              color: 'var(--jp-ui-font-color3)',
+              opacity: 0.5
+            }
+          }}
+        >
+          <StopIcon sx={{ fontSize: '16px' }} />
+        </Button>
+      </span>
+    </Tooltip>
+  );
+}