myoperator-mcp 0.2.338 → 0.2.339

package/dist/index.js

@@ -7489,61 +7489,146 @@ import { cn } from "@/lib/utils";
  * Used in chat applications for reply-to previews.
  *
  * When an \`onClick\` handler is provided, the component becomes interactive:
- * it receives \`role="button"\`, \`tabIndex={0}\`, and keyboard support (Enter/Space).
- * A focus ring is shown when focused via keyboard.
+ * it renders as a \`<button>\`, with native keyboard support.
  *
  * @example
  * \`\`\`tsx
  * <ReplyQuote sender="John Doe" message="Hello, how are you?" />
- * <ReplyQuote sender="Jane" message="Check this out!" onClick={() => scrollToMessage()} />
+ * <ReplyQuote sender="Jane" message="Check this out!" thumbnailUrl="https://..." onClick={() => scrollToMessage()} />
  * \`\`\`
  */
-export interface ReplyQuoteProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ReplyQuoteProps
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    "onClick" | "onKeyDown"
+  > {
   /** Name of the person being quoted */
   sender: string;
-  /** The quoted message content */
+  /** The quoted message text (plain string or formatted React node) */
   message: React.ReactNode;
+  /** Optional thumbnail shown on the right (e.g. template image header) */
+  thumbnailUrl?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
 }
 
-const ReplyQuote = React.forwardRef(
-  ({ className, sender, message, onClick, onKeyDown, role, tabIndex, "aria-label": ariaLabel, ...props }: ReplyQuoteProps, ref: React.Ref<HTMLDivElement>) => {
-    const isInteractive = !!onClick;
-    const messageLabel = typeof message === "string" ? \`: \${message}\` : "";
-
-    const handleKeyDown = React.useCallback(
-      (e: React.KeyboardEvent<HTMLDivElement>) => {
-        if (onClick && (e.key === "Enter" || e.key === " ")) {
-          if (e.key === " ") {
-            e.preventDefault();
-          }
-          onClick(e as unknown as React.MouseEvent<HTMLDivElement>);
-        }
-        onKeyDown?.(e);
-      },
-      [onClick, onKeyDown]
-    );
+function ReplyQuoteInner({
+  sender,
+  message,
+  thumbnailUrl,
+}: Pick<ReplyQuoteProps, "sender" | "message" | "thumbnailUrl">) {
+  const thumb = thumbnailUrl?.trim();
 
-    return (
+  return (
+    <>
       <div
-        ref={ref}
         className={cn(
-          "tw-max-w-full tw-min-w-0 tw-bg-[var(--semantic-bg-ui,#F5F5F5)] tw-border-l-[3px] tw-border-solid tw-border-[var(--semantic-border-accent,#27ABB8)] tw-rounded-sm tw-px-4 tw-py-1.5 tw-mb-2 tw-h-[56px] tw-flex tw-flex-col tw-justify-start tw-gap-0 tw-overflow-hidden tw-cursor-pointer hover:tw-bg-[var(--semantic-bg-hover,#D5D7DA)] tw-transition-colors",
-          isInteractive && "focus-visible:tw-ring-2 focus-visible:tw-ring-[var(--semantic-border-focus,#2BBCCA)] focus-visible:tw-ring-offset-1 focus-visible:tw-outline-none",
-          className
+          "tw-min-w-0 tw-flex tw-flex-col tw-justify-start",
+          thumb ? "tw-flex-1" : "tw-w-full"
         )}
-        role={role ?? (isInteractive ? "button" : undefined)}
-        tabIndex={tabIndex ?? (isInteractive ? 0 : undefined)}
-        onClick={onClick}
-        onKeyDown={isInteractive ? handleKeyDown : onKeyDown}
-        aria-label={ariaLabel ?? \`Quoted reply from \${sender}\${messageLabel}\`}
-        {...props}
       >
         <p className="tw-m-0 tw-min-w-0 tw-shrink-0 tw-truncate tw-text-[14px] tw-font-semibold tw-leading-5 tw-tracking-[0.014px] tw-text-[var(--semantic-text-primary,#181D27)]">
           {sender}
         </p>
-        <div className="tw-m-0 tw-min-h-0 tw-min-w-0 tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-text-[14px] tw-leading-5 tw-text-[var(--semantic-text-muted,#717680)] [&_*]:tw-inline">
+        <p className="tw-m-0 tw-min-h-0 tw-min-w-0 tw-flex-1 tw-truncate tw-text-[14px] tw-leading-5 tw-text-[var(--semantic-text-muted,#717680)]">
           {message}
-        </div>
+        </p>
+      </div>
+      {thumb ? (
+        <img
+          src={thumb}
+          alt=""
+          className="tw-size-11 tw-shrink-0 tw-rounded-sm tw-object-cover"
+        />
+      ) : null}
+    </>
+  );
+}
+
+function replyQuoteClassName(
+  className: string | undefined,
+  hasThumbnail: boolean,
+  isInteractive: boolean
+) {
+  return cn(
+    "tw-w-full tw-min-w-0 tw-bg-[var(--semantic-bg-ui,#F5F5F5)] tw-border-l-[3px] tw-border-solid tw-border-[var(--semantic-border-accent,#27ABB8)] tw-rounded-sm tw-px-4 tw-py-1.5 tw-mb-2 tw-h-[56px] tw-overflow-hidden tw-cursor-pointer hover:tw-bg-[var(--semantic-bg-hover,#D5D7DA)] tw-transition-colors tw-text-left",
+    hasThumbnail
+      ? "tw-flex tw-flex-row tw-items-center tw-gap-2"
+      : "tw-flex tw-flex-col tw-justify-start tw-gap-0",
+    isInteractive &&
+      "focus-visible:tw-ring-2 focus-visible:tw-ring-[var(--semantic-border-focus,#2BBCCA)] focus-visible:tw-ring-offset-1 focus-visible:tw-outline-none tw-border-t-0 tw-border-r-0 tw-border-b-0",
+    className
+  );
+}
+
+const ReplyQuote = React.forwardRef<HTMLDivElement, ReplyQuoteProps>(
+  (
+    {
+      className,
+      sender,
+      message,
+      thumbnailUrl,
+      onClick,
+      onKeyDown,
+      role,
+      tabIndex,
+      "aria-label": ariaLabel,
+      ...props
+    },
+    ref
+  ) => {
+    const isInteractive = !!onClick;
+    const thumb = Boolean(thumbnailUrl?.trim());
+    const label =
+      ariaLabel ??
+      \`Quoted reply from \${sender}\${
+        typeof message === "string" && message ? \`: \${message}\` : ""
+      }\`;
+
+    if (isInteractive) {
+      const {
+        onCopy,
+        onCut,
+        onPaste,
+        ...buttonProps
+      } = props as React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+      return (
+        <button
+          type="button"
+          className={replyQuoteClassName(className, thumb, true)}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          aria-label={label}
+          onCopy={onCopy}
+          onCut={onCut}
+          onPaste={onPaste}
+          {...buttonProps}
+        >
+          <ReplyQuoteInner
+            sender={sender}
+            message={message}
+            thumbnailUrl={thumbnailUrl}
+          />
+        </button>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={replyQuoteClassName(className, thumb, false)}
+        role={role}
+        tabIndex={tabIndex}
+        onKeyDown={onKeyDown}
+        aria-label={label}
+        {...props}
+      >
+        <ReplyQuoteInner
+          sender={sender}
+          message={message}
+          thumbnailUrl={thumbnailUrl}
+        />
       </div>
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.2.338",
+  "version": "0.2.339",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",