From 157fe9d6b476190cf60c5717665dfac5b9c4fbf5 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 5 Feb 2026 23:42:48 +0000
Subject: [PATCH] feat(ui): switch message actions to icon buttons

---
 packages/ui/src/components/message-block.tsx | 12 +++---
 packages/ui/src/components/message-item.tsx  | 43 ++++++++++----------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/packages/ui/src/components/message-block.tsx b/packages/ui/src/components/message-block.tsx
index 0a2de252..8b1dcb48 100644
--- a/packages/ui/src/components/message-block.tsx
+++ b/packages/ui/src/components/message-block.tsx
@@ -1,5 +1,5 @@
 import { For, Match, Show, Switch, createEffect, createMemo, createSignal, untrack } from "solid-js"
-import { FoldVertical } from "lucide-solid"
+import { ExternalLink, FoldVertical, Trash2 } from "lucide-solid"
 import MessageItem from "./message-item"
 import ToolCall from "./tool-call"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
@@ -390,9 +390,10 @@ function ToolCallItem(props: ToolCallItemProps) {
                   type="button"
                   disabled={!taskLocation()}
                   onClick={handleGoToTaskSession}
-                  title={!taskLocation() ? t("messageBlock.tool.goToSession.unavailableTitle") : t("messageBlock.tool.goToSession.title")}
+                  title={t("messageBlock.tool.goToSession.label")}
+                  aria-label={t("messageBlock.tool.goToSession.label")}
                 >
-                  {t("messageBlock.tool.goToSession.label")}
+                  <ExternalLink class="w-3.5 h-3.5" aria-hidden="true" />
                 </button>
               </Show>
 
@@ -401,9 +402,10 @@ function ToolCallItem(props: ToolCallItemProps) {
                 type="button"
                 disabled={deleteDisabled()}
                 onClick={handleDeleteToolPart}
-                title={t("messageBlock.tool.deletePart.title")}
+                title={deleting() ? t("messageBlock.tool.deletePart.deleting") : t("messageBlock.tool.deletePart.label")}
+                aria-label={deleting() ? t("messageBlock.tool.deletePart.deleting") : t("messageBlock.tool.deletePart.label")}
               >
-                {deleting() ? t("messageBlock.tool.deletePart.deleting") : t("messageBlock.tool.deletePart.label")}
+                <Trash2 class="w-3.5 h-3.5" aria-hidden="true" />
               </button>
             </div>
           </div>
diff --git a/packages/ui/src/components/message-item.tsx b/packages/ui/src/components/message-item.tsx
index 91c06fd0..f974aefb 100644
--- a/packages/ui/src/components/message-item.tsx
+++ b/packages/ui/src/components/message-item.tsx
@@ -1,4 +1,5 @@
 import { For, Show, createSignal } from "solid-js"
+import { Copy, Split, Trash2, Undo } from "lucide-solid"
 import type { MessageInfo, ClientPart } from "../types/message"
 import { partHasRenderableText } from "../types/message"
 import type { MessageRecord } from "../stores/message-v2/types"
@@ -159,6 +160,8 @@ export default function MessageItem(props: MessageItemProps) {
     }
   }
 
+  const copyLabel = () => (copied() ? t("messageItem.actions.copied") : t("messageItem.actions.copy"))
+
   const getRawContent = () => {
     return props.parts
       .filter(part => part.type === "text")
@@ -278,31 +281,29 @@ export default function MessageItem(props: MessageItemProps) {
                 <button
                   class="message-action-button"
                   onClick={handleRevert}
-                  title={t("messageItem.actions.revertTitle")}
-                  aria-label={t("messageItem.actions.revertTitle")}
+                  title={t("messageItem.actions.revert")}
+                  aria-label={t("messageItem.actions.revert")}
                 >
-                  {t("messageItem.actions.revert")}
+                  <Undo class="w-3.5 h-3.5" aria-hidden="true" />
                 </button>
               </Show>
               <Show when={props.onFork}>
                 <button
                   class="message-action-button"
                   onClick={() => props.onFork?.(props.record.id)}
-                  title={t("messageItem.actions.forkTitle")}
-                  aria-label={t("messageItem.actions.forkTitle")}
+                  title={t("messageItem.actions.fork")}
+                  aria-label={t("messageItem.actions.fork")}
                 >
-                  {t("messageItem.actions.fork")}
+                  <Split class="w-3.5 h-3.5" aria-hidden="true" />
                 </button>
               </Show>
               <button
                 class="message-action-button"
                 onClick={handleCopy}
-                title={t("messageItem.actions.copyTitle")}
-                aria-label={t("messageItem.actions.copyTitle")}
+                title={copyLabel()}
+                aria-label={copyLabel()}
               >
-                <Show when={copied()} fallback={t("messageItem.actions.copy")}>
-                  {t("messageItem.actions.copied")}
-                </Show>
+                <Copy class="w-3.5 h-3.5" aria-hidden="true" />
               </button>
               <Show when={deletableTextPartId()}>
                 {(partId) => (
@@ -310,10 +311,10 @@ export default function MessageItem(props: MessageItemProps) {
                     class="message-action-button"
                     onClick={() => void handleDeletePart(partId())}
                     disabled={isDeletingPart(partId())}
-                    title={t("messagePart.actions.deleteTitle")}
-                    aria-label={t("messagePart.actions.deleteTitle")}
+                    title={isDeletingPart(partId()) ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
+                    aria-label={isDeletingPart(partId()) ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
                   >
-                    {isDeletingPart(partId()) ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
+                    <Trash2 class="w-3.5 h-3.5" aria-hidden="true" />
                   </button>
                 )}
               </Show>
@@ -324,12 +325,10 @@ export default function MessageItem(props: MessageItemProps) {
               <button
                 class="message-action-button"
                 onClick={handleCopy}
-                title={t("messageItem.actions.copyTitle")}
-                aria-label={t("messageItem.actions.copyTitle")}
+                title={copyLabel()}
+                aria-label={copyLabel()}
               >
-                <Show when={copied()} fallback={t("messageItem.actions.copy")}>
-                  {t("messageItem.actions.copied")}
-                </Show>
+                <Copy class="w-3.5 h-3.5" aria-hidden="true" />
               </button>
 
               <Show when={deletableTextPartId()}>
@@ -338,10 +337,10 @@ export default function MessageItem(props: MessageItemProps) {
                     class="message-action-button"
                     onClick={() => void handleDeletePart(partId())}
                     disabled={isDeletingPart(partId())}
-                    title={t("messagePart.actions.deleteTitle")}
-                    aria-label={t("messagePart.actions.deleteTitle")}
+                    title={isDeletingPart(partId()) ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
+                    aria-label={isDeletingPart(partId()) ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
                   >
-                    {isDeletingPart(partId()) ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
+                    <Trash2 class="w-3.5 h-3.5" aria-hidden="true" />
                   </button>
                 )}
               </Show>