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

package/esm/suggestion/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface SuggestionItem {
+    key: React.Key;
+    label: React.ReactNode;
+}
+export interface SuggestionProps {
+    items: SuggestionItem[];
+    /** 选中某条建议（点击或键盘 Enter） */
+    onSelect?: (item: SuggestionItem) => void;
+    /** 是否展示；false 时渲染 null（用于受控开合） */
+    open?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Suggestion — 快捷建议。
+ *
+ * 常放在 `Sender` 上方，跟随输入内容给出续写建议；
+ * 语义为按钮列表：键盘可达，Enter / 空格触发。
+ */
+export declare const Suggestion: React.FC<SuggestionProps>;

package/esm/suggestion/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { classNames, prefixCls } from '@aura-react-comp/shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Suggestion — 快捷建议。
+ *
+ * 常放在 `Sender` 上方，跟随输入内容给出续写建议；
+ * 语义为按钮列表：键盘可达，Enter / 空格触发。
+ */
+export const Suggestion = ({
+  items,
+  onSelect,
+  open = true,
+  className,
+  style
+}) => {
+  if (!open || items.length === 0) return null;
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(prefixCls('x-suggestion'), className),
+    style: style,
+    children: /*#__PURE__*/_jsx("ul", {
+      className: prefixCls('x-suggestion-list'),
+      role: "list",
+      children: items.map(item => /*#__PURE__*/_jsx("li", {
+        role: "listitem",
+        children: /*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: prefixCls('x-suggestion-item'),
+          onClick: () => onSelect?.(item),
+          children: item.label
+        })
+      }, item.key))
+    })
+  });
+};
+Suggestion.displayName = 'Suggestion';

package/esm/suggestion/index.less

@@ -0,0 +1,44 @@
+/* Suggestion — 快捷建议（玻璃下拉 + 品牌高亮） */
+
+.aura-x-suggestion-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: var(--aura-spacing-1);
+  list-style: none;
+  border: 1px solid var(--aura-x-bubble-border);
+  border-radius: var(--aura-radius-md);
+  background: var(--aura-x-bubble-ai-bg);
+  backdrop-filter: var(--aura-x-glass-blur);
+  -webkit-backdrop-filter: var(--aura-x-glass-blur);
+  box-shadow: var(--aura-x-glow);
+}
+
+.aura-x-suggestion-item {
+  display: block;
+  width: 100%;
+  padding: var(--aura-spacing-2) var(--aura-spacing-3);
+  border: none;
+  border-left: 2px solid transparent;
+  border-radius: var(--aura-radius-sm);
+  background: transparent;
+  color: var(--aura-text);
+  font-size: var(--aura-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background var(--aura-duration-fast) var(--aura-easing),
+    border-color var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-suggestion-item:hover {
+  background: var(--aura-x-accent-soft);
+  border-left-color: var(--aura-x-accent);
+}
+
+.aura-x-suggestion-item:focus-visible {
+  outline: none;
+  background: var(--aura-x-accent-soft);
+  border-left-color: var(--aura-x-accent);
+}

package/esm/think/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface ThinkProps {
+    /** 思考内容（任意节点，长文本会内部滚动） */
+    content?: React.ReactNode;
+    /** 是否正在思考：标题显示「思考中…」并带动画 */
+    thinking?: boolean;
+    /** 思考用时（秒）：完成后标题显示「已深度思考 · x 秒」 */
+    duration?: number;
+    /** 默认是否展开 @default false */
+    defaultExpanded?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Think — 思考过程展示。
+ *
+ * 折叠面板形态：思考中自动展开并禁用手动收起；完成后默认折叠，
+ * 点击标题可展开 / 收起查看完整思考内容。
+ */
+export declare const Think: React.FC<ThinkProps>;

package/esm/think/index.js

@@ -0,0 +1,48 @@
+import React, { useState } 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";
+/**
+ * Think — 思考过程展示。
+ *
+ * 折叠面板形态：思考中自动展开并禁用手动收起；完成后默认折叠，
+ * 点击标题可展开 / 收起查看完整思考内容。
+ */
+export const Think = ({
+  content,
+  thinking = false,
+  duration,
+  defaultExpanded = false,
+  className,
+  style
+}) => {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  // 思考中强制展开（实时可见），完成后回到用户控制的折叠态
+  const isOpen = thinking ? true : expanded;
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(prefixCls('x-think'), thinking && prefixCls('x-think--thinking'), className),
+    style: style,
+    children: [/*#__PURE__*/_jsxs("button", {
+      type: "button",
+      className: prefixCls('x-think-trigger'),
+      onClick: () => setExpanded(prev => !prev),
+      "aria-expanded": isOpen,
+      disabled: thinking,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: prefixCls('x-think-caret'),
+        "aria-hidden": "true",
+        children: isOpen ? '▾' : '▸'
+      }), thinking ? /*#__PURE__*/_jsx("span", {
+        className: prefixCls('x-think-label'),
+        children: "\u601D\u8003\u4E2D\u2026"
+      }) : /*#__PURE__*/_jsxs("span", {
+        className: prefixCls('x-think-label'),
+        children: ["\u5DF2\u6DF1\u5EA6\u601D\u8003", duration !== undefined ? ` · ${duration} 秒` : '']
+      })]
+    }), isOpen && content ? /*#__PURE__*/_jsx("div", {
+      className: prefixCls('x-think-content'),
+      children: content
+    }) : null]
+  });
+};
+Think.displayName = 'Think';

package/esm/think/index.less

@@ -0,0 +1,92 @@
+/* Think — 思考过程（渐变左边线 + 思考中流光标题） */
+
+.aura-x-think {
+  position: relative;
+  border: 1px solid var(--aura-x-bubble-border);
+  border-radius: var(--aura-radius-md);
+  background: var(--aura-x-bubble-ai-bg);
+  overflow: hidden;
+}
+
+/* 品牌渐变左边线 */
+.aura-x-think::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--aura-x-accent-gradient);
+  opacity: 0.8;
+}
+
+.aura-x-think-trigger {
+  display: flex;
+  gap: var(--aura-spacing-2);
+  align-items: center;
+  width: 100%;
+  padding: var(--aura-spacing-2) var(--aura-spacing-3) var(--aura-spacing-2)
+    var(--aura-spacing-4);
+  border: none;
+  background: transparent;
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.aura-x-think-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--aura-x-focus-ring);
+  border-radius: var(--aura-radius-sm);
+}
+
+.aura-x-think-caret {
+  font-size: 10px;
+  line-height: 1;
+}
+
+/* 思考中：流光渐变文字 */
+.aura-x-think--thinking .aura-x-think-label {
+  background: linear-gradient(
+    90deg,
+    var(--aura-x-accent) 0%,
+    var(--aura-primary-400) 40%,
+    var(--aura-x-accent) 80%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: aura-x-think-shimmer 2.2s infinite linear;
+}
+
+@keyframes aura-x-think-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}
+
+.aura-x-think-content {
+  max-height: 240px;
+  padding: var(--aura-spacing-2) var(--aura-spacing-3) var(--aura-spacing-3)
+    var(--aura-spacing-4);
+  overflow-y: auto;
+  border-top: 1px dashed var(--aura-x-bubble-border);
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-sm);
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aura-x-think--thinking .aura-x-think-label {
+    animation: none;
+    background: none;
+    color: var(--aura-x-accent);
+  }
+}

package/esm/thought-chain/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export type ThoughtChainStatus = 'pending' | 'thinking' | 'success' | 'error';
+export interface ThoughtChainItem {
+    /** 唯一键；缺省用索引 */
+    key?: React.Key;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** 步骤状态 */
+    status?: ThoughtChainStatus;
+    /** 自定义状态节点内容；缺省按 status 渲染内置图标 */
+    icon?: React.ReactNode;
+}
+export interface ThoughtChainProps {
+    items: ThoughtChainItem[];
+    /** 是否可折叠（显示头部摘要行）；不可折叠时平铺展示 @default true */
+    collapsible?: boolean;
+    /** 受控展开态；传入后由外部完全控制 */
+    expanded?: boolean;
+    /** 非受控默认展开态 @default false */
+    defaultExpanded?: boolean;
+    onExpandChange?: (expanded: boolean) => void;
+    /** 头部标题 @default '思维链' */
+    title?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * ThoughtChain — 思维链。
+ *
+ * 时间线形态展示模型的推理步骤：每一步一个状态节点（待办 / 进行中 /
+ * 成功 / 失败）与标题、描述。默认折叠为一行摘要（进行中强制展开），
+ * 点击头部可回看完整链路。
+ */
+export declare const ThoughtChain: React.FC<ThoughtChainProps>;

package/esm/thought-chain/index.js

@@ -0,0 +1,105 @@
+import React, { useCallback, useState } 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";
+/** 按状态渲染的默认节点字符（装饰性，节点语义由文字承担） */
+const NODE_GLYPH = {
+  pending: null,
+  thinking: null,
+  success: '✓',
+  error: '×'
+};
+
+/** 折叠头部的状态摘要：进行中 / 已完成 / 含有失败步骤 / 共 N 步 */
+function getSummary(items) {
+  if (items.length === 0) return '暂无步骤';
+  const done = items.filter(item => (item.status ?? 'pending') === 'success').length;
+  if (items.some(item => item.status === 'thinking')) return '进行中';
+  if (items.some(item => item.status === 'error')) return '含有失败步骤';
+  return done === items.length ? '已完成' : `共 ${items.length} 步`;
+}
+
+/**
+ * ThoughtChain — 思维链。
+ *
+ * 时间线形态展示模型的推理步骤：每一步一个状态节点（待办 / 进行中 /
+ * 成功 / 失败）与标题、描述。默认折叠为一行摘要（进行中强制展开），
+ * 点击头部可回看完整链路。
+ */
+export const ThoughtChain = ({
+  items,
+  collapsible = true,
+  expanded,
+  defaultExpanded = false,
+  onExpandChange,
+  title = '思维链',
+  className,
+  style
+}) => {
+  const [innerOpen, setInnerOpen] = useState(defaultExpanded);
+  const isControlled = expanded !== undefined;
+  const baseOpen = isControlled ? expanded : innerOpen;
+  // 有步骤进行中时强制展开（链路实时可见），完成后回到用户控制的折叠态
+  const forceOpen = items.some(item => item.status === 'thinking');
+  const isOpen = forceOpen || baseOpen;
+  const toggle = useCallback(() => {
+    if (forceOpen) return;
+    const next = !baseOpen;
+    if (!isControlled) setInnerOpen(next);
+    onExpandChange?.(next);
+  }, [baseOpen, forceOpen, isControlled, onExpandChange]);
+  const renderList = () => /*#__PURE__*/_jsx("ol", {
+    className: prefixCls('x-thought-chain-list'),
+    children: items.map((item, index) => {
+      const status = item.status ?? 'pending';
+      const glyph = item.icon ?? NODE_GLYPH[status];
+      return /*#__PURE__*/_jsxs("li", {
+        className: classNames(prefixCls('x-thought-chain-item'), prefixCls(`x-thought-chain-item--${status}`)),
+        children: [/*#__PURE__*/_jsx("span", {
+          className: classNames(prefixCls('x-thought-chain-node'), prefixCls(`x-thought-chain-node--${status}`)),
+          "aria-hidden": "true",
+          children: glyph
+        }), /*#__PURE__*/_jsxs("div", {
+          className: prefixCls('x-thought-chain-content'),
+          children: [/*#__PURE__*/_jsx("div", {
+            className: prefixCls('x-thought-chain-item-title'),
+            children: item.title
+          }), item.description ? /*#__PURE__*/_jsx("div", {
+            className: prefixCls('x-thought-chain-item-desc'),
+            children: item.description
+          }) : null]
+        })]
+      }, item.key ?? index);
+    })
+  });
+  if (!collapsible) {
+    return /*#__PURE__*/_jsx("div", {
+      className: classNames(prefixCls('x-thought-chain'), prefixCls('x-thought-chain--plain'), className),
+      style: style,
+      children: renderList()
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(prefixCls('x-thought-chain'), prefixCls('x-thought-chain--collapsible'), forceOpen && prefixCls('x-thought-chain--running'), className),
+    style: style,
+    children: [/*#__PURE__*/_jsxs("button", {
+      type: "button",
+      className: prefixCls('x-thought-chain-header'),
+      onClick: toggle,
+      "aria-expanded": isOpen,
+      disabled: forceOpen,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: prefixCls('x-thought-chain-title'),
+        children: title
+      }), /*#__PURE__*/_jsx("span", {
+        className: prefixCls('x-thought-chain-summary'),
+        children: getSummary(items)
+      }), /*#__PURE__*/_jsx("span", {
+        className: prefixCls('x-thought-chain-caret'),
+        "aria-hidden": "true",
+        children: isOpen ? '▾' : '▸'
+      })]
+    }), isOpen ? renderList() : null]
+  });
+};
+ThoughtChain.displayName = 'ThoughtChain';

package/esm/thought-chain/index.less

@@ -0,0 +1,174 @@
+/* ThoughtChain — 思维链（时间线 + 状态节点） */
+
+.aura-x-thought-chain {
+  border: 1px solid var(--aura-x-bubble-border);
+  border-radius: var(--aura-radius-md);
+  background: var(--aura-x-bubble-ai-bg);
+}
+
+.aura-x-thought-chain--plain {
+  border: none;
+  background: transparent;
+}
+
+/* ===== 折叠头部 ===== */
+
+.aura-x-thought-chain-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-thought-chain-header:hover {
+  background: var(--aura-x-accent-soft);
+}
+
+.aura-x-thought-chain-header:focus-visible {
+  outline: none;
+  box-shadow: var(--aura-x-focus-ring);
+}
+
+.aura-x-thought-chain-header:disabled {
+  cursor: default;
+}
+
+.aura-x-thought-chain-title {
+  flex: none;
+  font-weight: 600;
+  color: var(--aura-text);
+}
+
+.aura-x-thought-chain-summary {
+  flex: 1;
+  color: var(--aura-text-tertiary);
+  font-size: var(--aura-font-size-xs);
+}
+
+/* 进行中：摘要文字走品牌渐变流光 */
+.aura-x-thought-chain--running .aura-x-thought-chain-summary {
+  color: var(--aura-x-accent);
+}
+
+.aura-x-thought-chain-caret {
+  flex: none;
+  font-size: 10px;
+  line-height: 1;
+}
+
+/* ===== 时间线 ===== */
+
+.aura-x-thought-chain-list {
+  margin: 0;
+  padding: var(--aura-spacing-1) var(--aura-spacing-3) var(--aura-spacing-2);
+  list-style: none;
+}
+
+.aura-x-thought-chain-item {
+  position: relative;
+  padding: var(--aura-spacing-1) 0 var(--aura-spacing-2) 24px;
+}
+
+/* 节点间的衔接线（最后一项不画） */
+.aura-x-thought-chain-item::before {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 22px;
+  bottom: -2px;
+  width: 1px;
+  background: var(--aura-border);
+}
+
+.aura-x-thought-chain-item:last-child::before {
+  display: none;
+}
+
+.aura-x-thought-chain-node {
+  position: absolute;
+  left: 0;
+  top: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--aura-text-tertiary);
+  border-radius: var(--aura-radius-full);
+  background: var(--aura-bg);
+  font-size: 8px;
+  line-height: 1;
+}
+
+.aura-x-thought-chain-node--success {
+  border-color: var(--aura-success);
+  background: var(--aura-success-light);
+  color: var(--aura-success);
+}
+
+.aura-x-thought-chain-node--error {
+  border-color: var(--aura-error);
+  background: var(--aura-error-light);
+  color: var(--aura-error);
+}
+
+.aura-x-thought-chain-node--thinking {
+  border-color: var(--aura-x-accent);
+  animation: aura-x-thought-chain-pulse 1.6s infinite var(--aura-easing);
+}
+
+@keyframes aura-x-thought-chain-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    border-color: var(--aura-x-accent);
+  }
+
+  50% {
+    transform: scale(1.25);
+    border-color: var(--aura-primary-400);
+  }
+}
+
+.aura-x-thought-chain-content {
+  min-width: 0;
+}
+
+.aura-x-thought-chain-item-title {
+  color: var(--aura-text);
+  font-size: var(--aura-font-size-sm);
+  line-height: 1.5;
+}
+
+.aura-x-thought-chain-item--pending .aura-x-thought-chain-item-title {
+  color: var(--aura-text-tertiary);
+}
+
+.aura-x-thought-chain-item--error .aura-x-thought-chain-item-title {
+  color: var(--aura-error);
+}
+
+.aura-x-thought-chain-item-desc {
+  margin-top: 2px;
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-xs);
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aura-x-thought-chain-node--thinking {
+    animation: none;
+    border-color: var(--aura-x-accent);
+    border-style: dotted;
+  }
+}

package/esm/use-x-chat/index.d.ts

@@ -0,0 +1,85 @@
+/** 一条对话消息 */
+export interface XMessage {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    /** assistant 消息的生成状态；user / system 消息不设置 */
+    status?: 'loading' | 'success' | 'error';
+}
+/** onRequest 收到的上下文 */
+export interface XChatRequestContext {
+    /** 本轮用户输入 */
+    message: string;
+    /** 完整消息列表（已包含本轮 user 消息与 assistant 占位），可直接作为请求上下文 */
+    messages: XMessage[];
+    /** 中止信号——onRequest 必须尊重它（传给 fetch / 在读流时检查），否则 stop() 无法生效 */
+    signal: AbortSignal;
+    /**
+     * 增量更新 assistant 占位消息。
+     * 只合并 content / status 两个字段，不会影响其他消息。
+     */
+    update: (patch: Partial<Pick<XMessage, 'content' | 'status'>>) => void;
+}
+/** 默认消息的来源：定长数组，或按会话动态求值（可异步，用于拉取历史） */
+export type XChatDefaultMessages = XMessage[] | ((info: {
+    conversationKey?: string | number;
+}) => XMessage[] | Promise<XMessage[]>);
+export interface UseXChatOptions {
+    /**
+     * 会话唯一标识。**变化时会按 `defaultMessages` 重新初始化消息列表**，
+     * 并中止上一个会话进行中的请求——这是多会话切换的关键。
+     */
+    conversationKey?: string | number;
+    /**
+     * 默认消息（进入某个会话时展示的内容）：
+     * - 数组：直接使用；
+     * - 函数：`({ conversationKey }) => XMessage[] | Promise<XMessage[]>`，
+     *   可异步拉取历史；此时 `isDefaultMessagesRequesting` 会反映加载态。
+     *
+     * 只在**挂载**与 **`conversationKey` 变化**时求值，因此传数组字面量也不会
+     * 每次渲染都重置消息。
+     */
+    defaultMessages?: XChatDefaultMessages;
+    /**
+     * 数组形态的默认消息简写。
+     * @deprecated 建议改用 `defaultMessages`；两者同时存在时以 `defaultMessages` 为准。
+     */
+    initialMessages?: XMessage[];
+    /**
+     * 发起一次 AI 请求。内部已持有 AbortController：请把 `context.signal` 传给
+     * 底层 fetch；请求抛错视为失败（写入 error 态并回调 onError），
+     * 因 abort 被打断视为正常结束（保留已生成的部分内容）。
+     */
+    onRequest: (context: XChatRequestContext) => Promise<void>;
+    /** 请求失败回调（abort 不触发） */
+    onError?: (error: Error) => void;
+}
+export interface UseXChatResult {
+    messages: XMessage[];
+    /** 是否有进行中的请求 */
+    loading: boolean;
+    /** `defaultMessages` 为异步函数时，历史消息是否仍在加载 */
+    isDefaultMessagesRequesting: boolean;
+    /**
+     * 发送一条用户消息：追加 user 消息与 assistant 占位（loading 态）后调用 onRequest。
+     * loading 期间或内容为空白时忽略。
+     */
+    send(content: string): void;
+    /** 中止当前请求（保留 assistant 已生成的部分内容） */
+    stop(): void;
+    /** 中止当前请求并清空消息，回到最近一次解析出的默认消息 */
+    clear(): void;
+    /**
+     * 直接替换消息列表。**不触发请求**——多会话切换时用它把某个会话的消息写回来。
+     */
+    setMessages(messages: XMessage[]): void;
+}
+/**
+ * useXChat — 对话消息编排 Hook（与传输层 useXStream 正交）。
+ *
+ * 职责：维护消息列表状态机（user / assistant 成对追加、loading 态、
+ * 增量更新、错误态、中止与清空），并按 `conversationKey` 管理多会话切换。
+ * **不做传输**——怎么请求由 `onRequest` 决定，典型组合是内部调用
+ * `useXStream().fetchData` 并在 onMessage 里 `update` 内容。
+ */
+export declare function useXChat({ conversationKey, defaultMessages, initialMessages, onRequest, onError, }: UseXChatOptions): UseXChatResult;