@aura-react-comp/x 0.0.0-stage → 0.1.0

package/esm/folder/index.less

@@ -0,0 +1,158 @@
+/* Folder — 文件树 + 文件预览 */
+
+.aura-x-folder {
+  display: flex;
+  overflow: hidden;
+  border: 1px solid var(--aura-x-bubble-border);
+  border-radius: var(--aura-radius-md);
+  background: var(--aura-x-bubble-ai-bg);
+  min-height: 240px;
+}
+
+/* ===== 左侧目录树 ===== */
+
+.aura-x-folder-directory {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  border-right: 1px solid var(--aura-border);
+  background: var(--aura-x-stage-bg);
+}
+
+.aura-x-folder-directory-title {
+  flex: none;
+  padding: var(--aura-spacing-2) var(--aura-spacing-3);
+  border-bottom: 1px solid var(--aura-border);
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-xs);
+  font-weight: 600;
+  letter-spacing: 0.4px;
+}
+
+.aura-x-folder-tree {
+  flex: 1;
+  overflow: auto;
+  padding: var(--aura-spacing-2) var(--aura-spacing-1);
+}
+
+.aura-x-folder-node {
+  display: flex;
+  gap: var(--aura-spacing-1);
+  align-items: center;
+  padding: var(--aura-spacing-1) var(--aura-spacing-2);
+  border-radius: var(--aura-radius-sm);
+  color: var(--aura-text);
+  font-size: var(--aura-font-size-sm);
+  cursor: pointer;
+  transition:
+    background var(--aura-duration-fast) var(--aura-easing),
+    color var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-folder-node:hover {
+  background: var(--aura-x-accent-soft);
+}
+
+.aura-x-folder-node:focus-visible {
+  outline: none;
+  box-shadow: var(--aura-x-focus-ring);
+}
+
+.aura-x-folder-node--selected,
+.aura-x-folder-node--selected:hover {
+  background: var(--aura-x-accent-gradient);
+  color: var(--aura-text-inverse);
+}
+
+.aura-x-folder-node--selected .aura-x-folder-node-icon,
+.aura-x-folder-node--selected .aura-x-folder-caret {
+  color: var(--aura-text-inverse);
+}
+
+.aura-x-folder-caret {
+  flex: none;
+  width: 12px;
+  color: var(--aura-text-tertiary);
+  font-size: 10px;
+  line-height: 1;
+  text-align: center;
+}
+
+.aura-x-folder-node-icon {
+  flex: none;
+  display: inline-flex;
+  color: var(--aura-text-secondary);
+}
+
+.aura-x-folder-node-icon > svg {
+  width: 14px;
+  height: 14px;
+}
+
+.aura-x-folder-node-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ===== 右侧预览 ===== */
+
+.aura-x-folder-preview {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.aura-x-folder-preview-header {
+  flex: none;
+  padding: var(--aura-spacing-2) var(--aura-spacing-3);
+  border-bottom: 1px solid var(--aura-border);
+  color: var(--aura-text);
+  font-size: var(--aura-font-size-sm);
+  font-weight: 600;
+}
+
+.aura-x-folder-preview-title {
+  display: inline-block;
+  overflow: hidden;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.aura-x-folder-preview-body {
+  flex: 1;
+  overflow: auto;
+  padding: var(--aura-spacing-3);
+}
+
+/* 预览内嵌的代码块抹平外框，避免与预览区形成双层边框 */
+.aura-x-folder-preview-body .aura-x-code-highlighter {
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+.aura-x-folder-preview-body .aura-x-code-highlighter-pre {
+  padding: 0;
+}
+
+.aura-x-folder-empty,
+.aura-x-folder-loading {
+  padding: var(--aura-spacing-6) var(--aura-spacing-3);
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-sm);
+  text-align: center;
+}
+
+.aura-x-folder-error {
+  padding: var(--aura-spacing-3);
+  border: 1px solid var(--aura-error);
+  border-radius: var(--aura-radius-sm);
+  background: var(--aura-error-light);
+  color: var(--aura-error);
+  font-size: var(--aura-font-size-sm);
+}

package/esm/folder/tree-utils.d.ts

@@ -0,0 +1,30 @@
+import type { FolderTreeData } from './types';
+/**
+ * 路径 key：把 `path` 数组拼成稳定字符串，用作 Set / Map 的键与 DOM id 片段。
+ * 分隔符用 `/`——与文件系统习惯一致，也便于文档里肉眼核对。
+ */
+export declare const keyOfPath: (path: string[]) => string;
+/** 两个路径是否指向同一节点 */
+export declare const isSamePath: (a: string[], b: string[]) => boolean;
+/** 是否为文件夹（有 `children` 字段即为文件夹，空数组也算） */
+export declare const isFolder: (node: FolderTreeData) => boolean;
+/**
+ * 收集所有文件夹的 key。
+ * 语义上与 antdx 的「默认展开全部」一致：**叶子节点不在其中**。
+ */
+export declare function collectFolderKeys(tree: FolderTreeData[], parentPath?: string[], out?: string[]): string[];
+/** 按路径找节点 */
+export declare function findNode(tree: FolderTreeData[], path: string[]): FolderTreeData | undefined;
+/**
+ * 不可变更新：把 `data` 合并进目标节点，返回新树。
+ * 目标不存在时原样返回（引用不变，便于调用方做浅比较）。
+ */
+export declare function updateNodeAt(tree: FolderTreeData[], path: string[], data: Partial<FolderTreeData>): FolderTreeData[];
+/** 不可变删除：返回新树；目标不存在时原样返回 */
+export declare function removeNodeAt(tree: FolderTreeData[], path: string[]): FolderTreeData[];
+/** 不可变新增：在目标文件夹的子节点末尾追加；父节点不存在或不是文件夹时原样返回 */
+export declare function addNodeAt(tree: FolderTreeData[], parentPath: string[], node: FolderTreeData): FolderTreeData[];
+/** 取文件扩展名（小写）；无扩展名返回空串 */
+export declare function extOf(name: string): string;
+/** 扩展名 → 高亮语言，供预览区做语法着色 */
+export declare function languageOf(name: string): string;

package/esm/folder/tree-utils.js

@@ -0,0 +1,147 @@
+/**
+ * 路径 key：把 `path` 数组拼成稳定字符串，用作 Set / Map 的键与 DOM id 片段。
+ * 分隔符用 `/`——与文件系统习惯一致，也便于文档里肉眼核对。
+ */
+export const keyOfPath = path => path.join('/');
+
+/** 两个路径是否指向同一节点 */
+export const isSamePath = (a, b) => a.length === b.length && a.every((segment, index) => segment === b[index]);
+
+/** 是否为文件夹（有 `children` 字段即为文件夹，空数组也算） */
+export const isFolder = node => Array.isArray(node.children);
+
+/**
+ * 收集所有文件夹的 key。
+ * 语义上与 antdx 的「默认展开全部」一致：**叶子节点不在其中**。
+ */
+export function collectFolderKeys(tree, parentPath = [], out = []) {
+  for (const node of tree) {
+    const path = [...parentPath, node.path];
+    if (isFolder(node)) {
+      out.push(keyOfPath(path));
+      collectFolderKeys(node.children ?? [], path, out);
+    }
+  }
+  return out;
+}
+
+/** 按路径找节点 */
+export function findNode(tree, path) {
+  if (path.length === 0) return undefined;
+  const [head, ...rest] = path;
+  const match = tree.find(node => node.path === head);
+  if (!match) return undefined;
+  if (rest.length === 0) return match;
+  return findNode(match.children ?? [], rest);
+}
+
+/**
+ * 不可变更新：把 `data` 合并进目标节点，返回新树。
+ * 目标不存在时原样返回（引用不变，便于调用方做浅比较）。
+ */
+export function updateNodeAt(tree, path, data) {
+  if (path.length === 0) return tree;
+  const [head, ...rest] = path;
+  let changed = false;
+  const next = tree.map(node => {
+    if (node.path !== head) return node;
+    if (rest.length === 0) {
+      changed = true;
+      return {
+        ...node,
+        ...data
+      };
+    }
+    const children = updateNodeAt(node.children ?? [], rest, data);
+    if (children === (node.children ?? [])) return node;
+    changed = true;
+    return {
+      ...node,
+      children
+    };
+  });
+  return changed ? next : tree;
+}
+
+/** 不可变删除：返回新树；目标不存在时原样返回 */
+export function removeNodeAt(tree, path) {
+  if (path.length === 0) return tree;
+  const [head, ...rest] = path;
+  if (rest.length === 0) {
+    const index = tree.findIndex(node => node.path === head);
+    if (index === -1) return tree;
+    return [...tree.slice(0, index), ...tree.slice(index + 1)];
+  }
+  let changed = false;
+  const next = tree.map(node => {
+    if (node.path !== head || !isFolder(node)) return node;
+    const children = removeNodeAt(node.children ?? [], rest);
+    if (children === (node.children ?? [])) return node;
+    changed = true;
+    return {
+      ...node,
+      children
+    };
+  });
+  return changed ? next : tree;
+}
+
+/** 不可变新增：在目标文件夹的子节点末尾追加；父节点不存在或不是文件夹时原样返回 */
+export function addNodeAt(tree, parentPath, node) {
+  if (parentPath.length === 0) return [...tree, node];
+  const [head, ...rest] = parentPath;
+  let changed = false;
+  const next = tree.map(current => {
+    if (current.path !== head || !isFolder(current)) return current;
+    if (rest.length === 0) {
+      changed = true;
+      return {
+        ...current,
+        children: [...(current.children ?? []), node]
+      };
+    }
+    const children = addNodeAt(current.children ?? [], rest, node);
+    if (children === (current.children ?? [])) return current;
+    changed = true;
+    return {
+      ...current,
+      children
+    };
+  });
+  return changed ? next : tree;
+}
+
+/** 取文件扩展名（小写）；无扩展名返回空串 */
+export function extOf(name) {
+  const dot = name.lastIndexOf('.');
+  if (dot <= 0 || dot === name.length - 1) return '';
+  return name.slice(dot + 1).toLowerCase();
+}
+
+/** 扩展名 → 高亮语言，供预览区做语法着色 */
+export function languageOf(name) {
+  const ext = extOf(name);
+  const map = {
+    js: 'javascript',
+    cjs: 'javascript',
+    mjs: 'javascript',
+    jsx: 'jsx',
+    ts: 'typescript',
+    tsx: 'tsx',
+    json: 'json',
+    css: 'css',
+    less: 'less',
+    scss: 'scss',
+    html: 'markup',
+    htm: 'markup',
+    md: 'markdown',
+    yml: 'yaml',
+    yaml: 'yaml',
+    sh: 'bash',
+    bash: 'bash',
+    py: 'python',
+    go: 'go',
+    sql: 'sql'
+  };
+  return map[ext] ?? 'text';
+}

package/esm/folder/types.d.ts

@@ -0,0 +1,51 @@
+import type React from 'react';
+import type { MenuProps } from 'antd';
+/** 右键菜单项：沿用 antd Menu 的 items 结构 */
+export type FolderContextMenuItem = MenuProps['items'] | false | ((key: string) => MenuProps['items']);
+export interface FolderTreeData {
+    /** 显示名称 */
+    title: string;
+    /**
+     * 节点自身的路径标识，需在**同级中唯一**。
+     * 选中 / 展开 / `ref.getNode` 用的都是「从根到该节点的 path 依次拼接」的数组。
+     */
+    path: string;
+    /** 文件内容；给了就不必再配 `fileContentService` */
+    content?: string;
+    /** 子节点；仅文件夹有意义。空数组按「空文件夹」处理，仍可展开 */
+    children?: FolderTreeData[];
+    /** 该节点的右键菜单；优先级高于全局 `contextMenu`，传 `false` 禁用 */
+    contextMenu?: FolderContextMenuItem;
+}
+/** 选中的文件信息 */
+export interface FolderSelectedFile {
+    /** 从根到选中节点的 path 数组 */
+    path: string[];
+    name?: string;
+    content?: string;
+}
+export interface FolderPreviewFile {
+    content?: string;
+    path: string[];
+    title?: React.ReactNode;
+    /** 由扩展名推导，用于代码高亮 */
+    language: string;
+}
+export interface FolderPreviewRenderInfo {
+    originNode: React.ReactNode;
+}
+/** 文件内容服务：按需拉取文件内容（懒加载大文件树时用） */
+export interface FileContentService {
+    loadFileContent(filePath: string): Promise<string>;
+}
+export type FolderDirectoryIcons = false | Record<string, React.ReactNode | (() => React.ReactNode)>;
+export interface FolderRef {
+    /** 按路径取节点 */
+    getNode: (path: string[]) => FolderTreeData | undefined;
+    /** 不可变更新：把 `data` 合并到目标节点，返回新的 treeData */
+    updateNode: (path: string[], data: Partial<FolderTreeData>) => FolderTreeData[];
+    /** 不可变删除：返回新的 treeData */
+    deleteNode: (path: string[]) => FolderTreeData[];
+    /** 不可变新增：在目标文件夹下追加子节点，返回新的 treeData */
+    addNode: (parentPath: string[], node: FolderTreeData) => FolderTreeData[];
+}

package/esm/folder/types.js

@@ -0,0 +1 @@
+export {};

package/esm/index.d.ts

@@ -0,0 +1,40 @@
+export { XProvider, buildXThemeConfig } from './x-provider';
+export type { XProviderProps, XThemeConfigOptions } from './x-provider';
+export { useXStream, isAbortError } from './use-x-stream';
+export type { UseXStreamResult, FetchDataStreamOptions, XStreamChunk } from './use-x-stream';
+export { useXChat } from './use-x-chat';
+export type { UseXChatOptions, UseXChatResult, XMessage, XChatRequestContext, } from './use-x-chat';
+export { Bubble } from './bubble';
+export type { BubbleProps, BubbleListItem, BubbleListProps } from './bubble';
+export { MarkdownContent } from './markdown-content';
+export type { MarkdownContentProps } from './markdown-content';
+export { Sender } from './sender';
+export type { SenderProps } from './sender';
+export { Attachments } from './attachments';
+export type { AttachmentsProps, AttachmentItem } from './attachments';
+export { FileCard, formatFileSize, getFileExt } from './file-card';
+export type { FileCardProps, FileCardStatus } from './file-card';
+export { Welcome } from './welcome';
+export type { WelcomeProps } from './welcome';
+export { Prompts } from './prompts';
+export type { PromptsProps, PromptItem } from './prompts';
+export { Suggestion } from './suggestion';
+export type { SuggestionProps, SuggestionItem } from './suggestion';
+export { Think } from './think';
+export type { ThinkProps } from './think';
+export { ThoughtChain } from './thought-chain';
+export type { ThoughtChainProps, ThoughtChainItem, ThoughtChainStatus, } from './thought-chain';
+export { Actions } from './actions';
+export type { ActionsProps, ActionItem } from './actions';
+export { Conversations } from './conversations';
+export type { ConversationsProps, ConversationItem, ConversationMenuConfig, ConversationMenuItem, } from './conversations';
+export { Sources } from './sources';
+export type { SourcesProps, SourcesItem } from './sources';
+export { Folder } from './folder';
+export type { FolderProps, FolderRef, FolderTreeData, FolderSelectedFile, FolderPreviewFile, FolderPreviewRenderInfo, FolderDirectoryIcons, FolderContextMenuItem, FileContentService, } from './folder';
+export { CodeHighlighter } from './code-highlighter';
+export type { CodeHighlighterProps, CodeHighlighterRef } from './code-highlighter';
+export { Mermaid } from './mermaid';
+export type { MermaidProps, MermaidActions, MermaidConfig } from './mermaid';
+export { XNotification, useNotification } from './notification';
+export type { XNotificationApi, XNotificationConfig, XNotificationOpenArgs, XNotificationPermission, UseNotificationResult, } from './notification';

package/esm/index.js

@@ -0,0 +1,20 @@
+export { XProvider, buildXThemeConfig } from "./x-provider";
+export { useXStream, isAbortError } from "./use-x-stream";
+export { useXChat } from "./use-x-chat";
+export { Bubble } from "./bubble";
+export { MarkdownContent } from "./markdown-content";
+export { Sender } from "./sender";
+export { Attachments } from "./attachments";
+export { FileCard, formatFileSize, getFileExt } from "./file-card";
+export { Welcome } from "./welcome";
+export { Prompts } from "./prompts";
+export { Suggestion } from "./suggestion";
+export { Think } from "./think";
+export { ThoughtChain } from "./thought-chain";
+export { Actions } from "./actions";
+export { Conversations } from "./conversations";
+export { Sources } from "./sources";
+export { Folder } from "./folder";
+export { CodeHighlighter } from "./code-highlighter";
+export { Mermaid } from "./mermaid";
+export { XNotification, useNotification } from "./notification";

package/esm/markdown-content/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export interface MarkdownContentProps {
+    /**
+     * Markdown 文本。流式过程中传入未闭合的语法也可以——remark 按块级容错渲染，
+     * 收到新内容后重新渲染即可（打字机场景）。
+     */
+    children?: string;
+    /**
+     * 围栏代码块是否交给 [`CodeHighlighter`](/x-components/code-highlighter) 渲染
+     * （语法着色 + 语言标识 + 一键复制）。设为 `false` 回到朴素的 `pre > code`。
+     * @default true
+     */
+    highlightCode?: boolean;
+    /**
+     * 完全自定义代码块渲染，优先级高于 `highlightCode`。
+     * 返回的节点会**直接取代** `<pre>` 本身，因此需要自行负责包裹与样式。
+     */
+    renderCode?: (info: {
+        lang: string;
+        code: string;
+    }) => React.ReactNode;
+    className?: string;
+}
+/**
+ * MarkdownContent — Bubble 的可选内容渲染器。
+ *
+ * 基于 react-markdown（`@aura-react-comp/x` 的运行时依赖，随包自动安装）。
+ * 安全默认值：
+ * 1. **不渲染原始 HTML**（未接入 rehype-raw，HTML 标签按纯文本展示）；
+ * 2. 链接协议白名单：仅放行 `http` / `https` / `mailto`，其余清洗为空；
+ * 3. 外链统一 `target="_blank" rel="noreferrer"`；
+ * 4. 围栏代码块**只做语法着色，从不执行**——代码内容始终作为文本渲染。
+ */
+export declare const MarkdownContent: React.FC<MarkdownContentProps>;

package/esm/markdown-content/index.js

@@ -0,0 +1,117 @@
+import React, { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { classNames, prefixCls } from '@aura-react-comp/shared';
+import { CodeHighlighter } from "../code-highlighter";
+
+/** 链接协议白名单：之外的协议一律清洗为空串（react-markdown 会移除 href） */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const SAFE_PROTOCOLS = ['http:', 'https:', 'mailto:'];
+function safeUrlTransform(url) {
+  try {
+    const {
+      protocol
+    } = new URL(url, 'https://aura.local');
+    return SAFE_PROTOCOLS.includes(protocol) ? url : '';
+  } catch {
+    return '';
+  }
+}
+
+/** 围栏代码块的 `language-xxx` 类名 → 语言标识 */
+function parseLang(className) {
+  if (typeof className !== 'string') return undefined;
+  return /language-(\S+)/.exec(className)?.[1];
+}
+
+/** 把 React 子树压成纯文本（代码块内容通常是字符串，这里兜住数组/数字等形态） */
+function toPlainText(value) {
+  if (value === null || value === undefined || typeof value === 'boolean') return '';
+  if (typeof value === 'string' || typeof value === 'number') return String(value);
+  if (Array.isArray(value)) return value.map(toPlainText).join('');
+  return '';
+}
+/**
+ * MarkdownContent — Bubble 的可选内容渲染器。
+ *
+ * 基于 react-markdown（`@aura-react-comp/x` 的运行时依赖，随包自动安装）。
+ * 安全默认值：
+ * 1. **不渲染原始 HTML**（未接入 rehype-raw，HTML 标签按纯文本展示）；
+ * 2. 链接协议白名单：仅放行 `http` / `https` / `mailto`，其余清洗为空；
+ * 3. 外链统一 `target="_blank" rel="noreferrer"`；
+ * 4. 围栏代码块**只做语法着色，从不执行**——代码内容始终作为文本渲染。
+ */
+export const MarkdownContent = ({
+  children,
+  highlightCode = true,
+  renderCode,
+  className
+}) => {
+  const components = useMemo(() => ({
+    a: ({
+      node,
+      ...rest
+    }) => /*#__PURE__*/_jsx("a", {
+      ...rest,
+      target: "_blank",
+      rel: "noreferrer"
+    }),
+    // 行内代码走这里；围栏代码块交给下面的 pre 覆写统一处理
+    code: ({
+      node,
+      ...rest
+    }) => /*#__PURE__*/_jsx("code", {
+      ...rest
+    }),
+    /**
+     * 覆写 `pre` 而不是 `code`，是因为围栏代码块在 hast 里是
+     * `pre > code`：若在 `code` 里返回一个 `<div>`（CodeHighlighter 的根），
+     * 就会形成 `<pre><div>` 这种非法嵌套。这里直接替换掉 `pre` 本身，
+     * 既能拿到子元素的 language 类名，也不必再渲染那层 `code`。
+     */
+    pre: ({
+      node,
+      children,
+      ...rest
+    }) => {
+      const child = React.Children.toArray(children)[0];
+      if (! /*#__PURE__*/React.isValidElement(child)) {
+        return /*#__PURE__*/_jsx("pre", {
+          ...rest,
+          children: children
+        });
+      }
+      const {
+        className: codeClassName,
+        children: codeChildren
+      } = child.props;
+      const lang = parseLang(codeClassName) ?? 'text';
+      // react-markdown 传来的代码内容带尾随换行；留着它会让代码块末尾多出一条
+      // 空白行（单行代码渲染成 2 行）。展示与复制都不需要它，统一去掉一个。
+      const code = toPlainText(codeChildren).replace(/\n$/, '');
+      if (renderCode) return /*#__PURE__*/_jsx(_Fragment, {
+        children: renderCode({
+          lang,
+          code
+        })
+      });
+      if (!highlightCode) return /*#__PURE__*/_jsx("pre", {
+        ...rest,
+        children: children
+      });
+      return /*#__PURE__*/_jsx(CodeHighlighter, {
+        lang: lang,
+        children: code
+      });
+    }
+  }), [highlightCode, renderCode]);
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(prefixCls('x-markdown'), className),
+    children: /*#__PURE__*/_jsx(ReactMarkdown, {
+      urlTransform: safeUrlTransform,
+      components: components,
+      children: children ?? ''
+    })
+  });
+};
+MarkdownContent.displayName = 'MarkdownContent';