@landtrustinc/design-system 1.2.27-beta.5 → 1.2.27-beta.6

package/dist/index.d.ts

@@ -1341,14 +1341,7 @@ type ChatWidgetProps = {
      */
     closeOnClickOutside?: boolean;
 };
-type ChatWidgetRef = {
-    /**
-     * Scroll to a specific message by index, positioning it at the top of the scroll container
-     * @param index - The index of the message in the messages array
-     */
-    scrollToMessageIndex: (index: number) => void;
-};
-declare const ChatWidget: React__default.ForwardRefExoticComponent<ChatWidgetProps & React__default.RefAttributes<ChatWidgetRef>>;
+declare const ChatWidget: ({ title, messages, onSubmit, placeholder, disabled, className, ariaLabel, panelWidth, expanded, defaultExpanded, onExpandedChange, isThinking, thinkingText, emptyState, containerProps, suggestedPrompts, onPromptClick, suggestedPromptsTitle, notificationCount, closeOnClickOutside, }: ChatWidgetProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type DividerProps = React__default.HTMLAttributes<HTMLHRElement> & SpaceProps & {
     /**
@@ -2445,4 +2438,4 @@ declare const Widget: React__default.FC<WidgetProps> & {
     }>;
 };
 
-export { AIResponse, type AIResponseProps, AvailabilityBadge, type AvailabilityBadgeProps, type AvailabilityBadgeVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarType, type BaseInputProps, Box, type BoxProps, Button, type ButtonProps, type ButtonVariants, type CarouselPositions, ChatWidget, type ChatWidgetMessage, type ChatWidgetProps, type ChatWidgetRef, Column, type ColumnProps, ContactLandownerButton, type ContactLandownerButtonProps, Container, Divider, type DividerProps, type DotsColors, type FeatureItem, FeatureList, FeatureListItem, type FeatureListItemProps, type FeatureListProps, type FeatureListSection, FieldNoteCard, type FieldNoteCardProps, FormField, type FormFieldProps, GlobalStyle, Grid, type GridBreakpoint, GridContainer, type GridContainerProps, type GridProps, Heading, type HeadingProps, HuntCard, type HuntCardProps, Icon, IconLabel, type IconLabelProps, type IconProps, type IconSize, IconSizeMap, type IconVariantTypes$1 as IconVariantTypes, InfoBox, type InfoBoxProps, Input, type InputProps, type InputSize, type InputVariant, LandownerProfile, type LandownerProfileProps, LayoutTokens, ListingChat, type ListingChatProps, Logo, type LogoProps, type LogoTheme, type LogoVariant, MarkdownContent, type MarkdownContentProps, MessageBubble, type MessageBubbleProps, type NavLink, Navigation, type NavigationProps, PackageCard, type PackageCardBadge, type PackageCardProps, PackageHeader, type PackageHeaderProps, type ResponsiveValue, ReviewCard, type ReviewCardProps, Reviews, type ReviewsProps, ReviewsShowcase, ScrollingCarousel, type ScrollingCarouselProps, ScrollingCarouselStep, type ScrollingCarouselStepProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, StarRating, type StarRatingProps, type SuggestedPrompt, type TFontWeight, type THeadingSize, type TTextAlign, type TTextSize, type TTextWrap, TagChip, type TagChipProps, type TagChipVariant, Text, TextArea, type TextProps, type TextareaProps, ThemeTokens, TopMatchingFieldNote, type TopMatchingFieldNoteProps, TopMatchingReview, type TopMatchingReviewProps, UserCard, type UserCardProps, Widget, WidgetPanel, type WidgetPanelProps, type WidgetProps, WidgetTrigger, type WidgetTriggerProps, globalStyles, styles };
+export { AIResponse, type AIResponseProps, AvailabilityBadge, type AvailabilityBadgeProps, type AvailabilityBadgeVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarType, type BaseInputProps, Box, type BoxProps, Button, type ButtonProps, type ButtonVariants, type CarouselPositions, ChatWidget, type ChatWidgetMessage, type ChatWidgetProps, Column, type ColumnProps, ContactLandownerButton, type ContactLandownerButtonProps, Container, Divider, type DividerProps, type DotsColors, type FeatureItem, FeatureList, FeatureListItem, type FeatureListItemProps, type FeatureListProps, type FeatureListSection, FieldNoteCard, type FieldNoteCardProps, FormField, type FormFieldProps, GlobalStyle, Grid, type GridBreakpoint, GridContainer, type GridContainerProps, type GridProps, Heading, type HeadingProps, HuntCard, type HuntCardProps, Icon, IconLabel, type IconLabelProps, type IconProps, type IconSize, IconSizeMap, type IconVariantTypes$1 as IconVariantTypes, InfoBox, type InfoBoxProps, Input, type InputProps, type InputSize, type InputVariant, LandownerProfile, type LandownerProfileProps, LayoutTokens, ListingChat, type ListingChatProps, Logo, type LogoProps, type LogoTheme, type LogoVariant, MarkdownContent, type MarkdownContentProps, MessageBubble, type MessageBubbleProps, type NavLink, Navigation, type NavigationProps, PackageCard, type PackageCardBadge, type PackageCardProps, PackageHeader, type PackageHeaderProps, type ResponsiveValue, ReviewCard, type ReviewCardProps, Reviews, type ReviewsProps, ReviewsShowcase, ScrollingCarousel, type ScrollingCarouselProps, ScrollingCarouselStep, type ScrollingCarouselStepProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, StarRating, type StarRatingProps, type SuggestedPrompt, type TFontWeight, type THeadingSize, type TTextAlign, type TTextSize, type TTextWrap, TagChip, type TagChipProps, type TagChipVariant, Text, TextArea, type TextProps, type TextareaProps, ThemeTokens, TopMatchingFieldNote, type TopMatchingFieldNoteProps, TopMatchingReview, type TopMatchingReviewProps, UserCard, type UserCardProps, Widget, WidgetPanel, type WidgetPanelProps, type WidgetProps, WidgetTrigger, type WidgetTriggerProps, globalStyles, styles };

package/dist/index.js

@@ -5911,246 +5911,248 @@ var DEFAULT_EMPTY_STATE = [
     "default-empty"
   )
 ];
-var ChatWidget = import_react30.default.forwardRef(
-  ({
-    title,
-    messages,
-    onSubmit,
-    placeholder = "Type your question",
-    disabled = false,
-    className,
-    ariaLabel = "Open Chat",
-    panelWidth = 480,
-    expanded,
-    defaultExpanded = false,
-    onExpandedChange,
-    isThinking = false,
-    thinkingText = "Thinking...",
-    emptyState = DEFAULT_EMPTY_STATE,
-    containerProps,
-    suggestedPrompts,
-    onPromptClick,
-    suggestedPromptsTitle = "Other Helpful Topics",
-    notificationCount,
-    closeOnClickOutside = true
-  }, ref) => {
-    const [value, setValue] = (0, import_react30.useState)("");
-    const scrollRef = (0, import_react30.useRef)(null);
-    const savedScrollPosition = (0, import_react30.useRef)(0);
-    const messageRefs = (0, import_react30.useRef)([]);
-    const isControlled = typeof expanded === "boolean";
-    const [internalExpanded, setInternalExpanded] = (0, import_react30.useState)(defaultExpanded);
-    const isExpanded = isControlled ? expanded : internalExpanded;
-    const setExpanded = (0, import_react30.useCallback)(
-      (next) => {
-        if (!next && scrollRef.current) {
-          savedScrollPosition.current = scrollRef.current.scrollTop;
-        }
-        if (!isControlled)
-          setInternalExpanded(next);
-        onExpandedChange == null ? void 0 : onExpandedChange(next);
-      },
-      [isControlled, onExpandedChange]
-    );
-    (0, import_react30.useImperativeHandle)(
-      ref,
-      () => ({
-        scrollToMessageIndex: (index) => {
-          const messageEl = messageRefs.current[index];
-          const container = scrollRef.current;
-          if (messageEl && container && isExpanded) {
-            requestAnimationFrame(() => {
-              const containerRect = container.getBoundingClientRect();
-              const messageRect = messageEl.getBoundingClientRect();
-              const scrollAmount = container.scrollTop + (messageRect.top - containerRect.top);
-              container.scrollTop = scrollAmount;
-              savedScrollPosition.current = scrollAmount;
-            });
-          }
-        }
-      }),
-      [isExpanded]
-    );
-    (0, import_react30.useEffect)(() => {
-      const el = scrollRef.current;
-      if (!el || !isExpanded)
-        return;
-      requestAnimationFrame(() => {
-        if (savedScrollPosition.current > 0) {
-          el.scrollTop = savedScrollPosition.current;
-        }
-      });
-    }, [isExpanded]);
-    const messagesToRender = messages.length === 0 ? emptyState : messages;
-    (0, import_react30.useEffect)(() => {
-      messageRefs.current = messageRefs.current.slice(0, messagesToRender.length);
-    }, [messagesToRender.length]);
-    const renderedMessages = (0, import_react30.useMemo)(
-      () => messagesToRender.map((element, index) => {
-        var _a;
-        const key = (_a = element.key) != null ? _a : index;
-        if (element.type === AIResponse_default) {
-          return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
-            Box_default,
-            {
-              css: receivedWrapperStyles,
-              ref: (el) => messageRefs.current[index] = el,
-              children: element
-            },
-            key
-          );
-        }
-        if (element.type === MessageBubble_default) {
-          return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
-            Box_default,
-            {
-              css: sentWrapperStyles,
-              ref: (el) => messageRefs.current[index] = el,
-              children: element
+var ChatWidget = ({
+  title,
+  messages,
+  onSubmit,
+  placeholder = "Type your question",
+  disabled = false,
+  className,
+  ariaLabel = "Open Chat",
+  panelWidth = 480,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  isThinking = false,
+  thinkingText = "Thinking...",
+  emptyState = DEFAULT_EMPTY_STATE,
+  containerProps,
+  suggestedPrompts,
+  onPromptClick,
+  suggestedPromptsTitle = "Other Helpful Topics",
+  notificationCount,
+  closeOnClickOutside = true
+}) => {
+  const [value, setValue] = (0, import_react30.useState)("");
+  const scrollRef = (0, import_react30.useRef)(null);
+  const savedScrollPosition = (0, import_react30.useRef)(0);
+  const previousMessagesLength = (0, import_react30.useRef)(messages.length);
+  const lastUserMessageRef = (0, import_react30.useRef)(null);
+  const isControlled = typeof expanded === "boolean";
+  const [internalExpanded, setInternalExpanded] = (0, import_react30.useState)(defaultExpanded);
+  const isExpanded = isControlled ? expanded : internalExpanded;
+  const setExpanded = (0, import_react30.useCallback)(
+    (next) => {
+      if (!next && scrollRef.current) {
+        savedScrollPosition.current = scrollRef.current.scrollTop;
+      }
+      if (!isControlled)
+        setInternalExpanded(next);
+      onExpandedChange == null ? void 0 : onExpandedChange(next);
+    },
+    [isControlled, onExpandedChange]
+  );
+  (0, import_react30.useEffect)(() => {
+    const el = scrollRef.current;
+    if (!el || !isExpanded)
+      return;
+    requestAnimationFrame(() => {
+      if (savedScrollPosition.current > 0) {
+        el.scrollTop = savedScrollPosition.current;
+      }
+    });
+  }, [isExpanded]);
+  (0, import_react30.useEffect)(() => {
+    if (!isExpanded)
+      return;
+    const messagesChanged = messages.length !== previousMessagesLength.current;
+    previousMessagesLength.current = messages.length;
+    if (messagesChanged && messages.length > 0) {
+      const lastMessage = messages[messages.length - 1];
+      const lastMessageElement = lastMessage;
+      const isUserMessage = lastMessageElement.type === MessageBubble_default;
+      if (isUserMessage && lastUserMessageRef.current) {
+        requestAnimationFrame(() => {
+          var _a;
+          (_a = lastUserMessageRef.current) == null ? void 0 : _a.scrollIntoView({
+            behavior: "smooth",
+            block: "start"
+          });
+        });
+      }
+    }
+  }, [messages, isExpanded]);
+  const messagesToRender = messages.length === 0 ? emptyState : messages;
+  const lastUserMessageIndex = (0, import_react30.useMemo)(() => {
+    for (let i = messagesToRender.length - 1; i >= 0; i--) {
+      const message = messagesToRender[i];
+      if (message && message.type === MessageBubble_default) {
+        return i;
+      }
+    }
+    return -1;
+  }, [messagesToRender]);
+  const renderedMessages = (0, import_react30.useMemo)(
+    () => messagesToRender.map((element, index) => {
+      var _a;
+      const key = (_a = element.key) != null ? _a : index;
+      const isLastUserMessage = index === lastUserMessageIndex;
+      if (element.type === AIResponse_default) {
+        return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Box_default, { css: receivedWrapperStyles, children: element }, key);
+      }
+      if (element.type === MessageBubble_default) {
+        return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+          Box_default,
+          {
+            css: sentWrapperStyles,
+            ref: isLastUserMessage ? lastUserMessageRef : null,
+            style: {
+              scrollMarginTop: "16px"
+              // Add padding above when scrolled to
             },
-            key
-          );
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Box_default, { ref: (el) => messageRefs.current[index] = el, children: element }, key);
-      }),
-      [messagesToRender]
-    );
-    const handleSubmit = () => {
-      const trimmed = value.trim();
-      if (!trimmed)
-        return;
-      onSubmit(trimmed);
-      setValue("");
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
-      Widget_default,
-      {
-        ariaLabel,
-        icon: "ConversationalSearchAi",
-        expanded: isExpanded,
-        onExpandedChange: setExpanded,
-        panelWidth,
-        className,
-        containerProps,
-        closeOnClickOutside,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Box_default, { mt: 2, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(AskBuckButton_default, { badgeCount: notificationCount }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Widget_default.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(Box_default, { css: containerStyles, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(Box_default, { position: "sticky", top: 0, zIndex: 1, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
-                Box_default,
-                {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  gap: "var(--spacing-4)",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-4)", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("span", { css: badge, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Icon_default, { variant: "ConversationalSearchAi", size: "large" }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
-                        Heading_default,
-                        {
-                          size: "2xs",
-                          fontWeight: "bold",
-                          color: "var(--text-primary)",
-                          children: title
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
-                      Button_default,
-                      {
-                        variant: "text",
-                        size: "xs",
-                        "aria-label": "Close widget",
-                        onClick: () => setExpanded(false),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("span", { css: closeButtonContent, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Icon_default, { variant: "Xmark", size: "medium" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("span", { children: "Close" })
-                        ] })
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Divider_default, { mt: 4, mb: 0 })
-            ] }),
+            children: element
+          },
+          key
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(import_react30.default.Fragment, { children: element }, key);
+    }),
+    [messagesToRender, lastUserMessageIndex]
+  );
+  const handleSubmit = () => {
+    const trimmed = value.trim();
+    if (!trimmed)
+      return;
+    onSubmit(trimmed);
+    setValue("");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
+    Widget_default,
+    {
+      ariaLabel,
+      icon: "ConversationalSearchAi",
+      expanded: isExpanded,
+      onExpandedChange: setExpanded,
+      panelWidth,
+      className,
+      containerProps,
+      closeOnClickOutside,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Box_default, { mt: 2, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(AskBuckButton_default, { badgeCount: notificationCount }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Widget_default.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(Box_default, { css: containerStyles, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(Box_default, { position: "sticky", top: 0, zIndex: 1, children: [
             /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
               Box_default,
               {
-                ref: scrollRef,
-                flex: "1 1 auto",
-                minHeight: 0,
-                overflowY: "auto",
-                p: 0,
-                pb: 4,
                 display: "flex",
-                flexDirection: "column",
-                gap: "var(--spacing-2)",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: "var(--spacing-4)",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: renderedMessages }),
-                  isThinking && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Box_default, { css: receivedWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { css: thinkingRowStyles, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Spinner_default2, { size: "medium" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("span", { css: thinkingTextStyles, children: thinkingText })
-                  ] }) }),
-                  suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Box_default, { css: receivedWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
-                    Box_default,
+                  /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-4)", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("span", { css: badge, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Icon_default, { variant: "ConversationalSearchAi", size: "large" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+                      Heading_default,
+                      {
+                        size: "2xs",
+                        fontWeight: "bold",
+                        color: "var(--text-primary)",
+                        children: title
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+                    Button_default,
                     {
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: "var(--spacing-4)",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Text_default, { size: "md", fontWeight: "bold", color: "var(--text-primary)", children: suggestedPromptsTitle }),
-                        /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
-                          Box_default,
-                          {
-                            display: "flex",
-                            flexWrap: "wrap",
-                            gap: "var(--spacing-4)",
-                            alignItems: "flex-start",
-                            children: suggestedPrompts.map((prompt, index) => /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
-                              TagChip_default,
-                              {
-                                variant: "success",
-                                onClick: () => {
-                                  var _a;
-                                  return onPromptClick == null ? void 0 : onPromptClick((_a = prompt.value) != null ? _a : prompt.label);
-                                },
-                                style: { cursor: "pointer" },
-                                children: prompt.label
-                              },
-                              index
-                            ))
-                          }
-                        )
-                      ]
+                      variant: "text",
+                      size: "xs",
+                      "aria-label": "Close widget",
+                      onClick: () => setExpanded(false),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("span", { css: closeButtonContent, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Icon_default, { variant: "Xmark", size: "medium" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("span", { children: "Close" })
+                      ] })
                     }
-                  ) })
+                  )
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Box_default, { position: "sticky", bottom: 0, zIndex: 1, p: 0, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
-              TextArea_default,
-              {
-                rows: 3,
-                value,
-                maxHeight: 250,
-                autoExpand: true,
-                onChange: (e) => setValue(e.target.value),
-                showSubmit: true,
-                onSubmit: handleSubmit,
-                disabled,
-                submitDisabled: !value.trim() || isThinking,
-                placeholder
-              }
-            ) })
-          ] }) })
-        ]
-      }
-    );
-  }
-);
-ChatWidget.displayName = "ChatWidget";
+            /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Divider_default, { mt: 4, mb: 0 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
+            Box_default,
+            {
+              ref: scrollRef,
+              flex: "1 1 auto",
+              minHeight: 0,
+              overflowY: "auto",
+              p: 0,
+              pb: 4,
+              display: "flex",
+              flexDirection: "column",
+              gap: "var(--spacing-2)",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: renderedMessages }),
+                isThinking && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Box_default, { css: receivedWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { css: thinkingRowStyles, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Spinner_default2, { size: "medium" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("span", { css: thinkingTextStyles, children: thinkingText })
+                ] }) }),
+                suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Box_default, { css: receivedWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
+                  Box_default,
+                  {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "var(--spacing-4)",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Text_default, { size: "md", fontWeight: "bold", color: "var(--text-primary)", children: suggestedPromptsTitle }),
+                      /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+                        Box_default,
+                        {
+                          display: "flex",
+                          flexWrap: "wrap",
+                          gap: "var(--spacing-4)",
+                          alignItems: "flex-start",
+                          children: suggestedPrompts.map((prompt, index) => /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+                            TagChip_default,
+                            {
+                              variant: "success",
+                              onClick: () => {
+                                var _a;
+                                return onPromptClick == null ? void 0 : onPromptClick((_a = prompt.value) != null ? _a : prompt.label);
+                              },
+                              style: { cursor: "pointer" },
+                              children: prompt.label
+                            },
+                            index
+                          ))
+                        }
+                      )
+                    ]
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Box_default, { position: "sticky", bottom: 0, zIndex: 1, p: 0, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+            TextArea_default,
+            {
+              rows: 3,
+              value,
+              maxHeight: 250,
+              autoExpand: true,
+              onChange: (e) => setValue(e.target.value),
+              showSubmit: true,
+              onSubmit: handleSubmit,
+              disabled,
+              submitDisabled: !value.trim() || isThinking,
+              placeholder
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
+};
 var ChatWidget_default = ChatWidget;
 
 // src/FeatureList/components/FeatureListItem.tsx