Merge branch 'release/2.3.5'

Author: DavidsonGomes

package-lock.json

@@ -63,6 +63,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-query": "^5.52.1",
     "@tanstack/react-table": "^8.20.1",
     "axios": "^1.7.2",

package.json

@@ -0,0 +1,33 @@
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { ReactNode } from "react";
+
+interface TooltipWrapperProps {
+  content: ReactNode; // o texto que vai aparecer no tooltip
+  children: ReactNode; // o trigger (qualquer elemento)
+  side?: "top" | "right" | "bottom" | "left"; // posição opcional
+}
+
+export function TooltipWrapper({ content, children, side = "top" }: TooltipWrapperProps) {
+  return (
+    <Tooltip.Provider delayDuration={200}>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          {children}
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            side={side}
+             className="
+              rounded px-3 py-1.5 text-sm z-50 border shadow-lg
+            bg-gray-100 text-gray-900 border-gray-300
+            dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700
+            "
+          >
+            {content}
+            <Tooltip.Arrow className="fill-gray-100 dark:fill-gray-800" width={18} height={9} />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+}

src/components/ui/tooltip.tsx

@@ -28,19 +28,21 @@ export function EmbedInstanceProvider({ children }: { children: React.ReactNode
     const validateAndFetchInstance = async () => {
       const token = searchParams.get("token");
       const instanceName = searchParams.get("instanceName");
+      const apiUrl = searchParams.get("apiUrl");
 
-      if (!token || !instanceName) {
-        setError("Token e instanceName são obrigatórios");
+      if (!token || !instanceName || !apiUrl) {
+        setError("Token, instanceName e apiUrl são obrigatórios");
         setIsLoading(false);
         return;
       }
 
       try {
-        const apiUrl = "https://integracaov2.icommarketing.com.br";
-        localStorage.setItem(TOKEN_ID.API_URL, apiUrl);
+        // Format URL (remove trailing slash if present)
+        const formattedUrl = apiUrl.endsWith("/") ? apiUrl.slice(0, -1) : apiUrl;
+        localStorage.setItem(TOKEN_ID.API_URL, formattedUrl);
         localStorage.setItem(TOKEN_ID.INSTANCE_TOKEN, token);
 
-        const { data } = await axios.get(`${apiUrl}/instance/fetchInstances?instanceName=${instanceName}`, {
+        const { data } = await axios.get(`${formattedUrl}/instance/fetchInstances?instanceName=${instanceName}`, {
           headers: {
             apikey: token,
           },

src/contexts/EmbedInstanceContext.tsx

@@ -19,6 +19,7 @@ import { useManageInstance } from "@/lib/queries/instance/manageInstance";
 import { Instance } from "@/types/evolution.types";
 
 import { NewInstance } from "./NewInstance";
+import { TooltipWrapper } from "@/components/ui/tooltip";
 
 function Dashboard() {
   const { t } = useTranslation();
@@ -114,15 +115,20 @@ function Dashboard() {
       </div>
       <main className="grid gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
         {filteredInstances.length > 0 &&
-          Array.isArray(instances) &&
-          instances.map((instance: Instance) => (
+          Array.isArray(filteredInstances) ? (
+          filteredInstances.map((instance: Instance) => (
             <Card key={instance.id}>
               <CardHeader>
                 <Link to={`/manager/instance/${instance.id}/dashboard`} className="flex w-full flex-row items-center justify-between gap-4">
-                  <h3 className="text-wrap font-semibold">{instance.name}</h3>
-                  <Button variant="ghost" size="icon">
-                    <Cog className="card-icon" size="20" />
-                  </Button>
+                  <TooltipWrapper content={instance.name} side="top">
+                    <h3 className="text-wrap font-semibold truncate">{instance.name}</h3>
+                  </TooltipWrapper>
+
+                  <TooltipWrapper content={t("dashboard.settings")} side="top">
+                    <Button variant="ghost" size="icon">
+                      <Cog className="card-icon" size="20" />
+                    </Button>
+                  </TooltipWrapper>
                 </Link>
               </CardHeader>
               <CardContent className="flex-1 space-y-6">
@@ -161,7 +167,9 @@ function Dashboard() {
                 </Button>
               </CardFooter>
             </Card>
-          ))}
+          ))) :(
+          <p>{t("dashboard.instancesNotFound")}</p>
+          )}
       </main>
 
       {!!deleteConfirmation && (

src/pages/Dashboard/index.tsx

@@ -11,6 +11,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useInstance } from "@/contexts/InstanceContext";
 
 import { useFindChats } from "@/lib/queries/chat/findChats";
+import { getToken, TOKEN_ID } from "@/lib/queries/token";
 
 import { Chat as ChatType } from "@/types/evolution.types";
 
@@ -76,7 +77,12 @@ function Chat() {
   useEffect(() => {
     if (!instance?.name) return;
 
-    const serverUrl = "https://integracaov2.icommarketing.com.br";
+    const serverUrl = getToken(TOKEN_ID.API_URL);
+    if (!serverUrl) {
+      console.error("API URL not found in localStorage");
+      return;
+    }
+
     const socket = connectSocket(serverUrl);
 
     // Function to update chats from websocket events

src/pages/instance/Chat/index.tsx

@@ -13,6 +13,7 @@ import { useInstance } from "@/contexts/InstanceContext";
 import { useFindChat } from "@/lib/queries/chat/findChat";
 import { useFindMessages } from "@/lib/queries/chat/findMessages";
 import { useSendMessage, useSendMedia } from "@/lib/queries/chat/sendMessage";
+import { getToken, TOKEN_ID } from "@/lib/queries/token";
 
 import { Message } from "@/types/evolution.types";
 
@@ -429,7 +430,12 @@ function Messages({ textareaRef, handleTextareaChange, textareaHeight, lastMessa
   useEffect(() => {
     if (!instance?.name || !remoteJid) return;
 
-    const serverUrl = "https://icom-socket-gateway.icommarketing.com.br";
+    const serverUrl = getToken(TOKEN_ID.API_URL);
+    if (!serverUrl) {
+      console.error("API URL not found in localStorage");
+      return;
+    }
+
     const socket = connectSocket(serverUrl);
 
     // Function to update messages from websocket events

src/pages/instance/Chat/messages.tsx

@@ -21,8 +21,7 @@ import { ReplyMessageProvider } from "@/contexts/ReplyingMessage/ReplyingMessage
 // import { useWebphone } from "@/contexts/Webphone";
 
 import { api } from "@/lib/queries/api";
-
-// import { TOKEN_ID, getToken } from "@/lib/queries/token";
+import { TOKEN_ID, getToken } from "@/lib/queries/token";
 
 import { connectSocket, disconnectSocket } from "@/services/websocket/socket";
 
@@ -114,9 +113,12 @@ function EmbedChatMessage() {
   useEffect(() => {
     if (!activeInstance) return;
 
-    const serverUrl = "https://icom-socket-gateway.icommarketing.com.br";
+    const serverUrl = getToken(TOKEN_ID.API_URL);
 
-    if (!serverUrl) return;
+    if (!serverUrl) {
+      console.error("API URL not found in localStorage");
+      return;
+    }
 
     const currentToken = localStorage.getItem("accessToken");
 

src/pages/instance/EmbedChatMessage/index.tsx

@@ -2,7 +2,9 @@
   "dashboard": {
     "title": "Instances",
     "search": "Search",
-    "status": "Status"
+    "status": "Status",
+    "settings": "Settings",
+    "instancesNotFound": "No instances found"
   },
   "button": {
     "delete": "Delete",

src/translate/languages/en-US.json

@@ -2,7 +2,9 @@
   "dashboard": {
     "title": "Instancias",
     "search": "Buscar",
-    "status": "Estado"
+    "status": "Estado",
+    "settings": "Configuraciones",
+    "instancesNotFound": "No se encontraron instancias"
   },
   "button": {
     "delete": "Eliminar",