Skip to content

Commit 7595e54

Browse files
waleedlatif1waleedlatif1
authored
fix(chat): allow file-only messages with no text to be sent in chat panel and deployed chat (#1635)
1 parent 6c9fce5 commit 7595e54

File tree

3 files changed

+74
-21
lines changed

3 files changed

+74
-21
lines changed

‎apps/sim/app/chat/components/message/message.tsx‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -83,20 +83,44 @@ export const ClientChatMessage = memo(
8383
<div
8484
key={attachment.id}
8585
className={`relative overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800 ${
86-
attachment.dataUrl?.trim() ? 'cursor-pointer' : ''
86+
attachment.dataUrl?.trim() && attachment.dataUrl.startsWith('data:')
87+
? 'cursor-pointer'
88+
: ''
8789
} ${
8890
isImage
8991
? 'h-16 w-16 md:h-20 md:w-20'
9092
: 'flex h-16 min-w-[140px] max-w-[220px] items-center gap-2 px-3 md:h-20 md:min-w-[160px] md:max-w-[240px]'
9193
}`}
9294
onClick={(e) => {
93-
if (attachment.dataUrl?.trim()) {
95+
const validDataUrl = attachment.dataUrl?.trim()
96+
if (validDataUrl?.startsWith('data:')) {
9497
e.preventDefault()
95-
window.open(attachment.dataUrl, '_blank')
98+
e.stopPropagation()
99+
const newWindow = window.open('', '_blank')
100+
if (newWindow) {
101+
newWindow.document.write(`
102+
<!DOCTYPE html>
103+
<html>
104+
<head>
105+
<title>${attachment.name}</title>
106+
<style>
107+
body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; }
108+
img { max-width: 100%; max-height: 100vh; object-fit: contain; }
109+
</style>
110+
</head>
111+
<body>
112+
<img src="${validDataUrl}" alt="${attachment.name}" />
113+
</body>
114+
</html>
115+
`)
116+
newWindow.document.close()
117+
}
96118
}
97119
}}
98120
>
99-
{isImage ? (
121+
{isImage &&
122+
attachment.dataUrl?.trim() &&
123+
attachment.dataUrl.startsWith('data:') ? (
100124
<img
101125
src={attachment.dataUrl}
102126
alt={attachment.name}
@@ -126,20 +150,20 @@ export const ClientChatMessage = memo(
126150
</div>
127151
)}
128152

129-
<div className='flex justify-end'>
130-
<div className='max-w-[80%] rounded-3xl bg-[#F4F4F4] px-4 py-3 dark:bg-gray-600'>
131-
{/* Render text content if present and not just file count message */}
132-
{message.content && !String(message.content).startsWith('Sent') && (
153+
{/* Only render message bubble if there's actual text content (not just file count message) */}
154+
{message.content && !String(message.content).startsWith('Sent') && (
155+
<div className='flex justify-end'>
156+
<div className='max-w-[80%] rounded-3xl bg-[#F4F4F4] px-4 py-3 dark:bg-gray-600'>
133157
<div className='whitespace-pre-wrap break-words text-base text-gray-800 leading-relaxed dark:text-gray-100'>
134158
{isJsonObject ? (
135159
<pre>{JSON.stringify(message.content, null, 2)}</pre>
136160
) : (
137161
<span>{message.content as string}</span>
138162
)}
139163
</div>
140-
)}
164+
</div>
141165
</div>
142-
</div>
166+
)}
143167
</div>
144168
</div>
145169
)

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/chat.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -476,6 +476,8 @@ export function Chat({ chatMessage, setChatMessage }: ChatProps) {
476476
focusInput(100)
477477
}, [
478478
chatMessage,
479+
chatFiles,
480+
isUploadingFiles,
479481
activeWorkflowId,
480482
isExecuting,
481483
promptHistory,
@@ -487,6 +489,9 @@ export function Chat({ chatMessage, setChatMessage }: ChatProps) {
487489
appendMessageContent,
488490
finalizeMessageStream,
489491
focusInput,
492+
setChatMessage,
493+
setChatFiles,
494+
setUploadErrors,
490495
])
491496

492497
// Handle key press

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/components/chat-message/chat-message.tsx‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -95,16 +95,40 @@ export function ChatMessage({ message }: ChatMessageProps) {
9595
<div
9696
key={attachment.id}
9797
className={`relative overflow-hidden rounded-md border border-border/50 bg-muted/20 ${
98-
attachment.dataUrl?.trim() ? 'cursor-pointer' : ''
98+
attachment.dataUrl?.trim() && attachment.dataUrl.startsWith('data:')
99+
? 'cursor-pointer'
100+
: ''
99101
} ${isImage ? 'h-16 w-16' : 'flex h-16 min-w-[120px] max-w-[200px] items-center gap-2 px-2'}`}
100102
onClick={(e) => {
101-
if (attachment.dataUrl?.trim()) {
103+
const validDataUrl = attachment.dataUrl?.trim()
104+
if (validDataUrl?.startsWith('data:')) {
102105
e.preventDefault()
103-
window.open(attachment.dataUrl, '_blank')
106+
e.stopPropagation()
107+
const newWindow = window.open('', '_blank')
108+
if (newWindow) {
109+
newWindow.document.write(`
110+
<!DOCTYPE html>
111+
<html>
112+
<head>
113+
<title>${attachment.name}</title>
114+
<style>
115+
body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; }
116+
img { max-width: 100%; max-height: 100vh; object-fit: contain; }
117+
</style>
118+
</head>
119+
<body>
120+
<img src="${validDataUrl}" alt="${attachment.name}" />
121+
</body>
122+
</html>
123+
`)
124+
newWindow.document.close()
125+
}
104126
}
105127
}}
106128
>
107-
{isImage && attachment.dataUrl ? (
129+
{isImage &&
130+
attachment.dataUrl?.trim() &&
131+
attachment.dataUrl.startsWith('data:') ? (
108132
<img
109133
src={attachment.dataUrl}
110134
alt={attachment.name}
@@ -134,18 +158,18 @@ export function ChatMessage({ message }: ChatMessageProps) {
134158
</div>
135159
)}
136160

137-
<div className='flex justify-end'>
138-
<div className='max-w-[80%]'>
139-
<div className='rounded-[10px] bg-secondary px-3 py-2'>
140-
{/* Render text content if present and not just file count message */}
141-
{formattedContent && !formattedContent.startsWith('Uploaded') && (
161+
{/* Only render message bubble if there's actual text content (not just file count message) */}
162+
{formattedContent && !formattedContent.startsWith('Uploaded') && (
163+
<div className='flex justify-end'>
164+
<div className='max-w-[80%]'>
165+
<div className='rounded-[10px] bg-secondary px-3 py-2'>
142166
<div className='whitespace-pre-wrap break-words font-normal text-foreground text-sm leading-normal'>
143167
<WordWrap text={formattedContent} />
144168
</div>
145-
)}
169+
</div>
146170
</div>
147171
</div>
148-
</div>
172+
)}
149173
</div>
150174
)
151175
}

0 commit comments

Comments
 (0)