fix(frontend): disallow empty message

frontend/app/jest.polyfills.js

@@ -30,4 +30,16 @@ Object.defineProperties(globalThis, {
   FormData: { value: FormData },
   Request: { value: Request },
   Response: { value: Response },
-})
+})
+
+class ResizeObserver {
+  observe() {
+  }
+
+  disconnect() {
+  }
+}
+
+Object.defineProperties(globalThis, {
+  ResizeObserver: { value: ResizeObserver }
+})

frontend/app/src/components/chat/chat-controller.ts

@@ -149,6 +149,10 @@ export class ChatController extends EventEmitter<ChatControllerEventsMap> {
       throw new Error('previous not finished.');
     }
 
+    if (!params.content.trim()) {
+      throw new Error('Empty message');
+    }
+
     this._gtagFn('event', 'tidbai.events.message-start', {
       'tidbai_appending_message': !!this.chat?.id,
     });

frontend/app/src/components/chat/conversation.test.tsx

@@ -0,0 +1,33 @@
+import { Conversation } from '@/components/chat/conversation';
+import { trigger } from '@/lib/react';
+import { act, render, screen } from '@testing-library/react';
+
+test('should disabled when input is empty', async () => {
+  render(<Conversation chat={undefined} history={[]} open />);
+
+  const { button, textarea } = await act(async () => {
+    const textarea = await screen.findByPlaceholderText('Input your question here...') as HTMLTextAreaElement;
+    const button = await screen.findByRole('button') as HTMLButtonElement;
+
+    return { button, textarea };
+  });
+  act(() => {
+    trigger(textarea as HTMLTextAreaElement, textarea.constructor as any, '');
+  });
+  expect(button.disabled).toBe(true);
+
+  act(() => {
+    trigger(textarea as HTMLTextAreaElement, textarea.constructor as any, ' ');
+  });
+  expect(button.disabled).toBe(true);
+
+  act(() => {
+    trigger(textarea as HTMLTextAreaElement, textarea.constructor as any, ' \t');
+  });
+  expect(button.disabled).toBe(true);
+
+  act(() => {
+    trigger(textarea as HTMLTextAreaElement, textarea.constructor as any, 'foo');
+  });
+  expect(button.disabled).toBe(false);
+});

frontend/app/src/components/chat/conversation.tsx

@@ -8,7 +8,7 @@ import { MessageInput } from '@/components/chat/message-input';
 import { SecuritySettingContext, withReCaptcha } from '@/components/security-setting-provider';
 import { useSize } from '@/components/use-size';
 import { cn } from '@/lib/utils';
-import { type ChangeEvent, type FormEvent, type ReactNode, useContext, useRef, useState } from 'react';
+import { type ChangeEvent, type FormEvent, type ReactNode, useContext, useState } from 'react';
 
 export interface ConversationProps {
   chatId?: string;
@@ -59,6 +59,7 @@ export function Conversation ({ open, chat, chatId, history, placeholder, preven
   };
 
   const disabled = !!postState.params;
+  const actionDisabled = disabled || !input.trim();
 
   return (
     <ChatControllerProvider controller={controller}>
@@ -71,7 +72,7 @@ export function Conversation ({ open, chat, chatId, history, placeholder, preven
         <div className="h-24"></div>
       </div>
       {size && open && <form className={cn('block h-max p-4 fixed bottom-0', preventShiftMessageInput && 'absolute pb-0')} onSubmit={submitWithReCaptcha} style={{ left: preventShiftMessageInput ? 0 : size.x, width: size.width }}>
-        <MessageInput inputRef={setInputElement} className="w-full transition-all" disabled={disabled} inputProps={{ value: input, onChange: handleInputChange, disabled }} />
+        <MessageInput inputRef={setInputElement} className="w-full transition-all" disabled={disabled} actionDisabled={actionDisabled} inputProps={{ value: input, onChange: handleInputChange, disabled }} />
       </form>}
     </ChatControllerProvider>
   );

frontend/app/src/components/chat/message-input.tsx

@@ -15,6 +15,7 @@ import useSWR from 'swr';
 export interface MessageInputProps {
   className?: string,
   disabled?: boolean,
+  actionDisabled?: boolean,
   inputRef?: Ref<HTMLTextAreaElement>,
   inputProps?: TextareaAutosizeProps,
   engine?: string,
@@ -24,19 +25,18 @@ export interface MessageInputProps {
 export function MessageInput ({
   className,
   disabled,
+  actionDisabled,
   inputRef,
   inputProps,
   engine,
   onEngineChange,
 }: MessageInputProps) {
   const auth = useAuth();
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const [empty, setEmpty] = useState(true);
 
   const onChangeRef = useRef(inputProps?.onChange);
   onChangeRef.current = inputProps?.onChange;
   const handleChange = useCallback((ev: ChangeEvent<HTMLTextAreaElement>) => {
-    setEmpty(!ev.currentTarget.value.trim());
     onChangeRef.current?.(ev);
   }, []);
 
@@ -48,7 +48,7 @@ export function MessageInput ({
       <TextareaAutosize
         placeholder="Input your question here..."
         onKeyDown={e => {
-          if (!e.nativeEvent.isComposing && isHotkey('mod+Enter', e) && !disabled) {
+          if (!e.nativeEvent.isComposing && isHotkey('mod+Enter', e) && !actionDisabled) {
             e.preventDefault();
             buttonRef.current?.click();
           }
@@ -74,7 +74,7 @@ export function MessageInput ({
           ))}
         </SelectContent>
       </Select>}
-      <Button size="icon" className="rounded-full flex-shrink-0 w-8 h-8 p-2" disabled={empty || disabled} ref={buttonRef}>
+      <Button size="icon" className="rounded-full flex-shrink-0 w-8 h-8 p-2" disabled={actionDisabled || disabled} ref={buttonRef}>
         <ArrowRightIcon className="w-full h-full" />
       </Button>
     </div>