[DOCS]chore: small style changes in search (#841)

.changeset/empty-donkeys-design.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/docs/.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
   extends: ['@kadena-dev/eslint-config/profile/next'],
   parserOptions: { tsconfigRootDir: __dirname },
   rules: {
+    '@typescript-eslint/strict-boolean-expressions': 'off',
     '@kadena-dev/typedef-var': 'off',
   },
 };

packages/apps/docs/package.json

@@ -30,7 +30,7 @@
     "test": "echo 'No tests, until there is time to debug the build'"
   },
   "dependencies": {
-    "@7-docs/edge": "~0.3.1",
+    "@7-docs/edge": "~0.3.2",
     "@google-analytics/data": "~3.2.2",
     "@kadena/react-components": "workspace:*",
     "@kadena/react-ui": "workspace:*",
@@ -62,7 +62,7 @@
     "styled-components": "~5.3.10"
   },
   "devDependencies": {
-    "@7-docs/cli": "~0.3.1",
+    "@7-docs/cli": "~0.3.2",
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",

packages/apps/docs/src/components/Layout/Full/components/Aside/ListItem.tsx

@@ -23,7 +23,7 @@ export const ListItem: FC<IProps> = ({
   const router = useRouter();
 
   if (item.title === undefined || item.title === '') return null;
-  const slug = `#${createSlug(item.title, item.index, item.parentTitle)}`;
+  const slug = `#${createSlug(item.title)}`;
 
   const handleItemClick = (ev: MouseEvent<HTMLAnchorElement>): void => {
     ev.preventDefault();

packages/apps/docs/src/components/Markdown/Heading/Heading.tsx

@@ -10,21 +10,13 @@ interface IProp {
   as: TagType;
   variant?: TagType;
   children: ReactNode;
-  index?: number;
-  parentTitle?: string;
 }
 
 export interface IHeader {
   children: string;
 }
 
-export const TaggedHeading: FC<IProp> = ({
-  children,
-  as,
-  variant,
-  index,
-  parentTitle,
-}) => {
+export const TaggedHeading: FC<IProp> = ({ children, as, variant }) => {
   let slugInputStr = '';
 
   if (Array.isArray(children)) {
@@ -42,7 +34,7 @@ export const TaggedHeading: FC<IProp> = ({
     slugInputStr = children;
   }
 
-  const slug = createSlug(slugInputStr, index, parentTitle);
+  const slug = createSlug(slugInputStr);
 
   const content = (
     <>

packages/apps/docs/src/components/Search/Search.tsx

@@ -1,4 +1,5 @@
 import { SearchResults } from './components/SearchResults';
+import { removeUnnecessarySearchRecords } from './utils';
 
 import { useSearch } from '@/hooks';
 import { mapMatches } from '@/pages/api/semanticsearch';
@@ -22,9 +23,9 @@ export const Search: FC<IProps> = ({ query, hasScroll, limitResults }) => {
     isLoading,
   } = useSearch(limitResults);
 
-  const semanticResults = metadata
-    .map((metadata) => ({ ...metadata, filePath: metadata.filePath })) // TODO delete this line
-    .map(mapMatches);
+  const semanticResults = removeUnnecessarySearchRecords(
+    metadata.map(mapMatches),
+  );
 
   useEffect(() => {
     if (

packages/apps/docs/src/components/Search/components/SearchResults.tsx

@@ -1,6 +1,14 @@
-import { Button, Notification, Stack, Tabs, useModal } from '@kadena/react-ui';
+import {
+  Button,
+  Heading,
+  Notification,
+  Stack,
+  Tabs,
+  useModal,
+} from '@kadena/react-ui';
 
 import type { IQueryResult } from '../../../types';
+import { removeUnnecessarySearchRecords } from '../utils';
 
 import {
   loadingWrapperClass,
@@ -10,7 +18,7 @@ import {
 import { ResultCount } from './ResultCount';
 import { StaticResults } from './StaticResults';
 
-import { Loading } from '@/components';
+import { BrowseSection, Loading } from '@/components';
 import { IConversation } from '@/hooks/useSearch/useConversation';
 import { filePathToRoute } from '@/pages/api/semanticsearch';
 import classnames from 'classnames';
@@ -75,6 +83,7 @@ export const SearchResults: FC<IProps> = ({
   }, [isMounted]);
 
   if (!isMounted) return null;
+
   return (
     <section onClick={rememberTab}>
       <Tabs.Root defaultSelected={selectedTabName}>
@@ -103,7 +112,9 @@ export const SearchResults: FC<IProps> = ({
                   limitResults={limitResults}
                   results={semanticResults}
                 />
-                {limitResults !== undefined && query !== undefined ? (
+                {limitResults !== undefined &&
+                limitResults < semanticResults.length &&
+                query !== undefined ? (
                   <Stack justifyContent="flex-end">
                     <Link href={`/search?q=${query}`} passHref legacyBehavior>
                       <Button
@@ -139,22 +150,35 @@ export const SearchResults: FC<IProps> = ({
               </Notification.Root>
             )}
 
-            {conversation?.history.map((interaction, idx) => (
-              <div key={`${interaction.input}-${idx}`}>
-                <ReactMarkdown>{interaction?.output}</ReactMarkdown>
-                <div>
-                  {interaction?.metadata?.map((item, innerIdx) => {
-                    if (!item.filePath) return;
-                    const url = filePathToRoute(item.filePath);
-                    return (
-                      <Link key={`${url}-${innerIdx}`} href={url}>
-                        {url}
-                      </Link>
-                    );
-                  })}
+            {conversation?.history.map((interaction, idx) => {
+              const metadata = removeUnnecessarySearchRecords(
+                interaction?.metadata,
+              );
+
+              return (
+                <div key={`${interaction.input}-${idx}`}>
+                  <ReactMarkdown>{interaction?.output}</ReactMarkdown>
+                  <div>
+                    <Heading variant="h4">Sources:</Heading>
+                    {metadata.length > 1 && (
+                      <BrowseSection>
+                        {metadata.map((item, innerIdx) => {
+                          const url = filePathToRoute(
+                            item.filePath,
+                            item.header,
+                          );
+                          return (
+                            <Link key={`${url}-${innerIdx}`} href={url}>
+                              {item.title}
+                            </Link>
+                          );
+                        })}
+                      </BrowseSection>
+                    )}
+                  </div>
                 </div>
-              </div>
-            ))}
+              );
+            })}
 
             <div>{outputStream}</div>
           </div>

packages/apps/docs/src/components/Search/components/StaticResults.tsx

@@ -42,8 +42,7 @@ const Item: FC<IResultProps> = ({ item }) => {
 
   if (!item.filePath) return;
 
-  const url = filePathToRoute(item.filePath);
-
+  const url = filePathToRoute(item.filePath, item.header);
   const content = item.content ?? '';
 
   return (

packages/apps/docs/src/components/Search/styles.css.ts

@@ -59,9 +59,10 @@ export const loadingWrapperClass = style([
     display: 'flex',
     justifyContent: 'center',
     paddingY: '$10',
-    background: '$layoutSurfaceOverlay',
+    backgroundColor: '$background',
   }),
   {
+    opacity: '.8',
     inset: 0,
   },
 ]);

packages/apps/docs/src/components/Search/utils.ts

@@ -0,0 +1,11 @@
+import { StreamMetaData } from '@7-docs/edge';
+
+export const removeUnnecessarySearchRecords = (
+  arr: Partial<StreamMetaData>[] = [],
+): Partial<StreamMetaData>[] => {
+  const ids = arr.map((item) => item.title);
+  return arr.filter(
+    ({ title, score }, index) =>
+      !ids.includes(title, index + 1) && score && score > 0.75,
+  );
+};

packages/apps/docs/src/pages/_app.tsx

@@ -16,7 +16,8 @@ import { getLayout } from '@/utils';
 import { MDXProvider } from '@mdx-js/react';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
-import React, { FC } from 'react';
+import { useRouter } from 'next/router';
+import React, { FC, useEffect } from 'react';
 
 const GlobalStyles = globalCss({
   ...baseGlobalStyles,
@@ -48,9 +49,21 @@ export const MyApp = ({
   Component: FC<IPageProps>;
 }): JSX.Element => {
   const props = deserializePageProps(pageProps);
-
   const Layout = getLayout(props.frontmatter.layout);
 
+  // check for a router query
+  const router = useRouter();
+  useEffect(() => {
+    if (router.isReady) {
+      const { q } = router.query;
+      if (q && router.pathname !== '/search') {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        router.replace(`/search?q=${q}`);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady]);
+
   return (
     <>
       <Head>

packages/apps/docs/src/pages/api/search.ts

@@ -1,17 +1,19 @@
 import type { MetaData } from '@7-docs/edge';
 import { getCompletionHandler, pinecone } from '@7-docs/edge';
 
-const namespace = 'kda-docs';
+let namespace = 'kda-docs-dev';
+if (process.env.NODE_ENV === 'production') {
+  namespace = 'kda-docs';
+}
 
 export const prompt = `Context: {CONTEXT}
 
 Question: {QUERY}
 
 Answer:`;
 
-export const system = `You are an enthusiastic expert on the subject of kadena and eager to help out!
-Answer the question faithfully using the provided context.
-Use Markdown.
+export const system = `You are an engineering wizard, experienced at solving complex problems across various disciplines. Your knowledge is both wide and deep. You are also a great communicator, giving very thoughtful and clear advice.
+Try first to find definitions for key words on the page that is just for definitions. Only then find it on more general pages.
 Always try to include a code example in language-specific fenced code blocks, preferably typescript or pact, especially if it's provided in the context.
 If the answer is not provided in the context, say "Sorry, I don\'t have that information.".`;
 
@@ -33,6 +35,9 @@ const query: QueryFn = (vector: number[]) =>
     token: PINECONE_API_KEY,
     vector,
     namespace,
+    options: {
+      topK: 50,
+    },
   });
 
 export const config = {
@@ -44,5 +49,5 @@ export default getCompletionHandler({
   query,
   system,
   prompt,
-  fields: 'title,content,filePath',
+  fields: 'title,content,filePath,header,score',
 });

packages/apps/docs/src/pages/api/semanticsearch.ts

@@ -1,14 +1,16 @@
 import { menuData } from '@/_generated/menu.mjs';
 import { IFrontmatterData } from '@/types';
 import { IMenuData } from '@/types/Layout';
+import { createSlug } from '@/utils';
 import type { StreamMetaData } from '@7-docs/edge';
 
 interface IQueryResult extends StreamMetaData {
   content?: string;
   description?: string;
 }
 
-export const filePathToRoute = (filename: string): string => {
+export const filePathToRoute = (filename?: string, header?: string): string => {
+  if (!filename) return '';
   // Remove "src/pages" from the start of the filename
   let route = filename.replace(/^src\/pages/, '');
 
@@ -23,6 +25,10 @@ export const filePathToRoute = (filename: string): string => {
     route = `/${route}`;
   }
 
+  if (header) {
+    route = `${route}#${createSlug(header)}`;
+  }
+
   return route;
 };
 
@@ -76,7 +82,7 @@ export const mapMatches = (metadata: StreamMetaData): IQueryResult => {
       : undefined;
   const data =
     typeof metadata.filePath !== 'undefined'
-      ? getData(filePathToRoute(metadata.filePath))
+      ? getData(filePathToRoute(metadata.filePath, metadata.header))
       : {};
 
   return {