UWU
This commit is contained in:
NotII
@@ -10,7 +10,7 @@ import { cn } from "@/lib/utils";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
import { ArrowLeft, Send, RefreshCw } from "lucide-react";
|
||||
import { ArrowLeft, Send, RefreshCw, FileText, Image as ImageIcon, Download, File } from "lucide-react";
|
||||
import { getCookie } from "@/lib/client-utils";
|
||||
|
||||
interface Message {
|
||||
@@ -34,6 +34,50 @@ interface Chat {
|
||||
orderId?: string;
|
||||
}
|
||||
|
||||
// Helper function to extract filename from URL
|
||||
const getFileNameFromUrl = (url: string): string => {
|
||||
// Try to extract filename from the URL path
|
||||
const pathParts = url.split('/');
|
||||
const lastPart = pathParts[pathParts.length - 1];
|
||||
|
||||
// Remove query parameters if any
|
||||
const fileNameParts = lastPart.split('?');
|
||||
let fileName = fileNameParts[0];
|
||||
|
||||
// If filename is too long or not found, create a generic name
|
||||
if (!fileName || fileName.length > 30) {
|
||||
return 'attachment';
|
||||
}
|
||||
|
||||
// URL decode the filename (handle spaces and special characters)
|
||||
try {
|
||||
fileName = decodeURIComponent(fileName);
|
||||
} catch (e) {
|
||||
// If decoding fails, use the original
|
||||
}
|
||||
|
||||
return fileName;
|
||||
};
|
||||
|
||||
// Helper function to get file icon based on extension or URL pattern
|
||||
const getFileIcon = (url: string): React.ReactNode => {
|
||||
const fileName = url.toLowerCase();
|
||||
|
||||
// Image files
|
||||
if (/\.(jpg|jpeg|png|gif|webp|svg|bmp|tiff)($|\?)/i.test(fileName) ||
|
||||
url.includes('/photos/') || url.includes('/photo/')) {
|
||||
return <ImageIcon className="h-5 w-5" />;
|
||||
}
|
||||
|
||||
// Document files
|
||||
if (/\.(pdf|doc|docx|xls|xlsx|ppt|pptx|txt|rtf|csv)($|\?)/i.test(fileName)) {
|
||||
return <FileText className="h-5 w-5" />;
|
||||
}
|
||||
|
||||
// Default file icon
|
||||
return <File className="h-5 w-5" />;
|
||||
};
|
||||
|
||||
export default function ChatDetail({ chatId }: { chatId: string }) {
|
||||
const router = useRouter();
|
||||
const [chat, setChat] = useState<Chat | null>(null);
|
||||
@@ -248,8 +292,8 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="w-full h-[80vh] flex flex-col">
|
||||
<CardHeader>
|
||||
<Card className="w-full h-[calc(100vh-80px)] flex flex-col">
|
||||
<CardHeader className="border-b py-2 px-4">
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Button variant="ghost" size="icon" onClick={handleBackClick}>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
@@ -266,8 +310,8 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
|
||||
|
||||
if (!chat) {
|
||||
return (
|
||||
<Card className="w-full h-[80vh] flex flex-col">
|
||||
<CardHeader>
|
||||
<Card className="w-full h-[calc(100vh-80px)] flex flex-col">
|
||||
<CardHeader className="border-b py-2 px-4">
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Button variant="ghost" size="icon" onClick={handleBackClick}>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
@@ -286,8 +330,8 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-full h-[80vh] flex flex-col">
|
||||
<CardHeader className="border-b">
|
||||
<Card className="w-full h-[calc(100vh-80px)] flex flex-col">
|
||||
<CardHeader className="border-b py-2 px-4">
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Button variant="ghost" size="icon" onClick={handleBackClick}>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
@@ -296,7 +340,7 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
<CardContent className="flex-1 overflow-y-auto p-2 space-y-2">
|
||||
{chat.messages.length === 0 ? (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<p className="text-muted-foreground">No messages yet. Send one to start the conversation.</p>
|
||||
@@ -312,7 +356,7 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"max-w-[80%] rounded-lg p-3",
|
||||
"max-w-[90%] rounded-lg p-3",
|
||||
msg.sender === "vendor"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-muted"
|
||||
@@ -331,7 +375,73 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
|
||||
</span>
|
||||
</div>
|
||||
<p className="whitespace-pre-wrap break-words">{msg.content}</p>
|
||||
{/* Show attachments if any (future enhancement) */}
|
||||
{/* Show attachments if any */}
|
||||
{msg.attachments && msg.attachments.length > 0 && (
|
||||
<div className="mt-2 space-y-2">
|
||||
{msg.attachments.map((attachment, idx) => {
|
||||
// Check if attachment is an image by looking at the URL extension or paths
|
||||
const isImage = /\.(jpg|jpeg|png|gif|webp)($|\?)/i.test(attachment) ||
|
||||
attachment.includes('/photos/') ||
|
||||
attachment.includes('/photo/');
|
||||
|
||||
const fileName = getFileNameFromUrl(attachment);
|
||||
|
||||
return isImage ? (
|
||||
// Render image attachment
|
||||
<div key={`attachment-${idx}`} className="rounded-md overflow-hidden bg-background/20 p-1">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-xs opacity-70 flex items-center">
|
||||
<ImageIcon className="h-3 w-3 mr-1" />
|
||||
{fileName}
|
||||
</span>
|
||||
<a
|
||||
href={attachment}
|
||||
download={fileName}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs opacity-70 hover:opacity-100"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Download className="h-3 w-3" />
|
||||
</a>
|
||||
</div>
|
||||
<a href={attachment} target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
src={attachment}
|
||||
alt={fileName}
|
||||
className="max-w-full max-h-60 object-contain cursor-pointer hover:opacity-90 transition-opacity rounded"
|
||||
onError={(e) => {
|
||||
// Fallback for broken images
|
||||
(e.target as HTMLImageElement).src = "/placeholder-image.svg";
|
||||
}}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
// Render file attachment
|
||||
<div key={`attachment-${idx}`} className="flex items-center bg-background/20 rounded-md p-2 hover:bg-background/30 transition-colors">
|
||||
<div className="mr-2">
|
||||
{getFileIcon(attachment)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm truncate font-medium">
|
||||
{fileName}
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href={attachment}
|
||||
download={fileName}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="ml-2 p-1 rounded-sm hover:bg-background/50"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
@@ -339,7 +449,7 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
|
||||
<div ref={messagesEndRef} />
|
||||
</CardContent>
|
||||
|
||||
<div className="p-4 border-t">
|
||||
<div className="p-2 border-t">
|
||||
<form onSubmit={handleSendMessage} className="flex space-x-2">
|
||||
<Input
|
||||
value={message}
|
||||
|
||||
Reference in New Issue
Block a user