diff --git a/src/games/storywriter/assets/chat-sidebar.module.css b/src/games/storywriter/assets/chat-sidebar.module.css index 68da165..dc917d7 100644 --- a/src/games/storywriter/assets/chat-sidebar.module.css +++ b/src/games/storywriter/assets/chat-sidebar.module.css @@ -133,10 +133,35 @@ } .tokenCounter { + display: flex; + align-items: center; + gap: 8px; font-size: 11px; color: var(--text-muted); } +.summarizeButton { + display: flex; + align-items: center; + justify-content: center; + padding: 4px; + color: var(--text-muted); + background: transparent; + border: 1px solid var(--border); + border-radius: 4px; + cursor: pointer; + + &:hover:not(:disabled) { + color: var(--text); + border-color: var(--text-muted); + } + + &:disabled { + opacity: 0.4; + cursor: default; + } +} + .toggleContainer { display: flex; align-items: center; diff --git a/src/games/storywriter/assets/editor.module.css b/src/games/storywriter/assets/editor.module.css index 421ecc5..c88b025 100644 --- a/src/games/storywriter/assets/editor.module.css +++ b/src/games/storywriter/assets/editor.module.css @@ -17,15 +17,6 @@ text-align: center; } -.summarizing { - display: block; - font-family: sans-serif; - font-size: 12px; - font-weight: normal; - font-style: italic; - color: var(--text-muted); - margin-top: 4px; -} .content { flex: 1; diff --git a/src/games/storywriter/components/chat-sidebar.tsx b/src/games/storywriter/components/chat-sidebar.tsx index f4e595b..61cfe53 100644 --- a/src/games/storywriter/components/chat-sidebar.tsx +++ b/src/games/storywriter/components/chat-sidebar.tsx @@ -2,11 +2,13 @@ import { useInputState } from "@common/hooks/useInputState"; import { highlight } from "@common/highlight"; import { Sidebar } from "./sidebar"; import { useAppState, type ChatMessage } from "../contexts/state"; +import { useChapterSummarization } from "../utils/useChapterSummarization"; import styles from '../assets/chat-sidebar.module.css'; import { useState, useRef, useEffect, useMemo, useCallback } from "preact/hooks"; import LLM from "../utils/llm"; import Prompt from "../utils/prompt"; import { Tools } from "../utils/tools"; +import { Sparkles } from "lucide-preact"; import clsx from "clsx"; // ─── Role Header ────────────────────────────────────────────────────────────── @@ -41,6 +43,7 @@ const RoleHeader = ({ message, chatMessages }: RoleHeaderProps) => { export const ChatSidebar = () => { const appState = useAppState(); const { currentStory, dispatch, connection, model, enableThinking } = appState; + const { summarizeAll, isSummarizing } = useChapterSummarization(); const [input, setInput] = useInputState(''); const [isLoading, setIsLoading] = useState(false); const [isCollapsed, setCollapsed] = useState(false); @@ -336,11 +339,16 @@ export const ChatSidebar = () => { /> Enable thinking - {tokenCount && ( -
- {tokenCount.taken} / {tokenCount.total} tokens -
- )} +
+ {tokenCount && {tokenCount.taken} / {tokenCount.total} tokens} + +