Skip to content

feat: update IM TUIKit React #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dawnrking wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: update IM TUIKit React #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 0 additions & 134 deletions src/pages/ChatGithub/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,91 +26,6 @@

&-left-container {
max-width: 350px;
min-width: 350px;
display: flex;
flex-direction: column;
height: 100%;
border-right: 1px solid #eee;
}
}
}

@media (max-width: 1024px) {
.app-container {
.chat-container {
.sample-chat {
width: 60%;

&-left-container {
max-width: 300px;
}
}
}
}
}

.chat-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 56px;
border-bottom: 1px solid #eee;
background: #fff;
}

.chat-header__brand {
font-weight: 700;
font-size: 20px;
}

.chat-header__lang-select {
padding: 6px 12px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 16px;
background: #fafbfc;
outline: none;
transition: border-color 0.2s;
&:focus {
border-color: #409eff;
}
}

.chat-history-search {
min-width: 300px;
}

.app-container {
display: flex;
flex-direction: column;
height: 100vh;

.chat-container {
flex: 1;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}


.sample-chat {
display: flex;
align-items: center;
flex-direction: row;
height: 70vh;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
border-radius: 20px;
width: 80%;
overflow: hidden;

&-left-container {
max-width: 350px;
min-width: 350px;
display: flex;
flex-direction: column;
height: 100%;
Expand Down Expand Up @@ -166,52 +81,3 @@
.chat-history-search {
min-width: 300px;
}

.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
gap: 24px;
}


.loading-spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(255, 255, 255, 0.2);
border-top-color: #000;
border-radius: 50%;
animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


.loading-text {
color: #000;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.5px;
animation: pulse 2s ease-in-out infinite;
}


@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}


@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
92 changes: 28 additions & 64 deletions src/pages/ChatGithub/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useLayoutEffect } from 'react';
import { useState } from 'react';
import { IconMessage, IconUser, useUIKit } from '@tencentcloud/uikit-base-component-react';
import {
Chat,
Expand All @@ -10,7 +10,6 @@ import {
LoginStatus,
ContactList,
ContactInfo,
useConversationListState
} from '@tencentcloud/chat-uikit-react';
import { TUICallKit } from '@trtc/calls-uikit-react';
import { ChatDefaultContent, Tab, TabList } from '../../components';
Expand All @@ -32,25 +31,6 @@ export default function SampleChat() {
const { language, setLanguage } = useUIKit();
const { status } = useLoginState(loginInfo);
const [activeTab, setActiveTab] = useState('chats');
const { setActiveConversation } = useConversationListState();

const texts = language === 'zh-CN'
? { chats: '会话', contacts: '联系人', emptyTitle: '暂无会话', emptySub: '选择一个会话开始聊天', error: '请检查 SDKAppID, userID, userSig, 通过开发人员工具(F12)查看具体的错误信息', loading: '登录中...' }
: { chats: 'Chats', contacts: 'Contacts', emptyTitle: 'No conversation', emptySub: 'Select a conversation to start chatting', error: 'Please check the SDKAppID, userID, and userSig. View the specific error information through the developer tools (F12).', loading: 'Logging in...'};


useLayoutEffect(() => {
async function init() {
const userID = 'administrator';
const conversationID = `C2C${userID}`;
setActiveConversation(conversationID);
}

if (status === LoginStatus.SUCCESS) {
init();
}
}, [status]);


const enterChat = () => {
setActiveTab('chats');
Expand All @@ -66,55 +46,39 @@ export default function SampleChat() {

const Application = (
<div className="sample-chat">
<TUICallKit style={callStyle} />
<div className="sample-chat-left-container">
<TabList activeTab={activeTab} onChange={setActiveTab}>
<Tab tabId="chats" label="Chats" Icon={<IconMessage size='24px' />} />
<Tab tabId="contacts" label="Contacts" Icon={<IconUser size='24px' />} />
</TabList>
{activeTab === 'chats' ? (
<ConversationList />
) : (
<ContactList />
)}
</div>
{activeTab === 'chats' &&
<>
<Chat PlaceholderEmpty={<ChatDefaultContent />}>
<ChatHeader />
<MessageList />
<MessageInput />
</Chat>
</>}
{activeTab === 'contacts' &&
<ContactInfo
PlaceholderEmpty={<ChatDefaultContent />}
onSendMessage={enterChat}
onEnterGroup={enterChat}
/>}
<TUICallKit style={callStyle} />
<div className="sample-chat-left-container">
<TabList activeTab={activeTab} onChange={setActiveTab}>
<Tab tabId="chats" label="Chats" Icon={<IconMessage size='24px' />} />
<Tab tabId="contacts" label="Contacts" Icon={<IconUser size='24px' />} />
</TabList>
{activeTab === 'chats' ? (
<ConversationList />
) : (
<ContactList />
)}
</div>
{activeTab === 'chats' &&
<>
<Chat PlaceholderEmpty={<ChatDefaultContent />}>
<ChatHeader />
<MessageList />
<MessageInput />
</Chat>
</>}
{activeTab === 'contacts' &&
<ContactInfo
PlaceholderEmpty={<ChatDefaultContent />}
onSendMessage={enterChat}
onEnterGroup={enterChat}
/>}
</div>
);

if (status === LoginStatus.ERROR) {
return (
<div className="loading-container">
<div className="loading-spinner"></div>
<div className="loading-text">{texts.error}</div>
</div>
)
}


if (status !== LoginStatus.SUCCESS) {
return (
<div className="loading-container">
<div className="loading-spinner"></div>
<div className="loading-text">{texts.loading}</div>
</div>
)
return <div>Loading...</div>;
}


return (
<div className="app-container">
<header className="chat-header">
Expand Down