@springbrand/message-panel 0.1.2 → 0.1.3-alpha.0

package/src/message.tsx

@@ -0,0 +1,254 @@
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import {
+  CheckIcon,
+  CopyIcon,
+  GitForkIcon,
+  Loader2Icon,
+  RefreshCcwIcon,
+} from "lucide-react";
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+} from "react";
+import {
+  defaultRehypePlugins,
+  Streamdown,
+  type StreamdownProps,
+} from "streamdown";
+import { cn } from "./internal/cn";
+import type { MessageRole } from "./contracts";
+
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+  from: MessageRole;
+};
+
+export const Message = forwardRef<HTMLDivElement, MessageProps>(
+  ({ className, from, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "sb-message",
+        from === "user" ? "sb-message--user" : "sb-message--assistant",
+        className,
+      )}
+      data-role={from}
+      {...props}
+    />
+  ),
+);
+Message.displayName = "Message";
+
+export const MessageContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("sb-message__content", className)} {...props} />
+));
+MessageContent.displayName = "MessageContent";
+
+export const MessageActions = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("sb-message__actions", className)} {...props} />
+));
+MessageActions.displayName = "MessageActions";
+
+export type MessageActionProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  tooltip?: string;
+  label?: string;
+};
+
+export const MessageAction = forwardRef<HTMLButtonElement, MessageActionProps>(
+  ({ className, tooltip, label, children, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      className={cn("sb-message__action", className)}
+      title={tooltip}
+      aria-label={label ?? tooltip}
+      {...props}
+    >
+      {children}
+    </button>
+  ),
+);
+MessageAction.displayName = "MessageAction";
+
+const streamdownPlugins = { cjk, code, math, mermaid };
+const streamAnimation = {
+  animation: "fadeIn",
+  sep: "word",
+  duration: 260,
+  stagger: 14,
+} as const;
+
+export type MessageResponseProps = StreamdownProps & {
+  streaming?: boolean;
+  resolveUrl?: MessageUrlResolver;
+};
+
+export type MessageUrlResolver = (url: string) => string | null | undefined;
+
+type UrlNode = {
+  type?: string;
+  properties?: Record<string, unknown>;
+  children?: UrlNode[];
+};
+
+const streamdownRehypePlugins = Object.values(defaultRehypePlugins) as NonNullable<
+  StreamdownProps["rehypePlugins"]
+>;
+
+function resolveUrlsPlugin(resolveUrl: MessageUrlResolver) {
+  return () => (tree: UrlNode) => {
+    const visit = (node: UrlNode): void => {
+      if (node.type === "element" && node.properties) {
+        const url = node.properties.href;
+        if (typeof url === "string") {
+          const resolved = resolveUrl(url);
+          if (resolved === null) delete node.properties.href;
+          else if (resolved !== undefined) node.properties.href = resolved;
+        }
+      }
+      node.children?.forEach(visit);
+    };
+    visit(tree);
+  };
+}
+
+export const MessageResponse = memo(
+  ({
+    className,
+    streaming = false,
+    resolveUrl,
+    rehypePlugins,
+    ...props
+  }: MessageResponseProps) => (
+    <Streamdown
+      className={cn("sb-message-response", className)}
+      plugins={streamdownPlugins}
+      rehypePlugins={
+        resolveUrl
+          ? [resolveUrlsPlugin(resolveUrl), ...(rehypePlugins ?? streamdownRehypePlugins)]
+          : rehypePlugins
+      }
+      {...(streaming
+        ? {
+            mode: "streaming" as const,
+            isAnimating: true,
+            animated: streamAnimation,
+          }
+        : { mode: "static" as const })}
+      {...props}
+    />
+  ),
+  (previous, next) =>
+    previous.children === next.children &&
+    previous.streaming === next.streaming &&
+    previous.resolveUrl === next.resolveUrl,
+);
+MessageResponse.displayName = "MessageResponse";
+
+export function AssistantMessageActions({
+  text,
+  messageId,
+  canRetry,
+  onCopy,
+  onRetry,
+  onFork,
+}: {
+  text: string;
+  messageId: string;
+  canRetry: boolean;
+  onCopy?: (text: string) => void | Promise<void>;
+  onRetry?: (messageId: string) => void | Promise<void>;
+  onFork?: (messageId: string) => void | Promise<void>;
+}) {
+  const [copied, setCopied] = useState(false);
+  const [forking, setForking] = useState(false);
+  const timer = useRef<number | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timer.current !== null) window.clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  const copy = useCallback(async () => {
+    if (onCopy) await onCopy(text);
+    else if (typeof navigator !== "undefined") await navigator.clipboard.writeText(text);
+    setCopied(true);
+    if (timer.current !== null) window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setCopied(false), 1500);
+  }, [onCopy, text]);
+
+  if (!text && (!canRetry || !onRetry) && !onFork) return null;
+  return (
+    <MessageActions>
+      {text && (
+        <MessageAction
+          tooltip={copied ? "已复制" : "复制"}
+          label="复制"
+          onClick={() => void copy()}
+        >
+          {copied ? <CheckIcon size={15} /> : <CopyIcon size={15} />}
+        </MessageAction>
+      )}
+      {canRetry && onRetry && (
+        <MessageAction
+          tooltip="重试"
+          label="重试"
+          onClick={() => void onRetry(messageId)}
+        >
+          <RefreshCcwIcon size={15} />
+        </MessageAction>
+      )}
+      {onFork && (
+        <MessageAction
+          tooltip={forking ? "正在创建新会话…" : "从这里创建新会话"}
+          label={forking ? "正在创建新会话" : "从这里创建新会话"}
+          disabled={forking}
+          onClick={() => {
+            setForking(true);
+            void Promise.resolve(onFork(messageId)).finally(() =>
+              setForking(false),
+            );
+          }}
+        >
+          {forking ? (
+            <Loader2Icon size={15} className="sb-spin" />
+          ) : (
+            <GitForkIcon size={15} />
+          )}
+        </MessageAction>
+      )}
+    </MessageActions>
+  );
+}
+
+export function BrandMark({ className }: { className?: string }) {
+  return (
+    <span className={cn("sb-brand-mark", className)} aria-hidden="true">
+      <svg width="17" height="17" viewBox="0 0 28 28" fill="none">
+        <path
+          d="M14 14 C 11.5 10.5, 6.5 10.5, 6.5 14 C 6.5 17.5, 11.5 17.5, 14 14 C 16.5 10.5, 21.5 10.5, 21.5 14 C 21.5 17.5, 16.5 17.5, 14 14 Z"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+          className="sb-brand-mark__loop"
+        />
+      </svg>
+    </span>
+  );
+}