diff --git a/src/games/ai-story/components/header/header.module.css b/src/games/ai-story/components/header/header.module.css index 134acd7..13d8aa6 100644 --- a/src/games/ai-story/components/header/header.module.css +++ b/src/games/ai-story/components/header/header.module.css @@ -64,4 +64,28 @@ flex-direction: row; gap: 8px; flex-wrap: wrap; +} + +.lore { + display: flex; + flex-direction: column; + gap: 10px; + min-height: 80dvh; + + .currentStory { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + + .storiesSelector { + height: 24px; + flex-grow: 1; + } + } + + .loreText { + flex-grow: 1; + } } \ No newline at end of file diff --git a/src/games/ai-story/components/header/header.tsx b/src/games/ai-story/components/header/header.tsx index 85cf96a..0bd4e3c 100644 --- a/src/games/ai-story/components/header/header.tsx +++ b/src/games/ai-story/components/header/header.tsx @@ -1,8 +1,9 @@ import { useCallback, useContext, useMemo } from "preact/hooks"; import { useBool } from "@common/hooks/useBool"; import { Modal } from "@common/components/modal/Modal"; +import { useInputCallback } from "@common/hooks/useInputCallback"; -import { StateContext } from "../../contexts/state"; +import { DEFAULT_STORY, StateContext } from "../../contexts/state"; import { LLMContext } from "../../contexts/llm"; import { MiniChat } from "../minichat/minichat"; import { AutoTextarea } from "../autoTextarea"; @@ -14,8 +15,29 @@ import styles from './header.module.css'; export const Header = () => { const { contextLength, promptTokens, modelName, spentKudos } = useContext(LLMContext); const { - messages, connection, systemPrompt, lore, userPrompt, bannedWords, summarizePrompt, summaryEnabled, totalSpentKudos, - setSystemPrompt, setLore, setUserPrompt, addSwipe, setBannedWords, setInstruct, setSummarizePrompt, setSummaryEnabled, setConnection, + messages, + connection, + systemPrompt, + lore, + userPrompt, + bannedWords, + summarizePrompt, + summaryEnabled, + totalSpentKudos, + stories, + currentStory, + setSystemPrompt, + setLore, + setUserPrompt, + addSwipe, + setBannedWords, + setInstruct, + setSummarizePrompt, + setSummaryEnabled, + setConnection, + setCurrentStory, + createStory, + deleteStory, } = useContext(StateContext); const connectionsOpen = useBool(); @@ -53,6 +75,24 @@ export const Header = () => { } }, [setSummaryEnabled]); + const handleChangeStory = useInputCallback((story) => { + if (story === '@new') { + const id = prompt('Story id'); + if (id) { + createStory(id); + setCurrentStory(id); + } + } else { + setCurrentStory(story); + } + }, []); + + const handleDeleteStory = useCallback(() => { + if (confirm(`Delete story "${currentStory}"?`)) { + deleteStory(currentStory); + } + }, [currentStory]); + return (