From 2017b373e90c1c765e973348d1b7a77f0afd320f Mon Sep 17 00:00:00 2001 From: Lei OT Date: Thu, 18 Jan 2024 14:56:22 +0800 Subject: [PATCH] ChatWindow --- package.json | 1 + src/stores/Conversations.js | 9 +--- src/utils/utils.js | 11 ++++ src/views/App.jsx | 1 + src/views/Conversations/ChatWindow.jsx | 51 +++++++++++++++---- .../Conversations/Components/ContactInfo.jsx | 13 +++++ .../Conversations/Components/ContactPanel.jsx | 13 +++++ ...onversations.jsx => ConversationsList.jsx} | 15 +----- .../Conversations/Components/InputBox.jsx | 47 ++++++++++------- .../Conversations/Components/Messages.jsx | 16 ++++-- src/views/Conversations/Conversations.css | 12 +++++ 11 files changed, 138 insertions(+), 51 deletions(-) create mode 100644 src/views/Conversations/Components/ContactInfo.jsx create mode 100644 src/views/Conversations/Components/ContactPanel.jsx rename src/views/Conversations/Components/{Conversations.jsx => ConversationsList.jsx} (74%) create mode 100644 src/views/Conversations/Conversations.css diff --git a/package.json b/package.json index 5c841f4..fbe8d83 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "mobx": "^6.12.0", "mobx-react": "^9.1.0", "react": "^18.2.0", + "react-chat-elements": "^12.0.11", "react-dom": "^18.2.0", "react-router-dom": "^6.21.1", "rxjs": "^7.8.1" diff --git a/src/stores/Conversations.js b/src/stores/Conversations.js index ebb5bcb..23d8aa8 100644 --- a/src/stores/Conversations.js +++ b/src/stores/Conversations.js @@ -39,19 +39,14 @@ class Conversations { // todo: handle message runInAction(() => { this.addMessage({ ...msg.message, sender: 'other', id: Date.now().toString(16), }); - console.log(toJS(this.messages), 'messages'); + // console.log(toJS(this.messages), 'messages'); }); } sendMessage = (msg) => { const msgObj = { type: 'message', - message: { - sender: 'me', - content: msg, - readState: false, - id: Date.now().toString(16), - }, + message: msg, }; realtimeAPI.sendMessage(msgObj); this.addMessage(msgObj.message); diff --git a/src/utils/utils.js b/src/utils/utils.js index 6f41bf8..fd3c567 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -1,3 +1,4 @@ +import crypto from 'crypto-js'; /** * ! 不支持计算 Set 或 Map * @param {*} val @@ -298,3 +299,13 @@ export const cartesianProductArray = (arr, sep = '_', index = 0, prefix = '') => }); return result; }; + +export const stringToColour = (str) => { + // Hash the username using SHA256 + const hash = crypto.SHA256(str); + // Convert the hash to a hexadecimal string + const hexString = hash.toString(crypto.enc.Hex); + // Use the first 6 characters of the hex string as a color + const color = '#' + hexString.substring(0, 6); + return color; +}; diff --git a/src/views/App.jsx b/src/views/App.jsx index c1b8198..cdf2fe3 100644 --- a/src/views/App.jsx +++ b/src/views/App.jsx @@ -7,6 +7,7 @@ import zhLocale from 'antd/locale/zh_CN'; import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; +import 'react-chat-elements/dist/main.css' import '@/assets/App.css' import AppLogo from '@/assets/logo-gh.png' import { useStore } from '@/stores/StoreContext.js' diff --git a/src/views/Conversations/ChatWindow.jsx b/src/views/Conversations/ChatWindow.jsx index 1a1fe6f..c1e0137 100644 --- a/src/views/Conversations/ChatWindow.jsx +++ b/src/views/Conversations/ChatWindow.jsx @@ -1,20 +1,23 @@ import { useEffect, useContext } from 'react'; import { observer } from 'mobx-react'; -import { Layout } from 'antd'; +import { Layout, List, Avatar } from 'antd'; import Messages from './Components/Messages'; import InputBox from './Components/InputBox'; -import Conversations from './Components/Conversations'; +import Conversations from './Components/ConversationsList'; import CustomerProfile from './Components/CustomerProfile'; import WebSocketLib from '@/lib/websocketLib'; import { useStore } from '@/stores/StoreContext.js'; +import { stringToColour } from '@/utils/utils'; + +import './Conversations.css'; const customer = { url: 'ws://202.103.68.144:8888/whatever/', authToken: 'customer1Token' }; // Create a WebSocketLib instance for each customer // const wsConnect = new WebSocketLib(customer.url, customer.authToken, 'WhatApp'); // const wsConnect = new WebSocketLib(customer.url, customer.authToken, 'aaa'); -const { Sider, Content } = Layout; +const { Sider, Content, Header, Footer } = Layout; const CList = [ { name: 'Customer_1', label: 'Customer_1', key: 'Customer_1', value: 'Customer_1' }, @@ -32,24 +35,52 @@ const ChatWindow = observer(() => { const { conversationsStore } = useStore(); const { sendMessage, messages } = conversationsStore; useEffect(() => { - return () => {}; }, []); return ( - - + + - + - - sendMessage(v)} /> +
+ ( + mark]}> + + {item.name} + + } + title={item.name} + description='{最近的消息}' + /> + + )} + /> +
+ +
+ +
+ +
+ sendMessage(v)} /> +
+ {/* sendMessage(v)} /> */} - + diff --git a/src/views/Conversations/Components/ContactInfo.jsx b/src/views/Conversations/Components/ContactInfo.jsx new file mode 100644 index 0000000..142f7e4 --- /dev/null +++ b/src/views/Conversations/Components/ContactInfo.jsx @@ -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; diff --git a/src/views/Conversations/Components/ContactPanel.jsx b/src/views/Conversations/Components/ContactPanel.jsx new file mode 100644 index 0000000..ba7a6c8 --- /dev/null +++ b/src/views/Conversations/Components/ContactPanel.jsx @@ -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; diff --git a/src/views/Conversations/Components/Conversations.jsx b/src/views/Conversations/Components/ConversationsList.jsx similarity index 74% rename from src/views/Conversations/Components/Conversations.jsx rename to src/views/Conversations/Components/ConversationsList.jsx index a617c0c..a948c54 100644 --- a/src/views/Conversations/Components/Conversations.jsx +++ b/src/views/Conversations/Components/ConversationsList.jsx @@ -1,6 +1,7 @@ import { observer } from 'mobx-react'; import { List, Avatar } from 'antd'; import crypto from 'crypto-js'; +import { stringToColour } from '@/utils/utils'; const ColorList = []; // ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']; // const colors = []; @@ -11,19 +12,7 @@ for (let i = 0; i < 10; i++) { // ColorList.push(`rgb(${red}, ${green}, ${blue})`); ColorList.push(`#${red}${green}${blue}`); } -console.log(ColorList); -const stringToColour = (str) => { - // Hash the username using SHA256 - const hash = crypto.SHA256(str); - - // Convert the hash to a hexadecimal string - const hexString = hash.toString(crypto.enc.Hex); - - // Use the first 6 characters of the hex string as a color - const color = '#' + hexString.substring(0, 6); - - return color; -}; +// console.log(ColorList); /** * [] diff --git a/src/views/Conversations/Components/InputBox.jsx b/src/views/Conversations/Components/InputBox.jsx index 98dd7c3..c2d75e1 100644 --- a/src/views/Conversations/Components/InputBox.jsx +++ b/src/views/Conversations/Components/InputBox.jsx @@ -1,32 +1,45 @@ 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 handleSend = (v) => { - // console.log(v); - if (typeof onSend === 'function' && v.trim() !== '') { - onSend(v); - setMessage(''); - } - }; - const sendMessage = async () => { - if (message.trim() !== '') { - // const api = new RealTimeAPI('wss://your_rocket_chat_server_url/websocket'); - // await api.login('your_username', 'your_password'); // replace with your actual username and password - // await api.sendMessage({ roomId: 'ROOM_ID', msg: message }); // replace 'ROOM_ID' with your actual room id + + const sendMessage = () => { + // 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 (
- {/* - */} - setMessage(e.target.value)} /> + setMessage(e.target.value)} /> + + {/* setMessage(e.target.value)} + onKeyPress={(e) => { + if (e.shiftKey && e.charCode === 13) { + sendMessage(); + } + }} + rightButtons={} + /> */}
); }); diff --git a/src/views/Conversations/Components/Messages.jsx b/src/views/Conversations/Components/Messages.jsx index a04b6c9..2f07b56 100644 --- a/src/views/Conversations/Components/Messages.jsx +++ b/src/views/Conversations/Components/Messages.jsx @@ -1,7 +1,8 @@ import { useEffect } from 'react'; -import { List, Avatar, Timeline } from 'antd'; import { observer } from 'mobx-react'; import { useStore } from '@/stores/StoreContext.js'; +import { List, Avatar, Timeline } from 'antd'; +import { MessageBox } from 'react-chat-elements'; const Messages = observer(() => { const { conversationsStore } = useStore(); @@ -15,20 +16,27 @@ const Messages = observer(() => { return ( <> - ( + + ))} + {/* ( {message.sender[0]}} title={message.sender !== 'me' ? message.sender : ''} description={message.sender !== 'me' ? `(${message.id}) ${message.content}` : ''} /> {message.sender === 'me' &&
{message.content} ({message.id})
} )} - /> + /> */} ); }); diff --git a/src/views/Conversations/Conversations.css b/src/views/Conversations/Conversations.css new file mode 100644 index 0000000..ef6d80f --- /dev/null +++ b/src/views/Conversations/Conversations.css @@ -0,0 +1,12 @@ +.full-height { + height: 100vh; +} + +.scrollable-column { + height: 100%; + overflow-y: auto; +} + +.column { + height: 100%; +}