src/games/ai/components/header/header.tsx

@@ -13,13 +13,12 @@ import { Ace } from "../ace";
 export const Header = () => {
     const { modelName, modelTemplate, contextLength, promptTokens, blockConnection } = useContext(LLMContext);
     const {
-        messages, connectionUrl, systemPrompt, lore, userPrompt, bannedWords, instruct, summarizePrompt,
-        setConnectionUrl, setSystemPrompt, setLore, setUserPrompt, addSwipe, setBannedWords, setInstruct, setSummarizePrompt,
+        messages, connectionUrl, systemPrompt, lore, userPrompt, bannedWords, instruct,
+        setConnectionUrl, setSystemPrompt, setLore, setUserPrompt, addSwipe, setBannedWords, setInstruct
     } = useContext(StateContext);
 
     const loreOpen = useBool();
     const promptsOpen = useBool();
-    const genparamsOpen = useBool();
     const assistantOpen = useBool();
 
     const bannedWordsInput = useMemo(() => bannedWords.join('\n'), [bannedWords]);
@@ -47,7 +46,7 @@ export const Header = () => {
 
     const handleBlurBannedWords = useCallback((e: Event) => {
         if (e.target instanceof HTMLTextAreaElement) {
-            const words = e.target.value.toLowerCase().split('\n').sort();
+            const words = e.target.value.split('\n').sort();
             setBannedWords(words);
         }
     }, [setBannedWords]);
@@ -84,9 +83,6 @@ export const Header = () => {
                 <button class='icon color' title='Edit lore' onClick={loreOpen.setTrue}>
                     🌍
                 </button>
-                <button class='icon color' title='Generation parameters' onClick={genparamsOpen.setTrue}>
-                    ⚙
-                </button>
                 <button class='icon color' title='Edit prompts' onClick={promptsOpen.setTrue}>
                     📃
                 </button>
@@ -104,19 +100,6 @@ export const Header = () => {
                     placeholder="Describe your world, for example: World of Awoo has big mountains and wide rivers."
                 />
             </Modal>
-            <Modal open={genparamsOpen.value} onClose={genparamsOpen.setFalse}>
-                <h3 class={styles.modalTitle}>Generation Parameters</h3>
-                <div className={styles.scrollPane}>
-                    <h4 class={styles.modalTitle}>Banned phrases</h4>
-                    <AutoTextarea
-                        placeholder="Each phrase on separate line"
-                        value={bannedWordsInput}
-                        onInput={handleSetBannedWords}
-                        onBlur={handleBlurBannedWords}
-                        class={styles.template}
-                    />
-                </div>
-            </Modal>
             <Modal open={promptsOpen.value} onClose={promptsOpen.setFalse}>
                 <h3 class={styles.modalTitle}>Prompts Editor</h3>
                 <div className={styles.scrollPane}>
@@ -126,11 +109,17 @@ export const Header = () => {
                     <h4 class={styles.modalTitle}>User prompt template</h4>
                     <Ace value={userPrompt} onInput={setUserPrompt} />
                     <hr />
-                    <h4 class={styles.modalTitle}>Summary template</h4>
-                    <Ace value={summarizePrompt} onInput={setSummarizePrompt} />
-                    <hr />
                     <h4 class={styles.modalTitle}>Instruct template</h4>
                     <Ace value={instruct} onInput={setInstruct} />
+                    <hr />
+                    <h4 class={styles.modalTitle}>Banned phrases</h4>
+                    <AutoTextarea
+                        placeholder="Each phrase on separate line"
+                        value={bannedWordsInput}
+                        onInput={handleSetBannedWords}
+                        onBlur={handleBlurBannedWords}
+                        class={styles.template}
+                    />
                 </div>
             </Modal>
             <MiniChat

src/games/ai/components/message/message.module.css

@@ -27,14 +27,10 @@
             border: var(--border);
             min-height: 100px;
             height: unset;
+            resize: vertical;
             line-height: 1.5;
             padding: 5px;
             border-radius: var(--border-radius);
-            overflow: hidden;
-        }
-
-        .summary {
-            opacity: 0.7;
         }
 
         .buttons {

src/games/ai/components/message/message.tsx

@@ -14,31 +14,25 @@ interface IProps {
 }
 
 export const Message = ({ message, index, isLastUser, isLastAssistant }: IProps) => {
-    const { messages, editMessage, editSummary, deleteMessage, setCurrentSwipe, setMessages } = useContext(StateContext);
+    const { editMessage, deleteMessage, setCurrentSwipe, addSwipe } = useContext(StateContext);
     const [editing, setEditing] = useState(false);
-    const [editedMessage, setEditedMessage] = useState('');
+    const [savedMessage, setSavedMessage] = useState('');
     const textRef = useRef<HTMLDivElement>(null);
 
-    const swipe = useMemo(() => MessageTools.getSwipe(message), [message]);
-
-    const content = swipe?.content;
-    const summary = swipe?.summary;
+    const content = useMemo(() => MessageTools.getSwipe(message)?.content, [message]);
     const htmlContent = useMemo(() => MessageTools.format(content ?? ''), [content]);
 
-    const handleEnableEdit = useCallback(() => {
-        setEditing(true);
-        setEditedMessage(content ?? '');
-    }, [content]);
-
-    const handleSaveEdit = useCallback(() => {
-        editMessage(index, editedMessage.trim());
-        editSummary(index, '');
-        setEditing(false);
-    }, [editMessage, editSummary, index, editedMessage]);
+    const handleToggleEdit = useCallback(() => {
+        setEditing(!editing);
+        if (!editing) {
+            setSavedMessage(content ?? '');
+        }
+    }, [editing, content]);
 
     const handleCancelEdit = useCallback(() => {
         setEditing(false);
-    }, [editMessage, index]);
+        editMessage(index, savedMessage);
+    }, [editMessage, index, savedMessage]);
 
     const handleDeleteMessage = useCallback(() => {
         if (confirm('Delete message?')) {
@@ -47,19 +41,12 @@ export const Message = ({ message, index, isLastUser, isLastAssistant }: IProps)
         }
     }, [deleteMessage, index]);
 
-    const handleStopHere = useCallback(() => {
-        if (confirm('Delete all messages after that?')) {
-            setMessages(messages.filter((_, i) => i <= index));
-            setEditing(false);
-        }
-    }, [messages, setMessages, index]);
-
     const handleEdit = useCallback((e: InputEvent) => {
         if (e.target instanceof HTMLTextAreaElement) {
             const newContent = e.target.value;
-            setEditedMessage(newContent);
+            editMessage(index, newContent);
         }
-    }, []);
+    }, [editMessage, index]);
 
     const handleSwipeLeft = useCallback(() => {
         setCurrentSwipe(index, message.currentSwipe - 1);
@@ -75,20 +62,16 @@ export const Message = ({ message, index, isLastUser, isLastAssistant }: IProps)
         <div class={`${styles.message} ${styles[message.role]} ${isLastUser ? styles.lastUser : ''}`}>
             <div class={styles.content}>
                 {editing
-                    ? <AutoTextarea onInput={handleEdit} value={editedMessage} />
-                    : <>
-                        <div class={styles.text} dangerouslySetInnerHTML={{ __html: htmlContent }} ref={textRef} />
-                        {summary && <small class={styles.summary}>{summary}</small>}
-                    </>
+                    ? <AutoTextarea onInput={handleEdit} value={content} />
+                    : <div class={styles.text} dangerouslySetInnerHTML={{ __html: htmlContent }} ref={textRef} />
                 }
                 {(isLastUser || message.role === 'assistant') &&
                     <div class={styles.buttons}>
                         {editing
                             ? <>
-                                <button class='icon' onClick={handleSaveEdit} title='Save'>✔</button>
-                                <button class='icon' onClick={handleDeleteMessage} title='Delete'>🗑️</button>
-                                <button class='icon' onClick={handleStopHere} title='Stop here'>⛔</button>
-                                <button class='icon' onClick={handleCancelEdit} title='Cancel'>❌</button>
+                                <button class='icon' onClick={handleToggleEdit}>✔</button>
+                                <button class='icon' onClick={handleDeleteMessage}>🗑️</button>
+                                <button class='icon' onClick={handleCancelEdit}>❌</button>
                             </>
                             : <>
                                 {isLastAssistant &&
@@ -98,7 +81,7 @@ export const Message = ({ message, index, isLastUser, isLastAssistant }: IProps)
                                         <div onClick={handleSwipeRight}>▶</div>
                                     </div>
                                 }
-                                <button class='icon' onClick={handleEnableEdit} title="Edit">🖊</button>
+                                <button class='icon' onClick={handleToggleEdit} title="Edit">🖊</button>
                             </>
                         }
                     </div>

src/games/ai/components/minichat/minichat.tsx

@@ -58,11 +58,11 @@ export const MiniChat = ({ history = [], buttons = {}, open, onClose }: IProps)
 
             for await (const chunk of generate(prompt)) {
                 text += chunk;
-                setMessages(MessageTools.updateSwipe(newMessages, messageId, text));
+                setMessages(MessageTools.updateContent(newMessages, messageId, text));
             }
 
             setMessages([
-                ...MessageTools.updateSwipe(newMessages, messageId, MessageTools.trimSentence(text)),
+                ...MessageTools.updateContent(newMessages, messageId, MessageTools.trimSentence(text)),
                 MessageTools.create('', 'user', true),
             ]);
             MessageTools.playReady();
@@ -78,7 +78,7 @@ export const MiniChat = ({ history = [], buttons = {}, open, onClose }: IProps)
 
     const handleChange = useCallback((i: number, e: InputEvent) => {
         if (e.target instanceof HTMLTextAreaElement) {
-            setMessages(MessageTools.updateSwipe(messages, i, e.target.value));
+            setMessages(MessageTools.updateContent(messages, i, e.target.value));
         }
     }, [messages]);
 

src/games/ai/contexts/llm.tsx

@@ -10,7 +10,6 @@ import { Huggingface } from "../huggingface";
 
 interface ICompileArgs {
     keepUsers?: number;
-    raw?: boolean;
 }
 
 interface ICompiledPrompt {
@@ -48,7 +47,6 @@ type IGenerationSettings = Partial<typeof DEFAULT_GENERATION_SETTINGS>;
 interface IActions {
     compilePrompt: (messages: IMessage[], args?: ICompileArgs) => Promise<ICompiledPrompt>;
     generate: (prompt: string, extraSettings?: IGenerationSettings) => AsyncGenerator<string>;
-    summarize: (content: string) => Promise<string>;
     countTokens: (prompt: string) => Promise<number>;
 }
 export type ILLMContext = IContext & IActions;
@@ -83,12 +81,11 @@ export const LLMContext = createContext<ILLMContext>({} as ILLMContext);
 
 export const LLMContextProvider = ({ children }: { children?: any }) => {
     const {
-        connectionUrl, messages, triggerNext, lore, userPrompt, systemPrompt, bannedWords, instruct, summarizePrompt,
-        setTriggerNext, addMessage, editMessage, editSummary, setInstruct,
+        connectionUrl, messages, triggerNext, lore, userPrompt, systemPrompt, bannedWords, instruct,
+        setTriggerNext, addMessage, editMessage, setInstruct,
     } = useContext(StateContext);
 
     const generating = useBool(false);
-    const summarizing = useBool(false);
     const blockConnection = useBool(false);
     const [promptTokens, setPromptTokens] = useState(0);
     const [contextLength, setContextLength] = useState(0);
@@ -288,14 +285,6 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
                 generating.setFalse();
             }
         },
-        summarize: async (message) => {
-            const content = Huggingface.applyTemplate(summarizePrompt, { message });
-            const prompt = Huggingface.applyChatTemplate(instruct, [{ role: 'user', content }]);
-
-            const tokens = await Array.fromAsync(actions.generate(prompt));
-
-            return MessageTools.trimSentence(tokens.join(''));
-        },
         countTokens: async (prompt) => {
             if (!connectionUrl) {
                 return 0;
@@ -316,7 +305,7 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
 
             return 0;
         },
-    }), [connectionUrl, lore, userPromptTemplate, systemPrompt, bannedWords, instruct, summarizePrompt]);
+    }), [connectionUrl, lore, userPromptTemplate, systemPrompt, bannedWords, instruct]);
 
     useEffect(() => void (async () => {
         if (triggerNext && !generating.value) {
@@ -334,16 +323,14 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
                 messageId++;
             }
 
-            editSummary(messageId, 'Generating...');
             for await (const chunk of actions.generate(prompt)) {
                 text += chunk;
                 setPromptTokens(tokens + Math.round(text.length * 0.25));
-                editMessage(messageId, text.trim());
+                editMessage(messageId, text);
             }
 
             text = MessageTools.trimSentence(text);
             editMessage(messageId, text);
-            editSummary(messageId, '');
 
             setPromptTokens(0); // trigger calculation
 
@@ -351,21 +338,6 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
         }
     })(), [actions, triggerNext, messages, generating.value]);
 
-    useEffect(() => void (async () => {
-        if (!generating.value && !summarizing.value) {
-            summarizing.setTrue();
-            for (let id = 0; id < messages.length; id++) {
-                const message = messages[id];
-                const swipe = MessageTools.getSwipe(message);
-                if (message.role === 'assistant' && swipe?.content?.includes('\n') && !swipe.summary) {
-                    const summary = await actions.summarize(swipe.content);
-                    editSummary(id, summary);
-                }
-            }
-            summarizing.setFalse();
-        }
-    })(), [messages, generating.value, summarizing.value]);
-
     useEffect(() => {
         if (!blockConnection.value) {
             setPromptTokens(0);

src/games/ai/contexts/state.tsx

@@ -10,7 +10,6 @@ interface IContext {
     systemPrompt: string;
     lore: string;
     userPrompt: string;
-    summarizePrompt: string;
     bannedWords: string[];
     messages: IMessage[];
     triggerNext: boolean;
@@ -23,14 +22,12 @@ interface IActions {
     setLore: (lore: string | Event) => void;
     setSystemPrompt: (prompt: string | Event) => void;
     setUserPrompt: (prompt: string | Event) => void;
-    setSummarizePrompt: (prompt: string | Event) => void;
     setBannedWords: (words: string[]) => void;
     setTriggerNext: (triggerNext: boolean) => void;
 
     setMessages: (messages: IMessage[]) => void;
     addMessage: (content: string, role: IMessage['role'], triggerNext?: boolean) => void;
-    editMessage: (index: number, content: string) => void;
-    editSummary: (index: number, summary: string) => void;
+    editMessage: (index: number, content: string, triggerNext?: boolean) => void;
     deleteMessage: (index: number) => void;
     setCurrentSwipe: (index: number, swipe: number) => void;
     addSwipe: (index: number, content: string) => void;
@@ -66,7 +63,6 @@ export const loadContext = (): IContext => {
         lore: '',
         userPrompt: `{% if prompt %}{% if isStart %}Start{% else %}Continue{% endif %} this story, taking information into account: {{ prompt | trim }}
 Remember that this story should be infinite and go forever. Avoid cliffhangers and pauses, be creative.{% elif isStart %}Write a novel using information above as a reference. Make sure to follow the lore exactly and avoid cliffhangers.{% else %}Continue the story forward. Avoid cliffhangers and pauses.{% endif %}`,
-        summarizePrompt: 'Make the following text shorter, keeping all important details:\n\n{{ message }}\n\nYour answer should only contain the shortened text.',
         bannedWords: [],
         messages: [],
         triggerNext: false,
@@ -96,7 +92,6 @@ export const StateContextProvider = ({ children }: { children?: any }) => {
     const [lore, setLore] = useInputState(loadedContext.lore);
     const [systemPrompt, setSystemPrompt] = useInputState(loadedContext.systemPrompt);
     const [userPrompt, setUserPrompt] = useInputState(loadedContext.userPrompt);
-    const [summarizePrompt, setSummarizePrompt] = useInputState(loadedContext.summarizePrompt);
     const [bannedWords, setBannedWords] = useState<string[]>(loadedContext.bannedWords);
     const [messages, setMessages] = useState(loadedContext.messages);
 
@@ -108,7 +103,6 @@ export const StateContextProvider = ({ children }: { children?: any }) => {
         setInstruct,
         setSystemPrompt,
         setUserPrompt,
-        setSummarizePrompt,
         setLore,
         setTriggerNext,
         setBannedWords: (words) => setBannedWords([...words]),
@@ -121,11 +115,9 @@ export const StateContextProvider = ({ children }: { children?: any }) => {
             ]);
             setTriggerNext(triggerNext);
         },
-        editMessage: (index, content) => {
-            setMessages(messages => MessageTools.updateSwipe(messages, index, { content }));
-        },
-        editSummary: (index, summary) => {
-            setMessages(messages => MessageTools.updateSwipe(messages, index, { summary }));
+        editMessage: (index, content, triggerNext = false) => {
+            setMessages(messages => MessageTools.updateContent(messages, index, content));
+            setTriggerNext(triggerNext);
         },
         deleteMessage: (index) => setMessages(messages =>
             messages.filter((_, i) => i !== index)
@@ -189,7 +181,6 @@ export const StateContextProvider = ({ children }: { children?: any }) => {
         systemPrompt,
         lore,
         userPrompt,
-        summarizePrompt,
         bannedWords,
         messages,
         triggerNext,

src/games/ai/huggingface.ts

@@ -79,7 +79,6 @@ export namespace Huggingface {
     };
 
     const templateCache: Record<string, string> = loadCache();
-    const compiledTemplates = new Map<string, Template>();
 
     const hasField = <T extends string>(obj: unknown, field: T): obj is Record<T, unknown> => (
         obj != null && typeof obj === 'object' && (field in obj)
@@ -257,29 +256,15 @@ export namespace Huggingface {
         return template;
     }
 
-    export const applyChatTemplate = (templateString: string, messages: ITemplateMessage[], functions?: IFunction[]) => (
-        applyTemplate(templateString, {
+    export const applyChatTemplate = (templateString: string, messages: ITemplateMessage[], functions?: IFunction[]) => {
+        const template = new Template(templateString);
+
+        const prompt = template.render({
             messages,
             add_generation_prompt: true,
             tools: functions?.map(convertFunctionToTool),
-        })
-    );
+        });
 
-    export const applyTemplate = (templateString: string, args: Record<string, any>): string => {
-        try {
-            let template = compiledTemplates.get(templateString);
-            if (!template) {
-                template = new Template(templateString);
-                compiledTemplates.set(templateString, template);
-            }
-
-            const result = template.render(args);
-
-            return result;
-        } catch (e) {
-            console.error('[applyTemplate] error:', e);
-        }
-
-        return '';
-    }
+        return prompt;
+    };
 }

src/games/ai/messages.ts

@@ -3,7 +3,6 @@ import messageSound from './assets/message.mp3';
 
 export interface ISwipe {
     content: string;
-    summary?: string;
 }
 
 export interface IMessage {
@@ -95,15 +94,15 @@ export namespace MessageTools {
         if (latestEnd > 0) {
             text = text.slice(0, latestEnd + 1);
         }
-        return text.trim();
+        return text.trimEnd();
     }
 
-    export const updateSwipe = (messages: IMessage[], index: number, update: Partial<ISwipe>) => (
+    export const updateContent = (messages: IMessage[], index: number, content: string) => (
         messages.map(
             (m, i) => ({
                 ...m,
                 swipes: i === index
-                    ? m.swipes.map((s, si) => (si === m.currentSwipe ? { ...s, ...update } : s))
+                    ? m.swipes.map((s, si) => (si === m.currentSwipe ? { content } : s))
                     : m.swipes
             })
         )