lostecho/botgroup.chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整模型结构和支持样式

Browse Source
This commit is contained in:
maojindao55
2025-02-19 19:11:22 +08:00
parent ae5a4cd003
commit cddf297103
7 changed files with 994 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.css
View File

@@ -15,4 +15,5 @@
.app-footer {
/* 页脚样式 */
}
}

517
src/components/ChatUI.tsx
View File

@@ -22,6 +22,9 @@ import {generateAICharacters} from "@/config/aiCharacters";
import { groups } from "@/config/groups";
import type { AICharacter } from "@/config/aiCharacters";
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
// 使用本地头像数据，避免外部依赖
const getAvatarData = (name: string) => {
@@ -112,6 +115,33 @@ const QuarterAvatar = ({ user, index }: { user: User, index: number }) => {
);
};
// 动态导入 KaTeX 样式
const KaTeXStyle = () => (
<style jsx global>{`
/* 只在聊天消息内应用 KaTeX 样式 */
.chat-message .katex-html {
display: none;
}
.chat-message .katex {
font: normal 1.1em KaTeX_Main, Times New Roman, serif;
line-height: 1.2;
text-indent: 0;
white-space: nowrap;
text-rendering: auto;
}
.chat-message .katex-display {
display: block;
margin: 1em 0;
text-align: center;
}
/* 其他必要的 KaTeX 样式 */
@import "katex/dist/katex.min.css";
`}</style>
);
const ChatUI = () => {
const [group, setGroup] = useState(groups[1]);
const groupAiCharacters = generateAICharacters(group.name).filter(character => group.members.includes(character.id));
@@ -320,265 +350,272 @@ const ChatUI = () => {
}, []);
return (
<div className="h-[100dvh] flex flex-col bg-gray-100 fixed inset-0 overflow-hidden">
{/* Header */}
<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="w-full h-full overflow-hidden bg-white border border-gray-200">
{users.length === 1 ? (
<SingleAvatar user={users[0]} />
) : users.length === 2 ? (
<div className="h-full flex">
{users.slice(0, 2).map((user, index) => (
<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">
<>
<KaTeXStyle />
<div className="h-[100dvh] flex flex-col bg-gray-100 fixed inset-0 overflow-hidden">
{/* Header */}
<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="w-full h-full overflow-hidden bg-white border border-gray-200">
{users.length === 1 ? (
<SingleAvatar user={users[0]} />
) : users.length === 2 ? (
<div className="h-full flex">
{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]} />
) : users.length === 3 ? (
<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 className="h-full grid grid-cols-2">
{users.slice(0, 4).map((user, index) => (
<QuarterAvatar key={user.id} user={user} index={index} />
))}
) : (
<div className="h-full grid grid-cols-2">
{users.slice(0, 4).map((user, 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 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>
<Button variant="ghost" size="icon" onClick={() => setShowMembers(true)}>
<Users className="w-5 h-5" />
</Button>
</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}
</header>
{/* Main Chat Area */}
<div className="flex-1 overflow-hidden">
<ScrollArea className="h-full p-4">
<div className="space-y-4">
{messages.map((message) => (
<div key={message.id}
className={`flex items-start gap-2 ${message.sender.name === "我" ? "justify-end" : ""}`}>
{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 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 ref={messagesEndRef} />
</div>
<Button variant="ghost" size="icon" onClick={() => setShowMembers(true)}>
<Users className="w-5 h-5" />
</ScrollArea>
</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-2">
<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 mr-2" />
)}
发送
</Button>
</div>
</div>
</header>
{/* Main Chat Area */}
<div className="flex-1 overflow-hidden">
<ScrollArea className="h-full p-4">
<div className="space-y-4">
{messages.map((message) => (
<div key={message.id}
className={`flex items-start gap-2 ${message.sender.name === "我" ? "justify-end" : ""}`}>
{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 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 ${
message.sender.name === "我" ? "bg-blue-500 text-white text-left" : "bg-white"
}`}>
<ReactMarkdown
className={`prose dark:prose-invert max-w-none ${
message.sender.name === "我" ? "text-white [&_*]:text-white" : ""
}
[&_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>
)}
{/* 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>
))}
<div ref={messagesEndRef} />
</div>
</ScrollArea>
</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-2">
<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 mr-2" />
)}
发送
</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>
)}
<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>
{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>
</ScrollArea>
</div>
</DialogContent>
</Dialog>
</div>
))}
</div>
</ScrollArea>
</div>
</DialogContent>
</Dialog>
</div>
</>
);
};

41
src/config/aiCharacters.ts
View File

@@ -1,8 +1,33 @@
// 首先定义模型配置
export const modelConfigs = [
{
model: "qwen-plus",
apiKey: "DASHSCOPE_API_KEY", // 这里存储环境变量的 key 名称
baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1"
},
{
model: "deepseek-v3",
apiKey: "DASHSCOPE_API_KEY",
baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1"
},
{
model: "hunyuan-standard",
apiKey: "HUNYUAN_API_KEY",
baseURL: "https://api.hunyuan.cloud.tencent.com/v1"
},
{
model: "ep-20250217191935-wzj8l",//火山引擎接入点（改成自己的）
apiKey: "ARK_API_KEY",
baseURL: "https://ark.cn-beijing.volces.com/api/v3"
}
] as const;
export type ModelType = typeof modelConfigs[number]["model"];
export interface AICharacter {
id: string;
name: string;
personality: string;
model: string;
model: ModelType;
avatar?: string; // 可选的头像 URL
custom_prompt?: string; // 可选的个性提示
}
@@ -14,7 +39,7 @@ export function generateAICharacters(groupName: string): AICharacter[] {
id: 'ai1',
name: "暖心姐",
personality: "high_eq",
model: "hunyuan-turbo",
model: modelConfigs[2].model,
avatar: "", // 如果有头像资源可以添加路径,
custom_prompt: `你是一个名叫"暖心姐"的硅基生命体，你当前在一个叫"${groupName}" 的群里，性格温暖体贴，情商很高。
回复时要：
@@ -29,7 +54,7 @@ export function generateAICharacters(groupName: string): AICharacter[] {
id: 'ai2',
name: "直男哥",
personality: "low_eq",
model: "hunyuan-turbo",
model: modelConfigs[2].model,
avatar: "",
custom_prompt: `你是一个名叫"直男哥"的硅基生命体，你当前在一个叫"${groupName}" 的群里，是一个极度直男，负责在群里制造快乐。你说话极其直接，完全没有情商，经常让人社死。
回复时要：
@@ -42,7 +67,7 @@ export function generateAICharacters(groupName: string): AICharacter[] {
id: 'ai3',
name: "北京大爷",
personality: "bj_dad",
model: "hunyuan-turbo",
model: modelConfigs[2].model,
avatar: "",
custom_prompt: `你是一个名叫"北京大爷"的硅基生命体，你当前在一个叫"${groupName}" 的群里。你是一个典型的北京大爷，说话风趣幽默，经常使用北京方言。
回复时要：
@@ -55,7 +80,7 @@ export function generateAICharacters(groupName: string): AICharacter[] {
id: 'ai4',
name: "元宝",
personality: "yuanbao",
model: "hunyuan-turbo",
model: modelConfigs[2].model,
avatar: "/img/yuanbao.png",
custom_prompt: `你是一个名叫"元宝"的硅基生命体，你当前在一个叫"${groupName}" 的聊天群里`
},
@@ -63,7 +88,7 @@ export function generateAICharacters(groupName: string): AICharacter[] {
id: 'ai5',
name: "豆包",
personality: "doubao",
model: "ep-20250217191935-wzj8l",
model: modelConfigs[3].model,//火山引擎接入点（改成自己的）
avatar: "/img/doubao_new.png",
custom_prompt: `你是一个名叫"豆包"的硅基生命体，你当前在一个叫"${groupName}" 的聊天群里`
},
@@ -71,7 +96,7 @@ export function generateAICharacters(groupName: string): AICharacter[] {
id: 'ai6',
name: "千问",
personality: "qianwen",
model: "qwen-plus",
model: modelConfigs[0].model,
avatar: "/img/qwen.jpg",
custom_prompt: `你是一个名叫"千问"的硅基生命体，你当前在一个叫"${groupName}" 的聊天群里`
},
@@ -79,7 +104,7 @@ export function generateAICharacters(groupName: string): AICharacter[] {
id: 'ai7',
name: "DeepSeek",
personality: "deepseek-v3",
model: "deepseek-v3",
model: modelConfigs[1].model,
avatar: "/img/ds.svg",
custom_prompt: `你是一个名叫"DeepSeek"的硅基生命体，你当前在一个叫"${groupName}" 的聊天群里`
}