LibreChat/client
Danny Avila 3b820415ad 🎭 feat: Custom UI Renderers for Skill Tool Calls (#12684)
* feat: Custom UI renderers for skill, read_file, and bash_tool

Add specialized tool call components for the three skill tools,
replacing the generic ToolCall fallback with contextual UI.

* fix: Address review findings for skill tool UI renderers

- Fix Codex P2: read skillName (camelCase) matching agent pipeline
- Fix Codex P2: remove error regex from ReadFileCall to avoid false
  positives on normal file content containing "Error:" tokens
- Extract useToolCallState hook to eliminate ~60% boilerplate
  duplication across SkillCall, ReadFileCall, and BashCall
- Extract parseJsonField utility with consistent escaped-char-aware
  regex fallback, shared by all three components
- Gate SkillCall bordered card on hasOutput to prevent empty card
  when expanded before output arrives
- Skip highlightAuto for plaintext lang to avoid expensive
  auto-detection on files with unknown extensions
- Expand LANG_MAP with php, cs, kt, swift, scss, less, lua, r;
  add FILENAME_MAP for Makefile and Dockerfile
- Export langFromPath for testability
- Add unit tests for parseJsonField, langFromPath, and ToolIcon
  skill type branches

* refactor: Redesign BashCall as minimal terminal widget

Replace the ExecuteCode-clone pattern with a purpose-built terminal
UI: $ prompt prefix, dark background command zone, icon-only copy
button, and raw monospace output. Drops useLazyHighlight,
CodeWindowHeader, Stdout, and the "Output" label in favor of a
cleaner two-zone layout that feels native to the terminal.

* fix: parseJsonField unescape ordering and ReadFileCall empty card

Replace the sequential .replace() chain in parseJsonField's regex
fallback with a single-pass /\(.)/g replacement. The old chain
processed \n before \, so \n (JSON-escaped literal backslash + n)
was incorrectly decoded as a newline instead of \n.

Gate ReadFileCall's bordered card on hasOutput (matching SkillCall's
pattern) so the card does not render as an empty rounded box during
streaming before output arrives.

Add regression tests for \n decoding and unknown escape sequences.

* fix: Followup review fixes

- Refactor ExecuteCode to use shared useToolCallState hook,
  eliminating the last copy of the inline state machine
- Escape regex metacharacters in parseJsonField to prevent
  injection from field names containing ., +, (, etc.
- Fix contradictory test description in langFromPath tests

* fix: Surface tool failure state in skill tool renderers

Add error detection to useToolCallState via the shared isError
check so tool calls that complete with an error prefix show a
"failed" suffix instead of a success label. Prevents misleading
users when read_file, skill, or bash_tool returns an error
(e.g. file not found, skill not accessible). Matches the error
handling pattern already used by the generic ToolCall component.

* feat: Add bash syntax highlighting to BashCall command zone

Reuse the shared useLazyHighlight singleton (already loaded by
ReadFileCall and ExecuteCode) to highlight the command with bash
grammar. Falls back to plain text while lowlight is loading.

* fix: Align BashCall scrollbar to span full card width

Move max-h/overflow-auto from the inner pre to the outer container
so the scrollbar spans the full width like the output zone. Float
the copy button with sticky positioning so it stays visible while
scrolling long commands.

* feat: Use GNU Bash icon for bash_tool progress header and ToolIcon

Replace the generic SquareTerminal lucide icon with the GNU Bash
logo (already in the project via LangIcon/langIconPaths) for
both the BashCall progress header and the ToolIcon stacked icon
mapping.

* fix: Render raw content while highlighter loads, preserve command text on copy

- ReadFileCall: fall back to raw output when useLazyHighlight
  returns null, preventing a blank code panel on first render
  before lowlight finishes its dynamic import
- BashCall: drop .trim() from the copy handler so the clipboard
  receives exactly what's displayed (WYSIWYG copy)

* fix: Alphabetize new translation keys within en/translation.json

Relocate read_file, skill_finished, and skill_running into their
correct alphabetical positions within the overall key list.

* fix: Surface error state in ExecuteCode, fix BashCall import order

- ExecuteCode now uses hasError from useToolCallState to show
  the "failed" suffix on failed code executions, matching the
  three new renderers
- Reorder BashCall local imports to longest-to-shortest per
  project style
2026-04-25 04:02:00 -04:00
..
public
scripts
src 🎭 feat: Custom UI Renderers for Skill Tool Calls (#12684) 2026-04-25 04:02:00 -04:00
test 🧑‍🎨 refactor: Prompts/Sidebar styles for improved UI Consistency (#12426) 2026-04-09 00:02:31 -04:00
babel.config.cjs 🧑‍🎨 refactor: Prompts/Sidebar styles for improved UI Consistency (#12426) 2026-04-09 00:02:31 -04:00
check_updates.sh
index.html
jest.config.cjs v0.8.5 (#12727) 2026-04-22 13:10:19 -07:00
nginx.conf 📬 docs: Add Forwarded Headers to Nginx SSL Proxy Template (#12379) 2026-03-25 13:04:19 -04:00
package.json 📜 feat: Skills UI + Initial E2E CRUD / Sharing (#12580) 2026-04-25 04:02:00 -04:00
postcss.config.cjs
tailwind.config.cjs
tsconfig.json 📦 chore: Update TypeScript Config for TS v7 (#12794) 2026-04-23 12:51:03 -04:00
vite.config.ts 📜 feat: Skills UI + Initial E2E CRUD / Sharing (#12580) 2026-04-25 04:02:00 -04:00