@pstdio/ui 0.0.3 → 0.0.4

package/src/components/rich-text/prompt-input/utils.ts

@@ -1,158 +0,0 @@
-import { $getRoot, $isElementNode, ElementNode, type Klass, type LexicalNode, type RootNode } from "lexical";
-
-export function $getAllNodesOfType<T extends LexicalNode>(nodeType: Klass<T>) {
-  const root = $getRoot();
-  const nodesOfType: T[] = [];
-
-  const traverse = (node: LexicalNode) => {
-    if (node instanceof nodeType) {
-      nodesOfType.push(node as T);
-    }
-    if (node instanceof ElementNode) {
-      node.getChildren?.().forEach(traverse);
-    }
-  };
-
-  traverse(root);
-  return nodesOfType;
-}
-
-export const $getTextContent = (root: RootNode) => {
-  let textContent = "";
-  const children = root.getChildren();
-  const childrenLength = children.length;
-  for (let i = 0; i < childrenLength; i++) {
-    const child = children[i];
-    textContent += child.getTextContent();
-    if ($isElementNode(child) && i !== childrenLength - 1 && !child.isInline()) {
-      textContent += "\n";
-    }
-  }
-  return textContent;
-};
-
-type SerializedNode = {
-  type?: string;
-  text?: string;
-  name?: string;
-  referenceId?: string;
-  children?: SerializedNode[];
-};
-
-type SerializedRoot = {
-  root?: SerializedNode;
-};
-
-const getReferenceMarker = (node: SerializedNode) => {
-  if (node.type !== "reference") return null;
-  return `#${node.name ?? node.referenceId ?? ""}`;
-};
-
-const shouldAppendParagraphBreak = (node: SerializedNode) => {
-  return node.type === "paragraph" && Boolean(node.children?.length);
-};
-
-const traverseSerializedNode = (node: SerializedNode): string => {
-  if (node.type === "comment") {
-    return "";
-  }
-
-  const referenceMarker = getReferenceMarker(node);
-  if (referenceMarker !== null) {
-    return referenceMarker;
-  }
-
-  let text = typeof node.text === "string" ? node.text : "";
-  const children = node.children;
-  if (!Array.isArray(children)) return text;
-
-  const childrenLength = children.length;
-  for (let i = 0; i < childrenLength; i += 1) {
-    const child = children[i];
-    if (child.type === "comment") {
-      if (i !== childrenLength - 1) {
-        text += "\n";
-      }
-      continue;
-    }
-
-    text += traverseSerializedNode(child);
-    if (shouldAppendParagraphBreak(child)) {
-      text += "\n";
-    }
-  }
-
-  return text;
-};
-
-export const getTextFromSerializedEditorState = (state: string): string => {
-  try {
-    const parsed = JSON.parse(state) as SerializedRoot;
-    return traverseSerializedNode(parsed.root ?? {});
-  } catch {
-    return "";
-  }
-};
-
-export const emptyEditorState = {
-  root: {
-    direction: "ltr",
-    format: "",
-    indent: 0,
-    type: "root",
-    version: 1,
-    children: [
-      {
-        type: "paragraph",
-        version: 1,
-        format: "",
-        indent: 0,
-        textFormat: undefined,
-        direction: null,
-        children: [],
-      },
-    ],
-  },
-};
-
-export function generateEditorStateFromString(input = "") {
-  if (!input.trim()) {
-    return JSON.parse(JSON.stringify(emptyEditorState));
-  }
-
-  // Split on line breaks → one paragraph per line
-  const paragraphs = input.split(/\r?\n/);
-
-  const children = paragraphs.map((line) => ({
-    type: "paragraph",
-    version: 1,
-    format: "",
-    indent: 0,
-    textFormat: undefined,
-    direction: null,
-    children: line
-      ? [
-          {
-            type: "text",
-            version: 1,
-            text: line,
-            format: "",
-            detail: 0,
-            mode: "normal",
-            style: "",
-          },
-        ]
-      : [],
-  }));
-
-  return {
-    root: {
-      direction: "ltr",
-      format: "",
-      indent: 0,
-      type: "root",
-      version: 1,
-      children,
-    },
-  };
-}

package/src/components/rich-text/rich-message/plugins/ReferenceLinkPlugin/ReferenceLinkNode.tsx

@@ -1,100 +0,0 @@
-import { Box } from "@chakra-ui/react";
-import {
-  DecoratorNode,
-  type EditorConfig,
-  type LexicalEditor,
-  type LexicalNode,
-  type NodeKey,
-  type SerializedLexicalNode,
-  type Spread,
-} from "lexical";
-import type { ReactElement } from "react";
-import { ResourceBadge } from "../../../../resource-badge";
-
-export type SerializedReferenceLinkNode = Spread<
-  {
-    href: string;
-    label?: string;
-  },
-  SerializedLexicalNode
->;
-
-export class ReferenceLinkNode extends DecoratorNode<ReactElement> {
-  __href: string;
-  __label?: string;
-
-  static getType(): string {
-    return "reference-link";
-  }
-
-  static clone(node: ReferenceLinkNode): ReferenceLinkNode {
-    return new ReferenceLinkNode(node.__href, node.__label, node.__key);
-  }
-
-  constructor(href: string, label?: string, key?: NodeKey) {
-    super(key);
-    this.__href = href;
-    this.__label = label;
-  }
-
-  createDOM(_config: EditorConfig, _editor: LexicalEditor): HTMLElement {
-    return document.createElement("span");
-  }
-
-  updateDOM(_prevNode: ReferenceLinkNode, _dom: HTMLElement, _config: EditorConfig): boolean {
-    return false;
-  }
-
-  getTextContent(): string {
-    const label = this.__label ?? this.__href;
-    return `{{link('${label}')}}`;
-  }
-
-  exportJSON(): SerializedReferenceLinkNode {
-    return {
-      type: ReferenceLinkNode.getType(),
-      version: 1,
-      href: this.__href,
-      label: this.__label,
-    };
-  }
-
-  static importJSON(serializedNode: SerializedReferenceLinkNode): ReferenceLinkNode {
-    return $createReferenceLinkNode(serializedNode.href, serializedNode.label);
-  }
-
-  decorate(_editor: LexicalEditor, _config: EditorConfig): ReactElement {
-    const href = this.__href;
-    const fileName = href.split("/").pop();
-    const label = fileName || "unknown";
-    const isExternal = /^https?:\/\//i.test(href);
-    const isProjectFile = /^#?\$PROJECT\//i.test(href);
-
-    return (
-      <Box width="fit-content" display="inline-block">
-        <ResourceBadge
-          fileName={label}
-          onSelect={() => {
-            if (isExternal) {
-              window.open(href, "_blank", "noopener,noreferrer");
-            } else if (isProjectFile) {
-              const projectPath = href.replace(/^#?\$PROJECT\//i, "");
-              const event = new CustomEvent("ui:open-project-file", { detail: projectPath });
-              window.dispatchEvent(event);
-            } else {
-              window.location.assign(href);
-            }
-          }}
-        />
-      </Box>
-    );
-  }
-}
-
-export function $createReferenceLinkNode(href: string, label?: string): ReferenceLinkNode {
-  return new ReferenceLinkNode(href, label);
-}
-
-export function $isReferenceLinkNode(node: LexicalNode | null | undefined): node is ReferenceLinkNode {
-  return node instanceof ReferenceLinkNode;
-}

package/src/components/rich-text/rich-message/plugins/ReferenceLinkPlugin/ReferenceLinkTransformer.ts

@@ -1,32 +0,0 @@
-import type { TextMatchTransformer } from "@lexical/markdown";
-import { $createReferenceLinkNode, $isReferenceLinkNode, ReferenceLinkNode } from "./ReferenceLinkNode";
-
-// Matches {{link('xxx')}} or {{ link("xxx") }}
-const LINK_REGEXP = /\{\{\s*link\((['"])([^'"\s]+)\1\)\s*\}\}/;
-
-export const REFERENCE_LINK_TRANSFORMER: TextMatchTransformer = {
-  dependencies: [ReferenceLinkNode],
-  export: (node) => {
-    if ($isReferenceLinkNode(node)) {
-      const href = (node as ReferenceLinkNode).__href;
-      const label = (node as ReferenceLinkNode).__label ?? href;
-      // Export back to token form so markdown roundtrips
-      if (label) {
-        return `{{link('${label}')}}`;
-      }
-      return `{{link('${href}')}}`;
-    }
-    return null;
-  },
-  regExp: LINK_REGEXP,
-  importRegExp: LINK_REGEXP,
-  replace: (textNode, match) => {
-    const value = match[2];
-    // For now we assume value is both label and href; if it looks like a URL, use as href.
-    const looksLikeUrl = /^(https?:\/\/|\/)/i.test(value);
-    const href = looksLikeUrl ? value : `#${value}`;
-    const label = value;
-    textNode.replace($createReferenceLinkNode(href, label));
-  },
-  type: "text-match",
-};

package/src/components/rich-text/rich-message/plugins/ReferenceLinkPlugin/index.ts

@@ -1,2 +0,0 @@
-export { ReferenceLinkNode } from "./ReferenceLinkNode";
-export { REFERENCE_LINK_TRANSFORMER } from "./ReferenceLinkTransformer";

package/src/components/rich-text/rich-message/rich-message.stories.tsx

@@ -1,146 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { RichMessage } from "./rich-message";
-
-const message = `
-# RichMessage
-
-This is a rich message rendered from Markdown.
-
-- Supports lists
-- Links like [Pufflig](https://pufflig.com)
-- Quotes
-
-> A nice quote to demo the Quote node.
-
-| Feature | Supported |
-| ------- | --------- |
-| Tables  | ✅         |
-| Links   | ✅         |
-| Lists   | ✅         |
-
----
-
-## Subheading
-Some more text under a subheading.
-
----
-
-## Table Example
-
-| Name | Value |
-| ---- | ----- |
-| Foo  | Bar   |
-| Baz  | Qux   |
-
----
-
-# Heading 1
-
-## Heading 2
-
-### Heading 3
-
-This paragraph has **bold**, *italic*, ~~strikethrough~~ text and <u>underline</u>.
-
-Inline link to [Chakra UI](https://chakra-ui.com).
-
-ReferenceLink token examples:
-- {{link('$PROJECT/sources/orders.csv')}}
-- {{link('$PROJECT/sources/readme.md')}}
-
----
-
-# Nested Lists
-
-- Fruits
-  - Apple
-  - Banana
-  - Orange
-- Vegetables
-  - Carrot
-  - Lettuce
-
-1. First
-2. Second
-   1. Second.A
-   2. Second.B
-
----
-
-A paragraph above the rule.
-
----
-
-> This is a blockquote.
-> It can span multiple lines.
-
-\\[ G_{\\mu\\nu} + \\Lambda g_{\\mu\\nu} = \\frac{8\\pi G}{c^4} T_{\\mu\\nu} \\]
-Where: \\( G_{\\mu\\nu} \\) is the Einstein tensor, which represents the curvature of spacetime. \\( \\Lambda \\) is the cosmological constant. \\( g_{\\mu\\nu} \\) is the metric tensor, which describes the geometry of spacetime. \\( G \\) is the gravitational constant. \\( c \\) is the speed of light in a vacuum. \\( T_{\\mu\\nu} \\) is the stress-energy tensor, which represents the distribution of matter and energy in spacetime.
-
-\\[
-\\begin{align}
-a + b &= c \\\\
-d + e &= f \\\\
-g + h &= i
-\\end{align}
-\\]
-
----
-
-## Code Blocks
-
-SQL:
-
-\`\`\`sql
-CREATE TABLE users (
-  id SERIAL PRIMARY KEY,
-  email TEXT NOT NULL UNIQUE,
-  created_at TIMESTAMPTZ DEFAULT NOW()
-);
-
-SELECT id, email
-FROM users
-WHERE created_at > NOW() - INTERVAL '7 days'
-ORDER BY created_at DESC;
-\`\`\`
-
-Python:
-
-\`\`\`python
-def fib(n: int):
-    a, b = 0, 1
-    for _ in range(n):
-        yield a
-        a, b = b, a + b
-
-print(list(fib(10)))
-\`\`\`
-`;
-
-const meta: Meta<typeof RichMessage> = {
-  title: "Chat UI/RichMessage",
-  component: RichMessage,
-  parameters: {
-    layout: "padded",
-  },
-  args: {
-    debug: false,
-    defaultState: message,
-  },
-  argTypes: {
-    defaultState: {
-      control: "text",
-      description: "Markdown source to render",
-    },
-    debug: {
-      control: "boolean",
-      description: "Show Lexical tree for debugging",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof RichMessage>;
-
-export const Basic: Story = {};

package/src/components/rich-text/rich-message/rich-message.tsx

@@ -1,118 +0,0 @@
-import "../theme/rich-text-theme.css";
-
-import { Flex } from "@chakra-ui/react";
-import { CodeNode } from "@lexical/code";
-import { LinkNode } from "@lexical/link";
-import { ListItemNode, ListNode } from "@lexical/list";
-import { $convertFromMarkdownString, $convertToMarkdownString, TRANSFORMERS } from "@lexical/markdown";
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin";
-import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import { ListPlugin } from "@lexical/react/LexicalListPlugin";
-import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { $getRoot } from "lexical";
-import { ContentEditable } from "../shared/components/content-editable";
-import { DataTableNode } from "../shared/nodes/DataTableNode";
-import { ImportCodeBlocksPlugin } from "../shared/plugins/CodePlugin/CodeBlockPlugin";
-import { CodeBlockNode } from "../shared/plugins/CodePlugin/CodeNode";
-import { EquationNode } from "../shared/plugins/EquationPlugin/EquationNode";
-import { EQUATION_INLINE, EQUATION_MULTILINE, EquationPlugin } from "../shared/plugins/EquationPlugin/EquationPlugin";
-import { HRNode } from "../shared/plugins/HorizontalRulePlugin/HorizontalRuleNode";
-import StateUpdatePlugin from "../shared/plugins/StateUpdatePlugin";
-import ToggleEditablePlugin from "../shared/plugins/ToggleEditablePlugin";
-import { TreeViewPlugin } from "../shared/plugins/TreeViewPlugin/TreeViewPlugin";
-import { TRANSFORMERS_EXTENDED } from "../shared/transformers/markdown-transformers";
-import theme from "../theme/rich-text-theme";
-import { splitFrontmatter } from "../utils/markdown";
-import { REFERENCE_LINK_TRANSFORMER, ReferenceLinkNode } from "./plugins/ReferenceLinkPlugin";
-
-export interface RichMessageProps {
-  debug?: boolean;
-  defaultState: string;
-  isEditable?: boolean;
-  onChange?: (value: string) => void;
-}
-
-const transformers = [
-  ...TRANSFORMERS,
-  ...TRANSFORMERS_EXTENDED,
-  EQUATION_INLINE,
-  EQUATION_MULTILINE,
-  REFERENCE_LINK_TRANSFORMER,
-];
-
-export function RichMessage(props: RichMessageProps) {
-  const { debug = false, defaultState = "", isEditable = false, onChange } = props;
-  const { frontmatter, body } = splitFrontmatter(defaultState);
-  const shouldTrackChanges = isEditable && Boolean(onChange);
-
-  const initialConfig = {
-    namespace: "RICH_MESSAGE",
-    nodes: [
-      QuoteNode,
-      LinkNode,
-      DataTableNode,
-      HeadingNode,
-      ListNode,
-      ListItemNode,
-      CodeNode,
-      CodeBlockNode,
-      EquationNode,
-      HRNode,
-      ReferenceLinkNode,
-    ],
-    editorState: () => {
-      return $convertFromMarkdownString(body, transformers, undefined, false);
-    },
-    onError: (error: Error) => console.error(error),
-    editable: isEditable,
-    theme,
-  };
-
-  return (
-    <Flex
-      className="rich-text"
-      data-rich-message="true"
-      justifyContent="space-between"
-      width="100%"
-      maxWidth="100%"
-      height="100%"
-      position="relative"
-      direction="column"
-      overflow="hidden"
-    >
-      <LexicalComposer initialConfig={initialConfig}>
-        <StateUpdatePlugin
-          value={body}
-          onUpdate={(value: string) => {
-            $convertFromMarkdownString(value, transformers, undefined, false);
-          }}
-        />
-        <LinkPlugin />
-        <ListPlugin />
-        <HorizontalRulePlugin />
-        <ImportCodeBlocksPlugin />
-        <EquationPlugin />
-        <RichTextPlugin contentEditable={<ContentEditable fullWidth={false} />} ErrorBoundary={LexicalErrorBoundary} />
-        {shouldTrackChanges ? (
-          <OnChangePlugin
-            ignoreSelectionChange
-            ignoreHistoryMergeTagChange={false}
-            onChange={(editorState) => {
-              editorState.read(() => {
-                const root = $getRoot();
-                const markdownBody = $convertToMarkdownString(transformers, root);
-                onChange?.(frontmatter + markdownBody);
-              });
-            }}
-          />
-        ) : null}
-        <ToggleEditablePlugin isEditable={isEditable} />
-        {debug && <TreeViewPlugin />}
-      </LexicalComposer>
-    </Flex>
-  );
-}

package/src/components/rich-text/shared/components/content-editable.tsx

@@ -1,28 +0,0 @@
-import { chakra, Flex } from "@chakra-ui/react";
-import { ContentEditable as LexicalContentEditable } from "@lexical/react/LexicalContentEditable";
-
-const StyledEditable = chakra(LexicalContentEditable);
-
-interface ContentEditableProps {
-  onRef?: (elem: HTMLDivElement) => void;
-  fullWidth?: boolean;
-  padding?: string;
-}
-
-export function ContentEditable({ onRef, fullWidth = false, padding }: ContentEditableProps) {
-  return (
-    <Flex className="rich-text" height="100%" overflow="auto" position="relative">
-      <Flex ref={onRef} width="100%" padding={padding} justifyContent={fullWidth ? "flex-start" : "center"}>
-        <StyledEditable
-          height="fit-content"
-          minH="100%"
-          width="100%"
-          maxWidth={fullWidth ? "100%" : "720px"}
-          textStyle="paragraph/M/regular"
-          position="relative"
-          outline="none"
-        />
-      </Flex>
-    </Flex>
-  );
-}

package/src/components/rich-text/shared/components/default-rich-text-components.tsx

@@ -1,99 +0,0 @@
-import { Box, Table, Text, Textarea } from "@chakra-ui/react";
-import type { CodeEditorProps, DataTableProps } from "../types/rich-text-components";
-
-const formatValue = (value: unknown) => {
-  if (value === null || value === undefined) return "-";
-  if (typeof value === "string") return value.length ? value : "-";
-  if (typeof value === "number" || typeof value === "boolean") return String(value).toUpperCase();
-  if (value instanceof Date) return value.toISOString();
-  return JSON.stringify(value);
-};
-
-export const DefaultRichTextCodeEditor = (props: CodeEditorProps) => {
-  const { defaultCode = "", isEditable = false, showLineNumbers = false, disableScroll = false } = props;
-
-  if (isEditable) {
-    return <Textarea defaultValue={defaultCode} fontFamily="mono" fontSize="sm" resize="vertical" minHeight="100%" />;
-  }
-
-  const lines = showLineNumbers ? defaultCode.split("\n") : [defaultCode];
-
-  return (
-    <Box
-      as="pre"
-      margin={0}
-      padding="sm"
-      fontFamily="mono"
-      fontSize="sm"
-      lineHeight="1.5"
-      overflowY={disableScroll ? "hidden" : "auto"}
-      background="bg.muted"
-      borderRadius="md"
-      width="100%"
-    >
-      {showLineNumbers ? (
-        <Box as="code" display="grid" gridTemplateColumns="auto 1fr" columnGap="sm">
-          {lines.map((line, index) => (
-            <Box as="span" key={`${index}-${line}`} display="contents">
-              <Text as="span" color="fg.muted" textAlign="right">
-                {index + 1}
-              </Text>
-              <Text as="span">{line.length ? line : " "}</Text>
-            </Box>
-          ))}
-        </Box>
-      ) : (
-        <Box as="code">{defaultCode}</Box>
-      )}
-    </Box>
-  );
-};
-
-export const DefaultRichTextDataTable = (props: DataTableProps) => {
-  const { data, fullWidth = false, noBorder = false, hiddenColumns = [] } = props;
-
-  if (!data.length) {
-    return (
-      <Box padding="sm" borderWidth={noBorder ? "0" : "1px"} borderColor="border.muted">
-        <Text textStyle="label/S/regular" color="fg.muted">
-          No data
-        </Text>
-      </Box>
-    );
-  }
-
-  const hiddenSet = new Set(hiddenColumns);
-  const columns = Object.keys(data[0] ?? {}).filter((key) => !hiddenSet.has(key));
-
-  return (
-    <Table.ScrollArea overflowX="auto" maxWidth="100%">
-      <Table.Root
-        size="sm"
-        width={fullWidth ? "100%" : "fit-content"}
-        borderWidth={noBorder ? "0" : "1px"}
-        borderColor="border.muted"
-      >
-        <Table.Header>
-          <Table.Row background="bg.muted">
-            {columns.map((column) => (
-              <Table.ColumnHeader key={column} textTransform="none" paddingX="xs" paddingY="2xs">
-                <Text textStyle="label/S/medium">{column}</Text>
-              </Table.ColumnHeader>
-            ))}
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {data.map((row, rowIndex) => (
-            <Table.Row key={`${rowIndex}-${columns.join("-")}`}>
-              {columns.map((column) => (
-                <Table.Cell key={`${rowIndex}-${column}`} paddingX="xs" paddingY="2xs">
-                  <Text textStyle="paragraph/S/regular">{formatValue(row[column])}</Text>
-                </Table.Cell>
-              ))}
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table.Root>
-    </Table.ScrollArea>
-  );
-};