From 3af1a6e100443491d8cd3a74309718da6f144140 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 8 Jul 2025 16:49:09 -0700
Subject: [PATCH] Lint

---
 .../copilot-modal/copilot-modal.tsx           |  56 +-
 .../panel/components/copilot/copilot.tsx      | 792 +++++++++---------
 .../w/[workflowId]/components/panel/panel.tsx |   4 +-
 3 files changed, 436 insertions(+), 416 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-modal/copilot-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-modal/copilot-modal.tsx
index d431a29858..84193d7a38 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-modal/copilot-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-modal/copilot-modal.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { type KeyboardEvent, useEffect, useRef, useState } from 'react'
-import { ArrowUp, Bot, User, X } from 'lucide-react'
+import { type KeyboardEvent, useEffect, useRef } from 'react'
+import { ArrowUp, Bot, X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { createLogger } from '@/lib/logs/console-logger'
@@ -26,7 +26,10 @@ interface CopilotModalMessage {
 
 // Modal-specific message component
 function ModalCopilotMessage({ message }: CopilotModalMessage) {
-  const renderCitations = (text: string, citations?: Array<{ id: number; title: string; url: string }>) => {
+  const renderCitations = (
+    text: string,
+    citations?: Array<{ id: number; title: string; url: string }>
+  ) => {
     if (!citations || citations.length === 0) return text
 
     let processedText = text
@@ -52,12 +55,24 @@ function ModalCopilotMessage({ message }: CopilotModalMessage) {
     )
 
     // Handle inline code
-    processedText = processedText.replace(/`([^`]+)`/g, '<code class="bg-muted px-1 rounded text-sm">$1</code>')
+    processedText = processedText.replace(
+      /`([^`]+)`/g,
+      '<code class="bg-muted px-1 rounded text-sm">$1</code>'
+    )
 
     // Handle headers
-    processedText = processedText.replace(/^### (.*$)/gm, '<h3 class="text-lg font-semibold mt-4 mb-2">$1</h3>')
-    processedText = processedText.replace(/^## (.*$)/gm, '<h2 class="text-xl font-semibold mt-4 mb-2">$1</h2>')
-    processedText = processedText.replace(/^# (.*$)/gm, '<h1 class="text-2xl font-bold mt-4 mb-2">$1</h1>')
+    processedText = processedText.replace(
+      /^### (.*$)/gm,
+      '<h3 class="text-lg font-semibold mt-4 mb-2">$1</h3>'
+    )
+    processedText = processedText.replace(
+      /^## (.*$)/gm,
+      '<h2 class="text-xl font-semibold mt-4 mb-2">$1</h2>'
+    )
+    processedText = processedText.replace(
+      /^# (.*$)/gm,
+      '<h1 class="text-2xl font-bold mt-4 mb-2">$1</h1>'
+    )
 
     // Handle bold
     processedText = processedText.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
@@ -94,8 +109,8 @@ function ModalCopilotMessage({ message }: CopilotModalMessage) {
       <div className='mx-auto max-w-3xl'>
         <div className='flex'>
           <div className='max-w-[80%]'>
-            <div 
-              className='whitespace-pre-wrap break-words text-base leading-relaxed prose prose-sm max-w-none dark:prose-invert'
+            <div
+              className='prose prose-sm dark:prose-invert max-w-none whitespace-pre-wrap break-words text-base leading-relaxed'
               dangerouslySetInnerHTML={{ __html: renderMarkdown(message.content) }}
             />
           </div>
@@ -115,14 +130,14 @@ interface CopilotModalProps {
   isLoading: boolean
 }
 
-export function CopilotModal({ 
-  open, 
-  onOpenChange, 
-  copilotMessage, 
+export function CopilotModal({
+  open,
+  onOpenChange,
+  copilotMessage,
   setCopilotMessage,
   messages,
   onSendMessage,
-  isLoading
+  isLoading,
 }: CopilotModalProps) {
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const messagesContainerRef = useRef<HTMLDivElement>(null)
@@ -149,7 +164,7 @@ export function CopilotModal({
     try {
       await onSendMessage(copilotMessage.trim())
       setCopilotMessage('')
-      
+
       // Ensure input stays focused
       if (inputRef.current) {
         inputRef.current.focus()
@@ -210,10 +225,11 @@ export function CopilotModal({
                 <div className='space-y-2'>
                   <h3 className='font-medium text-lg'>Welcome to Documentation Copilot</h3>
                   <p className='text-muted-foreground text-sm'>
-                    Ask me anything about Sim Studio features, workflows, tools, or how to get started.
+                    Ask me anything about Sim Studio features, workflows, tools, or how to get
+                    started.
                   </p>
                 </div>
-                <div className='space-y-2 text-left max-w-xs mx-auto'>
+                <div className='mx-auto max-w-xs space-y-2 text-left'>
                   <div className='text-muted-foreground text-xs'>Try asking:</div>
                   <div className='space-y-1'>
                     <div className='rounded bg-muted/50 px-2 py-1 text-xs'>
@@ -230,9 +246,7 @@ export function CopilotModal({
               </div>
             </div>
           ) : (
-            messages.map((message) => (
-              <ModalCopilotMessage key={message.id} message={message} />
-            ))
+            messages.map((message) => <ModalCopilotMessage key={message.id} message={message} />)
           )}
 
           {/* Loading indicator (shows only when loading) */}
@@ -284,4 +298,4 @@ export function CopilotModal({
       </div>
     </div>
   )
-} 
\ No newline at end of file
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 2627fc004c..69a0e215f0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -37,52 +37,336 @@ interface Message {
   isStreaming?: boolean
 }
 
-export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ 
-  panelWidth, 
-  isFullscreen = false,
-  onFullscreenToggle,
-  fullscreenInput = '',
-  onFullscreenInputChange
-}, ref) => {
-  const [messages, setMessages] = useState<Message[]>([])
-  const [input, setInput] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-  const scrollAreaRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
+export const Copilot = forwardRef<CopilotRef, CopilotProps>(
+  (
+    {
+      panelWidth,
+      isFullscreen = false,
+      onFullscreenToggle,
+      fullscreenInput = '',
+      onFullscreenInputChange,
+    },
+    ref
+  ) => {
+    const [messages, setMessages] = useState<Message[]>([])
+    const [input, setInput] = useState('')
+    const [isLoading, setIsLoading] = useState(false)
+    const scrollAreaRef = useRef<HTMLDivElement>(null)
+    const inputRef = useRef<HTMLInputElement>(null)
 
-  // Expose clear function to parent
-  useImperativeHandle(
-    ref,
-    () => ({
-      clearMessages: () => {
-        setMessages([])
-        logger.info('Copilot messages cleared')
-      },
-    }),
-    []
-  )
+    // Expose clear function to parent
+    useImperativeHandle(
+      ref,
+      () => ({
+        clearMessages: () => {
+          setMessages([])
+          logger.info('Copilot messages cleared')
+        },
+      }),
+      []
+    )
 
-  // Auto-scroll to bottom when new messages are added
-  useEffect(() => {
-    if (scrollAreaRef.current) {
-      const scrollContainer = scrollAreaRef.current.querySelector(
-        '[data-radix-scroll-area-viewport]'
-      )
-      if (scrollContainer) {
-        scrollContainer.scrollTop = scrollContainer.scrollHeight
+    // Auto-scroll to bottom when new messages are added
+    useEffect(() => {
+      if (scrollAreaRef.current) {
+        const scrollContainer = scrollAreaRef.current.querySelector(
+          '[data-radix-scroll-area-viewport]'
+        )
+        if (scrollContainer) {
+          scrollContainer.scrollTop = scrollContainer.scrollHeight
+        }
       }
+    }, [messages])
+
+    const handleSubmit = useCallback(
+      async (e: React.FormEvent) => {
+        e.preventDefault()
+        if (!input.trim() || isLoading) return
+
+        const userMessage: Message = {
+          id: crypto.randomUUID(),
+          role: 'user',
+          content: input.trim(),
+          timestamp: new Date(),
+        }
+
+        const streamingMessage: Message = {
+          id: crypto.randomUUID(),
+          role: 'assistant',
+          content: '',
+          timestamp: new Date(),
+          isStreaming: true,
+        }
+
+        setMessages((prev) => [...prev, userMessage, streamingMessage])
+        const query = input.trim()
+        setInput('')
+        setIsLoading(true)
+
+        try {
+          logger.info('Sending docs RAG query:', { query })
+
+          const response = await fetch('/api/docs/ask', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              query,
+              topK: 5,
+              stream: true,
+            }),
+          })
+
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`)
+          }
+
+          // Handle streaming response
+          if (response.headers.get('content-type')?.includes('text/event-stream')) {
+            const reader = response.body?.getReader()
+            const decoder = new TextDecoder()
+            let accumulatedContent = ''
+            let sources: any[] = []
+
+            if (!reader) {
+              throw new Error('Failed to get response reader')
+            }
+
+            while (true) {
+              const { done, value } = await reader.read()
+              if (done) break
+
+              const chunk = decoder.decode(value, { stream: true })
+              const lines = chunk.split('\n')
+
+              for (const line of lines) {
+                if (line.startsWith('data: ')) {
+                  try {
+                    const data = JSON.parse(line.slice(6))
+
+                    if (data.type === 'metadata') {
+                      sources = data.sources || []
+                    } else if (data.type === 'content') {
+                      accumulatedContent += data.content
+
+                      // Update the streaming message with accumulated content
+                      setMessages((prev) =>
+                        prev.map((msg) =>
+                          msg.id === streamingMessage.id
+                            ? { ...msg, content: accumulatedContent, sources }
+                            : msg
+                        )
+                      )
+                    } else if (data.type === 'done') {
+                      // Finish streaming
+                      setMessages((prev) =>
+                        prev.map((msg) =>
+                          msg.id === streamingMessage.id
+                            ? { ...msg, isStreaming: false, sources }
+                            : msg
+                        )
+                      )
+                    } else if (data.type === 'error') {
+                      throw new Error(data.error || 'Streaming error')
+                    }
+                  } catch (parseError) {
+                    logger.warn('Failed to parse SSE data:', parseError)
+                  }
+                }
+              }
+            }
+
+            logger.info('Received docs RAG response:', {
+              contentLength: accumulatedContent.length,
+              sourcesCount: sources.length,
+            })
+          } else {
+            // Fallback to non-streaming response
+            const data = await response.json()
+
+            const assistantMessage: Message = {
+              id: streamingMessage.id,
+              role: 'assistant',
+              content: data.response || 'Sorry, I could not generate a response.',
+              timestamp: new Date(),
+              sources: data.sources || [],
+              isStreaming: false,
+            }
+
+            setMessages((prev) => prev.slice(0, -1).concat(assistantMessage))
+          }
+        } catch (error) {
+          logger.error('Docs RAG error:', error)
+
+          const errorMessage: Message = {
+            id: streamingMessage.id,
+            role: 'assistant',
+            content:
+              'Sorry, I encountered an error while searching the documentation. Please try again.',
+            timestamp: new Date(),
+            isStreaming: false,
+          }
+
+          setMessages((prev) => prev.slice(0, -1).concat(errorMessage))
+        } finally {
+          setIsLoading(false)
+        }
+      },
+      [input, isLoading]
+    )
+
+    const formatTimestamp = (date: Date) => {
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
     }
-  }, [messages])
 
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault()
-      if (!input.trim() || isLoading) return
+    // Function to render content with inline hyperlinked citations and basic markdown
+    const renderContentWithCitations = (content: string, sources: Message['sources'] = []) => {
+      if (!content) return content
 
+      let processedContent = content
+
+      // Replace {cite:1}, {cite:2}, etc. with clickable citation icons
+      processedContent = processedContent.replace(/\{cite:(\d+)\}/g, (match, num) => {
+        const sourceIndex = Number.parseInt(num) - 1
+        const source = sources[sourceIndex]
+
+        if (source) {
+          return `<a href="${source.link}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center ml-1 text-primary hover:text-primary/80 transition-colors text-sm" title="${source.title}">↗</a>`
+        }
+
+        return match
+      })
+
+      // Basic markdown processing for better formatting
+      processedContent = processedContent
+        // Handle code blocks
+        .replace(
+          /```(\w+)?\n([\s\S]*?)```/g,
+          '<pre class="bg-muted p-3 rounded-lg overflow-x-auto my-3 text-sm"><code>$2</code></pre>'
+        )
+        // Handle inline code
+        .replace(
+          /`([^`]+)`/g,
+          '<code class="bg-muted px-1.5 py-0.5 rounded text-sm font-mono">$1</code>'
+        )
+        // Handle bold text
+        .replace(/\*\*(.*?)\*\*/g, '<strong class="font-semibold">$1</strong>')
+        // Handle italic text
+        .replace(/\*(.*?)\*/g, '<em class="italic">$1</em>')
+        // Handle headers
+        .replace(/^### (.*$)/gm, '<h3 class="font-semibold text-base mt-4 mb-2">$1</h3>')
+        .replace(/^## (.*$)/gm, '<h2 class="font-semibold text-lg mt-4 mb-2">$1</h2>')
+        .replace(/^# (.*$)/gm, '<h1 class="font-bold text-xl mt-4 mb-3">$1</h1>')
+        // Handle unordered lists
+        .replace(/^\* (.*$)/gm, '<li class="ml-4">• $1</li>')
+        .replace(/^- (.*$)/gm, '<li class="ml-4">• $1</li>')
+        // Handle line breaks
+        .replace(/\n\n/g, '</p><p class="my-2">')
+        .replace(/\n/g, '<br>')
+
+      // Wrap in paragraph tags if not already wrapped
+      if (
+        !processedContent.includes('<p>') &&
+        !processedContent.includes('<h1>') &&
+        !processedContent.includes('<h2>') &&
+        !processedContent.includes('<h3>')
+      ) {
+        processedContent = `<p class="my-2">${processedContent}</p>`
+      }
+
+      return processedContent
+    }
+
+    const renderMessage = (message: Message) => {
+      if (message.isStreaming && !message.content) {
+        return (
+          <div key={message.id} className='flex gap-3 p-4'>
+            <div className='flex h-8 w-8 items-center justify-center rounded-full bg-primary'>
+              <Bot className='h-4 w-4 text-primary-foreground' />
+            </div>
+            <div className='flex-1'>
+              <div className='mb-2 flex items-center gap-2'>
+                <span className='font-medium text-sm'>Copilot</span>
+                <span className='text-muted-foreground text-xs'>
+                  {formatTimestamp(message.timestamp)}
+                </span>
+              </div>
+              <div className='flex items-center gap-2 text-muted-foreground'>
+                <Loader2 className='h-4 w-4 animate-spin' />
+                <span className='text-sm'>Searching documentation...</span>
+              </div>
+            </div>
+          </div>
+        )
+      }
+
+      return (
+        <div key={message.id} className='group flex gap-3 p-4 hover:bg-muted/30'>
+          <div
+            className={`flex h-8 w-8 items-center justify-center rounded-full ${
+              message.role === 'user' ? 'bg-muted' : 'bg-primary'
+            }`}
+          >
+            {message.role === 'user' ? (
+              <User className='h-4 w-4 text-muted-foreground' />
+            ) : (
+              <Bot className='h-4 w-4 text-primary-foreground' />
+            )}
+          </div>
+          <div className='min-w-0 flex-1'>
+            <div className='mb-3 flex items-center gap-2'>
+              <span className='font-medium text-sm'>
+                {message.role === 'user' ? 'You' : 'Copilot'}
+              </span>
+              <span className='text-muted-foreground text-xs'>
+                {formatTimestamp(message.timestamp)}
+              </span>
+              {message.isStreaming && (
+                <div className='flex items-center gap-1'>
+                  <Loader2 className='h-3 w-3 animate-spin text-primary' />
+                  <span className='text-primary text-xs'>Responding...</span>
+                </div>
+              )}
+            </div>
+
+            {/* Enhanced content rendering with inline citations */}
+            <div className='prose prose-sm dark:prose-invert max-w-none'>
+              <div
+                className='text-foreground text-sm leading-relaxed'
+                dangerouslySetInnerHTML={{
+                  __html: renderContentWithCitations(message.content, message.sources),
+                }}
+              />
+            </div>
+
+            {/* Streaming cursor */}
+            {message.isStreaming && message.content && (
+              <span className='ml-1 inline-block h-4 w-2 animate-pulse bg-primary' />
+            )}
+          </div>
+        </div>
+      )
+    }
+
+    // Convert messages for modal (role -> type)
+    const modalMessages = messages.map((msg) => ({
+      id: msg.id,
+      content: msg.content,
+      type: msg.role as 'user' | 'assistant',
+      timestamp: msg.timestamp,
+      citations: msg.sources?.map((source, index) => ({
+        id: index + 1,
+        title: source.title,
+        url: source.link,
+      })),
+    }))
+
+    // Handle modal message sending
+    const handleModalSendMessage = useCallback(async (message: string) => {
+      // Use the same handleSubmit logic but with the message parameter
       const userMessage: Message = {
         id: crypto.randomUUID(),
         role: 'user',
-        content: input.trim(),
+        content: message,
         timestamp: new Date(),
       }
 
@@ -95,18 +379,16 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({
       }
 
       setMessages((prev) => [...prev, userMessage, streamingMessage])
-      const query = input.trim()
-      setInput('')
       setIsLoading(true)
 
       try {
-        logger.info('Sending docs RAG query:', { query })
+        logger.info('Sending docs RAG query:', { query: message })
 
         const response = await fetch('/api/docs/ask', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
-            query,
+            query: message,
             topK: 5,
             stream: true,
           }),
@@ -206,369 +488,93 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({
       } finally {
         setIsLoading(false)
       }
-    },
-    [input, isLoading]
-  )
-
-  const formatTimestamp = (date: Date) => {
-    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-  }
-
-  // Function to render content with inline hyperlinked citations and basic markdown
-  const renderContentWithCitations = (content: string, sources: Message['sources'] = []) => {
-    if (!content) return content
-
-    let processedContent = content
-
-    // Replace {cite:1}, {cite:2}, etc. with clickable citation icons
-    processedContent = processedContent.replace(/\{cite:(\d+)\}/g, (match, num) => {
-      const sourceIndex = Number.parseInt(num) - 1
-      const source = sources[sourceIndex]
-
-      if (source) {
-        return `<a href="${source.link}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center ml-1 text-primary hover:text-primary/80 transition-colors text-sm" title="${source.title}">↗</a>`
-      }
-
-      return match
-    })
-
-    // Basic markdown processing for better formatting
-    processedContent = processedContent
-      // Handle code blocks
-      .replace(
-        /```(\w+)?\n([\s\S]*?)```/g,
-        '<pre class="bg-muted p-3 rounded-lg overflow-x-auto my-3 text-sm"><code>$2</code></pre>'
-      )
-      // Handle inline code
-      .replace(
-        /`([^`]+)`/g,
-        '<code class="bg-muted px-1.5 py-0.5 rounded text-sm font-mono">$1</code>'
-      )
-      // Handle bold text
-      .replace(/\*\*(.*?)\*\*/g, '<strong class="font-semibold">$1</strong>')
-      // Handle italic text
-      .replace(/\*(.*?)\*/g, '<em class="italic">$1</em>')
-      // Handle headers
-      .replace(/^### (.*$)/gm, '<h3 class="font-semibold text-base mt-4 mb-2">$1</h3>')
-      .replace(/^## (.*$)/gm, '<h2 class="font-semibold text-lg mt-4 mb-2">$1</h2>')
-      .replace(/^# (.*$)/gm, '<h1 class="font-bold text-xl mt-4 mb-3">$1</h1>')
-      // Handle unordered lists
-      .replace(/^\* (.*$)/gm, '<li class="ml-4">• $1</li>')
-      .replace(/^- (.*$)/gm, '<li class="ml-4">• $1</li>')
-      // Handle line breaks
-      .replace(/\n\n/g, '</p><p class="my-2">')
-      .replace(/\n/g, '<br>')
-
-    // Wrap in paragraph tags if not already wrapped
-    if (
-      !processedContent.includes('<p>') &&
-      !processedContent.includes('<h1>') &&
-      !processedContent.includes('<h2>') &&
-      !processedContent.includes('<h3>')
-    ) {
-      processedContent = `<p class="my-2">${processedContent}</p>`
-    }
-
-    return processedContent
-  }
-
-  const renderMessage = (message: Message) => {
-    if (message.isStreaming && !message.content) {
-      return (
-        <div key={message.id} className='flex gap-3 p-4'>
-          <div className='flex h-8 w-8 items-center justify-center rounded-full bg-primary'>
-            <Bot className='h-4 w-4 text-primary-foreground' />
-          </div>
-          <div className='flex-1'>
-            <div className='mb-2 flex items-center gap-2'>
-              <span className='font-medium text-sm'>Copilot</span>
-              <span className='text-muted-foreground text-xs'>
-                {formatTimestamp(message.timestamp)}
-              </span>
-            </div>
-            <div className='flex items-center gap-2 text-muted-foreground'>
-              <Loader2 className='h-4 w-4 animate-spin' />
-              <span className='text-sm'>Searching documentation...</span>
-            </div>
-          </div>
-        </div>
-      )
-    }
+    }, [])
 
     return (
-      <div key={message.id} className='group flex gap-3 p-4 hover:bg-muted/30'>
-        <div
-          className={`flex h-8 w-8 items-center justify-center rounded-full ${
-            message.role === 'user' ? 'bg-muted' : 'bg-primary'
-          }`}
-        >
-          {message.role === 'user' ? (
-            <User className='h-4 w-4 text-muted-foreground' />
-          ) : (
-            <Bot className='h-4 w-4 text-primary-foreground' />
-          )}
-        </div>
-        <div className='min-w-0 flex-1'>
-          <div className='mb-3 flex items-center gap-2'>
-            <span className='font-medium text-sm'>
-              {message.role === 'user' ? 'You' : 'Copilot'}
-            </span>
-            <span className='text-muted-foreground text-xs'>
-              {formatTimestamp(message.timestamp)}
-            </span>
-            {message.isStreaming && (
-              <div className='flex items-center gap-1'>
-                <Loader2 className='h-3 w-3 animate-spin text-primary' />
-                <span className='text-primary text-xs'>Responding...</span>
+      <>
+        <div className='flex h-full flex-col'>
+          {/* Header */}
+          <div className='border-b p-4'>
+            <div className='flex items-center gap-2'>
+              <Bot className='h-5 w-5 text-primary' />
+              <div>
+                <h3 className='font-medium text-sm'>Documentation Copilot</h3>
+                <p className='text-muted-foreground text-xs'>Ask questions about Sim Studio</p>
               </div>
-            )}
-          </div>
-
-          {/* Enhanced content rendering with inline citations */}
-          <div className='prose prose-sm dark:prose-invert max-w-none'>
-            <div
-              className='text-foreground text-sm leading-relaxed'
-              dangerouslySetInnerHTML={{
-                __html: renderContentWithCitations(message.content, message.sources),
-              }}
-            />
-          </div>
-
-          {/* Streaming cursor */}
-          {message.isStreaming && message.content && (
-            <span className='ml-1 inline-block h-4 w-2 animate-pulse bg-primary' />
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  // Convert messages for modal (role -> type)
-  const modalMessages = messages.map(msg => ({
-    id: msg.id,
-    content: msg.content,
-    type: msg.role as 'user' | 'assistant',
-    timestamp: msg.timestamp,
-    citations: msg.sources?.map((source, index) => ({
-      id: index + 1,
-      title: source.title,
-      url: source.link
-    }))
-  }))
-
-  // Handle modal message sending
-  const handleModalSendMessage = useCallback(async (message: string) => {
-    // Use the same handleSubmit logic but with the message parameter
-    const userMessage: Message = {
-      id: crypto.randomUUID(),
-      role: 'user',
-      content: message,
-      timestamp: new Date(),
-    }
-
-    const streamingMessage: Message = {
-      id: crypto.randomUUID(),
-      role: 'assistant',
-      content: '',
-      timestamp: new Date(),
-      isStreaming: true,
-    }
-
-    setMessages((prev) => [...prev, userMessage, streamingMessage])
-    setIsLoading(true)
-
-    try {
-      logger.info('Sending docs RAG query:', { query: message })
-
-      const response = await fetch('/api/docs/ask', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          query: message,
-          topK: 5,
-          stream: true,
-        }),
-      })
-
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${await response.text()}`)
-      }
-
-      // Handle streaming response
-      if (response.headers.get('content-type')?.includes('text/event-stream')) {
-        const reader = response.body?.getReader()
-        const decoder = new TextDecoder()
-        let accumulatedContent = ''
-        let sources: any[] = []
-
-        if (!reader) {
-          throw new Error('Failed to get response reader')
-        }
-
-        while (true) {
-          const { done, value } = await reader.read()
-          if (done) break
-
-          const chunk = decoder.decode(value, { stream: true })
-          const lines = chunk.split('\n')
-
-          for (const line of lines) {
-            if (line.startsWith('data: ')) {
-              try {
-                const data = JSON.parse(line.slice(6))
-
-                if (data.type === 'metadata') {
-                  sources = data.sources || []
-                } else if (data.type === 'content') {
-                  accumulatedContent += data.content
-
-                  // Update the streaming message with accumulated content
-                  setMessages((prev) =>
-                    prev.map((msg) =>
-                      msg.id === streamingMessage.id
-                        ? { ...msg, content: accumulatedContent, sources }
-                        : msg
-                    )
-                  )
-                } else if (data.type === 'done') {
-                  // Finish streaming
-                  setMessages((prev) =>
-                    prev.map((msg) =>
-                      msg.id === streamingMessage.id
-                        ? { ...msg, isStreaming: false, sources }
-                        : msg
-                    )
-                  )
-                } else if (data.type === 'error') {
-                  throw new Error(data.error || 'Streaming error')
-                }
-              } catch (parseError) {
-                logger.warn('Failed to parse SSE data:', parseError)
-              }
-            }
-          }
-        }
-
-        logger.info('Received docs RAG response:', {
-          contentLength: accumulatedContent.length,
-          sourcesCount: sources.length,
-        })
-      } else {
-        // Fallback to non-streaming response
-        const data = await response.json()
-
-        const assistantMessage: Message = {
-          id: streamingMessage.id,
-          role: 'assistant',
-          content: data.response || 'Sorry, I could not generate a response.',
-          timestamp: new Date(),
-          sources: data.sources || [],
-          isStreaming: false,
-        }
-
-        setMessages((prev) => prev.slice(0, -1).concat(assistantMessage))
-      }
-    } catch (error) {
-      logger.error('Docs RAG error:', error)
-
-      const errorMessage: Message = {
-        id: streamingMessage.id,
-        role: 'assistant',
-        content:
-          'Sorry, I encountered an error while searching the documentation. Please try again.',
-        timestamp: new Date(),
-        isStreaming: false,
-      }
-
-      setMessages((prev) => prev.slice(0, -1).concat(errorMessage))
-    } finally {
-      setIsLoading(false)
-    }
-  }, [])
-
-  return (
-    <>
-      <div className='flex h-full flex-col'>
-        {/* Header */}
-        <div className='border-b p-4'>
-          <div className='flex items-center gap-2'>
-            <Bot className='h-5 w-5 text-primary' />
-            <div>
-              <h3 className='font-medium text-sm'>Documentation Copilot</h3>
-              <p className='text-muted-foreground text-xs'>Ask questions about Sim Studio</p>
             </div>
           </div>
-        </div>
 
-        {/* Messages */}
-        <ScrollArea className='flex-1' ref={scrollAreaRef}>
-          {messages.length === 0 ? (
-            <div className='flex h-full flex-col items-center justify-center p-8 text-center'>
-              <Bot className='mb-4 h-12 w-12 text-muted-foreground' />
-              <h3 className='mb-2 font-medium text-sm'>Welcome to Documentation Copilot</h3>
-              <p className='mb-4 max-w-xs text-muted-foreground text-xs'>
-                Ask me anything about Sim Studio features, workflows, tools, or how to get started.
-              </p>
-              <div className='space-y-2 text-left'>
-                <div className='text-muted-foreground text-xs'>Try asking:</div>
-                <div className='space-y-1'>
-                  <div className='rounded bg-muted/50 px-2 py-1 text-xs'>
-                    "How do I create a workflow?"
-                  </div>
-                  <div className='rounded bg-muted/50 px-2 py-1 text-xs'>
-                    "What tools are available?"
-                  </div>
-                  <div className='rounded bg-muted/50 px-2 py-1 text-xs'>
-                    "How do I deploy my workflow?"
+          {/* Messages */}
+          <ScrollArea className='flex-1' ref={scrollAreaRef}>
+            {messages.length === 0 ? (
+              <div className='flex h-full flex-col items-center justify-center p-8 text-center'>
+                <Bot className='mb-4 h-12 w-12 text-muted-foreground' />
+                <h3 className='mb-2 font-medium text-sm'>Welcome to Documentation Copilot</h3>
+                <p className='mb-4 max-w-xs text-muted-foreground text-xs'>
+                  Ask me anything about Sim Studio features, workflows, tools, or how to get
+                  started.
+                </p>
+                <div className='space-y-2 text-left'>
+                  <div className='text-muted-foreground text-xs'>Try asking:</div>
+                  <div className='space-y-1'>
+                    <div className='rounded bg-muted/50 px-2 py-1 text-xs'>
+                      "How do I create a workflow?"
+                    </div>
+                    <div className='rounded bg-muted/50 px-2 py-1 text-xs'>
+                      "What tools are available?"
+                    </div>
+                    <div className='rounded bg-muted/50 px-2 py-1 text-xs'>
+                      "How do I deploy my workflow?"
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          ) : (
-            <div className='space-y-1'>{messages.map(renderMessage)}</div>
-          )}
-        </ScrollArea>
+            ) : (
+              <div className='space-y-1'>{messages.map(renderMessage)}</div>
+            )}
+          </ScrollArea>
 
-        {/* Input */}
-        <div className='border-t p-4'>
-          <form onSubmit={handleSubmit} className='flex gap-2'>
-            <Input
-              ref={inputRef}
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              placeholder='Ask about Sim Studio documentation...'
-              disabled={isLoading}
-              className='flex-1'
-              autoComplete='off'
-            />
-            <Button
-              type='submit'
-              size='icon'
-              disabled={!input.trim() || isLoading}
-              className='h-10 w-10'
-            >
-              {isLoading ? (
-                <Loader2 className='h-4 w-4 animate-spin' />
-              ) : (
-                <Send className='h-4 w-4' />
-              )}
-            </Button>
-          </form>
+          {/* Input */}
+          <div className='border-t p-4'>
+            <form onSubmit={handleSubmit} className='flex gap-2'>
+              <Input
+                ref={inputRef}
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder='Ask about Sim Studio documentation...'
+                disabled={isLoading}
+                className='flex-1'
+                autoComplete='off'
+              />
+              <Button
+                type='submit'
+                size='icon'
+                disabled={!input.trim() || isLoading}
+                className='h-10 w-10'
+              >
+                {isLoading ? (
+                  <Loader2 className='h-4 w-4 animate-spin' />
+                ) : (
+                  <Send className='h-4 w-4' />
+                )}
+              </Button>
+            </form>
+          </div>
         </div>
-      </div>
 
-      {/* Fullscreen Modal */}
-      <CopilotModal
-        open={isFullscreen}
-        onOpenChange={(open) => onFullscreenToggle?.(open)}
-        copilotMessage={fullscreenInput}
-        setCopilotMessage={(message) => onFullscreenInputChange?.(message)}
-        messages={modalMessages}
-        onSendMessage={handleModalSendMessage}
-        isLoading={isLoading}
-      />
-    </>
-  )
-})
+        {/* Fullscreen Modal */}
+        <CopilotModal
+          open={isFullscreen}
+          onOpenChange={(open) => onFullscreenToggle?.(open)}
+          copilotMessage={fullscreenInput}
+          setCopilotMessage={(message) => onFullscreenInputChange?.(message)}
+          messages={modalMessages}
+          onSendMessage={handleModalSendMessage}
+          isLoading={isLoading}
+        />
+      </>
+    )
+  }
+)
 
 Copilot.displayName = 'Copilot'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 5a22b6905c..273c55edd9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -157,8 +157,8 @@ export function Panel() {
           ) : activeTab === 'console' ? (
             <Console panelWidth={width} />
           ) : activeTab === 'copilot' ? (
-            <Copilot 
-              ref={copilotRef} 
+            <Copilot
+              ref={copilotRef}
               panelWidth={width}
               isFullscreen={isCopilotModalOpen}
               onFullscreenToggle={setIsCopilotModalOpen}