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/AiAssistant/ChatWindow/Footer/index.tsx

@@ -12,7 +12,7 @@ export const AiAssistantChatWindowFooter = () => {
       )}
     >
       <span className="text-medusa-fg-muted">Chat is cleared on refresh</span>
-      <span className="h-full w-px bg-medusa-border-base"></span>
+      <span className="h-docs_0.75 w-px bg-medusa-border-base"></span>
       <div className="flex items-center gap-docs_0.5">
         <span className="text-medusa-fg-subtle">Line break</span>
         <div className="flex items-center gap-[5px]">

www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Header/index.tsx

@@ -23,7 +23,9 @@ export const AiAssistantChatWindowHeader = () => {
         <Tooltip
           tooltipChildren={
             <>
-              This site is protected by reCAPTCHA and the{" "}
+              This site is protected by reCAPTCHA and
+              <br />
+              the{" "}
               <Link href="https://policies.google.com/privacy">
                 Google Privacy Policy
               </Link>{" "}
@@ -32,6 +34,7 @@ export const AiAssistantChatWindowHeader = () => {
             </>
           }
           clickable={true}
+          tooltipClassName={"!text-compact-small-plus"}
         >
           <ShieldCheck className="text-medusa-fg-muted" />
         </Tooltip>

www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Input/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from "react"
 import clsx from "clsx"
 import { useAiAssistantChat } from "../../../../providers/AiAssistant/Chat"
 import { ArrowUpCircleSolid } from "@medusajs/icons"
+import { useAiAssistant } from "../../../../providers"
 
 export const AiAssistantChatWindowInput = () => {
   const {
@@ -12,6 +13,7 @@ export const AiAssistantChatWindowInput = () => {
     loading,
     getThreadItems,
   } = useAiAssistantChat()
+  const { chatOpened } = useAiAssistant()
   const formRef = useRef<HTMLFormElement | null>(null)
 
   const onSubmit = (e?: React.FormEvent<HTMLFormElement>) => {
@@ -33,7 +35,17 @@ export const AiAssistantChatWindowInput = () => {
       return
     }
     if (e.shiftKey) {
-      setQuestion((prev) => `${prev}\n`)
+      const { selectionStart, selectionEnd } = e.currentTarget
+      setQuestion(
+        (prev) =>
+          `${prev.substring(0, selectionStart)}\n${prev.substring(selectionEnd)}`
+      )
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.selectionStart = inputRef.current.selectionEnd =
+            selectionStart + 1
+        }
+      }, 0)
     } else {
       onSubmit()
     }
@@ -52,6 +64,7 @@ export const AiAssistantChatWindowInput = () => {
 
   useEffect(() => {
     adjustTextareaHeight()
+    inputRef.current?.focus()
   }, [question])
 
   const handleTouch = (e: React.TouchEvent<HTMLTextAreaElement>) => {
@@ -61,6 +74,19 @@ export const AiAssistantChatWindowInput = () => {
     })
   }
 
+  useEffect(() => {
+    if (!chatOpened || !inputRef.current) {
+      return
+    }
+
+    const isCursorAtEnd =
+      inputRef.current.selectionStart === inputRef.current.value.length
+
+    if (isCursorAtEnd) {
+      inputRef.current.scrollTop = inputRef.current.scrollHeight
+    }
+  }, [chatOpened, inputRef.current])
+
   return (
     <div
       className={clsx(