From 5c85b51d26d24341588d450ebc6080a7618b17b9 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Thu, 30 Jan 2025 16:25:55 +0200
Subject: [PATCH] docs: set max width in assistant (#11231)

* docs: set max width in assistant

* allow scrolling while showing answer
---
 .../AiAssistant/ThreadItem/index.tsx          |  2 +-
 .../src/components/MainNav/Version/index.tsx  |  2 +-
 .../src/providers/AiAssistant/Chat/index.tsx  | 42 +++++++++++++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/www/packages/docs-ui/src/components/AiAssistant/ThreadItem/index.tsx b/www/packages/docs-ui/src/components/AiAssistant/ThreadItem/index.tsx
index e62c646f32..95ef9cc8ac 100644
--- a/www/packages/docs-ui/src/components/AiAssistant/ThreadItem/index.tsx
+++ b/www/packages/docs-ui/src/components/AiAssistant/ThreadItem/index.tsx
@@ -34,7 +34,7 @@ export const AiAssistantThreadItem = ({ item }: AiAssistantThreadItemProps) => {
           "txt-small text-medusa-fg-base",
           item.type === "question" && [
             "rounded-docs_xl bg-medusa-tag-neutral-bg",
-            "px-docs_0.75 py-docs_0.5 max-w-full",
+            "px-docs_0.75 py-docs_0.5 max-w-full md:max-w-[400px]",
           ],
           item.type !== "question" && "flex-1",
           item.type === "answer" && "text-pretty flex-1 max-w-[calc(100%-20px)]"
diff --git a/www/packages/docs-ui/src/components/MainNav/Version/index.tsx b/www/packages/docs-ui/src/components/MainNav/Version/index.tsx
index be8cb068ab..31e3aedefe 100644
--- a/www/packages/docs-ui/src/components/MainNav/Version/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/Version/index.tsx
@@ -44,7 +44,7 @@ export const MainNavVersion = () => {
       >
         <Tooltip html="View the release notes<br/>on GitHub">
           <span
-            className="relative text-compact-small-plus"
+            className="relative text-compact-small-plus block"
             onMouseOut={afterHover}
           >
             <span className="flex justify-center items-center">
diff --git a/www/packages/docs-ui/src/providers/AiAssistant/Chat/index.tsx b/www/packages/docs-ui/src/providers/AiAssistant/Chat/index.tsx
index 93c60a40c5..4ef14ac8fa 100644
--- a/www/packages/docs-ui/src/providers/AiAssistant/Chat/index.tsx
+++ b/www/packages/docs-ui/src/providers/AiAssistant/Chat/index.tsx
@@ -98,6 +98,7 @@ export const AiAssistantChatProvider = ({
     null
   )
   const [loading, setLoading] = useState(false)
+  const [preventAutoScroll, setPreventAutoScroll] = useState(false)
   const { getAnswer } = useAiAssistant()
   const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
   const contentRef = useRef<HTMLDivElement>(null)
@@ -107,6 +108,7 @@ export const AiAssistantChatProvider = ({
       return
     }
     setLoading(true)
+    setPreventAutoScroll(false)
     setAnswer("")
     setThread((prevThread) => [
       ...prevThread,
@@ -160,6 +162,9 @@ export const AiAssistantChatProvider = ({
   }
 
   const scrollToBottom = () => {
+    if (preventAutoScroll) {
+      return
+    }
     const parent = contentRef.current?.parentElement as HTMLElement
 
     parent.scrollTop = parent.scrollHeight
@@ -311,6 +316,43 @@ export const AiAssistantChatProvider = ({
     scrollToBottom()
   })
 
+  const handleUserScroll = useCallback(() => {
+    if (!question.length || preventAutoScroll) {
+      return
+    }
+
+    setPreventAutoScroll(true)
+  }, [question, preventAutoScroll])
+
+  const handleUserScrollEnd = useCallback(() => {
+    if (preventAutoScroll) {
+      setPreventAutoScroll(false)
+    }
+  }, [preventAutoScroll])
+
+  useEffect(() => {
+    if (!contentRef.current?.parentElement) {
+      return
+    }
+
+    contentRef.current.parentElement.addEventListener("wheel", handleUserScroll)
+    contentRef.current.parentElement.addEventListener(
+      "touchmove",
+      handleUserScroll
+    )
+
+    return () => {
+      contentRef.current?.parentElement?.removeEventListener(
+        "wheel",
+        handleUserScroll
+      )
+      contentRef.current?.parentElement?.removeEventListener(
+        "touchmove",
+        handleUserScroll
+      )
+    }
+  }, [contentRef.current, handleUserScroll])
+
   const getThreadItems = useCallback(() => {
     return sortThread(thread)
   }, [thread])