Fix mobile font size and enable smart keyboard features

This commit is contained in:
Alexej Wolff
2026-02-11 21:05:16 +01:00
parent e51fdd4e64
commit c1fe0eaeba
4 changed files with 205 additions and 56 deletions
+89
View File
@@ -596,6 +596,95 @@
line-height: 1.6;
}
/* Markdown preview */
.markdown-preview {
margin-top: 1rem;
background: #0d0d0d;
border: 1px solid #333;
border-radius: 10px;
overflow: hidden;
}
.preview-header {
padding: 0.5rem 1rem;
background: #1a1a1a;
color: #888;
font-size: 0.85rem;
border-bottom: 1px solid #333;
}
.preview-content {
padding: 1rem;
color: #ccc;
font-size: 0.95rem;
line-height: 1.6;
max-height: 400px;
overflow-y: auto;
}
.preview-content h1,
.preview-content h2,
.preview-content h3,
.preview-content h4 {
color: #fff;
margin: 1rem 0 0.5rem;
}
.preview-content h1:first-child,
.preview-content h2:first-child,
.preview-content h3:first-child {
margin-top: 0;
}
.preview-content p {
margin: 0.5rem 0;
}
.preview-content strong {
color: #a0b4ff;
}
.preview-content em {
color: #c9a0ff;
}
.preview-content ul,
.preview-content ol {
margin: 0.5rem 0;
padding-left: 1.5rem;
}
.preview-content li {
margin: 0.25rem 0;
}
.preview-content code {
background: rgba(102, 126, 234, 0.2);
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-family: "Fira Code", monospace;
font-size: 0.85em;
}
.preview-content pre {
background: #111;
padding: 1rem;
border-radius: 8px;
overflow-x: auto;
}
.preview-content pre code {
background: none;
padding: 0;
}
.preview-content blockquote {
border-left: 3px solid #667eea;
padding-left: 1rem;
margin: 0.5rem 0;
color: #999;
}
/* Character fields */
.character-fields {
display: flex;
+10 -1
View File
@@ -1,5 +1,6 @@
import { useState, useEffect } from "react";
import { useNavigate, Link, useParams } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import { useAuth } from "../contexts/AuthContext";
import { createStory, getStory, updateStory } from "../services/api";
import type { Character } from "../types";
@@ -652,7 +653,7 @@ export default function CreateStoryPage() {
<label htmlFor="narrativeRules">Инструкции для ИИ</label>
<p className="field-hint">
Кастомные правила поведения ИИ. Если пусто используются
стандартные правила.
стандартные правила. Поддерживается Markdown.
</p>
<textarea
id="narrativeRules"
@@ -677,6 +678,14 @@ export default function CreateStoryPage() {
rows={14}
className="markdown-input"
/>
{form.narrativeRules.trim() && (
<div className="markdown-preview">
<div className="preview-header">👁 Превью</div>
<div className="preview-content">
<ReactMarkdown>{form.narrativeRules}</ReactMarkdown>
</div>
</div>
)}
</div>
</section>
+2 -2
View File
@@ -752,7 +752,7 @@
.message-content {
padding: 0.75rem 0.875rem;
font-size: 0.9rem;
font-size: 1rem;
}
.quick-actions {
@@ -768,7 +768,7 @@
.input-container textarea {
min-height: 32px;
padding: 0.4rem 0.875rem;
font-size: 0.9rem;
font-size: 16px; /* Минимум 16px чтобы iOS не зумил */
}
.send-btn,
+84 -33
View File
@@ -395,23 +395,36 @@ export default function GamePage() {
// Находим следующее сообщение ИИ (если есть)
const nextMessage = session.messages[messageIndex + 1];
const currentAiResponse = nextMessage?.role === "assistant" ? nextMessage.content : undefined;
const currentAiResponse =
nextMessage?.role === "assistant" ? nextMessage.content : undefined;
// Инициализируем версии если их нет (первая версия = оригинал с текущим ответом ИИ)
const versions: MessageVersion[] = message.versions || [{
content: message.content,
timestamp: message.timestamp,
aiResponse: currentAiResponse
}];
const versions: MessageVersion[] = message.versions || [
{
content: message.content,
timestamp: message.timestamp,
aiResponse: currentAiResponse,
},
];
// Если текущая версия не имеет aiResponse, добавляем его
const currentVersionIdx = message.activeVersion || 0;
if (versions[currentVersionIdx] && !versions[currentVersionIdx].aiResponse && currentAiResponse) {
versions[currentVersionIdx] = { ...versions[currentVersionIdx], aiResponse: currentAiResponse };
if (
versions[currentVersionIdx] &&
!versions[currentVersionIdx].aiResponse &&
currentAiResponse
) {
versions[currentVersionIdx] = {
...versions[currentVersionIdx],
aiResponse: currentAiResponse,
};
}
// Добавляем новую версию (aiResponse добавится после генерации)
const newVersion: MessageVersion = { content: editContent.trim(), timestamp: new Date() };
const newVersion: MessageVersion = {
content: editContent.trim(),
timestamp: new Date(),
};
const newVersions: MessageVersion[] = [...versions, newVersion];
const newActiveVersion = newVersions.length - 1;
@@ -453,7 +466,10 @@ export default function GamePage() {
// Сохраняем ответ ИИ в текущую версию
const finalVersions: MessageVersion[] = [...newVersions];
finalVersions[newActiveVersion] = { ...finalVersions[newActiveVersion], aiResponse: response };
finalVersions[newActiveVersion] = {
...finalVersions[newActiveVersion],
aiResponse: response,
};
const finalUserMessage: ChatMessage = {
...updatedUserMessage,
@@ -467,7 +483,11 @@ export default function GamePage() {
timestamp: new Date(),
};
const allMessages = [...messagesUpToEdit, finalUserMessage, assistantMessage];
const allMessages = [
...messagesUpToEdit,
finalUserMessage,
assistantMessage,
];
const finalSession: GameSession = {
...session,
@@ -481,7 +501,10 @@ export default function GamePage() {
if (streamingContent.trim()) {
// Сохраняем частичный ответ в версию
const finalVersions: MessageVersion[] = [...newVersions];
finalVersions[newActiveVersion] = { ...finalVersions[newActiveVersion], aiResponse: streamingContent };
finalVersions[newActiveVersion] = {
...finalVersions[newActiveVersion],
aiResponse: streamingContent,
};
const finalUserMessage: ChatMessage = {
...updatedUserMessage,
@@ -512,7 +535,10 @@ export default function GamePage() {
};
// Переключить версию сообщения
const handleSwitchVersion = async (messageId: string, direction: "prev" | "next") => {
const handleSwitchVersion = async (
messageId: string,
direction: "prev" | "next",
) => {
if (!session || !story || !currentSessionId) return;
const messageIndex = session.messages.findIndex((m) => m.id === messageId);
@@ -525,18 +551,24 @@ export default function GamePage() {
let newVersion: number;
if (direction === "prev") {
newVersion = currentVersion > 0 ? currentVersion - 1 : message.versions.length - 1;
newVersion =
currentVersion > 0 ? currentVersion - 1 : message.versions.length - 1;
} else {
newVersion = currentVersion < message.versions.length - 1 ? currentVersion + 1 : 0;
newVersion =
currentVersion < message.versions.length - 1 ? currentVersion + 1 : 0;
}
// Сохраняем текущий ответ ИИ в текущую версию перед переключением
const nextMessage = session.messages[messageIndex + 1];
const currentAiResponse = nextMessage?.role === "assistant" ? nextMessage.content : undefined;
const currentAiResponse =
nextMessage?.role === "assistant" ? nextMessage.content : undefined;
const updatedVersions: MessageVersion[] = [...message.versions];
if (currentAiResponse && updatedVersions[currentVersion]) {
updatedVersions[currentVersion] = { ...updatedVersions[currentVersion], aiResponse: currentAiResponse };
updatedVersions[currentVersion] = {
...updatedVersions[currentVersion],
aiResponse: currentAiResponse,
};
}
const selectedVersion = updatedVersions[newVersion];
@@ -601,7 +633,12 @@ export default function GamePage() {
};
const handleSwitchSession = async (sessionId: string) => {
console.log("[GamePage] Switching to session:", sessionId, "current:", currentSessionId);
console.log(
"[GamePage] Switching to session:",
sessionId,
"current:",
currentSessionId,
);
if (!id || sessionId === currentSessionId) {
setShowSessionMenu(false);
return;
@@ -755,16 +792,21 @@ export default function GamePage() {
<div className="version-switcher">
<button
className="version-btn"
onClick={() => handleSwitchVersion(message.id, "prev")}
onClick={() =>
handleSwitchVersion(message.id, "prev")
}
>
</button>
<span className="version-indicator">
{(message.activeVersion || 0) + 1}/{message.versions.length}
{(message.activeVersion || 0) + 1}/
{message.versions.length}
</span>
<button
className="version-btn"
onClick={() => handleSwitchVersion(message.id, "next")}
onClick={() =>
handleSwitchVersion(message.id, "next")
}
>
</button>
@@ -772,7 +814,9 @@ export default function GamePage() {
)}
<button
className="edit-btn"
onClick={() => handleEditMessage(message.id, message.content)}
onClick={() =>
handleEditMessage(message.id, message.content)
}
title="Редактировать"
>
@@ -836,7 +880,13 @@ export default function GamePage() {
</div>
*/}
<form className="input-container" onSubmit={(e) => { e.preventDefault(); handleSend(); }}>
<form
className="input-container"
onSubmit={(e) => {
e.preventDefault();
handleSend();
}}
>
<textarea
ref={inputRef}
value={input}
@@ -844,7 +894,8 @@ export default function GamePage() {
setInput(e.target.value);
// Auto-resize
e.target.style.height = "auto";
e.target.style.height = Math.min(e.target.scrollHeight, 150) + "px";
e.target.style.height =
Math.min(e.target.scrollHeight, 150) + "px";
}}
onKeyDown={handleKeyDown}
placeholder="Что ты хочешь сделать?..."
@@ -852,24 +903,24 @@ export default function GamePage() {
rows={1}
name="chat-input"
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck={false}
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
type="button"
onClick={handleStop}
className="send-btn stop-btn"
>
</button>
) : (
<button
type="submit"
disabled={!input.trim()}
className="send-btn"
>
<button type="submit" disabled={!input.trim()} className="send-btn">
</button>
)}