From 918be2392056aaab1bb07a5eb0fbdb402a5a1a65 Mon Sep 17 00:00:00 2001 From: Ovidijus Parsiunas Date: Fri, 23 Aug 2024 23:38:41 +0100 Subject: [PATCH] added custom html functionality for loading history --- component/src/types/messages.ts | 12 ++++----- .../views/chat/messages/history/history.ts | 6 ++--- .../chat/messages/history/loadingHistory.ts | 27 ++++++++++++++----- .../views/chat/messages/html/htmlMessages.ts | 2 +- 4 files changed, 30 insertions(+), 17 deletions(-) diff --git a/component/src/types/messages.ts b/component/src/types/messages.ts index 5f5981183..80a6cd9a9 100644 --- a/component/src/types/messages.ts +++ b/component/src/types/messages.ts @@ -7,11 +7,6 @@ export interface LoadingHistoryStyles { small?: {styles?: MessageElementsStyles; html?: string}; } -export interface LoadingStyles { - message?: MessageElementsStyles; - history?: LoadingHistoryStyles; -} - export interface MessageElementsStyles { outerContainer?: CustomStyle; innerContainer?: CustomStyle; @@ -19,6 +14,11 @@ export interface MessageElementsStyles { media?: CustomStyle; } +export interface LoadingStyles { + message?: MessageElementsStyles; + history?: LoadingHistoryStyles; +} + export type MessageRoleStyles = { shared?: MessageElementsStyles; user?: MessageElementsStyles; @@ -32,8 +32,8 @@ export interface MessageStyles { file?: MessageRoleStyles; html?: MessageRoleStyles; intro?: MessageElementsStyles; - loading?: LoadingStyles; error?: MessageElementsStyles; + loading?: LoadingStyles; } export type MessageContent = {role?: string; text?: string; files?: MessageFile[]; html?: string; _sessionId?: string}; diff --git a/component/src/views/chat/messages/history/history.ts b/component/src/views/chat/messages/history/history.ts index 4b35c6fca..82b56adb7 100644 --- a/component/src/views/chat/messages/history/history.ts +++ b/component/src/views/chat/messages/history/history.ts @@ -23,7 +23,7 @@ export class History { } private async fetchHistory(ioFetchHistory: Required['fetchHistory']) { - const loadingElements = LoadingHistory.addLoadHistoryMessage(this._messages); + const loadingElements = LoadingHistory.addMessage(this._messages); const history = await ioFetchHistory(); this._messages.removeMessage(loadingElements); history.forEach((message) => this._messages.addAnyMessage(message, true)); @@ -55,7 +55,7 @@ export class History { this._messages.elementRef.onscroll = async () => { if (!this._isLoading && !this._isPaginationComplete && this._messages.elementRef.scrollTop === 0) { this._isLoading = true; - const loadingElements = LoadingHistory.addLoadHistoryMessage(this._messages, false); + const loadingElements = LoadingHistory.addMessage(this._messages, false); try { const messages = await loadHistory(this._index++); this._messages.removeMessage(loadingElements); @@ -80,7 +80,7 @@ export class History { private async loadInitialHistory(loadHistory: LoadHistory) { this._isLoading = true; - const loadingElements = LoadingHistory.addLoadHistoryMessage(this._messages); + const loadingElements = LoadingHistory.addMessage(this._messages); try { const messages = await loadHistory(this._index++); const scrollTop = this._messages.elementRef.scrollTop; diff --git a/component/src/views/chat/messages/history/loadingHistory.ts b/component/src/views/chat/messages/history/loadingHistory.ts index 43195a130..6d58edf46 100644 --- a/component/src/views/chat/messages/history/loadingHistory.ts +++ b/component/src/views/chat/messages/history/loadingHistory.ts @@ -1,6 +1,7 @@ import {LoadingStyle} from '../../../../utils/loading/loadingStyle'; import {MessageElementsStyles} from '../../../../types/messages'; import {MessageElements, Messages} from '../messages'; +import {HTMLMessages} from '../html/htmlMessages'; import {MessagesBase} from '../messagesBase'; import {MessageUtils} from '../messageUtils'; @@ -28,19 +29,31 @@ export class LoadingHistory { messages.applyCustomStyles(messageElements, 'history', false, styles); } - public static addLoadHistoryMessage(messages: Messages, isInitial = true) { - const messageElements = messages.createMessageElements('', MessageUtils.AI_ROLE); - const {outerContainer, bubbleElement} = messageElements; - bubbleElement.classList.add(LoadingHistory.CLASS); - const loadingRingElement = LoadingHistory.generateLoadingRingElement(); - bubbleElement.appendChild(loadingRingElement); + private static addLoadHistoryMessage(messageElements: MessageElements, messages: Messages, isInitial = true) { + messageElements.bubbleElement.classList.add(LoadingHistory.CLASS); const viewClass = isInitial ? LoadingHistory.FULL_VIEW_CLASS : LoadingHistory.SMALL_CLASS; messageElements.outerContainer.classList.add(viewClass); const styles = isInitial ? messages.messageStyles?.loading?.history?.full?.styles : messages.messageStyles?.loading?.history?.small?.styles; LoadingHistory.apply(messages, messageElements, styles); - messages.elementRef.prepend(outerContainer); + messages.elementRef.prepend(messageElements.outerContainer); + } + + public static createDefaultElements(messages: Messages) { + const messageElements = messages.createMessageElements('', MessageUtils.AI_ROLE); + const {bubbleElement} = messageElements; + const loadingRingElement = LoadingHistory.generateLoadingRingElement(); + bubbleElement.appendChild(loadingRingElement); + return messageElements; + } + + public static addMessage(messages: Messages, isInitial = true) { + const html = messages.messageStyles?.loading?.history?.full?.html; + const messageElements = html + ? HTMLMessages.createElements(messages, html, MessageUtils.AI_ROLE, true) + : LoadingHistory.createDefaultElements(messages); + LoadingHistory.addLoadHistoryMessage(messageElements, messages, isInitial); return messageElements; } diff --git a/component/src/views/chat/messages/html/htmlMessages.ts b/component/src/views/chat/messages/html/htmlMessages.ts index 0c162efb3..24281f416 100644 --- a/component/src/views/chat/messages/html/htmlMessages.ts +++ b/component/src/views/chat/messages/html/htmlMessages.ts @@ -11,7 +11,7 @@ export class HTMLMessages { messages.elementRef.scrollTop = messages.elementRef.scrollHeight; } - private static createElements(messages: MessagesBase, html: string, role: string, isTop: boolean) { + public static createElements(messages: MessagesBase, html: string, role: string, isTop: boolean) { const messageElements = messages.createMessageElementsOnOrientation('', role, isTop); messageElements.bubbleElement.classList.add('html-message'); messageElements.bubbleElement.innerHTML = html;