fix(chat): allow file-only messages with no text to be sent in chat panel and deployed chat (#1635)

This commit is contained in:
Waleed
2025-10-14 20:27:52 -07:00
committed by GitHub
parent 6c9fce5da4
commit 7595e54dfb
3 changed files with 74 additions and 21 deletions

View File

@@ -83,20 +83,44 @@ export const ClientChatMessage = memo(
<div
key={attachment.id}
className={`relative overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800 ${
attachment.dataUrl?.trim() ? 'cursor-pointer' : ''
attachment.dataUrl?.trim() && attachment.dataUrl.startsWith('data:')
? 'cursor-pointer'
: ''
} ${
isImage
? 'h-16 w-16 md:h-20 md:w-20'
: '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]'
}`}
onClick={(e) => {
if (attachment.dataUrl?.trim()) {
const validDataUrl = attachment.dataUrl?.trim()
if (validDataUrl?.startsWith('data:')) {
e.preventDefault()
window.open(attachment.dataUrl, '_blank')
e.stopPropagation()
const newWindow = window.open('', '_blank')
if (newWindow) {
newWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
<title>${attachment.name}</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; }
img { max-width: 100%; max-height: 100vh; object-fit: contain; }
</style>
</head>
<body>
<img src="${validDataUrl}" alt="${attachment.name}" />
</body>
</html>
`)
newWindow.document.close()
}
}
}}
>
{isImage ? (
{isImage &&
attachment.dataUrl?.trim() &&
attachment.dataUrl.startsWith('data:') ? (
<img
src={attachment.dataUrl}
alt={attachment.name}
@@ -126,10 +150,10 @@ export const ClientChatMessage = memo(
</div>
)}
<div className='flex justify-end'>
<div className='max-w-[80%] rounded-3xl bg-[#F4F4F4] px-4 py-3 dark:bg-gray-600'>
{/* Render text content if present and not just file count message */}
{message.content && !String(message.content).startsWith('Sent') && (
{/* Only render message bubble if there's actual text content (not just file count message) */}
{message.content && !String(message.content).startsWith('Sent') && (
<div className='flex justify-end'>
<div className='max-w-[80%] rounded-3xl bg-[#F4F4F4] px-4 py-3 dark:bg-gray-600'>
<div className='whitespace-pre-wrap break-words text-base text-gray-800 leading-relaxed dark:text-gray-100'>
{isJsonObject ? (
<pre>{JSON.stringify(message.content, null, 2)}</pre>
@@ -137,9 +161,9 @@ export const ClientChatMessage = memo(
<span>{message.content as string}</span>
)}
</div>
)}
</div>
</div>
</div>
)}
</div>
</div>
)

View File

@@ -476,6 +476,8 @@ export function Chat({ chatMessage, setChatMessage }: ChatProps) {
focusInput(100)
}, [
chatMessage,
chatFiles,
isUploadingFiles,
activeWorkflowId,
isExecuting,
promptHistory,
@@ -487,6 +489,9 @@ export function Chat({ chatMessage, setChatMessage }: ChatProps) {
appendMessageContent,
finalizeMessageStream,
focusInput,
setChatMessage,
setChatFiles,
setUploadErrors,
])
// Handle key press

View File

@@ -95,16 +95,40 @@ export function ChatMessage({ message }: ChatMessageProps) {
<div
key={attachment.id}
className={`relative overflow-hidden rounded-md border border-border/50 bg-muted/20 ${
attachment.dataUrl?.trim() ? 'cursor-pointer' : ''
attachment.dataUrl?.trim() && attachment.dataUrl.startsWith('data:')
? 'cursor-pointer'
: ''
} ${isImage ? 'h-16 w-16' : 'flex h-16 min-w-[120px] max-w-[200px] items-center gap-2 px-2'}`}
onClick={(e) => {
if (attachment.dataUrl?.trim()) {
const validDataUrl = attachment.dataUrl?.trim()
if (validDataUrl?.startsWith('data:')) {
e.preventDefault()
window.open(attachment.dataUrl, '_blank')
e.stopPropagation()
const newWindow = window.open('', '_blank')
if (newWindow) {
newWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
<title>${attachment.name}</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; }
img { max-width: 100%; max-height: 100vh; object-fit: contain; }
</style>
</head>
<body>
<img src="${validDataUrl}" alt="${attachment.name}" />
</body>
</html>
`)
newWindow.document.close()
}
}
}}
>
{isImage && attachment.dataUrl ? (
{isImage &&
attachment.dataUrl?.trim() &&
attachment.dataUrl.startsWith('data:') ? (
<img
src={attachment.dataUrl}
alt={attachment.name}
@@ -134,18 +158,18 @@ export function ChatMessage({ message }: ChatMessageProps) {
</div>
)}
<div className='flex justify-end'>
<div className='max-w-[80%]'>
<div className='rounded-[10px] bg-secondary px-3 py-2'>
{/* Render text content if present and not just file count message */}
{formattedContent && !formattedContent.startsWith('Uploaded') && (
{/* Only render message bubble if there's actual text content (not just file count message) */}
{formattedContent && !formattedContent.startsWith('Uploaded') && (
<div className='flex justify-end'>
<div className='max-w-[80%]'>
<div className='rounded-[10px] bg-secondary px-3 py-2'>
<div className='whitespace-pre-wrap break-words font-normal text-foreground text-sm leading-normal'>
<WordWrap text={formattedContent} />
</div>
)}
</div>
</div>
</div>
</div>
)}
</div>
)
}