WorkspacesShell
Show the whole workspaces view — the list, a workspace with its documents and preview, the dialogs they open and the upload tracker — from one component.
<workspaces-shell> is the piece that decides where things go: choosing a workspace opens it, "Add workspace"
opens the dialog and then the new workspace, leaving a workspace goes back to the list.
Minimal example
import { Component } from "@angular/core";
import { WorkspacesShell } from "@sinequa/atomic-angular/document-workspaces";
@Component({
selector: "workspaces-page",
imports: [WorkspacesShell],
template: `<workspaces-shell class="h-[40rem]" uploadEndpoint="/tus" />`,
})
export class WorkspacesPage {}The shell fills its parent (h-full), so give it a height — and let it scroll itself: the list and the document
area scroll inside it, the title and the toolbar stay in place.
How it works
workspaceId is what is shown. null is the list; an id is that workspace, with its documents. It is a two-way
model, so a host can open a workspace and is told which one is open.
Recipes
Open on a workspace, and follow the route
import { Component, inject, input } from "@angular/core";
import { Router } from "@angular/router";
import { WorkspacesShell } from "@sinequa/atomic-angular/document-workspaces";
@Component({
selector: "workspaces-page",
imports: [WorkspacesShell],
template: `<workspaces-shell class="h-[40rem]" uploadEndpoint="/tus" [workspaceId]="id() ?? null" (workspaceIdChange)="open($event)" />`,
})
export class WorkspacesPage {
/** From the route, e.g. `withComponentInputBinding()` and a `:id` segment. */
readonly id = input<string>();
private readonly router = inject(Router);
open(id: string | null) {
void this.router.navigate(id ? ["/workspaces", id] : ["/workspaces"]);
}
}Hand a previewed document to a chat
import { Component } from "@angular/core";
import { AskFollowUp, WorkspacesShell } from "@sinequa/atomic-angular/document-workspaces";
@Component({
selector: "workspaces-page",
imports: [WorkspacesShell],
template: `<workspaces-shell class="h-[40rem]" uploadEndpoint="/tus" (askFollowUp)="ask($event)" />`,
})
export class WorkspacesPage {
ask(followUp: AskFollowUp) {
// The title and type of the document, a placeholder and three suggestions, already translated.
console.log(followUp.title, followUp.suggestions);
}
}Options
Prop
Type
Outputs: workspaceCreated and workspaceUpdated (the Workspace as the server now has it) and askFollowUp
(AskFollowUp). addWorkspace() opens the "Add workspace" dialog from code.
Pitfalls
What's next
Document workspaces
A user-managed set of documents — listed, opened, uploaded into, shared and previewed — as Angular components, with a custom-element build for pages that are not Angular.
List and detail
Lay out the workspace list and a single workspace yourself — each says what the user asked for, and your host decides where it goes.