From c114eddd4c0abe48c7adfb80bb402d55b2954ed3 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 14 Jun 2025 14:21:00 -0700
Subject: [PATCH] fix(deployed-chat): made the chat mobile friendly

---
 .../[subdomain]/components/input/input.tsx    | 70 ++++++++++++-------
 1 file changed, 45 insertions(+), 25 deletions(-)

diff --git a/apps/sim/app/chat/[subdomain]/components/input/input.tsx b/apps/sim/app/chat/[subdomain]/components/input/input.tsx
index 126d2de9963..c513965e079 100644
--- a/apps/sim/app/chat/[subdomain]/components/input/input.tsx
+++ b/apps/sim/app/chat/[subdomain]/components/input/input.tsx
@@ -7,7 +7,8 @@ import { Send, Square } from 'lucide-react'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { VoiceInput } from './voice-input'
 
-const PLACEHOLDER = 'Enter a message or click the mic to speak'
+const PLACEHOLDER_MOBILE = 'Enter a message'
+const PLACEHOLDER_DESKTOP = 'Enter a message or click the mic to speak'
 const MAX_TEXTAREA_HEIGHT = 160 // Max height in pixels (e.g., for about 4-5 lines)
 
 const containerVariants = {
@@ -195,31 +196,50 @@ export const ChatInput: React.FC<{
 
               <div className='pointer-events-none absolute top-0 left-0 flex h-full w-full items-center'>
                 {!isActive && !inputValue && (
-                  <div
-                    className='-translate-y-1/2 absolute top-1/2 left-3 select-none text-gray-400'
-                    style={{
-                      whiteSpace: 'nowrap',
-                      zIndex: 0,
-                      background:
-                        'linear-gradient(90deg, rgba(150,150,150,0.2) 0%, rgba(150,150,150,0.8) 50%, rgba(150,150,150,0.2) 100%)',
-                      backgroundSize: '200% 100%',
-                      WebkitBackgroundClip: 'text',
-                      WebkitTextFillColor: 'transparent',
-                      animation: 'shimmer 10s infinite linear',
-                    }}
-                  >
-                    {PLACEHOLDER}
-                    <style jsx global>{`
-                      @keyframes shimmer {
-                        0% {
-                          background-position: 200% 0;
+                  <>
+                    {/* Mobile placeholder */}
+                    <div
+                      className='-translate-y-1/2 absolute top-1/2 left-3 select-none text-gray-400 md:hidden'
+                      style={{
+                        whiteSpace: 'nowrap',
+                        zIndex: 0,
+                        background:
+                          'linear-gradient(90deg, rgba(150,150,150,0.2) 0%, rgba(150,150,150,0.8) 50%, rgba(150,150,150,0.2) 100%)',
+                        backgroundSize: '200% 100%',
+                        WebkitBackgroundClip: 'text',
+                        WebkitTextFillColor: 'transparent',
+                        animation: 'shimmer 10s infinite linear',
+                      }}
+                    >
+                      {PLACEHOLDER_MOBILE}
+                    </div>
+                    {/* Desktop placeholder */}
+                    <div
+                      className='-translate-y-1/2 absolute top-1/2 left-3 hidden select-none text-gray-400 md:block'
+                      style={{
+                        whiteSpace: 'nowrap',
+                        zIndex: 0,
+                        background:
+                          'linear-gradient(90deg, rgba(150,150,150,0.2) 0%, rgba(150,150,150,0.8) 50%, rgba(150,150,150,0.2) 100%)',
+                        backgroundSize: '200% 100%',
+                        WebkitBackgroundClip: 'text',
+                        WebkitTextFillColor: 'transparent',
+                        animation: 'shimmer 10s infinite linear',
+                      }}
+                    >
+                      {PLACEHOLDER_DESKTOP}
+                      <style jsx global>{`
+                        @keyframes shimmer {
+                          0% {
+                            background-position: 200% 0;
+                          }
+                          100% {
+                            background-position: -200% 0;
+                          }
                         }
-                        100% {
-                          background-position: -200% 0;
-                        }
-                      }
-                    `}</style>
-                  </div>
+                      `}</style>
+                    </div>
+                  </>
                 )}
               </div>
             </div>