feat: add BackgroundToggle component with state management and tooltip handling

Author: nickytonline

src/components/BackgroundToggle.stories.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react'
+import { BackgroundToggle } from './BackgroundToggle'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta: Meta<typeof BackgroundToggle> = {
+  title: 'UI/BackgroundToggle',
+  component: BackgroundToggle,
+  tags: ['autodocs'],
+  argTypes: {
+    selectedModel: {
+      control: 'select',
+      options: ['gpt-4o', 'gpt-4.1', 'gpt-3.5-turbo', 'claude-3-opus'],
+      defaultValue: 'gpt-4o',
+    },
+    disabled: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    maxJobsReached: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof BackgroundToggle>
+
+const Template = (args: any) => {
+  const [useBackground, setUseBackground] = useState(args.useBackground ?? false)
+  return (
+    <BackgroundToggle
+      {...args}
+      useBackground={useBackground}
+      onToggle={setUseBackground}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: Template,
+  args: {
+    useBackground: false,
+    selectedModel: 'gpt-4o',
+    disabled: false,
+    maxJobsReached: false,
+  },
+}
+
+export const Enabled: Story = {
+  render: Template,
+  args: {
+    useBackground: true,
+    selectedModel: 'gpt-4o',
+    disabled: false,
+    maxJobsReached: false,
+  },
+}
+
+export const Disabled: Story = {
+  render: Template,
+  args: {
+    useBackground: false,
+    selectedModel: 'gpt-4o',
+    disabled: true,
+    maxJobsReached: false,
+  },
+}
+
+export const UnsupportedModel: Story = {
+  render: Template,
+  args: {
+    useBackground: false,
+    selectedModel: 'gpt-3.5-turbo',
+    disabled: false,
+    maxJobsReached: false,
+  },
+}
+
+export const MaxJobsReached: Story = {
+  render: Template,
+  args: {
+    useBackground: false,
+    selectedModel: 'gpt-4o',
+    disabled: false,
+    maxJobsReached: true,
+  },
+}
+
+export const UnsupportedModelWithMaxJobs: Story = {
+  render: Template,
+  args: {
+    useBackground: false,
+    selectedModel: 'claude-3-opus',
+    disabled: false,
+    maxJobsReached: true,
+  },
+}

src/components/BackgroundToggle.tsx

@@ -0,0 +1,40 @@
+import { Clock } from 'lucide-react'
+import { ToolToggle } from './ToolToggle'
+import { isBackgroundSupported } from '@/lib/background-supported-models'
+
+interface BackgroundToggleProps {
+  useBackground: boolean
+  onToggle: (enabled: boolean) => void
+  selectedModel: string
+  disabled?: boolean
+  maxJobsReached?: boolean
+}
+
+export function BackgroundToggle({
+  useBackground,
+  onToggle,
+  selectedModel,
+  disabled = false,
+  maxJobsReached = false,
+}: BackgroundToggleProps) {
+  const isSupported = isBackgroundSupported(selectedModel)
+
+  let tooltip = `Run requests in the background to continue using the chat interface.${!isSupported ? ` Not supported by ${selectedModel}` : ''}`
+
+  if (maxJobsReached) {
+    tooltip =
+      'Maximum number of concurrent background jobs reached. Please wait for existing jobs to complete.'
+  }
+
+  return (
+    <ToolToggle
+      isSelected={useBackground}
+      onToggle={onToggle}
+      isSupported={isSupported && !maxJobsReached}
+      icon={<Clock className="h-4 w-4" />}
+      label="Run in background"
+      tooltip={tooltip}
+      disabled={disabled || !isSupported || maxJobsReached}
+    />
+  )
+}

src/lib/background-supported-models.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { isBackgroundSupported } from './background-supported-models'
+
+describe('isBackgroundSupported', () => {
+  it('returns true for exact model matches', () => {
+    expect(isBackgroundSupported('gpt-4o')).toBe(true)
+    expect(isBackgroundSupported('gpt-4.1')).toBe(true)
+    expect(isBackgroundSupported('o3')).toBe(true)
+  })
+
+  it('returns true for models that start with supported prefixes', () => {
+    expect(isBackgroundSupported('gpt-4o-2024-05-13')).toBe(true)
+    expect(isBackgroundSupported('gpt-4.1-preview')).toBe(true)
+    expect(isBackgroundSupported('o3-mini')).toBe(true)
+  })
+
+  it('is case insensitive', () => {
+    expect(isBackgroundSupported('GPT-4O')).toBe(true)
+    expect(isBackgroundSupported('Gpt-4.1')).toBe(true)
+    expect(isBackgroundSupported('O3')).toBe(true)
+  })
+
+  it('returns false for unsupported models', () => {
+    expect(isBackgroundSupported('gpt-3.5-turbo')).toBe(false)
+    expect(isBackgroundSupported('claude-3-sonnet')).toBe(false)
+    expect(isBackgroundSupported('llama-2')).toBe(false)
+    expect(isBackgroundSupported('random-model')).toBe(false)
+  })
+
+  it('returns false for empty string', () => {
+    expect(isBackgroundSupported('')).toBe(false)
+  })
+
+  it('handles partial matches correctly', () => {
+    expect(isBackgroundSupported('gpt-4')).toBe(false)
+    expect(isBackgroundSupported('gpt')).toBe(false)
+    expect(isBackgroundSupported('o')).toBe(false)
+  })
+})

src/lib/background-supported-models.ts

@@ -0,0 +1,14 @@
+const BACKGROUND_SUPPORTED_MODELS = [
+  'gpt-4o',
+  'gpt-4.1',
+  'gpt-4.1-mini',
+  'gpt-4.1-nano',
+  'o3',
+  'o4-mini',
+]
+
+export function isBackgroundSupported(model: string): boolean {
+  return BACKGROUND_SUPPORTED_MODELS.some((m) =>
+    model.toLowerCase().startsWith(m.toLowerCase()),
+  )
+}