@jupyterlite/ai 0.15.0 → 0.17.0

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

@@ -1,137 +0,0 @@
-import { ReactWidget, UseSignal } from '@jupyterlab/ui-components';
-import type { TranslationBundle } from '@jupyterlab/translation';
-import React from 'react';
-import { ISignal } from '@lumino/signaling';
-import type { IAISettingsModel, ITokenUsage } from '../tokens';
-
-/**
- * Props for the TokenUsageDisplay component.
- */
-export interface ITokenUsageDisplayProps {
-  /**
-   * The token usage changed signal
-   */
-  tokenUsageChanged: ISignal<any, ITokenUsage>;
-
-  /**
-   * The settings model instance for configuration options
-   */
-  settingsModel: IAISettingsModel;
-
-  /**
-   * Initial token usage.
-   */
-  initialTokenUsage?: ITokenUsage;
-
-  /**
-   * The application language translator.
-   */
-  translator: TranslationBundle;
-}
-
-/**
- * React component that displays token usage information.
- * Shows input/output token counts with up/down arrows.
- * Only renders when token usage display is enabled in settings.
- */
-export const TokenUsageDisplay: React.FC<ITokenUsageDisplayProps> = ({
-  tokenUsageChanged,
-  settingsModel,
-  initialTokenUsage,
-  translator: trans
-}) => {
-  return (
-    <UseSignal signal={settingsModel.stateChanged} initialArgs={undefined}>
-      {() => {
-        const config = settingsModel.config;
-        if (!config.showTokenUsage) {
-          return null;
-        }
-
-        return (
-          <UseSignal signal={tokenUsageChanged} initialArgs={initialTokenUsage}>
-            {(_, tokenUsage: ITokenUsage | null | undefined) => {
-              if (!tokenUsage) {
-                return null;
-              }
-
-              const total = tokenUsage.inputTokens + tokenUsage.outputTokens;
-              if (total === 0) {
-                return null;
-              }
-
-              return (
-                <div
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '6px',
-                    fontSize: '12px',
-                    color: 'var(--jp-ui-font-color2)',
-                    padding: '4px 8px',
-                    backgroundColor: 'var(--jp-layout-color1)',
-                    border: '1px solid var(--jp-border-color1)',
-                    borderRadius: '4px',
-                    whiteSpace: 'nowrap'
-                  }}
-                  title={trans.__(
-                    'Token Usage - Sent: %1, Received: %2, Total: %3',
-                    tokenUsage.inputTokens.toLocaleString(),
-                    tokenUsage.outputTokens.toLocaleString(),
-                    total.toLocaleString()
-                  )}
-                >
-                  <span
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '2px'
-                    }}
-                  >
-                    <span>↑</span>
-                    <span>{tokenUsage.inputTokens.toLocaleString()}</span>
-                  </span>
-                  <span
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '2px'
-                    }}
-                  >
-                    <span>↓</span>
-                    <span>{tokenUsage.outputTokens.toLocaleString()}</span>
-                  </span>
-                </div>
-              );
-            }}
-          </UseSignal>
-        );
-      }}
-    </UseSignal>
-  );
-};
-
-/**
- * JupyterLab widget wrapper for the TokenUsageDisplay component.
- * Extends ReactWidget to integrate with the JupyterLab widget system.
- */
-export class TokenUsageWidget extends ReactWidget {
-  /**
-   * Creates a new TokenUsageWidget instance.
-   * @param options - Configuration options containing required models
-   */
-  constructor(options: ITokenUsageDisplayProps) {
-    super();
-    this._options = options;
-  }
-
-  /**
-   * Renders the React component within the widget.
-   * @returns The TokenUsageDisplay React element
-   */
-  protected render(): React.ReactElement {
-    return <TokenUsageDisplay {...this._options} />;
-  }
-
-  private _options: ITokenUsageDisplayProps;
-}