updating the remarkable configuration

component/src/deepChat.ts

@@ -15,20 +15,20 @@ 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';
 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 = () =>

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);

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;
+}

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);

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);
     });

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;

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,16 +37,16 @@ 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
       });
     }
   }
 
-  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;
   }