@smart-cloud/ai-kit-ui 1.3.6 → 1.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -20,7 +20,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@mantine/colors-generator": "^8.3.15",
-    "@smart-cloud/ai-kit-core": "^1.3.5",
+    "@smart-cloud/ai-kit-core": "^1.3.6",
     "@smart-cloud/wpsuite-core": "^2.2.6",
     "@tabler/icons-react": "^3.36.1",
     "chroma-js": "^3.2.0",

package/src/doc-search/DocSearch.tsx

@@ -2,10 +2,13 @@ import {
   Alert,
   Anchor,
   Button,
+  Checkbox,
+  Collapse,
   Divider,
   Group,
   Loader,
   Modal,
+  MultiSelect,
   Paper,
   Progress,
   Stack,
@@ -15,6 +18,9 @@ import {
 } from "@mantine/core";
 import {
   AiKitDocSearchIcon,
+  CapabilityDecision,
+  dispatchBackend,
+  resolveBackend,
   sendSearchMessage,
   type AiKitStatusEvent,
   type DocSearchProps,
@@ -26,14 +32,20 @@ import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 
-import { IconSearch, IconX } from "@tabler/icons-react";
-import { IconMicrophone, IconMicrophoneOff } from "@tabler/icons-react";
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconMicrophone,
+  IconMicrophoneOff,
+  IconSearch,
+  IconX,
+} from "@tabler/icons-react";
 
 import { AiFeatureBorder } from "../ai-feature/AiFeatureBorder";
 import { translations } from "../i18n";
+import { PoweredBy } from "../poweredBy";
 import { useAiRun } from "../useAiRun";
 import { AiKitShellInjectedProps, withAiKitShell } from "../withAiKitShell";
-import { PoweredBy } from "../poweredBy";
 
 I18n.putVocabularies(translations);
 
@@ -80,6 +92,9 @@ const DocSearchBase: FC<Props> = (props) => {
     showSources = true,
     topK = 10,
     getSearchText,
+    enableUserFilters = false,
+    availableCategories,
+    availableTags,
 
     variation,
     rootElement,
@@ -98,6 +113,20 @@ const DocSearchBase: FC<Props> = (props) => {
   const audioChunksRef = useRef<Blob[]>([]);
   const audioContextRef = useRef<AudioContext | null>(null);
   const analyserRef = useRef<AnalyserNode | null>(null);
+
+  // User filter states
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [selectedSubcategories, setSelectedSubcategories] = useState<string[]>(
+    [],
+  );
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [tagSearchValue, setTagSearchValue] = useState<string>("");
+  const [metadataOptions, setMetadataOptions] = useState<{
+    allowedCategories: Record<string, string[]>;
+    allowedTags: string[];
+  } | null>(null);
+  const [loadingMetadata, setLoadingMetadata] = useState(false);
   const animationFrameRef = useRef<number | null>(null);
 
   // Audio cache: store uploaded audio to avoid re-uploading within session
@@ -111,6 +140,7 @@ const DocSearchBase: FC<Props> = (props) => {
     useAiRun<SearchResult>();
 
   const autoRunOnceRef = useRef(false);
+  const prevSelectedCategoriesRef = useRef<string[]>([]);
 
   const sessionId = result?.sessionId;
   const citationDocs = result?.citations?.docs ?? [];
@@ -159,6 +189,14 @@ const DocSearchBase: FC<Props> = (props) => {
     return Boolean((text && text.trim().length > 0) || audioBlob);
   }, [inputText, busy, audioBlob, featureOpen]);
 
+  const hasValidFilterOptions = useMemo(() => {
+    if (!metadataOptions) return false;
+    const hasCategories =
+      Object.keys(metadataOptions.allowedCategories).length > 0;
+    const hasTags = metadataOptions.allowedTags.length > 0;
+    return hasCategories || hasTags;
+  }, [metadataOptions]);
+
   const startRecording = useCallback(async () => {
     try {
       // Clear query input when starting audio recording
@@ -265,6 +303,68 @@ const DocSearchBase: FC<Props> = (props) => {
     };
   }, []);
 
+  // Load metadata options when user filters are enabled
+  useEffect(() => {
+    if (!enableUserFilters) return;
+
+    // Use provided options if available
+    if (availableCategories || availableTags) {
+      setMetadataOptions({
+        allowedCategories: availableCategories || {},
+        allowedTags: availableTags || [],
+      });
+      return;
+    }
+
+    // Otherwise fetch from backend
+    const loadMetadata = async () => {
+      setLoadingMetadata(true);
+      try {
+        const backend = await resolveBackend();
+
+        if (!backend.available) {
+          console.error("Backend not available for metadata options");
+          return;
+        }
+
+        const decision: CapabilityDecision = {
+          feature: "prompt",
+          source: "backend",
+          mode: "backend-only",
+          onDeviceAvailable: false,
+          backendAvailable: backend.available,
+          backendTransport: backend.transport,
+          backendApiName: backend.apiName,
+          backendBaseUrl: backend.baseUrl,
+          reason: backend.reason ?? "",
+        };
+
+        const data = (await dispatchBackend(
+          decision,
+          context ?? "frontend",
+          "/kb/metadata-options",
+          "GET",
+          null,
+          {},
+        )) as {
+          allowedCategories: Record<string, string[]>;
+          allowedTags: string[];
+        };
+
+        setMetadataOptions({
+          allowedCategories: data.allowedCategories || {},
+          allowedTags: data.allowedTags || [],
+        });
+      } catch (error) {
+        console.error("Failed to load metadata options:", error);
+      } finally {
+        setLoadingMetadata(false);
+      }
+    };
+
+    void loadMetadata();
+  }, [enableUserFilters, availableCategories, availableTags, context]);
+
   const onSearch = useCallback(async () => {
     let q: string | undefined;
 
@@ -313,16 +413,40 @@ const DocSearchBase: FC<Props> = (props) => {
           ...(q && { query: q }),
           ...(audioBlob && { audio: audioBlob }), // Pass Blob directly
           topK,
+          // Include user-selected filters if enabled
+          // Always send userSelectedCategories array when enableUserFilters is true (even if empty)
+          // to prevent backend from applying its own kb-filter
+          ...(enableUserFilters && {
+            userSelectedCategories: selectedCategories,
+          }),
+          ...(enableUserFilters &&
+            selectedSubcategories.length > 0 && {
+              userSelectedSubcategories: selectedSubcategories,
+            }),
+          ...(enableUserFilters &&
+            selectedTags.length > 0 && { userSelectedTags: selectedTags }),
         },
         { signal, onStatus, context },
       );
     });
-  }, [context, inputText, audioBlob, run, reset, topK, sessionId]);
+  }, [
+    context,
+    inputText,
+    audioBlob,
+    run,
+    reset,
+    topK,
+    sessionId,
+    enableUserFilters,
+    selectedCategories,
+    selectedSubcategories,
+    selectedTags,
+  ]);
 
   const close = useCallback(async () => {
     setFeatureOpen(false);
     reset();
-    autoRunOnceRef.current = false;
+    //autoRunOnceRef.current = false;
     if (!showOpenButton) {
       onClose();
     }
@@ -344,6 +468,24 @@ const DocSearchBase: FC<Props> = (props) => {
     }
   }, [canSearch]);
 
+  // Reset session when main categories change
+  useEffect(() => {
+    const prev = prevSelectedCategoriesRef.current;
+    const current = selectedCategories;
+
+    // Check if categories changed (different length or different items)
+    const categoriesChanged =
+      prev.length !== current.length ||
+      !current.every((cat) => prev.includes(cat));
+
+    if (categoriesChanged && prev.length > 0) {
+      // Reset session only if we had categories before (not on initial mount)
+      reset();
+    }
+
+    prevSelectedCategoriesRef.current = [...current];
+  }, [selectedCategories, reset]);
+
   const grouped = useMemo(() => groupChunksByDoc(result), [result]);
 
   const docNumberMap = useMemo(() => {
@@ -423,7 +565,7 @@ const DocSearchBase: FC<Props> = (props) => {
     variation === "modal" ? Modal.Body : Group;
 
   useEffect(() => {
-    if (variation !== "modal") {
+    if (variation !== "modal" || !featureOpen) {
       return;
     }
     document.body.style.overflow = "hidden";
@@ -438,7 +580,7 @@ const DocSearchBase: FC<Props> = (props) => {
       document.body.style.overflow = "";
       document.body.onkeydown = null;
     };
-  }, [close, variation]);
+  }, [close, variation, featureOpen]);
 
   return (
     <>
@@ -487,6 +629,8 @@ const DocSearchBase: FC<Props> = (props) => {
             w="100%"
             style={{
               left: 0,
+              ...(variation === "modal" &&
+                !result?.result && { overflow: "visible" }),
             }}
           >
             {variation === "modal" && (
@@ -496,7 +640,14 @@ const DocSearchBase: FC<Props> = (props) => {
                 <Modal.CloseButton />
               </Modal.Header>
             )}
-            <BodyComponent w="100%" style={{ zIndex: 1001 }}>
+            <BodyComponent
+              w="100%"
+              style={{
+                zIndex: 1001,
+                ...(variation === "modal" &&
+                  !result?.result && { overflow: "visible" }),
+              }}
+            >
               <AiFeatureBorder
                 enabled={variation !== "modal"}
                 working={busy}
@@ -629,6 +780,160 @@ const DocSearchBase: FC<Props> = (props) => {
                       ) : null}
                     </Group>
 
+                    {/* Empty state */}
+                    {!busy && !error && !result?.result ? (
+                      <Text size="sm" c="dimmed" data-doc-search-no-results>
+                        {I18n.get("Enter a search query to start.")}
+                      </Text>
+                    ) : null}
+
+                    {/* User filter collapse */}
+                    {enableUserFilters &&
+                      metadataOptions &&
+                      hasValidFilterOptions && (
+                        <Stack gap="xs">
+                          <Button
+                            variant="subtle"
+                            size="xs"
+                            onClick={() => setFiltersOpen(!filtersOpen)}
+                            leftSection={
+                              filtersOpen ? (
+                                <IconChevronDown size={14} />
+                              ) : (
+                                <IconChevronRight size={14} />
+                              )
+                            }
+                            style={{ alignSelf: "flex-start" }}
+                          >
+                            {I18n.get("Filters")}
+                          </Button>
+
+                          <Collapse in={filtersOpen}>
+                            <Stack gap="md">
+                              {/* Main categories as checkboxes */}
+                              {Object.keys(metadataOptions.allowedCategories)
+                                .length > 0 && (
+                                <div>
+                                  <Text size="sm" fw={500} mb="xs">
+                                    {I18n.get("Categories")}
+                                  </Text>
+                                  <Group gap="md">
+                                    {Object.keys(
+                                      metadataOptions.allowedCategories,
+                                    ).map((category) => (
+                                      <Checkbox
+                                        key={category}
+                                        label={I18n.get(category)}
+                                        checked={selectedCategories.includes(
+                                          category,
+                                        )}
+                                        onChange={(e) => {
+                                          if (e.currentTarget.checked) {
+                                            setSelectedCategories([
+                                              ...selectedCategories,
+                                              category,
+                                            ]);
+                                          } else {
+                                            setSelectedCategories(
+                                              selectedCategories.filter(
+                                                (c) => c !== category,
+                                              ),
+                                            );
+                                            // Remove subcategories of unchecked category
+                                            const subcatsToRemove =
+                                              metadataOptions.allowedCategories[
+                                                category
+                                              ] || [];
+                                            setSelectedSubcategories(
+                                              selectedSubcategories.filter(
+                                                (sc) =>
+                                                  !subcatsToRemove.includes(sc),
+                                              ),
+                                            );
+                                          }
+                                        }}
+                                        disabled={busy || loadingMetadata}
+                                      />
+                                    ))}
+                                  </Group>
+                                </div>
+                              )}
+
+                              {/* Subcategories for selected categories */}
+                              {selectedCategories.length > 0 && (
+                                <div>
+                                  <Text size="sm" fw={500} mb="xs">
+                                    {I18n.get("Subcategories")}
+                                  </Text>
+                                  <Group gap="md">
+                                    {selectedCategories
+                                      .flatMap(
+                                        (cat) =>
+                                          metadataOptions.allowedCategories[
+                                            cat
+                                          ] || [],
+                                      )
+                                      .filter(
+                                        (subcat, index, self) =>
+                                          self.indexOf(subcat) === index,
+                                      )
+                                      .map((subcat) => (
+                                        <Checkbox
+                                          key={subcat}
+                                          label={I18n.get(subcat)}
+                                          checked={selectedSubcategories.includes(
+                                            subcat,
+                                          )}
+                                          onChange={(e) => {
+                                            if (e.currentTarget.checked) {
+                                              setSelectedSubcategories([
+                                                ...selectedSubcategories,
+                                                subcat,
+                                              ]);
+                                            } else {
+                                              setSelectedSubcategories(
+                                                selectedSubcategories.filter(
+                                                  (sc) => sc !== subcat,
+                                                ),
+                                              );
+                                            }
+                                          }}
+                                          disabled={busy || loadingMetadata}
+                                        />
+                                      ))}
+                                  </Group>
+                                </div>
+                              )}
+
+                              {/* Tags input */}
+                              {metadataOptions.allowedTags.length > 0 && (
+                                <MultiSelect
+                                  label={I18n.get("Tags")}
+                                  placeholder={I18n.get(
+                                    "Select or type tags...",
+                                  )}
+                                  data={metadataOptions.allowedTags.map(
+                                    (tag) => ({
+                                      value: tag,
+                                      label: I18n.get(tag),
+                                    }),
+                                  )}
+                                  value={selectedTags}
+                                  onChange={setSelectedTags}
+                                  searchValue={tagSearchValue}
+                                  onSearchChange={setTagSearchValue}
+                                  disabled={busy || loadingMetadata}
+                                  searchable
+                                  clearable
+                                  maxDropdownHeight={200}
+                                  limit={20}
+                                />
+                              )}
+                            </Stack>
+                          </Collapse>
+                        </Stack>
+                      )}
+
                     {
                       /* Audio level indicator when recording */ USE_AUDIO && (
                         <>
@@ -816,11 +1121,6 @@ const DocSearchBase: FC<Props> = (props) => {
                         </Stack>
                       </>
                     ) : null}
-                    {!busy && !error && !result?.result ? (
-                      <Text size="sm" c="dimmed" data-doc-search-no-results>
-                        {I18n.get("Enter a search query to start.")}
-                      </Text>
-                    ) : null}
                     <PoweredBy variation={variation} />
                   </Stack>
                 </Paper>

package/src/i18n/ar.ts

@@ -20,19 +20,20 @@ export const arDict: Record<string, string> = {
   "Ask me": "اسألني",
   Assistant: "المساعد",
   "Assistant is thinking…": "المساعد يفكر…",
-  "Audio message": "رسالة صوتية",
-  "Audio no longer available": "لم يعد الصوت متاحًا",
-  "Audio recorded": "تم تسجيل الصوت",
+  "Audio message": "",
+  "Audio no longer available": "",
+  "Audio recorded": "",
   auto: "آلي",
   "Auto-detect": "الكشف التلقائي",
   Cancel: "يلغي",
   Caption: "التسمية التوضيحية",
   Casual: "غير رسمي",
   casual: "غير رسمي",
+  Categories: "الفئات",
   "Checking capabilities…": "إمكانيات الفحص…",
   Chinese: "الصينية",
-  Clear: "مسح",
-  "Clear audio": "مسح الصوت",
+  Clear: "",
+  "Clear audio": "",
   "Click again to confirm": "انقر مرة أخرى للتأكيد",
   Close: "يغلق",
   "Close chat": "إغلاق الدردشة",
@@ -57,6 +58,7 @@ export const arDict: Record<string, string> = {
   "Enter a search query to start.": "أدخل عبارة بحث للبدء.",
   Error: "خطأ",
   Excerpt: "مقتطفات",
+  Filters: "عوامل التصفية",
   Formal: "رَسمِيّ",
   formal: "رَسمِيّ",
   French: "فرنسي",
@@ -77,7 +79,7 @@ export const arDict: Record<string, string> = {
   HTML: "HTML",
   Hungarian: "المجرية",
   "I'm ready to assist you.": "أنا جاهز لمساعدتك.",
-  "Image no longer available": "لم تعد الصورة متاحة",
+  "Image no longer available": "",
   Indonesian: "إندونيسيا",
   "Initializing on-device AI…": "جارٍ تهيئة الذكاء الاصطناعي على الجهاز…",
   "Inlining images as base64": "تضمين الصور بصيغة base64",
@@ -129,9 +131,10 @@ export const arDict: Record<string, string> = {
   "Ready.": "جاهز.",
   "Received backend response.": "تم استلام رد من الخادم الخلفي.",
   "Receiving response...": "جارٍ استلام الرد...",
-  Record: "تسجيل",
-  "Record audio": "تسجيل صوت",
-  "Recording...": "جارٍ التسجيل…",
+  Record: "",
+  "Record audio": "",
+  "Recorded audio:": "صوت مسجّل:",
+  "Recording...": "",
   Reference: "مرجع",
   References: "المراجع",
   Regenerate: "تجديد",
@@ -153,6 +156,7 @@ export const arDict: Record<string, string> = {
   "Search the documentation…": "ابحث في الوثائق…",
   "Search with AI-Kit": "البحث باستخدام مجموعة أدوات الذكاء الاصطناعي",
   "Searching…": "جارٍ البحث…",
+  "Select or type tags…": "اختر أو اكتب الوسوم…",
   Send: "إرسال",
   "Sending request to backend…": "إرسال الطلب إلى الواجهة الخلفية…",
   "Sending request to server...": "جارٍ إرسال الطلب إلى الخادم...",
@@ -165,13 +169,15 @@ export const arDict: Record<string, string> = {
   Sources: "مصادر",
   Spanish: "الأسبانية",
   Stop: "قف",
-  "Stop recording": "إيقاف التسجيل",
+  "Stop recording": "",
+  Subcategories: "الفئات الفرعية",
   "Suggested change": "التغيير المقترح",
   Summarize: "لخص",
   "Summarize again": "أعد التلخيص",
   "Summarize on Backend": "تلخيص على الواجهة الخلفية",
   Summarizing: "ملخص",
   Swedish: "السويدية",
+  Tags: "الوسوم",
   Teaser: "إعلان تشويقي",
   teaser: "إعلان تشويقي",
   Thai: "تايلاندي",

package/src/i18n/de.ts

@@ -20,19 +20,20 @@ export const deDict: Record<string, string> = {
   "Ask me": "Frag mich",
   Assistant: "Assistent",
   "Assistant is thinking…": "Der Assistent denkt nach…",
-  "Audio message": "Sprachnachricht",
-  "Audio no longer available": "Audio nicht mehr verfügbar",
-  "Audio recorded": "Audio aufgenommen",
+  "Audio message": "",
+  "Audio no longer available": "",
+  "Audio recorded": "",
   auto: "automatisch",
   "Auto-detect": "Automatisch erkennen",
   Cancel: "Abbrechen",
   Caption: "Bildunterschrift",
   Casual: "Locker",
   casual: "locker",
+  Categories: "Kategorien",
   "Checking capabilities…": "Fähigkeiten werden geprüft…",
   Chinese: "Chinesisch",
-  Clear: "Löschen",
-  "Clear audio": "Audio löschen",
+  Clear: "",
+  "Clear audio": "",
   "Click again to confirm": "Zum Bestätigen erneut klicken",
   Close: "Schließen",
   "Close chat": "Chat schließen",
@@ -57,6 +58,7 @@ export const deDict: Record<string, string> = {
   "Enter a search query to start.": "Geben Sie zunächst eine Suchanfrage ein.",
   Error: "Fehler",
   Excerpt: "Auszug",
+  Filters: "Filter",
   Formal: "Formell",
   formal: "formell",
   French: "Französisch",
@@ -77,7 +79,7 @@ export const deDict: Record<string, string> = {
   HTML: "HTML",
   Hungarian: "Ungarisch",
   "I'm ready to assist you.": "Ich bin bereit, dir zu helfen.",
-  "Image no longer available": "Bild nicht mehr verfügbar",
+  "Image no longer available": "",
   Indonesian: "Indonesisch",
   "Initializing on-device AI…": "On-Device-KI wird initialisiert…",
   "Inlining images as base64": "Bilder werden als Base64 eingebettet",
@@ -129,9 +131,10 @@ export const deDict: Record<string, string> = {
   "Ready.": "Bereit.",
   "Received backend response.": "Backend-Antwort erhalten.",
   "Receiving response...": "Antwort wird empfangen...",
-  Record: "Aufnehmen",
-  "Record audio": "Audio aufnehmen",
-  "Recording...": "Aufnahme…",
+  Record: "",
+  "Record audio": "",
+  "Recorded audio:": "Aufgenommenes Audio:",
+  "Recording...": "",
   Reference: "Referenz",
   References: "Referenzen",
   Regenerate: "Neu generieren",
@@ -153,6 +156,7 @@ export const deDict: Record<string, string> = {
   "Search the documentation…": "Durchsuchen Sie die Dokumentation…",
   "Search with AI-Kit": "Suche mit AI-Kit",
   "Searching…": "Suche…",
+  "Select or type tags…": "Tags auswählen oder eingeben…",
   Send: "Senden",
   "Sending request to backend…": "Anfrage wird an das Backend gesendet…",
   "Sending request to server...": "Anfrage wird an den Server gesendet...",
@@ -165,13 +169,15 @@ export const deDict: Record<string, string> = {
   Sources: "Quellen",
   Spanish: "Spanisch",
   Stop: "Stoppen",
-  "Stop recording": "Aufnahme stoppen",
+  "Stop recording": "",
+  Subcategories: "Unterkategorien",
   "Suggested change": "Vorgeschlagene Änderung",
   Summarize: "Zusammenfassen",
   "Summarize again": "Erneut zusammenfassen",
   "Summarize on Backend": "Serverseitig zusammenfassen",
   Summarizing: "Zusammenfassung",
   Swedish: "Schwedisch",
+  Tags: "Tags",
   Teaser: "Teaser",
   teaser: "Teaser",
   Thai: "Thailändisch",

package/src/i18n/en.ts

@@ -29,6 +29,7 @@ export const enDict: Record<string, string> = {
   Caption: "Caption",
   Casual: "Casual",
   casual: "casual",
+  Categories: "Categories",
   "Checking capabilities…": "Checking capabilities…",
   Chinese: "Chinese",
   Clear: "Clear",
@@ -57,6 +58,7 @@ export const enDict: Record<string, string> = {
   "Enter a search query to start.": "Enter a search query to start.",
   Error: "Error",
   Excerpt: "Excerpt",
+  Filters: "Filters",
   Formal: "Formal",
   formal: "formal",
   French: "French",
@@ -131,6 +133,7 @@ export const enDict: Record<string, string> = {
   "Receiving response...": "Receiving response...",
   Record: "Record",
   "Record audio": "Record audio",
+  "Recorded audio:": "Recorded audio:",
   "Recording...": "Recording...",
   Reference: "Reference",
   References: "References",
@@ -153,6 +156,7 @@ export const enDict: Record<string, string> = {
   "Search the documentation…": "Search the documentation…",
   "Search with AI-Kit": "Search with AI-Kit",
   "Searching…": "Searching…",
+  "Select or type tags…": "Select or type tags…",
   Send: "Send",
   "Sending request to backend…": "Sending request to backend…",
   "Sending request to server...": "Sending request to server...",
@@ -166,12 +170,14 @@ export const enDict: Record<string, string> = {
   Spanish: "Spanish",
   Stop: "Stop",
   "Stop recording": "Stop recording",
+  Subcategories: "Subcategories",
   "Suggested change": "Suggested change",
   Summarize: "Summarize",
   "Summarize again": "Summarize again",
   "Summarize on Backend": "Summarize on Backend",
   Summarizing: "Summarizing",
   Swedish: "Swedish",
+  Tags: "Tags",
   Teaser: "Teaser",
   teaser: "teaser",
   Thai: "Thai",