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

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,127 +961,155 @@ export default function GamePage() {
         </div>
       </header>
 
-      <div className="game-content">
-        <div
-          className="messages-container"
-          ref={messagesContainerRef}
-          onScroll={handleScroll}
-        >
-          {session?.messages.map((message) => (
-            <div key={message.id} className={`message ${message.role}`}>
-              {editingMessageId === message.id ? (
-                <div className="message-edit-form">
-                  <textarea
-                    value={editContent}
-                    onChange={(e) => setEditContent(e.target.value)}
-                    className="message-edit-textarea"
-                    autoFocus
-                  />
-                  <div className="message-edit-actions">
-                    <button
-                      className="edit-cancel-btn"
-                      onClick={handleCancelEdit}
-                    >
-                      Отмена
-                    </button>
-                    <button
-                      className="edit-save-btn"
-                      onClick={() => handleSaveEdit(message.id)}
-                    >
-                      Сохранить и переиграть
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <>
-                  <div className="message-content">
-                    <ReactMarkdown>{message.content}</ReactMarkdown>
-                  </div>
-                  <div className="message-footer">
-                    <span className="message-time">
-                      {new Date(message.timestamp).toLocaleTimeString("ru-RU", {
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      })}
-                    </span>
-                    {message.role === "user" && !isLoading && (
-                      <div className="message-actions">
-                        {message.versions && message.versions.length > 1 && (
-                          <div className="version-switcher">
-                            <button
-                              className="version-btn"
-                              onClick={() =>
-                                handleSwitchVersion(message.id, "prev")
-                              }
-                            >
-                              ‹
-                            </button>
-                            <span className="version-indicator">
-                              {(message.activeVersion || 0) + 1}/
-                              {message.versions.length}
-                            </span>
-                            <button
-                              className="version-btn"
-                              onClick={() =>
-                                handleSwitchVersion(message.id, "next")
-                              }
-                            >
-                              ›
-                            </button>
-                          </div>
-                        )}
-                        <button
-                          className="edit-btn"
-                          onClick={() =>
-                            handleEditMessage(message.id, message.content)
-                          }
-                          title="Редактировать"
-                        >
-                          ✏️
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                </>
-              )}
+      <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>
-          ))}
-
-          {isLoading && streamingContent && (
-            <div className="message assistant streaming">
-              <div className="message-content">
-                <ReactMarkdown>{streamingContent}</ReactMarkdown>
-              </div>
-            </div>
-          )}
-
-          {isLoading && !streamingContent && (
-            <div className="message assistant loading">
-              <div className="typing-indicator">
-                <span></span>
-                <span></span>
-                <span></span>
-              </div>
-            </div>
-          )}
-
-          {error && (
-            <div className="error-message">
-              <span>⚠️ {error}</span>
-              <button onClick={() => setError(null)}>✕</button>
-            </div>
-          )}
-
-          <div ref={messagesEndRef} />
-        </div>
-
-        {showScrollButton && (
-          <button className="scroll-to-bottom-btn" onClick={scrollToBottom}>
-            ↓
-          </button>
+          </div>
         )}
 
-        {/* RPG кнопки скрыты — раскомментировать при необходимости
+        <div className="game-content">
+          <div
+            className="messages-container"
+            ref={messagesContainerRef}
+            onScroll={handleScroll}
+          >
+            {session?.messages.map((message) => (
+              <div key={message.id} className={`message ${message.role}`}>
+                {editingMessageId === message.id ? (
+                  <div className="message-edit-form">
+                    <textarea
+                      value={editContent}
+                      onChange={(e) => setEditContent(e.target.value)}
+                      className="message-edit-textarea"
+                      autoFocus
+                    />
+                    <div className="message-edit-actions">
+                      <button
+                        className="edit-cancel-btn"
+                        onClick={handleCancelEdit}
+                      >
+                        Отмена
+                      </button>
+                      <button
+                        className="edit-save-btn"
+                        onClick={() => handleSaveEdit(message.id)}
+                      >
+                        Сохранить и переиграть
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <div className="message-content">
+                      <ReactMarkdown>{message.content}</ReactMarkdown>
+                    </div>
+                    <div className="message-footer">
+                      <span className="message-time">
+                        {new Date(message.timestamp).toLocaleTimeString(
+                          "ru-RU",
+                          {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                          },
+                        )}
+                      </span>
+                      {message.role === "user" && !isLoading && (
+                        <div className="message-actions">
+                          {message.versions && message.versions.length > 1 && (
+                            <div className="version-switcher">
+                              <button
+                                className="version-btn"
+                                onClick={() =>
+                                  handleSwitchVersion(message.id, "prev")
+                                }
+                              >
+                                ‹
+                              </button>
+                              <span className="version-indicator">
+                                {(message.activeVersion || 0) + 1}/
+                                {message.versions.length}
+                              </span>
+                              <button
+                                className="version-btn"
+                                onClick={() =>
+                                  handleSwitchVersion(message.id, "next")
+                                }
+                              >
+                                ›
+                              </button>
+                            </div>
+                          )}
+                          <button
+                            className="edit-btn"
+                            onClick={() =>
+                              handleEditMessage(message.id, message.content)
+                            }
+                            title="Редактировать"
+                          >
+                            ✏️
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            ))}
+
+            {isLoading && streamingContent && (
+              <div className="message assistant streaming">
+                <div className="message-content">
+                  <ReactMarkdown>{streamingContent}</ReactMarkdown>
+                </div>
+              </div>
+            )}
+
+            {isLoading && !streamingContent && (
+              <div className="message assistant loading">
+                <div className="typing-indicator">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </div>
+              </div>
+            )}
+
+            {error && (
+              <div className="error-message">
+                <span>⚠️ {error}</span>
+                <button onClick={() => setError(null)}>✕</button>
+              </div>
+            )}
+
+            <div ref={messagesEndRef} />
+          </div>
+
+          {showScrollButton && (
+            <button className="scroll-to-bottom-btn" onClick={scrollToBottom}>
+              ↓
+            </button>
+          )}
+
+          {/* RPG кнопки скрыты — раскомментировать при необходимости
         <div className="quick-actions">
           <button onClick={() => handleQuickAction("Осмотреться вокруг")}>
             👀 Осмотреться
@@ -1029,51 +1126,56 @@ export default function GamePage() {
         </div>
         */}
 
-        <form
-          className="input-container"
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleSend();
-          }}
-        >
-          <textarea
-            ref={inputRef}
-            value={input}
-            onChange={(e) => {
-              setInput(e.target.value);
-              // Auto-resize
-              e.target.style.height = "auto";
-              e.target.style.height =
-                Math.min(e.target.scrollHeight, 150) + "px";
+          <form
+            className="input-container"
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleSend();
             }}
-            onKeyDown={handleKeyDown}
-            placeholder="Что ты хочешь сделать?..."
-            disabled={isLoading}
-            rows={1}
-            name="chat-input"
-            autoComplete="off"
-            autoCorrect="on"
-            autoCapitalize="sentences"
-            spellCheck={true}
-            enterKeyHint="send"
-            data-form-type="other"
-            data-lpignore="true"
-            data-gramm="false"
-          />
-          {isLoading ? (
-            <button
-              type="button"
-              onClick={handleStop}
-              className="send-btn stop-btn"
-            >
-              ⏹
-            </button>
-          ) : (
-            <button type="submit" disabled={!input.trim()} className="send-btn">
-              ➤
-            </button>
-          )}
-        </form>
+          >
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={(e) => {
+                setInput(e.target.value);
+                // Auto-resize
+                e.target.style.height = "auto";
+                e.target.style.height =
+                  Math.min(e.target.scrollHeight, 150) + "px";
+              }}
+              onKeyDown={handleKeyDown}
+              placeholder="Что ты хочешь сделать?..."
+              disabled={isLoading}
+              rows={1}
+              name="chat-input"
+              autoComplete="off"
+              autoCorrect="on"
+              autoCapitalize="sentences"
+              spellCheck={true}
+              enterKeyHint="send"
+              data-form-type="other"
+              data-lpignore="true"
+              data-gramm="false"
+            />
+            {isLoading ? (
+              <button
+                type="button"
+                onClick={handleStop}
+                className="send-btn stop-btn"
+              >
+                ⏹
+              </button>
+            ) : (
+              <button
+                type="submit"
+                disabled={!input.trim()}
+                className="send-btn"
+              >
+                ➤
+              </button>
+            )}
+          </form>
+        </div>
       </div>
     </div>
   );