docs: changes to AI assistant icon + add button to code blocks (#11227)

* docs: changes to AI assistant icon + add button to code blocks

* fix code blocks in questions

* collapse code block in answer

* styling fixes

* fix new line at cursor position

www/packages/docs-ui/src/components/CodeBlock/Actions/AskAi/index.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import React from "react"
+import { useAiAssistant, useSiteConfig } from "../../../../providers"
+import { useAiAssistantChat } from "../../../../providers/AiAssistant/Chat"
+import clsx from "clsx"
+import { Tooltip } from "../../../Tooltip"
+import Image from "next/image"
+
+export type CodeBlockCopyActionProps = {
+  source: string
+  inHeader: boolean
+}
+
+export const CodeBlockAskAiAction = ({
+  source,
+  inHeader,
+}: CodeBlockCopyActionProps) => {
+  const { setChatOpened } = useAiAssistant()
+  const { setQuestion, loading } = useAiAssistantChat()
+  const { config } = useSiteConfig()
+
+  const handleClick = () => {
+    if (loading) {
+      return
+    }
+    setQuestion(`\`\`\`tsx\n${source.trim()}\n\`\`\`\n\nExplain the code above`)
+    setChatOpened(true)
+  }
+
+  return (
+    <Tooltip
+      text="Ask AI"
+      tooltipClassName="font-base"
+      className={clsx("group")}
+      innerClassName={clsx(
+        inHeader && "flex",
+        "h-fit rounded-docs_sm",
+        "group-hover:bg-medusa-contrast-bg-base-hover group-focus:bg-medusa-contrast-bg-base-hover"
+      )}
+    >
+      <span
+        className={clsx(
+          !inHeader && "p-[6px]",
+          inHeader && "p-[4.5px]",
+          "cursor-pointer"
+        )}
+        onClick={handleClick}
+      >
+        <Image
+          src={`${config.basePath}/images/ai-assistent-luminosity.png`}
+          width={15}
+          height={15}
+          alt="Ask AI"
+        />
+      </span>
+    </Tooltip>
+  )
+}

www/packages/docs-ui/src/components/CodeBlock/Actions/Copy/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import React, { useEffect, useState } from "react"
 import { CopyButton } from "../../../.."
 import clsx from "clsx"

www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx

@@ -6,6 +6,7 @@ import { Link, Tooltip } from "@/components"
 import { ExclamationCircle, PlaySolid } from "@medusajs/icons"
 import { GITHUB_ISSUES_LINK } from "@/constants"
 import { CodeBlockCopyAction } from "./Copy"
+import { CodeBlockAskAiAction } from "./AskAi"
 
 export type CodeBlockActionsProps = {
   source: string
@@ -74,6 +75,7 @@ export const CodeBlockActions = ({
           ]
         )}
       >
+        <CodeBlockAskAiAction source={source} inHeader={inHeader} />
         {canShowApiTesting && (
           <Tooltip
             text="Test API"

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

@@ -38,9 +38,13 @@ export type CodeBlockMetaFields = {
   noCopy?: boolean
   noReport?: boolean
   noLineNumbers?: boolean
+  noAskAi?: boolean
   collapsibleLines?: string
   expandButtonLabel?: string
   isTerminal?: boolean
+  forceNoTitle?: boolean
+  collapsed?: boolean
+  wrapperClassName?: string
 } & CodeBlockHeaderMeta
 
 export type CodeBlockStyle = "loud" | "subtle" | "inline"
@@ -48,14 +52,11 @@ export type CodeBlockStyle = "loud" | "subtle" | "inline"
 export type CodeBlockProps = {
   source: string
   lang?: string
-  wrapperClassName?: string
   innerClassName?: string
   className?: string
-  collapsed?: boolean
   blockStyle?: CodeBlockStyle
   children?: React.ReactNode
   style?: React.HTMLAttributes<HTMLDivElement>["style"]
-  forceNoTitle?: boolean
   animateTokenHighlights?: boolean
   overrideColors?: {
     bg?: string
@@ -277,6 +278,7 @@ export const CodeBlock = ({
     getCollapsedLinesElm,
     getNonCollapsedLinesElm,
     type: collapsibleType,
+    isCollapsible,
     ...collapsibleResult
   } = useCollapsibleCodeLines({
     collapsibleLinesStr: collapsibleLines,
@@ -462,7 +464,7 @@ export const CodeBlock = ({
                       isSingleLine={tokens.length <= 1}
                     />
                   )}
-                {collapsibleType === "end" && (
+                {collapsibleType === "end" && isCollapsible(tokens) && (
                   <>
                     <CodeBlockCollapsibleFade
                       type={collapsibleType}