@loopstack/loopstack-studio 0.29.5 → 0.31.0

package/dist/features/workbench/hooks/useLlmStreamingDocuments.js

@@ -0,0 +1,159 @@
+import { SseClientEvents } from "../../../events/sse-client-events.js";
+import { eventBus } from "../../../services/eventEmitter.js";
+import "../../../services/index.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+var WORD_DRAIN_INTERVAL_MS = 35;
+function takeNextWord(e) {
+	let r = e.match(/^(\s*\S+\s*)/)?.[0] ?? e.slice(0, 1);
+	return {
+		word: r,
+		remaining: e.slice(r.length)
+	};
+}
+function createStreamingDocument(e, r, i) {
+	let a = [];
+	i.thinking && a.push({
+		type: "thinking",
+		text: i.thinking
+	}), a.push({
+		type: "text",
+		text: i.error ? `Error while streaming response: ${i.error}` : i.text
+	}), a.push(...i.toolCalls);
+	let o = /* @__PURE__ */ new Date();
+	return {
+		id: `streaming-${i.messageId}`,
+		documentName: "llm_message",
+		content: {
+			id: i.messageId,
+			role: "assistant",
+			content: a
+		},
+		validationError: null,
+		meta: {
+			streaming: !i.readyForFinal && !i.error,
+			streamReadyForFinal: i.readyForFinal
+		},
+		isInvalidated: !1,
+		index: 2 ** 53 - 1,
+		transition: null,
+		place: r,
+		labels: [],
+		tags: ["message"],
+		createdAt: o,
+		updatedAt: o,
+		workspaceId: "",
+		workflowId: e
+	};
+}
+function useLlmStreamingDocuments(l, u) {
+	let [d, f] = useState({}), p = useRef({}), m = useRef(null);
+	return useEffect(() => {
+		function i() {
+			m.current === null && (m.current = window.setTimeout(() => {
+				m.current = null, a();
+			}, WORD_DRAIN_INTERVAL_MS));
+		}
+		function a(e) {
+			let r = Object.entries(p.current).filter(([r]) => !e || r === e);
+			if (!r.length) return;
+			let a = {};
+			for (let [e, i] of r) {
+				if (a[e] = {
+					text: "",
+					thinking: ""
+				}, i.thinking) {
+					let r = takeNextWord(i.thinking);
+					a[e].thinking = r.word, i.thinking = r.remaining;
+				} else if (i.text) {
+					let r = takeNextWord(i.text);
+					a[e].text = r.word, i.text = r.remaining;
+				}
+				!i.text && !i.thinking && delete p.current[e];
+			}
+			let o = Object.values(p.current).some((e) => e.text || e.thinking);
+			f((e) => {
+				let r = { ...e };
+				for (let [e, i] of Object.entries(a)) {
+					let a = r[e] ?? {
+						messageId: e,
+						text: "",
+						thinking: "",
+						toolCalls: [],
+						completed: !1,
+						readyForFinal: !1
+					}, o = !p.current[e]?.text && !p.current[e]?.thinking;
+					r[e] = {
+						...a,
+						text: a.text + i.text,
+						thinking: a.thinking + i.thinking,
+						readyForFinal: a.completed && o
+					};
+				}
+				return r;
+			}), o && i();
+		}
+		function o(e, r) {
+			if (e.workflowId !== l || !e.messageId || !e.delta) return;
+			let a = p.current[e.messageId] ?? {
+				text: "",
+				thinking: ""
+			};
+			a[r] += e.delta, p.current[e.messageId] = a, i();
+		}
+		function s(e, r) {
+			e.workflowId !== l || !e.messageId || f((i) => ({
+				...i,
+				[e.messageId]: r(i[e.messageId] ?? {
+					messageId: e.messageId,
+					text: "",
+					thinking: "",
+					toolCalls: [],
+					completed: !1,
+					readyForFinal: !1
+				})
+			}));
+		}
+		let c = eventBus.on(SseClientEvents.LLM_RESPONSE_START, (e) => {
+			s(e, (e) => ({
+				...e,
+				completed: !1,
+				readyForFinal: !1,
+				error: void 0
+			}));
+		}), u = eventBus.on(SseClientEvents.LLM_RESPONSE_TEXT_DELTA, (e) => {
+			o(e, "text");
+		}), d = eventBus.on(SseClientEvents.LLM_RESPONSE_THINKING_DELTA, (e) => {
+			o(e, "thinking");
+		}), h = eventBus.on(SseClientEvents.LLM_RESPONSE_TOOL_CALL, (e) => {
+			s(e, (r) => ({
+				...r,
+				toolCalls: e.id ? [...r.toolCalls, {
+					type: "tool_call",
+					id: e.id,
+					name: e.name ?? "tool",
+					args: e.args ?? {}
+				}] : r.toolCalls
+			}));
+		}), g = eventBus.on(SseClientEvents.LLM_RESPONSE_DONE, (e) => {
+			s(e, (r) => ({
+				...r,
+				completed: !0,
+				readyForFinal: !e.messageId || !p.current[e.messageId]
+			}));
+		}), _ = eventBus.on(SseClientEvents.LLM_RESPONSE_ERROR, (e) => {
+			s(e, (r) => ({
+				...r,
+				completed: !0,
+				error: e.error ?? "Unknown error"
+			}));
+		});
+		return () => {
+			c(), u(), d(), h(), g(), _(), m.current !== null && (window.clearTimeout(m.current), m.current = null), p.current = {};
+		};
+	}, [l]), useMemo(() => Object.values(d).map((e) => createStreamingDocument(l, u ?? "", e)), [
+		u,
+		d,
+		l
+	]);
+}
+export { useLlmStreamingDocuments };

package/dist/features/workbench/hooks/useWorkflowData.js

@@ -1,49 +1,76 @@
+import { useDocumentConfigs } from "../../../hooks/useConfig.js";
 import { useWorkflow } from "../../../hooks/useWorkflows.js";
 import { WorkflowState } from "../../../packages/contracts/dist/enums/workflow-state.enum.js";
 import "../../../packages/contracts/dist/enums/index.js";
 import { useRunWorkflow } from "../../../hooks/useProcessor.js";
 import { useFilterDocuments } from "../../../hooks/useDocuments.js";
+import { useLlmStreamingDocuments } from "./useLlmStreamingDocuments.js";
 import { c } from "react/compiler-runtime";
 import { useCallback, useMemo } from "react";
-function useWorkflowData(a) {
-	let o = c(21), { workflowId: s, showFullMessageHistory: l } = a, u = useWorkflow(s), d = useFilterDocuments(s), f = useRunWorkflow(), p;
-	o[0] !== u.data?.place || o[1] !== l ? (p = (e) => {
-		let n = e.meta, r = e.ui, i = n?.hidden || r?.hidden || !!n?.hideAtPlaces?.includes(u.data?.place ?? "");
-		return !l && e.tags?.includes("internal") && (i = !0), !i;
-	}, o[0] = u.data?.place, o[1] = l, o[2] = p) : p = o[2];
-	let m = p, h;
+function getLlmMessageId(e) {
+	let s = e.content;
+	return e.documentName === "llm_message" && typeof s?.id == "string" ? s.id : void 0;
+}
+function isStreamReadyForFinal(e) {
+	return !!e.meta?.streamReadyForFinal;
+}
+function useWorkflowData(p) {
+	let m = c(22), { workflowId: h, showFullMessageHistory: g } = p, _ = useWorkflow(h), v = useFilterDocuments(h), y = useRunWorkflow(), b = useLlmStreamingDocuments(h, _.data?.place), x = useDocumentConfigs(), S;
+	m[0] !== x || m[1] !== _.data?.place || m[2] !== g ? (S = (e) => {
+		let s = x.get(e.documentName)?.meta, l = s?.hidden || !!s?.hideAtPlaces?.includes(_.data?.place ?? "");
+		return !g && e.tags?.includes("internal") && (l = !0), !l;
+	}, m[0] = x, m[1] = _.data?.place, m[2] = g, m[3] = S) : S = m[3];
+	let C = S, w;
 	bb0: {
-		if (!d.data) {
-			let e;
-			o[3] === Symbol.for("react.memo_cache_sentinel") ? (e = [], o[3] = e) : e = o[3], h = e;
+		if (!v.data) {
+			w = b;
 			break bb0;
 		}
 		let e;
-		o[4] !== d.data || o[5] !== m ? (e = d.data.filter(m), o[4] = d.data, o[5] = m, o[6] = e) : e = o[6], h = e;
+		if (m[4] !== v.data || m[5] !== C || m[6] !== b) {
+			let s = v.data.filter(C), l = new Map(b.map(_temp).filter(_temp2)), u = s.filter((e) => {
+				let s = getLlmMessageId(e), u = s ? l.get(s) : void 0;
+				return !u || isStreamReadyForFinal(u);
+			}), d = new Set(u.map(getLlmMessageId).filter(_temp3)), f = b.filter((e) => {
+				let s = getLlmMessageId(e);
+				return !s || !d.has(s);
+			});
+			e = [...u, ...f], m[4] = v.data, m[5] = C, m[6] = b, m[7] = e;
+		} else e = m[7];
+		w = e;
 	}
-	let g = h, _;
-	o[7] !== f || o[8] !== s ? (_ = (e, n) => {
-		f.mutate({
-			workflowId: s,
+	let T = w, E;
+	m[8] !== y || m[9] !== h ? (E = (e, s) => {
+		y.mutate({
+			workflowId: h,
 			runWorkflowPayloadDto: { transition: {
 				id: e,
-				workflowId: s,
-				payload: n
+				workflowId: h,
+				payload: s
 			} }
 		});
-	}, o[7] = f, o[8] = s, o[9] = _) : _ = o[9];
-	let v = _, y = f.isPending || u.data?.status === WorkflowState.Running, b = u.data?.errorMessage, x;
-	return o[10] !== g || o[11] !== d.error || o[12] !== d.isLoading || o[13] !== d.isSuccess || o[14] !== u.data || o[15] !== u.isLoading || o[16] !== u.isSuccess || o[17] !== v || o[18] !== y || o[19] !== b ? (x = {
-		workflow: u.data,
-		workflowLoading: u.isLoading,
-		workflowReady: u.isSuccess,
-		workflowError: b,
-		documents: g,
-		documentsLoading: d.isLoading,
-		documentsReady: d.isSuccess,
-		documentsError: d.error,
-		isLoading: y,
-		handleRun: v
-	}, o[10] = g, o[11] = d.error, o[12] = d.isLoading, o[13] = d.isSuccess, o[14] = u.data, o[15] = u.isLoading, o[16] = u.isSuccess, o[17] = v, o[18] = y, o[19] = b, o[20] = x) : x = o[20], x;
+	}, m[8] = y, m[9] = h, m[10] = E) : E = m[10];
+	let D = E, O = y.isPending || _.data?.status === WorkflowState.Running, k = _.data?.errorMessage, A;
+	return m[11] !== T || m[12] !== v.error || m[13] !== v.isLoading || m[14] !== v.isSuccess || m[15] !== _.data || m[16] !== _.isLoading || m[17] !== _.isSuccess || m[18] !== D || m[19] !== O || m[20] !== k ? (A = {
+		workflow: _.data,
+		workflowLoading: _.isLoading,
+		workflowReady: _.isSuccess,
+		workflowError: k,
+		documents: T,
+		documentsLoading: v.isLoading,
+		documentsReady: v.isSuccess,
+		documentsError: v.error,
+		isLoading: O,
+		handleRun: D
+	}, m[11] = T, m[12] = v.error, m[13] = v.isLoading, m[14] = v.isSuccess, m[15] = _.data, m[16] = _.isLoading, m[17] = _.isSuccess, m[18] = D, m[19] = O, m[20] = k, m[21] = A) : A = m[21], A;
+}
+function _temp3(e) {
+	return !!e;
+}
+function _temp2(e) {
+	return !!e[0];
+}
+function _temp(e) {
+	return [getLlmMessageId(e), e];
 }
 export { useWorkflowData };

package/dist/features/workbench/index.js

@@ -1,12 +1,12 @@
-import { useWorkbenchLayout } from "./providers/WorkbenchLayoutProvider.js";
-import { WorkbenchSidebarShell } from "./components/WorkbenchSidebarShell.js";
 import WorkflowItem_default from "./WorkflowItem.js";
 import WorkflowHistoryList_default from "./components/WorkflowHistoryList.js";
 import WorkflowButtons_default from "./components/buttons/WorkflowButtons.js";
 import WorkflowList_default from "./WorkflowList.js";
+import { useWorkbenchLayout } from "./providers/WorkbenchLayoutProvider.js";
 import Workbench from "./Workbench.js";
 import { NewRunDialog } from "./components/NewRunDialog.js";
 import "./hooks/useEmbedBridge.js";
 import "./components/PreviewWorkbench.js";
 import { RecentRunItem } from "./components/RecentRunItem.js";
 import "./components/PreviewEmptyState.js";
+import { WorkbenchSidebarShell } from "./components/WorkbenchSidebarShell.js";

package/dist/features/workbench/providers/WorkbenchLayoutProvider.js

@@ -1,77 +1,77 @@
+import { useWorkspaceEnvironments } from "../../../hooks/useEnvironments.js";
 import { useOptionalStudioPreferences } from "../../../providers/StudioPreferencesProvider.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var WorkbenchLayoutContext = createContext(null);
-function WorkbenchLayoutProvider(o) {
-	let s = c(36), { children: l, workspaceId: u, workflow: d, workspaceConfig: f, getPreviewUrl: p, getEnvironmentPreviewUrl: m, environments: h } = o, g = useOptionalStudioPreferences(), [_, v] = useState(null), y;
-	s[0] === Symbol.for("react.memo_cache_sentinel") ? (y = {}, s[0] = y) : y = s[0];
-	let [b, x] = useState(y), S = g ? g.preferences.activePanel : _, C = g ? g.preferences.panelSizes : b, [w, T] = useState(null), [E, D] = useState(""), O = f?.features?.previewPanel?.enabled ?? !1, k;
-	s[1] === h ? k = s[2] : (k = h === void 0 || h.some(_temp), s[1] = h, s[2] = k);
-	let A = O && k, j;
-	s[3] === Symbol.for("react.memo_cache_sentinel") ? (j = {
+function WorkbenchLayoutProvider(s) {
+	let l = c(35), { children: u, workspaceId: d, workflow: f, getPreviewUrl: p, getEnvironmentPreviewUrl: m } = s, h = useOptionalStudioPreferences(), { data: g } = useWorkspaceEnvironments(d), [_, v] = useState(null), y;
+	l[0] === Symbol.for("react.memo_cache_sentinel") ? (y = {}, l[0] = y) : y = l[0];
+	let [b, x] = useState(y), S = h ? h.preferences.activePanel : _, C = h ? h.preferences.panelSizes : b, [w, T] = useState(null), [E, D] = useState(""), O;
+	l[1] === g ? O = l[2] : (O = g === void 0 || g.some(_temp), l[1] = g, l[2] = O);
+	let k = O, A;
+	l[3] === Symbol.for("react.memo_cache_sentinel") ? (A = {
 		runs: "medium",
 		preview: "medium",
 		files: "medium",
 		environment: "small"
-	}, s[3] = j) : j = s[3];
-	let M = j, N = S ? C[S] ?? M[S] ?? "small" : "small", P;
-	s[4] === g ? P = s[5] : (P = (t) => {
-		g ? g.setPreference("activePanel", t) : v(t);
-	}, s[4] = g, s[5] = P);
-	let F = P, I;
-	s[6] !== S || s[7] !== F ? (I = (t) => {
-		F(S === t ? null : t);
-	}, s[6] = S, s[7] = F, s[8] = I) : I = s[8];
-	let L = I, R;
-	s[9] === F ? R = s[10] : (R = () => {
-		F(null);
-	}, s[9] = F, s[10] = R);
-	let z = R, B;
-	s[11] !== S || s[12] !== C || s[13] !== g ? (B = (t) => {
+	}, l[3] = A) : A = l[3];
+	let j = A, M = S ? C[S] ?? j[S] ?? "small" : "small", N;
+	l[4] === h ? N = l[5] : (N = (e) => {
+		h ? h.setPreference("activePanel", e) : v(e);
+	}, l[4] = h, l[5] = N);
+	let P = N, F;
+	l[6] !== S || l[7] !== P ? (F = (e) => {
+		P(S === e ? null : e);
+	}, l[6] = S, l[7] = P, l[8] = F) : F = l[8];
+	let I = F, L;
+	l[9] === P ? L = l[10] : (L = () => {
+		P(null);
+	}, l[9] = P, l[10] = L);
+	let R = L, z;
+	l[11] !== S || l[12] !== C || l[13] !== h ? (z = (e) => {
 		if (!S) return;
-		let a = {
+		let o = {
 			...C,
-			[S]: t
+			[S]: e
 		};
-		g ? g.setPreference("panelSizes", a) : x(a);
-	}, s[11] = S, s[12] = C, s[13] = g, s[14] = B) : B = s[14];
-	let V = B, H;
-	s[15] === F ? H = s[16] : (H = (t) => {
-		D(t), F("preview");
-	}, s[15] = F, s[16] = H);
-	let U = H, W;
-	s[17] !== S || s[18] !== w || s[19] !== z || s[20] !== h || s[21] !== m || s[22] !== p || s[23] !== U || s[24] !== N || s[25] !== A || s[26] !== E || s[27] !== V || s[28] !== L || s[29] !== d || s[30] !== f || s[31] !== u ? (W = {
-		workspaceId: u,
-		workflow: d,
-		previewPanelEnabled: A,
-		workspaceConfig: f,
+		h ? h.setPreference("panelSizes", o) : x(o);
+	}, l[11] = S, l[12] = C, l[13] = h, l[14] = z) : z = l[14];
+	let B = z, V;
+	l[15] === P ? V = l[16] : (V = (e) => {
+		D(e), P("preview");
+	}, l[15] = P, l[16] = V);
+	let H = V, U;
+	l[17] !== S || l[18] !== w || l[19] !== R || l[20] !== g || l[21] !== m || l[22] !== p || l[23] !== H || l[24] !== M || l[25] !== k || l[26] !== E || l[27] !== B || l[28] !== I || l[29] !== f || l[30] !== d ? (U = {
+		workspaceId: d,
+		workflow: f,
+		previewPanelEnabled: k,
 		getPreviewUrl: p,
 		getEnvironmentPreviewUrl: m,
-		environments: h,
+		environments: g,
 		activePanel: S,
-		panelSize: N,
-		togglePanel: L,
-		closePanel: z,
-		setPanelSize: V,
+		panelSize: M,
+		togglePanel: I,
+		closePanel: R,
+		setPanelSize: B,
 		selectedSlotId: E,
 		setSelectedSlotId: D,
-		openPreviewWithEnvironment: U,
+		openPreviewWithEnvironment: H,
 		activeSectionId: w,
 		setActiveSectionId: T
-	}, s[17] = S, s[18] = w, s[19] = z, s[20] = h, s[21] = m, s[22] = p, s[23] = U, s[24] = N, s[25] = A, s[26] = E, s[27] = V, s[28] = L, s[29] = d, s[30] = f, s[31] = u, s[32] = W) : W = s[32];
-	let G = W, K;
-	return s[33] !== l || s[34] !== G ? (K = /* @__PURE__ */ jsx(WorkbenchLayoutContext.Provider, {
-		value: G,
-		children: l
-	}), s[33] = l, s[34] = G, s[35] = K) : K = s[35], K;
+	}, l[17] = S, l[18] = w, l[19] = R, l[20] = g, l[21] = m, l[22] = p, l[23] = H, l[24] = M, l[25] = k, l[26] = E, l[27] = B, l[28] = I, l[29] = f, l[30] = d, l[31] = U) : U = l[31];
+	let W = U, G;
+	return l[32] !== u || l[33] !== W ? (G = /* @__PURE__ */ jsx(WorkbenchLayoutContext.Provider, {
+		value: W,
+		children: u
+	}), l[32] = u, l[33] = W, l[34] = G) : G = l[34], G;
 }
-function _temp(t) {
-	return !!t.connectionUrl && (!!t.workerId || t.local);
+function _temp(e) {
+	return !!e.connectionUrl && (!!e.workerId || e.local);
 }
 function useWorkbenchLayout() {
-	let t = useContext(WorkbenchLayoutContext);
-	if (!t) throw Error("useWorkbenchLayout must be used within a WorkbenchLayoutProvider");
-	return t;
+	let e = useContext(WorkbenchLayoutContext);
+	if (!e) throw Error("useWorkbenchLayout must be used within a WorkbenchLayoutProvider");
+	return e;
 }
 export { WorkbenchLayoutProvider, useWorkbenchLayout };