@atlaskit/editor-plugin-autocomplete 2.1.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-autocomplete
 
+## 2.3.0
+
+### Minor Changes
+
+- [`975a31aae73f4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/975a31aae73f4) -
+  Add KSS attributes to contextual typeahead acceptance analytics
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.2.0
+
+### Minor Changes
+
+- [`6eb5747f5ba37`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6eb5747f5ba37) -
+  Add SAR analytics for autocomplete plugin
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -1,7 +1,6 @@
 {
 	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
-		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-plugin-autocomplete",
 		"rootDir": "../",
 		"composite": true,
@@ -25,6 +24,9 @@
 		},
 		{
 			"path": "../../editor-common/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-analytics/afm-cc/tsconfig.json"
 		}
 	]
 }

package/afm-products/tsconfig.json

@@ -1,7 +1,6 @@
 {
 	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
-		"target": "es5",
 		"outDir": "../../../../../tsDist/@atlaskit__editor-plugin-autocomplete/app",
 		"rootDir": "../",
 		"composite": true,
@@ -25,6 +24,9 @@
 		},
 		{
 			"path": "../../editor-common/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-analytics/afm-products/tsconfig.json"
 		}
 	]
 }

package/build/tsconfig.json

@@ -1,7 +1,6 @@
 {
 	"extends": "../tsconfig",
 	"compilerOptions": {
-		"paths": {},
 		"resolveJsonModule": true
 	},
 	"include": ["../src/**/*.ts", "../src/**/*.tsx"],

package/dist/cjs/autocompletePlugin.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.autocompletePlugin = void 0;
 var _autocompletePlugin = require("./pm-plugins/autocomplete-plugin");
 var autocompletePlugin = exports.autocompletePlugin = function autocompletePlugin(_ref) {
-  var options = _ref.config;
+  var options = _ref.config,
+    api = _ref.api;
   return {
     name: 'autocomplete',
     getSharedState: function getSharedState(editorState) {
@@ -19,7 +20,7 @@ var autocompletePlugin = exports.autocompletePlugin = function autocompletePlugi
       return [{
         name: 'autocomplete',
         plugin: function plugin() {
-          return (0, _autocompletePlugin.createAutocompletePlugin)(options);
+          return (0, _autocompletePlugin.createAutocompletePlugin)(options, api);
         }
       }];
     }

package/dist/cjs/pm-plugins/autocomplete-plugin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createAutocompletePlugin = exports.autocompletePluginKey = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -68,6 +69,7 @@ var setAutocompleteMeta = function setAutocompleteMeta(tr, meta) {
 /**
  * Apply a ghost text suggestion to the editor state.
  */
+var lastShownGhostText = '';
 var showGhostText = function showGhostText(view, text, position) {
   var state = view.state,
     dispatch = view.dispatch;
@@ -146,7 +148,17 @@ var buildSlowLaneText = function buildSlowLaneText(docText, context) {
   lines.push("reply ".concat(nextReplyNumber, ": ").concat(docText));
   return lines.join('\n');
 };
-var createAutocompletePlugin = exports.createAutocompletePlugin = function createAutocompletePlugin(options) {
+var getTypedLengthForPrediction = function getTypedLengthForPrediction(textBefore) {
+  var _textBefore$match$, _textBefore$match;
+  if ((0, _slowLaneClient.isWordBoundary)(textBefore)) {
+    return 0;
+  }
+
+  // eslint-disable-next-line require-unicode-regexp
+  var trailingToken = (_textBefore$match$ = (_textBefore$match = textBefore.match(/([^\s.,;:!?]*)$/)) === null || _textBefore$match === void 0 ? void 0 : _textBefore$match[1]) !== null && _textBefore$match$ !== void 0 ? _textBefore$match$ : '';
+  return trailingToken.length;
+};
+var createAutocompletePlugin = exports.createAutocompletePlugin = function createAutocompletePlugin(options, api) {
   var debounceTimer = null;
   var hasIngestedPage = false;
   var resolvedContext;
@@ -163,6 +175,24 @@ var createAutocompletePlugin = exports.createAutocompletePlugin = function creat
    * re-showing the same suggestion. Resets to null as soon as the text changes.
    */
   var dismissedContext = null;
+  var lastSuggestionTypedLength = 0;
+  var lastSuggestionLength = 0;
+  var fireSuggestionInsertedAnalytics = function fireSuggestionInsertedAnalytics(ghostText) {
+    var _api$analytics;
+    var typedLength = lastSuggestionTypedLength;
+    var suggestionLength = lastSuggestionLength || typedLength + ghostText.length;
+    var kssDelta = suggestionLength - typedLength;
+    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+      action: _analytics.ACTION.SUGGESTION_INSERTED,
+      actionSubject: _analytics.ACTION_SUBJECT.CONTEXTUAL_TYPEAHEAD,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        suggestionLength: suggestionLength,
+        typedLength: typedLength,
+        kssDelta: kssDelta
+      }
+    });
+  };
   var slowLaneClient = (0, _slowLaneClient.createSlowLaneClient)({
     baseUrl: '',
     endpoint: SLOW_LANE_ENDPOINT
@@ -203,7 +233,19 @@ var createAutocompletePlugin = exports.createAutocompletePlugin = function creat
       // Tier 1 prediction is synchronous -- no async needed
       var prediction = (0, _textPredictor.predict)(textBefore);
       if (prediction && prediction.length > 0) {
+        var typedLength = getTypedLengthForPrediction(textBefore);
+        lastSuggestionTypedLength = typedLength;
+        lastSuggestionLength = typedLength + prediction.length;
         showGhostText(view, prediction, selection.from);
+        if (prediction !== lastShownGhostText) {
+          var _api$analytics2;
+          lastShownGhostText = prediction;
+          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.fireAnalyticsEvent({
+            action: _analytics.ACTION.SUGGESTION_VIEWED,
+            actionSubject: _analytics.ACTION_SUBJECT.CONTEXTUAL_TYPEAHEAD,
+            eventType: _analytics.EVENT_TYPE.TRACK
+          });
+        }
       }
     }, DEBOUNCE_MS);
   };
@@ -274,13 +316,27 @@ var createAutocompletePlugin = exports.createAutocompletePlugin = function creat
       },
       handleKeyDown: (0, _keymap.keydownHandler)({
         Tab: function Tab(state, dispatch) {
+          var _pluginState$ghostTex;
+          var pluginState = autocompletePluginKey.getState(state);
+          var ghostText = (_pluginState$ghostTex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex !== void 0 ? _pluginState$ghostTex : '';
           var accepted = acceptGhostText(state, dispatch);
-          if (accepted) justAccepted = true;
+          if (accepted) {
+            justAccepted = true;
+            lastShownGhostText = '';
+            fireSuggestionInsertedAnalytics(ghostText);
+          }
           return accepted;
         },
         ArrowRight: function ArrowRight(state, dispatch) {
+          var _pluginState$ghostTex2;
+          var pluginState = autocompletePluginKey.getState(state);
+          var ghostText = (_pluginState$ghostTex2 = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex2 !== void 0 ? _pluginState$ghostTex2 : '';
           var accepted = acceptGhostText(state, dispatch);
-          if (accepted) justAccepted = true;
+          if (accepted) {
+            justAccepted = true;
+            lastShownGhostText = '';
+            fireSuggestionInsertedAnalytics(ghostText);
+          }
           return accepted;
         },
         Escape: function Escape(state, dispatch) {

package/dist/cjs/pm-plugins/debug-mode.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isAutocompleteDebugEnabled = void 0;
+/**
+ * Contextual Typeahead Completions (CTC) debug logging utility.
+ *
+ * Logs are silent by default. To enable in any environment (dev, staging, prod):
+ *
+ *   localStorage.setItem('atl-ctc-dbg', '1')
+ *
+ * Then reload the page. To disable:
+ *
+ *   localStorage.removeItem('atl-ctc-dbg')
+ */
+var isAutocompleteDebugEnabled = exports.isAutocompleteDebugEnabled = function isAutocompleteDebugEnabled() {
+  try {
+    return typeof localStorage !== 'undefined' && localStorage.getItem('atl-ctc-dbg') === '1';
+  } catch (_unused) {
+    return false;
+  }
+};

package/dist/cjs/pm-plugins/slow-lane-client.js

@@ -8,6 +8,7 @@ exports.setDefaultSlowLaneClient = exports.isWordBoundary = exports.getStoredLmL
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _debugMode = require("./debug-mode");
 /**
  * Slow Lane Client: Backend context encoding for autocomplete.
  *
@@ -81,37 +82,41 @@ var createSlowLaneClient = exports.createSlowLaneClient = function createSlowLan
             payload = {
               text: text,
               session_id: sessionId
-            }; // Log the exact payload being sent so the comment/reply structure is visible
-            // eslint-disable-next-line no-console
-            console.groupCollapsed("%c[SlowLane] %c\uD83D\uDCE4 Sending context | ".concat(text.length, " chars"), 'color: #9c27b0; font-weight: bold;', 'color: inherit;');
-            text.split('\n').forEach(function (line, i, arr) {
+            };
+            if ((0, _debugMode.isAutocompleteDebugEnabled)()) {
               // eslint-disable-next-line no-console
-              console.log("  ".concat(i === arr.length - 1 ? '▶' : ' ', " ").concat(line));
-            });
-            // eslint-disable-next-line no-console
-            console.groupEnd();
-            _context.prev = 7;
-            _context.next = 10;
+              console.groupCollapsed("%c[SlowLane] %c\uD83D\uDCE4 Sending context | ".concat(text.length, " chars"), 'color: #9c27b0; font-weight: bold;', 'color: inherit;');
+              text.split('\n').forEach(function (line, i, arr) {
+                // eslint-disable-next-line no-console
+                console.log("  ".concat(i === arr.length - 1 ? '▶' : ' ', " ").concat(line));
+              });
+              // eslint-disable-next-line no-console
+              console.groupEnd();
+            }
+            _context.prev = 5;
+            _context.next = 8;
             return fetchFn(url, {
               method: 'POST',
               headers: headers,
               body: JSON.stringify(payload)
             });
-          case 10:
+          case 8:
             res = _context.sent;
             if (res.ok) {
-              _context.next = 16;
+              _context.next = 14;
               break;
             }
             storedContextVector = null;
             storedLmLogits = null;
-            // eslint-disable-next-line no-console
-            console.log("%c[SlowLane] %c\u274C Request failed (".concat(res.status, ")"), 'color: #9c27b0; font-weight: bold;', 'color: #f44336;');
+            if ((0, _debugMode.isAutocompleteDebugEnabled)()) {
+              // eslint-disable-next-line no-console
+              console.log("%c[SlowLane] %c\u274C Request failed (".concat(res.status, ")"), 'color: #9c27b0; font-weight: bold;', 'color: #f44336;');
+            }
             return _context.abrupt("return");
-          case 16:
-            _context.next = 18;
+          case 14:
+            _context.next = 16;
             return res.json();
-          case 18:
+          case 16:
             data = _context.sent;
             if (data.semantic_vector && Array.isArray(data.semantic_vector)) {
               storedContextVector = new Float32Array(data.semantic_vector);
@@ -123,36 +128,38 @@ var createSlowLaneClient = exports.createSlowLaneClient = function createSlowLan
             } else {
               storedLmLogits = null;
             }
-
-            // Log what came back so it can be correlated with the next prediction group
-            // eslint-disable-next-line no-console
-            console.groupCollapsed("%c[SlowLane] %c\uD83D\uDCE5 Response received", 'color: #9c27b0; font-weight: bold;', 'color: inherit;');
-            // eslint-disable-next-line no-console
-            console.log(storedContextVector ? "\u2705 semantic_vector: ".concat(storedContextVector.length, " dims") : '❌ No semantic_vector');
-            // eslint-disable-next-line no-console
-            console.log(storedLmLogits ? "\u2705 lm_logits: ".concat(Object.keys(storedLmLogits).length, " tokens") : '❌ No lm_logits');
-            // eslint-disable-next-line no-console
-            console.groupEnd();
+            if ((0, _debugMode.isAutocompleteDebugEnabled)()) {
+              // eslint-disable-next-line no-console
+              console.groupCollapsed("%c[SlowLane] %c\uD83D\uDCE5 Response received", 'color: #9c27b0; font-weight: bold;', 'color: inherit;');
+              // eslint-disable-next-line no-console
+              console.log(storedContextVector ? "\u2705 semantic_vector: ".concat(storedContextVector.length, " dims") : '❌ No semantic_vector');
+              // eslint-disable-next-line no-console
+              console.log(storedLmLogits ? "\u2705 lm_logits: ".concat(Object.keys(storedLmLogits).length, " tokens") : '❌ No lm_logits');
+              // eslint-disable-next-line no-console
+              console.groupEnd();
+            }
             onUpdate === null || onUpdate === void 0 || onUpdate({
               textLength: text.length,
               hasVector: storedContextVector !== null,
               hasLmLogits: storedLmLogits !== null
             });
             // eslint-disable-next-line no-unused-vars
-            _context.next = 33;
+            _context.next = 28;
             break;
-          case 28:
-            _context.prev = 28;
-            _context.t0 = _context["catch"](7);
+          case 23:
+            _context.prev = 23;
+            _context.t0 = _context["catch"](5);
             storedContextVector = null;
             storedLmLogits = null;
-            // eslint-disable-next-line no-console
-            console.log('%c[SlowLane] %c❌ Network error — context cleared', 'color: #9c27b0; font-weight: bold;', 'color: #f44336;');
-          case 33:
+            if ((0, _debugMode.isAutocompleteDebugEnabled)()) {
+              // eslint-disable-next-line no-console
+              console.log('%c[SlowLane] %c❌ Network error — context cleared', 'color: #9c27b0; font-weight: bold;', 'color: #f44336;');
+            }
+          case 28:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[7, 28]]);
+      }, _callee, null, [[5, 23]]);
     }));
     return function doUpdateContext(_x) {
       return _ref.apply(this, arguments);

package/dist/cjs/pm-plugins/text-predictor.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setDebugMode = exports.predict = exports.loadVectorsAsync = exports.loadDefaultVocabulary = exports.initVocabulary = exports.initVectors = exports.initL3Vocabulary = exports.ingestDocumentPage = exports.incrementSessionFreq = exports.getPredictorStatus = exports.getLastPredictionDebug = void 0;
+exports.predict = exports.loadVectorsAsync = exports.loadDefaultVocabulary = exports.initVocabulary = exports.initVectors = exports.initL3Vocabulary = exports.ingestDocumentPage = exports.incrementSessionFreq = exports.getPredictorStatus = exports.getLastPredictionDebug = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -14,6 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _l3_vocabulary = _interopRequireDefault(require("./data/l3_vocabulary.json"));
 var _vocabulary_10k = _interopRequireDefault(require("./data/vocabulary_10k.json"));
 var _word_index_10k = _interopRequireDefault(require("./data/word_index_10k.json"));
+var _debugMode = require("./debug-mode");
 var _scoringPipeline = require("./scoring-pipeline");
 var _slowLaneClient = require("./slow-lane-client");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
@@ -226,7 +227,7 @@ var initL3Vocabulary = exports.initL3Vocabulary = function initL3Vocabulary(l3Wo
   } finally {
     _iterator5.f();
   }
-  if (debugMode) {
+  if ((0, _debugMode.isAutocompleteDebugEnabled)()) {
     // eslint-disable-next-line no-console
     console.log("[text-predictor] L3 General English loaded: ".concat(l3Words.length, " words"));
   }
@@ -239,9 +240,7 @@ var initL3Vocabulary = exports.initL3Vocabulary = function initL3Vocabulary(l3Wo
 var isInitialized = false;
 var vectorStore = null;
 var vectorsLoadStarted = false;
-var debugMode = true;
 var lastPredictionDebug = null;
-var hasLoggedSemanticActive = false;
 
 /** Get vector for a word from the store. */
 var getWordVector = function getWordVector(word) {
@@ -347,25 +346,12 @@ var extractPreviousWord = function extractPreviousWord(text) {
 
 // ─── Debug Helpers ───────────────────────────────────────────────────────────
 
-/** Enable or disable debug logging. Also checks localStorage key `autocomplete-debug`. */
-var setDebugMode = exports.setDebugMode = function setDebugMode(enabled) {
-  debugMode = enabled;
-};
-
-/** Check localStorage for autocomplete-debug on first access. */
-var ensureDebugModeFromStorage = function ensureDebugModeFromStorage() {
-  if (typeof localStorage !== 'undefined' && localStorage.getItem('autocomplete-debug') === '1') {
-    debugMode = true;
-  }
-};
-
 /**
  * Get predictor status for debugging.
  * vectorsLoaded: true when semantic scoring is active
  * wordCount: number of words in vector store (0 if not loaded)
  */
 var getPredictorStatus = exports.getPredictorStatus = function getPredictorStatus() {
-  ensureDebugModeFromStorage();
   return {
     vectorsLoaded: vectorStore !== null,
     wordCount: vectorStore ? Object.keys(vectorStore.wordIndex).length : 0,
@@ -379,7 +365,6 @@ var getPredictorStatus = exports.getPredictorStatus = function getPredictorStatu
  * Returns null if no prediction has run yet or debug was off.
  */
 var getLastPredictionDebug = exports.getLastPredictionDebug = function getLastPredictionDebug() {
-  ensureDebugModeFromStorage();
   return lastPredictionDebug;
 };
 var initVocabulary = exports.initVocabulary = function initVocabulary(vocabulary) {
@@ -438,7 +423,7 @@ var ingestDocumentPage = exports.ingestDocumentPage = function ingestDocumentPag
   } finally {
     _iterator9.f();
   }
-  if (debugMode && validBoostedWords.size > 0) {
+  if ((0, _debugMode.isAutocompleteDebugEnabled)() && validBoostedWords.size > 0) {
     // eslint-disable-next-line no-console
     console.groupCollapsed("%c[L1 Session] %cPrimed ".concat(validBoostedWords.size, " valid dictionary words from page"), 'color: #00b8d9; font-weight: bold;', 'color: inherit; font-style: italic;');
     // eslint-disable-next-line no-console
@@ -448,7 +433,6 @@ var ingestDocumentPage = exports.ingestDocumentPage = function ingestDocumentPag
   }
 };
 var predict = exports.predict = function predict(textBefore) {
-  ensureDebugModeFromStorage();
   if (!isInitialized) {
     loadDefaultVocabulary();
   }
@@ -541,7 +525,7 @@ var predict = exports.predict = function predict(textBefore) {
   var lmLogits = (0, _slowLaneClient.getStoredLmLogits)();
 
   // Raw LM Output Logger
-  if (debugMode && lmLogits && Object.keys(lmLogits).length > 0) {
+  if ((0, _debugMode.isAutocompleteDebugEnabled)() && lmLogits && Object.keys(lmLogits).length > 0) {
     var rawLmTop = Object.entries(lmLogits).sort(function (a, b) {
       return b[1] - a[1];
     }).slice(0, 5).map(function (_ref) {
@@ -557,9 +541,6 @@ var predict = exports.predict = function predict(textBefore) {
     console.log('%c[Raw LM Prediction]🧠', 'color: #e83e8c; font-weight: bold;', rawLmTop);
   }
   var mode = contextVector ? 'warm' : 'cold';
-  if (debugMode && contextVector && !hasLoggedSemanticActive) {
-    hasLoggedSemanticActive = true;
-  }
 
   // Build ScoringCandidate array from TrieNodes
   var scoringCandidates = candidates.map(function (_ref3) {
@@ -590,7 +571,7 @@ var predict = exports.predict = function predict(textBefore) {
     pipelineDebug = _rankCandidates.pipelineDebug;
   var best = ranked[0];
   var suggestion = best && best.finalScore >= MIN_SCORE_THRESHOLD ? best.word.slice(currentWord.length) : null;
-  if (debugMode) {
+  if ((0, _debugMode.isAutocompleteDebugEnabled)()) {
     var latencyMs = performance.now() - t0;
     var tokens = tokenize(trimmed);
     var contextWords = tokens.slice(-CONTEXT_WORDS);
@@ -770,8 +751,7 @@ var loadVectorsAsync = exports.loadVectorsAsync = /*#__PURE__*/function () {
             wordIndex: wordIndex,
             dim: dim
           };
-          ensureDebugModeFromStorage();
-          if (debugMode) {
+          if ((0, _debugMode.isAutocompleteDebugEnabled)()) {
             // eslint-disable-next-line no-console
             console.log('[text-predictor] Vectors loaded:', {
               wordCount: nWords,
@@ -779,19 +759,19 @@ var loadVectorsAsync = exports.loadVectorsAsync = /*#__PURE__*/function () {
               sizeBytes: float32.byteLength
             });
           }
-          _context.next = 41;
+          _context.next = 40;
           break;
-        case 37:
-          _context.prev = 37;
+        case 36:
+          _context.prev = 36;
           _context.t1 = _context["catch"](17);
           vectorsLoadStarted = false;
           // eslint-disable-next-line no-console
           console.warn('[text-predictor] Failed to load vectors:', _context.t1);
-        case 41:
+        case 40:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[6, 12], [17, 37]]);
+    }, _callee, null, [[6, 12], [17, 36]]);
   }));
   return function loadVectorsAsync(_x) {
     return _ref6.apply(this, arguments);

package/dist/es2019/autocompletePlugin.js

@@ -1,6 +1,7 @@
 import { autocompletePluginKey, createAutocompletePlugin } from './pm-plugins/autocomplete-plugin';
 export const autocompletePlugin = ({
-  config: options
+  config: options,
+  api
 }) => {
   return {
     name: 'autocomplete',
@@ -13,7 +14,7 @@ export const autocompletePlugin = ({
     pmPlugins() {
       return [{
         name: 'autocomplete',
-        plugin: () => createAutocompletePlugin(options)
+        plugin: () => createAutocompletePlugin(options, api)
       }];
     }
   };

package/dist/es2019/pm-plugins/autocomplete-plugin.js

@@ -1,3 +1,4 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
@@ -58,6 +59,7 @@ const setAutocompleteMeta = (tr, meta) => {
 /**
  * Apply a ghost text suggestion to the editor state.
  */
+let lastShownGhostText = '';
 const showGhostText = (view, text, position) => {
   const {
     state,
@@ -140,7 +142,17 @@ const buildSlowLaneText = (docText, context) => {
   lines.push(`reply ${nextReplyNumber}: ${docText}`);
   return lines.join('\n');
 };
-export const createAutocompletePlugin = options => {
+const getTypedLengthForPrediction = textBefore => {
+  var _textBefore$match$, _textBefore$match;
+  if (isWordBoundary(textBefore)) {
+    return 0;
+  }
+
+  // eslint-disable-next-line require-unicode-regexp
+  const trailingToken = (_textBefore$match$ = (_textBefore$match = textBefore.match(/([^\s.,;:!?]*)$/)) === null || _textBefore$match === void 0 ? void 0 : _textBefore$match[1]) !== null && _textBefore$match$ !== void 0 ? _textBefore$match$ : '';
+  return trailingToken.length;
+};
+export const createAutocompletePlugin = (options, api) => {
   let debounceTimer = null;
   let hasIngestedPage = false;
   let resolvedContext;
@@ -157,6 +169,24 @@ export const createAutocompletePlugin = options => {
    * re-showing the same suggestion. Resets to null as soon as the text changes.
    */
   let dismissedContext = null;
+  let lastSuggestionTypedLength = 0;
+  let lastSuggestionLength = 0;
+  const fireSuggestionInsertedAnalytics = ghostText => {
+    var _api$analytics;
+    const typedLength = lastSuggestionTypedLength;
+    const suggestionLength = lastSuggestionLength || typedLength + ghostText.length;
+    const kssDelta = suggestionLength - typedLength;
+    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
+      action: ACTION.SUGGESTION_INSERTED,
+      actionSubject: ACTION_SUBJECT.CONTEXTUAL_TYPEAHEAD,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        suggestionLength,
+        typedLength,
+        kssDelta
+      }
+    });
+  };
   const slowLaneClient = createSlowLaneClient({
     baseUrl: '',
     endpoint: SLOW_LANE_ENDPOINT
@@ -201,7 +231,19 @@ export const createAutocompletePlugin = options => {
       // Tier 1 prediction is synchronous -- no async needed
       const prediction = predict(textBefore);
       if (prediction && prediction.length > 0) {
+        const typedLength = getTypedLengthForPrediction(textBefore);
+        lastSuggestionTypedLength = typedLength;
+        lastSuggestionLength = typedLength + prediction.length;
         showGhostText(view, prediction, selection.from);
+        if (prediction !== lastShownGhostText) {
+          var _api$analytics2;
+          lastShownGhostText = prediction;
+          api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent({
+            action: ACTION.SUGGESTION_VIEWED,
+            actionSubject: ACTION_SUBJECT.CONTEXTUAL_TYPEAHEAD,
+            eventType: EVENT_TYPE.TRACK
+          });
+        }
       }
     }, DEBOUNCE_MS);
   };
@@ -275,13 +317,27 @@ export const createAutocompletePlugin = options => {
       },
       handleKeyDown: keydownHandler({
         Tab: (state, dispatch) => {
+          var _pluginState$ghostTex;
+          const pluginState = autocompletePluginKey.getState(state);
+          const ghostText = (_pluginState$ghostTex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex !== void 0 ? _pluginState$ghostTex : '';
           const accepted = acceptGhostText(state, dispatch);
-          if (accepted) justAccepted = true;
+          if (accepted) {
+            justAccepted = true;
+            lastShownGhostText = '';
+            fireSuggestionInsertedAnalytics(ghostText);
+          }
           return accepted;
         },
         ArrowRight: (state, dispatch) => {
+          var _pluginState$ghostTex2;
+          const pluginState = autocompletePluginKey.getState(state);
+          const ghostText = (_pluginState$ghostTex2 = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex2 !== void 0 ? _pluginState$ghostTex2 : '';
           const accepted = acceptGhostText(state, dispatch);
-          if (accepted) justAccepted = true;
+          if (accepted) {
+            justAccepted = true;
+            lastShownGhostText = '';
+            fireSuggestionInsertedAnalytics(ghostText);
+          }
           return accepted;
         },
         Escape: (state, dispatch) => {

package/dist/es2019/pm-plugins/debug-mode.js

@@ -0,0 +1,18 @@
+/**
+ * Contextual Typeahead Completions (CTC) debug logging utility.
+ *
+ * Logs are silent by default. To enable in any environment (dev, staging, prod):
+ *
+ *   localStorage.setItem('atl-ctc-dbg', '1')
+ *
+ * Then reload the page. To disable:
+ *
+ *   localStorage.removeItem('atl-ctc-dbg')
+ */
+export const isAutocompleteDebugEnabled = () => {
+  try {
+    return typeof localStorage !== 'undefined' && localStorage.getItem('atl-ctc-dbg') === '1';
+  } catch {
+    return false;
+  }
+};