AI Search Bar

export default function AiSearchBarExample() {
  const handleSubmit = (value: string, options: { 
    selectedTools: number[], 
    thinkMode: boolean, 
    selectedModel: number 
  }) => {
    console.log('Submitted:', value)
    console.log('Selected tools:', options.selectedTools)
    console.log('Think mode:', options.thinkMode)
    console.log('Selected model:', options.selectedModel)
  }

  const handleChange = (value: string) => {
    console.log('Input changed:', value)
  }

  const handleToolsChange = (tools: number[]) => {
    console.log('Tools changed:', tools)
  }

  const handleThinkModeChange = (enabled: boolean) => {
    console.log('Think mode:', enabled)
  }

  const handleModelChange = (modelIndex: number) => {
    console.log('Model changed:', modelIndex)
  }

  const handleStop = () => {
    console.log('Operation stopped')
  }

  return (
    <AiSearchBar
      placeholder="Ask me anything about AI, coding, or design..."
      variant="default"
      onSubmit={handleSubmit}
      onChange={handleChange}
      onToolsChange={handleToolsChange}
      onThinkModeChange={handleThinkModeChange}
      onModelChange={handleModelChange}
      onStop={handleStop}
      className="w-full max-w-2xl"
    />
  )
}

type AI_SearchBarProps = {
  variant?: "default" | "ghost" | "outline"
  placeholder?: string
  onSubmit?: (value: string, options: { selectedTools: number[], thinkMode: boolean, selectedModel: number }) => void
  onChange?: (value: string) => void
  onToolsChange?: (selectedTools: number[]) => void
  onThinkModeChange?: (isEnabled: boolean) => void
  onModelChange?: (modelIndex: number) => void
  className?: string
  submitLoading?: boolean
  submitLoaderComponent?: React.ReactNode
  onStop?: () => void
  isStopped?: boolean
  onStoppedChange?: (stopped: boolean) => void
}