draug/ReSekai
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix mobile font size and enable smart keyboard features

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/CreateStoryPage.css
+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;
src/pages/CreateStoryPage.tsx
+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>
src/pages/GamePage.css
+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,
src/pages/GamePage.tsx
+104 -53
View File
@@ -392,29 +392,42 @@ export default function GamePage() {
if (messageIndex === -1) return;
const message = session.messages[messageIndex];
// Находим следующее сообщение ИИ (если есть)
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;
// Обновляем сообщение пользователя
const updatedUserMessage: ChatMessage = {
...message,
@@ -426,7 +439,7 @@ export default function GamePage() {
// Обрезаем историю до этого сообщения (удаляем последующие)
const messagesUpToEdit = session.messages.slice(0, messageIndex);
const updatedMessages = [...messagesUpToEdit, updatedUserMessage];
const tempSession = { ...session, messages: updatedMessages };
setSession(tempSession);
setEditingMessageId(null);
@@ -453,8 +466,11 @@ export default function GamePage() {
// Сохраняем ответ ИИ в текущую версию
const finalVersions: MessageVersion[] = [...newVersions];
finalVersions[newActiveVersion] = { ...finalVersions[newActiveVersion], aiResponse: response };
finalVersions[newActiveVersion] = {
...finalVersions[newActiveVersion],
aiResponse: response,
};
const finalUserMessage: ChatMessage = {
...updatedUserMessage,
versions: finalVersions,
@@ -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,13 +501,16 @@ 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,
versions: finalVersions,
};
const partialMessage: ChatMessage = {
id: generateId(),
role: "assistant",
@@ -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);
@@ -523,24 +549,30 @@ export default function GamePage() {
const currentVersion = message.activeVersion || 0;
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];
const updatedMessage: ChatMessage = {
...message,
content: selectedVersion.content,
@@ -562,7 +594,7 @@ export default function GamePage() {
const updatedSession = { ...session, messages: updatedMessages };
setSession(updatedSession);
// Сохраняем изменения
await apiSaveSession(story.id, currentSessionId, updatedSession);
};
@@ -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;
@@ -707,8 +744,8 @@ export default function GamePage() {
</header>
<div className="game-content">
<div
className="messages-container"
<div
className="messages-container"
ref={messagesContainerRef}
onScroll={handleScroll}
>
@@ -723,13 +760,13 @@ export default function GamePage() {
autoFocus
/>
<div className="message-edit-actions">
<button
<button
className="edit-cancel-btn"
onClick={handleCancelEdit}
>
Отмена
</button>
<button
<button
className="edit-save-btn"
onClick={() => handleSaveEdit(message.id)}
>
@@ -753,26 +790,33 @@ export default function GamePage() {
<div className="message-actions">
{message.versions && message.versions.length > 1 && (
<div className="version-switcher">
<button
<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
<button
className="version-btn"
onClick={() => handleSwitchVersion(message.id, "next")}
onClick={() =>
handleSwitchVersion(message.id, "next")
}
>
›
</button>
</div>
)}
<button
<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>
)}