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
medusajs · Aug 23, 2024 · 320b01f · 320b01f
1 parent c63a08f
commit 320b01f
Show file tree

Hide file tree

Showing 23 changed files with 553 additions and 347 deletions.
diff --git a/www/apps/api-reference/providers/search.tsx b/www/apps/api-reference/providers/search.tsx
@@ -4,6 +4,8 @@ import {
   usePageLoading,
   SearchProvider as UiSearchProvider,
   searchFiltersV2,
+  AiAssistantIcon,
+  AiAssistantProvider,
 } from "docs-ui"
 import { config } from "../config"
 import basePathUrl from "../utils/base-path-url"
@@ -33,15 +35,14 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
             items: [
               "Install Medusa with create-medusa-app",
               "What is an API route?",
-              "What is a Module?",
               "What is a Workflow?",
             ],
           },
           {
             title: "Developing with Medusa",
             items: [
-              "How to create a Module",
               "How to create an API route",
+              "How to create a module",
               "How to create a data model",
               "How to create an admin widget",
             ],
@@ -52,6 +53,28 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
         ),
         filterOptions: searchFiltersV2,
       }}
+      commands={[
+        {
+          name: "ai-assistant",
+          icon: <AiAssistantIcon />,
+          component: (
+            <AiAssistantProvider
+              apiUrl={process.env.NEXT_PUBLIC_AI_ASSISTANT_URL || "temp"}
+              websiteId={process.env.NEXT_PUBLIC_AI_WEBSITE_ID || "temp"}
+              recaptchaSiteKey={
+                process.env.NEXT_PUBLIC_AI_API_ASSISTANT_RECAPTCHA_SITE_KEY ||
+                "temp"
+              }
+            />
+          ),
+          title: "AI Assistant",
+          badge: {
+            variant: "blue",
+            badgeType: "shaded",
+            children: "Beta",
+          },
+        },
+      ]}
     >
       {children}
     </UiSearchProvider>

diff --git a/www/apps/book/providers/search.tsx b/www/apps/book/providers/search.tsx
@@ -1,6 +1,11 @@
 "use client"
 
-import { SearchProvider as UiSearchProvider, searchFiltersV2 } from "docs-ui"
+import {
+  AiAssistantIcon,
+  AiAssistantProvider,
+  SearchProvider as UiSearchProvider,
+  searchFiltersV2,
+} from "docs-ui"
 import { config } from "../config"
 
 type SearchProviderProps = {
@@ -47,6 +52,28 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
         ),
         filterOptions: searchFiltersV2,
       }}
+      commands={[
+        {
+          name: "ai-assistant",
+          icon: <AiAssistantIcon />,
+          component: (
+            <AiAssistantProvider
+              apiUrl={process.env.NEXT_PUBLIC_AI_ASSISTANT_URL || "temp"}
+              websiteId={process.env.NEXT_PUBLIC_AI_WEBSITE_ID || "temp"}
+              recaptchaSiteKey={
+                process.env.NEXT_PUBLIC_AI_API_ASSISTANT_RECAPTCHA_SITE_KEY ||
+                "temp"
+              }
+            />
+          ),
+          title: "AI Assistant",
+          badge: {
+            variant: "blue",
+            badgeType: "shaded",
+            children: "Beta",
+          },
+        },
+      ]}
       initialDefaultFilters={["book"]}
     >
       {children}

diff --git a/www/apps/resources/providers/search.tsx b/www/apps/resources/providers/search.tsx
@@ -1,6 +1,11 @@
 "use client"
 
-import { SearchProvider as UiSearchProvider, searchFiltersV2 } from "docs-ui"
+import {
+  AiAssistantIcon,
+  AiAssistantProvider,
+  SearchProvider as UiSearchProvider,
+  searchFiltersV2,
+} from "docs-ui"
 import { config } from "../config"
 
 type SearchProviderProps = {
@@ -28,15 +33,36 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
             items: [
               "Medusa Configurations",
               "Commerce Modules",
-              "Medusa JS Reference",
-              "Medusa React Reference",
-              "Workflows API Reference",
+              "Medusa Workflows Reference",
+              "Storefront Development",
             ],
           },
         ],
         checkInternalPattern: new RegExp(`^${config.baseUrl}/v2/resources/.*`),
         filterOptions: searchFiltersV2,
       }}
+      commands={[
+        {
+          name: "ai-assistant",
+          icon: <AiAssistantIcon />,
+          component: (
+            <AiAssistantProvider
+              apiUrl={process.env.NEXT_PUBLIC_AI_ASSISTANT_URL || "temp"}
+              websiteId={process.env.NEXT_PUBLIC_AI_WEBSITE_ID || "temp"}
+              recaptchaSiteKey={
+                process.env.NEXT_PUBLIC_AI_API_ASSISTANT_RECAPTCHA_SITE_KEY ||
+                "temp"
+              }
+            />
+          ),
+          title: "AI Assistant",
+          badge: {
+            variant: "blue",
+            badgeType: "shaded",
+            children: "Beta",
+          },
+        },
+      ]}
       initialDefaultFilters={["resources"]}
     >
       {children}

diff --git a/www/apps/ui/src/providers/search.tsx b/www/apps/ui/src/providers/search.tsx
@@ -49,6 +49,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
                 process.env.NEXT_PUBLIC_AI_API_ASSISTANT_RECAPTCHA_SITE_KEY ||
                 "temp"
               }
+              version="v1"
             />
           ),
           title: "AI Assistant",

diff --git a/www/packages/docs-ui/src/components/AiAssistant/ThreadItem/Actions/index.tsx b/www/packages/docs-ui/src/components/AiAssistant/ThreadItem/Actions/index.tsx
@@ -1,13 +1,8 @@
 import React, { useState } from "react"
 import { ThreadType } from "../.."
 import clsx from "clsx"
-import {
-  Button,
-  type ButtonProps,
-  ThumbDownIcon,
-  ThumbUpIcon,
-} from "@/components"
-import { Check, SquareTwoStack } from "@medusajs/icons"
+import { Button, type ButtonProps } from "@/components"
+import { Check, SquareTwoStackMini, ThumbDown, ThumbUp } from "@medusajs/icons"
 import { useCopy } from "@/hooks"
 import { AiAssistantFeedbackType, useAiAssistant } from "@/providers"
 
@@ -43,29 +38,25 @@ export const AiAssistantThreadItemActions = ({
 
   return (
     <div
-      className={clsx(
-        "hidden md:flex gap-docs_0.25",
-        "text-medusa-fg-muted",
-        "sticky top-docs_1"
-      )}
+      className={clsx("hidden md:flex gap-docs_0.25", "text-medusa-fg-muted")}
     >
       <ActionButton onClick={handleCopy}>
-        {isCopied ? <Check /> : <SquareTwoStack />}
+        {isCopied ? <Check /> : <SquareTwoStackMini />}
       </ActionButton>
       {(feedback === null || feedback === "upvote") && (
         <ActionButton
           onClick={async () => handleFeedback("upvote", item.question_id)}
           className={clsx(feedback === "upvote" && "!text-medusa-fg-subtle")}
         >
-          <ThumbUpIcon />
+          <ThumbUp />
         </ActionButton>
       )}
       {(feedback === null || feedback === "downvote") && (
         <ActionButton
           onClick={async () => handleFeedback("downvote", item.question_id)}
           className={clsx(feedback === "downvote" && "!text-medusa-fg-subtle")}
         >
-          <ThumbDownIcon />
+          <ThumbDown />
         </ActionButton>
       )}
     </div>
@@ -79,7 +70,7 @@ const ActionButton = ({ children, className, ...props }: ButtonProps) => {
       className={clsx(
         "text-medusa-fg-muted hover:text-medusa-fg-subtle",
         "hover:bg-medusa-bg-subtle-hover",
-        "p-docs_0.125 rounded-docs_sm",
+        "!p-[4.5px] rounded-docs_sm",
         className
       )}
       {...props}

diff --git a/www/packages/docs-ui/src/components/AiAssistant/ThreadItem/index.tsx b/www/packages/docs-ui/src/components/AiAssistant/ThreadItem/index.tsx
@@ -1,8 +1,7 @@
 import clsx from "clsx"
 import React from "react"
 import { ThreadType } from ".."
-import { DotsLoading, MarkdownContent, QuestionMarkIcon } from "@/components"
-import { ExclamationCircle, Sparkles } from "@medusajs/icons"
+import { AiAssistantIcon, DotsLoading, MarkdownContent } from "@/components"
 import { AiAssistantThreadItemActions } from "./Actions"
 
 export type AiAssistantThreadItemProps = {
@@ -13,39 +12,37 @@ export const AiAssistantThreadItem = ({ item }: AiAssistantThreadItemProps) => {
   return (
     <div
       className={clsx(
-        "p-docs_1 flex justify-start gap-docs_1 items-start",
-        "text-medusa-fg-subtle border-solid border-0 border-b",
-        "border-medusa-border-base text-medium relative",
-        item.type === "question" && "bg-medusa-bg-base",
-        item.type === "answer" && "bg-medusa-bg-subtle"
+        "p-docs_0.5 flex gap-docs_0.75 items-start",
+        item.type === "question" && "justify-end",
+        item.type === "answer" && "!pr-[20px]"
       )}
     >
-      <span
+      {item.type !== "question" && <AiAssistantIcon />}
+      <div
         className={clsx(
-          "border border-solid border-medusa-border-base",
-          "rounded-docs_sm p-docs_0.125 bg-medusa-bg-component",
-          "text-medusa-fg-muted flex"
+          "txt-small text-medusa-fg-subtle",
+          item.type === "question" && [
+            "rounded-docs_xl bg-medusa-tag-neutral-bg",
+            "px-docs_0.75 py-docs_0.5",
+          ],
+          item.type !== "question" && "flex-1",
+          item.type === "answer" && "text-pretty"
         )}
       >
-        {item.type === "question" && <QuestionMarkIcon />}
-        {item.type === "answer" && <Sparkles />}
-        {item.type === "error" && <ExclamationCircle />}
-      </span>
-      <div className="md:max-w-[calc(100%-134px)] md:w-[calc(100%-134px)]">
         {item.type === "question" && <>{item.content}</>}
         {item.type === "answer" && (
-          <>
+          <div className="flex flex-col gap-docs_0.75">
             {!item.question_id && item.content.length === 0 && <DotsLoading />}
-            <MarkdownContent>{item.content}</MarkdownContent>
-          </>
+            <MarkdownContent className="[&>*:last-child]:mb-0">
+              {item.content}
+            </MarkdownContent>
+            {item.question_id && <AiAssistantThreadItemActions item={item} />}
+          </div>
         )}
         {item.type === "error" && (
           <span className="text-medusa-fg-error">{item.content}</span>
         )}
       </div>
-      {item.type === "answer" && item.question_id && (
-        <AiAssistantThreadItemActions item={item} />
-      )}
     </div>
   )
 }
-Original file line number
+Diff line change
@@ Expand Up @@
                     process.env.NEXT_PUBLIC_AI_API_ASSISTANT_RECAPTCHA_SITE_KEY ||
                     "temp"
                   }
+                  version="v1"
                 />
               ),
               title: "AI Assistant",
@@ Expand Down @@