docs: redesign search + re-introduce ai assistant in v2 docs (#8678)

* docs: redesign search + re-introduce ai assistant in v2

* change version in ui

* show icon in case of error

* fixes based on feedback

www/packages/docs-ui/src/components/Search/Footer/index.tsx

@@ -0,0 +1,59 @@
+import clsx from "clsx"
+import React from "react"
+import { Kbd } from "../../.."
+
+export const SearchFooter = () => {
+  return (
+    <div
+      className={clsx(
+        "py-docs_0.75 hidden md:flex items-center justify-end px-docs_1",
+        "border-medusa-border-base border-t",
+        "bg-medusa-bg-field"
+      )}
+    >
+      <div className="flex items-center gap-docs_0.75">
+        <div className="flex items-center gap-docs_0.5">
+          <span
+            className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
+          >
+            Navigation
+          </span>
+          <span className="gap-[5px] flex">
+            <Kbd
+              className={clsx(
+                "!bg-medusa-bg-field-component !border-medusa-border-strong",
+                "!text-medusa-fg-subtle h-[18px] w-[18px] p-0"
+              )}
+            >
+              ↑
+            </Kbd>
+            <Kbd
+              className={clsx(
+                "!bg-medusa-bg-field-component !border-medusa-border-strong",
+                "!text-medusa-fg-subtle h-[18px] w-[18px] p-0"
+              )}
+            >
+              ↓
+            </Kbd>
+          </span>
+        </div>
+        <div className={clsx("h-docs_0.75 w-px bg-medusa-border-strong")}></div>
+        <div className="flex items-center gap-docs_0.5">
+          <span
+            className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
+          >
+            Open Result
+          </span>
+          <Kbd
+            className={clsx(
+              "!bg-medusa-bg-field-component !border-medusa-border-strong",
+              "!text-medusa-fg-subtle h-[18px] w-[18px] p-0"
+            )}
+          >
+            ↵
+          </Kbd>
+        </div>
+      </div>
+    </div>
+  )
+}

www/packages/docs-ui/src/components/Search/Hits/GroupName/index.tsx

@@ -9,7 +9,7 @@ export const SearchHitGroupName = ({ name }: SearchHitGroupNameProps) => {
   return (
     <span
       className={clsx(
-        "pb-docs_0.25 flex px-docs_0.5 pt-docs_1",
+        "pb-docs_0.25 flex px-docs_0.5 pt-docs_0.75",
         "text-medusa-fg-muted",
         "text-compact-x-small-plus"
       )}

www/packages/docs-ui/src/components/Search/Hits/index.tsx

@@ -70,7 +70,7 @@ export const SearchHitsWrapper = ({
   }
 
   return (
-    <div className="h-full overflow-auto">
+    <div className="h-full overflow-auto px-docs_0.5">
       {status !== "loading" && showNoResults && <SearchNoResult />}
       {indices.map((indexName, index) => (
         <Index indexName={indexName} key={index}>

www/packages/docs-ui/src/components/Search/NoResults/index.tsx

@@ -1,4 +1,4 @@
-import { ExclamationCircleSolid } from "@medusajs/icons"
+import { MagnifierAlert } from "@medusajs/icons"
 import clsx from "clsx"
 import React from "react"
 
@@ -6,14 +6,24 @@ export const SearchNoResult = () => {
   return (
     <div
       className={clsx(
-        "flex h-full w-full flex-col items-center justify-center gap-docs_1",
-        "text-medusa-fg-muted"
+        "flex h-full w-full flex-col items-center justify-center gap-docs_0.75"
       )}
     >
-      <ExclamationCircleSolid />
-      <span className="text-compact-small">
-        No results found. Try changing selected filters.
-      </span>
+      <MagnifierAlert className="text-medusa-fg-base" />
+      <div
+        className={clsx(
+          "flex flex-col justify-center items-center gap-docs_0.25",
+          "max-w-[360px]"
+        )}
+      >
+        <span className="text-compact-small-plus text-medusa-fg-subtle">
+          No results found.
+        </span>
+        <span className="text-medusa-fg-muted txt-small text-center">
+          We couldn&apos;t find any matches for your search. Please try changing
+          the filters or using different keywords.
+        </span>
+      </div>
     </div>
   )
 }

www/packages/docs-ui/src/components/Search/Suggestions/Item/index.tsx

@@ -14,7 +14,7 @@ export const SearchSuggestionItem = ({
   return (
     <div
       className={clsx(
-        "flex items-center",
+        "flex items-center justify-between gap-docs_0.75",
         "cursor-pointer rounded-docs_sm p-docs_0.5",
         "hover:bg-medusa-bg-base-hover",
         "focus:bg-medusa-bg-base-hover",

www/packages/docs-ui/src/components/Search/Suggestions/index.tsx

@@ -21,7 +21,7 @@ export const SearchSuggestions = ({ suggestions }: SearchSuggestionsProps) => {
   const { commands, setCommand } = useSearch()
 
   return (
-    <div className="h-full overflow-auto">
+    <div className="h-full overflow-auto px-docs_0.5">
       {commands.length > 0 && (
         <>
           <SearchHitGroupName name={"Commands"} />
@@ -30,12 +30,9 @@ export const SearchSuggestions = ({ suggestions }: SearchSuggestionsProps) => {
               onClick={() => setCommand(command)}
               key={index}
               tabIndex={index}
-              className="justify-between"
             >
-              <span className="flex gap-docs_0.75">
-                {command.icon}
-                <span>{command.title}</span>
-              </span>
+              {command.icon}
+              <span className="flex-1">{command.title}</span>
               {command.badge && <Badge {...command.badge} />}
             </SearchSuggestionItem>
           ))}

www/packages/docs-ui/src/components/Search/index.tsx

@@ -8,9 +8,10 @@ import { SearchSuggestions, type SearchSuggestionType } from "./Suggestions"
 import { AlgoliaProps, useSearch } from "@/providers"
 import { checkArraySameElms } from "@/utils"
 import { SearchHitsWrapper } from "./Hits"
-import { Button, Kbd, SelectBadge } from "@/components"
+import { Button, Kbd, SelectBadge, SpinnerLoading } from "@/components"
 import { MagnifyingGlass, XMark } from "@medusajs/icons"
 import { useSearchNavigation, type OptionType } from "@/hooks"
+import { SearchFooter } from "./Footer"
 
 export type SearchProps = {
   algolia: AlgoliaProps
@@ -68,7 +69,31 @@ export const Search = ({
   })
 
   return (
-    <div className="h-full">
+    <div className="h-full flex flex-col">
+      {filterOptions.length && (
+        <SelectBadge
+          multiple
+          options={filterOptions}
+          value={filters}
+          setSelected={(value) =>
+            setFilters(Array.isArray(value) ? [...value] : [value])
+          }
+          addSelected={(value) => setFilters((prev) => [...prev, value])}
+          removeSelected={(value) =>
+            setFilters((prev) => prev.filter((v) => v !== value))
+          }
+          showClearButton={false}
+          placeholder="Filters"
+          handleAddAll={(isAllSelected: boolean) => {
+            if (isAllSelected) {
+              setFilters(defaultFilters)
+            } else {
+              setFilters(filterOptions.map((option) => option.value))
+            }
+          }}
+          className="px-docs_1 pt-docs_1 bg-medusa-bg-base"
+        />
+      )}
       <InstantSearch
         indexName={algolia.mainIndexName}
         searchClient={searchClient}
@@ -86,27 +111,25 @@ export const Search = ({
               ),
               form: clsx("h-full md:rounded-t-docs_xl bg-transparent"),
               input: clsx(
-                "w-full h-full pl-docs_3 text-medusa-fg-base",
-                "placeholder:text-medusa-fg-muted",
-                "md:rounded-t-docs_xl text-compact-medium bg-transparent",
+                "w-full h-full px-docs_1 py-docs_0.75 text-medusa-fg-base",
+                "placeholder:text-medusa-fg-muted bg-medusa-bg-base",
+                "md:rounded-t-docs_xl text-compact-medium",
                 "appearance-none search-cancel:hidden border-0 active:outline-none focus:outline-none"
               ),
               submit: clsx("absolute top-[18px] left-docs_1 btn-clear p-0"),
-              reset: clsx(
-                "absolute top-docs_0.75 right-docs_1 hover:bg-medusa-bg-base-hover",
-                "p-[5px] md:rounded-docs_DEFAULT btn-clear"
-              ),
+              reset: clsx("absolute top-[18px] right-docs_1", "btn-clear"),
               loadingIndicator: clsx("absolute top-[18px] right-docs_1"),
             }}
-            submitIconComponent={() => (
-              <MagnifyingGlass className="text-medusa-fg-muted" />
-            )}
+            submitIconComponent={() => <></>}
             resetIconComponent={() => (
-              <XMark className="hidden md:block text-medusa-fg-subtle" />
+              <span className="text-medusa-fg-muted text-compact-small-plus hover:text-medusa-fg-subtle">
+                Clear
+              </span>
             )}
             placeholder="Find something..."
             autoFocus
             formRef={searchBoxRef}
+            loadingIconComponent={() => <SpinnerLoading />}
           />
           <Button
             variant="transparent"
@@ -121,7 +144,7 @@ export const Search = ({
             <XMark className="text-medusa-fg-muted" />
           </Button>
         </div>
-        <div className="mx-docs_0.5 md:flex-initial h-[calc(100%-120px)] md:h-[calc(100%-114px)] lg:max-h-[calc(100%-114px)] lg:min-h-[calc(100%-114px)]">
+        <div className="md:flex-initial h-[calc(100%-95px)] lg:max-h-[calc(100%-140px)] lg:min-h-[calc(100%-140px)]">
           <SearchEmptyQueryBoundary
             fallback={<SearchSuggestions suggestions={suggestions} />}
           >
@@ -135,59 +158,7 @@ export const Search = ({
           </SearchEmptyQueryBoundary>
         </div>
       </InstantSearch>
-      <div
-        className={clsx(
-          "py-docs_0.75 flex items-center justify-between px-docs_1",
-          "border-0 border-solid h-[57px]",
-          "border-medusa-border-base border-t",
-          "bg-medusa-bg-base"
-        )}
-      >
-        {filterOptions.length && (
-          <SelectBadge
-            multiple
-            options={filterOptions}
-            value={filters}
-            setSelected={(value) =>
-              setFilters(Array.isArray(value) ? [...value] : [value])
-            }
-            addSelected={(value) => setFilters((prev) => [...prev, value])}
-            removeSelected={(value) =>
-              setFilters((prev) => prev.filter((v) => v !== value))
-            }
-            showClearButton={false}
-            placeholder="Filters"
-            handleAddAll={(isAllSelected: boolean) => {
-              if (isAllSelected) {
-                setFilters(defaultFilters)
-              } else {
-                setFilters(filterOptions.map((option) => option.value))
-              }
-            }}
-          />
-        )}
-        <div className="hidden items-center gap-docs_1 md:flex">
-          <div className="flex items-center gap-docs_0.5">
-            <span
-              className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
-            >
-              Navigation
-            </span>
-            <span className="gap-docs_0.25 flex">
-              <Kbd>↑</Kbd>
-              <Kbd>↓</Kbd>
-            </span>
-          </div>
-          <div className="flex items-center gap-docs_0.5">
-            <span
-              className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
-            >
-              Open Result
-            </span>
-            <Kbd>↵</Kbd>
-          </div>
-        </div>
-      </div>
+      <SearchFooter />
     </div>
   )
 }