feat: gifs in chat

packages/shared/src/components/fields/MarkdownInput/index.tsx

@@ -44,6 +44,8 @@ import { usePopupSelector } from '../../../hooks/usePopupSelector';
 import { focusInput } from '../../../lib/textarea';
 import CloseButton from '../../CloseButton';
 import { ACCEPTED_TYPES } from '../../../graphql/posts';
+import GifPopover from '../../popover/GifPopover';
+import { GifIcon } from '../../icons/Gif';
 
 const RecommendedEmojiTooltip = dynamic(
   () =>
@@ -132,6 +134,7 @@ function MarkdownInput(
     uploadedCount,
     onLinkCommand,
     onUploadCommand,
+    onGifCommand,
     onMentionCommand,
     onApplyMention,
     onCloseMention,
@@ -389,6 +392,15 @@ function MarkdownInput(
               />
             )}
           </ConditionalWrapper>
+          <GifPopover
+            buttonProps={{
+              size: actionButtonSizes,
+              variant: ButtonVariant.Tertiary,
+              icon: <GifIcon />,
+            }}
+            onGifCommand={onGifCommand}
+            textareaRef={textareaRef}
+          />
           {shouldShowSubmit && (
             <Button
               className="ml-auto"

packages/shared/src/components/icons/Gif/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const GifIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);

packages/shared/src/components/popover/GifPopover.tsx

@@ -0,0 +1,192 @@
+import { Popover, PopoverTrigger } from '@radix-ui/react-popover';
+import React, { useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+import type { ButtonProps } from '../buttons/Button';
+import { Button } from '../buttons/Button';
+import { PopoverContent } from './Popover';
+import { TextField } from '../fields/TextField';
+import useDebounceFn from '../../hooks/useDebounceFn';
+import useGif from '../../hooks/useGif';
+import { StarIcon } from '../icons';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
+import { GenericLoaderSpinner } from '../utilities/loaders';
+import { IconSize } from '../Icon';
+
+const searchSuggestions = [
+  'Nodding zoom',
+  'Hamster looking into camera',
+  'Jennifer Lawrence okay',
+  'Elmo burning',
+  'Mr Bean waiting',
+  'Dancing dog',
+  'Eye roll',
+  'TWICE',
+  'Hackerman',
+  'Steve Carell cheers',
+];
+
+type GifPopoverProps = {
+  buttonProps: Pick<ButtonProps<'button'>, 'size' | 'variant' | 'icon'>;
+  onGifCommand?: (gifUrl: string, altText: string) => Promise<void>;
+  textareaRef?: React.MutableRefObject<HTMLTextAreaElement>;
+};
+
+const GifPopover = ({
+  buttonProps,
+  onGifCommand,
+  textareaRef,
+}: GifPopoverProps) => {
+  const { ref: scrollRef, inView } = useInView({
+    threshold: 0.5,
+  });
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [savedSelection, setSavedSelection] = React.useState<[number, number]>([
+    0, 0,
+  ]);
+  const [debounceQuery] = useDebounceFn<string>(
+    (value) => setQuery(value),
+    500,
+  );
+  const {
+    data,
+    isLoading,
+    fetchNextPage,
+    isFetchingNextPage,
+    favorite,
+    favorites,
+    isFetchingFavorites,
+  } = useGif({
+    query,
+    limit: '20',
+    favoritesEnabled: open,
+  });
+  const [debounceNextPage] = useDebounceFn<void>(() => {
+    if (inView && data?.length > 0 && !isFetchingNextPage && query) {
+      fetchNextPage();
+    }
+  }, 500);
+
+  const gifsToDisplay = !query ? favorites : data;
+  const isLoadingGifs = !query ? isFetchingFavorites : isLoading;
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (isOpen && textareaRef?.current) {
+      setSavedSelection([
+        textareaRef.current.selectionStart,
+        textareaRef.current.selectionEnd,
+      ]);
+    }
+    setOpen(isOpen);
+  };
+
+  const handleGifClick = async (gif: { url: string; title: string }) => {
+    if (textareaRef?.current) {
+      const [selectionStart, selectionEnd] = savedSelection;
+      const currentTextarea = textareaRef.current;
+
+      currentTextarea.focus();
+      currentTextarea.selectionStart = selectionStart;
+      currentTextarea.selectionEnd = selectionEnd;
+    }
+
+    await onGifCommand?.(gif.url, gif.title);
+    setOpen(false);
+    setQuery('');
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button {...buttonProps} />
+      </PopoverTrigger>
+      <PopoverContent
+        side="top"
+        align="start"
+        avoidCollisions
+        className="flex h-[25rem] w-screen flex-col rounded-16 border border-border-subtlest-tertiary bg-background-popover p-4 data-[side=bottom]:mt-1 data-[side=top]:mb-1 tablet:w-[31.25rem]"
+      >
+        <div className="mb-2 shrink-0">
+          <TextField
+            value={query}
+            onChange={(e) => debounceQuery(e.target.value)}
+            inputId="gifs"
+            label="Search Tenor"
+            placeholder={
+              searchSuggestions[
+                Math.floor(Math.random() * searchSuggestions.length)
+              ]
+            }
+          />
+        </div>
+        <div
+          className="min-h-0 min-w-0 max-w-full flex-1 overflow-x-hidden overflow-y-scroll"
+          onScroll={() => debounceNextPage()}
+        >
+          {!isLoadingGifs && gifsToDisplay?.length > 0 && (
+            <>
+              <div className="grid min-w-0 max-w-full grid-cols-2 gap-2">
+                {gifsToDisplay.map((gif, idx) => (
+                  <div
+                    className="relative"
+                    key={gif.id}
+                    ref={idx === gifsToDisplay.length - 1 ? scrollRef : null}
+                  >
+                    <div className="z-10 absolute right-2 top-2 rounded-16 bg-overlay-primary-pepper">
+                      <Button
+                        icon={
+                          <StarIcon
+                            secondary={favorites?.some((f) => f.id === gif.id)}
+                            className="text-accent-cheese-bolder"
+                          />
+                        }
+                        onClick={() => favorite(gif)}
+                      />
+                    </div>
+                    <button
+                      className="mb-auto"
+                      type="button"
+                      onClick={() =>
+                        handleGifClick({ url: gif.url, title: gif.title })
+                      }
+                    >
+                      <img
+                        src={gif.preview}
+                        alt={gif.title}
+                        className="h-auto min-h-32 w-full cursor-pointer rounded-8 object-cover"
+                      />
+                    </button>
+                  </div>
+                ))}
+              </div>
+              {query && (
+                <div className="flex items-center justify-center py-4">
+                  <GenericLoaderSpinner size={IconSize.XLarge} />
+                </div>
+              )}
+            </>
+          )}
+          {!isLoadingGifs && (!gifsToDisplay || gifsToDisplay.length === 0) && (
+            <div className="flex h-full w-full min-w-0 items-center justify-center px-4">
+              <Typography
+                type={TypographyType.Body}
+                color={TypographyColor.Tertiary}
+                className="w-full min-w-0 whitespace-normal break-words text-center"
+              >
+                {!query
+                  ? 'You have no favorites yet. Add some, and they will appear here!'
+                  : 'no results matching your search 😞'}
+              </Typography>
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default GifPopover;

packages/shared/src/hooks/input/useMarkdownInput.ts

@@ -53,6 +53,7 @@ export enum MarkdownCommand {
   Link = 'link',
   Mention = 'mention',
   Emoji = 'emoji',
+  Gif = 'gif',
 }
 
 export interface UseMarkdownInputProps
@@ -81,6 +82,7 @@ export interface UseMarkdownInput {
   onLinkCommand?: () => Promise<unknown>;
   onMentionCommand?: () => Promise<void>;
   onUploadCommand?: (files: FileList) => void;
+  onGifCommand?: (gifUrl: string, altText: string) => Promise<void>;
   onApplyMention?: (user: UserShortProfile) => Promise<void>;
   onApplyEmoji?: (emoji: string) => Promise<void>;
   checkMention?: (position?: number[]) => void;
@@ -98,6 +100,7 @@ export const defaultMarkdownCommands = {
   link: true,
   mention: true,
   emoji: true,
+  gif: true,
 };
 
 const specialCharsRegex = new RegExp(/[^A-Za-z0-9_.]/);
@@ -117,6 +120,7 @@ export const useMarkdownInput = ({
   const isUploadEnabled = enabledCommand[MarkdownCommand.Upload];
   const isMentionEnabled = enabledCommand[MarkdownCommand.Mention];
   const isEmojiEnabled = enabledCommand[MarkdownCommand.Emoji];
+  const isGifEnabled = enabledCommand[MarkdownCommand.Gif];
   const [command, setCommand] = useState<TextareaCommand>();
   const [input, setInput] = useState(initialContent);
   const [query, setQuery] = useState<string>(undefined);
@@ -433,6 +437,16 @@ export const useMarkdownInput = ({
     startUploading();
   };
 
+  const onGifCommand = async (gifUrl: string, altText: string) => {
+    const replace: GetReplacementFn = (type, { trailingChar }) => {
+      const replacement = `${
+        !trailingChar ? '' : '\n\n'
+      }![${altText}](${gifUrl})\n\n`;
+      return { replacement };
+    };
+    await command.replaceWord(replace, onUpdate);
+  };
+
   const onPaste: ClipboardEventHandler<HTMLTextAreaElement> = async (e) => {
     const pastedText = e.clipboardData.getData('text');
     if (isValidHttpUrl(pastedText)) {
@@ -493,11 +507,13 @@ export const useMarkdownInput = ({
         onCloseEmoji,
       }
     : {};
+  const gifProps = isGifEnabled ? { onGifCommand } : {};
 
   return {
     ...uploadProps,
     ...mentionProps,
     ...emojiProps,
+    ...gifProps,
     input,
     onLinkCommand: isLinkEnabled ? onLinkCommand : null,
     callbacks: {