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

UI: chat interface remove skills list

Browse Source
This commit is contained in:
qixinbo
2026-03-29 22:13:58 +08:00
parent ae6340d429
commit 4427e33567
4 changed files with 51 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/main.py
-10
View File
@@ -415,11 +415,6 @@ async def nanobot_chat(request: ChatRequest):
elif request.route_mode == "chat":
instructions.append("Normal chat mode. Do NOT use the nl2sql tool")
# Inject instructions for selected skills
if request.skill_ids:
skill_list = ", ".join(request.skill_ids)
instructions.append(f"You must prioritize using the following skills/tools to answer the user's request: {skill_list}")
if instructions:
instr_block = "\n".join(instructions)
# If message already has Runtime Context, append to it, otherwise create new
@@ -515,11 +510,6 @@ async def nanobot_chat_stream(request: ChatRequest):
elif request.route_mode == "chat":
instructions.append("Normal chat mode. Do NOT use the nl2sql tool")
# Inject instructions for selected skills
if request.skill_ids:
skill_list = ", ".join(request.skill_ids)
instructions.append(f"You must prioritize using the following skills/tools to answer the user's request: {skill_list}")
if instructions:
instr_block = "\n".join(instructions)
# If message already has Runtime Context, append to it, otherwise create new
frontend/src/components/ChatInterface.tsx
+35 -74
View File
@@ -220,9 +220,7 @@ export function ChatInterface() {
const [input, setInput] = useState("");
const [selectedDataSource, setSelectedDataSource] = useState<string>("");
const [selectedKnowledgeBaseId, setSelectedKnowledgeBaseId] = useState<string>("");
const [availableSkills, setAvailableSkills] = useState<Skill[]>([]);
const [availableKnowledgeBases, setAvailableKnowledgeBases] = useState<KnowledgeBaseOption[]>([]);
const [selectedSkillIds, setSelectedSkillIds] = useState<string[]>([]);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [artifactPreview, setArtifactPreview] = useState<ArtifactPreviewTarget | null>(null);
const [collapsedThinkingByMessage, setCollapsedThinkingByMessage] = useState<Record<string, boolean>>({});
@@ -235,6 +233,8 @@ export function ChatInterface() {
const [slashQuery, setSlashQuery] = useState<string | null>(null);
const [slashIndex, setSlashIndex] = useState(0);
const [availableSkills, setAvailableSkills] = useState<Skill[]>([]);
const [selectedSkillIds, setSelectedSkillIds] = useState<string[]>([]);
const filteredSlashSkills = slashQuery !== null
? availableSkills.filter(s => s.name.toLowerCase().includes(slashQuery.toLowerCase()))
: [];
@@ -747,7 +747,7 @@ export function ChatInterface() {
};
const renderActiveSelections = () => {
if (!selectedDataSource && !selectedKnowledgeBaseId && selectedSkills.length === 0) return null;
if (!selectedDataSource && !selectedKnowledgeBaseId) return null;
return (
<div className="px-2 pt-2">
<div className="flex flex-wrap gap-2">
@@ -1169,47 +1169,9 @@ export function ChatInterface() {
</PopoverTrigger>
<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-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">
{/* Left Column: Knowledge Base */}
<div className="flex-1 p-3 bg-muted/50/50 flex flex-col gap-4 border-r border-border/50">
<div>
<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('knowledgeBase')}
@@ -1237,8 +1199,9 @@ export function ChatInterface() {
</button>
))
) : (
<div className="px-3 py-3 text-xs text-muted-foreground">
{t('noKnowledgeBases')}
<div className="px-3 py-4 text-center">
<Database className="h-6 w-6 text-zinc-200 mx-auto mb-1" />
<p className="text-[11px] text-muted-foreground">{t('noKnowledgeBases')}</p>
</div>
)}
{selectedKnowledgeBaseId ? (
@@ -1257,59 +1220,57 @@ export function ChatInterface() {
</div>
</div>
{/* Right Column: Skills */}
<div className="flex-1 p-3 bg-background">
{/* Right Column: Data Source */}
<div className="flex-1 p-3 bg-muted/50/50 flex flex-col gap-4">
<div>
<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
<Database className="h-3 w-3" />
{t('dataSource')}
</div>
<div className="space-y-0.5 max-h-[300px] overflow-y-auto pr-1">
{availableSkills.length > 0 ? (
availableSkills.map((skill) => {
const isSelected = selectedSkillIds.includes(skill.id);
return (
<div className="space-y-0.5">
{availableDataSources.length > 0 ? (
availableDataSources.map((ds) => (
<button
key={skill.id}
key={ds.id}
onClick={() => {
setSelectedSkillIds((prev) =>
isSelected
? prev.filter((id) => id !== skill.id)
: [...prev, skill.id]
);
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",
isSelected
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 text-left">
<span className="font-medium">{skill.name}</span>
<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>
{isSelected && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
{selectedDataSource === ds.id && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
</button>
);
})
))
) : (
<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-muted-foreground">{t('noAvailableSkills')}</p>
<div className="px-3 py-4 text-center">
<Database className="h-6 w-6 text-zinc-200 mx-auto mb-1" />
<p className="text-[11px] text-muted-foreground">{t('noDataSources')}</p>
</div>
)}
</div>
{selectedSkillIds.length > 0 && (
{selectedDataSource && (
<div className="mt-2 pt-2 border-t border-border">
<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"
>
{t('clearSelectedWithCount', { count: selectedSkillIds.length })}
{t('clearSelected')}
</button>
</div>
)}
</div>
</div>
</div>
</div>
</PopoverContent>
</Popover>
</div>
frontend/src/i18n/locales/en.json
+3 -3
View File
@@ -28,7 +28,7 @@
"modelNotFound": "Model not found",
"availableModels": "Available Models",
"dataSource": "Data Source",
"clearSelected": "Clear Selected",
"clearSelected": "Clear Selection",
"clearSelectedWithCount": "Clear Selected ({{count}})",
"noAvailableSkills": "No available skills",
"askAnything": "Ask anything...",
@@ -98,7 +98,7 @@
"dataSourceConfig": "Data Source Configuration",
"manageDataSourceConnections": "Manage data source connections for Q&A",
"newDataSource": "New Data Source",
"noDataSources": "No data sources",
"noDataSources": "No data source available in current project, please create one in settings",
"clickTopRightToAddFirstDataSource": "Click the button on the top right to add your first data source",
"newProject": "New Project",
"projectList": "Project List",
@@ -236,7 +236,7 @@
"knowledgeBaseReindexSuccess": "Knowledge base reindexed successfully",
"knowledgeBaseReindexFailed": "Failed to reindex knowledge base",
"selectProjectBeforeManageKnowledgeBase": "Please select a project before managing knowledge bases",
"noKnowledgeBases": "No knowledge bases in this project. Create one in Settings first.",
"noKnowledgeBases": "No knowledge base available in current project, please create one in settings",
"confirmDeleteUser": "Are you sure you want to delete this user?",
"newUserMustHavePassword": "New users must have a password",
"anErrorOccurred": "An error occurred",
frontend/src/i18n/locales/zh.json
+1
View File
@@ -251,6 +251,7 @@
"knowledgeBaseReindexFailed": "知识库重建索引失败",
"selectProjectBeforeManageKnowledgeBase": "请先选择一个项目，再进行知识库管理",
"noKnowledgeBases": "当前项目暂无知识库，请先在设置中创建",
"noDataSources": "当前项目暂无数据源，请先在设置中创建",
"confirmDeleteUser": "确认删除该用户吗？",
"newUserMustHavePassword": "新建用户必须填写密码",
"anErrorOccurred": "发生错误",