Enterprise Voice Search Component

Multi-framework DB Connectors

app.get('/api/search', async (req, res) => {
    const query = req.query.q ? req.query.q.trim() : '';
    if (!query) return res.json([]);

    try {
        const [results] = await db.query(
            "SELECT id, title, slug, category FROM site_pages WHERE status = 'Published' AND (title LIKE ? OR content LIKE ?)",
            [`%${query}%`, `%${query}%`]
        );
        res.json(results);
    } catch (err) {
        res.status(500).json({ error: "Search query failed" });
    }
});

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\SitePage;

class SearchController extends Controller {
    public function queryVoice(Request $request) {
        $q = $request->input('q', '');
        return response()->json(
            SitePage::where('status', 'Published')
                ->where(function($query) use ($q) {
                    $query->where('title', 'like', "%{$q}%")
                          ->orWhere('content', 'like', "%{$q}%");
                })->take(10)->get()
        );
    }
}

Next.js App Router Component (TypeScript)

'use client';
import React, { useState, useEffect } from 'react';

interface VoiceConfig {
  language: string;
  autoSearch: boolean;
}

export default function VoiceSearch({ config }: { config: VoiceConfig }) {
  const [query, setQuery] = useState('');
  const [isListening, setIsListening] = useState(false);

  const handleSpeech = () => {
    const Speech = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!Speech) return alert('Speech API not supported');

    const recognition = new Speech();
    recognition.lang = config.language;
    recognition.onstart = () => setIsListening(true);
    recognition.onresult = (e: any) => {
      const transcript = e.results[0][0].transcript;
      setQuery(transcript);
    };
    recognition.onend = () => setIsListening(false);
    recognition.start();
  };

  return (
    <div className="flex items-center bg-gray-900 border border-gray-800 px-4 py-2 rounded-full">
      <input value={query} onChange={(e) => setQuery(e.target.value)} className="bg-transparent outline-none flex-1 text-white" />
      <button onClick={handleSpeech} className={`p-2 rounded-full ${isListening ? 'bg-red-500' : 'bg-blue-600'}`}>🎙️</button>
    </div>
  );
}

Connected Entity Schema Graph Mapping

We declare connected structured JSON-LD schemas linking Parent Organization -> Divisions -> Services. Copy the schema mapping template below:

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://services.chandrai.com/#organization",
      "name": "CHANDRAI Services",
      "url": "https://services.chandrai.com",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "Chandrai Office HQ, Rekha Nagar, Kalyanpur, Bibhutipur",
        "addressLocality": "Samastipur",
        "addressRegion": "Bihar",
        "postalCode": "848160",
        "addressCountry": "IN"
      }
    },
    {
      "@type": "Corporation",
      "@id": "https://services.chandrai.com/brands/wts-techx/#brand",
      "name": "WTS TechX",
      "parentOrganization": {
        "@id": "https://services.chandrai.com/#organization"
      }
    },
    {
      "@type": "EducationalOrganization",
      "@id": "https://services.chandrai.com/brands/edus-vision/#brand",
      "name": "Edus Vision",
      "parentOrganization": {
        "@id": "https://services.chandrai.com/#organization"
      }
    }
  ]
}

Speech Dictionary Logs Index (300+ Mapped Phrases)

Admin Portal SQLite Architecture

Track leads and speech queries using standard SQL schema tables:

CREATE TABLE voice_query_logs (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    query_text VARCHAR(255) NOT NULL,
    confidence_score FLOAT,
    recognized_locale VARCHAR(10),
    classified_intent VARCHAR(30),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);