From 35ad0574ddcf45341585aeadf10e6cb4b9cf7eda Mon Sep 17 00:00:00 2001 From: Ovidijus Parsiunas Date: Fri, 13 Dec 2024 19:17:37 +0900 Subject: [PATCH] updating the remarkable configuration --- component/src/deepChat.ts | 10 +++++----- component/src/services/utils/setFileTypes.ts | 2 +- component/src/types/remarkable.ts | 14 ++++++++++++++ component/src/views/chat/messages/messages.ts | 2 +- component/src/views/chat/messages/messagesBase.ts | 9 +++++---- .../chat/messages/remarkable/remarkable.d.ts | 2 +- .../chat/messages/remarkable/remarkableConfig.ts | 15 ++++++++------- 7 files changed, 35 insertions(+), 19 deletions(-) create mode 100644 component/src/types/remarkable.ts diff --git a/component/src/deepChat.ts b/component/src/deepChat.ts index 4a597e071..3e5a3f731 100644 --- a/component/src/deepChat.ts +++ b/component/src/deepChat.ts @@ -15,13 +15,12 @@ import {ValidationHandler} from './types/validationHandler'; import {GoogleFont} from './utils/webComponent/googleFont'; import {DirectConnection} from './types/directConnection'; import {TextToSpeechConfig} from './types/textToSpeech'; -import {MessageBody} from './types/messagesInternal'; import {SpeechToTextConfig} from './types/microphone'; +import {MessageBody} from './types/messagesInternal'; 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'; @@ -29,6 +28,7 @@ import {HTMLClassUtilities} from './types/html'; import {ChatView} from './views/chat/chatView'; import {ServiceIO} from './services/serviceIO'; import {Legacy} from './utils/legacy/legacy'; +import {RemarkableOptions} from 'remarkable'; import {TextInput} from './types/textInput'; import {LoadHistory} from './types/history'; import {CustomStyle} from './types/styles'; @@ -51,9 +51,6 @@ export class DeepChat extends InternalHTML { @Property('object') webModel?: WebModel; - @Property('object') - remarkableConfig?: RemarkableOptions; - @Property('object') requestBodyLimits?: RequestBodyLimits; @@ -144,6 +141,9 @@ export class DeepChat extends InternalHTML { @Property('object') htmlClassUtilities?: HTMLClassUtilities; + @Property('object') + remarkable?: RemarkableOptions; + getMessages: () => MessageContent[] = () => []; submitUserMessage: (content: UserContent) => void = () => diff --git a/component/src/services/utils/setFileTypes.ts b/component/src/services/utils/setFileTypes.ts index 4da732e26..94d2aacca 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(deepChat.remarkableConfig); + const remarkable = RemarkableConfig.createNew(deepChat.remarkable); 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/types/remarkable.ts b/component/src/types/remarkable.ts new file mode 100644 index 000000000..14028c014 --- /dev/null +++ b/component/src/types/remarkable.ts @@ -0,0 +1,14 @@ +// the reason why this is required is because remarkable.d.ts is used as a module and does not expose +// the RemarkableOptions interface to files that don't use the actual Remarkable class +// this become problematic when trying to build the React package +export interface RemarkableOptions { + xhtmlOut?: boolean; + html?: boolean; + breaks?: boolean; + linkify?: boolean; + langPrefix?: string; + linkTarget?: string; + typographer?: boolean; + quotes?: string; + highlight?: (str: string, lang: string) => void; +} diff --git a/component/src/views/chat/messages/messages.ts b/component/src/views/chat/messages/messages.ts index 11b99b863..d1417c7e2 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.remarkableConfig); + deepChat.refreshMessages = this.refreshTextMessages.bind(this, deepChat.remarkable); 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 d30bf8436..13b489061 100644 --- a/component/src/views/chat/messages/messagesBase.ts +++ b/component/src/views/chat/messages/messagesBase.ts @@ -7,7 +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 {RemarkableOptions} from '../../../types/remarkable'; import {LoadingHistory} from './history/loadingHistory'; import {HTMLClassUtilities} from '../../../types/html'; import {IntroPanel} from '../introPanel/introPanel'; @@ -18,6 +18,7 @@ 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 +38,7 @@ export class MessagesBase { constructor(deepChat: DeepChat) { this.elementRef = MessagesBase.createContainerElement(); this.messageStyles = Legacy.processMessageStyles(deepChat.messageStyles); - this._remarkable = RemarkableConfig.createNew(deepChat.remarkableConfig); + this._remarkable = RemarkableConfig.createNew(deepChat.remarkable); this._avatars = deepChat.avatars; this._names = deepChat.names; this._onMessage = FireEvents.onMessage.bind(this, deepChat); @@ -223,8 +224,8 @@ export class MessagesBase { } // this is mostly used for enabling highlight.js to highlight code if it downloads later - protected refreshTextMessages(config?: RemarkableOptions) { - this._remarkable = RemarkableConfig.createNew(config); + protected refreshTextMessages(customConfig?: RemarkableOptions) { + this._remarkable = RemarkableConfig.createNew(customConfig); 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/remarkable.d.ts b/component/src/views/chat/messages/remarkable/remarkable.d.ts index 94f5f108b..c79607147 100644 --- a/component/src/views/chat/messages/remarkable/remarkable.d.ts +++ b/component/src/views/chat/messages/remarkable/remarkable.d.ts @@ -7,7 +7,7 @@ declare module 'remarkable' { public inline: {validateLink: () => boolean}; } - export interface RemarkableOptions { + interface RemarkableOptions { xhtmlOut?: boolean; html?: boolean; breaks?: boolean; diff --git a/component/src/views/chat/messages/remarkable/remarkableConfig.ts b/component/src/views/chat/messages/remarkable/remarkableConfig.ts index ab0d37e7d..6aa9d8983 100644 --- a/component/src/views/chat/messages/remarkable/remarkableConfig.ts +++ b/component/src/views/chat/messages/remarkable/remarkableConfig.ts @@ -1,4 +1,5 @@ -import {Remarkable, RemarkableOptions} from 'remarkable'; +import {RemarkableOptions} from '../../../../types/remarkable'; +import {Remarkable} from 'remarkable'; import hljs from 'highlight.js'; declare global { @@ -8,9 +9,9 @@ declare global { } export class RemarkableConfig { - private static instantiate(config?: RemarkableOptions) { - if (config) { - return new Remarkable(config); + private static instantiate(customConfig?: RemarkableOptions) { + if (customConfig) { + return new Remarkable(customConfig); } else if (window.hljs) { const hljsModule = window.hljs; return new Remarkable({ @@ -36,7 +37,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 @@ -44,8 +45,8 @@ export class RemarkableConfig { } } - public static createNew(config?: RemarkableOptions) { - const remarkable = RemarkableConfig.instantiate(config); + public static createNew(customConfig?: RemarkableOptions) { + const remarkable = RemarkableConfig.instantiate(customConfig); remarkable.inline.validateLink = () => true; return remarkable; }