107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
||
import { Layout, Button, Space, message, Tooltip } from "antd";
|
||
import { InfoCircleOutlined, MessageOutlined } from "@ant-design/icons";
|
||
import dayjs from "dayjs";
|
||
import ChatWindow from "./components/ChatWindow/index";
|
||
import SidebarMenu from "./components/SidebarMenu/index";
|
||
import VerticalUserList from "./components/VerticalUserList";
|
||
import PageSkeleton from "./components/Skeleton";
|
||
import NavCommon from "./components/NavCommon";
|
||
import styles from "./index.module.scss";
|
||
import { addChatSession } from "@/store/module/ckchat/ckchat";
|
||
const { Content, Sider } = Layout;
|
||
import { chatInitAPIdata, initSocket } from "./main";
|
||
import { useWeChatStore } from "@/store/module/weChat/weChat";
|
||
|
||
import { KfUserListData } from "@/pages/pc/ckbox/data";
|
||
|
||
const CkboxPage: React.FC = () => {
|
||
// 不要在组件初始化时获取sendCommand，而是在需要时动态获取
|
||
const [loading, setLoading] = useState(false);
|
||
const currentContract = useWeChatStore(state => state.currentContract);
|
||
useEffect(() => {
|
||
// 方法一：使用 Promise 链式调用处理异步函数
|
||
setLoading(true);
|
||
chatInitAPIdata()
|
||
.then(response => {
|
||
const data = response as {
|
||
contractList: any[];
|
||
groupList: any[];
|
||
kfUserList: KfUserListData[];
|
||
newContractList: { groupName: string; contacts: any[] }[];
|
||
};
|
||
const { contractList } = data;
|
||
|
||
//找出已经在聊天的
|
||
const isChatList = contractList.filter(
|
||
v => (v?.config && v.config?.chat) || false,
|
||
);
|
||
isChatList.forEach(v => {
|
||
addChatSession(v);
|
||
});
|
||
|
||
// 数据加载完成后初始化WebSocket连接
|
||
initSocket();
|
||
})
|
||
.catch(error => {
|
||
console.error("获取联系人列表失败:", error);
|
||
})
|
||
.finally(() => {
|
||
setLoading(false);
|
||
});
|
||
}, []);
|
||
|
||
return (
|
||
<PageSkeleton loading={loading}>
|
||
<Layout className={styles.ckboxLayout}>
|
||
<NavCommon title="AI自动聊天，懂业务，会引导，客户不停地聊不停" />
|
||
<Layout>
|
||
{/* 垂直侧边栏 */}
|
||
|
||
<Sider width={80} className={styles.verticalSider}>
|
||
<VerticalUserList />
|
||
</Sider>
|
||
|
||
{/* 左侧联系人边栏 */}
|
||
<Sider width={280} className={styles.sider}>
|
||
<SidebarMenu loading={loading} />
|
||
</Sider>
|
||
|
||
{/* 主内容区 */}
|
||
<Content className={styles.mainContent}>
|
||
{currentContract ? (
|
||
<div className={styles.chatContainer}>
|
||
{/* <div className={styles.chatToolbar}>
|
||
<Space>
|
||
<Tooltip title={showProfile ? "隐藏资料" : "显示资料"}>
|
||
<Button
|
||
type={showProfile ? "primary" : "default"}
|
||
icon={<InfoCircleOutlined />}
|
||
onClick={() => setShowProfile(!showProfile)}
|
||
size="small"
|
||
>
|
||
{showProfile ? "隐藏资料" : "显示资料"}
|
||
</Button>
|
||
</Tooltip>
|
||
</Space>
|
||
</div> */}
|
||
<ChatWindow contract={currentContract} />
|
||
</div>
|
||
) : (
|
||
<div className={styles.welcomeScreen}>
|
||
<div className={styles.welcomeContent}>
|
||
<MessageOutlined style={{ fontSize: 64, color: "#1890ff" }} />
|
||
<h2>欢迎使用触客宝</h2>
|
||
<p>选择一个联系人开始聊天</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Content>
|
||
</Layout>
|
||
</Layout>
|
||
</PageSkeleton>
|
||
);
|
||
};
|
||
|
||
export default CkboxPage;
|