Prompt preview

src/games/storywriter/assets/editor.module.css

@@ -68,6 +68,13 @@
     margin-left: auto;
 }
 
+.promptPreview {
+    width: 100%;
+    color: var(--textColor);
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
 .tab {
     padding: 12px 16px;
     background: transparent;

src/games/storywriter/components/editor.tsx

@@ -9,17 +9,20 @@ import { LocationEditor } from "./location-editor";
 import { ChaptersEditor } from "./chapters-editor";
 import { LoreEditor } from "./lore-editor";
 import { useInputCallback } from "@common/hooks/useInputCallback";
+import Prompt from "../utils/prompt";
 
-const TABS: { id: Tab; label: string }[] = [
+const TABS: { id: Tab; label: string; right?: boolean }[] = [
     { id: "story", label: "Story" },
     { id: "chapters", label: "Chapters" },
     { id: "lore", label: "Lore" },
     { id: "characters", label: "Characters" },
     { id: "locations", label: "Locations" },
+    { id: "prompt", label: "Prompt", right: true },
 ];
 
 export const Editor = () => {
-    const { currentStory, dispatch } = useAppState();
+    const appState = useAppState();
+    const { currentStory, dispatch } = appState;
 
     const handleInput = useInputCallback((text: string) => {
         if (!currentStory) return;
@@ -40,6 +43,11 @@ export const Editor = () => {
     };
 
     const storyValue = useMemo(() => currentStory ? highlight(currentStory.text) : '', [currentStory?.text]);
+    const promptPreview = useMemo(() => {
+        if (currentStory?.currentTab !== 'prompt') return '';
+        const text = Prompt.formatSystemPrompt(appState);
+        return highlight(text, false);
+    }, [currentStory?.currentTab, appState]);
 
     if (!currentStory) {
         return <div class={styles.editor} />;
@@ -71,12 +79,15 @@ export const Editor = () => {
                 {currentStory.currentTab === "chapters" && (
                     <ChaptersEditor />
                 )}
+                {currentStory.currentTab === "prompt" && (
+                    <div class={styles.promptPreview} dangerouslySetInnerHTML={{ __html: promptPreview }} />
+                )}
             </div>
             <div class={styles.tabs}>
                 {TABS.map((tab) => (
                     <button
                         key={tab.id}
-                        class={clsx(styles.tab, currentStory.currentTab === tab.id && styles.active)}
+                        class={clsx(styles.tab, currentStory.currentTab === tab.id && styles.active, tab.right && styles.tabRight)}
                         onClick={() => handleTabChange(tab.id)}
                     >
                         {tab.label}

src/games/storywriter/contexts/state.tsx

@@ -11,7 +11,7 @@ export type ChatMessage = LLM.ChatMessage & {
     id: string;
 }
 
-export type Tab = "story" | "lore" | "characters" | "locations" | "chapters";
+export type Tab = "story" | "lore" | "characters" | "locations" | "chapters" | "prompt";
 
 export enum CharacterRole {
     Protagonist = 'protagonist',