diff --git a/component/src/deepChat.ts b/component/src/deepChat.ts index 3d4c55877..4a597e071 100644 --- a/component/src/deepChat.ts +++ b/component/src/deepChat.ts @@ -21,6 +21,7 @@ import {ErrorMessages, OnError} from './types/error'; import {RequestBodyLimits} from './types/chatLimits'; import {Property} from './utils/decorators/property'; import {FireEvents} from './utils/events/fireEvents'; +import type { RemarkableOptions } from 'remarkable'; import {ValidateInput} from './types/validateInput'; import {WebModel} from './types/webModel/webModel'; import {DropupStyles} from './types/dropupStyles'; @@ -50,6 +51,9 @@ export class DeepChat extends InternalHTML { @Property('object') webModel?: WebModel; + @Property('object') + remarkableConfig?: RemarkableOptions; + @Property('object') requestBodyLimits?: RequestBodyLimits; diff --git a/component/src/services/utils/setFileTypes.ts b/component/src/services/utils/setFileTypes.ts index 65939ab71..4da732e26 100644 --- a/component/src/services/utils/setFileTypes.ts +++ b/component/src/services/utils/setFileTypes.ts @@ -141,7 +141,7 @@ export class SetFileTypes { public static set(deepChat: DeepChat, serviceIO: ServiceIO, existingFileTypes?: ServiceFileTypes) { SetFileTypes.populateDefaultFileIO(existingFileTypes?.audio, '.4a,.mp3,.webm,.mp4,.mpga,.wav,.mpeg,.m4a'); SetFileTypes.populateDefaultFileIO(existingFileTypes?.images, '.png,.jpg'); - const remarkable = RemarkableConfig.createNew(); + const remarkable = RemarkableConfig.createNew(deepChat.remarkableConfig); SetFileTypes.processImagesConfig(serviceIO, remarkable, deepChat.images, existingFileTypes?.images); SetFileTypes.processCamera(serviceIO, remarkable, deepChat.camera, deepChat.images); SetFileTypes.processGifConfig(serviceIO, remarkable, deepChat.gifs, existingFileTypes?.gifs); diff --git a/component/src/views/chat/messages/messages.ts b/component/src/views/chat/messages/messages.ts index 0be413730..11b99b863 100644 --- a/component/src/views/chat/messages/messages.ts +++ b/component/src/views/chat/messages/messages.ts @@ -61,7 +61,7 @@ export class Messages extends MessagesBase { this._displayServiceErrorMessages = deepChat.errorMessages?.displayServiceErrorMessages; deepChat.getMessages = () => JSON.parse(JSON.stringify(this.messageToElements.map(([msg]) => msg))); deepChat.clearMessages = this.clearMessages.bind(this, serviceIO); - deepChat.refreshMessages = this.refreshTextMessages.bind(this); + deepChat.refreshMessages = this.refreshTextMessages.bind(this, deepChat.remarkableConfig); deepChat.scrollToBottom = ElementUtils.scrollToBottom.bind(this, this.elementRef); deepChat.addMessage = (message: ResponseI, isUpdate?: boolean) => { this.addAnyMessage({...message, sendUpdate: !!isUpdate}, !isUpdate); diff --git a/component/src/views/chat/messages/messagesBase.ts b/component/src/views/chat/messages/messagesBase.ts index 3b7954c5e..d30bf8436 100644 --- a/component/src/views/chat/messages/messagesBase.ts +++ b/component/src/views/chat/messages/messagesBase.ts @@ -7,6 +7,7 @@ import {LoadingStyle} from '../../../utils/loading/loadingStyle'; import {RemarkableConfig} from './remarkable/remarkableConfig'; import {MessageStyleUtils} from './utils/messageStyleUtils'; import {FireEvents} from '../../../utils/events/fireEvents'; +import {Remarkable, RemarkableOptions} from 'remarkable'; import {LoadingHistory} from './history/loadingHistory'; import {HTMLClassUtilities} from '../../../types/html'; import {IntroPanel} from '../introPanel/introPanel'; @@ -17,7 +18,6 @@ import {Avatars} from '../../../types/avatars'; import {DeepChat} from '../../../deepChat'; import {Names} from '../../../types/names'; import {MessageElements} from './messages'; -import {Remarkable} from 'remarkable'; export class MessagesBase { messageElementRefs: MessageElements[] = []; @@ -37,7 +37,7 @@ export class MessagesBase { constructor(deepChat: DeepChat) { this.elementRef = MessagesBase.createContainerElement(); this.messageStyles = Legacy.processMessageStyles(deepChat.messageStyles); - this._remarkable = RemarkableConfig.createNew(); + this._remarkable = RemarkableConfig.createNew(deepChat.remarkableConfig); this._avatars = deepChat.avatars; this._names = deepChat.names; this._onMessage = FireEvents.onMessage.bind(this, deepChat); @@ -223,8 +223,8 @@ export class MessagesBase { } // this is mostly used for enabling highlight.js to highlight code if it downloads later - protected refreshTextMessages() { - this._remarkable = RemarkableConfig.createNew(); + protected refreshTextMessages(config?: RemarkableOptions) { + this._remarkable = RemarkableConfig.createNew(config); this.messageToElements.forEach((msgToEls) => { if (msgToEls[1].text && msgToEls[0].text) this.renderText(msgToEls[1].text.bubbleElement, msgToEls[0].text); }); diff --git a/component/src/views/chat/messages/remarkable/remarkableConfig.ts b/component/src/views/chat/messages/remarkable/remarkableConfig.ts index cd755200a..ab0d37e7d 100644 --- a/component/src/views/chat/messages/remarkable/remarkableConfig.ts +++ b/component/src/views/chat/messages/remarkable/remarkableConfig.ts @@ -1,4 +1,4 @@ -import {Remarkable} from 'remarkable'; +import {Remarkable, RemarkableOptions} from 'remarkable'; import hljs from 'highlight.js'; declare global { @@ -8,9 +8,11 @@ declare global { } export class RemarkableConfig { - private static instantiate() { - const hljsModule = window.hljs; - if (hljsModule) { + private static instantiate(config?: RemarkableOptions) { + if (config) { + return new Remarkable(config); + } else if (window.hljs) { + const hljsModule = window.hljs; return new Remarkable({ highlight: function (str, lang) { if (lang && hljsModule.getLanguage(lang)) { @@ -34,7 +36,7 @@ export class RemarkableConfig { linkTarget: '_blank', // set target to open in a new tab typographer: true, // Enable smartypants and other sweet transforms }); - } else { + } else { return new Remarkable({ breaks: true, linkTarget: '_blank', // set target to open in a new tab @@ -42,8 +44,8 @@ export class RemarkableConfig { } } - public static createNew() { - const remarkable = RemarkableConfig.instantiate(); + public static createNew(config?: RemarkableOptions) { + const remarkable = RemarkableConfig.instantiate(config); remarkable.inline.validateLink = () => true; return remarkable; }