Skip to main content

External Modules

To keep Deep Chat as lightweight as possible, some of its functionality requires the use of external modules. The component has been set up to recognise them by using the window object:

FunctionalityModuleWindow
Higlighting code highlight.jswindow.hljs
Remarkable pluginsCustom pluginswindow.remarkable_plugins
Remarkable mathKaTeXwindow.katex
Speech to text with Azure microsoft-cognitiveservices-speech-sdkwindow.SpeechSDK
LLM web modeldeep-chat-web-llmwindow.webLLM

Implementation​

Here are some simple approaches you can use to add these modules to your project:

  • Import from a dependancy
    If you are using a dependancy manager such as npm, you can import the modules and assign them to window:

    ModuleURL
    highlightimport hljs from "highlight.js";
    window.hljs = hljs;
    linkifyimport {linkify} from 'remarkable/linkify';
    window.remarkable_plugins = [{plugin: linkify}];
    kateximport katex from 'katex';
    window.katex = katex;
    speechimport * as sdk from 'microsoft-cognitiveservices-speech-sdk';
    window.SpeechSDK = sdk;
    web modelimport * as webLLM from 'deep-chat-web-llm'
    window.webLLM = webLLM;

  • Dynamic import from a dependancy (recommended for SSR)
    If you are using a dependancy manager such as npm, you can dynamically import the modules and assign them to the window object. The highlightjs module can load after messages are generated, use the refreshMessages method to apply it:

    ModuleURL
    highlightimport("highlight.js").then((module) => {
         window.hljs = module.default;
         chatElementRef.current?.refreshMessages();
    });
    any otherimport('name').then((module) => {
         window.name = module;
    });

  • Script from a CDN
    Create a <script> tag using any of the URLs (still need to populate the window object except for highlightjs). The highlightjs module can load after messages are generated, use the refreshMessages method to apply it.

    ModuleURL
    highlight// manual example
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js';
    script.onload = () => chatElementRef.current?.refreshMessages();
    document.body.appendChild(script);
    linkify<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/2.0.1/remarkable.js" />
    // special window setting
    window.remarkable_plugins = [{plugin: remarkable.linkify}];
    katex<script src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js" />
    speech<script src="https://aka.ms/csspeech/jsbrowserpackageraw" />
    web model<script src="https://cdn.jsdelivr.net/gh/OvidijusParsiunas/web-llm/lib/index.js" />

  • Script from within the project
    You can manually download the files from the URLs above and add their paths to the <script> tags. The highlightjs module can load after messages are generated, use the refreshMessages method to apply it (window object is automatically populated).

    ModulePath
    highlightconst script = document.createElement('path');
    script.src = 'highlight.min.js';
    script.onload = () => chatElementRef.current?.refreshMessages();
    document.body.appendChild(script);
    any other<script src="path" />

If your project is using TypeScript, add this to the file where the modules are being used:

import hljs from 'highlight.js';
import * as sdk from 'microsoft-cognitiveservices-speech-sdk';
import * as webLLM from 'deep-chat-web-llm';

declare global {
  interface Window {
    hljs: typeof hljs;
    remarkable_plugins: {plugin: unknown; options?: unknown}[];
    katex: unknown;
    SpeechSDK: typeof sdk;
    webLLM: typeof webLLM;
  }
}

Examples​

React project that uses a package bundler - should work similarly for other Frameworks:

Click for Live Example

VanillaJS approach with no bundler (this can also be used as fallback if above doesn't work):

Click for Live Example

Explanation​

The decision to have developers download external dependancies was not easily made and there were multiple reasons that lead us down this path.
First, the post-compression size of the above modules is orders of magnitude bigger than Deep Chat. This ruled out the idea of pre-bundling them into the component.
We then spent some time experimenting with dynamic imports which seemed promising, but unfortunatelly we hit a roadblock that had no simple way of overcoming; Deep Chat itself is an injectable component that exists as part of a parent project which can use any type of a bundler to compile it. This is where dynamic imports become problematic as they are not supported by all bundlers and in many cases need extra configuration to work.
Therefore, to make the lives of our developers as simple as possible; for use cases that do not need the extra functionality - Deep Chat can be installed without any extra work, for use cases that do - we leave the decision of how to implement the modules in their hands to alllow them to tailor the approach for their project.

Troubleshooting​

If you are experiencing issues for importing/exporting files, please see github issues or create a new issue ticket and we will look into it as soon as possible.