@theia/ai-ide 1.67.0-next.59 → 1.67.0

package/src/browser/ai-configuration/prompt-fragments-configuration-widget.tsx

@@ -270,8 +270,8 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
                 msg: nls.localize('theia/ai/core/promptFragmentsConfiguration/resetToCustomizationDialogMsg',
                     'Are you sure you want to reset the prompt fragment "{0}" to use the {1} customization? This will remove all higher-priority customizations.',
                     customization.id, type),
-                ok: nls.localize('theia/ai/core/promptFragmentsConfiguration/resetButton', 'Reset'),
-                cancel: nls.localize('theia/ai/core/promptFragmentsConfiguration/cancelButton', 'Cancel')
+                ok: nls.localizeByDefault('Reset'),
+                cancel: nls.localizeByDefault('Cancel')
             });
 
             const shouldReset = await dialog.open();
@@ -283,8 +283,8 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
                 title: nls.localize('theia/ai/core/promptFragmentsConfiguration/resetToBuiltInDialogTitle', 'Reset to Built-in'),
                 msg: nls.localize('theia/ai/core/promptFragmentsConfiguration/resetToBuiltInDialogMsg',
                     'Are you sure you want to reset the prompt fragment "{0}" to its built-in version? This will remove all customizations.', customization.id),
-                ok: nls.localize('theia/ai/core/promptFragmentsConfiguration/resetButton', 'Reset'),
-                cancel: nls.localize('theia/ai/core/promptFragmentsConfiguration/cancelButton', 'Cancel')
+                ok: nls.localizeByDefault('Reset'),
+                cancel: nls.localizeByDefault('Cancel')
             });
 
             const shouldReset = await dialog.open();
@@ -323,8 +323,8 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
                     'Are you sure you want to remove the {0} customization for prompt fragment "{1}" ({2})?', type, customization.id, description) :
                 nls.localize('theia/ai/core/promptFragmentsConfiguration/removeCustomizationDialogMsg',
                     'Are you sure you want to remove the {0} customization for prompt fragment "{1}"?', type, customization.id),
-            ok: nls.localize('theia/ai/core/promptFragmentsConfiguration/removeButton', 'Remove'),
-            cancel: nls.localize('theia/ai/core/promptFragmentsConfiguration/cancelButton', 'Cancel')
+            ok: nls.localizeByDefault('Remove'),
+            cancel: nls.localizeByDefault('Cancel')
         });
 
         const shouldDelete = await dialog.open();
@@ -342,7 +342,7 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
             msg: nls.localize('theia/ai/core/promptFragmentsConfiguration/resetAllCustomizationsDialogMsg',
                 'Are you sure you want to reset all prompt fragments to their built-in versions? This will remove all customizations.'),
             ok: nls.localize('theia/ai/core/promptFragmentsConfiguration/resetAllButton', 'Reset All'),
-            cancel: nls.localize('theia/ai/core/promptFragmentsConfiguration/cancelButton', 'Cancel')
+            cancel: nls.localizeByDefault('Cancel')
         });
 
         const shouldReset = await dialog.open();
@@ -492,7 +492,7 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
                                             {defaultVariantId === variantId && (
                                                 <span className="badge default-variant"
                                                     title={nls.localize('theia/ai/core/promptFragmentsConfiguration/defaultVariantTitle', 'Default variant')}>
-                                                    {nls.localize('theia/ai/core/promptFragmentsConfiguration/defaultVariantLabel', 'Default')}
+                                                    {nls.localizeByDefault('Default')}
                                                 </span>
                                             )}
                                             {selectedVariantId === variantId && (
@@ -601,7 +601,7 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
                         {isActive && (
                             <span className="active-indicator"
                                 title={nls.localize('theia/ai/core/promptFragmentsConfiguration/activeCustomizationTitle', 'Active customization')}>
-                                {nls.localize('theia/ai/core/promptFragmentsConfiguration/activeCustomizationLabel', 'Active')}
+                                {nls.localizeByDefault('Active')}
                             </span>
                         )}
                     </div>
@@ -695,7 +695,7 @@ const CustomizationTypeBadge: React.FC<CustomizationTypeBadgeProps> = ({ promptF
                     customizationType + ' ' + nls.localize('theia/ai/core/promptFragmentsConfiguration/customization', 'customization')
                     : nls.localize('theia/ai/core/promptFragmentsConfiguration/customizationLabel', 'Customization')}`);
             } else {
-                setTypeLabel(nls.localize('theia/ai/core/promptFragmentsConfiguration/builtInLabel', 'Built-in'));
+                setTypeLabel(nls.localizeByDefault('Built-in'));
             }
         };
 

package/src/browser/ai-configuration/template-settings-renderer.tsx

@@ -63,16 +63,11 @@ export const PromptVariantRenderer: React.FC<PromptVariantRendererProps> = ({
     };
 
     return (
-        <div className="template-renderer">
-            <div className="settings-section-title template-header">
-                <strong>{promptVariantSet.id}</strong>
-            </div>
-            <div className="template-controls">
-                {(variantIds.length > 1 || isInvalidVariant) && (
-                    <>
-                        <label htmlFor={`variant-selector-${promptVariantSet.id}`} className="template-select-label">
-                            {nls.localize('theia/ai/core/templateSettings/selectVariant', 'Select Variant:')}
-                        </label>
+        <>
+            <tr>
+                <td className="template-name-cell">{promptVariantSet.id}</td>
+                <td className="template-variant-cell">
+                    {(variantIds.length > 1 || isInvalidVariant) && (
                         <select
                             id={`variant-selector-${promptVariantSet.id}`}
                             className={`theia-select template-variant-selector ${isInvalidVariant ? 'error' : ''}`}
@@ -81,7 +76,7 @@ export const PromptVariantRenderer: React.FC<PromptVariantRendererProps> = ({
                         >
                             {isInvalidVariant && (
                                 <option value="invalid" disabled>
-                                    {nls.localize('theia/ai/core/templateSettings/unavailableVariant', 'Selected variant not available, default will be used')}
+                                    {nls.localize('theia/ai/core/templateSettings/unavailableVariant', 'Unavailable')}
                                 </option>
                             )}
                             {variantIds.map(variantId => (
@@ -90,23 +85,24 @@ export const PromptVariantRenderer: React.FC<PromptVariantRendererProps> = ({
                                 </option>
                             ))}
                         </select>
-                    </>
-                )}
-                <button
-                    className="theia-button main"
-                    onClick={openTemplate}
-                    disabled={isInvalidVariant}
-                >
-                    {nls.localizeByDefault('Edit')}
-                </button>
-                <button
-                    className="theia-button secondary"
-                    onClick={resetTemplate}
-                    disabled={isInvalidVariant}
-                >
-                    {nls.localizeByDefault('Reset')}
-                </button>
-            </div>
-        </div>
+                    )}
+                    {variantIds.length === 1 && !isInvalidVariant && <span>{selectedVariant}</span>}
+                </td>
+                <td className="template-actions-cell">
+                    <button
+                        className="template-action-icon-button codicon codicon-edit"
+                        onClick={openTemplate}
+                        disabled={isInvalidVariant}
+                        title={nls.localizeByDefault('Edit')}
+                    />
+                    <button
+                        className="template-action-icon-button codicon codicon-discard"
+                        onClick={resetTemplate}
+                        disabled={isInvalidVariant}
+                        title={nls.localizeByDefault('Reset')}
+                    />
+                </td>
+            </tr>
+        </>
     );
 };

package/src/browser/ai-configuration/token-usage-configuration-widget.tsx

@@ -14,24 +14,19 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { ReactWidget } from '@theia/core/lib/browser';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import { MessageService, nls } from '@theia/core';
 import { TokenUsageFrontendService, ModelTokenUsageData } from '@theia/ai-core/lib/browser/token-usage-frontend-service';
 import { formatDistanceToNow } from 'date-fns';
-
-// Using the interface from the token usage service
+import { AITableConfigurationWidget, TableColumn } from './base/ai-table-configuration-widget';
 
 @injectable()
-export class AITokenUsageConfigurationWidget extends ReactWidget {
+export class AITokenUsageConfigurationWidget extends AITableConfigurationWidget<ModelTokenUsageData> {
 
     static readonly ID = 'ai-token-usage-configuration-container-widget';
     static readonly LABEL = nls.localize('theia/ai/tokenUsage/label', 'Token Usage');
 
-    // Data will be fetched from the service
-    protected tokenUsageData: ModelTokenUsageData[] = [];
-
     @inject(MessageService)
     protected readonly messageService: MessageService;
 
@@ -43,168 +38,173 @@ export class AITokenUsageConfigurationWidget extends ReactWidget {
         this.id = AITokenUsageConfigurationWidget.ID;
         this.title.label = AITokenUsageConfigurationWidget.LABEL;
         this.title.closable = false;
+        this.addClass('ai-configuration-widget');
 
-        this.refreshData();
+        this.loadItems().then(() => this.update());
 
-        this.tokenUsageService.onTokenUsageUpdated(data => {
-            this.tokenUsageData = data;
-            this.update();
-        });
+        this.toDispose.push(
+            this.tokenUsageService.onTokenUsageUpdated(data => {
+                this.items = data;
+                this.update();
+            })
+        );
     }
 
-    protected async refreshData(): Promise<void> {
+    protected async loadItems(): Promise<void> {
         try {
-            this.tokenUsageData = await this.tokenUsageService.getTokenUsageData();
-            this.update();
+            this.items = await this.tokenUsageService.getTokenUsageData();
         } catch (error) {
             this.messageService.error(nls.localize('theia/ai/tokenUsage/failedToGetTokenUsageData', 'Failed to fetch token usage data: {0}', error));
         }
     }
 
+    protected getItemId(item: ModelTokenUsageData): string {
+        return item.modelId;
+    }
+
     protected formatNumber(num: number): string {
         return num.toLocaleString();
     }
 
     protected formatDate(date?: Date): string {
         if (!date) {
-            return nls.localize('theia/ai/tokenUsage/never', 'Never');
+            return nls.localizeByDefault('Never');
         }
         return formatDistanceToNow(date, { addSuffix: true });
     }
 
     protected hasCacheData(): boolean {
-        return this.tokenUsageData.some(model =>
+        return this.items.some(model =>
             model.cachedInputTokens !== undefined ||
             model.readCachedInputTokens !== undefined
         );
     }
 
-    protected renderHeaderRow(): React.ReactNode {
+    protected getColumns(): TableColumn<ModelTokenUsageData>[] {
         const showCacheColumns = this.hasCacheData();
+        const columns: TableColumn<ModelTokenUsageData>[] = [
+            {
+                id: 'model',
+                label: nls.localize('theia/ai/tokenUsage/model', 'Model'),
+                className: 'token-usage-model-column',
+                renderCell: item => <span>{item.modelId}</span>
+            },
+            {
+                id: 'input-tokens',
+                label: nls.localize('theia/ai/tokenUsage/inputTokens', 'Input Tokens'),
+                className: 'token-usage-column',
+                renderCell: item => <span>{this.formatNumber(item.inputTokens)}</span>
+            }
+        ];
+
+        if (showCacheColumns) {
+            columns.push(
+                {
+                    id: 'cached-input-tokens',
+                    label: nls.localize('theia/ai/tokenUsage/cachedInputTokens', 'Input Tokens Written to Cache'),
+                    className: 'token-usage-column',
+                    renderCell: item => (
+                        <span title={nls.localize(
+                            'theia/ai/tokenUsage/cachedInputTokensTooltip',
+                            "Tracked additionally to 'Input Tokens'. Usually more expensive than non-cached tokens."
+                        )}>
+                            {item.cachedInputTokens !== undefined ? this.formatNumber(item.cachedInputTokens) : '-'}
+                        </span>
+                    )
+                },
+                {
+                    id: 'read-cached-input-tokens',
+                    label: nls.localize('theia/ai/tokenUsage/readCachedInputTokens', 'Input Tokens Read From Cache'),
+                    className: 'token-usage-column',
+                    renderCell: item => (
+                        <span title={nls.localize(
+                            'theia/ai/tokenUsage/readCachedInputTokensTooltip',
+                            "Tracked additionally to 'Input Token'. Usually much less expensive than not cached. Usually does not count to rate limits."
+                        )}>
+                            {item.readCachedInputTokens !== undefined ? this.formatNumber(item.readCachedInputTokens) : '-'}
+                        </span>
+                    )
+                }
+            );
+        }
 
-        return (
-            <tr className="token-usage-header">
-                <th className="token-usage-model-column">{nls.localize('theia/ai/tokenUsage/model', 'Model')}</th>
-                <th className="token-usage-column">{nls.localize('theia/ai/tokenUsage/inputTokens', 'Input Tokens')}</th>
-                {showCacheColumns && (
-                    <>
-                        <th
-                            className="token-usage-column"
-                            title={nls.localize(
-                                'theia/ai/tokenUsage/cachedInputTokensTooltip',
-                                "Tracked additionally to 'Input Tokens'. Usually more expensive than non-cached tokens."
-                            )}
-                        >
-                            {nls.localize('theia/ai/tokenUsage/cachedInputTokens', 'Input Tokens Written to Cache')}
-                        </th>
-                        <th
-                            className="token-usage-column"
-                            title={nls.localize(
-                                'theia/ai/tokenUsage/readCachedInputTokensTooltip',
-                                "Tracked additionally to 'Input Token'. Usually much less expensive than not cached. Usually does not count to rate limits."
-                            )}
-                        >
-                            {nls.localize('theia/ai/tokenUsage/readCachedInputTokens', 'Input Tokens Read From Cache')}
-                        </th>
-                    </>
-                )}
-                <th className="token-usage-column">{nls.localize('theia/ai/tokenUsage/outputTokens', 'Output Tokens')}</th>
-                <th
-                    className="token-usage-column"
-                    title={nls.localize('theia/ai/tokenUsage/totalTokensTooltip', "'Input Tokens' + 'Output Tokens'"
-                    )}
-                >
-                    {nls.localize('theia/ai/tokenUsage/totalTokens', 'Total Tokens')}
-                </th>
-                <th className="token-usage-column">{nls.localize('theia/ai/tokenUsage/lastUsed', 'Last Used')}</th>
-            </tr >
+        columns.push(
+            {
+                id: 'output-tokens',
+                label: nls.localize('theia/ai/tokenUsage/outputTokens', 'Output Tokens'),
+                className: 'token-usage-column',
+                renderCell: item => <span>{this.formatNumber(item.outputTokens)}</span>
+            },
+            {
+                id: 'total-tokens',
+                label: nls.localize('theia/ai/tokenUsage/totalTokens', 'Total Tokens'),
+                className: 'token-usage-column',
+                renderCell: item => {
+                    const totalTokens = item.inputTokens + item.outputTokens + (item.cachedInputTokens ?? 0);
+                    return (
+                        <span title={nls.localize('theia/ai/tokenUsage/totalTokensTooltip', "'Input Tokens' + 'Output Tokens'")}>
+                            {this.formatNumber(totalTokens)}
+                        </span>
+                    );
+                }
+            },
+            {
+                id: 'last-used',
+                label: nls.localize('theia/ai/tokenUsage/lastUsed', 'Last Used'),
+                className: 'token-usage-column',
+                renderCell: item => {
+                    const lastUsedDate = item.lastUsed ? new Date(item.lastUsed) : undefined;
+                    const exactDateString = lastUsedDate ? lastUsedDate.toLocaleString() : '';
+                    return <span title={exactDateString}>{this.formatDate(lastUsedDate)}</span>;
+                }
+            }
         );
-    }
 
-    protected renderModelRow(model: ModelTokenUsageData): React.ReactNode {
-        const lastUsedDate = model.lastUsed ? new Date(model.lastUsed) : undefined;
-        const exactDateString = lastUsedDate ? lastUsedDate.toLocaleString() : '';
-        const showCacheColumns = this.hasCacheData();
-        const totalTokens = model.inputTokens + model.outputTokens + (model.cachedInputTokens ?? 0);
+        return columns;
+    }
 
-        return (
-            <tr key={model.modelId} className="token-usage-row">
-                <td className="token-usage-model-cell">{model.modelId}</td>
-                <td className="token-usage-cell">{this.formatNumber(model.inputTokens)}</td>
-                {showCacheColumns && (
-                    <>
-                        <td className="token-usage-cell">{model.cachedInputTokens !== undefined ? this.formatNumber(model.cachedInputTokens) : '-'}</td>
-                        <td className="token-usage-cell">{model.readCachedInputTokens !== undefined ? this.formatNumber(model.readCachedInputTokens) : '-'}</td>
-                    </>
-                )}
-                <td className="token-usage-cell">{this.formatNumber(model.outputTokens)}</td>
-                <td className="token-usage-cell">{this.formatNumber(totalTokens)}</td>
-                <td className="token-usage-cell" title={exactDateString}>{this.formatDate(lastUsedDate)}</td>
-            </tr>
-        );
+    protected override renderHeader(): React.ReactNode {
+        return undefined;
     }
 
-    protected renderSummaryRow(): React.ReactNode {
-        // Only show summary row if there is data
-        if (this.tokenUsageData.length === 0) {
-            return undefined;
+    protected override renderFooter(): React.ReactNode {
+        if (this.items.length === 0) {
+            return (
+                <div className="ai-empty-state-content">
+                    <p>{nls.localize('theia/ai/tokenUsage/noData', 'No token usage data available yet.')}</p>
+                </div>
+            );
         }
 
-        const totalInputTokens = this.tokenUsageData.reduce((sum, model) => sum + model.inputTokens, 0);
-        const totalOutputTokens = this.tokenUsageData.reduce((sum, model) => sum + model.outputTokens, 0);
-        const totalCachedInputTokens = this.tokenUsageData.reduce(
-            (sum, model) => sum + (model.cachedInputTokens || 0), 0
-        );
-        const totalReadCachedInputTokens = this.tokenUsageData.reduce(
-            (sum, model) => sum + (model.readCachedInputTokens || 0), 0
-        );
-        const totalTokens = totalInputTokens + totalCachedInputTokens + totalOutputTokens;
-
         const showCacheColumns = this.hasCacheData();
+        const totalInputTokens = this.items.reduce((sum, model) => sum + model.inputTokens, 0);
+        const totalOutputTokens = this.items.reduce((sum, model) => sum + model.outputTokens, 0);
+        const totalCachedInputTokens = this.items.reduce((sum, model) => sum + (model.cachedInputTokens || 0), 0);
+        const totalReadCachedInputTokens = this.items.reduce((sum, model) => sum + (model.readCachedInputTokens || 0), 0);
+        const totalTokens = totalInputTokens + totalCachedInputTokens + totalOutputTokens;
 
         return (
-            <tr className="token-usage-summary-row">
-                <td className="token-usage-model-cell"><strong>{nls.localize('theia/ai/tokenUsage/total', 'Total')}</strong></td>
-                <td className="token-usage-cell"><strong>{this.formatNumber(totalInputTokens)}</strong></td>
-                {showCacheColumns && (
-                    <>
-                        <td className="token-usage-cell"><strong>{this.formatNumber(totalCachedInputTokens)}</strong></td>
-                        <td className="token-usage-cell"><strong>{this.formatNumber(totalReadCachedInputTokens)}</strong></td>
-                    </>
-                )}
-                <td className="token-usage-cell"><strong>{this.formatNumber(totalOutputTokens)}</strong></td>
-                <td className="token-usage-cell"><strong>{this.formatNumber(totalTokens)}</strong></td>
-                <td className="token-usage-cell"></td>
-            </tr>
-        );
-    }
-
-    protected render(): React.ReactNode {
-        return (
-            <div className="token-usage-configuration-container">
-                <h2 className="token-usage-configuration-title">{nls.localize('theia/ai/tokenUsage/title', 'AI Model Token Usage')}</h2>
-
-                <div className="token-usage-table-container">
-                    {this.tokenUsageData.length > 0 ? (
-                        <table className="token-usage-table">
-                            <thead>
-                                {this.renderHeaderRow()}
-                            </thead>
-                            <tbody>
-                                {this.tokenUsageData.map(model => this.renderModelRow(model))}
-                                {this.renderSummaryRow()}
-                            </tbody>
-                        </table>
-                    ) : (
-                        <div className="token-usage-empty">
-                            <p>{nls.localize('theia/ai/tokenUsage/noData', 'No token usage data available yet.')}</p>
-                        </div>
-                    )}
-                </div>
-
-                <div className="token-usage-notes">
-                    <p className="token-usage-note">
-                        <i className="codicon codicon-info"></i>
+            <div className="ai-configuration-footer-total">
+                <table className="ai-configuration-table">
+                    <tfoot>
+                        <tr className="ai-configuration-footer-total-row">
+                            <td className="token-usage-model-column">{nls.localize('theia/ai/tokenUsage/total', 'Total')}</td>
+                            <td className="token-usage-column">{this.formatNumber(totalInputTokens)}</td>
+                            {showCacheColumns && (
+                                <>
+                                    <td className="token-usage-column">{this.formatNumber(totalCachedInputTokens)}</td>
+                                    <td className="token-usage-column">{this.formatNumber(totalReadCachedInputTokens)}</td>
+                                </>
+                            )}
+                            <td className="token-usage-column">{this.formatNumber(totalOutputTokens)}</td>
+                            <td className="token-usage-column">{this.formatNumber(totalTokens)}</td>
+                            <td className="token-usage-column"></td>
+                        </tr>
+                    </tfoot>
+                </table>
+                <div className="ai-configuration-info-box">
+                    <p className="ai-configuration-info-text">
+                        <i className="codicon codicon-info ai-configuration-info-icon"></i>
                         {nls.localize('theia/ai/tokenUsage/note', 'Token usage is tracked since the start of the application and is not persisted.')}
                     </p>
                 </div>