fix: allow sample messages to be either string or array

Author: hughlv

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

@@ -5,15 +5,12 @@ import { Icons } from '@/components/icons';
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { cn } from '@/lib/utils';
-import { Chat } from '@/store/chats';
 import { useChat, useChats } from '@/hooks/use-chats';
 import { toast } from '@/hooks/use-toast';
-import { Badge } from '../ui/badge';
 
 interface ChatInputProps {
   chatId: number;
-  onSubmit: (message: string) => void;
-  onAbort?: () => void;
+  onSend: (message: string) => void;
   onReset?: () => void;
   loading?: boolean;
   disabled?: boolean;
@@ -23,8 +20,7 @@ interface ChatInputProps {
 
 export const ChatInput = ({
   chatId,
-  onSubmit,
-  onAbort,
+  onSend,
   onReset,
   loading,
   disabled,
@@ -49,15 +45,14 @@ export const ChatInput = ({
   const handleSubmit = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault();
-      if (loading || disabled) return;
+      setMessage('');
       if (chat?.status === 'wait_for_human_input') {
         await handleHumanInput(message);
       } else {
-        onSubmit(message);
+        onSend(message);
       }
-      setMessage('');
     },
-    [message, loading, disabled, onSubmit, handleHumanInput]
+    [message, onSend, handleHumanInput]
   );
 
   const handleKeyDown = useCallback(
@@ -175,34 +170,41 @@ export const ChatInput = ({
             <>
               <Button
                 variant="outline"
-                size="icon"
-                className="h-7 w-7"
+                size="sm"
+                className="h-7"
                 onClick={() => handleHumanInput('\n')}
               >
+                enter
                 <Icons.enter className="w-4 h-4" />
               </Button>
               <Button
                 variant="outline"
-                size="icon"
-                className="h-7 w-7"
+                size="sm"
+                className="h-7"
                 onClick={() => handleHumanInput('exit')}
               >
+                exit
                 <Icons.exit className="w-4 h-4" />
               </Button>
             </>
           )}
           <Button
-            variant="default"
             size="icon"
             disabled={
-              (!message.trim() && chat?.status !== 'wait_for_human_input') ||
               disabled ||
-              isResetting
+              isResetting ||
+              chat?.status === 'running' ||
+              (!message.trim() && chat?.status !== 'wait_for_human_input')
             }
             className="h-7 w-7"
-            onClick={chat?.status !== 'ready' ? handleAbort : handleSubmit}
+            onClick={
+              chat?.status === 'running' ||
+              chat?.status === 'wait_for_human_input'
+                ? handleAbort
+                : handleSubmit
+            }
           >
-            {isUpdating ? (
+            {chat?.status === 'running' ? (
               <Icons.stop className="w-4 h-4 text-red-500" />
             ) : (
               <Icons.send className="w-4 h-4" />

frontend/src/components/chat/chat-pane.tsx

@@ -24,7 +24,6 @@ export const ChatPane = ({ projectId, chatId }: ChatPaneProps) => {
   const { chat, chatSource, isLoading: isLoadingChat } = useChat(currentChatId);
   const { createChat, isCreating } = useChats();
   const { toast } = useToast();
-  const [status, setStatus] = useState('ready');
   const [messages, setMessages] = useState<any[]>([]);
   const [isLoadingMessages, setIsLoadingMessages] = useState(false);
   const isFirstRender = useRef(true);
@@ -56,27 +55,11 @@ export const ChatPane = ({ projectId, chatId }: ChatPaneProps) => {
   }, [setMessages, chatId]);
 
   // Fetch chat status
-  const fetchChatStatus = useCallback(async () => {
-    if (chatId === -1) return;
-    const { data, error } = await supabase
-      .from('chats')
-      .select('status')
-      .eq('id', chatId)
-      .single();
-
-    if (error && error.code !== 'PGRST116') {
-      console.error('Error fetching chat status:', error);
-    } else if (data) {
-      setStatus(data.status);
-    }
-  }, [setStatus, chatId]);
-
   useEffect(() => {
     setCurrentChatId(chatId);
     if (chatId === -1) return;
 
     fetchMessages();
-    fetchChatStatus();
 
     // Subscribe to chat_messages
     const messagesChannel: RealtimeChannel = supabase
@@ -181,11 +164,10 @@ export const ChatPane = ({ projectId, chatId }: ChatPaneProps) => {
         <div className="relative flex flex-col gap-1 w-full max-w-4xl mx-auto p-2 pt-0">
           <ChatInput
             chatId={chatId}
-            onSubmit={handleSend}
+            onSend={handleSend}
             onReset={handleReset}
             disabled={true}
             className="w-full"
-            sampleMessages={['sample message']}
           />
         </div>
       </div>
@@ -208,7 +190,10 @@ export const ChatPane = ({ projectId, chatId }: ChatPaneProps) => {
   const config = chatSource?.flow?.nodes?.find(
     (node: any) => node.type === 'initializer'
   );
-  const sampleMessages = config?.data?.sample_messages?.split('\n') ?? [];
+  let sampleMessages = config?.data?.sample_messages; // string or array
+  if (sampleMessages && typeof sampleMessages === 'string') {
+    sampleMessages = sampleMessages.split('\n');
+  }
 
   return (
     <div className="flex flex-col w-full h-full bg-muted">
@@ -236,10 +221,9 @@ export const ChatPane = ({ projectId, chatId }: ChatPaneProps) => {
       <div className="relative flex flex-col gap-1 w-full max-w-4xl mx-auto p-2 pt-0">
         <ChatInput
           chatId={chatId}
-          onSubmit={handleSend}
+          onSend={handleSend}
           onReset={handleReset}
-          loading={status === 'running'}
-          disabled={status === 'failed' || currentChatId === -1}
+          disabled={currentChatId === -1}
           className="w-full"
           sampleMessages={sampleMessages}
         />