@jupyterlite/ai 0.12.0 → 0.13.0

package/src/widgets/ai-settings.tsx

@@ -31,7 +31,6 @@ import {
   InputLabel,
   List,
   ListItem,
-  ListItemSecondaryAction,
   ListItemText,
   Menu,
   MenuItem,
@@ -100,6 +99,12 @@ export class AISettingsWidget extends ReactWidget {
     this.title.label = this._trans.__('AI Settings');
     this.title.caption = this._trans.__('Configure AI providers and behavior');
     this.title.closable = true;
+
+    // Disable the secrets manager if the token is empty.
+    if (!options.token) {
+      this._settingsModel.updateConfig({ useSecretsManager: false });
+      this._secretsManager = undefined;
+    }
   }
 
   /**
@@ -282,8 +287,12 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
     provider: string,
     fieldName: string
   ): Promise<string | undefined> => {
+    const token = Private.getToken();
+    if (!token) {
+      return;
+    }
     const secret = await secretsManager?.get(
-      Private.getToken(),
+      token,
       SECRETS_NAMESPACE,
       `${provider}:${fieldName}`
     );
@@ -295,8 +304,12 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
     fieldName: string,
     value: string
   ): Promise<void> => {
+    const token = Private.getToken();
+    if (!token) {
+      return;
+    }
     await secretsManager?.set(
-      Private.getToken(),
+      token,
       SECRETS_NAMESPACE,
       `${provider}:${fieldName}`,
       {
@@ -321,8 +334,12 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
     if (!(model.config.useSecretsManager && secretsManager)) {
       return;
     }
+    const token = Private.getToken();
+    if (!token) {
+      return;
+    }
     await secretsManager?.attach(
-      Private.getToken(),
+      token,
       SECRETS_NAMESPACE,
       `${provider}:${fieldName}`,
       input
@@ -427,17 +444,25 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
     if (updates.useSecretsManager !== undefined) {
       if (updates.useSecretsManager) {
         for (const provider of model.config.providers) {
-          // if the secrets manager doesn't have the current API key, copy the current
+          const settingsApiKey = provider.apiKey;
+          // If the secrets manager doesn't have the current API key, set the current
           // one from settings.
+          // Update the settings value with SECRETS_REPLACEMENT if a key exist in the
+          // secrets manager (was already there or a value was set in settings).
           if (!(await getSecretFromManager(provider.provider, 'apiKey'))) {
-            setSecretToManager(
-              provider.provider,
-              'apiKey',
-              provider.apiKey ?? ''
-            );
+            if (settingsApiKey !== undefined) {
+              setSecretToManager(
+                provider.provider,
+                'apiKey',
+                settingsApiKey !== SECRETS_REPLACEMENT ? settingsApiKey : ''
+              );
+              provider.apiKey = SECRETS_REPLACEMENT;
+              await model.updateProvider(provider.id, provider);
+            }
+          } else {
+            provider.apiKey = SECRETS_REPLACEMENT;
+            await model.updateProvider(provider.id, provider);
           }
-          provider.apiKey = SECRETS_REPLACEMENT;
-          await model.updateProvider(provider.id, provider);
         }
       } else {
         for (const provider of model.config.providers) {
@@ -445,10 +470,8 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
             provider.provider,
             'apiKey'
           );
-          if (apiKey) {
-            provider.apiKey = apiKey;
-            await model.updateProvider(provider.id, provider);
-          }
+          provider.apiKey = apiKey;
+          await model.updateProvider(provider.id, provider);
         }
       }
     }
@@ -676,7 +699,18 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                         config.useSameProviderForChatAndCompleter
                           ? isActive
                           : config.activeCompleterProvider === provider.id;
+                      const providerInfo = providerRegistry.getProviderInfo(
+                        provider.provider
+                      );
+                      const providerToolCapabilities =
+                        providerInfo?.providerToolCapabilities;
                       const params = provider.parameters;
+                      const webSearchEnabled =
+                        !!providerToolCapabilities?.webSearch &&
+                        provider.customSettings?.webSearch?.enabled === true;
+                      const webFetchEnabled =
+                        !!providerToolCapabilities?.webFetch &&
+                        provider.customSettings?.webFetch?.enabled === true;
 
                       return (
                         <ListItem
@@ -739,50 +773,67 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                               </Typography>
 
                               {/* Display parameters if set */}
-                              {params &&
-                                (params.temperature !== undefined ||
-                                  params.maxOutputTokens !== undefined ||
-                                  params.maxTurns !== undefined) && (
-                                  <Box
-                                    sx={{
-                                      display: 'flex',
-                                      flexWrap: 'wrap',
-                                      gap: 1,
-                                      mt: 1
-                                    }}
-                                  >
-                                    {params.temperature !== undefined && (
-                                      <Chip
-                                        label={trans.__(
-                                          'Temp: %1',
-                                          params.temperature
-                                        )}
-                                        size="small"
-                                        variant="outlined"
-                                      />
-                                    )}
-                                    {params.maxOutputTokens !== undefined && (
-                                      <Chip
-                                        label={trans.__(
-                                          'Tokens: %1',
-                                          params.maxOutputTokens
-                                        )}
-                                        size="small"
-                                        variant="outlined"
-                                      />
-                                    )}
-                                    {params.maxTurns !== undefined && (
-                                      <Chip
-                                        label={trans.__(
-                                          'Turns: %1',
-                                          params.maxTurns
-                                        )}
-                                        size="small"
-                                        variant="outlined"
-                                      />
-                                    )}
-                                  </Box>
-                                )}
+                              {(params?.temperature !== undefined ||
+                                params?.maxOutputTokens !== undefined ||
+                                params?.maxTurns !== undefined ||
+                                webSearchEnabled ||
+                                webFetchEnabled) && (
+                                <Box
+                                  sx={{
+                                    display: 'flex',
+                                    flexWrap: 'wrap',
+                                    gap: 1,
+                                    mt: 1
+                                  }}
+                                >
+                                  {params?.temperature !== undefined && (
+                                    <Chip
+                                      label={trans.__(
+                                        'Temp: %1',
+                                        params.temperature
+                                      )}
+                                      size="small"
+                                      variant="outlined"
+                                    />
+                                  )}
+                                  {params?.maxOutputTokens !== undefined && (
+                                    <Chip
+                                      label={trans.__(
+                                        'Tokens: %1',
+                                        params.maxOutputTokens
+                                      )}
+                                      size="small"
+                                      variant="outlined"
+                                    />
+                                  )}
+                                  {params?.maxTurns !== undefined && (
+                                    <Chip
+                                      label={trans.__(
+                                        'Turns: %1',
+                                        params.maxTurns
+                                      )}
+                                      size="small"
+                                      variant="outlined"
+                                    />
+                                  )}
+                                  {webSearchEnabled && (
+                                    <Chip
+                                      label={trans.__('Web Search')}
+                                      size="small"
+                                      variant="outlined"
+                                      color="info"
+                                    />
+                                  )}
+                                  {webFetchEnabled && (
+                                    <Chip
+                                      label={trans.__('Web Fetch')}
+                                      size="small"
+                                      variant="outlined"
+                                      color="info"
+                                    />
+                                  )}
+                                </Box>
+                              )}
                             </Box>
                             <IconButton
                               onClick={e => handleMenuClick(e, provider.id)}
@@ -1117,9 +1168,10 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
 
                   <List sx={{ mb: 2, maxHeight: 200, overflow: 'auto' }}>
                     {config.commandsRequiringApproval.map((command, index) => (
-                      <ListItem key={index} divider>
-                        <ListItemText primary={command} />
-                        <ListItemSecondaryAction>
+                      <ListItem
+                        key={index}
+                        divider
+                        secondaryAction={
                           <IconButton
                             onClick={() => {
                               const newCommands = [
@@ -1134,7 +1186,9 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                           >
                             <Delete />
                           </IconButton>
-                        </ListItemSecondaryAction>
+                        }
+                      >
+                        <ListItemText primary={command} />
                       </ListItem>
                     ))}
                   </List>
@@ -1168,6 +1222,154 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                     )}
                   />
                 </Box>
+
+                <Divider sx={{ my: 2 }} />
+
+                <Box>
+                  <Typography variant="body1" gutterBottom>
+                    {trans.__('Commands Auto-Rendering MIME Bundles')}
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    color="text.secondary"
+                    gutterBottom
+                    sx={{ display: 'block' }}
+                  >
+                    {trans.__(
+                      'Only these execute_command command IDs can auto-render MIME bundle outputs in chat'
+                    )}
+                  </Typography>
+
+                  <List sx={{ mb: 2, maxHeight: 200, overflow: 'auto' }}>
+                    {(config.commandsAutoRenderMimeBundles ?? []).map(
+                      (command, index) => (
+                        <ListItem
+                          key={index}
+                          divider
+                          secondaryAction={
+                            <IconButton
+                              onClick={() => {
+                                const newCommands = [
+                                  ...(config.commandsAutoRenderMimeBundles ??
+                                    [])
+                                ];
+                                newCommands.splice(index, 1);
+                                handleConfigUpdate({
+                                  commandsAutoRenderMimeBundles: newCommands
+                                });
+                              }}
+                              size="small"
+                            >
+                              <Delete />
+                            </IconButton>
+                          }
+                        >
+                          <ListItemText primary={command} />
+                        </ListItem>
+                      )
+                    )}
+                  </List>
+
+                  <TextField
+                    fullWidth
+                    label={trans.__('Add Auto-Render Command')}
+                    placeholder={trans.__(
+                      'e.g., jupyterlab-ai-commands:execute-in-kernel'
+                    )}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') {
+                        const value = (
+                          e.target as HTMLInputElement
+                        ).value.trim();
+                        const existingCommands =
+                          config.commandsAutoRenderMimeBundles ?? [];
+                        if (value && !existingCommands.includes(value)) {
+                          const newCommands = [...existingCommands, value];
+                          handleConfigUpdate({
+                            commandsAutoRenderMimeBundles: newCommands
+                          });
+                          (e.target as HTMLInputElement).value = '';
+                        }
+                      }
+                    }}
+                    helperText={trans.__(
+                      'Press Enter to add a command. Default: jupyterlab-ai-commands:execute-in-kernel'
+                    )}
+                  />
+                </Box>
+
+                <Divider sx={{ my: 2 }} />
+
+                <Box>
+                  <Typography variant="body1" gutterBottom>
+                    {trans.__('Trusted MIME Types for Auto-Render')}
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    color="text.secondary"
+                    gutterBottom
+                    sx={{ display: 'block' }}
+                  >
+                    {trans.__(
+                      'When auto-rendering command outputs, these MIME types are marked trusted in chat'
+                    )}
+                  </Typography>
+
+                  <List sx={{ mb: 2, maxHeight: 200, overflow: 'auto' }}>
+                    {(config.trustedMimeTypesForAutoRender ?? []).map(
+                      (mimeType, index) => (
+                        <ListItem
+                          key={index}
+                          divider
+                          secondaryAction={
+                            <IconButton
+                              onClick={() => {
+                                const newMimeTypes = [
+                                  ...(config.trustedMimeTypesForAutoRender ??
+                                    [])
+                                ];
+                                newMimeTypes.splice(index, 1);
+                                handleConfigUpdate({
+                                  trustedMimeTypesForAutoRender: newMimeTypes
+                                });
+                              }}
+                              size="small"
+                            >
+                              <Delete />
+                            </IconButton>
+                          }
+                        >
+                          <ListItemText primary={mimeType} />
+                        </ListItem>
+                      )
+                    )}
+                  </List>
+
+                  <TextField
+                    fullWidth
+                    label={trans.__('Add Trusted MIME Type')}
+                    placeholder={trans.__('e.g., text/html')}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') {
+                        const value = (
+                          e.target as HTMLInputElement
+                        ).value.trim();
+                        const existingMimeTypes =
+                          config.trustedMimeTypesForAutoRender ?? [];
+                        if (value && !existingMimeTypes.includes(value)) {
+                          const newMimeTypes = [...existingMimeTypes, value];
+                          handleConfigUpdate({
+                            trustedMimeTypesForAutoRender: newMimeTypes
+                          });
+                          (e.target as HTMLInputElement).value = '';
+                        }
+                      }
+                    }}
+                    helperText={trans.__(
+                      'Press Enter to add a MIME type. Default: text/html'
+                    )}
+                  />
+                </Box>
               </Box>
             </CardContent>
           </Card>
@@ -1215,7 +1417,18 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
               ) : (
                 <List>
                   {config.mcpServers.map(server => (
-                    <ListItem key={server.id} divider>
+                    <ListItem
+                      key={server.id}
+                      divider
+                      secondaryAction={
+                        <IconButton
+                          onClick={e => handleMCPMenuClick(e, server.id)}
+                          size="small"
+                        >
+                          <MoreVert />
+                        </IconButton>
+                      }
+                    >
                       <ListItemText
                         primary={
                           <Box
@@ -1279,14 +1492,6 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                           </Box>
                         }
                       />
-                      <ListItemSecondaryAction>
-                        <IconButton
-                          onClick={e => handleMCPMenuClick(e, server.id)}
-                          size="small"
-                        >
-                          <MoreVert />
-                        </IconButton>
-                      </ListItemSecondaryAction>
                     </ListItem>
                   ))}
                 </List>
@@ -1517,7 +1722,7 @@ export namespace AISettingsWidget {
     /**
      * The token used to request the secrets manager.
      */
-    token: symbol;
+    token: symbol | null;
     /**
      * The application language translation bundle.
      */
@@ -1529,11 +1734,11 @@ namespace Private {
   /**
    * The token to use with the secrets manager, setter and getter.
    */
-  let secretsToken: symbol;
-  export function setToken(value: symbol): void {
+  let secretsToken: symbol | null;
+  export function setToken(value: symbol | null): void {
     secretsToken = value;
   }
-  export function getToken(): symbol {
+  export function getToken(): symbol | null {
     return secretsToken;
   }
 }

package/src/widgets/main-area-chat.ts

@@ -1,4 +1,4 @@
-import { ChatWidget } from '@jupyter/chat';
+import { ChatWidget, IChatModel } from '@jupyter/chat';
 import { CommandToolbarButton, MainAreaWidget } from '@jupyterlab/apputils';
 import { launchIcon } from '@jupyterlab/ui-components';
 import type { TranslationBundle } from '@jupyterlab/translation';
@@ -8,6 +8,7 @@ import { ApprovalButtons } from '../approval-buttons';
 import { AIChatModel } from '../chat-model';
 import { TokenUsageWidget } from '../components/token-usage-display';
 import { AISettingsModel } from '../models/settings-model';
+import { RenderedMessageOutputAreaCompat } from '../rendered-message-outputarea';
 import { CommandIds } from '../tokens';
 
 export namespace MainAreaChat {
@@ -56,12 +57,21 @@ export class MainAreaChat extends MainAreaWidget<ChatWidget> {
       chatPanel: this.content,
       agentManager: this.model.agentManager
     });
+    // Temporary compat: keep output-area CSS context for MIME renderers
+    // until jupyter-chat provides it natively.
+    this._outputAreaCompat = new RenderedMessageOutputAreaCompat({
+      chatPanel: this.content
+    });
+
+    this.model.writersChanged.connect(this._writersChanged);
   }
 
   dispose(): void {
     super.dispose();
     // Dispose of the approval buttons widget when the chat is disposed.
     this._approvalButtons.dispose();
+    this._outputAreaCompat.dispose();
+    this.model.writersChanged.disconnect(this._writersChanged);
   }
 
   /**
@@ -71,5 +81,28 @@ export class MainAreaChat extends MainAreaWidget<ChatWidget> {
     return this.content.model as AIChatModel;
   }
 
+  /**
+   * Get the area of the chat.
+   */
+  get area(): string | undefined {
+    return this.content.area;
+  }
+
+  private _writersChanged = (_: IChatModel, writers: IChatModel.IWriter[]) => {
+    // Check if AI is currently writing (streaming)
+    const aiWriting = writers.some(
+      writer => writer.user.username === 'ai-assistant'
+    );
+
+    if (aiWriting) {
+      this.content.inputToolbarRegistry?.hide('send');
+      this.content.inputToolbarRegistry?.show('stop');
+    } else {
+      this.content.inputToolbarRegistry?.hide('stop');
+      this.content.inputToolbarRegistry?.show('send');
+    }
+  };
+
   private _approvalButtons: ApprovalButtons;
+  private _outputAreaCompat: RenderedMessageOutputAreaCompat;
 }