Add initial support for web browsing (#237)

* basic poc for web search

* * Hide feature when serpapi_key is not defined
* handle error case where serpapi failed
* only use user queries for generating the query

* Update src/lib/buildPrompt.ts

Co-authored-by: Eliott C. <coyotte508@gmail.com>

* Update src/routes/+layout.server.ts

Co-authored-by: Eliott C. <coyotte508@gmail.com>

* refactored getQueryFromPrompt

* add jsdom to package.json

* begin work on fetching webpage content

* Update .env

Co-authored-by: Eliott C. <coyotte508@gmail.com>

* prettier fix

* Add feature for scraping webpages

* refactored search functionality
- now gets triggered from a separate endpoint
- results are stored in db
- results can be displayed in their own endpoint

* Added a stream to send updates from backend on web-search endpoint

* made stream more reliable

* Add front-end to web search feature

* made sure the web results button appears on newly posted messages

* close modal when message is done generating

* removed log statements

* Add button to open modal on loading messages too

* replace modal by collapsable menu

* make sure shared conversations also show search details

* Use spinner for collapse menu

* Fix alignment of "stop generating" button

* Fix loading indicators
- spinner only shows when web search is searching
- text loader shows after the web search is done

* fix loading icon when web search is disabled

* Update search messages & clean up summary string

* Fix alignment of timeline

* Use existing switch

* Add a background to tooltip & center it

* fix like making search messages disappear

* use correct spinner

* fix state issues

* lint

* fix bug with empty search messages

* fix like bug ?

* fix modal bug

* error handling

* fix like bug

* slice scraped text so it fits in context

* misc UI

* bottom buttons

simplify and fix

* made sure snap scrolling also works on web search updates

* loader

* margin

* remove unused function

* linter

* quickfix duplicate websearch

---------

Co-authored-by: Eliott C. <coyotte508@gmail.com>
Co-authored-by: Victor Mustar <victor.mustar@gmail.com>

.env

@@ -8,6 +8,9 @@ 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
+SERPAPI_KEY=#your serpapi key here
+
 # Parameters to enable "Sign in with HF"
 OPENID_CLIENT_ID=
 OPENID_CLIENT_SECRET=

package-lock.json

@@ -14,12 +14,14 @@
 				"date-fns": "^2.29.3",
 				"dotenv": "^16.0.3",
 				"highlight.js": "^11.7.0",
+				"jsdom": "^22.0.0",
 				"marked": "^4.3.0",
 				"mongodb": "^5.3.0",
 				"nanoid": "^4.0.2",
 				"openid-client": "^5.4.2",
 				"parquetjs": "^0.11.2",
 				"postcss": "^8.4.21",
+				"serpapi": "^1.1.1",
 				"tailwind-scrollbar": "^3.0.0",
 				"tailwindcss": "^3.3.1",
 				"zod": "^3.21.4"
@@ -30,6 +32,7 @@
 				"@sveltejs/adapter-node": "^1.2.4",
 				"@sveltejs/kit": "^1.15.10",
 				"@tailwindcss/typography": "^0.5.9",
+				"@types/jsdom": "^21.1.1",
 				"@types/marked": "^4.0.8",
 				"@types/parquetjs": "^0.10.3",
 				"@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -890,6 +893,14 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/@tootallnate/once": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+			"integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+			"engines": {
+				"node": ">= 10"
+			}
+		},
 		"node_modules/@types/chai": {
 			"version": "4.3.5",
 			"resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz",
@@ -917,6 +928,17 @@
 			"integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
 			"dev": true
 		},
+		"node_modules/@types/jsdom": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.1.tgz",
+			"integrity": "sha512-cZFuoVLtzKP3gmq9eNosUL1R50U+USkbLtUQ1bYVgl/lKp0FZM7Cq4aIHAL8oIvQ17uSHi7jXPtfDOdjPwBE7A==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*",
+				"@types/tough-cookie": "*",
+				"parse5": "^7.0.0"
+			}
+		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.11",
 			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -970,6 +992,12 @@
 			"integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
 			"dev": true
 		},
+		"node_modules/@types/tough-cookie": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.2.tgz",
+			"integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==",
+			"dev": true
+		},
 		"node_modules/@types/webidl-conversions": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -1268,6 +1296,11 @@
 				"url": "https://opencollective.com/vitest"
 			}
 		},
+		"node_modules/abab": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
+			"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
+		},
 		"node_modules/acorn": {
 			"version": "8.8.2",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -1298,6 +1331,17 @@
 				"node": ">=0.4.0"
 			}
 		},
+		"node_modules/agent-base": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+			"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+			"dependencies": {
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6.0.0"
+			}
+		},
 		"node_modules/ajv": {
 			"version": "6.12.6",
 			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1384,6 +1428,11 @@
 				"node": "*"
 			}
 		},
+		"node_modules/asynckit": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+		},
 		"node_modules/autoprefixer": {
 			"version": "10.4.14",
 			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -1548,7 +1597,6 @@
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
 			"integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
-			"dev": true,
 			"dependencies": {
 				"streamsearch": "^1.1.0"
 			},
@@ -1698,6 +1746,17 @@
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
 		},
+		"node_modules/combined-stream": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+			"dependencies": {
+				"delayed-stream": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/commander": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1770,6 +1829,53 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/cssstyle": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
+			"integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
+			"dependencies": {
+				"rrweb-cssom": "^0.6.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/data-urls": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
+			"integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
+			"dependencies": {
+				"abab": "^2.0.6",
+				"whatwg-mimetype": "^3.0.0",
+				"whatwg-url": "^12.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/data-urls/node_modules/tr46": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
+			"integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
+			"dependencies": {
+				"punycode": "^2.3.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/data-urls/node_modules/whatwg-url": {
+			"version": "12.0.1",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
+			"integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
+			"dependencies": {
+				"tr46": "^4.1.1",
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/date-fns": {
 			"version": "2.29.3",
 			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
@@ -1798,7 +1904,6 @@
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
 			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-			"dev": true,
 			"dependencies": {
 				"ms": "2.1.2"
 			},
@@ -1811,6 +1916,11 @@
 				}
 			}
 		},
+		"node_modules/decimal.js": {
+			"version": "10.4.3",
+			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+			"integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
+		},
 		"node_modules/deep-eql": {
 			"version": "4.1.3",
 			"resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
@@ -1838,6 +1948,14 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/delayed-stream": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/detect-indent": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
@@ -1887,6 +2005,17 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"node_modules/domexception": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
+			"integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+			"dependencies": {
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/dotenv": {
 			"version": "16.0.3",
 			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
@@ -1900,6 +2029,17 @@
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.359.tgz",
 			"integrity": "sha512-OoVcngKCIuNXtZnsYoqlCvr0Cf3NIPzDIgwUfI9bdTFjXCrr79lI0kwQstLPZ7WhCezLlGksZk/BFAzoXC7GDw=="
 		},
+		"node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
 		"node_modules/es6-promise": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
@@ -2366,6 +2506,19 @@
 			"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
 			"dev": true
 		},
+		"node_modules/form-data": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+			"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+			"dependencies": {
+				"asynckit": "^0.4.0",
+				"combined-stream": "^1.0.8",
+				"mime-types": "^2.1.12"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/fraction.js": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -2545,6 +2698,42 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/html-encoding-sniffer": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+			"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+			"dependencies": {
+				"whatwg-encoding": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/http-proxy-agent": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+			"integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+			"dependencies": {
+				"@tootallnate/once": "2",
+				"agent-base": "6",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/https-proxy-agent": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+			"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+			"dependencies": {
+				"agent-base": "6",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/human-signals": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -2554,6 +2743,17 @@
 				"node": ">=10.17.0"
 			}
 		},
+		"node_modules/iconv-lite": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/ignore": {
 			"version": "5.2.4",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2691,6 +2891,11 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/is-potential-custom-element-name": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+			"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
+		},
 		"node_modules/is-reference": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
@@ -2765,6 +2970,70 @@
 				"js-yaml": "bin/js-yaml.js"
 			}
 		},
+		"node_modules/jsdom": {
+			"version": "22.0.0",
+			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.0.0.tgz",
+			"integrity": "sha512-p5ZTEb5h+O+iU02t0GfEjAnkdYPrQSkfuTSMkMYyIoMvUNEHsbG0bHHbfXIcfTqD2UfvjQX7mmgiFsyRwGscVw==",
+			"dependencies": {
+				"abab": "^2.0.6",
+				"cssstyle": "^3.0.0",
+				"data-urls": "^4.0.0",
+				"decimal.js": "^10.4.3",
+				"domexception": "^4.0.0",
+				"form-data": "^4.0.0",
+				"html-encoding-sniffer": "^3.0.0",
+				"http-proxy-agent": "^5.0.0",
+				"https-proxy-agent": "^5.0.1",
+				"is-potential-custom-element-name": "^1.0.1",
+				"nwsapi": "^2.2.4",
+				"parse5": "^7.1.2",
+				"rrweb-cssom": "^0.6.0",
+				"saxes": "^6.0.0",
+				"symbol-tree": "^3.2.4",
+				"tough-cookie": "^4.1.2",
+				"w3c-xmlserializer": "^4.0.0",
+				"webidl-conversions": "^7.0.0",
+				"whatwg-encoding": "^2.0.0",
+				"whatwg-mimetype": "^3.0.0",
+				"whatwg-url": "^12.0.1",
+				"ws": "^8.13.0",
+				"xml-name-validator": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"canvas": "^2.5.0"
+			},
+			"peerDependenciesMeta": {
+				"canvas": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jsdom/node_modules/tr46": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
+			"integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
+			"dependencies": {
+				"punycode": "^2.3.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/jsdom/node_modules/whatwg-url": {
+			"version": "12.0.1",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
+			"integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
+			"dependencies": {
+				"tr46": "^4.1.1",
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/json-schema-traverse": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -2990,6 +3259,25 @@
 				"node": ">=10.0.0"
 			}
 		},
+		"node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/mimic-fn": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -3114,8 +3402,7 @@
 		"node_modules/ms": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-			"dev": true
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
 		},
 		"node_modules/mz": {
 			"version": "2.7.0",
@@ -3194,6 +3481,11 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/nwsapi": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.4.tgz",
+			"integrity": "sha512-NHj4rzRo0tQdijE9ZqAx6kYDcoRwYwSYzCA8MY3JzfxlrvEU0jhnhJT9BhqhJs7I/dKcrDm6TyulaRqZPIhN5g=="
+		},
 		"node_modules/object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3358,6 +3650,17 @@
 				"node": ">=0.6.19"
 			}
 		},
+		"node_modules/parse5": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+			"dependencies": {
+				"entities": "^4.4.0"
+			},
+			"funding": {
+				"url": "https://github.com/inikulin/parse5?sponsor=1"
+			}
+		},
 		"node_modules/path-exists": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3747,6 +4050,11 @@
 				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
 			}
 		},
+		"node_modules/psl": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
+			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
+		},
 		"node_modules/punycode": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -3764,6 +4072,11 @@
 				"teleport": ">=0.2.0"
 			}
 		},
+		"node_modules/querystringify": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+			"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+		},
 		"node_modules/queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3831,6 +4144,11 @@
 				"url": "https://github.com/sponsors/mysticatea"
 			}
 		},
+		"node_modules/requires-port": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+		},
 		"node_modules/resolve": {
 			"version": "1.22.1",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -3896,6 +4214,11 @@
 				"fsevents": "~2.3.2"
 			}
 		},
+		"node_modules/rrweb-cssom": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
+			"integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw=="
+		},
 		"node_modules/run-parallel": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -3930,6 +4253,11 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/safer-buffer": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+		},
 		"node_modules/sander": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
@@ -3966,6 +4294,17 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/saxes": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+			"integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+			"dependencies": {
+				"xmlchars": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=v12.22.7"
+			}
+		},
 		"node_modules/semver": {
 			"version": "7.3.8",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
@@ -3981,6 +4320,14 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/serpapi": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/serpapi/-/serpapi-1.1.1.tgz",
+			"integrity": "sha512-t5Bqu/6VMJ9naX8K+qCgUStpZOaNQFvIM4AudhMJLS6sqQT/EHaYrhGidDZHVx8QvcEdY6y1wNlxizOCtvJtUQ==",
+			"dependencies": {
+				"undici": "^5.12.0"
+			}
+		},
 		"node_modules/set-cookie-parser": {
 			"version": "2.6.0",
 			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
@@ -4118,7 +4465,6 @@
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
 			"integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
-			"dev": true,
 			"engines": {
 				"node": ">=10.0.0"
 			}
@@ -4423,6 +4769,11 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/symbol-tree": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+			"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
+		},
 		"node_modules/tailwind-scrollbar": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-3.0.0.tgz",
@@ -4576,6 +4927,20 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/tough-cookie": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
+			"integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
+			"dependencies": {
+				"psl": "^1.1.33",
+				"punycode": "^2.1.1",
+				"universalify": "^0.2.0",
+				"url-parse": "^1.5.3"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/tr46": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
@@ -4675,7 +5040,6 @@
 			"version": "5.22.0",
 			"resolved": "https://registry.npmjs.org/undici/-/undici-5.22.0.tgz",
 			"integrity": "sha512-fR9RXCc+6Dxav4P9VV/sp5w3eFiSdOjJYsbtWfd4s5L5C4ogyuVpdKIVHeW0vV1MloM65/f7W45nR9ZxwVdyiA==",
-			"dev": true,
 			"dependencies": {
 				"busboy": "^1.6.0"
 			},
@@ -4683,6 +5047,14 @@
 				"node": ">=14.0"
 			}
 		},
+		"node_modules/universalify": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+			"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+			"engines": {
+				"node": ">= 4.0.0"
+			}
+		},
 		"node_modules/unplugin": {
 			"version": "1.3.1",
 			"resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.3.1.tgz",
@@ -4767,6 +5139,15 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"node_modules/url-parse": {
+			"version": "1.5.10",
+			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+			"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+			"dependencies": {
+				"querystringify": "^2.1.1",
+				"requires-port": "^1.0.0"
+			}
+		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -4940,6 +5321,17 @@
 				}
 			}
 		},
+		"node_modules/w3c-xmlserializer": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
+			"integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+			"dependencies": {
+				"xml-name-validator": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/webidl-conversions": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -4972,6 +5364,25 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/whatwg-encoding": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+			"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+			"dependencies": {
+				"iconv-lite": "0.6.3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/whatwg-mimetype": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+			"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/whatwg-url": {
 			"version": "11.0.0",
 			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
@@ -5049,6 +5460,19 @@
 				}
 			}
 		},
+		"node_modules/xml-name-validator": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/xmlchars": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+			"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
+		},
 		"node_modules/yallist": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

package.json

@@ -19,6 +19,7 @@
 		"@sveltejs/adapter-node": "^1.2.4",
 		"@sveltejs/kit": "^1.15.10",
 		"@tailwindcss/typography": "^0.5.9",
+		"@types/jsdom": "^21.1.1",
 		"@types/marked": "^4.0.8",
 		"@types/parquetjs": "^0.10.3",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -45,12 +46,14 @@
 		"date-fns": "^2.29.3",
 		"dotenv": "^16.0.3",
 		"highlight.js": "^11.7.0",
+		"jsdom": "^22.0.0",
 		"marked": "^4.3.0",
 		"mongodb": "^5.3.0",
 		"nanoid": "^4.0.2",
 		"openid-client": "^5.4.2",
 		"parquetjs": "^0.11.2",
 		"postcss": "^8.4.21",
+		"serpapi": "^1.1.1",
 		"tailwind-scrollbar": "^3.0.0",
 		"tailwindcss": "^3.3.1",
 		"zod": "^3.21.4"

src/lib/buildPrompt.ts

@@ -1,15 +1,18 @@
 import type { BackendModel } from "./server/models";
 import type { Message } from "./types/Message";
-
+import { collections } from "$lib/server/database";
+import { ObjectId } from "mongodb";
 /**
  * Convert [{user: "assistant", content: "hi"}, {user: "user", content: "hello"}] to:
  *
  * <|assistant|>hi<|endoftext|><|prompter|>hello<|endoftext|><|assistant|>
  */
-export function buildPrompt(
+
+export async function buildPrompt(
 	messages: Pick<Message, "from" | "content">[],
-	model: BackendModel
-): string {
+	model: BackendModel,
+	webSearchId?: string
+): Promise<string> {
 	const prompt =
 		messages
 			.map(
@@ -25,12 +28,30 @@ export function buildPrompt(
 			)
 			.join("") + model.assistantMessageToken;
 
-	// Not super precise, but it's truncated in the model's backend anyway
-	return (
+	let webPrompt = "";
+
+	if (webSearchId) {
+		const webSearch = await collections.webSearches.findOne({
+			_id: new ObjectId(webSearchId),
+		});
+
+		if (!webSearch) throw new Error("Web search not found");
+
+		if (webSearch.summary) {
+			webPrompt =
+				model.assistantMessageToken +
+				`The following context was found while searching the internet: ${webSearch.summary}` +
+				model.messageEndToken;
+		}
+	}
+	const finalPrompt =
 		model.preprompt +
+		webPrompt +
 		prompt
 			.split(" ")
 			.slice(-(model.parameters?.truncate ?? 0))
-			.join(" ")
-	);
+			.join(" ");
+
+	// Not super precise, but it's truncated in the model's backend anyway
+	return finalPrompt;
 }

src/lib/components/OpenWebSearchResults.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import type { WebSearchMessage } from "$lib/types/WebSearch";
+	import CarbonCaretRight from "~icons/carbon/caret-right";
+
+	import CarbonCheckmark from "~icons/carbon/checkmark-filled";
+	import CarbonError from "~icons/carbon/error-filled";
+
+	import EosIconsLoading from "~icons/eos-icons/loading";
+
+	import { base } from "$app/paths";
+	import { onMount } from "svelte";
+
+	export let loading = false;
+	export let classNames = "";
+	export let webSearchId: string | undefined;
+	export let webSearchMessages: WebSearchMessage[] = [];
+
+	let detailsOpen: boolean;
+	let error: boolean;
+	onMount(() => {
+		if (webSearchMessages.length === 0 && webSearchId) {
+			fetch(`${base}/search/${webSearchId}`)
+				.then((res) => res.json())
+				.then((res) => {
+					webSearchMessages = [...res.messages, { type: "result", id: webSearchId }];
+				})
+				.catch((err) => console.log(err));
+		}
+	});
+	$: error = webSearchMessages.some((message) => message.type === "error");
+</script>
+
+<details
+	class="details flex w-fit rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 {classNames}"
+	on:toggle={() => {
+		if (webSearchMessages.length === 0 && webSearchId) {
+			fetch(`${base}/search/${webSearchId}`)
+				.then((res) => res.json())
+				.then((res) => {
+					webSearchMessages = [...res.messages, { type: "result", id: webSearchId }];
+				})
+				.catch((err) => console.log(err));
+		}
+	}}
+	bind:open={detailsOpen}
+>
+	<summary
+		class="align-center flex cursor-pointer select-none list-none py-1 pl-2.5 pr-2 align-text-top transition-all"
+	>
+		{#if error}
+			<CarbonError class="my-auto text-red-700 dark:text-red-500" />
+		{:else if loading}
+			<EosIconsLoading class="my-auto text-gray-500" />
+		{:else}
+			<CarbonCheckmark class="my-auto text-gray-500" />
+		{/if}
+		<span class="px-2 font-medium" class:text-red-700={error} class:dark:text-red-500={error}
+			>Web search
+		</span>
+		<div class="my-auto transition-all" class:rotate-90={detailsOpen}>
+			<CarbonCaretRight />
+		</div>
+	</summary>
+
+	<div class="content p-5 pb-1">
+		{#if webSearchMessages.length === 0}
+			<div class="mx-auto w-fit">
+				<EosIconsLoading class="mb-3 h-10 w-10" />
+			</div>
+		{:else}
+			<ol class="relative border-l border-gray-200 dark:border-gray-600">
+				{#each webSearchMessages as message}
+					{#if message.type === "update"}
+						<li class="mb-4 ml-4">
+							<div
+								class="h-3 w-3 -translate-x-[1.4rem] rounded-full bg-gray-200 dark:bg-gray-600"
+							/>
+							<h3 class="text-md -translate-y-[1.1rem] text-gray-800 dark:text-gray-100">
+								{message.message}
+							</h3>
+							{#if message.args}
+								<p
+									class="mb-4 -translate-y-[1.1rem]  font-normal text-gray-500 dark:text-gray-400 "
+								>
+									{message.args}
+								</p>
+							{/if}
+						</li>
+					{:else if message.type === "error"}
+						<li class="mb-4 ml-4">
+							<div
+								class="h-3 w-3 -translate-x-[1.4rem] rounded-full text-red-700 dark:text-red-500"
+							>
+								<CarbonError class="h-3 w-3" />
+							</div>
+							<h3 class="text-md -translate-y-[1.1rem] text-red-700 dark:text-red-500">
+								{message.message}
+							</h3>
+							{#if message.args}
+								<p class="mb-4 -translate-y-[1.1rem] font-normal text-gray-500 dark:text-gray-400 ">
+									{message.args}
+								</p>
+							{/if}
+						</li>
+					{/if}
+					<p />
+				{/each}
+			</ol>
+		{/if}
+	</div>
+</details>
+
+<style>
+	@keyframes grow {
+		0% {
+			font-size: 0;
+			opacity: 0;
+		}
+		30% {
+			font-size: 1em;
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	.details[open] .content {
+		animation-name: grow;
+		animation-duration: 300ms;
+		animation-delay: 0ms;
+	}
+</style>

src/lib/components/StopGeneratingBtn.svelte

@@ -1,17 +1,13 @@
 <script lang="ts">
-	import CarbonPause from "~icons/carbon/pause-filled";
+	import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
 
-	export let visible = false;
-	export let className = "";
+	export let classNames = "";
 </script>
 
 <button
 	type="button"
 	on:click
-	class="btn flex rounded-lg border bg-white px-3 py-1 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 
-    {className}
-    {visible ? 'visible opacity-100' : 'invisible opacity-0'}
-    "
+	class="btn flex h-9 rounded-lg border bg-white px-3 py-1 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 {classNames}"
 >
-	<CarbonPause class="-ml-1 mr-1 h-[1.25rem] w-[1.1875rem] text-gray-400" /> Stop generating
+	<CarbonStopFilledAlt class="-ml-1 mr-1 h-[1.25rem] w-[1.1875rem] text-gray-400" /> Stop generating
 </button>

src/lib/components/Switch.svelte

@@ -5,7 +5,9 @@
 
 <input bind:checked type="checkbox" {name} class="peer pointer-events-none absolute opacity-0" />
 <div
-	class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full bg-gray-300 p-1 shadow-inner ring-gray-400 transition-all peer-checked:bg-black peer-focus-visible:ring peer-focus-visible:ring-offset-1 hover:bg-gray-400 peer-checked:[&>div]:translate-x-3.5"
+	on:click
+	on:keypress
+	class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full bg-gray-300 p-1 shadow-inner ring-gray-400 transition-all peer-checked:bg-blue-600 peer-focus-visible:ring peer-focus-visible:ring-offset-1 hover:bg-gray-400 dark:bg-gray-600 peer-checked:[&>div]:translate-x-3.5"
 >
 	<div class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-all" />
 </div>

src/lib/components/WebSearchToggle.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { webSearchParameters } from "$lib/stores/webSearchParameters";
+	import CarbonInformation from "~icons/carbon/information";
+	import Switch from "./Switch.svelte";
+
+	const toggle = () => ($webSearchParameters.useSearch = !$webSearchParameters.useSearch);
+</script>
+
+<div
+	class="flex h-9 cursor-pointer select-none items-center gap-2 rounded-xl border bg-white p-1.5 shadow-sm hover:shadow-none dark:border-gray-800 dark:bg-gray-900"
+	on:click={toggle}
+	on:keypress={toggle}
+>
+	<Switch name="useSearch" bind:checked={$webSearchParameters.useSearch} on:click on:keypress />
+	<div class="whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">Search web</div>
+	<div class="group relative w-max">
+		<CarbonInformation class="text-xs text-gray-500" />
+		<div
+			class="pointer-events-none absolute -top-20 left-1/2 w-max -translate-x-1/2 rounded-md bg-gray-100 p-2 opacity-0 transition-opacity group-hover:opacity-100 dark:bg-gray-800"
+		>
+			<p class="max-w-sm text-sm text-gray-800 dark:text-gray-200">
+				When enabled, the model will try to complement its answer with information queried from the
+				web.
+			</p>
+		</div>
+	</div>
+</div>

src/lib/components/chat/ChatMessage.svelte

@@ -13,6 +13,9 @@
 	import CarbonThumbsDown from "~icons/carbon/thumbs-down";
 	import { PUBLIC_SEP_TOKEN } from "$lib/constants/publicSepToken";
 	import type { Model } from "$lib/types/Model";
+	import type { WebSearchMessage } from "$lib/types/WebSearch";
+
+	import OpenWebSearchResults from "../OpenWebSearchResults.svelte";
 
 	function sanitizeMd(md: string) {
 		let ret = md
@@ -43,6 +46,9 @@
 	export let isAuthor = true;
 	export let readOnly = false;
 	export let isTapped = false;
+	export let isLast = false;
+
+	export let webSearchMessages: WebSearchMessage[] = [];
 
 	const dispatch = createEventDispatcher<{
 		retry: { content: string; id: Message["id"] };
@@ -89,6 +95,13 @@
 
 	$: downloadLink =
 		message.from === "user" ? `${$page.url.pathname}/message/${message.id}/prompt` : undefined;
+
+	let webSearchIsDone = true;
+
+	$: webSearchIsDone =
+		!!message.webSearchId ||
+		(webSearchMessages.length > 0 &&
+			webSearchMessages[webSearchMessages.length - 1].type === "result");
 </script>
 
 {#if message.from === "assistant"}
@@ -103,11 +116,22 @@
 			class="mt-5 h-3 w-3 flex-none select-none rounded-full shadow-lg"
 		/>
 		<div
-			class="relative min-h-[calc(2rem+theme(spacing[3.5])*2)] min-w-[100px] break-words rounded-2xl border border-gray-100 bg-gradient-to-br from-gray-50 px-5 py-3.5 text-gray-600 prose-pre:my-2 dark:border-gray-800 dark:from-gray-800/40 dark:text-gray-300"
+			class="relative min-h-[calc(2rem+theme(spacing[3.5])*2)] min-w-[60px] break-words rounded-2xl border border-gray-100 bg-gradient-to-br from-gray-50 px-5 py-3.5 text-gray-600 prose-pre:my-2 dark:border-gray-800 dark:from-gray-800/40 dark:text-gray-300"
 		>
-			{#if !message.content}
-				<IconLoading classNames="absolute inset-0 m-auto" />
+			{#if message.webSearchId || (webSearchMessages.length > 0 && isLast)}
+				{#key (message.webSearchId, message.score, loading)}
+					<OpenWebSearchResults
+						classNames={tokens.length ? "mb-3" : ""}
+						webSearchId={message.webSearchId}
+						{webSearchMessages}
+						loading={!webSearchIsDone}
+					/>
+				{/key}
+			{/if}
+			{#if !message.content && (webSearchIsDone || webSearchMessages.length === 0)}
+				<IconLoading />
 			{/if}
+
 			<div
 				class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
 				bind:this={contentEl}

src/lib/components/chat/ChatMessages.svelte

@@ -8,6 +8,8 @@
 	import type { LayoutData } from "../../../routes/$types";
 	import ChatIntroduction from "./ChatIntroduction.svelte";
 	import ChatMessage from "./ChatMessage.svelte";
+	import type { WebSearchMessage } from "$lib/types/WebSearch";
+	import { page } from "$app/stores";
 
 	export let messages: Message[];
 	export let loading: boolean;
@@ -20,6 +22,8 @@
 
 	let chatContainer: HTMLElement;
 
+	export let webSearchMessages: WebSearchMessage[] = [];
+
 	async function scrollToBottom() {
 		await tick();
 		chatContainer.scrollTop = chatContainer.scrollHeight;
@@ -33,20 +37,24 @@
 
 <div
 	class="scrollbar-custom mr-1 h-full overflow-y-auto"
-	use:snapScrollToBottom={messages.length ? messages : false}
+	use:snapScrollToBottom={messages.length ? [...messages, ...webSearchMessages] : false}
 	bind:this={chatContainer}
 >
 	<div class="mx-auto flex h-full max-w-3xl flex-col gap-6 px-5 pt-6 sm:gap-8 xl:max-w-4xl">
 		{#each messages as message, i}
-			<ChatMessage
-				loading={loading && i === messages.length - 1}
-				{message}
-				{isAuthor}
-				{readOnly}
-				model={currentModel}
-				on:retry
-				on:vote
-			/>
+			{#key (message.id, $page.params.id)}
+				<ChatMessage
+					loading={loading && i === messages.length - 1}
+					{message}
+					{isAuthor}
+					{readOnly}
+					model={currentModel}
+					{webSearchMessages}
+					isLast={i === messages.length - 1}
+					on:retry
+					on:vote
+				/>
+			{/key}
 		{:else}
 			<ChatIntroduction {settings} {models} {currentModel} on:message />
 		{/each}
@@ -54,9 +62,11 @@
 			<ChatMessage
 				message={{ from: "assistant", content: "", id: randomUUID() }}
 				model={currentModel}
+				isLast={true}
+				{webSearchMessages}
 			/>
 		{/if}
-		<div class="h-36 flex-none" />
+		<div class="h-44 flex-none" />
 	</div>
 	<ScrollToBottomBtn
 		class="bottom-36 right-4 max-md:hidden lg:right-10"

src/lib/components/chat/ChatWindow.svelte

@@ -4,7 +4,7 @@
 
 	import CarbonSendAltFilled from "~icons/carbon/send-alt-filled";
 	import CarbonExport from "~icons/carbon/export";
-	import CarbonPause from "~icons/carbon/pause-filled";
+	import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
 	import EosIconsLoading from "~icons/eos-icons/loading";
 
 	import ChatMessages from "./ChatMessages.svelte";
@@ -12,6 +12,8 @@
 	import StopGeneratingBtn from "../StopGeneratingBtn.svelte";
 	import type { Model } from "$lib/types/Model";
 	import type { LayoutData } from "../../../routes/$types";
+	import WebSearchToggle from "../WebSearchToggle.svelte";
+	import type { WebSearchMessage } from "$lib/types/WebSearch";
 	import LoginModal from "../LoginModal.svelte";
 
 	export let messages: Message[] = [];
@@ -21,6 +23,7 @@
 	export let currentModel: Model;
 	export let models: Model[];
 	export let settings: LayoutData["settings"];
+	export let webSearchMessages: WebSearchMessage[] = [];
 
 	export let loginRequired = false;
 	$: isReadOnly = !models.some((model) => model.id === currentModel.id);
@@ -55,6 +58,7 @@
 		{messages}
 		readOnly={isReadOnly}
 		isAuthor={!shared}
+		{webSearchMessages}
 		on:message
 		on:vote
 		on:retry={(ev) => {
@@ -64,8 +68,16 @@
 	<div
 		class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:dark:bg-gray-900 sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
 	>
-		<div class="my-[0.5rem] hidden justify-center sm:flex">
-			<StopGeneratingBtn visible={loading} on:click={() => dispatch("stop")} />
+		<div class="flex w-full pb-3 max-md:justify-between">
+			{#if settings?.searchEnabled}
+				<WebSearchToggle />
+			{/if}
+			{#if loading}
+				<StopGeneratingBtn
+					classNames={settings?.searchEnabled ? "md:-translate-x-1/2 md:mx-auto" : "mx-auto"}
+					on:click={() => dispatch("stop")}
+				/>
+			{/if}
 		</div>
 		<form
 			on:submit|preventDefault={handleSubmit}
@@ -89,7 +101,7 @@
 						class="btn mx-1 my-1 inline-block h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100 md:hidden"
 						on:click={() => dispatch("stop")}
 					>
-						<CarbonPause />
+						<CarbonStopFilledAlt />
 					</button>
 					<div
 						class="mx-1 my-1 hidden h-[2.4rem] items-center p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100 md:flex"

src/lib/components/icons/IconLoading.svelte

@@ -2,30 +2,17 @@
 	export let classNames = "";
 </script>
 
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	width="40px"
-	height="25px"
-	viewBox="0 0 60 40"
-	preserveAspectRatio="xMidYMid"
-	class={classNames}
->
-	{#each Array(3) as _, index}
-		<g transform={`translate(${20 * index + 10} 20)`}>
-			{index}
-			<circle cx="0" cy="0" r="6" fill="currentColor">
-				<animateTransform
-					attributeName="transform"
-					type="scale"
-					begin={`${-0.375 + 0.15 * index}s`}
-					calcMode="spline"
-					keySplines="0.3 0 0.7 1;0.3 0 0.7 1"
-					values="0.5;1;0.5"
-					keyTimes="0;0.5;1"
-					dur="1s"
-					repeatCount="indefinite"
-				/>
-			</circle>
-		</g>
-	{/each}
-</svg>
+<div class={"inline-flex h-8 flex-none items-center gap-1 " + classNames}>
+	<div
+		class="h-1 w-1 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.25s;"
+	/>
+	<div
+		class="h-1 w-1 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.5s;"
+	/>
+	<div
+		class="h-1 w-1 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.75s;"
+	/>
+</div>

src/lib/server/database.ts

@@ -2,6 +2,7 @@ import { MONGODB_URL, MONGODB_DB_NAME, MONGODB_DIRECT_CONNECTION } from "$env/st
 import { MongoClient } from "mongodb";
 import type { Conversation } from "$lib/types/Conversation";
 import type { SharedConversation } from "$lib/types/SharedConversation";
+import type { WebSearch } from "$lib/types/WebSearch";
 import type { AbortedGeneration } from "$lib/types/AbortedGeneration";
 import type { Settings } from "$lib/types/Settings";
 import type { User } from "$lib/types/User";
@@ -25,6 +26,7 @@ const sharedConversations = db.collection<SharedConversation>("sharedConversatio
 const abortedGenerations = db.collection<AbortedGeneration>("abortedGenerations");
 const settings = db.collection<Settings>("settings");
 const users = db.collection<User>("users");
+const webSearches = db.collection<WebSearch>("webSearches");
 
 export { client, db };
 export const collections = {
@@ -33,6 +35,7 @@ export const collections = {
 	abortedGenerations,
 	settings,
 	users,
+	webSearches,
 };
 
 client.on("open", () => {
@@ -48,6 +51,7 @@ client.on("open", () => {
 			{ partialFilterExpression: { userId: { $exists: true } } }
 		)
 		.catch(console.error);
+	webSearches.createIndex({ sessionId: 1, updatedAt: -1 }).catch(console.error);
 	abortedGenerations.createIndex({ updatedAt: 1 }, { expireAfterSeconds: 30 }).catch(console.error);
 	abortedGenerations.createIndex({ conversationId: 1 }, { unique: true }).catch(console.error);
 	sharedConversations.createIndex({ hash: 1 }, { unique: true }).catch(console.error);

src/lib/server/generateFromDefaultEndpoint.ts

@@ -0,0 +1,43 @@
+import { defaultModel } from "$lib/server/models";
+import { modelEndpoint } from "./modelEndpoint";
+import { textGeneration } from "@huggingface/inference";
+import { trimSuffix } from "$lib/utils/trimSuffix";
+import { trimPrefix } from "$lib/utils/trimPrefix";
+import { PUBLIC_SEP_TOKEN } from "$lib/constants/publicSepToken";
+
+interface Parameters {
+	temperature: number;
+	truncate: number;
+	max_new_tokens: number;
+	stop: string[];
+}
+export async function generateFromDefaultEndpoint(
+	prompt: string,
+	parameters?: Partial<Parameters>
+) {
+	const newParameters = {
+		...defaultModel.parameters,
+		...parameters,
+		return_full_text: false,
+	};
+
+	const endpoint = modelEndpoint(defaultModel);
+	let { generated_text } = await textGeneration(
+		{
+			model: endpoint.url,
+			inputs: prompt,
+			parameters: newParameters,
+		},
+		{
+			fetch: (url, options) =>
+				fetch(url, {
+					...options,
+					headers: { ...options?.headers, Authorization: endpoint.authorization },
+				}),
+		}
+	);
+
+	generated_text = trimSuffix(trimPrefix(generated_text, "<|startoftext|>"), PUBLIC_SEP_TOKEN);
+
+	return generated_text;
+}

src/lib/server/searchWeb.ts

@@ -0,0 +1,20 @@
+import { SERPAPI_KEY } from "$env/static/private";
+
+import { getJson } from "serpapi";
+import type { GoogleParameters } from "serpapi";
+
+// Show result as JSON
+export async function searchWeb(query: string) {
+	const params = {
+		q: query,
+		hl: "en",
+		gl: "us",
+		google_domain: "google.com",
+		api_key: SERPAPI_KEY,
+	} satisfies GoogleParameters;
+
+	// Show result as JSON
+	const response = await getJson("google", params);
+
+	return response;
+}

src/lib/stores/webSearchParameters.ts

@@ -0,0 +1,9 @@
+import { writable } from "svelte/store";
+export interface WebSearchParameters {
+	useSearch: boolean;
+	nItems: number;
+}
+export const webSearchParameters = writable<WebSearchParameters>({
+	useSearch: false,
+	nItems: 5,
+});

src/lib/types/Message.ts

@@ -2,5 +2,6 @@ export interface Message {
 	from: "user" | "assistant";
 	id: ReturnType<typeof crypto.randomUUID>;
 	content: string;
+	webSearchId?: string;
 	score?: -1 | 0 | 1;
 }

src/lib/types/WebSearch.ts

@@ -0,0 +1,40 @@
+import type { ObjectId } from "mongodb";
+import type { Conversation } from "./Conversation";
+import type { Timestamps } from "./Timestamps";
+
+export interface WebSearch extends Timestamps {
+	_id: ObjectId;
+
+	convId: Conversation["_id"];
+
+	prompt: string;
+
+	searchQuery: string;
+	results: string[];
+	knowledgeGraph: string;
+	summary: string;
+
+	messages: WebSearchMessage[];
+}
+
+export type WebSearchMessageUpdate = {
+	type: "update";
+	message: string;
+	args?: string[];
+};
+
+export type WebSearchMessageError = {
+	type: "error";
+	message: string;
+	args?: string[];
+};
+
+export type WebSearchMessageResult = {
+	type: "result";
+	id: string;
+};
+
+export type WebSearchMessage =
+	| WebSearchMessageUpdate
+	| WebSearchMessageResult
+	| WebSearchMessageError;

src/routes/+layout.server.ts

@@ -6,6 +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";
 
 export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 	const { conversations } = collections;
@@ -60,6 +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,
 		},
 		models: models.map((model) => ({
 			id: model.id,

src/routes/conversation/[id]/+page.svelte

@@ -12,6 +12,8 @@
 	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
 	import { randomUUID } from "$lib/utils/randomUuid";
 	import { findCurrentModel } from "$lib/utils/models";
+	import { webSearchParameters } from "$lib/stores/webSearchParameters";
+	import type { WebSearchMessage } from "$lib/types/WebSearch.js";
 	import type { Message } from "$lib/types/Message";
 
 	export let data;
@@ -20,6 +22,8 @@
 	let lastLoadedMessages = data.messages;
 	let isAborted = false;
 
+	let webSearchMessages: WebSearchMessage[] = [];
+
 	// Since we modify the messages array locally, we don't want to reset it if an old version is passed
 	$: if (data.messages !== lastLoadedMessages) {
 		messages = data.messages;
@@ -29,8 +33,13 @@
 	let loading = false;
 	let pending = false;
 
-	async function getTextGenerationStream(inputs: string, messageId: string, isRetry = false) {
-		const conversationId = $page.params.id;
+	async function getTextGenerationStream(
+		inputs: string,
+		messageId: string,
+		isRetry = false,
+		webSearchId?: string
+	) {
+		let conversationId = $page.params.id;
 		const responseId = randomUUID();
 
 		const response = textGenerationStream(
@@ -47,6 +56,7 @@
 				response_id: responseId,
 				is_retry: isRetry,
 				use_cache: false,
+				web_search_id: webSearchId,
 			} as Options
 		);
 
@@ -78,6 +88,7 @@
 
 				if (lastMessage) {
 					lastMessage.content = output.generated_text;
+					lastMessage.webSearchId = webSearchId;
 					messages = [...messages];
 				}
 				break;
@@ -126,7 +137,63 @@
 				{ from: "user", content: message, id: messageId },
 			];
 
-			await getTextGenerationStream(message, messageId, isRetry);
+			let searchResponseId: string | null = "";
+			if ($webSearchParameters.useSearch) {
+				webSearchMessages = [];
+
+				const res = await fetch(
+					`${base}/conversation/${$page.params.id}/web-search?` +
+						new URLSearchParams({ prompt: message }),
+					{
+						method: "GET",
+					}
+				);
+
+				// required bc linting doesn't see TextDecoderStream for some reason?
+				// eslint-disable-next-line no-undef
+				const encoder = new TextDecoderStream();
+				const reader = res?.body?.pipeThrough(encoder).getReader();
+
+				while (searchResponseId === "") {
+					await new Promise((r) => setTimeout(r, 25));
+
+					if (isAborted) {
+						reader?.cancel();
+						return;
+					}
+
+					reader
+						?.read()
+						.then(async ({ done, value }) => {
+							if (done) {
+								reader.cancel();
+								return;
+							}
+
+							try {
+								webSearchMessages = (JSON.parse(value) as { messages: WebSearchMessage[] })
+									.messages;
+							} catch (parseError) {
+								// in case of parsing error we wait for the next message
+								return;
+							}
+
+							const lastSearchMessage = webSearchMessages[webSearchMessages.length - 1];
+							if (lastSearchMessage.type === "result") {
+								searchResponseId = lastSearchMessage.id;
+								reader.cancel();
+								return;
+							}
+						})
+						.catch(() => {
+							searchResponseId = null;
+						});
+				}
+			}
+
+			await getTextGenerationStream(message, messageId, isRetry, searchResponseId ?? undefined);
+
+			webSearchMessages = [];
 
 			if (messages.filter((m) => m.from === "user").length === 1) {
 				summarizeTitle($page.params.id)
@@ -186,7 +253,7 @@
 			writeMessage(val, messageId);
 		}
 	});
-
+	$: $page.params.id, (isAborted = true);
 	$: title = data.conversations.find((conv) => conv.id === $page.params.id)?.title ?? data.title;
 </script>
 
@@ -198,6 +265,7 @@
 	{loading}
 	{pending}
 	{messages}
+	bind:webSearchMessages
 	on:message={(event) => writeMessage(event.detail)}
 	on:retry={(event) => writeMessage(event.detail.content, event.detail.id)}
 	on:vote={(event) => voteMessage(event.detail.score, event.detail.id)}

src/routes/conversation/[id]/+server.ts

@@ -38,7 +38,7 @@ export async function POST({ request, fetch, locals, params }) {
 	const json = await request.json();
 	const {
 		inputs: newPrompt,
-		options: { id: messageId, is_retry, response_id: responseId },
+		options: { id: messageId, is_retry, web_search_id, response_id: responseId },
 	} = z
 		.object({
 			inputs: z.string().trim().min(1),
@@ -46,6 +46,7 @@ export async function POST({ request, fetch, locals, params }) {
 				id: z.optional(z.string().uuid()),
 				response_id: z.optional(z.string().uuid()),
 				is_retry: z.optional(z.boolean()),
+				web_search_id: z.ostring(),
 			}),
 		})
 		.parse(json);
@@ -67,8 +68,7 @@ export async function POST({ request, fetch, locals, params }) {
 		];
 	})() satisfies Message[];
 
-	const prompt = buildPrompt(messages, model);
-
+	const prompt = await buildPrompt(messages, model, web_search_id);
 	const randomEndpoint = modelEndpoint(model);
 
 	const abortController = new AbortController();
@@ -114,6 +114,7 @@ export async function POST({ request, fetch, locals, params }) {
 		messages.push({
 			from: "assistant",
 			content: generated_text,
+			webSearchId: web_search_id,
 			id: (responseId as Message["id"]) || crypto.randomUUID(),
 		});
 
@@ -131,7 +132,6 @@ export async function POST({ request, fetch, locals, params }) {
 	}
 
 	saveMessage().catch(console.error);
-
 	// Todo: maybe we should wait for the message to be saved before ending the response - in case of errors
 	return new Response(stream1, {
 		headers: Object.fromEntries(resp.headers.entries()),

src/routes/conversation/[id]/message/[messageId]/prompt/+server.ts

@@ -31,7 +31,7 @@ export async function GET({ params, locals }) {
 		throw error(404, "Conversation model not found");
 	}
 
-	const prompt = buildPrompt(conv.messages.slice(0, messageIndex + 1), model);
+	const prompt = await buildPrompt(conv.messages.slice(0, messageIndex + 1), model);
 
 	return new Response(
 		JSON.stringify(

src/routes/conversation/[id]/summarize/+server.ts

@@ -1,16 +1,12 @@
 import { buildPrompt } from "$lib/buildPrompt";
-import { PUBLIC_SEP_TOKEN } from "$lib/constants/publicSepToken";
 import { authCondition } from "$lib/server/auth";
 import { collections } from "$lib/server/database";
-import { modelEndpoint } from "$lib/server/modelEndpoint";
+import { generateFromDefaultEndpoint } from "$lib/server/generateFromDefaultEndpoint.js";
 import { defaultModel } from "$lib/server/models";
-import { trimPrefix } from "$lib/utils/trimPrefix";
-import { trimSuffix } from "$lib/utils/trimSuffix";
-import { textGeneration } from "@huggingface/inference";
 import { error } from "@sveltejs/kit";
 import { ObjectId } from "mongodb";
 
-export async function POST({ params, locals, fetch }) {
+export async function POST({ params, locals }) {
 	const convId = new ObjectId(params.id);
 
 	const conversation = await collections.conversations.findOne({
@@ -28,30 +24,8 @@ export async function POST({ params, locals, fetch }) {
 		`Please summarize the following message as a single sentence of less than 5 words:\n` +
 		firstMessage?.content;
 
-	const prompt = buildPrompt([{ from: "user", content: userPrompt }], defaultModel);
-
-	const parameters = {
-		...defaultModel.parameters,
-		return_full_text: false,
-	};
-
-	const endpoint = modelEndpoint(defaultModel);
-	let { generated_text } = await textGeneration(
-		{
-			model: endpoint.url,
-			inputs: prompt,
-			parameters,
-		},
-		{
-			fetch: (url, options) =>
-				fetch(url, {
-					...options,
-					headers: { ...options?.headers, Authorization: endpoint.authorization },
-				}),
-		}
-	);
-
-	generated_text = trimSuffix(trimPrefix(generated_text, "<|startoftext|>"), PUBLIC_SEP_TOKEN);
+	const prompt = await buildPrompt([{ from: "user", content: userPrompt }], defaultModel);
+	const generated_text = await generateFromDefaultEndpoint(prompt);
 
 	if (generated_text) {
 		await collections.conversations.updateOne(

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

@@ -0,0 +1,232 @@
+import { authCondition } from "$lib/server/auth";
+import { collections } from "$lib/server/database";
+import { generateFromDefaultEndpoint } from "$lib/server/generateFromDefaultEndpoint.js";
+import { defaultModel } from "$lib/server/models";
+import { searchWeb } from "$lib/server/searchWeb.js";
+import type { Message } from "$lib/types/Message.js";
+import { error } from "@sveltejs/kit";
+import { ObjectId } from "mongodb";
+import { z } from "zod";
+import { JSDOM, VirtualConsole } from "jsdom";
+import type { WebSearch } from "$lib/types/WebSearch.js";
+
+function removeTags(node: Node) {
+	if (node.hasChildNodes()) {
+		node.childNodes.forEach((childNode) => {
+			if (node.nodeName === "SCRIPT" || node.nodeName === "STYLE") {
+				node.removeChild(childNode);
+			} else {
+				removeTags(childNode);
+			}
+		});
+	}
+}
+function naiveInnerText(node: Node): string {
+	const Node = node; // We need Node(DOM's Node) for the constants, but Node doesn't exist in the nodejs global space, and any Node instance references the constants through the prototype chain
+	return [...node.childNodes]
+		.map((childNode) => {
+			switch (childNode.nodeType) {
+				case Node.TEXT_NODE:
+					return node.textContent;
+				case Node.ELEMENT_NODE:
+					return naiveInnerText(childNode);
+				default:
+					return "";
+			}
+		})
+		.join("\n");
+}
+
+interface GenericObject {
+	[key: string]: GenericObject | unknown;
+}
+
+function removeLinks(obj: GenericObject) {
+	for (const prop in obj) {
+		if (prop.endsWith("link")) delete obj[prop];
+		else if (typeof obj[prop] === "object") removeLinks(obj[prop] as GenericObject);
+	}
+	return obj;
+}
+export async function GET({ params, locals, url }) {
+	const model = defaultModel;
+	const convId = new ObjectId(params.id);
+	const searchId = new ObjectId();
+
+	const conv = await collections.conversations.findOne({
+		_id: convId,
+		...authCondition(locals),
+	});
+
+	if (!conv) {
+		throw error(404, "Conversation not found");
+	}
+
+	const prompt = z.string().trim().min(1).parse(url.searchParams.get("prompt"));
+
+	const messages = (() => {
+		return [...conv.messages, { content: prompt, from: "user", id: crypto.randomUUID() }];
+	})() satisfies Message[];
+
+	const stream = new ReadableStream({
+		async start(controller) {
+			const webSearch: WebSearch = {
+				_id: searchId,
+				convId: convId,
+				prompt: prompt,
+				searchQuery: "",
+				knowledgeGraph: "",
+				results: [],
+				summary: "",
+				messages: [],
+				createdAt: new Date(),
+				updatedAt: new Date(),
+			};
+			try {
+				webSearch.messages.push({
+					type: "update",
+					message: "Generating search query",
+				});
+				controller.enqueue(JSON.stringify({ messages: webSearch.messages }));
+
+				const promptSearchQuery =
+					model.userMessageToken +
+					"The following messages were written by a user, trying to answer a question." +
+					model.messageEndToken +
+					messages
+						.filter((message) => message.from === "user")
+						.map((message) => model.userMessageToken + message.content + model.messageEndToken) +
+					model.userMessageToken +
+					"What plain-text english sentence would you input into Google to answer the last question? Answer with a short (10 words max) simple sentence." +
+					model.messageEndToken +
+					model.assistantMessageToken +
+					"Query: ";
+
+				webSearch.searchQuery = await generateFromDefaultEndpoint(promptSearchQuery).then(
+					(query) => {
+						const arr = query.split(/\r?\n/);
+						return arr[0].length > 0 ? arr[0] : arr[1];
+					}
+				);
+				// the model has a tendency to continue answering even when we tell it not to, so the split makes
+				// sure we only get the first line of the response
+
+				webSearch.messages.push({
+					type: "update",
+					message: "Searching Google",
+					args: [webSearch.searchQuery],
+				});
+				controller.enqueue(JSON.stringify({ messages: webSearch.messages }));
+
+				const results = await searchWeb(webSearch.searchQuery);
+				let text = "";
+
+				webSearch.results =
+					(results.organic_results &&
+						results.organic_results.map((el: { link: string }) => el.link)) ??
+					[];
+
+				if (results.knowledge_graph) {
+					// if google returns a knowledge graph, we use it
+					webSearch.knowledgeGraph = JSON.stringify(removeLinks(results.knowledge_graph));
+
+					text = webSearch.knowledgeGraph;
+
+					webSearch.messages.push({
+						type: "update",
+						message: "Found a Google knowledge page",
+					});
+					controller.enqueue(JSON.stringify({ messages: webSearch.messages }));
+				} else if (webSearch.results.length > 0) {
+					// otherwise we use the top result from search
+					const topUrl = webSearch.results[0];
+
+					webSearch.messages.push({
+						type: "update",
+						message: "Browsing first result",
+						args: [JSON.stringify(topUrl)],
+					});
+					controller.enqueue(JSON.stringify({ messages: webSearch.messages }));
+
+					// fetch the webpage
+					//10 second timeout:
+					const abortController = new AbortController();
+					setTimeout(() => abortController.abort(), 10000);
+					const htmlString = await fetch(topUrl, { signal: abortController.signal })
+						.then((response) => response.text())
+						.catch((err) => console.log(err));
+
+					const virtualConsole = new VirtualConsole();
+					virtualConsole.on("error", () => {
+						// No-op to skip console errors.
+					});
+
+					// put the html string into a DOM
+					const dom = new JSDOM(htmlString ?? "", {
+						virtualConsole,
+					});
+
+					const body = dom.window.document.querySelector("body");
+					if (!body) throw new Error("body of the webpage is null");
+
+					removeTags(body);
+
+					// recursively extract text content from the body and then remove newlines and multiple spaces
+					text = (naiveInnerText(body) ?? "").replace(/ {2}|\r\n|\n|\r/gm, "");
+
+					if (!text) throw new Error("text of the webpage is null");
+				} else {
+					throw new Error("No results found for this search query");
+				}
+
+				webSearch.messages.push({
+					type: "update",
+					message: "Creating summary",
+				});
+				controller.enqueue(JSON.stringify({ messages: webSearch.messages }));
+
+				const summaryPrompt =
+					model.userMessageToken +
+					text
+						.split(" ")
+						.slice(0, model.parameters?.truncate ?? 0)
+						.join(" ") +
+					model.messageEndToken +
+					model.userMessageToken +
+					`The text above should be summarized to best answer the query: ${webSearch.searchQuery}.` +
+					model.messageEndToken +
+					model.assistantMessageToken +
+					"Summary: ";
+
+				webSearch.summary = await generateFromDefaultEndpoint(summaryPrompt).then((txt: string) =>
+					txt.trim()
+				);
+
+				webSearch.messages.push({
+					type: "update",
+					message: "Injecting summary",
+					args: [JSON.stringify(webSearch.summary)],
+				});
+				controller.enqueue(JSON.stringify({ messages: webSearch.messages }));
+			} catch (searchError) {
+				if (searchError instanceof Error) {
+					webSearch.messages.push({
+						type: "error",
+						message: "An error occurred with the web search",
+						args: [JSON.stringify(searchError.message)],
+					});
+				}
+			}
+
+			const res = await collections.webSearches.insertOne(webSearch);
+
+			webSearch.messages.push({
+				type: "result",
+				id: res.insertedId.toString(),
+			});
+			controller.enqueue(JSON.stringify({ messages: webSearch.messages }));
+		},
+	});
+
+	return new Response(stream, { headers: { "Content-Type": "application/json" } });
+}

src/routes/r/[id]/message/[messageId]/prompt/+server.ts

@@ -26,7 +26,7 @@ export async function GET({ params }) {
 		throw error(404, "Conversation model not found");
 	}
 
-	const prompt = buildPrompt(conv.messages.slice(0, messageIndex + 1), model);
+	const prompt = await buildPrompt(conv.messages.slice(0, messageIndex + 1), model);
 
 	return new Response(
 		JSON.stringify(

src/routes/search/[id]/+server.ts

@@ -0,0 +1,39 @@
+import { collections } from "$lib/server/database";
+import { sha256 } from "$lib/utils/sha256.js";
+import { error } from "@sveltejs/kit";
+import { ObjectId } from "mongodb";
+
+export async function GET({ params, locals }) {
+	const searchId = new ObjectId(params.id);
+
+	const search = await collections.webSearches.findOne({
+		_id: searchId,
+	});
+
+	if (!search) {
+		throw error(404, "Search query not found");
+	}
+
+	const conv = await collections.conversations.findOne({
+		_id: search.convId,
+	});
+
+	if (!conv) {
+		throw error(404, "Conversation not found");
+	}
+
+	// there's no better way to see if a conversation has been shared, so we hash the messages and see if there's a shared conversation with the same hash
+	const hash = await sha256(JSON.stringify(conv.messages));
+	const sharedConv = await collections.sharedConversations.findOne({
+		hash: hash,
+	});
+
+	const userShouldSeeConv =
+		(conv.userId && locals.user?._id.toString() === conv.userId.toString()) || sharedConv !== null;
+
+	if (!userShouldSeeConv) {
+		throw error(403, "You don't have access to the conversation here.");
+	}
+
+	return new Response(JSON.stringify(search), { headers: { "Content-Type": "application/json" } });
+}