Skip to content

Commit 14f3861

Browse files
committed
fix chatbot interface
1 parent 57cf3e2 commit 14f3861

File tree

1 file changed

+34
-51
lines changed
  • mongodb-rag-docs/src/components/ChatbotInterface

1 file changed

+34
-51
lines changed

mongodb-rag-docs/src/components/ChatbotInterface/index.js

Lines changed: 34 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import remarkGfm from 'remark-gfm';
77
import 'highlight.js/styles/github.css';
88
import './ChatbotInterface.css'; // Using regular CSS instead of CSS modules for easier integration
99

10-
// Import the SampleQuestions component
11-
const SampleQuestions = () => {
10+
// Sample Questions component as a proper React component
11+
const SampleQuestions = ({ onSelectQuestion }) => {
1212
const [visible, setVisible] = useState(true);
1313

1414
// Sample questions that will appear as clickable buttons
@@ -21,44 +21,12 @@ const SampleQuestions = () => {
2121

2222
// Function to handle clicking a question
2323
const handleQuestionClick = (question) => {
24-
// Get access to the parent component's setInput function
25-
const setInputFunction = window.chatbotSetInput;
26-
27-
if (typeof setInputFunction === 'function') {
28-
// Update React state directly
29-
setInputFunction(question);
30-
31-
// Hide suggestions
32-
setVisible(false);
33-
34-
// Focus the input field
35-
const inputField = document.querySelector('.chat-input');
36-
if (inputField) {
37-
inputField.focus();
38-
}
39-
}
24+
// Call the callback with the selected question
25+
onSelectQuestion(question);
26+
// Hide suggestions
27+
setVisible(false);
4028
};
4129

42-
useEffect(() => {
43-
const inputField = document.querySelector('.chat-input');
44-
45-
if (!inputField) return;
46-
47-
const handleInput = () => {
48-
if (inputField.value.length > 0) {
49-
setVisible(false);
50-
} else {
51-
setVisible(true);
52-
}
53-
};
54-
55-
inputField.addEventListener('input', handleInput);
56-
57-
return () => {
58-
inputField.removeEventListener('input', handleInput);
59-
};
60-
}, []);
61-
6230
if (!visible) return null;
6331

6432
return (
@@ -89,18 +57,9 @@ export default function ChatbotInterface() {
8957
const [input, setInput] = useState('');
9058
const [isLoading, setIsLoading] = useState(false);
9159
const [sessionId, setSessionId] = useState(null);
60+
const [showSampleQuestions, setShowSampleQuestions] = useState(true);
9261
const messagesEndRef = useRef(null);
9362
const inputRef = useRef(null);
94-
95-
// Make setInput available globally so the SampleQuestions component can access it
96-
useEffect(() => {
97-
window.chatbotSetInput = setInput;
98-
99-
// Clean up when component unmounts
100-
return () => {
101-
window.chatbotSetInput = undefined;
102-
};
103-
}, []);
10463

10564
// Auto-scroll to bottom when messages update
10665
useEffect(() => {
@@ -139,6 +98,23 @@ export default function ChatbotInterface() {
13998
}
14099
}, [sessionId, messages]);
141100

101+
// Handle input changes and control sample questions visibility
102+
const handleInputChange = (e) => {
103+
const value = e.target.value;
104+
setInput(value);
105+
106+
// Show sample questions only when input is empty
107+
setShowSampleQuestions(value.length === 0);
108+
};
109+
110+
// Handle selection of a sample question
111+
const handleSelectQuestion = (question) => {
112+
setInput(question);
113+
setShowSampleQuestions(false);
114+
// Focus the input field
115+
inputRef.current?.focus();
116+
};
117+
142118
const handleSubmit = async (e) => {
143119
e.preventDefault();
144120
if (!input.trim()) return;
@@ -148,6 +124,7 @@ export default function ChatbotInterface() {
148124
setMessages((msgs) => [...msgs, userMessage]);
149125
setInput('');
150126
setIsLoading(true);
127+
setShowSampleQuestions(true); // Show sample questions after sending
151128

152129
try {
153130
// Call API with session support
@@ -206,6 +183,10 @@ export default function ChatbotInterface() {
206183
// Clear localStorage
207184
localStorage.removeItem('mongodbRagChatSession');
208185

186+
// Clear input and show sample questions
187+
setInput('');
188+
setShowSampleQuestions(true);
189+
209190
// Focus the input field
210191
inputRef.current?.focus();
211192
};
@@ -276,15 +257,17 @@ export default function ChatbotInterface() {
276257
Clear Chat
277258
</button>
278259

279-
{/* Add the sample questions component here */}
280-
<SampleQuestions />
260+
{/* Show sample questions only when the flag is true */}
261+
{showSampleQuestions && (
262+
<SampleQuestions onSelectQuestion={handleSelectQuestion} />
263+
)}
281264

282265
<form onSubmit={handleSubmit} className="input-form">
283266
<input
284267
ref={inputRef}
285268
type="text"
286269
value={input}
287-
onChange={(e) => setInput(e.target.value)}
270+
onChange={handleInputChange}
288271
placeholder="Ask about MongoDB-RAG..."
289272
className="chat-input"
290273
disabled={isLoading}

0 commit comments

Comments
 (0)