improvement: loading and file dropping

emir-karabeg · emir-karabeg · commit f86e67dbf3db · 2026-03-11T03:15:19.000-07:00
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts
@@ -14,7 +14,7 @@ import {
   Integration,
   Library,
   Pencil,
-  Play,
+  PlayOutline,
   Rocket,
   Search,
   Settings,
@@ -39,13 +39,13 @@ const TOOL_ICONS: Record<MothershipToolName | SubagentName | 'mothership', IconC
   manage_skill: Asterisk,
   user_memory: Database,
   function_execute: TerminalWindow,
-  superagent: Play,
+  superagent: Blimp,
   user_table: TableIcon,
   workspace_file: File,
   create_workflow: Connections,
   edit_workflow: Pencil,
   build: Hammer,
-  run: Play,
+  run: PlayOutline,
   deploy: Rocket,
   auth: Integration,
   knowledge: Database,
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { ElementType, SVGProps } from 'react'
-import { Button } from '@/components/emcn'
+import { Button, Tooltip } from '@/components/emcn'
 import { PanelLeft, Table as TableIcon } from '@/components/emcn/icons'
 import { WorkflowIcon } from '@/components/icons'
 import { getDocumentIcon } from '@/components/icons/document-icons'
@@ -76,47 +76,67 @@ export function ResourceTabs({
 }: ResourceTabsProps) {
   return (
     <div className='flex shrink-0 items-center border-[var(--border)] border-b px-[16px] py-[8.5px]'>
-      <Button
-        variant='subtle'
-        onClick={onCollapse}
-        className='shrink-0 bg-transparent px-[8px] py-[5px] text-[12px]'
-        aria-label='Collapse resource view'
-      >
-        <PanelLeft className='-scale-x-100 h-[16px] w-[16px] text-[var(--text-icon)]' />
-      </Button>
-      <div className='flex min-w-0 items-center gap-[6px] overflow-x-auto pl-[6px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button
+            variant='subtle'
+            onClick={onCollapse}
+            className='shrink-0 bg-transparent px-[8px] py-[5px] text-[12px]'
+            aria-label='Collapse resource view'
+          >
+            <PanelLeft className='-scale-x-100 h-[16px] w-[16px] text-[var(--text-icon)]' />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side='bottom'>
+          <p>Collapse</p>
+        </Tooltip.Content>
+      </Tooltip.Root>
+      <div className='mx-[2px] flex min-w-0 items-center gap-[6px] overflow-x-auto px-[6px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
         {resources.map((resource) => {
           const Icon = getResourceIcon(resource)
           const isActive = activeId === resource.id
 
           return (
-            <Button
-              key={resource.id}
-              variant='subtle'
-              onClick={() => onSelect(resource.id)}
-              className={cn(
-                'shrink-0 bg-transparent px-[8px] py-[4px] text-[12px]',
-                isActive && 'bg-[var(--surface-4)]'
-              )}
-            >
-              <Icon className={cn('mr-[6px] h-[14px] w-[14px] text-[var(--text-icon)]')} />
-              {resource.title}
-            </Button>
+            <Tooltip.Root key={resource.id}>
+              <Tooltip.Trigger asChild>
+                <Button
+                  variant='subtle'
+                  onClick={() => onSelect(resource.id)}
+                  className={cn(
+                    'shrink-0 bg-transparent px-[8px] py-[4px] text-[12px]',
+                    isActive && 'bg-[var(--surface-4)]'
+                  )}
+                >
+                  <Icon className={cn('mr-[6px] h-[14px] w-[14px] text-[var(--text-icon)]')} />
+                  {resource.title}
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='bottom'>
+                <p>{resource.title}</p>
+              </Tooltip.Content>
+            </Tooltip.Root>
           )
         })}
       </div>
       {previewMode && onCyclePreviewMode && (
-        <Button
-          variant='subtle'
-          onClick={onCyclePreviewMode}
-          className='ml-auto shrink-0 bg-transparent px-[8px] py-[5px] text-[12px]'
-          aria-label='Cycle preview mode'
-        >
-          <PreviewModeIcon
-            mode={previewMode}
-            className='h-[16px] w-[16px] text-[var(--text-icon)]'
-          />
-        </Button>
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Button
+              variant='subtle'
+              onClick={onCyclePreviewMode}
+              className='ml-auto shrink-0 bg-transparent px-[8px] py-[5px] text-[12px]'
+              aria-label='Cycle preview mode'
+            >
+              <PreviewModeIcon
+                mode={previewMode}
+                className='h-[16px] w-[16px] text-[var(--text-icon)]'
+              />
+            </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='bottom'>
+            <p>Preview mode</p>
+          </Tooltip.Content>
+        </Tooltip.Root>
       )}
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -1,8 +1,20 @@
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { ArrowUp, FileText, Loader2, Mic, Paperclip, X } from 'lucide-react'
-import { Button } from '@/components/emcn'
+import { ArrowUp, Loader2, Mic, Paperclip, X } from 'lucide-react'
+import { Button, Tooltip } from '@/components/emcn'
+import {
+  AudioIcon,
+  CsvIcon,
+  DocxIcon,
+  getDocumentIcon,
+  JsonIcon,
+  MarkdownIcon,
+  PdfIcon,
+  TxtIcon,
+  VideoIcon,
+  XlsxIcon,
+} from '@/components/icons/document-icons'
 import { cn } from '@/lib/core/utils/cn'
 import { CHAT_ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
 import { useFileAttachments } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments'
@@ -23,7 +35,19 @@ const SEND_BUTTON_ACTIVE =
   'bg-[var(--c-383838)] hover:bg-[var(--c-575757)] dark:bg-[var(--c-E0E0E0)] dark:hover:bg-[var(--c-CFCFCF)]'
 const SEND_BUTTON_DISABLED = 'bg-[var(--c-808080)] dark:bg-[var(--c-808080)]'
 
-const MAX_CHAT_TEXTAREA_HEIGHT = 200 // 8 lines × 24px line-height + 8px padding
+const MAX_CHAT_TEXTAREA_HEIGHT = 200
+
+const DROP_OVERLAY_ICONS = [
+  PdfIcon,
+  DocxIcon,
+  XlsxIcon,
+  CsvIcon,
+  TxtIcon,
+  MarkdownIcon,
+  JsonIcon,
+  AudioIcon,
+  VideoIcon,
+] as const
 
 function autoResizeTextarea(e: React.FormEvent<HTMLTextAreaElement>, maxHeight: number) {
   const target = e.target as HTMLTextAreaElement
@@ -189,9 +213,8 @@ export function UserInput({
     <div
       onClick={handleContainerClick}
       className={cn(
-        'mx-auto w-full max-w-[42rem] cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--white)] px-[10px] py-[8px] dark:bg-[var(--surface-4)]',
-        isInitialView && 'shadow-sm',
-        files.isDragging && 'ring-[1.75px] ring-[var(--brand-secondary)]'
+        'relative mx-auto w-full max-w-[42rem] cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--white)] px-[10px] py-[8px] dark:bg-[var(--surface-4)]',
+        isInitialView && 'shadow-sm'
       )}
       onDragEnter={files.handleDragEnter}
       onDragLeave={files.handleDragLeave}
@@ -204,48 +227,52 @@ export function UserInput({
           {files.attachedFiles.map((file) => {
             const isImage = file.type.startsWith('image/')
             return (
-              <div
-                key={file.id}
-                className='group relative h-[56px] w-[56px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)] hover:bg-[var(--surface-4)]'
-                title={`${file.name} (${files.formatFileSize(file.size)})`}
-                onClick={() => files.handleFileClick(file)}
-              >
-                {isImage && file.previewUrl ? (
-                  <img
-                    src={file.previewUrl}
-                    alt={file.name}
-                    className='h-full w-full object-cover'
-                  />
-                ) : (
-                  <div className='flex h-full w-full flex-col items-center justify-center gap-[2px]'>
-                    {file.type.includes('pdf') ? (
-                      <FileText className='h-[18px] w-[18px] text-red-500' />
+              <Tooltip.Root key={file.id}>
+                <Tooltip.Trigger asChild>
+                  <div
+                    className='group relative h-[56px] w-[56px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)] hover:bg-[var(--surface-4)]'
+                    onClick={() => files.handleFileClick(file)}
+                  >
+                    {isImage && file.previewUrl ? (
+                      <img
+                        src={file.previewUrl}
+                        alt={file.name}
+                        className='h-full w-full object-cover'
+                      />
                     ) : (
-                      <FileText className='h-[18px] w-[18px] text-blue-500' />
+                      <div className='flex h-full w-full flex-col items-center justify-center gap-[2px] text-[var(--text-icon)]'>
+                        {(() => {
+                          const Icon = getDocumentIcon(file.type, file.name)
+                          return <Icon className='h-[18px] w-[18px]' />
+                        })()}
+                        <span className='max-w-[48px] truncate px-[2px] text-[9px] text-[var(--text-muted)]'>
+                          {file.name.split('.').pop()}
+                        </span>
+                      </div>
+                    )}
+                    {file.uploading && (
+                      <div className='absolute inset-0 flex items-center justify-center bg-black/50'>
+                        <Loader2 className='h-[14px] w-[14px] animate-spin text-white' />
+                      </div>
+                    )}
+                    {!file.uploading && (
+                      <button
+                        type='button'
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          files.removeFile(file.id)
+                        }}
+                        className='absolute top-[2px] right-[2px] flex h-[16px] w-[16px] items-center justify-center rounded-full bg-black/60 opacity-0 group-hover:opacity-100'
+                      >
+                        <X className='h-[10px] w-[10px] text-white' />
+                      </button>
                     )}
-                    <span className='max-w-[48px] truncate px-[2px] text-[9px] text-[var(--text-muted)]'>
-                      {file.name.split('.').pop()}
-                    </span>
-                  </div>
-                )}
-                {file.uploading && (
-                  <div className='absolute inset-0 flex items-center justify-center bg-black/50'>
-                    <Loader2 className='h-[14px] w-[14px] animate-spin text-white' />
                   </div>
-                )}
-                {!file.uploading && (
-                  <button
-                    type='button'
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      files.removeFile(file.id)
-                    }}
-                    className='absolute top-[2px] right-[2px] flex h-[16px] w-[16px] items-center justify-center rounded-full bg-black/60 opacity-0 group-hover:opacity-100'
-                  >
-                    <X className='h-[10px] w-[10px] text-white' />
-                  </button>
-                )}
-              </div>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>
+                  <p className='max-w-[200px] truncate'>{file.name}</p>
+                </Tooltip.Content>
+              </Tooltip.Root>
             )
           })}
         </div>
@@ -257,7 +284,7 @@ export function UserInput({
         onChange={(e) => setValue(e.target.value)}
         onKeyDown={handleKeyDown}
         onInput={handleInput}
-        placeholder={files.isDragging ? 'Drop files here...' : placeholder}
+        placeholder={placeholder}
         rows={1}
         className={cn(TEXTAREA_BASE_CLASSES, isInitialView ? 'max-h-[30vh]' : 'max-h-[200px]')}
       />
@@ -319,7 +346,6 @@ export function UserInput({
         </div>
       </div>
 
-      {/* Hidden file input */}
       <input
         ref={files.fileInputRef}
         type='file'
@@ -328,6 +354,19 @@ export function UserInput({
         accept={CHAT_ACCEPT_ATTRIBUTE}
         multiple
       />
+
+      {files.isDragging && (
+        <div className='pointer-events-none absolute inset-[6px] z-10 flex items-center justify-center rounded-[14px] border-[1.5px] border-[var(--border-1)] border-dashed bg-[var(--white)] dark:bg-[var(--surface-4)]'>
+          <div className='flex flex-col items-center gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Drop files</span>
+            <div className='flex items-center gap-[8px] text-[var(--text-icon)]'>
+              {DROP_OVERLAY_ICONS.map((Icon, i) => (
+                <Icon key={i} className='h-[14px] w-[14px]' />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { FileText } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
+import { Skeleton } from '@/components/emcn'
 import { PanelLeft } from '@/components/emcn/icons'
 import { useSession } from '@/lib/auth/auth-client'
 import {
@@ -13,6 +14,7 @@ import {
   LandingWorkflowSeedStorage,
 } from '@/lib/core/utils/browser-storage'
 import { persistImportedWorkflow } from '@/lib/workflows/operations/import-export'
+import { useChatHistory } from '@/hooks/queries/tasks'
 import { useSidebarStore } from '@/stores/sidebar/store'
 import { MessageContent, MothershipView, UserInput } from './components'
 import type { FileAttachmentForApi } from './components/user-input/user-input'
@@ -43,6 +45,23 @@ function ThinkingIndicator() {
   )
 }
 
+const SKELETON_LINE_COUNT = 4
+
+function ChatSkeleton({ children }: { children: React.ReactNode }) {
+  return (
+    <div className='flex h-full flex-col bg-[var(--bg)]'>
+      <div className='min-h-0 flex-1 overflow-hidden px-6 py-4'>
+        <div className='mx-auto max-w-[42rem] space-y-[10px] pt-3'>
+          {Array.from({ length: SKELETON_LINE_COUNT }).map((_, i) => (
+            <Skeleton key={i} className='h-[16px]' style={{ width: `${120 + (i % 4) * 48}px` }} />
+          ))}
+        </div>
+      </div>
+      <div className='flex-shrink-0 px-[24px] pb-[16px]'>{children}</div>
+    </div>
+  )
+}
+
 interface HomeProps {
   chatId?: string
 }
@@ -125,6 +144,8 @@ export function Home({ chatId }: HomeProps = {}) {
     }
   }, [createWorkflowFromLandingSeed, workspaceId, router])
 
+  const { isLoading: isLoadingHistory } = useChatHistory(chatId)
+
   const {
     messages,
     isSending,
@@ -174,6 +195,20 @@ export function Home({ chatId }: HomeProps = {}) {
 
   const hasMessages = messages.length > 0
 
+  if (!hasMessages && chatId && isLoadingHistory) {
+    return (
+      <ChatSkeleton>
+        <UserInput
+          onSubmit={handleSubmit}
+          isSending={isSending}
+          onStopGeneration={stopGeneration}
+          isInitialView={false}
+          userId={session?.user?.id}
+        />
+      </ChatSkeleton>
+    )
+  }
+
   if (!hasMessages) {
     return (
       <div className='flex h-full flex-col items-center justify-center bg-[var(--bg)] px-[24px]'>
diff --git a/apps/sim/components/emcn/icons/play.tsx b/apps/sim/components/emcn/icons/play.tsx
diff --git a/apps/sim/components/emcn/icons/rocket.tsx b/apps/sim/components/emcn/icons/rocket.tsx
