Derek/20230805 image gallery

components/Chat/ChatMessage.tsx

@@ -20,6 +20,7 @@ import { useTranslation } from 'next-i18next';
 import { event } from 'nextjs-google-analytics';
 
 import { updateConversation } from '@/utils/app/conversation';
+import { getMjImageTags } from '@/utils/app/mjImage';
 import { getPluginIcon } from '@/utils/app/ui';
 import { modifyParagraphs } from '@/utils/data/onlineOutputModifier';
 
@@ -28,8 +29,7 @@ import { PluginID } from '@/types/plugin';
 
 import HomeContext from '@/pages/api/home/home.context';
 
-import { ImageGenerationComponent } from './components/ImageGenerationComponent';
-import MjImageComponent from './components/MjImageComponent';
+import MemoizedImageGallery from './components/ImageGallery/MemoizedImageGallery';
 import TokenCounter from './components/TokenCounter';
 
 import { CodeBlock } from '../Markdown/CodeBlock';
@@ -190,22 +190,11 @@ export const ChatMessage: FC<Props> = memo(
     const ImgComponent = useMemo(() => {
       const Component = ({
         src,
-        title,
-        alt,
         node,
       }: React.DetailedHTMLProps<
         React.ImgHTMLAttributes<HTMLImageElement> & { node?: any },
         HTMLImageElement
       >) => {
-        const aiImageButtons =
-          node?.properties?.dataAiImageButtons &&
-          (node?.properties?.dataAiImageButtons).split(',');
-        const aiImagePrompt =
-          node?.properties?.dataAiImagePrompt &&
-          (node?.properties?.dataAiImagePrompt).split(',');
-        const aiImageButtonMessageId =
-          node?.properties?.dataAiImageButtonMessageId;
-
         const isValidUrl = (url: string) => {
           try {
             new URL(url);
@@ -218,36 +207,19 @@ export const ChatMessage: FC<Props> = memo(
         if (!src) return <></>;
         if (!isValidUrl(src)) return <b>{`{InValid IMAGE URL}`}</b>;
 
-        if (message.pluginId !== PluginID.IMAGE_GEN) {
+        if (message.pluginId === PluginID.IMAGE_GEN) {
+          // The IMAGE_GEN plugin will render by Image Gallery
+          return <></>;
+        } else {
           return (
             // eslint-disable-next-line @next/next/no-img-element
             <img src={src} alt="" className="w-full" />
           );
         }
-        if (aiImageButtons) {
-          return (
-            // eslint-disable-next-line @next/next/no-img-element
-            <MjImageComponent
-              src={src}
-              buttons={aiImageButtons}
-              buttonMessageId={aiImageButtonMessageId}
-              prompt={aiImagePrompt}
-            />
-          );
-        }
-
-        return (
-          <ImageGenerationComponent
-            src={src}
-            title={title}
-            messageIndex={messageIndex}
-            generationPrompt={alt || ''}
-          />
-        );
       };
       Component.displayName = 'ImgComponent';
       return Component;
-    }, [message.pluginId, messageIndex]);
+    }, [message.pluginId]);
 
     const CodeComponent = useMemo(() => {
       const Component: React.FC<any> = ({
@@ -279,6 +251,15 @@ export const ChatMessage: FC<Props> = memo(
       () => modifyParagraphs(message.content),
       [message.content],
     );
+    const aiImageListString = useMemo(() => {
+      return JSON.stringify(getMjImageTags(formattedMessage));
+    }, [formattedMessage]);
+
+    // This is a workaround for the issue that the Carousel will be rendered multiple times
+    const aiImageList = useMemo(() => {
+      return JSON.parse(aiImageListString);
+    }, [aiImageListString]);
+
     return (
       <div
         className={`group px-4 ${
@@ -408,6 +389,9 @@ export const ChatMessage: FC<Props> = memo(
               </div>
             ) : (
               <div className="flex w-full flex-col md:justify-between">
+                {aiImageList.length > 0 && (
+                  <MemoizedImageGallery aiImageList={aiImageList} />
+                )}
                 <div className="flex flex-row justify-between">
                   <MemoizedReactMarkdown
                     className="prose dark:prose-invert min-w-full"

components/Chat/components/Carousel/AnimatedSlide.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react';
+
+type AnimatedSlideProps = {
+  direction: 'left' | 'right' | null;
+  children: React.ReactNode;
+};
+
+const AnimatedSlide: React.FC<AnimatedSlideProps> = ({
+  direction,
+  children,
+}) => {
+  const [animationClass, setAnimationClass] = useState('');
+  const [previousChildren, setPreviousChildren] =
+    useState<React.ReactNode>(children);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    if (mounted) {
+      if (direction === 'left') {
+        setAnimationClass('slide-out-right');
+        setTimeout(() => {
+          setPreviousChildren(children);
+          setAnimationClass('slide-in-left');
+        }, 500);
+      } else if (direction === 'right') {
+        setAnimationClass('slide-out-left');
+        setTimeout(() => {
+          setPreviousChildren(children);
+          setAnimationClass('slide-in-right');
+        }, 500);
+      }
+    } else {
+      setMounted(true);
+    }
+  }, [direction, children, mounted]);
+
+  return (
+    <div className={`${animationClass}`}>
+      <style jsx>{`
+        .slide-in-right {
+          animation: slide-in-right 0.5s forwards;
+        }
+
+        .slide-out-left {
+          animation: slide-out-left 0.5s forwards;
+        }
+
+        .slide-in-left {
+          animation: slide-in-left 0.5s forwards;
+        }
+
+        .slide-out-right {
+          animation: slide-out-right 0.5s forwards;
+        }
+
+        @keyframes slide-in-right {
+          0% {
+            transform: translateX(100%);
+            opacity: 0;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+
+        @keyframes slide-out-left {
+          0% {
+            transform: translateX(0);
+            opacity: 1;
+          }
+          100% {
+            transform: translateX(-100%);
+            opacity: 0;
+          }
+        }
+
+        @keyframes slide-in-left {
+          0% {
+            transform: translateX(-100%);
+            opacity: 0;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+
+        @keyframes slide-out-right {
+          0% {
+            transform: translateX(0);
+            opacity: 1;
+          }
+          100% {
+            transform: translateX(100%);
+            opacity: 0;
+          }
+        }
+      `}</style>
+      {previousChildren}
+    </div>
+  );
+};
+
+export default AnimatedSlide;

components/Chat/components/Carousel/Carousel.tsx

@@ -0,0 +1,110 @@
+import { IconCaretLeft, IconCaretRight } from '@tabler/icons-react';
+import React, {
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+import AnimatedSlide from './AnimatedSlide';
+import CarouselThumbnails from './CarouselThumbnails';
+
+type CarouselProps = {
+  children: ReactNode[];
+};
+
+const Carousel: React.FC<CarouselProps> = ({ children }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [direction, setDirection] = useState<'left' | 'right' | null>(null);
+
+  const {
+    state: { selectedConversation },
+  } = useContext(HomeContext);
+  // reset index on conversation change
+  const selectedConversationId = useMemo(
+    () => selectedConversation?.id,
+    [selectedConversation],
+  );
+  useEffect(() => {
+    setCurrentIndex(0);
+  }, [selectedConversationId]);
+
+  const nextSlide = () => {
+    setDirection('right');
+    const newIndex = currentIndex + 1;
+    setCurrentIndex(newIndex >= children.length ? 0 : newIndex);
+  };
+
+  const prevSlide = () => {
+    setDirection('left');
+    const newIndex = currentIndex - 1;
+    setCurrentIndex(newIndex < 0 ? children.length - 1 : newIndex);
+  };
+
+  const currentIndexChildren = useMemo(() => {
+    return children[currentIndex];
+  }, [children, currentIndex]);
+
+  const handleThumbnailClick = (index: number) => (event: React.MouseEvent) => {
+    setDirection(index > currentIndex ? 'right' : 'left');
+    event.stopPropagation();
+    setCurrentIndex(index);
+  };
+  return (
+    <div className="flex flex-col items-center w-full max-w-[80dvw] mobile:max-w-[70dvw] gap-2">
+      <div className="relative flex justify-between w-full">
+        <AnimatedSlide direction={direction}>
+          {currentIndexChildren}
+        </AnimatedSlide>
+
+        {/* Main Display */}
+        {children.length > 1 && (
+          <>
+            <button
+              onClick={prevSlide}
+              className="absolute left-[-4rem] mobile:left-[-3rem] top-[50%] translate-y-[-50%] p-4 cursor-pointer text-white"
+            >
+              <IconCaretLeft height={`20dvw`} />
+            </button>
+            <button
+              onClick={nextSlide}
+              className="absolute right-[-4rem] mobile:right-[-3rem] top-[50%] translate-y-[-50%] p-4 cursor-pointer text-white"
+            >
+              <IconCaretRight height={`20dvw`} />
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* Dots */}
+      {children.length > 1 && (
+        <div className="flex justify-center space-x-2 my-2">
+          {children.map((_, index) => (
+            <span
+              key={index}
+              className={`h-2 w-2 rounded-full ${
+                currentIndex === index
+                  ? 'bg-gray-800 dark:bg-white'
+                  : 'bg-gray-300 dark:bg-gray-500'
+              }`}
+            />
+          ))}
+        </div>
+      )}
+      {/* Thumbnails */}
+      {children.length > 1 && (
+        <CarouselThumbnails
+          currentIndex={currentIndex}
+          handleThumbnailClick={handleThumbnailClick}
+        >
+          {children}
+        </CarouselThumbnails>
+      )}
+    </div>
+  );
+};
+
+export default Carousel;

components/Chat/components/Carousel/CarouselThumbnails.tsx

@@ -0,0 +1,53 @@
+import React, { ReactElement, ReactNode, useMemo } from 'react';
+
+interface CarouselThumbnailsProps {
+  children: ReactNode[];
+  currentIndex: number;
+  handleThumbnailClick: (index: number) => (event: React.MouseEvent) => void;
+}
+
+const CarouselThumbnails: React.FC<CarouselThumbnailsProps> = ({
+  children,
+  currentIndex,
+  handleThumbnailClick,
+}) => {
+  const rearrangedChildren = useMemo(() => {
+    // if children length is less or equal then 2, no need to rearrange
+    if (children.length <= 2) {
+      return children.map((child, index) => ({
+        child,
+        originalIndex: index,
+      }));
+    }
+    const halfLength = Math.floor(children.length / 2);
+    const start = (currentIndex + 1 + halfLength) % children.length;
+    const rearranged = [...children.slice(start), ...children.slice(0, start)];
+    return rearranged.map((child, index) => ({
+      child,
+      originalIndex: (start + index) % children.length,
+    }));
+  }, [children, currentIndex]);
+
+  return (
+    <div className="flex overflow-x-auto gap-2">
+      {rearrangedChildren.map(({ child, originalIndex }, index) => (
+        <div
+          key={index}
+          onClick={handleThumbnailClick(originalIndex)}
+          className="relative w-16 h-16 cursor-pointer"
+        >
+          {React.cloneElement(child as ReactElement<any>, {
+            className: 'child-no-margin child-no-click',
+          })}
+          <div
+            className={`w-full h-full absolute top-0 left-0 ${
+              currentIndex === originalIndex ? 'bg-transparent' : 'bg-black/70 '
+            }`}
+          ></div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default CarouselThumbnails;

components/Chat/components/Carousel/MemoizedCarousel.tsx

@@ -0,0 +1,6 @@
+import { memo } from 'react';
+
+import Carousel from './Carousel';
+
+const MemoizedCarousel = memo(Carousel);
+export default MemoizedCarousel;

components/Chat/components/CustomImageComponent.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function CustomImageComponent() {
+  return <div>CustomImageComponent</div>;
+}