client/src/components/Conversations/SharedLinkButton.tsx

import { useState } from 'react';
import copy from 'copy-to-clipboard';
import { Copy, Link } from 'lucide-react';
import type { TSharedLink } from 'librechat-data-provider';
import { useUpdateSharedLinkMutation } from '~/data-provider';
import { NotificationSeverity } from '~/common';
import { useToastContext } from '~/Providers';
import { Spinner } from '~/components/svg';
import { Button } from '~/components/ui';
import { useLocalize } from '~/hooks';

export default function SharedLinkButton({
  conversationId,
  share,
  setShare,
  isUpdated,
  setIsUpdated,
}: {
  conversationId: string;
  share: TSharedLink;
  setShare: (share: TSharedLink) => void;
  isUpdated: boolean;
  setIsUpdated: (isUpdated: boolean) => void;
}) {
  const localize = useLocalize();
  const { showToast } = useToastContext();
  const [isCopying, setIsCopying] = useState(false);

  const { mutateAsync, isLoading } = useUpdateSharedLinkMutation({
    onError: () => {
      showToast({
        message: localize('com_ui_share_error'),
        severity: NotificationSeverity.ERROR,
        showIcon: true,
      });
    },
  });

  const copyLink = () => {
    if (!share) {
      return;
    }
    setIsCopying(true);
    const sharedLink =
      window.location.protocol + '//' + window.location.host + '/share/' + share.shareId;
    copy(sharedLink);
    setTimeout(() => {
      setIsCopying(false);
    }, 1500);
  };
  const updateSharedLink = async () => {
    if (!share) {
      return;
    }
    const result = await mutateAsync({
      shareId: share.shareId,
      conversationId: conversationId,
      isPublic: true,
      isVisible: true,
      isAnonymous: true,
    });

    if (result) {
      setShare(result);
      setIsUpdated(true);
      copyLink();
    }
  };
  const getHandler = () => {
    if (isUpdated) {
      return {
        handler: () => {
          copyLink();
        },
        label: (
          <>
            <Copy className="mr-2 h-4 w-4" />
            {localize('com_ui_copy_link')}
          </>
        ),
      };
    }
    if (share?.isPublic) {
      return {
        handler: async () => {
          await updateSharedLink();
        },

        label: (
          <>
            <Link className="mr-2 h-4 w-4" />
            {localize('com_ui_update_link')}
          </>
        ),
      };
    }
    return {
      handler: updateSharedLink,
      label: (
        <>
          <Link className="mr-2 h-4 w-4" />
          {localize('com_ui_create_link')}
        </>
      ),
    };
  };

  const handlers = getHandler();
  return (
    <Button
      disabled={isLoading || isCopying}
      onClick={() => {
        handlers.handler();
      }}
      className="min-w-32 whitespace-nowrap bg-green-500 text-white hover:bg-green-600 dark:bg-green-600 dark:text-white dark:hover:bg-green-800"
    >
      {isCopying && (
        <>
          <Copy className="mr-2 h-4 w-4" />
          {localize('com_ui_copied')}
        </>
      )}
      {!isCopying && !isLoading && handlers.label}
      {!isCopying && isLoading && <Spinner className="h-4 w-4" />}
    </Button>
  );
}