fix(copilot): added user scrolling, fixed code block, fixed code copying and styling (#872)

* fix(copilot-ui): added user scrolling, fixed code block, fixed code copying and styling

* use console logger instead of console

* fix(copilot): make chat history non-interfering (#869)

* Add basic personalizatoin

* Make chat history non-interfering

* Always personalize

* improvement(copilot): add subblock enums to block metadata (#870)

* Add subblock enums to metadata

* Update apps/sim/lib/copilot/tools/server-tools/blocks/get-blocks-metadata.ts

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* fix(copilot): fix state message sent on move to background (#871)

* Initial fix

* Add execution start time to message

* Lint

* autofocus on new tab open

---------

Co-authored-by: Siddharth Ganesan <[email protected]>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Author: 3 people

apps/sim/app/chat/[subdomain]/components/input/input.tsx

@@ -168,7 +168,7 @@ export const ChatInput: React.FC<{
                   ref={textareaRef}
                   value={inputValue}
                   onChange={handleInputChange}
-                  className='flex w-full resize-none items-center overflow-hidden bg-transparent text-sm outline-none placeholder:text-gray-400 md:font-[330] md:text-base'
+                  className='flex w-full resize-none items-center overflow-hidden bg-transparent text-base outline-none placeholder:text-gray-400 md:font-[330]'
                   placeholder={isActive ? '' : ''}
                   rows={1}
                   style={{
@@ -191,14 +191,14 @@ export const ChatInput: React.FC<{
                     <>
                       {/* Mobile placeholder */}
                       <div
-                        className='-translate-y-1/2 absolute top-1/2 left-0 transform select-none text-gray-400 text-sm md:hidden md:text-base'
+                        className='-translate-y-1/2 absolute top-1/2 left-0 transform select-none text-base text-gray-400 md:hidden'
                         style={{ paddingTop: '3px', paddingBottom: '3px' }}
                       >
                         {PLACEHOLDER_MOBILE}
                       </div>
                       {/* Desktop placeholder */}
                       <div
-                        className='-translate-y-1/2 absolute top-1/2 left-0 hidden transform select-none font-[330] text-gray-400 text-sm md:block md:text-base'
+                        className='-translate-y-1/2 absolute top-1/2 left-0 hidden transform select-none font-[330] text-base text-gray-400 md:block'
                         style={{ paddingTop: '4px', paddingBottom: '4px' }}
                       >
                         {PLACEHOLDER_DESKTOP}

apps/sim/app/chat/[subdomain]/components/message/message.tsx

@@ -42,7 +42,7 @@ export const ClientChatMessage = memo(
           <div className='mx-auto max-w-3xl'>
             <div className='flex justify-end'>
               <div className='max-w-[80%] rounded-3xl bg-[#F4F4F4] px-4 py-3 dark:bg-gray-600'>
-                <div className='whitespace-pre-wrap break-words text-gray-800 text-lg leading-relaxed dark:text-gray-100'>
+                <div className='whitespace-pre-wrap break-words text-base text-gray-800 leading-relaxed dark:text-gray-100'>
                   {isJsonObject ? (
                     <pre>{JSON.stringify(message.content, null, 2)}</pre>
                   ) : (

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/chat.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ArrowUp } from 'lucide-react'
+import { ArrowDown, ArrowUp } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { ScrollArea } from '@/components/ui/scroll-area'
@@ -42,6 +42,7 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
   } = useChatStore()
   const { entries } = useConsoleStore()
   const messagesEndRef = useRef<HTMLDivElement>(null)
+  const scrollAreaRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
   const abortControllerRef = useRef<AbortController | null>(null)
@@ -50,6 +51,10 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
   const [promptHistory, setPromptHistory] = useState<string[]>([])
   const [historyIndex, setHistoryIndex] = useState(-1)
 
+  // Scroll state
+  const [isNearBottom, setIsNearBottom] = useState(true)
+  const [showScrollButton, setShowScrollButton] = useState(false)
+
   // Use the execution store state to track if a workflow is executing
   const { isExecuting } = useExecutionStore()
 
@@ -125,6 +130,31 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
     }, delay)
   }, [])
 
+  // Scroll to bottom function
+  const scrollToBottom = useCallback(() => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [])
+
+  // Handle scroll events to track user position
+  const handleScroll = useCallback(() => {
+    const scrollArea = scrollAreaRef.current
+    if (!scrollArea) return
+
+    // Find the viewport element inside the ScrollArea
+    const viewport = scrollArea.querySelector('[data-radix-scroll-area-viewport]')
+    if (!viewport) return
+
+    const { scrollTop, scrollHeight, clientHeight } = viewport
+    const distanceFromBottom = scrollHeight - scrollTop - clientHeight
+
+    // Consider "near bottom" if within 100px of bottom
+    const nearBottom = distanceFromBottom <= 100
+    setIsNearBottom(nearBottom)
+    setShowScrollButton(!nearBottom)
+  }, [])
+
   // Cleanup on unmount
   useEffect(() => {
     return () => {
@@ -137,12 +167,47 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
     }
   }, [])
 
-  // Auto-scroll to bottom when new messages are added
+  // Attach scroll listener
   useEffect(() => {
-    if (messagesEndRef.current) {
+    const scrollArea = scrollAreaRef.current
+    if (!scrollArea) return
+
+    // Find the viewport element inside the ScrollArea
+    const viewport = scrollArea.querySelector('[data-radix-scroll-area-viewport]')
+    if (!viewport) return
+
+    viewport.addEventListener('scroll', handleScroll, { passive: true })
+
+    // Also listen for scrollend event if available (for smooth scrolling)
+    if ('onscrollend' in viewport) {
+      viewport.addEventListener('scrollend', handleScroll, { passive: true })
+    }
+
+    // Initial scroll state check with small delay to ensure DOM is ready
+    setTimeout(handleScroll, 100)
+
+    return () => {
+      viewport.removeEventListener('scroll', handleScroll)
+      if ('onscrollend' in viewport) {
+        viewport.removeEventListener('scrollend', handleScroll)
+      }
+    }
+  }, [handleScroll])
+
+  // Auto-scroll to bottom when new messages are added, but only if user is near bottom
+  // Exception: Always scroll when sending a new message
+  useEffect(() => {
+    if (workflowMessages.length === 0) return
+
+    const lastMessage = workflowMessages[workflowMessages.length - 1]
+    const isNewUserMessage = lastMessage?.type === 'user'
+
+    // Always scroll for new user messages, or only if near bottom for assistant messages
+    if ((isNewUserMessage || isNearBottom) && messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
+      // Let the scroll event handler update the state naturally after animation completes
     }
-  }, [workflowMessages])
+  }, [workflowMessages, isNearBottom])
 
   // Handle send message
   const handleSendMessage = useCallback(async () => {
@@ -449,7 +514,7 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
               No messages yet
             </div>
           ) : (
-            <ScrollArea className='h-full pb-2' hideScrollbar={true}>
+            <ScrollArea ref={scrollAreaRef} className='h-full pb-2' hideScrollbar={true}>
               <div>
                 {workflowMessages.map((message) => (
                   <ChatMessage key={message.id} message={message} />
@@ -458,6 +523,21 @@ export function Chat({ panelWidth, chatMessage, setChatMessage }: ChatProps) {
               </div>
             </ScrollArea>
           )}
+
+          {/* Scroll to bottom button */}
+          {showScrollButton && (
+            <div className='-translate-x-1/2 absolute bottom-20 left-1/2 z-10'>
+              <Button
+                onClick={scrollToBottom}
+                size='sm'
+                variant='outline'
+                className='flex items-center gap-1 rounded-full border border-gray-200 bg-white px-3 py-1 shadow-lg transition-all hover:bg-gray-50'
+              >
+                <ArrowDown className='h-3.5 w-3.5' />
+                <span className='sr-only'>Scroll to bottom</span>
+              </Button>
+            </div>
+          )}
         </div>
 
         {/* Input section - Fixed height */}