AIStory: fix scrolls

src/games/ai-story/components/chat.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useRef } from "preact/hooks";
+import { useContext, useEffect, useRef } from "preact/hooks";
 import { StateContext } from "../contexts/state";
 import { Message } from "./message/message";
 import { MessageTools } from "../tools/messages";
@@ -18,16 +18,13 @@ export const Chat = () => {
         DOMTools.scrollDown(chatRef.current);
     }, [messages.length, lastMessageContent]);
 
-    const handleScroll = useCallback(() => DOMTools.scrollDown(chatRef.current, false), []);
-
     return (
         <div class="chat" ref={chatRef}>
-            {messages.map((m, i, ms) => (
+            {messages.map((m, i) => (
                 <Message
                     message={m}
                     key={i} index={i}
                     isLastUser={i === lastUserId} isLastAssistant={i === lastAssistantId}
-                    onNeedScroll={i === ms.length - 1 ? handleScroll : undefined}
                 />
             ))}
         </div>

src/games/ai-story/components/header/connectionEditor.tsx

@@ -73,6 +73,10 @@ export const ConnectionEditor = ({ connection, setConnection }: IProps) => {
         }
     }, [setConnection, connectionUrl, apiKey, modelName, instruct]);
 
+    const handleSetInstruct = useInputCallback((instruct: string) => {
+        setConnection({...connection, instruct});
+    }, [setConnection, connection]);
+
     const handleBlurUrl = useCallback(() => {
         const regex = /^(?:http(s?):\/\/)?(.*?)\/?$/i;
         const url = connectionUrl.replace(regex, 'http$1://$2');
@@ -97,7 +101,7 @@ export const ConnectionEditor = ({ connection, setConnection }: IProps) => {
                 <option value='kobold'>Kobold CPP</option>
                 <option value='horde'>Horde</option>
             </select>
-            <select value={instruct} onChange={setInstruct} title='Instruct template'>
+            <select value={instruct} onChange={handleSetInstruct} title='Instruct template'>
                 {modelName && modelTemplate && <optgroup label='Native model template'>
                     <option value={modelTemplate} title='Native for model'>{modelName}</option>
                 </optgroup>}

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

@@ -12,10 +12,9 @@ interface IProps {
     index: number;
     isLastUser: boolean;
     isLastAssistant: boolean;
-    onNeedScroll?: () => void;
 }
 
-export const Message = ({ message, index, isLastUser, isLastAssistant, onNeedScroll }: IProps) => {
+export const Message = ({ message, index, isLastUser, isLastAssistant }: IProps) => {
     const { messages, editMessage, editSummary, deleteMessage, setCurrentSwipe, setMessages, continueMessage } = useContext(StateContext);
     const [editing, setEditing] = useState(false);
     const [editedMessage, setEditedMessage] = useInputState('');
@@ -27,14 +26,10 @@ export const Message = ({ message, index, isLastUser, isLastAssistant, onNeedScr
     const summary = swipe?.summary;
     const htmlContent = useMemo(() => MessageTools.format(content ?? ''), [content]);
 
-    useEffect(() => {
-        setTimeout(() => onNeedScroll?.(), 50);
-    }, [editedMessage, editing]);
-
     const handleEnableEdit = useCallback(() => {
         setEditing(true);
         setEditedMessage(content ?? '');
-    }, [content, onNeedScroll]);
+    }, [content]);
 
     const handleSaveEdit = useCallback(() => {
         editMessage(index, editedMessage.trim());

src/games/ai-story/tools/connection.ts

@@ -216,13 +216,20 @@ export namespace Connection {
                         text = await request();
 
                         if (text) {
+                            for (const sequence of requestData.params.stop_sequence) {
+                                const stopIdx = text.indexOf(sequence);
+                                if (stopIdx >= 0) {
+                                    text = text.slice(0, stopIdx);
+                                }
+                            }
+
                             const locaseText = text.toLowerCase();
                             let unsloppedText = text;
                             for (const ban of bannedTokens) {
                                 const slopIdx = locaseText.indexOf(ban.toLowerCase());
                                 if (slopIdx >= 0) {
                                     console.log(`[horde] slop '${ban}' detected at ${slopIdx}`);
-                                    unsloppedText = unsloppedText.slice(0, slopIdx);
+                                    unsloppedText = unsloppedText.slice(0, slopIdx).trimEnd();
                                 }
                             }