00a5369fe1
Frontend: - Add Discord-style 3-column layout (server icons / channel sidebar / chat) - AI Studio design system: new CSS token palette (--room-* vars) - Replace all hardcoded Discord colors with CSS variable tokens - Add RoomSettingsPanel (name, visibility, AI model management) - Settings + Member list panels mutually exclusive (don't overlap) - AI models shown at top of member list with green accent - Fix TS errors: TipTap SuggestionOptions, unused imports, StarterKit options - Remove MentionInput, MentionPopover, old room components (废弃代码清理) Backend: - RoomAiResponse returns model_name from agents.model JOIN - room_ai_list and room_ai_upsert fetch model name for each config - AiConfigData ws-protocol interface updated with model_name Note: RoomSettingsPanel UI still uses shadcn defaults (未完全迁移到AI Studio)
90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
/**
|
|
* AI Studio design system — room-wide tokens.
|
|
* Clean, modern palette. No Discord reference.
|
|
*/
|
|
|
|
import { useTheme } from '@/contexts';
|
|
|
|
// ─── Palette ──────────────────────────────────────────────────────────────────
|
|
|
|
export const PALETTE = {
|
|
light: {
|
|
// Backgrounds
|
|
bg: '#ffffff',
|
|
bgSubtle: '#f9f9fa',
|
|
bgHover: '#f3f3f5',
|
|
bgActive: '#ebebef',
|
|
// Borders
|
|
border: '#e4e4e8',
|
|
borderFocus:'#1c7ded',
|
|
borderMuted:'#eeeeef',
|
|
// Text
|
|
text: '#1f1f1f',
|
|
textMuted: '#8a8a8f',
|
|
textSubtle: '#b8b8bd',
|
|
// Accent (primary action)
|
|
accent: '#1c7ded',
|
|
accentHover:'#1a73d4',
|
|
accentText: '#ffffff',
|
|
// Icon
|
|
icon: '#8a8a8f',
|
|
iconHover: '#5c5c62',
|
|
// Surfaces
|
|
surface: '#f7f7f8',
|
|
surface2: '#eeeeef',
|
|
// Status
|
|
online: '#22c55e',
|
|
away: '#f59e0b',
|
|
offline: '#d1d1d6',
|
|
// Mention highlight
|
|
mentionBg: 'rgba(28,125,237,0.08)',
|
|
mentionText:'#1c7ded',
|
|
// Message bubbles
|
|
msgBg: '#f9f9fb',
|
|
msgOwnBg: '#e8f0fe',
|
|
// Panel
|
|
panelBg: '#f5f5f7',
|
|
// Badges
|
|
badgeAi: 'bg-blue-50 text-blue-600',
|
|
badgeRole: 'bg-gray-100 text-gray-600',
|
|
},
|
|
dark: {
|
|
bg: '#1a1a1e',
|
|
bgSubtle: '#1e1e23',
|
|
bgHover: '#222228',
|
|
bgActive: '#2a2a30',
|
|
border: '#2e2e35',
|
|
borderFocus:'#4a9eff',
|
|
borderMuted:'#252528',
|
|
text: '#ececf1',
|
|
textMuted: '#8a8a92',
|
|
textSubtle: '#5c5c65',
|
|
accent: '#4a9eff',
|
|
accentHover:'#6aafff',
|
|
accentText: '#ffffff',
|
|
icon: '#7a7a84',
|
|
iconHover: '#b0b0ba',
|
|
surface: '#222228',
|
|
surface2: '#2a2a30',
|
|
online: '#34d399',
|
|
away: '#fbbf24',
|
|
offline: '#6b7280',
|
|
mentionBg: 'rgba(74,158,255,0.12)',
|
|
mentionText:'#4a9eff',
|
|
msgBg: '#1e1e23',
|
|
msgOwnBg: '#1a2a3a',
|
|
panelBg: '#161619',
|
|
badgeAi: 'bg-blue-900/40 text-blue-300',
|
|
badgeRole: 'bg-gray-800 text-gray-400',
|
|
},
|
|
} as const;
|
|
|
|
export type ThemePalette = typeof PALETTE.light;
|
|
|
|
// ─── Hook ────────────────────────────────────────────────────────────────────
|
|
|
|
export function useAIPalette() {
|
|
const { resolvedTheme } = useTheme();
|
|
return resolvedTheme === 'dark' ? PALETTE.dark : PALETTE.light;
|
|
}
|