- Implement tool-specific rendering for all 14 tool types (read, edit, write, bash, webfetch, todowrite, task, etc.) - Each tool shows contextually relevant information (file previews, diffs, command output, todo lists) - Add metadata-driven content display using preview, diff, output, and todos from tool state - Implement status-based rendering (pending, running, completed, error) with animations - Create global state store for expandable items (tool calls and reasoning sections) - Fix state persistence: expanded tool calls and reasoning sections remain expanded when new messages arrive - Fix scroll position preservation during live message updates - Fix reasoning toggle loop by replacing native details element with custom expandable - Add comprehensive documentation in TOOL_CALL_IMPLEMENTATION.md - Reduce font sizes for better readability in expanded tool content - Add proper keying to For loops to prevent component recreation - Match TUI patterns for tool names, actions, and content formatting
37 lines
900 B
TypeScript
37 lines
900 B
TypeScript
import { createSignal } from "solid-js"
|
|
|
|
const [expandedItems, setExpandedItems] = createSignal<Set<string>>(new Set())
|
|
|
|
export function isItemExpanded(itemId: string): boolean {
|
|
return expandedItems().has(itemId)
|
|
}
|
|
|
|
export function toggleItemExpanded(itemId: string): void {
|
|
setExpandedItems((prev) => {
|
|
const next = new Set(prev)
|
|
if (next.has(itemId)) {
|
|
next.delete(itemId)
|
|
} else {
|
|
next.add(itemId)
|
|
}
|
|
return next
|
|
})
|
|
}
|
|
|
|
export function setItemExpanded(itemId: string, expanded: boolean): void {
|
|
setExpandedItems((prev) => {
|
|
const next = new Set(prev)
|
|
if (expanded) {
|
|
next.add(itemId)
|
|
} else {
|
|
next.delete(itemId)
|
|
}
|
|
return next
|
|
})
|
|
}
|
|
|
|
// Backward compatibility aliases
|
|
export const isToolCallExpanded = isItemExpanded
|
|
export const toggleToolCallExpanded = toggleItemExpanded
|
|
export const setToolCallExpanded = setItemExpanded
|