@hanzo/ui 5.0.2 → 5.1.0

package/primitives/chat/files-preview.tsx

@@ -1,331 +0,0 @@
-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'; // Not available in web environment
-// import * as fs from '@tauri-apps/plugin-fs'; // Not available in web environment
-// import { BaseDirectory } from '@tauri-apps/plugin-fs'; // Not available in web environment
-// import { partial } from 'filesize';
-const partial = () => (bytes) => `${(bytes / 1024 / 1024).toFixed(2)} MB`;
-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

@@ -1,6 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,308 +0,0 @@
-// 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>
-  );
-};