@archbee/app-widget 1.1.23 → 1.1.24

package/README.md

@@ -104,11 +104,18 @@ ReactDOM.render(<App />, appElement);
 | `jwt`             | `string`         | `optional` | Pass the jwt token in order to see jwt protected docs.
 | `shareableToken`  | `string`         | `optional` | Pass the shareableToken from your private links to protect your docs.
 | `className`       | `string`         | `optional` | Pass CSS classes to the `div` wrapper
-| `widgetType`      | `docs \| search` | `optional` | Default value is `docs``. This opens the widget with the desired behaviour. `docs`` type will open the widget with the default behaviour, `search` will open a search widget bar that shows a search bar with AI support (if included in your subscription)
-| `loadingStrategy` | `eager \| lazy`  | `optional` | Default value is `lazy`. Loading strategy method for widget loading.
+| `widgetType`      | `docs \| search` | `optional` | Default value is `docs`. This opens the widget with the desired behaviour. `docs`` type will open the widget with the default behaviour, `search` will open a search widget bar that shows a search bar with AI support (if included in your subscription)
+| `bubble`          | `ask \| invisible` | `optional` | Default value is `invisible`. This prop will display an ask bubble in the bottom-right of your screen. Whenever someone clicks on it, the search widget will open.
+| `loadingStrategy` | `eager \| lazy`  | `optional` | Default value is `lazy`. While `lazy` loading delays the initialization of a resource, `eager` loading initializes or loads the widget as soon as the code is executed.
 | `onWidgetOpen`    | `void`           | `optional` | Callback that is called after widget opens.
 | `onWidgetClose`   | `void`           | `optional` | Callback that is called after widget closes.
     
+## Bubble
+
+Use `bubble` prop whenever you want an easy search button to browse your entire documentation.
+
+![Ask search bubble](https://archbee.imgix.net/bNBm7nPJgXjbjLyfbHNh2/3AB9jiOJuhR9OtFAE19QP_screenshot-2024-03-22-at-172311.png)
+
 ## Ref Methods
 
 If `ref` is not passed to `ArchbeeAppWidget`, the children will automatically open the modal popup upon click. 
@@ -119,7 +126,6 @@ If `ref` is not passed to `ArchbeeAppWidget`, the children will automatically op
 | `close`    | `method` | Closes widget programatically.
 | `instance` | `method` | Returns the instance of the widget.
 
-
 ## Demos
 
 Down below is a demo setup in [CodeSandbox](https://codesandbox.io/), which

package/index.js

@@ -25,6 +25,65 @@ $parcel$export(module.exports, "ArchbeeAppWidget", function () { return $3454c31
 
 
 
+const $24928a7e91a52dac$export$82eafebb825fc23f = ({ className: className, size: size = 24 })=>{
+    return /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)("svg", {
+        className: className,
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)("path", {
+            d: "M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+};
+
+
+const $71c11890332f76f6$export$890c0998c02c05a7 = ({ isModalOpen: isModalOpen, openAskBubbleModal: openAskBubbleModal })=>{
+    return /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)("div", {
+        className: "ab-ask-bubble",
+        onClick: openAskBubbleModal,
+        style: isModalOpen ? {
+            zIndex: 0
+        } : {},
+        children: /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsxs)("div", {
+            className: "ab-ask-bubble-wrapper",
+            children: [
+                /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)("div", {
+                    className: "ab-ask-notification"
+                }),
+                /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)("div", {
+                    className: "ab-ask-bubble-icon",
+                    children: /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)((0, $24928a7e91a52dac$export$82eafebb825fc23f), {})
+                }),
+                /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsxs)("div", {
+                    className: "ab-ask-bubble-content",
+                    children: [
+                        /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)("div", {
+                            className: "ab-ask-bubble-title",
+                            children: "Ask a question"
+                        }),
+                        /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)("div", {
+                            className: "ab-ask-bubble-subtitle",
+                            children: "Powered by Archbee"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+
+
+
+
+
 const $7d0ac34aa5949d25$export$15a92cf792322942 = {
     animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
 };
@@ -320,20 +379,33 @@ const $91b786905c14e19d$export$86fbec116b87613f = ()=>{
         window._archbee.widget.blockId = undefined;
         window.dispatchEvent((0, $5ea18ff364e1e223$export$c6414d05a79532c3)());
     };
+    const openAskBubbleModal = ()=>{
+        window._archbee.widget.isOpen = true;
+        window._archbee.widget.widgetType = "search";
+        window.dispatchEvent((0, $5ea18ff364e1e223$export$4eadcc42fc7554ad)());
+    };
     (0, $cD94P$react.useEffect)(()=>{
         (0, ($parcel$interopDefault($cD94P$reactmodal))).setAppElement("#archbee-docs-widget-modal");
     }, []);
-    return /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)("div", {
-        id: "archbee-docs-widget-modal",
-        children: isModalOpen && /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)((0, $d0b8a7ae25f50023$export$a65e3ebe24ca6cb5), {
-            docId: docId || "",
-            blockId: blockId || "",
-            spaceId: window._archbee.widget.spaceId || window._archbee.widget.collectionId || "",
-            jwt: jwt,
-            shareableToken: shareableToken,
-            screen: initialScreen,
-            onClose: closeModal
-        })
+    return /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsxs)((0, $cD94P$reactjsxruntime.Fragment), {
+        children: [
+            window._archbee.widget.bubble === "ask" && /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)((0, $71c11890332f76f6$export$890c0998c02c05a7), {
+                isModalOpen: isModalOpen,
+                openAskBubbleModal: openAskBubbleModal
+            }),
+            /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)("div", {
+                id: "archbee-docs-widget-modal",
+                children: isModalOpen && /*#__PURE__*/ (0, $cD94P$reactjsxruntime.jsx)((0, $d0b8a7ae25f50023$export$a65e3ebe24ca6cb5), {
+                    docId: docId || "",
+                    blockId: blockId || "",
+                    spaceId: window._archbee.widget.spaceId || window._archbee.widget.collectionId || "",
+                    jwt: jwt,
+                    shareableToken: shareableToken,
+                    screen: initialScreen,
+                    onClose: closeModal
+                })
+            })
+        ]
     });
 };
 var $91b786905c14e19d$export$2e2bcd8739ae039 = $91b786905c14e19d$export$86fbec116b87613f;
@@ -451,7 +523,7 @@ const $ef43c9dfc50ce6f2$export$daaeb3f1095d12b8 = (loadingStrategy)=>{
     const script = document.getElementsByTagName("script")[0];
     script === null || script === void 0 ? void 0 : (_script_parentNode = script.parentNode) === null || _script_parentNode === void 0 ? void 0 : _script_parentNode.insertBefore(scripttag, script);
 };
-const $ef43c9dfc50ce6f2$export$2d47b06a7861ac47 = (spaceId, jwt, shareableToken, loadingStrategy = "lazy")=>{
+const $ef43c9dfc50ce6f2$export$2d47b06a7861ac47 = (spaceId, jwt, shareableToken, loadingStrategy = "lazy", bubble = "invisible")=>{
     if (!window._archbee) {
         // @ts-expect-error
         window._archbee = window._archbee || {
@@ -464,7 +536,8 @@ const $ef43c9dfc50ce6f2$export$2d47b06a7861ac47 = (spaceId, jwt, shareableToken,
             eventType: "init",
             spaceId: spaceId,
             jwt: jwt,
-            shareableToken: shareableToken
+            shareableToken: shareableToken,
+            bubble: bubble
         });
         $ef43c9dfc50ce6f2$export$daaeb3f1095d12b8(loadingStrategy);
     }
@@ -474,16 +547,17 @@ const $ef43c9dfc50ce6f2$export$2d47b06a7861ac47 = (spaceId, jwt, shareableToken,
 
 
 
-const $3454c312fc43187e$export$d1cc455138316794 = /*#__PURE__*/ (0, $cD94P$react.forwardRef)(({ className: className, spaceId: spaceId, jwt: jwt, shareableToken: shareableToken, docId: docId, blockId: blockId, widgetType: widgetType = "docs", loadingStrategy: loadingStrategy = "lazy", onWidgetOpen: onWidgetOpen, onWidgetClose: onWidgetClose, children: children }, ref)=>{
+const $3454c312fc43187e$export$d1cc455138316794 = /*#__PURE__*/ (0, $cD94P$react.forwardRef)(({ className: className, spaceId: spaceId, jwt: jwt, shareableToken: shareableToken, docId: docId, blockId: blockId, widgetType: widgetType = "docs", loadingStrategy: loadingStrategy = "lazy", onWidgetOpen: onWidgetOpen, onWidgetClose: onWidgetClose, bubble: bubble, children: children }, ref)=>{
     const elementRef = (0, $cD94P$react.useRef)(null);
     const widgetInstance = (0, $cD94P$react.useMemo)(()=>{
         if (typeof window === "undefined") return;
-        return (0, $ef43c9dfc50ce6f2$export$2d47b06a7861ac47)(spaceId, jwt, shareableToken, loadingStrategy);
+        return (0, $ef43c9dfc50ce6f2$export$2d47b06a7861ac47)(spaceId, jwt, shareableToken, loadingStrategy, bubble);
     }, [
         spaceId,
         jwt,
         shareableToken,
-        loadingStrategy
+        loadingStrategy,
+        bubble
     ]);
     (0, $cD94P$react.useImperativeHandle)(ref, ()=>{
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archbee/app-widget",
-  "version": "1.1.23",
+  "version": "1.1.24",
   "private": false,
   "license": "UNLICENSED",
   "author": {

package/types.d.ts

@@ -29,9 +29,11 @@ interface AbWidgetData {
     hasExecuted: boolean;
     jwt?: string;
     shareableToken?: string;
-    widgetType?: ScreenType;
+    widgetType?: WidgetType;
+    bubble?: BubbleType;
 }
-type ScreenType = 'docs' | 'search';
+type BubbleType = 'ask' | 'invisible';
+type WidgetType = 'docs' | 'search';
 interface AbWidgetRef {
     open: () => void;
     close: () => void;
@@ -43,7 +45,8 @@ type Props = {
     jwt?: string;
     className?: string;
     shareableToken?: string;
-    widgetType: ScreenType;
+    widgetType: WidgetType;
+    bubble?: BubbleType;
     blockId?: string;
     user?: {
         id: string;