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/hooks/use-ai-assistant-chat-navigation/index.ts

@@ -7,6 +7,7 @@ import {
   useKeyboardShortcut,
   type useKeyboardShortcutOptions,
 } from "../use-keyboard-shortcut"
+import { useAiAssistantChat } from "../../providers/AiAssistant/Chat"
 
 export type UseAiAssistantChatNavigationProps = {
   getChatWindowElm: () => HTMLElement | null
@@ -23,6 +24,7 @@ export const useAiAssistantChatNavigation = ({
 }: UseAiAssistantChatNavigationProps) => {
   const shortcutKeys = useMemo(() => ["ArrowUp", "ArrowDown", "Enter"], [])
   const { chatOpened } = useAiAssistant()
+  const { question } = useAiAssistantChat()
 
   const handleKeyAction = (e: KeyboardEvent) => {
     const chatElm = getChatWindowElm()
@@ -30,7 +32,8 @@ export const useAiAssistantChatNavigation = ({
       !chatOpened ||
       e.metaKey ||
       e.ctrlKey ||
-      !chatElm?.contains(document.activeElement)
+      !chatElm?.contains(document.activeElement) ||
+      (question.length && question.includes("\n"))
     ) {
       return
     }
@@ -135,6 +138,7 @@ export const useAiAssistantChatNavigation = ({
     shortcutKeys: shortcutKeys,
     checkEditing: false,
     isLoading: false,
+    preventDefault: false,
     action: handleKeyAction,
     ...keyboardProps,
   })

www/packages/docs-ui/src/hooks/use-collapsible-code-lines/index.tsx

@@ -34,7 +34,7 @@ export const useCollapsibleCodeLines = ({
   const collapsedRange:
     | {
         start: number
-        end: number
+        end: number | undefined
       }
     | undefined = useMemo(() => {
     if (!collapsibleLinesStr) {
@@ -46,8 +46,10 @@ export const useCollapsibleCodeLines = ({
       .map((lineNumber) => parseInt(lineNumber))
 
     if (
-      splitCollapsedLines.length !== 2 ||
-      (splitCollapsedLines[0] !== 1 && splitCollapsedLines[1] < 2)
+      !splitCollapsedLines.length ||
+      (splitCollapsedLines.length >= 2 &&
+        splitCollapsedLines[0] !== 1 &&
+        splitCollapsedLines[1] < 2)
     ) {
       return
     }
@@ -58,6 +60,13 @@ export const useCollapsibleCodeLines = ({
     }
   }, [collapsibleLinesStr])
 
+  const isCollapsible = useCallback(
+    (tokens: Token[][]) => {
+      return collapsedRange && collapsedRange.start < tokens.length
+    },
+    [collapsedRange]
+  )
+
   const type: CollapsedCodeLinesPosition | undefined = useMemo(() => {
     if (!collapsedRange) {
       return undefined
@@ -81,7 +90,7 @@ export const useCollapsibleCodeLines = ({
       tokens: Token[][]
       highlightProps: HighlightProps
     }) => {
-      if (!collapsedRange || !type) {
+      if (!collapsedRange || !type || !isCollapsible(tokens)) {
         return <></>
       }
 
@@ -90,7 +99,9 @@ export const useCollapsibleCodeLines = ({
 
       const lines = tokens.slice(
         startIndex,
-        Math.min(collapsedRange.end, tokens.length)
+        collapsedRange.end
+          ? Math.min(collapsedRange.end, tokens.length)
+          : tokens.length
       )
 
       return (
@@ -99,7 +110,7 @@ export const useCollapsibleCodeLines = ({
         </CodeBlockCollapsibleLines>
       )
     },
-    [collapsedRange, collapsibleHookResult]
+    [collapsedRange, collapsibleHookResult, isCollapsible, type]
   )
 
   const getNonCollapsedLinesElm = useCallback(
@@ -110,13 +121,13 @@ export const useCollapsibleCodeLines = ({
       tokens: Token[][]
       highlightProps: HighlightProps
     }) => {
-      if (!collapsedRange) {
+      if (!collapsedRange || !isCollapsible(tokens)) {
         return getLines(tokens, highlightProps)
       }
 
       const isCollapseBeginning = collapsedRange.start === 1
       const lines = tokens.slice(
-        isCollapseBeginning ? collapsedRange.end : 0,
+        isCollapseBeginning ? collapsedRange.end || tokens.length : 0,
         isCollapseBeginning ? undefined : collapsedRange.start
       )
 
@@ -126,13 +137,14 @@ export const useCollapsibleCodeLines = ({
         isCollapseBeginning ? collapsedRange.end : 0
       )
     },
-    [collapsedRange, collapsibleHookResult]
+    [collapsedRange, collapsibleHookResult, isCollapsible]
   )
 
   return {
     getCollapsedLinesElm,
     getNonCollapsedLinesElm,
     type,
+    isCollapsible,
     ...collapsibleHookResult,
   }
 }