feat: add stream response setting

Author: samolego

tools/server/webui/src/components/SettingDialog.tsx

@@ -103,6 +103,11 @@ const SETTING_SECTIONS: SettingSection[] = [
             key,
           }) as SettingFieldInput
       ),
+      {
+        type: SettingInputType.CHECKBOX,
+        label: 'Enable response streaming',
+        key: 'streamResponse',
+      },
     ],
   },
   {
@@ -171,11 +176,19 @@ const SETTING_SECTIONS: SettingSection[] = [
     ),
     fields: [
       {
-        type: SettingInputType.CHECKBOX,
-        label: 'Enable response streaming',
-        key: 'streamResponse',
+        type: SettingInputType.CUSTOM,
+        key: 'custom',
+        component: () => (
+          <div className="mt-1 mb-3 p-2 bg-base-200 rounded-md text-sm">
+            <p className="font-semibold">Important Note:</p>
+            <p className="opacity-90">
+              Response streaming must be <strong>disabled</strong> to use tool
+              calling. Individual tools (listed below) will be automatically
+              disabled if streaming is enabled.
+            </p>
+          </div>
+        ),
       },
-      // Fields will be dynamically generated based on AVAILABLE_TOOLS
       ...Array.from(AVAILABLE_TOOLS.values()).map(
         (tool: AgentTool) =>
           ({
@@ -432,13 +445,19 @@ export default function SettingDialog({
                   />
                 );
               } else if (field.type === SettingInputType.CHECKBOX) {
+                const isToolToggle =
+                  typeof field.key === 'string' &&
+                  field.key.startsWith('tool_') &&
+                  field.key.endsWith('_enabled');
+                const isDisabled = isToolToggle && localConfig.streamResponse;
                 return (
                   <SettingsModalCheckbox
                     key={key}
                     configKey={field.key}
                     value={!!localConfig[field.key]}
                     onChange={onChange(field.key)}
                     label={field.label as string}
+                    disabled={isDisabled}
                   />
                 );
               } else if (field.type === SettingInputType.CUSTOM) {
@@ -553,11 +572,13 @@ function SettingsModalCheckbox({
   value,
   onChange,
   label,
+  disabled,
 }: {
   configKey: SettKey;
   value: boolean;
   onChange: (value: boolean) => void;
-  label: string;
+  label: React.ReactElement | string;
+  disabled?: boolean;
 }) {
   return (
     <div className="flex flex-row items-center mb-2">
@@ -566,6 +587,7 @@ function SettingsModalCheckbox({
         className="toggle"
         checked={value}
         onChange={(e) => onChange(e.target.checked)}
+        disabled={disabled}
       />
       <span className="ml-4">{label || configKey}</span>
     </div>