feat(chat): integrate sharing into stateful api

apps/chat/next.config.js

@@ -140,15 +140,6 @@ const nextConfig = {
   },
   async headers() {
     return [
-      {
-        source: '/overlay/script.js',
-        headers: [
-          {
-            key: 'Access-Control-Allow-Origin',
-            value: '*',
-          },
-        ],
-      },
       {
         source: '/:path*',
         headers: [

apps/chat/public/locales/en/sidebar.json

@@ -1,7 +1,3 @@
 {
-    "share.modal.link.description": "This link is temporary and will be active for 3 days.",
-    "share.modal.link_conversation": "This conversation and future changes to it will be visible to users who follow the link. Only owner will be able to make changes.",
-    "share.modal.link_prompt": "This prompt and future changes to it will be visible to users who follow the link. Only owner will be able to make changes.",
-    "share.modal.link_conversations_folder": "This conversation folder and future changes to it will be visible to users who follow the link. Only owner will be able to make changes.",
-    "share.modal.link_prompts_folder": "This prompt folder and future changes to it will be visible to users who follow the link. Only owner will be able to make changes."
+    "share.modal.link.description": "This link is temporary and will be active for 3 days."
 }

apps/chat/src/components/Chat/ChangePathDialog.tsx

@@ -2,11 +2,14 @@ import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
+import { BucketService } from '@/src/utils/app/data/bucket-service';
+import { constructPath } from '@/src/utils/app/file';
 import {
   getChildAndCurrentFoldersIdsById,
   getPathToFolderById,
   validateFolderRenaming,
 } from '@/src/utils/app/folders';
+import { ApiKeys } from '@/src/utils/server/api';
 
 import { FeatureType } from '@/src/types/common';
 import { SharingType } from '@/src/types/share';
@@ -132,7 +135,7 @@ export const ChangePathDialog = ({
   );
 
   const handleAddFolder = useCallback(
-    (parentFolderId?: string) => {
+    (parentFolderId: string) => {
       dispatch(
         actions.createTemporaryFolder({
           relativePath: parentFolderId,
@@ -206,7 +209,11 @@ export const ChangePathDialog = ({
         />
       </SelectFolderHeader>
       <SelectFolderFooter
-        handleNewFolder={() => handleAddFolder()}
+        handleNewFolder={() =>
+          handleAddFolder(
+            constructPath(ApiKeys.Files, BucketService.getBucket()),
+          )
+        }
         onSelectFolderClick={getPath}
       />
     </SelectFolder>

apps/chat/src/components/Chat/Publish/PublishWizard.tsx

@@ -25,6 +25,7 @@ import { onBlur } from '@/src/utils/app/style-helpers';
 
 import { ShareEntity } from '@/src/types/common';
 import { DialFile } from '@/src/types/files';
+import { ModalState } from '@/src/types/modal';
 import {
   SharingType,
   TargetAudienceFilter,
@@ -181,7 +182,6 @@ export default function PublishWizard({
       dispatch(
         publishAction({
           id: entity.id,
-          shareUniqueId: shareId.current,
           name: trimmedName,
           path: trimmedPath,
           version: trimmedVersion,
@@ -226,7 +226,7 @@ export default function PublishWizard({
         { 'w-full': files.length },
       )}
       dataQa="publish-modal"
-      isOpen={isOpen}
+      state={isOpen ? ModalState.OPENED : ModalState.CLOSED}
       onClose={onClose}
       initialFocus={nameInputRef}
     >

apps/chat/src/components/Chat/ReportIssueDialog.tsx

@@ -14,6 +14,7 @@ import classNames from 'classnames';
 import { checkValidity } from '@/src/utils/app/forms';
 import { onBlur } from '@/src/utils/app/style-helpers';
 
+import { ModalState } from '@/src/types/modal';
 import { ReportIssueBody } from '@/src/types/report-issue';
 import { Translation } from '@/src/types/translation';
 
@@ -115,22 +116,16 @@ export const ReportIssueDialog: FC<Props> = ({ isOpen, onClose }) => {
     [description, dispatch, handleClose, t, title],
   );
 
-  // Render nothing if the dialog is not open.
-  if (!isOpen) {
-    return <></>;
-  }
-
   const inputClassName = classNames('input-form', 'peer', {
     'input-invalid': submitted,
     submitted: submitted,
   });
 
-  // Render the dialog.
   return (
     <Modal
       initialFocus={titleInputRef}
       portalId="theme-main"
-      isOpen={isOpen}
+      state={isOpen ? ModalState.OPENED : ModalState.CLOSED}
       onClose={handleClose}
       dataQa="request-api-key-dialog"
       overlayClassName="fixed inset-0"

apps/chat/src/components/Chat/RequestApiKeyDialog.tsx

@@ -15,6 +15,7 @@ import classNames from 'classnames';
 import { checkValidity } from '@/src/utils/app/forms';
 import { onBlur } from '@/src/utils/app/style-helpers';
 
+import { ModalState } from '@/src/types/modal';
 import { RequestAPIKeyBody } from '@/src/types/request-api-key';
 import { Translation } from '@/src/types/translation';
 
@@ -225,11 +226,6 @@ export const RequestAPIKeyDialog: FC<Props> = ({ isOpen, onClose }) => {
     ],
   );
 
-  // Render nothing if the dialog is not open.
-  if (!isOpen) {
-    return <></>;
-  }
-
   // Render the dialog.
   const inputClassName = classNames('input-form', 'peer', {
     'input-invalid': submitted,
@@ -244,7 +240,7 @@ export const RequestAPIKeyDialog: FC<Props> = ({ isOpen, onClose }) => {
     <Modal
       initialFocus={projectNameInputRef}
       portalId="theme-main"
-      isOpen={isOpen}
+      state={isOpen ? ModalState.OPENED : ModalState.CLOSED}
       onClose={handleClose}
       dataQa="request-api-key-dialog"
       overlayClassName="fixed inset-0"

apps/chat/src/components/Chat/ShareModal.tsx

@@ -10,37 +10,39 @@ import {
 
 import { useTranslation } from 'next-i18next';
 
-import { getShareActionByType } from '@/src/utils/app/share';
-
-import { ShareEntity } from '@/src/types/common';
-import { SharingType } from '@/src/types/share';
+import { ModalState } from '@/src/types/modal';
 import { Translation } from '@/src/types/translation';
 
-import { useAppDispatch } from '@/src/store/hooks';
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import { ShareActions, ShareSelectors } from '@/src/store/share/share.reducers';
 
 import Modal from '../Common/Modal';
 import Tooltip from '../Common/Tooltip';
 
-import { v4 as uuidv4 } from 'uuid';
-
-interface Props {
-  entity: ShareEntity;
-  type: SharingType;
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export default function ShareModal({ entity, isOpen, onClose, type }: Props) {
+export default function ShareModal() {
   const { t } = useTranslation(Translation.SideBar);
   const dispatch = useAppDispatch();
-  const shareAction = getShareActionByType(type);
+
   const copyButtonRef = useRef<HTMLButtonElement>(null);
   const [urlCopied, setUrlCopied] = useState(false);
   const [urlWasCopied, setUrlWasCopied] = useState(false);
-  const shareId = useRef(uuidv4());
-  const url = `${window?.location.origin}/share/${shareId.current}`;
   const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
+  const modalState = useAppSelector(ShareSelectors.selectShareModalState);
+  const invitationId = useAppSelector(ShareSelectors.selectInvitationId);
+  const shareResourceName = useAppSelector(
+    ShareSelectors.selectShareResourceName,
+  );
+  const [url, setUrl] = useState('');
+
+  useEffect(() => {
+    setUrl(`${window?.location.origin}/share/${invitationId || ''}`);
+  }, [invitationId]);
+
+  const handleClose = useCallback(() => {
+    dispatch(ShareActions.setModalState({ modalState: ModalState.CLOSED }));
+  }, [dispatch]);
+
   const handleCopy = useCallback(
     (e: MouseEvent<HTMLButtonElement> | ClipboardEvent<HTMLInputElement>) => {
       e.preventDefault();
@@ -55,13 +57,10 @@ export default function ShareModal({ entity, isOpen, onClose, type }: Props) {
         }, 2000);
         if (!urlWasCopied) {
           setUrlWasCopied(true);
-          dispatch(
-            shareAction({ id: entity.id, shareUniqueId: shareId.current }),
-          );
         }
       });
     },
-    [dispatch, entity.id, shareAction, url, urlWasCopied],
+    [url, urlWasCopied],
   );
 
   useEffect(() => () => clearTimeout(timeoutRef.current), []);
@@ -71,26 +70,14 @@ export default function ShareModal({ entity, isOpen, onClose, type }: Props) {
       portalId="theme-main"
       containerClassName="inline-block w-full max-w-[424px] p-6"
       dataQa="share-modal"
-      isOpen={isOpen}
-      onClose={onClose}
+      state={modalState}
+      onClose={handleClose}
+      heading={`${t('Share')}: ${shareResourceName?.trim()}`}
     >
       <div className="flex flex-col justify-between gap-2">
-        <h4 className="max-h-[50px] text-base font-semibold">
-          <Tooltip tooltip={entity.name.trim()}>
-            <span
-              className="line-clamp-2 break-words"
-              data-qa="share-chat-name"
-            >
-              {`${t('Share')}: ${entity.name.trim()}`}
-            </span>
-          </Tooltip>
-        </h4>
         <p className="text-sm text-secondary">
           {t('share.modal.link.description')}
         </p>
-        <p className="text-sm text-secondary">
-          {t('share.modal.link', { context: type })}
-        </p>
         <div className="relative mt-2">
           <Tooltip tooltip={url}>
             <input

apps/chat/src/components/Chat/UnpublishModal.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'next-i18next';
 import { getUnpublishActionByType } from '@/src/utils/app/share';
 
 import { Entity } from '@/src/types/common';
+import { ModalState } from '@/src/types/modal';
 import { SharingType } from '@/src/types/share';
 import { Translation } from '@/src/types/translation';
 
@@ -47,9 +48,7 @@ export default function UnpublishModal({
       e.preventDefault();
       e.stopPropagation();
 
-      dispatch(
-        unpublishAction({ id: entity.id, shareUniqueId: shareId.current }),
-      );
+      dispatch(unpublishAction({ id: entity.id }));
       onClose();
     },
     [dispatch, entity.id, onClose, unpublishAction],
@@ -60,7 +59,7 @@ export default function UnpublishModal({
       portalId="theme-main"
       containerClassName="inline-block h-[434px] sm:w-[424px] p-6 w-full"
       dataQa="unpublish-modal"
-      isOpen={isOpen}
+      state={isOpen ? ModalState.OPENED : ModalState.CLOSED}
       onClose={onClose}
     >
       <div className="flex h-full flex-col justify-between gap-2">

apps/chat/src/components/Chatbar/ChatFolders.tsx

@@ -213,14 +213,14 @@ export const ChatSection = ({
   );
 
   const rootFolders = useMemo(
-    () => folders.filter(({ folderId }) => !folderId),
+    () => folders.filter(({ folderId }) => folderId.split('/').length === 2),
     [folders],
   );
 
   const rootConversations = useMemo(
     () =>
       conversations
-        .filter(({ folderId }) => !folderId)
+        .filter(({ folderId }) => folderId.split('/').length === 2)
         .sort(compareEntitiesByName),
     [conversations],
   );

apps/chat/src/components/Chatbar/ChatbarSettings.tsx

@@ -9,6 +9,10 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
+import { BucketService } from '@/src/utils/app/data/bucket-service';
+import { constructPath } from '@/src/utils/app/file';
+import { ApiKeys } from '@/src/utils/server/api';
+
 import { FeatureType } from '@/src/types/common';
 import { SupportedExportFormats } from '@/src/types/import-export';
 import { DisplayMenuItemProps } from '@/src/types/menu';
@@ -83,7 +87,14 @@ export const ChatbarSettings = () => {
         dataQa: 'create-folder',
         Icon: FolderPlus,
         onClick: () => {
-          dispatch(ConversationsActions.createFolder());
+          dispatch(
+            ConversationsActions.createFolder({
+              parentId: constructPath(
+                ApiKeys.Conversations,
+                BucketService.getBucket(),
+              ),
+            }),
+          );
         },
       },
       {