删除测试文件
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