feat: load past 5 conversations

Author: shibbas

packages/chat-component/public/svg/chevron-up-icon.svg

@@ -15,6 +15,7 @@ import iconDelete from '../../public/svg/delete-icon.svg?raw';
 import iconCancel from '../../public/svg/cancel-icon.svg?raw';
 import iconSend from '../../public/svg/send-icon.svg?raw';
 import iconClose from '../../public/svg/close-icon.svg?raw';
+import iconUp from '../../public/svg/chevron-up-icon.svg?raw';
 
 import './loading-indicator.js';
 import './voice-input-button.js';
@@ -26,6 +27,7 @@ import './chat-thread-component.js';
 import './chat-action-button.js';
 import { type TabContent } from './tab-component.js';
 import { ChatController } from './chat-controller.js';
+import { ChatHistoryController } from './chat-history-controller.js';
 
 /**
  * A chat component that allows the user to ask questions and get answers from an API.
@@ -78,6 +80,7 @@ export class ChatComponent extends LitElement {
  isResetInput = false;
 
  private chatController = new ChatController(this);
+ private chatHistoryController = new ChatHistoryController(this);
 
  // Is showing thought process panel
  @state()
@@ -155,6 +158,10 @@ export class ChatComponent extends LitElement {
  stream: this.useStream,
  },
  );
+
+ if (this.interactionModel === 'chat') {
+ this.chatHistoryController.saveChatHistory(this.chatThread);
+ }
  }
 
  // Reset the input field and the current question
@@ -173,6 +180,8 @@ export class ChatComponent extends LitElement {
  this.isDefaultPromptsEnabled = true;
  this.selectedCitation = undefined;
  this.chatController.reset();
+ // clean up the current session content from the history too
+ this.chatHistoryController.saveChatHistory(this.chatThread);
  this.collapseAside(event);
  this.handleUserChatCancel(event);
  }
@@ -309,6 +318,27 @@ export class ChatComponent extends LitElement {
  }
  }
 
+ renderChatThread(chatThread: ChatThreadEntry[]) {
+ return html`<chat-thread-component
+ .chatThread="${chatThread}"
+ .actionButtons="${[
+ {
+ id: 'chat-show-thought-process',
+ label: globalConfig.SHOW_THOUGH_PROCESS_BUTTON_LABEL_TEXT,
+ svgIcon: iconLightBulb,
+ isDisabled: this.isShowingThoughtProcess,
+ },
+ ] as any}"
+ .isDisabled="${this.isDisabled}"
+ .isProcessingResponse="${this.chatController.isProcessingResponse}"
+ .selectedCitation="${this.selectedCitation}"
+ @on-action-button-click="${this.handleChatEntryActionButtonClick}"
+ @on-citation-click="${this.handleCitationClick}"
+ @on-followup-click="${this.handleQuestionInputClick}"
+ >
+ </chat-thread-component>`;
+ }
+
  // Render the chat component as a web component
  override render() {
  return html`
@@ -318,6 +348,7 @@ export class ChatComponent extends LitElement {
  ${this.isChatStarted
  ? html`
  <div class="chat__header">
+ ${this.interactionModel === 'chat' ? this.chatHistoryController.renderHistoryButton() : ''}
  <chat-action-button
  .label="${globalConfig.RESET_CHAT_BUTTON_TITLE}"
  actionId="chat-reset-button"
@@ -326,24 +357,15 @@ export class ChatComponent extends LitElement {
  >
  </chat-action-button>
  </div>
- <chat-thread-component
- .chatThread="${this.chatThread}"
- .actionButtons="${[
- {
- id: 'chat-show-thought-process',
- label: globalConfig.SHOW_THOUGH_PROCESS_BUTTON_LABEL_TEXT,
- svgIcon: iconLightBulb,
- isDisabled: this.isShowingThoughtProcess,
- },
- ] as any}"
- .isDisabled="${this.isDisabled}"
- .isProcessingResponse="${this.chatController.isProcessingResponse}"
- .selectedCitation="${this.selectedCitation}"
- @on-action-button-click="${this.handleChatEntryActionButtonClick}"
- @on-citation-click="${this.handleCitationClick}"
- @on-followup-click="${this.handleQuestionInputClick}"
- >
- </chat-thread-component>
+ ${this.chatHistoryController.showChatHistory
+ ? html`<div class="chat-history__container">
+ ${this.renderChatThread(this.chatHistoryController.chatHistory)}
+ <div class="chat-history__footer">
+ ${unsafeSVG(iconUp)} ${globalConfig.CHAT_HISTORY_FOOTER_TEXT} ${unsafeSVG(iconUp)}
+ </div>
+ </div>`
+ : ''}
+ ${this.renderChatThread(this.chatThread)}
  `
  : ''}
  ${this.chatController.isAwaitingResponse

packages/chat-component/public/svg/history-dismiss-icon.svg

@@ -0,0 +1,78 @@
+import { type ReactiveController, type ReactiveControllerHost } from 'lit';
+import { html } from 'lit';
+import { globalConfig } from '../config/global-config.js';
+
+import iconHistory from '../../public/svg/history-icon.svg?raw';
+import iconHistoryDismiss from '../../public/svg/history-dismiss-icon.svg?raw';
+
+import './chat-action-button.js';
+
+export class ChatHistoryController implements ReactiveController {
+ host: ReactiveControllerHost;
+ static CHATHISTORY_ID = 'component:chat-history';
+
+ chatHistory: ChatThreadEntry[] = [];
+
+ private _showChatHistory: boolean = false;
+
+ get showChatHistory() {
+ return this._showChatHistory;
+ }
+
+ set showChatHistory(value: boolean) {
+ this._showChatHistory = value;
+ this.host.requestUpdate();
+ }
+
+ constructor(host: ReactiveControllerHost) {
+ (this.host = host).addController(this);
+ }
+
+ hostConnected() {
+ const chatHistory = localStorage.getItem(ChatHistoryController.CHATHISTORY_ID);
+ if (chatHistory) {
+ const history = JSON.parse(chatHistory);
+
+ // find last 5 user messages indexes
+ const lastUserMessagesIndexes = history
+ .map((entry, index) => {
+ if (entry.isUserMessage) {
+ return index;
+ }
+ })
+ .filter((index) => index !== undefined)
+ .slice(-5);
+
+ // trim everything before the first user message
+ const trimmedHistory = lastUserMessagesIndexes.length === 0 ? history : history.slice(lastUserMessagesIndexes[0]);
+
+ this.chatHistory = trimmedHistory;
+ }
+ }
+
+ hostDisconnected() {
+ // no-op
+ }
+
+ saveChatHistory(currentChat: ChatThreadEntry[]): void {
+ const newChatHistory = [...this.chatHistory, ...currentChat];
+ localStorage.setItem(ChatHistoryController.CHATHISTORY_ID, JSON.stringify(newChatHistory));
+ }
+
+ handleChatHistoryButtonClick(event: Event) {
+ event.preventDefault();
+ this.showChatHistory = !this.showChatHistory;
+ }
+
+ renderHistoryButton() {
+ return html`
+ <chat-action-button
+ .label="${this.showChatHistory ? globalConfig.HIDE_CHAT_HISTORY_LABEL : globalConfig.SHOW_CHAT_HISTORY_LABEL}"
+ actionId="chat-history-button"
+ @click="${(event) => this.handleChatHistoryButtonClick(event)}"
+ .svgIcon="${this.showChatHistory ? iconHistoryDismiss : iconHistory}"
+ >
+ </chat-action-button>
+ `;
+ }
+}

packages/chat-component/public/svg/history-icon.svg

@@ -34,6 +34,9 @@ const globalConfig = {
  SUPPORT_CONTEXT_LABEL: 'Support Context',
  CITATIONS_LABEL: 'Learn More:',
  CITATIONS_TAB_LABEL: 'Citations',
+ SHOW_CHAT_HISTORY_LABEL: 'Show Chat History',
+ HIDE_CHAT_HISTORY_LABEL: 'Hide Chat History',
+ CHAT_HISTORY_FOOTER_TEXT: 'Showing past 5 conversations',
 };
 
 const teaserListTexts = {

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

@@ -50,6 +50,7 @@ export const styles = css`
  svg {
  fill: currentColor;
  width: 20px;
+ height: 20px;
  padding: 3px;
  }
  button:hover > span,

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

@@ -260,4 +260,18 @@ export const chatStyle = css`
  border-radius: 25px;
  padding: 20px;
  }
+ .chat-history__footer {
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+ justify-content: space-between;
+ align-self: center;
+ padding: 20px;
+ }
+ .chat-history__container {
+ display: flex;
+ flex-direction: column;
+ border-bottom: 3px solid var(--light-gray);
+ margin-bottom: 30px;
+ }
 `;