fix(chat): keep mention searches open and align resource menus (#8507)

* fix(chat): keep mention searches open and align resource menus

* fix(chat): preserve mention selection and nested menu sizing

* fix(chat): reset replaced queries and bound workspace previews

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx

@@ -82,6 +82,7 @@ interface ResourceFolderTreeItemsProps {
    */
   folderType?: MothershipResourceType
   onSelect: (resource: MothershipResource) => void
+  subContentClassName?: string
 }
 
 /** Renders a {@link buildResourceFolderTree} result as nested dropdown submenus. */
@@ -90,6 +91,7 @@ export function ResourceFolderTreeItems({
   type,
   folderType,
   onSelect,
+  subContentClassName,
 }: ResourceFolderTreeItemsProps) {
   const config = getResourceConfig(type)
   return (
@@ -108,7 +110,7 @@ export function ResourceFolderTreeItems({
               <Folder className='size-[14px]' />
               <DropdownMenuItemLabel label={node.name} />
             </DropdownMenuSubTrigger>
-            <DropdownMenuSubContent>
+            <DropdownMenuSubContent className={subContentClassName}>
               {folderType && (
                 <DropdownMenuItem
                   onClick={() => onSelect({ type: folderType, id: node.id, title: node.name })}
@@ -122,6 +124,7 @@ export function ResourceFolderTreeItems({
                 type={type}
                 folderType={folderType}
                 onSelect={onSelect}
+                subContentClassName={subContentClassName}
               />
             </DropdownMenuSubContent>
           </DropdownMenuSub>
@@ -275,6 +278,7 @@ export function ResourceMenuSections({
                   type={section.type}
                   folderType={section.folderType}
                   onSelect={onSelect}
+                  subContentClassName={subContentClassName}
                 />
               ) : (
                 items.map((item) => (
@@ -401,6 +405,7 @@ interface WorkspaceResourceMenuContentProps {
   /** Offers every folder as an attachable entry, as chat does. */
   selectFolders?: boolean
   onSelect: (resource: MothershipResource) => void
+  subContentClassName?: string
 }
 
 function WorkspaceResourceMenuContent({
@@ -410,6 +415,7 @@ function WorkspaceResourceMenuContent({
   searchable = true,
   selectFolders,
   onSelect,
+  subContentClassName,
 }: WorkspaceResourceMenuContentProps) {
   const { groups, structureFolders, isHydrating } = useAvailableResources(workspaceId, {
     enabled,
@@ -425,7 +431,12 @@ function WorkspaceResourceMenuContent({
   /** Lists fill in as they load, so a trailing row keeps a loading workspace from reading as empty. */
   const menu = (
     <>
-      <ResourceMenuSections sections={sections} groups={groups} onSelect={select} />
+      <ResourceMenuSections
+        sections={sections}
+        groups={groups}
+        onSelect={select}
+        subContentClassName={subContentClassName}
+      />
       {isHydrating && <DropdownMenuItem disabled>Loading resources</DropdownMenuItem>}
     </>
   )
@@ -449,6 +460,7 @@ interface WorkspaceResourceSubmenuProps {
    * offers its folder, for pickers that can attach a whole workspace.
    */
   onSelectWorkspace?: (workspace: Pick<Workspace, 'id' | 'name'>) => void
+  subContentClassName?: string
 }
 
 /**
@@ -461,6 +473,7 @@ export function WorkspaceResourceSubmenu({
   selectFolders,
   onSelect,
   onSelectWorkspace,
+  subContentClassName,
 }: WorkspaceResourceSubmenuProps) {
   const [open, setOpen] = useState(false)
   const icon = (
@@ -472,7 +485,9 @@ export function WorkspaceResourceSubmenu({
         {icon}
         <DropdownMenuItemLabel label={workspace.name} />
       </DropdownMenuSubTrigger>
-      <DropdownMenuSubContent className='flex w-[320px] flex-col overflow-hidden'>
+      <DropdownMenuSubContent
+        className={cn('flex w-[320px] flex-col overflow-hidden', subContentClassName)}
+      >
         {onSelectWorkspace && (
           <DropdownMenuItem onClick={() => onSelectWorkspace(workspace)}>
             {icon}
@@ -486,6 +501,7 @@ export function WorkspaceResourceSubmenu({
           searchable={false}
           selectFolders={selectFolders}
           onSelect={onSelect}
+          subContentClassName={subContentClassName}
         />
       </DropdownMenuSubContent>
     </DropdownMenuSub>