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

package/esm/notification/index.js

@@ -0,0 +1,148 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+/** 当前来源（origin）的浏览器通知授权状态 */
+
+/**
+ * `open` 的参数：既接受扁平的 {@link XNotificationConfig}，
+ * 也接受 antdx 风格的 `{ openConfig, closeConfig }` 包装形态。
+ * `closeConfig` 用于在弹出新通知前先关掉指定 `tag` 的旧通知。
+ */
+
+/** 懒取原生构造函数：模块加载期不触碰 `window`，SSR 与 jsdom 都安全 */
+function getNative() {
+  if (typeof window === 'undefined') return undefined;
+  return window.Notification;
+}
+
+/** 未授权 / 环境不支持时的统一返回值（antdx 同样以 `denied` 兜底） */
+function currentPermission() {
+  const Native = getNative();
+  return Native ? Native.permission : 'denied';
+}
+
+/** 本模块发出的通知，按 tag 索引；未传 tag 的用内部序号占位 */
+const opened = new Map();
+let seq = 0;
+function closeByTags(tags) {
+  if (!getNative()) return;
+  if (!tags || tags.length === 0) {
+    opened.forEach(instance => instance.close());
+    opened.clear();
+    return;
+  }
+  for (const tag of tags) {
+    const instance = opened.get(tag);
+    if (instance) {
+      instance.close();
+      opened.delete(tag);
+    }
+  }
+}
+function requestPermission() {
+  const Native = getNative();
+  if (!Native) return Promise.resolve('denied');
+  try {
+    return Promise.resolve(Native.requestPermission());
+  } catch {
+    // 部分环境（非安全上下文 / 权限策略禁用）会直接抛错
+    return Promise.resolve('denied');
+  }
+}
+const isWrapped = args => 'openConfig' in args;
+function open(args) {
+  const Native = getNative();
+  // 环境不支持（如 SSR、部分 WebView）→ 静默无效果
+  if (!Native) return;
+  const {
+    openConfig,
+    closeConfig
+  } = isWrapped(args) ? {
+    openConfig: args.openConfig,
+    closeConfig: args.closeConfig
+  } : {
+    openConfig: args,
+    closeConfig: undefined
+  };
+
+  // 未授权时不弹（浏览器同样会忽略），并避免让调用方以为已生效
+  if (Native.permission !== 'granted') return;
+  if (closeConfig?.length) {
+    closeByTags(closeConfig.filter(tag => Boolean(tag)));
+  }
+  const {
+    title,
+    duration,
+    onClick,
+    onClose,
+    onError,
+    onShow,
+    ...rest
+  } = openConfig;
+  let instance;
+  try {
+    instance = new Native(title, rest);
+  } catch {
+    // title 为空等非法参数：不抛出，避免打断调用方的业务流程
+    return;
+  }
+  const key = rest.tag ?? `__aura_x_${seq++}`;
+  opened.set(key, instance);
+  instance.onclick = event => onClick?.(event, () => closeByTags([key]));
+  instance.onshow = event => onShow?.(event);
+  instance.onclose = event => {
+    opened.delete(key);
+    onClose?.(event);
+  };
+  instance.onerror = event => {
+    opened.delete(key);
+    onError?.(event);
+  };
+  if (typeof duration === 'number' && duration > 0) {
+    setTimeout(() => {
+      instance.close();
+      opened.delete(key);
+    }, duration);
+  }
+}
+
+/**
+ * XNotification — 浏览器**系统通知**的命令式 API（对标 antdx 的 `notification`）。
+ *
+ * 注意这是「页面外的系统级通知」，走 `window.Notification`，受操作系统与浏览器
+ * 通知权限管控——**不是**页面内的消息条。页面内的提示请用 `@aura-react-comp/ui` 的
+ * `Notification` / `Message`。
+ */
+export const XNotification = {
+  get permission() {
+    return currentPermission();
+  },
+  requestPermission,
+  open,
+  close: closeByTags
+};
+
+/**
+ * useNotification — `XNotification` 的 Hook 形态。
+ *
+ * 返回 `[{ permission }, { open, close, requestPermission }]`。
+ * `permission` 首帧固定为 `'denied'`，挂载后（`useEffect` 中）再同步真实值，
+ * 以避免服务端渲染与水合结果不一致。
+ */
+export function useNotification() {
+  const [permission, setPermission] = useState('denied');
+  useEffect(() => {
+    setPermission(currentPermission());
+  }, []);
+  const request = useCallback(async () => {
+    const next = await requestPermission();
+    setPermission(next);
+    return next;
+  }, []);
+  return useMemo(() => [{
+    permission
+  }, {
+    open,
+    close: closeByTags,
+    requestPermission: request
+  }], [permission, request]);
+}

package/esm/prompts/index.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface PromptItem {
+    key: React.Key;
+    /** 提示词主文案 */
+    label: React.ReactNode;
+    /** 补充说明 */
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+}
+export interface PromptsProps {
+    items: PromptItem[];
+    /** 点击某条提示词 */
+    onItemClick?: (item: PromptItem) => void;
+    /** 排列方向：vertical 纵向卡片，horizontal 横向卡片流 */
+    direction?: 'vertical' | 'horizontal';
+    /** 分组标题（如「试试这样问」） */
+    title?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Prompts — 提示词集。
+ *
+ * 常与 [`Welcome`](/x-components/welcome) 的 `extra` 或 `Sender` 上方组合，
+ * 引导用户快速开口。语义为按钮列表：键盘可达，Enter / 空格触发。
+ */
+export declare const Prompts: React.FC<PromptsProps>;

package/esm/prompts/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { classNames, prefixCls } from '@aura-react-comp/shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Prompts — 提示词集。
+ *
+ * 常与 [`Welcome`](/x-components/welcome) 的 `extra` 或 `Sender` 上方组合，
+ * 引导用户快速开口。语义为按钮列表：键盘可达，Enter / 空格触发。
+ */
+export const Prompts = ({
+  items,
+  onItemClick,
+  direction = 'vertical',
+  title,
+  className,
+  style
+}) => /*#__PURE__*/_jsxs("div", {
+  className: classNames(prefixCls('x-prompts'), prefixCls(`x-prompts--${direction}`), className),
+  style: style,
+  children: [title ? /*#__PURE__*/_jsx("div", {
+    className: prefixCls('x-prompts-title'),
+    children: title
+  }) : null, /*#__PURE__*/_jsx("ul", {
+    className: prefixCls('x-prompts-list'),
+    role: "list",
+    children: items.map(item => /*#__PURE__*/_jsx("li", {
+      role: "listitem",
+      children: /*#__PURE__*/_jsxs("button", {
+        type: "button",
+        className: prefixCls('x-prompts-item'),
+        onClick: () => onItemClick?.(item),
+        children: [item.icon ? /*#__PURE__*/_jsx("span", {
+          className: prefixCls('x-prompts-item-icon'),
+          children: item.icon
+        }) : null, /*#__PURE__*/_jsxs("span", {
+          className: prefixCls('x-prompts-item-body'),
+          children: [/*#__PURE__*/_jsx("span", {
+            className: prefixCls('x-prompts-item-label'),
+            children: item.label
+          }), item.description ? /*#__PURE__*/_jsx("span", {
+            className: prefixCls('x-prompts-item-description'),
+            children: item.description
+          }) : null]
+        })]
+      })
+    }, item.key))
+  })]
+});
+Prompts.displayName = 'Prompts';

package/esm/prompts/index.less

@@ -0,0 +1,95 @@
+/* Prompts — 提示词集（玻璃卡片 + 渐变图标底座 + 悬停上浮） */
+
+.aura-x-prompts-title {
+  margin-bottom: var(--aura-spacing-2);
+  font-size: var(--aura-font-size-sm);
+  color: var(--aura-text-secondary);
+}
+
+.aura-x-prompts-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aura-spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.aura-x-prompts--horizontal .aura-x-prompts-list {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.aura-x-prompts-item {
+  display: flex;
+  gap: var(--aura-spacing-3);
+  align-items: flex-start;
+  width: 100%;
+  padding: var(--aura-spacing-3) var(--aura-spacing-4);
+  border: 1px solid var(--aura-x-bubble-border);
+  border-radius: var(--aura-radius-md);
+  background: var(--aura-x-bubble-ai-bg);
+  color: var(--aura-text);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color var(--aura-duration-normal) var(--aura-easing),
+    background var(--aura-duration-normal) var(--aura-easing),
+    box-shadow var(--aura-duration-normal) var(--aura-easing),
+    transform var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-prompts-item:hover {
+  border-color: var(--aura-x-accent);
+  background: var(--aura-x-accent-soft);
+  box-shadow: var(--aura-x-glow);
+  transform: translateY(-2px);
+}
+
+.aura-x-prompts-item:focus-visible {
+  outline: none;
+  box-shadow: var(--aura-x-focus-ring);
+}
+
+.aura-x-prompts--horizontal .aura-x-prompts-item {
+  width: auto;
+  min-width: 180px;
+  flex: 1 1 220px;
+}
+
+/* 图标底座：渐变圆角方块 */
+.aura-x-prompts-item-icon {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--aura-radius-md);
+  background: var(--aura-x-accent-gradient);
+  color: #fff;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.aura-x-prompts-item-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.aura-x-prompts-item-label {
+  font-size: var(--aura-font-size-sm);
+  font-weight: 500;
+}
+
+.aura-x-prompts-item-description {
+  font-size: var(--aura-font-size-xs);
+  color: var(--aura-text-secondary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aura-x-prompts-item:hover {
+    transform: none;
+  }
+}

package/esm/sender/index.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+export interface SenderProps {
+    /** 受控值；与 defaultValue 二选一 */
+    value?: string;
+    /** 非受控初值 */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** 提交回调（Enter 或点击发送；空白内容不会触发） */
+    onSubmit?: (content: string) => void;
+    /** 取消回调：loading 时点击「停止」触发 */
+    onCancel?: () => void;
+    /** 生成中：按钮变为「停止」，Enter 不再提交 */
+    loading?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    /**
+     * 提交后是否清空输入（仅非受控模式生效）
+     * @default true
+     */
+    clearOnSubmit?: boolean;
+    autoFocus?: boolean;
+    /**
+     * 提交键位：
+     * - `enter`：Enter 提交，Shift + Enter 换行（默认）
+     * - `shiftEnter`：Shift + Enter 提交，Enter 换行
+     * @default 'enter'
+     */
+    submitType?: 'enter' | 'shiftEnter';
+    /** textarea 行数范围（透传 antd autoSize） */
+    autoSize?: {
+        minRows?: number;
+        maxRows?: number;
+    };
+    /** 顶部插槽（如附件条、提示条） */
+    header?: React.ReactNode;
+    /** 底部插槽（如字数统计、免责声明） */
+    footer?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Sender — 对话输入框。
+ *
+ * - Enter 提交，Shift + Enter 换行，中文输入法组合中不提交；
+ * - loading 时按钮变为「停止」，点击触发 onCancel，Enter 不再提交；
+ * - 受控 / 非受控两种用法。
+ */
+export declare const Sender: React.FC<SenderProps>;

package/esm/sender/index.js

@@ -0,0 +1,88 @@
+import React, { useCallback, useState } from 'react';
+import { Button, Input } from 'antd';
+import { classNames, prefixCls } from '@aura-react-comp/shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Sender — 对话输入框。
+ *
+ * - Enter 提交，Shift + Enter 换行，中文输入法组合中不提交；
+ * - loading 时按钮变为「停止」，点击触发 onCancel，Enter 不再提交；
+ * - 受控 / 非受控两种用法。
+ */
+export const Sender = ({
+  value,
+  defaultValue = '',
+  onChange,
+  onSubmit,
+  onCancel,
+  loading = false,
+  placeholder = '输入消息，Enter 发送，Shift + Enter 换行',
+  disabled = false,
+  clearOnSubmit = true,
+  autoFocus = false,
+  submitType = 'enter',
+  autoSize = {
+    minRows: 1,
+    maxRows: 6
+  },
+  header,
+  footer,
+  className,
+  style
+}) => {
+  const [inner, setInner] = useState(defaultValue);
+  const isControlled = value !== undefined;
+  const current = isControlled ? value : inner;
+  const triggerSubmit = useCallback(() => {
+    if (disabled || loading) return;
+    if (!current.trim()) return;
+    onSubmit?.(current);
+    if (!isControlled && clearOnSubmit) setInner('');
+  }, [current, disabled, loading, isControlled, clearOnSubmit, onSubmit]);
+  const handleChange = event => {
+    if (!isControlled) setInner(event.target.value);
+    onChange?.(event.target.value);
+  };
+  const handleKeyDown = event => {
+    // 中文输入法组词过程中不提交
+    if (event.nativeEvent.isComposing) return;
+    if (event.key !== 'Enter') return;
+    const shouldSubmit = submitType === 'enter' ? !event.shiftKey : Boolean(event.shiftKey);
+    if (shouldSubmit) {
+      event.preventDefault();
+      triggerSubmit();
+    }
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(prefixCls('x-sender'), disabled && prefixCls('x-sender--disabled'), className),
+    style: style,
+    children: [header ? /*#__PURE__*/_jsx("div", {
+      className: prefixCls('x-sender-header'),
+      children: header
+    }) : null, /*#__PURE__*/_jsx(Input.TextArea, {
+      value: current,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      placeholder: placeholder,
+      disabled: disabled,
+      autoFocus: autoFocus,
+      autoSize: autoSize,
+      "aria-label": "\u6D88\u606F\u8F93\u5165\u6846"
+    }), /*#__PURE__*/_jsx("div", {
+      className: prefixCls('x-sender-actions'),
+      children: /*#__PURE__*/_jsx(Button, {
+        type: "primary",
+        shape: "round",
+        disabled: disabled,
+        onClick: loading ? onCancel : triggerSubmit,
+        "aria-label": loading ? '停止生成' : '发送',
+        children: loading ? '停止' : '发送'
+      })
+    }), footer ? /*#__PURE__*/_jsx("div", {
+      className: prefixCls('x-sender-footer'),
+      children: footer
+    }) : null]
+  });
+};
+Sender.displayName = 'Sender';

package/esm/sender/index.less

@@ -0,0 +1,75 @@
+/* Sender — 对话输入框（玻璃容器 + 聚焦光晕 + 渐变按钮） */
+
+.aura-x-sender {
+  display: flex;
+  gap: var(--aura-spacing-2);
+  align-items: flex-end;
+  flex-wrap: wrap;
+  padding: var(--aura-spacing-2) var(--aura-spacing-2) var(--aura-spacing-2)
+    var(--aura-spacing-4);
+  border: 1px solid var(--aura-x-bubble-border);
+  border-radius: var(--aura-radius-lg);
+  background: var(--aura-x-bubble-ai-bg);
+  backdrop-filter: var(--aura-x-glass-blur);
+  -webkit-backdrop-filter: var(--aura-x-glass-blur);
+  transition:
+    border-color var(--aura-duration-normal) var(--aura-easing),
+    box-shadow var(--aura-duration-normal) var(--aura-easing);
+
+  &:focus-within {
+    border-color: var(--aura-x-accent);
+    box-shadow: var(--aura-x-focus-ring);
+  }
+
+  .ant-input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    background: transparent;
+    box-shadow: none;
+    resize: none;
+  }
+
+  .aura-x-sender-actions {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .ant-btn {
+    border: none;
+    color: #fff;
+    background: var(--aura-x-accent-gradient);
+    box-shadow: 0 4px 12px -4px rgba(124, 58, 237, 0.5);
+    transition:
+      transform var(--aura-duration-fast) var(--aura-easing),
+      box-shadow var(--aura-duration-fast) var(--aura-easing),
+      opacity var(--aura-duration-fast) var(--aura-easing);
+  }
+
+  .ant-btn:not(:disabled):hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 16px -4px rgba(124, 58, 237, 0.65);
+  }
+
+  .ant-btn:not(:disabled):active {
+    transform: translateY(0);
+  }
+}
+
+/* 插槽 */
+.aura-x-sender-header,
+.aura-x-sender-footer {
+  flex-basis: 100%;
+  font-size: var(--aura-font-size-xs);
+  color: var(--aura-text-tertiary);
+}
+
+.aura-x-sender--disabled {
+  opacity: 0.6;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aura-x-sender .ant-btn:not(:disabled):hover {
+    transform: none;
+  }
+}

package/esm/sources/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+export interface SourcesItem {
+    /** 唯一键；缺省用索引 */
+    key?: React.Key;
+    title: React.ReactNode;
+    /** 有 url 时整项渲染为外链 */
+    url?: string;
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+}
+export interface SourcesProps {
+    /** 头部标题；缺省按条数生成「已引用 N 个来源」 */
+    title?: React.ReactNode;
+    items: SourcesItem[];
+    /** 折叠图标位置 @default 'start' */
+    expandIconPosition?: 'start' | 'end';
+    /** 非受控默认展开态 @default true */
+    defaultExpanded?: boolean;
+    /** 受控展开态 */
+    expanded?: boolean;
+    onExpand?: (expanded: boolean) => void;
+    /** 点击某条来源（外链与按钮都会触发） */
+    onClick?: (item: SourcesItem) => void;
+    /** 行内模式：渲染为上标序号，悬停 / 聚焦时浮出来源详情 @default false */
+    inline?: boolean;
+    /** 行内模式下强制激活的项（受控） */
+    activeKey?: React.Key;
+    /** 行内弹层宽度 @default 300 */
+    popoverOverlayWidth?: number | string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Sources — 来源引用。
+ *
+ * 联网搜索 / RAG 场景下展示答案引用到的数据来源：头部一行摘要 + 有序列表。
+ * 每项支持图标、标题、外链与描述；`inline` 模式改为正文中的上标序号，
+ * 悬停或聚焦时浮出详情，适合与段落混排。
+ */
+export declare const Sources: React.FC<SourcesProps>;