diff --git a/apps/website/content/docs/chat/api/api-docs.json b/apps/website/content/docs/chat/api/api-docs.json index 221d785b8..8012792e5 100644 --- a/apps/website/content/docs/chat/api/api-docs.json +++ b/apps/website/content/docs/chat/api/api-docs.json @@ -1677,6 +1677,12 @@ "description": "", "optional": false }, + { + "name": "showModelPicker", + "type": "InputSignal", + "description": "When `false`, hide the auto-rendered model picker even when\n`modelOptions` is non-empty. Useful in cramped surfaces (popup,\nsidebar) where the picker crowds the input. Defaults to `true`.\nHas no effect when consumers project their own\n`` via content projection.", + "optional": false + }, { "name": "showWelcome", "type": "Signal", @@ -2796,6 +2802,12 @@ "description": "Keyboard shortcut (single key) that toggles the popup with cmd (mac)\nor ctrl (other). Set to `null` to disable. Default: 'k' — matches the\nwidely-used cmd/ctrl+K convention.", "optional": false }, + { + "name": "showModelPicker", + "type": "InputSignal", + "description": "Forwarded to the inner ``. When `false`, hides the\nauto-rendered model picker even with non-empty `modelOptions`.\nUse this in narrow surfaces (the chat-sidebar panel is 28rem\nwide; chat-popup is 24rem) where the picker crowds the input.\nDefaults to `true`.", + "optional": false + }, { "name": "views", "type": "InputSignal | RenderViewEntry>> | undefined>", @@ -3297,6 +3309,12 @@ "description": "Two-way bound current model value.", "optional": false }, + { + "name": "showModelPicker", + "type": "InputSignal", + "description": "Forwarded to the inner ``. When `false`, hides the\nauto-rendered model picker even with non-empty `modelOptions`.\nUse this in narrow surfaces (the chat-sidebar panel is 28rem\nwide; chat-popup is 24rem) where the picker crowds the input.\nDefaults to `true`.", + "optional": false + }, { "name": "views", "type": "InputSignal | RenderViewEntry>> | undefined>", diff --git a/examples/chat/angular/src/app/modes/popup-mode.component.ts b/examples/chat/angular/src/app/modes/popup-mode.component.ts index 9db00fe00..2274f1495 100644 --- a/examples/chat/angular/src/app/modes/popup-mode.component.ts +++ b/examples/chat/angular/src/app/modes/popup-mode.component.ts @@ -21,6 +21,7 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component'; [views]="catalog" [modelOptions]="shell.modelOptions()" [selectedModel]="shell.model()" + [showModelPicker]="false" (selectedModelChange)="shell.onModelChange($event)" (replayRequested)="shell.onTimelineReplay($event)" (forkRequested)="shell.onTimelineFork($event)" diff --git a/examples/chat/angular/src/app/modes/sidebar-mode.component.ts b/examples/chat/angular/src/app/modes/sidebar-mode.component.ts index 9eca02fd2..f631e09e4 100644 --- a/examples/chat/angular/src/app/modes/sidebar-mode.component.ts +++ b/examples/chat/angular/src/app/modes/sidebar-mode.component.ts @@ -16,12 +16,14 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component'; [views]="catalog" [modelOptions]="shell.modelOptions()" [selectedModel]="shell.model()" + [showModelPicker]="false" [open]="true" [pushContent]="true" (selectedModelChange)="shell.onModelChange($event)" (replayRequested)="shell.onTimelineReplay($event)" (forkRequested)="shell.onTimelineFork($event)" > + {{ shell.currentThreadTitle() }}

Use the launcher (right edge) to dismiss or re-open the chat panel. diff --git a/examples/chat/angular/src/app/modes/welcome-suggestions.component.ts b/examples/chat/angular/src/app/modes/welcome-suggestions.component.ts index 105951ad9..2e2d10b76 100644 --- a/examples/chat/angular/src/app/modes/welcome-suggestions.component.ts +++ b/examples/chat/angular/src/app/modes/welcome-suggestions.component.ts @@ -50,6 +50,8 @@ import { FEATURED_SUGGESTIONS, MORE_SUGGESTIONS } from './welcome-suggestions'; gap: 12px; } .welcome-suggestions__featured { + flex: 1 1 0; + min-width: 0; max-width: 380px; overflow: hidden; } @@ -80,6 +82,9 @@ import { FEATURED_SUGGESTIONS, MORE_SUGGESTIONS } from './welcome-suggestions'; max-width: 480px; width: max-content; } + .welcome-suggestions__row > chat-select { + flex: 0 0 auto; + } `, ], }) diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.ts b/examples/chat/angular/src/app/shell/demo-shell.component.ts index 9e060ef5a..1e502f665 100644 --- a/examples/chat/angular/src/app/shell/demo-shell.component.ts +++ b/examples/chat/angular/src/app/shell/demo-shell.component.ts @@ -264,6 +264,16 @@ export class DemoShell { /** Persisted thread id (null on first run). Reactive so reload reconnects to the same thread. */ protected readonly threadIdSignal = signal(this.persistence.read('threadId') ?? null); + /** Title of the currently-selected thread, or 'New chat' if none. The + * Python graph writes thread.metadata.title from the first user message + * via _maybe_write_thread_title; threadsSvc surfaces it via threads(). */ + readonly currentThreadTitle = computed(() => { + const id = this.threadIdSignal(); + if (!id) return 'New chat'; + const thread = this.threadsSvc.threads().find((t) => t.id === id); + return thread?.title ?? 'New chat'; + }); + protected readonly selectedProjectId = signal( this.persistence.read('selectedProjectId') ?? null, ); diff --git a/libs/a2ui/package.json b/libs/a2ui/package.json index c168fa0e4..9112defb3 100644 --- a/libs/a2ui/package.json +++ b/libs/a2ui/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/a2ui", - "version": "0.0.41", + "version": "0.0.42", "license": "MIT", "repository": { "type": "git", diff --git a/libs/ag-ui/package.json b/libs/ag-ui/package.json index 92ae7000a..527deb786 100644 --- a/libs/ag-ui/package.json +++ b/libs/ag-ui/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/ag-ui", - "version": "0.0.41", + "version": "0.0.42", "peerDependencies": { "@ngaf/chat": "*", "@ngaf/licensing": "*", diff --git a/libs/chat/package.json b/libs/chat/package.json index 17bc6ff11..42e7a1678 100644 --- a/libs/chat/package.json +++ b/libs/chat/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/chat", - "version": "0.0.41", + "version": "0.0.42", "exports": { "./chat.css": "./chat.css", "./themes/default-dark.css": "./themes/default-dark.css", diff --git a/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts b/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts index 5424f11ab..c6817d5eb 100644 --- a/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts +++ b/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts @@ -69,6 +69,7 @@ import { CHAT_HOST_TOKENS, ensureChatRootStyles } from '../../styles/chat-tokens [agent]="agent()" [views]="views()" [modelOptions]="modelOptions()" + [showModelPicker]="showModelPicker()" [selectedModel]="selectedModel()" (selectedModelChange)="selectedModel.set($event)" (replayRequested)="replayRequested.emit($event)" @@ -89,6 +90,14 @@ export class ChatPopupComponent { /** Forwarded to the inner . When non-empty, a model picker pill * renders in the chat-input chrome. */ readonly modelOptions = input([]); + /** + * Forwarded to the inner ``. When `false`, hides the + * auto-rendered model picker even with non-empty `modelOptions`. + * Use this in narrow surfaces (the chat-sidebar panel is 28rem + * wide; chat-popup is 24rem) where the picker crowds the input. + * Defaults to `true`. + */ + readonly showModelPicker = input(true); /** Two-way bound current model value. */ readonly selectedModel = model(''); readonly open = model(false); diff --git a/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts index f650ac56b..0d782265e 100644 --- a/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts +++ b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts @@ -51,12 +51,32 @@ import { CHAT_HOST_TOKENS, ensureChatRootStyles } from '../../styles/chat-tokens @media (max-width: 640px) { .chat-sidebar__panel { width: 100vw; } } + .chat-sidebar__panel-header { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 8px 12px; + border-bottom: 1px solid var(--ngaf-chat-separator); + min-height: 48px; + } + .chat-sidebar__panel-title { + min-width: 0; + flex: 1 1 auto; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--ngaf-chat-text); + font-weight: 500; + font-size: var(--ngaf-chat-font-size-sm); + } .chat-sidebar__close { - position: absolute; top: 8px; right: 8px; + flex: 0 0 auto; width: 32px; height: 32px; background: transparent; border: 0; cursor: pointer; color: var(--ngaf-chat-text-muted); - border-radius: 50%; z-index: 1; + border-radius: 50%; display: flex; align-items: center; justify-content: center; @@ -79,13 +99,19 @@ import { CHAT_HOST_TOKENS, ensureChatRootStyles } from '../../styles/chat-tokens