@kingsoftcloud/ksadk-web 0.2.7

package/dist-lib/NativeTerminalPanel-q4ECX8EX.js

@@ -0,0 +1,391 @@
+import { A as e } from "./WorkspacePanelContainer-26j9UzyY.js";
+import { CheckCircle2 as t, PlugZap as n, Plus as r, RefreshCw as i, TerminalSquare as a, Trash2 as o, X as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import "@xterm/xterm/css/xterm.css";
+//#region \0rolldown/runtime.js
+var h = Object.defineProperty, g = (e, t) => {
+	let n = {};
+	for (var r in e) h(n, r, {
+		get: e[r],
+		enumerable: !0
+	});
+	return t || h(n, Symbol.toStringTag, { value: "Module" }), n;
+}, _ = "/_ksadk/terminal/sessions", v = /\x1b\](?:10|11|12);(?:rgb:)?[0-9a-fA-F]{1,4}\/[0-9a-fA-F]{1,4}\/[0-9a-fA-F]{1,4}(?:\x07|\x1b\\)/g, y = /\]1[012];(?:rgb:)?[0-9a-fA-F]{1,4}\/[0-9a-fA-F]{1,4}\/[0-9a-fA-F]{1,4}/g;
+function b(e, t) {
+	let n = Number(e);
+	return Number.isFinite(n) && n > 0 ? Math.floor(n) : t;
+}
+function x(e) {
+	let t = Date.parse(String(e?.updated_at || e?.UpdatedAt || ""));
+	return Number.isNaN(t) ? 0 : t;
+}
+function S(e = {}) {
+	let t = {
+		mode: String(e.mode || "tui").trim() || "tui",
+		cols: b(e.cols, 80),
+		rows: b(e.rows, 24)
+	}, n = String(e.sessionId || e.session_id || "").trim();
+	n && (t.session_id = n);
+	let r = String(e.cwd || "").trim();
+	return r && (t.cwd = r), e.options && typeof e.options == "object" && (t.options = e.options), t;
+}
+function C(e) {
+	return (Array.isArray(e?.sessions) ? e.sessions : Array.isArray(e?.Sessions) ? e.Sessions : []).map((e) => ({
+		terminal_session_id: String(e?.terminal_session_id || e?.TerminalSessionId || "").trim(),
+		mode: String(e?.mode || e?.Mode || "tui").trim() || "tui",
+		status: String(e?.status || e?.Status || "closed").trim() || "closed",
+		cols: b(e?.cols ?? e?.Cols, 80),
+		rows: b(e?.rows ?? e?.Rows, 24),
+		session_id: String(e?.session_id || e?.SessionId || "").trim(),
+		cwd: String(e?.cwd || e?.Cwd || "").trim(),
+		created_at: e?.created_at || e?.CreatedAt || "",
+		updated_at: e?.updated_at || e?.UpdatedAt || "",
+		exit_code: e?.exit_code ?? e?.ExitCode ?? null
+	})).filter((e) => e.terminal_session_id).filter((e) => e.status !== "closed" && e.status !== "deleted").sort((e, t) => {
+		let n = +(e.status === "running"), r = +(t.status === "running");
+		return n === r ? x(t) - x(e) : r - n;
+	});
+}
+function w(e = "/_ksadk/terminal/ws", t, n) {
+	let r = n || (typeof window < "u" ? window.location : {
+		href: "http://localhost/",
+		protocol: "http:"
+	}), i = new URL(e || "/_ksadk/terminal/ws", r.href || "http://localhost/");
+	i.protocol = i.protocol === "https:" ? "wss:" : "ws:";
+	let a = String(t || "").trim();
+	return a && i.searchParams.set("terminal_session_id", a), i.toString();
+}
+function T(e) {
+	return String(e || "").replace(v, "").replace(y, "");
+}
+//#endregion
+//#region src/components/native/NativeTerminalPanel.tsx
+var E = /* @__PURE__ */ g({ NativeTerminalPanel: () => A }), D = 2e4;
+function O(e) {
+	return typeof e == "string" ? Promise.resolve(e) : e instanceof Blob ? e.text() : Promise.resolve(new TextDecoder().decode(e));
+}
+async function k(e) {
+	let t = await e.text();
+	if (!t) return {};
+	try {
+		return JSON.parse(t);
+	} catch {
+		return {};
+	}
+}
+function A({ capability: h, open: g, onClose: v }) {
+	let [y, b] = m("idle"), [x, E] = m([]), [A, j] = m(null), [M, N] = m(!1), P = p(null), F = p(null), I = p(null), L = p(null), R = p([]), z = f(() => x.find((e) => e.terminal_session_id === A) || null, [A, x]), B = u(async () => {
+		N(!0);
+		try {
+			let e = await fetch(_);
+			if (!e.ok) throw Error(`HTTP ${e.status}`);
+			let t = C(await k(e));
+			E(t), j((e) => e && t.some((t) => t.terminal_session_id === e) ? e : t[0]?.terminal_session_id || null);
+		} catch {
+			b("error");
+		} finally {
+			N(!1);
+		}
+	}, []);
+	d(() => {
+		R.current = x;
+	}, [x]);
+	let V = u(async (e) => {
+		if (!P.current) return () => {};
+		b("connecting");
+		let t = !1, n = null, r = null, i = null, a = null, o = null, s = null, c = null, l = null;
+		return F.current?.close(1e3, "switch terminal session"), F.current = null, I.current?.dispose(), I.current = null, L.current = null, P.current.innerHTML = "", Promise.all([import("@xterm/xterm"), import("@xterm/addon-fit")]).then(([u, d]) => {
+			if (t || !P.current) return;
+			let { Terminal: f } = u, { FitAddon: p } = d;
+			n = new f({
+				cursorBlink: !0,
+				convertEol: !0,
+				fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace",
+				fontSize: 14,
+				lineHeight: 1.2,
+				scrollback: 6e3,
+				allowProposedApi: !0,
+				theme: {
+					background: "#020617",
+					foreground: "#e5edf5",
+					cursor: "#34d399",
+					cursorAccent: "#020617",
+					selectionBackground: "#1e40af66",
+					black: "#020617",
+					red: "#fb7185",
+					green: "#34d399",
+					yellow: "#fbbf24",
+					blue: "#60a5fa",
+					magenta: "#c084fc",
+					cyan: "#22d3ee",
+					white: "#e5edf5",
+					brightBlack: "#64748b",
+					brightRed: "#fda4af",
+					brightGreen: "#86efac",
+					brightYellow: "#fde68a",
+					brightBlue: "#93c5fd",
+					brightMagenta: "#d8b4fe",
+					brightCyan: "#67e8f9",
+					brightWhite: "#ffffff"
+				}
+			}), r = new p(), n.loadAddon(r), n.open(P.current), I.current = n, L.current = r;
+			let m = () => {
+				try {
+					r?.fit();
+				} catch {}
+			}, g = () => {
+				o?.readyState !== WebSocket.OPEN || !n || o.send(JSON.stringify({
+					type: "resize",
+					cols: n.cols || e.cols || 80,
+					rows: n.rows || e.rows || 24
+				}));
+			}, _ = () => {
+				m(), g();
+			}, v = () => {
+				window.requestAnimationFrame(() => {
+					t || (_(), window.requestAnimationFrame(() => {
+						t || _();
+					}));
+				});
+			};
+			window.setTimeout(v, 0), o = new WebSocket(w(h.Path || "/_ksadk/terminal/ws", e.terminal_session_id), h.Protocol || "ks-terminal.v1"), F.current = o, o.addEventListener("open", () => {
+				m(), o?.send(JSON.stringify({
+					type: "attach",
+					terminal_session_id: e.terminal_session_id,
+					cols: n?.cols || e.cols || 80,
+					rows: n?.rows || e.rows || 24
+				})), v(), b("connected"), n?.focus();
+			}), o.addEventListener("message", (e) => {
+				if (typeof e.data == "string") try {
+					let t = JSON.parse(e.data);
+					if (t?.type === "ready") {
+						b("connected");
+						return;
+					}
+					if (t?.type === "pong") return;
+					if (t?.type === "exit") {
+						b("closed");
+						return;
+					}
+					if (t?.type === "error") {
+						b("error"), n?.writeln(`\r\n${t.message || "Terminal error"}`);
+						return;
+					}
+				} catch {}
+				O(e.data).then((e) => {
+					e && n?.write(e);
+				});
+			}), o.addEventListener("close", () => {
+				b((e) => e === "error" ? e : "closed"), F.current = null;
+			}), o.addEventListener("error", () => {
+				b("error");
+			});
+			let y = (e) => {
+				let t = T(e);
+				t && o?.readyState === WebSocket.OPEN && o.send(new TextEncoder().encode(t));
+			};
+			i = n.onData((e) => {
+				y(e);
+			}), a = n.onBinary((e) => {
+				y(e);
+			}), l = window.setInterval(() => {
+				o?.readyState === WebSocket.OPEN && o.send(JSON.stringify({ type: "ping" }));
+			}, D), s = () => {
+				_();
+			}, window.addEventListener("resize", s), c = new ResizeObserver(() => {
+				v();
+			}), c.observe(P.current);
+		}), () => {
+			t = !0, i?.dispose(), a?.dispose(), s && window.removeEventListener("resize", s), l !== null && window.clearInterval(l), c?.disconnect(), o && (o.readyState === WebSocket.OPEN || o.readyState === WebSocket.CONNECTING) && o.close(1e3, "panel closed"), F.current === o && (F.current = null), n?.dispose(), I.current = null, L.current = null;
+		};
+	}, [h.Path, h.Protocol]);
+	d(() => {
+		!g || !h.Enabled || B();
+	}, [
+		h.Enabled,
+		g,
+		B
+	]), d(() => {
+		let e = R.current.find((e) => e.terminal_session_id === A) || null;
+		if (!g || !e) return;
+		let t = () => {}, n = !1;
+		return V(e).then((e) => {
+			t = e, n && t();
+		}), () => {
+			n = !0, t();
+		};
+	}, [
+		A,
+		V,
+		g
+	]);
+	let H = async () => {
+		b("connecting");
+		let e = await fetch(_, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(S({ mode: h.Mode || "tui" }))
+		});
+		if (!e.ok) {
+			b("error");
+			return;
+		}
+		let t = (await k(e))?.session;
+		if (!t?.terminal_session_id) {
+			b("error");
+			return;
+		}
+		await B(), j(t.terminal_session_id);
+	}, U = async (e) => {
+		let t = x.filter((t) => t.terminal_session_id !== e);
+		E(t), A === e && (j(t[0]?.terminal_session_id || null), t.length === 0 && b("idle"), F.current?.close(1e3, "terminal session deleted"), F.current = null, I.current?.dispose(), I.current = null, L.current = null, P.current && (P.current.innerHTML = ""));
+		let n = await fetch(`${_}/${e}`, { method: "DELETE" });
+		!n.ok && n.status !== 404 && b("error"), await B();
+	};
+	return g ? /* @__PURE__ */ l("div", {
+		className: "fixed inset-0 z-50 overflow-hidden border border-slate-800 bg-slate-950 text-slate-100 shadow-2xl shadow-slate-950/40 sm:inset-3 sm:rounded-3xl",
+		children: [/* @__PURE__ */ l("div", {
+			className: "flex items-center justify-between border-b border-slate-800 bg-slate-900 px-4 py-3",
+			children: [/* @__PURE__ */ l("div", {
+				className: "flex min-w-0 items-center gap-3",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex h-9 w-9 items-center justify-center rounded-2xl bg-emerald-500/15 text-emerald-300",
+					children: /* @__PURE__ */ c(a, { className: "h-4 w-4" })
+				}), /* @__PURE__ */ l("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ c("div", {
+						className: "truncate text-sm font-semibold",
+						children: "Native TUI"
+					}), /* @__PURE__ */ l("div", {
+						className: "flex items-center gap-1.5 text-xs text-slate-400",
+						children: [/* @__PURE__ */ c(n, { className: "h-3 w-3" }), y]
+					})]
+				})]
+			}), /* @__PURE__ */ l("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: () => void B(),
+						className: "rounded-xl p-2 text-slate-400 transition hover:bg-slate-800 hover:text-slate-100",
+						"aria-label": "刷新会话列表",
+						children: /* @__PURE__ */ c(i, { className: e("h-4 w-4", M && "animate-spin") })
+					}),
+					/* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: () => void H(),
+						className: "rounded-xl p-2 text-slate-400 transition hover:bg-slate-800 hover:text-slate-100",
+						"aria-label": "新建终端会话",
+						children: /* @__PURE__ */ c(r, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: v,
+						className: "rounded-xl p-2 text-slate-400 transition hover:bg-slate-800 hover:text-slate-100",
+						"aria-label": "关闭 TUI",
+						children: /* @__PURE__ */ c(s, { className: "h-4 w-4" })
+					})
+				]
+			})]
+		}), /* @__PURE__ */ l("div", {
+			className: "grid h-[calc(100%-4rem)] min-h-0 grid-cols-[18rem_minmax(0,1fr)] bg-slate-950",
+			children: [/* @__PURE__ */ l("aside", {
+				className: "flex min-h-0 flex-col border-r border-slate-800 bg-slate-950",
+				children: [/* @__PURE__ */ c("div", {
+					className: "border-b border-slate-800 px-4 py-3 text-xs font-medium uppercase tracking-[0.12em] text-slate-500",
+					children: "会话"
+				}), /* @__PURE__ */ l("div", {
+					className: "min-h-0 flex-1 overflow-y-auto p-2",
+					children: [x.length === 0 ? /* @__PURE__ */ l("button", {
+						type: "button",
+						onClick: () => void H(),
+						className: "flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-700 px-3 py-5 text-sm text-slate-400 transition hover:bg-slate-900",
+						children: [/* @__PURE__ */ c(r, { className: "h-4 w-4" }), "新建终端会话"]
+					}) : null, x.map((n) => /* @__PURE__ */ l("div", {
+						role: "button",
+						tabIndex: 0,
+						onClick: () => j(n.terminal_session_id),
+						onKeyDown: (e) => {
+							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), j(n.terminal_session_id));
+						},
+						className: e("group mb-2 rounded-2xl border px-3 py-3 text-left transition", A === n.terminal_session_id ? "border-emerald-400/50 bg-emerald-500/10" : "border-slate-800 bg-slate-900/60 hover:bg-slate-900"),
+						children: [/* @__PURE__ */ l("div", {
+							className: "flex items-start justify-between gap-2",
+							children: [/* @__PURE__ */ l("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ c("div", {
+									className: "truncate text-sm font-medium text-slate-100",
+									children: n.terminal_session_id
+								}), /* @__PURE__ */ c("div", {
+									className: "mt-1 text-[11px] text-slate-400",
+									children: n.session_id || "未绑定会话"
+								})]
+							}), /* @__PURE__ */ l("div", {
+								className: "flex items-center gap-1",
+								children: [n.status === "running" ? /* @__PURE__ */ c(t, { className: "h-3.5 w-3.5 text-emerald-400" }) : null, /* @__PURE__ */ c("button", {
+									type: "button",
+									onClick: (e) => {
+										e.stopPropagation(), U(n.terminal_session_id);
+									},
+									className: "rounded-lg p-1.5 text-slate-500 opacity-0 transition hover:bg-slate-800 hover:text-rose-300 group-hover:opacity-100",
+									title: "关闭会话",
+									children: /* @__PURE__ */ c(o, { className: "h-3.5 w-3.5" })
+								})]
+							})]
+						}), /* @__PURE__ */ l("div", {
+							className: "mt-3 flex items-center gap-2 text-[11px] text-slate-500",
+							children: [
+								/* @__PURE__ */ c("span", {
+									className: "rounded-full border border-slate-700 px-2 py-0.5",
+									children: n.mode
+								}),
+								/* @__PURE__ */ l("span", {
+									className: "rounded-full border border-slate-700 px-2 py-0.5",
+									children: [
+										n.cols,
+										"x",
+										n.rows
+									]
+								}),
+								/* @__PURE__ */ c("span", {
+									className: "rounded-full border border-slate-700 px-2 py-0.5",
+									children: n.status
+								})
+							]
+						})]
+					}, n.terminal_session_id))]
+				})]
+			}), /* @__PURE__ */ c("section", {
+				className: "min-h-0 bg-slate-950 p-2",
+				children: /* @__PURE__ */ l("div", {
+					className: "flex h-full min-h-0 flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-950",
+					children: [/* @__PURE__ */ l("div", {
+						className: "flex items-center justify-between border-b border-slate-800 bg-slate-900/80 px-4 py-2 text-xs text-slate-400",
+						children: [/* @__PURE__ */ l("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ c("span", {
+								className: "rounded-full border border-slate-700 px-2 py-0.5",
+								children: z?.terminal_session_id || "no session"
+							}), /* @__PURE__ */ c("span", { children: z?.status || "idle" })]
+						}), /* @__PURE__ */ c("div", {
+							className: "text-slate-500",
+							children: z?.cwd || z?.session_id || "attach to a terminal session"
+						})]
+					}), /* @__PURE__ */ l("div", {
+						className: "relative min-h-0 flex-1",
+						children: [y === "connecting" ? /* @__PURE__ */ c("div", {
+							className: "absolute left-5 top-5 z-10 rounded-full bg-slate-900/90 px-3 py-1 text-xs text-slate-400",
+							children: "正在连接原生 TUI..."
+						}) : null, /* @__PURE__ */ c("div", {
+							ref: P,
+							className: "h-full w-full overflow-hidden bg-slate-950"
+						})]
+					})]
+				})
+			})]
+		})]
+	}) : null;
+}
+//#endregion
+export { E as n, A as t };