feat(chat): bulk resolve conversations via checkbox selection (EVO-1011)

Add multi-select checkboxes to the conversation list sidebar with a bulk
action toolbar that allows resolving multiple conversations at once via
POST /api/v1/bulk_actions. Sidebar width increased from w-80 to w-96 to
accommodate the full action label.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: marcelogorutuba

src/components/chat/chat-sidebar/ChatSidebar.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { Button } from '@evoapi/design-system/button';
+import { Checkbox } from '@evoapi/design-system/checkbox';
 import { Input } from '@evoapi/design-system/input';
 import { Badge } from '@evoapi/design-system/badge';
 import {
@@ -93,6 +94,11 @@ interface ChatSidebarProps {
   onAssignTeam: (conversation: Conversation) => void;
   onAssignTag: (conversation: Conversation) => void;
   onDeleteConversation: (conversation: Conversation) => void;
+  selectedConversationIds: Set<string>;
+  onToggleSelect: (displayId: string) => void;
+  onClearSelection: () => void;
+  onBulkResolve: () => Promise<void>;
+  isBulkResolving?: boolean;
 }
 
 const ChatSidebar = ({
@@ -117,6 +123,11 @@ const ChatSidebar = ({
   onAssignTeam,
   onAssignTag,
   onDeleteConversation,
+  selectedConversationIds,
+  onToggleSelect,
+  onClearSelection,
+  onBulkResolve,
+  isBulkResolving = false,
 }: ChatSidebarProps) => {
   const { t } = useLanguage('chat');
   const chatContext = useChatContext();
@@ -145,6 +156,11 @@ const ChatSidebar = ({
   const sidebarScrollRef = useRef<HTMLDivElement | null>(null);
   const loadingMoreRef = useRef(false);
 
+  useEffect(() => {
+    onClearSelection();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showArchived]);
+
   // Pipeline state
   const [allPipelines, setAllPipelines] = useState<Pipeline[]>([]);
   const [isPipelinesLoaded, setIsPipelinesLoaded] = useState(false);
@@ -885,7 +901,7 @@ const ChatSidebar = ({
       data-tour="chat-sidebar"
       className={`
         ${mobileView === 'list' ? 'flex' : 'hidden'} md:flex
-        w-full md:w-80 border-r bg-card/50 flex-col h-full
+        w-full md:w-96 border-r bg-card/50 flex-col h-full
       `}
     >
       {/* Search and Filter Header */}
@@ -973,6 +989,37 @@ const ChatSidebar = ({
         )}
       </div>
 
+      {/* Bulk Action Toolbar */}
+      {selectedConversationIds.size > 0 && (
+        <div className="px-3 py-2 border-b bg-primary/5 flex flex-col gap-1.5 flex-shrink-0">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-muted-foreground">
+              {selectedConversationIds.size}{' '}
+              {selectedConversationIds.size === 1
+                ? t('chatSidebar.conversation')
+                : t('chatSidebar.conversations')}
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0 cursor-pointer"
+              onClick={onClearSelection}
+            >
+              <X className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+          <Button
+            size="sm"
+            className="h-7 w-full cursor-pointer"
+            onClick={onBulkResolve}
+            disabled={isBulkResolving}
+          >
+            <CheckCircle className="h-3.5 w-3.5 mr-1.5" />
+            {t('chatHeader.actions.markAsResolved')}
+          </Button>
+        </div>
+      )}
+
       {/* Conversations List */}
       <div
         ref={sidebarScrollRef}
@@ -1044,6 +1091,16 @@ const ChatSidebar = ({
                 >
                   <div className="flex items-start justify-between">
                     <div className="flex items-start gap-3 min-w-0 flex-1">
+                      <div
+                        className="mt-1 flex-shrink-0"
+                        onClick={e => e.stopPropagation()}
+                      >
+                        <Checkbox
+                          checked={selectedConversationIds.has(String(conversation.display_id))}
+                          onCheckedChange={() => onToggleSelect(String(conversation.display_id))}
+                          className="bg-white dark:bg-zinc-700 border-2 border-zinc-400 dark:border-zinc-500 data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+                        />
+                      </div>
                       <ContactAvatar
                         contact={conversation.contact}
                         channelType={channelType}

src/i18n/locales/en/chat.json

@@ -302,6 +302,7 @@
     "searchPlaceholder": "Search conversations...",
     "conversation": "conversation",
     "conversations": "conversations",
+    "selected": "selected",
     "filter": "filter",
     "filters": "filters",
     "filtersButton": "Filters",

src/i18n/locales/es/chat.json

@@ -297,6 +297,7 @@
     "searchPlaceholder": "Buscar conversaciones...",
     "conversation": "conversación",
     "conversations": "conversaciones",
+    "selected": "seleccionada(s)",
     "filter": "filtro",
     "filters": "filtros",
     "filtersButton": "Filtros",

src/i18n/locales/fr/chat.json

@@ -297,6 +297,7 @@
     "searchPlaceholder": "Rechercher des conversations...",
     "conversation": "conversation",
     "conversations": "conversations",
+    "selected": "sélectionnée(s)",
     "filter": "filtre",
     "filters": "filtres",
     "filtersButton": "Filtres",

src/i18n/locales/it/chat.json

@@ -297,6 +297,7 @@
     "searchPlaceholder": "Cerca conversazioni...",
     "conversation": "conversazione",
     "conversations": "conversazioni",
+    "selected": "selezionata/e",
     "filter": "filtro",
     "filters": "filtri",
     "filtersButton": "Filtri",

src/i18n/locales/pt-BR/chat.json

@@ -302,6 +302,7 @@
     "searchPlaceholder": "Buscar conversas...",
     "conversation": "conversa",
     "conversations": "conversas",
+    "selected": "selecionada(s)",
     "filter": "filtro",
     "filters": "filtros",
     "filtersButton": "Filtros",

src/i18n/locales/pt/chat.json

@@ -297,6 +297,7 @@
     "searchPlaceholder": "Buscar conversas...",
     "conversation": "conversa",
     "conversations": "conversas",
+    "selected": "selecionada(s)",
     "filter": "filtro",
     "filters": "filtros",
     "filtersButton": "Filtros",

src/pages/Customer/Chat/Chat.tsx

@@ -46,6 +46,7 @@ import type { AssignmentOption, AssignmentType } from '@/components/chat/assignm
 import { labelsService } from '@/services/contacts/labelsService';
 import { useAppDataStore } from '@/store/appDataStore';
 import type { Label } from '@/types/settings';
+import { conversationAPI } from '@/services/conversations/conversationService';
 
 const ContactSidebar = React.lazy(() => import('@/components/chat/contact-sidebar/ContactSidebar'));
 
@@ -103,6 +104,10 @@ const Chat = () => {
   const [assignmentType, setAssignmentType] = useState<AssignmentType>('agent');
   const [conversationToAssign, setConversationToAssign] = useState<Conversation | null>(null);
 
+  // Bulk selection state
+  const [selectedConversationIds, setSelectedConversationIds] = useState<Set<string>>(new Set());
+  const [isBulkResolving, setIsBulkResolving] = useState(false);
+
   // Dashboard Apps state (lazy loaded, not auto-fetched)
   const [dashboardApps] = useState<DashboardApp[]>([]);
   const [activeTab, setActiveTab] = useState<string>('chat');
@@ -132,6 +137,7 @@ const Chat = () => {
   // 🎯 FILTROS: Usar handlers dos hooks customizados (DEFINIR ANTES DOS useEffect)
   const handleApplyFilters = useCallback(
     async (newFilters: BaseFilter[]) => {
+      setSelectedConversationIds(new Set());
       try {
         await filterHandlers.handleApplyFilters(newFilters);
       } catch (error) {
@@ -180,13 +186,51 @@ const Chat = () => {
   }, [permissionsReady]);
 
   const handleClearFilters = useCallback(async () => {
+    setSelectedConversationIds(new Set());
     await filterHandlers.handleClearFilters();
   }, [filterHandlers]);
 
   const reloadCurrentFilters = useCallback(async () => {
     await filterHandlers.reloadCurrentFilters();
   }, [filterHandlers]);
 
+  const handleToggleConversationSelection = useCallback((displayId: string) => {
+    setSelectedConversationIds(prev => {
+      const next = new Set(prev);
+      if (next.has(displayId)) {
+        next.delete(displayId);
+      } else {
+        next.add(displayId);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleClearSelection = useCallback(() => {
+    setSelectedConversationIds(new Set());
+  }, []);
+
+  const handleBulkResolve = useCallback(async () => {
+    if (selectedConversationIds.size === 0) return;
+    const displayIds = Array.from(selectedConversationIds);
+    const resolvedConversations = conversations.state.conversations
+      .filter(c => selectedConversationIds.has(String(c.display_id)));
+    setIsBulkResolving(true);
+    try {
+      await conversationAPI.bulkResolve(displayIds);
+      toast.success(`${displayIds.length} conversa(s) resolvida(s)`);
+      setSelectedConversationIds(new Set());
+      for (const conv of resolvedConversations) {
+        conversations.updateConversation({ ...conv, status: 'resolved' });
+      }
+    } catch (error) {
+      console.error('Bulk resolve error:', error);
+      toast.error('Erro ao resolver conversas em lote');
+    } finally {
+      setIsBulkResolving(false);
+    }
+  }, [selectedConversationIds, conversations]);
+
   // 🔄 CARREGAMENTO SIMPLES: Apenas carregar mensagens quando conversa muda
   useEffect(() => {
     if (conversations.state.selectedConversationId) {
@@ -714,6 +758,11 @@ const Chat = () => {
           onAssignTeam={handleAssignTeam}
           onAssignTag={handleAssignTag}
           onDeleteConversation={handleDeleteConversation}
+          selectedConversationIds={selectedConversationIds}
+          onToggleSelect={handleToggleConversationSelection}
+          onClearSelection={handleClearSelection}
+          onBulkResolve={handleBulkResolve}
+          isBulkResolving={isBulkResolving}
         />
 
         {/* Chat Area */}

src/services/conversations/conversationService.ts

@@ -181,6 +181,15 @@ export const conversationAPI = {
     return extractData<any>(response);
   },
 
+  // Bulk resolve conversations by display_id
+  async bulkResolve(displayIds: string[]): Promise<void> {
+    await api.post('/bulk_actions', {
+      type: 'Conversation',
+      ids: displayIds,
+      fields: { status: 'resolved' },
+    });
+  },
+
   // Get conversation counts
   async getConversationCounts(): Promise<{
     open_count: number;