删除测试文件
Lei OT
1 year ago
parent
cf093c22ca
commit
9cd3e1d38e
@ -1,12 +0,0 @@
|
|||||||
import Chat from './Index';
|
|
||||||
// import 'antd/dist/reset.css';
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
return (
|
|
||||||
<div className="App">
|
|
||||||
<Chat />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import { List, Input, Avatar, Button } from 'antd';
|
|
||||||
|
|
||||||
const messages = [
|
|
||||||
{
|
|
||||||
sender: 'John Doe',
|
|
||||||
message: 'Hey!',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
sender: 'Jane Doe',
|
|
||||||
message: 'Hi John!',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const [message, setMessage] = useState('');
|
|
||||||
|
|
||||||
const sendMessage = () => {
|
|
||||||
// Update messages with new message data
|
|
||||||
const newMessage = {
|
|
||||||
sender: 'You',
|
|
||||||
message,
|
|
||||||
};
|
|
||||||
messages.push(newMessage);
|
|
||||||
setMessage('');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="App">
|
|
||||||
<List
|
|
||||||
itemLayout="horizontal"
|
|
||||||
dataSource={messages}
|
|
||||||
renderItem={(message) => (
|
|
||||||
<List.Item>
|
|
||||||
<List.Item.Meta
|
|
||||||
avatar={<Avatar icon="user" />}
|
|
||||||
title={message.sender}
|
|
||||||
description={message.message}
|
|
||||||
/>
|
|
||||||
</List.Item>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<Input.Group compact>
|
|
||||||
<Input
|
|
||||||
placeholder="Type your message"
|
|
||||||
value={message}
|
|
||||||
onChange={(e) => setMessage(e.target.value)}
|
|
||||||
/>
|
|
||||||
<Button type="primary" onClick={sendMessage}>
|
|
||||||
Send
|
|
||||||
</Button>
|
|
||||||
</Input.Group>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
.chat-layout {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-sider {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-content {
|
|
||||||
padding: 24px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
width: calc(100% - 300px);
|
|
||||||
display: flex;
|
|
||||||
padding: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input .ant-input {
|
|
||||||
margin-right: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-button {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
// App.js
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import { Layout, Menu } from 'antd';
|
|
||||||
// import './App.css';
|
|
||||||
|
|
||||||
const { Header, Sider, Content } = Layout;
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const channels = ['General', 'Random'];
|
|
||||||
const messages = [
|
|
||||||
{ user: 'User1', text: 'Hello!' },
|
|
||||||
{ user: 'User2', text: 'Hi!' },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout style={{ minHeight: '100vh' }}>
|
|
||||||
<Sider width={200}>
|
|
||||||
<Menu mode="inline" style={{ height: '100%', borderRight: 0 }}>
|
|
||||||
{channels.map(channel => (
|
|
||||||
<Menu.Item key={channel}>{channel}</Menu.Item>
|
|
||||||
))}
|
|
||||||
</Menu>
|
|
||||||
</Sider>
|
|
||||||
<Layout>
|
|
||||||
<Header style={{ background: '#fff', padding: 0 }} />
|
|
||||||
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
|
|
||||||
<div style={{ padding: 24, background: '#fff', textAlign: 'center' }}>
|
|
||||||
{messages.map((message, index) => (
|
|
||||||
<p key={index}>
|
|
||||||
<strong>{message.user}</strong>: {message.text}
|
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Content>
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
import { Layout, Menu, List, Timeline, Input } from 'antd';
|
|
||||||
|
|
||||||
const { Sider, Content } = Layout;
|
|
||||||
function ChatApp() {
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<Sider theme="light" width={300}>
|
|
||||||
<Menu>
|
|
||||||
<Menu.Item>Unread</Menu.Item>
|
|
||||||
<Menu.Item>Mentions</Menu.Item>
|
|
||||||
<Menu.Item>Favorites</Menu.Item>
|
|
||||||
<Menu.Item>Channel List</Menu.Item>
|
|
||||||
<Menu.Item>Direct Messages</Menu.Item>
|
|
||||||
</Menu>
|
|
||||||
|
|
||||||
<List>
|
|
||||||
{/* Show channels and DMs */}
|
|
||||||
</List>
|
|
||||||
</Sider>
|
|
||||||
|
|
||||||
<Content>
|
|
||||||
<Layout>
|
|
||||||
<Sider theme="light">
|
|
||||||
<List>
|
|
||||||
{/* Show user profile cards */}
|
|
||||||
</List>
|
|
||||||
</Sider>
|
|
||||||
|
|
||||||
<Content>
|
|
||||||
<Timeline>
|
|
||||||
{/* Show messages */}
|
|
||||||
</Timeline>
|
|
||||||
|
|
||||||
<Input.Search
|
|
||||||
enterButton="Send"
|
|
||||||
/>
|
|
||||||
</Content>
|
|
||||||
</Layout>
|
|
||||||
</Content>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ChatApp;
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
import { Layout, List, Input, Button } from 'antd';
|
|
||||||
import './Chat.css';
|
|
||||||
|
|
||||||
const { Sider, Content } = Layout;
|
|
||||||
const { TextArea } = Input;
|
|
||||||
|
|
||||||
const Chat = () => {
|
|
||||||
const channels = ['Channel 1', 'Channel 2'];
|
|
||||||
const messages = [
|
|
||||||
{ user: 'User 1', text: 'Hello!' },
|
|
||||||
{ user: 'User 2', text: 'Hi!' },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout className="chat-layout">
|
|
||||||
<Sider theme="light" width={300} className="chat-sider">
|
|
||||||
<List
|
|
||||||
header={<div>Channels</div>}
|
|
||||||
bordered
|
|
||||||
dataSource={channels}
|
|
||||||
renderItem={item => (
|
|
||||||
<List.Item>
|
|
||||||
{item}
|
|
||||||
</List.Item>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Sider>
|
|
||||||
<Layout>
|
|
||||||
<Content className="chat-content">
|
|
||||||
<List
|
|
||||||
itemLayout="horizontal"
|
|
||||||
dataSource={messages}
|
|
||||||
renderItem={item => (
|
|
||||||
<List.Item>
|
|
||||||
<List.Item.Meta
|
|
||||||
title={item.user}
|
|
||||||
description={item.text}
|
|
||||||
/>
|
|
||||||
</List.Item>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<div className="chat-input">
|
|
||||||
<TextArea rows={4} />
|
|
||||||
<Button type="primary" className="chat-button">
|
|
||||||
Send
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Content>
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Chat;
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
import { useContext } from 'react';
|
|
||||||
import { Table } from 'antd';
|
|
||||||
import WebSocketLib from '@/lib/websocketLib2';
|
|
||||||
|
|
||||||
const CList = [
|
|
||||||
{ name: 'Customer_1', label: 'Customer_1', key: 'Customer_1', value: 'Customer_1' },
|
|
||||||
{ name: 'Customer_2', label: 'Customer_2', key: 'Customer_2', value: 'Customer_2' },
|
|
||||||
{ name: 'Customer_3', label: 'Customer_3', key: 'Customer_3', value: 'Customer_3' },
|
|
||||||
{ name: 'Customer_4', label: 'Customer_4', key: 'Customer_4', value: 'Customer_4' },
|
|
||||||
];
|
|
||||||
|
|
||||||
// Assume we have an array of customer URLs and their corresponding auth tokens
|
|
||||||
const customers = [
|
|
||||||
{ url: 'ws://202.103.68.144:8888/whatever/', authToken: 'customer1Token' },
|
|
||||||
];
|
|
||||||
|
|
||||||
// Create a WebSocketLib instance for each customer
|
|
||||||
const connections = customers.map(customer => {
|
|
||||||
const wsLib = new WebSocketLib(customer.url, customer.authToken, 'WhatApp');
|
|
||||||
wsLib.connect();
|
|
||||||
return wsLib;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Now, the agent can send a message to a specific customer like this:
|
|
||||||
connections[0].sendMessage('Hello, customer 1! '+ Date.now().toString(36));
|
|
||||||
|
|
||||||
// Or broadcast a message to all customers like this:
|
|
||||||
// connections.forEach(conn => conn.sendMessage('Hello, all customers!'));
|
|
||||||
|
|
||||||
export default ((props) => {
|
|
||||||
// const { } = useContext(stores_Context);
|
|
||||||
return <></>;
|
|
||||||
});
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue