Added Serper.dev API as an alternative web search provider (#302)

.env

@@ -8,7 +8,8 @@ MONGODB_DIRECT_CONNECTION=false
 COOKIE_NAME=hf-chat
 HF_ACCESS_TOKEN=#hf_<token> from from https://huggingface.co/settings/token
 
-# used to activate search with web functionality. disabled if not defined
+# used to activate search with web functionality. disabled if none are defined. choose one of the following:
+SERPER_API_KEY=#your serper.dev api key here
 SERPAPI_KEY=#your serpapi key here
 
 # Parameters to enable "Sign in with HF"

src/lib/server/websearch/searchWeb.ts

@@ -1,10 +1,53 @@
-import { SERPAPI_KEY } from "$env/static/private";
+import { SERPAPI_KEY, SERPER_API_KEY } from "$env/static/private";
 
 import { getJson } from "serpapi";
 import type { GoogleParameters } from "serpapi";
 
 // Show result as JSON
 export async function searchWeb(query: string) {
+	if (SERPER_API_KEY) {
+		return await searchWebSerper(query);
+	}
+	if (SERPAPI_KEY) {
+		return await searchWebSerpApi(query);
+	}
+	throw new Error("No Serper.dev or SerpAPI key found");
+}
+
+export async function searchWebSerper(query: string) {
+	const params = {
+		q: query,
+		hl: "en",
+		gl: "us",
+	};
+
+	const response = await fetch("https://google.serper.dev/search", {
+		method: "POST",
+		body: JSON.stringify(params),
+		headers: {
+			"x-api-key": SERPER_API_KEY,
+			"Content-type": "application/json; charset=UTF-8",
+		},
+	});
+
+	/* eslint-disable @typescript-eslint/no-explicit-any */
+	const data = (await response.json()) as Record<string, any>;
+
+	if (!response.ok) {
+		throw new Error(
+			data["message"] ??
+				`Serper API returned error code ${response.status} - ${response.statusText}`
+		);
+	}
+
+	return {
+		organic_results: data["organic"] ?? [],
+		knowledge_graph: data["knowledgeGraph"] ?? null,
+		answer_box: data["answerBox"] ?? null,
+	};
+}
+
+export async function searchWebSerpApi(query: string) {
 	const params = {
 		q: query,
 		hl: "en",

src/lib/types/WebSearch.ts

@@ -12,6 +12,7 @@ export interface WebSearch extends Timestamps {
 	searchQuery: string;
 	results: string[];
 	knowledgeGraph: string;
+	answerBox: string;
 	summary: string;
 
 	messages: WebSearchMessage[];

src/routes/+layout.server.ts

@@ -6,7 +6,7 @@ import { UrlDependency } from "$lib/types/UrlDependency";
 import { defaultModel, models, oldModels, validateModel } from "$lib/server/models";
 import { authCondition, requiresUser } from "$lib/server/auth";
 import { DEFAULT_SETTINGS } from "$lib/types/Settings";
-import { SERPAPI_KEY } from "$env/static/private";
+import { SERPAPI_KEY, SERPER_API_KEY } from "$env/static/private";
 
 export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 	const { conversations } = collections;
@@ -61,7 +61,7 @@ export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 				DEFAULT_SETTINGS.shareConversationsWithModelAuthors,
 			ethicsModalAcceptedAt: settings?.ethicsModalAcceptedAt ?? null,
 			activeModel: settings?.activeModel ?? DEFAULT_SETTINGS.activeModel,
-			searchEnabled: !!SERPAPI_KEY,
+			searchEnabled: !!(SERPAPI_KEY || SERPER_API_KEY),
 		},
 		models: models.map((model) => ({
 			id: model.id,

src/routes/conversation/[id]/web-search/+server.ts

@@ -50,6 +50,7 @@ export async function GET({ params, locals, url }) {
 				prompt: prompt,
 				searchQuery: "",
 				knowledgeGraph: "",
+				answerBox: "",
 				results: [],
 				summary: "",
 				messages: [],
@@ -79,7 +80,12 @@ export async function GET({ params, locals, url }) {
 						results.organic_results.map((el: { link: string }) => el.link)) ??
 					[];
 
-				if (results.knowledge_graph) {
+				if (results.answer_box) {
+					// if google returns an answer box, we use it
+					webSearch.answerBox = JSON.stringify(removeLinks(results.answer_box));
+					text = webSearch.answerBox;
+					appendUpdate("Found a Google answer box");
+				} else if (results.knowledge_graph) {
 					// if google returns a knowledge graph, we use it
 					webSearch.knowledgeGraph = JSON.stringify(removeLinks(results.knowledge_graph));
 					text = webSearch.knowledgeGraph;