1  import React, { useState, useEffect } from 'react';
 2  import { Search } from 'lucide-react';
 3  import clsx from 'clsx';
 4  import styles from './styles.module.css';
 5  
 6  export interface SearchBoxProps {
 7    /**
 8     * Placeholder text for the button
 9     */
10    placeholder?: string;
11    /**
12     * Additional CSS classes
13     */
14    className?: string;
15  }
16  
17  export default function SearchBox({
18    placeholder = 'What do you want to learn?',
19    className,
20  }: SearchBoxProps): JSX.Element {
21    const openRunLLM = () => {
22      // Open RunLLM widget when user clicks the input
23      if (typeof window !== 'undefined' && (window as any).runllm) {
24        (window as any).runllm.open();
25      }
26    };
27  
28    return (
29      <div className={clsx(styles.searchContainer, className)}>
30        <div className={styles.searchWrapper}>
31          <input type="text" className={styles.searchInput} placeholder={placeholder} onClick={openRunLLM} readOnly />
32          <button type="button" className={styles.searchButton} onClick={openRunLLM}>
33            <Search size={20} />
34          </button>
35        </div>
36      </div>
37    );
38  }