Your Name Claude commited on
Commit
0daace9
·
1 Parent(s): 58da20a

Add comprehensive debugging for message sending functionality

Browse files

- Add console logs to track sendMessage execution
- Add console logs for button clicks and Enter key presses
- Log whether DOM elements are found on page load
- Add null checks before accessing elements
- Better error handling for missing elements

This will help diagnose why messages aren't sending in the chat window.

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

Co-Authored-By: Claude <[email protected]>

Files changed (1) hide show
  1. static/js/script.js +64 -29
static/js/script.js CHANGED
@@ -1,52 +1,74 @@
1
  document.addEventListener('DOMContentLoaded', function() {
 
 
2
  const chatMessages = document.getElementById('chat-messages');
3
  const userInput = document.getElementById('user-input');
4
  const sendButton = document.getElementById('send-button');
5
  const avatar = document.getElementById('avatar');
6
  const statusContainer = document.getElementById('status-container');
7
-
 
 
 
 
 
 
 
 
 
8
  // Emotion bars
9
  const joyBar = document.getElementById('joy-bar');
10
  const sadnessBar = document.getElementById('sadness-bar');
11
  const angerBar = document.getElementById('anger-bar');
12
  const fearBar = document.getElementById('fear-bar');
13
  const curiosityBar = document.getElementById('curiosity-bar');
14
-
15
  // Check server health on load
16
  checkServerHealth();
17
-
18
  // Start checking initialization status
19
  checkInitializationStatus();
20
-
21
  // Auto-resize textarea as user types
22
- userInput.addEventListener('input', function() {
23
- this.style.height = 'auto';
24
- this.style.height = (this.scrollHeight) + 'px';
25
-
26
- // Reset height if empty
27
- if (this.value.length === 0) {
28
- this.style.height = '';
29
- }
30
- });
31
-
32
- // Send message when Enter key is pressed (without Shift)
33
- userInput.addEventListener('keydown', function(e) {
34
- if (e.key === 'Enter' && !e.shiftKey) {
35
- e.preventDefault();
36
- sendMessage();
37
- }
38
- });
39
-
 
 
 
40
  // Add keyboard shortcut for sending messages
41
  document.addEventListener('keydown', function(e) {
42
  // Command+Enter or Ctrl+Enter to send
43
  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
44
  e.preventDefault();
 
45
  sendMessage();
46
  }
47
  });
48
-
49
- sendButton.addEventListener('click', sendMessage);
 
 
 
 
 
 
 
50
 
51
  function checkServerHealth() {
52
  fetch('/health')
@@ -79,20 +101,33 @@ document.addEventListener('DOMContentLoaded', function() {
79
  }
80
 
81
  function sendMessage() {
 
 
 
 
 
 
 
82
  const message = userInput.value.trim();
83
- if (message.length === 0) return;
84
-
 
 
 
 
 
85
  // Add user message to chat
86
  addMessage(message, 'user');
87
-
88
  // Clear input
89
  userInput.value = '';
90
  userInput.style.height = '';
91
-
92
  // Show typing indicator
93
  addTypingIndicator();
94
-
95
  // Send to backend
 
96
  fetch('/api/chat', {
97
  method: 'POST',
98
  headers: {
 
1
  document.addEventListener('DOMContentLoaded', function() {
2
+ console.log('DOM Content Loaded');
3
+
4
  const chatMessages = document.getElementById('chat-messages');
5
  const userInput = document.getElementById('user-input');
6
  const sendButton = document.getElementById('send-button');
7
  const avatar = document.getElementById('avatar');
8
  const statusContainer = document.getElementById('status-container');
9
+
10
+ // Debug: Log if elements are found
11
+ console.log('Elements found:', {
12
+ chatMessages: !!chatMessages,
13
+ userInput: !!userInput,
14
+ sendButton: !!sendButton,
15
+ avatar: !!avatar,
16
+ statusContainer: !!statusContainer
17
+ });
18
+
19
  // Emotion bars
20
  const joyBar = document.getElementById('joy-bar');
21
  const sadnessBar = document.getElementById('sadness-bar');
22
  const angerBar = document.getElementById('anger-bar');
23
  const fearBar = document.getElementById('fear-bar');
24
  const curiosityBar = document.getElementById('curiosity-bar');
25
+
26
  // Check server health on load
27
  checkServerHealth();
28
+
29
  // Start checking initialization status
30
  checkInitializationStatus();
31
+
32
  // Auto-resize textarea as user types
33
+ if (userInput) {
34
+ userInput.addEventListener('input', function() {
35
+ this.style.height = 'auto';
36
+ this.style.height = (this.scrollHeight) + 'px';
37
+
38
+ // Reset height if empty
39
+ if (this.value.length === 0) {
40
+ this.style.height = '';
41
+ }
42
+ });
43
+
44
+ // Send message when Enter key is pressed (without Shift)
45
+ userInput.addEventListener('keydown', function(e) {
46
+ if (e.key === 'Enter' && !e.shiftKey) {
47
+ e.preventDefault();
48
+ console.log('Enter key pressed, sending message');
49
+ sendMessage();
50
+ }
51
+ });
52
+ }
53
+
54
  // Add keyboard shortcut for sending messages
55
  document.addEventListener('keydown', function(e) {
56
  // Command+Enter or Ctrl+Enter to send
57
  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
58
  e.preventDefault();
59
+ console.log('Cmd/Ctrl+Enter pressed, sending message');
60
  sendMessage();
61
  }
62
  });
63
+
64
+ if (sendButton) {
65
+ sendButton.addEventListener('click', function() {
66
+ console.log('Send button clicked');
67
+ sendMessage();
68
+ });
69
+ } else {
70
+ console.error('Send button not found!');
71
+ }
72
 
73
  function checkServerHealth() {
74
  fetch('/health')
 
101
  }
102
 
103
  function sendMessage() {
104
+ console.log('sendMessage called');
105
+
106
+ if (!userInput) {
107
+ console.error('userInput element not found');
108
+ return;
109
+ }
110
+
111
  const message = userInput.value.trim();
112
+ console.log('Message to send:', message);
113
+
114
+ if (message.length === 0) {
115
+ console.log('Empty message, not sending');
116
+ return;
117
+ }
118
+
119
  // Add user message to chat
120
  addMessage(message, 'user');
121
+
122
  // Clear input
123
  userInput.value = '';
124
  userInput.style.height = '';
125
+
126
  // Show typing indicator
127
  addTypingIndicator();
128
+
129
  // Send to backend
130
+ console.log('Sending to backend...');
131
  fetch('/api/chat', {
132
  method: 'POST',
133
  headers: {