@springbrand/message-panel 0.1.0 → 0.1.2

package/src/message.tsx

@@ -1,254 +0,0 @@
-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>
-  );
-}