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:

Functionality	Module	Window
Higlighting code	highlight.js	window.hljs
Speech to text with Azure	microsoft-cognitiveservices-speech-sdk	window.SpeechSDK
LLM web model	deep-chat-web-llm	window.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:

  
  
  

  Module	URL
  highlight	import hljs from "highlight.js"; window.hljs = hljs;
  speech	import * as sdk from 'microsoft-cognitiveservices-speech-sdk'; window.SpeechSDK = sdk;
  web model	import * 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:

  
  
  

  Module	URL
  highlight	import("highlight.js").then((module) => {      window.hljs = module.default;      chatElementRef.current?.refreshMessages(); });
  speech	import('microsoft-cognitiveservices-speech-sdk').then((module) => {      window.SpeechSDK = module; });
  web model	import('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).

  
  
  

  Module	URL
  highlight	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);
  speech	const script = document.createElement('script'); script.src = 'https://aka.ms/csspeech/jsbrowserpackageraw'; document.body.appendChild(script);
  web model	const 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).

  
  
  

  Module	URL
  highlight	const script = document.createElement('script'); script.src = 'highlight.min.js'; script.onload = () => chatElementRef.current?.refreshMessages(); document.body.appendChild(script);
  any other	const 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.