@lobb-js/studio 0.7.2 → 0.8.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "files": [
+    "src",
     "dist",
     "vite-plugins"
   ],

package/src/App.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Studio from "./lib/components/Studio.svelte";
+</script>
+
+<Studio />

package/src/app.css

@@ -0,0 +1,124 @@
+@import "tailwindcss";
+
+@import "tw-animate-css";
+
+@source "../../../packages";
+@source "../node_modules/@lobb-js";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/lib/components/LlmButton.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { getStudioContext } from "../context";
+	import { Brain, LoaderIcon, Send } from "lucide-svelte";
+
+	const { lobb, ctx } = getStudioContext();
+	import Button, { type ButtonProps } from "./ui/button/button.svelte";
+	import * as Popover from "./ui/popover";
+	import Textarea from "./ui/textarea/textarea.svelte";
+	import { toast } from "svelte-sonner";
+
+	interface LocalProp {
+		value?: any;
+		title: string;
+		description?: string;
+		placeholder?: string;
+		format?: any;
+		messages?: any[];
+		variant?: ButtonProps["variant"];
+		class?: ButtonProps["class"];
+		Icon?: ButtonProps["Icon"];
+		children?: ButtonProps["children"];
+		onApiResponseComplete?: (res: any) => Promise<void>;
+	}
+
+	let {
+		value = $bindable(),
+		title,
+		description,
+		placeholder = "write prompt description",
+		variant = "default",
+		Icon = Brain,
+		onApiResponseComplete,
+		messages,
+		format = { type: "text" },
+		...props
+	}: LocalProp = $props();
+
+	let loading = $state(false);
+	let popoverOpen = $state(false);
+	let prompt = $state("");
+
+	let localMessages: any[] = [];
+	if (messages) {
+		localMessages.push(...messages);
+	}
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		popoverOpen = false;
+		if (prompt) {
+			const response = await fetch(
+				`${lobb.lobbUrl}/api/collections/llm_chat`,
+				{
+					method: "POST",
+					headers: lobb.getHeaders(),
+					body: JSON.stringify({
+						stream: true,
+						format: format,
+						messages: [
+							...localMessages,
+							{
+								role: "user",
+								content: prompt,
+							},
+						],
+					}),
+				},
+			);
+			if (response.ok && response.body) {
+				value = "";
+				const reader = response.body.getReader();
+				const textDecoder = new TextDecoder();
+				let done = false;
+				while (!done) {
+					const { done: readerDone, ...stream } = await reader.read();
+					const llmValue = stream.value;
+					done = readerDone;
+					const chunk = textDecoder.decode(llmValue, {
+						stream: true,
+					});
+					value += chunk;
+				}
+				if (format.type === "json_object") {
+					value = JSON.stringify(JSON.parse(value), null, 2);
+				}
+			} else {
+				toast.error("Failed to fetch stream");
+			}
+		}
+		if (onApiResponseComplete) {
+			await onApiResponseComplete(value);
+		}
+		loading = false;
+	}
+</script>
+
+{#if ctx.meta.extensions.llm && ctx.meta.collections.llm_chat}
+	<Popover.Root bind:open={popoverOpen}>
+		<Popover.Trigger>
+			<Button {variant} class={props.class}>
+				{#if loading}
+					<LoaderIcon class="animate-spin" />
+				{:else}
+					<Icon />
+				{/if}
+				{#if props.children}
+					{@render props.children()}
+				{/if}
+			</Button>
+		</Popover.Trigger>
+		<Popover.Content collisionPadding={20} class="mt-2 w-screen max-w-[20rem]">
+			<form
+				onsubmit={handleSubmit}
+				class="flex flex-col items-start gap-4"
+			>
+				<div>
+					<div class="text-sm font-semibold">{title}</div>
+					<div class="text-xs text-muted-foreground">
+						{description}
+					</div>
+				</div>
+				<Textarea
+					bind:value={prompt}
+					placeholder="Type here..."
+					rows={5}
+					class="bg-muted text-xs"
+				/>
+				<Button
+					type="submit"
+					Icon={Send}
+					class="h-7 px-3 text-xs font-normal">Submit</Button
+				>
+			</form>
+		</Popover.Content>
+	</Popover.Root>
+{/if}

package/src/lib/components/Studio.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+    import { Toaster } from "../components/ui/sonner";
+    import { onMount, onDestroy } from "svelte";
+    import { ModeWatcher } from "mode-watcher";
+    import { createLobb } from "../store.svelte";
+    import { setStudioContext } from "../context";
+    import Header from "../components/header.svelte";
+    import { LoaderCircle, ServerOff } from "lucide-svelte";
+    import MiniSidebar from "../components/miniSidebar.svelte";
+    import * as Tooltip from "../components/ui/tooltip";
+    import { Router, Route, Fallback, init as initRouter } from "@wjfe/n-savant";
+    import {
+        executeExtensionsOnStartup,
+        loadExtensions,
+    } from "../extensions/extensionUtils";
+    import extensionMap from 'virtual:lobb-studio-extensions';
+    import { mediaQueries } from "../utils";
+    import Home from "./routes/home.svelte";
+    import DataModel from "./routes/data_model/dataModel.svelte";
+    import Collections from "./routes/collections/collections.svelte";
+    import Workflows from "./routes/workflows/workflows.svelte";
+    import Extension from "./routes/extensions/extension.svelte";
+
+    interface StudioProps {
+        lobbUrl?: string;
+    }
+
+    const { lobbUrl }: StudioProps = $props();
+
+    const ctx = $state({
+        lobbUrl: lobbUrl ?? "",
+        extensions: {},
+        meta: null,
+        currentUrl: new URL(window.location.href),
+    });
+
+    const lobb = createLobb(lobbUrl ?? "");
+
+    setStudioContext({ ctx, lobb });
+
+    let status: "loading" | "error" | "ready" = $state("loading");
+    let isSmallScreen = $derived(!mediaQueries.sm.current);
+    let cleanupRouter: (() => void) | undefined;
+
+    onMount(async () => {
+        cleanupRouter = initRouter();
+        try {
+            ctx.meta = await lobb.getMeta();
+            ctx.extensions = await loadExtensions(lobb, ctx, extensionMap);
+            await executeExtensionsOnStartup(lobb, ctx);
+            status = "ready";
+        } catch (err) {
+            console.error(err);
+            status = "error";
+        }
+    });
+
+    onDestroy(() => {
+        if (cleanupRouter) cleanupRouter();
+    });
+</script>
+
+<ModeWatcher defaultMode="light" />
+<Toaster position="top-right" class="z-50" />
+
+{#if status === "loading"}
+    <div class="flex h-screen w-full flex-col items-center justify-center gap-4 text-muted-foreground">
+        <LoaderCircle class="animate-spin opacity-50" size="50" />
+        <div class="flex flex-col items-center justify-center">
+            <div>Loading the dashboard, please wait...</div>
+            <div class="text-xs">Loading and importing all necessary data and components from the lobb server.</div>
+        </div>
+    </div>
+{:else if status === "error"}
+    <div class="flex h-screen w-full flex-col items-center justify-center gap-4 text-muted-foreground">
+        <ServerOff class="opacity-50" size="50" />
+        <div class="flex flex-col items-center justify-center">
+            <div>Could not connect to the server</div>
+            <div class="text-xs">Could not connect to the lobb server at this endpoint ({ctx.lobbUrl})</div>
+        </div>
+    </div>
+{:else}
+    <Tooltip.Provider delayDuration={0} disableHoverableContent={true}>
+        <main
+            class="bg-muted h-screen w-screen"
+            style="display: grid; grid-template-columns: {isSmallScreen ? '1fr' : '3.5rem 1fr'};"
+        >
+            <MiniSidebar />
+            <div class="second_grid">
+                <Header />
+                <Router id="root-router" basePath="/studio">
+                    <Route key="home" path="/">
+                        {#snippet children(params)}
+                            <Home />
+                        {/snippet}
+                    </Route>
+                    <Route key="collections" path="/collections/:collection?">
+                        {#snippet children(params)}
+                            <Collections collectionName={params?.collection} />
+                        {/snippet}
+                    </Route>
+                    <Route key="datamodel" path="/datamodel/*">
+                        {#snippet children(params)}
+                            <DataModel />
+                        {/snippet}
+                    </Route>
+                    <Route key="workflows" path="/workflows/:workflow?">
+                        {#snippet children(params)}
+                            <Workflows workflowName={params?.workflow} />
+                        {/snippet}
+                    </Route>
+                    <Route key="extensions" path="/extensions/:extension?/:page?/*">
+                        {#snippet children(params)}
+                            <Extension extension={params?.extension} page={params?.page} />
+                        {/snippet}
+                    </Route>
+                    <Fallback>Not Found</Fallback>
+                </Router>
+            </div>
+        </main>
+    </Tooltip.Provider>
+{/if}
+
+<style>
+    .second_grid {
+        display: grid;
+        grid-template-rows: 2.5rem 1fr;
+    }
+</style>

package/src/lib/components/alertView.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import * as Alert from "./ui/alert/index.js";
+  import { AlertCircleIcon } from "lucide-svelte";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    title: string;
+    children: Snippet<[]>;
+  }
+
+  const { title, children }: Props = $props();
+</script>
+
+<Alert.Root variant="destructive">
+    <AlertCircleIcon />
+    <Alert.Title>{title}</Alert.Title>
+    <Alert.Description>
+      {@render children?.()}
+    </Alert.Description>
+</Alert.Root>

package/src/lib/components/breadCrumbs.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import * as Breadcrumb from "./ui/breadcrumb";
+	import { mediaQueries } from "../utils";
+	import { location } from "@wjfe/n-savant";
+
+	const isSmall = $derived(!mediaQueries.sm.current);
+	const pathNames = $derived(
+		location.url.pathname
+			.replace("/studio", "")
+			.split("/")
+			.filter((el: any) => el !== "")
+			.slice(0, 3),
+	);
+</script>
+
+{#if isSmall}
+	<div class="text-muted-foreground text-sm">
+		{pathNames[pathNames.length - 1] || "Home"}
+	</div>
+{:else}
+	<Breadcrumb.Root>
+		<Breadcrumb.List class="flex-nowrap">
+			<Breadcrumb.Item>
+				{#if pathNames.length === 0}
+					<Breadcrumb.Page>Home</Breadcrumb.Page>
+				{:else}
+					<Breadcrumb.Link
+						class="cursor-pointer"
+						onclick={() => location.navigate("/studio")}
+					>
+						Home
+					</Breadcrumb.Link>
+					<Breadcrumb.Separator />
+				{/if}
+			</Breadcrumb.Item>
+			{#each pathNames as path, index}
+				{@const isLastElement = pathNames.length - 1 === index}
+				{@const currentFullPaths = pathNames
+					.slice(0, index + 1)
+					.join("/")}
+				<Breadcrumb.Item>
+					{#if isLastElement}
+						<Breadcrumb.Page>{path}</Breadcrumb.Page>
+					{:else}
+						<Breadcrumb.Link
+							class="cursor-pointer"
+							onclick={() =>
+								location.navigate(`/studio/${currentFullPaths}`)}
+						>
+							{path}
+						</Breadcrumb.Link>
+					{/if}
+				</Breadcrumb.Item>
+				{#if !isLastElement}
+					<Breadcrumb.Separator />
+				{/if}
+			{/each}
+		</Breadcrumb.List>
+	</Breadcrumb.Root>
+{/if}

package/src/lib/components/codeEditor.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { keymap } from '@codemirror/view';
+	import { EditorState } from '@codemirror/state';
+	import { basicSetup, EditorView } from 'codemirror';
+	import { javascript } from '@codemirror/lang-javascript';
+	import { sql } from '@codemirror/lang-sql';
+	import { oneDark } from '@codemirror/theme-one-dark';
+	import { cn } from '../utils.js';
+
+	interface Props {
+		type: 'javascript' | 'typescript' | 'json' | 'sql';
+		name: string;
+		value?: string;
+		default?: string;
+		types?: string;
+		class?: string;
+		handleCtrlSave?: () => void;
+		onChange?: (value: string) => void;
+	}
+
+	let {
+		type,
+		name,
+		value = $bindable(''),
+		class: className,
+		types,
+		handleCtrlSave,
+		onChange,
+		...props
+	}: Props = $props();
+
+	if (props.default) {
+		value = props.default;
+	}
+
+	let editorContainer: HTMLDivElement;
+	let editorView: EditorView | null = null;
+
+	const getLanguageExtension = () => {
+		switch (type) {
+			case 'javascript':
+			case 'typescript':
+			case 'json':
+				return javascript();
+			case 'sql':
+				return sql();
+			default:
+				return javascript();
+		}
+	};
+
+	const createEditor = () => {
+		if (!editorContainer) return;
+
+		const extensions = [
+			basicSetup,
+			getLanguageExtension(),
+			EditorView.updateListener.of((update) => {
+				if (update.docChanged) {
+					const newValue = update.state.doc.toString();
+					value = newValue;
+					onChange?.(newValue);
+				}
+			}),
+			EditorView.theme({
+				'&': {
+					backgroundColor: 'transparent',
+				},
+				'.cm-gutters': {
+					backgroundColor: 'transparent',
+					border: 'none',
+				},
+				'.cm-content': {
+					paddingTop: '10px',
+					paddingBottom: '1px',
+				}
+			})
+		];
+
+		// Add Ctrl+S / Cmd+S handler if provided
+		if (handleCtrlSave) {
+			extensions.push(
+				keymap.of([
+					{
+						key: 'Mod-s',
+						run: () => {
+							handleCtrlSave();
+							return true;
+						}
+					}
+				])
+			);
+		}
+
+		const state = EditorState.create({
+			doc: value,
+			extensions
+		});
+
+		editorView = new EditorView({
+			state,
+			parent: editorContainer
+		});
+	};
+
+	const updateEditor = () => {
+		if (!editorView) return;
+
+		const currentValue = editorView.state.doc.toString();
+		if (currentValue !== value) {
+			editorView.dispatch({
+				changes: {
+					from: 0,
+					to: currentValue.length,
+					insert: value
+				}
+			});
+		}
+	};
+
+	onMount(() => {
+		createEditor();
+	});
+
+	onDestroy(() => {
+		editorView?.destroy();
+	});
+
+	$effect(() => {
+		updateEditor();
+	});
+</script>
+
+<div class={cn('resize-y rounded-md border bg-muted/30 h-60', className)}>
+	<div bind:this={editorContainer} class="h-full w-full pl-2" />
+</div>
+
+<style>
+	:global(.cm-editor) {
+		height: 100%;
+		font-size: 14px;
+	}
+
+	:global(.cm-scroller) {
+		overflow: auto;
+	}
+
+	:global(.cm-focused) {
+		outline: none !important;
+	}
+</style>