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"

web/src/components/key-input.tsx

@@ -0,0 +1,23 @@
+import { Input, InputProps } from '@/components/ui/input';
+import { ChangeEvent, forwardRef, useCallback } from 'react';
+
+type KeyInputProps = {
+  value?: string;
+  onChange?: (value: string) => void;
+  searchValue?: string | RegExp;
+} & Omit<InputProps, 'onChange'>;
+
+export const KeyInput = forwardRef<HTMLInputElement, KeyInputProps>(
+  function KeyInput({ value, onChange, searchValue = /[^a-zA-Z0-9_]/g }, ref) {
+    const handleChange = useCallback(
+      (e: ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value ?? '';
+        const filteredValue = value.replace(searchValue, '');
+        onChange?.(filteredValue);
+      },
+      [onChange, searchValue],
+    );
+
+    return <Input value={value} onChange={handleChange} ref={ref} />;
+  },
+);