search.tsx

import { autocomplete } from "@algolia/autocomplete-js";
import Typesense from "typesense";
import React, { createElement, Fragment, useEffect, useRef } from "react";
import { createRoot } from "react-dom/client";

// // Algolia search
// const appId = process.env.ALGOLIA_APP_ID
const apiKey = process.env.TYPESENSE_PUBLIC_API_KEY;
const indexName = process.env.TYPESENSE_INDEX;
const host = process.env.TYPESENSE_HOST;
// const searchClient = algoliasearch(appId, apiKey)

let searchClient = new Typesense.Client({
  apiKey: apiKey,
  nearestNode: {
    host: `${host}.a1.typesense.net`,
    port: 443,
    protocol: "https"
  },
  nodes: [
    {
      host: `${host}-1.a1.typesense.net`,
      port: 443,
      protocol: "https"
    },
    {
      host: `${host}-2.a1.typesense.net`,
      port: 443,
      protocol: "https"
    },
    {
      host: `${host}-3.a1.typesense.net`,
      port: 443,
      protocol: "https"
    }
  ],
  connectionTimeoutSeconds: 2
});

const CommandIcon: React.FC = ({ children }) => {
  return (
    <svg width="15" height="15">
      <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.2">
        {children}
      </g>
    </svg>
  );
};

const Chevron: React.FC = () => {
  return (
    <svg className="h-3 w-3 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
    </svg>
  );
};

const Result = ({ hit, components, category }) => {
  const hierarchy = hit.document.hierarchy.concat(hit.document.title);
  const isRootPage = hierarchy.length < 1;

  return (
    <a href={hit.document.itemUrl}>
      <div className="border-r border-gray-300 py-4 pl-2 h-full leading-relaxed">{category}</div>
      <div className="p-2 block">
        <div className="text-gray-800 text-md mb-1 font-medium leading-relaxed ">
          {!isRootPage &&
            hierarchy.map((t, i) => (
              <span key={`${hit.document.itemUrl}-${t}`}>
                <span className="w-2 h-2 inline" key={`${t.itemUrl}`}>
                  {t}
                </span>
                {i < hierarchy.length - 1 && (
                  <span className="inline ml-1 mr-1">
                    <Chevron />
                  </span>
                )}
              </span>
            ))}
          {isRootPage && <components.Highlight hit={hit} attribute="title" />}
        </div>
        <p className="text-gray-600 text-sm">
          {hit.content && <span dangerouslySetInnerHTML={{ __html: hit.content }} />}
          {!hit.content && <span style={{ wordBreak: "break-word" }}>{hit.document.itemUrl}</span>}
        </p>
      </div>
    </a>
  );
};

const Autocomplete = (props) => {
  const containerRef = useRef(null);
  const panelRootRef = useRef({});

  useEffect(() => {
    if (!containerRef.current) {
      return undefined;
    }

    const search = autocomplete({
      container: containerRef.current,
      renderer: { createElement, Fragment },
      render({ children, state, components }, root) {
        const { preview } = state.context as any;
        if (!panelRootRef.current[root]) {
          panelRootRef.current[root] = createRoot(root);
        }
        panelRootRef.current[root].render(
          <Fragment>
            <div className="aa-Grid">
              <div className="aa-Results aa-Column">{children}</div>
              <div className="aa-Footer border-t">
                <ul className="DocSearch-Commands">
                  <li>
                    <span className="DocSearch-Commands-Key">
                      <CommandIcon>
                        <path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" />
                      </CommandIcon>
                    </span>
                    <span className="DocSearch-Label">to select</span>
                  </li>
                  <li>
                    <span className="DocSearch-Commands-Key">
                      <CommandIcon>
                        <path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3" />
                      </CommandIcon>
                    </span>
                    <span className="DocSearch-Commands-Key">
                      <CommandIcon>
                        <path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3" />
                      </CommandIcon>
                    </span>
                    <span className="DocSearch-Label">to navigate</span>
                  </li>
                  <li>
                    <span className="DocSearch-Commands-Key">
                      <CommandIcon>
                        <path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" />
                      </CommandIcon>
                    </span>
                    <span className="DocSearch-Label">to close</span>
                  </li>
                </ul>
              </div>
            </div>
          </Fragment>
        );
      },
      ...props
    });

    return () => {
      search.destroy();
    };
  }, [props]);

  return <div ref={containerRef} />;
};

const Search = () => {
  return (
    <Autocomplete
      aria-label="Search query results"
      openOnFocus={false}
      detachedMediaQuery=""
      defaultActiveItemId={0}
      getSources={({ query }) => [
        {
          sourceId: "queryResults",
          async getItems() {
            const results = (query) =>
              searchClient
                .collections("vector_docs")
                .documents()
                .search({
                  q: query,
                  preset: "vector_docs_search",
                  exhaustive_search: true,
                  highlight_fields: "content",
                  highlight_full_fields: "content"
                })
                .then((result) => {
                  // order the hits by page group
                  // const hits = result.hits.sort((a, b) => (a.document.pageTitle < b.document.pageTitle ? -1 : 1))

                  // add page as category if there are duplicates
                  const hitsWithCategory = result.hits.map((h, i) => {
                    const prev = result.hits[i - 1] as any;
                    const title = h.document.pageTitle;

                    // if no previous hit is in this category
                    if (!prev) {
                      return { ...h, category: title };
                    }

                    // skip if there is already one in this category
                    if (prev && prev.document.pageTitle === title) {
                      return h;
                    }

                    // add category if needed
                    if (prev && prev.document.pageTitle !== title) {
                      return { ...h, category: title };
                    }

                    return h;
                  });
                  return hitsWithCategory;
                });
            return await results(query);
          },
          getItemUrl({ item }) {
            return item.document.itemUrl;
          },
          templates: {
            item({ item, components }) {
              const highlight =
                (item.highlights.length && item.highlights.find((h) => h.field === "content" || {}).value) ||
                item.document["content"];
              item["content"] = highlight;
              return <Result hit={item} components={components} category={item.category} />;
            },
            noResults() {
              return "No results found.";
            }
          }
        }
      ]}
    />
  );
};

const searchRoot = createRoot(document.getElementById("site-search"));
searchRoot.render(<Search />);