feat: make doc preview as composable

Author: Shibani Basava

packages/chat-component/src/components/chat-component.ts

@@ -23,9 +23,10 @@ import { ChatController } from './chat-controller.js';
 import { ChatHistoryController } from './chat-history-controller.js';
 import {
   lazyMultiInject,
-  type ChatInputComponent,
   ComponentType,
+  type ChatInputComponent,
   type ChatInputFooterComponent,
+  type CitationActionComponent,
 } from './composable.js';
 
 /**
@@ -74,7 +75,6 @@ export class ChatComponent extends LitElement {
   @query('#question-input')
   questionInput!: HTMLInputElement;
 
-  // Default prompts to display in the chat
   @state()
   isDisabled = false;
 
@@ -110,6 +110,9 @@ export class ChatComponent extends LitElement {
   @lazyMultiInject(ComponentType.ChatInputFooterComponent)
   chatInputFooterComponets: ChatInputFooterComponent[] | undefined;
 
+  @lazyMultiInject(ComponentType.CitationActionComponent)
+  citationActionComponents: CitationActionComponent[] | undefined;
+
   override updated(changedProperties: Map<string | number | symbol, unknown>) {
     super.updated(changedProperties);
     // The following block is only necessary when you want to override the component from settings in the outside.
@@ -323,9 +326,9 @@ export class ChatComponent extends LitElement {
                 @on-citation-click="${this.handleCitationClick}"
               ></citation-list>
               ${this.selectedCitation
-                ? html`<document-previewer
-                    url="${this.apiUrl}/content/${this.selectedCitation.text}"
-                  ></document-previewer>`
+                ? this.citationActionComponents?.map((component) =>
+                    component.render(this.selectedCitation, `${this.apiUrl}/content/${this.selectedCitation.text}`),
+                  )
                 : ''}
             </div>
           `

packages/chat-component/src/components/citation-previewer.ts

@@ -0,0 +1,12 @@
+import { injectable } from 'inversify';
+import { container, type CitationActionComponent, ComponentType } from './composable.js';
+import { html } from 'lit';
+
+@injectable()
+export class CitationPreviewer implements CitationActionComponent {
+  render(citation: Citation, url: string) {
+    return html`<document-previewer url="${url}"></document-previewer>`;
+  }
+}
+
+container.bind<CitationActionComponent>(ComponentType.CitationActionComponent).to(CitationPreviewer);

packages/chat-component/src/components/composable.ts

@@ -9,6 +9,7 @@ export const ComponentType = {
   ChatInputComponent: Symbol.for('ChatInputComponent'),
   ChatInputFooterComponent: Symbol.for('ChatInputFooterComponent'),
   ChatEntryActionButtonComponent: Symbol.for('ChatEntryActionButtonComponent'),
+  CitationActionComponent: Symbol.for('CitationActionComponent'),
 };
 
 export interface ComposableComponent {
@@ -33,10 +34,16 @@ export interface ChatEntryActionButtonComponent extends ComposableComponent {
   render: (entry: ChatThreadEntry, isDisabled: boolean, handleClick: (event: Event) => void) => TemplateResult;
 }
 
+export interface CitationActionComponent {
+  render: (citation: Citation, url: string) => TemplateResult;
+}
+
 // Add a default component since inversify currently doesn't seem to support optional bindings
 // and bindings fail if no component is provided
 @injectable()
-export class DefaultEmptyComponent {
+export class DefaultEmptyComponent implements ComposableComponent {
+  attach() {}
+
   render() {
     return html``;
   }
@@ -52,3 +59,5 @@ export class DefaultFooterComponent extends DefaultEmptyComponent implements Cha
 
 container.bind<ChatInputComponent>(ComponentType.ChatInputComponent).to(DefaultInputComponent);
 container.bind<ChatInputFooterComponent>(ComponentType.ChatInputFooterComponent).to(DefaultFooterComponent);
+container.bind<ChatEntryActionButtonComponent>(ComponentType.ChatEntryActionButtonComponent).to(DefaultEmptyComponent);
+container.bind<CitationActionComponent>(ComponentType.CitationActionComponent).to(DefaultEmptyComponent);

packages/chat-component/src/components/index.ts

@@ -2,7 +2,6 @@
 import './link-icon.js';
 import './chat-stage.js';
 import './loading-indicator.js';
-import './document-previewer.js';
 import './tab-component.js';
 import './citation-list.js';
 import './chat-thread-component.js';
@@ -16,6 +15,9 @@ import './voice-input-button.js';
 
 import './default-questions.js';
 import './teaser-list-component.js';
+
+import './document-previewer.js';
+import './citation-previewer.js';
 // [COMPOSE COMPONENTS END]
 
 export * from './chat-component.js';