feat: external knowledge bases (#1783)

* Initial plan * Add backend support for external knowledge bases Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com> * Add frontend support for external knowledge bases with tabs UI Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com> * Add i18n translations for all languages (Traditional Chinese and Japanese) Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com> * Update knowledge base tab list styling to match plugins page Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com> * perf: margin-top for kb page * refactor: switch RetrievalResultEntry to langbot_plugin pkg ones * feat: knowledge retriever listing and creating * stash * refactor: unify sync mechanism for polymorphic components * feat: use unified retireval result struct in retrieval test page * chore: remove unused methods * feat: retriever icon displaying * feat: localagent retrieval with external kbs * chore: bump version of langbot-plugin to 0.2.0b1 * fix: i18n --------- 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>
2026-06-27 16:04:21 +00:00 · 2025-11-27 23:19:43 +08:00
parent 3c04eeaff9
commit a8481e43f0
33 changed files with 1924 additions and 161 deletions
@@ -0,0 +1,124 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useTranslation } from 'react-i18next';
+import { RetrieveResult } from '@/app/infra/entities/api';
+import { toast } from 'sonner';
+
+interface KBRetrieveGenericProps {
+  kbId: string;
+  retrieveFunction: (
+    kbId: string,
+    query: string,
+  ) => Promise<{ results: RetrieveResult[] }>;
+  getResultTitle?: (result: RetrieveResult) => string;
+}
+
+/**
+ * Generic knowledge base retrieve component
+ * Supports both builtin and external knowledge bases
+ */
+export default function KBRetrieveGeneric({
+  kbId,
+  retrieveFunction,
+  getResultTitle,
+}: KBRetrieveGenericProps) {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<RetrieveResult[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const handleRetrieve = async () => {
+    if (!query.trim()) return;
+
+    setLoading(true);
+    try {
+      setResults([]);
+      const response = await retrieveFunction(kbId, query);
+      setResults(response.results);
+    } catch (error) {
+      console.error('Retrieve failed:', error);
+      toast.error(t('knowledge.retrieveError'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getTitle = (result: RetrieveResult): string => {
+    if (getResultTitle) {
+      return getResultTitle(result);
+    }
+    // Default: use file_id or document_name from metadata
+    return (
+      (result.metadata.file_id as string) ||
+      (result.metadata.document_name as string) ||
+      result.id
+    );
+  };
+
+  /**
+   * Extract text content from the content array
+   * The content array may contain multiple items with type 'text'
+   */
+  const extractTextFromContent = (result: RetrieveResult): string => {
+    // First try to get content from the new format
+    if (result.content && Array.isArray(result.content)) {
+      const textParts = result.content
+        .filter((item) => item.type === 'text' && item.text)
+        .map((item) => item.text);
+
+      if (textParts.length > 0) {
+        return textParts.join('\n\n');
+      }
+    }
+
+    return '';
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-2">
+        <Input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={t('knowledge.queryPlaceholder')}
+          onKeyPress={(e) => e.key === 'Enter' && handleRetrieve()}
+        />
+        <Button onClick={handleRetrieve} disabled={loading || !query.trim()}>
+          {t('knowledge.query')}
+        </Button>
+      </div>
+
+      <div className="space-y-3">
+        {results.length === 0 && !loading && (
+          <p className="text-muted-foreground">{t('knowledge.noResults')}</p>
+        )}
+
+        {loading ? (
+          <p className="text-muted-foreground">{t('common.loading')}</p>
+        ) : (
+          results.map((result) => (
+            <Card key={result.id} className="w-full">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-medium flex justify-between items-center">
+                  <span>{getTitle(result)}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {t('knowledge.distance')}: {result.distance.toFixed(4)}
+                  </span>
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm whitespace-pre-wrap">
+                  {extractTextFromContent(result)}
+                </p>
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}