tsc & rollup have same compilation characteristics

packages/chat-widget/src/index.tsx

@@ -17,14 +17,19 @@ import { createRoot } from "react-dom/client";
 import { ThemeProvider } from "@emotion/react";
 import { useChat, type ChatHook } from "@nlxai/chat-react";
 import { type Response, type ConversationHandler } from "@nlxai/chat-core";
-import { CloseIcon, ChatIcon, AirplaneIcon, ErrorOutlineIcon } from "./icons";
-import * as constants from "./ui/constants";
+import {
+  CloseIcon,
+  ChatIcon,
+  AirplaneIcon,
+  ErrorOutlineIcon,
+} from "./icons.js";
+import * as constants from "./ui/constants.js";
 import {
   type Props,
   type StorageType,
   type CustomModalityComponent,
-} from "./props";
-import * as C from "./ui/components";
+} from "./props.js";
+import * as C from "./ui/components.js";
 
 export { default as React } from "react";
 export { default as ReactDOM } from "react-dom";
@@ -33,9 +38,9 @@ export {
   type Props,
   type TitleBar,
   type CustomModalityComponent,
-} from "./props";
-export { type Theme } from "./theme";
-export { defaultTheme } from "./ui/constants";
+} from "./props.js";
+export { type Theme } from "./theme.js";
+export { defaultTheme } from "./ui/constants.js";
 
 export interface WidgetInstance {
   teardown: () => void;

packages/chat-widget/src/props.ts

@@ -1,6 +1,6 @@
 import { type FC } from "react";
 import { type Config, type ConversationHandler } from "@nlxai/chat-core";
-import { type Theme } from "./theme";
+import { type Theme } from "./theme.js";
 
 export interface TitleBar {
   logo?: string;

packages/chat-widget/src/types.d.ts

@@ -1,4 +1,4 @@
-import { type Theme as ThemeType } from "./theme";
+import { type Theme as ThemeType } from "./theme.js";
 import "@emotion/react";
 
 declare module "@emotion/react" {

packages/chat-widget/src/ui/components.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { keyframes } from "@emotion/react";
-import { Theme } from "../theme";
-import * as constants from "./constants";
+import { Theme } from "../theme.js";
+import * as constants from "./constants.js";
 import tinycolor from "tinycolor2";
 
 // Mixins

packages/chat-widget/src/ui/constants.ts

@@ -1,4 +1,4 @@
-import { Theme } from "../theme";
+import { Theme } from "../theme.js";
 
 export const bottomHeight = 60;
 

packages/website/src/components/CodeEditor.tsx

@@ -1,4 +1,4 @@
-import { DownloadIcon } from "./Icons";
+import { DownloadIcon } from "./icons.js";
 import React, { type FC, useRef, useEffect } from "react";
 
 const escapeForHighlightJs = (str: string) =>
@@ -22,7 +22,7 @@ export const CodeEditor: FC<{ code: string }> = (props) => {
         href={window.URL.createObjectURL(
           new Blob([props.code], {
             type: "text/plain",
-          })
+          }),
         )}
         download={`index.html`}
       >

packages/website/src/components/PageContent.tsx

@@ -1,7 +1,7 @@
 import React, { type FC, type ReactNode, useState } from "react";
 import Markdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { CheckIcon, ContentCopyIcon } from "./Icons";
+import { CheckIcon, ContentCopyIcon } from "./icons.js";
 
 const CopyToClipboardButton: FC<{ text: string; className?: string }> = ({
   text,

packages/website/src/content/01-01-getting-started.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { PageTitle } from "../components/PageTitle";
 import { PageContent } from "../components/PageContent";
-import { packageUrls } from "../constants";
+import { packageUrls } from "../constants.js";
 
 export const content = `
 This is the official JavaScript SDK to communicate with conversational bots created using NLX Dialog Studio. It contains the following packages:

packages/website/src/content/01-02-installation.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { PageTitle } from "../components/PageTitle";
 import { PageContent } from "../components/PageContent";
-import { umdScriptTags, packageUrls } from "../constants";
+import { umdScriptTags, packageUrls } from "../constants.js";
 
 export const content = `
 SDK packages can be installed as follows:

packages/website/src/content/04-03-custom-widgets-other.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { PageTitle } from "../components/PageTitle";
 import { PageContent } from "../components/PageContent";
 import { Note } from "../components/Note";
-import { packageUrls } from "../constants";
+import { packageUrls } from "../constants.js";
 
 export const content = `
 If you are using a different frontend framework, you can easily integrate the [@nlxai/chat-core](${packageUrls.chatCore}) package covered in the next chapter to build a custom widget. In fact, the [React](${packageUrls.chatReact}) and [Preact](${packageUrls.chatReact}) packages are both under 100 lines of TypeScript.

packages/website/src/snippets.ts

@@ -1,6 +1,6 @@
 import { type Config } from "@nlxai/chat-core";
 import { type TitleBar, type Theme } from "@nlxai/chat-widget";
-import { umdScriptTags } from "./constants";
+import { umdScriptTags } from "./constants.js";
 import { type Config as MMConfig } from "./components/MultimodalConfiguration";
 
 export enum Behavior {
@@ -211,8 +211,8 @@ const CustomWidget = () => {
         }
       })}
       {chat.waiting && <div>...</div>}
-      <input 
-        value={chat.inputValue} 
+      <input
+        value={chat.inputValue}
         onInput={(event) => {
           chat.setInputValue(event.target.value);
         }}
@@ -429,7 +429,7 @@ export const fileUploadSnippet = `const FileUpload = ({ onUploadComplete }) => {
       <input type="file" id="file-upload" hidden onChange=\${handleFileChange} />
       <div className="file-input-custom">
         <div className="file-input-custom-icon">
-          \${uploadProgress > 0 ? 
+          \${uploadProgress > 0 ?
             '<CircularProgressBar progress=' + uploadProgress + ' size=25 strokeWidth=2 />' :
             '<img src=' + uploadIcon + ' alt="upload" className="file-input-button-icon" />'}
         </div>
@@ -529,7 +529,7 @@ export const addressInputSnippet = `const AddressInput = ({ onAddressChange, add
         rows={5}
         className="address-textarea"
       />
-      \${coordinates ? 
+      \${coordinates ?
         '<Map className="map-container" lat=' + coordinates.lat + ' lng=' + coordinates.lng + ' />' :
         '<div className="map-placeholder"></div>'
       }