@pstdio/ui 0.0.1

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

@@ -0,0 +1,158 @@
+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

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,32 @@
+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

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

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

@@ -0,0 +1,146 @@
+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

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,99 @@
+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>
+  );
+};