improvement: chat

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx

@@ -54,11 +54,14 @@ export function isPreviewable(file: { type: string; name: string }): boolean {
   return resolvePreviewType(file.type, file.name) !== null
 }
 
+export type PreviewMode = 'editor' | 'split' | 'preview'
+
 interface FileViewerProps {
   file: WorkspaceFileRecord
   workspaceId: string
   canEdit: boolean
   showPreview?: boolean
+  previewMode?: PreviewMode
   autoFocus?: boolean
   onDirtyChange?: (isDirty: boolean) => void
   onSaveStatusChange?: (status: 'idle' | 'saving' | 'saved' | 'error') => void
@@ -70,6 +73,7 @@ export function FileViewer({
   workspaceId,
   canEdit,
   showPreview,
+  previewMode,
   autoFocus,
   onDirtyChange,
   onSaveStatusChange,
@@ -83,7 +87,7 @@ export function FileViewer({
         file={file}
         workspaceId={workspaceId}
         canEdit={canEdit}
-        showPreview={showPreview}
+        previewMode={previewMode ?? (showPreview ? 'split' : 'editor')}
         autoFocus={autoFocus}
         onDirtyChange={onDirtyChange}
         onSaveStatusChange={onSaveStatusChange}
@@ -103,7 +107,7 @@ interface TextEditorProps {
   file: WorkspaceFileRecord
   workspaceId: string
   canEdit: boolean
-  showPreview?: boolean
+  previewMode: PreviewMode
   autoFocus?: boolean
   onDirtyChange?: (isDirty: boolean) => void
   onSaveStatusChange?: (status: 'idle' | 'saving' | 'saved' | 'error') => void
@@ -114,7 +118,7 @@ function TextEditor({
   file,
   workspaceId,
   canEdit,
-  showPreview,
+  previewMode,
   autoFocus,
   onDirtyChange,
   onSaveStatusChange,
@@ -256,36 +260,43 @@ function TextEditor({
     )
   }
 
+  const showEditor = previewMode !== 'preview'
+  const showPreviewPane = previewMode !== 'editor'
+
   return (
     <div ref={containerRef} className='relative flex flex-1 overflow-hidden'>
-      <textarea
-        ref={textareaRef}
-        value={content}
-        onChange={(e) => handleContentChange(e.target.value)}
-        readOnly={!canEdit}
-        spellCheck={false}
-        style={showPreview ? { width: `${splitPct}%`, flexShrink: 0 } : undefined}
-        className={cn(
-          'h-full resize-none border-0 bg-transparent p-[24px] font-mono text-[14px] text-[var(--text-body)] outline-none placeholder:text-[var(--text-subtle)]',
-          !showPreview && 'w-full',
-          isResizing && 'pointer-events-none'
-        )}
-      />
-      {showPreview && (
+      {showEditor && (
+        <textarea
+          ref={textareaRef}
+          value={content}
+          onChange={(e) => handleContentChange(e.target.value)}
+          readOnly={!canEdit}
+          spellCheck={false}
+          style={showPreviewPane ? { width: `${splitPct}%`, flexShrink: 0 } : undefined}
+          className={cn(
+            'h-full resize-none border-0 bg-transparent p-[24px] font-mono text-[14px] text-[var(--text-body)] outline-none placeholder:text-[var(--text-subtle)]',
+            !showPreviewPane && 'w-full',
+            isResizing && 'pointer-events-none'
+          )}
+        />
+      )}
+      {showPreviewPane && (
         <>
-          <div className='relative shrink-0'>
-            <div className='h-full w-px bg-[var(--border)]' />
-            <div
-              className='-left-[3px] absolute top-0 z-10 h-full w-[6px] cursor-col-resize'
-              onMouseDown={() => setIsResizing(true)}
-              role='separator'
-              aria-orientation='vertical'
-              aria-label='Resize split'
-            />
-            {isResizing && (
-              <div className='-translate-x-[0.5px] pointer-events-none absolute top-0 z-20 h-full w-[2px] bg-[var(--selection)]' />
-            )}
-          </div>
+          {showEditor && (
+            <div className='relative shrink-0'>
+              <div className='h-full w-px bg-[var(--border)]' />
+              <div
+                className='-left-[3px] absolute top-0 z-10 h-full w-[6px] cursor-col-resize'
+                onMouseDown={() => setIsResizing(true)}
+                role='separator'
+                aria-orientation='vertical'
+                aria-label='Resize split'
+              />
+              {isResizing && (
+                <div className='-translate-x-[0.5px] pointer-events-none absolute top-0 z-20 h-full w-[2px] bg-[var(--selection)]' />
+              )}
+            </div>
+          )}
           <div
             className={cn('min-w-0 flex-1 overflow-hidden', isResizing && 'pointer-events-none')}
           >

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/index.ts

@@ -1 +1,2 @@
+export type { PreviewMode } from './file-viewer'
 export { FileViewer, isPreviewable, isTextEditable } from './file-viewer'

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

@@ -1,9 +1,10 @@
 'use client'
 
-import { ArrowUpRight } from 'lucide-react'
+import { createElement } from 'react'
 import { useParams } from 'next/navigation'
 import { ArrowRight } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
+import { OAUTH_PROVIDERS } from '@/lib/oauth/oauth'
 
 export interface OptionsItemData {
   title: string
@@ -177,6 +178,8 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
   const entries = Object.entries(data)
   if (entries.length === 0) return null
 
+  const disabled = !onSelect
+
   return (
     <div className='animate-stream-fade-in'>
       <span className='font-[var(--sidebar-font-weight)] text-[14px] text-[var(--text-body)]'>
@@ -190,9 +193,11 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
             <button
               key={key}
               type='button'
-              onClick={() => onSelect?.(key)}
+              disabled={disabled}
+              onClick={() => onSelect?.(title)}
               className={cn(
-                'flex items-center gap-[8px] border-[var(--divider)] px-[8px] py-[8px] text-left transition-colors hover:bg-[var(--surface-5)]',
+                'flex items-center gap-[8px] border-[var(--divider)] px-[8px] py-[8px] text-left transition-colors',
+                disabled ? 'cursor-not-allowed' : 'hover:bg-[var(--surface-5)]',
                 i > 0 && 'border-t'
               )}
             >
@@ -213,33 +218,56 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
   )
 }
 
+function getCredentialIcon(provider: string): React.ComponentType<{ className?: string }> | null {
+  const lower = provider.toLowerCase()
+
+  const directMatch = OAUTH_PROVIDERS[lower]
+  if (directMatch) return directMatch.icon
+
+  for (const config of Object.values(OAUTH_PROVIDERS)) {
+    if (config.name.toLowerCase() === lower) return config.icon
+    for (const service of Object.values(config.services)) {
+      if (service.name.toLowerCase() === lower) return service.icon
+      if (service.providerId.toLowerCase() === lower) return service.icon
+    }
+  }
+
+  return null
+}
+
+const LockIcon = (props: { className?: string }) => (
+  <svg
+    className={props.className}
+    viewBox='0 0 16 16'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <rect x='2' y='5' width='12' height='8' rx='1.5' stroke='currentColor' strokeWidth='1.3' />
+    <path
+      d='M5 5V3.5a3 3 0 1 1 6 0V5'
+      stroke='currentColor'
+      strokeWidth='1.3'
+      strokeLinecap='round'
+    />
+    <circle cx='8' cy='9.5' r='1.25' fill='currentColor' />
+  </svg>
+)
+
 function CredentialDisplay({ data }: { data: CredentialTagData }) {
+  const Icon = getCredentialIcon(data.provider) ?? LockIcon
+
   return (
     <a
       href={data.link}
       target='_blank'
       rel='noopener noreferrer'
       className='flex animate-stream-fade-in items-center gap-[8px] rounded-lg border border-[var(--divider)] px-3 py-2.5 transition-colors hover:bg-[var(--surface-5)]'
     >
-      <svg
-        className='h-[16px] w-[16px] shrink-0 text-[var(--text-icon)]'
-        viewBox='0 0 16 16'
-        fill='none'
-        xmlns='http://www.w3.org/2000/svg'
-      >
-        <rect x='2' y='5' width='12' height='8' rx='1.5' stroke='currentColor' strokeWidth='1.3' />
-        <path
-          d='M5 5V3.5a3 3 0 1 1 6 0V5'
-          stroke='currentColor'
-          strokeWidth='1.3'
-          strokeLinecap='round'
-        />
-        <circle cx='8' cy='9.5' r='1.25' fill='currentColor' />
-      </svg>
+      {createElement(Icon, { className: 'h-[16px] w-[16px] shrink-0' })}
       <span className='flex-1 font-[var(--sidebar-font-weight)] text-[14px] text-[var(--text-body)]'>
         Connect {data.provider}
       </span>
-      <ArrowUpRight className='h-[16px] w-[16px] shrink-0 text-[var(--text-icon)]' />
+      <ArrowRight className='h-[16px] w-[16px] shrink-0 text-[var(--text-icon)]' />
     </a>
   )
 }
@@ -279,7 +307,7 @@ function UsageUpgradeDisplay({ data }: { data: UsageUpgradeTagData }) {
         className='mt-2 inline-flex items-center gap-1 font-[500] text-[13px] text-amber-700 underline decoration-dashed underline-offset-2 transition-colors hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-200'
       >
         {buttonLabel}
-        <ArrowUpRight className='h-3 w-3' />
+        <ArrowRight className='h-3 w-3' />
       </a>
     </div>
   )

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

@@ -202,7 +202,12 @@ export function MessageContent({
         switch (segment.type) {
           case 'text':
             return (
-              <ChatContent key={`text-${i}`} content={segment.content} isStreaming={isStreaming} />
+              <ChatContent
+                key={`text-${i}`}
+                content={segment.content}
+                isStreaming={isStreaming}
+                onOptionSelect={onOptionSelect}
+              />
             )
           case 'agent_group': {
             const allToolsDone =

apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts

@@ -3,21 +3,23 @@ import {
   Asterisk,
   Blimp,
   BubbleChatPreview,
+  Bug,
+  Calendar,
+  ClipboardList,
   Connections,
   Database,
-  Eye,
   File,
   FolderCode,
-  Key,
+  Hammer,
+  Integration,
   Library,
-  ListFilter,
-  Loader,
   Pencil,
   Play,
   Rocket,
   Search,
   Settings,
   TerminalWindow,
+  Wrench,
 } from '@/components/emcn'
 import { Table as TableIcon } from '@/components/emcn/icons'
 import type { MothershipToolName, SubagentName } from '../../types'
@@ -42,18 +44,18 @@ const TOOL_ICONS: Record<MothershipToolName | SubagentName | 'mothership', IconC
   workspace_file: File,
   create_workflow: Connections,
   edit_workflow: Pencil,
-  build: Connections,
+  build: Hammer,
   run: Play,
   deploy: Rocket,
-  auth: Key,
+  auth: Integration,
   knowledge: Database,
   table: TableIcon,
-  job: Loader,
+  job: Calendar,
   agent: BubbleChatPreview,
-  custom_tool: Settings,
+  custom_tool: Wrench,
   research: Search,
-  plan: ListFilter,
-  debug: Eye,
+  plan: ClipboardList,
+  debug: Bug,
   edit: Pencil,
 }
 

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

@@ -4,7 +4,7 @@ import { lazy, Suspense, useMemo } from 'react'
 import { Skeleton } from '@/components/emcn'
 import {
   FileViewer,
-  isPreviewable,
+  type PreviewMode,
 } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
 import type { MothershipResource } from '@/app/workspace/[workspaceId]/home/types'
 import { Table } from '@/app/workspace/[workspaceId]/tables/[tableId]/components'
@@ -23,20 +23,28 @@ const LOADING_SKELETON = (
 interface ResourceContentProps {
   workspaceId: string
   resource: MothershipResource
+  previewMode?: PreviewMode
 }
 
 /**
  * Renders the content for the currently active mothership resource.
  * Handles table, file, and workflow resource types with appropriate
  * embedded rendering for each.
  */
-export function ResourceContent({ workspaceId, resource }: ResourceContentProps) {
+export function ResourceContent({ workspaceId, resource, previewMode }: ResourceContentProps) {
   switch (resource.type) {
     case 'table':
       return <Table key={resource.id} workspaceId={workspaceId} tableId={resource.id} embedded />
 
     case 'file':
-      return <EmbeddedFile key={resource.id} workspaceId={workspaceId} fileId={resource.id} />
+      return (
+        <EmbeddedFile
+          key={resource.id}
+          workspaceId={workspaceId}
+          fileId={resource.id}
+          previewMode={previewMode}
+        />
+      )
 
     case 'workflow':
       return (
@@ -53,9 +61,10 @@ export function ResourceContent({ workspaceId, resource }: ResourceContentProps)
 interface EmbeddedFileProps {
   workspaceId: string
   fileId: string
+  previewMode?: PreviewMode
 }
 
-function EmbeddedFile({ workspaceId, fileId }: EmbeddedFileProps) {
+function EmbeddedFile({ workspaceId, fileId, previewMode }: EmbeddedFileProps) {
   const { data: files = [], isLoading } = useWorkspaceFiles(workspaceId)
   const file = useMemo(() => files.find((f) => f.id === fileId), [files, fileId])
 
@@ -76,7 +85,7 @@ function EmbeddedFile({ workspaceId, fileId }: EmbeddedFileProps) {
         file={file}
         workspaceId={workspaceId}
         canEdit={true}
-        showPreview={isPreviewable(file)}
+        previewMode={previewMode}
       />
     </div>
   )