Feat: Globally defined conversation variables can be selected in the operator's query variables. #10427 (#11135)

### What problem does this PR solve?

Feat: Globally defined conversation variables can be selected in the
operator's query variables. #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/jsonjoy-builder/components/schema-editor/add-field-button.tsx

@@ -1,3 +1,4 @@
+import { KeyInput } from '@/components/key-input';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -112,10 +113,10 @@ const AddFieldButton: FC<AddFieldButtonProps> = ({
                       </Tooltip>
                     </TooltipProvider>
                   </div>
-                  <Input
+                  <KeyInput
                     id={fieldNameId}
                     value={fieldName}
-                    onChange={(e) => setFieldName(e.target.value)}
+                    onChange={setFieldName}
                     placeholder={t.fieldNamePlaceholder}
                     className="font-mono text-sm w-full"
                     required

web/src/components/jsonjoy-builder/components/schema-editor/schema-property-editor.tsx

@@ -1,3 +1,4 @@
+import { KeyInput } from '@/components/key-input';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
 import { ChevronDown, ChevronRight, X } from 'lucide-react';
@@ -114,9 +115,9 @@ export const SchemaPropertyEditor: React.FC<SchemaPropertyEditorProps> = ({
           <div className="flex items-center gap-2 grow min-w-0 overflow-visible">
             <div className="flex items-center gap-2 min-w-0 grow overflow-visible">
               {isEditingName ? (
-                <Input
+                <KeyInput
                   value={tempName}
-                  onChange={(e) => setTempName(e.target.value)}
+                  onChange={setTempName}
                   onBlur={handleNameSubmit}
                   onKeyDown={(e) => e.key === 'Enter' && handleNameSubmit()}
                   className="h-8 text-sm font-medium min-w-[120px] max-w-full z-10"