Files
openchamber/packages/ui/src/components/chat/ChatEmptyState.tsx
T
Bohdan Triapitsyn ddedc02687 feat: introduced a token-based theming system across the UI
* feat: added themes system

* feat: smart sidebar auto-hide for files/diff tabs + lower files sidebar threshold

* feat: added Checkbox component and update theming

- Add reusable Checkbox component for toggles across UI
- Replace several inputs with Checkbox in settings and commands panels
- Add DiffIcon and apply surface/border theming to key UI areas

* feat: Add convert-vscode-theme.cjs to convert VS Code themes to OpenChamber format

* refactor: remove unused permission logic from ChatInput

- Remove unused permission rules parsing logic from ChatInput
- Memoize renderTheme in DiffWorkerProvider to avoid unnecessary recalculations
- Remove forceOpaque helper in vscode theme adapter

* fix: guard VSCode theme loading in MarkdownRenderer

* feat: add custom user themes loading and reload

- Load user themes from ~/.config/openchamber/themes at runtime
- Expose /api/config/themes to fetch custom themes
- Allow theme reloading from Settings → Theme → Reload themes in the UI
2026-02-01 18:29:34 +02:00

49 lines
1.5 KiB
TypeScript

import React from 'react';
import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo';
import { TextLoop } from '@/components/ui/TextLoop';
import { useThemeSystem } from '@/contexts/useThemeSystem';
const phrases = [
"Fix the failing tests",
"Refactor this to be more readable",
"Add form validation",
"Optimize this function",
"Write tests for this",
"Explain how this works",
"Add a new feature",
"Help me debug this",
"Review my code",
"Simplify this logic",
"Add error handling",
"Create a new component",
"Update the documentation",
"Find the bug here",
"Improve performance",
"Add type definitions",
];
const ChatEmptyState: React.FC = () => {
const { currentTheme } = useThemeSystem();
// Use theme's muted foreground for secondary text
const textColor = currentTheme?.colors?.surface?.mutedForeground || 'var(--muted-foreground)';
return (
<div className="flex flex-col items-center justify-center min-h-full w-full gap-6">
<OpenChamberLogo width={140} height={140} className="opacity-20" isAnimated />
<TextLoop
className="text-body-md"
interval={4}
transition={{ duration: 0.5 }}
>
{phrases.map((phrase) => (
<span key={phrase} style={{ color: textColor }}>"{phrase}…"</span>
))}
</TextLoop>
</div>
);
};
export default React.memo(ChatEmptyState);