feat(frontend/lsp): handle progress and messages

Author: Brayan-724

frontend/package.json

@@ -47,7 +47,8 @@
     "events": "3.3.0",
     "frontend-wasm": "file:../frontend-wasm/pkg/",
     "marked": "^16.1.2",
-    "solid-js": "^1.9.0"
+    "solid-js": "^1.9.0",
+    "vscode-languageserver-protocol": "^3.17.5"
   },
   "pnpm": {
     "onlyBuiltDependencies": [

frontend/pnpm-lock.yaml

@@ -9,6 +9,7 @@ import { Panels } from "@features/panels/views";
 import { Sidebar } from "@features/sidebar/views";
 
 import "@features/theme/stores"
+import { LoadingLsp } from "@features/lsp/views";
 
 const App: Component = () => {
   interceptAuthCallback();
@@ -20,6 +21,7 @@ const App: Component = () => {
     <>
       <Sidebar />
       <Panels />
+      <LoadingLsp />
     </>
   );
 };

frontend/src/App.tsx

@@ -0,0 +1 @@
+export * from "./loading";

frontend/src/features/lsp/services/index.ts

@@ -0,0 +1,14 @@
+import { setLoadingLsp } from "../stores";
+
+export function updateLoadingLsp(change: {title?: string, message?: string, percentage?: number}) {
+  setLoadingLsp({
+    isLoading: true,
+    ...change
+  });
+}
+
+export function endLoadingLsp() {
+  setLoadingLsp({
+    isLoading: false,
+  });
+}

frontend/src/features/lsp/services/loading.ts

@@ -0,0 +1 @@
+export * from "./loading";

frontend/src/features/lsp/stores/index.ts

@@ -0,0 +1,17 @@
+import { createStore } from "solid-js/store";
+
+export type LoadingLspStore = {
+  isLoading: true;
+  title: string;
+  message: string;
+  percentage?: number;
+} | {
+  isLoading: false;
+  title?: string;
+  message?: string;
+  percentage?: number;
+};
+
+export const [loadingLsp, setLoadingLsp] = createStore<LoadingLspStore>({
+  isLoading: false,
+});

frontend/src/features/lsp/stores/loading.ts

@@ -0,0 +1,13 @@
+import { ProgressToken, WorkDoneProgress } from "vscode-languageserver-protocol";
+
+export interface ProgressParams {
+    /**
+     * The progress token provided by the client or server.
+     */
+    token: ProgressToken;
+    /**
+     * The progress data.
+     */
+    value: typeof WorkDoneProgress.type._pr;
+}
+

frontend/src/features/lsp/types/index.d.ts

@@ -9,6 +9,10 @@ import { ERR_UNKNOWN } from "@open-rpc/client-js/build/Error";
 
 import { onWsMessage, sendMessage } from "@features/ws/services";
 import { ClientMessageKind, ServerMessageKind } from "@features/ws/types";
+import { ProgressParams } from "../types";
+import { endLoadingLsp, updateLoadingLsp } from "../services";
+import { MessageType, ShowMessageParams } from "vscode-languageserver-protocol";
+import { showToast, ToastKind } from "@services/toast";
 
 const ignoredNotify = {
   "textDocument/didOpen": "open",
@@ -18,11 +22,57 @@ const ignoredNotify = {
 export class RsLspTransport extends Transport {
   public async connect(): Promise<void> {
     onWsMessage(ServerMessageKind.Lsp, ({ data }) => {
+      if (
+        "method" in data && "params" in data &&
+        this.handleWorkDone(data.method as string, data.params)
+      ) {
+        return;
+      }
+
       // @ts-expect-error -- resolveRes is private, but needed for performance issues
       this.transportRequestManager.resolveRes(data);
     });
   }
 
+  private handleWorkDone(method: string, params_: unknown): boolean {
+    if (method == "window/showMessage") {
+      let params = params_ as ShowMessageParams;
+
+      let kind: ToastKind = "info";
+
+      if (params.type == MessageType.Debug) {
+        kind = "debug";
+      } else if (params.type == MessageType.Error) {
+        kind = "error";
+      } else if (params.type == MessageType.Warning) {
+        kind = "warn";
+      }
+
+      showToast(kind, { text: params.message });
+
+      return true;
+    }
+
+    if (method != "$/progress") {
+      return false;
+    }
+
+    const progress = (params_ as ProgressParams).value;
+
+    if (progress.kind == "begin") {
+      updateLoadingLsp({ title: progress.title, message: "" });
+    } else if (progress.kind == "report") {
+      updateLoadingLsp({
+        message: progress.message,
+        percentage: progress.percentage,
+      });
+    } else if (progress.kind == "end") {
+      endLoadingLsp();
+    }
+
+    return true;
+  }
+
   public async sendData(
     data: JSONRPCRequestData,
     timeout: number | null = 5000,

frontend/src/features/lsp/utils/transport.ts

@@ -0,0 +1,22 @@
+@import "../../../styles/_mixins.sass"
+
+.container
+  position: absolute
+  right: 1rem
+  bottom: 1rem
+
+  display: flex
+  flex-direction: column
+  align-items: flex-end
+
+  font-size: 0.9rem
+  color: var(--colors-gray-300)
+
+.title
+  display: flex
+  align-items: center
+  gap: 0.25rem
+
+.message
+  padding-right: 0.3rem
+  text-align: end