fix(tarko-agent-ui): restore fallback image upload when no runtime settings (#1619)

Author: ulivz

multimodal/tarko/agent-ui/src/standalone/chat/MessageInput/AgentOptionsSelector.tsx

@@ -23,6 +23,7 @@ interface AgentOptionsSelectorProps {
   sessionMetadata?: SessionItemMetadata;
   className?: string;
   onActiveOptionsChange?: (options: ActiveOption[]) => void;
+  onSchemaChange?: (hasOptions: boolean) => void;
   onToggleOption?: (key: string, currentValue: any) => void;
   showAttachments?: boolean;
   onFileUpload?: () => void;
@@ -128,14 +129,14 @@ const DropdownSubMenu: React.FC<DropdownSubMenuProps> = ({
   return (
     <>
       <button
-      ref={triggerRef}
-      onClick={() => !disabled && setIsOpen(!isOpen)}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      className={`group flex w-full items-center rounded-lg px-2.5 py-1.5 text-left transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-900 dark:text-gray-100 ${
-      disabled ? 'opacity-50 cursor-not-allowed' : 'hover:scale-[1.02]'
-      }`}
-      disabled={disabled}
+        ref={triggerRef}
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        className={`group flex w-full items-center rounded-lg px-2.5 py-1.5 text-left transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-900 dark:text-gray-100 ${
+          disabled ? 'opacity-50 cursor-not-allowed' : 'hover:scale-[1.02]'
+        }`}
+        disabled={disabled}
       >
         {trigger}
         <FiChevronRight className="ml-1.5 w-3.5 h-3.5 text-gray-400" />
@@ -155,6 +156,7 @@ export const AgentOptionsSelector = forwardRef<AgentOptionsSelectorRef, AgentOpt
       sessionMetadata,
       className = '',
       onActiveOptionsChange,
+      onSchemaChange,
       onToggleOption,
       showAttachments = true,
       onFileUpload,
@@ -326,24 +328,36 @@ export const AgentOptionsSelector = forwardRef<AgentOptionsSelectorRef, AgentOpt
       onActiveOptionsChange(activeOptions);
     }, [schema, currentValues, onActiveOptionsChange]);
 
-    // Don't render if in replay mode or processing
-    if (isReplayMode || isProcessingProp) {
+    // Notify parent about schema availability
+    useEffect(() => {
+      if (onSchemaChange) {
+        const hasOptions = schema?.properties && Object.keys(schema.properties).length > 0;
+        onSchemaChange(!!hasOptions);
+      }
+    }, [schema, onSchemaChange]);
+
+    // Don't render if in replay mode, processing, or no schema available
+    if (
+      isReplayMode ||
+      isProcessingProp ||
+      !schema?.properties ||
+      Object.keys(schema.properties).length === 0
+    ) {
       return null;
     }
 
-    // Always show the button, even if no schema options available
-    const options = schema?.properties
-      ? Object.entries(schema.properties).map(([key, property]) => ({
-          key,
-          property,
-          currentValue: currentValues?.[key] ?? property.default,
-        }))
-      : [];
+    // Only show the button when schema options are available
+    const options = Object.entries(schema.properties).map(([key, property]) => ({
+      key,
+      property,
+      currentValue: currentValues?.[key] ?? property.default,
+    }));
 
     const getOptionIcon = (key: string, property: any) => {
       const lowerKey = key.toLowerCase();
       const lowerTitle = (property.title || '').toLowerCase();
-      if (lowerKey.includes('browser') || lowerTitle.includes('browser')) return <TbBrowser className="w-4 h-4" />;
+      if (lowerKey.includes('browser') || lowerTitle.includes('browser'))
+        return <TbBrowser className="w-4 h-4" />;
       if (lowerKey.includes('search')) return <TbSearch className="w-4 h-4" />;
       if (lowerKey.includes('research')) return <TbBook className="w-4 h-4" />;
       if (lowerKey.includes('foo')) return <TbBulb className="w-4 h-4" />;

multimodal/tarko/agent-ui/src/standalone/chat/MessageInput/ChatInput.tsx

@@ -62,6 +62,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   const [activeAgentOptions, setActiveAgentOptions] = useState<
     Array<{ key: string; title: string; currentValue: any; displayValue?: string }>
   >([]);
+  const [hasAgentOptions, setHasAgentOptions] = useState(false);
   const agentOptionsSelectorRef = useRef<AgentOptionsSelectorRef | null>(null);
 
   const { activeSessionId, sessionMetadata } = useSession();
@@ -82,8 +83,20 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   // Clear active agent options when session changes
   useEffect(() => {
     setActiveAgentOptions([]);
+    setHasAgentOptions(false);
   }, [sessionId]);
 
+  const handleSchemaChange = useCallback((hasOptions: boolean) => {
+    setHasAgentOptions(hasOptions);
+  }, []);
+
+  const handleActiveOptionsChange = useCallback(
+    (options: Array<{ key: string; title: string; currentValue: any; displayValue?: string }>) => {
+      setActiveAgentOptions(options);
+    },
+    [],
+  );
+
   const handleToggleOption = useCallback((key: string, currentValue: any) => {
     // Use the ref to call the toggle method on AgentOptionsSelector
     if (agentOptionsSelectorRef.current) {
@@ -450,14 +463,28 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                 ref={agentOptionsSelectorRef}
                 activeSessionId={sessionId}
                 sessionMetadata={sessionMetadata}
-                onActiveOptionsChange={setActiveAgentOptions}
+                onActiveOptionsChange={handleActiveOptionsChange}
+                onSchemaChange={handleSchemaChange}
                 onToggleOption={handleToggleOption}
                 showAttachments={showAttachments}
                 onFileUpload={handleFileUpload}
                 isDisabled={isDisabled}
                 isProcessing={isProcessing}
               />
 
+              {/* Fallback image upload button when no agent options */}
+              {!hasAgentOptions && showAttachments && (
+                <button
+                  type="button"
+                  onClick={handleFileUpload}
+                  disabled={isDisabled || isProcessing}
+                  className="p-2 rounded-full text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700/30 dark:text-gray-400 transition-all duration-200 hover:scale-105 active:scale-90"
+                  title="Add Images"
+                >
+                  <FiImage size={18} />
+                </button>
+              )}
+
               {/* Active agent options tags */}
               {activeAgentOptions.length > 0 && (
                 <div className="flex flex-wrap gap-1.5">
@@ -466,7 +493,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                     const getOptionIcon = () => {
                       const lowerKey = option.key.toLowerCase();
                       const lowerTitle = option.title.toLowerCase();
-                      if (lowerKey.includes('browser') || lowerTitle.includes('browser')) return <TbBrowser className="w-3 h-3" />;
+                      if (lowerKey.includes('browser') || lowerTitle.includes('browser'))
+                        return <TbBrowser className="w-3 h-3" />;
                       if (lowerKey.includes('foo')) return <TbBulb className="w-3 h-3" />;
                       if (lowerKey.includes('search')) return <TbSearch className="w-3 h-3" />;
                       if (lowerKey.includes('research')) return <TbBook className="w-3 h-3" />;