From d8165bac4e46cf9a6ffadef1447d7ebd8dfd431a Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Sun, 12 Jul 2026 13:18:02 +0800
Subject: [PATCH] feat(views): unify reply and comment send buttons to the
 circular chat style (#5288)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SubmitButton is now always circular — the shape prop is removed since
every composer uses the same silhouette. ReplyInput drops its inline
icon-xs Button for the shared SubmitButton, gaining the same size,
disabled state, and send tooltip as the comment composer and chat.

MUL-4433

Co-authored-by: Lambda <lambda@multica.ai>
Co-authored-by: multica-agent <github@multica.ai>
---
 .../ui/components/common/submit-button.tsx    | 13 ++----------
 packages/views/chat/components/chat-input.tsx |  1 -
 .../views/issues/components/reply-input.tsx   | 21 +++++++------------
 3 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/packages/ui/components/common/submit-button.tsx b/packages/ui/components/common/submit-button.tsx
index 1ea02339b8..69d604ee13 100644
--- a/packages/ui/components/common/submit-button.tsx
+++ b/packages/ui/components/common/submit-button.tsx
@@ -3,7 +3,6 @@
 import type { ReactNode } from "react";
 import { ArrowUp, Loader2, Square } from "lucide-react";
 import { Button } from "@multica/ui/components/ui/button";
-import { cn } from "@multica/ui/lib/utils";
 import {
   Tooltip,
   TooltipContent,
@@ -16,12 +15,6 @@ interface SubmitButtonProps {
   loading?: boolean;
   running?: boolean;
   onStop?: () => void;
-  /**
-   * Button silhouette. `"rounded"` (default) keeps the rounded-square used by
-   * issue comment composers; `"circle"` makes it a fully-round pill — the
-   * Chat V2 look. Opt-in so shared callers keep their existing shape.
-   */
-  shape?: "rounded" | "circle";
   /**
    * Tooltip shown over the send button when idle. Pass a string or a node
    * (e.g. `Send · ⌘↵`). Omit to render no tooltip.
@@ -41,12 +34,10 @@ function SubmitButton({
   onStop,
   tooltip,
   stopTooltip,
-  shape = "rounded",
 }: SubmitButtonProps) {
-  const shapeClass = shape === "circle" ? "rounded-full" : undefined;
   if (running) {
     const stopButton = (
-      <Button size="icon-sm" className={cn(shapeClass)} onClick={onStop}>
+      <Button size="icon-sm" className="rounded-full" onClick={onStop}>
         <Square className="fill-current" />
       </Button>
     );
@@ -62,7 +53,7 @@ function SubmitButton({
   const submitButton = (
     <Button
       size="icon-sm"
-      className={cn(shapeClass)}
+      className="rounded-full"
       disabled={disabled || loading}
       onClick={onClick}
     >
diff --git a/packages/views/chat/components/chat-input.tsx b/packages/views/chat/components/chat-input.tsx
index d94f75ef22..1c0c45a963 100644
--- a/packages/views/chat/components/chat-input.tsx
+++ b/packages/views/chat/components/chat-input.tsx
@@ -425,7 +425,6 @@ export function ChatInput({
         )}
         <div className="absolute bottom-1 right-1.5 flex items-center gap-1">
           <SubmitButton
-            shape="circle"
             onClick={handleSend}
             disabled={isEmpty || isSubmitting || !!disabled || !!noAgent || pendingUploads > 0}
             loading={isSubmitting}
diff --git a/packages/views/issues/components/reply-input.tsx b/packages/views/issues/components/reply-input.tsx
index 1596e124af..954b3b3841 100644
--- a/packages/views/issues/components/reply-input.tsx
+++ b/packages/views/issues/components/reply-input.tsx
@@ -1,15 +1,15 @@
 "use client";
 
 import { useRef, useState, useCallback, useEffect } from "react";
-import { ArrowUp, Loader2 } from "lucide-react";
 import { ContentEditor, type ContentEditorRef, useFileDropZone, FileDropOverlay } from "../../editor";
 import { FileUploadButton } from "@multica/ui/components/common/file-upload-button";
-import { Button } from "@multica/ui/components/ui/button";
+import { SubmitButton } from "@multica/ui/components/common/submit-button";
 import { ActorAvatar } from "../../common/actor-avatar";
 import { useFileUpload } from "@multica/core/hooks/use-file-upload";
 import { api } from "@multica/core/api";
 import type { Attachment } from "@multica/core/types";
 import { contentReferencesAttachment } from "@multica/core/types";
+import { enterKey, formatShortcut, modKey } from "@multica/core/platform";
 import { useCommentDraftStore, type CommentDraftKey } from "@multica/core/issues/stores";
 import { cn } from "@multica/ui/lib/utils";
 import type { AvatarSize } from "@multica/ui/lib/avatar-size";
@@ -212,19 +212,12 @@ function ReplyInput({
             multiple
             onSelect={(file) => editorRef.current?.uploadFile(file)}
           />
-          <Button
-            type="button"
-            variant={isEmpty ? "ghost" : "default"}
-            size="icon-xs"
-            disabled={isEmpty || submitting}
+          <SubmitButton
             onClick={handleSubmit}
-          >
-            {submitting ? (
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
-            ) : (
-              <ArrowUp className="h-3.5 w-3.5" />
-            )}
-          </Button>
+            disabled={isEmpty}
+            loading={submitting}
+            tooltip={`${t(($) => $.comment.send_tooltip)} · ${formatShortcut(modKey, enterKey)}`}
+          />
         </div>
         {isDragOver && <FileDropOverlay />}
       </div>