@brainfish-ai/components 0.16.8-alpha.1 → 0.16.8

package/dist/esm/chunks/{ChatSearch.vdzOknzC.js → ChatSearch.D8_9CRIM.js}

@@ -5203,6 +5203,7 @@ function Header({
   onToggleSizeButtonClick,
   onBackButtonClick,
   onCloseWidgetClick,
+  isSearchWidget,
   className,
   ...props
 }) {
@@ -5222,6 +5223,7 @@ function Header({
         "md:hidden",
         "@3xl:bg-transparent @3xl:h-auto @3xl:leading-normal",
         "@3xl:justify-center @3xl:space-y-4 @3xl:p-0",
+        isSearchWidget ? "hidden bg-transparent" : "",
         className
       ),
       ...props
@@ -5232,7 +5234,10 @@ function Header({
         initial: { opacity: 0, y: 20 },
         animate: { opacity: 1, y: 0 },
         transition: { duration: 0.5, delay: 0.3 },
-        className: "@3xl:text-5xl m-0 text-primary-foreground @3xl:text-foreground flex gap-1 items-center font-bold text-base"
+        className: cn(
+          "m-0 text-primary-foreground @3xl:text-foreground flex gap-1 items-center font-bold text-base",
+          isSearchWidget ? "" : "@3xl:text-5xl"
+        )
       },
       isDirty && /* @__PURE__ */ React__default.createElement(
         Button,
@@ -5241,14 +5246,14 @@ function Header({
           variant: "ghost",
           onClick: onBackButtonClick,
           "aria-label": "Go back",
-          className: "@3xl:hidden shrink-0",
+          className: cn("shrink-0", isSearchWidget ? "" : "@3xl:hidden"),
           disabled: isSearching
         },
         /* @__PURE__ */ React__default.createElement(ArrowLeft, null)
       ),
       /* @__PURE__ */ React__default.createElement("span", null, headerText)
     ),
-    /* @__PURE__ */ React__default.createElement("div", { className: "@3xl:hidden shrink-0" }, !hideExpandButton && /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: "@3xl:hidden shrink-0", "data-name": "HeaderButtons" }, !hideExpandButton && /* @__PURE__ */ React__default.createElement(
       Button,
       {
         size: "icon",
@@ -5280,7 +5285,7 @@ const defaultTextConfig = {
   loadingSearchText: "Searching for relevant content...",
   loadingAnswerText: "Crafting a response...",
   errorText: "Sorry, there was an error generating the answer.",
-  followUpPlaceholder: "Ask follow-up",
+  followUpPlaceholder: "Type your response or follow-up",
   positiveAnswerText: "Helpful",
   negativeAnswerText: "Not helpful",
   uncertaintyFallbackText: {
@@ -5997,43 +6002,54 @@ const ChatSearchComponent = forwardRef(
     useEffect(() => {
       const container = containerRef.current;
       if (!container || !isSearchWidget) return;
-      const scrollAreaViewport = container;
       let lastSentHeight = 0;
-      const sendResize = () => {
-        let contentHeight = 0;
-        if (scrollAreaViewport) {
-          const innerContent = scrollAreaViewport.firstElementChild;
-          contentHeight = innerContent ? innerContent.scrollHeight : scrollAreaViewport.scrollHeight;
-        } else {
-          contentHeight = container.scrollHeight;
-        }
-        const footerHeight = 40;
+      let rafId = null;
+      const calculateTotalHeight = () => {
+        const innerContent2 = container.firstElementChild;
+        const contentHeight = innerContent2?.scrollHeight ?? container.scrollHeight;
+        const footerHeight = document.querySelector('[data-name="BrandFooter"]')?.clientHeight ?? 0;
+        const headerHeight = document.querySelector('[data-name="Header"]')?.clientHeight ?? 0;
         const followUpHeight = showResults && showFollowUp ? 70 : 0;
-        const newHeight = contentHeight + footerHeight + followUpHeight;
-        if (newHeight > 0 && newHeight !== lastSentHeight) {
-          lastSentHeight = newHeight;
+        const verticalPadding = 32;
+        const chatSearchHeight = document.querySelector('[data-name="ChatSearch"]')?.clientHeight ?? 0;
+        const totalHeight = contentHeight + footerHeight + followUpHeight + headerHeight + verticalPadding;
+        return Math.max(totalHeight, chatSearchHeight);
+      };
+      const sendResize = () => {
+        const totalHeight = calculateTotalHeight();
+        if (totalHeight > 0 && totalHeight !== lastSentHeight) {
+          lastSentHeight = totalHeight;
           window.parent.postMessage(
             {
               type: "RESIZE_IFRAME",
-              height: newHeight,
+              height: totalHeight,
               widgetKey: apiKey
             },
             "*"
           );
         }
       };
-      const timeoutId = setTimeout(sendResize, 100);
-      const resizeObserver = new ResizeObserver(() => {
-        requestAnimationFrame(() => {
+      const handleResize = () => {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+        rafId = requestAnimationFrame(() => {
           sendResize();
+          rafId = null;
         });
-      });
-      if (scrollAreaViewport?.firstElementChild) {
-        resizeObserver.observe(scrollAreaViewport.firstElementChild);
+      };
+      const timeoutId = setTimeout(sendResize, 100);
+      const resizeObserver = new ResizeObserver(handleResize);
+      const innerContent = container.firstElementChild;
+      if (innerContent) {
+        resizeObserver.observe(innerContent);
       }
       resizeObserver.observe(container);
       return () => {
         clearTimeout(timeoutId);
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
         resizeObserver.disconnect();
       };
     }, [isSearchWidget, apiKey, showResults, showFollowUp]);
@@ -6048,9 +6064,10 @@ const ChatSearchComponent = forwardRef(
         "data-name": "ChatSearch",
         style
       },
-      (isWidgetMode || !showResults) && !isSearchWidget && /* @__PURE__ */ React__default.createElement(
+      (isWidgetMode || !showResults) && /* @__PURE__ */ React__default.createElement(
         Header,
         {
+          isSearchWidget,
           "data-name": "Header",
           headerText: mergedTextConfig.headerText,
           onToggleSizeButtonClick: () => {
@@ -6058,158 +6075,177 @@ const ChatSearchComponent = forwardRef(
           },
           onBackButtonClick: () => void createNewThread(),
           onCloseWidgetClick: () => onCloseWidget?.(),
-          className: "@3xl:mb-4"
+          className: cn("@3xl:mb-4", showResults ? "!block" : "hidden")
         }
       ),
-      /* @__PURE__ */ React__default.createElement(ScrollArea, { className: "w-full relative h-auto flex-grow", ref: containerRef }, /* @__PURE__ */ React__default.createElement(AnimatePresence, null, isLoadingConversation ? /* @__PURE__ */ React__default.createElement(LoadingConversation, null) : !showResults ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-        motion.div,
+      /* @__PURE__ */ React__default.createElement(
+        ScrollArea,
         {
-          key: "search",
-          initial: { opacity: 0, y: 20 },
-          animate: { opacity: 1, y: 0 },
-          transition: { duration: 0.5 },
-          className: "w-full md:space-y-4"
+          className: "w-full relative h-auto flex-grow [&>[data-radix-scroll-area-viewport]>div:first-child]:!block",
+          ref: containerRef
         },
-        /* @__PURE__ */ React__default.createElement("div", { className: cn(
-          "pb-4",
-          isSearchWidget ? "bg-transparent p-3 md:p-0" : "px-3 bg-primary md:p-0 md:bg-transparent"
-        ) }, /* @__PURE__ */ React__default.createElement(
+        /* @__PURE__ */ React__default.createElement(AnimatePresence, null, isLoadingConversation ? /* @__PURE__ */ React__default.createElement(LoadingConversation, null) : !showResults ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
           motion.div,
           {
+            key: "search",
             initial: { opacity: 0, y: 20 },
             animate: { opacity: 1, y: 0 },
-            transition: { duration: 0.5, delay: 0.4 }
+            transition: { duration: 0.5 },
+            className: "w-full md:space-y-4"
           },
           /* @__PURE__ */ React__default.createElement(
-            PrimarySearch,
+            "div",
             {
-              ref: primarySearchRef,
-              query,
-              onQueryChange: (value) => {
-                setQuery(value);
-                if (primaryTextareaRef.current) {
-                  adjustTextareaHeight(primaryTextareaRef.current);
-                }
+              className: cn(
+                "pb-4",
+                isSearchWidget ? "bg-transparent p-3 md:p-0" : "px-3 bg-primary md:p-0 md:bg-transparent"
+              )
+            },
+            /* @__PURE__ */ React__default.createElement(
+              motion.div,
+              {
+                initial: { opacity: 0, y: 20 },
+                animate: { opacity: 1, y: 0 },
+                transition: { duration: 0.5, delay: 0.4 }
               },
-              onSearch: () => void handlePrimarySearch(),
-              textConfig: mergedTextConfig,
-              collections,
-              currentCollectionId,
-              onCollectionChange: handleCollectionChange,
-              allowedRegions,
-              currentRegion,
-              onRegionChange: handleRegionChange,
-              apiKey,
-              fetchRegionConfig,
-              disableImageAttachment,
-              attachedImages,
-              onImageUpload: handleImageUpload,
-              onRemoveImage: removeImage,
-              isSearching,
-              autocompleteSuggestions,
-              onAutocompleteSuggestionSelect: handleAutocompleteSuggestionClick
-            }
-          )
-        )),
-        /* @__PURE__ */ React__default.createElement(
-          Suggestions,
-          {
-            suggestions: initialSuggestions,
-            onQuestionClick: handleSuggestedQuestionClick,
-            title: mergedTextConfig.suggestionsTitle
-          }
-        ),
-        isWidgetMode && bodyActionButtons && bodyActionButtons.length > 0 && /* @__PURE__ */ React__default.createElement("div", { className: "mt-4 mb-4 px-3 @3xl:px-0" }, /* @__PURE__ */ React__default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React__default.createElement(
-          NextBestActions,
-          {
-            nextBestActions: bodyActionButtons || [],
-            onActionClick: (action) => handleNextBestActionClick({
-              action,
-              searchQueryId: "",
-              query: "",
-              answer: ""
-            })
-          }
-        )))
-      )) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-        motion.div,
-        {
-          key: "results",
-          initial: { opacity: 0 },
-          animate: { opacity: 1 },
-          exit: { opacity: 0 },
-          transition: { duration: 0.5 },
-          className: "w-full max-w-[100vw] space-y-4 p-3 md:p-0"
-        },
-        answers.map((answer, i) => /* @__PURE__ */ React__default.createElement(
-          motion.div,
-          {
-            key: i,
-            ref: (el) => answerRefs.current[i] = el,
-            initial: { opacity: 0, y: 20 },
-            animate: { opacity: 1, y: 0 },
-            transition: { duration: 0.5, delay: i * 0.1 },
-            className: "space-y-4 last:!mb-8"
-          },
+              /* @__PURE__ */ React__default.createElement(
+                PrimarySearch,
+                {
+                  ref: primarySearchRef,
+                  query,
+                  onQueryChange: (value) => {
+                    setQuery(value);
+                    if (primaryTextareaRef.current) {
+                      adjustTextareaHeight(primaryTextareaRef.current);
+                    }
+                  },
+                  onSearch: () => void handlePrimarySearch(),
+                  textConfig: mergedTextConfig,
+                  collections,
+                  currentCollectionId,
+                  onCollectionChange: handleCollectionChange,
+                  allowedRegions,
+                  currentRegion,
+                  onRegionChange: handleRegionChange,
+                  apiKey,
+                  fetchRegionConfig,
+                  disableImageAttachment,
+                  attachedImages,
+                  onImageUpload: handleImageUpload,
+                  onRemoveImage: removeImage,
+                  isSearching,
+                  autocompleteSuggestions,
+                  onAutocompleteSuggestionSelect: handleAutocompleteSuggestionClick
+                }
+              )
+            )
+          ),
           /* @__PURE__ */ React__default.createElement(
-            Answer,
+            Suggestions,
             {
-              index: i,
-              blocks: answer.blocks,
-              question: answer.question,
-              state: answer.state,
-              searchResults: answer.searchResults,
-              searchQueryId: answer.searchQueryId,
-              searchIntentId: answer.searchIntentId,
-              feedback: answer.feedback,
-              onFeedback: (response) => void handleFeedback(response, answer.searchQueryId, i),
-              disableFeedback,
-              textConfig: mergedTextConfig,
-              redirectRules,
-              nextBestActions,
-              actions: answer.actions,
-              handleActionClick: handleNextBestActionClick,
-              isLastAnswer: i === answers.length - 1,
-              onFeedbackReasonSubmit: (reason) => void handleFeedbackReasonSubmit(reason, answer.searchQueryId)
+              suggestions: initialSuggestions,
+              onQuestionClick: handleSuggestedQuestionClick,
+              title: mergedTextConfig.suggestionsTitle
             }
           ),
-          i === answers.length - 1 && !disableFollowUpQuestions && answer.followUpQuestions && answer.state === "completed" && /* @__PURE__ */ React__default.createElement(
-            FollowUpQuestions,
+          isWidgetMode && bodyActionButtons && bodyActionButtons.length > 0 && /* @__PURE__ */ React__default.createElement("div", { className: "mt-4 mb-4 px-3 @3xl:px-0" }, /* @__PURE__ */ React__default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React__default.createElement(
+            NextBestActions,
             {
-              questions: answer.followUpQuestions,
-              onQuestionClick: handleFollowUpQuestionClick
+              nextBestActions: bodyActionButtons || [],
+              onActionClick: (action) => handleNextBestActionClick({
+                action,
+                searchQueryId: "",
+                query: "",
+                answer: ""
+              })
             }
-          )
-        ))
-      ))), showResults && answers.length > 1 && /* @__PURE__ */ React__default.createElement("div", { className: "hidden lg:block" }, /* @__PURE__ */ React__default.createElement(
-        TimelineNavigation,
-        {
-          questions: answers.map((a) => a.question),
-          activeIndex: activeAnswerIndex,
-          onNavigate: (index) => {
-            setActiveAnswerIndex(index);
-            scrollToAnswer(index);
+          )))
+        )) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+          motion.div,
+          {
+            key: "results",
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.5 },
+            className: "w-full max-w-[100vw] space-y-4 p-3 md:p-0"
           },
-          offset
-        }
-      )), disclaimer && isWidgetMode && !(showResults && showFollowUp) && /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          "data-name": "disclaimer",
-          className: "mt-2 px-3 @3xl:px-0 text-xs text-dark-500 dark:text-dark-400 flex items-center gap-1 absolute bottom-12 justify-center text-center w-full md:static md:mt-4 md:text-left md:flex md:gap-4 leading-5"
-        },
-        /* @__PURE__ */ React__default.createElement(MemoizedIcon, { iconName: "Info", className: "size-4" }),
-        /* @__PURE__ */ React__default.createElement(
-          MemoizedReactMarkdown,
+          answers.map((answer, i) => /* @__PURE__ */ React__default.createElement(
+            motion.div,
+            {
+              key: i,
+              ref: (el) => answerRefs.current[i] = el,
+              initial: { opacity: 0, y: 20 },
+              animate: { opacity: 1, y: 0 },
+              transition: { duration: 0.5, delay: i * 0.1 },
+              className: "space-y-4 last:!mb-8"
+            },
+            /* @__PURE__ */ React__default.createElement(
+              Answer,
+              {
+                index: i,
+                blocks: answer.blocks,
+                question: answer.question,
+                state: answer.state,
+                searchResults: answer.searchResults,
+                searchQueryId: answer.searchQueryId,
+                searchIntentId: answer.searchIntentId,
+                feedback: answer.feedback,
+                onFeedback: (response) => void handleFeedback(response, answer.searchQueryId, i),
+                disableFeedback,
+                textConfig: mergedTextConfig,
+                redirectRules,
+                nextBestActions,
+                actions: answer.actions,
+                handleActionClick: handleNextBestActionClick,
+                isLastAnswer: i === answers.length - 1,
+                onFeedbackReasonSubmit: (reason) => void handleFeedbackReasonSubmit(reason, answer.searchQueryId)
+              }
+            ),
+            i === answers.length - 1 && !disableFollowUpQuestions && answer.followUpQuestions && answer.state === "completed" && /* @__PURE__ */ React__default.createElement(
+              FollowUpQuestions,
+              {
+                questions: answer.followUpQuestions,
+                onQuestionClick: handleFollowUpQuestionClick
+              }
+            )
+          ))
+        ))),
+        showResults && answers.length > 1 && /* @__PURE__ */ React__default.createElement("div", { className: "hidden lg:block" }, /* @__PURE__ */ React__default.createElement(
+          TimelineNavigation,
+          {
+            questions: answers.map((a) => a.question),
+            activeIndex: activeAnswerIndex,
+            onNavigate: (index) => {
+              setActiveAnswerIndex(index);
+              scrollToAnswer(index);
+            },
+            offset
+          }
+        )),
+        disclaimer && isWidgetMode && !(showResults && showFollowUp) && /* @__PURE__ */ React__default.createElement(
+          "div",
           {
-            className: "[&_a]:underline [&_a:hover]:no-underline",
-            remarkPlugins: markdownRemarkPlugins,
-            rehypePlugins: markdownRehypePlugins,
-            components: markdownComponents
+            "data-name": "disclaimer",
+            className: cn(
+              "mt-2 px-3 @3xl:px-0 text-xs text-dark-500 dark:text-dark-400 flex items-center gap-1 justify-center text-center w-full md:static md:mt-4 md:text-left md:flex md:gap-4 leading-5",
+              isSearchWidget ? "static mb-2 md:text-left [&>svg]:flex-shrink-0" : "absolute bottom-12"
+            )
           },
-          disclaimer
-        )
-      ), /* @__PURE__ */ React__default.createElement("div", { ref: bottomRef })),
+          /* @__PURE__ */ React__default.createElement(MemoizedIcon, { iconName: "Info", className: "size-4" }),
+          /* @__PURE__ */ React__default.createElement(
+            MemoizedReactMarkdown,
+            {
+              className: "[&_a]:underline [&_a:hover]:no-underline",
+              remarkPlugins: markdownRemarkPlugins,
+              rehypePlugins: markdownRehypePlugins,
+              components: markdownComponents
+            },
+            disclaimer
+          )
+        ),
+        /* @__PURE__ */ React__default.createElement("div", { ref: bottomRef })
+      ),
       showResults && showFollowUp && /* @__PURE__ */ React__default.createElement(
         FollowUpSearchBar,
         {
@@ -6230,4 +6266,4 @@ const ChatSearch = forwardRef(({ featureFlags, ...props }, ref) => /* @__PURE__
 ChatSearch.displayName = "ChatSearch";
 
 export { ChatSearch as C, ChatSearchProvider as a, useIsChatSearchDirty as b, useChatSearch as u };
-//# sourceMappingURL=ChatSearch.vdzOknzC.js.map
+//# sourceMappingURL=ChatSearch.D8_9CRIM.js.map