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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "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.5",
     "@smart-cloud/wpsuite-core": "^2.2.6",
     "@tabler/icons-react": "^3.36.1",
     "chroma-js": "^3.2.0",

package/src/doc-search/DocSearch.tsx

@@ -26,7 +26,7 @@ import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 
-import { IconSearch } from "@tabler/icons-react";
+import { IconSearch, IconX } from "@tabler/icons-react";
 import { IconMicrophone, IconMicrophoneOff } from "@tabler/icons-react";
 
 import { AiFeatureBorder } from "../ai-feature/AiFeatureBorder";
@@ -69,6 +69,11 @@ const DocSearchBase: FC<Props> = (props) => {
     autoRun = true,
     context,
     title,
+    showOpenButton = false,
+    openButtonTitle,
+    showOpenButtonTitle = true,
+    openButtonIcon,
+    showOpenButtonIcon = true,
     searchButtonIcon,
     showSearchButtonTitle = true,
     showSearchButtonIcon = true,
@@ -82,17 +87,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);
@@ -142,10 +140,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 +153,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 {
@@ -428,7 +423,7 @@ const DocSearchBase: FC<Props> = (props) => {
     variation === "modal" ? Modal.Body : Group;
 
   useEffect(() => {
-    if (variation !== "modal" || !featureOpen) {
+    if (variation !== "modal") {
       return;
     }
     document.body.style.overflow = "hidden";
@@ -454,13 +449,13 @@ const DocSearchBase: FC<Props> = (props) => {
             (openButtonIcon ? (
               <span dangerouslySetInnerHTML={{ __html: openButtonIcon }} />
             ) : (
-              getOpenButtonDefaultIcon()
+              <IconSearch size={18} />
             ))
           }
           className={
             showOpenButtonTitle
-              ? "doc-search-open-button"
-              : "doc-search-open-button-no-title"
+              ? "ai-feature-open-button"
+              : "ai-feature-open-button-no-title"
           }
           variant={"filled"}
           disabled={featureOpen}
@@ -510,9 +505,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">