Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
import { Component } from '@angular/core';
import { ChatComponent, ChatGenerativeUiComponent } from '@cacheplane/chat';
import { ChatComponent, views } from '@cacheplane/chat';
import { agent } from '@cacheplane/angular';
import { signalStateStore } from '@cacheplane/render';
import { environment } from '../environments/environment';

/**
* GenerativeUiComponent demonstrates dynamic UI generation within
* chat messages using ChatComponent and ChatGenerativeUiComponent.
* chat messages using ChatComponent with a ViewRegistry.
* The agent embeds render specs that are rendered as live components.
*/
@Component({
selector: 'app-generative-ui',
standalone: true,
imports: [ChatComponent, ChatGenerativeUiComponent],
imports: [ChatComponent],
template: `
<div class="flex h-screen">
<chat [ref]="stream" class="flex-1 min-w-0" />
<chat [ref]="stream" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
<aside class="w-80 shrink-0 border-l overflow-y-auto p-4 space-y-4"
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide"
style="color: var(--chat-text-muted, #777);">Generative UI</h3>
<chat-generative-ui [ref]="stream" />
<div class="mt-4">
<h4 class="text-xs font-semibold uppercase tracking-wide mb-2"
style="color: var(--chat-text-muted, #777);">How It Works</h4>
Expand All @@ -35,6 +35,9 @@ import { environment } from '../environments/environment';
`,
})
export class GenerativeUiComponent {
readonly ui = views({});
readonly uiStore = signalStateStore({});

protected readonly stream = agent({
apiUrl: environment.langGraphApiUrl,
assistantId: environment.streamingAssistantId,
Expand Down
4 changes: 2 additions & 2 deletions cockpit/chat/input/angular/src/app/input.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { Component, computed } from '@angular/core';
import { ChatInputComponent as ChatInputPrimitive } from '@cacheplane/chat';
import { ChatMessagesComponent } from '@cacheplane/chat';
import { agent } from '@cacheplane/angular';
import { agent, ResourceStatus } from '@cacheplane/angular';
import { environment } from '../environments/environment';

/**
Expand Down Expand Up @@ -58,7 +58,7 @@ export class InputComponent {
});

protected readonly streamStatus = computed(() => this.stream.status());
protected readonly isLoading = computed(() => this.stream.status() === 'streaming');
protected readonly isLoading = computed(() => this.stream.status() === ResourceStatus.Loading);

submitMessage(content: string) {
this.stream.submit([{ role: 'human', content }]);
Expand Down
2 changes: 1 addition & 1 deletion cockpit/chat/threads/angular/src/app/threads.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { environment } from '../environments/environment';
style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<h3 class="text-xs font-semibold uppercase tracking-wide"
style="color: var(--chat-text-muted, #777);">Threads</h3>
<chat-thread-list [ref]="stream" />
<chat-thread-list [threads]="[]" />
</aside>
<chat [ref]="stream" class="flex-1 min-w-0" />
</div>
Expand Down