feat: 会话窗口; +tailwindcss
Lei OT
1 year ago
parent
f2768df484
commit
e600eae98f
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"baseUrl": "./",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
@import 'tailwindcss/base';
|
||||||
|
@import 'tailwindcss/components';
|
||||||
|
@import 'tailwindcss/utilities';
|
||||||
@ -0,0 +1,97 @@
|
|||||||
|
import { webSocket } from 'rxjs/webSocket';
|
||||||
|
import { filter, buffer, map, tap } from 'rxjs/operators';
|
||||||
|
// import { v4 as uuid } from "uuid";
|
||||||
|
|
||||||
|
export class RealTimeAPI {
|
||||||
|
constructor(param) {
|
||||||
|
this.webSocket = webSocket(param);
|
||||||
|
}
|
||||||
|
|
||||||
|
getObservable() {
|
||||||
|
return this.webSocket;
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnect() {
|
||||||
|
return this.webSocket.unsubscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMessage(messageHandler) {
|
||||||
|
this.subscribe(messageHandler, undefined, undefined);
|
||||||
|
}
|
||||||
|
|
||||||
|
onError(errorHandler) {
|
||||||
|
this.subscribe(undefined, errorHandler, undefined);
|
||||||
|
}
|
||||||
|
|
||||||
|
onCompletion(completionHandler) {
|
||||||
|
this.subscribe(undefined, undefined, completionHandler);
|
||||||
|
}
|
||||||
|
|
||||||
|
subscribe(messageHandler, errorHandler, completionHandler) {
|
||||||
|
// this.getObservable().subscribe(
|
||||||
|
// messageHandler,
|
||||||
|
// errorHandler,
|
||||||
|
// completionHandler
|
||||||
|
// );
|
||||||
|
this.getObservable().subscribe({
|
||||||
|
next: messageHandler,
|
||||||
|
error: errorHandler,
|
||||||
|
complete: completionHandler,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
sendMessage(messageObject) {
|
||||||
|
this.webSocket.next(messageObject);
|
||||||
|
}
|
||||||
|
|
||||||
|
getObservableFilteredByMessageType(messageType) {
|
||||||
|
return this.getObservable().pipe(filter((message) => message.msg === messageType));
|
||||||
|
}
|
||||||
|
|
||||||
|
getObservableFilteredByID(id) {
|
||||||
|
return this.getObservable().pipe(filter((message) => message.id === id));
|
||||||
|
}
|
||||||
|
|
||||||
|
connectToServer() {
|
||||||
|
this.sendMessage({
|
||||||
|
msg: 'connect',
|
||||||
|
version: '1',
|
||||||
|
support: ['1', 'pre2', 'pre1'],
|
||||||
|
});
|
||||||
|
return this.getObservableFilteredByMessageType('connected');
|
||||||
|
}
|
||||||
|
|
||||||
|
keepAlive() {
|
||||||
|
return this.getObservableFilteredByMessageType('ping').pipe(tap(() => this.sendMessage({ msg: 'pong' })));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
callMethod(method, ...params) {
|
||||||
|
let id = 'uuid()';
|
||||||
|
this.sendMessage({
|
||||||
|
msg: 'method',
|
||||||
|
method,
|
||||||
|
id,
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
return this.getObservableFilteredByID(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
getSubscription(streamName, streamParam, addEvent) {
|
||||||
|
let id = 'uuid()';
|
||||||
|
let subscription = this.webSocket.multiplex(
|
||||||
|
() => ({
|
||||||
|
msg: 'sub',
|
||||||
|
id: id,
|
||||||
|
name: streamName,
|
||||||
|
params: [streamParam, addEvent],
|
||||||
|
}),
|
||||||
|
() => ({
|
||||||
|
msg: 'unsub',
|
||||||
|
id: id,
|
||||||
|
}),
|
||||||
|
(message) => typeof message.collection === 'string' && message.collection === streamName && message.fields.eventName === streamParam
|
||||||
|
);
|
||||||
|
return subscription;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
// websocketLib.js
|
||||||
|
import { WebSocketSubject } from 'rxjs/webSocket';
|
||||||
|
import { retryWhen, delay, take, catchError } from 'rxjs/operators';
|
||||||
|
|
||||||
|
class WebSocketLib {
|
||||||
|
constructor(url, authToken, protocol) {
|
||||||
|
this.url = url;
|
||||||
|
this.authToken = authToken;
|
||||||
|
this.protocol = protocol;
|
||||||
|
}
|
||||||
|
|
||||||
|
connect() {
|
||||||
|
this.socket$ = new WebSocketSubject({
|
||||||
|
url: this.url,
|
||||||
|
protocol: this.protocol, // Use protocol for message type
|
||||||
|
openObserver: {
|
||||||
|
next: () => {
|
||||||
|
console.log('Connection established');
|
||||||
|
// Send authentication message as soon as connection is established
|
||||||
|
this.socket$.next({ event: 'authenticate', token: this.authToken });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
closeObserver: {
|
||||||
|
next: () => {
|
||||||
|
console.log('Connection closed');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
this.socket$
|
||||||
|
.pipe(
|
||||||
|
retryWhen(errors =>
|
||||||
|
errors.pipe(
|
||||||
|
delay(1000), // Retry connection every 1 second
|
||||||
|
take(10), // Maximum of 10 retries
|
||||||
|
catchError(error => new Error(`Failed to reconnect: ${error}`)) // Throw error after 10 failed retries
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.subscribe(
|
||||||
|
msg => console.log('Received message:', msg),
|
||||||
|
err => console.error('Received error:', err),
|
||||||
|
() => console.log('Connection closed')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
sendMessage(message) {
|
||||||
|
if (!this.socket$) {
|
||||||
|
console.error('Must connect to WebSocket server before sending a message');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.socket$.next({ type: 'message', content: message });
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnect() {
|
||||||
|
if (!this.socket$) {
|
||||||
|
console.error('Must connect to WebSocket server before disconnecting');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.socket$.complete();
|
||||||
|
this.socket$ = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default WebSocketLib;
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
import React, { createContext, useContext, useState, useEffect } from 'react';
|
||||||
|
import { RealTimeAPI } from '@/lib/realTimeAPI';
|
||||||
|
import { useGetJson } from '@/hooks/userFetch';
|
||||||
|
|
||||||
|
export const ConversationContext = createContext();
|
||||||
|
|
||||||
|
const API_HOST = 'http://127.0.0.1:4523/m2/3888351-0-default'; // local mock
|
||||||
|
const URL = {
|
||||||
|
conversationList: `${API_HOST}/142426823`,
|
||||||
|
templates: `${API_HOST}/142952738`,
|
||||||
|
};
|
||||||
|
// const WS_URL = 'ws://202.103.68.144:8888/whatever/';
|
||||||
|
const WS_URL = 'ws://202.103.68.157:8888/whatever/';
|
||||||
|
// let realtimeAPI = new RealTimeAPI({ url: URL, protocol: 'aaa' });
|
||||||
|
let realtimeAPI = new RealTimeAPI({ url: WS_URL, protocol: 'WhatsApp' });
|
||||||
|
|
||||||
|
export const useConversations = () => {
|
||||||
|
const [errors, setErrors] = useState([]);
|
||||||
|
const [messages, setMessages] = useState([]); // 页面上激活的对话
|
||||||
|
const [conversations, setConversations] = useState({}); // 所有对话
|
||||||
|
const [currentID, setCurrentID] = useState();
|
||||||
|
const [conversationsList, setConversationsList] = useState([]); // 对话列表
|
||||||
|
const [currentConversation, setCurrentConversation] = useState({
|
||||||
|
id: '', name: ''
|
||||||
|
});
|
||||||
|
const [templates, setTemplates] = useState([]);
|
||||||
|
|
||||||
|
const [url, setUrl] = useState(URL.conversationList);
|
||||||
|
const data = useGetJson(url);
|
||||||
|
const fetchConversations = () => {
|
||||||
|
setUrl(null); // reset url
|
||||||
|
setUrl(URL.conversationList);
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
setConversationsList(data);
|
||||||
|
if (data && data.length) {
|
||||||
|
switchConversation(data[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {};
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
|
||||||
|
const getTemplates = () => {
|
||||||
|
setUrl(null); // reset url
|
||||||
|
setUrl(URL.templates);
|
||||||
|
}
|
||||||
|
|
||||||
|
const switchConversation = (cc) => {
|
||||||
|
console.log('switch to ', cc.id, cc);
|
||||||
|
setCurrentID(cc.id);
|
||||||
|
setCurrentConversation(cc);
|
||||||
|
setMessages(conversations[cc.id] || []);
|
||||||
|
};
|
||||||
|
|
||||||
|
const addError = (reason) => {
|
||||||
|
setErrors(prevErrors => [...prevErrors, { reason }]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const addMessageToConversations = (customerId, message) => {
|
||||||
|
setConversations((prevList) => ({
|
||||||
|
...prevList,
|
||||||
|
[customerId]: [...(prevList[customerId] || []), message],
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const addMessage = (message) => {
|
||||||
|
setMessages((prevMessages) => [...prevMessages, message]);
|
||||||
|
addMessageToConversations(currentConversation.id, message);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMessage = (data) => {
|
||||||
|
const { errmsg, result: msgObj } = data;
|
||||||
|
|
||||||
|
const msg = data.result;
|
||||||
|
if (!msg) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (typeof msg.type === 'string' && msg.type === 'error') {
|
||||||
|
addError('Error Connecting to Server');
|
||||||
|
}
|
||||||
|
addMessage({ ...msg.message, sender: 'other', id: Date.now().toString(16) });
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendMessage = (msg) => {
|
||||||
|
const msgObj = {
|
||||||
|
type: 'message',
|
||||||
|
message: msg,
|
||||||
|
};
|
||||||
|
realtimeAPI.sendMessage(msgObj);
|
||||||
|
addMessage(msgObj.message);
|
||||||
|
// debug:
|
||||||
|
// const msgObjR = {
|
||||||
|
// type: 'message',
|
||||||
|
// message: { type: 'text', text: { body: 'Received: ' + msg.text.body,} },
|
||||||
|
// };
|
||||||
|
// addMessage({ ...msgObjR.message, sender: 'other', id: Date.now().toString(16) });
|
||||||
|
};
|
||||||
|
|
||||||
|
realtimeAPI.onError(addError.bind(null, 'Error'));
|
||||||
|
realtimeAPI.onMessage(handleMessage);
|
||||||
|
realtimeAPI.onCompletion(addError.bind(null, 'Not Connected to Server'));
|
||||||
|
realtimeAPI.keepAlive(); // Ping Server
|
||||||
|
|
||||||
|
return {
|
||||||
|
errors, messages, conversationsList, currentConversation, sendMessage,
|
||||||
|
fetchConversations, switchConversation,
|
||||||
|
templates, setTemplates, getTemplates,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useConversationContext = () => useContext(ConversationContext);
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
import { makeAutoObservable, runInAction, toJS } from 'mobx';
|
||||||
|
import { RealTimeAPI } from '@/lib/realTimeAPI';
|
||||||
|
|
||||||
|
const URL = 'ws://202.103.68.144:8888/whatever/';
|
||||||
|
let realtimeAPI = new RealTimeAPI({ url: URL, protocol: 'aaa' });
|
||||||
|
|
||||||
|
class Conversations {
|
||||||
|
constructor() {
|
||||||
|
makeAutoObservable(this, { rootStore: false });
|
||||||
|
// this.sendMessage = this.sendMessage.bind(this);
|
||||||
|
|
||||||
|
realtimeAPI.onError(this.addError.bind(this, 'Error'));
|
||||||
|
realtimeAPI.onMessage(this.handleMessage.bind(this));
|
||||||
|
realtimeAPI.onCompletion(this.addError.bind(this, 'Not Connected to Server'));
|
||||||
|
realtimeAPI.keepAlive(); // Ping Server
|
||||||
|
// realtimeAPI.onMessage().subscribe(message => {
|
||||||
|
// this.addMessage(message);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
addError = (reason) => {
|
||||||
|
// this.errors.push({ reason });
|
||||||
|
this.errors = [...this.errors, { reason }];
|
||||||
|
}
|
||||||
|
|
||||||
|
addMessage = (message) => {
|
||||||
|
// this.messages.push(msg.message); // Mobx will not work
|
||||||
|
this.messages = [...this.messages, message];
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMessage = (data) => {
|
||||||
|
const msg = data.result;
|
||||||
|
if (!msg) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (typeof msg.type === 'string' && msg.type === 'error') {
|
||||||
|
this.addError('Error Connecting to Server');
|
||||||
|
}
|
||||||
|
// todo: handle message
|
||||||
|
runInAction(() => {
|
||||||
|
this.addMessage({ ...msg.message, sender: 'other', id: Date.now().toString(16), });
|
||||||
|
// console.log(toJS(this.messages), 'messages');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
sendMessage = (msg) => {
|
||||||
|
const msgObj = {
|
||||||
|
type: 'message',
|
||||||
|
message: msg,
|
||||||
|
};
|
||||||
|
realtimeAPI.sendMessage(msgObj);
|
||||||
|
this.addMessage(msgObj.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
errors = [];
|
||||||
|
messages = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Conversations;
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import Chat from './Index';
|
||||||
|
// import 'antd/dist/reset.css';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<Chat />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
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;
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
.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;
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
// 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;
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
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;
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { Layout, List, Avatar, Flex, Typography } from 'antd';
|
||||||
|
import Messages from './Components/Messages';
|
||||||
|
import InputBox from './Components/InputBox';
|
||||||
|
import ConversationsList from './Components/ConversationsList';
|
||||||
|
import CustomerProfile from './Components/CustomerProfile';
|
||||||
|
|
||||||
|
import { useConversationContext } from '@/stores/ConversationContext';
|
||||||
|
|
||||||
|
import './Conversations.css';
|
||||||
|
import { useAuthContext } from '@/stores/AuthContext.js';
|
||||||
|
|
||||||
|
const { Sider, Content, Header, Footer } = Layout;
|
||||||
|
|
||||||
|
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' },
|
||||||
|
];
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
const ChatWindow = observer(() => {
|
||||||
|
const { loginUser: currentUser } = useAuthContext();
|
||||||
|
const { errors, messages, sendMessage, currentConversation } = useConversationContext();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout className='full-height' style={{ maxHeight: 'calc(100% - 150px)', height: 'calc(100% - 150px)' }}>
|
||||||
|
<Sider width={240} theme={'light'} className='scrollable-column' style={{ height: '70vh' }}>
|
||||||
|
<ConversationsList />
|
||||||
|
</Sider>
|
||||||
|
|
||||||
|
<Content className='h70' style={{ maxHeight: '70vh', height: '70vh' }}>
|
||||||
|
<Layout style={{ height: '100%' }}>
|
||||||
|
<Header className='ant-layout-sider-light ant-card' style={{ padding: '10px', height: 'auto' }}>
|
||||||
|
<Flex gap={16}>
|
||||||
|
<Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.name}`}>{currentConversation.name}</Avatar>
|
||||||
|
<Flex vertical={true} justify='space-between'>
|
||||||
|
<Typography.Text strong>{currentConversation.name}</Typography.Text>
|
||||||
|
{/* <div> HXY231119017</div> */}
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
{/* <List
|
||||||
|
dataSource={[]}
|
||||||
|
renderItem={(item, ii) => (
|
||||||
|
<List.Item actions={[<a key='list-loadmore-edit'>mark</a>]}>
|
||||||
|
<List.Item.Meta
|
||||||
|
avatar={
|
||||||
|
<Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${item.name}`}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Avatar>
|
||||||
|
}
|
||||||
|
title={item.name}
|
||||||
|
description='{最近的消息}'
|
||||||
|
/>
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
/> */}
|
||||||
|
</Header>
|
||||||
|
<Content style={{ maxHeight: '70vh', height: '70vh' }}>
|
||||||
|
<div className='scrollable-column'>
|
||||||
|
<Messages />
|
||||||
|
</div>
|
||||||
|
</Content>
|
||||||
|
<Footer className='ant-layout-sider-light' style={{ padding: '10px' }}>
|
||||||
|
<InputBox onSend={(v) => sendMessage(v)} />
|
||||||
|
</Footer>
|
||||||
|
</Layout>
|
||||||
|
{/* <InputBox onSend={(v) => sendMessage(v)} /> */}
|
||||||
|
</Content>
|
||||||
|
|
||||||
|
<Sider width={300} theme={'light'} className='scrollable-column' style={{ maxHeight: '70vh', height: '70vh' }}>
|
||||||
|
<CustomerProfile customer={{}} />
|
||||||
|
</Sider>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default ChatWindow;
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { stores_Context } from '../config';
|
||||||
|
import { Table } from 'antd';
|
||||||
|
|
||||||
|
const ContactInfo = observer((props) => {
|
||||||
|
// const { } = useContext(stores_Context);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
export default ContactInfo;
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { stores_Context } from '../config';
|
||||||
|
import { Table } from 'antd';
|
||||||
|
|
||||||
|
const ContactPanel = observer((props) => {
|
||||||
|
// const { } = useContext(stores_Context);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
export default ContactPanel;
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
import { useRef, useEffect, useState } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { List, Avatar, Flex } from 'antd';
|
||||||
|
import { useConversationContext } from '@/stores/ConversationContext';
|
||||||
|
import { ChatItem, ChatList } from 'react-chat-elements';
|
||||||
|
/**
|
||||||
|
* []
|
||||||
|
*/
|
||||||
|
const Conversations = observer(({ conversations }) => {
|
||||||
|
const { switchConversation, conversationsList } = useConversationContext();
|
||||||
|
console.log(conversationsList);
|
||||||
|
const [chatlist, setChatlist] = useState([]);
|
||||||
|
useEffect(() => {
|
||||||
|
setChatlist(
|
||||||
|
(conversationsList || []).map((item) => ({
|
||||||
|
...item,
|
||||||
|
avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.name}`,
|
||||||
|
alt: item.name,
|
||||||
|
title: item.name,
|
||||||
|
subtitle: item.lastMessage,
|
||||||
|
date: item.last_time,
|
||||||
|
unread: item.new_msgs,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
|
||||||
|
return () => {};
|
||||||
|
}, [conversationsList]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ChatList className='chat-list' dataSource={chatlist} onClick={(item) => switchConversation(item)} />
|
||||||
|
{/* <List
|
||||||
|
dataSource={conversationsList || []}
|
||||||
|
renderItem={(item, ii) => (
|
||||||
|
// actions={[<a key='list-loadmore-edit'>mark</a>]}
|
||||||
|
<List.Item onClick={() => switchConversation(item)}>
|
||||||
|
<List.Item.Meta
|
||||||
|
avatar={<Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${item.name}`}>{item.name}</Avatar>}
|
||||||
|
title={item.name}
|
||||||
|
// description='{最近的消息}'
|
||||||
|
/>
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
/> */}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
export default Conversations;
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { Card, Flex, Avatar, Typography, Radio, Button } from 'antd';
|
||||||
|
import { useAuthContext } from '@/stores/AuthContext.js';
|
||||||
|
import { useConversationContext } from '@/stores/ConversationContext';
|
||||||
|
import { useGetJson } from '@/hooks/userFetch';
|
||||||
|
|
||||||
|
const orderTags = [
|
||||||
|
{ value: 'potential', label: '潜力' },
|
||||||
|
{ value: 'important', label: '重点' },
|
||||||
|
{ label: '休眠', value: 'snooze' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const orderStatus = [
|
||||||
|
{ value: 'pending', label: '报价中' },
|
||||||
|
// { value: 'in-progress', label: '处理中' },
|
||||||
|
{ value: 'lost', label: '丢失' },
|
||||||
|
{ value: 'later', label: '以后联系' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const { Meta } = Card;
|
||||||
|
|
||||||
|
const CustomerProfile = observer(({ customer }) => {
|
||||||
|
const { errors } = useConversationContext();
|
||||||
|
const { loginUser: currentUser } = useAuthContext();
|
||||||
|
const orderInfo = useGetJson('http://127.0.0.1:4523/m2/3888351-0-default/144062941');
|
||||||
|
const { quotes, contact, last_contact, ...order } = orderInfo || {};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className=' divide-x-0 divide-y divide-dotted divide-slate-400/[.24]'>
|
||||||
|
<Card className='p-2'
|
||||||
|
bordered={false}
|
||||||
|
title={order?.order_no}
|
||||||
|
extra={<Radio.Group size={'small'} options={orderTags} value={'important'} onChange={({ target: { value } }) => {}} optionType='button' buttonStyle={'solid'} />}>
|
||||||
|
<Meta
|
||||||
|
title={<Radio.Group size={'small'} options={orderStatus} value={'pending'} onChange={({ target: { value } }) => {}} optionType='button' buttonStyle={'solid'} />}
|
||||||
|
description={' '}
|
||||||
|
/>
|
||||||
|
<Flex gap={16}>
|
||||||
|
<Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${contact?.name}`} />
|
||||||
|
<Flex vertical={true} justify='space-between'>
|
||||||
|
<Typography.Text strong>{contact?.name}</Typography.Text>
|
||||||
|
<div>
|
||||||
|
{contact?.phone} <span>{contact?.email}</span>{' '}
|
||||||
|
</div>
|
||||||
|
{/* <div>{order?.order_no}</div> */}
|
||||||
|
<div>
|
||||||
|
{order?.location} <span>{order?.local_datetime}</span>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Card>
|
||||||
|
<Flex vertical={true} className='p-2 '>
|
||||||
|
<div>最新报价</div>
|
||||||
|
<p className='m-0 py-2 '>{quotes?.[0]?.name}</p>
|
||||||
|
<Flex justify={'space-between'} >
|
||||||
|
<Button size={'small'}>Book</Button>
|
||||||
|
<Button size={'small'}>报价历史</Button>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
<p className='p-2 overflow-auto h-40 '>{order?.order_detail}</p>
|
||||||
|
<Flex vertical={true} className='p-2 '>
|
||||||
|
<div>沟通记录</div>
|
||||||
|
<p className='m-0 py-2 '>{quotes?.[0]?.name}</p>
|
||||||
|
</Flex>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
export default CustomerProfile;
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { Input, Button } from 'antd';
|
||||||
|
// import { Input } from 'react-chat-elements';
|
||||||
|
|
||||||
|
const InputBox = observer(({ onSend }) => {
|
||||||
|
const [message, setMessage] = useState('');
|
||||||
|
|
||||||
|
const onOK = () => {
|
||||||
|
// console.log(message);
|
||||||
|
if (typeof onSend === 'function' && message.trim() !== '') {
|
||||||
|
const msgObj = {
|
||||||
|
type: 'text',
|
||||||
|
text: {
|
||||||
|
body: message,
|
||||||
|
},
|
||||||
|
// contentType: 'text/markdown',
|
||||||
|
sender: 'me',
|
||||||
|
id: Date.now().toString(16),
|
||||||
|
readState: false,
|
||||||
|
};
|
||||||
|
onSend(msgObj);
|
||||||
|
setMessage('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Input.Search placeholder='Type message here' enterButton='Send' size='large' onSearch={onOK} value={message} onChange={(e) => setMessage(e.target.value)} />
|
||||||
|
|
||||||
|
{/* <Input
|
||||||
|
placeholder='Type a message'
|
||||||
|
multiline={true}
|
||||||
|
value={message}
|
||||||
|
onChange={(e) => setMessage(e.target.value)}
|
||||||
|
onKeyPress={(e) => {
|
||||||
|
if (e.shiftKey && e.charCode === 13) {
|
||||||
|
onOK();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
rightButtons={<button onClick={onOK}>Send</button>}
|
||||||
|
/> */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default InputBox;
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { List, Avatar, Timeline } from 'antd';
|
||||||
|
import { MessageBox } from 'react-chat-elements';
|
||||||
|
import { useConversationContext } from '@/stores/ConversationContext';
|
||||||
|
|
||||||
|
const messagesTemplate = [
|
||||||
|
{
|
||||||
|
id: Date.now().toString(16),
|
||||||
|
sender: 'Customer_1',
|
||||||
|
type: 'text',
|
||||||
|
text: { body: 'Hello, how can I help you today?' } ,
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const Messages = observer(() => {
|
||||||
|
const { messages } = useConversationContext()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{messages.map((message, index) => (
|
||||||
|
<MessageBox
|
||||||
|
key={message.id}
|
||||||
|
position={ message.sender === 'me' ? 'right' : 'left' }
|
||||||
|
type={'text'}
|
||||||
|
text={message.text.body}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{/* <List
|
||||||
|
dataSource={conversationsStore.messages}
|
||||||
|
style={{ flex: '1 1' }}
|
||||||
|
renderItem={(message) => (
|
||||||
|
<List.Item>
|
||||||
|
<List.Item.Meta
|
||||||
|
title={message.sender !== 'me' ? message.sender : ''}
|
||||||
|
description={message.sender !== 'me' ? `(${message.id}) ${message.content}` : ''}
|
||||||
|
/>
|
||||||
|
{message.sender === 'me' && <div>{message.content} ({message.id})</div>}
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
/> */}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Messages;
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
import { ConversationContext, useConversations } from '@/stores/ConversationContext';
|
||||||
|
|
||||||
|
export const ConversationProvider = ({ children }) => {
|
||||||
|
|
||||||
|
const conversations = useConversations();
|
||||||
|
return <ConversationContext.Provider value={conversations}>{children}</ConversationContext.Provider>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ConversationProvider;
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
.full-height {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollable-column {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
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;
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import { observer } from 'mobx-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 observer((props) => {
|
||||||
|
// const { } = useContext(stores_Context);
|
||||||
|
return <></>;
|
||||||
|
});
|
||||||
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
||||||
|
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
||||||
|
darkMode: false,
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
// gridTemplateColumns: {
|
||||||
|
// 'responsive':repeat(autofill,minmax('300px',1fr))
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
corePlugins: {
|
||||||
|
preflight: false
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue