admin/DataClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add light/dark display switch mode

Browse Source
This commit is contained in:
qixinbo
2026-03-28 16:25:35 +08:00
parent bd731660ac
commit 27270063f7
21 changed files with 449 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ChatInterface.tsx
+76 -76
View File
@@ -545,19 +545,19 @@ export function ChatInterface() {
if (!file) return null;
return (
<div className="px-2 pt-2">
<div className="p-2.5 bg-white border border-zinc-100 rounded-2xl flex items-center gap-3 relative group/file shadow-sm max-w-[280px]">
<div className="p-2.5 bg-background border border-border rounded-2xl flex items-center gap-3 relative group/file shadow-sm max-w-[280px]">
<div className="h-10 w-10 bg-emerald-600 rounded-xl flex items-center justify-center shrink-0">
<Table className="h-6 w-6 text-white" />
<Table className="h-6 w-6 text-primary-foreground" />
</div>
<div className="flex-1 min-w-0 pr-6">
<div className="text-sm font-bold text-zinc-900 truncate">{file.filename}</div>
<div className="text-xs text-zinc-500">{t('spreadsheet')}</div>
<div className="text-sm font-bold text-foreground truncate">{file.filename}</div>
<div className="text-xs text-muted-foreground">{t('spreadsheet')}</div>
</div>
<button
onClick={handleRemoveFile}
className="absolute top-1.5 right-1.5 h-5 w-5 rounded-full flex items-center justify-center transition-colors group/close"
>
<XCircle className="h-5 w-5 fill-zinc-900 text-white" />
<XCircle className="h-5 w-5 fill-zinc-900 text-primary-foreground" />
</button>
</div>
</div>
@@ -892,15 +892,15 @@ export function ChatInterface() {
};
return (
<div className="flex flex-col h-full bg-white relative">
<div className="flex flex-col h-full bg-background relative">
{/* Header with Model Selection */}
<div className="px-4 py-3 flex items-center justify-between border-b border-zinc-100 bg-white/50 backdrop-blur-md sticky top-0 z-20">
<div className="px-4 py-3 flex items-center justify-between border-b border-border bg-background/50 backdrop-blur-md sticky top-0 z-20">
<Popover open={modelOpen} onOpenChange={setModelOpen}>
<PopoverTrigger className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-zinc-100 transition-colors group">
<span className="font-semibold text-zinc-900">
<PopoverTrigger className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors group">
<span className="font-semibold text-foreground">
{selectedModelId ? models.find(m => m.id === selectedModelId)?.name || 'DataClaw' : 'DataClaw'}
</span>
<ChevronDown className="h-4 w-4 text-zinc-400 group-hover:text-zinc-600 transition-colors" />
<ChevronDown className="h-4 w-4 text-muted-foreground group-hover:text-muted-foreground transition-colors" />
</PopoverTrigger>
<PopoverContent className="w-[280px] p-0" align="start">
<Command>
@@ -918,8 +918,8 @@ export function ChatInterface() {
className="flex items-center gap-2 py-2.5 cursor-pointer"
>
<div className="flex flex-col">
<span className="font-medium text-zinc-900">{model.name || model.model}</span>
<span className="text-xs text-zinc-400">{model.provider}</span>
<span className="font-medium text-foreground">{model.name || model.model}</span>
<span className="text-xs text-muted-foreground">{model.provider}</span>
</div>
<Check
className={cn(
@@ -961,20 +961,20 @@ export function ChatInterface() {
{/* Input Area */}
<div className="w-full max-w-4xl px-4">
<div className="relative group">
<div className="flex flex-col bg-white rounded-[26px] border border-zinc-200 shadow-[0_2px_12px_rgba(0,0,0,0.04)] transition-all duration-200">
<div className="flex flex-col bg-background rounded-[26px] border border-border shadow-[0_2px_12px_rgba(0,0,0,0.04)] transition-all duration-200">
{renderFileCard()}
{renderActiveSelections()}
<div className="flex items-center pl-2 pr-2 py-2">
<div className="flex items-center">
<Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
<PopoverTrigger className="flex items-center justify-center h-9 w-9 rounded-full hover:bg-zinc-100 transition-colors text-zinc-500">
<PopoverTrigger className="flex items-center justify-center h-9 w-9 rounded-full hover:bg-muted transition-colors text-muted-foreground">
<Plus className="h-5 w-5" />
</PopoverTrigger>
<PopoverContent side="bottom" align="start" className="w-[480px] p-0 mt-2 overflow-hidden rounded-2xl border-zinc-200 shadow-xl">
<PopoverContent side="bottom" align="start" className="w-[480px] p-0 mt-2 overflow-hidden rounded-2xl border-border shadow-xl">
<div className="flex divide-x divide-zinc-100">
{/* Left Column: Data Source */}
<div className="flex-1 p-3 bg-zinc-50/50">
<div className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<div className="flex-1 p-3 bg-muted/50/50">
<div className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<Database className="h-3 w-3" />
{t('dataSource')}
</div>
@@ -988,24 +988,24 @@ export function ChatInterface() {
className={cn(
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
selectedDataSource === ds.id
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200"
: "text-zinc-600 hover:bg-white hover:shadow-sm"
? "bg-background text-foreground shadow-sm ring-1 ring-border"
: "text-muted-foreground hover:bg-background hover:shadow-sm"
)}
>
<div className="flex items-center gap-2.5">
<Database className={cn("h-4 w-4", selectedDataSource === ds.id ? "text-blue-500" : "text-zinc-400")} />
<Database className={cn("h-4 w-4", selectedDataSource === ds.id ? "text-blue-500" : "text-muted-foreground")} />
<span className="font-medium">{ds.name}</span>
</div>
{selectedDataSource === ds.id && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
</button>
))}
{selectedDataSource && (
<div className="mt-2 pt-2 border-t border-zinc-100">
<div className="mt-2 pt-2 border-t border-border">
<button
onClick={() => {
void handleClearDataSource();
}}
className="w-full py-1.5 text-[11px] text-zinc-400 hover:text-zinc-600 transition-colors flex items-center justify-center gap-1"
className="w-full py-1.5 text-[11px] text-muted-foreground hover:text-muted-foreground transition-colors flex items-center justify-center gap-1"
>
{t('clearSelected')}
</button>
@@ -1015,8 +1015,8 @@ export function ChatInterface() {
</div>
{/* Right Column: Skills */}
<div className="flex-1 p-3 bg-white">
<div className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<div className="flex-1 p-3 bg-background">
<div className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<Wand2 className="h-3 w-3" />
Skills
</div>
@@ -1037,8 +1037,8 @@ export function ChatInterface() {
className={cn(
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
isSelected
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200"
: "text-zinc-600 hover:bg-white hover:shadow-sm"
? "bg-background text-foreground shadow-sm ring-1 ring-border"
: "text-muted-foreground hover:bg-background hover:shadow-sm"
)}
>
<div className="flex items-center text-left">
@@ -1051,15 +1051,15 @@ export function ChatInterface() {
) : (
<div className="px-3 py-8 text-center">
<Zap className="h-8 w-8 text-zinc-100 mx-auto mb-2" />
<p className="text-xs text-zinc-400">{t('noAvailableSkills')}</p>
<p className="text-xs text-muted-foreground">{t('noAvailableSkills')}</p>
</div>
)}
</div>
{selectedSkillIds.length > 0 && (
<div className="mt-2 pt-2 border-t border-zinc-100">
<div className="mt-2 pt-2 border-t border-border">
<button
onClick={() => setSelectedSkillIds([])}
className="w-full py-1.5 text-[11px] text-zinc-400 hover:text-zinc-600 transition-colors flex items-center justify-center gap-1"
className="w-full py-1.5 text-[11px] text-muted-foreground hover:text-muted-foreground transition-colors flex items-center justify-center gap-1"
>
{t('clearSelectedWithCount', { count: selectedSkillIds.length })}
</button>
@@ -1077,7 +1077,7 @@ export function ChatInterface() {
onChange={handleInputChange}
onKeyDown={handleInputKeyDown}
placeholder={t('askAnything')}
className="flex-1 bg-transparent border-none focus:ring-0 text-lg px-3 py-2 text-zinc-900 placeholder:text-zinc-300 outline-none"
className="flex-1 bg-transparent border-none focus:ring-0 text-lg px-3 py-2 text-foreground placeholder:text-muted-foreground/50 outline-none"
disabled={isLoading}
/>
<SlashCommandMenu
@@ -1095,8 +1095,8 @@ export function ChatInterface() {
className={cn(
"flex items-center justify-center h-10 w-10 rounded-full transition-all duration-200",
(input.trim() || attachedFile || activeDataFile) && !isLoading
? "bg-zinc-900 text-white hover:bg-zinc-800 shadow-sm"
: "bg-zinc-100 text-zinc-300"
? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm"
: "bg-muted text-muted-foreground/50"
)}
>
{isLoading ? (
@@ -1141,18 +1141,18 @@ export function ChatInterface() {
<div
className={`rounded-2xl px-5 py-3.5 text-[15px] leading-relaxed max-w-[85%] shadow-sm ${
msg.role === "user"
? "bg-zinc-100 text-zinc-800"
: "bg-white border border-zinc-100 text-zinc-700 overflow-hidden"
? "bg-muted text-foreground/90"
: "bg-background border border-border text-foreground/80 overflow-hidden"
}`}
>
{msg.role === "assistant" ? (
<>
{displayedThinkingContent && (
<div className="mb-3 rounded-xl border border-zinc-200 bg-zinc-50/50 p-3 text-sm text-zinc-600 font-mono whitespace-pre-wrap leading-relaxed shadow-inner">
<div className="mb-3 rounded-xl border border-border bg-muted/50/50 p-3 text-sm text-muted-foreground font-mono whitespace-pre-wrap leading-relaxed shadow-inner">
<button
type="button"
onClick={() => toggleThinkingCollapsed(msg.id)}
className="w-full flex items-center justify-between gap-2 mb-2 text-xs font-semibold text-zinc-500 uppercase tracking-wider hover:text-zinc-700 transition-colors"
className="w-full flex items-center justify-between gap-2 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider hover:text-foreground/80 transition-colors"
>
<span className="flex items-center gap-2">
<Settings className={`h-3.5 w-3.5 ${msg.awaitingFirstToken ? 'animate-spin' : ''}`} />
@@ -1178,7 +1178,7 @@ export function ChatInterface() {
void copyThinkingContent(msg.id, displayedThinkingContent);
}
}}
className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 hover:bg-zinc-200/70 transition-colors"
className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 hover:bg-muted/80/70 transition-colors"
>
{thinkingCopiedByMessage[msg.id] ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
<span>{thinkingCopiedByMessage[msg.id] ? t('copied') : t('copy')}</span>
@@ -1197,8 +1197,8 @@ export function ChatInterface() {
</div>
)}
{msg.progressLogs && msg.progressLogs.length > 0 ? (
<div className="mb-2 rounded-xl border border-zinc-100 bg-zinc-50/70 px-3 py-2">
<div className="flex items-center gap-2 text-zinc-500 text-xs mb-1.5 pb-1.5 border-b border-zinc-100/50">
<div className="mb-2 rounded-xl border border-border bg-muted/50/70 px-3 py-2">
<div className="flex items-center gap-2 text-muted-foreground text-xs mb-1.5 pb-1.5 border-b border-border/50">
{isMessageGenerating ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />}
<span>{isMessageGenerating ? t('processing') : t('processCompleted')}</span>
</div>
@@ -1215,7 +1215,7 @@ export function ChatInterface() {
// 只有当是整个会话的最后一条消息，且当前日志是最后一条时，才显示 loading 动画
const isLoadingLog = isLast && isMessageGenerating;
return (
<div key={`${msg.id}-log-${idx}`} className="flex items-start gap-2 text-[12px] text-zinc-500 leading-5">
<div key={`${msg.id}-log-${idx}`} className="flex items-start gap-2 text-[12px] text-muted-foreground leading-5">
{isLoadingLog ? (
<Settings className="mt-0.5 h-3.5 w-3.5 text-amber-500 animate-spin shrink-0" />
) : (
@@ -1229,26 +1229,26 @@ export function ChatInterface() {
</div>
) : null}
{msg.awaitingFirstToken && !msg.content ? (
<div className="flex items-center gap-2 text-zinc-500 text-sm py-1">
<div className="flex items-center gap-2 text-muted-foreground text-sm py-1">
<Loader2 className="h-4 w-4 animate-spin" />
<span>{t('modelThinking')}</span>
</div>
) : (
<>
{markdown ? (
<div className="prose prose-sm prose-zinc max-w-none prose-p:leading-normal prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-li:my-0.5 prose-pre:bg-zinc-50 prose-pre:text-zinc-800 prose-pre:border prose-pre:border-zinc-200">
<div className="prose prose-sm prose-zinc dark:prose-invert max-w-none prose-p:leading-normal prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-li:my-0.5 prose-pre:bg-muted/50 prose-pre:text-foreground/90 prose-pre:border prose-pre:border-border">
<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
{markdown}
</ReactMarkdown>
</div>
) : null}
{reportHtml ? (
<div className="mt-3 rounded-xl border border-zinc-200 overflow-hidden bg-white">
<div className="mt-3 rounded-xl border border-border overflow-hidden bg-background">
<iframe
title={`report-${msg.id}`}
srcDoc={reportHtml}
sandbox="allow-same-origin allow-scripts"
className="w-full h-[620px] bg-white"
className="w-full h-[620px] bg-background"
onLoad={(e) => {
try {
const doc = (e.target as HTMLIFrameElement).contentDocument;
@@ -1280,21 +1280,21 @@ export function ChatInterface() {
{msg.artifacts && msg.artifacts.length > 0 ? (
<div className="mt-4 grid gap-2 sm:grid-cols-2">
{msg.artifacts.map((artifact, artifactIndex) => (
<div key={`${msg.id}-artifact-${artifactIndex}`} className="rounded-xl border border-zinc-200 bg-zinc-50/60 px-3 py-2.5">
<div key={`${msg.id}-artifact-${artifactIndex}`} className="rounded-xl border border-border bg-muted/50/60 px-3 py-2.5">
<div className="flex items-center gap-2.5">
<div className="h-8 w-8 rounded-lg bg-white border border-zinc-200 flex items-center justify-center text-zinc-500 shrink-0">
<div className="h-8 w-8 rounded-lg bg-background border border-border flex items-center justify-center text-muted-foreground shrink-0">
<FileText className="h-4 w-4" />
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium text-zinc-800 truncate">{artifact.name}</div>
<div className="text-[11px] text-zinc-500">{formatArtifactSize(artifact.size)}</div>
<div className="text-sm font-medium text-foreground/90 truncate">{artifact.name}</div>
<div className="text-[11px] text-muted-foreground">{formatArtifactSize(artifact.size)}</div>
</div>
</div>
<div className="mt-2 flex items-center gap-2">
{artifact.previewable && artifact.preview_url ? (
<button
onClick={() => setArtifactPreview({ name: artifact.name, mimeType: artifact.mime_type, previewUrl: artifact.preview_url || "" })}
className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-zinc-300 text-zinc-700 hover:bg-white transition-colors"
className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-border text-foreground/80 hover:bg-background transition-colors"
>
<Eye className="h-3.5 w-3.5" />
{t('preview')}
@@ -1304,7 +1304,7 @@ export function ChatInterface() {
href={artifact.download_url}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-zinc-300 text-zinc-700 hover:bg-white transition-colors"
className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-border text-foreground/80 hover:bg-background transition-colors"
>
<Download className="h-3.5 w-3.5" />
{t('download')}
@@ -1315,7 +1315,7 @@ export function ChatInterface() {
</div>
) : null}
{msg.viz ? (
<div className="mt-3 pt-3 border-t border-zinc-100">
<div className="mt-3 pt-3 border-t border-border">
<InlineVisualizationCard viz={msg.viz} />
</div>
) : null}
@@ -1327,7 +1327,7 @@ export function ChatInterface() {
)}
</div>
{msg.role === "user" && (
<div className="w-8 h-8 rounded-full bg-zinc-200 flex items-center justify-center text-zinc-500 shrink-0 mt-1">
<div className="w-8 h-8 rounded-full bg-muted/80 flex items-center justify-center text-muted-foreground shrink-0 mt-1">
<User className="h-4 w-4" />
</div>
)}
@@ -1341,22 +1341,22 @@ export function ChatInterface() {
{/* Floating Input for Chat State */}
{messages.length > 0 && (
<div className="px-4 pb-6 pt-3 border-t border-zinc-100 bg-white">
<div className="px-4 pb-6 pt-3 border-t border-border bg-background">
<div className="relative group max-w-4xl mx-auto">
<div className="flex flex-col bg-white rounded-[26px] border border-zinc-200 shadow-[0_2px_12px_rgba(0,0,0,0.04)] transition-all duration-200">
<div className="flex flex-col bg-background rounded-[26px] border border-border shadow-[0_2px_12px_rgba(0,0,0,0.04)] transition-all duration-200">
{renderFileCard()}
{renderActiveSelections()}
<div className="flex items-center pl-2 pr-2 py-2">
<div className="flex items-center">
<Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
<PopoverTrigger className="flex items-center justify-center h-9 w-9 rounded-full hover:bg-zinc-100 transition-colors text-zinc-500">
<PopoverTrigger className="flex items-center justify-center h-9 w-9 rounded-full hover:bg-muted transition-colors text-muted-foreground">
<Plus className="h-5 w-5" />
</PopoverTrigger>
<PopoverContent side="top" align="start" className="w-[480px] p-0 mb-2 overflow-hidden rounded-2xl border-zinc-200 shadow-xl">
<PopoverContent side="top" align="start" className="w-[480px] p-0 mb-2 overflow-hidden rounded-2xl border-border shadow-xl">
<div className="flex divide-x divide-zinc-100">
{/* Left Column: Data Source */}
<div className="flex-1 p-3 bg-zinc-50/50">
<div className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<div className="flex-1 p-3 bg-muted/50/50">
<div className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<Database className="h-3 w-3" />
{t('dataSource')}
</div>
@@ -1370,24 +1370,24 @@ export function ChatInterface() {
className={cn(
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
selectedDataSource === ds.id
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200"
: "text-zinc-600 hover:bg-white hover:shadow-sm"
? "bg-background text-foreground shadow-sm ring-1 ring-border"
: "text-muted-foreground hover:bg-background hover:shadow-sm"
)}
>
<div className="flex items-center gap-2.5">
<Database className={cn("h-4 w-4", selectedDataSource === ds.id ? "text-blue-500" : "text-zinc-400")} />
<Database className={cn("h-4 w-4", selectedDataSource === ds.id ? "text-blue-500" : "text-muted-foreground")} />
<span className="font-medium">{ds.name}</span>
</div>
{selectedDataSource === ds.id && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
</button>
))}
{selectedDataSource && (
<div className="mt-2 pt-2 border-t border-zinc-100">
<div className="mt-2 pt-2 border-t border-border">
<button
onClick={() => {
void handleClearDataSource();
}}
className="w-full py-1.5 text-[11px] text-zinc-400 hover:text-zinc-600 transition-colors flex items-center justify-center gap-1"
className="w-full py-1.5 text-[11px] text-muted-foreground hover:text-muted-foreground transition-colors flex items-center justify-center gap-1"
>
{t('clearSelected')}
</button>
@@ -1397,8 +1397,8 @@ export function ChatInterface() {
</div>
{/* Right Column: Skills */}
<div className="flex-1 p-3 bg-white">
<div className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<div className="flex-1 p-3 bg-background">
<div className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<Wand2 className="h-3 w-3" />
Skills
</div>
@@ -1419,8 +1419,8 @@ export function ChatInterface() {
className={cn(
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
isSelected
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200"
: "text-zinc-600 hover:bg-white hover:shadow-sm"
? "bg-background text-foreground shadow-sm ring-1 ring-border"
: "text-muted-foreground hover:bg-background hover:shadow-sm"
)}
>
<div className="flex items-center text-left">
@@ -1433,15 +1433,15 @@ export function ChatInterface() {
) : (
<div className="px-3 py-8 text-center">
<Zap className="h-8 w-8 text-zinc-100 mx-auto mb-2" />
<p className="text-xs text-zinc-400">{t('noAvailableSkills')}</p>
<p className="text-xs text-muted-foreground">{t('noAvailableSkills')}</p>
</div>
)}
</div>
{selectedSkillIds.length > 0 && (
<div className="mt-2 pt-2 border-t border-zinc-100">
<div className="mt-2 pt-2 border-t border-border">
<button
onClick={() => setSelectedSkillIds([])}
className="w-full py-1.5 text-[11px] text-zinc-400 hover:text-zinc-600 transition-colors flex items-center justify-center gap-1"
className="w-full py-1.5 text-[11px] text-muted-foreground hover:text-muted-foreground transition-colors flex items-center justify-center gap-1"
>
{t('clearSelectedWithCount', { count: selectedSkillIds.length })}
</button>
@@ -1459,7 +1459,7 @@ export function ChatInterface() {
onChange={handleInputChange}
onKeyDown={handleInputKeyDown}
placeholder={t('askAnything')}
className="flex-1 bg-transparent border-none focus:ring-0 text-lg px-3 py-2 text-zinc-900 placeholder:text-zinc-300 outline-none"
className="flex-1 bg-transparent border-none focus:ring-0 text-lg px-3 py-2 text-foreground placeholder:text-muted-foreground/50 outline-none"
disabled={isLoading}
/>
<SlashCommandMenu
@@ -1477,8 +1477,8 @@ export function ChatInterface() {
className={cn(
"flex items-center justify-center h-10 w-10 rounded-full transition-all duration-200",
(input.trim() || isLoading)
? (isLoading ? "bg-red-600 text-white hover:bg-red-700" : "bg-zinc-900 text-white hover:bg-zinc-800")
: "bg-zinc-100 text-zinc-300"
? (isLoading ? "bg-red-600 text-primary-foreground hover:bg-red-700" : "bg-primary text-primary-foreground hover:bg-primary/90")
: "bg-muted text-muted-foreground/50"
)}
>
{isLoading ? (
@@ -1491,7 +1491,7 @@ export function ChatInterface() {
</div>
</div>
<div className="mt-2 flex justify-center">
<p className="text-[11px] text-zinc-400">
<p className="text-[11px] text-muted-foreground">
{t('dataClawDisclaimer')}
</p>
</div>
@@ -1505,12 +1505,12 @@ export function ChatInterface() {
<DialogHeader>
<DialogTitle>{artifactPreview?.name || t('artifactPreview')}</DialogTitle>
</DialogHeader>
<div className="flex-1 min-h-0 rounded-lg border border-zinc-200 bg-white overflow-hidden">
<div className="flex-1 min-h-0 rounded-lg border border-border bg-background overflow-hidden">
{artifactPreview?.mimeType.startsWith("image/") ? (
<img
src={artifactPreview.previewUrl}
alt={artifactPreview.name}
className="w-full h-full object-contain bg-zinc-50"
className="w-full h-full object-contain bg-muted/50"
/>
) : artifactPreview ? (
<iframe
frontend/src/components/DataSourceForm.tsx
+7 -7
View File
@@ -142,7 +142,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
placeholder="••••••"
/>
</div>
<div className="text-xs text-zinc-500 pt-2">
<div className="text-xs text-muted-foreground pt-2">
{t('orUseSupabaseConnectionString')}
</div>
<div className="space-y-2">
@@ -207,7 +207,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
placeholder="••••••"
/>
</div>
<div className="text-xs text-zinc-500 pt-2">
<div className="text-xs text-muted-foreground pt-2">
{t('orUseConnectionString')}
</div>
<div className="space-y-2">
@@ -294,7 +294,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
onChange={handleFileUpload}
/>
</div>
<p className="text-xs text-zinc-500">{t('uploadFileOrEnterPath')}</p>
<p className="text-xs text-muted-foreground">{t('uploadFileOrEnterPath')}</p>
</div>
</div>
);
@@ -302,8 +302,8 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
return (
<div className="flex flex-col items-center justify-center py-8 text-center">
<AlertTriangle className="h-10 w-10 text-amber-500 mb-3" />
<h3 className="font-medium text-zinc-900">{t('unsupportedDataSourceType')}</h3>
<p className="text-sm text-zinc-500 mt-1 max-w-[300px]">
<h3 className="font-medium text-foreground">{t('unsupportedDataSourceType')}</h3>
<p className="text-sm text-muted-foreground mt-1 max-w-[300px]">
{t('dataSourceConnectorInDevelopment')}
</p>
</div>
@@ -327,7 +327,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
<div className="space-y-2">
<label className="text-sm font-medium">{t('type')}</label>
<select
className="w-full h-10 px-3 rounded-md border border-zinc-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:border-transparent"
className="w-full h-10 px-3 rounded-md border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
value={type}
onChange={e => setType(e.target.value)}
>
@@ -342,7 +342,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
</div>
)}
<div className="p-4 border border-zinc-200 rounded-lg bg-zinc-50/50">
<div className="p-4 border border-border rounded-lg bg-muted/50/50">
{renderConfigFields()}
</div>
frontend/src/components/InlineVisualizationCard.tsx
+6 -6
View File
@@ -101,13 +101,13 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
}
return (
<Card className="w-full border border-zinc-100 shadow-none">
<Card className="w-full border border-border shadow-none">
<CardHeader className="pb-2">
<CardTitle className="text-base">{viz.chartSpec?.title || t('visualizationResult')}</CardTitle>
</CardHeader>
<CardContent className="pt-0">
<div className="flex items-center justify-between mb-3">
<div className="flex bg-zinc-100 rounded-md p-1">
<div className="flex bg-muted rounded-md p-1">
<Button
variant={view === "table" ? "secondary" : "ghost"}
size="sm"
@@ -158,7 +158,7 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
)}
</Button>
</DialogHeader>
<div className="relative rounded-md overflow-hidden bg-[#1e1e1e] border border-zinc-200 shadow-inner mt-2">
<div className="relative rounded-md overflow-hidden bg-[#1e1e1e] border border-border shadow-inner mt-2">
<ScrollArea className="max-h-[500px]">
<SyntaxHighlighter
language="sql"
@@ -188,11 +188,11 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
{view === "chart" ? (
viz.chartSpec && objectRows.length > 0 ? (
<div className="w-full h-80 min-h-[320px] rounded-xl border border-zinc-100 p-2">
<div className="w-full h-80 min-h-[320px] rounded-xl border border-border p-2">
<VegaChart data={objectRows} spec={viz.chartSpec} />
</div>
) : (
<div className="text-sm text-zinc-500">{t('resultNotSuitableForChart')}</div>
<div className="text-sm text-muted-foreground">{t('resultNotSuitableForChart')}</div>
)
) : objectRows.length > 0 ? (
<ScrollArea className="h-80 border rounded-md">
@@ -214,7 +214,7 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
</Table>
</ScrollArea>
) : (
<div className="text-sm text-zinc-500">{t('noStructuredDataToRender')}</div>
<div className="text-sm text-muted-foreground">{t('noStructuredDataToRender')}</div>
)}
</CardContent>
<Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
frontend/src/components/ProjectSwitcher.tsx
+1 -1
View File
@@ -75,7 +75,7 @@ export function ProjectSwitcher() {
}}
className={currentProject?.id === project.id ? 'bg-accent' : ''}
>
<Folder className="h-4 w-4 mr-2 text-zinc-400" />
<Folder className="h-4 w-4 mr-2 text-muted-foreground" />
{project.name}
</DropdownMenuItem>
))}
frontend/src/components/Sidebar.tsx
+48 -48
View File
@@ -78,7 +78,7 @@ function SectionHeader({
return (
<div className="px-3 pt-4 pb-1">
<div className="flex items-center justify-between px-1 group">
<div className="text-[14px] font-semibold text-zinc-500 flex items-center gap-1">
<div className="text-[14px] font-semibold text-muted-foreground flex items-center gap-1">
{title}
<span>({count})</span>
</div>
@@ -88,14 +88,14 @@ function SectionHeader({
<button
onClick={handleSelectAll}
title={t('selectAllOrCancel')}
className="p-1 hover:bg-zinc-200 rounded text-zinc-500 transition-colors"
className="p-1 hover:bg-muted/80 rounded text-muted-foreground transition-colors"
>
<ListChecks className="h-3.5 w-3.5" />
</button>
<button
onClick={handleInvertSelection}
title={t('invertSelection')}
className="p-1 hover:bg-zinc-200 rounded text-zinc-500 transition-colors"
className="p-1 hover:bg-muted/80 rounded text-muted-foreground transition-colors"
>
<RotateCcw className="h-3.5 w-3.5" />
</button>
@@ -106,14 +106,14 @@ function SectionHeader({
className={`p-1 rounded transition-colors ${
selectedKeys.length > 0
? "hover:bg-red-100 text-red-500"
: "text-zinc-300 cursor-not-allowed"
: "text-muted-foreground/50 cursor-not-allowed"
}`}
>
<Trash2 className="h-3.5 w-3.5" />
</button>
<button
onClick={() => setIsSelectionMode(false)}
className="text-[10px] font-medium px-1.5 py-0.5 hover:bg-zinc-200 rounded text-zinc-500 transition-colors ml-1"
className="text-[10px] font-medium px-1.5 py-0.5 hover:bg-muted/80 rounded text-muted-foreground transition-colors ml-1"
>
{t('cancel')}
</button>
@@ -121,7 +121,7 @@ function SectionHeader({
) : (
<button
onClick={() => setIsSelectionMode(true)}
className="p-1 hover:bg-zinc-200 rounded text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity"
className="p-1 hover:bg-muted/80 rounded text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
style={{ opacity: count > 0 ? undefined : 0 }}
>
<CheckSquare className="h-3.5 w-3.5" />
@@ -177,7 +177,7 @@ function Section({
<div
key={item.key}
className={`w-full h-8 px-2 text-left rounded-md text-[14px] flex items-center justify-between group transition-colors cursor-pointer ${
isActive && !isSelectionMode ? 'bg-zinc-100 text-zinc-900 font-medium' : 'text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900'
isActive && !isSelectionMode ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
} ${isSelected ? 'bg-indigo-50/50 text-indigo-700' : ''}`}
onClick={(e) => isSelectionMode ? toggleSelect(item.key, e) : onSelect(item.key)}
>
@@ -190,12 +190,12 @@ function Section({
{isSelected ? (
<CheckSquare className="h-3.5 w-3.5 text-indigo-600" />
) : (
<Square className="h-3.5 w-3.5 text-zinc-300" />
<Square className="h-3.5 w-3.5 text-muted-foreground/50" />
)}
</span>
) : (
<span className="w-4 shrink-0 flex items-center justify-center">
{item.pinned && <Pin className="h-3.5 w-3.5 text-zinc-500" />}
{item.pinned && <Pin className="h-3.5 w-3.5 text-muted-foreground" />}
</span>
)}
<span className="truncate">{displayTitle}</span>
@@ -203,7 +203,7 @@ function Section({
{!isSelectionMode && (
<DropdownMenu>
<DropdownMenuTrigger onClick={(e) => e.stopPropagation()} className="h-6 w-6 flex items-center justify-center rounded hover:bg-zinc-200 text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity outline-none">
<DropdownMenuTrigger onClick={(e) => e.stopPropagation()} className="h-6 w-6 flex items-center justify-center rounded hover:bg-muted/80 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity outline-none">
<MoreVertical className="h-4 w-4" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-32">
@@ -302,13 +302,13 @@ function DashboardSection({
return (
<div className="px-3 pt-4">
<div className="flex items-center justify-between mb-1.5 px-1 group">
<div className="text-[14px] font-semibold text-zinc-500 flex items-center gap-1">
<div className="text-[14px] font-semibold text-muted-foreground flex items-center gap-1">
{title}
<span>({count})</span>
</div>
<button
onClick={onCreate}
className="text-[10px] font-medium px-1.5 py-0.5 hover:bg-zinc-200 rounded text-zinc-500 transition-colors opacity-0 group-hover:opacity-100 flex items-center gap-0.5"
className="text-[10px] font-medium px-1.5 py-0.5 hover:bg-muted/80 rounded text-muted-foreground transition-colors opacity-0 group-hover:opacity-100 flex items-center gap-0.5"
>
<Plus className="h-3.5 w-3.5" />
{t('new')}
@@ -321,18 +321,18 @@ function DashboardSection({
<div
key={item.id}
className={`w-full h-8 px-2 text-left rounded-md text-[14px] flex items-center justify-between group transition-colors cursor-pointer ${
isActive ? 'bg-zinc-100 text-zinc-900 font-medium' : 'text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900'
isActive ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
}`}
onClick={() => onSelect(item.id)}
>
<div className="truncate pr-2 flex-1 flex items-center gap-1.5 min-w-0">
<span className="w-4 shrink-0 flex items-center justify-center">
<LayoutDashboard className="h-3.5 w-3.5 text-zinc-400" />
<LayoutDashboard className="h-3.5 w-3.5 text-muted-foreground" />
</span>
<span className="truncate">{item.name}</span>
</div>
<DropdownMenu>
<DropdownMenuTrigger onClick={(e) => e.stopPropagation()} className="h-6 w-6 flex items-center justify-center rounded hover:bg-zinc-200 text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity outline-none">
<DropdownMenuTrigger onClick={(e) => e.stopPropagation()} className="h-6 w-6 flex items-center justify-center rounded hover:bg-muted/80 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity outline-none">
<MoreVertical className="h-4 w-4" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-32">
@@ -615,12 +615,12 @@ function SidebarBody() {
});
return (
<div className="h-full min-h-0 flex flex-col bg-zinc-50/30 border-r border-zinc-200 relative">
<div className="h-full min-h-0 flex flex-col bg-muted/50/30 border-r border-border relative">
{/* Header */}
<div className="h-14 px-4 flex items-center justify-between border-b border-zinc-100">
<Link to="/" className="flex items-center gap-1.5 text-zinc-700 font-bold text-lg hover:opacity-80 transition-opacity">
<div className="h-14 px-4 flex items-center justify-between border-b border-border">
<Link to="/" className="flex items-center gap-1.5 text-foreground/80 font-bold text-lg hover:opacity-80 transition-opacity">
<span className="text-xl leading-none mr-0.5">🦞</span>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-zinc-800 to-zinc-600">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-foreground to-muted-foreground">
{t('lobsterDataQA')}
</span>
</Link>
@@ -642,7 +642,7 @@ function SidebarBody() {
<div className="px-3 pt-4 mb-2">
<Button
variant="outline"
className="w-full justify-start h-10 px-3 rounded-lg border-zinc-200 bg-white hover:bg-zinc-50 text-zinc-600 font-medium text-[14px]"
className="w-full justify-start h-10 px-3 rounded-lg border-border bg-background hover:bg-muted/50 text-muted-foreground font-medium text-[14px]"
onClick={handleNewThread}
>
<Plus className="h-4 w-4 mr-2" />
@@ -652,12 +652,12 @@ function SidebarBody() {
<div className="px-3 pt-2">
<div className="relative">
<Search className="h-4 w-4 text-zinc-400 absolute left-3 top-1/2 -translate-y-1/2" />
<Search className="h-4 w-4 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" />
<Input
value={sessionFilter}
onChange={(e) => setSessionFilter(e.target.value)}
placeholder={t('filterSessionName')}
className="pl-9 h-9 border-zinc-200 bg-white text-[14px]"
className="pl-9 h-9 border-border bg-background text-[14px]"
/>
</div>
</div>
@@ -692,7 +692,7 @@ function SidebarBody() {
</div>
{archivedSessions.length > 0 && (
<div className="h-[35%] min-h-[150px] shrink-0 border-t border-zinc-200 bg-zinc-50/50 flex flex-col">
<div className="h-[35%] min-h-[150px] shrink-0 border-t border-border bg-muted/50/50 flex flex-col">
<SectionHeader
title={t('archivedThreads')}
count={archivedSessions.length}
@@ -741,7 +741,7 @@ function SidebarBody() {
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setRenameDialogOpen(false)}>{t('cancel')}</Button>
<Button className="bg-indigo-600 hover:bg-indigo-700 text-white" onClick={handleRename}>{t('save')}</Button>
<Button className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground" onClick={handleRename}>{t('save')}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
@@ -766,15 +766,15 @@ function SidebarBody() {
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setDashboardRenameDialogOpen(false)}>{t('cancel')}</Button>
<Button className="bg-indigo-600 hover:bg-indigo-700 text-white" onClick={handleDashboardRename}>{t('save')}</Button>
<Button className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground" onClick={handleDashboardRename}>{t('save')}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<div className="p-4 border-t border-zinc-200 mt-auto relative" ref={menuRef}>
<div className="flex items-center justify-between text-zinc-600">
<div className="p-4 border-t border-border mt-auto relative" ref={menuRef}>
<div className="flex items-center justify-between text-muted-foreground">
<button
className="flex items-center gap-2 hover:text-zinc-900 transition-colors p-1 rounded-full hover:bg-zinc-100"
className="flex items-center gap-2 hover:text-foreground transition-colors p-1 rounded-full hover:bg-muted"
onClick={() => setShowUserMenu(!showUserMenu)}
>
<div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 border border-indigo-200 shadow-sm">
@@ -786,7 +786,7 @@ function SidebarBody() {
</button>
<button
className="flex items-center gap-1.5 text-sm hover:text-zinc-900 transition-colors px-2 py-1.5 rounded-md hover:bg-zinc-100"
className="flex items-center gap-1.5 text-sm hover:text-foreground transition-colors px-2 py-1.5 rounded-md hover:bg-muted"
onClick={() => navigate("/skills")}
>
<Wand2 className="h-4 w-4" />
@@ -796,25 +796,25 @@ function SidebarBody() {
{/* User Settings Popover Menu */}
{showUserMenu && (
<div className="absolute bottom-[72px] left-4 w-56 bg-white rounded-xl shadow-xl border border-zinc-200 py-1.5 z-50 overflow-hidden animate-in fade-in zoom-in duration-200">
<div className="px-3 py-2 border-b border-zinc-100 mb-1">
<p className="text-sm font-medium text-zinc-900 truncate">{user?.username}</p>
<p className="text-xs text-zinc-500 truncate">{user?.email}</p>
<div className="absolute bottom-[72px] left-4 w-56 bg-background rounded-xl shadow-xl border border-border py-1.5 z-50 overflow-hidden animate-in fade-in zoom-in duration-200">
<div className="px-3 py-2 border-b border-border mb-1">
<p className="text-sm font-medium text-foreground truncate">{user?.username}</p>
<p className="text-xs text-muted-foreground truncate">{user?.email}</p>
</div>
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
navigate("/projects");
setShowUserMenu(false);
}}
>
<Folder className="h-4 w-4 text-zinc-500" />
<Folder className="h-4 w-4 text-muted-foreground" />
{t('projectManagement')}
</button>
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
if (currentProject?.id) {
navigate(`/projects/${currentProject.id}/subagents`);
@@ -824,47 +824,47 @@ function SidebarBody() {
setShowUserMenu(false);
}}
>
<Bot className="h-4 w-4 text-zinc-500" />
<Bot className="h-4 w-4 text-muted-foreground" />
{t('subagents', 'Subagents')}
</button>
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
navigate("/datasources");
setShowUserMenu(false);
}}
>
<Database className="h-4 w-4 text-zinc-500" />
<Database className="h-4 w-4 text-muted-foreground" />
{t('dataSourceManagement')}
</button>
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
navigate("/settings");
setShowUserMenu(false);
}}
>
<Settings className="h-4 w-4 text-zinc-500" />
<Settings className="h-4 w-4 text-muted-foreground" />
{t('personalSettings')}
</button>
{user?.is_admin && (
<>
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
navigate("/model-configs");
setShowUserMenu(false);
}}
>
<Brain className="h-4 w-4 text-zinc-500" />
<Brain className="h-4 w-4 text-muted-foreground" />
{t('modelConfig')}
</button>
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
navigate("/users");
setShowUserMenu(false);
@@ -876,16 +876,16 @@ function SidebarBody() {
</>
)}
<div className="h-px bg-zinc-100 my-1 mx-2" />
<div className="h-px bg-muted my-1 mx-2" />
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
i18n.changeLanguage(i18n.language === 'zh' ? 'en' : 'zh');
setShowUserMenu(false);
}}
>
<Globe className="h-4 w-4 text-zinc-500" />
<Globe className="h-4 w-4 text-muted-foreground" />
{i18n.language === 'zh' ? 'English' : '中文'}
</button>
@@ -909,7 +909,7 @@ export function Sidebar() {
<>
<Sheet open={isOpen} onOpenChange={setIsOpen}>
<SheetTrigger render={
<Button variant="ghost" size="icon" className="md:hidden fixed top-3 left-3 z-50 border border-zinc-200 bg-white">
<Button variant="ghost" size="icon" className="md:hidden fixed top-3 left-3 z-50 border border-border bg-background">
<Menu className="h-5 w-5" />
</Button>
} />
frontend/src/components/SlashCommandMenu.tsx
+3 -3
View File
@@ -48,7 +48,7 @@ export function SlashCommandMenu({ isOpen, skills, selectedIndex, onSelect, onCl
return (
<div
ref={menuRef}
className="absolute bottom-full left-0 mb-2 w-full max-w-md overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950 shadow-2xl animate-in fade-in slide-in-from-bottom-2 duration-100 z-50"
className="absolute bottom-full left-0 mb-2 w-full max-w-md overflow-hidden rounded-xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-bottom-2 duration-100 z-50"
>
<div className="max-h-[240px] overflow-y-auto py-1.5 custom-scrollbar">
{skills.map((skill, index) => (
@@ -58,11 +58,11 @@ export function SlashCommandMenu({ isOpen, skills, selectedIndex, onSelect, onCl
onClick={() => onSelect(skill)}
className={cn(
"w-full flex items-center gap-3 px-3 py-2.5 text-left text-sm transition-colors",
index === selectedIndex ? "bg-zinc-800" : "hover:bg-zinc-900"
index === selectedIndex ? "bg-accent" : "hover:bg-accent/50"
)}
>
<span className="font-bold text-blue-400 shrink-0 font-mono">/{skill.name}</span>
<span className="text-zinc-400 truncate text-xs">{skill.description || t('noDescription')}</span>
<span className="text-muted-foreground truncate text-xs">{skill.description || t('noDescription')}</span>
</button>
))}
</div>
frontend/src/components/ThemeToggle.tsx
+34
View File
@@ -0,0 +1,34 @@
import { Moon, Sun } from 'lucide-react';
import { useThemeStore } from '../store/themeStore';
import { Button } from './ui/button';
import { useEffect } from 'react';
export function ThemeToggle() {
const { theme, toggleTheme } = useThemeStore();
// Ensure the theme class is applied correctly on mount in case hydration doesn't match the DOM
useEffect(() => {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}, [theme]);
return (
<Button
variant="ghost"
size="icon"
onClick={toggleTheme}
className="w-9 h-9 text-muted-foreground hover:text-foreground"
title={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
>
{theme === 'light' ? (
<Moon className="h-[1.2rem] w-[1.2rem] transition-all" />
) : (
<Sun className="h-[1.2rem] w-[1.2rem] transition-all" />
)}
<span className="sr-only">Toggle theme</span>
</Button>
);
}
frontend/src/components/modeling/TableNode.tsx
+6 -6
View File
@@ -20,11 +20,11 @@ interface TableNodeData {
export const TableNode = memo(({ data }: { data: TableNodeData }) => {
return (
<Card className="min-w-[220px] max-w-[280px] shadow-md border-t-4 border-t-blue-500 text-xs bg-white">
<Card className="min-w-[220px] max-w-[280px] shadow-md border-t-4 border-t-blue-500 text-xs bg-background">
<Handle type="target" position={Position.Top} className="!bg-blue-500" />
<CardHeader
className="py-2 px-3 bg-gray-50 border-b flex flex-row items-center justify-between cursor-pointer hover:bg-gray-100"
className="py-2 px-3 bg-muted/50 border-b flex flex-row items-center justify-between cursor-pointer hover:bg-muted"
onClick={() => data.onDetailClick(data.name)}
>
<div className="font-semibold flex items-center gap-2 truncate" title={data.name}>
@@ -56,12 +56,12 @@ export const TableNode = memo(({ data }: { data: TableNodeData }) => {
return (
<tr
key={col.name}
className="border-b last:border-0 hover:bg-gray-50"
className="border-b last:border-0 hover:bg-muted/50"
title={`${col.name} (${col.type})`}
>
<td className="py-1.5 px-3 w-16 text-gray-500 font-mono truncate border-r border-gray-100">{displayType}</td>
<td className="py-1.5 px-3 font-medium truncate text-gray-800">{col.name}</td>
<td className="py-1.5 px-3 w-10 text-center text-gray-500 font-semibold text-[10px] border-l border-gray-100">
<td className="py-1.5 px-3 w-16 text-muted-foreground font-mono truncate border-r border-border">{displayType}</td>
<td className="py-1.5 px-3 font-medium truncate text-foreground">{col.name}</td>
<td className="py-1.5 px-3 w-10 text-center text-muted-foreground font-semibold text-[10px] border-l border-border">
{keyText}
</td>
</tr>