feat: add Trieve search and AI Chat (RAG) (#816)

Co-authored-by: Sara Vieira <[email protected]>
SigNoz · Sep 26, 2024 · 7f123cc · 7f123cc
1 parent 9d3f787
commit 7f123cc
Show file tree

Hide file tree

Showing 6 changed files with 14,166 additions and 19,309 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,5 @@
 import 'css/tailwind.css'
 import 'css/global.css'
-import 'pliny/search/algolia.css'
 
 import { GoogleTagManager } from '@next/third-parties/google'
 import { SearchProvider, SearchConfig } from 'pliny/search'

diff --git a/components/SearchButton.tsx b/components/SearchButton.tsx
@@ -1,20 +1,48 @@
-import { AlgoliaButton } from 'pliny/search/AlgoliaButton'
-import { KBarButton } from 'pliny/search/KBarButton'
 import siteMetadata from '@/data/siteMetadata'
-import { SearchIcon } from 'lucide-react'
+import { TrieveModalSearch, TrieveSDK } from 'trieve-search-component'
+import 'trieve-search-component/dist/index.css'
 
-const SearchButton = () => {
-  if (
-    siteMetadata.search &&
-    (siteMetadata.search.provider === 'algolia' || siteMetadata.search.provider === 'kbar')
-  ) {
-    const SearchButtonWrapper =
-      siteMetadata.search.provider === 'algolia' ? AlgoliaButton : KBarButton
+const trieve = new TrieveSDK({
+  apiKey: 'tr-UPjrAOp35kGrJWM1IvODj4zVWTdGgQxI',
+  datasetId: '4650e231-7857-45aa-beb1-cb52006a2460',
+})
 
+const SearchButton = () => {
+  if (siteMetadata.search) {
     return (
-      <SearchButtonWrapper aria-label="Search" className="px-2 py-2 bg-signoz_slate-500 rounded-full">
-        <SearchIcon size={16} />
-      </SearchButtonWrapper>
+      <TrieveModalSearch
+        theme="dark"
+        trieve={trieve}
+        openKeyCombination={[
+          {
+            key: '/',
+          },
+        ]}
+        ButtonEl={() => (
+          <div className="-mt-1 flex min-h-8 items-center justify-between rounded-full bg-signoz_slate-500 px-4 py-1">
+            <div className="mr-4 flex items-center gap-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <circle cx="11" cy="11" r="8"></circle>
+                <path d="m21 21-4.3-4.3"></path>
+              </svg>
+              <span className="text-sm text-signoz_vanilla-400">Search...</span>
+            </div>
+            <div className=" flex h-5 w-5 items-center justify-center rounded-sm border-1.5 border-b-2 border-signoz_ink-200 text-[10px] font-bold">
+              /
+            </div>
+          </div>
+        )}
+      />
     )
   }
 }

diff --git a/css/global.css b/css/global.css
@@ -213,7 +213,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .start-free-trial-btn {
-  background-color: #4E74F8;
+  background-color: #4e74f8;
 }
 
 .privacy ol {
@@ -233,3 +233,18 @@ body::-webkit-scrollbar-thumb {
 [data-rmiz-modal-img] {
   padding: 24px;
 }
+
+body #trieve-search-modal.dark .item.start-chat {
+  @apply bg-signoz_sakura-600/10;
+}
+body #trieve-search-modal.dark .item.start-chat h4 {
+  @apply font-normal;
+}
+
+body #trieve-search-modal.dark .item.start-chat svg,
+body #trieve-search-modal.dark .item.start-chat h4 span {
+  @apply text-signoz_sakura-500;
+}
+body #trieve-search-modal.dark .item.start-chat .description {
+  @apply hidden;
+}
diff --git a/data/siteMetadata.js b/data/siteMetadata.js
@@ -55,15 +55,6 @@ const siteMetadata = {
     },
   },
   search: {
-    provider: 'algolia', // kbar or algolia
-    kbarConfig: {
-      searchDocumentsPath: 'search.json', // path to load documents to search
-    },
-    algoliaConfig: {
-      appId: 'E88QYIQ6K4',
-      apiKey: '1061c173ae001d5f5aaa4f0354e373a0',
-      indexName: 'signoz',
-    },
   },
 }
 

diff --git a/package.json b/package.json
@@ -1,97 +1,98 @@
 {
-    "name": "signoz-web",
-    "version": "2.2.0",
-    "private": true,
-    "scripts": {
-        "start": "next dev",
-        "dev": "cross-env INIT_CWD=$PWD next dev",
-        "build": "cross-env INIT_CWD=$PWD next build && cross-env NODE_OPTIONS='--experimental-json-modules' node ./scripts/postbuild.mjs",
-        "serve": "next start",
-        "analyze": "cross-env ANALYZE=true next build",
-        "lint": "next lint --fix --dir pages --dir app --dir components --dir lib --dir layouts --dir scripts",
-        "prepare": "husky"
-    },
-    "dependencies": {
-        "@aaronhayes/react-use-hubspot-form": "^2.1.1",
-        "@headlessui/react": "^2.0.3",
-        "@heroicons/react": "^2.1.3",
-        "@mdx-js/react": "^3.0.1",
-        "@next/bundle-analyzer": "14.2.3",
-        "@next/third-parties": "^14.2.3",
-        "@nextui-org/react": "^2.4.2",
-        "@signozhq/design-tokens": "^0.0.8",
-        "@stoplight/elements": "^8.3.3",
-        "@tailwindcss/forms": "^0.5.7",
-        "@tailwindcss/typography": "^0.5.12",
-        "@types/vimeo__player": "^2.18.3",
-        "@vimeo/player": "^2.23.0",
-        "autoprefixer": "^10.4.13",
-        "contentlayer2": "0.4.6",
-        "date-fns": "^3.6.0",
-        "esbuild": "0.20.2",
-        "framer-motion": "^11.2.12",
-        "github-slugger": "^2.0.0",
-        "google-spreadsheet": "^4.1.2",
-        "gray-matter": "^4.0.2",
-        "hast-util-from-html-isomorphic": "^2.0.0",
-        "image-size": "1.0.0",
-        "lucide-react": "^0.378.0",
-        "next": "14.2.3",
-        "next-contentlayer2": "0.4.6",
-        "next-image-zoom": "^1.1.7",
-        "next-themes": "^0.3.0",
-        "pliny": "0.2.1",
-        "postcss": "^8.4.24",
-        "react": "18.3.1",
-        "react-dom": "18.3.1",
-        "react-ga": "^3.3.1",
-        "react-ga4": "^2.1.0",
-        "react-intersection-observer": "^9.13.0",
-        "react-lite-yt-embed": "^1.2.7",
-        "react-markdown": "^9.0.1",
-        "react-medium-image-zoom": "^5.2.3",
-        "react-modal": "^3.16.1",
-        "react-multi-carousel": "^2.8.5",
-        "react-paginate": "^8.2.0",
-        "reading-time": "1.5.0",
-        "rehype-autolink-headings": "^7.1.0",
-        "rehype-citation": "^2.0.0",
-        "rehype-katex": "^7.0.0",
-        "rehype-preset-minify": "7.0.0",
-        "rehype-prism-plus": "^2.0.0",
-        "rehype-slug": "^6.0.0",
-        "remark": "^15.0.0",
-        "remark-gfm": "^4.0.0",
-        "remark-math": "^6.0.0",
-        "styled-components": "^6.1.12",
-        "tailwindcss": "^3.4.3"
-    },
-    "devDependencies": {
-        "@svgr/webpack": "^8.0.1",
-        "@types/mdx": "^2.0.12",
-        "@types/react": "^18.2.73",
-        "@typescript-eslint/eslint-plugin": "^6.1.0",
-        "@typescript-eslint/parser": "^6.1.0",
-        "cross-env": "^7.0.3",
-        "eslint": "^8.45.0",
-        "eslint-config-next": "14.2.3",
-        "eslint-config-prettier": "^8.8.0",
-        "eslint-plugin-prettier": "^5.0.0",
-        "husky": "^9.0.0",
-        "lint-staged": "^13.0.0",
-        "prettier": "^3.0.0",
-        "prettier-plugin-tailwindcss": "^0.5.11",
-        "typescript": "^5.1.3"
-    },
-    "resolutions": {
-        "tar": "6.2.1"
-    },
-    "lint-staged": {
-        "*.+(js|jsx|ts|tsx)": [
-            "eslint --fix"
-        ],
-        "*.+(js|jsx|ts|tsx|json|css|md|mdx)": [
-            "prettier --write"
-        ]
-    }
+  "name": "signoz-web",
+  "version": "2.2.0",
+  "private": true,
+  "scripts": {
+    "start": "next dev",
+    "dev": "cross-env INIT_CWD=$PWD next dev",
+    "build": "cross-env INIT_CWD=$PWD next build && cross-env NODE_OPTIONS='--experimental-json-modules' node ./scripts/postbuild.mjs",
+    "serve": "next start",
+    "analyze": "cross-env ANALYZE=true next build",
+    "lint": "next lint --fix --dir pages --dir app --dir components --dir lib --dir layouts --dir scripts",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@aaronhayes/react-use-hubspot-form": "^2.1.1",
+    "@headlessui/react": "^2.0.3",
+    "@heroicons/react": "^2.1.3",
+    "@mdx-js/react": "^3.0.1",
+    "@next/bundle-analyzer": "14.2.3",
+    "@next/third-parties": "^14.2.3",
+    "@nextui-org/react": "^2.4.2",
+    "@signozhq/design-tokens": "^0.0.8",
+    "@stoplight/elements": "^8.3.3",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.12",
+    "@types/vimeo__player": "^2.18.3",
+    "@vimeo/player": "^2.23.0",
+    "autoprefixer": "^10.4.13",
+    "contentlayer2": "0.4.6",
+    "date-fns": "^3.6.0",
+    "esbuild": "0.20.2",
+    "framer-motion": "^11.2.12",
+    "github-slugger": "^2.0.0",
+    "google-spreadsheet": "^4.1.2",
+    "gray-matter": "^4.0.2",
+    "hast-util-from-html-isomorphic": "^2.0.0",
+    "image-size": "1.0.0",
+    "lucide-react": "^0.378.0",
+    "next": "14.2.3",
+    "next-contentlayer2": "0.4.6",
+    "next-image-zoom": "^1.1.7",
+    "next-themes": "^0.3.0",
+    "pliny": "0.2.1",
+    "postcss": "^8.4.24",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-ga": "^3.3.1",
+    "react-ga4": "^2.1.0",
+    "react-intersection-observer": "^9.13.0",
+    "react-lite-yt-embed": "^1.2.7",
+    "react-markdown": "^9.0.1",
+    "react-medium-image-zoom": "^5.2.3",
+    "react-modal": "^3.16.1",
+    "react-multi-carousel": "^2.8.5",
+    "react-paginate": "^8.2.0",
+    "reading-time": "1.5.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-citation": "^2.0.0",
+    "rehype-katex": "^7.0.0",
+    "rehype-preset-minify": "7.0.0",
+    "rehype-prism-plus": "^2.0.0",
+    "rehype-slug": "^6.0.0",
+    "remark": "^15.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "styled-components": "^6.1.12",
+    "tailwindcss": "^3.4.3",
+    "trieve-search-component": "0.0.8"
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^8.0.1",
+    "@types/mdx": "^2.0.12",
+    "@types/react": "^18.2.73",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.45.0",
+    "eslint-config-next": "14.2.3",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "husky": "^9.0.0",
+    "lint-staged": "^13.0.0",
+    "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "typescript": "^5.1.3"
+  },
+  "resolutions": {
+    "tar": "6.2.1"
+  },
+  "lint-staged": {
+    "*.+(js|jsx|ts|tsx)": [
+      "eslint --fix"
+    ],
+    "*.+(js|jsx|ts|tsx|json|css|md|mdx)": [
+      "prettier --write"
+    ]
+  }
 }