nolo-cli 0.1.21 → 0.1.23

package/render/table/types.ts

@@ -0,0 +1,252 @@
+// 文件: render/table/types.ts
+
+import { DataType } from "create/types";
+
+/* --------------------------------------------------------------------------
+ * 1. 列类型（TableColumn）
+ * ------------------------------------------------------------------------*/
+
+export type TableColumnType =
+    | "text"
+    | "number"
+    | "boolean"
+    | "date"
+    | "datetime"
+    | "select"
+    | "multi_select";
+// 将来可以扩展: "relation" | "json" | "file" 等
+
+/**
+ * 表字段定义（列）
+ *
+ * 说明：
+ * - id：列自身的稳定 ID，供公式 / 视图 / 触发器 / Agent 配置引用
+ * - name：行数据中的 key（machine name）
+ * - label：展示名，可中文；不填时 UI 回退为 name
+ * - type + required + options：构成字段的“域约束”
+ * - description：给人和 AI 的语义说明
+ * - isPrimary：标记“这一行是谁”的主字段（行标题）
+ */
+export interface TableColumn {
+    /** 列内部 ID（稳定，不随 name 改动） */
+    id: string;
+
+    /** 行中的字段名（机器名），建议英文/拼音，无空格 */
+    name: string;
+
+    /** 字段显示名，可中文；不填时 UI 用 name */
+    label?: string;
+
+    /** 字段类型（默认 text） */
+    type?: TableColumnType;
+
+    /** 字段说明：给人和 AI 看的描述 */
+    description?: string;
+
+    /** 是否为主字段（行标题），类似 Notion 的 Name 列 */
+    isPrimary?: boolean;
+
+    /** 是否必填 */
+    required?: boolean;
+
+    /**
+     * 离散取值集合，仅在 type 为 select / multi_select 时有意义。
+     * 先用 string[] 简化，将来可以扩展为对象数组（带颜色/顺序等）。
+     */
+    options?: string[];
+
+    /**
+     * 自定义列宽（像素），仅影响 UI 展示。
+     * - 不设置时由浏览器根据内容自适应宽度；
+     * - 设置后在所有视图中保持一致宽度（后续可以细化到 view 级别）。
+     */
+    width?: number;
+}
+
+/**
+ * 创建表时，传入的列配置：
+ * - id 由系统生成，外部一般不传
+ */
+export type CreateTableColumnInput = Omit<TableColumn, "id">;
+
+/* --------------------------------------------------------------------------
+ * 2. 视图（TableView）
+ * ------------------------------------------------------------------------*/
+
+export type TableViewType = "grid" | "kanban" | "calendar";
+
+export type SortDirection = "asc" | "desc";
+
+/**
+ * 简化版排序规则
+ */
+export interface TableViewSortRule {
+    columnId: string; // 引用 TableColumn.id
+    direction: SortDirection;
+}
+
+/**
+ * 过滤规则：
+ * - 这里先保留占位，后续可以演进为一套 DSL / JSON Schema
+ */
+export interface TableViewFilter {
+    // 将来可以改成 { op: "and" | "or"; conditions: Condition[] } 等
+    [key: string]: any;
+}
+
+/**
+ * 分组配置（例如看板分组）
+ */
+export interface TableViewGroup {
+    columnId: string; // 按哪个列分组
+}
+
+/**
+ * 视图定义：
+ * - 用来描述“这一张表在某个视角下如何展示/筛选/排序”
+ * - 未来 UI 和 Agent 都可以基于 View 工作
+ */
+export interface TableView {
+    id: string;
+    name: string;
+    type: TableViewType;
+
+    /** 是否为默认视图 */
+    isDefault?: boolean;
+
+    /** 当前视图中可见的列（按列 id 排序） */
+    visibleColumnIds: string[];
+
+    /** 排序规则（可选） */
+    sort?: TableViewSortRule[];
+
+    /** 过滤规则（可选） */
+    filter?: TableViewFilter;
+
+    /** 分组（看板/分组表格） */
+    group?: TableViewGroup | null;
+
+    /**
+     * 给 AI 的附加说明：
+     * - 例如「本视图只展示未完成任务」「按项目分组」等
+     */
+    aiHint?: string;
+}
+
+/* --------------------------------------------------------------------------
+ * 3. 触发器（TableTrigger）：行变更 → Agent / Webhook 等
+ * ------------------------------------------------------------------------*/
+
+// 目前 Trigger 还没有真正落库和实现逻辑，可以仅保留类型占位，
+// 后续如做通用 Trigger 中心建议迁移到 core/events/types.ts。
+
+export type TableTriggerEvent = "row_created" | "row_updated" | "row_deleted";
+
+export type TableTriggerActionType = "agent" | "webhook" | "custom";
+
+export interface TableTriggerCondition {
+    kind: "match_column_value";
+    columnId: string; // TableColumn.id
+    operator: "eq" | "ne" | "in" | "not_in" | "contains";
+    value: any;
+}
+
+export interface TableTriggerActionConfig {
+    agentKey?: string;
+    url?: string;
+    method?: "GET" | "POST" | "PUT" | "DELETE";
+    [key: string]: any;
+}
+
+export interface TableTrigger {
+    id: string;
+    name: string;
+    description?: string;
+    enabled: boolean;
+
+    event: TableTriggerEvent;
+    viewId?: string;
+    condition?: TableTriggerCondition;
+
+    actionType: TableTriggerActionType;
+    actionConfig?: TableTriggerActionConfig;
+}
+
+/* --------------------------------------------------------------------------
+ * 4. 表 AI 配置（TableAiConfig）
+ * ------------------------------------------------------------------------*/
+
+export interface TableAiConfig {
+    enabled: boolean;
+    purpose?: string;
+    allowedOperations?: {
+        createRow?: boolean;
+        updateRow?: boolean;
+        deleteRow?: boolean;
+        modifySchema?: boolean;
+    };
+    privacy?: {
+        maskColumnIds?: string[];
+    };
+}
+
+/* --------------------------------------------------------------------------
+ * 5. 表 Meta（TableMeta）
+ * ------------------------------------------------------------------------*/
+
+/**
+ * 表的元信息：
+ * - 跟具体存储键（meta-{tenantId}-{tableId}）一一对应
+ * - 是 schema + 视图 + 触发器 + AI 配置的集中描述
+ *
+ * Invariant:
+ * - 对任意 TableMeta(dbKey = meta-{tenantId}-{tableId})，
+ *   所有行必须满足 row.tenantId === tenantId 且 row.tableId === tableId。
+ */
+export interface TableMeta {
+    /** meta dbKey: meta-{tenantId}-{tableId} */
+    dbKey: string;
+
+    tenantId: string;
+    tableId: string;
+    spaceId?: string | null;
+
+    /** 表显示名（可中文） */
+    displayName?: string;
+
+    /**
+     * 表用途说明，给人和 AI 都看的版本：
+     * 建议包括：
+     * - 每一行代表什么
+     * - 这张表大致用来干什么
+     */
+    description?: string;
+
+    /**
+     * 任意关键词标签，仅供 AI / 系统使用：
+     * 例如 ["记账","交易","财务"] / ["衣服","穿搭","旅行"]。
+     * 用户不必手动维护，可由 Agent 在创建表时自动填入。
+     */
+    tags?: string[];
+
+    /** schema 版本号，用于将来迁移，起步可以固定为 1 */
+    schemaVersion?: number;
+
+    /** 列定义 */
+    columns: TableColumn[];
+
+    /** 视图列表（可选） */
+    views?: TableView[];
+
+    /** 表级触发器列表（可选） */
+    triggers?: TableTrigger[];
+
+    /** AI 配置（可选） */
+    aiConfig?: TableAiConfig;
+
+    createdAt: string;
+    updatedAt: string;
+
+    /** 类型标记：table */
+    type: DataType.TABLE;
+}

package/render/table/useCreateTable.ts

@@ -0,0 +1,72 @@
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-hot-toast";
+import { useAppDispatch, useAppSelector } from "app/store";
+import { selectUserId } from "auth/authSlice";
+import { createTable, addRow } from "./tableSlice";
+
+interface UseCreateTableOptions {
+    onSuccess?: () => void;
+}
+
+interface CreateNewTableParams {
+    spaceId?: string;
+}
+
+export const useCreateTable = (options?: UseCreateTableOptions) => {
+    const { onSuccess } = options || {};
+    const dispatch = useAppDispatch();
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+    const userId = useAppSelector(selectUserId);
+    const [isCreating, setIsCreating] = useState(false);
+
+    const createNewTable = useCallback(async ({ spaceId }: CreateNewTableParams = {}) => {
+        if (!userId) {
+            toast.error(t("table:userNotFound", "未找到用户信息，无法创建表格"));
+            return;
+        }
+
+        setIsCreating(true);
+        try {
+            // 1. 创建表格 Meta
+            const dbKey = await dispatch(
+                createTable({
+                    spaceId,
+                    title: t("table:newTable", "新建表格"),
+                    withDefaultRows: false,
+                })
+            ).unwrap();
+
+            // 从 dbKey (meta-tenantId-tableId) 中提取 tableId
+            const parts = dbKey.split("-");
+            const tableId = parts[parts.length - 1];
+
+            // 2. 添加初始行
+            await dispatch(
+                addRow({
+                    tenantId: userId,
+                    tableId,
+                    values: { title: "示例数据", note: "这是自动生成的记录" },
+                })
+            ).unwrap();
+
+            // 3. 成功回调（关闭菜单等）
+            onSuccess?.();
+
+            // 4. 导航
+            navigate(`/${dbKey}?edit=true`);
+        } catch (error) {
+            console.error("Failed to create table:", error);
+            toast.error(t("table:createFailed", "创建表格失败"));
+        } finally {
+            setIsCreating(false);
+        }
+    }, [dispatch, navigate, userId, t, onSuccess]);
+
+    return {
+        createNewTable,
+        isCreating,
+    };
+};

package/render/table/useTable.ts

@@ -0,0 +1,61 @@
+// packages/render/table/useTable.ts
+
+import { useEffect, useMemo } from "react";
+import { useAppDispatch, useAppSelector } from "app/store";
+import {
+    initTable,
+    loadTableRows,
+    selectCurrentTable,
+    selectTableIsLoading,
+    selectTableError,
+    selectTableRows,
+} from "./tableSlice";
+import { SEPARATOR } from "database/keys";
+
+export interface UseTableOptions {
+    enabled?: boolean;
+}
+
+export const useTable = (tableKey: string | undefined, options: UseTableOptions = {}) => {
+    const { enabled = true } = options;
+    const dispatch = useAppDispatch();
+
+    // 1. Parse Key
+    const { tenantId, tableId, valid } = useMemo(() => {
+        if (!tableKey) return { tenantId: "", tableId: "", valid: false };
+        const parts = tableKey.split(SEPARATOR);
+        // meta-{tenantId}-{tableId}
+        if (parts[0] !== "meta" || parts.length < 3) {
+            return { tenantId: "", tableId: "", valid: false };
+        }
+        const tableId = parts[parts.length - 1];
+        const tenantId = parts.slice(1, parts.length - 1).join(SEPARATOR);
+
+        return { tenantId, tableId, valid: true };
+    }, [tableKey]);
+
+    // 2. Load Data
+    useEffect(() => {
+        if (enabled && valid && tenantId && tableId) {
+            void dispatch(initTable({ tenantId, tableId }));
+            void dispatch(loadTableRows({ tenantId, tableId }));
+        }
+    }, [dispatch, enabled, valid, tenantId, tableId]);
+
+    // 3. Selectors
+    const tableMeta = useAppSelector(selectCurrentTable);
+    const isLoading = useAppSelector(selectTableIsLoading);
+    const error = useAppSelector(selectTableError);
+    const rows = useAppSelector(selectTableRows);
+
+    return {
+        tenantId,
+        tableId,
+        valid,
+        tableMeta,
+        isLoading,
+        error,
+        rows,
+        dispatch,
+    };
+};

package/render/table/utils/tableSerialization.ts

@@ -0,0 +1,50 @@
+// packages/render/table/utils/tableSerialization.ts
+
+import { TableMeta } from "render/table/types";
+import { fetchAndCacheTableRows } from "../fetchAndCacheTableRows";
+
+/**
+ * Fetches all rows for a given table from the database and serializes the metadata 
+ * and rows into a structured Markdown format.
+ */
+export const fetchAndSerializeTable = async (
+    tableMeta: TableMeta,
+    db: any,
+    options: {
+        token?: string | null;
+        remoteServers?: string[];
+    } = {}
+): Promise<{ rows: any[]; markdown: string }> => {
+    const tenantId = tableMeta.tenantId;
+    const tableId = tableMeta.tableId;
+    const results = await fetchAndCacheTableRows({
+        db,
+        tenantId,
+        tableId,
+        token: options.token,
+        remoteServers: options.remoteServers ?? [],
+    });
+
+    // Format as Markdown table
+    const columns = tableMeta.columns || [];
+    const headerRow = columns.map((c) => c.label || c.name);
+    const separatorRow = columns.map(() => "---");
+
+    let tableMd = "";
+    if (columns.length > 0) {
+        tableMd = `| ${headerRow.join(" | ")} |\n| ${separatorRow.join(" | ")} |\n`;
+        results.forEach((row: any) => {
+            const rowData = columns.map((col) => {
+                const val = row[col.name];
+                return val === undefined || val === null
+                    ? ""
+                    : String(val).replace(/\|/g, "\\|");
+            });
+            tableMd += `| ${rowData.join(" | ")} |\n`;
+        });
+    } else {
+        tableMd = "(No columns defined for this table)";
+    }
+
+    return { rows: results, markdown: tableMd };
+};

package/render/web/elements/artifactPreviewCode.ts

@@ -0,0 +1,43 @@
+export type ArtifactPreviewBuildResult = {
+  code: string | null;
+  error: string | null;
+};
+
+const BLOCKED_IMPORT_RE =
+  /import\s+[^;]*\sfrom\s*['"](react|echarts-for-react|react-icons\/lu)['"];?/g;
+
+function stripLightweightTypeScript(code: string): string {
+  const stripParamList = (params: string) =>
+    params.replace(
+      /(^|,)(\s*[A-Za-z_$][\w$]*)\s*:\s*[^,)=]+/g,
+      "$1$2"
+    );
+
+  return code
+    .replace(
+      /(function\s+[A-Za-z_$][\w$]*\s*)\(([^)]*)\)/g,
+      (_match, prefix: string, params: string) =>
+        `${prefix}(${stripParamList(params)})`
+    )
+    .replace(
+      /(function\s+[A-Za-z_$][\w$]*\([^)]*\))\s*:\s*[A-Za-z_$][\w$<>,\s.[\]|&]*(?=\s*\{)/g,
+      "$1"
+    )
+    .replace(
+      /\(([^()\n]*)\)\s*=>/g,
+      (_match, params: string) => `(${stripParamList(params)}) =>`
+    )
+    .replace(
+      /(const|let|var)\s+([A-Za-z_$][\w$]*)\s*:\s*[^=;]+(?=\s*=)/g,
+      "$1 $2"
+    )
+    .replace(/\b(useState|useMemo|useRef|useReducer)<[^>(]+>\s*\(/g, "$1(");
+}
+
+export function sanitizeArtifactCode(rawCode: string): string {
+  return stripLightweightTypeScript(rawCode)
+    .replace(BLOCKED_IMPORT_RE, "")
+    .replace(/export\s+default\s+\w+;?/g, "")
+    .replace(/export\s+(const|let|var|function|class)\s+/g, "$1 ")
+    .trim();
+}

package/render/web/elements/artifactRuntimePreload.ts

@@ -0,0 +1,52 @@
+const ARTIFACT_RUNTIME_SCRIPT_URL = "/artifact-runtime-script";
+
+const preloadedRuntimeUrls = new Set<string>();
+
+declare global {
+  interface Window {
+    __NOLO_ASSETS__?: {
+      artifactRuntimeJs?: string;
+      artifactRuntimePreloads?: string[];
+    };
+  }
+}
+
+export function resolveArtifactRuntimeScriptUrl() {
+  if (typeof window === "undefined") return ARTIFACT_RUNTIME_SCRIPT_URL;
+  return window.__NOLO_ASSETS__?.artifactRuntimeJs || ARTIFACT_RUNTIME_SCRIPT_URL;
+}
+
+function appendPreloadLink(href: string, rel: "preload" | "modulepreload", as?: string) {
+  if (!href || preloadedRuntimeUrls.has(`${rel}:${href}`)) return;
+  if (document.head.querySelector(`link[rel="${rel}"][href="${href}"]`)) {
+    preloadedRuntimeUrls.add(`${rel}:${href}`);
+    return;
+  }
+
+  const link = document.createElement("link");
+  link.rel = rel;
+  link.href = href;
+  if (as) link.as = as;
+  link.crossOrigin = "anonymous";
+  (link as HTMLLinkElement & { fetchPriority?: string }).fetchPriority = "high";
+  document.head.appendChild(link);
+  preloadedRuntimeUrls.add(`${rel}:${href}`);
+}
+
+export function preloadArtifactRuntimeResources() {
+  if (typeof window === "undefined") return;
+
+  appendPreloadLink(
+    new URL("/artifact-runtime", window.location.origin).toString(),
+    "preload",
+    "document"
+  );
+
+  const urls = window.__NOLO_ASSETS__?.artifactRuntimePreloads?.length
+    ? window.__NOLO_ASSETS__.artifactRuntimePreloads
+    : [resolveArtifactRuntimeScriptUrl()];
+
+  for (const url of urls) {
+    appendPreloadLink(new URL(url, window.location.origin).toString(), "modulepreload");
+  }
+}

package/render/web/elements/codeBlockAutoPreview.ts

@@ -0,0 +1,10 @@
+export function canPreviewJson(rawCode: string) {
+  if (!rawCode.trim()) return false;
+
+  try {
+    JSON.parse(rawCode);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/render/web/elements/mermaidPreview.ts

@@ -0,0 +1,21 @@
+export type MermaidParse = (content: string) => Promise<unknown>;
+
+const parseWithMermaid: MermaidParse = async (input) => {
+  const { default: mermaid } = await import("mermaid");
+  return mermaid.parse(input);
+};
+
+export async function canRenderMermaid(
+  content: string,
+  parseMermaid: MermaidParse = parseWithMermaid
+) {
+  const trimmed = content.trim();
+  if (!trimmed) return false;
+
+  try {
+    await parseMermaid(trimmed);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/render/web/ui/useInlineEdit.ts

@@ -0,0 +1,135 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+
+interface UseInlineEditOptions {
+  onSave: (newValue: string) => void | Promise<void>;
+  initialValue: string;
+  placeholder?: string;
+  ariaLabel?: string;
+  disabled?: boolean;
+}
+
+interface UseInlineEditReturn {
+  isEditing: boolean;
+  startEditing: () => void;
+  cancelEdit: () => void; // Usually handled internally by blur/escape
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  inputProps: {
+    value: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onBlur: () => void;
+    placeholder?: string;
+    "aria-label"?: string;
+  };
+}
+
+/**
+ * Hook to manage the state and logic for inline editing of a text value.
+ * @param initialValue - The initial value to display and edit.
+ * @param onSave - Callback function triggered when editing is successfully completed (Enter or Blur with changes).
+ * @param placeholder - Optional placeholder text for the input.
+ * @param ariaLabel - Optional aria-label for the input.
+ */
+export const useInlineEdit = ({
+  initialValue,
+  onSave,
+  placeholder = "输入内容...",
+  ariaLabel = "编辑内容",
+}: UseInlineEditOptions): UseInlineEditReturn => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [currentValue, setCurrentValue] = useState(initialValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+  // Store the value before editing started to check for actual changes on blur/save
+  const previousValueRef = useRef(initialValue);
+
+  // Update internal state if the initialValue prop changes externally while not editing
+  useEffect(() => {
+    if (!isEditing) {
+      setCurrentValue(initialValue);
+      previousValueRef.current = initialValue; // Keep track of the non-editing value
+    }
+  }, [initialValue, isEditing]);
+
+  // Focus and select text when editing starts
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  const startEditing = useCallback(() => {
+    previousValueRef.current = currentValue; // Store current value before editing
+    setIsEditing(true);
+  }, [currentValue]);
+
+  const handleSave = useCallback(() => {
+    const trimmedValue = currentValue.trim();
+    // Only save if the value is non-empty and actually changed
+    if (trimmedValue && trimmedValue !== previousValueRef.current) {
+      Promise.resolve(onSave(trimmedValue)).finally(() => {
+        setIsEditing(false);
+      });
+    } else if (!trimmedValue) {
+      // If empty, revert to the value before editing started
+      console.warn("Input cannot be empty. Reverting changes.");
+      setCurrentValue(previousValueRef.current);
+      setIsEditing(false);
+    } else {
+      // If unchanged or only whitespace difference, just exit editing
+      setCurrentValue(previousValueRef.current); // Ensure display reverts if only whitespace changed
+      setIsEditing(false);
+    }
+  }, [currentValue, onSave]);
+
+  const cancelEdit = useCallback(() => {
+    // Revert to the value before editing started
+    setCurrentValue(previousValueRef.current);
+    setIsEditing(false);
+  }, []);
+
+  const handleInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setCurrentValue(event.target.value);
+    },
+    []
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleSave();
+      } else if (event.key === "Escape") {
+        cancelEdit();
+      }
+    },
+    [handleSave, cancelEdit]
+  );
+
+  // Save on blur
+  const handleBlur = useCallback(() => {
+    // Timeout helps prevent issues where blur triggers before a click outside (e.g., on a save button)
+    // If handleSave is already called by Enter, setIsEditing(false) will prevent double execution logic
+    // if (isEditing) { // Check if still in editing mode before saving on blur
+    setTimeout(handleSave, 0);
+    // }
+  }, [handleSave]);
+
+  const inputProps = {
+    value: currentValue,
+    onChange: handleInputChange,
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur,
+    placeholder: placeholder,
+    "aria-label": ariaLabel,
+  };
+
+  return {
+    isEditing,
+    startEditing,
+    cancelEdit, // Although primarily internal, can be exposed if needed
+    inputRef,
+    inputProps,
+  };
+};