fix(chat): restore Inter and refine table overflow

Author: waleedlatif1

apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx

@@ -10,6 +10,7 @@ import {
   isAssistantImageType,
 } from '@/lib/uploads/shared/assistant-images'
 import { MOTHERSHIP_ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
+import { inter } from '@/app/_styles/fonts/inter/inter'
 import { SearchInputBar } from '@/app/o/[organizationId]/components/search-input-bar'
 import { useOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
 import { AttachedFilesList } from '@/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list'
@@ -268,6 +269,7 @@ export function Composer({
       onDragOver={files.handleDragOver}
       onDrop={files.handleDrop}
       className={cn(
+        inter.className,
         'relative z-10 mx-auto w-full max-w-chat',
         !imagesOnly &&
           'rounded-2xl border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',

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

@@ -11,7 +11,7 @@ import {
   useState,
 } from 'react'
 import type { Nodes } from 'hast'
-import { defaultRehypePlugins, defaultRemarkPlugins, type ExtraProps, Streamdown } from 'streamdown'
+import { defaultRehypePlugins, defaultRemarkPlugins, Streamdown } from 'streamdown'
 import 'streamdown/styles.css'
 // prismjs core must load before its language components — they register on the
 // global `Prism` it installs (on `window`/`global`); fixes SSR + client order.
@@ -28,14 +28,17 @@ import {
   cn,
   Lightbox,
   languages,
-  OverflowText,
   highlight as prismHighlight,
+  scrollFadeAttributes,
+  scrollFadeXClass,
+  useScrollEdges,
 } from '@sim/emcn'
 import { extractTextContent } from '@/lib/core/utils/react-node-text'
 import {
   inlineChatImageUrl,
   isInlineFileReference,
 } from '@/lib/mothership/chat/inline-image-reference'
+import { inter } from '@/app/_styles/fonts/inter/inter'
 import { useChatSurface } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
 import { sanitizeChatDisplayContent } from '@/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-sanitize'
 import {
@@ -267,69 +270,56 @@ function highlight(code: string, language: string): string {
   return html
 }
 
-function hasInteractiveTableContent(node?: Nodes): boolean {
-  return (
-    node?.type === 'element' &&
-    (node.tagName === 'a' ||
-      node.tagName === 'img' ||
-      node.children.some(hasInteractiveTableContent))
-  )
-}
-
-interface TableCellContentProps extends ExtraProps {
+interface MarkdownTableProps {
   children?: React.ReactNode
 }
 
-function TableCellContent({ children, node }: TableCellContentProps) {
-  if (hasInteractiveTableContent(node)) {
-    return (
-      <div className='min-w-[160px] max-w-[320px] whitespace-normal [overflow-wrap:anywhere]'>
-        {children}
-      </div>
-    )
-  }
+function MarkdownTable({ children }: MarkdownTableProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const edges = useScrollEdges(scrollRef, { axis: 'x' })
+  const isOverflowing = edges.left || edges.right
+
   return (
-    <span className='inline-block max-w-full align-middle'>
-      <OverflowText
-        label={extractTextContent(children)}
-        className='[&_code]:whitespace-nowrap [@media(hover:hover)]:max-w-[320px]'
-      >
+    <div
+      ref={scrollRef}
+      role={isOverflowing ? 'region' : undefined}
+      aria-label={isOverflowing ? 'Scrollable table' : undefined}
+      tabIndex={isOverflowing ? 0 : undefined}
+      className={cn(
+        'not-prose my-4 w-full overflow-x-auto [&_strong]:font-semibold',
+        scrollFadeXClass
+      )}
+      {...scrollFadeAttributes(edges)}
+    >
+      <table className='min-w-full border-collapse [&_tbody_tr:last-child_td]:border-b-0'>
         {children}
-      </OverflowText>
-    </span>
+      </table>
+    </div>
   )
 }
 
 const MARKDOWN_COMPONENTS = {
-  table({ children }: { children?: React.ReactNode }) {
-    return (
-      <div className='not-prose my-4 w-full overflow-x-auto [&_strong]:font-semibold'>
-        <table className='min-w-full table-auto border-collapse [&_tbody_tr:last-child_td]:border-b-0'>
-          {children}
-        </table>
-      </div>
-    )
-  },
+  table: MarkdownTable,
   thead({ children }: { children?: React.ReactNode }) {
     return <thead>{children}</thead>
   },
-  th({ children, style, node }: ThProps & ExtraProps) {
+  th({ children, style }: ThProps) {
     return (
       <th
         style={{ textAlign: style?.textAlign }}
         className='whitespace-nowrap border-[var(--border)] border-b px-3 py-2 text-left font-semibold text-[var(--text-primary)] text-sm leading-6'
       >
-        <TableCellContent node={node}>{children}</TableCellContent>
+        {children}
       </th>
     )
   },
-  td({ children, style, node }: TdProps & ExtraProps) {
+  td({ children, style }: TdProps) {
     return (
       <td
         style={{ textAlign: style?.textAlign }}
         className='whitespace-nowrap border-[var(--border)] border-b px-3 py-2 text-[var(--text-primary)] text-sm leading-6'
       >
-        <TableCellContent node={node}>{children}</TableCellContent>
+        {children}
       </td>
     )
   },
@@ -764,7 +754,7 @@ function ChatContentInner({
         <WorkspaceRefsContext.Provider
           value={{ resources: workspaceRefs, onSelect: onWorkspaceResourceSelect }}
         >
-          <div className='space-y-3'>
+          <div className={cn('space-y-3', inter.className)}>
             {groups.map((group, i) => {
               if (group.kind === 'inline') {
                 return (

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-presentation.test.tsx

@@ -40,7 +40,7 @@ async function render(content: string) {
 }
 
 describe('mixed chat presentation', () => {
-  it('preserves table formatting and gives interactive cells their own preview without an overflow tooltip', async () => {
+  it('preserves full table content and gives links their own preview without competing tooltips', async () => {
     const source = JSON.stringify({
       url: 'https://example.com/review',
       title: 'Release review',
@@ -56,9 +56,10 @@ describe('mixed chat presentation', () => {
       'center',
       'right',
     ])
-    expect(
-      container.querySelector('td [data-overflow-text] [data-streamdown="strong"]')?.textContent
-    ).toBe('A long document title')
+    expect(container.querySelector('td [data-streamdown="strong"]')?.textContent).toBe(
+      'A long document title'
+    )
+    expect(container.querySelector('td')?.querySelector('[data-overflow-text]')).toBeNull()
     expect(container.querySelector('td code')?.textContent).toBe('search workspace')
     expect(container.querySelector('td a[href="https://example.com/guide"] em')?.textContent).toBe(
       'the guide'

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

@@ -1,7 +1,8 @@
 'use client'
 
-import { Popover, PopoverContent, PopoverTrigger, Tooltip } from '@sim/emcn'
+import { cn, Popover, PopoverContent, PopoverTrigger, Tooltip } from '@sim/emcn'
 import { BookOpen } from '@sim/emcn/icons'
+import { inter } from '@/app/_styles/fonts/inter/inter'
 import { SourceCard } from '@/app/workspace/[workspaceId]/home/components/message-content/components/source-card'
 import type { SourceTagData } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
 
@@ -36,7 +37,12 @@ export function MessageSources({ sources }: MessageSourcesProps) {
         </Tooltip.Trigger>
         <Tooltip.Content side='top'>{label}</Tooltip.Content>
       </Tooltip.Root>
-      <PopoverContent align='start' side='top' sideOffset={4} className='w-[420px] p-0'>
+      <PopoverContent
+        align='start'
+        side='top'
+        sideOffset={4}
+        className={cn('w-[420px] p-0', inter.className)}
+      >
         <div className='flex flex-col py-1'>
           {sources.map((source) => (
             <SourceCard key={source.url} source={source} dense />

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/source-preview.tsx

@@ -1,8 +1,9 @@
 'use client'
 
 import { type ReactElement, useEffect, useRef, useState } from 'react'
-import { OverflowText, Popover, PopoverAnchor, PopoverContent } from '@sim/emcn'
+import { cn, OverflowText, Popover, PopoverAnchor, PopoverContent } from '@sim/emcn'
 import { ArrowUpRight } from '@sim/emcn/icons'
+import { inter } from '@/app/_styles/fonts/inter/inter'
 import { SourceIcon } from '@/app/workspace/[workspaceId]/home/components/message-content/components/source-chip/source-icon'
 import {
   handleExternalLinkClick,
@@ -76,7 +77,7 @@ export function SourcePreview({ source, children }: SourcePreviewProps) {
           ref={content}
           appearance='tooltip'
           maxWidth='min(320px, calc(100vw - 2rem))'
-          className='w-[320px]'
+          className={cn('w-[320px]', inter.className)}
           sideOffset={8}
           aria-label='Source preview'
           onFocusOutside={(event) => {

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

@@ -17,6 +17,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { defaultRangeExtractor, type Range, useVirtualizer } from '@tanstack/react-virtual'
 import { SMOOTH_CHASE_RATE } from '@/lib/core/utils/smooth-bottom-chase'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
+import { inter } from '@/app/_styles/fonts/inter/inter'
 import { MessageActions } from '@/app/workspace/[workspaceId]/components/message-actions'
 import { ChatMessageAttachments } from '@/app/workspace/[workspaceId]/home/components/chat-message-attachments'
 import { ChatSurfaceProvider } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
@@ -814,7 +815,7 @@ export function MothershipChat({
       onContextRemove={onContextRemove}
       onWorkspaceResourceSelect={onWorkspaceResourceSelect}
     >
-      <div className={cn('flex h-full min-h-0 flex-col', className)}>
+      <div className={cn('flex h-full min-h-0 flex-col', inter.className, className)}>
         <div ref={setScrollElement} className={styles.scrollContainer} onCopy={handleCopy}>
           {isLoading && !hasMessages ? (
             <MothershipChatSkeleton layout={layout} />

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -18,6 +18,7 @@ import { getMothershipAttachmentPreviewUrl } from '@/lib/mothership/chat/attachm
 import { MOTHERSHIP_ADD_CONTEXT_EVENT } from '@/lib/mothership/events'
 import { SIM_RESOURCE_DRAG_TYPE, SIM_RESOURCES_DRAG_TYPE } from '@/lib/mothership/resource-types'
 import { MOTHERSHIP_ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
+import { inter } from '@/app/_styles/fonts/inter/inter'
 import { useChatSurface } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
 import {
   AnimatedPlaceholderEffect,
@@ -558,6 +559,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
       }}
       className={cn(
         'relative z-10 mx-auto w-full max-w-chat cursor-text rounded-2xl border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
+        inter.className,
         isInitialView && 'shadow-ambient'
       )}
       onDragEnter={handleDragEnter}

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

@@ -3,6 +3,7 @@
 import { useMemo } from 'react'
 import { cn } from '@sim/emcn'
 import { escapeRegExp } from '@sim/utils/string'
+import { inter } from '@/app/_styles/fonts/inter/inter'
 import { ContextMentionIcon } from '@/app/workspace/[workspaceId]/home/components/context-mention-icon'
 import { ResourceMention } from '@/app/workspace/[workspaceId]/home/components/message-content/components/resource-mention'
 import type { ChatMessageContext } from '@/app/workspace/[workspaceId]/home/types'
@@ -126,7 +127,7 @@ export function UserMessageContent({
   compact = false,
 }: UserMessageContentProps) {
   const trimmed = content.trim()
-  const classes = cn(compact ? COMPACT_CLASSES : USER_MESSAGE_CLASSES, className)
+  const classes = cn(inter.className, compact ? COMPACT_CLASSES : USER_MESSAGE_CLASSES, className)
 
   const ranges = useMemo(() => computeMentionRanges(content, contexts ?? []), [content, contexts])
 

apps/sim/lib/core/errors/retryable-infrastructure.ts

@@ -22,6 +22,7 @@ const RETRYABLE_NETWORK_ERROR_CODES = new Set([
   'ECONNRESET',
   'ECONNREFUSED',
   'EPIPE',
+  'ERR_STREAM_PREMATURE_CLOSE',
   'ENETDOWN',
   'ENETRESET',
   'ENETUNREACH',

apps/sim/lib/core/security/input-validation.server.ts

@@ -31,7 +31,10 @@ import {
 } from '@/lib/core/security/egress/validate'
 import type { HttpRedirectPolicy } from '@/lib/core/security/http-redirect-policy'
 import type { ValidationResult } from '@/lib/core/security/input-validation'
-import { nodeReadableToWebStream } from '@/lib/core/utils/node-stream'
+import {
+  createPrematureStreamCloseError,
+  nodeReadableToWebStream,
+} from '@/lib/core/utils/node-stream'
 import { PayloadSizeLimitError } from '@/lib/core/utils/stream-limits'
 
 const logger = createLogger('InputValidation')
@@ -918,7 +921,7 @@ async function undiciRequestAsResponse(
     signal?.addEventListener('abort', onAbort, { once: true })
     body.once('error', (error) => decoder.destroy(error))
     body.once('close', () => {
-      if (!body.readableEnded) decoder.destroy(new Error('Response body closed before completing'))
+      if (!body.readableEnded) decoder.destroy(createPrematureStreamCloseError())
     })
     decoder.once('close', () => {
       signal?.removeEventListener('abort', onAbort)
@@ -1421,13 +1424,12 @@ export async function secureFetchWithPinnedIP(
           })
           nodeRes.once('error', fail)
           nodeRes.once('close', () => {
-            if (!bodySettled) fail(new Error('Response body closed before completing'))
+            if (!bodySettled) fail(createPrematureStreamCloseError())
           })
           if (decoder) {
             res.once('error', (error) => decoder.destroy(error))
             res.once('close', () => {
-              if (!res.readableEnded)
-                decoder.destroy(new Error('Response body closed before completing'))
+              if (!res.readableEnded) decoder.destroy(createPrematureStreamCloseError())
             })
             res.pipe(decoder)
           }