|
|
import { ChatBox } from '@/components/ChatBox';
|
|
|
import React from 'react';
|
|
|
import { joinArray, Trans, useAppSelector, useUserId } from 'tailchat-shared';
|
|
|
import { PanelCommonHeader } from '../common/Header';
|
|
|
import _without from 'lodash/without';
|
|
|
import _take from 'lodash/take';
|
|
|
import { UserName } from '@/components/UserName';
|
|
|
|
|
|
function useConverseTitle(converseId: string): React.ReactNode {
|
|
|
const members = useAppSelector(
|
|
|
(state) => state.chat.converses[converseId]?.members ?? []
|
|
|
);
|
|
|
const userId = useUserId();
|
|
|
const otherMembers = _without<string>(members, userId ?? '');
|
|
|
const len = otherMembers.length;
|
|
|
|
|
|
if (len === 1) {
|
|
|
return (
|
|
|
<Trans>
|
|
|
与 <UserName userId={otherMembers[0]} /> 的会话
|
|
|
</Trans>
|
|
|
);
|
|
|
} else if (len === 2) {
|
|
|
return (
|
|
|
<Trans>
|
|
|
与 <UserName userId={otherMembers[0]} /> 和{' '}
|
|
|
<UserName userId={otherMembers[1]} /> 的多人会话
|
|
|
</Trans>
|
|
|
);
|
|
|
} else {
|
|
|
const membersEl = joinArray(
|
|
|
_take(otherMembers, 2).map((uid) => <UserName key={uid} userId={uid} />),
|
|
|
<span>，</span>
|
|
|
);
|
|
|
return (
|
|
|
<Trans>
|
|
|
与 <span>{{ membersEl }}</span> 等人的多人会话
|
|
|
</Trans>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
interface ConversePanelProps {
|
|
|
converseId: string;
|
|
|
}
|
|
|
export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
|
|
|
({ converseId }) => {
|
|
|
const title = useConverseTitle(converseId);
|
|
|
|
|
|
return (
|
|
|
<div className="flex flex-col overflow-hidden flex-1">
|
|
|
<PanelCommonHeader actions={[]}>{title}</PanelCommonHeader>
|
|
|
<div className="flex-1 overflow-hidden">
|
|
|
<ChatBox converseId={converseId} isGroup={false} />
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
);
|
|
|
ConversePanel.displayName = 'ConversePanel';
|