fix(agent): fix support for html/jsx auto closing chars. (TabbyML#1265)

* fix(agent): fix support for html/jsx auto closing chars. * test(agent): add test for jsx tags.
serviteur · Jan 29, 2024 · bb2afea · bb2afea
1 parent 4eb913b
commit bb2afea
Show file tree

Hide file tree

Showing 8 changed files with 299 additions and 57 deletions.
diff --git a/clients/tabby-agent/src/CompletionCache.ts b/clients/tabby-agent/src/CompletionCache.ts
@@ -1,7 +1,7 @@
 import { LRUCache } from "lru-cache";
 import { CompletionContext, CompletionResponse } from "./CompletionContext";
 import { rootLogger } from "./logger";
-import { splitLines, autoClosingPairOpenings, autoClosingPairClosings, findUnpairedAutoClosingChars } from "./utils";
+import { splitLines, autoClosingPairs, findUnpairedAutoClosingChars } from "./utils";
 
 type CompletionCacheKey = CompletionContext;
 type CompletionCacheValue = CompletionResponse;
@@ -173,27 +173,37 @@ export class CompletionCache {
     return result;
   }
 
+  // FIXME: add unit tests
   // "function(" => ["function()"]
   // "call([" => ["call([]", "call([])" ]
   // "function(arg" => ["function(arg)" ]
   private generateAutoClosedPrefixes(prefix: string): string[] {
     const result: string[] = [];
     const unpaired = findUnpairedAutoClosingChars(prefix);
-    for (
-      let checkIndex = 0, autoClosing = "";
-      checkIndex < this.options.prebuildCache.autoClosingPairCheck.max;
-      checkIndex++
-    ) {
-      if (unpaired.length > checkIndex) {
-        const found = autoClosingPairOpenings.indexOf(unpaired[unpaired.length - 1 - checkIndex]);
-        if (found < 0) {
-          break;
-        }
-        autoClosing = autoClosing + autoClosingPairClosings[found];
-        result.push(prefix + autoClosing);
-      } else {
-        break;
-      }
+    let checkIndex = 0;
+    let autoClosing = "";
+    while (checkIndex < unpaired.length && checkIndex < this.options.prebuildCache.autoClosingPairCheck.max) {
+      autoClosingPairs
+        .filter((pair) => {
+          let pattern;
+          if ("open" in pair) {
+            pattern = pair.open;
+          } else {
+            pattern = pair.openOrClose;
+          }
+          return pattern.chars === unpaired[unpaired.length - 1 - checkIndex];
+        })
+        .forEach((pair) => {
+          let pattern;
+          if ("close" in pair) {
+            pattern = pair.close;
+          } else {
+            pattern = pair.openOrClose;
+          }
+          autoClosing += pattern.chars;
+          result.push(prefix + autoClosing);
+        });
+      checkIndex++;
     }
     return result;
   }

diff --git a/clients/tabby-agent/src/CompletionContext.ts b/clients/tabby-agent/src/CompletionContext.ts
@@ -1,4 +1,4 @@
-import { splitLines, autoClosingPairClosings } from "./utils";
+import { splitLines, regOnlyAutoClosingCloseChars } from "./utils";
 import hashObject from "object-hash";
 
 export type CompletionRequest = {
@@ -28,10 +28,7 @@ export type CompletionResponse = {
 };
 
 function isAtLineEndExcludingAutoClosedChar(suffix: string) {
-  return suffix
-    .trimEnd()
-    .split("")
-    .every((char) => autoClosingPairClosings.includes(char));
+  return suffix.trimEnd().match(regOnlyAutoClosingCloseChars);
 }
 
 export class CompletionContext {

diff --git a/clients/tabby-agent/src/postprocess/calculateReplaceRangeByBracketStack.test.ts b/clients/tabby-agent/src/postprocess/calculateReplaceRangeByBracketStack.test.ts
@@ -127,6 +127,70 @@ describe("postprocess", () => {
       };
       expect(calculateReplaceRangeByBracketStack(choice, context)).to.deep.equal(expected);
     });
+
+    it("should handle html tags", () => {
+      const context = {
+        ...documentContext`
+        <html></h║>
+        `,
+        language: "html",
+      };
+      const choice = {
+        index: 0,
+        text: inline`
+                 ├tml>┤
+        `,
+        replaceRange: {
+          start: context.position,
+          end: context.position,
+        },
+      };
+      const expected = {
+        index: 0,
+        text: inline`
+                 ├tml>┤
+        `,
+        replaceRange: {
+          start: context.position,
+          end: context.position + 1,
+        },
+      };
+      expect(calculateReplaceRangeByBracketStack(choice, context)).to.deep.equal(expected);
+    });
+
+    it("should handle jsx tags", () => {
+      const context = {
+        ...documentContext`
+        root.render(
+          <React.StrictMode>
+            <App m║/>
+          </React.StrictMode>
+        );
+        `,
+        language: "javascriptreact",
+      };
+      const choice = {
+        index: 0,
+        text: inline`
+                  ├essage={message} />┤
+        `,
+        replaceRange: {
+          start: context.position,
+          end: context.position,
+        },
+      };
+      const expected = {
+        index: 0,
+        text: inline`
+                  ├essage={message} />┤
+        `,
+        replaceRange: {
+          start: context.position,
+          end: context.position + 2,
+        },
+      };
+      expect(calculateReplaceRangeByBracketStack(choice, context)).to.deep.equal(expected);
+    });
   });
 
   describe("calculateReplaceRangeByBracketStack: bad cases", () => {

diff --git a/clients/tabby-agent/src/postprocess/calculateReplaceRangeByBracketStack.ts b/clients/tabby-agent/src/postprocess/calculateReplaceRangeByBracketStack.ts
@@ -12,7 +12,7 @@ export function calculateReplaceRangeByBracketStack(
     return choice;
   }
   const completionText = choice.text.slice(context.position - choice.replaceRange.start);
-  const unpaired = findUnpairedAutoClosingChars(completionText);
+  const unpaired = findUnpairedAutoClosingChars(completionText).join("");
   if (isBlank(unpaired)) {
     return choice;
   }

diff --git a/clients/tabby-agent/src/postprocess/formatIndentation.ts b/clients/tabby-agent/src/postprocess/formatIndentation.ts
@@ -37,7 +37,7 @@ function detectIndentation(lines: string[]): string | null {
 
 function getIndentLevel(line: string, indentation: string): number {
   if (indentation === "\t") {
-    return line.match(/^\t*/g)?.[0].length ?? 0;
+    return line.match(/^\t*/)?.[0].length ?? 0;
   } else {
     const spaces = line.match(/^ */)?.[0].length ?? 0;
     return spaces / indentation.length;

diff --git a/clients/tabby-agent/src/postprocess/golden/replace_range/jsx_tags_01.toml b/clients/tabby-agent/src/postprocess/golden/replace_range/jsx_tags_01.toml
@@ -0,0 +1,41 @@
+description = 'Replace range: jsx tags: case 01'
+
+[config]
+# use default config
+
+[context]
+filepath = 'app.jsx'
+language = 'javascriptreact'
+# indentation = '  ' # not specified
+text = '''
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+const message = <div>Hello world!</div>
+root.render(
+  <React.StrictMode>
+    <App ├message={message} />┤/>
+  </React.StrictMode>
+);
+
+'''
+
+[expected]
+text = '''
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+const message = <div>Hello world!</div>
+root.render(
+  <React.StrictMode>
+    <App ├message={message} />┤/>╣
+  </React.StrictMode>
+);
+
+'''
diff --git a/clients/tabby-agent/src/postprocess/golden/replace_range/jsx_tags_02.toml b/clients/tabby-agent/src/postprocess/golden/replace_range/jsx_tags_02.toml
@@ -0,0 +1,41 @@
+description = 'Replace range: jsx tags: case 02'
+
+[config]
+# use default config
+
+[context]
+filepath = 'app.jsx'
+language = 'javascriptreact'
+# indentation = '  ' # not specified
+text = '''
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+const message = <div>Hello world!</div>
+root.render(
+  <React.StrictMode>
+    <App message={message} />
+  </├React.StrictMode>┤>
+);
+
+'''
+
+[expected]
+text = '''
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+const message = <div>Hello world!</div>
+root.render(
+  <React.StrictMode>
+    <App message={message} />
+  </├React.StrictMode>┤>╣
+);
+
+'''