feat(chat): add tooltips for files and folders (Issue #1227)

apps/chat-e2e/src/ui/selectors/sideBarSelectors.ts

@@ -46,6 +46,7 @@ export const PromptBarSelectors = {
   newPromptButton: '[data-qa="new-prompt"]',
   prompts: '[data-qa="prompts"]',
   prompt: '[data-qa="prompt"]',
+  promptName: '[data-qa="prompt-name"]',
   deletePrompts: '[data-qa="delete-prompts"]',
   leftResizeIcon: '[data-qa="left-resize-icon"]',
 };

apps/chat-e2e/src/ui/webElements/conversations.ts

@@ -11,7 +11,11 @@ interface ConversationsChronologyType {
 
 export class Conversations extends BaseConversation {
   constructor(page: Page) {
-    super(page, ChatBarSelectors.conversations, ChatBarSelectors.conversation);
+    super(
+      page,
+      ChatBarSelectors.conversations,
+      ChatBarSelectors.conversationName,
+    );
   }
 
   public chronologyByTitle = (chronology: string) =>

apps/chat-e2e/src/ui/webElements/folderConversations.ts

@@ -10,7 +10,11 @@ import { Page } from '@playwright/test';
 
 export class FolderConversations extends Folders {
   constructor(page: Page) {
-    super(page, ChatBarSelectors.pinnedChats(), ChatBarSelectors.conversation);
+    super(
+      page,
+      ChatBarSelectors.pinnedChats(),
+      ChatBarSelectors.conversationName,
+    );
   }
 
   public async selectShareMenuOption() {

apps/chat-e2e/src/ui/webElements/folderPrompts.ts

@@ -5,6 +5,10 @@ import { Page } from '@playwright/test';
 
 export class FolderPrompts extends Folders {
   constructor(page: Page) {
-    super(page, PromptBarSelectors.promptFolders, PromptBarSelectors.prompt);
+    super(
+      page,
+      PromptBarSelectors.promptFolders,
+      PromptBarSelectors.promptName,
+    );
   }
 }

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

@@ -115,18 +115,22 @@ export function ConversationView({
           />
         )}
       </ShareIcon>
-      <div
-        className="relative max-h-5 flex-1 truncate whitespace-pre break-all text-left"
-        data-qa="conversation-name"
-      >
+      <div className="relative max-h-5 flex-1 truncate whitespace-pre break-all text-left">
         <Tooltip
-          tooltip={t(
-            getEntityNameError(isNameInvalid, isInvalidPath, isExternal),
-          )}
-          hideTooltip={!isNameOrPathInvalid}
-          triggerClassName="block max-h-5 flex-1 truncate whitespace-pre break-all text-left"
+          tooltip={
+            !isNameOrPathInvalid
+              ? conversation.name
+              : t(getEntityNameError(isNameInvalid, isInvalidPath, isExternal))
+          }
+          triggerClassName="max-h-5 flex-1 truncate whitespace-pre text-left"
+          contentClassName="sm:max-w-[400px] max-w-[250px] break-all"
         >
-          {conversation.name}
+          <span
+            className="block max-w-full truncate whitespace-pre"
+            data-qa="conversation-name"
+          >
+            {conversation.name}
+          </span>
         </Tooltip>
       </div>
     </>
@@ -575,7 +579,7 @@ export const ConversationComponent = ({ item: conversation, level }: Props) => {
       ) : (
         <button
           className={classNames(
-            'group flex size-full cursor-pointer items-center gap-2 transition-colors duration-200 disabled:cursor-not-allowed [&:not(:disabled)]:group-hover:pr-6',
+            'group flex max-w-full cursor-pointer items-center gap-2 transition-colors duration-200 disabled:cursor-not-allowed [&:not(:disabled)]:group-hover:pr-6',
             isSelected && 'pr-0',
           )}
           onClick={() => {

apps/chat/src/components/Files/FileItem.tsx

@@ -181,16 +181,22 @@ export const FileItem = ({
               </div>
             )}
         </div>
-        <span
-          className={classNames(
-            'block max-w-full truncate whitespace-pre',
-            item.status === UploadStatus.FAILED && 'text-error',
-            isSelected && 'text-accent-primary',
-          )}
-          data-qa="attached-file-name"
+        <Tooltip
+          tooltip={item.name}
+          triggerClassName="block max-h-5 flex-1 truncate whitespace-pre text-left"
+          contentClassName="sm:max-w-[400px] max-w-[250px] break-all"
         >
-          {item.name}
-        </span>
+          <span
+            className={classNames(
+              'block max-w-full truncate whitespace-pre',
+              item.status === UploadStatus.FAILED && 'text-error',
+              isSelected && 'text-accent-primary',
+            )}
+            data-qa="attached-file-name"
+          >
+            {item.name}
+          </span>
+        </Tooltip>
       </div>
 
       <div className="flex items-center gap-2">

apps/chat/src/components/Folder/Folder.tsx

@@ -704,7 +704,7 @@ const Folder = <T extends ConversationInfo | PromptInfo | DialFile>({
     >
       <div
         className={classNames(
-          'group/folder-item group relative flex h-[30px] items-center rounded border-l-2 hover:bg-accent-primary-alpha',
+          'group/button group/folder-item group relative flex h-[30px] items-center rounded border-l-2 hover:bg-accent-primary-alpha',
           !withBorderHighlight && 'border-transparent',
           isHighlighted ? 'bg-accent-primary-alpha' : 'border-transparent',
           isHighlighted && withBorderHighlight && 'border-accent-primary',
@@ -787,7 +787,7 @@ const Folder = <T extends ConversationInfo | PromptInfo | DialFile>({
           </div>
         ) : (
           <div
-            className="group/button group/folder-item flex size-full cursor-pointer items-center gap-1 py-2 pr-3"
+            className="group/folder-item flex max-w-full cursor-pointer items-center gap-1 py-2 pr-3"
             style={{
               paddingLeft: `${level * 24}px`,
             }}
@@ -868,18 +868,26 @@ const Folder = <T extends ConversationInfo | PromptInfo | DialFile>({
             )}
             <div
               className={classNames(
-                'relative max-h-5 flex-1 truncate break-all text-left group-hover/button:pr-5',
+                'relative max-h-5 flex-1 truncate text-left group-hover/button:pr-5',
                 isNameOrPathInvalid && 'text-secondary',
               )}
               data-qa="folder-name"
             >
               <Tooltip
-                tooltip={t(
-                  getEntityNameError(isNameInvalid, isInvalidPath, isExternal),
-                )}
-                hideTooltip={!isNameOrPathInvalid}
+                tooltip={
+                  !isNameOrPathInvalid
+                    ? currentFolder.name
+                    : t(
+                        getEntityNameError(
+                          isNameInvalid,
+                          isInvalidPath,
+                          isExternal,
+                        ),
+                      )
+                }
+                contentClassName="sm:max-w-[400px] max-w-[250px] break-all"
                 triggerClassName={classNames(
-                  'max-h-5 flex-1 truncate whitespace-pre break-all text-left',
+                  'block max-h-5 flex-1 truncate whitespace-pre break-all text-left',
                   highlightTemporaryFolders &&
                     (currentFolder.temporary
                       ? 'text-primary'

apps/chat/src/components/Promptbar/components/Prompt.tsx

@@ -307,7 +307,7 @@ export const PromptComponent = ({ item: prompt, level }: Props) => {
         data-qa="prompt"
       >
         <div
-          className={classNames('flex size-full items-center gap-2', {
+          className={classNames('flex max-w-full items-center gap-2', {
             'pr-6 xl:pr-0': !isDeleting && !isRenaming && isSelected,
           })}
           draggable={!isExternal && !isNameOrPathInvalid}
@@ -323,16 +323,29 @@ export const PromptComponent = ({ item: prompt, level }: Props) => {
 
           <div className="relative max-h-5 flex-1 truncate whitespace-pre break-all text-left">
             <Tooltip
-              tooltip={t(
-                getEntityNameError(isNameInvalid, isInvalidPath, isExternal),
-              )}
-              hideTooltip={!isNameOrPathInvalid}
+              tooltip={
+                !isNameOrPathInvalid
+                  ? prompt.name
+                  : t(
+                      getEntityNameError(
+                        isNameInvalid,
+                        isInvalidPath,
+                        isExternal,
+                      ),
+                    )
+              }
               triggerClassName={classNames(
-                'block max-h-5 flex-1 truncate whitespace-pre break-all text-left',
+                'max-h-5 flex-1 truncate whitespace-pre text-left',
                 isNameOrPathInvalid && 'text-secondary',
               )}
+              contentClassName="sm:max-w-[400px] max-w-[250px] break-all"
             >
-              {prompt.name}
+              <span
+                className="block max-w-full truncate whitespace-pre"
+                data-qa="prompt-name"
+              >
+                {prompt.name}
+              </span>
             </Tooltip>
           </div>
         </div>