mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-06-09 07:16:04 +00:00
feat: Support multiple knowledge base binding in pipelines (#1766)
* Initial plan * Add multi-knowledge base support to pipelines - Created database migration dbm010 to convert knowledge-base field from string to array - Updated default pipeline config to use knowledge-bases array - Updated pipeline metadata to use knowledge-base-multi-selector type - Modified localagent.py to retrieve from multiple knowledge bases and concatenate results - Added KNOWLEDGE_BASE_MULTI_SELECTOR type to frontend form entities - Implemented multi-selector UI component with dialog for selecting multiple knowledge bases Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com> * Add i18n translations for multi-knowledge base selector Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com> * Fix prettier formatting errors in DynamicFormItemComponent Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com> * Add accessibility attributes to knowledge base selector checkbox Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com> * fix: minor fix --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com> Co-authored-by: Junyan Qin <rockchinq@gmail.com>
This commit is contained in:
Copilot
@@ -58,6 +58,9 @@ export default function DynamicFormComponent({
|
||||
case 'knowledge-base-selector':
|
||||
fieldSchema = z.string();
|
||||
break;
|
||||
case 'knowledge-base-multi-selector':
|
||||
fieldSchema = z.array(z.string());
|
||||
break;
|
||||
case 'bot-selector':
|
||||
fieldSchema = z.string();
|
||||
break;
|
||||
|
||||
@@ -29,6 +29,15 @@ import { useTranslation } from 'react-i18next';
|
||||
import { extractI18nObject } from '@/i18n/I18nProvider';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Plus, X } from 'lucide-react';
|
||||
|
||||
export default function DynamicFormItemComponent({
|
||||
config,
|
||||
@@ -44,6 +53,8 @@ export default function DynamicFormItemComponent({
|
||||
const [knowledgeBases, setKnowledgeBases] = useState<KnowledgeBase[]>([]);
|
||||
const [bots, setBots] = useState<Bot[]>([]);
|
||||
const [uploading, setUploading] = useState<boolean>(false);
|
||||
const [kbDialogOpen, setKbDialogOpen] = useState(false);
|
||||
const [tempSelectedKBIds, setTempSelectedKBIds] = useState<string[]>([]);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleFileUpload = async (file: File): Promise<IFileConfig | null> => {
|
||||
@@ -90,7 +101,10 @@ export default function DynamicFormItemComponent({
|
||||
}, [config.type]);
|
||||
|
||||
useEffect(() => {
|
||||
if (config.type === DynamicFormItemType.KNOWLEDGE_BASE_SELECTOR) {
|
||||
if (
|
||||
config.type === DynamicFormItemType.KNOWLEDGE_BASE_SELECTOR ||
|
||||
config.type === DynamicFormItemType.KNOWLEDGE_BASE_MULTI_SELECTOR
|
||||
) {
|
||||
httpClient
|
||||
.getKnowledgeBases()
|
||||
.then((resp) => {
|
||||
@@ -336,6 +350,128 @@ export default function DynamicFormItemComponent({
|
||||
</Select>
|
||||
);
|
||||
|
||||
case DynamicFormItemType.KNOWLEDGE_BASE_MULTI_SELECTOR:
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
{field.value && field.value.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{field.value.map((kbId: string) => {
|
||||
const kb = knowledgeBases.find((base) => base.uuid === kbId);
|
||||
if (!kb) return null;
|
||||
return (
|
||||
<div
|
||||
key={kbId}
|
||||
className="flex items-center justify-between rounded-lg border p-3 hover:bg-accent"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{kb.name}</div>
|
||||
{kb.description && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{kb.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
const newValue = field.value.filter(
|
||||
(id: string) => id !== kbId,
|
||||
);
|
||||
field.onChange(newValue);
|
||||
}}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-border">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('knowledge.noKnowledgeBaseSelected')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setTempSelectedKBIds(field.value || []);
|
||||
setKbDialogOpen(true);
|
||||
}}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{t('knowledge.addKnowledgeBase')}
|
||||
</Button>
|
||||
|
||||
{/* Knowledge Base Selection Dialog */}
|
||||
<Dialog open={kbDialogOpen} onOpenChange={setKbDialogOpen}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('knowledge.selectKnowledgeBases')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex-1 overflow-y-auto space-y-2 pr-2">
|
||||
{knowledgeBases.map((base) => {
|
||||
const isSelected = tempSelectedKBIds.includes(
|
||||
base.uuid ?? '',
|
||||
);
|
||||
return (
|
||||
<div
|
||||
key={base.uuid}
|
||||
className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
|
||||
onClick={() => {
|
||||
const kbId = base.uuid ?? '';
|
||||
setTempSelectedKBIds((prev) =>
|
||||
prev.includes(kbId)
|
||||
? prev.filter((id) => id !== kbId)
|
||||
: [...prev, kbId],
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
aria-label={`Select ${base.name}`}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{base.name}</div>
|
||||
{base.description && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{base.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setKbDialogOpen(false)}
|
||||
>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
field.onChange(tempSelectedKBIds);
|
||||
setKbDialogOpen(false);
|
||||
}}
|
||||
>
|
||||
{t('common.confirm')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
|
||||
case DynamicFormItemType.BOT_SELECTOR:
|
||||
return (
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
|
||||
@@ -29,6 +29,7 @@ export enum DynamicFormItemType {
|
||||
PROMPT_EDITOR = 'prompt-editor',
|
||||
UNKNOWN = 'unknown',
|
||||
KNOWLEDGE_BASE_SELECTOR = 'knowledge-base-selector',
|
||||
KNOWLEDGE_BASE_MULTI_SELECTOR = 'knowledge-base-multi-selector',
|
||||
PLUGIN_SELECTOR = 'plugin-selector',
|
||||
BOT_SELECTOR = 'bot-selector',
|
||||
}
|
||||
|
||||
@@ -488,6 +488,9 @@ const enUS = {
|
||||
createKnowledgeBase: 'Create Knowledge Base',
|
||||
editKnowledgeBase: 'Edit Knowledge Base',
|
||||
selectKnowledgeBase: 'Select Knowledge Base',
|
||||
selectKnowledgeBases: 'Select Knowledge Bases',
|
||||
addKnowledgeBase: 'Add Knowledge Base',
|
||||
noKnowledgeBaseSelected: 'No knowledge bases selected',
|
||||
empty: 'Empty',
|
||||
editDocument: 'Documents',
|
||||
description: 'Configuring knowledge bases for improved LLM responses',
|
||||
|
||||
@@ -491,6 +491,9 @@ const jaJP = {
|
||||
createKnowledgeBase: '知識ベースを作成',
|
||||
editKnowledgeBase: '知識ベースを編集',
|
||||
selectKnowledgeBase: '知識ベースを選択',
|
||||
selectKnowledgeBases: '知識ベースを選択',
|
||||
addKnowledgeBase: '知識ベースを追加',
|
||||
noKnowledgeBaseSelected: '知識ベースが選択されていません',
|
||||
empty: 'なし',
|
||||
editDocument: 'ドキュメント',
|
||||
description: 'LLMの回答品質向上のための知識ベースを設定します',
|
||||
|
||||
@@ -471,6 +471,9 @@ const zhHans = {
|
||||
createKnowledgeBase: '创建知识库',
|
||||
editKnowledgeBase: '编辑知识库',
|
||||
selectKnowledgeBase: '选择知识库',
|
||||
selectKnowledgeBases: '选择知识库',
|
||||
addKnowledgeBase: '添加知识库',
|
||||
noKnowledgeBaseSelected: '未选择知识库',
|
||||
empty: '无',
|
||||
editDocument: '文档',
|
||||
description: '配置可用于提升模型回复质量的知识库',
|
||||
|
||||
@@ -468,6 +468,9 @@ const zhHant = {
|
||||
createKnowledgeBase: '建立知識庫',
|
||||
editKnowledgeBase: '編輯知識庫',
|
||||
selectKnowledgeBase: '選擇知識庫',
|
||||
selectKnowledgeBases: '選擇知識庫',
|
||||
addKnowledgeBase: '新增知識庫',
|
||||
noKnowledgeBaseSelected: '未選擇知識庫',
|
||||
empty: '無',
|
||||
editDocument: '文檔',
|
||||
description: '設定可用於提升模型回覆品質的知識庫',
|
||||
|
||||
Reference in New Issue
Block a user