chore: make default footer to be a composable component as well

Author: shibbas

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

@@ -21,7 +21,7 @@ import iconUp from '../../public/svg/chevron-up-icon.svg?raw';
 import { type TabContent } from './tab-component.js';
 import { ChatController } from './chat-controller.js';
 import { ChatHistoryController } from './chat-history-controller.js';
-import { container, type ChatInputComponent, ComponentType } from './composable.js';
+import { container, type ChatInputComponent, ComponentType, type ChatInputFooterComponent } from './composable.js';
 import getDecorators from 'inversify-inject-decorators';
 const { lazyMultiInject } = getDecorators(container);
 
@@ -88,9 +88,6 @@ export class ChatComponent extends LitElement {
  @state()
  isShowingThoughtProcess = false;
 
- @state()
- isDefaultPromptsEnabled: boolean = globalConfig.IS_DEFAULT_PROMPTS_ENABLED && !this.isChatStarted;
-
  @state()
  selectedCitation: Citation | undefined = undefined;
 
@@ -107,6 +104,9 @@ export class ChatComponent extends LitElement {
  @lazyMultiInject(ComponentType.ChatInputComponent)
  chatInputComponents: ChatInputComponent[];
 
+ @lazyMultiInject(ComponentType.ChatInputFooterComponent)
+ chatInputFooterComponets: ChatInputFooterComponent[];
+
  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.
@@ -177,7 +177,6 @@ export class ChatComponent extends LitElement {
  this.collapseAside(event);
  const question = DOMPurify.sanitize(this.questionInput.value);
  this.isChatStarted = true;
- this.isDefaultPromptsEnabled = false;
 
  await this.chatController.generateAnswer(
  {
@@ -221,7 +220,6 @@ export class ChatComponent extends LitElement {
  this.isChatStarted = false;
  this.chatThread = [];
  this.isDisabled = false;
- this.isDefaultPromptsEnabled = true;
  this.selectedCitation = undefined;
  this.chatController.reset();
  // clean up the current session content from the history too
@@ -230,13 +228,6 @@ export class ChatComponent extends LitElement {
  this.handleUserChatCancel(event);
  }
 
- // Show the default prompts when enabled
- showDefaultPrompts(event: Event): void {
- if (!this.isDefaultPromptsEnabled) {
- this.resetCurrentChat(event);
- }
- }
-
  // Handle the change event on the input field
  handleOnInputChange(): void {
  this.isResetInput = !!this.questionInput.value;
@@ -477,13 +468,9 @@ export class ChatComponent extends LitElement {
  </button>
  </div>
 
- ${this.isDefaultPromptsEnabled
- ? ''
- : html`<div class="chat__containerFooter">
- <button type="button" @click="${this.showDefaultPrompts}" class="defaults__span button">
- ${globalConfig.DISPLAY_DEFAULT_PROMPTS_BUTTON}
- </button>
- </div>`}
+ ${this.chatInputFooterComponets.map((component) =>
+ component.render(this.resetCurrentChat, this.isChatStarted),
+ )}
  </form>
  </section>
  ${this.isShowingThoughtProcess

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

@@ -5,6 +5,7 @@ export const container = new Container();
 
 export const ComponentType = {
  ChatInputComponent: Symbol.for('ChatInputComponent'),
+ ChatInputFooterComponent: Symbol.for('ChatInputFooterComponent'),
 };
 
 export interface ChatInputComponent {
@@ -16,15 +17,26 @@ export interface ChatInputComponent {
  ) => TemplateResult;
 }
 
+export interface ChatInputFooterComponent {
+ render: (handleClick: (event: Event) => void, isChatStarted: boolean) => 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 DefaultInputComponent implements ChatInputComponent {
- position = 'right';
-
+export class DefaultEmptyComponent {
  render() {
  return html``;
  }
 }
 
+@injectable()
+export class DefaultInputComponent extends DefaultEmptyComponent implements ChatInputComponent {
+ position = 'right';
+}
+
+@injectable()
+export class DefaultFooterComponent extends DefaultEmptyComponent implements ChatInputFooterComponent {}
+
 container.bind<ChatInputComponent>(ComponentType.ChatInputComponent).to(DefaultInputComponent);
+container.bind<ChatInputFooter>(ComponentType.ChatInputFooterComponent).to(DefaultFooterComponent);

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

@@ -1,5 +1,5 @@
 import { injectable } from 'inversify';
-import { container, type ChatInputComponent, ComponentType } from './composable.js';
+import { container, type ChatInputComponent, ComponentType, type ChatInputFooterComponent } from './composable.js';
 import { globalConfig, teaserListTexts } from '../config/global-config.js';
 import { html } from 'lit';
 
@@ -27,4 +27,20 @@ export class DefaultQuestionsInputComponent implements ChatInputComponent {
  }
 }
 
+@injectable()
+export class DefaultQuestionFooterComponent implements ChatInputFooterComponent {
+ render(handleClick: (event: Event) => void, isChatStarted: boolean) {
+ const footer = html`
+ <div class="chat__containerFooter">
+ <button type="button" @click="${handleClick}" class="defaults__span button">
+ ${globalConfig.DISPLAY_DEFAULT_PROMPTS_BUTTON}
+ </button>
+ </div>
+ `;
+
+ return globalConfig.IS_DEFAULT_PROMPTS_ENABLED && !isChatStarted ? '' : footer;
+ }
+}
+
 container.bind<ChatInputComponent>(ComponentType.ChatInputComponent).to(DefaultQuestionsInputComponent);
+container.bind<ChatInputFooter>(ComponentType.ChatInputFooterComponent).to(DefaultQuestionFooterComponent);