Preview a document

<document-preview-panel> previews one document. <workspace-detail> opens it beside the list when a document is chosen; use the panel on its own to preview a WorkspaceDocument anywhere else.

Minimal example

import { Component } from "@angular/core";
import { AskFollowUp, DocumentPreviewPanel, type WorkspaceDocument } from "@sinequa/atomic-angular/document-workspaces";

@Component({
  selector: "preview-example",
  imports: [DocumentPreviewPanel],
  template: `
    <document-preview-panel class="h-[40rem] w-[28rem]" [document]="document" (closed)="close()" (askFollowUp)="ask($event)" />
  `,
})
export class PreviewExample {
  document!: WorkspaceDocument;

  close() {}

  ask(followUp: AskFollowUp) {
    console.log(followUp.title);
  }
}

How it works

The panel asks the preview web service for the document by id, as a search application does, and shows the converted copy the service points at in a frame. Until the backend hands out the index id for an uploaded document (the listing carries the upload-side id) the service answers an error — the panel then says the document cannot be previewed, rather than showing a stand-in.

Finding text has to read the frame, so it only works when the converted copy is served from the same origin as the page. Otherwise the box is disabled, and says why in its tooltip.

Options

Outputs: closed, and askFollowUp (AskFollowUp: the document's title and type, a placeholder and three suggestions, already translated).

Pitfalls

What's next