fix(interfaces): pin deployed chat + resume to light mode, emcn-only components

Author: TheodoreSpeaks

apps/sim/app/(interfaces)/chat/[identifier]/chat.tsx

@@ -426,7 +426,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
   }
 
   return (
-    <div className='dark fixed inset-0 z-[100] flex flex-col bg-[var(--landing-bg)] text-[var(--landing-text)]'>
+    <div className='light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
       {/* Header component */}
       <ChatHeader chatConfig={chatConfig} starCount={starCount} />
 

apps/sim/app/(interfaces)/chat/[identifier]/loading.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from '@sim/emcn'
 
 export default function ChatLoading() {
   return (
-    <div className='dark fixed inset-0 z-[100] flex flex-col bg-[var(--landing-bg)] text-[var(--landing-text)]'>
+    <div className='light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
       <div className='border-[var(--border-1)] border-b px-4 py-3'>
         <div className='mx-auto flex max-w-3xl items-center justify-between'>
           <div className='flex items-center gap-[12px]'>

apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { Button } from '@sim/emcn'
 import { useRouter } from 'next/navigation'
 
 interface ChatErrorStateProps {
@@ -16,12 +17,13 @@ export function ChatErrorState({ error }: ChatErrorStateProps) {
           Chat Unavailable
         </h1>
         <p className='text-[var(--text-muted)] text-lg'>{error}</p>
-        <button
+        <Button
+          variant='primary'
           onClick={() => router.push('/workspace')}
-          className='inline-flex h-[32px] w-full items-center justify-center gap-2 rounded-[5px] border border-[var(--text-primary)] bg-[var(--text-primary)] px-2.5 text-[var(--bg)] text-sm transition-colors hover:border-[var(--text-body)] hover:bg-[var(--text-body)] disabled:cursor-not-allowed disabled:opacity-50'
+          className='h-[32px] w-full gap-2 px-2.5 text-sm'
         >
           Return to Workspace
-        </button>
+        </Button>
       </div>
     </div>
   )

apps/sim/app/(interfaces)/chat/components/header/header.tsx

@@ -40,7 +40,7 @@ export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
               className='size-6 rounded-md object-cover'
             />
           )}
-          <h2 className='font-medium text-[var(--landing-text)] text-lg'>
+          <h2 className='font-medium text-[var(--text-primary)] text-lg'>
             {chatConfig?.customizations?.headerText || chatConfig?.title || 'Chat'}
           </h2>
         </div>
@@ -52,7 +52,7 @@ export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
             href='https://github.com/simstudioai/sim'
             target='_blank'
             rel='noopener noreferrer'
-            className='flex items-center gap-2 text-[var(--landing-text-muted)] text-md transition-colors hover:text-[var(--landing-text)]'
+            className='flex items-center gap-2 text-[var(--text-muted)] text-md transition-colors hover:text-[var(--text-primary)]'
             aria-label={`GitHub repository - ${starCount} stars`}
           >
             <GithubIcon className='size-[16px]' aria-hidden='true' />
@@ -67,7 +67,7 @@ export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
             aria-label='Sim home'
           >
             <Image
-              src='/logo/sim-landing.svg'
+              src='/logo/wordmark-dark.svg'
               alt='Sim'
               width={71}
               height={22}

apps/sim/app/(interfaces)/chat/components/input/input.tsx

@@ -2,7 +2,7 @@
 
 import type React from 'react'
 import { useCallback, useLayoutEffect, useRef, useState } from 'react'
-import { Badge, cn, handleKeyboardActivation, Tooltip } from '@sim/emcn'
+import { Badge, Button, cn, handleKeyboardActivation, Tooltip } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
 import { ArrowUp, Mic, Paperclip, X } from 'lucide-react'
@@ -168,7 +168,7 @@ export const ChatInput: React.FC<{
 
   return (
     <Tooltip.Provider>
-      <div className='fixed right-0 bottom-0 left-0 flex w-full items-center justify-center bg-gradient-to-t from-[var(--landing-bg)] to-transparent px-4 pb-4 md:px-0 md:pb-4'>
+      <div className='fixed right-0 bottom-0 left-0 flex w-full items-center justify-center bg-gradient-to-t from-[var(--bg)] to-transparent px-4 pb-4 md:px-0 md:pb-4'>
         <div className='w-full max-w-3xl md:max-w-[748px]'>
           {/* Error Messages */}
           {uploadErrors.length > 0 && (
@@ -191,7 +191,7 @@ export const ChatInput: React.FC<{
               handleKeyboardActivation(event, focusTextarea)
             }}
             className={cn(
-              'relative z-10 cursor-text rounded-2xl border border-[var(--border-1)] bg-[var(--landing-bg-elevated)] px-2.5 py-2',
+              'relative z-10 cursor-text rounded-2xl border border-[var(--border-1)] bg-[var(--surface-2)] px-2.5 py-2',
               isDragOver && 'border-purple-500'
             )}
             onDragEnter={(e) => {
@@ -222,31 +222,31 @@ export const ChatInput: React.FC<{
                 {attachedFiles.map((file) => (
                   <Tooltip.Root key={file.id}>
                     <Tooltip.Trigger asChild>
-                      <div className='group relative size-[56px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--landing-bg)]'>
+                      <div className='group relative size-[56px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-3)]'>
                         {file.dataUrl ? (
                           <img
                             src={file.dataUrl}
                             alt={file.name}
                             className='h-full w-full object-cover'
                           />
                         ) : (
-                          <div className='flex h-full w-full flex-col items-center justify-center gap-0.5 text-[var(--landing-text-muted)]'>
+                          <div className='flex h-full w-full flex-col items-center justify-center gap-0.5 text-[var(--text-muted)]'>
                             <Paperclip className='size-[18px]' />
                             <span className='max-w-[48px] truncate px-[2px] text-[9px]'>
                               {file.name.split('.').pop()}
                             </span>
                           </div>
                         )}
-                        <button
-                          type='button'
+                        <Button
+                          variant='primary'
                           onClick={(e) => {
                             e.stopPropagation()
                             handleRemoveFile(file.id)
                           }}
-                          className='absolute top-[2px] right-[2px] flex size-[16px] items-center justify-center rounded-full bg-black/60 opacity-0 group-hover:opacity-100'
+                          className='absolute top-[2px] right-[2px] size-[16px] rounded-full p-0 opacity-0 group-hover:opacity-100'
                         >
-                          <X className='size-[10px] text-white' />
-                        </button>
+                          <X className='size-[10px]' />
+                        </Button>
                       </div>
                     </Tooltip.Trigger>
                     <Tooltip.Content side='top'>
@@ -265,7 +265,7 @@ export const ChatInput: React.FC<{
               onKeyDown={handleKeyDown}
               placeholder={isDragOver ? 'Drop files here...' : 'Enter a message...'}
               rows={1}
-              className='m-0 h-auto min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent p-1 text-[15px] text-[var(--landing-text)] leading-[24px] caret-[var(--landing-text)] outline-none [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--landing-text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
+              className='m-0 h-auto min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent p-1 text-[15px] text-[var(--text-primary)] leading-[24px] caret-[var(--text-primary)] outline-none [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
             />
 
             {/* Bottom row */}
@@ -274,14 +274,14 @@ export const ChatInput: React.FC<{
               <div>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <button
-                      type='button'
+                    <Button
+                      variant='quiet'
                       onClick={() => fileInputRef.current?.click()}
                       disabled={isStreaming || attachedFiles.length >= 15}
-                      className='flex size-[28px] items-center justify-center rounded-full text-[var(--landing-text-muted)] transition-colors hover:bg-[#F7F7F7] disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-[#303030]'
+                      className='size-[28px] rounded-full p-0'
                     >
                       <Paperclip className='size-[16px]' strokeWidth={2} />
-                    </button>
+                    </Button>
                   </Tooltip.Trigger>
                   <Tooltip.Content side='top'>
                     <p>Attach files</p>
@@ -307,14 +307,14 @@ export const ChatInput: React.FC<{
                 {sttAvailable && (
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
-                      <button
-                        type='button'
+                      <Button
+                        variant='quiet'
                         onClick={onVoiceStart}
                         disabled={isStreaming}
-                        className='flex size-[28px] items-center justify-center rounded-full text-[var(--landing-text-muted)] transition-colors hover:bg-[#F7F7F7] disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-[#303030]'
+                        className='size-[28px] rounded-full p-0'
                       >
                         <Mic className='size-[16px]' strokeWidth={2} />
-                      </button>
+                      </Button>
                     </Tooltip.Trigger>
                     <Tooltip.Content side='top'>
                       <p>Start voice conversation</p>
@@ -323,37 +323,29 @@ export const ChatInput: React.FC<{
                 )}
 
                 {isStreaming ? (
-                  <button
-                    type='button'
+                  <Button
+                    variant='primary'
                     onClick={onStopStreaming}
-                    className='flex size-[28px] items-center justify-center rounded-full border-0 bg-[#383838] p-0 transition-colors hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover:bg-[#CFCFCF]'
+                    className='size-[28px] rounded-full p-0'
                     title='Stop generation'
                   >
                     <svg
-                      className='block size-[14px] fill-white dark:fill-black'
+                      className='block size-[14px] fill-current'
                       viewBox='0 0 24 24'
                       xmlns='http://www.w3.org/2000/svg'
                     >
                       <rect x='4' y='4' width='16' height='16' rx='3' ry='3' />
                     </svg>
-                  </button>
+                  </Button>
                 ) : (
-                  <button
-                    type='button'
+                  <Button
+                    variant='primary'
                     onClick={handleSubmit}
                     disabled={!canSubmit}
-                    className={cn(
-                      'flex h-[28px] w-[28px] items-center justify-center rounded-full border-0 p-0 transition-colors',
-                      canSubmit
-                        ? 'bg-[#383838] hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover:bg-[#CFCFCF]'
-                        : 'bg-[#808080] dark:bg-[#808080]'
-                    )}
+                    className='size-[28px] rounded-full p-0'
                   >
-                    <ArrowUp
-                      className='block size-[16px] text-white dark:text-black'
-                      strokeWidth={2.25}
-                    />
-                  </button>
+                    <ArrowUp className='block size-[16px]' strokeWidth={2.25} />
+                  </Button>
                 )}
               </div>
             </div>

apps/sim/app/(interfaces)/chat/components/loading-state/loading-state.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from '@sim/emcn'
 
 export function ChatLoadingState() {
   return (
-    <div className='dark fixed inset-0 z-[100] flex flex-col bg-[var(--landing-bg)]'>
+    <div className='light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)]'>
       <div className='flex flex-1 items-center justify-center px-4'>
         <div className='w-full max-w-[410px]'>
           <div className='flex flex-col items-center justify-center'>

apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { memo, type RefObject } from 'react'
+import { Button } from '@sim/emcn'
 import { ArrowDown } from 'lucide-react'
-import { Button } from '@/components/ui/button'
 import {
   type ChatMessage,
   ClientChatMessage,
@@ -42,10 +42,10 @@ export const ChatMessageContainer = memo(function ChatMessageContainer({
           {messages.length === 0 ? (
             <div className='flex flex-col items-center justify-center py-10'>
               <div className='space-y-2 text-center'>
-                <h3 className='font-medium text-[var(--landing-text)] text-lg'>
+                <h3 className='font-medium text-[var(--text-primary)] text-lg'>
                   How can I help you today?
                 </h3>
-                <p className='text-[var(--landing-text-muted)] text-sm'>
+                <p className='text-[var(--text-muted)] text-sm'>
                   {chatConfig?.description || 'Ask me anything.'}
                 </p>
               </div>
@@ -61,7 +61,7 @@ export const ChatMessageContainer = memo(function ChatMessageContainer({
                 <div className='flex'>
                   <div className='max-w-[80%]'>
                     <div className='flex h-6 items-center'>
-                      <div className='loading-dot size-3 rounded-full bg-[var(--landing-text)]' />
+                      <div className='loading-dot size-3 rounded-full bg-[var(--text-primary)]' />
                     </div>
                   </div>
                 </div>
@@ -80,8 +80,7 @@ export const ChatMessageContainer = memo(function ChatMessageContainer({
           <Button
             onClick={scrollToBottom}
             size='sm'
-            variant='outline'
-            className='flex items-center gap-1 rounded-full border border-[var(--border-1)] bg-[var(--landing-bg-elevated)] px-3 py-1 shadow-lg transition-all hover:opacity-80'
+            className='gap-1 rounded-full px-3 py-1 shadow-lg'
           >
             <ArrowDown className='size-3.5' />
             <span className='sr-only'>Scroll to bottom</span>

apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, Download, Loader } from '@sim/emcn'
+import { Button, cn, Download, Loader } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { sleep } from '@sim/utils/helpers'
 import { Music } from 'lucide-react'
@@ -114,14 +114,14 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
 
   const renderIcon = () => {
     if (isAudioFile(file.type, file.name)) {
-      return <Music className='h-4 w-4 text-purple-500' />
+      return <Music className='size-4 text-purple-500' />
     }
     if (isImageFile(file.type)) {
       const ImageIcon = DefaultFileIcon
-      return <ImageIcon className='h-5 w-5' />
+      return <ImageIcon className='size-5' />
     }
     const DocumentIcon = getDocumentIcon(file.type, file.name)
-    return <DocumentIcon className='h-5 w-5' />
+    return <DocumentIcon className='size-5' />
   }
 
   return (
@@ -133,19 +133,17 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
       disabled={isDownloading}
       className='flex h-auto w-[200px] items-center gap-2 rounded-lg px-3 py-2'
     >
-      <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center'>{renderIcon()}</div>
+      <div className='flex size-8 flex-shrink-0 items-center justify-center'>{renderIcon()}</div>
       <div className='min-w-0 flex-1 text-left'>
         <div className='w-[100px] truncate text-xs'>{file.name}</div>
-        <div className='text-[var(--landing-text-muted)] text-micro'>
-          {formatFileSize(file.size)}
-        </div>
+        <div className='text-[var(--text-muted)] text-micro'>{formatFileSize(file.size)}</div>
       </div>
       <div className='flex-shrink-0'>
         {isDownloading ? (
-          <Loader className='h-3.5 w-3.5' animate />
+          <Loader className='size-3.5' animate />
         ) : (
           <Download
-            className={`h-3.5 w-3.5 transition-opacity ${isHovered ? 'opacity-100' : 'opacity-0'}`}
+            className={cn('size-3.5 transition-opacity', isHovered ? 'opacity-100' : 'opacity-0')}
           />
         )}
       </div>
@@ -186,16 +184,17 @@ export function ChatFileDownloadAll({ files }: ChatFileDownloadAllProps) {
   }
 
   return (
-    <button
+    <Button
+      variant='ghost-secondary'
       onClick={handleDownloadAll}
       disabled={isDownloading}
-      className='text-[var(--landing-text-muted)] transition-colors hover:bg-[var(--landing-bg-elevated)] disabled:opacity-50'
+      className='p-0'
     >
       {isDownloading ? (
-        <Loader className='h-3 w-3' animate />
+        <Loader className='size-3' animate />
       ) : (
-        <Download className='h-3 w-3' strokeWidth={2} />
+        <Download className='size-3' strokeWidth={2} />
       )}
-    </button>
+    </Button>
   )
 }