@lobb-js/studio 0.1.31

package/src/extensions/extensionUtils.ts

@@ -0,0 +1,192 @@
+import type {
+  Components,
+  DashboardNavs,
+  Extension,
+  ExtensionUtils,
+} from "./extension.types";
+import { lobb } from "$lib";
+import { ctx } from "$lib/store.svelte";
+import { toast } from "svelte-sonner";
+import { showDialog } from "$lib/components/confirmationDialog/store.svelte";
+import { Button } from "$lib/components/ui/button";
+import { Input } from "$lib/components/ui/input";
+import { Separator } from "$lib/components/ui/separator";
+import { Skeleton } from "$lib/components/ui/skeleton";
+import Table from "$lib/components/dataTable/table.svelte";
+import { getFileFromUser, mediaQueries } from "$lib/utils";
+import LlmButton from "$lib/components/LlmButton.svelte";
+import Sidebar from "$lib/components/sidebar/sidebar.svelte";
+import SidebarTrigger from "$lib/components/sidebar/sidebarTrigger.svelte";
+import CreateDetailViewButton from "$lib/components/detailView/create/createDetailViewButton.svelte";
+import UpdateDetailViewButton from "$lib/components/detailView/update/updateDetailViewButton.svelte";
+import * as intlDate from "@internationalized/date";
+import * as Tooltip from "$lib/components/ui/tooltip";
+import * as Breadcrumb from "$lib/components/ui/breadcrumb";
+import { ContextMenu } from "bits-ui";
+import * as Popover from "$lib/components/ui/popover";
+import * as Icons from "lucide-svelte";
+import { location } from "@wjfe/n-savant";
+import RangeCalendarButton from "$lib/components/rangeCalendarButton.svelte";
+import DataTable from "$lib/components/dataTable/dataTable.svelte";
+import Drawer from "$lib/components/drawer.svelte";
+import SelectRecord from "$lib/components/selectRecord.svelte";
+import { Switch } from "$lib/components/ui/switch";
+
+export function getComponents(): Components {
+  return {
+    Button: Button,
+    Input: Input,
+    Separator: Separator,
+    Skeleton: Skeleton,
+    LlmButton: LlmButton,
+    Sidebar: Sidebar,
+    SidebarTrigger: SidebarTrigger,
+    CreateDetailViewButton: CreateDetailViewButton,
+    UpdateDetailViewButton: UpdateDetailViewButton,
+    Tooltip: Tooltip,
+    Breadcrumb: Breadcrumb,
+    ContextMenu: ContextMenu,
+    Popover: Popover,
+    Icons: Icons,
+    Table: Table,
+    RangeCalendarButton: RangeCalendarButton,
+    DataTable: DataTable,
+    Drawer: Drawer,
+    SelectRecord: SelectRecord,
+    Switch: Switch,
+  };
+}
+
+export function getExtensionUtils(): ExtensionUtils {
+  return {
+    ctx: ctx,
+    lobb: lobb,
+    location: location,
+    toast: toast,
+    showDialog: showDialog,
+    getFileFromUser: getFileFromUser,
+    components: getComponents(),
+    mediaQueries: mediaQueries,
+    intlDate: intlDate,
+  };
+}
+
+export function getExtensionsThatHasDash(): string[] {
+  const extensionNames = Object.keys(ctx.meta.extensions);
+
+  const extensionsWithDashExt = [];
+  for (let index = 0; index < extensionNames.length; index++) {
+    const extensionName = extensionNames[index];
+    const extensionMeta = ctx.meta.extensions[extensionName];
+    if (extensionMeta.hasDashboardExtension) {
+      extensionsWithDashExt.push(extensionName);
+    }
+  }
+
+  return extensionsWithDashExt;
+}
+
+export async function loadExtensions(studioExtensions?: any[]): Promise<Record<string, Extension>> {
+  const extensions: Record<string, Extension> = {};
+
+
+  if (studioExtensions) {
+    for (let index = 0; index < studioExtensions.length; index++) {
+      const studioExtension = studioExtensions[index](getExtensionUtils());
+      extensions[studioExtension.name] = studioExtension;
+    }
+  }
+
+  const extensionsThatHasDash = getExtensionsThatHasDash();
+  for (let index = 0; index < extensionsThatHasDash.length; index++) {
+    const extensionName = extensionsThatHasDash[index];
+
+    // Try to import locally-installed extension by name first
+    if (extensionName && extensions[extensionName]) {
+      continue;
+    }
+
+    // Fall back to remote import
+    try {
+      extensions[extensionName] = (
+        await import(
+          /* @vite-ignore */ `${ctx.lobbUrl}/api/extensions/${extensionName}/dashboard?v=${ctx.meta.extensions[extensionName]?.version}`
+        )
+      ).extension(getExtensionUtils());
+    } catch (error) {
+      console.warn(`Failed to load remote extension ${extensionName}`, error);
+    }
+  }
+
+  return extensions;
+}
+
+export function loadExtensionComponents(
+  name: string,
+  filterByExtensions?: string[],
+): any[] {
+  const components = [];
+  for (const [extensionName, extensionValue] of Object.entries(
+    ctx.extensions,
+  )) {
+    if (filterByExtensions && !filterByExtensions.includes(extensionName)) {
+      continue;
+    }
+    if (extensionValue.components) {
+      for (const [componentName, componentValue] of Object.entries(
+        extensionValue.components,
+      )) {
+        if (name.startsWith(componentName)) {
+          components.push(componentValue);
+        }
+      }
+    }
+  }
+  return components;
+}
+
+export async function executeExtensionsOnStartup() {
+  const extensionNames: string[] = Object.keys(ctx.extensions);
+  for (let index = 0; index < extensionNames.length; index++) {
+    const extensionName = extensionNames[index];
+    const extension = ctx.extensions[extensionName];
+    if (extension) {
+      if (extension.onStartup) {
+        await extension.onStartup(getExtensionUtils());
+      }
+    }
+  }
+}
+
+export function getDashboardNavs(): DashboardNavs {
+  let navs: DashboardNavs = {
+    top: [],
+    middle: [],
+    bottom: [],
+  };
+  const extensionNames: string[] = Object.keys(ctx.extensions);
+  for (let index = 0; index < extensionNames.length; index++) {
+    const extensionName = extensionNames[index];
+    const extension = ctx.extensions[extensionName];
+    if (extension) {
+      if (extension.dashboardNavs && extension.dashboardNavs.top && navs.top) {
+        navs.top = [...navs.top, ...extension.dashboardNavs.top];
+      }
+      if (
+        extension.dashboardNavs &&
+        extension.dashboardNavs.middle &&
+        navs.middle
+      ) {
+        navs.middle = [...navs.middle, ...extension.dashboardNavs.middle];
+      }
+      if (
+        extension.dashboardNavs &&
+        extension.dashboardNavs.bottom &&
+        navs.bottom
+      ) {
+        navs.bottom = [...navs.bottom, ...extension.dashboardNavs.bottom];
+      }
+    }
+  }
+  return navs;
+}

package/src/lib/Lobb.ts

@@ -0,0 +1,241 @@
+import qs from "qs";
+import { parseFunction } from "./utils";
+
+interface RouteParams {
+    method: string;
+    route: string;
+    payload?: any;
+}
+
+type OnResponseHandlers = (reponse: Response) => void;
+
+export class Lobb {
+    public lobbUrl: string;
+    private headers: HeadersInit = [];
+    private onResponseHandlers: Array<OnResponseHandlers> = [];
+
+    constructor(lobbUrl: string) {
+        this.lobbUrl = lobbUrl;
+    }
+
+    public async onResponse(callback: OnResponseHandlers) {
+        this.onResponseHandlers.push(callback);
+    }
+
+    public setHeaders(headers: HeadersInit) {
+        this.headers = headers;
+    }
+
+    public getHeaders() {
+        return this.headers;
+    }
+
+    public async getMeta() {
+        const response = await fetch(`${this.lobbUrl}/api/meta`, {
+            headers: this.headers,
+        });
+
+        const metaResponse = await this.handleResponse(response);
+        const meta = await metaResponse.json();
+
+        meta.studio_workflows = meta.studio_workflows.map((workflow: any) => {
+            return {
+                ...workflow,
+                handler: parseFunction(workflow.handler),
+            };
+        });
+
+        return meta;
+    }
+
+    // CRUD methods
+    public async findAll(collectionName: string, params: any) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}/search`,
+            {
+                method: "POST",
+                headers: this.headers,
+                body: JSON.stringify(params),
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async findOne(
+        collectionName: string,
+        id: string,
+        queryParams?: any,
+    ) {
+        queryParams = queryParams ? `?${qs.stringify(queryParams)}` : "";
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}/${id}${queryParams}`,
+            {
+                method: "GET",
+                headers: this.headers,
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async createOne(collectionName: string, body: any, file?: File) {
+        if (file) {
+            const formData = new FormData();
+            Object.keys(body).forEach((key) => {
+                formData.append(key, body[key]);
+            });
+            formData.append("file", file, file.name);
+            formData.append(
+                "payload",
+                JSON.stringify({
+                    data: body,
+                }),
+            );
+            body = formData;
+        } else {
+            body = JSON.stringify({
+                data: body,
+            });
+        }
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}`,
+            {
+                method: "POST",
+                headers: this.headers,
+                body,
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async updateOne(collectionName: string, id: string, body: any) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}/${id}`,
+            {
+                method: "PATCH",
+                headers: this.headers,
+                body: JSON.stringify({
+                    data: body,
+                }),
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async readSingleton(
+        collectionName: string,
+    ) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}/singleton`,
+            {
+                method: "GET",
+                headers: this.headers,
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async updateSingleton(
+        collectionName: string,
+        body: Record<string, any>
+    ) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}/singleton`,
+            {
+                method: "PATCH",
+                headers: this.headers,
+                body: JSON.stringify({
+                    data: body,
+                }),
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async deleteOne(collectionName: string, id: string, force = false) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}/${id}${force ? "?force" : ""}`,
+            {
+                method: "DELETE",
+                headers: this.headers,
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async deleteMany(collectionName: string, filter: any, force = false) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}${force ? "?force" : ""}`,
+            {
+                method: "DELETE",
+                headers: this.headers,
+                body: JSON.stringify({
+                    filter,
+                }),
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async createMany(collectionName: string, body: any) {
+        body = JSON.stringify({
+            data: body,
+        });
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}`,
+            {
+                method: "POST",
+                headers: this.headers,
+                body,
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async updateMany(collectionName: string, body: any, filter: any) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}`,
+            {
+                method: "PATCH",
+                headers: this.headers,
+                body: JSON.stringify({
+                    filter,
+                    data: body,
+                }),
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async transactions(body: any[], rollback?: boolean) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/transactions${
+                rollback ? "?rollback" : ""
+            }`,
+            {
+                method: "POST",
+                headers: this.headers,
+                body: JSON.stringify(body),
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    // CUSTOM REQUEST methods
+    public async request(params: RouteParams) {
+        const response = await fetch(`${this.lobbUrl}${params.route}`, {
+            method: params.method,
+            headers: this.headers,
+            body: JSON.stringify(params.payload),
+        });
+        return await this.handleResponse(response);
+    }
+
+    // HELPER methods
+    private async handleResponse(response: Response): Promise<Response> {
+        for (let index = 0; index < this.onResponseHandlers.length; index++) {
+            const handler = this.onResponseHandlers[index];
+            handler(response.clone());
+        }
+        return response;
+    }
+}

package/src/lib/components/LlmButton.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { lobb } from "$lib";
+	import { Brain, LoaderIcon, Send } from "lucide-svelte";
+	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";
+	import { ctx } from "$lib/store.svelte";
+
+	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/alertView.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import * as Alert from "$lib/components/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 { ctx } from "$lib/store.svelte";
+	import { mediaQueries } from "$lib/utils";
+	import { location } from "@wjfe/n-savant";
+
+	const isSmall = $derived(!mediaQueries.sm.current);
+	const pathNames = $derived(
+		location.url.pathname
+			.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(`/`)}
+					>
+						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(`/${currentFullPaths}`)}
+						>
+							{path}
+						</Breadcrumb.Link>
+					{/if}
+				</Breadcrumb.Item>
+				{#if !isLastElement}
+					<Breadcrumb.Separator />
+				{/if}
+			{/each}
+		</Breadcrumb.List>
+	</Breadcrumb.Root>
+{/if}