From 0ed0e39c350c21829b5a18e50e9b4b9061ec0d6c Mon Sep 17 00:00:00 2001
From: hzhang <hzhang@hangman-lab.top>
Date: Fri, 16 May 2025 15:56:36 +0100
Subject: [PATCH] improve: only show custom headers when transportType is sse

---
 client/src/components/Sidebar.tsx | 113 +++++++++++++++---------------
 1 file changed, 58 insertions(+), 55 deletions(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index c5fad18..02d30a5 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -362,7 +362,64 @@ const Sidebar = ({
               </div>
             </>
           )}
+          {transportType === "sse" && (
+              <div className="space-y-2">
+                <Button
+                    variant="outline"
+                    onClick={() => setShowCustomHeaders(!showCustomHeaders)}
+                    className="flex items-center w-full"
+                    data-testid="custom-headers-button"
+                    aria-expanded={showCustomHeaders}
+                >
+                  {showCustomHeaders ? (
+                      <ChevronDown className="w-4 h-4 mr-2" />
+                  ) : (
+                      <ChevronRight className="w-4 h-4 mr-2" />
+                  )}
+                  Custom Headers
+                </Button>
+                {showCustomHeaders && (
+                    <div className="space-y-2">
+                      {customHeaders.map((header, index) => (
+                          <div key={index} className="space-y-2">
+                            <label className="text-sm font-medium">Header Name</label>
+                            <Input
+                                placeholder="Header Name"
+                                value={header[0]}
+                                onChange={(e) => updateCustomHeader(index, 'key', e.target.value)}
+                                className="font-mono"
+                            />
+                            <label className="text-sm font-medium">Header Value</label>
+                            <Input
+                                placeholder="Header Value"
+                                value={header[1]}
+                                onChange={(e) => updateCustomHeader(index, 'value',  e.target.value)}
+                                className="font-mono"
+                            />
+                            <Button
+                                variant="destructive"
+                                size="sm"
+                                onClick={() => removeCustomHeader(index)}
+                                className="w-full"
+                            >
+                              Remove Header
+                            </Button>
+                          </div>
+                      ))}
+                      <Button
+                          variant="outline"
+                          className="w-full mt-2"
+                          onClick={() => {
+                            setCustomHeaders([ ...customHeaders, ["", ""]]);
+                          }}
+                      >
+                        Add Custom Header
+                      </Button>
+                    </div>
+                )}
+              </div>
 
+          )}
           {transportType === "stdio" && (
             <div className="space-y-2">
               <Button
@@ -743,61 +800,7 @@ const Sidebar = ({
             )}
           </div>
 
-          <div className="space-y-2">
-            <Button
-              variant="outline"
-              onClick={() => setShowCustomHeaders(!showCustomHeaders)}
-              className="flex items-center w-full"
-              data-testid="custom-headers-button"
-              aria-expanded={showCustomHeaders}
-            >
-              {showCustomHeaders ? (
-                <ChevronDown className="w-4 h-4 mr-2" />
-              ) : (
-                <ChevronRight className="w-4 h-4 mr-2" />
-              )}
-              Custom Headers
-            </Button>
-            {showCustomHeaders && (
-              <div className="space-y-2">
-                {customHeaders.map((header, index) => (
-                  <div key={index} className="space-y-2">
-                    <label className="text-sm font-medium">Header Name</label>
-                    <Input
-                      placeholder="Header Name"
-                      value={header[0]}
-                      onChange={(e) => updateCustomHeader(index, 'key', e.target.value)}
-                      className="font-mono"
-                    />
-                    <label className="text-sm font-medium">Header Value</label>
-                    <Input
-                      placeholder="Header Value"
-                      value={header[1]}
-                      onChange={(e) => updateCustomHeader(index, 'value',  e.target.value)}
-                      className="font-mono"
-                    />
-                    <Button
-                      variant="destructive"
-                      size="sm"
-                      onClick={() => removeCustomHeader(index)}
-                      className="w-full"
-                    >
-                      Remove Header
-                    </Button>
-                  </div>
-                ))}
-                <Button
-                  variant="outline"
-                  className="w-full mt-2"
-                  onClick={() => {
-                    setCustomHeaders([ ...customHeaders, ["", ""]]);
-                  }}
-                >
-                  Add Custom Header
-                </Button>
-              </div>
-            )}
-          </div>
+
         </div>
       </div>
       <div className="p-4 border-t">