- {/* Header */}
-
-
- {/* 左侧群组信息 */}
-
-
-
- {users.length === 1 ? (
-
- {users.slice(0, 2).map((user, index) => (
-
- ) : users.length === 3 ? (
-
-
- ) : (
-
- {users.slice(0, 2).map((user, index) => (
-
-
-
-
- {users.slice(0, 4).map((user, index) => (
-
+ {/* 传递 selectedGroupIndex 和 onSelectGroup 回调给 Sidebar */}
+
+ {/* Header */}
+
+
+ {/* 左侧群组信息 */}
+
-
- {/* 右侧头像组和按钮 */}
-
+
+
+ {/* 右侧头像组和按钮 */}
+
+
+
+ {group.name}({users.length})
+
+
-
+ {users.slice(0, 4).map((user) => {
+ const avatarData = getAvatarData(user.name);
+ return (
+
+
+
+
+ {'avatar' in user && user.avatar ? (
+
+ {avatarData.text}
+
+ )}
+
+
+
+
+
+
+ );
+ })}
+ {users.length > 4 && (
+
-
- {user.name}
+
+ +{users.length - 4}
)}
-
{group.name}
-{users.length} 名成员
+
-
- {users.slice(0, 4).map((user) => {
- const avatarData = getAvatarData(user.name);
- return (
-
-
-
-
- {'avatar' in user && user.avatar ? (
-
- {avatarData.text}
-
- )}
-
-
-
-
-
-
- );
- })}
- {users.length > 4 && (
- ,
+ React.ComponentPropsWithoutRef
+>(
+ (
+ { className, orientation = "horizontal", decorative = true, ...props },
+ ref
+ ) => (
+ (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(
+ () => ({
+ state,
+ open,
+ setOpen,
+ isMobile,
+ openMobile,
+ setOpenMobile,
+ toggleSidebar,
+ }),
+ [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+ )
+
+ return (
+
+
+
+
+ )
+ }
+)
+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 (
+
+
+
+
+ )
+ }
+
+ return (
+ ,
+ React.ComponentProps
+>(({ className, onClick, ...props }, ref) => {
+ const { toggleSidebar } = useSidebar()
+
+ return (
+
+ )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+ const { toggleSidebar } = useSidebar()
+
+ return (
+
+ )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+ return (
+
+ )
+})
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+ React.ElementRef,
+ React.ComponentProps
+>(({ className, ...props }, ref) => {
+ return (
+
+ )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+ return (
+
+ )
+})
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+ return (
+
+ )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentProps
+>(({ className, ...props }, ref) => {
+ return (
+ 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 (
+ 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) => (
+
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+ HTMLUListElement,
+ React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+
+ } & VariantProps
+>(
+ (
+ {
+ asChild = false,
+ isActive = false,
+ variant = "default",
+ size = "default",
+ tooltip,
+ className,
+ ...props
+ },
+ ref
+ ) => {
+ const Comp = asChild ? Slot : "button"
+ const { isMobile, state } = useSidebar()
+
+ const button = (
+
+ {button}
+
+ )
+ }
+)
+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 (
+ 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) => (
+
+))
+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 (
+ 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,
+}
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..d7e45f7
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ )
+}
+
+export { Skeleton }
diff --git a/src/config/aiCharacters.ts b/src/config/aiCharacters.ts
index 74b0184..1fbe486 100644
--- a/src/config/aiCharacters.ts
+++ b/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: ["深度推理","数学","信息总结", "分析数据","文字游戏", "聊天"]
}
];
}
diff --git a/src/config/groups.ts b/src/config/groups.ts
index b9c0d89..925de8d 100644
--- a/src/config/groups.ts
+++ b/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: '硅碳摸鱼交流群',
- description: '硅碳摸鱼交流群',
- members: ['ai1', 'ai2', 'ai3']
+ name: '硅碳生命体交流群',
+ description: '',
+ members: [ 'ai8', 'ai4', 'ai5', 'ai6', 'ai7'],
+ isGroupDiscussionMode: false
},
{
id: 'group2',
- name: '硅碳生命体交流群',
- description: '硅碳生命体交流群',
- members: ['ai4', 'ai5', 'ai6', 'ai7', 'ai8']
+ name: 'AI成语接龙游戏群',
+ description: '可以适当打招呼问候自我介绍，但是本群主线是成语接龙游戏，请严格按照文字成语接龙规则，不能过度闲聊',
+ isGroupDiscussionMode: true,
+ members: [ 'ai8', 'ai4', 'ai5', 'ai6', 'ai7'],
}
];
diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/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(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
+}
diff --git a/src/index.css b/src/index.css
index de4587f..2a5b1ac 100644
--- a/src/index.css
+++ b/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 {
diff --git a/tailwind.config.js b/tailwind.config.js
index 02f400e..609087a 100644
--- a/tailwind.config.js
+++ b/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))'
}
}
}
{user.name}
-
- +{users.length - 4}
+
+
+ {/* Main Chat Area */}
+
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index e714782..c417600 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -4,10 +4,11 @@ import Header from './Header';
const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return (
+
+
+
+
+ {/* Input Area */}
+
+ {messages.map((message) => (
+
-
+ {message.sender.name !== "我" && (
+
+ {'avatar' in message.sender && message.sender.avatar ? (
+
+ {message.sender.name[0]}
+
+ )}
+
+ )}
+
+ {'avatar' in message.sender && message.sender.avatar ? (
+
+ {message.sender.name[0]}
+
+ )}
+
+ )}
- )}
+ ))}
+
+ {/* 添加一个二维码 */}
+
+
+ {message.sender.name === "我" && (
+ {message.sender.name}
+
+
+ {message.content}
+
+ {message.isAI && isTyping && currentMessageRef.current === message.id && (
+ ▋
+ )}
+
+
+ 
+
+ 扫码体验AI群聊
+
+
-
-
- {/* Main Chat Area */}
-
+ {messages.length > 0 && (
+
+
+
+
+
+
+
+
+
+ )}
+ setInputMessage(e.target.value)}
+ onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
+ />
+
分享聊天记录
+
-
-
-
-
- {/* Input Area */}
-
- {messages.map((message) => (
-
-
- {message.sender.name !== "我" && (
-
- {'avatar' in message.sender && message.sender.avatar ? (
-
- {message.sender.name[0]}
-
- )}
-
- )}
-
- {'avatar' in message.sender && message.sender.avatar ? (
-
- {message.sender.name[0]}
-
- )}
-
- )}
-
- ))}
-
- {/* 添加一个二维码 */}
-
-
- {message.sender.name === "我" && (
- {message.sender.name}
-
-
- {message.content}
-
- {message.isAI && isTyping && currentMessageRef.current === message.id && (
- ▋
- )}
-
-
-
-
-
- 扫码体验AI群聊
-
-
- {messages.length > 0 && (
-
-
-
-
-
-
-
-
-
- )}
- setInputMessage(e.target.value)}
- onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
- />
-
-
分享聊天记录
-
-
- {children}
-
+
);
};
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..b960def
--- /dev/null
+++ b/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 (
+ <>
+ {/* 侧边栏 - 在移动设备上可以隐藏，在桌面上始终显示 */}
+
+
+ {children}
+
+
+
+
+ {/* 移动设备上的遮罩层，点击时关闭侧边栏 */}
+ {isOpen && (
+
+ )}
+
+ );
+};
+
+export default Sidebar;
\ No newline at end of file
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..6d7f122
--- /dev/null
+++ b/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
+
+
+
+
+
+
+ 群列表
+
+
+
+
+
+
+
+ {/* GitHub Star Button - 只在侧边栏打开时显示，放在底部 */}
+
+ {/* 标题移至底部 */}
+
+
+ {isOpen && (
+
+
+
+ Star
+
+
+ )}
+
+ {children}
+
+
+ {children}
+
+ )
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ )
+ }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+ React.ElementRef
+
+
+ {children}
+
+
+ {showIcon && (
+
+ )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+ HTMLUListElement,
+ React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+