@theia/ai-chat-ui 1.60.0-next.43 → 1.60.0

package/src/browser/chat-tree-view/chat-view-tree-widget.tsx

@@ -27,7 +27,6 @@ import {
 import { CommandRegistry, ContributionProvider } from '@theia/core';
 import {
     codicon,
-    CommonCommands,
     CompositeTreeNode,
     ContextMenuRenderer,
     HoverService,
@@ -44,6 +43,7 @@ import {
     inject,
     injectable,
     named,
+    optional,
     postConstruct
 } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
@@ -66,10 +66,16 @@ export interface ResponseNode extends TreeNode {
 }
 export const isResponseNode = (node: TreeNode): node is ResponseNode => 'response' in node;
 
-function isEnterKey(e: React.KeyboardEvent): boolean {
+export function isEnterKey(e: React.KeyboardEvent): boolean {
     return Key.ENTER.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode;
 }
 
+export const ChatWelcomeMessageProvider = Symbol('ChatWelcomeMessageProvider');
+export interface ChatWelcomeMessageProvider {
+    renderWelcomeMessage?(): React.ReactNode;
+    renderDisabledMessage?(): React.ReactNode;
+}
+
 @injectable()
 export class ChatViewTreeWidget extends TreeWidget {
     static readonly ID = 'chat-tree-widget';
@@ -88,13 +94,16 @@ export class ChatViewTreeWidget extends TreeWidget {
     protected readonly variableService: AIVariableService;
 
     @inject(CommandRegistry)
-    private commandRegistry: CommandRegistry;
+    protected commandRegistry: CommandRegistry;
 
     @inject(OpenerService)
     protected readonly openerService: OpenerService;
 
     @inject(HoverService)
-    private hoverService: HoverService;
+    protected hoverService: HoverService;
+
+    @inject(ChatWelcomeMessageProvider) @optional()
+    protected welcomeMessageProvider?: ChatWelcomeMessageProvider;
 
     protected _shouldScrollToEnd = true;
 
@@ -142,80 +151,24 @@ export class ChatViewTreeWidget extends TreeWidget {
     }
 
     protected override renderTree(model: TreeModel): React.ReactNode {
-        if (this.isEnabled) {
+        if (!this.isEnabled) {
+            return this.renderDisabledMessage();
+        }
+        if (CompositeTreeNode.is(model.root) && model.root.children?.length > 0) {
             return super.renderTree(model);
         }
-        return this.renderDisabledMessage();
+        return this.renderWelcomeMessage();
     }
 
-    private renderDisabledMessage(): React.ReactNode {
-        return <div className={'theia-ResponseNode'}>
-            <div className='theia-ResponseNode-Content' key={'disabled-message'}>
-                <div className="disable-message">
-                    <span className="section-header">{
-                        nls.localize('theia/ai/chat-ui/chat-view-tree-widget/aiFeatureHeader', '🚀 AI Features Available (Alpha Version)!')}
-                    </span>
-                    <div className="section-title">
-                        <p><code>{nls.localize('theia/ai/chat-ui/chat-view-tree-widget/featuresDisabled', 'Currently, all AI Features are disabled!')}</code></p>
-                    </div>
-                    <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 &nbsp;
-                            {this.renderLinkButton(nls.localize('theia/ai/chat-ui/chat-view-tree-widget/settingsMenu', 'the settings menu'), CommonCommands.OPEN_PREFERENCES.id)}
-                            &nbsp;and locate the <strong>AI Features</strong> section.</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), also see <a href="https://theia-ide.org/docs/user_ai/" target="_blank">the documentation</a>
-                                for more information.</li>
-                        </ol>
-                        <p>This will activate the AI capabilities in the app. Please remember, these features are <strong>in an alpha 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>
-
-                    <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>
-                    </div>
-                </div>
-            </div>
-        </div >;
+    protected renderDisabledMessage(): React.ReactNode {
+        return this.welcomeMessageProvider?.renderDisabledMessage?.() ?? <></>;
     }
 
-    private renderLinkButton(title: string, openCommandId: string): React.ReactNode {
-        return <a
-            role={'button'}
-            tabIndex={0}
-            onClick={() => this.commandRegistry.executeCommand(openCommandId)}
-            onKeyDown={e => isEnterKey(e) && this.commandRegistry.executeCommand(openCommandId)}>
-            {title}
-        </a>;
+    protected renderWelcomeMessage(): React.ReactNode {
+        return this.welcomeMessageProvider?.renderWelcomeMessage?.() ?? <></>;
     }
 
-    private mapRequestToNode(request: ChatRequestModel): RequestNode {
+    protected mapRequestToNode(request: ChatRequestModel): RequestNode {
         return {
             id: request.id,
             parent: this.model.root as CompositeTreeNode,
@@ -223,7 +176,7 @@ export class ChatViewTreeWidget extends TreeWidget {
         };
     }
 
-    private mapResponseToNode(response: ChatResponseModel): ResponseNode {
+    protected mapResponseToNode(response: ChatResponseModel): ResponseNode {
         return {
             id: response.id,
             parent: this.model.root as CompositeTreeNode,
@@ -259,7 +212,7 @@ export class ChatViewTreeWidget extends TreeWidget {
         return super.getScrollToRow();
     }
 
-    private async recreateModelTree(chatModel: ChatModel): Promise<void> {
+    protected async recreateModelTree(chatModel: ChatModel): Promise<void> {
         if (CompositeTreeNode.is(this.model.root)) {
             const nodes: TreeNode[] = [];
             chatModel.getRequests().forEach(request => {
@@ -289,7 +242,7 @@ export class ChatViewTreeWidget extends TreeWidget {
         </React.Fragment>;
     }
 
-    private renderAgent(node: RequestNode | ResponseNode): React.ReactNode {
+    protected renderAgent(node: RequestNode | ResponseNode): React.ReactNode {
         const inProgress = isResponseNode(node) && !node.response.isComplete && !node.response.isCanceled && !node.response.isError;
         const waitingForInput = isResponseNode(node) && node.response.isWaitingForInput;
         const toolbarContributions = !inProgress
@@ -345,7 +298,7 @@ export class ChatViewTreeWidget extends TreeWidget {
         </React.Fragment>;
     }
 
-    private getAgentLabel(node: RequestNode | ResponseNode): string {
+    protected getAgentLabel(node: RequestNode | ResponseNode): string {
         if (isRequestNode(node)) {
             // TODO find user name
             return nls.localize('theia/ai/chat-ui/chat-view-tree-widget/you', 'You');
@@ -353,14 +306,14 @@ export class ChatViewTreeWidget extends TreeWidget {
         return this.getAgent(node)?.name ?? nls.localize('theia/ai/chat-ui/chat-view-tree-widget/ai', 'AI');
     }
 
-    private getAgent(node: RequestNode | ResponseNode): ChatAgent | undefined {
+    protected getAgent(node: RequestNode | ResponseNode): ChatAgent | undefined {
         if (isRequestNode(node)) {
             return undefined;
         }
         return node.response.agentId ? this.chatAgentService.getAgent(node.response.agentId) : undefined;
     }
 
-    private getAgentIconClassName(node: RequestNode | ResponseNode): string | undefined {
+    protected getAgentIconClassName(node: RequestNode | ResponseNode): string | undefined {
         if (isRequestNode(node)) {
             return codicon('account');
         }
@@ -369,7 +322,7 @@ export class ChatViewTreeWidget extends TreeWidget {
         return agent?.iconClass ?? codicon('copilot');
     }
 
-    private renderDetail(node: RequestNode | ResponseNode): React.ReactNode {
+    protected renderDetail(node: RequestNode | ResponseNode): React.ReactNode {
         if (isRequestNode(node)) {
             return this.renderChatRequest(node);
         }
@@ -378,7 +331,7 @@ export class ChatViewTreeWidget extends TreeWidget {
         };
     }
 
-    private renderChatRequest(node: RequestNode): React.ReactNode {
+    protected renderChatRequest(node: RequestNode): React.ReactNode {
         return <ChatRequestRender
             node={node}
             hoverService={this.hoverService}
@@ -388,7 +341,7 @@ export class ChatViewTreeWidget extends TreeWidget {
         />;
     }
 
-    private renderChatResponse(node: ResponseNode): React.ReactNode {
+    protected renderChatResponse(node: ResponseNode): React.ReactNode {
         return (
             <div className={'theia-ResponseNode'}>
                 {!node.response.isComplete
@@ -419,7 +372,7 @@ export class ChatViewTreeWidget extends TreeWidget {
         );
     }
 
-    private getChatResponsePartRenderer(content: ChatResponseContent, node: ResponseNode): React.ReactNode {
+    protected getChatResponsePartRenderer(content: ChatResponseContent, node: ResponseNode): React.ReactNode {
         const renderer = this.chatResponsePartRenderers.getContributions().reduce<[number, ChatResponsePartRenderer<ChatResponseContent> | undefined]>(
             (prev, current) => {
                 const prio = current.canHandle(content);

package/src/browser/chat-view-commands.ts

@@ -32,6 +32,12 @@ export namespace ChatCommands {
         category: CHAT_CATEGORY,
         iconClass: codicon('lock')
     }, '', CHAT_CATEGORY_KEY);
+
+    export const EDIT_SESSION_SETTINGS = Command.toLocalizedCommand({
+        id: 'chat:widget:session-settings',
+        category: CHAT_CATEGORY,
+        iconClass: codicon('bracket')
+    }, 'Set Session Settings', CHAT_CATEGORY_KEY);
 }
 
 export const AI_CHAT_NEW_CHAT_WINDOW_COMMAND: Command = {

package/src/browser/chat-view-language-contribution.ts

@@ -25,6 +25,7 @@ import { ProviderResult } from '@theia/monaco-editor-core/esm/vs/editor/common/l
 import { ChatViewWidget } from './chat-view-widget';
 
 export const CHAT_VIEW_LANGUAGE_ID = 'theia-ai-chat-view-language';
+export const SETTINGS_LANGUAGE_ID = 'theia-ai-chat-settings-language';
 export const CHAT_VIEW_LANGUAGE_EXTENSION = 'aichatviewlanguage';
 
 const VARIABLE_RESOLUTION_CONTEXT = { context: 'chat-input-autocomplete' };
@@ -58,6 +59,7 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
 
     onStart(_app: FrontendApplication): MaybePromise<void> {
         monaco.languages.register({ id: CHAT_VIEW_LANGUAGE_ID, extensions: [CHAT_VIEW_LANGUAGE_EXTENSION] });
+        monaco.languages.register({ id: SETTINGS_LANGUAGE_ID, extensions: ['json'], filenames: ['editor'] });
 
         this.registerCompletionProviders();
 

package/src/browser/chat-view-widget-toolbar-contribution.tsx

@@ -17,22 +17,45 @@
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { AIChatContribution } from './ai-chat-ui-contribution';
-import { Emitter, nls } from '@theia/core';
+import { Emitter, InMemoryResources, URI, nls } from '@theia/core';
 import { ChatCommands } from './chat-view-commands';
+import { CommandRegistry } from '@theia/core/lib/common/command';
+import { SessionSettingsDialog } from './session-settings-dialog';
+import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
+import { ChatViewWidget } from './chat-view-widget';
 
 @injectable()
 export class ChatViewWidgetToolbarContribution implements TabBarToolbarContribution {
     @inject(AIChatContribution)
     protected readonly chatContribution: AIChatContribution;
 
+    @inject(CommandRegistry)
+    protected readonly commandRegistry: CommandRegistry;
+
+    @inject(MonacoEditorProvider)
+    protected readonly editorProvider: MonacoEditorProvider;
+
+    @inject(InMemoryResources)
+    protected readonly resources: InMemoryResources;
+
     protected readonly onChatWidgetStateChangedEmitter = new Emitter<void>();
     protected readonly onChatWidgetStateChanged = this.onChatWidgetStateChangedEmitter.event;
 
+    private readonly sessionSettingsURI = new URI('chat-view:/settings.json');
+
     @postConstruct()
     protected init(): void {
+        this.resources.add(this.sessionSettingsURI, '{}');
+
         this.chatContribution.widget.then(widget => {
             widget.onStateChanged(() => this.onChatWidgetStateChangedEmitter.fire());
         });
+
+        this.commandRegistry.registerCommand(ChatCommands.EDIT_SESSION_SETTINGS, {
+            execute: () => this.openJsonDataDialog(),
+            isEnabled: widget => widget instanceof ChatViewWidget,
+            isVisible: widget => widget instanceof ChatViewWidget
+        });
     }
 
     registerToolbarItems(registry: TabBarToolbarRegistry): void {
@@ -50,5 +73,28 @@ export class ChatViewWidgetToolbarContribution implements TabBarToolbarContribut
             onDidChange: this.onChatWidgetStateChanged,
             priority: 2
         });
+        registry.registerItem({
+            id: ChatCommands.EDIT_SESSION_SETTINGS.id,
+            command: ChatCommands.EDIT_SESSION_SETTINGS.id,
+            tooltip: nls.localize('theia/ai/session-settings-dialog/tooltip', 'Set Session Settings'),
+            priority: 3
+        });
+    }
+
+    protected async openJsonDataDialog(): Promise<void> {
+        const widget = await this.chatContribution.widget;
+        if (!widget) {
+            return;
+        }
+
+        const dialog = new SessionSettingsDialog(this.editorProvider, this.resources, this.sessionSettingsURI, {
+            initialSettings: widget.getSettings()
+        });
+
+        const result = await dialog.open();
+        if (result) {
+            widget.setSettings(result);
+        }
+
     }
 }

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

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 import { CommandService, deepClone, Emitter, Event, MessageService } from '@theia/core';
-import { ChatRequest, ChatRequestModel, ChatService, ChatSession } from '@theia/ai-chat';
+import { ChatRequest, ChatRequestModel, ChatService, ChatSession, isActiveSessionChangedEvent, MutableChatModel } from '@theia/ai-chat';
 import { BaseWidget, codicon, ExtractableWidget, Message, PanelLayout, PreferenceService, StatefulWidget } from '@theia/core/lib/browser';
 import { nls } from '@theia/core/lib/common/nls';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
@@ -33,7 +33,7 @@ export namespace ChatViewWidget {
 export class ChatViewWidget extends BaseWidget implements ExtractableWidget, StatefulWidget {
 
     public static ID = 'chat-view-widget';
-    static LABEL = `${nls.localizeByDefault('Chat')}`;
+    static LABEL = nls.localize('theia/ai/chat/view/label', 'AI Chat');
 
     @inject(ChatService)
     protected chatService: ChatService;
@@ -114,7 +114,10 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
 
     protected initListeners(): void {
         this.toDispose.push(
-            this.chatService.onActiveSessionChanged(event => {
+            this.chatService.onSessionEvent(event => {
+                if (!isActiveSessionChangedEvent(event)) {
+                    return;
+                }
                 const session = event.sessionId ? this.chatService.getSession(event.sessionId) : this.chatService.createSession();
                 if (session) {
                     this.chatSession = session;
@@ -217,4 +220,15 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
     addContext(variable: AIVariableResolutionRequest): void {
         this.inputWidget.addContext(variable);
     }
+
+    setSettings(settings: { [key: string]: unknown }): void {
+        if (this.chatSession && this.chatSession.model) {
+            const model = this.chatSession.model as MutableChatModel;
+            model.setSettings(settings);
+        }
+    }
+
+    getSettings(): { [key: string]: unknown } | undefined {
+        return this.chatSession.model.settings;
+    }
 }

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

@@ -0,0 +1,144 @@
+// *****************************************************************************
+// Copyright (C) 2024 EclipseSource GmbH.
+//
+// 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 { InMemoryResources, URI, nls } from '@theia/core';
+import { AbstractDialog } from '@theia/core/lib/browser/dialogs';
+
+import { Message } from '@theia/core/lib/browser';
+import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
+import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
+
+export interface SessionSettingsDialogProps {
+    initialSettings: { [key: string]: unknown } | undefined;
+}
+
+export class SessionSettingsDialog extends AbstractDialog<{ [key: string]: unknown }> {
+
+    protected jsonEditor: MonacoEditor | undefined;
+    protected dialogContent: HTMLDivElement;
+    protected errorMessageDiv: HTMLDivElement;
+    protected settings: { [key: string]: unknown } = {};
+    protected initialSettingsString: string;
+
+    constructor(
+        protected readonly editorProvider: MonacoEditorProvider,
+        protected readonly resources: InMemoryResources,
+        protected readonly uri: URI,
+        protected readonly options: SessionSettingsDialogProps
+    ) {
+        super({
+            title: nls.localize('theia/ai/session-settings-dialog/title', 'Set Session Settings')
+        });
+
+        const initialSettings = options.initialSettings;
+        this.initialSettingsString = JSON.stringify(initialSettings, undefined, 2) || '{}';
+
+        this.contentNode.classList.add('monaco-session-settings-dialog');
+
+        this.dialogContent = document.createElement('div');
+        this.dialogContent.className = 'session-settings-container';
+        this.contentNode.appendChild(this.dialogContent);
+
+        this.errorMessageDiv = document.createElement('div');
+        this.errorMessageDiv.className = 'session-settings-error';
+        this.contentNode.appendChild(this.errorMessageDiv);
+
+        this.appendCloseButton(nls.localizeByDefault('Cancel'));
+        this.appendAcceptButton(nls.localizeByDefault('Apply'));
+
+        this.createJsonEditor();
+
+        this.validateJson();
+    }
+
+    protected override onAfterAttach(msg: Message): void {
+        super.onAfterAttach(msg);
+        this.update();
+    }
+
+    protected override onActivateRequest(msg: Message): void {
+        super.onActivateRequest(msg);
+        if (this.jsonEditor) {
+            this.jsonEditor.focus();
+        }
+    }
+    protected async createJsonEditor(): Promise<void> {
+
+        this.resources.update(this.uri, this.initialSettingsString);
+        try {
+            const editor = await this.editorProvider.createInline(this.uri, this.dialogContent, {
+                language: 'json',
+                automaticLayout: true,
+                minimap: {
+                    enabled: false
+                },
+                scrollBeyondLastLine: false,
+                folding: true,
+                lineNumbers: 'on',
+                fontSize: 13,
+                wordWrap: 'on',
+                renderValidationDecorations: 'on',
+                scrollbar: {
+                    vertical: 'auto',
+                    horizontal: 'auto'
+                }
+            });
+
+            editor.getControl().onDidChangeModelContent(() => {
+                this.validateJson();
+            });
+            editor.document.textEditorModel.setValue(this.initialSettingsString);
+
+            this.jsonEditor = editor;
+            this.validateJson();
+        } catch (error) {
+            console.error('Failed to create JSON editor:', error);
+        }
+    }
+
+    protected validateJson(): void {
+        if (!this.jsonEditor) {
+            return;
+        }
+
+        const jsonContent = this.jsonEditor.getControl().getValue();
+
+        try {
+            this.settings = JSON.parse(jsonContent);
+            this.errorMessageDiv.textContent = '';
+            this.setErrorButtonState(false);
+        } catch (error) {
+            this.errorMessageDiv.textContent = `${error}`;
+            this.setErrorButtonState(true);
+        }
+    }
+
+    protected setErrorButtonState(isError: boolean): void {
+        const acceptButton = this.acceptButton;
+        if (acceptButton) {
+            acceptButton.disabled = isError;
+            if (isError) {
+                acceptButton.classList.add('disabled');
+            } else {
+                acceptButton.classList.remove('disabled');
+            }
+        }
+    }
+
+    get value(): { [key: string]: unknown } {
+        return this.settings;
+    }
+}

package/src/browser/style/index.css

@@ -504,7 +504,6 @@ div:last-child > .theia-ChatNode {
   display: flex;
   flex-direction: column;
   gap: 2px;
-  border: var(--theia-border-width) solid var(--theia-input-border);
   border-radius: 4px;
 }
 
@@ -537,12 +536,6 @@ div:last-child > .theia-ChatNode {
   background-color: var(--theia-toolbar-hoverBackground);
 }
 
-.theia-CodePartRenderer-separator {
-  width: 100%;
-  height: 1px;
-  background-color: var(--theia-input-border);
-}
-
 .theia-QuestionPartRenderer-root {
   display: flex;
   flex-direction: column;
@@ -574,7 +567,8 @@ div:last-child > .theia-ChatNode {
   background-color: var(--theia-button-secondaryBackground);
 }
 
-.theia-toolCall {
+.theia-toolCall,
+.theia-thinking {
   font-weight: normal;
   color: var(--theia-descriptionForeground);
   line-height: 20px;
@@ -584,11 +578,14 @@ div:last-child > .theia-ChatNode {
 }
 
 .theia-toolCall .fa,
-.theia-toolCall details summary::marker {
+.theia-toolCall details summary::marker,
+.theia-thinking .fa,
+.theia-thinking details summary::marker {
   color: var(--theia-button-background);
 }
 
-.theia-toolCall details pre {
+.theia-toolCall details pre,
+.theia-thinking details pre {
   cursor: text;
   line-height: 1rem;
   margin-top: 0;
@@ -596,6 +593,7 @@ div:last-child > .theia-ChatNode {
   padding: 6px;
   background-color: var(--theia-editor-background);
   overflow: auto;
+  text-wrap: auto;
 }
 
 .collapsible-arguments {
@@ -666,12 +664,6 @@ details[open].collapsible-arguments .collapsible-arguments-summary {
   margin: 20px 0px;
 }
 
-.disable-message {
-  font-size: 12px;
-  line-height: 1.6;
-  padding: 15px;
-}
-
 .section-content p {
   margin: 10px 0;
 }
@@ -683,3 +675,26 @@ details[open].collapsible-arguments .collapsible-arguments-summary {
 .section-content strong {
   font-weight: bold;
 }
+
+.session-settings-container {
+  margin-bottom: 10px;
+  height: calc(100% - 50px);
+}
+.monaco-session-settings-dialog {
+  flex: 1;
+  min-height: 350px;
+  min-width: 500px;
+  height: 25vh;
+  width: 30vh;
+  border: 1px solid var(--theia-editorWidget-border);
+  margin-bottom: 10px;
+}
+.session-settings-error {
+  color: var(--theia-errorForeground);
+  min-height: 1em;
+  display: block;
+}
+
+.session-settings-container .monaco-editor {
+  outline-color: var(--theia-editor-background);
+}