feat: option web search tool (#129)

Adds the optional OpenAI web search tool.

Closes #125

![CleanShot 2025-07-10 at 17 36
43](https://github.com/user-attachments/assets/6dc6d80c-0963-4496-85c2-b703f08fd584)

Author: nickytonline

src/components/BotMessage.tsx

@@ -41,10 +41,14 @@ export function BotMessage({ message, fileAnnotations = [] }: BotMessageProps) {
   const processedContent = message.content
 
   // Separate image and non-image files
-  const imageFiles = fileAnnotations.filter((annotation) =>
+  // Only treat annotations with type 'file' or 'image' as downloadable
+  const fileLikeAnnotations = fileAnnotations.filter(
+    (annotation) => annotation.type === 'file' || annotation.type === 'image',
+  )
+  const imageFiles = fileLikeAnnotations.filter((annotation) =>
     isImageFile(annotation.filename),
   )
-  const otherFiles = fileAnnotations.filter(
+  const otherFiles = fileLikeAnnotations.filter(
     (annotation) => !isImageFile(annotation.filename),
   )
 

src/components/Chat.tsx

@@ -15,6 +15,7 @@ import { useUser } from '../contexts/UserContext'
 import { Button } from './ui/button'
 import { MessageSquarePlus } from 'lucide-react'
 import { CodeInterpreterToggle } from './CodeInterpreterToggle'
+import { WebSearchToggle } from './WebSearchToggle'
 import { ModelSelect } from './ModelSelect'
 import { BotThinking } from './BotThinking'
 import { BotError } from './BotError'
@@ -23,6 +24,7 @@ import { CodeInterpreterMessage } from './CodeInterpreterMessage'
 import type { AnnotatedFile } from '@/lib/utils/code-interpreter'
 import { isCodeInterpreterSupported } from '@/lib/utils/prompting'
 import { useHasMounted } from '@/hooks/useHasMounted'
+import { WebSearchMessage } from './WebSearchMessage'
 
 type StreamEvent =
   | {
@@ -103,6 +105,15 @@ type StreamEvent =
       message: string
       details?: unknown
     }
+  | {
+      type: 'web_search'
+      id: string
+      status: 'in_progress' | 'searching' | 'completed' | 'failed' | 'result'
+      query?: string
+      results?: Array<{ title: string; url: string; snippet?: string }>
+      error?: string
+      raw?: unknown
+    }
 
 const getToolStatus = (
   toolType: string,
@@ -149,6 +160,9 @@ const getEventKey = (event: StreamEvent | Message, idx: number): string => {
       // Use file_id or a combination for uniqueness
       return `file-annotation-${event.annotation.file_id || idx}`
     }
+    if (event.type === 'web_search') {
+      return `web-search-${event.id}`
+    }
   }
   // Fallback: use idx if id is not present
   return `message-${'id' in event ? (event as any).id : idx}`
@@ -164,6 +178,7 @@ export function Chat() {
   const [streamBuffer, setStreamBuffer] = useState<StreamEvent[]>([])
   const [streaming, setStreaming] = useState(false)
   const [useCodeInterpreter, setUseCodeInterpreter] = useState(false)
+  const [useWebSearch, setUseWebSearch] = useState(false)
   const { selectedModel, setSelectedModel } = useModel()
   const { user } = useUser()
 
@@ -283,8 +298,16 @@ export function Chat() {
       model: selectedModel,
       userId: user?.id,
       codeInterpreter: useCodeInterpreter,
+      webSearch: useWebSearch,
     }),
-    [selectedServers, servers, selectedModel, user?.id, useCodeInterpreter],
+    [
+      selectedServers,
+      servers,
+      selectedModel,
+      user?.id,
+      useCodeInterpreter,
+      useWebSearch,
+    ],
   )
 
   const handleError = useCallback((error: Error) => {
@@ -575,6 +598,52 @@ export function Chat() {
               return
             }
 
+            // --- Web Search streaming events ---
+            if (
+              toolState.type &&
+              toolState.type.startsWith('response.web_search_call.')
+            ) {
+              // Map event type to status
+              let status:
+                | 'in_progress'
+                | 'searching'
+                | 'completed'
+                | 'failed'
+                | 'result' = 'in_progress'
+              if (toolState.type.endsWith('in_progress')) status = 'in_progress'
+              else if (toolState.type.endsWith('searching'))
+                status = 'searching'
+              else if (toolState.type.endsWith('completed'))
+                status = 'completed'
+              else if (toolState.type.endsWith('failed')) status = 'failed'
+              else if (toolState.type.endsWith('result')) status = 'result'
+              setStreamBuffer((prev: StreamEvent[]) => {
+                const existingIdx = prev.findIndex(
+                  (e) => e.type === 'web_search' && e.id === toolState.item_id,
+                )
+                const newEvent: Extract<StreamEvent, { type: 'web_search' }> = {
+                  type: 'web_search',
+                  id: toolState.item_id,
+                  status,
+                  query: toolState.query,
+                  error: toolState.error,
+                  raw: toolState,
+                }
+                if (existingIdx !== -1) {
+                  // Replace the old event
+                  return [
+                    ...prev.slice(0, existingIdx),
+                    newEvent,
+                    ...prev.slice(existingIdx + 1),
+                  ]
+                } else {
+                  // Add new event
+                  return [...prev, newEvent]
+                }
+              })
+              return
+            }
+
             if ('delta' in toolState) {
               try {
                 toolState.delta =
@@ -816,6 +885,7 @@ export function Chat() {
     setInput('')
     setFocusTimestamp(Date.now())
     setUseCodeInterpreter(false)
+    setUseWebSearch(false)
 
     textBufferRef.current = ''
     lastAssistantIdRef.current = null
@@ -937,6 +1007,8 @@ export function Chat() {
                     }}
                   />
                 )
+              } else if ('type' in event && event.type === 'web_search') {
+                return <WebSearchMessage key={key} event={event} />
               } else {
                 // Fallback for Message type (from useChat)
                 const message = event as Message
@@ -1024,6 +1096,12 @@ export function Chat() {
                 selectedModel={selectedModel}
                 disabled={hasStartedChat}
               />
+              <WebSearchToggle
+                useWebSearch={useWebSearch}
+                onToggle={setUseWebSearch}
+                selectedModel={selectedModel}
+                disabled={hasStartedChat}
+              />
             </ServerSelector>
           </div>
         )}

src/components/CodeInterpreterToggle.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { CodeInterpreterToggle } from './CodeInterpreterToggle'
+import { useState } from 'react'
+
+const meta: Meta<typeof CodeInterpreterToggle> = {
+  title: 'UI/CodeInterpreterToggle',
+  component: CodeInterpreterToggle,
+  tags: ['autodocs'],
+  argTypes: {
+    selectedModel: {
+      control: 'text',
+      defaultValue: 'gpt-4',
+    },
+    disabled: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof CodeInterpreterToggle>
+
+const Template = (args: any) => {
+  const [enabled, setEnabled] = useState(args.useCodeInterpreter ?? false)
+  return (
+    <CodeInterpreterToggle
+      {...args}
+      useCodeInterpreter={enabled}
+      onToggle={setEnabled}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: Template,
+  args: {
+    useCodeInterpreter: false,
+    selectedModel: 'gpt-4',
+    disabled: false,
+  },
+}
+
+export const Enabled: Story = {
+  render: Template,
+  args: {
+    useCodeInterpreter: true,
+    selectedModel: 'gpt-4',
+    disabled: false,
+  },
+}
+
+export const Disabled: Story = {
+  render: Template,
+  args: {
+    useCodeInterpreter: false,
+    selectedModel: 'gpt-4',
+    disabled: true,
+  },
+}
+
+export const UnsupportedModel: Story = {
+  render: Template,
+  args: {
+    useCodeInterpreter: false,
+    selectedModel: 'unsupported-model',
+    disabled: false,
+  },
+}

src/components/CodeInterpreterToggle.tsx

@@ -1,6 +1,6 @@
-import { Toggle } from './ui/toggle'
 import { Code2 } from 'lucide-react'
 import { isCodeInterpreterSupported } from '@/lib/utils/prompting'
+import { ToolToggle } from './ToolToggle'
 
 interface CodeInterpreterToggleProps {
   useCodeInterpreter: boolean
@@ -16,18 +16,16 @@ export function CodeInterpreterToggle({
   disabled = false,
 }: CodeInterpreterToggleProps) {
   const isSupported = isCodeInterpreterSupported(selectedModel)
-  const isDisabled = disabled || !isSupported
 
   return (
-    <Toggle
+    <ToolToggle
       isSelected={useCodeInterpreter}
-      onToggle={() => onToggle(!useCodeInterpreter)}
-      disabled={isDisabled}
-      className={!isSupported ? 'opacity-50' : ''}
-      title={`Execute Python code for calculations, data analysis, and visualizations.${!isSupported ? ` Not supported by ${selectedModel}` : ''}`}
-    >
-      <Code2 className="h-4 w-4" />
-      <span className="sr-only text-sm md:not-sr-only">Code Interpreter</span>
-    </Toggle>
+      onToggle={onToggle}
+      isSupported={isSupported}
+      icon={<Code2 className="h-4 w-4" />}
+      label="Code Interpreter"
+      tooltip={`Execute Python code for calculations, data analysis, and visualizations.${!isSupported ? ` Not supported by ${selectedModel}` : ''}`}
+      disabled={!isSupported || disabled}
+    />
   )
 }

src/components/ToolToggle.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ToolToggle } from './ToolToggle'
+import { useState } from 'react'
+
+const meta: Meta<typeof ToolToggle> = {
+  title: 'UI/ToolToggle',
+  component: ToolToggle,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      defaultValue: 'Tool',
+    },
+    tooltip: {
+      control: 'text',
+      defaultValue: 'Toggle this tool',
+    },
+    disabled: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    isSupported: {
+      control: 'boolean',
+      defaultValue: true,
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof ToolToggle>
+
+const Template = (args: any) => {
+  const [selected, setSelected] = useState(args.isSelected ?? false)
+  return (
+    <ToolToggle
+      {...args}
+      isSelected={selected}
+      onToggle={setSelected}
+      icon={
+        <span role="img" aria-label="tool">
+          🛠️
+        </span>
+      }
+    />
+  )
+}
+
+export const Default: Story = {
+  render: Template,
+  args: {
+    isSelected: false,
+    isSupported: true,
+    label: 'Tool',
+    tooltip: 'Toggle this tool',
+    disabled: false,
+  },
+}
+
+export const Enabled: Story = {
+  render: Template,
+  args: {
+    isSelected: true,
+    isSupported: true,
+    label: 'Tool',
+    tooltip: 'Toggle this tool',
+    disabled: false,
+  },
+}
+
+export const Disabled: Story = {
+  render: Template,
+  args: {
+    isSelected: false,
+    isSupported: true,
+    label: 'Tool',
+    tooltip: 'Toggle this tool',
+    disabled: true,
+  },
+}
+
+export const Unsupported: Story = {
+  render: Template,
+  args: {
+    isSelected: false,
+    isSupported: false,
+    label: 'Tool',
+    tooltip: 'This tool is not supported',
+    disabled: false,
+  },
+}