Chat + notebook + welcome service overrides

.eslintrc

@@ -22,6 +22,7 @@
         "css": "always",
         "js": "always",
         "mp3": "always",
+        "svg": "always",
         "json": "always",
         "contribution": "always", // Hack for vscode .contribution.js files
         "protocol": "always", // Hack for vscode .protocol.js files
@@ -30,7 +31,8 @@
         "worker": "always",
         "ts": "always",
         "services": "always",
-        "api": "always"
+        "api": "always",
+        "all": "always"
       }
     ],
     "@typescript-eslint/no-unused-vars": [

README.md

@@ -32,13 +32,13 @@ To **tree-mend** (to **un**treeshake it) monaco-editor, this library provides a
 
 This library uses a lot the `new URL('asset.extension', import.meta.url)` syntax which [is supported by vite](https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
 
-While it works great in `build` mode (because rollup is used), there is some issues in `watch`` mode:
+While it works great in `build` mode (because rollup is used), there is some issues in `watch` mode:
 - import.meta.url is not replaced while creating bundles, it is an issue when the syntax is used inside a dependency
 - vite is still trying to inject/transform javascript assets files, breaking the code by injecting ESM imports in commonjs files
 
 There are workarounds for both:
 
-- We can help vite by replacing `import.meta.url` by the original module path (you need the --experimental-import-meta-resolve note option):
+- We can help vite by replacing `import.meta.url` by the original module path (you need the `--experimental-import-meta-resolve` note option):
 ```typescript
 {
   ...
@@ -111,13 +111,15 @@ await initialize({
 })
 ```
 
-Additionally, 25 packages that include the vscode version of some services (with some glue to make it work with monaco) are published:
+Additionally, several packages that include the VSCode version of some services (with some glue to make it work with monaco) are published:
 
 - **Extensions** (included by default): `@codingame/monaco-vscode-extensions-service-override`
-  - Support for VSCode extensions. A worker configuration can be past to it:
-    - Then, everything runs in one worker, where extensions run in an iframe, with all the implications (can be created by the bundler directly). The worker script is expected to be hosted on a separate domain.
+  - Support for VSCode extensions.
+  - A worker configuration can be provided to it:
+    - Then, extensions run in a worker which runs in an iframe, with all the implications (can be created by the bundler directly). The worker script is expected to be hosted on a separate domain.
 - **Files** (included by default): `@codingame/monaco-vscode-files-service-override`
-  - It adds the memory filesystem for `file://` files, but also adds the support for lazy loaded extension files. It adds separate memory user files (e.g. config, keybindings), cache files and log files.
+  - It adds the overlay filesystem for `file://` files, but also adds the support for lazy loaded extension files. It adds separate memory user files (e.g. config, keybindings), cache files and log files.
+  - It supports adding overlay filesystems for `file://` files
 - **QuickAccess** (included by default): `@codingame/monaco-vscode-quickaccess-service-override`
   - Enables the quickaccess menu in the editor (press F1 or ctrl+shift+p)
 - **Notifications**: `@codingame/monaco-vscode-notifications-service-override`
@@ -126,7 +128,7 @@ Additionally, 25 packages that include the vscode version of some services (with
   - Enable vscode modal dialogs. It allows users to select an action to do. Those actions are exposed to the vscode API. Additionally, this service can be used by the language client to delegate questions to the user.
 - **Model**: `@codingame/monaco-vscode-model-service-override`
   - This service creates and takes care of model references. For example:
-    - Create model if content is unknown
+    - Create model from filesystem if content is unknown
     - Count references
     - Destroy models when they are no longer used
 - **Editor**: `@codingame/monaco-vscode-editor-service-override`
@@ -188,6 +190,13 @@ Additionally, 25 packages that include the vscode version of some services (with
   - Ask user it they trust the current workspace, disable some features if not
 - **Extension Gallery**: `@codingame/monaco-vscode-extension-gallery-service-override`
   - Support for the VSCode marketplace, it allows to install extensions from the marketplace.
+- **Chat**: `@codingame/monaco-vscode-chat-service-override`
+  - Support for chat and inline chat features
+- **Notebook**
+  - Support for Jupyter notebooks
+- **Welcome**
+  - Support for welcome pages/components. *Hint*: It only makes sense to enable it when *Views* service is used.
+
 Usage:
 
 ```typescript
@@ -277,8 +286,6 @@ const range = new vscode.Range(...)
 vscode.languages.registerCompletionItemProvider(...)
 ```
 
-The api will use the manifest of a default vscode extension, which can be overriden by providing it to the `initialize` function.
-
 You can also register a new extension from its manifest:
 ```typescript
 import { registerExtension, initialize, ExtensionHostKind } from 'vscode/extensions'
@@ -318,7 +325,7 @@ import '@codingame/monaco-vscode-json-default-extension'
 
 ### Loading vsix file
 
-VSCode extension are bundled as vsix files.
+VSCode extensions are bundled as vsix files.
 This library publishes a rollup plugin (vite-compatible) that allows to load a vsix file.
 
 - rollup/vite config:
@@ -371,6 +378,8 @@ It includes:
 - Configuration service, with user configuration editor
 - Keybinding service, with user keybindings editor
 - Debuggers
+- Remote agent
+- and much more
 
 From CLI run:
 

demo/index.html

@@ -8,56 +8,63 @@
   </head>
   <body>
     <div id="app">
-      <div id="titleBar"></div>
-      <div id="banner"></div>
-      <div style="display: flex; gap: 20px; height:60vh">
-        <div style="display: flex; flex: none; border: 1px solid var(--vscode-editorWidget-border)">
-          <div id="activityBar"></div>
-          <div id="sidebar" style="width: 500px"></div>
-        </div>
-        <div style="flex: 1; min-width: 0">
-          <h1>Editor</h1>
-          <div id="editors"></div>
+      <div id="workbench-container">
+        <div id="titleBar"></div>
+        <div id="banner"></div>
+        <div id="workbench-top">
+          <div style="display: flex; flex: none; border: 1px solid var(--vscode-editorWidget-border)">
+            <div id="activityBar"></div>
+            <div id="sidebar" style="width: 400px"></div>
+            <div id="auxiliaryBar-left" style="max-width: 300px"></div>
+          </div>
+          <div style="flex: 1; min-width: 0">
+            <h1>Editor</h1>
+            <div id="editors"></div>
 
-          <button id="run">Run with debugger</button>
-          <button id="filesystem">Attach filesystem</button>
-          <button id="customEditorPanel">Open custom editor panel</button>
-          <button id="clearStorage">Clear user data</button>
-          <br />
-          <button id="togglePanel">Toggle Panel</button>
-          <button id="toggleAuxiliary">Toggle Secondary Panel</button>
-          <br />
-          <label for="localeSelect">Language:</label>
-          <select id="localeSelect">
-            <option value="">English</option>
-            <option value="cs">Czech</option>
-            <option value="de">German</option>
-            <option value="es">Spanish</option>
-            <option value="fr">French</option>
-            <option value="it">Italian</option>
-            <option value="ja">Japanese</option>
-            <option value="ko">Korean</option>
-            <option value="pl">Polish</option>
-            <option value="pt-br">Portuguese (Brazil)</option>
-            <option value="qps-ploc">Pseudo Language</option>
-            <option value="ru">Russian</option>
-            <option value="tr">Turkish</option>
-            <option value="zh-hans">Chinese (Simplified)</option>
-            <option value="zh-hant">Chinese (Traditional)</option>
-          </select>
+            <button id="run">Run with debugger</button>
+            <button id="filesystem">Attach filesystem</button>
+            <button id="customEditorPanel">Open custom editor panel</button>
+            <button id="clearStorage">Clear user data</button>
+            <br />
+            <button id="togglePanel">Toggle Panel</button>
+            <button id="toggleAuxiliary">Toggle Secondary Panel</button>
+            <br />
+            <label for="localeSelect">Language:</label>
+            <select id="localeSelect">
+              <option value="">English</option>
+              <option value="cs">Czech</option>
+              <option value="de">German</option>
+              <option value="es">Spanish</option>
+              <option value="fr">French</option>
+              <option value="it">Italian</option>
+              <option value="ja">Japanese</option>
+              <option value="ko">Korean</option>
+              <option value="pl">Polish</option>
+              <option value="pt-br">Portuguese (Brazil)</option>
+              <option value="qps-ploc">Pseudo Language</option>
+              <option value="ru">Russian</option>
+              <option value="tr">Turkish</option>
+              <option value="zh-hans">Chinese (Simplified)</option>
+              <option value="zh-hant">Chinese (Traditional)</option>
+            </select>
+          </div>
+          <div style="display: flex; flex: none; border: 1px solid var(--vscode-editorWidget-border);">
+            <div id="sidebar-right" style="max-width: 500px"></div>
+            <div id="activityBar-right"></div>
+            <div id="auxiliaryBar" style="max-width: 300px"></div>
+          </div>
         </div>
-        <div style="border: 1px solid var(--vscode-editorWidget-border); width: 300px" id="auxiliaryBar"></div>
-      </div>
 
-      <div id="panel"></div>
+        <div id="panel"></div>
 
-      <div id="statusBar"></div>
+        <div id="statusBar"></div>
+      </div>
 
-      <h1>Settings</h1>
+      <h1>Settings<span id="settings-dirty">●</span></h1>
       <button id="settingsui">Open settings UI</button>
       <button id="resetsettings">Reset settings</button>
       <div id="settings-editor" class="standalone-editor"></div>
-      <h1>Keybindings</h1>
+      <h1>Keybindings<span id="keybindings-dirty">●</span></h1>
       <button id="keybindingsui">Open keybindings UI</button>
       <button id="resetkeybindings">Reset keybindings</button>
       <div id="keybindings-editor" class="standalone-editor"></div>