@theia/ai-ide 1.67.0-next.3 → 1.67.0-next.56

package/src/browser/context-functions.spec.ts

@@ -22,7 +22,8 @@ import { ListChatContext, ResolveChatContext, AddFileToChatContext } from './con
 import { CancellationTokenSource } from '@theia/core';
 import { ChatContextManager, MutableChatModel, MutableChatRequestModel, MutableChatResponseModel } from '@theia/ai-chat';
 import { fail } from 'assert';
-import { ResolvedAIContextVariable } from '@theia/ai-core';
+import { AIVariableResolutionRequest, ResolvedAIContextVariable } from '@theia/ai-core';
+import { ContextFileValidationService, FileValidationState } from '@theia/ai-chat/lib/browser/context-file-validation-service';
 disableJSDOM();
 
 describe('Context Functions Cancellation Tests', () => {
@@ -100,3 +101,156 @@ describe('Context Functions Cancellation Tests', () => {
         expect(jsonResponse.error).to.equal('Operation cancelled by user');
     });
 });
+
+describe('AddFileToChatContext Validation Tests', () => {
+    let mockCtx: Partial<MutableChatRequestModel>;
+    let addedFiles: AIVariableResolutionRequest[];
+
+    before(() => {
+        disableJSDOM = enableJSDOM();
+    });
+    after(() => {
+        disableJSDOM();
+    });
+
+    beforeEach(() => {
+        addedFiles = [];
+        const context: Partial<ChatContextManager> = {
+            addVariables: (...vars: AIVariableResolutionRequest[]) => {
+                addedFiles.push(...vars);
+            },
+            getVariables: () => []
+        };
+        mockCtx = {
+            response: {
+                cancellationToken: new CancellationTokenSource().token
+            } as MutableChatResponseModel,
+            context: {
+                variables: []
+            },
+            session: {
+                context
+            } as MutableChatModel
+        };
+    });
+
+    it('should add valid files to context', async () => {
+        const mockValidationService: ContextFileValidationService = {
+            validateFile: async () => ({ state: FileValidationState.VALID })
+        };
+
+        const addFileToChatContext = new AddFileToChatContext();
+        (addFileToChatContext as unknown as { validationService: ContextFileValidationService }).validationService = mockValidationService;
+
+        const result = await addFileToChatContext.getTool().handler(
+            '{"filesToAdd":["/valid/file1.ts","/valid/file2.ts"]}',
+            mockCtx
+        );
+
+        if (typeof result !== 'string') {
+            fail(`Wrong tool call result type: ${result}`);
+        }
+
+        const jsonResponse = JSON.parse(result);
+        expect(jsonResponse.added).to.have.lengthOf(2);
+        expect(jsonResponse.added).to.include('/valid/file1.ts');
+        expect(jsonResponse.added).to.include('/valid/file2.ts');
+        expect(jsonResponse.rejected).to.have.lengthOf(0);
+        expect(jsonResponse.summary.totalRequested).to.equal(2);
+        expect(jsonResponse.summary.added).to.equal(2);
+        expect(jsonResponse.summary.rejected).to.equal(0);
+        expect(addedFiles).to.have.lengthOf(2);
+    });
+
+    it('should reject non-existent files', async () => {
+        const mockValidationService: ContextFileValidationService = {
+            validateFile: async file => {
+                if (file === '/nonexistent/file.ts') {
+                    return {
+                        state: FileValidationState.INVALID_NOT_FOUND,
+                        message: 'File does not exist'
+                    };
+                }
+                return { state: FileValidationState.VALID };
+            }
+        };
+
+        const addFileToChatContext = new AddFileToChatContext();
+        (addFileToChatContext as unknown as { validationService: ContextFileValidationService }).validationService = mockValidationService;
+
+        const result = await addFileToChatContext.getTool().handler(
+            '{"filesToAdd":["/valid/file.ts","/nonexistent/file.ts"]}',
+            mockCtx
+        );
+
+        if (typeof result !== 'string') {
+            fail(`Wrong tool call result type: ${result}`);
+        }
+
+        const jsonResponse = JSON.parse(result);
+        expect(jsonResponse.added).to.have.lengthOf(1);
+        expect(jsonResponse.added).to.include('/valid/file.ts');
+        expect(jsonResponse.rejected).to.have.lengthOf(1);
+        expect(jsonResponse.rejected[0].file).to.equal('/nonexistent/file.ts');
+        expect(jsonResponse.rejected[0].reason).to.equal('File does not exist');
+        expect(jsonResponse.rejected[0].state).to.equal(FileValidationState.INVALID_NOT_FOUND);
+        expect(jsonResponse.summary.totalRequested).to.equal(2);
+        expect(jsonResponse.summary.added).to.equal(1);
+        expect(jsonResponse.summary.rejected).to.equal(1);
+        expect(addedFiles).to.have.lengthOf(1);
+    });
+
+    it('should reject files in secondary workspace roots', async () => {
+        const mockValidationService: ContextFileValidationService = {
+            validateFile: async file => {
+                if (file === '/secondary/root/file.ts') {
+                    return {
+                        state: FileValidationState.INVALID_SECONDARY,
+                        message: 'File is in a secondary workspace root. AI agents can only access files in the first workspace root.'
+                    };
+                }
+                return { state: FileValidationState.VALID };
+            }
+        };
+
+        const addFileToChatContext = new AddFileToChatContext();
+        (addFileToChatContext as unknown as { validationService: ContextFileValidationService }).validationService = mockValidationService;
+
+        const result = await addFileToChatContext.getTool().handler(
+            '{"filesToAdd":["/secondary/root/file.ts"]}',
+            mockCtx
+        );
+
+        if (typeof result !== 'string') {
+            fail(`Wrong tool call result type: ${result}`);
+        }
+
+        const jsonResponse = JSON.parse(result);
+        expect(jsonResponse.added).to.have.lengthOf(0);
+        expect(jsonResponse.rejected).to.have.lengthOf(1);
+        expect(jsonResponse.rejected[0].file).to.equal('/secondary/root/file.ts');
+        expect(jsonResponse.rejected[0].state).to.equal(FileValidationState.INVALID_SECONDARY);
+        expect(addedFiles).to.have.lengthOf(0);
+    });
+
+    it('should add all files when validation service is not available', async () => {
+        const addFileToChatContext = new AddFileToChatContext();
+
+        const result = await addFileToChatContext.getTool().handler(
+            '{"filesToAdd":["/file1.ts","/file2.ts"]}',
+            mockCtx
+        );
+
+        if (typeof result !== 'string') {
+            fail(`Wrong tool call result type: ${result}`);
+        }
+
+        const jsonResponse = JSON.parse(result);
+        expect(jsonResponse.added).to.have.lengthOf(2);
+        expect(jsonResponse.rejected).to.have.lengthOf(0);
+        expect(jsonResponse.summary.totalRequested).to.equal(2);
+        expect(jsonResponse.summary.added).to.equal(2);
+        expect(jsonResponse.summary.rejected).to.equal(0);
+        expect(addedFiles).to.have.lengthOf(2);
+    });
+});

package/src/browser/context-functions.ts

@@ -16,9 +16,10 @@
 
 import { MutableChatRequestModel } from '@theia/ai-chat';
 import { ToolProvider, ToolRequest } from '@theia/ai-core';
-import { injectable } from '@theia/core/shared/inversify';
+import { inject, injectable, optional } from '@theia/core/shared/inversify';
 import { LIST_CHAT_CONTEXT_FUNCTION_ID, RESOLVE_CHAT_CONTEXT_FUNCTION_ID, UPDATE_CONTEXT_FILES_FUNCTION_ID } from '../common/context-functions';
 import { FILE_VARIABLE } from '@theia/ai-core/lib/browser/file-variable-contribution';
+import { ContextFileValidationService, FileValidationState } from '@theia/ai-chat/lib/browser/context-file-validation-service';
 
 @injectable()
 export class ListChatContext implements ToolProvider {
@@ -91,6 +92,9 @@ export class ResolveChatContext implements ToolProvider {
 export class AddFileToChatContext implements ToolProvider {
     static ID = UPDATE_CONTEXT_FILES_FUNCTION_ID;
 
+    @inject(ContextFileValidationService) @optional()
+    protected readonly validationService: ContextFileValidationService | undefined;
+
     getTool(): ToolRequest {
         return {
             id: AddFileToChatContext.ID,
@@ -106,7 +110,10 @@ export class AddFileToChatContext implements ToolProvider {
                 },
                 required: ['filesToAdd']
             },
-            description: 'Adds one or more files to the context of the current chat session, and returns the current list of files in the context.',
+            description: 'Adds one or more files to the context of the current chat session. ' +
+                'Only files that exist within the workspace boundaries will be added. ' +
+                'Files outside the workspace or non-existent files will be rejected. ' +
+                'Returns a detailed status for each file, including which were successfully added and which were rejected with reasons.',
             handler: async (arg: string, ctx: MutableChatRequestModel): Promise<string> => {
                 if (ctx?.response?.cancellationToken?.isCancellationRequested) {
                     return JSON.stringify({ error: 'Operation cancelled by user' });
@@ -114,11 +121,38 @@ export class AddFileToChatContext implements ToolProvider {
 
                 const { filesToAdd } = JSON.parse(arg) as { filesToAdd: string[] };
 
-                ctx.session.context.addVariables(...filesToAdd.map(file => ({ arg: file, variable: FILE_VARIABLE })));
-                const result = ctx.session.context.getVariables().filter(candidate => candidate.variable.id === FILE_VARIABLE.id && !!candidate.arg)
-                    .map(fileRequest => fileRequest.arg);
+                const added: string[] = [];
+                const rejected: Array<{ file: string; reason: string; state: string }> = [];
+
+                for (const file of filesToAdd) {
+                    if (this.validationService) {
+                        const validationResult = await this.validationService.validateFile(file);
+
+                        if (validationResult.state === FileValidationState.VALID) {
+                            ctx.session.context.addVariables({ arg: file, variable: FILE_VARIABLE });
+                            added.push(file);
+                        } else {
+                            rejected.push({
+                                file,
+                                reason: validationResult.message || 'File validation failed',
+                                state: validationResult.state
+                            });
+                        }
+                    } else {
+                        ctx.session.context.addVariables({ arg: file, variable: FILE_VARIABLE });
+                        added.push(file);
+                    }
+                }
 
-                return JSON.stringify(result);
+                return JSON.stringify({
+                    added,
+                    rejected,
+                    summary: {
+                        totalRequested: filesToAdd.length,
+                        added: added.length,
+                        rejected: rejected.length
+                    }
+                });
             }
         };
     }

package/src/browser/file-changeset-functions.spec.ts

@@ -25,14 +25,14 @@ import {
     SuggestFileContent,
     WriteFileContent,
     SuggestFileReplacements,
+    SuggestFileReplacements_Simple,
     WriteFileReplacements,
     ClearFileChanges,
     GetProposedFileState,
     ReplaceContentInFileFunctionHelper,
     FileChangeSetTitleProvider,
     DefaultFileChangeSetTitleProvider,
-    ReplaceContentInFileFunctionHelperV2,
-    SuggestFileReplacements_Next
+    ReplaceContentInFileFunctionHelperV2
 } from './file-changeset-functions';
 import { MutableChatRequestModel, MutableChatResponseModel, ChangeSet, ChangeSetElement, MutableChatModel } from '@theia/ai-chat';
 import { Container } from '@theia/core/shared/inversify';
@@ -106,12 +106,12 @@ describe('File Changeset Functions Cancellation Tests', () => {
         container.bind(ReplaceContentInFileFunctionHelper).toSelf();
         container.bind(SuggestFileContent).toSelf();
         container.bind(WriteFileContent).toSelf();
+        container.bind(SuggestFileReplacements_Simple).toSelf();
         container.bind(SuggestFileReplacements).toSelf();
         container.bind(WriteFileReplacements).toSelf();
         container.bind(ClearFileChanges).toSelf();
         container.bind(GetProposedFileState).toSelf();
         container.bind(ReplaceContentInFileFunctionHelperV2).toSelf();
-        container.bind(SuggestFileReplacements_Next).toSelf();
     });
 
     afterEach(() => {
@@ -140,11 +140,11 @@ describe('File Changeset Functions Cancellation Tests', () => {
         expect(jsonResponse.error).to.equal('Operation cancelled by user');
     });
 
-    it('SuggestFileReplacements should respect cancellation token', async () => {
-        const suggestFileReplacements = container.get(SuggestFileReplacements);
+    it('SuggestFileReplacements_Simple should respect cancellation token', async () => {
+        const suggestFileReplacementsSimple = container.get(SuggestFileReplacements_Simple);
         cancellationTokenSource.cancel();
 
-        const handler = suggestFileReplacements.getTool().handler;
+        const handler = suggestFileReplacementsSimple.getTool().handler;
         const result = await handler(
             JSON.stringify({
                 path: 'test.txt',
@@ -214,11 +214,11 @@ describe('File Changeset Functions Cancellation Tests', () => {
 
     });
 
-    it('SuggestFileReplacements_Next should respect cancellation token', async () => {
-        const suggestFileReplacementsNext = container.get(SuggestFileReplacements_Next);
+    it('SuggestFileReplacements should respect cancellation token with V2 implementation', async () => {
+        const suggestFileReplacements = container.get(SuggestFileReplacements);
         cancellationTokenSource.cancel();
 
-        const handler = suggestFileReplacementsNext.getTool().handler;
+        const handler = suggestFileReplacements.getTool().handler;
         const result = await handler(
             JSON.stringify({
                 path: 'test.txt',
@@ -231,9 +231,9 @@ describe('File Changeset Functions Cancellation Tests', () => {
         expect(jsonResponse.error).to.equal('Operation cancelled by user');
     });
 
-    it('SuggestFileReplacements_Next should have correct ID', () => {
-        const suggestFileReplacementsNext = container.get(SuggestFileReplacements_Next);
-        expect(SuggestFileReplacements_Next.ID).to.equal('suggestFileReplacements_Next');
-        expect(suggestFileReplacementsNext.getTool().id).to.equal('suggestFileReplacements_Next');
+    it('SuggestFileReplacements should have correct ID', () => {
+        const suggestFileReplacements = container.get(SuggestFileReplacements);
+        expect(SuggestFileReplacements.ID).to.equal('suggestFileReplacements');
+        expect(suggestFileReplacements.getTool().id).to.equal('suggestFileReplacements');
     });
 });

package/src/browser/file-changeset-functions.ts

@@ -31,7 +31,7 @@ import {
     SUGGEST_FILE_REPLACEMENTS_ID,
     WRITE_FILE_CONTENT_ID,
     WRITE_FILE_REPLACEMENTS_ID,
-    SUGGEST_FILE_REPLACEMENTS_NEXT_ID
+    SUGGEST_FILE_REPLACEMENTS_SIMPLE_ID
 } from '../common/file-changeset-function-ids';
 
 export const FileChangeSetTitleProvider = Symbol('FileChangeSetTitleProvider');
@@ -492,16 +492,16 @@ export class SimpleWriteFileReplacements implements ToolProvider {
 }
 
 @injectable()
-export class SuggestFileReplacements implements ToolProvider {
-    static ID = SUGGEST_FILE_REPLACEMENTS_ID;
+export class SuggestFileReplacements_Simple implements ToolProvider {
+    static ID = SUGGEST_FILE_REPLACEMENTS_SIMPLE_ID;
     @inject(ReplaceContentInFileFunctionHelper)
     protected readonly replaceContentInFileFunctionHelper: ReplaceContentInFileFunctionHelper;
 
     getTool(): ToolRequest {
         const metadata = this.replaceContentInFileFunctionHelper.getToolMetadata(true);
         return {
-            id: SuggestFileReplacements.ID,
-            name: SuggestFileReplacements.ID,
+            id: SuggestFileReplacements_Simple.ID,
+            name: SuggestFileReplacements_Simple.ID,
             description: metadata.description,
             parameters: metadata.parameters,
             handler: async (args: string, ctx: MutableChatRequestModel): Promise<string> => {
@@ -611,8 +611,8 @@ export class ReplaceContentInFileFunctionHelperV2 extends ReplaceContentInFileFu
 }
 
 @injectable()
-export class SuggestFileReplacements_Next implements ToolProvider {
-    static ID = SUGGEST_FILE_REPLACEMENTS_NEXT_ID;
+export class SuggestFileReplacements implements ToolProvider {
+    static ID = SUGGEST_FILE_REPLACEMENTS_ID;
 
     @inject(ReplaceContentInFileFunctionHelperV2)
     protected readonly replaceContentInFileFunctionHelper: ReplaceContentInFileFunctionHelperV2;
@@ -620,8 +620,8 @@ export class SuggestFileReplacements_Next implements ToolProvider {
     getTool(): ToolRequest {
         const metadata = this.replaceContentInFileFunctionHelper.getToolMetadata(true);
         return {
-            id: SuggestFileReplacements_Next.ID,
-            name: SuggestFileReplacements_Next.ID,
+            id: SuggestFileReplacements.ID,
+            name: SuggestFileReplacements.ID,
             description: `Proposes to replace sections of content in an existing file by providing a list of replacements.
             Each replacement consists of oldContent to be matched and newContent to insert in its place.
             By default, a single occurrence of each oldContent is expected. If the 'multiple' flag is set to true, all occurrences will be replaced.

package/src/browser/frontend-module.ts

@@ -50,6 +50,7 @@ import {
     GetProposedFileState,
     ReplaceContentInFileFunctionHelper,
     SuggestFileReplacements,
+    SuggestFileReplacements_Simple,
     SimpleSuggestFileReplacements,
     SuggestFileContent,
     WriteFileContent,
@@ -57,8 +58,7 @@ import {
     SimpleWriteFileReplacements,
     FileChangeSetTitleProvider,
     DefaultFileChangeSetTitleProvider,
-    ReplaceContentInFileFunctionHelperV2,
-    SuggestFileReplacements_Next
+    ReplaceContentInFileFunctionHelperV2
 } from './file-changeset-functions';
 import { OrchestratorChatAgent, OrchestratorChatAgentId } from '../common/orchestrator-chat-agent';
 import { UniversalChatAgent, UniversalChatAgentId } from '../common/universal-chat-agent';
@@ -96,6 +96,9 @@ import { AiConfigurationPreferences } from '../common/ai-configuration-preferenc
 import { TaskContextAgent } from './task-context-agent';
 import { ProjectInfoAgent } from './project-info-agent';
 import { SuggestTerminalCommand } from './ai-terminal-functions';
+import { ContextFileValidationService } from '@theia/ai-chat/lib/browser/context-file-validation-service';
+import { ContextFileValidationServiceImpl } from './context-file-validation-service-impl';
+import { RememberCommandContribution } from './remember-command-contribution';
 
 export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
     bind(PreferenceContribution).toConstantValue({ schema: aiIdePreferenceSchema });
@@ -165,10 +168,10 @@ export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
     bindToolProvider(LaunchStopProvider, bind);
     bind(ReplaceContentInFileFunctionHelper).toSelf().inSingletonScope();
     bind(FileChangeSetTitleProvider).to(DefaultFileChangeSetTitleProvider).inSingletonScope();
+    bind(ReplaceContentInFileFunctionHelperV2).toSelf().inSingletonScope();
     bindToolProvider(SuggestFileReplacements, bind);
+    bindToolProvider(SuggestFileReplacements_Simple, bind);
     bindToolProvider(WriteFileReplacements, bind);
-    bind(ReplaceContentInFileFunctionHelperV2).toSelf().inSingletonScope();
-    bindToolProvider(SuggestFileReplacements_Next, bind);
     bindToolProvider(ListChatContext, bind);
     bindToolProvider(ResolveChatContext, bind);
     bind(AIConfigurationSelectionService).toSelf().inSingletonScope();
@@ -270,4 +273,9 @@ export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
         .inSingletonScope();
 
     bindToolProvider(SuggestTerminalCommand, bind);
+
+    bind(ContextFileValidationServiceImpl).toSelf().inSingletonScope();
+    bind(ContextFileValidationService).toService(ContextFileValidationServiceImpl);
+
+    bind(FrontendApplicationContribution).to(RememberCommandContribution);
 });

package/src/browser/ide-chat-welcome-message-provider.tsx

@@ -14,12 +14,12 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { ChatWelcomeMessageProvider, isEnterKey } from '@theia/ai-chat-ui/lib/browser/chat-tree-view';
+import { ChatWelcomeMessageProvider } from '@theia/ai-chat-ui/lib/browser/chat-tree-view';
 import * as React from '@theia/core/shared/react';
 import { nls } from '@theia/core/lib/common/nls';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { CommandRegistry } from '@theia/core';
-import { CommonCommands } from '@theia/core/lib/browser';
+import { CommonCommands, LocalizedMarkdown, MarkdownRenderer } from '@theia/core/lib/browser';
+import { OPEN_AI_CONFIG_VIEW } from './ai-configuration/ai-configuration-view-contribution';
 
 const TheiaIdeAiLogo = ({ width = 200, height = 200, className = '' }) =>
     <svg
@@ -57,30 +57,34 @@ const TheiaIdeAiLogo = ({ width = 200, height = 200, className = '' }) =>
 @injectable()
 export class IdeChatWelcomeMessageProvider implements ChatWelcomeMessageProvider {
 
-    @inject(CommandRegistry)
-    protected commandRegistry: CommandRegistry;
+    @inject(MarkdownRenderer)
+    protected readonly markdownRenderer: MarkdownRenderer;
 
-    renderWelcomeMessage?(): React.ReactNode {
+    renderWelcomeMessage(): React.ReactNode {
         return <div className={'theia-WelcomeMessage'}>
             <TheiaIdeAiLogo width={200} height={200} className="theia-WelcomeMessage-Logo" />
-            <div className="theia-WelcomeMessage-Content">
-                <h1>Ask the Theia IDE AI</h1>
-                <p>
-                    To talk to a specialized agent, simply start your message with <em>@</em> followed by the agent's name:{' '}
-                    <em>@Coder</em>, <em>@Architect</em>, <em>@Universal</em>, and more.
-                </p>
-                <p>
-                    Attach context:  use variables, like <em>#file</em>, <em>#_f</em> (current file), <em>#selectedText</em>{' '}
-                    or click <span className="codicon codicon-add" />.
-                </p>
-                <p>
-                    Lean more in the <a target='_blank' href="https://theia-ide.org/docs/user_ai/#chat">documentation</a>.
-                </p>
-            </div>
+            <LocalizedMarkdown
+                localizationKey="theia/ai/ide/chatWelcomeMessage"
+                defaultMarkdown={`
+# Ask the Theia IDE AI
+
+To talk to a specialized agent, simply start your message with *@* followed by the agent's name: *@{0}*, *@{1}*, *@{2}*, and more.
+
+Attach context: use variables, like *#{3}*, *#{4}* (current file), *#{5}* or click {6}.
+
+Lean more in the [documentation](https://theia-ide.org/docs/user_ai/#chat).
+`}
+                args={['Coder', 'Architect', 'Universal', 'file', '_f', 'selectedText', '<span class="codicon codicon-add"></span>']}
+                markdownRenderer={this.markdownRenderer}
+                className="theia-WelcomeMessage-Content"
+                markdownOptions={{ supportHtml: true }}
+            />
         </div>;
     }
 
-    renderDisabledMessage?(): React.ReactNode {
+    renderDisabledMessage(): React.ReactNode {
+        const openAiHistory = 'aiHistory:open';
+
         return <div className={'theia-ResponseNode'}>
             <div className='theia-ResponseNode-Content' key={'disabled-message'}>
                 <div className="disable-message">
@@ -93,59 +97,49 @@ export class IdeChatWelcomeMessageProvider implements ChatWelcomeMessageProvider
                     <div className="section-title">
                         <p>{nls.localize('theia/ai/chat-ui/chat-view-tree-widget/howToEnable', 'How to Enable the AI Features:')}</p>
                     </div>
-                    <div className="section-content">
-                        <p>To enable the AI features, please go to the AI features section of the&nbsp;
-                            {this.renderLinkButton(nls.localize('theia/ai/chat-ui/chat-view-tree-widget/settingsMenu', 'the settings menu'),
-                                CommonCommands.OPEN_PREFERENCES.id, 'ai-features')}&nbsp;and
-                        </p>
-                        <ol>
-                            <li>Toggle the switch for <strong>{nls.localize('theia/ai/chat-ui/chat-view-tree-widget/aiFeaturesEnable', 'Ai-features: Enable')}</strong>.</li>
-                            <li>Provide at least one LLM provider (e.g. OpenAI). See <a href="https://theia-ide.org/docs/user_ai/" target="_blank">the documentation</a>
-                                &nbsp;for more information.</li>
-                        </ol>
-                        <p>This will activate the AI capabilities in the app. Please remember, these features are <strong>in a beta state</strong>,
-                            so they may change and we are working on improving them 🚧.<br></br>
-                            Please support us by <a href="https://github.com/eclipse-theia/theia">providing feedback
-                            </a>!</p>
-                    </div>
+                    <LocalizedMarkdown
+                        localizationKey="theia/ai/ide/chatDisabledMessage/howToEnable"
+                        defaultMarkdown={`
+To enable the AI features, please go to the AI features section of&nbsp;[the settings menu]({0})&nbsp;and
+1. Toggle the switch for **Ai-features: Enable**.
+2. Provide at least one LLM provider (e.g. OpenAI). See [the documentation](https://theia-ide.org/docs/user_ai/)&nbsp;for more information.
+
+This will activate the AI capabilities in the app. Please remember, these features are **in a beta state**, so they may change and we are working on improving them 🚧.\\
+Please support us by [providing feedback](https://github.com/eclipse-theia/theia)!
+`}
+                        args={[`command:${CommonCommands.OPEN_PREFERENCES.id}?ai-features`]}
+                        markdownRenderer={this.markdownRenderer}
+                        className="section-content"
+                        markdownOptions={{ isTrusted: { enabledCommands: [CommonCommands.OPEN_PREFERENCES.id] } }}
+                    />
 
                     <div className="section-title">
-                        <p>Currently Supported Views and Features:</p>
-                    </div>
-                    <div className="section-content">
-                        <p>Once the AI features are enabled, you can access the following views and features:</p>
-                        <ul>
-                            <li>Code Completion</li>
-                            <li>Terminal Assistance (via CTRL+I in a terminal)</li>
-                            <li>This Chat View (features the following agents):
-                                <ul>
-                                    <li>Universal Chat Agent</li>
-                                    <li>Coder Chat Agent</li>
-                                    <li>Architect Chat Agent</li>
-                                    <li>Command Chat Agent</li>
-                                    <li>Orchestrator Chat Agent</li>
-                                </ul>
-                            </li>
-                            <li>{this.renderLinkButton(nls.localize('theia/ai/chat-ui/chat-view-tree-widget/aiHistoryView', 'AI History View'), 'aiHistory:open')}</li>
-                            <li>{this.renderLinkButton(
-                                nls.localize('theia/ai/chat-ui/chat-view-tree-widget/aiConfigurationView', 'AI Configuration View'), 'aiConfiguration:open')}
-                            </li>
-                        </ul>
-                        <p>See <a href="https://theia-ide.org/docs/user_ai/" target="_blank">the documentation</a> for more information.</p>
+                        <p>{nls.localize('theia/ai/ide/chatDisabledMessage/featuresTitle', 'Currently Supported Views and Features:')}</p>
                     </div>
+                    <LocalizedMarkdown
+                        localizationKey="theia/ai/ide/chatDisabledMessage/features"
+                        defaultMarkdown={`
+Once the AI features are enabled, you can access the following views and features:
+- Code Completion
+- Terminal Assistance (via CTRL+I in a terminal)
+- This Chat View (features the following agents):
+  * Universal Chat Agent
+  * Coder Chat Agent
+  * Architect Chat Agent
+  * Command Chat Agent
+  * Orchestrator Chat Agent
+- [AI History View]({0})
+- [AI Configuration View]({1})
+
+See [the documentation](https://theia-ide.org/docs/user_ai/) for more information.
+`}
+                        args={[`command:${openAiHistory}`, `command:${OPEN_AI_CONFIG_VIEW.id}`]}
+                        markdownRenderer={this.markdownRenderer}
+                        className="section-content"
+                        markdownOptions={{ isTrusted: { enabledCommands: [openAiHistory, OPEN_AI_CONFIG_VIEW.id] } }}
+                    />
                 </div>
             </div>
-        </div >;
-    }
-
-    protected renderLinkButton(title: string, openCommandId: string, ...commandArgs: unknown[]): React.ReactNode {
-        return <a
-            role={'button'}
-            tabIndex={0}
-            onClick={() => this.commandRegistry.executeCommand(openCommandId, ...commandArgs)}
-            onKeyDown={e => isEnterKey(e) && this.commandRegistry.executeCommand(openCommandId)}>
-            {title}
-        </a>;
+        </div>;
     }
-
 }