feat: initialize novel writer application with React, Zustand, and Vite
- Added main application structure with React and TypeScript. - Implemented Zustand for state management, including novel, chapters, characters, and relationships. - Created initial CSS styles for the application layout and components. - Integrated SVG assets for branding. - Set up Vite configuration for development and build processes. - Established TypeScript configurations for app and node environments.
This commit is contained in:
24
novel-writer/.gitignore
vendored
Normal file
24
novel-writer/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
73
novel-writer/README.md
Normal file
73
novel-writer/README.md
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## React Compiler
|
||||||
|
|
||||||
|
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
|
||||||
|
// Remove tseslint.configs.recommended and replace with this
|
||||||
|
tseslint.configs.recommendedTypeChecked,
|
||||||
|
// Alternatively, use this for stricter rules
|
||||||
|
tseslint.configs.strictTypeChecked,
|
||||||
|
// Optionally, add this for stylistic rules
|
||||||
|
tseslint.configs.stylisticTypeChecked,
|
||||||
|
|
||||||
|
// Other configs...
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// eslint.config.js
|
||||||
|
import reactX from 'eslint-plugin-react-x'
|
||||||
|
import reactDom from 'eslint-plugin-react-dom'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
// Enable lint rules for React
|
||||||
|
reactX.configs['recommended-typescript'],
|
||||||
|
// Enable lint rules for React DOM
|
||||||
|
reactDom.configs.recommended,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
```
|
||||||
23
novel-writer/eslint.config.js
Normal file
23
novel-writer/eslint.config.js
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
13
novel-writer/index.html
Normal file
13
novel-writer/index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Novel Writer - Webnovel Writing App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3771
novel-writer/package-lock.json
generated
Normal file
3771
novel-writer/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
novel-writer/package.json
Normal file
35
novel-writer/package.json
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"name": "novel-writer",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"localforage": "^1.10.0",
|
||||||
|
"react": "^19.2.0",
|
||||||
|
"react-dom": "^19.2.0",
|
||||||
|
"react-force-graph-2d": "^1.29.0",
|
||||||
|
"uuid": "^13.0.0",
|
||||||
|
"zustand": "^5.0.9"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.39.1",
|
||||||
|
"@types/node": "^24.10.1",
|
||||||
|
"@types/react": "^19.2.5",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@types/uuid": "^10.0.0",
|
||||||
|
"@vitejs/plugin-react": "^5.1.1",
|
||||||
|
"eslint": "^9.39.1",
|
||||||
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.24",
|
||||||
|
"globals": "^16.5.0",
|
||||||
|
"typescript": "~5.9.3",
|
||||||
|
"typescript-eslint": "^8.46.4",
|
||||||
|
"vite": "^7.2.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
novel-writer/public/vite.svg
Normal file
1
novel-writer/public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
981
novel-writer/src/App.tsx
Normal file
981
novel-writer/src/App.tsx
Normal file
@@ -0,0 +1,981 @@
|
|||||||
|
import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
|
||||||
|
import ForceGraph2D from 'react-force-graph-2d';
|
||||||
|
import { useNovelStore } from './store';
|
||||||
|
import type { Character, Relationship } from './store';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
const PlusIcon = () => (
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M12 5v14M5 12h14" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const BookIcon = () => (
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
|
||||||
|
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const SendIcon = () => (
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const UsersIcon = () => (
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||||
|
<circle cx="9" cy="7" r="4" />
|
||||||
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const TrashIcon = () => (
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const EditIcon = () => (
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||||||
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ChatIcon = () => (
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const LinkIcon = () => (
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
||||||
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const WritingIcon = () => (
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M12 19l7-7 3 3-7 7-3-3z" />
|
||||||
|
<path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />
|
||||||
|
<path d="M2 2l7.586 7.586" />
|
||||||
|
<circle cx="11" cy="11" r="2" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const {
|
||||||
|
novel,
|
||||||
|
selectedChapterId,
|
||||||
|
chatMessages,
|
||||||
|
isChatLoading,
|
||||||
|
chatModel,
|
||||||
|
ollamaUrl,
|
||||||
|
availableModels,
|
||||||
|
ollamaConnected,
|
||||||
|
setNovel,
|
||||||
|
addVolume,
|
||||||
|
addChapter,
|
||||||
|
updateChapter,
|
||||||
|
selectChapter,
|
||||||
|
addCharacter,
|
||||||
|
updateCharacter,
|
||||||
|
deleteCharacter,
|
||||||
|
selectCharacter,
|
||||||
|
addRelationship,
|
||||||
|
setChatLoading,
|
||||||
|
addChatMessage,
|
||||||
|
clearChat,
|
||||||
|
setChatModel,
|
||||||
|
setOllamaUrl,
|
||||||
|
setAvailableModels,
|
||||||
|
setOllamaConnected,
|
||||||
|
getContextForOllama,
|
||||||
|
} = useNovelStore();
|
||||||
|
|
||||||
|
const [leftTab, setLeftTab] = useState<'chapters' | 'characters'>('chapters');
|
||||||
|
const [rightTab, setRightTab] = useState<'chat' | 'graph'>('chat');
|
||||||
|
const [editingCharacter, setEditingCharacter] = useState<Character | null>(null);
|
||||||
|
const [showAddVolume, setShowAddVolume] = useState(false);
|
||||||
|
const [showAddChapter, setShowAddChapter] = useState(false);
|
||||||
|
const [showAddCharacter, setShowAddCharacter] = useState(false);
|
||||||
|
const [showAddRelationship, setShowAddRelationship] = useState(false);
|
||||||
|
const [newVolumeTitle, setNewVolumeTitle] = useState('');
|
||||||
|
const [newChapterTitle, setNewChapterTitle] = useState('');
|
||||||
|
const [newChapterVolumeId, setNewChapterVolumeId] = useState('');
|
||||||
|
const [newCharacterName, setNewCharacterName] = useState('');
|
||||||
|
const [newCharacterDesc, setNewCharacterDesc] = useState('');
|
||||||
|
const [newCharacterRole, setNewCharacterRole] = useState<Character['role']>('supporting');
|
||||||
|
const [relationshipSource, setRelationshipSource] = useState('');
|
||||||
|
const [relationshipTarget, setRelationshipTarget] = useState('');
|
||||||
|
const [relationshipType, setRelationshipType] = useState<Relationship['type']>('friend');
|
||||||
|
const [relationshipDesc, setRelationshipDesc] = useState('');
|
||||||
|
const [relationshipStrength, setRelationshipStrength] = useState(50);
|
||||||
|
const [chatInput, setChatInput] = useState('');
|
||||||
|
const [isConnecting, setIsConnecting] = useState(false);
|
||||||
|
const [showContextModal, setShowContextModal] = useState(false);
|
||||||
|
const chatContainerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const selectedChapter = useMemo(() => {
|
||||||
|
if (!selectedChapterId) return null;
|
||||||
|
for (const volume of novel.volumes) {
|
||||||
|
const found = volume.chapters.find(c => c.id === selectedChapterId);
|
||||||
|
if (found) return found;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}, [selectedChapterId, novel.volumes]);
|
||||||
|
|
||||||
|
const graphData = useMemo(() => ({
|
||||||
|
nodes: novel.characters.map(c => ({
|
||||||
|
id: c.id,
|
||||||
|
name: c.name,
|
||||||
|
color: c.color,
|
||||||
|
role: c.role,
|
||||||
|
val: c.role === 'protagonist' ? 20 : c.role === 'antagonist' ? 15 : 10,
|
||||||
|
})),
|
||||||
|
links: novel.relationships.map(r => ({
|
||||||
|
source: r.sourceId,
|
||||||
|
target: r.targetId,
|
||||||
|
type: r.type,
|
||||||
|
strength: r.strength,
|
||||||
|
})),
|
||||||
|
}), [novel.characters, novel.relationships]);
|
||||||
|
|
||||||
|
const chatContext = useMemo(() => getContextForOllama(), [getContextForOllama]);
|
||||||
|
|
||||||
|
const contextSize = useMemo(() => {
|
||||||
|
const chars = chatContext.length;
|
||||||
|
const words = chatContext.split(/\s+/).filter(Boolean).length;
|
||||||
|
return `${chars.toLocaleString()} chars, ${words.toLocaleString()} words`;
|
||||||
|
}, [chatContext]);
|
||||||
|
|
||||||
|
const totalWordCount = useMemo(() => {
|
||||||
|
let count = 0;
|
||||||
|
for (const volume of novel.volumes) {
|
||||||
|
for (const chapter of volume.chapters) {
|
||||||
|
count += chapter.content.split(/\s+/).filter(Boolean).length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return count;
|
||||||
|
}, [novel.volumes]);
|
||||||
|
|
||||||
|
const totalChapterCount = useMemo(() => {
|
||||||
|
let count = 0;
|
||||||
|
for (const volume of novel.volumes) {
|
||||||
|
count += volume.chapters.length;
|
||||||
|
}
|
||||||
|
return count;
|
||||||
|
}, [novel.volumes]);
|
||||||
|
|
||||||
|
const handleSendMessage = useCallback(async () => {
|
||||||
|
if (!chatInput.trim() || isChatLoading) return;
|
||||||
|
|
||||||
|
const userMessage = chatInput;
|
||||||
|
setChatInput('');
|
||||||
|
addChatMessage({ role: 'user', content: userMessage });
|
||||||
|
setChatLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
let responseText = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${ollamaUrl}/api/chat`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
model: chatModel,
|
||||||
|
messages: [
|
||||||
|
{
|
||||||
|
role: 'system',
|
||||||
|
content: `You are a creative writing assistant helping with a webnovel. You have full context of the novel including characters, relationships, and all chapter content. Use this context to provide helpful suggestions, answer questions about the story, help with plot development, character arcs, dialogue, and writing advice. Be specific and refer to characters and events from the novel when relevant.
|
||||||
|
|
||||||
|
${chatContext}`,
|
||||||
|
},
|
||||||
|
...chatMessages.map(m => ({ role: m.role, content: m.content })),
|
||||||
|
{ role: 'user', content: userMessage },
|
||||||
|
],
|
||||||
|
stream: false,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const contentType = response.headers.get('content-type');
|
||||||
|
|
||||||
|
if (response.ok && contentType?.includes('application/json')) {
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.message?.content) {
|
||||||
|
responseText = data.message.content;
|
||||||
|
} else if (data.response) {
|
||||||
|
responseText = data.response;
|
||||||
|
} else if (data.text) {
|
||||||
|
responseText = data.text;
|
||||||
|
} else {
|
||||||
|
responseText = JSON.stringify(data, null, 2);
|
||||||
|
}
|
||||||
|
} else if (!response.ok) {
|
||||||
|
throw new Error(`HTTP ${response.status}`);
|
||||||
|
} else {
|
||||||
|
responseText = await response.text();
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
const generateResponse = await fetch(`${ollamaUrl}/api/generate`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
model: chatModel,
|
||||||
|
prompt: `You are a creative writing assistant helping with a webnovel. You have full context of the novel including characters, relationships, and all chapter content. Use this context to provide helpful suggestions, answer questions about the story, help with plot development, character arcs, dialogue, and writing advice. Be specific and refer to characters and events from the novel when relevant.
|
||||||
|
|
||||||
|
${chatContext}
|
||||||
|
|
||||||
|
User question: ${userMessage}`,
|
||||||
|
stream: false,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (generateResponse.ok) {
|
||||||
|
const data = await generateResponse.json();
|
||||||
|
responseText = data.response || JSON.stringify(data, null, 2);
|
||||||
|
} else {
|
||||||
|
throw new Error('Generate endpoint also failed');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (responseText) {
|
||||||
|
addChatMessage({ role: 'assistant', content: responseText });
|
||||||
|
} else {
|
||||||
|
addChatMessage({ role: 'assistant', content: 'Empty response from Ollama' });
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
addChatMessage({ role: 'assistant', content: `Error connecting to Ollama: ${error}. Make sure Ollama is running at ${ollamaUrl}` });
|
||||||
|
} finally {
|
||||||
|
setChatLoading(false);
|
||||||
|
}
|
||||||
|
}, [chatInput, isChatLoading, chatModel, ollamaUrl, chatMessages, chatContext, addChatMessage, setChatLoading]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (chatContainerRef.current) {
|
||||||
|
chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
|
||||||
|
}
|
||||||
|
}, [chatMessages]);
|
||||||
|
|
||||||
|
const handleVolumeClickWithAutoCreate = (volumeId: string) => {
|
||||||
|
const volume = novel.volumes.find(v => v.id === volumeId);
|
||||||
|
if (volume && volume.chapters.length > 0) {
|
||||||
|
selectChapter(volume.chapters[0].id);
|
||||||
|
} else {
|
||||||
|
addChapter(volumeId, 'Chapter 1');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddVolume = () => {
|
||||||
|
if (newVolumeTitle.trim()) {
|
||||||
|
addVolume(newVolumeTitle.trim());
|
||||||
|
setNewVolumeTitle('');
|
||||||
|
setShowAddVolume(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddChapter = () => {
|
||||||
|
if (newChapterTitle.trim() && newChapterVolumeId) {
|
||||||
|
addChapter(newChapterVolumeId, newChapterTitle.trim());
|
||||||
|
setNewChapterTitle('');
|
||||||
|
setNewChapterVolumeId('');
|
||||||
|
setShowAddChapter(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleConnectOllama = async () => {
|
||||||
|
setIsConnecting(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${ollamaUrl}/api/tags`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
const models = data.models?.map((m: any) => m.name) || [];
|
||||||
|
setAvailableModels(models);
|
||||||
|
setOllamaConnected(true);
|
||||||
|
if (models.length > 0 && !models.includes(chatModel)) {
|
||||||
|
setChatModel(models[0]);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setOllamaConnected(false);
|
||||||
|
setAvailableModels([]);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
setOllamaConnected(false);
|
||||||
|
setAvailableModels([]);
|
||||||
|
} finally {
|
||||||
|
setIsConnecting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddCharacter = () => {
|
||||||
|
if (newCharacterName.trim()) {
|
||||||
|
addCharacter(newCharacterName.trim(), newCharacterDesc.trim(), newCharacterRole);
|
||||||
|
setNewCharacterName('');
|
||||||
|
setNewCharacterDesc('');
|
||||||
|
setNewCharacterRole('supporting');
|
||||||
|
setShowAddCharacter(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddRelationship = () => {
|
||||||
|
if (relationshipSource && relationshipTarget && relationshipSource !== relationshipTarget) {
|
||||||
|
addRelationship(relationshipSource, relationshipTarget, relationshipType, relationshipDesc, relationshipStrength);
|
||||||
|
setRelationshipSource('');
|
||||||
|
setRelationshipTarget('');
|
||||||
|
setRelationshipType('friend');
|
||||||
|
setRelationshipDesc('');
|
||||||
|
setRelationshipStrength(50);
|
||||||
|
setShowAddRelationship(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChapterContentChange = (content: string) => {
|
||||||
|
if (selectedChapterId) {
|
||||||
|
updateChapter(selectedChapterId, content);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChapterTitleChange = (title: string) => {
|
||||||
|
if (selectedChapterId) {
|
||||||
|
updateChapter(selectedChapterId, selectedChapter?.content || '', title);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNovelTitleChange = (title: string) => {
|
||||||
|
setNovel({ ...novel, title });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="app-container">
|
||||||
|
<header className="header">
|
||||||
|
<div className="header-left">
|
||||||
|
<div className="logo">
|
||||||
|
<WritingIcon />
|
||||||
|
Novel Writer
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="novel-title-input"
|
||||||
|
value={novel.title}
|
||||||
|
onChange={(e) => handleNovelTitleChange(e.target.value)}
|
||||||
|
placeholder="Novel Title"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="header-right">
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '8px',
|
||||||
|
height: '8px',
|
||||||
|
borderRadius: '50%',
|
||||||
|
backgroundColor: ollamaConnected ? 'var(--accent-success)' : 'var(--accent-danger)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="character-action-btn"
|
||||||
|
onClick={handleConnectOllama}
|
||||||
|
disabled={isConnecting}
|
||||||
|
style={{ padding: '0.375rem 0.75rem', whiteSpace: 'nowrap' }}
|
||||||
|
>
|
||||||
|
{isConnecting ? 'Connecting...' : ollamaConnected ? 'Reconnect' : 'Connect'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<select
|
||||||
|
className="model-select"
|
||||||
|
value={chatModel}
|
||||||
|
onChange={(e) => setChatModel(e.target.value)}
|
||||||
|
disabled={!ollamaConnected || availableModels.length === 0}
|
||||||
|
>
|
||||||
|
{availableModels.length > 0 ? (
|
||||||
|
availableModels.map(model => (
|
||||||
|
<option key={model} value={model}>{model}</option>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<option value="">No models</option>
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="main-content">
|
||||||
|
<aside className="sidebar-left">
|
||||||
|
<div className="sidebar-tabs">
|
||||||
|
<button
|
||||||
|
className={`sidebar-tab ${leftTab === 'chapters' ? 'active' : ''}`}
|
||||||
|
onClick={() => setLeftTab('chapters')}
|
||||||
|
>
|
||||||
|
<BookIcon /> Chapters
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`sidebar-tab ${leftTab === 'characters' ? 'active' : ''}`}
|
||||||
|
onClick={() => setLeftTab('characters')}
|
||||||
|
>
|
||||||
|
<UsersIcon /> Characters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{leftTab === 'chapters' && (
|
||||||
|
<div className="sidebar-content scrollbar-thin">
|
||||||
|
{novel.volumes.map(volume => (
|
||||||
|
<div key={volume.id} className="volume-item">
|
||||||
|
<div
|
||||||
|
className="volume-header"
|
||||||
|
onClick={() => handleVolumeClickWithAutoCreate(volume.id)}
|
||||||
|
>
|
||||||
|
<span className="volume-title">
|
||||||
|
<BookIcon />
|
||||||
|
{volume.title}
|
||||||
|
</span>
|
||||||
|
<span style={{ color: 'var(--text-muted)', fontSize: '0.75rem' }}>
|
||||||
|
{volume.chapters.length} ch
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="chapter-list">
|
||||||
|
{volume.chapters.map(chapter => (
|
||||||
|
<div
|
||||||
|
key={chapter.id}
|
||||||
|
className={`chapter-item ${selectedChapterId === chapter.id ? 'active' : ''}`}
|
||||||
|
onClick={() => selectChapter(chapter.id)}
|
||||||
|
>
|
||||||
|
{chapter.title}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<button className="add-button" onClick={() => setShowAddVolume(true)}>
|
||||||
|
<PlusIcon /> Add Volume
|
||||||
|
</button>
|
||||||
|
{novel.volumes.length > 0 && (
|
||||||
|
<button className="add-button" onClick={() => {
|
||||||
|
setNewChapterVolumeId(novel.volumes[0].id);
|
||||||
|
setShowAddChapter(true);
|
||||||
|
}}>
|
||||||
|
<PlusIcon /> Add Chapter
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{leftTab === 'characters' && (
|
||||||
|
<div className="sidebar-content scrollbar-thin">
|
||||||
|
<div className="character-list">
|
||||||
|
{novel.characters.map(character => (
|
||||||
|
<div
|
||||||
|
key={character.id}
|
||||||
|
className={`character-card ${useNovelStore.getState().selectedCharacterId === character.id ? 'selected' : ''}`}
|
||||||
|
onClick={() => selectCharacter(character.id)}
|
||||||
|
>
|
||||||
|
<div className="character-card-header">
|
||||||
|
<div className="character-avatar" style={{ backgroundColor: character.color }}>
|
||||||
|
{character.name.charAt(0).toUpperCase()}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="character-name">{character.name}</div>
|
||||||
|
<div className="character-role">{character.role}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="character-description">{character.description}</div>
|
||||||
|
<div className="character-actions">
|
||||||
|
<button
|
||||||
|
className="character-action-btn"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setEditingCharacter(character);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EditIcon /> Edit
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="character-action-btn"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setShowAddRelationship(true);
|
||||||
|
setRelationshipSource(character.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<LinkIcon /> Link
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="character-action-btn"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
deleteCharacter(character.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TrashIcon />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<button className="add-button" onClick={() => setShowAddCharacter(true)}>
|
||||||
|
<PlusIcon /> Add Character
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<section className="editor-container">
|
||||||
|
{selectedChapter ? (
|
||||||
|
<>
|
||||||
|
<div className="editor-header">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="chapter-title-input"
|
||||||
|
value={selectedChapter.title}
|
||||||
|
onChange={(e) => handleChapterTitleChange(e.target.value)}
|
||||||
|
placeholder="Chapter Title"
|
||||||
|
/>
|
||||||
|
<div className="editor-stats">
|
||||||
|
<span>{totalChapterCount} chapters</span>
|
||||||
|
<span>{totalWordCount.toLocaleString()} words</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
className="editor-textarea scrollbar-thin"
|
||||||
|
value={selectedChapter.content}
|
||||||
|
onChange={(e) => handleChapterContentChange(e.target.value)}
|
||||||
|
placeholder="Start writing your chapter here..."
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="empty-state">
|
||||||
|
<div className="empty-state-icon">
|
||||||
|
<WritingIcon />
|
||||||
|
</div>
|
||||||
|
<div className="empty-state-text">
|
||||||
|
Select a chapter to start writing or create a new volume to get started.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside className="sidebar-right">
|
||||||
|
<div className="sidebar-tabs">
|
||||||
|
<button
|
||||||
|
className={`sidebar-tab ${rightTab === 'chat' ? 'active' : ''}`}
|
||||||
|
onClick={() => setRightTab('chat')}
|
||||||
|
>
|
||||||
|
<ChatIcon /> Chat
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`sidebar-tab ${rightTab === 'graph' ? 'active' : ''}`}
|
||||||
|
onClick={() => setRightTab('graph')}
|
||||||
|
>
|
||||||
|
<UsersIcon /> Graph
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{rightTab === 'chat' && (
|
||||||
|
<div className="chat-container">
|
||||||
|
<div className="ollama-settings">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="setting-input"
|
||||||
|
value={ollamaUrl}
|
||||||
|
onChange={(e) => setOllamaUrl(e.target.value)}
|
||||||
|
placeholder="Ollama URL"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="chat-header">
|
||||||
|
<span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||||||
|
Ollama Assistant
|
||||||
|
<span className="context-indicator">
|
||||||
|
<span style={{ width: '6px', height: '6px', backgroundColor: ollamaConnected ? 'var(--accent-success)' : 'var(--accent-danger)', borderRadius: '50%', display: 'inline-block' }}></span>
|
||||||
|
{ollamaConnected ? 'Connected' : 'Disconnected'}
|
||||||
|
</span>
|
||||||
|
<span style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>
|
||||||
|
Context: {contextSize}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
||||||
|
<button
|
||||||
|
className="character-action-btn"
|
||||||
|
onClick={() => setShowContextModal(true)}
|
||||||
|
style={{ padding: '0.25rem 0.5rem' }}
|
||||||
|
>
|
||||||
|
Show Context
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="character-action-btn"
|
||||||
|
onClick={clearChat}
|
||||||
|
style={{ padding: '0.25rem 0.5rem' }}
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="chat-messages scrollbar-thin" ref={chatContainerRef}>
|
||||||
|
{chatMessages.length === 0 && (
|
||||||
|
<div className="empty-state" style={{ height: '200px' }}>
|
||||||
|
<div className="empty-state-text">
|
||||||
|
Chat with AI about your novel. It has all your content in context.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{chatMessages.map(message => (
|
||||||
|
<div key={message.id} className={`message ${message.role}`}>
|
||||||
|
{message.content}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{isChatLoading && (
|
||||||
|
<div className="message assistant">
|
||||||
|
<div className="typing-indicator">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="chat-input-container">
|
||||||
|
<div className="chat-input-wrapper">
|
||||||
|
<textarea
|
||||||
|
className="chat-input"
|
||||||
|
value={chatInput}
|
||||||
|
onChange={(e) => setChatInput(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleSendMessage();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder="Ask about your novel..."
|
||||||
|
rows={2}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="send-button"
|
||||||
|
onClick={handleSendMessage}
|
||||||
|
disabled={!chatInput.trim() || isChatLoading}
|
||||||
|
>
|
||||||
|
<SendIcon />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{rightTab === 'graph' && (
|
||||||
|
<div className="character-section">
|
||||||
|
<div className="character-header">
|
||||||
|
Character Relationships
|
||||||
|
</div>
|
||||||
|
<div className="character-graph">
|
||||||
|
{novel.characters.length > 0 ? (
|
||||||
|
<ForceGraph2D
|
||||||
|
graphData={graphData}
|
||||||
|
nodeLabel="name"
|
||||||
|
nodeColor="color"
|
||||||
|
nodeRelSize={6}
|
||||||
|
linkColor={() => 'var(--border-color)'}
|
||||||
|
linkWidth={2}
|
||||||
|
linkDirectionalArrowLength={4}
|
||||||
|
linkDirectionalArrowRelPos={1}
|
||||||
|
backgroundColor="var(--bg-primary)"
|
||||||
|
onNodeClick={(node: any) => {
|
||||||
|
selectCharacter(node.id);
|
||||||
|
const character = novel.characters.find(c => c.id === node.id);
|
||||||
|
if (character) {
|
||||||
|
setEditingCharacter(character);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
nodeCanvasObject={(node: any, ctx, globalScale) => {
|
||||||
|
const label = node.name;
|
||||||
|
const fontSize = 12 / globalScale;
|
||||||
|
ctx.font = `${fontSize}px Sans-Serif`;
|
||||||
|
const textWidth = ctx.measureText(label).width;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(node.x, node.y, 5, 0, 2 * Math.PI, false);
|
||||||
|
ctx.fillStyle = node.color;
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.fillStyle = 'var(--text-primary)';
|
||||||
|
ctx.fillText(
|
||||||
|
label,
|
||||||
|
node.x - textWidth / 2,
|
||||||
|
node.y + 8
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="empty-state">
|
||||||
|
<div className="empty-state-text">
|
||||||
|
Add characters to see their relationship graph.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="graph-legend">
|
||||||
|
<div className="legend-item">
|
||||||
|
<div className="legend-color" style={{ backgroundColor: '#6366f1' }}></div>
|
||||||
|
Protagonist
|
||||||
|
</div>
|
||||||
|
<div className="legend-item">
|
||||||
|
<div className="legend-color" style={{ backgroundColor: '#ef4444' }}></div>
|
||||||
|
Antagonist
|
||||||
|
</div>
|
||||||
|
<div className="legend-item">
|
||||||
|
<div className="legend-color" style={{ backgroundColor: '#10b981' }}></div>
|
||||||
|
Supporting
|
||||||
|
</div>
|
||||||
|
<div className="legend-item">
|
||||||
|
<div className="legend-color" style={{ backgroundColor: '#f59e0b' }}></div>
|
||||||
|
Minor
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{showAddVolume && (
|
||||||
|
<div className="modal-overlay" onClick={() => setShowAddVolume(false)}>
|
||||||
|
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<div className="modal-title">Add New Volume</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="modal-input"
|
||||||
|
value={newVolumeTitle}
|
||||||
|
onChange={(e) => setNewVolumeTitle(e.target.value)}
|
||||||
|
placeholder="Volume Title"
|
||||||
|
autoFocus
|
||||||
|
onKeyDown={(e) => e.key === 'Enter' && handleAddVolume()}
|
||||||
|
/>
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button className="modal-button secondary" onClick={() => setShowAddVolume(false)}>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button className="modal-button primary" onClick={handleAddVolume}>
|
||||||
|
Add Volume
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showAddChapter && (
|
||||||
|
<div className="modal-overlay" onClick={() => setShowAddChapter(false)}>
|
||||||
|
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<div className="modal-title">Add New Chapter</div>
|
||||||
|
<select
|
||||||
|
className="modal-select"
|
||||||
|
value={newChapterVolumeId}
|
||||||
|
onChange={(e) => setNewChapterVolumeId(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="">Select Volume</option>
|
||||||
|
{novel.volumes.map(volume => (
|
||||||
|
<option key={volume.id} value={volume.id}>{volume.title}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="modal-input"
|
||||||
|
value={newChapterTitle}
|
||||||
|
onChange={(e) => setNewChapterTitle(e.target.value)}
|
||||||
|
placeholder="Chapter Title"
|
||||||
|
autoFocus
|
||||||
|
onKeyDown={(e) => e.key === 'Enter' && handleAddChapter()}
|
||||||
|
/>
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button className="modal-button secondary" onClick={() => setShowAddChapter(false)}>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="modal-button primary"
|
||||||
|
onClick={handleAddChapter}
|
||||||
|
disabled={!newChapterTitle.trim() || !newChapterVolumeId}
|
||||||
|
>
|
||||||
|
Add Chapter
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showAddCharacter && (
|
||||||
|
<div className="modal-overlay" onClick={() => setShowAddCharacter(false)}>
|
||||||
|
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<div className="modal-title">Add New Character</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="modal-input"
|
||||||
|
value={newCharacterName}
|
||||||
|
onChange={(e) => setNewCharacterName(e.target.value)}
|
||||||
|
placeholder="Character Name"
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
<textarea
|
||||||
|
className="modal-input"
|
||||||
|
value={newCharacterDesc}
|
||||||
|
onChange={(e) => setNewCharacterDesc(e.target.value)}
|
||||||
|
placeholder="Character Description"
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
className="modal-select"
|
||||||
|
value={newCharacterRole}
|
||||||
|
onChange={(e) => setNewCharacterRole(e.target.value as Character['role'])}
|
||||||
|
>
|
||||||
|
<option value="protagonist">Protagonist</option>
|
||||||
|
<option value="antagonist">Antagonist</option>
|
||||||
|
<option value="supporting">Supporting</option>
|
||||||
|
<option value="minor">Minor</option>
|
||||||
|
</select>
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button className="modal-button secondary" onClick={() => setShowAddCharacter(false)}>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button className="modal-button primary" onClick={handleAddCharacter}>
|
||||||
|
Add Character
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showAddRelationship && (
|
||||||
|
<div className="modal-overlay" onClick={() => setShowAddRelationship(false)}>
|
||||||
|
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<div className="modal-title">Add Character Relationship</div>
|
||||||
|
<select
|
||||||
|
className="modal-select"
|
||||||
|
value={relationshipSource}
|
||||||
|
onChange={(e) => setRelationshipSource(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="">Select Source Character</option>
|
||||||
|
{novel.characters.map(c => (
|
||||||
|
<option key={c.id} value={c.id}>{c.name}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<select
|
||||||
|
className="modal-select"
|
||||||
|
value={relationshipTarget}
|
||||||
|
onChange={(e) => setRelationshipTarget(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="">Select Target Character</option>
|
||||||
|
{novel.characters.filter(c => c.id !== relationshipSource).map(c => (
|
||||||
|
<option key={c.id} value={c.id}>{c.name}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<select
|
||||||
|
className="modal-select"
|
||||||
|
value={relationshipType}
|
||||||
|
onChange={(e) => setRelationshipType(e.target.value as Relationship['type'])}
|
||||||
|
>
|
||||||
|
<option value="friend">Friend</option>
|
||||||
|
<option value="enemy">Enemy</option>
|
||||||
|
<option value="family">Family</option>
|
||||||
|
<option value="romantic">Romantic</option>
|
||||||
|
<option value="colleague">Colleague</option>
|
||||||
|
<option value="rival">Rival</option>
|
||||||
|
</select>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="modal-input"
|
||||||
|
value={relationshipDesc}
|
||||||
|
onChange={(e) => setRelationshipDesc(e.target.value)}
|
||||||
|
placeholder="Relationship Description"
|
||||||
|
/>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
|
||||||
|
<span style={{ fontSize: '0.75rem', color: 'var(--text-secondary)' }}>Strength:</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="100"
|
||||||
|
value={relationshipStrength}
|
||||||
|
onChange={(e) => setRelationshipStrength(Number(e.target.value))}
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
/>
|
||||||
|
<span style={{ fontSize: '0.75rem', color: 'var(--text-secondary)' }}>{relationshipStrength}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button className="modal-button secondary" onClick={() => setShowAddRelationship(false)}>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="modal-button primary"
|
||||||
|
onClick={handleAddRelationship}
|
||||||
|
disabled={!relationshipSource || !relationshipTarget}
|
||||||
|
>
|
||||||
|
Add Relationship
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{editingCharacter && (
|
||||||
|
<div className="modal-overlay" onClick={() => setEditingCharacter(null)}>
|
||||||
|
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<div className="modal-title">Edit Character</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="modal-input"
|
||||||
|
value={editingCharacter.name}
|
||||||
|
onChange={(e) => updateCharacter(editingCharacter.id, { name: e.target.value })}
|
||||||
|
placeholder="Character Name"
|
||||||
|
/>
|
||||||
|
<textarea
|
||||||
|
className="modal-input"
|
||||||
|
value={editingCharacter.description}
|
||||||
|
onChange={(e) => updateCharacter(editingCharacter.id, { description: e.target.value })}
|
||||||
|
placeholder="Character Description"
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
className="modal-select"
|
||||||
|
value={editingCharacter.role}
|
||||||
|
onChange={(e) => updateCharacter(editingCharacter.id, { role: e.target.value as Character['role'] })}
|
||||||
|
>
|
||||||
|
<option value="protagonist">Protagonist</option>
|
||||||
|
<option value="antagonist">Antagonist</option>
|
||||||
|
<option value="supporting">Supporting</option>
|
||||||
|
<option value="minor">Minor</option>
|
||||||
|
</select>
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button className="modal-button secondary" onClick={() => setEditingCharacter(null)}>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showContextModal && (
|
||||||
|
<div className="modal-overlay" onClick={() => setShowContextModal(false)}>
|
||||||
|
<div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: '600px' }}>
|
||||||
|
<div className="modal-title" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
Context Sent to Ollama
|
||||||
|
<button
|
||||||
|
className="character-action-btn"
|
||||||
|
onClick={() => setShowContextModal(false)}
|
||||||
|
style={{ padding: '0.25rem 0.5rem' }}
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
className="modal-input"
|
||||||
|
value={chatContext}
|
||||||
|
readOnly
|
||||||
|
style={{ height: '400px', fontFamily: 'monospace', fontSize: '0.75rem' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
1
novel-writer/src/assets/react.svg
Normal file
1
novel-writer/src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
829
novel-writer/src/index.css
Normal file
829
novel-writer/src/index.css
Normal file
@@ -0,0 +1,829 @@
|
|||||||
|
:root {
|
||||||
|
--bg-primary: #0f0f0f;
|
||||||
|
--bg-secondary: #1a1a1a;
|
||||||
|
--bg-tertiary: #252525;
|
||||||
|
--bg-hover: #2a2a2a;
|
||||||
|
--text-primary: #e5e5e5;
|
||||||
|
--text-secondary: #a3a3a3;
|
||||||
|
--text-muted: #737373;
|
||||||
|
--accent-primary: #6366f1;
|
||||||
|
--accent-secondary: #818cf8;
|
||||||
|
--accent-success: #10b981;
|
||||||
|
--accent-danger: #ef4444;
|
||||||
|
--accent-warning: #f59e0b;
|
||||||
|
--border-color: #333;
|
||||||
|
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
height: 56px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--accent-primary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-title-input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
width: 200px;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-title-input:hover,
|
||||||
|
.novel-title-input:focus {
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-select {
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-select:hover,
|
||||||
|
.model-select:focus {
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-left {
|
||||||
|
width: 280px;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border-right: 1px solid var(--border-color);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-left .sidebar-content {
|
||||||
|
min-height: 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-tabs {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-tab {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.75rem;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-tab:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-tab.active {
|
||||||
|
color: var(--accent-primary);
|
||||||
|
border-bottom-color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-content {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-item {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-header:hover {
|
||||||
|
background-color: var(--bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter-list {
|
||||||
|
padding-left: 1rem;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-top: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter-item:hover {
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter-item.active {
|
||||||
|
background-color: var(--accent-primary);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.625rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
border: 1px dashed var(--border-color);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-button:hover {
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
color: var(--accent-primary);
|
||||||
|
background-color: rgba(99, 102, 241, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-container {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter-title-input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
flex: 1;
|
||||||
|
max-width: 400px;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter-title-input:hover,
|
||||||
|
.chapter-title-input:focus {
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-stats {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-textarea {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
border: none;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-textarea::placeholder {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-right {
|
||||||
|
width: 360px;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border-left: 1px solid var(--border-color);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-header {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-messages {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
max-width: 90%;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.user {
|
||||||
|
align-self: flex-end;
|
||||||
|
background-color: var(--accent-primary);
|
||||||
|
color: white;
|
||||||
|
border-bottom-right-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.assistant {
|
||||||
|
align-self: flex-start;
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-bottom-left-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input-container {
|
||||||
|
padding: 1rem;
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input-wrapper {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input {
|
||||||
|
flex: 1;
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
resize: none;
|
||||||
|
max-height: 120px;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input:focus {
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input::placeholder {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-button {
|
||||||
|
background-color: var(--accent-primary);
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-button:hover:not(:disabled) {
|
||||||
|
background-color: var(--accent-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-button:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ollama-settings {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-input {
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-header {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-graph {
|
||||||
|
flex: 1;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-legend {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
left: 1rem;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-color {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-text {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
animation: fadeIn 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
animation: slideUp 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-input {
|
||||||
|
width: 100%;
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-input:focus {
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-select {
|
||||||
|
width: 100%;
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-button {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-button.secondary {
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-button.primary {
|
||||||
|
background-color: var(--accent-primary);
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-button:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-left .sidebar-content {
|
||||||
|
min-height: 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-list {
|
||||||
|
padding: 0.75rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-card {
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-card:hover {
|
||||||
|
background-color: var(--bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-card.selected {
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-avatar {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-role {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-description {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-action-btn {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.375rem;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-action-btn:hover {
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-thin::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-thin::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border-color);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.word-count {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-indicator {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-indicator span {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--accent-primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: typing 1.4s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-indicator span:nth-child(1) {
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-indicator span:nth-child(2) {
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-indicator span:nth-child(3) {
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes typing {
|
||||||
|
0%, 60%, 100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-indicator {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: var(--accent-success);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 2px solid var(--border-color);
|
||||||
|
border-top-color: var(--accent-primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-modal-textarea {
|
||||||
|
width: 100%;
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-modal-textarea:focus {
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.sidebar-left {
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-right {
|
||||||
|
width: 320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.sidebar-right {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
10
novel-writer/src/main.tsx
Normal file
10
novel-writer/src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
302
novel-writer/src/store.ts
Normal file
302
novel-writer/src/store.ts
Normal file
@@ -0,0 +1,302 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
import { persist } from 'zustand/middleware';
|
||||||
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
|
|
||||||
|
export interface Character {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
role: 'protagonist' | 'antagonist' | 'supporting' | 'minor';
|
||||||
|
color: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Relationship {
|
||||||
|
id: string;
|
||||||
|
sourceId: string;
|
||||||
|
targetId: string;
|
||||||
|
type: 'friend' | 'enemy' | 'family' | 'romantic' | 'colleague' | 'rival';
|
||||||
|
description: string;
|
||||||
|
strength: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Chapter {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
order: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Volume {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
order: number;
|
||||||
|
chapters: Chapter[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Message {
|
||||||
|
id: string;
|
||||||
|
role: 'user' | 'assistant';
|
||||||
|
content: string;
|
||||||
|
timestamp: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Novel {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
volumes: Volume[];
|
||||||
|
characters: Character[];
|
||||||
|
relationships: Relationship[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NovelState {
|
||||||
|
novel: Novel;
|
||||||
|
selectedChapterId: string | null;
|
||||||
|
selectedCharacterId: string | null;
|
||||||
|
chatMessages: Message[];
|
||||||
|
isChatLoading: boolean;
|
||||||
|
chatModel: string;
|
||||||
|
ollamaUrl: string;
|
||||||
|
availableModels: string[];
|
||||||
|
ollamaConnected: boolean;
|
||||||
|
|
||||||
|
setNovel: (novel: Novel) => void;
|
||||||
|
addVolume: (title: string) => void;
|
||||||
|
addChapter: (volumeId: string, title: string) => void;
|
||||||
|
updateChapter: (chapterId: string, content: string, title?: string) => void;
|
||||||
|
selectChapter: (chapterId: string | null) => void;
|
||||||
|
addCharacter: (name: string, description: string, role: Character['role']) => void;
|
||||||
|
updateCharacter: (id: string, updates: Partial<Character>) => void;
|
||||||
|
deleteCharacter: (id: string) => void;
|
||||||
|
selectCharacter: (id: string | null) => void;
|
||||||
|
addRelationship: (sourceId: string, targetId: string, type: Relationship['type'], description: string, strength: number) => void;
|
||||||
|
updateRelationship: (id: string, updates: Partial<Relationship>) => void;
|
||||||
|
deleteRelationship: (id: string) => void;
|
||||||
|
addChatMessage: (message: Omit<Message, 'id' | 'timestamp'>) => void;
|
||||||
|
clearChat: () => void;
|
||||||
|
setChatLoading: (loading: boolean) => void;
|
||||||
|
setChatModel: (model: string) => void;
|
||||||
|
setOllamaUrl: (url: string) => void;
|
||||||
|
setAvailableModels: (models: string[]) => void;
|
||||||
|
setOllamaConnected: (connected: boolean) => void;
|
||||||
|
getContextForOllama: () => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultNovel: Novel = {
|
||||||
|
id: uuidv4(),
|
||||||
|
title: 'My Webnovel',
|
||||||
|
description: '',
|
||||||
|
volumes: [],
|
||||||
|
characters: [],
|
||||||
|
relationships: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useNovelStore = create<NovelState>()(
|
||||||
|
persist(
|
||||||
|
(set, get) => ({
|
||||||
|
novel: defaultNovel,
|
||||||
|
selectedChapterId: null,
|
||||||
|
selectedCharacterId: null,
|
||||||
|
chatMessages: [],
|
||||||
|
isChatLoading: false,
|
||||||
|
chatModel: 'llama3.2',
|
||||||
|
ollamaUrl: 'http://localhost:11434',
|
||||||
|
availableModels: [],
|
||||||
|
ollamaConnected: false,
|
||||||
|
|
||||||
|
setNovel: (novel) => set({ novel }),
|
||||||
|
|
||||||
|
addVolume: (title) => {
|
||||||
|
const { novel } = get();
|
||||||
|
const newVolume: Volume = {
|
||||||
|
id: uuidv4(),
|
||||||
|
title,
|
||||||
|
order: novel.volumes.length,
|
||||||
|
chapters: [],
|
||||||
|
};
|
||||||
|
set({
|
||||||
|
novel: {
|
||||||
|
...novel,
|
||||||
|
volumes: [...novel.volumes, newVolume],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
addChapter: (volumeId, title) => {
|
||||||
|
const { novel } = get();
|
||||||
|
const newChapter: Chapter = {
|
||||||
|
id: uuidv4(),
|
||||||
|
title,
|
||||||
|
content: '',
|
||||||
|
order: novel.volumes.find(v => v.id === volumeId)?.chapters.length || 0,
|
||||||
|
};
|
||||||
|
set({
|
||||||
|
novel: {
|
||||||
|
...novel,
|
||||||
|
volumes: novel.volumes.map(v =>
|
||||||
|
v.id === volumeId
|
||||||
|
? { ...v, chapters: [...v.chapters, newChapter] }
|
||||||
|
: v
|
||||||
|
),
|
||||||
|
},
|
||||||
|
selectedChapterId: newChapter.id,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
updateChapter: (chapterId, content, title) => {
|
||||||
|
const { novel } = get();
|
||||||
|
set({
|
||||||
|
novel: {
|
||||||
|
...novel,
|
||||||
|
volumes: novel.volumes.map(v => ({
|
||||||
|
...v,
|
||||||
|
chapters: v.chapters.map(c =>
|
||||||
|
c.id === chapterId ? { ...c, content, title: title || c.title } : c
|
||||||
|
),
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
selectChapter: (chapterId) => set({ selectedChapterId: chapterId }),
|
||||||
|
|
||||||
|
addCharacter: (name, description, role) => {
|
||||||
|
const { novel } = get();
|
||||||
|
const colors = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4'];
|
||||||
|
const newCharacter: Character = {
|
||||||
|
id: uuidv4(),
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
role,
|
||||||
|
color: colors[novel.characters.length % colors.length],
|
||||||
|
};
|
||||||
|
set({
|
||||||
|
novel: {
|
||||||
|
...novel,
|
||||||
|
characters: [...novel.characters, newCharacter],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
updateCharacter: (id, updates) => {
|
||||||
|
const { novel } = get();
|
||||||
|
set({
|
||||||
|
novel: {
|
||||||
|
...novel,
|
||||||
|
characters: novel.characters.map(c =>
|
||||||
|
c.id === id ? { ...c, ...updates } : c
|
||||||
|
),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteCharacter: (id) => {
|
||||||
|
const { novel } = get();
|
||||||
|
set({
|
||||||
|
novel: {
|
||||||
|
...novel,
|
||||||
|
characters: novel.characters.filter(c => c.id !== id),
|
||||||
|
relationships: novel.relationships.filter(r => r.sourceId !== id && r.targetId !== id),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
selectCharacter: (id) => set({ selectedCharacterId: id }),
|
||||||
|
|
||||||
|
addRelationship: (sourceId, targetId, type, description, strength) => {
|
||||||
|
const { novel } = get();
|
||||||
|
const newRelationship: Relationship = {
|
||||||
|
id: uuidv4(),
|
||||||
|
sourceId,
|
||||||
|
targetId,
|
||||||
|
type,
|
||||||
|
description,
|
||||||
|
strength,
|
||||||
|
};
|
||||||
|
set({
|
||||||
|
novel: {
|
||||||
|
...novel,
|
||||||
|
relationships: [...novel.relationships, newRelationship],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
updateRelationship: (id, updates) => {
|
||||||
|
const { novel } = get();
|
||||||
|
set({
|
||||||
|
novel: {
|
||||||
|
...novel,
|
||||||
|
relationships: novel.relationships.map(r =>
|
||||||
|
r.id === id ? { ...r, ...updates } : r
|
||||||
|
),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteRelationship: (id) => {
|
||||||
|
const { novel } = get();
|
||||||
|
set({
|
||||||
|
novel: {
|
||||||
|
...novel,
|
||||||
|
relationships: novel.relationships.filter(r => r.id !== id),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
addChatMessage: (message) => {
|
||||||
|
const newMessage: Message = {
|
||||||
|
...message,
|
||||||
|
id: uuidv4(),
|
||||||
|
timestamp: Date.now(),
|
||||||
|
};
|
||||||
|
set(state => ({
|
||||||
|
chatMessages: [...state.chatMessages, newMessage],
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
clearChat: () => set({ chatMessages: [] }),
|
||||||
|
|
||||||
|
setChatLoading: (loading) => set({ isChatLoading: loading }),
|
||||||
|
|
||||||
|
setChatModel: (model) => set({ chatModel: model }),
|
||||||
|
|
||||||
|
setOllamaUrl: (url) => set({ ollamaUrl: url }),
|
||||||
|
|
||||||
|
setAvailableModels: (models) => set({ availableModels: models }),
|
||||||
|
|
||||||
|
setOllamaConnected: (connected) => set({ ollamaConnected: connected }),
|
||||||
|
|
||||||
|
getContextForOllama: () => {
|
||||||
|
const { novel } = get();
|
||||||
|
let context = `=== NOVEL OVERVIEW ===
|
||||||
|
Title: ${novel.title}
|
||||||
|
Description: ${novel.description}
|
||||||
|
|
||||||
|
=== CHARACTERS ===
|
||||||
|
${novel.characters.map(c => `- ${c.name} (${c.role}): ${c.description}`).join('\n')}
|
||||||
|
|
||||||
|
=== RELATIONSHIPS ===
|
||||||
|
${novel.relationships.map(r => {
|
||||||
|
const source = novel.characters.find(c => c.id === r.sourceId);
|
||||||
|
const target = novel.characters.find(c => c.id === r.targetId);
|
||||||
|
return `- ${source?.name} --[${r.type}]--> ${target?.name}: ${r.description}`;
|
||||||
|
}).join('\n')}
|
||||||
|
|
||||||
|
=== CHAPTERS CONTENT ===
|
||||||
|
`;
|
||||||
|
|
||||||
|
novel.volumes.forEach(volume => {
|
||||||
|
context += `\n--- VOLUME: ${volume.title} ---\n`;
|
||||||
|
volume.chapters.forEach(chapter => {
|
||||||
|
context += `\n## ${chapter.title}\n${chapter.content}\n`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return context;
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: 'novel-writer-storage',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
28
novel-writer/tsconfig.app.json
Normal file
28
novel-writer/tsconfig.app.json
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
novel-writer/tsconfig.json
Normal file
7
novel-writer/tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
26
novel-writer/tsconfig.node.json
Normal file
26
novel-writer/tsconfig.node.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
7
novel-writer/vite.config.ts
Normal file
7
novel-writer/vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user