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

fix: rending error

Browse Source
This commit is contained in:
qixinbo
2026-03-29 23:55:16 +08:00
parent a3fbfb301a
commit 5cac27f243
1 changed files with 78 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ChatInterface.tsx
+27 -73
View File
@@ -1,10 +1,9 @@
import { useState, useRef, useEffect } from "react"; import { useState, useRef, useEffect } from "react";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
import { User, Loader2, ArrowUp, ChevronDown, Check, Square, Plus, Database, Wand2, Zap, CheckCircle2, Table, XCircle, Settings, ExternalLink, FileText, Download, Eye, Copy, Mic, X } from "lucide-react"; import { User, Loader2, ArrowUp, ChevronDown, Check, Square, Plus, Database, Wand2, CheckCircle2, Table, XCircle, Settings, ExternalLink, FileText, Download, Eye, Copy, Mic, X } from "lucide-react";
import { api } from "@/lib/api"; import { api } from "@/lib/api";
import { type ChartSpec } from "@/store/visualizationStore"; import { type ChartSpec } from "@/store/visualizationStore";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'; import remarkGfm from 'remark-gfm';
@@ -1628,47 +1627,7 @@ export function ChatInterface() {
</PopoverTrigger> </PopoverTrigger>
<PopoverContent side="top" align="start" className="w-[480px] p-0 mb-2 overflow-hidden rounded-2xl border-border 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"> <div className="flex divide-x divide-zinc-100">
{/* Left Column: Data Source */}
<div className="flex-1 p-3 bg-muted/50/50"> <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>
<div className="space-y-0.5">
{availableDataSources.map((ds) => (
<button
key={ds.id}
onClick={() => {
void handleSelectDataSource(ds.id);
}}
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-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-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-border">
<button
onClick={() => {
void handleClearDataSource();
}}
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>
</div>
)}
</div>
<div className="mt-3 pt-3 border-t border-border">
<div className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5"> <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" /> <Database className="h-3 w-3" />
{t('knowledgeBase')} {t('knowledgeBase')}
@@ -1696,8 +1655,9 @@ export function ChatInterface() {
</button> </button>
)) ))
) : ( ) : (
<div className="px-3 py-3 text-xs text-muted-foreground"> <div className="px-3 py-4 text-center">
{t('noKnowledgeBases')} <Database className="h-6 w-6 text-zinc-200 mx-auto mb-1" />
<p className="text-[11px] text-muted-foreground">{t('noKnowledgeBases')}</p>
</div> </div>
)} )}
{selectedKnowledgeBaseId ? ( {selectedKnowledgeBaseId ? (
@@ -1714,59 +1674,53 @@ export function ChatInterface() {
) : null} ) : null}
</div> </div>
</div> </div>
</div>
{/* Right Column: Skills */}
<div className="flex-1 p-3 bg-background"> <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"> <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" /> <Database className="h-3 w-3" />
Skills {t('dataSource')}
</div> </div>
<div className="space-y-0.5 max-h-[300px] overflow-y-auto pr-1"> <div className="space-y-0.5">
{availableSkills.length > 0 ? ( {availableDataSources.length > 0 ? (
availableSkills.map((skill) => { availableDataSources.map((ds) => (
const isSelected = selectedSkillIds.includes(skill.id);
return (
<button <button
key={skill.id} key={ds.id}
onClick={() => { onClick={() => {
setSelectedSkillIds((prev) => void handleSelectDataSource(ds.id);
isSelected
? prev.filter((id) => id !== skill.id)
: [...prev, skill.id]
);
}} }}
className={cn( className={cn(
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200", "w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
isSelected selectedDataSource === ds.id
? "bg-background text-foreground shadow-sm ring-1 ring-border" ? "bg-background text-foreground shadow-sm ring-1 ring-border"
: "text-muted-foreground hover:bg-background hover:shadow-sm" : "text-muted-foreground hover:bg-background hover:shadow-sm"
)} )}
> >
<div className="flex items-center text-left"> <div className="flex items-center gap-2.5">
<span className="font-medium">{skill.name}</span> <Database className={cn("h-4 w-4", selectedDataSource === ds.id ? "text-blue-500" : "text-muted-foreground")} />
<span className="font-medium">{ds.name}</span>
</div> </div>
{isSelected && <CheckCircle2 className="h-4 w-4 text-blue-500" />} {selectedDataSource === ds.id && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
</button> </button>
); ))
})
) : ( ) : (
<div className="px-3 py-8 text-center"> <div className="px-3 py-4 text-center">
<Zap className="h-8 w-8 text-zinc-100 mx-auto mb-2" /> <Database className="h-6 w-6 text-zinc-200 mx-auto mb-1" />
<p className="text-xs text-muted-foreground">{t('noAvailableSkills')}</p> <p className="text-[11px] text-muted-foreground">{t('noDataSources')}</p>
</div> </div>
)} )}
</div> {selectedDataSource ? (
{selectedSkillIds.length > 0 && (
<div className="mt-2 pt-2 border-t border-border"> <div className="mt-2 pt-2 border-t border-border">
<button <button
onClick={() => setSelectedSkillIds([])} onClick={() => {
void handleClearDataSource();
}}
className="w-full py-1.5 text-[11px] text-muted-foreground hover:text-muted-foreground 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 })} {t('clearSelected')}
</button> </button>
</div> </div>
)} ) : null}
</div>
</div> </div>
</div> </div>
</PopoverContent> </PopoverContent>