diff --git a/bun.lockb b/bun.lockb
index 1fd6ee6..cc5a448 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/src/common/components/modal/modal.module.css b/src/common/components/modal/modal.module.css
new file mode 100644
index 0000000..58df899
--- /dev/null
+++ b/src/common/components/modal/modal.module.css
@@ -0,0 +1,42 @@
+.dialog {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 100%;
+    max-width: 1000px;
+    height: fit-content;
+    max-height: 80dvh;
+    overflow: hidden;
+    background-color: var(--backgroundColorDark, #111);
+    color: var(--color, white);
+    border: var(--border, 1px solid white);
+    outline: none;
+    padding: 0;
+    border-radius: var(--border-radius, 0);
+
+    &::backdrop {
+        background-color: var(--shadeColor, rgba(0, 0, 0, 0.2));
+    }
+
+    >.content {
+        display: flex;
+        flex-direction: column;
+        max-height: 80dvh;
+        overflow: hidden;
+
+        padding: 30px;
+
+        >.close {
+            font-family: var(--emojiFont, sans-serif);
+            font-size: 12px;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            cursor: pointer;
+            user-select: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/common/components/modal/modal.tsx b/src/common/components/modal/modal.tsx
new file mode 100644
index 0000000..9ae6f9d
--- /dev/null
+++ b/src/common/components/modal/modal.tsx
@@ -0,0 +1,40 @@
+import type { ComponentChildren } from "preact";
+import { useCallback, useEffect, useRef } from "preact/hooks";
+
+import styles from './modal.module.css';
+
+interface IProps {
+    open: boolean;
+    class?: string;
+    className?: string;
+    onClose?: () => void;
+    children?: ComponentChildren;
+}
+
+export const Modal = ({ children, open, onClose, ['class']: cls, className }: IProps) => {
+    const ref = useRef<HTMLDialogElement>(null);
+    const handleClickWrapper = useCallback((e: MouseEvent) => {
+        if (e.currentTarget instanceof HTMLDialogElement) {
+            onClose?.();
+        } else {
+            e.stopPropagation();
+        }
+    }, [onClose]);
+
+    useEffect(() => {
+        if (open) {
+            ref.current?.showModal();
+        } else {
+            ref.current?.close();
+        }
+    }, [open]);
+
+    return (
+        <dialog ref={ref} onMouseDown={handleClickWrapper} class={styles.dialog}>
+            <div class={`${styles.content} ${cls ?? className ?? ''}`} onMouseDown={handleClickWrapper}>
+                <div class={styles.close} onClick={onClose}>❌</div>
+                {children}
+            </div>
+        </dialog>
+    );
+};
diff --git a/src/common/hooks/useBool.ts b/src/common/hooks/useBool.ts
new file mode 100644
index 0000000..9ca862d
--- /dev/null
+++ b/src/common/hooks/useBool.ts
@@ -0,0 +1,11 @@
+import { useCallback, useState } from "preact/hooks";
+
+export const useBool = (initialValue: boolean) => {
+    const [value, setValue] = useState(initialValue);
+
+    const setTrue = useCallback(() => setValue(true), []);
+    const setFalse = useCallback(() => setValue(false), []);
+    const toggle = useCallback(() => setValue(v => !v), []);
+
+    return { value, setTrue, setFalse, toggle };
+};
diff --git a/src/games/ai/assets/style.css b/src/games/ai/assets/style.css
index 9abe603..890c9ff 100644
--- a/src/games/ai/assets/style.css
+++ b/src/games/ai/assets/style.css
@@ -10,11 +10,17 @@
     --shadeColor: rgba(0, 128, 128, 0.3);
 
     --border: 1px solid var(--color);
+    --border-radius: 4px;
 
     --emojiFont: "Noto Emoji", sans-serif;
     --emojiColorFont: "Noto Color Emoji", sans-serif;
 }
 
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color) transparent;
+}
+
 textarea,
 input {
     color: var(--color);
@@ -34,9 +40,19 @@ textarea {
     border: none;
     resize: none;
     width: 100%;
-    scrollbar-width: thin;
-    scrollbar-color: var(--color) transparent;
+    min-height: 100px;
     padding: 4px;
+
+    &.border {
+        border: var(--border);
+    }
+}
+
+button {
+    border: var(--border);
+    background-color: var(--backgroundColor);
+    color: var(--color);
+    cursor: pointer;
 }
 
 body {
@@ -124,7 +140,7 @@ body {
                         resize: vertical;
                         line-height: 1.5;
                         padding: 5px;
-                        border-radius: 3px;
+                        border-radius: var(--border-radius);
                     }
 
                     >.text {
@@ -207,6 +223,7 @@ body {
         left: 0;
     }
 }
+
 @keyframes swipe-from-right {
     0% {
         position: relative;
diff --git a/src/games/ai/components/chat.tsx b/src/games/ai/components/chat.tsx
index c9a787e..a7ba117 100644
--- a/src/games/ai/components/chat.tsx
+++ b/src/games/ai/components/chat.tsx
@@ -1,30 +1,27 @@
 import { useContext, useEffect, useRef } from "preact/hooks";
-import { GlobalContext } from "../context";
+import { StateContext } from "../contexts/state";
 import { Message } from "./message";
+import { MessageTools } from "../messages";
+import { DOMTools } from "../dom";
 
 export const Chat = () => {
-    const { messages } = useContext(GlobalContext);
+    const { messages } = useContext(StateContext);
     const chatRef = useRef<HTMLDivElement>(null);
 
     const lastMessage = messages.at(-1);
-    const lastMessageSwipe = lastMessage?.swipes[lastMessage.currentSwipe];
-    const lastMessageContent = lastMessageSwipe?.displayContent ?? lastMessageSwipe?.content;
+    const lastMessageSwipe = MessageTools.getSwipe(lastMessage);
+    const lastMessageContent = lastMessageSwipe?.content;
     const lastUserId = messages.findLastIndex(m => m.role === 'user');
     const lastAssistantId = messages.findLastIndex(m => m.role === 'assistant');
 
     useEffect(() => {
-        if (chatRef.current) {
-            chatRef.current.scrollTo({
-                top: chatRef.current.scrollHeight,
-                behavior: 'smooth',
-            });
-        }
+        DOMTools.scrollDown(chatRef.current);
     }, [messages.length, lastMessageContent]);
 
     return (
         <div class="chat" ref={chatRef}>
             {messages.map((m, i) => (
-                <Message 
+                <Message
                     message={m}
                     key={i} index={i}
                     isLastUser={i === lastUserId} isLastAssistant={i === lastAssistantId}
diff --git a/src/games/ai/components/header.tsx b/src/games/ai/components/header.tsx
index e6f1ff4..ffd405e 100644
--- a/src/games/ai/components/header.tsx
+++ b/src/games/ai/components/header.tsx
@@ -1,9 +1,10 @@
 import { useCallback, useContext, useEffect, useState } from "preact/hooks";
-import { GlobalContext } from "../context";
-import { LLM } from "../llm";
+import { StateContext } from "../contexts/state";
+import { LLMContext } from "../contexts/llm";
 
 export const Header = () => {
-    const { connectionUrl, setConnectionUrl } = useContext(GlobalContext);
+    const llm = useContext(LLMContext);
+    const { connectionUrl, setConnectionUrl } = useContext(StateContext);
     const [urlValid, setUrlValid] = useState(false);
     const [urlEditing, setUrlEditing] = useState(false);
 
@@ -26,7 +27,7 @@ export const Header = () => {
 
     useEffect(() => {
         if (!urlEditing) {
-            LLM.getContextLength().then(length => {
+            llm.getContextLength().then(length => {
                 setUrlValid(length > 0);
             });
         }
diff --git a/src/games/ai/components/input.tsx b/src/games/ai/components/input.tsx
index 69f121f..9094c38 100644
--- a/src/games/ai/components/input.tsx
+++ b/src/games/ai/components/input.tsx
@@ -1,24 +1,30 @@
 import { useCallback, useContext } from "preact/hooks";
-import { GlobalContext } from "../context";
+import { DOMTools } from "../dom";
+import { StateContext } from "../contexts/state";
+import { LLMContext } from "../contexts/llm";
 
 export const Input = () => {
-    const { input, setInput, addMessage, continueMessage } = useContext(GlobalContext);
+    const { input, setInput, addMessage, continueMessage } = useContext(StateContext);
+    const { generating } = useContext(LLMContext);
 
     const handleChange = useCallback((e: Event) => {
         if (e.target instanceof HTMLTextAreaElement) {
             setInput(e.target.value);
         }
-    }, []);
+        DOMTools.fixHeight(e.target);
+    }, [setInput]);
 
     const handleSend = useCallback(async () => {
-        const newInput = input.trim();
-        if (newInput) {
-            addMessage(newInput, 'user', true);
-            setInput('');
-        } else {
-            continueMessage();
+        if (!generating) {
+            const newInput = input.trim();
+            if (newInput) {
+                addMessage(newInput, 'user', true);
+                setInput('');
+            } else {
+                continueMessage();
+            }
         }
-    }, [input]);
+    }, [input, setInput, generating]);
 
     const handleKeyDown = useCallback((e: KeyboardEvent) => {
         if (e.key === 'Enter' && !e.shiftKey) {
@@ -30,7 +36,7 @@ export const Input = () => {
     return (
         <div class="chat-input">
             <textarea onInput={handleChange} onKeyDown={handleKeyDown} value={input} />
-            <button onClick={handleSend}>{input ? 'Send' : 'Continue'}</button>
+            <button onClick={handleSend} disabled={generating}>{input ? 'Send' : 'Continue'}</button>
         </div>
     );
 }
\ No newline at end of file
diff --git a/src/games/ai/components/message.tsx b/src/games/ai/components/message.tsx
index e1bac24..ae30c45 100644
--- a/src/games/ai/components/message.tsx
+++ b/src/games/ai/components/message.tsx
@@ -1,6 +1,9 @@
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { formatMessage, type IMessage } from "../messages";
-import { GlobalContext } from "../context";
+import { MessageTools, type IMessage } from "../messages";
+import { StateContext } from "../contexts/state";
+import { useBool } from "@common/hooks/useBool";
+import { MiniChat } from "./minichat/minichat";
+import { DOMTools } from "../dom";
 
 interface IProps {
     message: IMessage;
@@ -10,20 +13,20 @@ interface IProps {
 }
 
 export const Message = ({ message, index, isLastUser, isLastAssistant }: IProps) => {
-    const { editMessage, deleteMessage, setCurrentSwipe } = useContext(GlobalContext);
+    const { messages, editMessage, deleteMessage, setCurrentSwipe, addSwipe } = useContext(StateContext);
     const [editing, setEditing] = useState(false);
     const [savedMessage, setSavedMessage] = useState('');
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
     const textRef = useRef<HTMLDivElement>(null);
 
-    const swipe = useMemo(() => message.swipes[message.currentSwipe], [message.swipes, message.currentSwipe]);
-    const content = useMemo(() => swipe?.displayContent ?? swipe?.content, [swipe]);
-    const htmlContent = useMemo(() => formatMessage(content ?? ''), [content]);
+    const assistantModalOpen = useBool(false);
+
+    const content = useMemo(() => MessageTools.getSwipe(message)?.content, [message]);
+    const htmlContent = useMemo(() => MessageTools.format(content ?? ''), [content]);
 
     const handleToggleEdit = useCallback(() => {
         setEditing(!editing);
         if (!editing) {
-            setSavedMessage(content);
+            setSavedMessage(content ?? '');
         }
     }, [editing, content]);
 
@@ -44,38 +47,31 @@ export const Message = ({ message, index, isLastUser, isLastAssistant }: IProps)
             const newContent = e.target.value;
             editMessage(index, newContent);
         }
+        DOMTools.fixHeight(e.target);
     }, [editMessage, index]);
 
     const handleSwipeLeft = useCallback(() => {
         setCurrentSwipe(index, message.currentSwipe - 1);
-        if (textRef.current) {
-            textRef.current.style.animationName = '';
-            textRef.current.style.animationName = 'swipe-from-left';
-        }
+        DOMTools.animate(textRef.current, 'swipe-from-left');
     }, [setCurrentSwipe, index, message]);
 
     const handleSwipeRight = useCallback(() => {
         setCurrentSwipe(index, message.currentSwipe + 1);
-        if (textRef.current) {
-            textRef.current.style.animationName = '';
-            textRef.current.style.animationName = 'swipe-from-right';
-        }
+        DOMTools.animate(textRef.current, 'swipe-from-right');
     }, [setCurrentSwipe, index, message]);
 
-    useEffect(() => {
-        if (textareaRef.current) {
-            const area = textareaRef.current;
-            area.style.height = '0'; // reset
-            area.style.height = `${area.scrollHeight + 10}px`;
-        }
-    }, [content, editing]);
+
+    const handleAssistantAddSwipe = useCallback((answer: string) => {
+        addSwipe(index, answer);
+        assistantModalOpen.setFalse();
+    }, [addSwipe, index]);
 
     return (
         <div class={`message role-${message.role} ${isLastUser ? 'last-user' : ''}`}>
             <div class="content">
                 {editing
-                    ? <textarea onInput={handleEdit} value={content} class="edit-input" ref={textareaRef} />
-                    : <div class="text" dangerouslySetInnerHTML={{ __html: htmlContent }} ref={textRef}/>
+                    ? <textarea onInput={handleEdit} value={content} class="edit-input" />
+                    : <div class="text" dangerouslySetInnerHTML={{ __html: htmlContent }} ref={textRef} />
                 }
                 {(isLastUser || message.role === 'assistant') &&
                     <div class="buttons">
@@ -93,12 +89,23 @@ export const Message = ({ message, index, isLastUser, isLastAssistant }: IProps)
                                         <div onClick={handleSwipeRight}>▶</div>
                                     </div>
                                 }
-                                <button class="icon" onClick={handleToggleEdit}>🖊</button>
+                                <button class="icon" onClick={handleToggleEdit} title="Edit">🖊</button>
+                                {isLastAssistant &&
+                                    <button class="icon" onClick={assistantModalOpen.setTrue} title='Ask assistant'>
+                                        ❓
+                                    </button>
+                                }
                             </>
                         }
                     </div>
                 }
             </div>
+            <MiniChat
+                history={messages}
+                open={assistantModalOpen.value}
+                onClose={assistantModalOpen.setFalse}
+                buttons={{ 'Add swipe': handleAssistantAddSwipe }}
+            />
         </div>
     );
 };
\ No newline at end of file
diff --git a/src/games/ai/components/minichat/minichat.module.css b/src/games/ai/components/minichat/minichat.module.css
new file mode 100644
index 0000000..4f7c5ae
--- /dev/null
+++ b/src/games/ai/components/minichat/minichat.module.css
@@ -0,0 +1,25 @@
+.minichat {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .user {
+        background-color: var(--shadeColor);
+    }
+
+    textarea {
+        overflow: hidden;
+        min-height: 60px;
+    }
+}
+
+.buttons {
+    margin-top: 8px;
+    height: 24px;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
\ No newline at end of file
diff --git a/src/games/ai/components/minichat/minichat.tsx b/src/games/ai/components/minichat/minichat.tsx
new file mode 100644
index 0000000..5acefb0
--- /dev/null
+++ b/src/games/ai/components/minichat/minichat.tsx
@@ -0,0 +1,111 @@
+import { MessageTools, type IMessage } from "../../messages"
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { Modal } from "@common/components/modal/modal";
+import { DOMTools } from "../../dom";
+
+import styles from './minichat.module.css';
+import { LLMContext } from "../../contexts/llm";
+
+interface IProps {
+    open: boolean;
+    onClose: () => void;
+    history?: IMessage[];
+    buttons?: Record<string, (answer: string) => void>;
+}
+
+export const MiniChat = ({ history = [], buttons = {}, open, onClose }: IProps) => {
+    const { generating, generate } = useContext(LLMContext);
+    const [messages, setMessages] = useState<IMessage[]>([]);
+    const ref = useRef<HTMLDivElement>(null);
+
+    const answer = useMemo(() =>
+        MessageTools.getSwipe(messages.filter(m => m.role === 'assistant').at(-1))?.content,
+        [messages]
+    );
+
+    const fitTextareas = useCallback((height = false) => {
+        ref.current?.querySelectorAll('textarea').forEach(height ? DOMTools.fixHeight : DOMTools.scrollDown);
+    }, []);
+
+    useEffect(() => {
+        fitTextareas();
+    }, [messages]);
+
+    useEffect(() => {
+        DOMTools.scrollDown(ref.current);
+    }, [messages.length]);
+
+    useEffect(() => {
+        setMessages([MessageTools.create('', 'user', true)]);
+    }, [open])
+
+    const handleGenerate = useCallback(async () => {
+        if (messages.length > 0 && !generating) {
+            const promptMessages: IMessage[] = [...history, ...messages];
+            const { prompt } = await MessageTools.compilePrompt(promptMessages, { keepUsers: messages.length + 1 });
+
+            let text = '';
+            const messageId = messages.length;
+            const newMessages = [...messages, MessageTools.create('', 'assistant', true)];
+            setMessages(newMessages);
+
+            DOMTools.scrollDown(ref.current);
+            for await (const chunk of generate(prompt, { max_length: 512 })) {
+                text += chunk;
+                setMessages(MessageTools.updateContent(newMessages, messageId, text));
+            }
+
+            setMessages([
+                ...MessageTools.updateContent(newMessages, messageId, MessageTools.trimSentence(text)),
+                MessageTools.create('', 'user', true),
+            ]);
+            fitTextareas(true);
+            MessageTools.playReady();
+        }
+    }, [messages, history, generating]);
+
+    const handleKeyDown = useCallback((e: KeyboardEvent) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleGenerate();
+        }
+    }, [handleGenerate]);
+
+    const handleChange = useCallback((i: number, e: InputEvent) => {
+        if (e.target instanceof HTMLTextAreaElement) {
+            setMessages(MessageTools.updateContent(messages, i, e.target.value));
+        }
+        DOMTools.fixHeight(e.target);
+    }, [messages]);
+
+    if (!open) {
+        return null;
+    }
+    return (
+        <Modal open onClose={onClose}>
+            <div class={styles.minichat} ref={ref}>
+                <div>
+                    {messages.map((m, i) => (
+                        <textarea
+                            key={i}
+                            class={`border ${styles[m.role]}`}
+                            value={MessageTools.getSwipe(m)?.content ?? ''}
+                            onInput={(e) => handleChange(i, e)}
+                            onKeyDown={handleKeyDown}
+                        />
+                    ))}
+                </div>
+            </div>
+            <div class={styles.buttons}>
+                <button onClick={handleGenerate} disabled={generating}>
+                    Generate
+                </button>
+                {answer && Object.entries(buttons).map(([label, onClick], i) => (
+                    <button key={i} onClick={() => onClick(answer)}>
+                        {label}
+                    </button>
+                ))}
+            </div>
+        </Modal>
+    )
+}
\ No newline at end of file
diff --git a/src/games/ai/const.ts b/src/games/ai/const.ts
index bade542..7c344c4 100644
--- a/src/games/ai/const.ts
+++ b/src/games/ai/const.ts
@@ -24,7 +24,7 @@ export const WORLD_INFO = p`
     - Eth is short name for ether kinetics.
     - Etherkin is the person who uses ether kinetics.
     - No supernatural activity.
-    - Pretty weak, not capable of manipulating the reality.
+    - Ether is pretty weak, not capable of massive things like manipulating the reality, illusions or teleportation.
     - It has absolutely no influence on minds and could not control them.
     - Objects could not be infused with it, nor contain it in any form.
 
@@ -68,6 +68,7 @@ export const WORLD_INFO = p`
     Nobody recognizes her in her human form and treats just as strange clothed neka, though.
     Her intentions in this world is simple: to enjoy food, to learn something new, maybe kick some asses of bad guys, and to get fun in general.
     As the creator, Maya has complete knowledge of Fess's history, geography, and the fundamental laws that govern its existence. She is aware of all the stories, secrets, and potential plot lines that could unfold within her creation. She has no hidden origins or secrets that she needs to uncover, as she is the one who created those aspects in the first place. Maya has no fears, and not afraid of anything, because she is an immortal being.
+
 `;
 
 export const START_PROMPT = p`
@@ -77,9 +78,9 @@ export const START_PROMPT = p`
 export const CONTINUE_PROPMT = (prompt?: string, isStart = false) =>
     prompt?.trim()
         ? p`
-            This is a description of how you should ${isStart ? 'start' : 'continue'} this story: ${prompt.trim()}
+            ${isStart ? 'Start' : 'Continue'} this story, taking information into account: ${prompt.trim()}
 
-            Remember that this story should be infinite and go forever. Avoid cliffhangers and pauses.
+            Remember that this story should be infinite and go forever. Avoid cliffhangers and pauses, be creative.
         `
         : `Continue the story forward. Avoid cliffhangers and pauses.`;
 
diff --git a/src/games/ai/contexts/llm.tsx b/src/games/ai/contexts/llm.tsx
new file mode 100644
index 0000000..ee59373
--- /dev/null
+++ b/src/games/ai/contexts/llm.tsx
@@ -0,0 +1,169 @@
+import Lock from "@common/lock";
+import SSE from "@common/sse";
+import { GENERATION_SETTINGS } from "../const";
+import { createContext } from "preact";
+import { useContext, useEffect, useMemo } from "preact/hooks";
+import { MessageTools } from "../messages";
+import { StateContext } from "./state";
+import { useBool } from "@common/hooks/useBool";
+
+interface IContext {
+    generating: boolean;
+}
+
+interface IActions {
+    generate: (prompt: string, extraSettings?: Partial<typeof GENERATION_SETTINGS>) => AsyncGenerator<string>;
+    countTokens(prompt: string): Promise<number>;
+    getContextLength(): Promise<number>;
+}
+export type ILLMContext = IContext & IActions;
+
+export const LLMContext = createContext<ILLMContext>({} as ILLMContext);
+
+export const LLMContextProvider = ({ children }: { children?: any }) => {
+    const { connectionUrl, messages, triggerNext, setTriggerNext, addMessage, editMessage } = useContext(StateContext);
+    const generating = useBool(false);
+
+    const actions: IActions = useMemo(() => ({
+        generate: async function* (prompt, extraSettings = {}) {
+            if (!connectionUrl) {
+                return;
+            }
+
+            try {
+                generating.setTrue();
+                console.log('[LLM.generate]', prompt);
+
+                const sse = new SSE(`${connectionUrl}/api/extra/generate/stream`, {
+                    payload: JSON.stringify({
+                        ...GENERATION_SETTINGS,
+                        ...extraSettings,
+                        prompt,
+                    }),
+                });
+
+                const messages: string[] = [];
+                const messageLock = new Lock();
+                let end = false;
+
+                sse.addEventListener('message', (e) => {
+                    if (e.data) {
+                        {
+                            const { token, finish_reason } = JSON.parse(e.data);
+                            messages.push(token);
+
+                            if (finish_reason && finish_reason !== 'null') {
+                                end = true;
+                            }
+                        }
+                    }
+                    messageLock.release();
+                });
+
+                const handleEnd = () => {
+                    end = true;
+                    messageLock.release();
+                };
+
+                sse.addEventListener('error', handleEnd);
+                sse.addEventListener('abort', handleEnd);
+                sse.addEventListener('readystatechange', (e) => {
+                    if (e.readyState === SSE.CLOSED) handleEnd();
+                });
+
+                while (!end || messages.length) {
+                    while (messages.length > 0) {
+                        const message = messages.shift();
+                        if (message != null) {
+                            try {
+                                yield message;
+                            } catch { }
+                        }
+                    }
+                    if (!end) {
+                        await messageLock.wait();
+                    }
+                }
+
+                sse.close();
+            } finally {
+                generating.setFalse();
+            }
+        },
+        countTokens: async (prompt) => {
+            if (!connectionUrl) {
+                return 0;
+            }
+            try {
+                const response = await fetch(`${connectionUrl}/api/extra/tokencount`, {
+                    body: JSON.stringify({ prompt }),
+                    headers: { 'Content-Type': 'applicarion/json' },
+                    method: 'POST',
+                });
+                if (response.ok) {
+                    const { value } = await response.json();
+                    return value;
+                }
+            } catch (e) {
+                console.log('Error counting tokens', e);
+            }
+
+            return 0;
+        },
+        getContextLength: async() => {
+            if (!connectionUrl) {
+                return 0;
+            }
+            try {
+                const response = await fetch(`${connectionUrl}/api/extra/true_max_context_length`);
+                if (response.ok) {
+                    const { value } = await response.json();
+                    return value;
+                }
+            } catch (e) {
+                console.log('Error getting max tokens', e);
+            }
+    
+            return 0;
+        },
+    }), [connectionUrl]);
+
+    useEffect(() => void (async () => {
+        if (triggerNext && !generating) {
+            setTriggerNext(false);
+
+            let messageId = messages.length - 1;
+            let text: string = '';
+
+            const { prompt, isRegen } = await MessageTools.compilePrompt(messages);
+
+            if (!isRegen) {
+                addMessage('', 'assistant');
+                messageId++;
+            }
+
+            for await (const chunk of actions.generate(prompt)) {
+                text += chunk;
+                editMessage(messageId, text);
+            }
+
+            text = MessageTools.trimSentence(text);
+            editMessage(messageId, text);
+
+            MessageTools.playReady();
+        }
+    })(), [triggerNext, messages, generating]);
+
+    const rawContext: IContext = {
+       generating: generating.value,
+    };
+
+    const context = useMemo(() => rawContext, Object.values(rawContext));
+    const value = useMemo(() => ({ ...context, ...actions }), [context, actions])
+
+    return (
+        <LLMContext.Provider value={value}>
+            {children}
+        </LLMContext.Provider>
+    );
+}
\ No newline at end of file
diff --git a/src/games/ai/context.tsx b/src/games/ai/contexts/state.tsx
similarity index 59%
rename from src/games/ai/context.tsx
rename to src/games/ai/contexts/state.tsx
index f7e428e..1353f35 100644
--- a/src/games/ai/context.tsx
+++ b/src/games/ai/contexts/state.tsx
@@ -1,31 +1,66 @@
 import { createContext } from "preact";
 import { useEffect, useMemo, useState } from "preact/hooks";
-import { compilePrompt, trimSentence, type IMessage } from "./messages";
-import { LLM } from "./llm";
-import { loadContext, saveContext, type IContext } from "./globalConfig";
+import { MessageTools, type IMessage } from "../messages";
 
-import messageSound from './assets/message.mp3';
-import { CONTINUE_PROPMT } from "./const";
+interface IContext {
+    connectionUrl: string;
+    input: string;
+    name: string;
+    messages: IMessage[];
+    triggerNext: boolean;
+}
 
-export interface IActions {
+interface IActions {
     setConnectionUrl: (url: string) => void;
     setInput: (url: string) => void;
     setName: (name: string) => void;
+    setTriggerNext: (triggerNext: boolean) => void;
 
     setMessages: (messages: IMessage[]) => void;
     addMessage: (content: string, role: IMessage['role'], triggerNext?: boolean) => 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;
 
     continueMessage: () => void;
 }
 
-export type IGlobalContext = IContext & IActions;
+const SAVE_KEY = 'ai_game_save_state';
 
-export const GlobalContext = createContext<IGlobalContext>({} as IGlobalContext);
+export const saveContext = (context: IContext) => {
+    localStorage.setItem(SAVE_KEY, JSON.stringify({
+        ...context,
+        triggerNext: false,
+    }));
+}
 
-export const GlobalContextProvider = ({ children }: { children?: any }) => {
+export const loadContext = (): IContext => {
+    const defaultContext: IContext = {
+        connectionUrl: 'http://192.168.10.102:5001',
+        input: '',
+        name: 'Maya',
+        messages: [],
+        triggerNext: false,
+    };
+
+    let loadedContext: Partial<IContext> = {};
+
+    try {
+        const json = localStorage.getItem(SAVE_KEY);
+        if (json) {
+            loadedContext = JSON.parse(json);
+        }
+    } catch { }
+
+    return { ...defaultContext, ...loadedContext };
+}
+
+export type IStateContext = IContext & IActions;
+
+export const StateContext = createContext<IStateContext>({} as IStateContext);
+
+export const StateContextProvider = ({ children }: { children?: any }) => {
     const loadedContext = useMemo(() => loadContext(), []);
     const [connectionUrl, setConnectionUrl] = useState(loadedContext.connectionUrl);
     const [input, setInput] = useState(loadedContext.input);
@@ -37,26 +72,18 @@ export const GlobalContextProvider = ({ children }: { children?: any }) => {
         setConnectionUrl,
         setInput,
         setName,
+        setTriggerNext,
 
         setMessages: (newMessages) => setMessages(newMessages.slice()),
         addMessage: (content, role, triggerNext = false) => {
             setMessages(messages => [
                 ...messages,
-                { role, currentSwipe: 0, swipes: [{ content }] }
+                MessageTools.create(content, role),
             ]);
             setTriggerNext(triggerNext);
         },
         editMessage: (index, content, triggerNext = false) => {
-            setMessages(messages =>
-                messages.map(
-                    (m, i) => ({
-                        ...m,
-                        swipes: i === index
-                            ? m.swipes.map((s, si) => (si === m.currentSwipe ? { content } : s))
-                            : m.swipes
-                    })
-                )
-            );
+            setMessages(messages => MessageTools.updateContent(messages, index, content));
             setTriggerNext(triggerNext);
         },
         deleteMessage: (index) => setMessages(messages =>
@@ -94,50 +121,32 @@ export const GlobalContextProvider = ({ children }: { children?: any }) => {
 
             setTriggerNext(shouldTrigger);
         },
+        addSwipe: (index, content) => setMessages(messages =>
+            messages.map(
+                (message, i) => {
+                    if (i === index) {
+                        const swipes = [...message.swipes, { content }];
+
+                        return {
+                            ...message,
+                            swipes,
+                            currentSwipe: swipes.length - 1,
+                        };
+                    } else {
+                        return message;
+                    }
+                }
+            )
+        ),
         continueMessage: () => setTriggerNext(true),
     }), []);
 
-    useEffect(() => void (async () => {
-        if (triggerNext) {
-            setTriggerNext(false);
-            const promptMessages = messages.slice();
-            const lastMessage = promptMessages.at(-1);
-            const isAssistantLast = lastMessage?.role === 'assistant';
-            const isRegen = isAssistantLast && !lastMessage?.swipes[lastMessage.currentSwipe].content;
-            const isContinue = isAssistantLast && !isRegen;
-
-            let messageId = promptMessages.length - 1;
-            let text: string = '';
-
-            if (isContinue) {
-                promptMessages.push({ role: 'user', currentSwipe: 0, swipes: [{ content: CONTINUE_PROPMT() }] });
-            }
-
-            const prompt = await compilePrompt(promptMessages, { rawUser: isContinue });
-
-            if (!isRegen) {
-                actions.addMessage('', 'assistant');
-                messageId++;
-            }
-
-            for await (const chunk of LLM.generate(prompt)) {
-                text += chunk;
-                actions.editMessage(messageId, text);
-            }
-
-            text = trimSentence(text);
-            actions.editMessage(messageId, text);
-
-            messageSound.currentTime = 0;
-            messageSound.play();
-        }
-    })(), [triggerNext, messages]);
-
     const rawContext: IContext = {
         connectionUrl,
         input,
         name,
         messages,
+        triggerNext,
     };
 
     const context = useMemo(() => rawContext, Object.values(rawContext));
@@ -149,8 +158,8 @@ export const GlobalContextProvider = ({ children }: { children?: any }) => {
     const value = useMemo(() => ({ ...context, ...actions }), [context, actions])
 
     return (
-        <GlobalContext.Provider value={value}>
+        <StateContext.Provider value={value}>
             {children}
-        </GlobalContext.Provider>
+        </StateContext.Provider>
     );
 }
\ No newline at end of file
diff --git a/src/games/ai/dom.ts b/src/games/ai/dom.ts
new file mode 100644
index 0000000..a31360b
--- /dev/null
+++ b/src/games/ai/dom.ts
@@ -0,0 +1,24 @@
+export namespace DOMTools {
+    export const fixHeight = (e: unknown) => {
+        if (e instanceof HTMLElement) {
+            e.style.height = '0'; // reset
+            e.style.height = `${e.scrollHeight + 10}px`;
+        }
+    }
+
+    export const animate = (e: unknown, animationName: string) => {
+        if (e instanceof HTMLElement) {
+            e.style.animationName = '';
+            e.style.animationName = animationName;
+        }
+    }
+
+    export const scrollDown = (e: unknown) => {
+        if (e instanceof HTMLElement) {
+            e.scrollTo({
+                top: e.scrollHeight,
+                behavior: 'smooth',
+            });
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/games/ai/globalConfig.ts b/src/games/ai/globalConfig.ts
deleted file mode 100644
index dd81042..0000000
--- a/src/games/ai/globalConfig.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { IMessage } from "./messages";
-
-export interface IContext {
-    connectionUrl: string;
-    input: string;
-    name: string;
-    messages: IMessage[];
-}
-
-export const GLOBAL_CONFIG: IContext = {
-    connectionUrl: 'http://192.168.10.102:5001',
-    input: '',
-    name: 'Maya',
-    messages: [],
-};
-
-const SAVE_KEY = 'ai_game_save_state';
-
-export const saveContext = (context: IContext) => {
-    Object.assign(GLOBAL_CONFIG, context);
-    localStorage.setItem(SAVE_KEY, JSON.stringify(context));
-}
-
-export const loadContext = (): IContext => {
-    const defaultContext: IContext = GLOBAL_CONFIG;
-
-    let loadedContext: Partial<IContext> = {};
-
-    try {
-        const json = localStorage.getItem(SAVE_KEY);
-        if (json) {
-            loadedContext = JSON.parse(json);
-        }
-    } catch { }
-
-    return Object.assign(GLOBAL_CONFIG, { ...defaultContext, ...loadedContext });
-}
\ No newline at end of file
diff --git a/src/games/ai/index.tsx b/src/games/ai/index.tsx
index 8981def..cf1fa9d 100644
--- a/src/games/ai/index.tsx
+++ b/src/games/ai/index.tsx
@@ -1,15 +1,18 @@
 import { render } from "preact";
-import { GlobalContextProvider } from "./context";
+import { StateContextProvider } from "./contexts/state";
 import { App } from "./components/app";
 
 import './assets/style.css';
 import './assets/emoji.css';
+import { LLMContextProvider } from "./contexts/llm";
 
 export default function main() {
     render(
-        <GlobalContextProvider>
-            <App />
-        </GlobalContextProvider>,
+        <StateContextProvider>
+            <LLMContextProvider>
+                <App />
+            </LLMContextProvider>
+        </StateContextProvider>,
         document.body
     );
 }
\ No newline at end of file
diff --git a/src/games/ai/llm.ts b/src/games/ai/llm.ts
deleted file mode 100644
index 164d35e..0000000
--- a/src/games/ai/llm.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import Lock from "@common/lock";
-import SSE from "@common/sse";
-import { GLOBAL_CONFIG } from "./globalConfig";
-import { GENERATION_SETTINGS } from "./const";
-
-export namespace LLM {
-    export async function* generate(prompt: string) {
-        const host = GLOBAL_CONFIG.connectionUrl;
-
-        if (!host) {
-            return;
-        }
-
-        console.log('[LLM.generate]', prompt);
-
-        const sse = new SSE(`${host}/api/extra/generate/stream`, {
-            payload: JSON.stringify({
-                ...GENERATION_SETTINGS,
-                prompt,
-            }),
-        });
-
-        const messages: string[] = [];
-        const messageLock = new Lock();
-        let end = false;
-
-        sse.addEventListener('message', (e) => {
-            if (e.data) {
-                {
-                    const { token, finish_reason } = JSON.parse(e.data);
-                    messages.push(token);
-
-                    if (finish_reason && finish_reason !== 'null') {
-                        end = true;
-                    }
-                }
-            }
-            messageLock.release();
-        });
-
-        const handleEnd = () => {
-            end = true;
-            messageLock.release();
-        };
-
-        sse.addEventListener('error', handleEnd);
-        sse.addEventListener('abort', handleEnd);
-        sse.addEventListener('readystatechange', (e) => {
-            if (e.readyState === SSE.CLOSED) handleEnd();
-        });
-
-        while (!end || messages.length) {
-            while (messages.length > 0) {
-                const message = messages.shift();
-                if (message != null) {
-                    try {
-                        yield message;
-                    } catch { }
-                }
-            }
-            if (!end) {
-                await messageLock.wait();
-            }
-        }
-
-        sse.close();
-    }
-
-    export async function countTokens(prompt: string): Promise<number> {
-        const host = GLOBAL_CONFIG.connectionUrl;
-
-        if (!host) {
-            return 0;
-        }
-        try {
-            const response = await fetch(`${host}/api/extra/tokencount`, {
-                body: JSON.stringify({ prompt }),
-                headers: { 'Content-Type': 'applicarion/json' },
-                method: 'POST',
-            });
-            if (response.ok) {
-                const { value } = await response.json();
-                return value;
-            }
-        } catch (e) {
-            console.log('Error counting tokens', e);
-        }
-
-        return 0;
-    }
-
-    export async function getContextLength(): Promise<number> {
-        const host = GLOBAL_CONFIG.connectionUrl;
-
-        if (!host) {
-            return 0;
-        }
-        try {
-            const response = await fetch(`${host}/api/extra/true_max_context_length`);
-            if (response.ok) {
-                const { value } = await response.json();
-                return value;
-            }
-        } catch (e) {
-            console.log('Error getting max tokens', e);
-        }
-
-        return 0;
-    }
-}
\ No newline at end of file
diff --git a/src/games/ai/messages.ts b/src/games/ai/messages.ts
index 60a43bd..891619a 100644
--- a/src/games/ai/messages.ts
+++ b/src/games/ai/messages.ts
@@ -1,15 +1,16 @@
 import { Template } from "@huggingface/jinja";
 import { LLAMA_TEMPLATE, p, SYSTEM_PROMPT, CONTINUE_PROPMT, WORLD_INFO, START_PROMPT } from "./const";
+import messageSound from './assets/message.mp3';
 
 export interface ISwipe {
     content: string;
-    displayContent?: string;
 }
 
 export interface IMessage {
     role: 'user' | 'assistant' | 'system';
     currentSwipe: number;
     swipes: ISwipe[];
+    technical?: boolean;
 }
 
 interface ITemplateMessage {
@@ -17,120 +18,192 @@ interface ITemplateMessage {
     content: string;
 }
 
-export const applyChatTemplate = (messages: ITemplateMessage[], templateString: string, eosToken = '</s>') => {
-    const template = new Template(templateString);
+export namespace MessageTools {
+    export const getSwipe = (message?: IMessage | null) => message?.swipes[message?.currentSwipe];
+    export const create = (content: string, role: IMessage['role'] = 'user', technical = false): IMessage => (
+        { role, currentSwipe: 0, swipes: [{ content }], technical }
+    );
 
-    const prompt = template.render({
-        messages,
-        bos_token: '',
-        eos_token: eosToken,
-        add_generation_prompt: true,
-    });
-
-    return prompt;
-}
-
-interface ICompileArgs {
-    rawUser?: boolean;
-}
-
-export const compilePrompt = async (messages: IMessage[], { rawUser }: ICompileArgs = {}): Promise<string> => {
-    const system = `${SYSTEM_PROMPT}\n\n${WORLD_INFO}`.trim();
-    const story = messages.filter(m => m.role === 'assistant').map(m => m.swipes[m.currentSwipe].content.trim()).join('\n\n');
-    const userMessages = messages.filter(m => m.role === 'user');
-    const lastUserMessage = userMessages.at(-1);
-    let userPrompt: string | undefined = lastUserMessage?.swipes[lastUserMessage.currentSwipe].content;
-    if (!rawUser && userPrompt) {
-        userPrompt = CONTINUE_PROPMT(userPrompt, story.length === 0);
+    export const playReady = () => {
+        messageSound.currentTime = 0;
+        messageSound.play();
     }
 
-    const templateMessages: ITemplateMessage[] = [
-        { role: 'system', content: system },
-    ];
+    export const applyChatTemplate = (messages: ITemplateMessage[], templateString: string, eosToken = '</s>') => {
+        const template = new Template(templateString);
 
-    if (story.length > 0) {
-        templateMessages.push({ role: 'user', content: START_PROMPT });
-        templateMessages.push({ role: 'assistant', content: story });
+        const prompt = template.render({
+            messages,
+            bos_token: '',
+            eos_token: eosToken,
+            add_generation_prompt: true,
+        });
+
+        return prompt;
     }
 
-    if (userPrompt) {
-        templateMessages.push({ role: 'user', content: userPrompt });
+    interface ICompileArgs {
+        keepUsers?: number;
     }
 
-    const prompt = applyChatTemplate(templateMessages, LLAMA_TEMPLATE);
-    return prompt;
-}
+    interface ICompiledPrompt {
+        prompt: string;
+        isContinue: boolean;
+        isRegen: boolean;
+    }
 
-export const formatMessage = (message: string): string => {
-    const replaceRegex = /([*"]\*?)/ig;
-    const splitToken = '___SPLIT_AWOORWA___';
+    export const compilePrompt = async (messages: IMessage[], { keepUsers }: ICompileArgs = {}): Promise<ICompiledPrompt> => {
+        const promptMessages = messages.slice();
+        const lastMessage = promptMessages.at(-1);
+        const isAssistantLast = lastMessage?.role === 'assistant';
+        const isRegen = isAssistantLast && !getSwipe(lastMessage)?.content;
+        const isContinue = isAssistantLast && !isRegen;
 
-    const preparedMessage = message.replace(replaceRegex, `${splitToken}$1${splitToken}`);
-    const parts = preparedMessage.split(splitToken);
+        if (isContinue) {
+            promptMessages.push(create(CONTINUE_PROPMT()));
+        }
 
-    let isText = true;
-    let keepPart = true;
+        const system = `${SYSTEM_PROMPT}\n\n${WORLD_INFO}`.trim();
 
-    let resultHTML = '';
+        const templateMessages: ITemplateMessage[] = [
+            { role: 'system', content: system },
+        ];
 
-    for (const part of parts) {
+        if (keepUsers) {
+            let usersRemaining = messages.filter(m => m.role === 'user').length;
+            let wasStory = false;
 
-        if (isText) {
-            if (part === '*') {
-                isText = false;
-                keepPart = false;
-                resultHTML += `<span class="italic">`;
-            } else if (part === '**') {
-                isText = false;
-                keepPart = false;
-                resultHTML += `<span class="bold">`;
-            } else if (part === '"') {
-                isText = false;
-                keepPart = true;
-                resultHTML += `<span class="quote">"`;
-            } else {
-                resultHTML += part;
+            for (const message of messages) {
+                const { role } = message;
+                const content = getSwipe(message)?.content ?? '';
+                if (role === 'user' && usersRemaining > keepUsers) {
+                    usersRemaining--;
+                } else if (role === 'assistant' && templateMessages.at(-1).role === 'assistant') {
+                    wasStory = true;
+                    templateMessages.at(-1).content += '\n\n' + content;
+                } else if (role === 'user' && !message.technical) {
+                    templateMessages.push({ role: message.role, content: CONTINUE_PROPMT(content, !wasStory) });
+                } else {
+                    if (role === 'assistant') {
+                        wasStory = true;
+                    }
+                    templateMessages.push({ role, content });
+                }
+            }
+
+            if (templateMessages[1]?.role !== 'user') {
+                templateMessages.splice(1, 0, { role: 'user', content: START_PROMPT });
             }
         } else {
-            if (part === '*' || part === '**') {
-                resultHTML += `</span>`;
-                isText = true;
-            } else if (part === '"') {
-                resultHTML += `"</span>`;
-                isText = true;
-            } else {
-                resultHTML += part;
+            const story = promptMessages.filter(m => m.role === 'assistant').map(m => getSwipe(m)?.content.trim()).join('\n\n');
+            const userMessages = promptMessages.filter(m => m.role === 'user');
+            const lastUserMessage = userMessages.at(-1);
+
+            let userPrompt = getSwipe(lastUserMessage)?.content;
+            if (!lastUserMessage?.technical && !isContinue && userPrompt) {
+                userPrompt = CONTINUE_PROPMT(userPrompt, story.length === 0);
+            }
+
+            if (story.length > 0) {
+                templateMessages.push({ role: 'user', content: START_PROMPT });
+                templateMessages.push({ role: 'assistant', content: story });
+            }
+
+            if (userPrompt) {
+                templateMessages.push({ role: 'user', content: userPrompt });
             }
         }
+
+        const prompt = applyChatTemplate(templateMessages, LLAMA_TEMPLATE);
+        return {
+            prompt,
+            isContinue,
+            isRegen,
+        };
     }
 
-    if (!isText) {
-        resultHTML += `</span>`;
-    }
+    export const format = (message: string): string => {
+        const replaceRegex = /([*"]\*?)/ig;
+        const splitToken = '___SPLIT_AWOORWA___';
 
-    return resultHTML;
-}
+        const preparedMessage = message.replace(replaceRegex, `${splitToken}$1${splitToken}`);
+        const parts = preparedMessage.split(splitToken);
 
-export const trimSentence = (text: string): string => {
-    let latestEnd = -1;
-    let latestPairEnd = text.length;
-    for (const end of '.!?;…*"`)}]\n') {
-        latestEnd = Math.max(latestEnd, text.lastIndexOf(end));
-    }
+        let isText = true;
+        let keepPart = true;
 
-    for (const char of '*"`') {
-        const idx = text.lastIndexOf(char);
+        let resultHTML = '';
 
-        const match = text.match(new RegExp(`[${char}]`, 'g'));
-        if (match && match.length % 2 !== 0) {
-            latestPairEnd = Math.min(latestPairEnd, idx - 1);
+        for (const part of parts) {
+
+            if (isText) {
+                if (part === '*') {
+                    isText = false;
+                    keepPart = false;
+                    resultHTML += `<span class="italic">`;
+                } else if (part === '**') {
+                    isText = false;
+                    keepPart = false;
+                    resultHTML += `<span class="bold">`;
+                } else if (part === '"') {
+                    isText = false;
+                    keepPart = true;
+                    resultHTML += `<span class="quote">"`;
+                } else {
+                    resultHTML += part;
+                }
+            } else {
+                if (part === '*' || part === '**') {
+                    resultHTML += `</span>`;
+                    isText = true;
+                } else if (part === '"') {
+                    resultHTML += `"</span>`;
+                    isText = true;
+                } else {
+                    resultHTML += part;
+                }
+            }
         }
+
+        if (!isText) {
+            resultHTML += `</span>`;
+        }
+
+        return resultHTML;
     }
 
-    latestEnd = Math.min(latestEnd, latestPairEnd);
+    export const trimSentence = (text: string): string => {
+        let latestEnd = -1;
+        let latestPairEnd = text.length;
+        for (const end of '.!?;…*"`)}]\n') {
+            latestEnd = Math.max(latestEnd, text.lastIndexOf(end));
+        }
 
-    if (latestEnd > 0) {
-        text = text.slice(0, latestEnd + 1);
+        for (const char of '*"`') {
+            const idx = text.lastIndexOf(char);
+
+            const match = text.match(new RegExp(`[${char}]`, 'g'));
+            if (match && match.length % 2 !== 0) {
+                latestPairEnd = Math.min(latestPairEnd, idx - 1);
+            }
+        }
+
+        latestEnd = Math.min(latestEnd, latestPairEnd);
+
+        if (latestEnd > 0) {
+            text = text.slice(0, latestEnd + 1);
+        }
+        return text.trimEnd();
     }
-    return text.trimEnd();
-}
+
+    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 ? { content } : s))
+                    : m.swipes
+            })
+        )
+    )
+}
\ No newline at end of file