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/Select/Badge/index.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useRef, useState } from "react"
 import { useSelect } from "@/hooks"
 import clsx from "clsx"
 import { SelectDropdown, SelectProps } from ".."
+import { TriangleDownMini } from "@medusajs/icons"
 
 export const SelectBadge = ({
   value,
@@ -20,16 +21,21 @@ export const SelectBadge = ({
   const [open, setOpen] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
   const dropdownRef = useRef<HTMLDivElement>(null)
-  const { isValueSelected, isAllSelected, handleChange, handleSelectAll } =
-    useSelect({
-      value,
-      options,
-      multiple,
-      setSelected,
-      removeSelected,
-      addSelected,
-      handleAddAll,
-    })
+  const {
+    isValueSelected,
+    isAllSelected,
+    handleChange,
+    handleSelectAll,
+    setSelectedValues,
+  } = useSelect({
+    value,
+    options,
+    multiple,
+    setSelected,
+    removeSelected,
+    addSelected,
+    handleAddAll,
+  })
 
   const getSelectedText = useCallback(() => {
     let str = ""
@@ -38,7 +44,7 @@ export const SelectBadge = ({
     )
 
     if (isAllSelected) {
-      str = "All Areas"
+      str = "All areas"
     } else {
       if (
         (!Array.isArray(value) && !value) ||
@@ -54,37 +60,28 @@ export const SelectBadge = ({
       <>
         <span
           className={clsx(
-            "text-medusa-fg-base",
-            "text-compact-x-small-plus",
-            "inline-block max-w-[60px] overflow-hidden text-ellipsis"
+            "text-compact-x-small-plus text-medusa-tag-neutral-text"
           )}
         >
           {str}
+          {!isAllSelected && selectedOptions.length > 1 && (
+            <> + {selectedOptions.length - 1}</>
+          )}
         </span>
-        {!isAllSelected && selectedOptions.length > 1 && (
-          <span
-            className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
-          >
-            {" "}
-            + {selectedOptions.length}
-          </span>
-        )}
       </>
     )
   }, [isAllSelected, options, value])
 
   return (
-    <div className={clsx("relative", className)}>
+    <div className={clsx("relative w-fit", className)}>
       <div
         className={clsx(
-          "border-medusa-border-base rounded-docs_sm border border-solid",
-          "hover:bg-medusa-bg-subtle-hover",
-          "py-docs_0.25 h-fit cursor-pointer px-docs_0.5",
-          "flex items-center gap-[6px] whitespace-nowrap",
+          "border-medusa-tag-neutral-border rounded-docs_sm border border-solid",
+          "h-fit cursor-pointer pl-docs_0.25 pr-[3px] text-medusa-tag-neutral-text",
+          "bg-medusa-tag-neutral-bg",
+          "flex items-center gap-[3px] whitespace-nowrap",
           "text-medusa-fg-subtle",
-          !open && "bg-medusa-bg-subtle",
-          open && "bg-medusa-bg-subtle-hover",
-          className
+          open && "bg-medusa-tag-neutral-bg-hover"
         )}
         ref={ref}
         onClick={(e) => {
@@ -93,10 +90,8 @@ export const SelectBadge = ({
           }
         }}
       >
-        <span className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}>
-          Show results from:{" "}
-        </span>
         {getSelectedText()}
+        <TriangleDownMini className="text-medusa-tag-neutral-icon" />
       </div>
       <input
         type="hidden"
@@ -115,10 +110,7 @@ export const SelectBadge = ({
         handleChange={handleChange}
         parentRef={ref}
         passedRef={dropdownRef}
-        className={clsx(
-          "!top-[unset] !bottom-full",
-          open && "!-translate-y-docs_0.5"
-        )}
+        setSelectedValues={setSelectedValues}
       />
     </div>
   )

www/packages/docs-ui/src/components/Select/Dropdown/index.tsx

@@ -19,6 +19,7 @@ export type SelectDropdownProps = {
   parentRef?: React.RefObject<HTMLDivElement>
   className?: string
   passedRef?: Ref<HTMLDivElement>
+  setSelectedValues?: (values: string[]) => void
 }
 
 export const SelectDropdown = ({
@@ -34,6 +35,7 @@ export const SelectDropdown = ({
   parentRef,
   className,
   passedRef,
+  setSelectedValues,
 }: SelectDropdownProps) => {
   const ref = useRef<HTMLDivElement | null>(null)
   const setRefs = useCallback(
@@ -50,7 +52,11 @@ export const SelectDropdown = ({
   )
 
   const handleChange = (clickedValue: string, wasSelected: boolean) => {
-    handleSelectChange?.(clickedValue, wasSelected)
+    if (isAllSelected && setSelectedValues) {
+      setSelectedValues([clickedValue])
+    } else {
+      handleSelectChange?.(clickedValue, wasSelected)
+    }
     if (!multiple) {
       setOpen(false)
     }
@@ -78,43 +84,75 @@ export const SelectDropdown = ({
   }, [handleOutsideClick])
 
   const getSelectOption = (option: OptionType, index: number) => {
-    const isSelected = option.isAllOption
-      ? isAllSelected
-      : isValueSelected(option.value)
+    const originalIsSelected = isValueSelected(option.value)
+    const isSelected = isAllSelected
+      ? option.isAllOption || false
+      : originalIsSelected
 
     return (
       <li
         key={index}
         className={clsx(
-          "pr-docs_0.75 relative rounded-docs_sm py-docs_0.5 pl-docs_2.5",
-          "hover:bg-medusa-bg-base-hover",
-          "[&>svg]:left-docs_0.75 cursor-pointer [&>svg]:absolute [&>svg]:top-docs_0.5",
-          !isSelected && "text-compact-small",
-          isSelected && "text-compact-small-plus"
+          "px-docs_0.25",
+          index <= 0 && "rounded-t-docs_DEFAULT",
+          index === options.length - 1 && "rounded-b-docs_DEFAULT"
         )}
         onClick={() => {
           if (option.isAllOption) {
             handleSelectAll()
           } else {
-            handleChange(option.value, isSelected)
+            handleChange(option.value, originalIsSelected)
           }
         }}
       >
-        {isSelected && (
-          <>
-            {multiple && <CheckMini className="text-medusa-fg-base" />}
-            {!multiple && <EllipseMiniSolid className="text-medusa-fg-base" />}
-          </>
-        )}
-        {option.label}
+        <div
+          className={clsx(
+            "px-docs_0.5 py-docs_0.25 flex-1 min-w-max rounded-docs_xs",
+            "hover:bg-medusa-bg-component-hover cursor-pointer",
+            "flex gap-docs_0.5 text-medusa-fg-base items-center",
+            !isSelected && "text-compact-small",
+            isSelected && "text-compact-small-plus"
+          )}
+        >
+          <span>
+            {isSelected && (
+              <>
+                {option.isAllOption && <EllipseMiniSolid />}
+                {!option.isAllOption && (
+                  <>
+                    {multiple && <CheckMini />}
+                    {!multiple && <EllipseMiniSolid />}
+                  </>
+                )}
+              </>
+            )}
+            {!isSelected && <EllipseMiniSolid className="invisible" />}
+          </span>
+          <span className="flex-1">{option.label}</span>
+        </div>
       </li>
     )
   }
 
+  const getDivider = () => (
+    <svg
+      width="176"
+      height="8"
+      viewBox="0 0 176 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="168" height="8" transform="translate(4)" fill="#FAFAFA" />
+      <rect y="4" width="176" height="1" fill="white" />
+      <rect y="3" width="176" height="1" fill="#E4E4E7" />
+    </svg>
+  )
+
   return (
     <div
       className={clsx(
-        "absolute top-full left-0 w-full",
+        "absolute left-0 md:left-docs_1",
+        "z-10",
         "h-0 translate-y-0 overflow-hidden transition-transform",
         open && "h-auto translate-y-docs_0.5 !overflow-visible",
         className
@@ -123,20 +161,25 @@ export const SelectDropdown = ({
     >
       <ul
         className={clsx(
-          "p-docs_0.25 mb-0 w-full overflow-auto rounded-docs_DEFAULT",
-          "bg-medusa-bg-base text-medusa-fg-base",
-          "shadow-elevation-flyout dark:shadow-elevation-flyout-dark list-none"
+          "mb-0 py-docs_0.25 overflow-auto rounded-docs_DEFAULT",
+          "bg-medusa-bg-component text-medusa-fg-base",
+          "shadow-elevation-flyout dark:shadow-elevation-flyout-dark list-none",
+          "flex flex-col"
         )}
       >
-        {addAll &&
-          getSelectOption(
-            {
-              value: "all",
-              label: "All Areas",
-              isAllOption: true,
-            },
-            -1
-          )}
+        {addAll && (
+          <>
+            {getSelectOption(
+              {
+                value: "all",
+                label: "All Areas",
+                isAllOption: true,
+              },
+              -1
+            )}
+            {getDivider()}
+          </>
+        )}
         {options.map(getSelectOption)}
       </ul>
     </div>