salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): switch message actions to icon buttons

Browse Source
This commit is contained in:
Shantur Rathore
2026-02-05 23:42:48 +00:00
parent 6c42b64466
commit 157fe9d6b4
2 changed files with 28 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/ui/src/components/message-block.tsx
View File

@@ -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>

43
packages/ui/src/components/message-item.tsx
View File

@@ -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>