支持多群聊&UI改版

functions/api/chat.ts

@@ -25,7 +25,7 @@ export async function onRequestPost({ env, request }) {
     // 根据性格设置不同的系统提示语
     let systemPrompt = "";
 
-    systemPrompt = custom_prompt + "\n 注意重要：1、你在群里叫" + aiName + "认准自己的身份，你的输出内容不要加" + aiName + "：这种多余前缀；2、如果用户提出玩游戏，比如成语接龙等，严格按照游戏规则，不要说一大堆，要简短精炼; 3、不要重复别人的话！"
+    systemPrompt = custom_prompt + "\n 注意重要：1、你在群里叫" + aiName + "认准自己的身份； 2、你的输出内容不要加" + aiName + "：这种多余前缀；3、如果用户提出玩游戏，比如成语接龙等，严格按照游戏规则，不要说一大堆，要简短精炼; 4、不要重复别人的话！"
 
     // 构建完整的消息历史
     const baseMessages = [

package-lock.json

@@ -13,6 +13,7 @@
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
         "@radix-ui/react-scroll-area": "^1.2.3",
+        "@radix-ui/react-separator": "^1.1.2",
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-switch": "^1.1.3",
         "@radix-ui/react-tooltip": "^1.1.8",
@@ -1303,9 +1304,31 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-separator/-/react-separator-1.1.2.tgz",
+      "integrity": "sha512-oZfHcaAp2Y6KFBX6I5P1u7CQoy4lheCGiYj+pGFrHy8E/VNRb5E39TkTr3JrV520csPBTZjkuKFdEsjS5EUNKQ==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
       "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.1"
@@ -1350,7 +1373,7 @@
     },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz",
       "integrity": "sha512-YAA2cu48EkJZdAMHC0dqo9kialOcRStbtiY4nJPaht7Ptrhcvpo+eDChaM6BIs8kL6a8Z5l5poiqLnXcNduOkA==",
       "dependencies": {
         "@radix-ui/primitive": "1.1.1",
@@ -2411,7 +2434,7 @@
     },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "resolved": "https://registry.npmmirror.com/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
       "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
       "dependencies": {
         "clsx": "^2.1.1"
@@ -3743,7 +3766,7 @@
     },
     "node_modules/lucide-react": {
       "version": "0.263.1",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.263.1.tgz",
+      "resolved": "https://registry.npmmirror.com/lucide-react/-/lucide-react-0.263.1.tgz",
       "integrity": "sha512-keqxAx97PlaEN89PXZ6ki1N8nRjGWtDa4021GFYLNj0RgruM5odbpl8GHTExj0hhPq3sF6Up0gnxt6TSHu+ovw==",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0"

package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",

src/components/ChatUI.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Send, Menu, MoreHorizontal, UserPlus, UserMinus, Users2, Users, MoreVertical, Share2, Mic, MicOff, Settings2 } from 'lucide-react';
+import { Send, Share2, Settings2, ChevronLeft } from 'lucide-react';
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -25,9 +25,9 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 import rehypeKatex from 'rehype-katex'
-import html2canvas from 'html2canvas';
 import { SharePoster } from '@/components/SharePoster';
 import { MembersManagement } from '@/components/MembersManagement';
+import Sidebar from './Sidebar';
 
 // 使用本地头像数据，避免外部依赖
 const getAvatarData = (name: string) => {
@@ -146,9 +146,15 @@ const KaTeXStyle = () => (
 );
 
 const ChatUI = () => {
-  const [group, setGroup] = useState(groups[1]);
+  // 使用当前选中的群组在 groups 数组中的索引
-  const [isGroupDiscussionMode, setIsGroupDiscussionMode] = useState(false);
+  const [selectedGroupIndex, setSelectedGroupIndex] = useState(0); // 默认选中第1个群组
-  const groupAiCharacters = generateAICharacters(group.name).filter(character => group.members.includes(character.id));
+  const [group, setGroup] = useState(groups[selectedGroupIndex]);
+  const [isGroupDiscussionMode, setIsGroupDiscussionMode] = useState(group.isGroupDiscussionMode);
+  const groupAiCharacters = generateAICharacters(group.name)
+    .filter(character => group.members.includes(character.id))
+    .sort((a, b) => {
+      return group.members.indexOf(a.id) - group.members.indexOf(b.id);
+    });
   const [users, setUsers] = useState([
     { id: 1, name: "我" },
     ...groupAiCharacters
@@ -258,7 +264,7 @@ const ChatUI = () => {
             history: messageHistory,
             index: i,
             aiName: selectedGroupAiCharacters[i].name,
-            custom_prompt: selectedGroupAiCharacters[i].custom_prompt
+            custom_prompt: selectedGroupAiCharacters[i].custom_prompt + "\n" + group.description
           }),
         });
 
@@ -377,220 +383,240 @@ const ChatUI = () => {
     setShowPoster(true);
   };
 
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  
+  // 切换侧边栏状态的函数
+  const toggleSidebar = () => {
+    setSidebarOpen(!sidebarOpen);
+  };
+
+  // 处理群组选择
+  const handleSelectGroup = (index: number) => {
+    setSelectedGroupIndex(index);
+    const newGroup = groups[index];
+    setGroup(newGroup);
+    
+    // 重新生成当前群组的 AI 角色，并按照 members 数组的顺序排序
+    const newGroupAiCharacters = generateAICharacters(newGroup.name)
+      .filter(character => newGroup.members.includes(character.id))
+      .sort((a, b) => {
+        return newGroup.members.indexOf(a.id) - newGroup.members.indexOf(b.id);
+      });
+    
+    // 更新用户列表
+    setUsers([
+      { id: 1, name: "我" },
+      ...newGroupAiCharacters
+    ]);
+    setIsGroupDiscussionMode(newGroup.isGroupDiscussionMode);
+    
+    // 重置消息
+    setMessages([]);
+    
+    // 可选：关闭侧边栏（在移动设备上）
+    if (window.innerWidth < 768) {
+      setSidebarOpen(false);
+    }
+  };
+
   return (
     <>
       <KaTeXStyle />
       <div className="fixed inset-0 bg-gradient-to-br from-orange-50 via-orange-50/70 to-orange-100 flex items-start md:items-center justify-center overflow-hidden">
-        <div className="h-full flex flex-col bg-white w-full mx-auto relative shadow-xl md:max-w-3xl md:h-[95dvh] md:my-auto md:rounded-lg">
+        <div className="h-full flex bg-white w-full mx-auto relative shadow-xl md:max-w-5xl md:h-[96dvh] md:my-auto md:rounded-lg">
-          {/* Header */}
+          {/* 传递 selectedGroupIndex 和 onSelectGroup 回调给 Sidebar */}
-          <header className="bg-white shadow flex-none md:rounded-t-lg">
+          <Sidebar 
-            <div className="flex items-center justify-between px-4 py-3">
+            isOpen={sidebarOpen} 
-              {/* 左侧群组信息 */}
+            toggleSidebar={toggleSidebar} 
-              <div className="flex items-center gap-1.5">
+            selectedGroupIndex={selectedGroupIndex}
-                <div className="relative w-10 h-10">
+            onSelectGroup={handleSelectGroup}
-                  <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="flex flex-col flex-1">
-                      <div className="h-full flex">
+            {/* Header */}
-                        {users.slice(0, 2).map((user, index) => (
+            <header className="bg-white shadow flex-none md:rounded-t-lg">
-                          <HalfAvatar key={user.id} user={user} isFirst={index === 0} />
+              <div className="flex items-center justify-between px-0 py-1.5">
-                        ))}
+                {/* 左侧群组信息 */}
-                      </div>
+                <div className="flex items-center md:px-2.5">
-                    ) : users.length === 3 ? (
+                  <div 
-                      <div className="h-full flex flex-col">
+                    className="md:hidden flex items-center justify-center m-1  cursor-pointer" 
-                        <div className="flex h-1/2">
+                    onClick={toggleSidebar}
-                          {users.slice(0, 2).map((user, index) => (
+                  >
-                            <HalfAvatar key={user.id} user={user} isFirst={index === 0} />
+                    <ChevronLeft className="w-6 h-6" />
-                          ))}
+                  </div>
-                        </div>
+                  
-                        <div className="h-1/2 flex justify-center">
+                  <h1 className="font-medium text-base -ml-1">{group.name}({users.length})</h1>
-                          <SingleAvatar user={users[2]} />
+                </div>
-                        </div>
+                
-                      </div>
+                {/* 右侧头像组和按钮 */}
-                    ) : (
+                <div className="flex items-center">
-                      <div className="h-full grid grid-cols-2">
+                  <div className="flex -space-x-2 ">
-                        {users.slice(0, 4).map((user, index) => (
+                    {users.slice(0, 4).map((user) => {
-                          <QuarterAvatar key={user.id} user={user} index={index} />
+                      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>
+                  <Button variant="ghost" size="icon" onClick={() => setShowMembers(true)}>
-                </div>
+                    <Settings2 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>
-              
+            </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 px-2 py-1" 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 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>
-                <Button variant="ghost" size="icon" onClick={() => setShowMembers(true)}>
+              </ScrollArea>
-                  <Settings2 className="w-5 h-5" />
+            </div>
+
+            {/* Input Area */}
+            <div className="bg-white border-t py-3 px-2 md:rounded-b-lg">
+              <div className="flex gap-1 pb-[env(safe-area-inset-bottom)]">
+                {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>
               </div>
             </div>
-          </header>
-
-          {/* Main Chat Area */}
-          <div className="flex-1 overflow-hidden bg-gray-100">
-            <ScrollArea className="h-full p-2" ref={chatAreaRef}>
-              <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 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>
-            </ScrollArea>
-          </div>
-
-          {/* Input Area */}
-          <div className="bg-white border-t pb-3 pt-3 px-4 md:rounded-b-lg">
-            <div className="flex gap-1 pb-[env(safe-area-inset-bottom)]">
-              {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>
-            </div>
           </div>
         </div>
 

src/components/Layout.tsx

@@ -4,10 +4,11 @@ import Header from './Header';
 const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <div className="flex flex-col min-h-screen">
-      <Header />
+      <div className="flex flex-1">
-      <main className="flex-1 pt-14">
+        <main className="flex-1 pt-14">
-        {children}
+          {children}
-      </main>
+        </main>
+      </div>
     </div>
   );
 };

src/components/Sidebar.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import { Button } from "@/components/ui/button";
+import { MessageSquareIcon, PlusCircleIcon, MenuIcon, PanelLeftCloseIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import GitHubButton from 'react-github-btn';
+import '@fontsource/audiowide';
+import { groups } from "@/config/groups";
+import { 
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+// 根据群组ID生成固定的随机颜色
+const getRandomColor = (index: number) => {
+  const colors = ['blue', 'green', 'yellow', 'purple', 'pink', 'indigo', 'red', 'orange', 'teal'];
+  //增加hash
+  const hashCode = index.toString().split('').reduce((acc, char) => {
+    return char.charCodeAt(0) + ((acc << 5) - acc);
+  }, 0);
+  return colors[hashCode % colors.length];
+};
+
+interface SidebarProps {
+  isOpen: boolean;
+  toggleSidebar: () => void;
+  selectedGroupIndex?: number;
+  onSelectGroup?: (index: number) => void;
+}
+
+const Sidebar = ({ isOpen, toggleSidebar, selectedGroupIndex = 0, onSelectGroup }: SidebarProps) => {
+  
+  return (
+    <>
+      {/* 侧边栏 - 在移动设备上可以隐藏，在桌面上始终显示 */}
+      <div 
+        className={cn(
+          "transition-all duration-300 ease-in-out",
+          "fixed md:relative z-20 h-full",
+          isOpen ? "w-48 translate-x-0" : "w-0 md:w-14 -translate-x-full md:translate-x-0"
+        )}
+      >
+        <div className="h-full border-r bg-background rounded-l-lg overflow-hidden flex flex-col">
+          <div className="flex items-center justify-between px-2 py-1.5 border-b border-border/40">
+            <div className="flex-1 flex items-center">
+              <span className={cn(
+                "font-medium text-base text-foreground/90 transition-all duration-200 whitespace-nowrap overflow-hidden",
+                isOpen ? "opacity-100 max-w-full mr-2 pl-3" : "opacity-0 max-w-0 md:max-w-0"
+              )}>
+                群列表
+              </span>
+              <Button 
+                variant="ghost" 
+                size="icon" 
+                onClick={toggleSidebar}
+                className={cn(
+                  "text-muted-foreground hover:text-primary",
+                  isOpen ? "ml-auto" : "mx-auto md:ml-auto"
+                )}
+              >
+                {isOpen ? <PanelLeftCloseIcon className="h-4 w-4" /> : <MenuIcon className="h-4 w-4" />}
+              </Button>
+            </div>
+          </div>
+          
+          <div className="flex-1 overflow-auto p-2">
+            <nav className="space-y-1.5">
+              {groups.map((group, index) => (
+                <a 
+                  key={group.id}
+                  href="#" 
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onSelectGroup?.(index);
+                  }}
+                  className={cn(
+                    "flex items-center gap-1 rounded-md px-3 py-2.5 text-sm font-medium transition-all hover:bg-accent/80 group",
+                    !isOpen && "md:justify-center",
+                    selectedGroupIndex === index && "bg-accent"
+                  )}
+                >
+                  <MessageSquareIcon 
+                    className={`h-5 w-5 flex-shrink-0 group-hover:opacity-80 text-${getRandomColor(index)}-500 group-hover:text-${getRandomColor(index)}-600`} 
+                  />
+                  <span className={cn(
+                    "transition-all duration-200 whitespace-nowrap overflow-hidden text-foreground/90",
+                    isOpen ? "opacity-100 max-w-full" : "opacity-0 max-w-0 md:max-w-0"
+                  )}>{group.name}</span>
+                </a>
+              ))}
+              
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <a 
+                      href="#" 
+                      className={cn(
+                        "flex items-center gap-1 rounded-md px-3 py-2.5 text-sm font-medium transition-all hover:bg-accent/80 group mt-3",
+                        !isOpen && "md:justify-center"
+                      )}
+                      onClick={(e) => {
+                        e.preventDefault();
+                      }}
+                    >
+                      <PlusCircleIcon className="h-5 w-5 flex-shrink-0 text-amber-500 group-hover:text-amber-600" />
+                      <span className={cn(
+                        "transition-all duration-200 whitespace-nowrap overflow-hidden text-foreground/90",
+                        isOpen ? "opacity-100 max-w-full" : "opacity-0 max-w-0 md:max-w-0"
+                      )}>创建新群聊</span>
+                    </a>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>即将开放,敬请期待</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </nav>
+          </div>
+          
+          {/* GitHub Star Button - 只在侧边栏打开时显示，放在底部 */}
+          <div className="p-3 mt-auto">
+            {/* 标题移至底部 */}
+            <div className="flex items-center justify-left mb-3">
+              <a href="/" className="flex items-center">
+                <span 
+                  style={{ fontFamily: 'Audiowide, system-ui', color: '#ff6600' }} 
+                  className={cn(
+                    "transition-all duration-200 whitespace-nowrap overflow-hidden",
+                    isOpen ? "text-lg" : "text-xs max-w-0 opacity-0 md:max-w-0"
+                  )}
+                >
+                  botgroup.chat
+                </span>
+              </a>
+            </div>
+            
+            {isOpen && (
+              <div className="flex items-center justify-left">
+                <GitHubButton 
+                  href="https://github.com/maojindao55/botgroup.chat"
+                  data-color-scheme="no-preference: light; light: light; dark: light;"
+                  data-size="large"
+                  data-show-count="true"
+                  aria-label="Star maojindao55/botgroup.chat on GitHub"
+                >
+                  Star
+                </GitHubButton>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      
+      {/* 移动设备上的遮罩层，点击时关闭侧边栏 */}
+      {isOpen && (
+        <div 
+          className="fixed inset-0 bg-black/50 z-10 md:hidden" 
+          onClick={toggleSidebar}
+        />
+      )}
+    </>
+  );
+};
+
+export default Sidebar; 

src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

src/components/ui/sidebar.tsx

@@ -0,0 +1,761 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import { Sheet, SheetContent } from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContext = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContext | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = React.useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden text-sidebar-foreground md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={cn(
+            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = "SidebarGroupAction"
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+))
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+))
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean
+    size?: "sm" | "md"
+    isActive?: boolean
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/config/aiCharacters.ts

@@ -54,7 +54,7 @@ export function shedulerAICharacter(message: string, allTags: string[]): AIChara
       id: 'ai0',
       name: "调度器",
       personality: "sheduler",
-      model: modelConfigs[6].model,
+      model: modelConfigs[5].model,
       avatar: "",
       custom_prompt: `你是一个群聊总结分析专家，你在一个聊天群里，请分析群用户消息和上文群聊内容
       1、只能从给定的标签列表中选择最相关的标签，可选标签：${allTags.join(', ')}。
@@ -150,7 +150,7 @@ export function generateAICharacters(groupName: string): AICharacter[] {
       model: modelConfigs[5].model,
       avatar: "/img/glm.gif",
       custom_prompt: `你是一个名叫"智谱"的硅基生命体，你当前在一个叫"${groupName}" 的聊天群里`,
-      tags: ["新闻报道","分析数据","文字游戏","信息总结", "聊天"]
+      tags: ["深度推理","数学","信息总结", "分析数据","文字游戏", "聊天"]
     }
   ];
 }

src/config/groups.ts

@@ -4,19 +4,22 @@ export interface Group {
   name: string;
   description: string;
   members: string[];
+  isGroupDiscussionMode: boolean;
 }
 
 export const groups: Group[] = [
   {
     id: 'group1',
-    name: '硅碳摸鱼交流群',
+    name: '硅碳生命体交流群',
-    description: '硅碳摸鱼交流群',
+    description: '',
-    members: ['ai1', 'ai2', 'ai3']
+    members: [ 'ai8', 'ai4', 'ai5', 'ai6', 'ai7'],
+    isGroupDiscussionMode: false
   },
   {
     id: 'group2',
-    name: '硅碳生命体交流群',
+    name: 'AI成语接龙游戏群',
-    description: '硅碳生命体交流群',
+    description: '可以适当打招呼问候自我介绍，但是本群主线是成语接龙游戏，请严格按照文字成语接龙规则，不能过度闲聊',
-    members: ['ai4', 'ai5', 'ai6', 'ai7', 'ai8']
+    isGroupDiscussionMode: true,
+    members: [ 'ai8', 'ai4', 'ai5', 'ai6', 'ai7'],
   }
 ];

src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

src/index.css

@@ -56,7 +56,23 @@
     --chart-5: 27 87% 67%;
 
     --radius: 0.5rem
-  }
+  ;
+
+    --sidebar-background: 0 0% 98%;
+
+    --sidebar-foreground: 240 5.3% 26.1%;
+
+    --sidebar-primary: 240 5.9% 10%;
+
+    --sidebar-primary-foreground: 0 0% 98%;
+
+    --sidebar-accent: 240 4.8% 95.9%;
+
+    --sidebar-accent-foreground: 240 5.9% 10%;
+
+    --sidebar-border: 220 13% 91%;
+
+    --sidebar-ring: 217.2 91.2% 59.8%}
   .dark {
 
     --background: 0 0% 3.9%;
@@ -106,7 +122,23 @@
     --chart-4: 280 65% 60%;
 
     --chart-5: 340 75% 55%
-  }
+  ;
+
+    --sidebar-background: 240 5.9% 10%;
+
+    --sidebar-foreground: 240 4.8% 95.9%;
+
+    --sidebar-primary: 224.3 76.3% 48%;
+
+    --sidebar-primary-foreground: 0 0% 100%;
+
+    --sidebar-accent: 240 3.7% 15.9%;
+
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+
+    --sidebar-border: 240 3.7% 15.9%;
+
+    --sidebar-ring: 217.2 91.2% 59.8%}
 }
 
 @layer base {

tailwind.config.js

@@ -49,6 +49,16 @@ module.exports = {
   				'3': 'hsl(var(--chart-3))',
   				'4': 'hsl(var(--chart-4))',
   				'5': 'hsl(var(--chart-5))'
+  			},
+  			sidebar: {
+  				DEFAULT: 'hsl(var(--sidebar-background))',
+  				foreground: 'hsl(var(--sidebar-foreground))',
+  				primary: 'hsl(var(--sidebar-primary))',
+  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+  				accent: 'hsl(var(--sidebar-accent))',
+  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+  				border: 'hsl(var(--sidebar-border))',
+  				ring: 'hsl(var(--sidebar-ring))'
   			}
   		}
   	}