@prostgles/prostgles 2.3.6-dev.1786548258

package/client/src/dashboard/AskLLM/Chat/AskLLMChatMessages/ProstglesToolUseMessage/ProstglesMCPTools/DoclingConvertedDocument/DoclingDocument.d.ts

@@ -0,0 +1,154 @@
+type DoclingBBox = {
+  l: number;
+  t: number;
+  r: number;
+  b: number;
+  coord_origin: "BOTTOMLEFT" | "TOPLEFT";
+};
+
+export type DoclingDocument = {
+  schema_name: "DoclingDocument";
+  version: "1.9.0";
+  name: "blob";
+  origin: {
+    mimetype: "application/pdf";
+    binary_hash: number;
+    filename: "blob";
+    uri: null;
+  };
+  furniture: {
+    self_ref: "#/furniture";
+    parent: null;
+    children: [];
+    content_layer: "furniture";
+    meta: null;
+    name: "_root_";
+    label: "unspecified";
+  };
+  body: {
+    self_ref: "#/body";
+    parent: null;
+    children: {
+      $ref: string;
+    }[];
+    content_layer: "body";
+    meta: null;
+    name: "_root_";
+    label: "unspecified";
+  };
+  groups: [];
+  texts: {
+    self_ref: string;
+    parent: {
+      $ref: string;
+    };
+    children: [];
+    content_layer: "body";
+    meta: null;
+    label:
+      | "section_header"
+      | "list_item"
+      | "paragraph"
+      | "footnote"
+      | "caption"
+      | "table_cell";
+    prov: [
+      {
+        page_no: number;
+        bbox: DoclingBBox;
+        charspan: [number, number];
+      },
+    ];
+    /**
+     * original text extracted from the source document,
+     * preserving its source form as closely as Docling retained it.
+     */
+    orig: string;
+    /**
+     * Docling’s processed or normalized text, intended for structured export and downstream use.
+     * It may have cleanup or normalization applied, such as whitespace or character handling.
+     */
+    text: string;
+    formatting: null;
+    hyperlink: null;
+    level?: number;
+  }[];
+  pictures: [];
+  tables: {
+    self_ref: string;
+    parent: {
+      $ref: string;
+    };
+    children: [];
+    content_layer: "body";
+    meta: null;
+    label: "table";
+    prov: [
+      {
+        page_no: number;
+        bbox: DoclingBBox;
+        charspan: [number, number];
+      },
+    ];
+    captions: [];
+    references: [];
+    footnotes: [];
+    image: null | DoclingImage;
+    data: {
+      table_cells: {
+        bbox: DoclingBBox;
+        row_span: 1;
+        col_span: 1;
+        start_row_offset_idx: 0;
+        end_row_offset_idx: 1;
+        start_col_offset_idx: 0;
+        end_col_offset_idx: 1;
+        text: string;
+        column_header: false;
+        row_header: false;
+        row_section: false;
+        fillable: false;
+      }[];
+      num_rows: number;
+      num_cols: number;
+      grid: {
+        bbox: DoclingBBox;
+        row_span: number;
+        col_span: number;
+        start_row_offset_idx: 0;
+        end_row_offset_idx: 1;
+        start_col_offset_idx: 0;
+        end_col_offset_idx: 1;
+        text: string;
+        column_header: false;
+        row_header: false;
+        row_section: false;
+        fillable: false;
+      }[][];
+    };
+    annotations: [];
+  }[];
+  key_value_items: [];
+  form_items: [];
+  pages: Record<
+    string,
+    {
+      size: {
+        width: number;
+        height: number;
+      };
+      image: null | DoclingImage;
+      page_no: 1;
+    }
+  >;
+};
+
+type DoclingImage = {
+  mimetype: "image/png";
+  dpi: 144;
+  size: {
+    width: 750;
+    height: 900;
+  };
+  uri: string;
+};

package/client/src/dashboard/AskLLM/Chat/AskLLMChatMessages/ProstglesToolUseMessage/ProstglesMCPTools/DoclingConvertedDocument/DoclingDocumentViewer.tsx

@@ -0,0 +1,98 @@
+import Btn from "@components/Btn";
+import { FlexCol } from "@components/Flex";
+import { MarkdownWithPlugins } from "@components/MarkdownWithPlugins/MarkdownWithPlugins";
+import { mdiEye } from "@mdi/js";
+import React, { useState } from "react";
+import { usePrglCore } from "src/useAppState/PrglCoreContextProvider";
+import type { DoclingDocument } from "./DoclingDocument";
+import { DoclingTable } from "./DoclingTable";
+import { DoclingText } from "./DoclingText";
+import PopupMenu from "@components/PopupMenu";
+import { DoclingDocumentViewerPage } from "./DoclingDocumentViewerPage";
+
+type P = {
+  document: DoclingDocument | undefined;
+  markdownContent: string;
+  data:
+    | {
+        blobWithType: Blob;
+        contentType: string;
+      }
+    | undefined;
+};
+
+export const DoclingDocumentViewer = ({
+  data,
+  document: documentFromProps,
+  markdownContent,
+}: P) => {
+  const {
+    dbsMethods: { getDocumentText },
+  } = usePrglCore();
+  const [reparsedJson, setReparsedJson] = useState<DoclingDocument>();
+  const document = reparsedJson || documentFromProps;
+  if (document) {
+    return (
+      <FlexCol className="relative gap-2 o-auto p-1 max-w-full min-w-0">
+        {Object.values(document.pages).map((page) => (
+          <FlexCol key={page.page_no} className="b b-color p-1 gap-1">
+            <div>Page {page.page_no}</div>
+            <DoclingDocumentViewerPage
+              document={document}
+              pageNumber={page.page_no}
+            />
+          </FlexCol>
+        ))}
+      </FlexCol>
+    );
+  }
+
+  return (
+    <FlexCol>
+      <MarkdownWithPlugins content={markdownContent} />
+      {getDocumentText && data && (
+        <Btn
+          className="ml-auto"
+          iconPath={mdiEye}
+          color="action"
+          variant="faded"
+          onClickPromise={async () => {
+            const res = await getDocumentText({
+              files: [
+                {
+                  name: "file",
+                  data: data.blobWithType,
+                  type: data.contentType,
+                },
+              ],
+              options: {
+                image_export_mode: "embedded",
+                to_formats: ["json"],
+              },
+            });
+            setReparsedJson(res.document.json_content as DoclingDocument);
+          }}
+        >
+          Show original layout
+        </Btn>
+      )}
+    </FlexCol>
+  );
+};
+
+export const DoclingDocumentViewerPopupBtn = (props: P) => {
+  return (
+    <PopupMenu
+      title="Parsed document"
+      positioning="fullscreen"
+      onClickClose={false}
+      button={
+        <Btn iconPath={mdiEye} color="action" variant="faded">
+          Show parsed document
+        </Btn>
+      }
+    >
+      <DoclingDocumentViewer {...props} />
+    </PopupMenu>
+  );
+};

package/client/src/dashboard/AskLLM/Chat/AskLLMChatMessages/ProstglesToolUseMessage/ProstglesMCPTools/DoclingConvertedDocument/DoclingDocumentViewerPage.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import type { DoclingDocument } from "./DoclingDocument";
+import { DoclingTable } from "./DoclingTable";
+import { DoclingText } from "./DoclingText";
+
+export const DoclingDocumentViewerPage = ({
+  document,
+  pageNumber,
+}: {
+  pageNumber: number;
+  document: DoclingDocument;
+}) => {
+  const page = document.pages[String(pageNumber)];
+  if (!page) {
+    return <div>Page {pageNumber} not found</div>;
+  }
+  const { image, page_no, size } = page;
+  const displaySize = image?.size ?? size;
+  return (
+    <div
+      className="DoclingDocumentViewerPage relative docling-page-content"
+      style={{
+        // width: displaySize.width + "px",
+        // height: displaySize.height + "px",
+        height: "100%",
+        width: "100%",
+        containerType: "inline-size",
+        aspectRatio: `${displaySize.width} / ${displaySize.height}`,
+      }}
+    >
+      {image && (
+        <img
+          src={image.uri}
+          alt={`Page ${page_no}`}
+          style={{ maxWidth: "100%", height: "auto" }}
+        />
+      )}
+      <DoclingText texts={document.texts} page={page} />
+      <DoclingTable tables={document.tables} page={page} />
+    </div>
+  );
+};

package/client/src/dashboard/AskLLM/Chat/AskLLMChatMessages/ProstglesToolUseMessage/ProstglesMCPTools/DoclingConvertedDocument/DoclingTable.tsx

@@ -0,0 +1,166 @@
+import React from "react";
+import type { DoclingDocument } from "./DoclingDocument";
+
+type PageType = DoclingDocument["pages"][string];
+
+export const DoclingTable = ({
+  tables,
+  page,
+}: Pick<DoclingDocument, "tables"> & {
+  page: PageType;
+}) => {
+  const pageNo = page.page_no;
+
+  const pageTables = tables.filter((tbl) =>
+    tbl.prov.some((p) => p.page_no === pageNo),
+  );
+
+  return (
+    <>
+      {pageTables.map((table, tableIdx) => {
+        const tableProv = table.prov.find((p) => p.page_no === pageNo);
+        if (!tableProv) return null;
+
+        const tableRect = toCssRect(tableProv.bbox, page, "");
+        const { image } = table;
+        return (
+          <React.Fragment key={table.self_ref + ":" + tableIdx}>
+            <div
+              className={image ? "show-on-hover " : ""}
+              title={"Table " + (tableIdx + 1)}
+              style={{
+                position: "absolute",
+                pointerEvents: "none",
+                outline: "2px solid rgba(0, 123, 255, 0.9)",
+                background: "rgba(0, 123, 255, 0.08)",
+                ...tableRect,
+              }}
+            />
+            {table.data.table_cells.map((cell, cellIdx) => {
+              const cellRect = toCssRect(cell.bbox, page, cell.text);
+
+              return (
+                <div
+                  key={table.self_ref + ":cell:" + cellIdx}
+                  title={cell.text}
+                  className={
+                    (image ? "show-on-hover " : "") + " ta-start bg-warning"
+                  }
+                  style={{
+                    position: "absolute",
+                    overflow: "hidden",
+                    whiteSpace: "pre-wrap",
+                    textOverflow: "ellipsis",
+                    lineHeight: 1.2,
+                    ...cellRect,
+                  }}
+                >
+                  {cell.text}
+                </div>
+              );
+            })}
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+};
+
+const getEstimatedFontSizePx = (
+  text: string,
+  rect: { widthPx: number; heightPx: number },
+) => {
+  const lines = text.split("\n");
+  const lineCount = Math.max(lines.length, 1);
+  const longestLine = Math.max(...lines.map((l) => l.length), 1);
+
+  // Rough character width ~= 0.55em, line height ~= 1.2em
+  const byWidth = rect.widthPx / (longestLine * 0.55);
+  const byHeight = rect.heightPx / (lineCount * 1.2);
+
+  return Math.max(7, Math.min(22, Math.min(byWidth, byHeight)));
+};
+
+// const toCssRect = (
+//   bbox: {
+//     l: number;
+//     t: number;
+//     r: number;
+//     b: number;
+//     coord_origin: "BOTTOMLEFT" | "TOPLEFT";
+//   },
+//   page: PageType,
+//   text: string,
+// ) => {
+//   const { image, size } = page;
+//   const displaySize = image?.size ?? size;
+//   const scaleX = displaySize.width / size.width;
+//   const scaleY = displaySize.height / size.height;
+
+//   const leftPx = bbox.l * scaleX;
+//   const widthPx = Math.max(1, (bbox.r - bbox.l) * scaleX);
+
+//   const isBottomLeft = bbox.coord_origin === "BOTTOMLEFT";
+//   const topDoc = isBottomLeft ? size.height - bbox.t : bbox.t;
+//   const bottomDoc = isBottomLeft ? size.height - bbox.b : bbox.b;
+
+//   const topPx = topDoc * scaleY;
+//   const heightPx = Math.max(1, (bottomDoc - topDoc) * scaleY);
+//   const fontSizePx = getEstimatedFontSizePx(text, {
+//     widthPx,
+//     heightPx,
+//   });
+//   const fontSize = `${fontSizePx}px`;
+
+//   return {
+//     left: leftPx + "px",
+//     top: topPx + "px",
+//     width: widthPx + "px",
+//     height: heightPx + "px",
+//     fontSize,
+//   };
+// };
+
+const toCssRect = (
+  bbox: {
+    l: number;
+    t: number;
+    r: number;
+    b: number;
+    coord_origin: "BOTTOMLEFT" | "TOPLEFT";
+  },
+  page: PageType,
+  text: string,
+) => {
+  const { image, size } = page;
+  const displaySize = image?.size ?? size;
+  const scaleX = displaySize.width / size.width;
+  const scaleY = displaySize.height / size.height;
+
+  const leftPx = bbox.l * scaleX;
+  const widthPx = (bbox.r - bbox.l) * scaleX;
+
+  const isBottomLeft = bbox.coord_origin === "BOTTOMLEFT";
+  const topDoc = isBottomLeft ? size.height - bbox.t : bbox.t;
+  const bottomDoc = isBottomLeft ? size.height - bbox.b : bbox.b;
+  const topPx = topDoc * scaleY;
+  const heightPx = (bottomDoc - topDoc) * scaleY;
+
+  return {
+    left: `${(leftPx * 100) / displaySize.width}%`,
+    top: `${(topPx * 100) / displaySize.height}%`,
+    width: `${(widthPx * 100) / displaySize.width}%`,
+    height: `${(heightPx * 100) / displaySize.height}%`,
+    widthPx,
+    heightPx,
+    fontSize: `${
+      (getEstimatedFontSizePx(text, {
+        widthPx,
+        heightPx,
+      }) *
+        100) /
+      displaySize.width
+    }cqw`,
+    borderWidth: `${200 / displaySize.width}cqw`,
+  };
+};

package/client/src/dashboard/AskLLM/Chat/AskLLMChatMessages/ProstglesToolUseMessage/ProstglesMCPTools/DoclingConvertedDocument/DoclingText.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import type { DoclingDocument } from "./DoclingDocument";
+
+export const DoclingText = ({
+  texts,
+  page: { page_no, image, size },
+}: Pick<DoclingDocument, "texts"> & {
+  page: DoclingDocument["pages"][string];
+}) => {
+  const pageTextItems = texts.filter((t) =>
+    t.prov.find((p) => p.page_no === page_no),
+  );
+  return (
+    <>
+      {pageTextItems.map((textItem, idx) => {
+        const prov = textItem.prov.find((p) => p.page_no === page_no);
+        if (!prov) return null;
+        const { l, t, r, b, coord_origin } = prov.bbox;
+        const displaySize = image?.size ?? size;
+        const scaleX = displaySize.width / size.width;
+        const scaleY = displaySize.height / size.height;
+
+        // const left = `${l * scaleX}px`;
+        // const width = `${(r - l) * scaleX}px`;
+        // const isBottomLeft = coord_origin === "BOTTOMLEFT";
+        // // Convert document-space top/bottom into CSS top-origin space
+        // const topDoc = isBottomLeft ? size.height - t : t;
+        // const bottomDoc = isBottomLeft ? size.height - b : b;
+        // const top = `${topDoc * scaleY}px`;
+        // const height = `${(bottomDoc - topDoc) * scaleY}px`;
+        // const widthPx = (r - l) * scaleX;
+        // const heightPx = (bottomDoc - topDoc) * scaleY;
+        // const fontSizePx = getEstimatedFontSizePx(
+        //   textItem.text,
+        //   Math.max(1, widthPx),
+        //   Math.max(1, heightPx),
+        // );
+        // const fontSize = fontSizePx + "px";
+
+        const left = `${(l * scaleX * 100) / displaySize.width}%`;
+        const width = `${((r - l) * scaleX * 100) / displaySize.width}%`;
+
+        const isBottomLeft = coord_origin === "BOTTOMLEFT";
+        const topDoc = isBottomLeft ? size.height - t : t;
+        const bottomDoc = isBottomLeft ? size.height - b : b;
+
+        const top = `${(topDoc * scaleY * 100) / displaySize.height}%`;
+        const height = `${((bottomDoc - topDoc) * scaleY * 100) / displaySize.height}%`;
+
+        const widthPx = (r - l) * scaleX;
+        const heightPx = (bottomDoc - topDoc) * scaleY;
+        const fontSizePx = getEstimatedFontSizePx(
+          textItem.text,
+          Math.max(1, widthPx),
+          Math.max(1, heightPx),
+        );
+        const fontSize = `${(fontSizePx * 100) / displaySize.width}cqw`;
+
+        return (
+          <div
+            key={idx}
+            title={textItem.orig}
+            className={
+              (image ? "show-on-hover " : "") +
+              " ta-start bg-warning text-ellipsis"
+            }
+            style={{
+              whiteSpace: "pre-wrap",
+              position: "absolute",
+              top,
+              left,
+              width,
+              height,
+              fontSize,
+              lineHeight: 1.2,
+            }}
+          >
+            {textItem.orig}
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+const getEstimatedFontSizePx = (
+  text: string,
+  widthPx: number,
+  heightPx: number,
+) => {
+  const lines = text.split("\n");
+  const lineCount = Math.max(lines.length, 1);
+  const longestLine = Math.max(...lines.map((l) => l.length), 1);
+
+  const byWidth = widthPx / (longestLine * 0.55);
+  const byHeight = heightPx / (lineCount * 1.2);
+
+  return Math.max(7, Math.min(22, Math.min(byWidth, byHeight)));
+};

package/client/src/dashboard/AskLLM/Chat/AskLLMChatMessages/ProstglesToolUseMessage/ProstglesMCPTools/DoclingConvertedDocument/DoclingToolUseView.tsx

@@ -0,0 +1,47 @@
+import { documentsMcpSchema } from "@common/mcp/documents.mcp.schema";
+import React, { useMemo } from "react";
+import type { ProstglesMCPToolsProps } from "../../ProstglesToolUseMessage";
+import { useJSONBParsedData } from "../common/useJSONBParsedData";
+import { useToolUseResultString } from "../common/useToolUseResultString";
+import type { DoclingDocument } from "./DoclingDocument";
+import { DoclingDocumentViewer } from "./DoclingDocumentViewer";
+
+export const DoclingToolUseView = (props: ProstglesMCPToolsProps) => {
+  const { resultContent, toolUseContent } = props;
+  const { data } = useJSONBParsedData(
+    toolUseContent.input,
+    documentsMcpSchema.get_document_text.schema,
+  );
+  const str = useToolUseResultString(resultContent);
+  const jsonContent = useMemo(() => {
+    if (!str || !data || data.to_format !== "json") return undefined;
+    try {
+      return JSON.parse(str) as DoclingDocument;
+    } catch (e) {
+      console.error("Failed to parse JSON content", e);
+    }
+  }, [data, str]);
+
+  const fileData = useMemo(() => {
+    if (!data) return undefined;
+    const binary = atob(data.fileAsBase64);
+    const bytes = Uint8Array.from(binary, (ch) => ch.charCodeAt(0));
+    const blobWithType = new Blob([bytes], { type: data.contentType });
+    return {
+      blobWithType,
+      contentType: data.contentType,
+    };
+  }, [data]);
+
+  if (!str?.trim() || str === '""') {
+    return <i>No content</i>;
+  }
+
+  return (
+    <DoclingDocumentViewer
+      data={fileData}
+      document={jsonContent}
+      markdownContent={str}
+    />
+  );
+};

package/client/src/dashboard/AskLLM/Chat/AskLLMChatMessages/ProstglesToolUseMessage/ProstglesMCPTools/ExecuteSQL.tsx

@@ -0,0 +1,34 @@
+import type { PROSTGLES_MCP_SERVERS_AND_TOOLS } from "@common/prostglesMcp";
+import { MonacoCodeInMarkdown } from "@components/Chat/MonacoCodeInMarkdown/MonacoCodeInMarkdown";
+import { FlexCol } from "@components/Flex";
+import { type JSONB } from "prostgles-types";
+import React from "react";
+import { LANG } from "src/dashboard/SQLEditor/W_SQLEditor";
+import { usePrgl } from "src/pages/ProjectConnection/PrglContextProvider";
+import type { ProstglesMCPToolsProps } from "../ProstglesToolUseMessage";
+
+export type InputSchema = JSONB.GetObjectType<
+  (typeof PROSTGLES_MCP_SERVERS_AND_TOOLS)["db"]["execute_sql"]["schema"]["type"]
+>;
+
+export const ExecuteSQL = ({
+  toolUseContent,
+  resultContent,
+}: ProstglesMCPToolsProps) => {
+  const initialData = toolUseContent.input as InputSchema;
+  const { sql } = usePrgl();
+  const codeString = initialData.sql;
+  return (
+    <FlexCol className="ExecuteSQL ai-start gap-0 f-1">
+      <MonacoCodeInMarkdown
+        key={codeString}
+        codeHeader={undefined}
+        language={LANG}
+        codeString={codeString}
+        sqlHandler={sql}
+        loadedSuggestions={undefined}
+        resultContent={resultContent}
+      />
+    </FlexCol>
+  );
+};