@hanzo/ui 4.5.3 → 4.6.0

package/primitives/chat/files-preview.tsx

@@ -0,0 +1,330 @@
+import { DialogClose } from '@radix-ui/react-dialog';
+import {
+  type Attachment,
+  FileTypeSupported,
+} from '@hanzo_network/hanzo-node-state/v2/queries/getChatConversation/types';
+import { save } from '@tauri-apps/plugin-dialog';
+import * as fs from '@tauri-apps/plugin-fs';
+import { BaseDirectory } from '@tauri-apps/plugin-fs';
+import { partial } from 'filesize';
+import { AnimatePresence, motion } from 'framer-motion';
+import { CircleSlashIcon, XIcon } from 'lucide-react';
+import React, { useState } from 'react';
+import { toast } from 'sonner';
+
+import { fileIconMap, FileTypeIcon, PaperClipIcon } from '../../assets';
+import { getFileExt } from '../../helpers/file';
+import { cn } from '../../src/utils';
+import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
+import { Button } from '../button';
+import { Dialog, DialogContent } from '../dialog';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from '../tooltip';
+import { SqlitePreview } from './sqlite-preview';
+
+export type FileListProps = {
+  files: Attachment[];
+  className?: string;
+};
+
+export const isImageFile = (file: string) => {
+  return file.match(/\.(jpg|jpeg|png|gif)$/i);
+};
+
+const size = partial({ standard: 'jedec' });
+
+const ImagePreview = ({
+  name,
+  size,
+  url,
+  onFullscreen,
+}: Pick<Attachment, 'name' | 'size' | 'url'> & {
+  onFullscreen: (open: boolean) => void;
+}) => (
+  <button
+    className="border-divider hover:bg-bg-secondary flex h-14 w-full max-w-[210px] min-w-[210px] shrink-0 cursor-pointer items-center gap-2 rounded-md border py-1.5 pr-1.5 pl-2 text-left"
+    onClick={() => onFullscreen(true)}
+  >
+    <Avatar className="bg-bg-quaternary text-text-default flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-xs transition-colors">
+      <AvatarImage
+        alt={name}
+        className="border-divider aspect-square h-full w-full rounded-xs border object-cover"
+        src={url}
+      />
+      <AvatarFallback>
+        <CircleSlashIcon className="text-text-secondary h-4 w-4" />
+      </AvatarFallback>
+    </Avatar>
+    <FileInfo fileName={name} fileSize={size} />
+  </button>
+);
+
+const FileInfo = ({
+  fileSize,
+  fileName,
+}: {
+  fileSize?: number;
+  fileName: string;
+}) => (
+  <div className="text-text-secondary text-em-sm grid flex-1 -translate-x-px gap-1 py-0.5 leading-none">
+    <div className="text-text-default truncate overflow-hidden font-medium">
+      {decodeURIComponent(fileName.split('/').at(-1) ?? '')}
+    </div>
+    {fileSize && (
+      <div className="text-text-secondary line-clamp-1 aspect-auto font-normal">
+        {size(fileSize)}
+      </div>
+    )}
+  </div>
+);
+
+type FileContentViewerProps = Pick<
+  Attachment,
+  'name' | 'url' | 'content' | 'type'
+>;
+
+export const FileContentViewer: React.FC<FileContentViewerProps> = ({
+  name,
+  content,
+  url,
+  type,
+}) => {
+  switch (type) {
+    case FileTypeSupported.Text: {
+      return (
+        <pre className="bg-bg-dark h-full overflow-auto p-4 pt-10 font-mono text-xs break-words whitespace-pre-wrap">
+          {content}
+        </pre>
+      );
+    }
+    case FileTypeSupported.Image: {
+      return (
+        <div className="flex h-full w-full items-center justify-center">
+          <img
+            alt={name}
+            className="max-h-full max-w-full object-contain"
+            src={url}
+          />
+        </div>
+      );
+    }
+    case FileTypeSupported.Video: {
+      return (
+        <div className="flex h-full w-full items-center justify-center">
+          <video className="max-h-full max-w-full" controls src={url}>
+            Your browser does not support the video tag.
+          </video>
+        </div>
+      );
+    }
+    case FileTypeSupported.Audio: {
+      return (
+        <div className="flex h-full w-full items-center justify-center">
+          <audio className="w-full" controls src={url}>
+            Your browser does not support the audio tag.
+          </audio>
+        </div>
+      );
+    }
+    case FileTypeSupported.Html: {
+      return (
+        <div className="flex h-full w-full items-center justify-center">
+          <iframe
+            className="h-full w-full bg-gray-100"
+            sandbox="allow-same-origin"
+            src={url}
+            title={name}
+          />
+        </div>
+      );
+    }
+    case FileTypeSupported.SqliteDatabase: {
+      return <SqlitePreview url={url || ''} />;
+    }
+    default:
+      return (
+        <div className="text-text-secondary flex h-full flex-col items-center justify-center gap-6">
+          <span>Preview not available for this file type</span>
+        </div>
+      );
+  }
+};
+
+const FullscreenDialog = ({
+  open,
+  name,
+  type,
+  url,
+  content,
+  setOpen,
+  onDownload,
+}: Pick<Attachment, 'name' | 'url' | 'content' | 'type'> & {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onDownload?: () => void;
+}) => (
+  <Dialog onOpenChange={setOpen} open={open}>
+    <DialogContent className="flex size-full max-h-[99vh] max-w-[99vw] flex-col gap-2 bg-transparent p-1 py-8">
+      <div className="flex w-full items-center justify-between gap-16 px-10">
+        <div className="text-text-default max-w-3xl truncate text-left text-sm">
+          {name}
+        </div>
+        <div className="flex items-center gap-4">
+          <Button onClick={onDownload} size="xs" variant="outline">
+            Download
+          </Button>
+          <DialogClose>
+            <XIcon className="text-text-secondary h-6 w-6" />
+            <span className="sr-only">Close</span>
+          </DialogClose>
+        </div>
+      </div>
+      <div className="text-text-default flex size-full flex-col overflow-hidden rounded-l-xl p-10">
+        <FileContentViewer
+          content={content}
+          name={name}
+          type={type}
+          url={url}
+        />
+      </div>
+    </DialogContent>
+  </Dialog>
+);
+const FileButton = ({
+  name,
+  size,
+  onFullscreen,
+}: Pick<Attachment, 'name' | 'size'> & {
+  onFullscreen: (open: boolean) => void;
+}) => (
+  <button
+    className="border-divider hover:bg-bg-secondary flex h-14 w-full max-w-[210px] min-w-[210px] shrink-0 cursor-pointer items-center gap-2 rounded-md border py-1.5 pr-1.5 pl-2 text-left"
+    onClick={() => onFullscreen(true)}
+  >
+    <span className="bg-bg-quaternary text-text-default flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-xs transition-colors">
+      {fileIconMap[getFileExt(name)] ? (
+        <FileTypeIcon
+          className="text-text-secondary h-5 w-5"
+          type={getFileExt(name)}
+        />
+      ) : (
+        <PaperClipIcon className="text-text-secondary h-4 w-4" />
+      )}
+    </span>
+    <FileInfo fileName={name} fileSize={size} />
+  </button>
+);
+
+export const FilePreview = ({
+  name,
+  url,
+  size,
+  content,
+  blob,
+  type,
+}: Attachment) => {
+  const [open, setOpen] = useState(false);
+
+  const fileName = decodeURIComponent(name).split('/').at(-1) ?? '';
+
+  const children = isImageFile(name) ? (
+    <ImagePreview name={name} onFullscreen={setOpen} size={size} url={url} />
+  ) : (
+    <FileButton name={name} onFullscreen={setOpen} size={size} />
+  );
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div>{children}</div>
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent className="container break-words" side="top">
+          <p>{fileName}</p>
+        </TooltipContent>
+      </TooltipPortal>
+      <FullscreenDialog
+        content={content}
+        name={fileName}
+        onDownload={async () => {
+          const currentFile =
+            blob ??
+            new Blob([content || url || ''], {
+              type: 'application/octet-stream',
+            });
+          const arrayBuffer = await currentFile.arrayBuffer();
+          const currentContent = new Uint8Array(arrayBuffer);
+          const savePath = await save({
+            defaultPath: fileName,
+            filters: [
+              {
+                name: 'File',
+                extensions: [getFileExt(name)],
+              },
+            ],
+          });
+          if (!savePath) {
+            toast.info('File saving cancelled');
+            return;
+          }
+
+          await fs.writeFile(savePath, currentContent, {
+            baseDir: BaseDirectory.Download,
+          });
+
+          toast.success(`${fileName} downloaded successfully`);
+        }}
+        open={open}
+        setOpen={setOpen}
+        type={type}
+        url={url}
+      />
+    </Tooltip>
+  );
+};
+
+const animations = {
+  initial: { scale: 0.97, opacity: 0, y: 10 },
+  animate: {
+    scale: 1,
+    opacity: 1,
+    y: 0,
+    transition: {
+      type: 'spring',
+      stiffness: 200,
+      damping: 20,
+      mass: 0.8,
+      velocity: 1,
+      duration: 0.6,
+    },
+  },
+  exit: {
+    scale: 0.97,
+    opacity: 0,
+    y: -10,
+    transition: {
+      type: 'spring',
+      stiffness: 150,
+      damping: 15,
+      duration: 0.4,
+    },
+  },
+};
+
+export const FileList = ({ files, className }: FileListProps) => {
+  return (
+    <ul className={cn('flex flex-wrap gap-3', className)}>
+      <AnimatePresence>
+        {files?.map((file, index) => (
+          <motion.li {...animations} key={index}>
+            <FilePreview {...file} />
+          </motion.li>
+        ))}
+      </AnimatePresence>
+    </ul>
+  );
+};

package/primitives/chat/index.ts

@@ -0,0 +1,6 @@
+export * from './message';
+export * from './message-list';
+export * from './files-preview';
+export * from './chat-input-area';
+export * from './chat-input';
+export * from './sqlite-preview';

package/primitives/chat/json-form.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+// Temporary stub for JsonForm - will be replaced with actual implementation
+const JsonForm: React.FC<any> = (props) => {
+  return <div>JsonForm Component - To be implemented</div>;
+};
+
+export default JsonForm;

package/primitives/chat/message-list.tsx

@@ -0,0 +1,307 @@
+import { ChatConversationInfiniteData } from '@hanzo_network/hanzo-node-state/v2/queries/getChatConversation/types';
+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>
+  );
+};