AI Search Plugin

# Add AI binding for embeddings
[ai]
binding = "AI"

# Add Vectorize index for vector search
[[vectorize]]
binding = "VECTORIZE_INDEX"
index_name = "sonicjs-content"

# Create a new Vectorize index
npx wrangler vectorize create sonicjs-content --dimensions=768 --metric=cosine

interface AISearchSettings {
  enabled: boolean              // Enable/disable search functionality
  ai_mode_enabled: boolean      // Enable semantic AI search
  selected_collections: string[] // Collection IDs to index
  dismissed_collections: string[] // Collections user chose not to index
  autocomplete_enabled: boolean // Enable search suggestions
  cache_duration: number        // Cache duration in hours
  results_limit: number         // Max results per query (default: 20)
  index_media: boolean          // Index media file metadata
}

interface SearchFilters {
  collections?: string[]       // Filter by collection IDs
  dateRange?: {
    start: Date               // Start date
    end: Date                 // End date
    field?: 'created_at' | 'updated_at'
  }
  status?: string[]           // Filter by status (draft, published, etc.)
  tags?: string[]             // Filter by tags
  author?: string             // Filter by author ID
  custom?: Record<string, any> // Custom metadata filters
}

// Automatic fallback in the service
if (query.mode === 'ai' && settings.ai_mode_enabled && this.customRAG?.isAvailable()) {
  return this.searchAI(query, settings)
}
// Fallback to keyword search
return this.searchKeyword(query, settings)

interface CollectionInfo {
  id: string              // Collection ID
  name: string            // Internal name
  display_name: string    // Human-readable name
  description?: string    // Collection description
  item_count?: number     // Number of items
  is_indexed: boolean     // Currently indexed
  is_dismissed: boolean   // User dismissed
  is_new?: boolean        // Awaiting decision
}

// Detect collections not yet indexed or dismissed
const notifications = await aiSearchService.detectNewCollections()

// Returns array of new collection notifications
// [{
//   collection: { id: '5', name: 'faqs', ... },
//   message: 'New collection "FAQs" with 25 items available for indexing'
// }]

<form id="searchForm">
  <input
    type="text"
    name="query"
    placeholder="Search..."
    autocomplete="off"
  />
  <select name="mode">
    <option value="ai">AI Search</option>
    <option value="keyword">Keyword</option>
  </select>
  <button type="submit">Search</button>
</form>

<div id="results"></div>

<script>
document.getElementById('searchForm').addEventListener('submit', async (e) => {
  e.preventDefault()
  const formData = new FormData(e.target)

  const response = await fetch('/api/search', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: formData.get('query'),
      mode: formData.get('mode')
    })
  })

  const { data } = await response.json()

  document.getElementById('results').innerHTML = data.results
    .map(r => `
      <div class="result">
        <h3><a href="/content/${r.slug}">${r.title}</a></h3>
        <p>${r.snippet}</p>
        <small>${r.collection_name} - ${r.relevance_score?.toFixed(2) || 'N/A'}</small>
      </div>
    `)
    .join('')
})
</script>

const searchInput = document.getElementById('searchInput')
const suggestionsDiv = document.getElementById('suggestions')

let debounceTimer

searchInput.addEventListener('input', async (e) => {
  clearTimeout(debounceTimer)

  const query = e.target.value
  if (query.length < 2) {
    suggestionsDiv.innerHTML = ''
    return
  }

  debounceTimer = setTimeout(async () => {
    const response = await fetch(`/api/search/suggest?q=${encodeURIComponent(query)}`)
    const { data } = await response.json()

    suggestionsDiv.innerHTML = data
      .map(s => `<div class="suggestion" data-value="${s}">${s}</div>`)
      .join('')
  }, 300)
})

suggestionsDiv.addEventListener('click', (e) => {
  if (e.target.classList.contains('suggestion')) {
    searchInput.value = e.target.dataset.value
    suggestionsDiv.innerHTML = ''
    // Trigger search
  }
})

import { useState, useCallback } from 'react'

interface SearchResult {
  id: string
  title: string
  slug: string
  snippet?: string
  relevance_score?: number
}

export function useAISearch() {
  const [results, setResults] = useState<SearchResult[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const search = useCallback(async (query: string, mode: 'ai' | 'keyword' = 'ai') => {
    setLoading(true)
    setError(null)

    try {
      const response = await fetch('/api/search', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query, mode })
      })

      const { data, success, error } = await response.json()

      if (!success) throw new Error(error)

      setResults(data.results)
      return data
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Search failed')
      return null
    } finally {
      setLoading(false)
    }
  }, [])

  return { results, loading, error, search }
}

// Fetch analytics data
const analytics = await aiSearchService.getSearchAnalytics()

// Use for dashboard
console.log(`Total searches: ${analytics.total_queries}`)
console.log(`AI usage: ${(analytics.ai_queries / analytics.total_queries * 100).toFixed(1)}%`)

// Top searches
analytics.popular_queries.forEach(({ query, count }) => {
  console.log(`"${query}" - ${count} searches`)
})