Merge pull request #509 from live-codes/develop

release v23

CHANGELOG.md

@@ -4,6 +4,32 @@ All notable changes to this project will be documented in this file. See [standa
 
 ---
 
+## [v23](https://github.com/live-codes/livecodes/compare/v22...v23) (2024-02-15)
+
+This release allows using the AI code assistant without browser extension, with no account or API token required, totally for free, by just flipping a switch! (Powered by [codeium](https://codeium.com))
+
+The AI code assistant can be enabled from [editor settings](https://livecodes.io?screen=editor-settings).
+Also the new config property [`enableAI`](https://livecodes.io/docs/configuration/configuration-object#enableai) allows enabling it using the SDK.
+
+In addition, new monochrome (light and dark) editor themes and the font [Astigmata](https://medium.com/codex/astigmata-my-monospace-programming-font-b28ccfa9b025) have been added.
+
+### Bug Fixes
+
+- **UI:** fix theme switch status ([ce0fe2c](https://github.com/live-codes/livecodes/commit/ce0fe2c8a6c45571c8175f92760ac0069c3257e3))
+
+### Features
+
+- **App:** AI code assistant with no accounts or browser extensions ([39916cf](https://github.com/live-codes/livecodes/commit/39916cf4fcf65374bc8cf70536d64a69e7dec4c2))
+- **UI:** allow enabling/disabling AI from UI (editor settings screen) ([c422ded](https://github.com/live-codes/livecodes/commit/c422dedc05347040df68f3fc6edecaf144dc5a56))
+- **Editor:** add Astigmata font ([39cd99b](https://github.com/live-codes/livecodes/commit/39cd99b28bad8c35e4367df18551295e8bf1fc78))
+- **Editor:** add monochrome prism themes ([0a507d1](https://github.com/live-codes/livecodes/commit/0a507d1013b6c9f1c25bc831f7885c1abbd95ade))
+- **Editor:** add monochrome themes for codemirror ([3ad8b37](https://github.com/live-codes/livecodes/commit/3ad8b3719c2a62696c59af45881f0f5c2ff3ba8e))
+- **Editor:** add monochrome themes for monaco ([876294a](https://github.com/live-codes/livecodes/commit/876294ad6d9852fd52903474471b72eeed492545))
+- **Editor:** use AI context from content of multiple editors ([e2066c5](https://github.com/live-codes/livecodes/commit/e2066c51517b25e2312c2e4800e289e8b9a43678))
+- **Result:** load stylesheets in importmap ([b943274](https://github.com/live-codes/livecodes/commit/b943274ec0e0990d856d45d5c29886f7e76ef311))
+
+---
+
 ## [v22](https://github.com/live-codes/livecodes/compare/v21...v22) (2024-02-03)
 
 Add more docs, including for the [Preview in LiveCodes](https://github.com/live-codes/preview-in-livecodes) GitHub action.

README.md

@@ -149,11 +149,6 @@ LiveCodes uses services that are generously provided by:
 </img></a><br /><br />
 </p>
 <p>
-<a href="https://jspm.org/" target="_blank" title="JSPM">
-  <img alt="JSPM" width="200" src="https://dev.livecodes.io/docs/img/credits/jspm.png">
-</img></a><br /><br />
-</p>
-<p>
 <a href="https://esm.sh/" target="_blank" title="esm.sh">
   <img alt="esm.sh" width="200" src="https://dev.livecodes.io/docs/img/credits/esm.sh.png">
 </img></a><br /><br />
@@ -164,8 +159,8 @@ LiveCodes uses services that are generously provided by:
 </img></a><br /><br />
 </p>
 <p>
-<a href="https://github.com/" target="_blank" title="GitHub">
-  <img alt="GitHub" width="200" src="https://dev.livecodes.io/docs/img/credits/github.png">
+<a href="https://codeium.com/" target="_blank" title="Codeium">
+  <img alt="Codeium" width="200" src="https://dev.livecodes.io/docs/img/credits/codeium.svg">
 </img></a><br /><br />
 </p>
 <p>
@@ -174,6 +169,16 @@ LiveCodes uses services that are generously provided by:
 </img></a><br /><br />
 </p>
 <p>
+<a href="https://dpaste.com/" target="_blank" title="dpaste">
+  <img alt="dpaste" width="200" src="https://dev.livecodes.io/docs/img/credits/dpaste.png">
+</img></a><br /><br />
+</p>
+<p>
+<a href="https://github.com/" target="_blank" title="GitHub">
+  <img alt="GitHub" width="200" src="https://dev.livecodes.io/docs/img/credits/github.png">
+</img></a><br /><br />
+</p>
+<p>
 <a href="https://www.sonarsource.com/products/sonarcloud/" target="_blank" title="SonarCloud">
   <img alt="SonarCloud" width="200" src="https://dev.livecodes.io/docs/img/credits/sonarcloud.svg">
 </img></a><br /><br />
@@ -189,11 +194,6 @@ LiveCodes uses services that are generously provided by:
 </img></a><br /><br />
 </p>
 <p>
-<a href="https://dpaste.com/" target="_blank" title="dpaste">
-  <img alt="dpaste" width="200" src="https://dev.livecodes.io/docs/img/credits/dpaste.png">
-</img></a><br /><br />
-</p>
-<p>
 <a href="https://www.browserstack.com/" target="_blank" title="BrowserStack">
   <img alt="BrowserStack" width="200" src="https://dev.livecodes.io/docs/img/credits/browserstack.svg">
 </img></a><br /><br />

docs/docs/configuration/configuration-object.md

@@ -414,6 +414,14 @@ Sets result page [zoom level](../features/result.md#result-page-zoom).
 
 These are properties that define the [user settings](./../features/user-settings.md), including [editor settings](../features/editor-settings.md).
 
+### `enableAI`
+
+Type: [`boolean`](../api/interfaces/Config.md#enableai)
+
+Default: `false`
+
+If `true`, [AI code assistant](../features/ai.md) is enabled.
+
 ### `autoupdate`
 
 Type: [`boolean`](../api/interfaces/Config.md#autoupdate)

docs/docs/credits.md

@@ -15,11 +15,6 @@ LiveCodes uses services that are generously provided by:
 </img></a>
 </p>
 <p>
-<a href="https://jspm.org/" target="_blank" title="JSPM">
-  <img alt="JSPM" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/jspm.png">
-</img></a>
-</p>
-<p>
 <a href="https://esm.sh/" target="_blank" title="esm.sh">
   <img alt="esm.sh" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/esm.sh.png">
 </img></a>
@@ -30,8 +25,8 @@ LiveCodes uses services that are generously provided by:
 </img></a>
 </p>
 <p>
-<a href="https://github.com/" target="_blank" title="GitHub">
-  <img alt="GitHub" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/github.png">
+<a href="https://codeium.com/" target="_blank" title="Codeium">
+  <img alt="Codeium" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/codeium.svg">
 </img></a>
 </p>
 <p>
@@ -40,6 +35,16 @@ LiveCodes uses services that are generously provided by:
 </img></a>
 </p>
 <p>
+<a href="https://dpaste.com/" target="_blank" title="dpaste">
+  <img alt="dpaste" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/dpaste.png">
+</img></a>
+</p>
+<p>
+<a href="https://github.com/" target="_blank" title="GitHub">
+  <img alt="GitHub" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/github.png">
+</img></a>
+</p>
+<p>
 <a href="https://www.sonarsource.com/products/sonarcloud/" target="_blank" title="SonarCloud">
   <img alt="SonarCloud" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/sonarcloud.svg">
 </img></a>
@@ -55,11 +60,6 @@ LiveCodes uses services that are generously provided by:
 </img></a>
 </p>
 <p>
-<a href="https://dpaste.com/" target="_blank" title="dpaste">
-  <img alt="dpaste" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/dpaste.png">
-</img></a>
-</p>
-<p>
 <a href="https://www.browserstack.com/" target="_blank" title="BrowserStack">
   <img alt="BrowserStack" width="200" style={{margin: "0.5em"}} src="/docs/img/credits/browserstack.svg">
 </img></a>

docs/docs/features/ai.md

@@ -1,11 +1,17 @@
 # AI Code Assistant 🪄
 
-LiveCodes supports AI-powered code completion, totally for **free**, using [Codeium](https://codeium.com/), the ultrafast Copilot alternative.
+LiveCodes supports AI-powered code completion, totally for **free** with **no account or API token required**, using [Codeium](https://codeium.com/), the ultrafast Copilot alternative. This can be easily enabled from the UI (as easy as [flipping a switch](#ui)!)
 
-The large generative machine learning model is capable of understanding the context of your code and comments in order to generate suggestions on what you might want to type next.
+The large generative machine learning model is capable of understanding the context of your code and comments (across the [3 code editors](./projects#markup-editor)) in order to generate suggestions on what you might want to type next.
 
 It has a wide range of language support, and it works everywhere (in the [standalone app](../getting-started.md#standalone-app), [embedded playgrounds](./embeds.md) and [self-hosted](./self-hosting.md) apps).
 
+Currently, only [Monaco editor](./editor-settings.md#code-editor) is supported. Wider editor support is planned.
+
+Powered by:
+
+<a href="https://codeium.com/"><img width="300px" src="/docs/img/credits/codeium.svg" alt="Codeium logo"/></a>.
+
 ## Examples:
 
 JavaScript:
@@ -24,34 +30,43 @@ Python:
 
 ## Instructions
 
-1. Install [Codeium chrome extension](https://codeium.com/chrome_tutorial).
-2. Login to Codeium.
-3. Enjoy the magic!
+The AI code assistant can be enabled from:
 
-Currently, only [Monaco editor](./editor-settings.md#code-editor) on desktop Chrome browser is supported. Wider editor and browser support is planned.
+### UI
 
-:::caution Note
+The [editor settings](./editor-settings.md) screen (App menu → Editor Settings → Enable AI Code Assistant).
 
-Please note that codeium extension sends your code to their servers for code completion. However, your code is not used for training their model. Check codeium [FAQ](https://codeium.com/faq#Will-Codeium-regurgitate-private-code%3F) and [privacy policy](https://codeium.com/privacy-policy) for more details.
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
 
-:::
+<RunInLiveCodes params={{screen: 'editor-settings'}} linkText="direct link" />
+
+![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-1.png)
+
+**Note**
 
-## Disabling AI Code Assistant
+When set from the UI, this configuration is saved locally to [user settings](./user-settings.md) and is remembered across sessions.
 
-Obviously, if you want to disable the AI code completion on your device, just disable the browser extension.
+### Configuration
 
-However, if you want to prevent users from using AI code completion in playgrounds that you embed in your webpages (e.g. for code challenges or exercises), you may achieve that by adding the [query parameter](../configuration/query-params.md) `disableAI` (e.g. https://livecodes.io/?disableAI).
+Alternatively, this can be enabled (_only for the current session_) using the [`enableAI`](../configuration/configuration-object.md#enableai) property in the [configuration object](../configuration/configuration-object.md). This can be used to enable the AI code assistant in [embedded playgrounds](./embeds.md).
 
 Example:
 
 ```js
 import { createPlayground } from 'livecodes';
 
 createPlayground('#container', {
-  params: {
-    html: '<h1>Hello LiveCodes!</h1>',
+  config: {
     // highlight-next-line
-    disableAI: true,
+    enableAI: true,
   },
 });
 ```
+
+Also this can be enabled using [query params](../configuration/query-params.md) (e.g. https://livecodes.io/?enableAI).
+
+:::caution Note
+
+Please note that when using Codeium AI assistant, your code is sent to their servers for code completion. However, your code is not used for training their model. Check Codeium [FAQ](https://codeium.com/faq#Will-Codeium-regurgitate-private-code%3F) and [privacy policy](https://codeium.com/privacy-policy) for more details.
+
+:::

docs/docs/features/assets.md

@@ -8,6 +8,10 @@ In addition, assets are supported in [sync](./sync.md), [backup](./backup-restor
 
 The `Assets` screen can be accessed from app menu → Assets
 
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+<RunInLiveCodes params={{screen: 'assets'}} linkText="direct link" />
+
 Assets are either:
 
 - Encoded as [data URLs](./data-urls.md).

docs/docs/features/backup-restore.md

@@ -4,6 +4,10 @@ LiveCodes data can be backed-up, so that it can be later restored on the same or
 
 The Backup/Restore screen can be accessed from the app menu → Backup / Restore.
 
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+<RunInLiveCodes params={{screen: 'backup'}} linkText="direct link" />
+
 ## Backup
 
 ![LiveCode Backup](../../static/img/screenshots/backup.jpg)

docs/docs/features/broadcast.md

@@ -10,7 +10,11 @@ Broadcast can only be performed from the full app, and not from embedded playgro
 
 :::
 
-The `Broadcast` screen can be accessed from the app menu → Broadcast, or from the Broadcast icon in the [tools pane](./tools-pane.md) (below the result page).
+The `Broadcast` screen can be accessed from the Broadcast icon in the [tools pane](./tools-pane.md) (below the result page), or from the app menu → Broadcast.
+
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+<RunInLiveCodes params={{screen: 'broadcast'}} linkText="direct link" />
 
 ![Broadcast UI](./../../static/img/screenshots/broadcast.jpg)
 

docs/docs/features/deploy.md

@@ -4,6 +4,10 @@ The result page (of any number of projects) can be deployed and hosted at [GitHu
 
 The `Deploy` screen can be accessed from the app menu → Deploy.
 
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+<RunInLiveCodes params={{screen: 'deploy'}} linkText="direct link" />
+
 ![LiveCodes Deploy](../../static/img/screenshots/deploy.jpg)
 
 The result page (and optionally the source code) is pushed to `gh-pages` branch of a **public** GitHub repo (new or existing). The page, shortly, becomes available on `https://{user}.github.io/{repo}/`.

docs/docs/features/editor-settings.md

@@ -4,14 +4,24 @@ LiveCodes allows a lot of flexibility for configuring which code editor to use a
 
 `Editor Settings` screen can be accessed from app menu → Editor Settings.
 
-![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings.jpg)
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
 
-![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings2.jpg)
+<RunInLiveCodes params={{screen: 'editor-settings'}} linkText="direct link" />
+
+![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-1.png)
+
+![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-2.png)
+
+![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-3.png)
 
 A preview code editor is displayed to preview the settings in real time.
 
 The settings selected in the `Editor Settings` screen are saved locally to [user settings](./user-settings.md) and are used subsequently. These include:
 
+### Enable AI Code Assistant
+
+Enables the [AI code assistant](./ai.md). (Free and no account required)
+
 ### Code Editor
 
 The following code editors are supported:

docs/docs/features/embeds.md

@@ -18,6 +18,10 @@ The embedding web page can communicate with the playground using a powerful [SDK
 
 In the [standalone app](../getting-started.md#standalone-app), the Embed Screen can be accessed from app menu → Embed.
 
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+<RunInLiveCodes params={{screen: 'embed'}} linkText="direct link" />
+
 It shows a preview of the embedded playground, allows customizations of [embed options](../sdk/js-ts.md#embed-options) and provides generated code that can be added to the web page that will embed the playground.
 
 ![LiveCodes embed](../../static/img/screenshots/embed1.png)

docs/docs/features/external-resources.md

@@ -4,6 +4,10 @@
 
 URLs to external CSS stylesheets and JS scripts can be added to the page from the UI using the app menu → External Resources. In addition, there is a button to the External Resources in the toolbar below the editors.
 
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+<RunInLiveCodes params={{screen: 'resources'}} linkText="direct link" />
+
 URLs to stylesheets/scripts should be added each in a separate line.
 
 Stylesheets and scripts are loaded in the [result page](./result.md) before editor codes. Thus, CSS properties defined in external stylesheets can be overriden in the style editor. Global javascript variables defined in external scripts are available to code in the script editor.

docs/docs/features/import.md

@@ -6,6 +6,10 @@ LiveCodes supports importing code from a wide variety of sources.
 
 The Import screen can be accessed from the app menu → Import.
 
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+<RunInLiveCodes params={{screen: 'import'}} linkText="direct link" />
+
 ![LiveCodes Import](../../static/img/screenshots/import.jpg)
 
 Alternatively, a URL of any of the sources can be imported on-load by adding it as a value to [query param](../configuration/query-params.md) key: `x`. This is easier using the [bookmarklet](../bookmarklet.md).

docs/docs/features/share.md

@@ -4,7 +4,7 @@ It is easy to share LiveCodes projects!
 
 A URL is generated to load the shared project. This URL can be copied or shared to different social media.
 
-The share screen can be accessed from app menu → Share.
+The share screen can be accessed from the share icon at the top right or from the app menu → Share.
 
 ![LiveCodes Share](../../static/img/screenshots/share.jpg)
 

docs/docs/features/snippets.md

@@ -6,6 +6,10 @@ Code snippets are saved locally on user's device. However, they are supported in
 
 Code snippets screen can be accessed from app menu → Code Snippets.
 
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+<RunInLiveCodes params={{screen: 'snippets'}} linkText="direct link" />
+
 Each snippet has a title, description, language and code.
 
 ![Code Snippets](../../static/img/screenshots/add-snippet.png)

docs/docs/features/sync.md

@@ -6,6 +6,10 @@ A GitHub account is required. The user must give access to [(Private Repos) whil
 
 The Sync screen can be accessed from the app menu → Sync.
 
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+<RunInLiveCodes params={{screen: 'sync'}} linkText="direct link" />
+
 ![LiveCodes Sync](../../static/img/screenshots/sync.png)
 
 Data can be synchronized to a new (**private**) or existing repo.