@hanzo/ui 5.0.0 → 5.0.2

package/primitives/chat/message-list.tsx

@@ -0,0 +1,308 @@
+// import { ChatConversationInfiniteData } from '@hanzo_network/hanzo-node-state/v2/queries/getChatConversation/types';
+type ChatConversationInfiniteData = any;
+import {
+  type FetchPreviousPageOptions,
+  type InfiniteQueryObserverResult,
+} from '@tanstack/react-query';
+import React, {
+  Fragment,
+  memo,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import { getRelativeDateLabel, groupMessagesByDate } from '../../helpers';
+import { cn } from '../src/utils';
+import { Skeleton } from '../skeleton';
+import { Message } from './message';
+
+function useScrollToBottom(
+  scrollRef: RefObject<HTMLDivElement | null>,
+  detach = false,
+) {
+  const [autoScroll, setAutoScroll] = useState(true);
+  function scrollDomToBottom() {
+    const scrollContainer = scrollRef.current;
+    if (scrollContainer) {
+      requestAnimationFrame(() => {
+        setAutoScroll(true);
+        scrollContainer.scrollTo(0, scrollContainer.scrollHeight);
+      });
+    }
+  }
+
+  useEffect(() => {
+    if (autoScroll && !detach) {
+      scrollDomToBottom();
+    }
+  });
+
+  return {
+    scrollRef,
+    autoScroll,
+    setAutoScroll,
+    scrollDomToBottom,
+  };
+}
+
+export const MessageList = ({
+  noMoreMessageLabel,
+  paginatedMessages,
+  isSuccess,
+  isLoading,
+  isFetchingPreviousPage,
+  hasPreviousPage,
+  fetchPreviousPage,
+  containerClassName,
+  lastMessageContent,
+  editAndRegenerateMessage,
+  regenerateMessage,
+  disabledRetryAndEdit,
+  messageExtra,
+  hidePythonExecution,
+}: {
+  noMoreMessageLabel: string;
+  isSuccess: boolean;
+  isLoading: boolean;
+  isFetchingPreviousPage: boolean;
+  hasPreviousPage: boolean;
+  paginatedMessages: ChatConversationInfiniteData | undefined;
+  fetchPreviousPage: (
+    options?: FetchPreviousPageOptions | undefined,
+  ) => Promise<
+    InfiniteQueryObserverResult<ChatConversationInfiniteData, Error>
+  >;
+  regenerateMessage?: (messageId: string) => void;
+  editAndRegenerateMessage?: (content: string, messageHash: string) => void;
+  containerClassName?: string;
+  lastMessageContent?: React.ReactNode;
+  disabledRetryAndEdit?: boolean;
+  messageExtra?: React.ReactNode;
+  hidePythonExecution?: boolean;
+}) => {
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+  const previousChatHeightRef = useRef<number>(0);
+  const { ref, inView } = useInView();
+  const messageList = paginatedMessages?.pages.flat() ?? [];
+
+  const { autoScroll, setAutoScroll, scrollDomToBottom } =
+    useScrollToBottom(chatContainerRef);
+
+  const fetchPreviousMessages = useCallback(async () => {
+    setAutoScroll(false);
+    await fetchPreviousPage();
+  }, [fetchPreviousPage]);
+
+  useEffect(() => {
+    if (hasPreviousPage && inView) {
+      void fetchPreviousMessages();
+    }
+  }, [hasPreviousPage, inView]);
+
+  // adjust the scroll position of a chat container after new messages are fetched
+  useLayoutEffect(() => {
+    if (!isFetchingPreviousPage && inView) {
+      const chatContainerElement = chatContainerRef.current;
+      if (!chatContainerElement) return;
+      const currentHeight = chatContainerElement.scrollHeight;
+      const previousHeight = previousChatHeightRef.current;
+
+      if (!autoScroll) {
+        chatContainerElement.scrollTop =
+          currentHeight - previousHeight + chatContainerElement.scrollTop;
+      } else {
+        scrollDomToBottom();
+      }
+
+      chatContainerElement.scrollTop = currentHeight - previousHeight;
+    }
+  }, [paginatedMessages, isFetchingPreviousPage, inView]);
+
+  useEffect(() => {
+    const chatContainerElement = chatContainerRef.current;
+    if (!chatContainerElement) return;
+    const handleScroll = async () => {
+      const currentHeight = chatContainerElement.scrollHeight;
+      const currentScrollTop = chatContainerElement.scrollTop;
+      previousChatHeightRef.current = currentHeight;
+      const scrollThreshold = 100;
+      const isNearBottom =
+        currentScrollTop + chatContainerElement.clientHeight >=
+        currentHeight - scrollThreshold;
+
+      setAutoScroll(isNearBottom);
+
+      if (inView && hasPreviousPage && !isFetchingPreviousPage) {
+        previousChatHeightRef.current = currentHeight - currentScrollTop;
+      }
+    };
+
+    chatContainerElement.addEventListener('scroll', handleScroll, {
+      passive: true,
+    });
+    return () => {
+      chatContainerElement.removeEventListener('scroll', handleScroll);
+    };
+  }, [
+    fetchPreviousMessages,
+    hasPreviousPage,
+    inView,
+    isFetchingPreviousPage,
+    paginatedMessages?.pages?.length,
+  ]);
+
+  useEffect(() => {
+    if (messageList?.length % 2 === 1) {
+      scrollDomToBottom();
+    }
+  }, [messageList?.length]);
+
+  useEffect(() => {
+    if (isSuccess) {
+      scrollDomToBottom();
+    }
+  }, [isSuccess]);
+
+  return (
+    <div
+      className={cn(
+        'scroll flex-1 overflow-y-auto overscroll-none will-change-scroll',
+        'flex-1 overflow-y-auto',
+        containerClassName,
+      )}
+      id="chat-container-scroll"
+      ref={chatContainerRef}
+    >
+      {isSuccess &&
+        !isFetchingPreviousPage &&
+        !hasPreviousPage &&
+        (paginatedMessages?.pages ?? [])?.length > 1 && (
+          <div className="text-text-secondary py-2 text-center text-xs">
+            {noMoreMessageLabel}
+          </div>
+        )}
+      <div className="">
+        {isLoading && (
+          <div className="flex flex-col space-y-8">
+            {[...Array(10).keys()].map((index) => (
+              <div
+                className={cn(
+                  'flex w-[85%] gap-2',
+                  index % 2 === 0
+                    ? 'mr-auto ml-0 flex-row items-end'
+                    : 'mr-0 ml-auto flex-row-reverse items-start',
+                )}
+                key={`${index}`}
+              >
+                <Skeleton
+                  className="h-8 w-8 shrink-0 rounded-full bg-gray-300"
+                  key={index}
+                />
+                <Skeleton
+                  className={cn(
+                    'w-full rounded-lg px-2.5 py-3',
+                    index % 2 === 0
+                      ? 'h-24 rounded-bl-none bg-gray-300'
+                      : 'h-16 rounded-tr-none bg-gray-200',
+                    index % 3 === 0 && 'h-32',
+                  )}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+        {(hasPreviousPage || isFetchingPreviousPage) && (
+          <div className="flex flex-col space-y-3" ref={ref}>
+            {[...Array(4).keys()].map((index) => (
+              <div
+                className={cn(
+                  'flex w-[85%] gap-2',
+                  index % 2 === 0
+                    ? 'mr-auto ml-0 flex-row items-end'
+                    : 'mr-0 ml-auto flex-row-reverse items-start',
+                )}
+                key={`${index}`}
+              >
+                <Skeleton
+                  className="h-8 w-8 shrink-0 rounded-full bg-gray-300"
+                  key={index}
+                />
+                <Skeleton
+                  className={cn(
+                    'w-full rounded-lg px-2.5 py-3',
+                    index % 2 === 0
+                      ? 'h-24 rounded-bl-none bg-gray-300'
+                      : 'h-16 rounded-tr-none bg-gray-200',
+                    index % 3 === 0 && 'h-32',
+                  )}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+        {isSuccess && messageList?.length > 0 && (
+          <Fragment>
+            {Object.entries(groupMessagesByDate(messageList)).map(
+              ([date, messages]) => {
+                return (
+                  <div key={date}>
+                    <div
+                      className={cn(
+                        'relative z-10 m-auto my-2 flex h-[26px] w-fit min-w-[100px] items-center justify-center rounded-xl bg-gray-400 px-2.5 capitalize',
+                        'sticky top-5',
+                      )}
+                    >
+                      <span className="text-text-secondary text-xs font-medium">
+                        {getRelativeDateLabel(
+                          new Date(messages[0].createdAt || ''),
+                        )}
+                      </span>
+                    </div>
+                    <div className="flex flex-col">
+                      {messages.map((message, messageIndex) => {
+                        const previousMessage = messages[messageIndex - 1];
+
+                        const disabledRetryAndEditValue =
+                          disabledRetryAndEdit ?? messageIndex === 0;
+
+                        const handleRetryMessage = () => {
+                          regenerateMessage?.(message?.messageId ?? '');
+                        };
+
+                        const handleEditMessage = (message: string) => {
+                          editAndRegenerateMessage?.(
+                            message,
+                            previousMessage?.messageId ?? '',
+                          );
+                        };
+
+                        return (
+                          <Message
+                            disabledEdit={disabledRetryAndEditValue}
+                            handleEditMessage={handleEditMessage}
+                            handleRetryMessage={handleRetryMessage}
+                            hidePythonExecution={hidePythonExecution}
+                            key={`${message.messageId}::${messageIndex}`}
+                            message={message}
+                            messageId={message.messageId}
+                          />
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              },
+            )}
+            {messageExtra}
+            {lastMessageContent}
+          </Fragment>
+        )}
+      </div>
+    </div>
+  );
+};