Sfera/sfera
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Улучшены стили и функциональность компонентов мессенджера, включая поддержку многострочного ввода сообщений и обновление стилей кнопок. Добавлен новый метод скачивания файлов через API для изображений и документов с обработкой ошибок. Оптимизированы компоненты для загрузки файлов и записи голоса, улучшен интерфейс выбора эмодзи.

Browse Source
This commit is contained in:
Bivekich
2025-07-17 13:06:40 +03:00
parent abd0df1fe7
commit e191055682
9 changed files with 412 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/messenger/messenger-chat.tsx
View File

@ -360,7 +360,7 @@ export function MessengerChat({ counterparty }: MessengerChatProps) {
)}
<div className={`flex ${isCurrentUser ? 'justify-end' : 'justify-start'} mb-3`}>
<div className="flex flex-col max-w-xs lg:max-w-md">
<div className="flex flex-col max-w-xs lg:max-w-md break-words">
{/* Имя отправителя */}
{!isCurrentUser && (
<div className="flex items-center space-x-2 mb-1 px-1">
@ -409,12 +409,12 @@ export function MessengerChat({ counterparty }: MessengerChatProps) {
isCurrentUser={isCurrentUser}
/>
) : msg.content ? (
<div className={`px-4 py-2 rounded-lg ${
<div className={`px-4 py-2 rounded-lg break-words ${
isCurrentUser
? 'bg-blue-500/20 text-white border border-blue-500/30'
: 'bg-white/10 text-white border border-white/20'
}`}>
<p className="text-sm leading-relaxed">{msg.content}</p>
<p className="text-sm leading-relaxed whitespace-pre-wrap break-words">{msg.content}</p>
</div>
) : null}
@ -434,28 +434,42 @@ export function MessengerChat({ counterparty }: MessengerChatProps) {
</div>
{/* Поле ввода сообщения */}
<div className="p-4 border-t border-white/10">
<div className="flex space-x-2">
<div className="flex flex-1 space-x-2">
<Input
<div className="px-4 py-3 border-t border-white/10">
<div className="flex items-center space-x-2">
<div className="flex-1">
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyPress={handleKeyPress}
placeholder="Введите сообщение..."
className="glass-input text-white placeholder:text-white/40 flex-1"
className="glass-input text-white placeholder:text-white/40 w-full resize-none overflow-y-auto rounded-lg py-2 px-3"
rows={1}
style={{
height: 'auto',
minHeight: '40px',
maxHeight: '120px'
}}
onInput={(e) => {
const target = e.target as HTMLTextAreaElement
target.style.height = 'auto'
const newHeight = Math.min(Math.max(target.scrollHeight, 40), 120)
target.style.height = newHeight + 'px'
}}
/>
</div>
<div className="flex items-center gap-2">
<EmojiPickerComponent onEmojiSelect={handleEmojiSelect} />
<FileUploader onSendFile={handleSendFile} />
<VoiceRecorder onSendVoice={handleSendVoice} />
<Button
onClick={handleSendMessage}
disabled={!message.trim()}
className="bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border-blue-500/30 cursor-pointer h-10 w-10 p-0"
variant="outline"
>
<Send className="h-4 w-4" />
</Button>
</div>
<Button
onClick={handleSendMessage}
disabled={!message.trim()}
className="bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border-blue-500/30 cursor-pointer"
variant="outline"
>
<Send className="h-4 w-4" />
</Button>
</div>
</div>
</div>