Show recent chat sessions in the AI Chat Welcome screen

packages/ai-chat-ui/src/browser/ai-chat-ui-contribution.ts

@@ -31,8 +31,7 @@ import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/li
 import { ChatViewWidget } from './chat-view-widget';
 import { Deferred } from '@theia/core/lib/common/promise-util';
 import { SecondaryWindowHandler } from '@theia/core/lib/browser/secondary-window-handler';
-import { formatDistance } from 'date-fns';
-import * as locales from 'date-fns/locale';
+import { formatTimeAgo } from './chat-date-utils';
 import { AI_SHOW_SETTINGS_COMMAND, AIActivationService, ENABLE_AI_CONTEXT_KEY } from '@theia/ai-core/lib/browser';
 import { ChatNodeToolbarCommands } from './chat-node-toolbar-action-contribution';
 import { isEditableRequestNode, isResponseNode, type EditableRequestNode, type ResponseNode } from './chat-tree-view';
@@ -371,7 +370,7 @@ export class AIChatContribution extends AbstractViewContribution<ChatViewWidget>
 
                 return <QuickPickItem>({
                     label,
-                    description: formatDistance(new Date(session.lastDate), new Date(), { addSuffix: false, locale: getDateFnsLocale() }),
+                    description: formatTimeAgo(session.lastDate, false),
                     detail: session.firstRequestText || (session.isActive ? undefined : nls.localize('theia/ai/chat-ui/persistedSession', 'Persisted session (click to restore)')),
                     id: session.id,
                     buttons: [AIChatContribution.RENAME_CHAT_BUTTON, AIChatContribution.REMOVE_CHAT_BUTTON]
@@ -593,8 +592,3 @@ export class AIChatContribution extends AbstractViewContribution<ChatViewWidget>
         return { openedIds: openedContextIds, activeId: activeContextId };
     }
 }
-
-function getDateFnsLocale(): locales.Locale {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return nls.locale ? (locales as any)[nls.locale] ?? locales.enUS : locales.enUS;
-}

packages/ai-chat-ui/src/browser/ai-chat-ui-frontend-module.ts

@@ -47,7 +47,7 @@ import {
     TypeDocSymbolSelectionResolver,
 } from './chat-response-renderer/ai-selection-resolver';
 import { QuestionPartRenderer } from './chat-response-renderer/question-part-renderer';
-import { createChatViewTreeWidget } from './chat-tree-view';
+import { createChatViewTreeWidget, ChatWelcomeMessageProvider } from './chat-tree-view';
 import { ChatViewTreeWidget } from './chat-tree-view/chat-view-tree-widget';
 import { ChatViewMenuContribution } from './chat-view-contribution';
 import { ChatViewLanguageContribution } from './chat-view-language-contribution';
@@ -81,6 +81,7 @@ export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
     bind(KeybindingContribution).toService(ChatFocusContribution);
 
     bindContributionProvider(bind, ChatResponsePartRenderer);
+    bindContributionProvider(bind, ChatWelcomeMessageProvider);
 
     bindChatViewWidget(bind);
 

packages/ai-chat-ui/src/browser/chat-date-utils.ts

@@ -0,0 +1,39 @@
+// *****************************************************************************
+// Copyright (C) 2025 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 { nls } from '@theia/core';
+import { formatDistance } from 'date-fns';
+import * as locales from 'date-fns/locale';
+
+/**
+ * Returns the date-fns locale matching the current Theia locale.
+ */
+export function getDateFnsLocale(): locales.Locale {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return nls.locale ? (locales as any)[nls.locale] ?? locales.enUS : locales.enUS;
+}
+
+/**
+ * Formats a timestamp as a human-readable relative time string (e.g., "2 hours ago").
+ * @param timestamp - The timestamp in milliseconds
+ * @param addSuffix - Whether to add "ago" suffix (default: true)
+ */
+export function formatTimeAgo(timestamp: number, addSuffix: boolean = true): string {
+    return formatDistance(new Date(timestamp), new Date(), {
+        addSuffix,
+        locale: getDateFnsLocale()
+    });
+}

packages/ai-chat-ui/src/browser/chat-tree-view/chat-view-tree-widget.tsx

@@ -53,7 +53,6 @@ import {
     inject,
     injectable,
     named,
-    optional,
     postConstruct
 } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
@@ -96,6 +95,8 @@ export interface ChatWelcomeMessageProvider {
     readonly modelRequirementBypassed?: boolean;
     readonly defaultAgent?: string;
     readonly onStateChanged?: Event<void>;
+    /** Optional priority for rendering order. Higher values render first. Default: 0 */
+    readonly priority?: number;
 }
 
 @injectable()
@@ -125,8 +126,8 @@ export class ChatViewTreeWidget extends TreeWidget {
     @inject(HoverService)
     protected hoverService: HoverService;
 
-    @inject(ChatWelcomeMessageProvider) @optional()
-    protected welcomeMessageProvider?: ChatWelcomeMessageProvider;
+    @inject(ContributionProvider) @named(ChatWelcomeMessageProvider)
+    protected readonly welcomeMessageProviders: ContributionProvider<ChatWelcomeMessageProvider>;
 
     @inject(AIChatTreeInputFactory)
     protected inputWidgetFactory: AIChatTreeInputFactory;
@@ -228,12 +229,14 @@ export class ChatViewTreeWidget extends TreeWidget {
             })
         ]);
 
-        if (this.welcomeMessageProvider?.onStateChanged) {
-            this.toDispose.push(
-                this.welcomeMessageProvider.onStateChanged(() => {
-                    this.update();
-                })
-            );
+        for (const provider of this.welcomeMessageProviders.getContributions()) {
+            if (provider.onStateChanged) {
+                this.toDispose.push(
+                    provider.onStateChanged(() => {
+                        this.update();
+                    })
+                );
+            }
         }
 
         // Initialize lastScrollTop with current scroll position
@@ -395,12 +398,47 @@ export class ChatViewTreeWidget extends TreeWidget {
         this.update();
     }
 
+    /**
+     * Returns providers sorted by priority (highest first).
+     */
+    protected getSortedWelcomeMessageProviders(): ChatWelcomeMessageProvider[] {
+        return this.welcomeMessageProviders.getContributions()
+            .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+    }
+
+    /**
+     * Returns the highest-priority provider for backward-compatible property access.
+     */
+    protected get welcomeMessageProvider(): ChatWelcomeMessageProvider | undefined {
+        return this.getSortedWelcomeMessageProviders()[0];
+    }
+
     protected renderDisabledMessage(): React.ReactNode {
-        return this.welcomeMessageProvider?.renderDisabledMessage?.() ?? <></>;
+        const providers = this.getSortedWelcomeMessageProviders();
+        const nodes = providers
+            .map(p => p.renderDisabledMessage?.())
+            .filter((node): node is React.ReactNode => node !== undefined);
+        return nodes.length > 0
+            ? <div className="theia-WelcomeMessage-Container">{nodes}</div>
+            : <></>;
     }
 
     protected renderWelcomeMessage(): React.ReactNode {
-        return this.welcomeMessageProvider?.renderWelcomeMessage?.() ?? <></>;
+        const providers = this.getSortedWelcomeMessageProviders();
+        const nodes = providers
+            .map(p => p.renderWelcomeMessage?.())
+            .filter((node): node is React.ReactNode => node !== undefined);
+        if (nodes.length === 0) {
+            return <></>;
+        }
+        const withDividers: React.ReactNode[] = [];
+        nodes.forEach((node, index) => {
+            if (index > 0) {
+                withDividers.push(<div key={`welcome-divider-${index}`} className='theia-WelcomeMessage-Divider' />);
+            }
+            withDividers.push(node);
+        });
+        return <div className='theia-WelcomeMessage-Container'>{withDividers}</div>;
     }
 
     protected mapRequestToNode(branch: ChatHierarchyBranch): RequestNode {

packages/ai-chat-ui/src/browser/chat-view-widget.tsx

@@ -13,11 +13,11 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { CommandService, deepClone, Emitter, Event, MessageService, PreferenceService, URI } from '@theia/core';
+import { CommandService, ContributionProvider, deepClone, Emitter, Event, MessageService, PreferenceService, URI } from '@theia/core';
 import { ChatRequest, ChatRequestModel, ChatService, ChatSession, isActiveSessionChangedEvent, MutableChatModel } from '@theia/ai-chat';
 import { BaseWidget, codicon, ExtractableWidget, Message, PanelLayout, StatefulWidget } from '@theia/core/lib/browser';
 import { nls } from '@theia/core/lib/common/nls';
-import { inject, injectable, optional, postConstruct } from '@theia/core/shared/inversify';
+import { inject, injectable, named, postConstruct } from '@theia/core/shared/inversify';
 import { AIChatInputWidget } from './chat-input-widget';
 import { ChatViewTreeWidget, ChatWelcomeMessageProvider } from './chat-tree-view/chat-view-tree-widget';
 import { AIActivationService } from '@theia/ai-core/lib/browser/ai-activation-service';
@@ -63,8 +63,8 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
     @inject(FrontendLanguageModelRegistry)
     protected readonly languageModelRegistry: FrontendLanguageModelRegistry;
 
-    @inject(ChatWelcomeMessageProvider) @optional()
-    protected readonly welcomeProvider?: ChatWelcomeMessageProvider;
+    @inject(ContributionProvider) @named(ChatWelcomeMessageProvider)
+    protected readonly welcomeMessageProviders: ContributionProvider<ChatWelcomeMessageProvider>;
 
     protected chatSession: ChatSession;
 
@@ -135,11 +135,13 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
             })
         );
 
-        if (this.welcomeProvider?.onStateChanged) {
-            this.toDispose.push(this.welcomeProvider.onStateChanged(() => {
-                this.updateInputEnabledState();
-                this.update();
-            }));
+        for (const provider of this.welcomeMessageProviders.getContributions()) {
+            if (provider.onStateChanged) {
+                this.toDispose.push(provider.onStateChanged(() => {
+                    this.updateInputEnabledState();
+                    this.update();
+                }));
+            }
         }
 
         this.toDispose.push(this.progressBarFactory({ container: this.node, insertMode: 'prepend', locationId: 'ai-chat' }));
@@ -151,12 +153,21 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         this.treeWidget.setEnabled(this.activationService.isActive);
     }
 
+    /**
+     * Returns the highest-priority welcome message provider for backward-compatible property access.
+     */
+    protected get welcomeProvider(): ChatWelcomeMessageProvider | undefined {
+        return this.welcomeMessageProviders.getContributions()
+            .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0))[0];
+    }
+
     protected async shouldEnableInput(): Promise<boolean> {
-        if (!this.welcomeProvider) {
+        const provider = this.welcomeProvider;
+        if (!provider) {
             return true;
         }
         const hasReadyModels = await this.hasReadyLanguageModels();
-        const modelRequirementBypassed = this.welcomeProvider.modelRequirementBypassed ?? false;
+        const modelRequirementBypassed = provider.modelRequirementBypassed ?? false;
         return hasReadyModels || modelRequirementBypassed;
     }
 

packages/ai-chat/src/common/ai-chat-preferences.ts

@@ -22,6 +22,7 @@ export const PIN_CHAT_AGENT_PREF = 'ai-features.chat.pinChatAgent';
 export const BYPASS_MODEL_REQUIREMENT_PREF = 'ai-features.chat.bypassModelRequirement';
 export const PERSISTED_SESSION_LIMIT_PREF = 'ai-features.chat.persistedSessionLimit';
 export const SESSION_STORAGE_PREF = 'ai-features.chat.sessionStorageScope';
+export const WELCOME_SCREEN_SESSIONS_PREF = 'ai-features.chat.welcomeScreenSessions';
 
 export type SessionStorageScope = 'workspace' | 'global';
 
@@ -58,6 +59,16 @@ export const aiChatPreferences: PreferenceSchema = {
             minimum: -1,
             title: AI_CORE_PREFERENCES_TITLE,
         },
+        [WELCOME_SCREEN_SESSIONS_PREF]: {
+            type: 'number',
+            description: nls.localize('theia/ai/chat/welcomeScreenSessions/description',
+                'Number of rows of recent chat sessions to display on the welcome screen. The number of visible sessions depends ' +
+                'on the available width. Set to 0 to hide the recent chats section.'),
+            default: 3,
+            minimum: 0,
+            maximum: 10,
+            title: AI_CORE_PREFERENCES_TITLE,
+        },
         [SESSION_STORAGE_PREF]: {
             type: 'string',
             enum: ['workspace', 'global'] satisfies SessionStorageScope[],