Skip to content

Commit 8232a11

Browse files
dgcode-tecdgcode-tec
committed
chat featured
1 parent 4cc9370 commit 8232a11

File tree

5 files changed

+243
-182
lines changed

5 files changed

+243
-182
lines changed

‎src/pages/instance/Chat/index.tsx‎

Lines changed: 86 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,21 @@ import {
1010
} from "@/components/ui/resizable";
1111
import { Messages } from "./messages";
1212
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
13+
import { findChats } from "@/services/chat.service";
14+
import { useInstance } from "@/contexts/InstanceContext";
15+
import { Chat as ChatType } from "@/types/evolution.types";
1316

1417
function Chat() {
1518
const lastMessageRef = useRef<HTMLDivElement | null>(null);
1619
const [textareaHeight] = useState("auto");
1720
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
21+
const [chats, setChats] = useState([]);
1822

19-
const { instanceId, chatId } = useParams<{
23+
const { instance } = useInstance();
24+
25+
const { instanceId, remoteJid } = useParams<{
2026
instanceId: string;
21-
chatId: string;
27+
remoteJid: string;
2228
}>();
2329

2430
const navigate = useNavigate();
@@ -45,8 +51,21 @@ function Chat() {
4551
};
4652

4753
useEffect(() => {
54+
const fetchData = async (instanceName: string) => {
55+
try {
56+
const data = await findChats(instanceName);
57+
setChats(data);
58+
} catch (error) {
59+
console.error("Erro ao buscar dados:", error);
60+
}
61+
};
62+
63+
if (instance) {
64+
fetchData(instance.name);
65+
}
66+
4867
scrollToBottom();
49-
}, []);
68+
}, [instance]);
5069

5170
const handleChat = (id: string) => {
5271
navigate(`/instance/${instanceId}/chat/${id}`);
@@ -81,71 +100,74 @@ function Chat() {
81100
<div className="px-2 text-xs font-medium text-muted-foreground">
82101
Contatos
83102
</div>
84-
<Link
85-
to="#"
86-
onClick={() => handleChat("557499879409")}
87-
className="flex-1 block p-2 overflow-hidden text-sm truncate transition-colors rounded-md whitespace-nowrap hover:bg-muted/50 chat-item active"
88-
>
89-
Davidson Gomes - 557499879409
90-
</Link>
91-
<Link
92-
to="#"
93-
onClick={() => handleChat("557499879409")}
94-
className="flex-1 block p-2 overflow-hidden text-sm truncate transition-colors rounded-md whitespace-nowrap hover:bg-muted/50 chat-item"
95-
>
96-
Davidson Gomes - 557499879409
97-
</Link>
98-
<Link
99-
to="#"
100-
onClick={() => handleChat("557499879409")}
101-
className="flex-1 block p-2 overflow-hidden text-sm truncate transition-colors rounded-md whitespace-nowrap hover:bg-muted/50 chat-item"
102-
>
103-
Davidson Gomes - 557499879409
104-
</Link>
105-
<Link
106-
to="#"
107-
onClick={() => handleChat("557499879409")}
108-
className="flex-1 block p-2 overflow-hidden text-sm truncate transition-colors rounded-md whitespace-nowrap hover:bg-muted/50 chat-item"
109-
>
110-
Davidson Gomes - 557499879409
111-
</Link>
103+
{chats.map(
104+
(chat: ChatType) =>
105+
chat.remoteJid.includes("@s.whatsapp.net") && (
106+
<Link
107+
to="#"
108+
onClick={() => handleChat(chat.remoteJid)}
109+
className={`flex items-center block p-2 overflow-hidden text-sm truncate transition-colors rounded-md whitespace-nowrap hover:bg-muted/50 chat-item border-b border-gray-600/50 ${
110+
remoteJid === chat.remoteJid ? "active" : ""
111+
}`}
112+
>
113+
<span className="chat-avatar mr-2">
114+
<img
115+
src={
116+
chat.profilePicUrl ||
117+
"https://via.placeholder.com/150"
118+
}
119+
alt="Avatar"
120+
className="w-8 h-8 rounded-full"
121+
/>
122+
</span>
123+
<div className="flex-1 min-w-0">
124+
<span className="chat-title block font-medium">
125+
{chat.pushName}
126+
</span>
127+
<span className="chat-description block text-xs text-gray-500">
128+
{chat.remoteJid.split("@")[0]}
129+
</span>
130+
</div>
131+
</Link>
132+
)
133+
)}
112134
</div>
113135
</div>
114136
</TabsContent>
115137
<TabsContent value="groups">
116138
<div className="flex-1 overflow-auto">
117139
<div className="grid gap-1 p-2 text-foreground">
118-
<div className="px-2 text-xs font-medium text-muted-foreground">
119-
Grupos
120-
</div>
121-
<Link
122-
to="#"
123-
onClick={() => handleChat("557499879409")}
124-
className="flex-1 block p-2 overflow-hidden text-sm truncate transition-colors rounded-md whitespace-nowrap hover:bg-muted/50 chat-item"
125-
>
126-
Evolution API - [email protected]
127-
</Link>
128-
<Link
129-
to="#"
130-
onClick={() => handleChat("557499879409")}
131-
className="flex-1 block p-2 overflow-hidden text-sm truncate transition-colors rounded-md whitespace-nowrap hover:bg-muted/50 chat-item"
132-
>
133-
Evolution API - [email protected]
134-
</Link>
135-
<Link
136-
to="#"
137-
onClick={() => handleChat("557499879409")}
138-
className="flex-1 block p-2 overflow-hidden text-sm truncate transition-colors rounded-md whitespace-nowrap hover:bg-muted/50 chat-item"
139-
>
140-
Evolution API - [email protected]
141-
</Link>
142-
<Link
143-
to="#"
144-
onClick={() => handleChat("557499879409")}
145-
className="flex-1 block p-2 overflow-hidden text-sm truncate transition-colors rounded-md whitespace-nowrap hover:bg-muted/50 chat-item"
146-
>
147-
Evolution API - [email protected]
148-
</Link>
140+
{chats.map(
141+
(chat: ChatType) =>
142+
chat.remoteJid.includes("@g.us") && (
143+
<Link
144+
to="#"
145+
onClick={() => handleChat(chat.remoteJid)}
146+
className={`flex items-center block p-2 overflow-hidden text-sm truncate transition-colors rounded-md whitespace-nowrap hover:bg-muted/50 chat-item border-b border-gray-600/50 ${
147+
remoteJid === chat.remoteJid ? "active" : ""
148+
}`}
149+
>
150+
<span className="chat-avatar mr-2">
151+
<img
152+
src={
153+
chat.profilePicUrl ||
154+
"https://via.placeholder.com/150"
155+
}
156+
alt="Avatar"
157+
className="w-8 h-8 rounded-full"
158+
/>
159+
</span>
160+
<div className="flex-1 min-w-0">
161+
<span className="chat-title block font-medium">
162+
{chat.pushName}
163+
</span>
164+
<span className="chat-description block text-xs text-gray-500">
165+
{chat.remoteJid}
166+
</span>
167+
</div>
168+
</Link>
169+
)
170+
)}
149171
</div>
150172
</div>
151173
</TabsContent>
@@ -154,12 +176,13 @@ function Chat() {
154176
</ResizablePanel>
155177
<ResizableHandle withHandle className="border border-black" />
156178
<ResizablePanel>
157-
{chatId && (
179+
{remoteJid && (
158180
<Messages
159181
textareaRef={textareaRef}
160182
handleTextareaChange={handleTextareaChange}
161183
textareaHeight={textareaHeight}
162184
lastMessageRef={lastMessageRef}
185+
scrollToBottom={scrollToBottom}
163186
/>
164187
)}
165188
</ResizablePanel>

0 commit comments

Comments
 (0)