enso-org · PabloBuchu · Jul 18, 2023 · May 9, 2023 · May 15, 2023 · May 25, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -197,6 +197,9 @@
   visualization size by dragging its right and bottom borders. Visualization
   width also follows the node's width, and visualizations are aligned to the
   left side of the node.
+- [Help chat][7151]. The link to the Discord server is replaced with a chat
+  bridge to the Discord server. This is intended to have the chat visible at the
+  same time as the IDE, so that help can be much more interactive.
 
 [5910]: https://github.com/enso-org/enso/pull/5910
 [6279]: https://github.com/enso-org/enso/pull/6279
@@ -215,6 +218,7 @@
 [7028]: https://github.com/enso-org/enso/pull/7028
 [7014]: https://github.com/enso-org/enso/pull/7014
 [7146]: https://github.com/enso-org/enso/pull/7146
+[7151]: https://github.com/enso-org/enso/pull/7151
 [7164]: https://github.com/enso-org/enso/pull/7164
 
 #### EnsoGL (rendering engine)

@@ -40,7 +40,7 @@ const STRING_LITERAL = ':matches(Literal[raw=/^["\']/], TemplateLiteral)'
 const JSX = ':matches(JSXElement, JSXFragment)'
 const NOT_PASCAL_CASE = '/^(?!_?([A-Z][a-z0-9]*)+$)/'
 const NOT_CAMEL_CASE = '/^(?!_?[a-z][a-z0-9*]*([A-Z0-9][a-z0-9]*)*$)(?!React$)/'
-const WHITELISTED_CONSTANTS = 'logger|.+Context'
+const WHITELISTED_CONSTANTS = 'logger|.+Context|interpolationFunction.+'
 const NOT_CONSTANT_CASE = `/^(?!${WHITELISTED_CONSTANTS}$|_?[A-Z][A-Z0-9]*(_[A-Z0-9]+)*$)/`
 
 // =======================================

@@ -38,10 +38,16 @@
     <link rel="stylesheet" href="/docsStyle.css" />
     <script type="module" src="/index.js" defer></script>
     <script type="module" src="/run.js" defer></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@twemoji/[email protected]/dist/twemoji.min.js"
+      integrity="sha384-D6GSzpW7fMH86ilu73eB95ipkfeXcMPoOGVst/L04yqSSe+RTUY0jXcuEIZk0wrT"
+      crossorigin="anonymous"
+    ></script>
   </head>
   <body>
     <div id="enso-dashboard" class="enso-dashboard"></div>
     <div id="root"></div>
+    <div id="enso-chat" class="enso-chat"></div>
     <noscript>
       This page requires JavaScript to run. Please enable it in your browser.
     </noscript>

@@ -26,6 +26,7 @@
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "@typescript-eslint/parser": "^5.49.0",
     "enso-authentication": "^1.0.0",
+    "enso-chat": "git://github.com/enso-org/enso-bot#wip/sb/initial-implementation",
     "enso-content": "^1.0.0",
     "eslint": "^8.32.0",
     "eslint-plugin-jsdoc": "^39.6.8",

@@ -0,0 +1,171 @@
+/** @file Functions to manually animate values over time.
+ * This is useful if the values need to be known before paint.
+ *
+ * See MDN for information on the easing functions defined in this module:
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function */
+import * as react from 'react'
+
+// =================
+// === Constants ===
+// =================
+/** The number of times the segment from 0 to 1 will be bisected to find the x-value for
+ * a cubic bezier curve. */
+const CUBIC_BEZIER_BISECTIONS = 10
+
+/** Accepts a parameter containing the actual progress as a fraction between 0 and 1 inclusive,
+ * and returns the fraction. */
+export type InterpolationFunction = (progress: number) => number
+
+/** Interpolates between two values over time */
+export function useInterpolateOverTime(
+    interpolationFunction: InterpolationFunction,
+    durationMs: number,
+    initialValue = 0
+): [value: number, setTargetValue: react.Dispatch<react.SetStateAction<number>>] {
+    const [value, setValue] = react.useState(initialValue)
+    const [startValue, setStartValue] = react.useState(initialValue)
+    const [endValue, setEndValue] = react.useState(initialValue)
+
+    react.useEffect(() => {
+        setStartValue(value)
+        const startTime = Number(new Date())
+        let isRunning = true
+        const onTick = () => {
+            const fraction = Math.min((Number(new Date()) - startTime) / durationMs, 1)
+            if (isRunning && fraction < 1) {
+                setValue(startValue + (endValue - startValue) * interpolationFunction(fraction))
+                requestAnimationFrame(onTick)
+            } else {
+                setValue(endValue)
+                setStartValue(endValue)
+            }
+        }
+        requestAnimationFrame(onTick)
+        return () => {
+            isRunning = false
+        }
+    }, [endValue])
+
+    return [value, setEndValue]
+}
+
+/** Equivalent to the CSS easing function `linear(a, b, c, ...)`.
+ *
+ * `interpolationFunctionLinear()` is equivalent to `interpolationFunctionLinear(0, 1)`.
+ *
+ * Does not support percentages to control time spent on a specific line segment, unlike the CSS
+ * `linear(0, 0.25 75%, 1)` */
+export function interpolationFunctionLinear(...points: number[]): InterpolationFunction {
+    if (points.length === 0) {
+        return progress => progress
+    } else {
+        const length = points.length
+        return progress => {
+            const effectiveIndex = progress * length
+            // The following are guaranteed to be non-null, as `progress` is guaranteed
+            // to be between 0 and 1.
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const start = points[Math.floor(effectiveIndex)]!
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const end = points[Math.ceil(effectiveIndex)]!
+            const progressThroughEffectiveIndex = effectiveIndex % 1
+            return (end - start) * progressThroughEffectiveIndex
+        }
+    }
+}
+
+/** Defines a cubic Bézier curve with control points `(0, 0)`, `(x1, y1)`, `(x2, y2)`,
+ * and `(1, 1)`.
+ *
+ * Equivalent to the CSS easing function `cubic-bezier(x1, y1, x2, y2)` */
+export function interpolationFunctionCubicBezier(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number
+): InterpolationFunction {
+    return progress => {
+        let minimum = 0
+        let maximum = 1
+        for (let i = 0; i < CUBIC_BEZIER_BISECTIONS; ++i) {
+            const t = (minimum + maximum) / 2
+            const u = 1 - t
+            // See here for the source of the explicit form:
+            // https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B%C3%A9zier_curves
+            // `x0 = 0` and `x3 = 1` have been substituted in.
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+            const estimatedProgress = 3 * u * t * (u * x1 + t * x2) + t * t * t
+            if (estimatedProgress > progress) {
+                maximum = t
+            } else {
+                minimum = t
+            }
+        }
+        const t = (minimum + maximum) / 2
+        const u = 1 - t
+        // Uses the same formula as above, but calculating `y` instead of `x`.
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        return 3 * u * t * (u * y1 + t * y2) + t * t * t
+    }
+}
+
+// Magic numbers are allowable as these definitions are taken straight from the spec.
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+/** Equivalent to the CSS easing function `ease`, which is itself equivalent to
+ * `cubic-bezier(0.25, 0.1, 0.25, 1.0)`. */
+export const interpolationFunctionEase = interpolationFunctionCubicBezier(0.25, 0.1, 0.25, 1.0)
+
+/** Equivalent to the CSS easing function `ease-in`, which is itself equivalent to
+ * `cubic-bezier(0.42, 0.0, 1.0, 1.0)`. */
+export const interpolationFunctionEaseIn = interpolationFunctionCubicBezier(0.42, 0.0, 1.0, 1.0)
+
+/** Equivalent to the CSS easing function `ease-in-out`, which is itself equivalent to
+ * `cubic-bezier(0.42, 0.0, 0.58, 1.0)`. */
+export const interpolationFunctionEaseInOut = interpolationFunctionCubicBezier(0.42, 0.0, 0.58, 1.0)
+
+/** Equivalent to the CSS easing function `ease-out`, which is itself equivalent to
+ * `cubic-bezier(0.0, 0.0, 0.58, 1.0)`. */
+export const interpolationFunctionEaseOut = interpolationFunctionCubicBezier(0.0, 0.0, 0.58, 1.0)
+
+/* eslint-enable @typescript-eslint/no-magic-numbers */
+
+/** Determines which sides should have a "jump" - a step that lasts for zero time, effectively
+ * making the anmiation skip that end point. */
+export enum StepJumpSides {
+    start = 'jump-start',
+    end = 'jump-end',
+    both = 'jump-both',
+    none = 'jump-none',
+}
+
+/** Equivalent to the CSS easing function `steps(stepCount, jumpSides)`. */
+export function interpolationFunctionSteps(
+    stepCount: number,
+    jumpSides: StepJumpSides
+): InterpolationFunction {
+    switch (jumpSides) {
+        case StepJumpSides.start: {
+            return progress => Math.ceil(progress * stepCount) / stepCount
+        }
+        case StepJumpSides.end: {
+            return progress => Math.floor(progress * stepCount) / stepCount
+        }
+        case StepJumpSides.both: {
+            const stepCountPlusOne = stepCount + 1
+            return progress => Math.ceil(progress * stepCount) / stepCountPlusOne
+        }
+        case StepJumpSides.none: {
+            const stepCountMinusOne = stepCount - 1
+            return progress => Math.min(1, Math.floor(progress * stepCount) / stepCountMinusOne)
+        }
+    }
+}
+
+/** Equivalent to the CSS easing function `step-start`, which is itself equivalent to
+ * `steps(1, jump-start)`. */
+export const interpolationFunctionStepStart = interpolationFunctionSteps(1, StepJumpSides.start)
+
+/** Equivalent to the CSS easing function `step-end`, which is itself equivalent to
+ * `steps(1, jump-end)`. */
+export const interpolationFunctionStepEnd = interpolationFunctionSteps(1, StepJumpSides.end)
@@ -30,19 +30,33 @@ const API_URLS = {
     production: newtype.asNewtype<ApiUrl>('https://7aqkn3tnbc.execute-api.eu-west-1.amazonaws.com'),
 }
 
+/**
+ * All possible Help Chat endpoint URLs, sorted by environment.
+ *
+ * In development mode, the chat bot will need to be run locally:
+ * https://github.com/enso-org/enso-bot */
+const CHAT_URLS = {
+    development: newtype.asNewtype<ChatUrl>('ws://localhost:8082'),
+    // TODO[sb]: Insert the actual URL of the production chat bot here.
+    production: newtype.asNewtype<ChatUrl>('wss://chat.cloud.enso.org'),
+}
+
 /** All possible configuration options, sorted by environment. */
 const CONFIGS = {
     npekin: {
         cloudRedirect: CLOUD_REDIRECTS.development,
         apiUrl: API_URLS.npekin,
+        chatUrl: CHAT_URLS.development,
     } satisfies Config,
     pbuchu: {
         cloudRedirect: CLOUD_REDIRECTS.development,
         apiUrl: API_URLS.pbuchu,
+        chatUrl: CHAT_URLS.development,
     } satisfies Config,
     production: {
         cloudRedirect: CLOUD_REDIRECTS.production,
         apiUrl: API_URLS.production,
+        chatUrl: CHAT_URLS.production,
     } satisfies Config,
 }
 /** Export the configuration that is currently in use. */
@@ -54,10 +68,14 @@ export const ACTIVE_CONFIG: Config = CONFIGS[ENVIRONMENT]
 
 /** Interface defining the configuration options that we expect to provide for the Dashboard. */
 export interface Config {
-    /** URL used as the OAuth redirect when running in the cloud app. */
+    /** URL of the OAuth redirect when running in the cloud app.
+     *
+     * The desktop app redirects to a static deep link, so it does not have to be configured. */
     cloudRedirect: auth.OAuthRedirect
-    /** URL used as the base URL for requests to our Cloud API backend. */
+    /** Base URL for requests to our Cloud API backend. */
     apiUrl: ApiUrl
+    /** URL to the websocket endpoint of the Help Chat. */
+    chatUrl: ChatUrl
 }
 
 // ===================
@@ -73,4 +91,7 @@ export type Environment = 'npekin' | 'pbuchu' | 'production'
 // ===========
 
 /** Base URL for requests to our Cloud API backend. */
-type ApiUrl = newtype.Newtype<string, 'ApiUrl'>
+type ApiUrl = newtype.Newtype<`http://${string}` | `https://${string}`, 'ApiUrl'>
+
+/** URL to the websocket endpoint of the Help Chat. */
+type ChatUrl = newtype.Newtype<`ws://${string}` | `wss://${string}`, 'ChatUrl'>