docs: add AI Assistant (#5249)

* added components

* added ai assistant button

* change styling

* improve AI assistant

* change to a drawer

* added command support into search

* add AiAssistant to all projects

* remove usage of Text component

* added error handling

* use recaptcha

* fix new configurations

* fix background color

* change suggested questions

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

@@ -6,10 +6,21 @@ import React, {
   useEffect,
   useState,
   useMemo,
+  useRef,
 } from "react"
-import { SearchModal, SearchModalProps } from "@/components"
+import { BadgeProps, Modal, Search, SearchProps } from "@/components"
 import { checkArraySameElms } from "../../utils"
 import algoliasearch, { SearchClient } from "algoliasearch/lite"
+import clsx from "clsx"
+import { CSSTransition, SwitchTransition } from "react-transition-group"
+
+export type SearchCommand = {
+  name: string
+  component: React.ReactNode
+  icon?: React.ReactNode
+  title: string
+  badge?: BadgeProps
+}
 
 export type SearchContextType = {
   isOpen: boolean
@@ -17,6 +28,10 @@ export type SearchContextType = {
   defaultFilters: string[]
   setDefaultFilters: (value: string[]) => void
   searchClient: SearchClient
+  commands: SearchCommand[]
+  command: SearchCommand | null
+  setCommand: React.Dispatch<React.SetStateAction<SearchCommand | null>>
+  modalRef: React.MutableRefObject<HTMLDialogElement | null>
 }
 
 const SearchContext = createContext<SearchContextType | null>(null)
@@ -32,7 +47,9 @@ export type SearchProviderProps = {
   children: React.ReactNode
   initialDefaultFilters?: string[]
   algolia: AlgoliaProps
-  searchProps: Omit<SearchModalProps, "algolia">
+  searchProps: Omit<SearchProps, "algolia">
+  commands?: SearchCommand[]
+  modalClassName?: string
 }
 
 export const SearchProvider = ({
@@ -40,11 +57,16 @@ export const SearchProvider = ({
   initialDefaultFilters = [],
   searchProps,
   algolia,
+  commands = [],
+  modalClassName,
 }: SearchProviderProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const [defaultFilters, setDefaultFilters] = useState<string[]>(
     initialDefaultFilters
   )
+  const [command, setCommand] = useState<SearchCommand | null>(null)
+
+  const modalRef = useRef<HTMLDialogElement | null>(null)
 
   const searchClient: SearchClient = useMemo(() => {
     const algoliaClient = algoliasearch(algolia.appId, algolia.apiKey)
@@ -89,10 +111,53 @@ export const SearchProvider = ({
         defaultFilters,
         setDefaultFilters,
         searchClient,
+        commands,
+        command,
+        setCommand,
+        modalRef,
       }}
     >
       {children}
-      <SearchModal {...searchProps} algolia={algolia} />
+      <Modal
+        contentClassName={clsx(
+          "!p-0 overflow-hidden relative h-full",
+          "rounded-none md:rounded-docs_lg flex flex-col justify-between"
+        )}
+        modalContainerClassName={clsx(
+          "!rounded-none md:!rounded-docs_lg",
+          "md:!h-[480px] h-screen",
+          "md:!w-[640px] w-screen",
+          "bg-medusa-bg-base"
+        )}
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        passedRef={modalRef}
+        className={modalClassName}
+      >
+        <SwitchTransition>
+          <CSSTransition
+            classNames={{
+              enter:
+                command === null
+                  ? "animate-fadeInLeft animate-fast"
+                  : "animate-fadeInRight animate-fast",
+              exit:
+                command === null
+                  ? "animate-fadeOutLeft animate-fast"
+                  : "animate-fadeOutRight animate-fast",
+            }}
+            timeout={300}
+            key={command?.name || "search"}
+          >
+            <>
+              {command === null && (
+                <Search {...searchProps} algolia={algolia} />
+              )}
+              {command?.component}
+            </>
+          </CSSTransition>
+        </SwitchTransition>
+      </Modal>
     </SearchContext.Provider>
   )
 }