From 2b51375fbf16bfcafe3fbcc30b50a2cc55edb311 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Mon, 20 Apr 2026 22:37:25 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D1=82=D1=81=D1=82=D1=83=D0=BF=D1=8B=20?=
 =?UTF-8?q?=D0=B2=20=D0=B1=D0=B0=D0=B1=D0=BB=D0=B0=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../presentation/components/MessageBubble.tsx | 213 +++++++++---------
 1 file changed, 111 insertions(+), 102 deletions(-)

diff --git a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
index dc23f80..94e3e46 100644
--- a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
+++ b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
@@ -612,9 +612,9 @@ function MessageBubble({
                   const isSingleGif = galleryMedia.length === 1 && isMediaGif(galleryMedia[0]);
                   const hasReactions = Object.keys(reactionGroups).length > 0;
 
-                  return (
-                    <div className={`
-                ${needsFrame ? `-mx-[14px] ${message.forwardedFrom || message.replyTo || message.storyId ? 'mt-2' : '-mt-[8px]'} ${message.content ? 'mb-2' : hasReactions ? 'mb-1' : '-mb-[8px]'}` : ''}
+              return (
+              <div className={`
+                ${needsFrame ? `-mx-[14px] ${message.forwardedFrom || message.replyTo || message.storyId ? 'mt-2' : '-mt-[8px]'} ${message.content || hasVoice || hasAudio || hasFile || message.type === 'poll' ? 'mb-3' : hasReactions ? 'mb-1' : '-mb-[8px]'}` : ''}
                 ${isSingleGif ? 'max-w-[260px]' : ''}
                 overflow-hidden relative rounded-[1.25rem]
               `}>
@@ -703,6 +703,89 @@ function MessageBubble({
                           </span>
                         </div>
                       )}
+                    </span>
+                  </div>
+                )}
+              </div>
+              );
+            })()}
+
+            {/* Голосовое - Optimized Kinetic Layout */}
+            {hasVoice && (
+              <div className={`flex items-center gap-3 min-w-[200px] py-0.5 ${hasImage || hasVideo || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
+                <audio
+                  ref={audioRef}
+                  src={media.find((m) => m.type === 'voice')?.url}
+                  preload="auto"
+                />
+                <button
+                  onClick={toggleAudio}
+                  className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 ${isMine ? 'bg-white text-primary' : 'bg-primary text-white'} shadow-sm transition-all active:scale-95`}
+                >
+                  {isPlaying ? (
+                    <Pause size={16} fill="currentColor" />
+                  ) : (
+                    <Play size={16} fill="currentColor" className="ml-0.5" />
+                  )}
+                </button>
+                <div className="flex-1 min-w-0">
+                  <div
+                    className="flex items-center gap-[2px] h-6 cursor-pointer"
+                    onClick={(e) => {
+                      const audio = audioRef.current;
+                      if (!audio || !audio.duration) return;
+                      const rect = e.currentTarget.getBoundingClientRect();
+                      const pct = (e.clientX - rect.left) / rect.width;
+                      audio.currentTime = pct * audio.duration;
+                      setAudioProgress(pct * 100);
+                      if (!isPlaying) toggleAudio();
+                    }}
+                  >
+                    {(waveformBars || Array(28).fill(0.5)).map((val, i) => {
+                      const barHeight = Math.max(10, val * 85);
+                      const progress = audioProgress / 100;
+                      const barProgress = i / 28;
+                      const isActive = barProgress < progress;
+                      return (
+                        <div
+                          key={i}
+                          className={`flex-1 rounded-full transition-all duration-200 ${isActive
+                            ? isMine ? 'bg-[#000000] opacity-70' : 'bg-primary'
+                            : isMine ? 'bg-[#000000] opacity-20' : 'bg-white/30'
+                            }`}
+                          style={{ height: `${barHeight}%` }}
+                        />
+                      );
+                    })}
+                  </div>
+                  <div className="flex justify-end mt-0.5">
+                    <span className={`text-[10px] font-bold tabular-nums ${isMine ? 'text-[#0a0a0a]/60' : 'text-white/60'}`}>
+                      {isPlaying
+                        ? formatDuration(audioRef.current?.currentTime || 0)
+                        : formatDuration(audioDuration || message.media?.find((m) => m.type === 'voice')?.duration || 0)}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Аудио (mp3 файлы) */}
+            {hasAudio && (() => {
+              const audioMedia = media.find(isAudioFile);
+              const formatSize = (bytes?: number | null) => {
+                if (!bytes) return "";
+                if (bytes < 1024) return bytes + " B";
+                if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+                if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+                return (bytes / (1024 * 1024 * 1024)).toFixed(1) + " GB";
+              };
+              
+              return (
+                <div className={`min-w-[220px] ${hasImage || hasVideo || hasVoice || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
+                  {audioMedia?.filename && (
+                    <div className="flex items-center gap-2 mb-2 min-w-0">
+                      <Volume2 size={14} className={isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-400'} />
+                      <span className={`text-[11px] font-bold truncate ${isMine ? 'text-[#0a0a0a]/80' : 'text-zinc-200'}`}>{audioMedia.filename}</span>
                     </div>
                   );
                 })()}
@@ -778,78 +861,18 @@ function MessageBubble({
                   };
 
                   return (
-                    <div className="min-w-[220px]">
-                      {audioMedia?.filename && (
-                        <div className="flex items-center gap-2 mb-2 min-w-0">
-                          <Volume2 size={14} className={isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-400'} />
-                          <span className={`text-[11px] font-bold truncate ${isMine ? 'text-[#0a0a0a]/80' : 'text-zinc-200'}`}>{audioMedia.filename}</span>
-                        </div>
-                      )}
-                      <div className="flex items-center gap-3">
-                        <audio
-                          ref={audioRef}
-                          src={getMediaUrl(audioMedia?.url)}
-                          preload="auto"
-                        />
-                        <button
-                          onClick={toggleAudio}
-                          className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 ${isMine ? 'bg-[#0a0a0a]/10 hover:bg-[#0a0a0a]/20 text-[#0a0a0a]' : 'bg-primary text-white shadow-lg'} transition-all active:scale-95`}
-                        >
-                          {isPlaying ? (
-                            <Pause size={16} fill="currentColor" />
-                          ) : (
-                            <Play size={16} fill="currentColor" className="ml-0.5" />
-                          )}
-                        </button>
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-[2px] h-6 cursor-pointer"
-                            onClick={(e) => {
-                              const audio = audioRef.current;
-                              if (!audio || !audio.duration) return;
-                              const rect = e.currentTarget.getBoundingClientRect();
-                              const pct = (e.clientX - rect.left) / rect.width;
-                              audio.currentTime = pct * audio.duration;
-                              setAudioProgress(pct * 100);
-                            }}>
-                            {Array.from({ length: 28 }).map((_, i) => {
-                              const barHeight = [40, 65, 35, 80, 50, 90, 45, 70, 55, 85, 30, 75, 60, 95, 40, 80, 50, 70, 35, 90, 55, 65, 45, 85, 60, 75, 50, 40][i] || 50;
-                              const progress = audioProgress / 100;
-                              const barProgress = i / 28;
-                              const isActive = barProgress < progress;
-                              return (
-                                <div
-                                  key={i}
-                                  className={`flex-1 rounded-full transition-all duration-150 ${isActive
-                                    ? isMine ? 'bg-[#0a0a0a]/70' : 'bg-primary'
-                                    : isMine ? 'bg-[#0a0a0a]/10' : 'bg-white/20'
-                                    }`}
-                                  style={{ height: `${barHeight}%` }}
-                                />
-                              );
-                            })}
-                          </div>
-                          <div className="flex justify-between items-center mt-0.5">
-                            <span className={`text-[10px] font-bold tabular-nums ${isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-500'}`}>
-                              {isPlaying
-                                ? formatDuration(audioRef.current?.currentTime || 0)
-                                : (typeof audioMedia?.duration === 'number'
-                                  ? formatDuration(audioMedia.duration)
-                                  : (audioMedia?.duration || formatDuration(audioDuration || 0)))}
-                            </span>
-                            <div className="flex items-center gap-2">
-                              <span className={`text-[10px] font-black uppercase tracking-tighter ${isMine ? 'text-[#0a0a0a]/40' : 'text-zinc-500'}`}>{formatSize(audioMedia?.size)}</span>
-                              <a
-                                href={getMediaUrl(audioMedia?.url)}
-                                download={audioMedia?.filename || 'audio'}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className={`flex items-center justify-center p-1 rounded-md transition-all ${isMine ? 'hover:bg-[#0a0a0a]/10 text-[#0a0a0a]/40 hover:text-[#0a0a0a]' : 'hover:bg-white/10 text-zinc-500 hover:text-white'}`}
-                              >
-                                <Download size={12} />
-                              </a>
-                            </div>
-                          </div>
-                        </div>
+                    <a
+                      key={m.id}
+                      href={getMediaUrl(m.url)}
+                      download={m.filename || 'file'}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={`flex items-center gap-3 p-3 rounded-2xl ${isMine ? 'bg-[#0a0a0a]/5 hover:bg-[#0a0a0a]/10' : 'bg-zinc-900/50 hover:bg-zinc-800/80 border border-white/5'
+                        } transition-all mb-1 group/file ${hasImage || hasVideo || hasVoice || hasAudio || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}
+                    >
+                      <div className={`w-11 h-11 rounded-xl flex items-center justify-center ${isMine ? 'bg-[#0a0a0a]/10' : 'bg-primary/20'
+                        } group-hover/file:scale-110 transition-transform`}>
+                        <FileText size={22} className={isMine ? 'text-[#0a0a0a]' : 'text-primary'} />
                       </div>
                     </div>
                   );
@@ -1029,33 +1052,19 @@ function MessageBubble({
                   </div>
                 )}
 
-                {/* Текст */}
-                {message.content && message.type !== 'poll' && (() => {
-                  const onlyEmojiRegex = /^[\p{Extended_Pictographic}\s]+$/u;
-                  const isOnlyEmojis = onlyEmojiRegex.test(message.content) && message.content.length <= 15;
-                  return (
-                    <div className="flex items-end gap-2 text-sm w-full">
-                      <div className="flex-1 min-w-0 w-full">
-                        <p className={`whitespace-pre-wrap break-words leading-relaxed w-full ${isOnlyEmojis ? 'text-5xl my-1' : ''} ${isMine ? 'text-[#0a0a0a] font-normal' : 'text-zinc-200'}`}>
-                          {renderFormattedText(message.content)}
-                        </p>
-                        {firstUrl && !hasImage && !hasVideo && !hasFile && (
-                          <div className="w-full mt-1 mb-1 relative overflow-hidden">
-                            <LinkPreview url={firstUrl} />
-                          </div>
-                        )}
-                      </div>
-                      <span className={`text-[10px] font-bold flex-shrink-0 flex items-center gap-0.5 self-end float-right leading-none ${isOnlyEmojis ? '-mb-1' : 'mb-0.5'} ${isMine ? 'text-[#0a0a0a]/50' : 'text-on-surface-variant/40'}`}>
-                        {message.isEdited && <span className="mr-0.5">{t('edited')}</span>}
-                        {message.scheduledAt && <span className="material-symbols-outlined text-[12px] text-amber-400 mr-0.5">schedule</span>}
-                        {isPinned && <Pin size={10} className={`rotate-45 ${isMine ? 'text-[#0a0a0a]/60 fill-[#0a0a0a]/20' : 'text-primary fill-primary/20'} mr-0.5`} />}
-                        {timeStr}
-                        {isMine && !message.scheduledAt && (
-                          <span className={`material-symbols-outlined text-[14px] ${isRead ? 'text-[#0a0a0a]/80 fill-1' : 'text-[#0a0a0a]/40'}`} style={{ fontVariationSettings: `'FILL' ${isRead ? 1 : 0}` }}>
-                            {isRead ? 'done_all' : 'done'}
-                          </span>
-                        )}
-                      </span>
+            {/* Текст */}
+            {message.content && message.type !== 'poll' && (() => {
+              const onlyEmojiRegex = /^[\p{Extended_Pictographic}\s]+$/u;
+              const isOnlyEmojis = onlyEmojiRegex.test(message.content) && message.content.length <= 15;
+              return (
+              <div className={`flex items-end gap-2 text-sm w-full ${hasImage || hasVideo || hasVoice || hasAudio || hasFile || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
+                <div className="flex-1 min-w-0 w-full">
+                  <p className={`whitespace-pre-wrap break-words leading-relaxed w-full ${isOnlyEmojis ? 'text-5xl my-1' : ''} ${isMine ? 'text-[#0a0a0a] font-normal' : 'text-zinc-200'}`}>
+                    {renderFormattedText(message.content)}
+                  </p>
+                  {firstUrl && !hasImage && !hasVideo && !hasFile && (
+                    <div className="w-full mt-1 mb-1 relative overflow-hidden">
+                      <LinkPreview url={firstUrl} />
                     </div>
                   );
                 })()}