feat: mothership/copilot feedback

apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx

@@ -1,22 +1,59 @@
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { Check, Copy, Ellipsis, Hash } from 'lucide-react'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
+  Button,
+  Check,
+  Copy,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Textarea,
+  ThumbsDown,
+  ThumbsUp,
 } from '@/components/emcn'
+import { useSubmitCopilotFeedback } from '@/hooks/queries/copilot-feedback'
+
+const SPECIAL_TAGS = 'thinking|options|usage_upgrade|credential|mothership-error|file'
+
+function toPlainText(raw: string): string {
+  return (
+    raw
+      // Strip special tags and their contents
+      .replace(new RegExp(`<\\/?(${SPECIAL_TAGS})(?:>[\\s\\S]*?<\\/(${SPECIAL_TAGS})>|>)`, 'g'), '')
+      // Strip markdown
+      .replace(/^#{1,6}\s+/gm, '')
+      .replace(/\*\*(.+?)\*\*/g, '$1')
+      .replace(/\*(.+?)\*/g, '$1')
+      .replace(/`{3}[\s\S]*?`{3}/g, '')
+      .replace(/`(.+?)`/g, '$1')
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+      .replace(/^[>\-*]\s+/gm, '')
+      .replace(/!\[[^\]]*\]\([^)]+\)/g, '')
+      // Normalize whitespace
+      .replace(/\n{3,}/g, '\n\n')
+      .trim()
+  )
+}
+
+const ICON_CLASS = 'h-[14px] w-[14px]'
+const BUTTON_CLASS =
+  'flex h-[26px] w-[26px] items-center justify-center rounded-[6px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-hover)] focus-visible:outline-none'
 
 interface MessageActionsProps {
   content: string
-  requestId?: string
+  chatId?: string
+  userQuery?: string
 }
 
-export function MessageActions({ content, requestId }: MessageActionsProps) {
-  const [copied, setCopied] = useState<'message' | 'request' | null>(null)
+export function MessageActions({ content, chatId, userQuery }: MessageActionsProps) {
+  const [copied, setCopied] = useState(false)
+  const [pendingFeedback, setPendingFeedback] = useState<'up' | 'down' | null>(null)
+  const [feedbackText, setFeedbackText] = useState('')
   const resetTimeoutRef = useRef<number | null>(null)
+  const submitFeedback = useSubmitCopilotFeedback()
 
   useEffect(() => {
     return () => {
@@ -26,59 +63,119 @@ export function MessageActions({ content, requestId }: MessageActionsProps) {
     }
   }, [])
 
-  const copyToClipboard = useCallback(async (text: string, type: 'message' | 'request') => {
+  const copyToClipboard = useCallback(async () => {
+    if (!content) return
+    const text = toPlainText(content)
+    if (!text) return
     try {
       await navigator.clipboard.writeText(text)
-      setCopied(type)
+      setCopied(true)
       if (resetTimeoutRef.current !== null) {
         window.clearTimeout(resetTimeoutRef.current)
       }
-      resetTimeoutRef.current = window.setTimeout(() => setCopied(null), 1500)
+      resetTimeoutRef.current = window.setTimeout(() => setCopied(false), 1500)
     } catch {
+      /* clipboard unavailable */
+    }
+  }, [content])
+
+  const handleFeedbackClick = useCallback(
+    (type: 'up' | 'down') => {
+      if (chatId && userQuery) {
+        setPendingFeedback(type)
+        setFeedbackText('')
+      }
+    },
+    [chatId, userQuery]
+  )
+
+  const handleSubmitFeedback = useCallback(() => {
+    if (!pendingFeedback || !chatId || !userQuery) return
+    const text = feedbackText.trim()
+    if (!text) {
+      setPendingFeedback(null)
+      setFeedbackText('')
       return
     }
+    submitFeedback.mutate({
+      chatId,
+      userQuery,
+      agentResponse: content,
+      isPositiveFeedback: pendingFeedback === 'up',
+      feedback: text,
+    })
+    setPendingFeedback(null)
+    setFeedbackText('')
+  }, [pendingFeedback, chatId, userQuery, content, feedbackText])
+
+  const handleModalClose = useCallback((open: boolean) => {
+    if (!open) {
+      setPendingFeedback(null)
+      setFeedbackText('')
+    }
   }, [])
 
-  if (!content && !requestId) {
-    return null
-  }
+  if (!content) return null
 
   return (
-    <DropdownMenu modal={false}>
-      <DropdownMenuTrigger asChild>
+    <>
+      <div className='flex items-center gap-0.5'>
         <button
           type='button'
-          aria-label='More options'
-          className='flex h-5 w-5 items-center justify-center rounded-sm text-[var(--text-icon)] opacity-0 transition-colors transition-opacity hover-hover:bg-[var(--surface-3)] hover-hover:text-[var(--text-primary)] focus-visible:opacity-100 focus-visible:outline-none group-hover/msg:opacity-100 data-[state=open]:opacity-100'
-          onClick={(event) => event.stopPropagation()}
+          aria-label='Copy message'
+          onClick={copyToClipboard}
+          className={BUTTON_CLASS}
         >
-          <Ellipsis className='h-3 w-3' strokeWidth={2} />
+          {copied ? <Check className={ICON_CLASS} /> : <Copy className={ICON_CLASS} />}
         </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align='end' side='top' sideOffset={4}>
-        <DropdownMenuItem
-          disabled={!content}
-          onSelect={(event) => {
-            event.stopPropagation()
-            void copyToClipboard(content, 'message')
-          }}
+        <button
+          type='button'
+          aria-label='Like'
+          onClick={() => handleFeedbackClick('up')}
+          className={BUTTON_CLASS}
         >
-          {copied === 'message' ? <Check /> : <Copy />}
-          <span>Copy Message</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          disabled={!requestId}
-          onSelect={(event) => {
-            event.stopPropagation()
-            if (requestId) {
-              void copyToClipboard(requestId, 'request')
-            }
-          }}
+          <ThumbsUp className={ICON_CLASS} />
+        </button>
+        <button
+          type='button'
+          aria-label='Dislike'
+          onClick={() => handleFeedbackClick('down')}
+          className={BUTTON_CLASS}
         >
-          {copied === 'request' ? <Check /> : <Hash />}
-          <span>Copy Request ID</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+          <ThumbsDown className={ICON_CLASS} />
+        </button>
+      </div>
+
+      <Modal open={pendingFeedback !== null} onOpenChange={handleModalClose}>
+        <ModalContent size='sm'>
+          <ModalHeader>Give feedback</ModalHeader>
+          <ModalBody>
+            <div className='flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>
+                {pendingFeedback === 'up' ? 'What did you like?' : 'What could be improved?'}
+              </p>
+              <Textarea
+                placeholder={
+                  pendingFeedback === 'up'
+                    ? 'Tell us what was helpful...'
+                    : 'Tell us what went wrong...'
+                }
+                value={feedbackText}
+                onChange={(e) => setFeedbackText(e.target.value)}
+                rows={3}
+              />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => handleModalClose(false)}>
+              Cancel
+            </Button>
+            <Button variant='primary' onClick={handleSubmitFeedback}>
+              Submit
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
   )
 }

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx

@@ -473,9 +473,9 @@ function MothershipErrorDisplay({ data }: { data: MothershipErrorTagData }) {
   const detail = data.code ? `${data.message} (${data.code})` : data.message
 
   return (
-    <span className='animate-stream-fade-in font-base text-[13px] text-[var(--text-secondary)] italic leading-[20px]'>
+    <p className='animate-stream-fade-in font-base text-[13px] text-[var(--text-secondary)] italic leading-[20px]'>
       {detail}
-    </span>
+    </p>
   )
 }
 

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx

@@ -35,6 +35,7 @@ interface MothershipChatProps {
   onSendQueuedMessage: (id: string) => Promise<void>
   onEditQueuedMessage: (id: string) => void
   userId?: string
+  chatId?: string
   onContextAdd?: (context: ChatContext) => void
   editValue?: string
   onEditValueConsumed?: () => void
@@ -53,7 +54,7 @@ const LAYOUT_STYLES = {
     userRow: 'flex flex-col items-end gap-[6px] pt-3',
     attachmentWidth: 'max-w-[70%]',
     userBubble: 'max-w-[70%] overflow-hidden rounded-[16px] bg-[var(--surface-5)] px-3.5 py-2',
-    assistantRow: 'group/msg relative pb-5',
+    assistantRow: 'group/msg',
     footer: 'flex-shrink-0 px-[24px] pb-[16px]',
     footerInner: 'mx-auto max-w-[42rem]',
   },
@@ -63,7 +64,7 @@ const LAYOUT_STYLES = {
     userRow: 'flex flex-col items-end gap-[6px] pt-2',
     attachmentWidth: 'max-w-[85%]',
     userBubble: 'max-w-[85%] overflow-hidden rounded-[16px] bg-[var(--surface-5)] px-3 py-2',
-    assistantRow: 'group/msg relative pb-3',
+    assistantRow: 'group/msg',
     footer: 'flex-shrink-0 px-3 pb-3',
     footerInner: '',
   },
@@ -80,6 +81,7 @@ export function MothershipChat({
   onSendQueuedMessage,
   onEditQueuedMessage,
   userId,
+  chatId,
   onContextAdd,
   editValue,
   onEditValueConsumed,
@@ -147,20 +149,28 @@ export function MothershipChat({
             }
 
             const isLastMessage = index === messages.length - 1
+            const precedingUserMsg = [...messages]
+              .slice(0, index)
+              .reverse()
+              .find((m) => m.role === 'user')
 
             return (
               <div key={msg.id} className={styles.assistantRow}>
-                {!isThisStreaming && (msg.content || msg.contentBlocks?.length) && (
-                  <div className='absolute right-0 bottom-0 z-10'>
-                    <MessageActions content={msg.content} requestId={msg.requestId} />
-                  </div>
-                )}
                 <MessageContent
                   blocks={msg.contentBlocks || []}
                   fallbackContent={msg.content}
                   isStreaming={isThisStreaming}
                   onOptionSelect={isLastMessage ? onSubmit : undefined}
                 />
+                {!isThisStreaming && (msg.content || msg.contentBlocks?.length) && (
+                  <div className='mt-2.5'>
+                    <MessageActions
+                      content={msg.content}
+                      chatId={chatId}
+                      userQuery={precedingUserMsg?.content}
+                    />
+                  </div>
+                )}
               </div>
             )
           })}

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx

@@ -115,7 +115,7 @@ export const MothershipView = memo(
       <div
         ref={ref}
         className={cn(
-          'relative z-10 flex h-full flex-col overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]',
+          'relative z-10 flex h-full flex-col overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]',
           isCollapsed ? 'w-0 min-w-0 border-l-0' : 'w-1/2 border-l',
           className
         )}

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -348,6 +348,7 @@ export function Home({ chatId }: HomeProps = {}) {
           onSendQueuedMessage={sendNow}
           onEditQueuedMessage={handleEditQueuedMessage}
           userId={session?.user?.id}
+          chatId={resolvedChatId}
           onContextAdd={handleContextAdd}
           editValue={editingInputValue}
           onEditValueConsumed={clearEditingValue}

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

@@ -827,6 +827,7 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
                   onSendQueuedMessage={copilotSendNow}
                   onEditQueuedMessage={handleCopilotEditQueuedMessage}
                   userId={session?.user?.id}
+                  chatId={copilotResolvedChatId}
                   editValue={copilotEditingInputValue}
                   onEditValueConsumed={clearCopilotEditingValue}
                   layout='copilot-view'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx

@@ -12,7 +12,6 @@ import {
   Button,
   Combobox,
   Input,
-  Label,
   Modal,
   ModalBody,
   ModalContent,
@@ -432,7 +431,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
             <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
               <div className='space-y-3'>
                 <div className='flex flex-col gap-2'>
-                  <Label htmlFor='type'>Request</Label>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Request</p>
                   <Combobox
                     id='type'
                     options={REQUEST_TYPE_OPTIONS}
@@ -447,7 +446,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                 </div>
 
                 <div className='flex flex-col gap-2'>
-                  <Label htmlFor='subject'>Subject</Label>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Subject</p>
                   <Input
                     id='subject'
                     placeholder='Brief description of your request'
@@ -457,7 +456,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                 </div>
 
                 <div className='flex flex-col gap-2'>
-                  <Label htmlFor='message'>Message</Label>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Message</p>
                   <Textarea
                     id='message'
                     placeholder='Please provide details about your request...'
@@ -468,7 +467,9 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                 </div>
 
                 <div className='flex flex-col gap-2'>
-                  <Label>Attach Images (Optional)</Label>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>
+                    Attach Images (Optional)
+                  </p>
                   <Button
                     type='button'
                     variant='default'
@@ -505,7 +506,9 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
 
                 {images.length > 0 && (
                   <div className='space-y-2'>
-                    <Label>Uploaded Images</Label>
+                    <p className='font-medium text-[var(--text-secondary)] text-sm'>
+                      Uploaded Images
+                    </p>
                     <div className='grid grid-cols-2 gap-3'>
                       {images.map((image, index) => (
                         <div