🖥️ feat: Code Interpreter API for Non-Agent Endpoints (#6803)

* fix: Prevent parsing 'undefined' string in useLocalStorage initialization

* feat: first pass, code interpreter badge

* feat: Integrate API key authentication and default checked value in Code Interpreter Badge

* refactor: Rename showMCPServers to showEphemeralBadges and update related components, memoize values in useChatBadges

* refactor: Enhance AttachFileChat to support ephemeral agents in file attachment logic

* fix: Add baseURL configuration option to legacy function call

* refactor: Update dependency array in useDragHelpers to include handleFiles

* refactor: Update isEphemeralAgent function to accept optional endpoint parameter

* refactor: Update file handling to support ephemeral agents in AttachFileMenu and useDragHelpers

* fix: improve compatibility issues with OpenAI usage field handling in createRun function

* refactor: usage field compatibility

* fix: ensure mcp servers are no longer "selected" if mcp servers are now unavailable

client/src/components/ui/CheckboxButton.tsx

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { Checkbox, useStoreState, useCheckboxStore } from '@ariakit/react';
+import { cn } from '~/utils';
+
+export default function CheckboxButton({
+  label,
+  icon,
+  setValue,
+  className,
+  defaultChecked,
+  isCheckedClassName,
+}: {
+  label: string;
+  className?: string;
+  icon?: React.ReactNode;
+  defaultChecked?: boolean;
+  isCheckedClassName?: string;
+  setValue?: (isChecked: boolean) => void;
+}) {
+  const checkbox = useCheckboxStore();
+  const isChecked = useStoreState(checkbox, (state) => state?.value);
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    if (typeof isChecked !== 'boolean') {
+      return;
+    }
+    setValue?.(!isChecked);
+  };
+  useEffect(() => {
+    if (defaultChecked) {
+      checkbox.setValue(defaultChecked);
+    }
+  }, [defaultChecked, checkbox]);
+
+  return (
+    <Checkbox
+      store={checkbox}
+      onChange={onChange}
+      defaultChecked={defaultChecked}
+      className={cn(
+        // Base styling from MultiSelect's selectClassName
+        'group relative inline-flex items-center justify-center gap-1.5',
+        'rounded-full border border-border-medium text-sm font-medium',
+        'size-9 p-2 transition-shadow md:w-full md:p-3',
+        'bg-surface-chat shadow-sm hover:bg-surface-hover hover:shadow-md active:shadow-inner',
+
+        // Checked state styling
+        isChecked && isCheckedClassName && isCheckedClassName,
+
+        // Additional custom classes
+        className,
+      )}
+      render={<button type="button" aria-label={label} />}
+    >
+      {/* Icon if provided */}
+      {icon && <span className="icon-md text-text-primary">{icon}</span>}
+
+      {/* Show the label on larger screens */}
+      <span className="hidden truncate md:block">{label}</span>
+    </Checkbox>
+  );
+}

client/src/components/ui/MultiSelect.tsx

@@ -66,7 +66,7 @@ export default function MultiSelect<T extends string>({
   };
 
   return (
-    <div className={cn('h-full', className)}>
+    <div className={className}>
       <SelectProvider value={selectedValues} setValue={handleValueChange}>
         {label && (
           <SelectLabel className={cn('mb-1 block text-sm text-text-primary', labelClassName)}>
@@ -82,9 +82,10 @@ export default function MultiSelect<T extends string>({
             selectClassName,
             selectedValues.length > 0 && selectItemsClassName != null && selectItemsClassName,
           )}
+          onChange={(e) => e.stopPropagation()}
         >
           {selectIcon && selectIcon}
-          <span className="hidden truncate md:block">
+          <span className="mr-auto hidden truncate md:block">
             {renderSelectedValues(selectedValues, placeholder)}
           </span>
           <SelectArrow className="ml-1 hidden stroke-1 text-base opacity-75 md:block" />