improvement(creds): bulk paste functionality, save notification, error notif (#3328)

* improvement(creds): bulk paste functionality, save notification, error notif

* use effect anti patterns

* fix add to cursor button

* fix(attio): wrap webhook body in data object and include required filter field

* fixed and tested attio webhook lifecycle

Author: waleedlatif1

apps/sim/app/chat/components/input/input.tsx

@@ -3,8 +3,8 @@
 import type React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { motion } from 'framer-motion'
-import { AlertCircle, Paperclip, Send, Square, X } from 'lucide-react'
-import { Tooltip } from '@/components/emcn'
+import { Paperclip, Send, Square, X } from 'lucide-react'
+import { Badge, Tooltip } from '@/components/emcn'
 import { VoiceInput } from '@/app/chat/components/input/voice-input'
 
 const logger = createLogger('ChatInput')
@@ -218,24 +218,12 @@ export const ChatInput: React.FC<{
         <div ref={wrapperRef} className='w-full max-w-3xl md:max-w-[748px]'>
           {/* Error Messages */}
           {uploadErrors.length > 0 && (
-            <div className='mb-3'>
-              <div className='rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800/50 dark:bg-red-950/20'>
-                <div className='flex items-start gap-2'>
-                  <AlertCircle className='mt-0.5 h-4 w-4 shrink-0 text-red-600 dark:text-red-400' />
-                  <div className='flex-1'>
-                    <div className='mb-1 font-medium text-red-800 text-sm dark:text-red-300'>
-                      File upload error
-                    </div>
-                    <div className='space-y-1'>
-                      {uploadErrors.map((error, idx) => (
-                        <div key={idx} className='text-red-700 text-sm dark:text-red-400'>
-                          {error}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              </div>
+            <div className='mb-3 flex flex-col gap-2'>
+              {uploadErrors.map((error, idx) => (
+                <Badge key={idx} variant='red' size='lg' dot className='max-w-full'>
+                  {error}
+                </Badge>
+              ))}
             </div>
           )}
 

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import {
+  Badge,
   Button,
   Combobox,
   DatePicker,
@@ -706,12 +707,10 @@ export function DocumentTagsModal({
                       (def) =>
                         def.displayName.toLowerCase() === editTagForm.displayName.toLowerCase()
                     ) && (
-                      <div className='rounded-[4px] border border-amber-500/50 bg-amber-500/10 p-[8px]'>
-                        <p className='text-[11px] text-amber-600 dark:text-amber-400'>
-                          Maximum tag definitions reached. You can still use existing tag
-                          definitions, but cannot create new ones.
-                        </p>
-                      </div>
+                      <Badge variant='amber' size='lg' dot className='max-w-full'>
+                        Maximum tag definitions reached. You can still use existing tag definitions,
+                        but cannot create new ones.
+                      </Badge>
                     )}
 
                   <div className='flex gap-[8px]'>