feat: add QwkSearch API tools and markdown to HTML conversion utility

- Introduced specialized tools for interacting with the QwkSearch API, including web search, content extraction, AI response generation, and page rendering with JavaScript execution.
- Added a new module for converting Markdown to HTML with syntax highlighting using Highlight.js.
- Implemented shared types for few-shot prompt examples in the MetaSearchAgent.

Author: vtempest

apps/qwksearch-web/app/api/agent/voice/route.ts

@@ -1,32 +1,25 @@
 /**
  * @fileoverview Text-to-speech endpoint. POST converts text to audio using
- * Cloudflare Workers AI Deepgram Aura voices. Supports multiple speakers
- * and enforces per-user daily rate limits (10/day for guests).
+ * Kokoro (default, faster & more natural) or Deepgram Aura.
+ * Enforces per-user daily rate limits (10/day for guests).
  */
 import { NextRequest, NextResponse } from "next/server";
-import { getCloudflareContext } from "@/lib/cloudflare-context";
 import { getUserId } from "@/lib/auth/session";
 import { checkTTSRateLimit } from "@/lib/rate-limit/guestRateLimiter";
+import { generateSpeech, type TTSProvider } from "@/lib/speech";
 
 export const runtime = "nodejs";
 
-const AURA_SPEAKERS = [
-  "angus", "asteria", "arcas", "orion", "orpheus", "athena",
-  "luna", "zeus", "perseus", "helios", "hera", "stella",
-] as const;
-
-type AuraSpeaker = (typeof AURA_SPEAKERS)[number];
-
 export async function POST(request: NextRequest) {
   let text: string;
-  let speaker: AuraSpeaker;
+  let voice: string;
+  let provider: TTSProvider;
+
   try {
     const body = await request.json();
     text = body.text;
-    const requested = body.speaker as string | undefined;
-    speaker = AURA_SPEAKERS.includes(requested as AuraSpeaker)
-      ? (requested as AuraSpeaker)
-      : "angus";
+    voice = body.voice || body.speaker || "af_heart";
+    provider = body.provider || "kokoro";
   } catch {
     return NextResponse.json(
       { error: "Invalid request body" },
@@ -54,31 +47,36 @@ export async function POST(request: NextRequest) {
     );
   }
 
-  let ai: any;
   try {
-    const ctx = getCloudflareContext();
-    ai = (ctx.env as any)?.AI;
-  } catch {
-    // CF bindings not available (local dev)
-  }
+    const result = await generateSpeech({
+      text: text.slice(0, 5000),
+      provider,
+      voice,
+    });
+
+    return new Response(result.audio, {
+      headers: {
+        "Content-Type": result.contentType,
+        "Cache-Control": "public, max-age=86400",
+        "Content-Disposition": `inline; filename="speech.${result.contentType.includes('wav') ? 'wav' : 'mp3'}"`,
+      },
+    });
+  } catch (error) {
+    console.error("[TTS] Error:", error);
+
+    // Handle specific errors
+    const message = error instanceof Error ? error.message : "TTS generation failed";
+
+    if (message.includes("Cloudflare AI binding")) {
+      return NextResponse.json(
+        { error: "Deepgram provider requires Cloudflare AI binding. Use 'kokoro' provider instead." },
+        { status: 503 }
+      );
+    }
 
-  if (!ai) {
     return NextResponse.json(
-      { error: "Cloudflare AI binding not available" },
-      { status: 503 }
+      { error: message },
+      { status: 500 }
     );
   }
-
-  const result = await ai.run("@cf/deepgram/aura-1", {
-    text: text.slice(0, 5000),
-    speaker,
-    encoding: "mp3",
-  });
-
-  return new Response(result, {
-    headers: {
-      "Content-Type": "audio/mpeg",
-      "Cache-Control": "no-store",
-    },
-  });
 }

apps/qwksearch-web/components/Settings/Sections/Models/ModelProvider.tsx

@@ -9,6 +9,7 @@ import AddModel from './AddModelDialog';
 import UpdateProvider from './UpdateProviderDialog';
 import DeleteProvider from './DeleteProviderDialog';
 import TestModelsButton from './TestModelsButton';
+import ProviderIcon from './ProviderIcon';
 
 const ModelProvider = ({
   modelProvider,
@@ -69,9 +70,7 @@ const ModelProvider = ({
     >
       <div className="px-5 py-3.5 flex flex-row justify-between w-full items-center border-b border-light-200 dark:border-dark-200 bg-light-secondary/30 dark:bg-dark-secondary/30">
         <div className="flex items-center gap-2.5">
-          <div className="p-1.5 rounded-md bg-sky-500/10 dark:bg-sky-500/10">
-            <Plug2 size={14} className="text-sky-500" />
-          </div>
+          <ProviderIcon providerType={modelProvider.type} size={20} />
           <div className="flex flex-col">
             <p className="text-sm lg:text-sm text-black dark:text-white font-medium">
               {modelProvider.name}

apps/qwksearch-web/components/Settings/Sections/Models/ProviderIcon.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react';
+import { cropProviderAsDataURL, Provider } from 'agent-toolkit';
+import { Plug2 } from 'lucide-react';
+
+interface ProviderIconProps {
+  providerType: string;
+  size?: number;
+  className?: string;
+}
+
+const ProviderIcon = ({
+  providerType,
+  size = 14,
+  className = '',
+}: ProviderIconProps) => {
+  const [iconUrl, setIconUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    const loadProviderIcon = async () => {
+      try {
+        setIsLoading(true);
+        setHasError(false);
+
+        const img = new Image();
+        img.src = '/images/providers-sprite.png';
+        await img.decode();
+
+        const normalizedProvider = providerType.toLowerCase() as Provider;
+        const dataUrl = await cropProviderAsDataURL(img, normalizedProvider);
+        setIconUrl(dataUrl);
+      } catch (error) {
+        console.error('Failed to load provider icon:', error);
+        setHasError(true);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadProviderIcon();
+  }, [providerType]);
+
+  if (isLoading || hasError || !iconUrl) {
+    return (
+      <div className={`p-1.5 rounded-md bg-sky-500/10 dark:bg-sky-500/10 ${className}`}>
+        <Plug2 size={size} className="text-sky-500" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`p-1.5 rounded-md bg-white/50 dark:bg-white/10 ${className}`}>
+      <img
+        src={iconUrl}
+        alt={`${providerType} logo`}
+        width={size}
+        height={size}
+        className="object-contain"
+      />
+    </div>
+  );
+};
+
+export default ProviderIcon;