@jupyterlite/ai 0.14.0 → 0.15.0

package/src/components/completion-status.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { AISettingsModel } from '../models/settings-model';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import type { TranslationBundle } from '@jupyterlab/translation';
 import { jupyternautIcon } from '../icons';
+import type { IAISettingsModel } from '../tokens';
 
 const COMPLETION_STATUS_CLASS = 'jp-ai-completion-status';
 const COMPLETION_DISABLED_CLASS = 'jp-ai-completion-disabled';
@@ -14,7 +14,7 @@ interface ICompletionStatusProps {
   /**
    * The settings model.
    */
-  settingsModel: AISettingsModel;
+  settingsModel: IAISettingsModel;
   /**
    * The application language translator.
    */
@@ -33,7 +33,7 @@ function CompletionStatus(props: ICompletionStatusProps): JSX.Element {
    * Handle changes in the settings.
    */
   useEffect(() => {
-    const stateChanged = (model: AISettingsModel) => {
+    const stateChanged = (model: IAISettingsModel) => {
       if (model.config.useSameProviderForChatAndCompleter) {
         setDisabled(false);
         setTitle(

package/src/components/model-select.tsx

@@ -4,7 +4,8 @@ import CheckIcon from '@mui/icons-material/Check';
 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';
+import type { IAISettingsModel } from '../tokens';
+
 /**
  * Properties for the model select component.
  */
@@ -13,7 +14,7 @@ export interface IModelSelectProps
   /**
    * The settings model to get available models and current selection from.
    */
-  settingsModel: AISettingsModel;
+  settingsModel: IAISettingsModel;
   /**
    * The application language translator.
    */
@@ -243,7 +244,7 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element {
  * Factory function returning the toolbar item for model selection.
  */
 export function createModelSelectItem(
-  settingsModel: AISettingsModel,
+  settingsModel: IAISettingsModel,
   translator: TranslationBundle
 ): InputToolbarRegistry.IToolbarItem {
   return {

package/src/components/save-button.tsx

@@ -0,0 +1,84 @@
+import {
+  historyIcon,
+  ReactWidget,
+  saveIcon,
+  ToolbarButtonComponent
+} from '@jupyterlab/ui-components';
+import type { TranslationBundle } from '@jupyterlab/translation';
+import React, { useEffect, useState } from 'react';
+
+import { AIChatModel } from '../chat-model';
+
+const COMPONENT_CLASS = 'jp-ai-SaveButton';
+const AUTOSAVE_BUTTON_CLASS = 'jp-ai-AutoSaveButton';
+
+/**
+ * Properties for the SaveButton component.
+ */
+export interface ISaveButtonProps {
+  /**
+   * The chat model, used to listen for message changes for auto-save.
+   */
+  model: AIChatModel;
+  /**
+   * The application language translator.
+   */
+  translator: TranslationBundle;
+}
+
+/**
+ * A split button for saving the chat, with a button to toggle auto-save.
+ * When auto-save is active, the save button displays the JupyterLab
+ * toggled-on appearance (inset box-shadow all around).
+ */
+export function SaveComponent(props: ISaveButtonProps): JSX.Element {
+  const { model, translator: trans } = props;
+
+  const [autosave, setAutosave] = useState(model.autosave);
+
+  /**
+   * Effect that update the autosave state when it is updated on the model.
+   */
+  useEffect(() => {
+    const updateAutosave = (_: AIChatModel, value: boolean) => {
+      setAutosave(value);
+    };
+
+    model.autosaveChanged.connect(updateAutosave);
+    return () => {
+      model.autosaveChanged.disconnect(updateAutosave);
+    };
+  }, [model]);
+
+  return (
+    <div className={`${COMPONENT_CLASS}${autosave ? ' lm-mod-toggled' : ''}`}>
+      <ToolbarButtonComponent
+        icon={saveIcon}
+        onClick={() => model.save()}
+        tooltip={trans.__('Save chat')}
+      />
+      <ToolbarButtonComponent
+        className={AUTOSAVE_BUTTON_CLASS}
+        icon={historyIcon}
+        onClick={() => (model.autosave = !model.autosave)}
+        tooltip={trans.__('Auto-save')}
+      />
+    </div>
+  );
+}
+
+/**
+ * A Lumino widget wrapping the SaveButton React component.
+ */
+export class SaveComponentWidget extends ReactWidget {
+  constructor(options: ISaveButtonProps) {
+    super();
+    this._options = options;
+  }
+
+  protected render(): React.ReactElement {
+    return <SaveComponent {...this._options} />;
+  }
+
+  private _options: ISaveButtonProps;
+}

package/src/components/token-usage-display.tsx

@@ -2,8 +2,7 @@ import { ReactWidget, UseSignal } from '@jupyterlab/ui-components';
 import type { TranslationBundle } from '@jupyterlab/translation';
 import React from 'react';
 import { ISignal } from '@lumino/signaling';
-import { AISettingsModel } from '../models/settings-model';
-import { ITokenUsage } from '../tokens';
+import type { IAISettingsModel, ITokenUsage } from '../tokens';
 
 /**
  * Props for the TokenUsageDisplay component.
@@ -17,7 +16,7 @@ export interface ITokenUsageDisplayProps {
   /**
    * The settings model instance for configuration options
    */
-  settingsModel: AISettingsModel;
+  settingsModel: IAISettingsModel;
 
   /**
    * Initial token usage.

package/src/components/tool-select.tsx

@@ -10,11 +10,17 @@ import { Divider, Menu, MenuItem, Tooltip, Typography } from '@mui/material';
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { INamedTool, IProviderRegistry, IToolRegistry } from '../tokens';
 import { AIChatModel } from '../chat-model';
-import { AISettingsModel } from '../models/settings-model';
+
 import { createProviderTools } from '../providers/provider-tools';
 
+import type {
+  IAISettingsModel,
+  INamedTool,
+  IProviderRegistry,
+  IToolRegistry
+} from '../tokens';
+
 const SELECT_ITEM_CLASS = 'jp-AIToolSelect-item';
 
 /**
@@ -40,7 +46,7 @@ export interface IToolSelectProps
   /**
    * The settings model to compute provider-level web tools.
    */
-  settingsModel: AISettingsModel;
+  settingsModel: IAISettingsModel;
 
   /**
    * Registry for provider metadata used to resolve provider tool capabilities.
@@ -307,7 +313,7 @@ export function ToolSelect(props: IToolSelectProps): JSX.Element {
  */
 export function createToolSelectItem(
   toolRegistry: IToolRegistry,
-  settingsModel: AISettingsModel,
+  settingsModel: IAISettingsModel,
   providerRegistry: IProviderRegistry,
   toolsEnabled: boolean = true,
   translator: TranslationBundle

package/src/diff-manager.ts

@@ -1,6 +1,6 @@
 import { CommandRegistry } from '@lumino/commands';
-import { AISettingsModel } from './models/settings-model';
-import {
+import type {
+  IAISettingsModel,
   IDiffManager,
   IShowCellDiffParams,
   IShowFileDiffParams
@@ -30,7 +30,7 @@ export class DiffManager implements IDiffManager {
    */
   constructor(options: {
     commands: CommandRegistry;
-    settingsModel: AISettingsModel;
+    settingsModel: IAISettingsModel;
   }) {
     this._commands = options.commands;
     this._settingsModel = options.settingsModel;
@@ -77,5 +77,5 @@ export class DiffManager implements IDiffManager {
   }
 
   private _commands: CommandRegistry;
-  private _settingsModel: AISettingsModel;
+  private _settingsModel: IAISettingsModel;
 }