AIStory: add blocking ui on generation

src/games/ai/assets/style.css

@@ -53,6 +53,12 @@ button {
     background-color: var(--backgroundColor);
     color: var(--color);
     cursor: pointer;
+    user-select: none;
+
+    &.disabled {
+        pointer-events: none;
+        opacity: 0.5;
+    }
 }
 
 body {

src/games/ai/components/input.tsx

@@ -7,6 +7,8 @@ export const Input = () => {
     const { input, setInput, addMessage, continueMessage } = useContext(StateContext);
     const { generating } = useContext(LLMContext);
 
+    console.log({generating});
+
     const handleChange = useCallback((e: Event) => {
         if (e.target instanceof HTMLTextAreaElement) {
             setInput(e.target.value);
@@ -36,7 +38,7 @@ export const Input = () => {
     return (
         <div class="chat-input">
             <textarea onInput={handleChange} onKeyDown={handleKeyDown} value={input} />
-            <button onClick={handleSend} disabled={generating}>{input ? 'Send' : 'Continue'}</button>
+            <button onClick={handleSend} class={`${generating ? 'disabled': ''}`}>{input ? 'Send' : 'Continue'}</button>
         </div>
     );
 }

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

@@ -27,17 +27,22 @@ export const MiniChat = ({ history = [], buttons = {}, open, onClose }: IProps)
         ref.current?.querySelectorAll('textarea').forEach(height ? DOMTools.fixHeight : DOMTools.scrollDown);
     }, []);
 
+    const handleInit = useCallback((force = false) => {
+        if (force || confirm('Clear chat?')) {
+            setMessages([MessageTools.create('', 'user', true)]);
+        }
+    }, []);
+
     useEffect(() => {
         fitTextareas();
     }, [messages]);
 
     useEffect(() => {
+        if (messages.length === 0) {
+            handleInit(true);
+        }
         DOMTools.scrollDown(ref.current);
-    }, [messages.length]);
+    }, [messages.length, handleInit]);
-
-    useEffect(() => {
-        setMessages([MessageTools.create('', 'user', true)]);
-    }, [open])
 
     const handleGenerate = useCallback(async () => {
         if (messages.length > 0 && !generating) {
@@ -97,11 +102,18 @@ export const MiniChat = ({ history = [], buttons = {}, open, onClose }: IProps)
                 </div>
             </div>
             <div class={styles.buttons}>
-                <button onClick={handleGenerate} disabled={generating}>
+                <button onClick={handleGenerate} class={`${generating ? 'disabled' : ''}`}>
                     Generate
                 </button>
-                {answer && Object.entries(buttons).map(([label, onClick], i) => (
+                <button onClick={() => handleInit()} class={`${generating ? 'disabled' : ''}`}>
-                    <button key={i} onClick={() => onClick(answer)}>
+                    Clear
+                </button>
+                {Object.entries(buttons).map(([label, onClick], i) => (
+                    <button
+                        key={i}
+                        onClick={() => onClick(answer ?? '')}
+                        class={`${(generating || !answer) ? 'disabled' : ''}`}
+                    >
                         {label}
                     </button>
                 ))}

src/games/ai/contexts/llm.tsx

@@ -129,7 +129,7 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
     }), [connectionUrl]);
 
     useEffect(() => void (async () => {
-        if (triggerNext && !generating) {
+        if (triggerNext && !generating.value) {
             setTriggerNext(false);
 
             let messageId = messages.length - 1;
@@ -152,7 +152,7 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
 
             MessageTools.playReady();
         }
-    })(), [triggerNext, messages, generating]);
+    })(), [triggerNext, messages, generating.value]);
 
     const rawContext: IContext = {
        generating: generating.value,