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
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;
    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();
    });
    speechimport('microsoft-cognitiveservices-speech-sdk').then((module) => {
         window.SpeechSDK = module;
    });
    web modelimport('deep-chat-web-llm').then((module) => {
         window.webLLM = module;
    });

  • Script from a CDN
    You can create script tags with the following URLs and append them to the document body (or manually add the scripts to your markup). The highlightjs module can load after messages are generated, use the refreshMessages method to apply it (window object is automatically populated).

    ModuleURL
    highlightconst 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);
    speechconst script = document.createElement('script');
    script.src = 'https://aka.ms/csspeech/jsbrowserpackageraw';
    document.body.appendChild(script);
    web modelconst script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/gh/OvidijusParsiunas/web-llm/lib/index.js';
    document.body.appendChild(script);

  • Script from within the project
    You can manually download the files from the URLs above, add them to the script tags and append them to the document body (or manually add the scripts to your markup). The highlightjs module can load after messages are generated, use the refreshMessages method to apply it (window object is automatically populated).

    ModuleURL
    highlightconst script = document.createElement('script');
    script.src = 'highlight.min.js';
    script.onload = () => chatElementRef.current?.refreshMessages();
    document.body.appendChild(script);
    any otherconst script = document.createElement('script');
    script.src = 'name.js';
    document.body.appendChild(script);

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