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

package/src/browser/chat-find/chat-find-matcher.ts

@@ -0,0 +1,197 @@
+// *****************************************************************************
+// 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 {
+    ChatModel, ChatRequestModel, ChatResponseContent, CodeChatResponseContent, ErrorChatResponseContent,
+    MarkdownChatResponseContent, TextChatResponseContent, formatProviderError
+} from '@theia/ai-chat/lib/common';
+import { ImageContextVariable } from '@theia/ai-chat/lib/common/image-context-variable';
+import { escapeRegExpCharacters } from '@theia/core/lib/common/strings';
+import { injectable } from '@theia/core/shared/inversify';
+import { MarkdownRendering } from '../chat-response-renderer/markdown-part-renderer';
+import { ChatFindText } from './chat-find-text';
+
+/** Language id of code parts that are rendered as a diagram instead of as source. */
+const MERMAID_LANGUAGE_ID = 'mermaid';
+
+export interface ChatFindOptions {
+    matchCase: boolean;
+    wholeWord: boolean;
+    useRegex: boolean;
+}
+
+export interface ChatFindTextRange {
+    start: number;
+    end: number;
+}
+
+/**
+ * A match of the find query inside a chat session, located by the tree node that renders it.
+ */
+export interface ChatFindMatch extends ChatFindTextRange {
+    /** Id of the tree node rendering the matched text: the request id or the response id. */
+    nodeId: string;
+    /** The `kind` of the matched response part, or {@link ChatFindMatch.REQUEST_KIND} for request text. */
+    kind: string;
+    /** Index into `response.response.content`; `undefined` for request text. */
+    contentIndex?: number;
+    /** 0-based index of this match among all matches inside the same text. */
+    occurrence: number;
+}
+
+export namespace ChatFindMatch {
+    export const REQUEST_KIND = 'request';
+
+    /** Stable identity of a match across recomputations of the match list. */
+    export function key(match: ChatFindMatch): string {
+        return `${match.nodeId}/${match.contentIndex ?? 'request'}/${match.occurrence}`;
+    }
+}
+
+/**
+ * Computes find matches over a chat session model. Only the displayed branch (`model.getRequests()`) is searched.
+ *
+ * Text is searched as it is rendered, not as it is stored: markdown is rendered the way the chat renders it and
+ * its text read with {@link ChatFindText}, the same way the highlighter reads the mounted DOM, so match offsets
+ * are valid in both. Subclass and override {@link getSearchableText} to search additional content kinds.
+ */
+@injectable()
+export class ChatFindMatcher {
+
+    /** VS Code's default `editor.wordSeparators`; whitespace separates words as well. */
+    protected static readonly WORD_SEPARATORS = '`~!@#$%^&*()-=+[{]}\\|;:\'",.<>/?';
+
+    /** Rendered text by the object it was rendered for, reused while its source text is unchanged. */
+    protected readonly renderedTextCache = new WeakMap<object, { source: string, text: string }>();
+
+    /**
+     * Builds the regular expression shared by model matching and DOM highlighting.
+     * @returns `undefined` for an empty query or an invalid regular expression.
+     */
+    createRegExp(query: string, options: ChatFindOptions): RegExp | undefined {
+        if (!query) {
+            return undefined;
+        }
+        let source = options.useRegex ? query : escapeRegExpCharacters(query);
+        if (options.wholeWord) {
+            source = this.wrapWholeWord(source);
+        }
+        try {
+            return new RegExp(source, options.matchCase ? 'g' : 'gi');
+        } catch {
+            return undefined;
+        }
+    }
+
+    /** All matches in tree order: request row, then response row, content parts in order, offsets ascending. */
+    findMatches(model: ChatModel, regexp: RegExp): ChatFindMatch[] {
+        const matches: ChatFindMatch[] = [];
+        for (const request of model.getRequests()) {
+            this.collect(matches, regexp, this.getRequestText(request), request.id, ChatFindMatch.REQUEST_KIND, undefined);
+            request.response.response.content.forEach((content, contentIndex) => {
+                const text = this.getSearchableText(content);
+                if (text) {
+                    this.collect(matches, regexp, text, request.response.id, content.kind, contentIndex);
+                }
+            });
+        }
+        return matches;
+    }
+
+    /** All non-empty occurrences of `regexp` in `text`, in order. */
+    findInText(text: string, regexp: RegExp): ChatFindTextRange[] {
+        const ranges: ChatFindTextRange[] = [];
+        regexp.lastIndex = 0;
+        let result = regexp.exec(text);
+        while (result) {
+            if (result[0].length === 0) {
+                regexp.lastIndex++;
+            } else {
+                ranges.push({ start: result.index, end: result.index + result[0].length });
+            }
+            result = regexp.exec(text);
+        }
+        return ranges;
+    }
+
+    /**
+     * Restricts `source` to whole words the way VS Code does: each end of a match must be the end of the text, next
+     * to a word separator, or itself a word separator. Unlike `\b`, this also works for queries such as `C++` or `foo()`.
+     */
+    protected wrapWholeWord(source: string): string {
+        const separator = `[\\s${escapeRegExpCharacters(ChatFindMatcher.WORD_SEPARATORS)}]`;
+        return `(?:(?<=^|${separator})|(?=${separator}))(?:${source})(?:(?=${separator}|$)|(?<=${separator}))`;
+    }
+
+    protected collect(
+        matches: ChatFindMatch[], regexp: RegExp, text: string, nodeId: string, kind: string, contentIndex: number | undefined
+    ): void {
+        this.findInText(text, regexp).forEach((range, occurrence) => {
+            matches.push({ nodeId, kind, contentIndex, occurrence, start: range.start, end: range.end });
+        });
+    }
+
+    /**
+     * The request text as rendered by `ChatRequestRender`: agent, variable and function mentions as labels,
+     * text parts as inline markdown, inline image parts skipped.
+     */
+    protected getRequestText(request: ChatRequestModel): string {
+        const parts = request.message.parts;
+        const inlineImages = ImageContextVariable.extractInlineImagesWithIndices(parts);
+        return parts
+            .filter((_, index) => !inlineImages.has(index))
+            .map(part => part.kind === 'agent' || part.kind === 'var' || part.kind === 'function'
+                ? ChatFindText.normalize(part.text)
+                : this.getRenderedMarkdownText(part, MarkdownRendering.prepareRequestText(part.text), true, false))
+            .join('');
+    }
+
+    /**
+     * The searchable text of a response part as it is rendered, or `undefined` for kinds that are not searched
+     * (tool calls, reasoning, progress, informational content, which the chat does not render, ...).
+     */
+    protected getSearchableText(content: ChatResponseContent): string | undefined {
+        if (TextChatResponseContent.is(content)) {
+            return ChatFindText.normalize(content.asString?.() ?? content.content);
+        }
+        if (MarkdownChatResponseContent.is(content)) {
+            return this.getRenderedMarkdownText(content, content.content.value, false, true);
+        }
+        if (CodeChatResponseContent.is(content)) {
+            // A mermaid block is rendered as a diagram rather than as its source (see MermaidPartRenderer), so its
+            // source text is nowhere on screen: matches in it could be counted but never highlighted or revealed.
+            // Other code parts are highlighted in their editor, by offsets into the code.
+            return content.language?.toLowerCase() === MERMAID_LANGUAGE_ID ? undefined : content.code;
+        }
+        if (ErrorChatResponseContent.is(content)) {
+            // Only the message of the headline; the highlighter scopes an error part to the same element.
+            return ChatFindText.normalize(formatProviderError(content.error.message).message);
+        }
+        return undefined;
+    }
+
+    /** The text of `markdown` rendered the way `useMarkdownRendering` renders it, cached per `owner`. */
+    protected getRenderedMarkdownText(owner: object, markdown: string, skipSurroundingParagraph: boolean, blockExternalResourceLoading: boolean): string {
+        const cached = this.renderedTextCache.get(owner);
+        if (cached?.source === markdown) {
+            return cached.text;
+        }
+        const fragment = MarkdownRendering.renderToFragment(markdown, skipSurroundingParagraph, blockExternalResourceLoading);
+        const text = ChatFindText.collect(fragment).text;
+        this.renderedTextCache.set(owner, { source: markdown, text });
+        return text;
+    }
+}

package/src/browser/chat-find/chat-find-text.ts

@@ -0,0 +1,65 @@
+// *****************************************************************************
+// 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 { BLOCKED_RESOURCE_CLASS } from '../chat-response-renderer/block-external-resources';
+
+export interface ChatFindTextSegment {
+    node: Text;
+    /** Offset of the node's first character in {@link ChatFindTextContent.text}. */
+    start: number;
+}
+
+export interface ChatFindTextContent {
+    text: string;
+    segments: ChatFindTextSegment[];
+}
+
+/**
+ * Reads the searchable text of rendered chat content. The matcher reads it from a detached render and the
+ * highlighter from the mounted DOM, so match offsets computed on the one are valid in the other.
+ */
+export namespace ChatFindText {
+
+    /** The concatenated text nodes under `root`, skipping subtrees that do not hold visible text. */
+    export function collect(root: Node): ChatFindTextContent {
+        const segments: ChatFindTextSegment[] = [];
+        let text = '';
+        const walker = (root.ownerDocument ?? document).createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, {
+            acceptNode: node => node.nodeType === Node.ELEMENT_NODE
+                ? (isSkipped(node as Element) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_SKIP)
+                : NodeFilter.FILTER_ACCEPT
+        });
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+            segments.push({ node: node as Text, start: text.length });
+            text += node.textContent ?? '';
+        }
+        return { text: normalize(text), segments };
+    }
+
+    /** Non-breaking spaces (e.g. from ` ` in markdown) are searched as plain spaces; the length is unchanged. */
+    export function normalize(text: string): string {
+        return text.replace(/ /g, ' ');
+    }
+
+    /**
+     * Code rather than visible text (e.g. the stylesheet of a rendered mermaid diagram), and blocked-resource
+     * placeholders, whose label disappears once the user allows the resource.
+     */
+    function isSkipped(element: Element): boolean {
+        const name = element.nodeName.toLowerCase();
+        return name === 'style' || name === 'script' || element.classList.contains(BLOCKED_RESOURCE_CLASS);
+    }
+}

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

@@ -0,0 +1,261 @@
+// *****************************************************************************
+// 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 { enableJSDOM } from '@theia/core/lib/browser/test/jsdom';
+let disableJSDOM = enableJSDOM();
+import { FrontendApplicationConfigProvider } from '@theia/core/lib/browser/frontend-application-config-provider';
+FrontendApplicationConfigProvider.set({});
+import 'reflect-metadata';
+import { ChatChangeEvent, ChatModel, ChatRequestModel, ChatResponseContent, TextChatResponseContentImpl } from '@theia/ai-chat/lib/common';
+import { Emitter } from '@theia/core';
+import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
+import { expect } from 'chai';
+import { ChatFindMatch, ChatFindMatcher } from './chat-find-matcher';
+import { ChatFindState, ChatFindWidget } from './chat-find-widget';
+disableJSDOM();
+
+interface FakeRequest {
+    request: ChatRequestModel;
+    responseChanged: Emitter<void>;
+    content: ChatResponseContent[];
+}
+
+function fakeRequest(id: string, text: string, ...responseTexts: string[]): FakeRequest {
+    const responseChanged = new Emitter<void>();
+    const content: ChatResponseContent[] = responseTexts.map(t => new TextChatResponseContentImpl(t));
+    const request = {
+        id,
+        message: { parts: [{ kind: 'text', text }] },
+        response: { id: `${id}-response`, isComplete: false, onDidChange: responseChanged.event, response: { content } }
+    } as unknown as ChatRequestModel;
+    return { request, responseChanged, content };
+}
+
+function fakeModel(requests: FakeRequest[]): { model: ChatModel; changed: Emitter<ChatChangeEvent> } {
+    const changed = new Emitter<ChatChangeEvent>();
+    const model = {
+        onDidChange: changed.event,
+        getRequests: () => requests.map(r => r.request),
+        isEmpty: () => requests.length === 0
+    } as unknown as ChatModel;
+    return { model, changed };
+}
+
+class TestChatFindWidget extends ChatFindWidget {
+    visible = false;
+    constructor() {
+        super();
+        this.matcher = new ChatFindMatcher();
+        this.contextKeyService = {
+            createKey: () => ({
+                set: (value: boolean) => { this.visible = value; },
+                get: () => this.visible,
+                reset: () => { this.visible = false; }
+            })
+        } as unknown as ContextKeyService;
+        this.init();
+    }
+}
+
+describe('ChatFindWidget', () => {
+    let widget: TestChatFindWidget;
+    let states: ChatFindState[];
+    let reveals: ChatFindMatch[];
+
+    before(() => disableJSDOM = enableJSDOM());
+    after(() => disableJSDOM());
+
+    beforeEach(() => {
+        widget = new TestChatFindWidget();
+        widget.fallbackFocusTarget = document.body;
+        states = [];
+        reveals = [];
+        widget.onDidChangeState(state => states.push(state));
+        widget.onDidRequestReveal(match => reveals.push(match));
+    });
+
+    afterEach(() => widget.dispose());
+
+    it('computes matches for the query and reveals the first one', () => {
+        const { model } = fakeModel([fakeRequest('r1', 'alpha', 'alpha beta alpha')]);
+        widget.setChatModel(model);
+        widget.open();
+        widget.setQuery('alpha');
+        expect(widget.state.matches).to.have.length(3);
+        expect(widget.currentMatch).to.deep.include({ nodeId: 'r1', occurrence: 0 });
+        expect(reveals).to.have.length(1);
+    });
+
+    it('cycles with next and previous, wrapping around', () => {
+        const { model } = fakeModel([fakeRequest('r1', 'x', 'x', 'x')]);
+        widget.setChatModel(model);
+        widget.open();
+        widget.setQuery('x');
+        widget.next();
+        expect(widget.currentMatch).to.deep.include({ nodeId: 'r1-response', contentIndex: 0 });
+        widget.next();
+        widget.next();
+        expect(widget.currentMatch).to.deep.include({ nodeId: 'r1' });
+        widget.previous();
+        expect(widget.currentMatch).to.deep.include({ nodeId: 'r1-response', contentIndex: 1 });
+        expect(reveals).to.have.length(5);
+    });
+
+    it('keeps the current match while a response streams', async () => {
+        const first = fakeRequest('r1', 'needle', 'needle');
+        const second = fakeRequest('r2', '', 'nee');
+        const { model } = fakeModel([first, second]);
+        widget.setChatModel(model);
+        widget.open();
+        widget.setQuery('needle');
+        widget.next(); // current: r1-response
+        second.content[0] = new TextChatResponseContentImpl('needle needle');
+        second.responseChanged.fire();
+        await new Promise(resolve => setTimeout(resolve, 150));
+        expect(widget.state.matches).to.have.length(4);
+        expect(widget.currentMatch).to.deep.include({ nodeId: 'r1-response', occurrence: 0 });
+        expect(reveals).to.have.length(2); // a recompute never reveals
+    });
+
+    it('moves to the nearest following match when the current one disappears', async () => {
+        const first = fakeRequest('r1', 'a', 'a');
+        const second = fakeRequest('r2', 'a', 'a');
+        const requests = [first, second];
+        const { model, changed } = fakeModel(requests);
+        widget.setChatModel(model);
+        widget.open();
+        widget.setQuery('a');
+        widget.next(); // r1-response
+        requests.splice(0, 1);
+        changed.fire({ kind: 'removeRequest', requestId: 'r1' } as unknown as ChatChangeEvent);
+        await new Promise(resolve => setTimeout(resolve, 150));
+        expect(widget.state.matches).to.have.length(2);
+        expect(widget.currentMatch).to.deep.include({ nodeId: 'r2' });
+    });
+
+    it('does not search while closed, and catches up on open', async () => {
+        const streaming = fakeRequest('r1', '', 'nee');
+        const { model } = fakeModel([streaming]);
+        let searches = 0;
+        const findMatches = widget['matcher'].findMatches.bind(widget['matcher']);
+        widget['matcher'].findMatches = (...args) => { searches++; return findMatches(...args); };
+        widget.setChatModel(model);
+        widget.open();
+        widget.setQuery('needle');
+        widget.dismiss();
+        searches = 0;
+        streaming.content[0] = new TextChatResponseContentImpl('needle');
+        streaming.responseChanged.fire();
+        await new Promise(resolve => setTimeout(resolve, 150));
+        expect(searches).to.equal(0);
+        widget.open();
+        expect(widget.state.matches).to.have.length(1);
+    });
+
+    it('reports no matches for an invalid regular expression', () => {
+        const { model } = fakeModel([fakeRequest('r1', '(', '(')]);
+        widget.setChatModel(model);
+        widget.toggleOption('useRegex');
+        widget.setQuery('(');
+        expect(widget.state.regexp).to.be.undefined;
+        expect(widget.state.matches).to.deep.equal([]);
+        expect(widget.currentMatch).to.be.undefined;
+    });
+
+    it('sets the context key and clears highlights on open and close', () => {
+        const { model } = fakeModel([fakeRequest('r1', 'q', 'q')]);
+        widget.setChatModel(model);
+        widget.setQuery('q');
+        widget.open();
+        expect(widget.isOpen).to.be.true;
+        expect(widget.visible).to.be.true;
+        widget.dismiss();
+        expect(widget.isOpen).to.be.false;
+        expect(widget.visible).to.be.false;
+        const last = states[states.length - 1];
+        expect(last.regexp).to.be.undefined;
+        expect(last.matches).to.deep.equal([]);
+        widget.open();
+        expect(widget.state.matches).to.have.length(2);
+        expect(states[states.length - 1].matches).to.have.length(2);
+    });
+
+    it('does not open on a session without requests, where the tree shows the session list', () => {
+        const { model } = fakeModel([]);
+        widget.setChatModel(model);
+        widget.open();
+        expect(widget.isOpen).to.be.false;
+        expect(widget.canFind).to.be.false;
+    });
+
+    it('closes when the tracked session is replaced by one without requests', () => {
+        const { model: withRequests } = fakeModel([fakeRequest('r1', 'q', 'q')]);
+        const { model: empty } = fakeModel([]);
+        widget.setChatModel(withRequests);
+        widget.setQuery('q');
+        widget.open();
+        expect(widget.isOpen).to.be.true;
+        widget.setChatModel(empty);
+        expect(widget.isOpen).to.be.false;
+    });
+
+    it('closes on a session switch, keeping query and options for the next open', () => {
+        const { model: a } = fakeModel([fakeRequest('r1', 'k k', 'k')]);
+        const { model: b } = fakeModel([fakeRequest('r9', 'K', 'k')]);
+        widget.setChatModel(a);
+        widget.open();
+        widget.setQuery('k');
+        widget.next();
+        widget.next();
+        widget.setChatModel(b);
+        expect(widget.isOpen).to.be.false;
+        expect(widget.visible).to.be.false;
+        expect(states[states.length - 1].matches).to.deep.equal([]);
+        widget.open();
+        expect(widget.state.matches).to.have.length(2);
+        expect(widget.currentMatch).to.deep.include({ nodeId: 'r9', occurrence: 0 });
+    });
+
+    it('does not move focus when it closes on a session switch', () => {
+        const before = document.createElement('button');
+        const picked = document.createElement('button');
+        document.body.append(before, picked);
+        const { model: a } = fakeModel([fakeRequest('r1', 'k', 'k')]);
+        widget.setChatModel(a);
+        before.focus();
+        widget.open();
+        picked.focus(); // e.g. the entry the user clicked in the session history
+        widget.setChatModel(fakeModel([fakeRequest('r2', 'k', 'k')]).model);
+        expect(document.activeElement).to.equal(picked);
+        before.remove();
+        picked.remove();
+    });
+
+    it('stays open when the same session is tracked again', () => {
+        const { model } = fakeModel([fakeRequest('r1', 'k', 'k')]);
+        widget.setChatModel(model);
+        widget.open();
+        widget.setChatModel(model);
+        expect(widget.isOpen).to.be.true;
+    });
+
+    it('resets the context key when disposed while open', () => {
+        widget.setChatModel(fakeModel([fakeRequest('r1', 'k', 'k')]).model);
+        widget.open();
+        widget.dispose();
+        expect(widget.visible).to.be.false;
+    });
+});