feat: Show character avatar in chat - split view on desktop, background on mobile

src/pages/GamePage.css

@@ -237,10 +237,12 @@
 .game-content {
   flex: 1;
   min-height: 0;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   position: relative;
+  width: 100%;
 }
 
 .scroll-to-bottom-btn {
@@ -272,6 +274,7 @@
 .messages-container {
   flex: 1;
   overflow-y: auto;
+  overflow-x: hidden;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
   touch-action: pan-y;
@@ -282,11 +285,15 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .message {
   max-width: 88%;
   animation: fadeIn 0.25s ease;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 @keyframes fadeIn {
@@ -714,6 +721,121 @@
   margin-left: 2px;
 }
 
+/* Game Layout with Character Panel */
+.game-layout {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.character-panel {
+  width: 350px;
+  min-width: 350px;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: #0a0a0a;
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.character-panel img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top center;
+}
+
+.character-panel-info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.character-panel-name {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+.character-panel-role {
+  font-size: 0.85rem;
+  color: #aaa;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+/* Desktop layout */
+@media (min-width: 769px) {
+  .game-layout.has-character .game-content {
+    flex: 1;
+  }
+}
+
+/* Mobile: character as background */
+@media (max-width: 768px) {
+  .character-panel {
+    display: none;
+  }
+
+  .game-layout {
+    flex-direction: column;
+  }
+
+  .game-layout .game-content {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .game-layout.has-character {
+    position: relative;
+  }
+
+  .game-layout.has-character::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: var(--character-bg);
+    background-size: cover;
+    background-position: top center;
+    opacity: 0.15;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .game-layout.has-character .game-content {
+    position: relative;
+    z-index: 1;
+  }
+
+  .game-layout.has-character .messages-container {
+    background: transparent;
+  }
+
+  .game-layout.has-character .message {
+    background: transparent;
+  }
+
+  .game-layout.has-character .input-container {
+    background: rgba(10, 10, 10, 0.9);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+}
+
 @keyframes blink {
   0%,
   50% {

src/pages/GamePage.tsx

@@ -26,6 +26,7 @@ import type {
   ChatMessage,
   PlayerCharacter,
   MessageVersion,
+  Character,
 } from "../types";
 import "./GamePage.css";
 
@@ -65,6 +66,9 @@ export default function GamePage() {
   const [showScrollButton, setShowScrollButton] = useState(false);
   const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
   const [editContent, setEditContent] = useState("");
+  const [activeCharacter, setActiveCharacter] = useState<Character | null>(
+    null,
+  );
   const abortControllerRef = useRef<AbortController | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const messagesContainerRef = useRef<HTMLDivElement>(null);
@@ -83,6 +87,71 @@ export default function GamePage() {
     sessionRef.current = session;
   }, [session]);
 
+  // Determine active character from message content
+  const detectActiveCharacter = useCallback(
+    (content: string, characters: Character[]): Character | null => {
+      if (!characters || characters.length === 0) return null;
+
+      const contentLower = content.toLowerCase();
+
+      // Look for character name at the beginning of message or in dialogue
+      for (const char of characters) {
+        if (!char.name) continue;
+
+        // Split name into parts and check each (e.g., "Принцеса Лапис" -> ["принцеса", "лапис"])
+        const nameParts = char.name.toLowerCase().split(/\s+/);
+
+        for (const namePart of nameParts) {
+          if (namePart.length < 3) continue; // Skip short words like "и", "в", etc.
+
+          // Create regex to match whole word only
+          const wordBoundary = new RegExp(
+            `(^|[\\s.,!?;:"'«»—\\-])${namePart}([\\s.,!?;:"'«»—\\-]|$)`,
+            "i",
+          );
+
+          // Check if name appears as a whole word in first 200 characters
+          const firstPart = contentLower.substring(0, 200);
+          if (wordBoundary.test(firstPart)) {
+            return char;
+          }
+        }
+      }
+      return null;
+    },
+    [],
+  );
+
+  // Update active character based on last assistant message
+  useEffect(() => {
+    if (!story?.characters || !session?.messages) return;
+
+    // Find last assistant message
+    const lastAssistantMsg = [...session.messages]
+      .reverse()
+      .find((m) => m.role === "assistant");
+
+    if (lastAssistantMsg) {
+      const detected = detectActiveCharacter(
+        lastAssistantMsg.content,
+        story.characters,
+      );
+      if (detected && detected.avatarUrl) {
+        setActiveCharacter(detected);
+      }
+    }
+  }, [session?.messages, story?.characters, detectActiveCharacter]);
+
+  // Also update during streaming
+  useEffect(() => {
+    if (!story?.characters || !streamingContent) return;
+
+    const detected = detectActiveCharacter(streamingContent, story.characters);
+    if (detected && detected.avatarUrl) {
+      setActiveCharacter(detected);
+    }
+  }, [streamingContent, story?.characters, detectActiveCharacter]);
+
   // Warn before leaving if there are unsaved changes
   useEffect(() => {
     const handleBeforeUnload = (e: BeforeUnloadEvent) => {
@@ -892,6 +961,31 @@ export default function GamePage() {
         </div>
       </header>
 
+      <div
+        className={`game-layout ${activeCharacter?.avatarUrl ? "has-character" : ""}`}
+        style={
+          activeCharacter?.avatarUrl
+            ? ({
+                "--character-bg": `url(${activeCharacter.avatarUrl})`,
+              } as React.CSSProperties)
+            : undefined
+        }
+      >
+        {/* Character panel - desktop only */}
+        {activeCharacter?.avatarUrl && (
+          <div className="character-panel">
+            <img src={activeCharacter.avatarUrl} alt={activeCharacter.name} />
+            <div className="character-panel-info">
+              <span className="character-panel-name">
+                {activeCharacter.name}
+              </span>
+              <span className="character-panel-role">
+                {activeCharacter.role}
+              </span>
+            </div>
+          </div>
+        )}
+
         <div className="game-content">
           <div
             className="messages-container"
@@ -930,10 +1024,13 @@ export default function GamePage() {
                     </div>
                     <div className="message-footer">
                       <span className="message-time">
-                      {new Date(message.timestamp).toLocaleTimeString("ru-RU", {
+                        {new Date(message.timestamp).toLocaleTimeString(
+                          "ru-RU",
+                          {
                             hour: "2-digit",
                             minute: "2-digit",
-                      })}
+                          },
+                        )}
                       </span>
                       {message.role === "user" && !isLoading && (
                         <div className="message-actions">
@@ -1069,12 +1166,17 @@ export default function GamePage() {
                 ⏹
               </button>
             ) : (
-            <button type="submit" disabled={!input.trim()} className="send-btn">
+              <button
+                type="submit"
+                disabled={!input.trim()}
+                className="send-btn"
+              >
                 ➤
               </button>
             )}
           </form>
         </div>
       </div>
+    </div>
   );
 }

src/pages/NPCPage.tsx

@@ -280,7 +280,10 @@ export default function NPCPage() {
                       type="button"
                       className="btn-generate-avatar"
                       onClick={handleGenerateAvatar}
-                      disabled={generatingAvatar || (!customPrompt.trim() && !description.trim())}
+                      disabled={
+                        generatingAvatar ||
+                        (!customPrompt.trim() && !description.trim())
+                      }
                     >
                       {generatingAvatar ? "Генерация..." : "🎨 Сгенерировать"}
                     </button>

src/services/imageGen.ts

@@ -123,7 +123,14 @@ async function generateImageFromPrompt(prompt: string): Promise<string> {
 export async function generateAvatarUrl(
   options: GenerateAvatarOptions,
 ): Promise<string> {
-  const { description, name, age = "adult", gender = "female", customPrompt, isNsfw } = options;
+  const {
+    description,
+    name,
+    age = "adult",
+    gender = "female",
+    customPrompt,
+    isNsfw,
+  } = options;
 
   // If custom prompt provided - use it directly
   if (customPrompt && customPrompt.trim()) {