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

@@ -4,9 +4,14 @@ import React from "react"
 import clsx from "clsx"
 import { CopyButton } from "@/components"
 
-export type InlineCodeProps = React.ComponentProps<"code">
+export type InlineCodeProps = React.ComponentProps<"code"> & {
+  variant?: "default" | "grey-bg"
+}
 
-export const InlineCode = (props: InlineCodeProps) => {
+export const InlineCode = ({
+  variant = "default",
+  ...props
+}: InlineCodeProps) => {
   return (
     <CopyButton
       text={props.children as string}
@@ -18,11 +23,18 @@ export const InlineCode = (props: InlineCodeProps) => {
       <code
         {...props}
         className={clsx(
-          "border-medusa-tag-neutral-border border",
-          "text-medusa-tag-neutral-text",
-          "bg-medusa-tag-neutral-bg font-monospace text-code-label rounded-docs_sm py-0 px-[6px]",
-          "group-active:bg-medusa-bg-subtle-pressed group-focus:bg-medusa-bg-subtle-pressed",
-          "group-hover:bg-medusa-tag-neutral-bg-hover",
+          "text-medusa-tag-neutral-text border",
+          "font-monospace text-code-label rounded-docs_sm py-0 px-[5px]",
+          variant === "default" && [
+            "bg-medusa-tag-neutral-bg group-hover:bg-medusa-tag-neutral-bg-hover",
+            "group-active:bg-medusa-bg-subtle-pressed group-focus:bg-medusa-bg-subtle-pressed",
+            "border-medusa-tag-neutral-border",
+          ],
+          variant === "grey-bg" && [
+            "bg-medusa-bg-switch-off group-hover:bg-medusa-bg-switch-off-hover",
+            "group-active:bg-medusa-bg-switch-off-hover group-focus:bg-medusa-switch-off-hover",
+            "border-medusa-border-strong",
+          ],
           props.className
         )}
       />