@xiping/react-components 1.0.50 → 1.0.52

package/dist/es/components/message/Message.js

@@ -1,58 +1,58 @@
-import { jsxs as s, jsx as e, Fragment as y } from "react/jsx-runtime";
-import { useState as x } from "react";
-import n from "react-markdown";
+import { jsxs as i, jsx as e, Fragment as L } from "react/jsx-runtime";
+import { useState as b } from "react";
+import a from "react-markdown";
 /* empty css            */
 const q = ({
-  id: j,
+  id: y,
   content: o,
-  sender: t,
+  sender: n,
   timestamp: d,
   isThinking: c = !1,
-  isLoading: V = !1,
-  className: B = "",
-  style: H = {},
-  showTimestamp: h = !0,
-  avatarUser: m,
-  avatarAssistant: g,
-  thinkingText: M = "思考中...",
-  customThinkingComponent: u,
-  customUserMessageComponent: p,
-  customAssistantMessageComponent: k,
-  parseContent: W = !1,
-  parsedContent: v,
-  thinkContent: a,
+  isLoading: j = !1,
+  className: V = "",
+  style: B = {},
+  showTimestamp: g = !0,
+  avatarUser: h,
+  avatarAssistant: m,
+  thinkingText: H = "思考中...",
+  customThinkingComponent: p,
+  customUserMessageComponent: _,
+  customAssistantMessageComponent: u,
+  parseContent: M = !1,
+  parsedContent: x,
+  thinkContent: r,
   knowledgeSources: l
 }) => {
-  const [r, N] = x(!0), [$, w] = x("idle");
-  console.log(j, "id");
-  const f = (i) => i.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), I = async () => {
+  const [t, k] = b(!0), [W, v] = b("idle");
+  console.log(y, "id");
+  const N = (s) => s.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), $ = async () => {
     try {
-      await navigator.clipboard.writeText(o), w("copied"), setTimeout(() => w("idle"), 2e3);
-    } catch (i) {
-      console.error("复制失败:", i);
+      await navigator.clipboard.writeText(o), v("copied"), setTimeout(() => v("idle"), 2e3);
+    } catch (s) {
+      console.error("复制失败:", s);
     }
-  }, C = () => u || /* @__PURE__ */ s("div", { className: "message-thinking", children: [
-    /* @__PURE__ */ s("div", { className: "message-thinking-dots", children: [
+  }, w = () => p || /* @__PURE__ */ i("div", { className: "xiping-message__thinking", children: [
+    /* @__PURE__ */ i("div", { className: "xiping-message__thinking-dots", children: [
       /* @__PURE__ */ e("span", {}),
       /* @__PURE__ */ e("span", {}),
       /* @__PURE__ */ e("span", {})
     ] }),
-    /* @__PURE__ */ e("span", { className: "message-thinking-text", children: M })
-  ] }), S = () => /* @__PURE__ */ e("div", { className: "message-loading", children: /* @__PURE__ */ e("div", { className: "message-loading-spinner" }) }), L = () => !l || l.length === 0 ? null : /* @__PURE__ */ s("div", { className: "message-knowledge-sources", children: [
-    /* @__PURE__ */ e("div", { className: "message-knowledge-sources-header", children: "知识来源：" }),
-    /* @__PURE__ */ e("ul", { className: "message-knowledge-sources-list", children: l.map((i, F) => /* @__PURE__ */ s("li", { className: "message-knowledge-source-item", children: [
-      i.url ? /* @__PURE__ */ e("a", { href: i.url, target: "_blank", rel: "noopener noreferrer", children: i.title }) : /* @__PURE__ */ e("span", { children: i.title }),
-      i.description && /* @__PURE__ */ e("div", { className: "message-knowledge-source-description", children: i.description })
-    ] }, F)) })
-  ] }), b = () => t === "user" ? null : /* @__PURE__ */ s(
+    /* @__PURE__ */ e("span", { className: "xiping-message__thinking-text", children: H })
+  ] }), I = () => /* @__PURE__ */ e("div", { className: "xiping-message__loading", children: /* @__PURE__ */ e("div", { className: "xiping-message__loading-spinner" }) }), f = () => !l || l.length === 0 ? null : /* @__PURE__ */ i("div", { className: "xiping-message__knowledge-sources", children: [
+    /* @__PURE__ */ e("div", { className: "xiping-message__knowledge-sources-header", children: "知识来源：" }),
+    /* @__PURE__ */ e("ul", { className: "xiping-message__knowledge-sources-list", children: l.map((s, S) => /* @__PURE__ */ i("li", { className: "xiping-message__knowledge-source-item", children: [
+      s.url ? /* @__PURE__ */ e("a", { href: s.url, target: "_blank", rel: "noopener noreferrer", children: s.title }) : /* @__PURE__ */ e("span", { children: s.title }),
+      s.description && /* @__PURE__ */ e("div", { className: "xiping-message__knowledge-source-description", children: s.description })
+    ] }, S)) })
+  ] }), C = () => n === "user" ? null : /* @__PURE__ */ i(
     "button",
     {
-      className: "message-copy-button",
-      onClick: I,
+      className: "xiping-message__copy-button",
+      onClick: $,
       "aria-label": "Copy message",
       title: "Copy message",
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ i(
           "svg",
           {
             width: "14",
@@ -84,27 +84,27 @@ const q = ({
             ]
           }
         ),
-        $ === "copied" && /* @__PURE__ */ e("span", { className: "message-copy-tooltip", children: "Copied" })
+        W === "copied" && /* @__PURE__ */ e("span", { className: "xiping-message__copy-tooltip", children: "Copied" })
       ]
     }
   );
-  return t === "user" && p ? p : t === "assistant" && k ? k : /* @__PURE__ */ s(
+  return n === "user" && _ ? _ : n === "assistant" && u ? u : /* @__PURE__ */ i(
     "div",
     {
-      className: `message ${t === "user" ? "user" : "assistant"} ${B}`,
-      style: H,
+      className: `xiping-message ${n === "user" ? "user" : "assistant"} ${V}`,
+      style: B,
       children: [
-        t === "user" && m || t === "assistant" && g ? /* @__PURE__ */ e("div", { className: "message-avatar", children: t === "user" ? m : g }) : null,
-        /* @__PURE__ */ e("div", { className: "message-content", children: V ? S() : W && t === "assistant" ? /* @__PURE__ */ s(y, { children: [
-          a && /* @__PURE__ */ s("div", { className: "message-think", children: [
-            /* @__PURE__ */ s("div", { className: "message-think-header", children: [
+        n === "user" && h || n === "assistant" && m ? /* @__PURE__ */ e("div", { className: "xiping-message__avatar", children: n === "user" ? h : m }) : null,
+        /* @__PURE__ */ e("div", { className: "xiping-message__content", children: j ? I() : M && n === "assistant" ? /* @__PURE__ */ i(L, { children: [
+          r && /* @__PURE__ */ i("div", { className: "xiping-message__think", children: [
+            /* @__PURE__ */ i("div", { className: "xiping-message__think-header", children: [
               "思考过程：",
               /* @__PURE__ */ e(
                 "button",
                 {
-                  className: "message-think-toggle",
-                  onClick: () => N(!r),
-                  "aria-label": r ? "隐藏思考过程" : "显示思考过程",
+                  className: "xiping-message__think-toggle",
+                  onClick: () => k(!t),
+                  "aria-label": t ? "隐藏思考过程" : "显示思考过程",
                   children: /* @__PURE__ */ e(
                     "svg",
                     {
@@ -114,7 +114,7 @@ const q = ({
                       fill: "none",
                       xmlns: "http://www.w3.org/2000/svg",
                       style: {
-                        transform: r ? "rotate(180deg)" : "rotate(0deg)",
+                        transform: t ? "rotate(180deg)" : "rotate(0deg)",
                         transition: "transform 0.3s ease"
                       },
                       children: /* @__PURE__ */ e(
@@ -135,28 +135,28 @@ const q = ({
             /* @__PURE__ */ e(
               "div",
               {
-                className: `message-think-content ${r ? "visible" : "hidden"}`,
-                children: /* @__PURE__ */ e(n, { children: a })
+                className: `xiping-message__think-content ${t ? "visible" : "hidden"}`,
+                children: /* @__PURE__ */ e(a, { children: r })
               }
             )
           ] }),
-          c && C(),
-          v && /* @__PURE__ */ s("div", { className: "message-text-container", children: [
-            /* @__PURE__ */ e("div", { className: "message-text", children: /* @__PURE__ */ e(n, { children: v }) }),
-            b()
+          c && w(),
+          x && /* @__PURE__ */ i("div", { className: "xiping-message__text-container", children: [
+            /* @__PURE__ */ e("div", { className: "xiping-message__text", children: /* @__PURE__ */ e(a, { children: x }) }),
+            C()
           ] }),
-          L(),
-          h && /* @__PURE__ */ e("div", { className: "message-timestamp", children: f(d) })
-        ] }) : /* @__PURE__ */ s(y, { children: [
-          a && /* @__PURE__ */ s("div", { className: "message-think", children: [
-            /* @__PURE__ */ s("div", { className: "message-think-header", children: [
+          f(),
+          g && /* @__PURE__ */ e("div", { className: "xiping-message__timestamp", children: N(d) })
+        ] }) : /* @__PURE__ */ i(L, { children: [
+          r && /* @__PURE__ */ i("div", { className: "xiping-message__think", children: [
+            /* @__PURE__ */ i("div", { className: "xiping-message__think-header", children: [
               "思考过程：",
               /* @__PURE__ */ e(
                 "button",
                 {
-                  className: "message-think-toggle",
-                  onClick: () => N(!r),
-                  "aria-label": r ? "隐藏思考过程" : "显示思考过程",
+                  className: "xiping-message__think-toggle",
+                  onClick: () => k(!t),
+                  "aria-label": t ? "隐藏思考过程" : "显示思考过程",
                   children: /* @__PURE__ */ e(
                     "svg",
                     {
@@ -166,7 +166,7 @@ const q = ({
                       fill: "none",
                       xmlns: "http://www.w3.org/2000/svg",
                       style: {
-                        transform: r ? "rotate(180deg)" : "rotate(0deg)",
+                        transform: t ? "rotate(180deg)" : "rotate(0deg)",
                         transition: "transform 0.3s ease"
                       },
                       children: /* @__PURE__ */ e(
@@ -187,18 +187,18 @@ const q = ({
             /* @__PURE__ */ e(
               "div",
               {
-                className: `message-think-content ${r ? "visible" : "hidden"}`,
-                children: /* @__PURE__ */ e(n, { children: a })
+                className: `xiping-message__think-content ${t ? "visible" : "hidden"}`,
+                children: /* @__PURE__ */ e(a, { children: r })
               }
             )
           ] }),
-          /* @__PURE__ */ s("div", { className: "message-text-container", children: [
-            /* @__PURE__ */ e("div", { className: "message-text", children: /* @__PURE__ */ e(n, { children: o }) }),
-            b()
+          /* @__PURE__ */ i("div", { className: "xiping-message__text-container", children: [
+            /* @__PURE__ */ e("div", { className: "xiping-message__text", children: /* @__PURE__ */ e(a, { children: o }) }),
+            C()
           ] }),
-          c && C(),
-          L(),
-          h && /* @__PURE__ */ e("div", { className: "message-timestamp", children: f(d) })
+          c && w(),
+          f(),
+          g && /* @__PURE__ */ e("div", { className: "xiping-message__timestamp", children: N(d) })
         ] }) })
       ]
     }

package/dist/es/components/subtitle-player/CurrentMode.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { SubtitleEntry } from '@xiping/subtitle';
+import { WordHoverHandlerFactory } from './utils.tsx';
+export interface CurrentModeProps {
+    /** 当前字幕条目 */
+    currentEntries: Array<{
+        entry: SubtitleEntry | null;
+        label?: string;
+    }>;
+    /** 单词悬停处理器工厂函数 */
+    wordHoverFactory: (entry: SubtitleEntry, label?: string) => WordHoverHandlerFactory;
+    /** 是否启用单词悬停功能 */
+    enableWordHover: boolean;
+    /** 悬停覆盖层节点 */
+    overlayNode: React.ReactNode;
+}
+/**
+ * 当前模式组件：只显示当前时间对应的字幕
+ */
+export declare const CurrentMode: React.FC<CurrentModeProps>;

package/dist/es/components/subtitle-player/CurrentMode.js

@@ -0,0 +1,40 @@
+import { jsxs as u, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { renderTextWithWords as h } from "./utils.js";
+const g = ({
+  currentEntries: t,
+  wordHoverFactory: o,
+  enableWordHover: l,
+  overlayNode: p
+}) => t.some(({ entry: i }) => i !== null) ? /* @__PURE__ */ u(m, { children: [
+  t.map(({ entry: i, label: s }, c) => i ? /* @__PURE__ */ u(
+    "div",
+    {
+      className: "xiping-subtitle-player__item",
+      "data-label": s || void 0,
+      children: [
+        s && /* @__PURE__ */ e("span", { className: "xiping-subtitle-player__label", children: s }),
+        /* @__PURE__ */ e("div", { className: "xiping-subtitle-player__text", children: (() => {
+          let a = 0;
+          return i.text.split(`
+`).map((n, r) => {
+            if (!i.words || i.words.length === 0)
+              return /* @__PURE__ */ e("div", { className: "xiping-subtitle-player__line", children: n }, r);
+            const d = h(
+              n,
+              i.words,
+              a,
+              r,
+              l ? o(i, s) : void 0
+            );
+            return a = d.nextWordIndex, /* @__PURE__ */ e("div", { className: "xiping-subtitle-player__line", children: d.nodes }, r);
+          });
+        })() })
+      ]
+    },
+    c
+  ) : null),
+  l && /* @__PURE__ */ e("div", { className: "xiping-subtitle-player__hover-layer", children: p })
+] }) : null;
+export {
+  g as CurrentMode
+};

package/dist/es/components/subtitle-player/LyricsMode.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { SubtitleEntry } from '@xiping/subtitle';
+import { WordHoverHandlerFactory } from './utils.tsx';
+export interface LyricsModeProps {
+    /** 按时间分组的字幕条目 */
+    groupedEntriesByTime: Array<Array<{
+        entry: SubtitleEntry;
+        label?: string;
+        startTime: number;
+        endTime: number;
+    }>>;
+    /** 当前播放时间（秒数） */
+    currentTime: number;
+    /** 单词悬停处理器工厂函数 */
+    wordHoverFactory: (entry: SubtitleEntry, label?: string) => WordHoverHandlerFactory;
+    /** 是否启用单词悬停功能 */
+    enableWordHover: boolean;
+    /** 悬停覆盖层节点 */
+    overlayNode: React.ReactNode;
+    /** 容器引用，用于滚动 */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+}
+/**
+ * 歌词模式组件：显示全部字幕并高亮当前字幕
+ */
+export declare const LyricsMode: React.FC<LyricsModeProps>;

package/dist/es/components/subtitle-player/LyricsMode.js

@@ -0,0 +1,67 @@
+import { jsxs as f, Fragment as S, jsx as i } from "react/jsx-runtime";
+import { useRef as H, useEffect as j } from "react";
+import F from "clsx";
+import { secondsToTimeString as W, renderTextWithWords as $ } from "./utils.js";
+const M = ({
+  groupedEntriesByTime: v,
+  currentTime: l,
+  wordHoverFactory: b,
+  enableWordHover: m,
+  overlayNode: y,
+  containerRef: o
+}) => {
+  const n = H(null);
+  return j(() => {
+    if (n.current && o.current) {
+      const s = o.current, r = n.current, c = r.offsetTop, a = s.clientHeight, t = r.clientHeight, e = c - a / 2 + t / 2;
+      s.scrollTo({
+        top: e,
+        behavior: "smooth"
+      });
+    }
+  }, [l, o]), /* @__PURE__ */ f(S, { children: [
+    v.map((s, r) => {
+      const c = s[0]?.startTime ?? 0, a = W(c);
+      return /* @__PURE__ */ i("div", { className: "xiping-subtitle-player__group", children: s.map(({ entry: t, label: e, startTime: N, endTime: d }, u) => {
+        const _ = l >= N && l <= d, T = l > d, w = u === 0;
+        let g = 0;
+        return /* @__PURE__ */ f(
+          "div",
+          {
+            ref: _ ? n : null,
+            className: F(
+              "xiping-subtitle-player__item",
+              {
+                "xiping-subtitle-player__item--active": _,
+                "xiping-subtitle-player__item--past": T
+              }
+            ),
+            "data-label": e || void 0,
+            children: [
+              w && /* @__PURE__ */ i("span", { className: "xiping-subtitle-player__time", children: a }),
+              e && /* @__PURE__ */ i("span", { className: "xiping-subtitle-player__label", children: e }),
+              /* @__PURE__ */ i("div", { className: "xiping-subtitle-player__text", children: t.text.split(`
+`).map((h, p) => {
+                if (!t.words || t.words.length === 0)
+                  return /* @__PURE__ */ i("div", { className: "xiping-subtitle-player__line", children: h }, p);
+                const x = $(
+                  h,
+                  t.words,
+                  g,
+                  p,
+                  m ? b(t, e) : void 0
+                );
+                return g = x.nextWordIndex, /* @__PURE__ */ i("div", { className: "xiping-subtitle-player__line", children: x.nodes }, p);
+              }) })
+            ]
+          },
+          `${r}-${u}`
+        );
+      }) }, r);
+    }),
+    m && /* @__PURE__ */ i("div", { className: "xiping-subtitle-player__hover-layer", children: y })
+  ] });
+};
+export {
+  M as LyricsMode
+};

package/dist/es/components/subtitle-player/SubtitlePlayer.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { SubtitleEntry, SubtitleLanguage } from '@xiping/subtitle';
-export type SubtitleType = 'srt' | 'vtt';
+export type SubtitleType = "srt" | "vtt";
 export interface SubtitleData {
     /** 字幕类型 */
     type: SubtitleType;
@@ -11,7 +11,7 @@ export interface SubtitleData {
     /** 字幕语言类型，用于分词，默认为中文 */
     language?: SubtitleLanguage;
 }
-export type SubtitleDisplayMode = 'current' | 'lyrics';
+export type SubtitleDisplayMode = "current" | "lyrics";
 export interface SubtitlePlayerProps {
     /** 字幕数据，可以是单个字幕或多个字幕（用于对照） */
     subtitles: SubtitleData | SubtitleData[];
@@ -41,6 +41,7 @@ export interface HoverTarget {
     entry: SubtitleEntry;
     label?: string;
     rect: DOMRect;
+    element: HTMLElement;
 }
 /**
  * 字幕播放组件