paseo-form-render 0.0.0-stage → 0.2.0

package/client/markdown.tsx

@@ -0,0 +1,470 @@
+import type { PluginHostProps } from "@getpaseo/plugin/client";
+import React, { useMemo, type ReactNode } from "react";
+import { Platform, StyleSheet, Text, View } from "react-native";
+
+interface MarkdownBlock {
+  type: "heading" | "paragraph" | "list-item" | "code" | "table";
+  text?: string;
+  level?: number;
+  bullet?: string;
+  code?: string;
+  lang?: string;
+  headers?: string[];
+  rows?: string[][];
+}
+
+function isTableSeparatorLine(line: string): boolean {
+  const trimmed = line.trim();
+  if (!trimmed.includes("|") || !trimmed.includes("-")) return false;
+  const cells = parseTableRow(trimmed);
+  if (cells.length === 0) return false;
+  return cells.every((c) => /^:?-{1,}:?$/.test(c.trim()));
+}
+
+function parseTableRow(line: string): string[] {
+  let trimmed = line.trim();
+  if (trimmed.startsWith("|")) trimmed = trimmed.slice(1);
+  if (trimmed.endsWith("|")) trimmed = trimmed.slice(0, -1);
+  return trimmed.split("|").map((cell) => cell.trim());
+}
+
+function parseBlocks(src: string): MarkdownBlock[] {
+  const lines = src.replace(/\r\n/g, "\n").split("\n");
+  const blocks: MarkdownBlock[] = [];
+  let inCode = false;
+  let codeLines: string[] = [];
+  let codeLang = "";
+  let paragraph: string[] = [];
+
+  const flushParagraph = () => {
+    if (paragraph.length > 0) {
+      blocks.push({ type: "paragraph", text: paragraph.join("\n") });
+      paragraph = [];
+    }
+  };
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.trim().startsWith("```")) {
+      if (inCode) {
+        blocks.push({ type: "code", code: codeLines.join("\n"), lang: codeLang });
+        codeLines = [];
+        inCode = false;
+      } else {
+        flushParagraph();
+        inCode = true;
+        codeLang = line.trim().slice(3).trim();
+      }
+      continue;
+    }
+    if (inCode) {
+      codeLines.push(line);
+      continue;
+    }
+    if (!line.trim()) {
+      flushParagraph();
+      continue;
+    }
+    if (
+      line.includes("|") &&
+      i + 1 < lines.length &&
+      isTableSeparatorLine(lines[i + 1])
+    ) {
+      flushParagraph();
+      const headers = parseTableRow(line);
+      const rows: string[][] = [];
+      i += 2;
+      while (i < lines.length && lines[i].trim().includes("|")) {
+        rows.push(parseTableRow(lines[i]));
+        i++;
+      }
+      i--;
+      blocks.push({ type: "table", headers, rows });
+      continue;
+    }
+    const hMatch = line.match(/^(#{1,6})\s+(.*)$/);
+    if (hMatch) {
+      flushParagraph();
+      blocks.push({ type: "heading", level: hMatch[1].length, text: hMatch[2] });
+      continue;
+    }
+    const listMatch = line.match(/^(\*|-|\d+\.)\s+(.*)$/);
+    if (listMatch) {
+      flushParagraph();
+      blocks.push({ type: "list-item", bullet: listMatch[1], text: listMatch[2] });
+      continue;
+    }
+    paragraph.push(line);
+  }
+  flushParagraph();
+  if (inCode && codeLines.length > 0) {
+    blocks.push({ type: "code", code: codeLines.join("\n"), lang: codeLang });
+  }
+  return blocks;
+}
+
+const WEB_TEXT_SELECTABLE = Platform.OS === "web" ? { userSelect: "text" as const } : {};
+
+/**
+ * Typography that mirrors Paseo's own markdown scale: body text uses `fontSize.content` (15) with a
+ * 1.4 line height, inline/code blocks use `fontSize.code` (12) and headings are scaled from the same
+ * base (h1 28, h2 24, h3 21, h4 19, h5/h6 17 with a 1.3 line height).
+ *
+ * This matters because a message that contains a pfr-form block is rendered by this plugin instead
+ * of the host's markdown renderer. With smaller values the surrounding text of such a reply looked
+ * shrunk compared to the same text in a plain assistant message.
+ */
+const CONTENT_FONT_SIZE = 15;
+const CONTENT_LINE_HEIGHT = 21;
+const CODE_FONT_SIZE = 12;
+const CODE_LINE_HEIGHT = 22;
+const HEADING_FONT_SIZES = [28, 24, 21, 19, 17, 17];
+const HEADING_LINE_HEIGHTS = [36, 31, 27, 25, 22, 22];
+/** Host spacing scale (spacing[2] = 8, spacing[3] = 12, spacing[4] = 16, spacing[6] = 24). */
+const SPACE_1 = 4;
+const SPACE_2 = 8;
+const SPACE_3 = 12;
+const SPACE_4 = 16;
+const SPACE_6 = 24;
+
+function parseInline(text: string, color: string, codeBg: string): ReactNode[] {
+  const regex = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\))/g;
+  const parts: ReactNode[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+    const token = match[0];
+    if (token.startsWith("`") && token.endsWith("`")) {
+      parts.push(
+        <Text
+          key={match.index}
+          selectable
+          dataSet={{ paseoMarkdownTag: "code" }}
+          style={{
+            color,
+            fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }),
+            fontSize: CODE_FONT_SIZE,
+            lineHeight: CODE_LINE_HEIGHT,
+            backgroundColor: codeBg,
+            paddingHorizontal: SPACE_1,
+            paddingVertical: 2,
+            borderRadius: 4,
+            ...WEB_TEXT_SELECTABLE,
+          }}
+        >
+          {token.slice(1, -1)}
+        </Text>,
+      );
+    } else if (token.startsWith("**") && token.endsWith("**")) {
+      parts.push(
+        <Text
+          key={match.index}
+          selectable
+          dataSet={{ paseoMarkdownTag: "strong" }}
+          style={{
+            fontWeight: "bold",
+            color,
+            ...WEB_TEXT_SELECTABLE,
+          }}
+        >
+          {token.slice(2, -2)}
+        </Text>,
+      );
+    } else if (token.startsWith("*") && token.endsWith("*")) {
+      parts.push(
+        <Text
+          key={match.index}
+          selectable
+          dataSet={{ paseoMarkdownTag: "em" }}
+          style={{
+            fontStyle: "italic",
+            color,
+            ...WEB_TEXT_SELECTABLE,
+          }}
+        >
+          {token.slice(1, -1)}
+        </Text>,
+      );
+    } else if (token.startsWith("[") && token.includes("](")) {
+      const closeBracket = token.indexOf("]");
+      const linkText = token.slice(1, closeBracket);
+      parts.push(
+        <Text
+          key={match.index}
+          selectable
+          dataSet={{ paseoMarkdownTag: "a" }}
+          style={{
+            color,
+            textDecorationLine: "underline",
+            ...WEB_TEXT_SELECTABLE,
+          }}
+        >
+          {linkText}
+        </Text>,
+      );
+    }
+    lastIndex = regex.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+  return parts;
+}
+
+export function MarkdownText({
+  text,
+  theme,
+}: Pick<PluginHostProps, "theme"> & { text: string }) {
+  const blocks = useMemo(() => {
+    try {
+      return parseBlocks(text);
+    } catch {
+      return [{ type: "paragraph" as const, text }];
+    }
+  }, [text]);
+  const color = theme.colors.foreground;
+  const codeBg = theme.colors.surface2;
+
+  return (
+    <View style={styles.container}>
+      {blocks.map((block, index) => {
+        if (block.type === "heading") {
+          const level = Math.min(Math.max(block.level || 1, 1), 6);
+          const fontSize = HEADING_FONT_SIZES[level - 1];
+          const lineHeight = HEADING_LINE_HEIGHTS[level - 1];
+          return (
+            <Text
+              key={index}
+              selectable
+              dataSet={{ paseoMarkdownTag: `h${level}` }}
+              style={{
+                color,
+                fontSize,
+                lineHeight,
+                fontWeight: level <= 2 ? "bold" : "600",
+                marginTop: level === 1 ? SPACE_6 : level <= 4 ? SPACE_4 : SPACE_3,
+                marginBottom: level === 1 ? SPACE_3 : level <= 4 ? SPACE_2 : SPACE_1,
+                ...(level === 1
+                  ? {
+                      borderBottomWidth: 1,
+                      borderBottomColor: theme.colors.border,
+                      paddingBottom: SPACE_2,
+                    }
+                  : null),
+                ...(level === 6 ? { textTransform: "uppercase" as const, letterSpacing: 0.5 } : null),
+                ...WEB_TEXT_SELECTABLE,
+              }}
+            >
+              {parseInline(block.text ?? "", color, codeBg)}
+            </Text>
+          );
+        }
+        if (block.type === "paragraph") {
+          return (
+            <Text
+              key={index}
+              selectable
+              dataSet={{ paseoMarkdownTag: "p" }}
+              style={{
+                color,
+                lineHeight: CONTENT_LINE_HEIGHT,
+                fontSize: CONTENT_FONT_SIZE,
+                marginBottom: SPACE_3,
+                ...WEB_TEXT_SELECTABLE,
+              }}
+            >
+              {parseInline(block.text ?? "", color, codeBg)}
+            </Text>
+          );
+        }
+        if (block.type === "list-item") {
+          return (
+            <View
+              key={index}
+              dataSet={{ paseoMarkdownTag: "li" }}
+              style={styles.listRow}
+            >
+              <Text
+                selectable
+                dataSet={{ paseoMarkdownIgnore: "true", paseoMarkdownListMarker: "true" }}
+                style={{
+                  color: theme.colors.foregroundMuted,
+                  lineHeight: CONTENT_LINE_HEIGHT,
+                  fontSize: CONTENT_FONT_SIZE,
+                  width: 18,
+                }}
+              >
+                {block.bullet?.endsWith(".") ? block.bullet : "•"}
+              </Text>
+              <Text
+                selectable
+                style={{
+                  color,
+                  lineHeight: CONTENT_LINE_HEIGHT,
+                  fontSize: CONTENT_FONT_SIZE,
+                  flex: 1,
+                  ...WEB_TEXT_SELECTABLE,
+                }}
+              >
+                {parseInline(block.text ?? "", color, codeBg)}
+              </Text>
+            </View>
+          );
+        }
+        if (block.type === "table") {
+          const headers = block.headers ?? [];
+          const rows = block.rows ?? [];
+          return (
+            <View
+              key={index}
+              dataSet={{ paseoMarkdownTag: "table" }}
+              style={[
+                styles.tableContainer,
+                { borderColor: theme.colors.border },
+              ]}
+            >
+              <View
+                dataSet={{ paseoMarkdownTag: "thead" }}
+                style={[
+                  styles.tableHeaderRow,
+                  {
+                    backgroundColor: theme.colors.surface2,
+                    borderBottomColor: theme.colors.border,
+                  },
+                ]}
+              >
+                {headers.map((header, colIdx) => (
+                  <View
+                    key={colIdx}
+                    dataSet={{ paseoMarkdownTag: "th" }}
+                    style={styles.tableCell}
+                  >
+                    <Text
+                      selectable
+                      style={{
+                        color,
+                        fontSize: CONTENT_FONT_SIZE,
+                        lineHeight: CONTENT_LINE_HEIGHT,
+                        fontWeight: "600",
+                        ...WEB_TEXT_SELECTABLE,
+                      }}
+                    >
+                      {parseInline(header, color, codeBg)}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+              {rows.map((row, rowIdx) => (
+                <View
+                  key={rowIdx}
+                  dataSet={{ paseoMarkdownTag: "tr" }}
+                  style={[
+                    styles.tableRow,
+                    rowIdx < rows.length - 1
+                      ? {
+                          borderBottomWidth: 1,
+                          borderBottomColor: theme.colors.border,
+                        }
+                      : null,
+                  ]}
+                >
+                  {headers.map((_, colIdx) => (
+                    <View
+                      key={colIdx}
+                      dataSet={{ paseoMarkdownTag: "td" }}
+                      style={styles.tableCell}
+                    >
+                      <Text
+                        selectable
+                        style={{
+                          color,
+                          fontSize: CONTENT_FONT_SIZE,
+                          lineHeight: CONTENT_LINE_HEIGHT,
+                          ...WEB_TEXT_SELECTABLE,
+                        }}
+                      >
+                        {parseInline(row[colIdx] ?? "", color, codeBg)}
+                      </Text>
+                    </View>
+                  ))}
+                </View>
+              ))}
+            </View>
+          );
+        }
+        if (block.type === "code") {
+          return (
+            <View
+              key={index}
+              dataSet={{
+                paseoMarkdownTag: "pre",
+                paseoMarkdownLanguage: block.lang || undefined,
+              }}
+              style={[
+                styles.codeBlock,
+                { backgroundColor: codeBg },
+              ]}
+            >
+              <Text
+                selectable
+                dataSet={{ paseoMarkdownTag: "code" }}
+                style={{
+                  color,
+                  fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }),
+                  fontSize: CODE_FONT_SIZE,
+                  lineHeight: CODE_LINE_HEIGHT,
+                  ...WEB_TEXT_SELECTABLE,
+                }}
+              >
+                {block.code?.trimEnd() ?? ""}
+              </Text>
+            </View>
+          );
+        }
+        return null;
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 2,
+    ...(Platform.OS === "web" ? { userSelect: "text" as const } : {}),
+  },
+  listRow: {
+    flexDirection: "row",
+    gap: 6,
+    marginVertical: 2,
+  },
+  tableContainer: {
+    borderWidth: 1,
+    borderRadius: 6,
+    overflow: "hidden",
+    marginVertical: SPACE_2,
+  },
+  tableHeaderRow: {
+    flexDirection: "row",
+    borderBottomWidth: 1,
+    paddingVertical: SPACE_2,
+    paddingHorizontal: SPACE_2,
+  },
+  tableRow: {
+    flexDirection: "row",
+    paddingVertical: SPACE_2,
+    paddingHorizontal: SPACE_2,
+  },
+  tableCell: {
+    flex: 1,
+    paddingRight: SPACE_2,
+  },
+  codeBlock: {
+    borderRadius: 6,
+    padding: SPACE_3,
+    marginVertical: SPACE_2,
+  },
+});

package/client/messages.ts

@@ -0,0 +1,147 @@
+import { defineTranslations } from "@getpaseo/plugin/client";
+
+/**
+ * Labels shown in the plugin UI. English is the source of truth; every other locale must use the
+ * same keys and placeholders (checked by the SDK and by `client/messages.test.ts`). The host picks the
+ * locale from the app language.
+ */
+const en = {
+  slash: {
+    form: "Instruct the agent to use pfr-form protocol",
+    formDemo: "Show a demo interactive form",
+  },
+  errorBox: {
+    title: "[pfr-form Syntax Error]",
+    askFix: "Ask agent to fix",
+    sending: "Sending…",
+    fixRequested: "✓ Fix requested; the agent will reply with a corrected form",
+  },
+  form: {
+    submitted: "✓ Form Submitted",
+  },
+  dropdown: {
+    placeholder: "Select an option...",
+    multiPlaceholder: "Select options...",
+    close: "Close dropdown menu",
+  },
+  file: {
+    folderPlaceholder: "Enter or select folder...",
+    filePlaceholder: "Enter or select file...",
+    browse: "Browse...",
+    fullPath: "Full path:",
+  },
+  picker: {
+    selectFolder: "Select Folder",
+    selectFile: "Select File",
+    chooseFolder: "Choose Folder",
+    chooseFile: "Choose File",
+    quick: "Quick:",
+    searchPlaceholder: "Search files/folders in directory...",
+    newFolderPlaceholder: "New folder name...",
+    create: "Create",
+    upToParent: ".. (Up to parent)",
+    loading: "Loading files...",
+    noMatches: "No matching entries found",
+    selected: "✓ Selected",
+    selectedLabel: "Selected:",
+    cancel: "Cancel",
+    projectRoot: "Project Root",
+    project: "Project",
+    invalidFolderName: 'Folder name contains invalid characters (/ \\ : * ? " < > |).',
+    createFailed: "Failed to create folder.",
+  },
+  settings: {
+    loadError: "Could not load settings: {{error}}",
+    retry: "Retry",
+    resetDefaults: "Reset to defaults",
+    autoFixTitle: "Automatic form fixes",
+    autoFixDescription:
+      'When an agent replies with a pfr-form block that fails validation, ask it to re-send a corrected block automatically. This sets how many times in a row the agent is asked; 0 turns automatic fixes off. The "Ask agent to fix" button on an error box always works.',
+    maxRetries: "Maximum retries",
+    decreaseRetries: "Decrease retries",
+    increaseRetries: "Increase retries",
+    hintOff: "Automatic fixes are off.",
+    hint_one: "Up to {{count}} automatic request per reply.",
+    hint_other: "Up to {{count}} automatic requests per reply.",
+    saving: "Saving…",
+    preferFormsTitle: "Prefer forms",
+    preferFormsDescription:
+      "By default the agent is only told it can use pfr-form. Turn this on to require it to ask for choices, parameters, and confirmations with a form instead of plain text. Applies to agents created after the change.",
+    requireForms: "Require forms for user input",
+    saveError: "Could not save: {{error}}",
+  },
+};
+
+const zhCN = {
+  slash: {
+    form: "让智能体使用 pfr-form 协议",
+    formDemo: "显示一个交互表单示例",
+  },
+  errorBox: {
+    title: "[pfr-form 语法错误]",
+    askFix: "请求智能体修复",
+    sending: "发送中…",
+    fixRequested: "✓ 已请求修复，智能体将回复更正后的表单",
+  },
+  form: {
+    submitted: "✓ 表单已提交",
+  },
+  dropdown: {
+    placeholder: "请选择...",
+    multiPlaceholder: "请选择多项...",
+    close: "关闭下拉菜单",
+  },
+  file: {
+    folderPlaceholder: "输入或选择文件夹...",
+    filePlaceholder: "输入或选择文件...",
+    browse: "浏览...",
+    fullPath: "完整路径：",
+  },
+  picker: {
+    selectFolder: "选择文件夹",
+    selectFile: "选择文件",
+    chooseFolder: "选择此文件夹",
+    chooseFile: "选择此文件",
+    quick: "快捷：",
+    searchPlaceholder: "在目录中搜索文件/文件夹...",
+    newFolderPlaceholder: "新文件夹名称...",
+    create: "创建",
+    upToParent: ".. (返回上级)",
+    loading: "正在加载文件...",
+    noMatches: "没有匹配的条目",
+    selected: "✓ 已选择",
+    selectedLabel: "已选择：",
+    cancel: "取消",
+    projectRoot: "项目根目录",
+    project: "项目",
+    invalidFolderName: '文件夹名称包含非法字符 (/ \\ : * ? " < > |)。',
+    createFailed: "创建文件夹失败。",
+  },
+  settings: {
+    loadError: "无法加载设置：{{error}}",
+    retry: "重试",
+    resetDefaults: "恢复默认值",
+    autoFixTitle: "自动修复表单",
+    autoFixDescription:
+      "当智能体回复的 pfr-form 代码块未通过校验时，自动请求它重新发送更正后的代码块。此处设置连续请求的最多次数；设为 0 则关闭自动修复。错误框上的“请求智能体修复”按钮始终可用。",
+    maxRetries: "最大重试次数",
+    decreaseRetries: "减少重试次数",
+    increaseRetries: "增加重试次数",
+    hintOff: "自动修复已关闭。",
+    hint_other: "每条回复最多自动请求 {{count}} 次。",
+    saving: "保存中…",
+    preferFormsTitle: "优先使用表单",
+    preferFormsDescription:
+      "默认情况下，智能体只被告知可以使用 pfr-form。开启后，它必须通过表单询问选项、参数和确认，而不是纯文本。仅对之后创建的智能体生效。",
+    requireForms: "用户输入必须使用表单",
+    saveError: "无法保存：{{error}}",
+  },
+};
+
+export const messages = defineTranslations({
+  resources: {
+    en,
+    "zh-CN": zhCN,
+    zh: zhCN,
+  },
+});