Merge pull request #887 from AnishSarkar22/fix/mobile-ui

feat: enhance ComposerAction with dropdown menu on mobile

surfsense_web/components/assistant-ui/thread.tsx

@@ -19,10 +19,12 @@ import {
 	ChevronRightIcon,
 	CopyIcon,
 	DownloadIcon,
+	Plus,
 	RefreshCwIcon,
+	Settings2,
 	SquareIcon,
 	Unplug,
-	Wrench,
+	Upload,
 	X,
 } from "lucide-react";
 import { useParams } from "next/navigation";
@@ -53,6 +55,7 @@ import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { AssistantMessage } from "@/components/assistant-ui/assistant-message";
 import { ChatSessionStatus } from "@/components/assistant-ui/chat-session-status";
 import { ConnectorIndicator } from "@/components/assistant-ui/connector-popup";
+import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
 import {
 	InlineMentionEditor,
 	type InlineMentionEditorRef,
@@ -73,6 +76,13 @@ import {
 import type { ThinkingStep } from "@/components/tool-ui/deepagent-thinking";
 import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
+import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Switch } from "@/components/ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -278,21 +288,14 @@ const ConnectToolsBanner: FC = () => {
 						</Avatar>
 					))}
 				</AvatarGroup>
-				<span
+				<button
-					role="button"
+					type="button"
-					tabIndex={0}
 					onClick={handleDismiss}
-					onKeyDown={(e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-							handleDismiss(e as unknown as React.MouseEvent);
-						}
-					}}
 					className="shrink-0 ml-0.5 p-0.5 text-muted-foreground/40 hover:text-foreground transition-colors"
 					aria-label="Dismiss"
 				>
 					<X className="size-3.5" />
-				</span>
+				</button>
 			</button>
 		</div>
 	);
@@ -564,6 +567,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 	const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
 	const [toolsPopoverOpen, setToolsPopoverOpen] = useState(false);
 	const isDesktop = useMediaQuery("(min-width: 640px)");
+	const { openDialog: openUploadDialog } = useDocumentUploadDialog();
 	const [toolsScrollPos, setToolsScrollPos] = useState<"top" | "middle" | "bottom">("top");
 	const handleToolsScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
 		const el = e.currentTarget;
@@ -607,6 +611,78 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 	return (
 		<div className="aui-composer-action-wrapper relative mx-3 mb-2 flex items-center justify-between">
 			<div className="flex items-center gap-1">
+				{!isDesktop ? (
+					<>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
+									aria-label="More actions"
+									data-joyride="connector-icon"
+								>
+									<Plus className="size-4" />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent side="top" align="start" sideOffset={8}>
+								<DropdownMenuItem onSelect={() => setToolsPopoverOpen(true)}>
+									<Settings2 className="size-4" />
+									Manage Tools
+								</DropdownMenuItem>
+								<DropdownMenuItem onSelect={() => openUploadDialog()}>
+									<Upload className="size-4" />
+									Upload Files
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+						<Drawer open={toolsPopoverOpen} onOpenChange={setToolsPopoverOpen}>
+							<DrawerContent className="max-h-[60dvh]">
+								<DrawerHandle />
+								<div className="flex items-center justify-between px-4 py-2">
+									<DrawerTitle className="text-sm font-medium">Agent Tools</DrawerTitle>
+									<span className="text-xs text-muted-foreground">
+										{enabledCount}/{agentTools?.length ?? 0} enabled
+									</span>
+								</div>
+								<div className="overflow-y-auto pb-6" onScroll={handleToolsScroll}>
+									{agentTools?.map((tool) => {
+										const isDisabled = disabledTools.includes(tool.name);
+										return (
+											<div
+												key={tool.name}
+												className="flex w-full items-center gap-3 px-4 py-2 hover:bg-muted-foreground/10 transition-colors"
+											>
+												<span className="flex-1 min-w-0 text-sm font-medium truncate">
+													{formatToolName(tool.name)}
+												</span>
+												<Switch
+													checked={!isDisabled}
+													onCheckedChange={() => toggleTool(tool.name)}
+													className="shrink-0"
+												/>
+											</div>
+										);
+									})}
+									{!agentTools?.length && (
+										<div className="px-4 py-6 text-center text-sm text-muted-foreground">
+											Loading tools...
+										</div>
+									)}
+								</div>
+							</DrawerContent>
+						</Drawer>
+						<Button
+							variant="ghost"
+							size="icon"
+							className="size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
+							aria-label="Manage connectors"
+							onClick={() => setConnectorDialogOpen(true)}
+						>
+							<Unplug className="size-4" />
+						</Button>
+					</>
+				) : (
 					<Popover open={toolsPopoverOpen} onOpenChange={setToolsPopoverOpen}>
 						<PopoverTrigger asChild>
 							<TooltipIconButton
@@ -618,7 +694,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 								aria-label="Manage tools"
 								data-joyride="connector-icon"
 							>
-							<Wrench className="size-4" />
+								<Settings2 className="size-4" />
 							</TooltipIconButton>
 						</PopoverTrigger>
 						<PopoverContent
@@ -645,7 +721,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 								{agentTools?.map((tool) => {
 									const isDisabled = disabledTools.includes(tool.name);
 									const row = (
-									<label className="flex items-center gap-2 sm:gap-3 px-2.5 sm:px-3 py-1 sm:py-1.5 cursor-pointer hover:bg-muted-foreground/10 transition-colors">
+										<div className="flex w-full items-center gap-2 sm:gap-3 px-2.5 sm:px-3 py-1 sm:py-1.5 hover:bg-muted-foreground/10 transition-colors">
 											<span className="flex-1 min-w-0 text-xs sm:text-sm font-medium truncate">
 												{formatToolName(tool.name)}
 											</span>
@@ -654,11 +730,8 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 												onCheckedChange={() => toggleTool(tool.name)}
 												className="shrink-0 scale-[0.6] sm:scale-75"
 											/>
-									</label>
+										</div>
 									);
-								if (!isDesktop) {
-									return <div key={tool.name}>{row}</div>;
-								}
 									return (
 										<Tooltip key={tool.name}>
 											<TooltipTrigger asChild>{row}</TooltipTrigger>
@@ -676,18 +749,6 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 							</div>
 						</PopoverContent>
 					</Popover>
-				{!isDesktop && (
-					<TooltipIconButton
-						tooltip="Manage connectors"
-						side="bottom"
-						variant="ghost"
-						size="icon"
-						className="size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
-						aria-label="Manage connectors"
-						onClick={() => setConnectorDialogOpen(true)}
-					>
-						<Unplug className="size-4" />
-					</TooltipIconButton>
 				)}
 				{sidebarDocs.length > 0 && (
 					<button