import { jsxs, jsx } from "react/jsx-runtime";
import { ScrollArea, mergeRefs } from "@choiceform/design-system";
import { observer, use$ as useSelector } from "../../_vendor/@legendapp/state/react.js";
import { useRef } from "react";
import { ConversationTv } from "./tv.js";
import { usePagination } from "./hooks/use-pagination.js";
import { useMessageVirtualizer } from "./hooks/use-message-virtualizer.js";
import { useStickToBottom } from "../../_vendor/use-stick-to-bottom/dist-useStickToBottom.js";
import { LoadMoreButton } from "./components/load-more-button.js";
import { ScrollToBottomButton } from "./components/scroll-to-bottom-button.js";
import { messageComputed$ } from "../../stores/message-store.js";
import { paginationStore$ } from "../../stores/pagination-store.js";
const LOAD_MORE_BUTTON_HEIGHT = 40;
const Conversation = observer(function Conversation2(props) {
  const {
    className,
    children,
    estimateSize = 120,
    overscan = 5,
    paddingTop = 16,
    paddingBottom = 32,
    chatId,
    onLoadMessages,
    pageSize = 10
  } = props;
  const currentMessages = useSelector(messageComputed$.currentMessages);
  const totalCount = useSelector(paginationStore$.totalCount);
  const scrollContainerRef = useRef(null);
  const { loadMoreMessages, isLoading, hasMore } = usePagination({
    chatId,
    onLoadMessages,
    scrollContainerRef,
    pageSize
  });
  const { virtualizer } = useMessageVirtualizer({
    messages: currentMessages,
    scrollContainerRef,
    estimateSize,
    overscan,
    paddingTop,
    paddingBottom
  });
  const tv = ConversationTv();
  const handleLoadMore = async () => {
    await loadMoreMessages();
    virtualizer.scrollToIndex(0, { align: "start", behavior: "smooth" });
  };
  const shouldShowLoadMore = hasMore && totalCount > pageSize;
  const shouldShowWelcome = useSelector(messageComputed$.shouldShowWelcome);
  const { scrollRef, contentRef, isAtBottom, scrollToBottom } = useStickToBottom({
    resize: "smooth",
    initial: "smooth"
  });
  if (shouldShowWelcome) return null;
  return /* @__PURE__ */ jsxs("div", { className: tv.root({ className }), children: [
    /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx(
      ScrollArea.Viewport,
      {
        ref: mergeRefs(scrollRef, scrollContainerRef),
        className: tv.viewport(),
        children: /* @__PURE__ */ jsxs(
          ScrollArea.Content,
          {
            ref: contentRef,
            className: tv.content(),
            style: {
              height: virtualizer.getTotalSize() + (shouldShowLoadMore ? LOAD_MORE_BUTTON_HEIGHT : 0),
              // 为LoadMore按钮预留空间
              maxWidth: "var(--max-width, 100%)"
            },
            children: [
              shouldShowLoadMore && /* @__PURE__ */ jsx(
                LoadMoreButton,
                {
                  hasMore,
                  isLoading,
                  onLoadMore: handleLoadMore,
                  totalCount,
                  loadedCount: currentMessages.length
                }
              ),
              virtualizer.getVirtualItems().map((virtualItem) => {
                const message = currentMessages[virtualItem.index];
                return /* @__PURE__ */ jsx(
                  "div",
                  {
                    "data-index": virtualItem.index,
                    ref: virtualizer.measureElement,
                    className: tv.virtualItems(),
                    style: {
                      transform: `translateY(${virtualItem.start + (shouldShowLoadMore ? LOAD_MORE_BUTTON_HEIGHT : 0)}px)`
                    },
                    children: children ? children(message, message.contentSegments || [], virtualItem.index) : null
                  },
                  virtualItem.key
                );
              })
            ]
          }
        )
      }
    ) }),
    /* @__PURE__ */ jsx(
      ScrollToBottomButton,
      {
        shouldShow: !isAtBottom,
        scrollToBottom
      }
    )
  ] });
});
export {
  Conversation
};
//# sourceMappingURL=conversation.js.map
