@smart-cloud/ai-kit-ui 1.3.5 → 1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "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.3",
+    "@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 } 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);
 
@@ -69,12 +81,20 @@ const DocSearchBase: FC<Props> = (props) => {
     autoRun = true,
     context,
     title,
+    showOpenButton = false,
+    openButtonTitle,
+    showOpenButtonTitle = true,
+    openButtonIcon,
+    showOpenButtonIcon = true,
     searchButtonIcon,
     showSearchButtonTitle = true,
     showSearchButtonIcon = true,
     showSources = true,
     topK = 10,
     getSearchText,
+    enableUserFilters = false,
+    availableCategories,
+    availableTags,
 
     variation,
     rootElement,
@@ -82,17 +102,10 @@ const DocSearchBase: FC<Props> = (props) => {
     language,
     onClose,
     onClickDoc,
-
-    // Open button props (from AiWorkerProps)
-    showOpenButton = false,
-    openButtonTitle,
-    openButtonIcon,
-    showOpenButtonTitle = true,
-    showOpenButtonIcon = true,
   } = props;
 
-  const [query, setQuery] = useState<string>("");
   const [featureOpen, setFeatureOpen] = useState<boolean>(!showOpenButton);
+  const [query, setQuery] = useState<string>("");
   const [recording, setRecording] = useState<boolean>(false);
   const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
   const [audioLevel, setAudioLevel] = useState<number>(0);
@@ -100,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
@@ -142,10 +169,6 @@ const DocSearchBase: FC<Props> = (props) => {
     return I18n.get(title || "Search with AI-Kit");
   }, [language]);
 
-  const getOpenButtonDefaultIcon = useCallback((className?: string) => {
-    return <IconSearch className={className} size={18} />;
-  }, []);
-
   const statusText = useMemo(() => {
     const e: AiKitStatusEvent | null = statusEvent;
     if (!e) return null;
@@ -159,10 +182,11 @@ const DocSearchBase: FC<Props> = (props) => {
 
   const canSearch = useMemo(() => {
     if (busy) return false;
+    if (!featureOpen) return false;
     // Can search if we have text OR audio
     const text = typeof inputText === "function" ? inputText() : inputText;
     return Boolean((text && text.trim().length > 0) || audioBlob);
-  }, [inputText, busy, audioBlob]);
+  }, [inputText, busy, audioBlob, featureOpen]);
 
   const startRecording = useCallback(async () => {
     try {
@@ -270,6 +294,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;
 
@@ -318,16 +404,39 @@ const DocSearchBase: FC<Props> = (props) => {
           ...(q && { query: q }),
           ...(audioBlob && { audio: audioBlob }), // Pass Blob directly
           topK,
+          // Include user-selected filters if enabled
+          ...(enableUserFilters &&
+            selectedCategories.length > 0 && {
+              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();
     }
@@ -443,7 +552,7 @@ const DocSearchBase: FC<Props> = (props) => {
       document.body.style.overflow = "";
       document.body.onkeydown = null;
     };
-  }, [close, variation]);
+  }, [close, variation, featureOpen]);
 
   return (
     <>
@@ -454,13 +563,13 @@ const DocSearchBase: FC<Props> = (props) => {
             (openButtonIcon ? (
               <span dangerouslySetInnerHTML={{ __html: openButtonIcon }} />
             ) : (
-              getOpenButtonDefaultIcon()
+              <IconSearch size={18} />
             ))
           }
           className={
             showOpenButtonTitle
-              ? "doc-search-button"
-              : "doc-search-button-no-title"
+              ? "ai-feature-open-button"
+              : "ai-feature-open-button-no-title"
           }
           variant={"filled"}
           disabled={featureOpen}
@@ -492,6 +601,8 @@ const DocSearchBase: FC<Props> = (props) => {
             w="100%"
             style={{
               left: 0,
+              ...(variation === "modal" &&
+                !result?.result && { overflow: "visible" }),
             }}
           >
             {variation === "modal" && (
@@ -501,7 +612,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}
@@ -510,9 +628,37 @@ const DocSearchBase: FC<Props> = (props) => {
                 <Paper shadow="sm" radius="md" p="md">
                   <Stack gap="sm">
                     {variation !== "modal" && (
-                      <Title order={4} style={{ margin: 0 }}>
-                        {I18n.get(defaultTitle)}
-                      </Title>
+                      <Group justify="space-between">
+                        <Title order={4} style={{ margin: 0 }}>
+                          {I18n.get(defaultTitle)}
+                        </Title>
+                        {showOpenButton && (
+                          <Button
+                            variant="subtle"
+                            color="gray"
+                            size="xs"
+                            onClick={close}
+                            style={{
+                              minWidth: 32,
+                              padding: 0,
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                            }}
+                            aria-label={I18n.get("Close")}
+                          >
+                            <IconX
+                              size={18}
+                              style={{
+                                color:
+                                  colorMode === "dark"
+                                    ? "var(--mantine-color-dark-1)"
+                                    : "var(--mantine-color-gray-7)",
+                              }}
+                            />
+                          </Button>
+                        )}
+                      </Group>
                     )}
 
                     <Group gap="sm" align="flex-end" wrap="nowrap">
@@ -606,6 +752,151 @@ 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 && (
+                      <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={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={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}
+                                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 && (
                         <>
@@ -793,11 +1084,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",