@theia/ai-chat-ui 1.76.0-next.7 → 1.76.0

package/src/browser/chat-find/chat-find-widget.tsx

@@ -0,0 +1,418 @@
+// *****************************************************************************
+// Copyright (C) 2026 Safi Seid-Ahmad, K2view and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { ChatChangeEvent, ChatModel, ChatRequestModel } from '@theia/ai-chat/lib/common';
+import { DisposableCollection, Emitter, Event } from '@theia/core';
+import { codicon, DISABLED_CLASS, ReactWidget } from '@theia/core/lib/browser';
+import { ContextKey, ContextKeyService } from '@theia/core/lib/browser/context-key-service';
+import { nls } from '@theia/core/lib/common/nls';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import '../../../src/browser/style/chat-find.css';
+import { ChatFindMatch, ChatFindMatcher, ChatFindOptions } from './chat-find-matcher';
+
+export interface ChatFindState {
+    regexp: RegExp | undefined;
+    matches: ChatFindMatch[];
+    current: ChatFindMatch | undefined;
+}
+
+/**
+ * The find bar of a chat view: owns query, options, matches and the current match, and tracks the
+ * chat model so matches follow streamed responses. Reveal and highlighting are done by the host
+ * (the chat tree widget) via {@link onDidRequestReveal} and {@link onDidChangeState}.
+ */
+@injectable()
+export class ChatFindWidget extends ReactWidget {
+
+    static readonly ID = 'chat-find-widget';
+    protected static readonly RECOMPUTE_DELAY_MS = 100;
+
+    @inject(ChatFindMatcher)
+    protected matcher: ChatFindMatcher;
+
+    @inject(ContextKeyService)
+    protected contextKeyService: ContextKeyService;
+
+    protected readonly onDidChangeStateEmitter = new Emitter<ChatFindState>();
+    readonly onDidChangeState: Event<ChatFindState> = this.onDidChangeStateEmitter.event;
+
+    protected readonly onDidRequestRevealEmitter = new Emitter<ChatFindMatch>();
+    readonly onDidRequestReveal: Event<ChatFindMatch> = this.onDidRequestRevealEmitter.event;
+
+    /** Focused when the bar closes and the previously focused element is gone. */
+    fallbackFocusTarget: HTMLElement | undefined;
+
+    protected visibleKey: ContextKey<boolean>;
+    protected query = '';
+    protected options: ChatFindOptions = { matchCase: false, wholeWord: false, useRegex: false };
+    protected regexp: RegExp | undefined;
+    protected matches: ChatFindMatch[] = [];
+    protected currentIndex = -1;
+    protected chatModel: ChatModel | undefined;
+    protected nodeOrder = new Map<string, number>();
+    protected readonly toDisposeOnModelChange = new DisposableCollection();
+    protected recomputeTimeout: ReturnType<typeof setTimeout> | undefined;
+    protected previouslyFocused: HTMLElement | undefined;
+    protected input: HTMLInputElement | undefined;
+    protected pendingFocus = false;
+
+    @postConstruct()
+    protected init(): void {
+        this.id = ChatFindWidget.ID;
+        this.addClass('theia-chat-find-widget');
+        this.visibleKey = this.contextKeyService.createKey<boolean>('chatFindVisible', false);
+        // No perfect-scrollbar: its `.ps { overflow: hidden }` would clip the bar, which overflows this zero-height host.
+        this.scrollOptions = undefined;
+        this.toDispose.pushAll([this.onDidChangeStateEmitter, this.onDidRequestRevealEmitter, this.toDisposeOnModelChange]);
+        this.hide();
+        this.update();
+    }
+
+    override dispose(): void {
+        if (this.recomputeTimeout !== undefined) {
+            clearTimeout(this.recomputeTimeout);
+            this.recomputeTimeout = undefined;
+        }
+        this.hideBar();
+        super.dispose();
+    }
+
+    get isOpen(): boolean {
+        return !this.isHidden;
+    }
+
+    get state(): ChatFindState {
+        return { regexp: this.regexp, matches: this.matches, current: this.currentMatch };
+    }
+
+    get currentMatch(): ChatFindMatch | undefined {
+        return this.matches[this.currentIndex];
+    }
+
+    /**
+     * Whether there is anything to search. A session without requests renders the welcome screen (which hosts
+     * the session list), so the find bar has nothing to search and stays closed there.
+     */
+    get canFind(): boolean {
+        return this.chatModel !== undefined && !this.chatModel.isEmpty();
+    }
+
+    /**
+     * Track a chat model; query and options are kept, the position resets. Like the find widget of an editor, the bar
+     * belongs to one session: it closes when another session is tracked, and `Ctrl+F` brings the query back.
+     */
+    setChatModel(model: ChatModel | undefined): void {
+        if (model !== this.chatModel) {
+            // Not `dismiss()`: the user just picked another session, so focus must stay where it is.
+            this.hideBar();
+        }
+        this.toDisposeOnModelChange.dispose();
+        this.chatModel = model;
+        this.currentIndex = -1;
+        if (model) {
+            this.toDisposeOnModelChange.push(model.onDidChange(event => this.handleModelChange(event)));
+            model.getRequests().forEach(request => this.trackResponse(request));
+        }
+        this.recompute(false);
+        this.closeWhenNothingToFind();
+    }
+
+    open(): void {
+        if (!this.canFind) {
+            return;
+        }
+        const active = document.activeElement;
+        if (!this.isOpen && active instanceof HTMLElement && !this.node.contains(active)) {
+            this.previouslyFocused = active;
+        }
+        this.show();
+        this.visibleKey.set(true);
+        this.recompute(false);
+        this.focusInput();
+    }
+
+    /** Closes the bar and returns focus to where it was before the bar opened. */
+    dismiss(): void {
+        if (!this.isOpen) {
+            return;
+        }
+        const target = this.previouslyFocused?.isConnected ? this.previouslyFocused : this.fallbackFocusTarget;
+        this.hideBar();
+        target?.focus();
+    }
+
+    /** Closes the bar and clears the highlights without touching focus. */
+    protected hideBar(): void {
+        if (this.isDisposed || !this.isOpen) {
+            return;
+        }
+        this.hide();
+        this.visibleKey.set(false);
+        this.previouslyFocused = undefined;
+        this.onDidChangeStateEmitter.fire({ regexp: undefined, matches: [], current: undefined });
+    }
+
+    setQuery(query: string): void {
+        if (query === this.query) {
+            return;
+        }
+        this.query = query;
+        this.recompute(true);
+        this.revealCurrent();
+    }
+
+    toggleOption(option: keyof ChatFindOptions): void {
+        this.options = { ...this.options, [option]: !this.options[option] };
+        this.recompute(true);
+        this.revealCurrent();
+    }
+
+    next(): void {
+        this.step(1);
+    }
+
+    previous(): void {
+        this.step(-1);
+    }
+
+    protected step(delta: number): void {
+        if (this.matches.length === 0) {
+            return;
+        }
+        this.currentIndex = (this.currentIndex + delta + this.matches.length) % this.matches.length;
+        this.update();
+        this.fireStateIfOpen();
+        this.revealCurrent();
+    }
+
+    protected revealCurrent(): void {
+        const current = this.currentMatch;
+        if (current) {
+            this.onDidRequestRevealEmitter.fire(current);
+        }
+    }
+
+    protected handleModelChange(event: ChatChangeEvent): void {
+        if (event.kind === 'addRequest') {
+            this.trackResponse(event.request);
+        }
+        this.scheduleRecompute();
+    }
+
+    protected trackResponse(request: ChatRequestModel): void {
+        if (!request.response.isComplete) {
+            this.toDisposeOnModelChange.push(request.response.onDidChange(() => this.scheduleRecompute()));
+        }
+    }
+
+    protected scheduleRecompute(): void {
+        // A closed bar keeps its query but does not follow the model; `open()` recomputes.
+        if (!this.isOpen || this.recomputeTimeout !== undefined) {
+            return;
+        }
+        this.recomputeTimeout = setTimeout(() => {
+            this.recomputeTimeout = undefined;
+            this.recompute(false);
+        }, ChatFindWidget.RECOMPUTE_DELAY_MS);
+    }
+
+    /**
+     * Recompute matches. The current match is kept by identity when it still exists; otherwise (or when
+     * `moveToNearest` is set after a query change) the first match at or after the previous position becomes current.
+     * While the bar is closed there are no matches.
+     */
+    protected recompute(moveToNearest: boolean): void {
+        const previous = this.currentMatch;
+        this.regexp = this.matcher.createRegExp(this.query, this.options);
+        this.nodeOrder = this.computeNodeOrder();
+        this.matches = this.isOpen && this.chatModel && this.regexp ? this.matcher.findMatches(this.chatModel, this.regexp) : [];
+        this.currentIndex = this.pickCurrentIndex(previous, moveToNearest);
+        this.update();
+        this.fireStateIfOpen();
+        this.closeWhenNothingToFind();
+    }
+
+    /** Closes the bar once the tracked session has no requests left to search. */
+    protected closeWhenNothingToFind(): void {
+        if (this.isOpen && !this.canFind) {
+            this.dismiss();
+        }
+    }
+
+    protected fireStateIfOpen(): void {
+        if (this.isOpen) {
+            this.onDidChangeStateEmitter.fire(this.state);
+        }
+    }
+
+    protected computeNodeOrder(): Map<string, number> {
+        const order = new Map<string, number>();
+        this.chatModel?.getRequests().forEach((request, index) => {
+            order.set(request.id, 2 * index);
+            order.set(request.response.id, 2 * index + 1);
+        });
+        return order;
+    }
+
+    protected pickCurrentIndex(previous: ChatFindMatch | undefined, moveToNearest: boolean): number {
+        if (this.matches.length === 0) {
+            return -1;
+        }
+        if (!previous) {
+            return 0;
+        }
+        if (!moveToNearest) {
+            const key = ChatFindMatch.key(previous);
+            const same = this.matches.findIndex(match => ChatFindMatch.key(match) === key);
+            if (same >= 0) {
+                return same;
+            }
+        }
+        const nearest = this.matches.findIndex(match => this.compare(match, previous) >= 0);
+        return nearest >= 0 ? nearest : 0;
+    }
+
+    /** Document order of two matches: row order, then content index, then offset. */
+    protected compare(a: ChatFindMatch, b: ChatFindMatch): number {
+        const rowA = this.nodeOrder.get(a.nodeId) ?? -1;
+        const rowB = this.nodeOrder.get(b.nodeId) ?? -1;
+        if (rowA !== rowB) {
+            return rowA - rowB;
+        }
+        const contentA = a.contentIndex ?? -1;
+        const contentB = b.contentIndex ?? -1;
+        if (contentA !== contentB) {
+            return contentA - contentB;
+        }
+        return a.start - b.start;
+    }
+
+    protected focusInput(): void {
+        if (this.input) {
+            this.input.focus();
+            this.input.select();
+        } else {
+            this.pendingFocus = true;
+        }
+    }
+
+    protected setInput = (input: HTMLInputElement | null): void => {
+        this.input = input ?? undefined;
+        if (input && this.pendingFocus) {
+            this.pendingFocus = false;
+            input.focus();
+            input.select();
+        }
+    };
+
+    protected handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        this.setQuery(event.target.value);
+    };
+
+    protected handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.shiftKey) {
+                this.previous();
+            } else {
+                this.next();
+            }
+        } else if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.dismiss();
+        }
+    };
+
+    protected handleToggleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
+        const option = event.currentTarget.dataset.option as keyof ChatFindOptions | undefined;
+        if (option) {
+            this.toggleOption(option);
+            this.input?.focus();
+        }
+    };
+
+    protected handlePreviousClick = (): void => {
+        this.previous();
+        this.input?.focus();
+    };
+
+    protected handleNextClick = (): void => {
+        this.next();
+        this.input?.focus();
+    };
+
+    protected handleCloseClick = (): void => {
+        this.dismiss();
+    };
+
+    protected render(): React.ReactNode {
+        const hasQuery = this.query.length > 0;
+        const count = this.matches.length;
+        const noResults = hasQuery && count === 0;
+        const label = count > 0
+            ? nls.localizeByDefault('{0} of {1}', this.currentIndex + 1, count)
+            : nls.localizeByDefault('No results');
+        return <div className='theia-chat-find-bar' role='search'>
+            <div className={`theia-chat-find-input-box${noResults ? ' no-results' : ''}`}>
+                <input
+                    ref={this.setInput}
+                    type='text'
+                    className='theia-input'
+                    spellCheck={false}
+                    defaultValue={this.query}
+                    placeholder={nls.localizeByDefault('Find')}
+                    title={nls.localizeByDefault('Find')}
+                    aria-label={nls.localizeByDefault('Find')}
+                    onChange={this.handleInputChange}
+                    onKeyDown={this.handleInputKeyDown}
+                />
+                {this.renderToggle('matchCase', 'case-sensitive', nls.localizeByDefault('Match Case'))}
+                {this.renderToggle('wholeWord', 'whole-word', nls.localizeByDefault('Match Whole Word'))}
+                {this.renderToggle('useRegex', 'regex', nls.localizeByDefault('Use Regular Expression'))}
+            </div>
+            <span className={`theia-chat-find-count${noResults ? ' no-results' : ''}`} aria-live='polite'>{label}</span>
+            {this.renderButton('arrow-up', nls.localizeByDefault('Previous Match'), count > 0, this.handlePreviousClick)}
+            {this.renderButton('arrow-down', nls.localizeByDefault('Next Match'), count > 0, this.handleNextClick)}
+            {this.renderButton('close', nls.localizeByDefault('Close'), true, this.handleCloseClick)}
+        </div>;
+    }
+
+    protected renderToggle(option: keyof ChatFindOptions, icon: string, title: string): React.ReactNode {
+        const enabled = this.options[option];
+        return <button
+            key={option}
+            data-option={option}
+            className={`theia-chat-find-option ${codicon(icon, true)}${enabled ? ' enabled' : ''}`}
+            title={title}
+            aria-label={title}
+            aria-pressed={enabled}
+            onClick={this.handleToggleClick}
+        />;
+    }
+
+    protected renderButton(icon: string, title: string, enabled: boolean, onClick: () => void): React.ReactNode {
+        return <button
+            className={`theia-chat-find-option ${codicon(icon, true)}${enabled ? '' : ' ' + DISABLED_CLASS}`}
+            title={title}
+            aria-label={title}
+            disabled={!enabled}
+            onClick={onClick}
+        />;
+    }
+}

package/src/browser/chat-input-scroll-util.spec.ts

@@ -0,0 +1,42 @@
+// *****************************************************************************
+// Copyright (C) 2026 Safi Seid-Ahmad, K2view and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { expect } from 'chai';
+import { computeRevealScrollDelta } from './chat-input-scroll-util';
+
+describe('computeRevealScrollDelta', () => {
+    const viewportHeight = 240;
+
+    it('returns 0 when the row is fully visible', () => {
+        expect(computeRevealScrollDelta(100, 120, viewportHeight)).to.equal(0);
+    });
+
+    it('returns 0 when the row touches the bottom edge', () => {
+        expect(computeRevealScrollDelta(220, 240, viewportHeight)).to.equal(0);
+    });
+
+    it('scrolls up by the overshoot when the row is above the viewport', () => {
+        expect(computeRevealScrollDelta(-346, -326, viewportHeight)).to.equal(-346);
+    });
+
+    it('scrolls down by the overshoot when the row is below the viewport', () => {
+        expect(computeRevealScrollDelta(560, 580, viewportHeight)).to.equal(340);
+    });
+
+    it('scrolls down when the row is only partially below the viewport', () => {
+        expect(computeRevealScrollDelta(230, 250, viewportHeight)).to.equal(10);
+    });
+});

package/src/browser/chat-input-scroll-util.ts

@@ -0,0 +1,30 @@
+// *****************************************************************************
+// Copyright (C) 2026 Safi Seid-Ahmad, K2view and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+/**
+ * Computes how far a scroll container must scroll so that the vertical range `[rowTop, rowBottom]`,
+ * given in pixels relative to the top edge of the container's visible area, becomes fully visible.
+ * Negative values scroll up, positive values scroll down, `0` means the range is already visible.
+ */
+export function computeRevealScrollDelta(rowTop: number, rowBottom: number, viewportHeight: number): number {
+    if (rowTop < 0) {
+        return rowTop;
+    }
+    if (rowBottom > viewportHeight) {
+        return rowBottom - viewportHeight;
+    }
+    return 0;
+}

package/src/browser/chat-input-widget.spec.ts

@@ -24,6 +24,7 @@ FrontendApplicationConfigProvider.set({});
 import 'reflect-metadata';
 
 import { expect } from 'chai';
+import { ReasoningLevel, ReasoningSettings, ReasoningSupport } from '@theia/ai-core';
 import { AIChatInputWidget } from './chat-input-widget';
 
 disableJSDOM();
@@ -44,6 +45,16 @@ class TestChatInputWidget extends AIChatInputWidget {
         return this.refreshCapabilities();
     }
 
+    setReasoningState(support: ReasoningSupport, saved?: ReasoningSettings): void {
+        this.currentReasoningSupport = support;
+        this.savedReasoning = saved;
+        (this as unknown as { chatService: unknown }).chatService = { getSessions: () => [] };
+    }
+
+    currentReasoningLevelForTest(): ReasoningLevel | undefined {
+        return this.getCurrentReasoningLevel();
+    }
+
     protected override async updateCapabilitiesForAgent(agentId: string, modeId?: string, preserveOverrides?: boolean): Promise<void> {
         this.updateCalls.push({ agentId, modeId, preserveOverrides });
     }
@@ -57,6 +68,24 @@ describe('AIChatInputWidget', () => {
     before(() => disableJSDOM = enableJSDOM());
     after(() => disableJSDOM());
 
+    describe('getCurrentReasoningLevel', () => {
+        const oSeries: ReasoningSupport = { supportedLevels: ['off', 'low', 'medium', 'high', 'auto'], defaultLevel: 'auto' };
+
+        it('clamps a persisted level the current model does not support to the nearest supported one', () => {
+            const widget = new TestChatInputWidget();
+            widget.setReasoningState(oSeries, { level: 'minimal' });
+
+            expect(widget.currentReasoningLevelForTest()).to.equal('low');
+        });
+
+        it('keeps a persisted level the current model supports', () => {
+            const widget = new TestChatInputWidget();
+            widget.setReasoningState(oSeries, { level: 'high' });
+
+            expect(widget.currentReasoningLevelForTest()).to.equal('high');
+        });
+    });
+
     describe('refreshCapabilities', () => {
         it('preserves capability selections while reloading prompt-template capabilities', async () => {
             const widget = new TestChatInputWidget();