adjuest poster and mian chat
This commit is contained in:
hobby
@@ -377,291 +377,293 @@ const ChatUI = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<KaTeXStyle />
|
<KaTeXStyle />
|
||||||
<div className="h-[100dvh] flex flex-col bg-gray-100 fixed inset-0 overflow-hidden">
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 flex items-center justify-center">
|
||||||
{/* Header */}
|
<div className="h-[100dvh] flex flex-col bg-white max-w-3xl w-full mx-auto relative shadow-xl">
|
||||||
<header className="bg-white shadow flex-none">
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between px-4 py-3">
|
<header className="bg-white shadow flex-none">
|
||||||
{/* 左侧群组信息 */}
|
<div className="flex items-center justify-between px-4 py-3">
|
||||||
<div className="flex items-center gap-1.5">
|
{/* 左侧群组信息 */}
|
||||||
<div className="relative w-10 h-10">
|
<div className="flex items-center gap-1.5">
|
||||||
<div className="w-full h-full overflow-hidden bg-white border border-gray-200">
|
<div className="relative w-10 h-10">
|
||||||
{users.length === 1 ? (
|
<div className="w-full h-full overflow-hidden bg-white border border-gray-200">
|
||||||
<SingleAvatar user={users[0]} />
|
{users.length === 1 ? (
|
||||||
) : users.length === 2 ? (
|
<SingleAvatar user={users[0]} />
|
||||||
<div className="h-full flex">
|
) : users.length === 2 ? (
|
||||||
{users.slice(0, 2).map((user, index) => (
|
<div className="h-full flex">
|
||||||
<HalfAvatar key={user.id} user={user} isFirst={index === 0} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : users.length === 3 ? (
|
|
||||||
<div className="h-full flex flex-col">
|
|
||||||
<div className="flex h-1/2">
|
|
||||||
{users.slice(0, 2).map((user, index) => (
|
{users.slice(0, 2).map((user, index) => (
|
||||||
<HalfAvatar key={user.id} user={user} isFirst={index === 0} />
|
<HalfAvatar key={user.id} user={user} isFirst={index === 0} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="h-1/2 flex justify-center">
|
) : users.length === 3 ? (
|
||||||
<SingleAvatar user={users[2]} />
|
<div className="h-full flex flex-col">
|
||||||
|
<div className="flex h-1/2">
|
||||||
|
{users.slice(0, 2).map((user, index) => (
|
||||||
|
<HalfAvatar key={user.id} user={user} isFirst={index === 0} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="h-1/2 flex justify-center">
|
||||||
|
<SingleAvatar user={users[2]} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
) : (
|
<div className="h-full grid grid-cols-2">
|
||||||
<div className="h-full grid grid-cols-2">
|
{users.slice(0, 4).map((user, index) => (
|
||||||
{users.slice(0, 4).map((user, index) => (
|
<QuarterAvatar key={user.id} user={user} index={index} />
|
||||||
<QuarterAvatar key={user.id} user={user} index={index} />
|
))}
|
||||||
))}
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="absolute -bottom-0.5 -right-0.5 bg-green-500 w-3 h-3 border-2 border-white"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="font-medium text-base">{group.name}</h1>
|
||||||
|
<p className="text-xs text-gray-500">{users.length} 名成员</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧头像组和按钮 */}
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="flex -space-x-2 ">
|
||||||
|
{users.slice(0, 4).map((user) => {
|
||||||
|
const avatarData = getAvatarData(user.name);
|
||||||
|
return (
|
||||||
|
<TooltipProvider key={user.id}>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<Avatar className="w-7 h-7 border-2 border-white">
|
||||||
|
{'avatar' in user && user.avatar ? (
|
||||||
|
<AvatarImage src={user.avatar} />
|
||||||
|
) : (
|
||||||
|
<AvatarFallback style={{ backgroundColor: avatarData.backgroundColor, color: 'white' }}>
|
||||||
|
{avatarData.text}
|
||||||
|
</AvatarFallback>
|
||||||
|
)}
|
||||||
|
</Avatar>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>{user.name}</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{users.length > 4 && (
|
||||||
|
<div className="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center text-xs border-2 border-white">
|
||||||
|
+{users.length - 4}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute -bottom-0.5 -right-0.5 bg-green-500 w-3 h-3 border-2 border-white"></div>
|
<Button variant="ghost" size="icon" onClick={() => setShowMembers(true)}>
|
||||||
</div>
|
<Users className="w-5 h-5" />
|
||||||
<div>
|
</Button>
|
||||||
<h1 className="font-medium text-base">{group.name}</h1>
|
|
||||||
<p className="text-xs text-gray-500">{users.length} 名成员</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</header>
|
||||||
{/* 右侧头像组和按钮 */}
|
|
||||||
<div className="flex items-center">
|
{/* Main Chat Area */}
|
||||||
<div className="flex -space-x-2 ">
|
<div className="flex-1 overflow-hidden bg-gray-100">
|
||||||
{users.slice(0, 4).map((user) => {
|
<ScrollArea className="h-full p-2" ref={chatAreaRef}>
|
||||||
const avatarData = getAvatarData(user.name);
|
<div className="space-y-4">
|
||||||
return (
|
{messages.map((message) => (
|
||||||
<TooltipProvider key={user.id}>
|
<div key={message.id}
|
||||||
<Tooltip>
|
className={`flex items-start gap-2 ${message.sender.name === "我" ? "justify-end" : ""}`}>
|
||||||
<TooltipTrigger>
|
{message.sender.name !== "我" && (
|
||||||
<Avatar className="w-7 h-7 border-2 border-white">
|
<Avatar>
|
||||||
{'avatar' in user && user.avatar ? (
|
{'avatar' in message.sender && message.sender.avatar ? (
|
||||||
<AvatarImage src={user.avatar} />
|
<AvatarImage src={message.sender.avatar} className="w-10 h-10" />
|
||||||
) : (
|
) : (
|
||||||
<AvatarFallback style={{ backgroundColor: avatarData.backgroundColor, color: 'white' }}>
|
<AvatarFallback style={{ backgroundColor: getAvatarData(message.sender.name).backgroundColor, color: 'white' }}>
|
||||||
{avatarData.text}
|
{message.sender.name[0]}
|
||||||
</AvatarFallback>
|
</AvatarFallback>
|
||||||
)}
|
)}
|
||||||
</Avatar>
|
</Avatar>
|
||||||
</TooltipTrigger>
|
)}
|
||||||
<TooltipContent>
|
<div className={message.sender.name === "我" ? "text-right" : ""}>
|
||||||
<p>{user.name}</p>
|
<div className="text-sm text-gray-500">{message.sender.name}</div>
|
||||||
</TooltipContent>
|
<div className={`mt-1 p-3 rounded-lg shadow-sm chat-message ${
|
||||||
</Tooltip>
|
message.sender.name === "我" ? "bg-blue-500 text-white text-left" : "bg-white"
|
||||||
</TooltipProvider>
|
}`}>
|
||||||
);
|
<ReactMarkdown
|
||||||
})}
|
remarkPlugins={[remarkGfm, remarkMath]}
|
||||||
{users.length > 4 && (
|
rehypePlugins={[rehypeKatex]}
|
||||||
<div className="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center text-xs border-2 border-white">
|
className={`prose dark:prose-invert max-w-none ${
|
||||||
+{users.length - 4}
|
message.sender.name === "我" ? "text-white [&_*]:text-white" : ""
|
||||||
|
}
|
||||||
|
[&_h2]:py-1
|
||||||
|
[&_h2]:m-0
|
||||||
|
[&_h3]:py-1.5
|
||||||
|
[&_h3]:m-0
|
||||||
|
[&_p]:m-0
|
||||||
|
[&_pre]:bg-gray-900
|
||||||
|
[&_pre]:p-2
|
||||||
|
[&_pre]:m-0
|
||||||
|
[&_pre]:rounded-lg
|
||||||
|
[&_pre]:text-gray-100
|
||||||
|
[&_pre]:whitespace-pre-wrap
|
||||||
|
[&_pre]:break-words
|
||||||
|
[&_pre_code]:whitespace-pre-wrap
|
||||||
|
[&_pre_code]:break-words
|
||||||
|
[&_code]:text-sm
|
||||||
|
[&_code]:text-gray-400
|
||||||
|
[&_code:not(:where([class~="language-"]))]:text-pink-500
|
||||||
|
[&_code:not(:where([class~="language-"]))]:bg-transparent
|
||||||
|
[&_a]:text-blue-500
|
||||||
|
[&_a]:no-underline
|
||||||
|
[&_ul]:my-2
|
||||||
|
[&_ol]:my-2
|
||||||
|
[&_li]:my-1
|
||||||
|
[&_blockquote]:border-l-4
|
||||||
|
[&_blockquote]:border-gray-300
|
||||||
|
[&_blockquote]:pl-4
|
||||||
|
[&_blockquote]:my-2
|
||||||
|
[&_blockquote]:italic`}
|
||||||
|
>
|
||||||
|
{message.content}
|
||||||
|
</ReactMarkdown>
|
||||||
|
{message.isAI && isTyping && currentMessageRef.current === message.id && (
|
||||||
|
<span className="typing-indicator ml-1">▋</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{message.sender.name === "我" && (
|
||||||
|
<Avatar>
|
||||||
|
{'avatar' in message.sender && message.sender.avatar ? (
|
||||||
|
<AvatarImage src={message.sender.avatar} className="w-10 h-10" />
|
||||||
|
) : (
|
||||||
|
<AvatarFallback style={{ backgroundColor: getAvatarData(message.sender.name).backgroundColor, color: 'white' }}>
|
||||||
|
{message.sender.name[0]}
|
||||||
|
</AvatarFallback>
|
||||||
|
)}
|
||||||
|
</Avatar>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
))}
|
||||||
|
<div ref={messagesEndRef} />
|
||||||
|
{/* 添加一个二维码 */}
|
||||||
|
<div id="qrcode" className="flex flex-col items-center hidden">
|
||||||
|
<img src="/img/qr.png" alt="QR Code" className="w-24 h-24" />
|
||||||
|
<p className="text-sm text-gray-500 mt-2 font-medium tracking-tight bg-gray-50 px-3 py-1 rounded-full">扫码体验AI群聊</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Button variant="ghost" size="icon" onClick={() => setShowMembers(true)}>
|
</ScrollArea>
|
||||||
<Users className="w-5 h-5" />
|
</div>
|
||||||
|
|
||||||
|
{/* Input Area */}
|
||||||
|
<div className="bg-white border-t pb-[calc(0.75rem+env(safe-area-inset-bottom))] pt-3 px-4">
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{messages.length > 0 && (
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={handleShareChat}
|
||||||
|
className="px-3"
|
||||||
|
>
|
||||||
|
<Share2 className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>分享聊天记录</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
)}
|
||||||
|
<Input
|
||||||
|
placeholder="输入消息..."
|
||||||
|
className="flex-1"
|
||||||
|
value={inputMessage}
|
||||||
|
onChange={(e) => setInputMessage(e.target.value)}
|
||||||
|
onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={handleSendMessage}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="w-4 h-4 mr-2 animate-spin rounded-full border-2 border-white border-t-transparent" />
|
||||||
|
) : (
|
||||||
|
<Send className="w-4 h-4" />
|
||||||
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
|
||||||
|
|
||||||
{/* Main Chat Area */}
|
{/* Members Management Dialog */}
|
||||||
<div className="flex-1 overflow-hidden">
|
<Dialog open={showMembers} onOpenChange={setShowMembers}>
|
||||||
<ScrollArea className="h-full p-2" ref={chatAreaRef}>
|
<DialogContent className="max-w-md">
|
||||||
<div className="space-y-4">
|
<DialogHeader>
|
||||||
{messages.map((message) => (
|
<DialogTitle>群成员管理</DialogTitle>
|
||||||
<div key={message.id}
|
</DialogHeader>
|
||||||
className={`flex items-start gap-2 ${message.sender.name === "我" ? "justify-end" : ""}`}>
|
<div className="mt-4">
|
||||||
{message.sender.name !== "我" && (
|
<div className="flex justify-between items-center mb-4">
|
||||||
<Avatar>
|
<span className="text-sm text-gray-500">当前成员（{users.length}）</span>
|
||||||
{'avatar' in message.sender && message.sender.avatar ? (
|
<Button variant="outline" size="sm">
|
||||||
<AvatarImage src={message.sender.avatar} className="w-10 h-10" />
|
<UserPlus className="w-4 h-4 mr-2" />
|
||||||
) : (
|
添加成员
|
||||||
<AvatarFallback style={{ backgroundColor: getAvatarData(message.sender.name).backgroundColor, color: 'white' }}>
|
</Button>
|
||||||
{message.sender.name[0]}
|
|
||||||
</AvatarFallback>
|
|
||||||
)}
|
|
||||||
</Avatar>
|
|
||||||
)}
|
|
||||||
<div className={message.sender.name === "我" ? "text-right" : ""}>
|
|
||||||
<div className="text-sm text-gray-500">{message.sender.name}</div>
|
|
||||||
<div className={`mt-1 p-3 rounded-lg shadow-sm chat-message ${
|
|
||||||
message.sender.name === "我" ? "bg-blue-500 text-white text-left" : "bg-white"
|
|
||||||
}`}>
|
|
||||||
<ReactMarkdown
|
|
||||||
remarkPlugins={[remarkGfm, remarkMath]}
|
|
||||||
rehypePlugins={[rehypeKatex]}
|
|
||||||
className={`prose dark:prose-invert max-w-none ${
|
|
||||||
message.sender.name === "我" ? "text-white [&_*]:text-white" : ""
|
|
||||||
}
|
|
||||||
[&_h2]:py-1
|
|
||||||
[&_h2]:m-0
|
|
||||||
[&_h3]:py-1.5
|
|
||||||
[&_h3]:m-0
|
|
||||||
[&_p]:m-0
|
|
||||||
[&_pre]:bg-gray-900
|
|
||||||
[&_pre]:p-2
|
|
||||||
[&_pre]:m-0
|
|
||||||
[&_pre]:rounded-lg
|
|
||||||
[&_pre]:text-gray-100
|
|
||||||
[&_pre]:whitespace-pre-wrap
|
|
||||||
[&_pre]:break-words
|
|
||||||
[&_pre_code]:whitespace-pre-wrap
|
|
||||||
[&_pre_code]:break-words
|
|
||||||
[&_code]:text-sm
|
|
||||||
[&_code]:text-gray-400
|
|
||||||
[&_code:not(:where([class~="language-"]))]:text-pink-500
|
|
||||||
[&_code:not(:where([class~="language-"]))]:bg-transparent
|
|
||||||
[&_a]:text-blue-500
|
|
||||||
[&_a]:no-underline
|
|
||||||
[&_ul]:my-2
|
|
||||||
[&_ol]:my-2
|
|
||||||
[&_li]:my-1
|
|
||||||
[&_blockquote]:border-l-4
|
|
||||||
[&_blockquote]:border-gray-300
|
|
||||||
[&_blockquote]:pl-4
|
|
||||||
[&_blockquote]:my-2
|
|
||||||
[&_blockquote]:italic`}
|
|
||||||
>
|
|
||||||
{message.content}
|
|
||||||
</ReactMarkdown>
|
|
||||||
{message.isAI && isTyping && currentMessageRef.current === message.id && (
|
|
||||||
<span className="typing-indicator ml-1">▋</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{message.sender.name === "我" && (
|
|
||||||
<Avatar>
|
|
||||||
{'avatar' in message.sender && message.sender.avatar ? (
|
|
||||||
<AvatarImage src={message.sender.avatar} className="w-10 h-10" />
|
|
||||||
) : (
|
|
||||||
<AvatarFallback style={{ backgroundColor: getAvatarData(message.sender.name).backgroundColor, color: 'white' }}>
|
|
||||||
{message.sender.name[0]}
|
|
||||||
</AvatarFallback>
|
|
||||||
)}
|
|
||||||
</Avatar>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
<ScrollArea className="h-[300px]">
|
||||||
<div ref={messagesEndRef} />
|
<div className="space-y-2">
|
||||||
{/* 添加一个二维码 */}
|
{users.map((user) => (
|
||||||
<div id="qrcode" className="flex flex-col items-center hidden">
|
<div key={user.id} className="flex items-center justify-between p-2 hover:bg-gray-100 rounded-lg">
|
||||||
<img src="/img/qr.png" alt="QR Code" className="w-24 h-24" />
|
<div className="flex items-center gap-3">
|
||||||
<p className="text-sm text-gray-500 mt-2 font-medium tracking-tight bg-gray-50 px-3 py-1 rounded-full">扫码体验AI群聊</p>
|
<Avatar>
|
||||||
</div>
|
{'avatar' in user && user.avatar ? (
|
||||||
</div>
|
<AvatarImage src={user.avatar} className="w-10 h-10" />
|
||||||
</ScrollArea>
|
) : (
|
||||||
</div>
|
<AvatarFallback style={{ backgroundColor: getAvatarData(user.name).backgroundColor, color: 'white' }}>
|
||||||
|
{user.name[0]}
|
||||||
{/* Input Area */}
|
</AvatarFallback>
|
||||||
<div className="bg-white border-t pb-[calc(0.75rem+env(safe-area-inset-bottom))] pt-3 px-4">
|
)}
|
||||||
<div className="flex gap-1">
|
</Avatar>
|
||||||
{messages.length > 0 && (
|
<div className="flex flex-col">
|
||||||
<TooltipProvider>
|
<span>{user.name}</span>
|
||||||
<Tooltip>
|
{mutedUsers.includes(user.id) && (
|
||||||
<TooltipTrigger asChild>
|
<span className="text-xs text-red-500">已禁言</span>
|
||||||
<Button
|
)}
|
||||||
variant="outline"
|
</div>
|
||||||
size="icon"
|
|
||||||
onClick={handleShareChat}
|
|
||||||
className="px-3"
|
|
||||||
>
|
|
||||||
<Share2 className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>分享聊天记录</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
)}
|
|
||||||
<Input
|
|
||||||
placeholder="输入消息..."
|
|
||||||
className="flex-1"
|
|
||||||
value={inputMessage}
|
|
||||||
onChange={(e) => setInputMessage(e.target.value)}
|
|
||||||
onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onClick={handleSendMessage}
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="w-4 h-4 mr-2 animate-spin rounded-full border-2 border-white border-t-transparent" />
|
|
||||||
) : (
|
|
||||||
<Send className="w-4 h-4" />
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Members Management Dialog */}
|
|
||||||
<Dialog open={showMembers} onOpenChange={setShowMembers}>
|
|
||||||
<DialogContent className="max-w-md">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>群成员管理</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="mt-4">
|
|
||||||
<div className="flex justify-between items-center mb-4">
|
|
||||||
<span className="text-sm text-gray-500">当前成员（{users.length}）</span>
|
|
||||||
<Button variant="outline" size="sm">
|
|
||||||
<UserPlus className="w-4 h-4 mr-2" />
|
|
||||||
添加成员
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<ScrollArea className="h-[300px]">
|
|
||||||
<div className="space-y-2">
|
|
||||||
{users.map((user) => (
|
|
||||||
<div key={user.id} className="flex items-center justify-between p-2 hover:bg-gray-100 rounded-lg">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Avatar>
|
|
||||||
{'avatar' in user && user.avatar ? (
|
|
||||||
<AvatarImage src={user.avatar} className="w-10 h-10" />
|
|
||||||
) : (
|
|
||||||
<AvatarFallback style={{ backgroundColor: getAvatarData(user.name).backgroundColor, color: 'white' }}>
|
|
||||||
{user.name[0]}
|
|
||||||
</AvatarFallback>
|
|
||||||
)}
|
|
||||||
</Avatar>
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span>{user.name}</span>
|
|
||||||
{mutedUsers.includes(user.id) && (
|
|
||||||
<span className="text-xs text-red-500">已禁言</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
{user.name !== "我" && (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => handleToggleMute(user.id)}
|
||||||
|
>
|
||||||
|
{mutedUsers.includes(user.id) ? (
|
||||||
|
<MicOff className="w-4 h-4 text-red-500" />
|
||||||
|
) : (
|
||||||
|
<Mic className="w-4 h-4 text-green-500" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
{mutedUsers.includes(user.id) ? '取消禁言' : '禁言'}
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
{/*<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => handleRemoveUser(user.id)}
|
||||||
|
>
|
||||||
|
<UserMinus className="w-4 h-4 text-red-500" />
|
||||||
|
</Button>*/}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{user.name !== "我" && (
|
))}
|
||||||
<div className="flex gap-2">
|
</div>
|
||||||
<TooltipProvider>
|
</ScrollArea>
|
||||||
<Tooltip>
|
</div>
|
||||||
<TooltipTrigger asChild>
|
</DialogContent>
|
||||||
<Button
|
</Dialog>
|
||||||
variant="ghost"
|
</div>
|
||||||
size="icon"
|
|
||||||
onClick={() => handleToggleMute(user.id)}
|
|
||||||
>
|
|
||||||
{mutedUsers.includes(user.id) ? (
|
|
||||||
<MicOff className="w-4 h-4 text-red-500" />
|
|
||||||
) : (
|
|
||||||
<Mic className="w-4 h-4 text-green-500" />
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>
|
|
||||||
{mutedUsers.includes(user.id) ? '取消禁言' : '禁言'}
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
{/*<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => handleRemoveUser(user.id)}
|
|
||||||
>
|
|
||||||
<UserMinus className="w-4 h-4 text-red-500" />
|
|
||||||
</Button>*/}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 添加 SharePoster 组件 */}
|
{/* 添加 SharePoster 组件 */}
|
||||||
|
|||||||
@@ -72,17 +72,18 @@ export function SharePoster({ isOpen, onClose, chatAreaRef }: SharePosterProps)
|
|||||||
const dataUrl = await domtoimage.toSvg(messageContainer as HTMLElement, {
|
const dataUrl = await domtoimage.toSvg(messageContainer as HTMLElement, {
|
||||||
bgcolor: '#f3f4f6',
|
bgcolor: '#f3f4f6',
|
||||||
scale: 1, // 回到较安全的值
|
scale: 1, // 回到较安全的值
|
||||||
width: targetWidth + (extraSpace * 2),
|
width: targetWidth + (extraSpace * 5),
|
||||||
height: adjustedHeight + (extraSpace * 2),
|
height: adjustedHeight + (extraSpace * 5),
|
||||||
style: {
|
style: {
|
||||||
padding: `${extraSpace}px`,
|
padding: `${extraSpace}px`,
|
||||||
margin: '0',
|
margin: '0 auto',
|
||||||
width: '120%',
|
width: '120%',
|
||||||
height: '110%',
|
height: '110%',
|
||||||
transform: `scale(${scale})`,
|
transform: `scale(${scale})`,
|
||||||
transformOrigin: 'top left',
|
transformOrigin: 'top left',
|
||||||
background: '#f3f4f6',
|
background: '#f3f4f6',
|
||||||
boxSizing: 'border-box'
|
boxSizing: 'border-box'
|
||||||
|
|
||||||
},
|
},
|
||||||
quality: 1.0
|
quality: 1.0
|
||||||
});
|
});
|
||||||
@@ -168,7 +169,7 @@ export function SharePoster({ isOpen, onClose, chatAreaRef }: SharePosterProps)
|
|||||||
onClose();
|
onClose();
|
||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
<DialogContent className="max-w-[100vw] w-full sm:max-w-[100vw] max-h-[90vh] flex flex-col p-0">
|
<DialogContent className="max-w-[100vw] w-full sm:max-w-[50vw] max-h-[90vh] flex flex-col p-0">
|
||||||
{/* 图片容器 */}
|
{/* 图片容器 */}
|
||||||
<div className="flex-1 overflow-auto ">
|
<div className="flex-1 overflow-auto ">
|
||||||
{posterImage && (
|
{posterImage && (
|
||||||
|
|||||||
Reference in New Issue
Block a user