Search modal (deepset-ai#114)

* integrations page * tutorial search modal * Add tutorial search backend (deepset-ai#119) * Add tutorial-search api for requests * Debug code * Fetch env variable * Check node version * Add more env variables * see error info to get * return error message * Remove console log and improve error handling * Improve error handling for dc request * Improve api calls * use search api * error state, anchor links, increase title size * disable searching empty query * fix * Remove low scored results * Remove "powered by" text from the logo --------- Co-authored-by: Bilge Yücel <[email protected]>
rossng · May 17, 2023 · def9885 · def9885
1 parent bcb59fb
commit def9885
Show file tree

Hide file tree

Showing 9 changed files with 814 additions and 53 deletions.
diff --git a/api/tutorial-search.js b/api/tutorial-search.js
@@ -0,0 +1,25 @@
+export default async function tutorialSearch(request, response) {
+ const DC_API_URL = "https://api.cloud.deepset.ai/api/v1/workspaces"
+ const options = {
+ method: 'POST',
+ headers: {
+ accept: 'application/json',
+ 'content-type': 'application/json',
+ authorization: `Bearer ${process.env.DC_API_KEY}`
+ },
+ body: JSON.stringify({debug: false, queries: [request.query.query]})
+ };
+
+ try {
+ const dcResponse = await fetch(`${DC_API_URL}/${process.env.DC_WORKSPACE_NAME}/pipelines/${process.env.DC_PIPELINE_NAME}/search`, options);
+
+ if (dcResponse.status === 200) {
+ const result = await dcResponse.text();
+ response.status(200).send(result)
+ } else { 
+ response.status(dcResponse.status).send(dcResponse.statusText)
+ }
+ } catch (error) {
+ console.error("Error:", error);
+ }
+}
diff --git a/config.toml b/config.toml
@@ -27,7 +27,7 @@ paginatePath = "/"
 
 [security]
  [security.funcs]
- getenv = ["^HUGO_", "ORBIT_API_KEY", "GITHUB_ACCESS_TOKEN", "GOOGLE_TAG_ANALYTICS"]
+ getenv = ["^HUGO_", "ORBIT_API_KEY", "GITHUB_ACCESS_TOKEN", "GOOGLE_TAG_ANALYTICS", "DC_API_KEY", "DC_WORKSPACE_NAME", "DC_PIPELINE_NAME"]
 
 [markup]
  # Code blocks

diff --git a/package.json b/package.json
@@ -1,4 +1,7 @@
 {
+ "engines": { 
+ "node": ">=18.13.0" 
+ },
  "devDependencies": {
  "autoprefixer": "^10.4.12",
  "axios": "^0.27.2",

diff --git a/themes/haystack/assets/sass/components/_modal.scss b/themes/haystack/assets/sass/components/_modal.scss
@@ -0,0 +1,254 @@
+// Modal container
+.search-modal-container {
+ position: fixed;
+ inset: 0;
+ z-index: 999;
+ background-color: rgba(0, 0, 0, 0.35);
+
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity var(--transition-fast) var(--ease);
+
+ @include sm {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &.is-active {
+ pointer-events: auto;
+ opacity: 1;
+
+ @include sm {
+ .search-modal {
+ transform: translateY(0);
+ }
+ }
+ }
+
+ // Inner modal
+ .search-modal {
+ position: relative;
+ width: 100%;
+ height: 100vh;
+ height: 100svh;
+ background-color: var(--color-white);
+
+ @include sm {
+ max-width: 43.75rem;
+ margin: 0 1.5rem;
+ height: auto;
+ max-height: 75vh;
+ border-radius: 0.375rem;
+ transform: translateY(2rem);
+ transition: transform var(--transition-fast) var(--ease);
+ }
+
+ // Modal header / search bar
+ .search-modal-header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem;
+ border-bottom: 1px solid #ebeced;
+
+ height: 4.625rem;
+
+ @include sm {
+ padding: 1rem 1.5rem;
+ }
+
+ > .search-wrapper {
+ width: 80%;
+
+ > input {
+ width: calc(100% - 3.125rem);
+ height: 2.5rem !important;
+ padding: 1rem;
+
+ &::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+ appearance: none;
+ height: 1rem;
+ width: 1rem;
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMC4xMjVDMy42NTExNyAwLjEyNSAwLjEyNSAzLjY1MTE3IDAuMTI1IDhDMC4xMjUgMTIuMzQ4OCAzLjY1MTE3IDE1Ljg3NSA4IDE1Ljg3NUMxMi4zNDg4IDE1Ljg3NSAxNS44NzUgMTIuMzQ4OCAxNS44NzUgOEMxNS44NzUgMy42NTExNyAxMi4zNDg4IDAuMTI1IDggMC4xMjVaTTEwLjkwNzQgMTAuOTkxOEw5Ljc0NzI3IDEwLjk4NjVMOCA4LjkwMzUyTDYuMjU0NDkgMTAuOTg0OEw1LjA5MjU4IDEwLjk5QzUuMDE1MjMgMTAuOTkgNC45NTE5NSAxMC45Mjg1IDQuOTUxOTUgMTAuODQ5NEM0Ljk1MTk1IDEwLjgxNiA0Ljk2NDI2IDEwLjc4NDQgNC45ODUzNSAxMC43NThMNy4yNzIyNyA4LjAzMzRMNC45ODUzNSA1LjMxMDU1QzQuOTY0MTEgNS4yODQ3OCA0Ljk1MjMzIDUuMjUyNTMgNC45NTE5NSA1LjIxOTE0QzQuOTUxOTUgNS4xNDE4IDUuMDE1MjMgNS4wNzg1MiA1LjA5MjU4IDUuMDc4NTJMNi4yNTQ0OSA1LjA4Mzc5TDggNy4xNjY4TDkuNzQ1NTEgNS4wODU1NUwxMC45MDU3IDUuMDgwMjdDMTAuOTgzIDUuMDgwMjcgMTEuMDQ2MyA1LjE0MTggMTEuMDQ2MyA1LjIyMDlDMTEuMDQ2MyA1LjI1NDMgMTEuMDM0IDUuMjg1OTQgMTEuMDEyOSA1LjMxMjNMOC43Mjk0OSA4LjAzNTE2TDExLjAxNDYgMTAuNzU5OEMxMS4wMzU3IDEwLjc4NjEgMTEuMDQ4IDEwLjgxNzggMTEuMDQ4IDEwLjg1MTJDMTEuMDQ4IDEwLjkyODUgMTAuOTg0OCAxMC45OTE4IDEwLjkwNzQgMTAuOTkxOFoiIGZpbGw9IiM5MDkwYjIiLz4KPC9zdmc+Cg==);
+ background-size: 1rem 1rem;
+ cursor: pointer;
+ }
+
+ &:focus {
+ box-shadow: inset 0px 0px 0px 1px var(--color-green);
+ }
+ }
+
+ > .search-icon {
+ height: 2.5rem !important;
+ cursor: pointer;
+ transition: background-color var(--transition-fast) var(--ease);
+
+ &:hover {
+ background-color: var(--color-bg-light-grey);
+ }
+ }
+ }
+
+ .modal-close-btn {
+ all: unset;
+ margin-left: auto;
+ cursor: pointer;
+ }
+ }
+
+ // Modal content / search results
+ .search-modal-content {
+ height: calc(100vh - 9.25rem);
+ height: calc(100svh - 9.25rem);
+ overflow-y: auto;
+
+ @include sm {
+ height: auto;
+ max-height: calc(75vh - 9.25rem);
+ }
+
+ .search-modal-info {
+ > div {
+ display: none;
+ padding: 2.5rem 1.5rem;
+ flex-direction: column;
+ gap: 0.5rem;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ max-width: 32rem;
+ margin: 0 auto;
+ height: calc(100vh - 9.25rem);
+ height: calc(100svh - 9.25rem);
+
+ @include sm {
+ height: auto;
+ padding: 4.5rem 1.5rem;
+ }
+
+ > svg {
+ flex-shrink: 0;
+ display: block;
+ }
+
+ h2 {
+ margin: 1rem 0 0;
+ font-size: var(--h3-size);
+ }
+
+ p {
+ font-size: var(--text-base);
+ }
+
+ .search-text {
+ color: var(--color-dark-grey);
+ }
+ }
+ }
+ }
+
+ // Modal footer / powered by Haystack
+ .search-modal-footer {
+ padding: 1.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ border-top: 1px solid #ebeced;
+
+ height: 4.625rem;
+
+ > span {
+ font-size: var(--text-label);
+ color: var(--color-dark-grey);
+ }
+
+ > svg {
+ width: 100%;
+ max-width: 9rem;
+ flex-shrink: 0;
+ }
+ }
+
+ &.default .search-modal-info > .default {
+ display: flex;
+ }
+
+ &.not-found .search-modal-info > .not-found {
+ display: flex;
+ }
+
+ &.loading .search-modal-info > .loading {
+ display: flex;
+ }
+
+ &.error .search-modal-info > .error {
+ display: flex;
+ }
+
+ // Cards
+ .search-modal-card {
+ display: flex;
+ gap: 1rem;
+ padding: 1.5rem;
+ text-decoration: none;
+ transition: background-color var(--transition-fast) var(--ease);
+
+ &:not(:last-child) {
+ border-bottom: 1px solid #ebeced;
+ }
+
+ &:hover {
+ background-color: var(--color-bg-light-grey);
+ }
+
+ > svg {
+ flex-shrink: 0;
+ }
+
+ h3 {
+ font-size: var(--text-body);
+ margin-bottom: 0.125rem;
+ }
+
+ p {
+ font-size: var(--text-base);
+ margin-bottom: 0.125rem;
+ }
+
+ .card-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.25rem;
+ margin-top: 0.25rem;
+ }
+
+ .card-tags > div {
+ font-size: 0.75rem;
+ padding: 0.25rem 0.45rem;
+ background-color: var(--color-light-grey);
+ color: var(--color-dark-blue);
+ text-transform: capitalize;
+ border-radius: 2px;
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+
+ &.featured {
+ background-color: var(--color-yellow);
+ }
+
+ .icon {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-items: center;
+ padding-bottom: 1px;
+ }
+ }
+ }
+ }
+}
diff --git a/themes/haystack/assets/sass/main.scss b/themes/haystack/assets/sass/main.scss
@@ -15,7 +15,7 @@
  */
 @import "components/buttons", "components/header", "components/navigation",
  "components/hero", "components/article", "components/loader",
- "components/forms", "components/code", "components/footer";
+ "components/forms", "components/code", "components/modal", "components/footer";
 
 /**
  * Pages