Support Shift+Enter for newlines in AI chat form

Author: noisysocks

special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js

@@ -1,6 +1,8 @@
 import { h } from 'preact';
 import { useContext, useRef } from 'preact/hooks';
+import { eventToTarget } from '../../../../../shared/handlers';
 import { ArrowRightIcon } from '../../components/Icons';
+import { usePlatformName } from '../../settings.provider';
 import { useTypedTranslationWith } from '../../types';
 import styles from './AiChatForm.module.css';
 import { OmnibarContext } from './OmnibarProvider';
@@ -17,19 +19,53 @@ import { OmnibarContext } from './OmnibarProvider';
 export function AiChatForm({ chat, setChat }) {
     const { submitChat } = useContext(OmnibarContext);
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
+    const platformName = usePlatformName();
 
     const formRef = useRef(/** @type {HTMLFormElement|null} */ (null));
     const textAreaRef = useRef(/** @type {HTMLTextAreaElement|null} */ (null));
 
+    const disabled = chat.length === 0;
+
     /** @type {(event: SubmitEvent) => void} */
     const onSubmit = (event) => {
         event.preventDefault();
+        if (disabled) return;
         submitChat({
             chat,
             target: 'same-tab',
         });
     };
 
+    /** @type {(event: KeyboardEvent) => void} */
+    const onKeyDown = (event) => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            if (disabled) return;
+            submitChat({
+                chat,
+                target: eventToTarget(event, platformName),
+            });
+        }
+    };
+
+    /** @type {(event: import('preact').JSX.TargetedEvent<HTMLTextAreaElement>) => void} */
+    const onChange = (event) => {
+        const form = formRef.current;
+        const textArea = event.currentTarget;
+
+        const { paddingTop, paddingBottom } = window.getComputedStyle(textArea);
+        textArea.style.height = 'auto'; // Reset height
+        textArea.style.height = `calc(${textArea.scrollHeight}px - ${paddingTop} - ${paddingBottom})`;
+
+        if (textArea.scrollHeight > textArea.clientHeight) {
+            form?.classList.add(styles.hasScroll);
+        } else {
+            form?.classList.remove(styles.hasScroll);
+        }
+
+        setChat(textArea.value);
+    };
+
     return (
         <form ref={formRef} class={styles.form} onClick={() => textAreaRef.current?.focus()} onSubmit={onSubmit}>
             <textarea
@@ -40,22 +76,8 @@ export function AiChatForm({ chat, setChat }) {
                 aria-label={t('aiChatForm_placeholder')}
                 autoComplete="off"
                 rows={1}
-                onChange={(event) => {
-                    const form = formRef.current;
-                    const textArea = event.currentTarget;
-
-                    const { paddingTop, paddingBottom } = window.getComputedStyle(textArea);
-                    textArea.style.height = 'auto'; // Reset height
-                    textArea.style.height = `calc(${textArea.scrollHeight}px - ${paddingTop} - ${paddingBottom})`;
-
-                    if (textArea.scrollHeight > textArea.clientHeight) {
-                        form?.classList.add(styles.hasScroll);
-                    } else {
-                        form?.classList.remove(styles.hasScroll);
-                    }
-
-                    setChat(textArea.value);
-                }}
+                onKeyDown={onKeyDown}
+                onChange={onChange}
             />
             <div class={styles.buttons}>
                 <button

special-pages/pages/new-tab/app/omnibar/components/Container.module.css

@@ -12,6 +12,10 @@
     position: relative;
     transition: height 200ms ease;
 
+    @media (prefers-reduced-motion: reduce) {
+        transition: none;
+    }
+
     &:focus-within {
         border-radius: 14px;
         box-shadow: 0 0 0 2px var(--ntp-color-primary), 0 0 0 4px rgba(57, 105, 239, 0.2);

special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.module.css

@@ -38,4 +38,8 @@
     position: absolute;
     top: 0;
     transition: translate 200ms ease;
+
+    @media (prefers-reduced-motion: reduce) {
+        transition: none;
+    }
 }

special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.page.js

@@ -132,4 +132,12 @@ export class OmnibarPage {
         const calls = await this.ntp.mocks.waitForCallCount({ method, count: 1 });
         expect(calls[0].payload.params).toEqual(expectedParams);
     }
+
+    /**
+     * @param {string} method
+     */
+    async expectMethodNotCalled(method) {
+        const calls = await this.ntp.mocks.outgoing({ names: [method] });
+        expect(calls).toHaveLength(0);
+    }
 }

special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.spec.js

@@ -49,6 +49,28 @@ test.describe('omnibar widget', () => {
         });
     });
 
+    test('AI chat form shift+enter creates new line', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        const omnibar = new OmnibarPage(ntp);
+        await ntp.reducedMotion();
+
+        await ntp.openPage({ additional: { omnibar: true } });
+        await omnibar.ready();
+
+        await omnibar.aiTab().click();
+        await omnibar.expectMode('ai');
+
+        await omnibar.chatInput().fill('first line');
+        await omnibar.chatInput().press('Shift+Enter');
+        await omnibar.chatInput().pressSequentially('second line');
+
+        // Check that the textarea contains both lines with a newline
+        await expect(omnibar.chatInput()).toHaveValue('first line\nsecond line');
+
+        // Verify that the form was not submitted (no method call should have been made)
+        await omnibar.expectMethodNotCalled('omnibar_submitChat');
+    });
+
     test('mode switching preserves query state', async ({ page }, workerInfo) => {
         const ntp = NewtabPage.create(page, workerInfo);
         const omnibar = new OmnibarPage(ntp);