fix(ui): truncate long Bash command in tag with popover (#11200)

* 🐛 fix(ui): truncate long Bash command in tag with popover

Add automatic truncation for Bash commands exceeding 200 characters in the tag display. When truncated, users can hover over the tag to view the full command in a popover.

- Add MAX_TAG_LENGTH constant (200 chars)
- Implement command truncation logic
- Add Popover component for full command display on hover
- Prevent UI overflow issues with long commands

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* ♻️ refactor(ui): reduce MAX_TAG_LENGTH to 100 for smaller screens

Reduce the command truncation threshold from 200 to 100 characters to better support smaller screen sizes and improve readability.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* docs: remove emoji requirement from conventional commits

Update commit message guidelines to use standard Conventional Commit format without emoji prefixes for better compatibility and consistency.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
亢奋猫
2025-11-09 12:27:15 +08:00
committed by GitHub
parent 85a628f8dd
commit d5826c2dc7
2 changed files with 20 additions and 4 deletions

View File

@@ -10,8 +10,7 @@ This file provides guidance to AI coding assistants when working with code in th
- **Log centrally**: Route all logging through `loggerService` with the right context—no `console.log`.
- **Research via subagent**: Lean on `subagent` for external docs, APIs, news, and references.
- **Always propose before executing**: Before making any changes, clearly explain your planned approach and wait for explicit user approval to ensure alignment and prevent unwanted modifications.
- **Write conventional commits with emoji**: Commit small, focused changes using emoji-prefixed Conventional Commit messages (e.g., `feat:`, `🐛 fix:`, `♻️ refactor:`, `
📝 docs:`).
- **Write conventional commits**: Commit small, focused changes using Conventional Commit messages (e.g., `feat:`, `fix:`, `refactor:`, `docs:`).
## Development Commands

View File

@@ -1,10 +1,12 @@
import type { CollapseProps } from 'antd'
import { Tag } from 'antd'
import { Popover, Tag } from 'antd'
import { Terminal } from 'lucide-react'
import { ToolTitle } from './GenericTools'
import type { BashToolInput as BashToolInputType, BashToolOutput as BashToolOutputType } from './types'
const MAX_TAG_LENGTH = 100
export function BashTool({
input,
output
@@ -15,6 +17,13 @@ export function BashTool({
// 如果有输出,计算输出行数
const outputLines = output ? output.split('\n').length : 0
// 处理命令字符串的截断
const command = input.command
const needsTruncate = command.length > MAX_TAG_LENGTH
const displayCommand = needsTruncate ? `${command.slice(0, MAX_TAG_LENGTH)}...` : command
const tagContent = <Tag className="whitespace-pre-wrap break-all font-mono">{displayCommand}</Tag>
return {
key: 'tool',
label: (
@@ -26,7 +35,15 @@ export function BashTool({
stats={output ? `${outputLines} ${outputLines === 1 ? 'line' : 'lines'}` : undefined}
/>
<div className="mt-1">
<Tag className="whitespace-pre-wrap break-all font-mono">{input.command}</Tag>
{needsTruncate ? (
<Popover
content={<div className="max-w-xl whitespace-pre-wrap break-all font-mono">{command}</div>}
trigger="hover">
{tagContent}
</Popover>
) : (
tagContent
)}
</div>
</>
),