chore(format): run prettier
This commit is contained in:
zetaloop
+118
-118
@@ -67,133 +67,133 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
|
||||
<Link href="/chat" className="text-muted-foreground hover:text-foreground">
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Link>
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={other.avatar} />
|
||||
<AvatarFallback>{other.name[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<span className="text-sm font-medium">{other.name}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0">
|
||||
{session.type === "order" ? "订单会话" : "咨询会话"}
|
||||
</Badge>
|
||||
{session.readonly && (
|
||||
<span className="text-[10px] text-muted-foreground flex items-center gap-0.5">
|
||||
<Lock className="h-3 w-3" />
|
||||
只读
|
||||
</span>
|
||||
)}
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={other.avatar} />
|
||||
<AvatarFallback>{other.name[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<span className="text-sm font-medium">{other.name}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0">
|
||||
{session.type === "order" ? "订单会话" : "咨询会话"}
|
||||
</Badge>
|
||||
{session.readonly && (
|
||||
<span className="text-[10px] text-muted-foreground flex items-center gap-0.5">
|
||||
<Lock className="h-3 w-3" />
|
||||
只读
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1 p-4">
|
||||
<div className="space-y-4">
|
||||
{messages.map((msg) => {
|
||||
if (msg.type === "system") {
|
||||
<ScrollArea className="flex-1 p-4">
|
||||
<div className="space-y-4">
|
||||
{messages.map((msg) => {
|
||||
if (msg.type === "system") {
|
||||
return (
|
||||
<div key={msg.id} className="text-center">
|
||||
<span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
|
||||
{msg.content}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const isMine = msg.senderId === userId
|
||||
return (
|
||||
<div key={msg.id} className="text-center">
|
||||
<span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
|
||||
{msg.content}
|
||||
</span>
|
||||
<div key={msg.id} className={cn("flex gap-2", isMine && "flex-row-reverse")}>
|
||||
<Avatar className="h-8 w-8 shrink-0">
|
||||
<AvatarImage src={msg.senderAvatar} />
|
||||
<AvatarFallback>{msg.senderName[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className={cn("max-w-[70%]", isMine && "text-right")}>
|
||||
{msg.type === "image" ? (
|
||||
<Image
|
||||
src={msg.content}
|
||||
alt="聊天图片"
|
||||
width={256}
|
||||
height={192}
|
||||
unoptimized
|
||||
className="inline-block rounded-lg max-h-48 max-w-64 border"
|
||||
/>
|
||||
) : (
|
||||
<p
|
||||
className={cn(
|
||||
"inline-block rounded-lg px-3 py-2 text-sm",
|
||||
isMine ? "bg-primary text-primary-foreground" : "bg-muted",
|
||||
)}
|
||||
>
|
||||
{msg.content}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-[10px] text-muted-foreground mt-1">
|
||||
{new Date(msg.createdAt).toLocaleTimeString("zh-CN", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const isMine = msg.senderId === userId
|
||||
return (
|
||||
<div key={msg.id} className={cn("flex gap-2", isMine && "flex-row-reverse")}>
|
||||
<Avatar className="h-8 w-8 shrink-0">
|
||||
<AvatarImage src={msg.senderAvatar} />
|
||||
<AvatarFallback>{msg.senderName[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className={cn("max-w-[70%]", isMine && "text-right")}>
|
||||
{msg.type === "image" ? (
|
||||
<Image
|
||||
src={msg.content}
|
||||
alt="聊天图片"
|
||||
width={256}
|
||||
height={192}
|
||||
unoptimized
|
||||
className="inline-block rounded-lg max-h-48 max-w-64 border"
|
||||
/>
|
||||
) : (
|
||||
<p
|
||||
className={cn(
|
||||
"inline-block rounded-lg px-3 py-2 text-sm",
|
||||
isMine ? "bg-primary text-primary-foreground" : "bg-muted",
|
||||
)}
|
||||
>
|
||||
{msg.content}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-[10px] text-muted-foreground mt-1">
|
||||
{new Date(msg.createdAt).toLocaleTimeString("zh-CN", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{!session.readonly ? (
|
||||
<div className="border-t p-4 bg-muted/30">
|
||||
<input
|
||||
ref={imageInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(event) => {
|
||||
const file = event.target.files?.[0]
|
||||
if (!file) return
|
||||
const result = sendImageMessage(session.id, URL.createObjectURL(file))
|
||||
if (result && !result.ok) notifyInfo(result.message ?? "发送失败")
|
||||
event.target.value = ""
|
||||
}}
|
||||
/>
|
||||
<form
|
||||
className="flex gap-2"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
const text = input.trim()
|
||||
if (!text) return
|
||||
|
||||
const result = sendTextMessage(session.id, text)
|
||||
if (result && !result.ok) {
|
||||
notifyInfo(result.message ?? "发送失败")
|
||||
return
|
||||
}
|
||||
setInput("")
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="输入消息..."
|
||||
className="flex-1"
|
||||
{!session.readonly ? (
|
||||
<div className="border-t p-4 bg-muted/30">
|
||||
<input
|
||||
ref={imageInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(event) => {
|
||||
const file = event.target.files?.[0]
|
||||
if (!file) return
|
||||
const result = sendImageMessage(session.id, URL.createObjectURL(file))
|
||||
if (result && !result.ok) notifyInfo(result.message ?? "发送失败")
|
||||
event.target.value = ""
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="outline"
|
||||
onClick={() => imageInputRef.current?.click()}
|
||||
<form
|
||||
className="flex gap-2"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
const text = input.trim()
|
||||
if (!text) return
|
||||
|
||||
const result = sendTextMessage(session.id, text)
|
||||
if (result && !result.ok) {
|
||||
notifyInfo(result.message ?? "发送失败")
|
||||
return
|
||||
}
|
||||
setInput("")
|
||||
}}
|
||||
>
|
||||
<ImagePlus className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button type="submit" size="icon" disabled={!input.trim()}>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<div className="border-t p-4 text-center text-sm text-muted-foreground bg-muted/30">
|
||||
<Lock className="h-4 w-4 inline mr-1" />
|
||||
订单已关闭，会话为只读状态
|
||||
</div>
|
||||
)}
|
||||
<Input
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="输入消息..."
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="outline"
|
||||
onClick={() => imageInputRef.current?.click()}
|
||||
>
|
||||
<ImagePlus className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button type="submit" size="icon" disabled={!input.trim()}>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<div className="border-t p-4 text-center text-sm text-muted-foreground bg-muted/30">
|
||||
<Lock className="h-4 w-4 inline mr-1" />
|
||||
订单已关闭，会话为只读状态
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user