feat: add search filters (#276)

src/components/Chat/ChatCompareSelect.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'next-i18next';
 import { isMobile } from '@/src/utils/app/mobile';
 
 import { Conversation, Role } from '@/src/types/chat';
+import { FeatureType, HighlightColor } from '@/src/types/common';
 import { Translation } from '@/src/types/translation';
 
 import { useAppSelector } from '@/src/store/hooks';
@@ -15,6 +16,7 @@ import { UISelectors } from '@/src/store/ui/ui.reducers';
 import { ModelIcon } from '../Chatbar/components/ModelIcon';
 
 import { Combobox } from '../Common/Combobox';
+import ShareIcon from '../Common/ShareIcon';
 
 interface OptionProps {
   item: Conversation;
@@ -37,13 +39,20 @@ const Option = ({ item }: OptionProps) => {
   }
 
   return (
-    <div className="flex items-center gap-3 pl-1">
-      <ModelIcon
-        entity={model}
-        entityId={model.id}
-        size={24}
-        inverted={theme === 'dark'}
-      />
+    <div className="group flex items-center gap-3 pl-1">
+      <ShareIcon
+        {...item}
+        isHighlited={false}
+        highlightColor={HighlightColor.Blue}
+        featureType={FeatureType.Chat}
+      >
+        <ModelIcon
+          entity={model}
+          entityId={model.id}
+          size={24}
+          inverted={theme === 'dark'}
+        />
+      </ShareIcon>
       <span>{item.name}</span>
     </div>
   );

src/components/Chatbar/Chatbar.tsx

@@ -4,6 +4,7 @@
 
 import { Conversation } from '@/src/types/chat';
 import { FeatureType } from '@/src/types/common';
+import { SearchFilters } from '@/src/types/search';
 import { Translation } from '@/src/types/translation';
 
 import {
@@ -39,7 +40,7 @@
               names: [DEFAULT_CONVERSATION_NAME],
             }),
           );
-          dispatch(ConversationsActions.setSearchTerm({ searchTerm: '' }));
+          dispatch(ConversationsActions.resetSearch());
         }}
         disabled={!!messageIsStreaming}
         data-qa="new-chat"
@@ -56,24 +57,21 @@
 
   const showChatbar = useAppSelector(UISelectors.selectShowChatbar);
   const searchTerm = useAppSelector(ConversationsSelectors.selectSearchTerm);
-  const folders = useAppSelector((state) =>
-    ConversationsSelectors.selectFilteredFolders(
+  const searchFilters = useAppSelector(
+    ConversationsSelectors.selectSearchFilters,
+  );
+  const itemFilter = useAppSelector(ConversationsSelectors.selectItemFilter);
+
+  const filteredConversations = useAppSelector((state) =>
+    ConversationsSelectors.selectFilteredConversations(
       state,
-      undefined,
+      itemFilter,
       searchTerm,
-      true,
     ),
   );
-  const conversations = useAppSelector(
-    ConversationsSelectors.selectConversations,
-  );
-
-  const filteredConversations = useAppSelector(
-    ConversationsSelectors.selectSearchedConversations,
-  );
 
   const handleDrop = useCallback(
     (e: any) => {
       if (e.dataTransfer) {
         const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
         dispatch(
@@ -82,7 +80,7 @@
             values: { folderId: undefined },
           }),
         );
-        dispatch(ConversationsActions.setSearchTerm({ searchTerm: '' }));
+        dispatch(ConversationsActions.resetSearch());
       }
     },
     [dispatch],
@@ -96,13 +94,15 @@
       isOpen={showChatbar}
       itemComponent={<Conversations conversations={filteredConversations} />}
       folderComponent={<ChatFolders />}
-      folders={folders}
-      items={conversations}
       filteredItems={filteredConversations}
       searchTerm={searchTerm}
+      searchFilters={searchFilters}
       handleSearchTerm={(searchTerm: string) =>
         dispatch(ConversationsActions.setSearchTerm({ searchTerm }))
       }
+      handleSearchFilters={(searchFilters: SearchFilters) =>
+        dispatch(ConversationsActions.setSearchFilters({ searchFilters }))
+      }
       handleDrop={handleDrop}
       footerComponent={<ChatbarSettings />}
     />

src/components/Chatbar/components/ChatFolders.tsx

@@ -2,10 +2,11 @@
 
 import { useTranslation } from 'next-i18next';
 
-import { PinnedItemsFilter, SharedWithMeFilter } from '@/src/utils/app/search';
+import { SharedWithMeFilter } from '@/src/utils/app/search';
 
 import { Conversation } from '@/src/types/chat';
 import { EntityFilter, HighlightColor } from '@/src/types/common';
+import { Feature } from '@/src/types/features';
 import { FolderInterface, FolderSectionProps } from '@/src/types/folder';
 import { Translation } from '@/src/types/translation';
 
@@ -14,6 +15,7 @@
   ConversationsSelectors,
 } from '@/src/store/conversations/conversations.reducers';
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 import { UIActions, UISelectors } from '@/src/store/ui/ui.reducers';
 
 import Folder from '@/src/components/Folder';
@@ -63,7 +65,7 @@
   const openedFoldersIds = useAppSelector(UISelectors.selectOpenedFoldersIds);
 
   const handleDrop = useCallback(
     (e: any, folder: FolderInterface) => {
       if (e.dataTransfer) {
         const conversationData = e.dataTransfer.getData('conversation');
         const folderData = e.dataTransfer.getData('folder');
@@ -234,7 +236,13 @@
     rootConversations,
   ]);
 
-  if (hideIfEmpty && !conversations.length && !folders.length) return null;
+  if (
+    hideIfEmpty &&
+    (!displayRootFiles || !conversations.length) &&
+    !folders.length
+  ) {
+    return null;
+  }
 
   return (
     <CollapsableSection
@@ -267,26 +275,43 @@
   );
 };
 
-const folderItems: FolderSectionProps<Conversation>[] = [
-  {
-    name: 'Share With Me',
-    itemFilter: SharedWithMeFilter,
-    displayRootFiles: true,
-    dataQa: 'share-with-me',
-  },
-  {
-    name: 'Pinned Chats',
-    itemFilter: PinnedItemsFilter,
-    showEmptyFolders: true,
-    openByDefault: true,
-    dataQa: 'pinned-chats',
-  },
-];
-
 export function ChatFolders() {
+  const { t } = useTranslation(Translation.SideBar);
+  const isFilterEmpty = useAppSelector(
+    ConversationsSelectors.selectIsEmptySearchFilter,
+  );
+  const commonItemFilter = useAppSelector(
+    ConversationsSelectors.selectItemFilter,
+  );
+
+  const isSharingEnabled = useAppSelector((state) =>
+    SettingsSelectors.isFeatureEnabled(state, Feature.ConversationsSharing),
+  );
+
+  const folderItems: FolderSectionProps<Conversation>[] = useMemo(
+    () =>
+      [
+        {
+          hidden: !isSharingEnabled || !isFilterEmpty,
+          name: t('Shared with me'),
+          itemFilter: SharedWithMeFilter,
+          displayRootFiles: true,
+          dataQa: 'share-with-me',
+        },
+        {
+          name: t('Pinned chats'),
+          itemFilter: commonItemFilter,
+          showEmptyFolders: isFilterEmpty,
+          openByDefault: true,
+          dataQa: 'pinned-chats',
+        },
+      ].filter(({ hidden }) => !hidden),
+    [commonItemFilter, isFilterEmpty, isSharingEnabled, t],
+  );
+
   return (
     <div
-      className="flex w-full flex-col gap-0.5 divide-y divide-gray-200 dark:divide-gray-800"
+      className="flex w-full flex-col gap-0.5 divide-y divide-gray-200 empty:hidden dark:divide-gray-800"
       data-qa="chat-folders"
     >
       {folderItems.map((itemProps) => (

src/components/Chatbar/components/Conversation.tsx

@@ -55,6 +55,7 @@ export function ConversationView({ conversation, isHighlited }: ViewProps) {
         {...conversation}
         isHighlited={!!isHighlited}
         highlightColor={HighlightColor.Green}
+        featureType={FeatureType.Chat}
       >
         {conversation.replay.replayAsIs && (
           <span className="flex shrink-0">
@@ -333,6 +334,7 @@ export const ConversationComponent = ({ item: conversation, level }: Props) => {
             {...conversation}
             isHighlited={isHighlited}
             highlightColor={HighlightColor.Green}
+            featureType={FeatureType.Chat}
           >
             {conversation.replay.replayAsIs && (
               <span className="flex shrink-0">

src/components/Common/ShareIcon.tsx

@@ -1,40 +1,58 @@
-import { IconArrowUpRight, IconWorldLongitude } from '@tabler/icons-react';
 import { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
 import { getByHighlightColor } from '@/src/utils/app/folders';
 
-import { HighlightColor } from '@/src/types/common';
+import { FeatureType, HighlightColor } from '@/src/types/common';
 import { ShareInterface } from '@/src/types/share';
 
+import { useAppSelector } from '@/src/store/hooks';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
+
+import ArrowUpRight from '@/public/images/icons/arrow-up-right.svg';
+import World from '@/public/images/icons/world.svg';
+
 interface ShareIsonProps extends ShareInterface {
   isHighlited: boolean;
   highlightColor: HighlightColor;
   size?: number;
   children: ReactNode | ReactNode[];
+  featureType: FeatureType;
 }
 
 export default function ShareIcon({
   isShared,
   isPublished,
   isHighlited,
   highlightColor,
-  size = !isPublished ? 12 : 8,
+  size = 12,
   children,
+  featureType,
 }: ShareIsonProps) {
-  if (!isPublished && !isShared) {
+  const isSharingEnabled = useAppSelector((state) =>
+    SettingsSelectors.isSharingEnabled(state, featureType),
+  );
+  const isPublishingEnabled = useAppSelector((state) =>
+    SettingsSelectors.isPublishingEnabled(state, featureType),
+  );
+
+  if (
+    (!isSharingEnabled || !isShared) &&
+    (!isPublishingEnabled || !isPublished)
+  ) {
     return <>{children}</>;
   }
 
-  const AdditionalIcon = isPublished ? IconWorldLongitude : IconArrowUpRight;
+  const AdditionalIcon =
+    isPublished && isPublishingEnabled ? World : ArrowUpRight;
 
   return (
     <div className="relative">
       {children}
       <div
         className={classNames(
-          'absolute bottom-0 left-0 h-[8px] w-[8px] overflow-hidden  bg-gray-100 align-text-top dark:bg-gray-700',
+          'absolute -bottom-1 -left-1 bg-gray-100 dark:bg-gray-700',
           isPublished ? 'rounded-md' : 'rounded-sm',
         )}
       >
@@ -49,7 +67,7 @@ export default function ShareIcon({
               'text-violet group-hover:bg-violet/15',
               'text-blue-500 group-hover:bg-blue-500/20',
             ),
-            !isPublished && 'm-[-2px]',
+            'stroke-1 p-[1px]',
             isHighlited &&
               getByHighlightColor(
                 highlightColor,

src/components/Promptbar/Promptbar.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'next-i18next';
 
 import { FeatureType } from '@/src/types/common';
 import { Prompt } from '@/src/types/prompt';
+import { SearchFilters } from '@/src/types/search';
 import { Translation } from '@/src/types/translation';
 
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
@@ -30,7 +31,7 @@ const PromptActionsBlock = () => {
         className="flex shrink-0 grow cursor-pointer select-none items-center gap-3 rounded px-3 py-2 transition-colors duration-200 hover:bg-violet/15 disabled:cursor-not-allowed"
         onClick={() => {
           dispatch(PromptsActions.createNewPrompt());
-          dispatch(PromptsActions.setSearchTerm({ searchTerm: '' }));
+          dispatch(PromptsActions.resetSearch());
           dispatch(PromptsActions.setIsEditModalOpen({ isOpen: true }));
         }}
         data-qa="new-prompt"
@@ -45,14 +46,14 @@ const PromptActionsBlock = () => {
 const Promptbar = () => {
   const dispatch = useAppDispatch();
   const showPromptbar = useAppSelector(UISelectors.selectShowPromptbar);
-  const filteredPrompts = useAppSelector(
-    PromptsSelectors.selectSearchedPrompts,
-  );
   const searchTerm = useAppSelector(PromptsSelectors.selectSearchTerm);
-  const folders = useAppSelector((state) =>
-    PromptsSelectors.selectFilteredFolders(state, undefined, searchTerm, true),
+  const itemFilter = useAppSelector(PromptsSelectors.selectItemFilter);
+
+  const filteredPrompts = useAppSelector((state) =>
+    PromptsSelectors.selectFilteredPrompts(state, itemFilter, searchTerm),
   );
-  const prompts = useAppSelector(PromptsSelectors.selectPrompts);
+
+  const searchFilters = useAppSelector(PromptsSelectors.selectSearchFilters);
 
   const handleDrop = useCallback(
     (e: any) => {
@@ -80,15 +81,17 @@ const Promptbar = () => {
       itemComponent={<Prompts prompts={filteredPrompts} />}
       actionButtons={<PromptActionsBlock />}
       folderComponent={<PromptFolders />}
-      folders={folders}
-      items={prompts}
       filteredItems={filteredPrompts}
       searchTerm={searchTerm}
+      searchFilters={searchFilters}
       handleSearchTerm={(searchTerm: string) =>
         dispatch(PromptsActions.setSearchTerm({ searchTerm }))
       }
+      handleSearchFilters={(searchFilters: SearchFilters) =>
+        dispatch(PromptsActions.setSearchFilters({ searchFilters }))
+      }
       handleDrop={handleDrop}
-      footerComponent={<PromptbarSettings allPrompts={prompts} />}
+      footerComponent={<PromptbarSettings />}
     />
   );
 };