TOOL_CALLS_DEBUGGING.md•6.1 kB
# Inline Tool Calls - Implementation Summary & Troubleshooting
## What Changed
### 1. **Chat Store (chatStore.js)**
- Added `currentMessageId` state to track which assistant message is active
- Updated `addMessage()` to set `currentMessageId` for assistant messages
- Updated `addMessage()` to preserve `currentMessageId` when streaming
- Updated `addToolCall()` to link tools to the current message
- Added extensive console logging for debugging
### 2. **Message Component (Message.jsx)**
- Added `ToolCallInline` sub-component for displaying tools
- Added tool calls rendering below message text
- Added debug logging to show tool calls found
### 3. **Message Styling (Message.css)**
- Added inline tool call styles
- Added status color indicators
- Added expandable/collapsible behavior
- Added scrollable code blocks
## How It Should Work
### Flow Diagram
```
User sends "list pods"
↓
Assistant response starts:
- New assistant message created with messageId="abc-123"
- currentMessageId set to "abc-123"
↓
Model streams text:
- Text added to same message (same messageId)
- currentMessageId stays "abc-123"
↓
Tool executes (list_pods):
- Tool call created with status="completed"
- currentMessageId is "abc-123"
- Tool added to message["abc-123"].toolCalls
↓
Message re-renders:
- Shows text + tool call inline
- Tool appears as expandable box
```
## Testing Steps
### Step 1: Reload Frontend
```bash
http://localhost:5173 (refresh or Ctrl+Shift+R)
```
### Step 2: Open DevTools Console
- F12 (Windows/Linux)
- Cmd+Option+I (Mac)
- Click "Console" tab
### Step 3: Send Test Message
```
Type: "list all pods"
Press: Enter
```
### Step 4: Check Console Output
Look for these exact logs in order:
```
✅ [Store] New message: role=assistant, messageId=abc-123
✅ [Store] currentMessageId set to: abc-123
✅ [Store] Streaming text to message: abc-123
✅ [Store] addToolCall: list_pods, currentMessageId: abc-123
✅ [Store] Linking tool call to message: abc-123
✅ [Store] Found matching message, adding tool call
✅ [Message] Found 1 tool calls in message
```
### Step 5: Check Chat UI
Below the AI's text response, you should see:
```
🔧 Tool Calls:
✅ list_pods ▶
```
Click the tool to expand it.
## Debugging Checklist
If tool calls don't appear inline:
- [ ] **Is currentMessageId being set?**
Look for: `[Store] currentMessageId set to: (UUID)`
- If missing: Assistant message not created properly
- If showing null: Wrong logic path
- [ ] **Is currentMessageId still set when tool arrives?**
Look for: `[Store] addToolCall: tool_name, currentMessageId: (UUID)`
- If null: MessageId got cleared somehow
- If different UUID: Wrong message targeted
- [ ] **Is tool being linked to message?**
Look for: `[Store] Found matching message, adding tool call`
- If missing but previous log exists: Message IDs don't match
- Check if UUIDs are identical
- [ ] **Is Message component receiving the data?**
Look for: `[Message] Found N tool calls in message`
- If missing: Tool calls not passed to component
- If N=0: Tool calls array is empty
- [ ] **Are tool calls rendering in DOM?**
In Console, run: `document.querySelectorAll('.inline-tool-call').length`
- If > 0: DOM rendering works ✅
- If 0: CSS or React rendering issue
## Common Issues & Solutions
### Issue 1: "No currentMessageId set" Log
**Problem**: Tool calls aren't being linked to messages
**Solution**:
1. Check that first message has `role: 'assistant'`
2. Verify addMessage() is setting currentMessageId
3. Check ChatPage passes correct role
### Issue 2: "Found matching message" but tools don't show
**Problem**: Store updated but component didn't re-render
**Solution**:
1. Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
2. Check Message.jsx receives toolCalls prop
3. Verify Message.css is loaded
### Issue 3: All tool calls in sidebar but none in message
**Problem**: Tools go to global list but not to message
**Solution**:
1. currentMessageId is null when tools arrive
2. Check if new assistant message created after each tool
3. Verify stream flag is set correctly
### Issue 4: Expandable boxes don't work
**Problem**: Tools show but can't expand/collapse
**Solution**:
1. Click should toggle state
2. Check ToolCallInline component state management
3. Verify CSS for inline-tool-details is loaded
## Browser DevTools Inspection
### Check Store State (if exposed)
```javascript
// Open DevTools, paste in Console:
// This may not work depending on setup
// But you can see what's rendered:
document.querySelectorAll('.message').forEach((msg, i) => {
console.log(`Message ${i}:`, msg.querySelector('.inline-tool-call')?.length, 'tools')
})
```
### Check DOM Structure
Right-click on chat message → "Inspect"
Look for:
```html
<div class="message message-assistant">
<div class="message-content">
<div class="message-text">...</div>
<div class="message-tool-calls"> <!-- Should be here -->
<div class="inline-tool-call">... <!-- Tool cards here -->
```
If `message-tool-calls` div is missing, component isn't rendering tools.
## Enabling/Disabling Debug Logs
### To Remove Logs (cleaner console):
Edit files and comment out console.log lines:
- `src/store/chatStore.js` (lines with `console.log`)
- `src/components/Message.jsx` (debug log section)
- `src/pages/ChatPage.jsx` (ChatPage logging)
### To Re-enable Logs:
Uncomment the same lines.
## Performance Note
Debug logs will slow down re-renders slightly. Once confirmed working, you can remove them.
## Next Steps
1. Follow Testing Steps above
2. Share console logs with the exact output
3. Tell me:
- Do you see the logs?
- What's the last log before checking UI?
- Do tool calls appear in chat? Yes/No
4. I can fix based on this info!
## Files Modified
- ✅ `src/store/chatStore.js` - State management
- ✅ `src/components/Message.jsx` - Display component
- ✅ `src/styles/Message.css` - Styling
- ✅ `src/pages/ChatPage.jsx` - Logging
- ✅ Added `DEBUG_TOOL_CALLS.md` - This guide