Skip to content

fix(deployed-chat): made the chat mobile friendly #494

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 1 commit into from
Jun 14, 2025
Merged

fix(deployed-chat): made the chat mobile friendly #494

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 45 additions & 25 deletions apps/sim/app/chat/[subdomain]/components/input/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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>
Comment on lines +201 to +215

@greptile-apps greptile-apps Bot Jun 14, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: gradient background styles are duplicated between mobile and desktop placeholders - consider extracting to a shared style object or CSS class

{/* 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>
Comment on lines +231 to +241

@greptile-apps greptile-apps Bot Jun 14, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: consider moving keyframes animation to a separate CSS file to prevent duplication across multiple instances

</>
)}
</div>
</div>
Expand Down