@theia/ai-chat-ui 1.71.0-next.8 → 1.71.1

package/src/browser/session-settings-dialog.tsx

@@ -18,6 +18,7 @@ import { ChatSessionSettings, CommonChatSessionSettings } from '@theia/ai-chat';
 import { InMemoryResources, URI, nls } from '@theia/core';
 import { AbstractDialog, Message } from '@theia/core/lib/browser';
 import * as React from '@theia/core/shared/react';
+import { flushSync } from '@theia/core/shared/react-dom';
 import { createRoot, Root } from '@theia/core/shared/react-dom/client';
 import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
 import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
@@ -26,59 +27,6 @@ export interface SessionSettingsDialogProps {
     initialSettings: ChatSessionSettings | undefined;
 }
 
-interface ThinkingModeSectionProps {
-    enabled: boolean;
-    budgetTokens: number;
-    onEnabledChange: (enabled: boolean) => void;
-    onBudgetChange: (budget: number) => void;
-}
-
-const ThinkingModeSection: React.FC<ThinkingModeSectionProps> = ({
-    enabled,
-    budgetTokens,
-    onEnabledChange,
-    onBudgetChange
-}) => (
-    <div className="session-settings-thinking-mode">
-        <div className="session-settings-section-header">
-            {nls.localize('theia/ai/session-settings-dialog/thinkingMode', 'Thinking Mode')}
-        </div>
-        <div className="session-settings-section-note">
-            {nls.localize('theia/ai/session-settings-dialog/thinkingModeNote', 'Some models may ignore this setting.')}
-        </div>
-        <div className="session-settings-checkbox-container">
-            <input
-                type="checkbox"
-                id="thinking-enabled"
-                checked={enabled}
-                onChange={e => onEnabledChange(e.target.checked)}
-            />
-            <label htmlFor="thinking-enabled">
-                {nls.localize('theia/ai/session-settings-dialog/enableThinking', 'Enable extended thinking')}
-            </label>
-        </div>
-        <div className="session-settings-budget-container">
-            <label
-                htmlFor="thinking-budget"
-                className={!enabled ? 'disabled' : ''}
-            >
-                {nls.localize('theia/ai/session-settings-dialog/budgetTokens', 'Budget tokens:')}
-            </label>
-            <input
-                type="number"
-                id="thinking-budget"
-                min={1000}
-                max={100000}
-                step={1000}
-                value={budgetTokens}
-                placeholder="10000"
-                disabled={!enabled}
-                onChange={e => onBudgetChange(parseInt(e.target.value, 10))}
-            />
-        </div>
-    </div>
-);
-
 interface ConfirmationTimeoutSectionProps {
     enabled: boolean;
     timeoutSeconds: number;
@@ -155,35 +103,21 @@ const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => (
 );
 
 interface DialogContentProps {
-    thinkingEnabled: boolean;
-    thinkingBudget: number;
     confirmationTimeoutEnabled: boolean;
     confirmationTimeoutSeconds: number;
     errorMessage: string;
-    onThinkingEnabledChange: (enabled: boolean) => void;
-    onThinkingBudgetChange: (budget: number) => void;
     onConfirmationTimeoutEnabledChange: (enabled: boolean) => void;
     onConfirmationTimeoutSecondsChange: (seconds: number) => void;
 }
 
 const DialogContent: React.FC<DialogContentProps> = ({
-    thinkingEnabled,
-    thinkingBudget,
     confirmationTimeoutEnabled,
     confirmationTimeoutSeconds,
     errorMessage,
-    onThinkingEnabledChange,
-    onThinkingBudgetChange,
     onConfirmationTimeoutEnabledChange,
     onConfirmationTimeoutSecondsChange
 }) => (
     <div className="session-settings-container">
-        <ThinkingModeSection
-            enabled={thinkingEnabled}
-            budgetTokens={thinkingBudget}
-            onEnabledChange={onThinkingEnabledChange}
-            onBudgetChange={onThinkingBudgetChange}
-        />
         <ConfirmationTimeoutSection
             enabled={confirmationTimeoutEnabled}
             timeoutSeconds={confirmationTimeoutSeconds}
@@ -203,12 +137,11 @@ export class SessionSettingsDialog extends AbstractDialog<ChatSessionSettings> {
     protected initialAdvancedSettingsString: string;
     protected errorMessage: string = '';
 
-    protected thinkingEnabled: boolean;
-    protected thinkingBudget: number;
-
     protected confirmationTimeoutEnabled: boolean;
     protected confirmationTimeoutSeconds: number;
 
+    protected preservedReasoning: CommonChatSessionSettings['reasoning'];
+
     protected contentRoot: Root;
     protected editorContainerNode: HTMLDivElement;
 
@@ -225,9 +158,8 @@ export class SessionSettingsDialog extends AbstractDialog<ChatSessionSettings> {
         const initialSettings = options.initialSettings;
         this.settings = initialSettings ? { ...initialSettings } : {};
 
-        // Extract thinking mode settings from commonSettings
-        this.thinkingEnabled = this.settings.commonSettings?.thinkingMode?.enabled ?? false;
-        this.thinkingBudget = this.settings.commonSettings?.thinkingMode?.budgetTokens ?? 10000;
+        // Reasoning is edited in the chat input; preserve it across this dialog.
+        this.preservedReasoning = this.settings.commonSettings?.reasoning;
 
         // Extract confirmation timeout settings from commonSettings
         const savedTimeout = this.settings.commonSettings?.confirmationTimeout;
@@ -253,7 +185,14 @@ export class SessionSettingsDialog extends AbstractDialog<ChatSessionSettings> {
 
     protected override onAfterAttach(msg: Message): void {
         super.onAfterAttach(msg);
-        this.render();
+        // flushSync ensures React commits the render synchronously so that
+        // attachEditorContainer can query the DOM immediately afterwards.
+        // Without this, React 18 may defer the commit when invoked outside a
+        // browser event handler (e.g. from an Electron IPC callback from an
+        // Electron-rendered native menu), causing attachEditorContainer to
+        // find no .session-settings-advanced element and the Monaco editor
+        // to initialize inside a detached, zero-size node.
+        flushSync(() => this.render());
         this.attachEditorContainer();
         this.createJsonEditor();
     }
@@ -273,13 +212,9 @@ export class SessionSettingsDialog extends AbstractDialog<ChatSessionSettings> {
     protected render(): void {
         this.contentRoot.render(
             <DialogContent
-                thinkingEnabled={this.thinkingEnabled}
-                thinkingBudget={this.thinkingBudget}
                 confirmationTimeoutEnabled={this.confirmationTimeoutEnabled}
                 confirmationTimeoutSeconds={this.confirmationTimeoutSeconds}
                 errorMessage={this.errorMessage}
-                onThinkingEnabledChange={this.handleThinkingEnabledChange}
-                onThinkingBudgetChange={this.handleThinkingBudgetChange}
                 onConfirmationTimeoutEnabledChange={this.handleConfirmationTimeoutEnabledChange}
                 onConfirmationTimeoutSecondsChange={this.handleConfirmationTimeoutSecondsChange}
             />
@@ -379,20 +314,6 @@ export class SessionSettingsDialog extends AbstractDialog<ChatSessionSettings> {
         }
     }
 
-    protected handleThinkingEnabledChange = (enabled: boolean): void => {
-        this.thinkingEnabled = enabled;
-        this.updateSettingsFromCommonSettings();
-        this.render();
-        this.attachEditorContainer();
-    };
-
-    protected handleThinkingBudgetChange = (budget: number): void => {
-        this.thinkingBudget = budget;
-        this.updateSettingsFromCommonSettings();
-        this.render();
-        this.attachEditorContainer();
-    };
-
     protected handleConfirmationTimeoutEnabledChange = (enabled: boolean): void => {
         this.confirmationTimeoutEnabled = enabled;
         this.updateSettingsFromCommonSettings();
@@ -409,11 +330,8 @@ export class SessionSettingsDialog extends AbstractDialog<ChatSessionSettings> {
 
     protected updateSettingsFromCommonSettings(): void {
         const commonSettings: CommonChatSessionSettings = {};
-        if (this.thinkingEnabled) {
-            commonSettings.thinkingMode = {
-                enabled: true,
-                budgetTokens: isNaN(this.thinkingBudget) ? undefined : this.thinkingBudget
-            };
+        if (this.preservedReasoning) {
+            commonSettings.reasoning = this.preservedReasoning;
         }
         if (this.confirmationTimeoutEnabled && !isNaN(this.confirmationTimeoutSeconds) && this.confirmationTimeoutSeconds > 0) {
             commonSettings.confirmationTimeout = this.confirmationTimeoutSeconds;

package/src/browser/style/index.css

@@ -713,8 +713,9 @@ div:last-child>.theia-ChatNode {
   flex-direction: row-reverse;
 }
 
-/* Mode selector - compact SelectComponent inside toolbar */
-.theia-ChatInput-ModeSelector.theia-select-component {
+/* Mode and reasoning selectors - compact SelectComponents inside toolbar */
+.theia-ChatInput-ModeSelector.theia-select-component,
+.theia-ChatInput-ReasoningSelector.theia-select-component {
   min-width: unset;
   min-height: unset;
   height: calc(var(--theia-icon-size) + var(--theia-ui-padding) - 1px);
@@ -729,26 +730,103 @@ div:last-child>.theia-ChatNode {
   outline: none;
 }
 
-.theia-ChatInput-ModeSelector .theia-select-component-chevron {
+/* Anchor for the off-level slash overlay drawn via ::after. */
+.theia-ChatInput-ReasoningSelector.theia-select-component {
+  position: relative;
+}
+
+.theia-ChatInput-ModeSelector .theia-select-component-chevron,
+.theia-ChatInput-ReasoningSelector .theia-select-component-chevron {
   font-size: var(--theia-ui-font-size1);
   margin-left: calc(var(--theia-ui-padding) / 3);
 }
 
-.theia-ChatInput-ModeSelector.theia-select-component:hover {
+.theia-ChatInput-ModeSelector.theia-select-component:hover,
+.theia-ChatInput-ReasoningSelector.theia-select-component:hover {
   background-color: var(--theia-toolbar-hoverBackground);
 }
 
-.theia-ChatInput-ModeSelector.theia-select-component:focus-visible {
+.theia-ChatInput-ModeSelector.theia-select-component:focus-visible,
+.theia-ChatInput-ReasoningSelector.theia-select-component:focus-visible {
   outline: 1px solid var(--theia-focusBorder);
   outline-offset: -1px;
 }
 
-.theia-ChatInput-ModeSelector.disabled {
+.theia-ChatInput-ModeSelector.disabled,
+.theia-ChatInput-ReasoningSelector.disabled {
   opacity: var(--theia-mod-disabled-opacity);
   cursor: default;
   pointer-events: none;
 }
 
+/* Inject a leading lightbulb icon inside the reasoning selector so it shares the dropdown's
+   click area, hover/focus styles, and visual bounds (no DOM gap, single control). Sized to match
+   the toolbar's other codicons (e.g. capabilities wrench) rather than the small chevron.
+   The base glyph is the filled lightbulb (\ea61); per-level overrides below swap glyph, opacity
+   or color to give a visual cue that scales with the chosen reasoning intensity. */
+.theia-ChatInput-ReasoningSelector.theia-select-component::before {
+  font-family: codicon;
+  content: '\ea61';
+  /* codicon-lightbulb (filled) — default for low/medium/high */
+  font-size: var(--theia-icon-size);
+  line-height: 1;
+  margin-right: calc(var(--theia-ui-padding) / 3);
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Off: empty bulb glyph + CSS-drawn diagonal slash overlay (mimics MDI's lightbulb-off). */
+.theia-ChatInput-ReasoningSelector.reasoning-level-off::before {
+  content: '\ec40';
+  /* codicon-lightbulb-empty */
+  opacity: 0.85;
+}
+
+.theia-ChatInput-ReasoningSelector.reasoning-level-off::after {
+  content: '';
+  position: absolute;
+  /* Center over the ::before icon area: padding-left + half icon width. */
+  left: calc(var(--theia-ui-padding) * 2 / 3 + var(--theia-icon-size) / 2);
+  top: 50%;
+  width: calc(var(--theia-icon-size) * 0.95);
+  height: 1.5px;
+  background-color: currentColor;
+  border-radius: 1px;
+  transform: translate(-50%, -50%) rotate(-45deg);
+  pointer-events: none;
+  opacity: 0.85;
+}
+
+/* Minimal: empty (outline only) bulb at low opacity — "on, but barely".
+   Lower opacity than `low` so the brightness order matches the level order:
+   the crisper outline at full opacity would otherwise read brighter than a filled bulb at 0.55. */
+.theia-ChatInput-ReasoningSelector.reasoning-level-minimal::before {
+  content: '\ec40';
+  /* codicon-lightbulb-empty */
+  opacity: 0.5;
+}
+
+/* Low: filled bulb, perceptibly more present than minimal. */
+.theia-ChatInput-ReasoningSelector.reasoning-level-low::before {
+  opacity: 0.7;
+}
+
+/* Medium: filled bulb, moderately bright. */
+.theia-ChatInput-ReasoningSelector.reasoning-level-medium::before {
+  opacity: 0.9;
+}
+
+/* High: filled bulb at full opacity, tinted with the warning foreground (warm/yellow). */
+.theia-ChatInput-ReasoningSelector.reasoning-level-high::before {
+  color: var(--theia-editorWarning-foreground);
+}
+
+/* Auto: lightbulb-sparkle — "the model decides automatically". */
+.theia-ChatInput-ReasoningSelector.reasoning-level-auto::before {
+  content: '\ec1f';
+  /* codicon-lightbulb-sparkle */
+}
+
 .theia-CodePartRenderer-root {
   display: flex;
   flex-direction: column;
@@ -1208,12 +1286,6 @@ div:last-child>.theia-ChatNode {
   outline-color: var(--theia-editor-background);
 }
 
-.session-settings-thinking-mode {
-  padding: 8px 0;
-  border-bottom: 1px solid var(--theia-sideBarSectionHeader-border);
-  margin-bottom: 8px;
-}
-
 .session-settings-section-header {
   font-weight: 600;
   font-size: 13px;
@@ -1243,35 +1315,6 @@ div:last-child>.theia-ChatNode {
   user-select: none;
 }
 
-.session-settings-budget-container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: 22px;
-}
-
-.session-settings-budget-container label {
-  white-space: nowrap;
-}
-
-.session-settings-budget-container label.disabled {
-  color: var(--theia-disabledForeground);
-}
-
-.session-settings-budget-container input[type="number"] {
-  width: 100px;
-  padding: 4px 8px;
-  border: 1px solid var(--theia-input-border);
-  border-radius: 4px;
-  background-color: var(--theia-input-background);
-  color: var(--theia-input-foreground);
-}
-
-.session-settings-budget-container input[type="number"]:disabled {
-  opacity: var(--theia-mod-disabled-opacity);
-  cursor: not-allowed;
-}
-
 .session-settings-confirmation-timeout {
   padding: 8px 0;
   border-bottom: 1px solid var(--theia-sideBarSectionHeader-border);
@@ -1354,21 +1397,23 @@ div:last-child>.theia-ChatNode {
   background-color: var(--theia-toolbar-hoverBackground);
 }
 
-.delegation-summary::before {
+.delegation-toggle-arrow::before {
   content: "\25BC";
-  /* Down arrow */
-  position: absolute;
-  right: var(--theia-ui-padding);
-  top: 50%;
-  transform: translateY(-50%);
   transition: transform 0.2s ease;
-  color: var(--theia-descriptionForeground);
-  font-size: var(--theia-ui-font-size1);
+  display: inline-block;
+  transform: rotate(-90deg);
 }
 
-.delegation-response-details:not([open]) .delegation-summary::before {
-  transform: translateY(-50%) rotate(-90deg);
-  /* Right arrow when closed */
+.delegation-toggle-arrow.open::before {
+  transform: rotate(0deg);
+}
+
+.delegation-toggle-arrow {
+  color: var(--theia-descriptionForeground);
+  font-size: var(--theia-ui-font-size1);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
 }
 
 .delegation-response-details:not([open]) .delegation-summary {
@@ -1407,8 +1452,6 @@ div:last-child>.theia-ChatNode {
   align-items: center;
   gap: var(--theia-ui-padding);
   font-size: var(--theia-ui-font-size1);
-  /* Leave space for the arrow */
-  margin-right: calc(var(--theia-ui-padding) * 3);
 }
 
 .delegation-status-icon {
@@ -1467,6 +1510,27 @@ div:last-child>.theia-ChatNode {
   color: var(--theia-foreground);
 }
 
+.delegation-interaction-badge {
+  color: var(--theia-editorWarning-foreground);
+  display: flex;
+  align-items: center;
+}
+
+.delegation-pending-confirmations {
+  margin-top: var(--theia-ui-padding);
+  padding-top: var(--theia-ui-padding);
+  border-top: var(--theia-border-width) solid var(--theia-sideBarSectionHeader-border);
+}
+
+.delegation-pending-confirmations .theia-tool-confirmation {
+  margin: 0;
+  margin-bottom: var(--theia-ui-padding);
+}
+
+.delegation-pending-confirmations .theia-tool-confirmation:last-child {
+  margin-bottom: 0;
+}
+
 .delegation-response-placeholder {
   margin-top: var(--theia-ui-padding);
   min-height: calc(var(--theia-ui-padding) * 6);
@@ -2015,3 +2079,49 @@ div:last-child>.theia-ChatNode {
 .theia-capabilities-collapsed-scrollbar::-webkit-scrollbar-thumb:hover {
   background-color: var(--theia-scrollbarSlider-hoverBackground);
 }
+
+/* Token usage: border tinting on warning/error (repeated with :has for focus specificity) */
+.theia-ChatInput-Editor-Box.token-usage-border-token-usage-yellow,
+.theia-ChatInput-Editor-Box.token-usage-border-token-usage-yellow:has(.monaco-editor.focused) {
+  border-color: var(--theia-warningBackground);
+}
+
+.theia-ChatInput-Editor-Box.token-usage-border-token-usage-red,
+.theia-ChatInput-Editor-Box.token-usage-border-token-usage-red:has(.monaco-editor.focused) {
+  border-color: var(--theia-errorBackground);
+}
+
+/* Token usage badge next to send button */
+.token-usage-badge {
+  cursor: default;
+  display: flex;
+  align-items: center;
+  margin-right: calc(var(--theia-ui-padding) / 2);
+  --token-usage-fill: var(--theia-descriptionForeground);
+  --token-usage-track: color-mix(in srgb, var(--theia-foreground) 12%, transparent);
+}
+
+.token-usage-badge.token-usage-yellow {
+  --token-usage-fill: var(--theia-warningBackground);
+}
+
+.token-usage-badge.token-usage-red {
+  --token-usage-fill: var(--theia-errorBackground);
+}
+
+/* Circular progress ring */
+.token-usage-ring {
+  width: var(--theia-icon-size);
+  height: var(--theia-icon-size);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.token-usage-ring-inner {
+  width: 75%;
+  height: 75%;
+  border-radius: 50%;
+  background: var(--theia-editor-background);
+}