Skip to content

DEBUG_CHAT_FLOW.md

Latest commit

 

History

History
312 lines (222 loc) · 6.72 KB

DEBUG_CHAT_FLOW.md

File metadata and controls

312 lines (222 loc) · 6.72 KB

Debugging Chat Response Flow

This guide helps you understand what's happening when you send a message and why responses might not appear.

🔍 What to Check in Browser Console

Step 1: Send a Message

When you type a message and hit Send, you should see these logs in order:

📤 [ChatPanel] Sending user message: "your message here"
📊 [ChatPanel] Messages updated, total count: 2
  1. [assistant] Hello! I'm Hexa ⟡ — your AI coding companion...
  2. [user] your message here...

✅ If you see this: User message is being added correctly

❌ If you don't: Check if the form is submitting (maybe preventDefault failed)

Step 2: AI Processing Begins

Immediately after, you should see:

⏳ [ChatPanel] Waiting for AI response...
💬 [AI API] Generating response with provider: mock (or transformers)
📝 [AI API] User message: "your message here"

✅ If you see this: Message is being sent to AI provider

❌ If you don't: Check if isLoading is preventing submission

Step 3: AI Provider Routing

Depending on your provider, you'll see:

For Mock Mode:

🎭 [AI API] Routing to Mock API...
✅ [AI API] Mock response received

For Transformers.js:

🤖 [AI API] Routing to Transformers.js...
🔮 Generating python code for: "your message"
⏳ Calling model (this may take 5-10 seconds)...
📝 Raw model output: {...}
✅ [AI API] Transformers.js response received

✅ If you see this: AI is processing your request

❌ If you don't: AI call might have failed silently

Step 4: Response Received

After AI processing, you should see:

📥 [ChatPanel] Received AI response: {
  id: "msg-1234567890",
  content: "Here's a python solution ⟡",
  hasCode: true,
  language: "python",
  codeLength: 145
}

✅ If you see this: Response was generated successfully

❌ If you don't: Check the previous step for errors

Step 5: Adding to State

This is CRITICAL - the response must be added to React state:

💬 [ChatPanel] Adding AI message to state, current count: 2
💬 [ChatPanel] New message count: 3

✅ If you see this: Message is being added to state

❌ If you don't: React state update might have failed

Step 6: Messages Re-render

When state updates, messages should re-render:

📊 [ChatPanel] Messages updated, total count: 3
  1. [assistant] Hello! I'm Hexa ⟡...
  2. [user] your message here...
  3. [assistant] Here's a python solution ⟡...

✅ If you see this: Messages array has the new message

❌ If you don't: React isn't triggering re-render

Step 7: Code Editor Update

If the response has code:

📝 [ChatPanel] Updating code editor with: python

✅ If you see this: Code editor should update

❌ If you don't: No code in response, or update failed

Step 8: Complete

Finally:

✅ [ChatPanel] Request completed, loading=false

✅ If you see this: Everything completed successfully

🚨 Common Issues & Solutions

Issue: Response Generated But Not Visible

Console shows:

📥 [ChatPanel] Received AI response: {...}
💬 [ChatPanel] Adding AI message to state, current count: 2
💬 [ChatPanel] New message count: 3
✅ [ChatPanel] Request completed

BUT: No new message in chat UI

Possible causes:

  1. React not re-rendering
    • Solution: Check React DevTools, force refresh
  2. Message ID conflict
    • Solution: Check if message.id is unique
  3. CSS hiding message
    • Solution: Inspect element, check if it's in DOM

How to verify:

  • Open React DevTools
  • Find ChatPanel component
  • Check messages state - should have 3 items
  • If state is correct but UI isn't showing it → React rendering issue

Issue: Transformers Takes Forever

Console shows:

⏳ Calling model (this may take 5-10 seconds)...
(nothing else for minutes)

Possible causes:

  1. Model is actually processing (wait longer)
  2. Model crashed silently
  3. Browser ran out of memory

Solution:

  • Wait up to 30 seconds
  • If nothing, check browser memory usage
  • Try with a shorter prompt
  • Switch back to Mock mode

Issue: No Console Logs at All

Possible causes:

  1. Console tab not open
  2. Logs being filtered
  3. JavaScript disabled
  4. Dev server not running

Solution:

  • Press F12, click Console tab
  • Clear all filters
  • Refresh page
  • Check npm run dev is running

🔬 Advanced Debugging

Check React State Directly

Open console and paste:

// Find the ChatPanel component in React DevTools
// Then in console:
$r.state  // or props, depending on component structure

Force Re-render

// In console, while on the page:
window.location.reload()

Check Messages Array

Add this temporarily to ChatPanel.tsx:

useEffect(() => {
  console.log('=== MESSAGES ARRAY ===', JSON.stringify(messages, null, 2))
}, [messages])

📊 Expected Full Console Log Flow

Here's what a SUCCESSFUL message should look like from start to finish:

📤 [ChatPanel] Sending user message: "fibonacci"
📊 [ChatPanel] Messages updated, total count: 2
  1. [assistant] Hello! I'm Hexa ⟡...
  2. [user] fibonacci...
⏳ [ChatPanel] Waiting for AI response...
💬 [AI API] Generating response with provider: mock
📝 [AI API] User message: "fibonacci"
🎭 [AI API] Routing to Mock API...
✅ [AI API] Mock response received
📥 [ChatPanel] Received AI response: {
  id: "msg-1730345678901",
  content: "Great choice ⟡ Here's an efficient O(n)...",
  hasCode: true,
  language: "typescript",
  codeLength: 245
}
💬 [ChatPanel] Adding AI message to state, current count: 2
💬 [ChatPanel] New message count: 3
📊 [ChatPanel] Messages updated, total count: 3
  1. [assistant] Hello! I'm Hexa ⟡...
  2. [user] fibonacci...
  3. [assistant] Great choice ⟡ Here's an efficient O(n)...
📝 [ChatPanel] Updating code editor with: typescript
✅ [ChatPanel] Request completed, loading=false

If you see all these logs but still no message → React rendering issue

If logs stop partway through → Check where they stopped for the issue

🆘 Quick Fixes

Quick Fix #1: Hard Refresh

Ctrl+Shift+R (Windows/Linux)
Cmd+Shift+R (Mac)

Quick Fix #2: Clear Cache

F12 → Network tab → Disable cache (checkbox)
Refresh page

Quick Fix #3: Switch to Mock Mode

⌘+K → Click "Mock" → Try again

Quick Fix #4: Check Provider

Look at bottom-right status indicator
Should say: "🎭 Mock Mode" or "🤖 AI Ready"

📞 Report an Issue

If you're still having problems, include:

  1. Full console log (copy/paste)
  2. Which provider you're using
  3. Your exact message
  4. Screenshot of UI
  5. Browser and version