Hugging Face's logo

Spaces:
j1225d
/
nutribot-chat-server
Running

App Files Community
nutribot-chat-server
File size: 5,177 Bytes 
3f46192
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
// Frontend functionality for NutriBot chat interface
document.addEventListener('DOMContentLoaded', function() {
    const messageInput = document.getElementById('messageInput');
    const sendButton = document.getElementById('sendButton');
    const clearButton = document.getElementById('clearButton');
    const chatContainer = document.getElementById('chatContainer');
    const loadingIndicator = document.getElementById('loadingIndicator');
    
    let conversationHistory = [];
    
    // Function to add message to chat
    function addMessage(role, content) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message mb-4 ${role === 'user' ? 'text-right' : 'text-left'}`;
        
        const messageContent = document.createElement('div');
        messageContent.className = `inline-block max-w-xs md:max-w-md px-4 py-2 rounded-lg ${
            role === 'user' 
                ? 'bg-green-600 text-white' 
                : 'bg-gray-200 text-gray-800'
        }`;
        messageContent.textContent = content;
        
        messageDiv.appendChild(messageContent);
        chatContainer.appendChild(messageDiv);
        
        // Scroll to bottom
        chatContainer.scrollTop = chatContainer.scrollHeight;
        
        // Reinitialize feather icons
        feather.replace();
    }
    
    // Function to show typing indicator
    function showTypingIndicator() {
        const typingDiv = document.createElement('div');
        typingDiv.className = 'message mb-4 text-left';
        typingDiv.id = 'typingIndicator';
        
        const typingContent = document.createElement('div');
        typingContent.className = 'inline-block px-4 py-2 rounded-lg bg-gray-200';
        typingContent.innerHTML = `
            <div class="typing-indicator">
                <span></span>
                <span></span>
                <span></span>
            </div>
        `;
        
        typingDiv.appendChild(typingContent);
        chatContainer.appendChild(typingDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
    
    // Function to hide typing indicator
    function hideTypingIndicator() {
        const typingIndicator = document.getElementById('typingIndicator');
        if (typingIndicator) {
            typingIndicator.remove();
        }
    }
    
    // Function to send message to backend
    async function sendMessage() {
        const message = messageInput.value.trim();
        if (!message) return;
        
        // Clear initial welcome message if it exists
        if (conversationHistory.length === 0) {
            chatContainer.innerHTML = '';
        }
        
        // Add user message to chat
        addMessage('user', message);
        messageInput.value = '';
        
        // Add to conversation history
        conversationHistory.push({ role: 'user', content: message });
        
        // Show loading and typing indicators
        loadingIndicator.classList.remove('hidden');
        showTypingIndicator();
        
        try {
            const response = await fetch('http://localhost:8000/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: message,
                    user_id: 'default_user'
                })
            });
            
            if (!response.ok) {
                throw new Error('Failed to get response from server');
            }
            
            const data = await response.json();
            const assistantMessage = data.response;
            
            // Hide typing indicator and loading
            hideTypingIndicator();
            loadingIndicator.classList.add('hidden');
            
            // Add assistant response to chat
            addMessage('assistant', assistantMessage);
            
            // Add to conversation history
            conversationHistory.push({ role: 'assistant', content: assistantMessage });
            
        } catch (error) {
            console.error('Error:', error);
            hideTypingIndicator();
            loadingIndicator.classList.add('hidden');
            addMessage('assistant', 'Sorry, I encountered an error. Please try again.');
        }
    }
    
    // Function to clear conversation
    function clearConversation() {
        conversationHistory = [];
        chatContainer.innerHTML = `
            <div class="text-center text-gray-500 py-8">
                <i data-feather="message-circle" class="mx-auto mb-2"></i>
                <p>Start a conversation with NutriBot below!</p>
            </div>
        `;
        feather.replace();
    }
    
    // Event listeners
    sendButton.addEventListener('click', sendMessage);
    
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });
    
    clearButton.addEventListener('click', clearConversation);
    
    // Focus on input field
    messageInput.focus();
});