Add o1

Author: arcticfly

package.json

@@ -28,7 +28,7 @@
     "framer-motion": "^8.4.3",
     "immer": "^9.0.21",
     "lodash": "^4.17.21",
-    "openai": "^3.2.1",
+    "openai": "^4.78.1",
     "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -37,6 +37,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.4.1",
     "react-use": "^17.4.0",
+    "sass": "^1.83.4",
     "zustand": "^4.3.6"
   },
   "devDependencies": {
@@ -72,7 +73,6 @@
     "html-webpack-plugin": "^5.5.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "node-sass": "^8.0.0",
     "sass-loader": "^13.2.0",
     "source-map-loader": "^3.0.1",
     "style-loader": "^3.3.1",

src/common/ModelDropdown.tsx

@@ -3,19 +3,13 @@ import React from 'react';
 import { useAppState } from '../state/store';
 
 const ModelDropdown = () => {
-  const { selectedModel, updateSettings } = useAppState((state) => ({
-    selectedModel: state.settings.selectedModel,
-    updateSettings: state.settings.actions.update,
-  }));
-
-  const { openAIKey } = useAppState((state) => ({
-    openAIKey: state.settings.openAIKey,
-  }));
+  const selectedModel = useAppState((state) => state.settings.selectedModel);
+  const updateSettings = useAppState((state) => state.settings.actions.update);
+  const openAIKey = useAppState((state) => state.settings.openAIKey);
 
   if (!openAIKey) return null;
 
   return (
-    // Chakra UI Select component
     <Select
       value={selectedModel || ''}
       onChange={(e) => updateSettings({ selectedModel: e.target.value })}
@@ -26,6 +20,7 @@ const ModelDropdown = () => {
       <option value="gpt-4-1106-preview">GPT-4 Turbo</option>
       <option value="gpt-4o">GPT-4o</option>
       <option value="gpt-4o-mini">GPT-4o mini</option>
+      <option value="o1">o1</option>
     </Select>
   );
 };

src/common/TaskHistory.tsx

@@ -93,7 +93,7 @@ const TaskHistoryItem = ({ index, entry }: TaskHistoryItemProps) => {
         </AccordionButton>
       </Heading>
       <AccordionPanel backgroundColor="gray.100" p="2">
-        <Accordion allowMultiple w="full" defaultIndex={1}>
+        <Accordion allowMultiple allowToggle w="full" defaultIndex={1}>
           <CollapsibleComponent
             title="Prompt"
             subtitle={`${entry.usage.prompt_tokens} tokens`}

src/helpers/determineNextAction.ts

@@ -1,8 +1,4 @@
-import {
-  Configuration,
-  CreateCompletionResponseUsage,
-  OpenAIApi,
-} from 'openai';
+import { OpenAI } from 'openai';
 import { useAppState } from '../state/store';
 import { availableActions } from './availableActions';
 import { ParsedResponseSuccess } from './parseResponse';
@@ -47,44 +43,45 @@ export async function determineNextAction(
     return null;
   }
 
-  const openai = new OpenAIApi(
-    new Configuration({
-      apiKey: key,
-    })
-  );
+  const openai = new OpenAI({
+    apiKey: key,
+    dangerouslyAllowBrowser: true,
+  });
 
   for (let i = 0; i < maxAttempts; i++) {
     try {
-      const completion = await openai.createChatCompletion({
-        model: model,
+      const completion = await openai.chat.completions.create({
+        model,
         messages: [
           {
             role: 'system',
             content: systemMessage,
           },
           { role: 'user', content: prompt },
         ],
-        max_tokens: 500,
-        temperature: 0,
+        max_completion_tokens: 5000,
+        reasoning_effort: model === 'o1' ? 'low' : undefined,
+        temperature: model === 'o1' ? undefined : 0,
         stop: ['</Action>'],
       });
 
+      console.log('completion', completion);
+
       return {
-        usage: completion.data.usage as CreateCompletionResponseUsage,
+        usage: completion.usage,
         prompt,
-        response:
-          completion.data.choices[0].message?.content?.trim() + '</Action>',
+        response: completion.choices[0].message?.content?.trim() + '</Action>',
       };
     } catch (error: any) {
       console.log('determineNextAction error', error);
-      if (error.response.data.error.message.includes('server error')) {
+      if (error.message.includes('server error')) {
         // Problem with the OpenAI API, try again
         if (notifyError) {
-          notifyError(error.response.data.error.message);
+          notifyError(error.message);
         }
       } else {
         // Another error, give up
-        throw new Error(error.response.data.error.message);
+        throw new Error(error.message);
       }
     }
   }

src/helpers/parseResponse.ts

@@ -9,8 +9,8 @@ export type ParsedResponseSuccess = {
 export type ParsedResponse =
   | ParsedResponseSuccess
   | {
-    error: string;
-  };
+      error: string;
+    };
 
 export function parseResponse(text: string): ParsedResponse {
   const thoughtMatch = text.match(/<Thought>(.*?)<\/Thought>/);
@@ -81,7 +81,11 @@ export function parseResponse(text: string): ParsedResponse {
       parsedArgs[expectedArg.name] = numberValue;
     } else if (expectedArg.type === 'string') {
       const stringValue =
-        (arg.startsWith('"') && arg.endsWith('"')) || (arg.startsWith("'") && arg.endsWith("'")) || (arg.startsWith("`") && arg.endsWith("`")) ? arg.slice(1, -1) : null;
+        (arg.startsWith('"') && arg.endsWith('"')) ||
+        (arg.startsWith("'") && arg.endsWith("'")) ||
+        (arg.startsWith('`') && arg.endsWith('`'))
+          ? arg.slice(1, -1)
+          : null;
 
       if (stringValue === null) {
         return {