@@ -7,8 +7,8 @@ import remarkGfm from 'remark-gfm';
77import 'highlight.js/styles/github.css' ;
88import './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