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

package/esm/sources/index.js

@@ -0,0 +1,154 @@
+import React, { useCallback, useState } from 'react';
+import { classNames, prefixCls } from '@aura-react-comp/shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/** 头部默认标题：按条数生成，无来源时不展示头部 */
+function defaultTitle(count) {
+  return `已引用 ${count} 个来源`;
+}
+
+/**
+ * Sources — 来源引用。
+ *
+ * 联网搜索 / RAG 场景下展示答案引用到的数据来源：头部一行摘要 + 有序列表。
+ * 每项支持图标、标题、外链与描述；`inline` 模式改为正文中的上标序号，
+ * 悬停或聚焦时浮出详情，适合与段落混排。
+ */
+export const Sources = ({
+  title,
+  items,
+  expandIconPosition = 'start',
+  defaultExpanded = true,
+  expanded,
+  onExpand,
+  onClick,
+  inline = false,
+  activeKey,
+  popoverOverlayWidth = 300,
+  className,
+  style
+}) => {
+  const [innerOpen, setInnerOpen] = useState(defaultExpanded);
+  const [hoveredKey, setHoveredKey] = useState(null);
+  const isOpenControlled = expanded !== undefined;
+  const isOpen = isOpenControlled ? expanded : innerOpen;
+  const toggle = useCallback(() => {
+    const next = !isOpen;
+    if (!isOpenControlled) setInnerOpen(next);
+    onExpand?.(next);
+  }, [isOpen, isOpenControlled, onExpand]);
+  const keyOf = (item, index) => item.key ?? index;
+
+  /** 单条来源的正文（序号 + 图标 + 标题） */
+  const renderBody = (item, index) => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("span", {
+      className: prefixCls('x-sources-item-index'),
+      "aria-hidden": "true",
+      children: index + 1
+    }), item.icon ? /*#__PURE__*/_jsx("span", {
+      className: prefixCls('x-sources-item-icon'),
+      "aria-hidden": "true",
+      children: item.icon
+    }) : null, /*#__PURE__*/_jsx("span", {
+      className: prefixCls('x-sources-item-title'),
+      children: item.title
+    })]
+  });
+
+  // 空列表渲染 null（与 Suggestion / Attachments 的约定一致）
+  if (items.length === 0) return null;
+  if (inline) {
+    return /*#__PURE__*/_jsx("span", {
+      className: classNames(prefixCls('x-sources'), prefixCls('x-sources--inline'), className),
+      style: style,
+      children: items.map((item, index) => {
+        const key = keyOf(item, index);
+        const active = activeKey !== undefined ? activeKey === key : hoveredKey === key;
+        return /*#__PURE__*/_jsxs("span", {
+          className: prefixCls('x-sources-inline-wrap'),
+          onMouseEnter: () => setHoveredKey(key),
+          onMouseLeave: () => setHoveredKey(null),
+          children: [/*#__PURE__*/_jsx("button", {
+            type: "button",
+            className: classNames(prefixCls('x-sources-inline-chip'), active && prefixCls('x-sources-inline-chip--active')),
+            "aria-expanded": active,
+            onFocus: () => setHoveredKey(key),
+            onBlur: () => setHoveredKey(null),
+            onClick: () => onClick?.(item),
+            onKeyDown: event => {
+              if (event.key === 'Escape') setHoveredKey(null);
+            },
+            children: index + 1
+          }), active ? /*#__PURE__*/_jsxs("span", {
+            role: "tooltip",
+            className: prefixCls('x-sources-popover'),
+            style: {
+              width: popoverOverlayWidth
+            },
+            children: [/*#__PURE__*/_jsx("span", {
+              className: prefixCls('x-sources-popover-title'),
+              children: item.title
+            }), item.description ? /*#__PURE__*/_jsx("span", {
+              className: prefixCls('x-sources-popover-desc'),
+              children: item.description
+            }) : null, item.url ? /*#__PURE__*/_jsx("a", {
+              className: prefixCls('x-sources-popover-url'),
+              href: item.url,
+              target: "_blank",
+              rel: "noreferrer",
+              children: item.url
+            }) : null]
+          }) : null]
+        }, key);
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(prefixCls('x-sources'), className),
+    style: style,
+    children: [/*#__PURE__*/_jsxs("button", {
+      type: "button",
+      className: classNames(prefixCls('x-sources-header'), prefixCls(`x-sources-header--${expandIconPosition}`)),
+      onClick: toggle,
+      "aria-expanded": isOpen,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: prefixCls('x-sources-caret'),
+        "aria-hidden": "true",
+        children: isOpen ? '▾' : '▸'
+      }), /*#__PURE__*/_jsx("span", {
+        className: prefixCls('x-sources-title'),
+        children: title ?? defaultTitle(items.length)
+      })]
+    }), isOpen ? /*#__PURE__*/_jsx("ol", {
+      className: prefixCls('x-sources-list'),
+      children: items.map((item, index) => {
+        const key = keyOf(item, index);
+        const body = renderBody(item, index);
+        return /*#__PURE__*/_jsxs("li", {
+          className: prefixCls('x-sources-item'),
+          children: [item.url ? /*#__PURE__*/_jsx("a", {
+            className: prefixCls('x-sources-item-main'),
+            href: item.url,
+            target: "_blank",
+            rel: "noreferrer",
+            onClick: () => onClick?.(item),
+            children: body
+          }) : onClick ? /*#__PURE__*/_jsx("button", {
+            type: "button",
+            className: prefixCls('x-sources-item-main'),
+            onClick: () => onClick(item),
+            children: body
+          }) : /*#__PURE__*/_jsx("span", {
+            className: prefixCls('x-sources-item-main'),
+            children: body
+          }), item.description ? /*#__PURE__*/_jsx("div", {
+            className: prefixCls('x-sources-item-desc'),
+            children: item.description
+          }) : null]
+        }, key);
+      })
+    }) : null]
+  });
+};
+Sources.displayName = 'Sources';

package/esm/sources/index.less

@@ -0,0 +1,219 @@
+/* Sources — 来源引用（头部摘要 + 有序列表 / 行内上标） */
+
+.aura-x-sources {
+  border: 1px solid var(--aura-x-bubble-border);
+  border-radius: var(--aura-radius-md);
+  background: var(--aura-x-bubble-ai-bg);
+}
+
+/* ===== 头部 ===== */
+
+.aura-x-sources-header {
+  display: flex;
+  gap: var(--aura-spacing-2);
+  align-items: center;
+  width: 100%;
+  padding: var(--aura-spacing-2) var(--aura-spacing-3);
+  border: none;
+  border-radius: var(--aura-radius-md);
+  background: transparent;
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-sources-header:hover {
+  background: var(--aura-x-accent-soft);
+}
+
+.aura-x-sources-header:focus-visible {
+  outline: none;
+  box-shadow: var(--aura-x-focus-ring);
+}
+
+.aura-x-sources-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 600;
+  color: var(--aura-text);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.aura-x-sources-caret {
+  flex: none;
+  font-size: 10px;
+  line-height: 1;
+}
+
+/* 折叠图标置于标题之后（右侧） */
+.aura-x-sources-header--end .aura-x-sources-caret {
+  order: 1;
+}
+
+/* ===== 有序列表 ===== */
+
+.aura-x-sources-list {
+  margin: 0;
+  padding: 0 var(--aura-spacing-3) var(--aura-spacing-2);
+  list-style: none;
+}
+
+.aura-x-sources-item {
+  padding: var(--aura-spacing-1) 0;
+}
+
+.aura-x-sources-item + .aura-x-sources-item {
+  border-top: 1px dashed var(--aura-border);
+}
+
+.aura-x-sources-item-main {
+  display: flex;
+  gap: var(--aura-spacing-2);
+  align-items: center;
+  width: 100%;
+  padding: var(--aura-spacing-1) 0;
+  border: none;
+  border-radius: var(--aura-radius-sm);
+  background: transparent;
+  color: var(--aura-text);
+  font-size: var(--aura-font-size-sm);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+a.aura-x-sources-item-main:hover .aura-x-sources-item-title,
+button.aura-x-sources-item-main:hover .aura-x-sources-item-title {
+  color: var(--aura-x-accent);
+  text-decoration: underline;
+}
+
+.aura-x-sources-item-main:focus-visible {
+  outline: none;
+  box-shadow: var(--aura-x-focus-ring);
+}
+
+.aura-x-sources-item-index {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 var(--aura-spacing-1);
+  border-radius: var(--aura-radius-sm);
+  background: var(--aura-x-accent-soft);
+  color: var(--aura-x-accent);
+  font-size: var(--aura-font-size-xs);
+  line-height: 1;
+}
+
+.aura-x-sources-item-icon {
+  flex: none;
+  display: inline-flex;
+  color: var(--aura-text-secondary);
+}
+
+.aura-x-sources-item-icon > svg {
+  width: 14px;
+  height: 14px;
+}
+
+.aura-x-sources-item-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.aura-x-sources-item-desc {
+  padding-left: 24px;
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-xs);
+  line-height: 1.6;
+}
+
+/* ===== 行内模式 ===== */
+
+.aura-x-sources--inline {
+  display: inline-flex;
+  gap: var(--aura-spacing-1);
+  align-items: center;
+  border: none;
+  background: transparent;
+}
+
+.aura-x-sources-inline-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.aura-x-sources-inline-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 var(--aura-spacing-1);
+  border: none;
+  border-radius: var(--aura-radius-sm);
+  background: var(--aura-x-accent-soft);
+  color: var(--aura-x-accent);
+  font-size: 10px;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background var(--aura-duration-fast) var(--aura-easing),
+    color var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-sources-inline-chip--active,
+.aura-x-sources-inline-chip:hover {
+  background: var(--aura-x-accent-gradient);
+  color: var(--aura-text-inverse);
+}
+
+.aura-x-sources-inline-chip:focus-visible {
+  outline: none;
+  box-shadow: var(--aura-x-focus-ring);
+}
+
+.aura-x-sources-popover {
+  position: absolute;
+  bottom: calc(100% + var(--aura-spacing-1));
+  left: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: var(--aura-spacing-1);
+  max-width: 320px;
+  padding: var(--aura-spacing-2) var(--aura-spacing-3);
+  border: 1px solid var(--aura-x-bubble-border);
+  border-radius: var(--aura-radius-md);
+  background: var(--aura-bg);
+  box-shadow: var(--aura-x-glow);
+  text-align: left;
+}
+
+.aura-x-sources-popover-title {
+  color: var(--aura-text);
+  font-size: var(--aura-font-size-sm);
+  font-weight: 600;
+}
+
+.aura-x-sources-popover-desc {
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-xs);
+  line-height: 1.6;
+}
+
+.aura-x-sources-popover-url {
+  color: var(--aura-x-accent);
+  font-size: var(--aura-font-size-xs);
+  word-break: break-all;
+}