@xiping/react-components 1.0.6 → 1.0.8

package/dist/es/components/message/Message.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+export interface MessageProps {
+    id: string;
+    content: string;
+    sender: "user" | "assistant";
+    timestamp: Date;
+    isThinking?: boolean;
+    isLoading?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    showTimestamp?: boolean;
+    avatarUser?: React.ReactNode;
+    avatarAssistant?: React.ReactNode;
+    thinkingText?: string;
+    customThinkingComponent?: React.ReactNode;
+    customUserMessageComponent?: React.ReactNode;
+    customAssistantMessageComponent?: React.ReactNode;
+    parseContent?: boolean;
+    parsedContent?: string;
+    thinkContent?: string;
+    knowledgeSources?: Array<{
+        title: string;
+        description?: string;
+        url?: string;
+    }>;
+}
+export declare const Message: React.FC<MessageProps>;
+export default Message;

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

@@ -0,0 +1,122 @@
+import { jsxs as n, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { useState as B } from "react";
+/* empty css            */
+const S = ({
+  id: w,
+  content: l,
+  sender: i,
+  timestamp: d,
+  isThinking: c = !1,
+  isLoading: x = !1,
+  className: b = "",
+  style: L = {},
+  showTimestamp: o = !0,
+  avatarUser: m,
+  avatarAssistant: h,
+  thinkingText: C = "思考中...",
+  customThinkingComponent: g,
+  customUserMessageComponent: u,
+  customAssistantMessageComponent: N,
+  parseContent: j = !1,
+  parsedContent: I,
+  thinkContent: $,
+  knowledgeSources: r
+}) => {
+  const [a, T] = B(!0);
+  console.log(w, "id");
+  const v = (s) => s.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), k = () => g || /* @__PURE__ */ n("div", { className: "message-thinking", children: [
+    /* @__PURE__ */ n("div", { className: "message-thinking-dots", children: [
+      /* @__PURE__ */ e("span", {}),
+      /* @__PURE__ */ e("span", {}),
+      /* @__PURE__ */ e("span", {})
+    ] }),
+    /* @__PURE__ */ e("span", { className: "message-thinking-text", children: C })
+  ] }), V = () => /* @__PURE__ */ e("div", { className: "message-loading", children: /* @__PURE__ */ e("div", { className: "message-loading-spinner" }) }), f = () => !r || r.length === 0 ? null : /* @__PURE__ */ n("div", { className: "message-knowledge-sources", children: [
+    /* @__PURE__ */ e("div", { className: "message-knowledge-sources-header", children: "知识来源：" }),
+    /* @__PURE__ */ e("ul", { className: "message-knowledge-sources-list", children: r.map((s, t) => /* @__PURE__ */ n("li", { className: "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: "message-knowledge-source-description", children: s.description })
+    ] }, t)) })
+  ] }), y = () => {
+    if (x)
+      return V();
+    if (i === "user" && u)
+      return u;
+    if (i === "assistant" && N)
+      return N;
+    if (j && i === "assistant") {
+      const s = I || l, t = $;
+      return /* @__PURE__ */ n(p, { children: [
+        c && k(),
+        s && /* @__PURE__ */ e("div", { className: "message-text", children: s }),
+        t && /* @__PURE__ */ n("div", { className: "message-think", children: [
+          /* @__PURE__ */ n("div", { className: "message-think-header", children: [
+            "思考过程：",
+            /* @__PURE__ */ e(
+              "button",
+              {
+                className: "message-think-toggle",
+                onClick: () => T(!a),
+                "aria-label": a ? "隐藏思考过程" : "显示思考过程",
+                children: /* @__PURE__ */ e(
+                  "svg",
+                  {
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 12 12",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    style: {
+                      transform: a ? "rotate(180deg)" : "rotate(0deg)",
+                      transition: "transform 0.3s ease"
+                    },
+                    children: /* @__PURE__ */ e(
+                      "path",
+                      {
+                        d: "M2 4L6 8L10 4",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: `message-think-content ${a ? "visible" : "hidden"}`,
+              children: t
+            }
+          )
+        ] }),
+        f(),
+        o && /* @__PURE__ */ e("div", { className: "message-timestamp", children: v(d) })
+      ] });
+    }
+    return /* @__PURE__ */ n(p, { children: [
+      /* @__PURE__ */ e("div", { className: "message-text", children: l }),
+      c && k(),
+      f(),
+      o && /* @__PURE__ */ e("div", { className: "message-timestamp", children: v(d) })
+    ] });
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: `message ${i === "user" ? "user" : "assistant"} ${b}`,
+      style: L,
+      children: [
+        i === "user" && m || i === "assistant" && h ? /* @__PURE__ */ e("div", { className: "message-avatar", children: i === "user" ? m : h }) : null,
+        /* @__PURE__ */ e("div", { className: "message-content", children: y() })
+      ]
+    }
+  );
+};
+export {
+  S as Message,
+  S as default
+};

package/dist/es/components/message/index.d.ts

@@ -0,0 +1 @@
+export * from './Message.tsx';

package/dist/es/index.d.ts

@@ -9,3 +9,4 @@ export * from './components/shimmer-button';
 export * from './components/image-compare';
 export * from './components/dock';
 export * from './components/txt-editor';
+export * from './components/message';

package/dist/es/index.js

@@ -1,24 +1,26 @@
 /* empty css          */
-import { Button as e } from "./components/button/Button.js";
+import { Button as t } from "./components/button/Button.js";
 import { TxtReader as p } from "./components/txt-reader/TxtReader.js";
 import { HyperText as a } from "./components/hyper-text/index.js";
 import { TypingAnimation as n } from "./components/typing-animation/index.js";
 import { default as d } from "./components/pinch-content/PinchContent.js";
-import { default as u } from "./components/image-viewer/ImageViewer.js";
-import { ShimmerButton as s } from "./components/shimmer-button/ShimmerButton.js";
+import { default as c } from "./components/image-viewer/ImageViewer.js";
+import { ShimmerButton as T } from "./components/shimmer-button/ShimmerButton.js";
 import { default as k } from "./components/image-compare/ImageCompare.js";
 import { TextAnimate as I } from "./components/text-animate/TextAnimate.js";
 import { Dock as y, DockIcon as A, dockVariants as B } from "./components/dock/Duck.js";
 import { TxtEditor as D } from "./components/txt-editor/TxtEditor.js";
+import { Message as w } from "./components/message/Message.js";
 export {
-  e as Button,
+  t as Button,
   y as Dock,
   A as DockIcon,
   a as HyperText,
   k as ImageCompare,
-  u as ImageViewer,
+  c as ImageViewer,
+  w as Message,
   d as PinchContent,
-  s as ShimmerButton,
+  T as ShimmerButton,
   I as TextAnimate,
   D as TxtEditor,
   p as TxtReader,