improvement: tables, chat

Author: emir-karabeg

apps/sim/app/api/table/[tableId]/rows/[rowId]/route.ts

@@ -7,7 +7,7 @@ import { z } from 'zod'
 import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid'
 import { generateRequestId } from '@/lib/core/utils/request'
 import type { RowData } from '@/lib/table'
-import { updateRow } from '@/lib/table'
+import { deleteRow, updateRow } from '@/lib/table'
 import { accessError, checkAccess } from '@/app/api/table/utils'
 
 const logger = createLogger('TableRowAPI')
@@ -243,22 +243,7 @@ export async function DELETE(request: NextRequest, { params }: RowRouteParams) {
       return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
     }
 
-    const [deletedRow] = await db
-      .delete(userTableRows)
-      .where(
-        and(
-          eq(userTableRows.id, rowId),
-          eq(userTableRows.tableId, tableId),
-          eq(userTableRows.workspaceId, validated.workspaceId)
-        )
-      )
-      .returning()
-
-    if (!deletedRow) {
-      return NextResponse.json({ error: 'Row not found' }, { status: 404 })
-    }
-
-    logger.info(`[${requestId}] Deleted row ${rowId} from table ${tableId}`)
+    await deleteRow(tableId, rowId, validated.workspaceId, requestId)
 
     return NextResponse.json({
       success: true,
@@ -275,6 +260,12 @@ export async function DELETE(request: NextRequest, { params }: RowRouteParams) {
       )
     }
 
+    const errorMessage = error instanceof Error ? error.message : String(error)
+
+    if (errorMessage === 'Row not found') {
+      return NextResponse.json({ error: errorMessage }, { status: 404 })
+    }
+
     logger.error(`[${requestId}] Error deleting row:`, error)
     return NextResponse.json({ error: 'Failed to delete row' }, { status: 500 })
   }

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

@@ -166,7 +166,7 @@ export function Files() {
   const [creatingFile, setCreatingFile] = useState(false)
   const [isDirty, setIsDirty] = useState(false)
   const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
-  const [showPreview, setShowPreview] = useState(false)
+  const [showPreview, setShowPreview] = useState(true)
   const [showUnsavedChangesAlert, setShowUnsavedChangesAlert] = useState(false)
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
   const [contextMenuFile, setContextMenuFile] = useState<WorkspaceFileRecord | null>(null)
@@ -410,6 +410,7 @@ export function Files() {
     if (justCreatedFileIdRef.current && selectedFileId !== justCreatedFileIdRef.current) {
       justCreatedFileIdRef.current = null
     }
+    setShowPreview(true)
   }, [selectedFileId])
 
   useEffect(() => {

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts

@@ -100,9 +100,18 @@ function mapStoredMessage(msg: TaskStoredMessage): ChatMessage {
   }
 
   if (Array.isArray(msg.toolCalls) && msg.toolCalls.length > 0) {
-    mapped.contentBlocks = msg.toolCalls.map(mapStoredToolCall)
+    const blocks: ContentBlock[] = msg.toolCalls.map(mapStoredToolCall)
+    if (msg.content?.trim()) {
+      blocks.push({ type: 'text', content: msg.content })
+    }
+    mapped.contentBlocks = blocks
   } else if (Array.isArray(msg.contentBlocks) && msg.contentBlocks.length > 0) {
-    mapped.contentBlocks = msg.contentBlocks.map(mapStoredBlock)
+    const blocks = msg.contentBlocks.map(mapStoredBlock)
+    const hasText = blocks.some((b) => b.type === 'text' && b.content?.trim())
+    if (!hasText && msg.content?.trim()) {
+      blocks.push({ type: 'text', content: msg.content })
+    }
+    mapped.contentBlocks = blocks
   }
 
   return mapped

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/context-menu/context-menu.tsx

@@ -1,38 +1,36 @@
-import { ArrowDown, ArrowUp, Edit, Trash2 } from 'lucide-react'
-import {
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverDivider,
-  PopoverItem,
-} from '@/components/emcn'
+import { Popover, PopoverAnchor, PopoverContent } from '@/components/emcn'
+import { ArrowDown, ArrowUp, Pencil, Trash } from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
 import type { ContextMenuState } from '../../types'
 
+const MENU_ITEM =
+  'relative flex cursor-default select-none items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-secondary)] outline-none transition-colors hover:bg-[var(--surface-4)] hover:text-[var(--text-primary)] [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0'
+
+const MENU_SEPARATOR = '-mx-[6px] my-[6px] h-px bg-[var(--border-1)]'
+
 interface ContextMenuProps {
   contextMenu: ContextMenuState
   onClose: () => void
-  onEdit: () => void
+  onEditCell: () => void
   onDelete: () => void
   onInsertAbove: () => void
   onInsertBelow: () => void
+  selectedRowCount?: number
 }
 
 export function ContextMenu({
   contextMenu,
   onClose,
-  onEdit,
+  onEditCell,
   onDelete,
   onInsertAbove,
   onInsertBelow,
+  selectedRowCount = 1,
 }: ContextMenuProps) {
+  const deleteLabel = selectedRowCount > 1 ? `Delete ${selectedRowCount} rows` : 'Delete row'
+
   return (
-    <Popover
-      open={contextMenu.isOpen}
-      onOpenChange={(open) => !open && onClose()}
-      variant='secondary'
-      size='sm'
-      colorScheme='inverted'
-    >
+    <Popover open={contextMenu.isOpen} onOpenChange={(open) => !open && onClose()}>
       <PopoverAnchor
         style={{
           position: 'fixed',
@@ -42,24 +40,36 @@ export function ContextMenu({
           height: '1px',
         }}
       />
-      <PopoverContent align='start' side='bottom' sideOffset={4}>
-        <PopoverItem onClick={onEdit}>
-          <Edit className='mr-[8px] h-[12px] w-[12px]' />
-          Edit row
-        </PopoverItem>
-        <PopoverItem onClick={onInsertAbove}>
-          <ArrowUp className='mr-[8px] h-[12px] w-[12px]' />
+      <PopoverContent
+        align='start'
+        side='bottom'
+        sideOffset={4}
+        border
+        className='!min-w-[160px] !rounded-[8px] !bg-[var(--bg)] !p-[6px] shadow-sm'
+      >
+        {contextMenu.columnName && (
+          <div className={MENU_ITEM} onClick={onEditCell} role='menuitem'>
+            <Pencil />
+            Edit cell
+          </div>
+        )}
+        <div className={MENU_ITEM} onClick={onInsertAbove} role='menuitem'>
+          <ArrowUp />
           Insert row above
-        </PopoverItem>
-        <PopoverItem onClick={onInsertBelow}>
-          <ArrowDown className='mr-[8px] h-[12px] w-[12px]' />
+        </div>
+        <div className={MENU_ITEM} onClick={onInsertBelow} role='menuitem'>
+          <ArrowDown />
           Insert row below
-        </PopoverItem>
-        <PopoverDivider />
-        <PopoverItem onClick={onDelete} className='text-[var(--text-error)]'>
-          <Trash2 className='mr-[8px] h-[12px] w-[12px]' />
-          Delete row
-        </PopoverItem>
+        </div>
+        <div className={MENU_SEPARATOR} role='separator' />
+        <div
+          className={cn(MENU_ITEM, 'text-[var(--text-error)] hover:text-[var(--text-error)]')}
+          onClick={onDelete}
+          role='menuitem'
+        >
+          <Trash />
+          {deleteLabel}
+        </div>
       </PopoverContent>
     </Popover>
   )

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { AlertCircle } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Button,
@@ -148,50 +147,32 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
     onClose()
   }
 
-  // Delete mode UI
   if (mode === 'delete') {
     const deleteCount = rowIds?.length ?? (row ? 1 : 0)
     const isSingleRow = deleteCount === 1
 
     return (
       <Modal open={isOpen} onOpenChange={handleClose}>
-        <ModalContent className='w-[480px]'>
-          <ModalHeader>
-            <div className='flex items-center gap-[10px]'>
-              <div className='flex h-[36px] w-[36px] items-center justify-center rounded-[8px] bg-[var(--bg-error)] text-[var(--text-error)]'>
-                <AlertCircle className='h-[18px] w-[18px]' />
-              </div>
-              <h2 className='font-semibold text-[16px]'>
-                Delete {isSingleRow ? 'Row' : `${deleteCount} Rows`}
-              </h2>
-            </div>
-          </ModalHeader>
+        <ModalContent size='sm'>
+          <ModalHeader>Delete {isSingleRow ? 'Row' : `${deleteCount} Rows`}</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[16px]'>
-              <ErrorMessage error={error} />
-              <p className='text-[14px] text-[var(--text-secondary)]'>
-                Are you sure you want to delete {isSingleRow ? 'this row' : 'these rows'}? This
-                action cannot be undone.
-              </p>
-            </div>
+            {error && (
+              <div className='rounded-[8px] border border-[var(--status-error-border)] bg-[var(--status-error-bg)] px-[14px] py-[12px] text-[13px] text-[var(--status-error-text)]'>
+                {error}
+              </div>
+            )}
+            <p className='text-[12px] text-[var(--text-secondary)]'>
+              Are you sure you want to delete{' '}
+              {isSingleRow ? 'this row' : `these ${deleteCount} rows`}? This will permanently remove
+              all data in {isSingleRow ? 'this row' : 'these rows'}.{' '}
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+            </p>
           </ModalBody>
-          <ModalFooter className='gap-[10px]'>
-            <Button
-              type='button'
-              variant='default'
-              onClick={handleClose}
-              className='min-w-[90px]'
-              disabled={isSubmitting}
-            >
+          <ModalFooter>
+            <Button variant='default' onClick={handleClose} disabled={isSubmitting}>
               Cancel
             </Button>
-            <Button
-              type='button'
-              variant='destructive'
-              onClick={handleDelete}
-              disabled={isSubmitting}
-              className='min-w-[120px]'
-            >
+            <Button variant='destructive' onClick={handleDelete} disabled={isSubmitting}>
               {isSubmitting ? 'Deleting...' : 'Delete'}
             </Button>
           </ModalFooter>